*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0a0a0a;--fg:#e8e4df;--fg-muted:#e8e4df66;--accent:#e8e4df;--font-display:"Newsreader", serif;--font-mono:"DM Mono", monospace}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}html,body,#root{height:100%}body{background:var(--bg);color:var(--fg);font-family:var(--font-display)}#root{flex-direction:column;display:flex}main{flex-direction:column;min-height:100dvh;padding:3rem 3.5rem;display:flex}header{animation:.8s both fade-in}.header-row{justify-content:space-between;align-items:flex-start;gap:1.5rem;display:flex}.social-links{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:.55rem;display:flex}.social-links a{width:2.6rem;height:2.6rem;color:var(--fg-muted);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#e8e4df08;border:1px solid #e8e4df2e;border-radius:999px;justify-content:center;align-items:center;text-decoration:none;transition:color .25s,border-color .25s,background-color .25s,transform .25s;display:inline-flex}.social-links a:hover,.social-links a:focus-visible{color:var(--fg);background:#e8e4df14;border-color:#e8e4df66;transform:translateY(-2px)}.social-links a:focus-visible{outline:none}.social-links svg{width:1.15rem;height:1.15rem}.logo{font-family:var(--font-display);letter-spacing:-.03em;color:var(--fg);margin-bottom:.3em;font-size:clamp(2rem,5vw,3.2rem);font-style:italic;font-weight:400;line-height:1}.tagline{font-family:var(--font-display);color:var(--fg-muted);font-size:clamp(.85rem,1.5vw,1rem);font-weight:400;line-height:1}.oss-word{cursor:default}.oss-pen,.oss-ource,.oss-oftware{white-space:nowrap;vertical-align:middle;max-width:0;transition:max-width .7s cubic-bezier(.4,0,.6,1);display:inline-block;overflow:hidden}.oss-gap{width:0;transition:width .7s cubic-bezier(.4,0,.6,1);display:inline-block}.oss-word:hover .oss-pen{max-width:4ch;transition:max-width .75s cubic-bezier(.25,0,.1,1) 50ms}.oss-word:hover .oss-gap{width:.35em;transition:width .75s cubic-bezier(.25,0,.1,1) 50ms}.oss-word:hover .oss-ource{max-width:6ch;transition:max-width .75s cubic-bezier(.25,0,.1,1) 50ms}.oss-word:hover .oss-oftware{max-width:8ch;transition:max-width .75s cubic-bezier(.25,0,.1,1) 50ms}.projects{margin-top:4rem;animation:.8s .3s both fade-in}.site-footer{font-family:var(--font-display);letter-spacing:-.02em;color:var(--fg-muted);margin-top:auto;padding-top:3rem;font-size:clamp(.78rem,1.2vw,.9rem);font-style:italic;animation:.8s .45s both fade-in}.projects ul{list-style:none}.projects li{margin-bottom:.6rem}.project-row{font-family:var(--font-display);color:var(--fg);font-size:clamp(.95rem,1.8vw,1.15rem);display:inline-block;position:relative}.project-row a{color:inherit;cursor:pointer;text-decoration:none}.project-row .name{padding-bottom:2px;display:inline-block;position:relative}.project-row .name:before{content:"";background:#e8e4df47;height:1px;position:absolute;bottom:0;left:0;right:0}.project-row .name:after{content:"";width:var(--underline-width,0%);background:var(--fg);height:1px;position:absolute;bottom:0;left:0}.project-row .arrow{vertical-align:-.08em;opacity:.55;width:.85em;height:.85em;margin-left:.25em;transition:transform .3s,opacity .3s;display:inline-block}.project-row a:hover .arrow,.project-row a:focus-visible .arrow{opacity:1;transform:translate(2px,-2px)}.project-row .detail{white-space:nowrap;letter-spacing:-.03em;pointer-events:none;font-style:italic;display:inline}.project-row .detail .char{opacity:0;transition:opacity .35s ease var(--out), transform .35s ease var(--out);display:inline-block;transform:translateY(6px)}.project-row.is-hovered .detail .char{opacity:1;transition:opacity .35s ease var(--in), transform .35s ease var(--in);transform:translateY(0)}.project-row .preview{opacity:0;pointer-events:none;z-index:100;border:1px solid #e8e4df1f;border-radius:8px;width:320px;height:200px;margin-top:.75rem;transition:opacity .3s,transform .3s;position:absolute;top:100%;left:0;overflow:hidden;transform:translateY(8px);box-shadow:0 8px 32px #0006}.project-row .preview iframe{transform-origin:0 0;pointer-events:none;border:none;width:1280px;height:800px;transform:scale(.25)}.project-row.is-hovered .preview{opacity:1;transform:translateY(0)}@media (width<=640px){main{padding:2rem 1.25rem 2.5rem}.header-row{flex-direction:column;align-items:flex-start}.social-links{justify-content:flex-start}}@keyframes project-spotlight{0%{opacity:1;filter:brightness();transform:none}12%{opacity:1;filter:brightness(2.2);transform:translate(3px)translateY(-2px)}28%{filter:brightness(1.5);transform:translate(1px)translateY(-1px)}55%{filter:brightness(1.15);transform:none}to{filter:brightness();opacity:1;transform:none}}@keyframes arrow-ping{0%,to{opacity:.55;transform:translate(0)}20%{opacity:1;transform:translate(5px,-5px)}45%{opacity:.8;transform:translate(2px,-2px)}}.projects-spotlight .project-row{animation:2s cubic-bezier(.25,.46,.45,.94) forwards project-spotlight}.projects-spotlight .project-row .arrow{animation:2s forwards arrow-ping}@keyframes fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}