@font-face{font-family:Manrope;src:url('assets/manrope-regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url('assets/manrope-medium.ttf') format('truetype');font-style:normal;font-weight:500;font-display:swap}
:root{color-scheme:dark;--font-size:14px;--background:#0b0b0b;--heading:#efefed;--body:#b7b8bd;--muted:#a4a6ae;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}
html{background:var(--background);scrollbar-gutter:stable}
body{margin:0;color:var(--body);font-family:Manrope,Arial,sans-serif;font-size:var(--font-size);font-weight:400;line-height:1.65;-webkit-font-smoothing:antialiased}
main{width:min(568px,calc(100% - 48px));margin:144px auto 100px}
main > header{text-align:center}
h1{margin:0;color:var(--heading);font-size:var(--font-size);font-weight:500;line-height:1.25;letter-spacing:0}
.intro{margin:4px 0 0;font-size:var(--font-size);line-height:1.6;letter-spacing:0}
.sections{margin-top:36px}
details{margin:0;overflow:hidden}
summary{display:flex;align-items:center;gap:24px;min-height:64px;cursor:pointer;list-style:none;color:var(--heading);transition:color 180ms ease;user-select:none}
summary::-webkit-details-marker{display:none}
summary h2{margin:0;font-size:var(--font-size);line-height:1.5;font-weight:500;letter-spacing:0}
svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;flex:none}
summary svg{transition:transform 380ms var(--ease);width:16px;height:16px}
details[open] summary svg{transform:rotate(90deg)}
details[data-closing] summary svg{transform:rotate(0deg)}
.content{padding:0 0 22px 40px}
p{margin:0 0 14px}
p:last-child{margin-bottom:0}
a{color:var(--heading);text-underline-offset:4px;text-decoration-color:#62636a;text-decoration-thickness:1px;transition:color 180ms ease,text-decoration-color 180ms ease}
a:hover{color:#fff;text-decoration-color:#fff}
summary:hover{color:#fff}
summary:focus-visible,a:focus-visible{outline:1px solid #a6a6a6;outline-offset:5px;border-radius:2px}
summary:focus-visible{outline-offset:-2px}
.projects{list-style:none;margin:0;padding:0}
.projects li+li{margin-top:21px}
.projects a{position:relative;display:inline-flex;align-items:center;gap:8px;font-weight:500;text-decoration:none}
.projects a svg{width:13px;height:13px;color:var(--muted);transition:transform 200ms var(--ease)}
.projects a:hover svg{transform:translate(2px,-2px)}
.projects p{margin-top:3px;font-size:var(--font-size)}
footer{display:flex;justify-content:center;gap:30px;margin-top:56px;font-size:var(--font-size)}
footer a{position:relative;color:var(--muted);text-decoration:none;padding:10px 0}
footer a::after,.projects a::after{content:"";position:absolute;left:0;right:0;bottom:7px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform 260ms var(--ease)}
footer a:hover::after,footer a:focus-visible::after,.projects a:hover::after,.projects a:focus-visible::after{transform:scaleX(1);transform-origin:left}
.projects a::after{right:21px;bottom:0}
::selection{background:#d2d2cc;color:#0b0b0b}
@media(max-width:600px){main{margin-top:64px;margin-bottom:64px}h1{font-size:var(--font-size);letter-spacing:0}.intro{font-size:var(--font-size)}.sections{margin-top:28px}summary{gap:16px;min-height:60px}.content{padding-left:32px}footer{margin-top:34px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(min-width:601px) and (max-height:800px){main{margin-top:80px;margin-bottom:56px}.sections{margin-top:28px}summary{min-height:56px}footer{margin-top:28px}}