@font-face{font-family:GeistPixel;src:url('./fonts/GeistPixel-Square.woff2') format('woff2');font-display:swap}
:root{color-scheme:light;--bg:#fbfaf9;--ink:#20201f;--muted:#858480;--line:#e9e7e4;--surface:#f1f0ee;--blue:#487bff;--orange:#c96c2d;--green:#508361;--modal:#fbfaf9;--shadow:0 20px 80px #26201c18}
:root[data-theme=dark]{color-scheme:dark;--bg:#181918;--ink:#e9e8e4;--muted:#93948e;--line:#30322f;--surface:#242623;--blue:#8ba8ff;--orange:#e9a168;--green:#99bb91;--modal:#1e201d;--shadow:0 20px 80px #0006}
*{box-sizing:border-box}html{scroll-behavior:smooth;scrollbar-gutter:stable}body{margin:0;background:var(--bg);color:var(--ink);font:13px/1.7 GeistPixel,ui-monospace,SFMono-Regular,Consolas,monospace;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,summary,a{touch-action:manipulation}button{border:0;background:none}button:disabled{cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--blue);outline-offset:5px;border-radius:3px}::selection{background:#487bff30}h1,h2,p,figure{margin:0}h1,h2{font-size:inherit;font-weight:400}.page{width:min(512px,calc(100% - 48px));margin:92px auto 30px}.identity{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;min-height:28px}.identity-alias{color:var(--muted);font-size:11px;margin-left:5px}.controls{display:flex;gap:10px;align-items:center}.control{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:4px;color:var(--muted);font-size:11px;border-radius:4px;transition:color .18s,background .18s,transform .18s}.control:hover{color:var(--ink);background:var(--surface)}.control:active{transform:scale(.94)}.control svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.control[aria-pressed=false]#soundToggle svg{opacity:.5}.intro p{line-height:1.72}.intro-secondary{margin-top:14px;color:var(--muted)}.intro-secondary a{color:var(--ink)}.inline-chip{display:inline-flex;gap:4px;align-items:center;line-height:1.4;background:var(--surface);border:1px solid var(--line);border-radius:5px;padding:1px 5px;white-space:nowrap;transition:transform .18s,box-shadow .18s}.inline-chip:hover{transform:translateY(-2px);box-shadow:0 2px 0 var(--line)}.mini-mark{width:13px;height:13px;display:inline-grid;place-items:center;font:11px/1 sans-serif;color:white;border-radius:3px}.market{background:#3976cf}.field{background:#557657}.text-link{border-bottom:1px solid var(--line);transition:border-color .2s}.text-link:hover{border-color:var(--ink)}.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);margin-top:33px;padding-top:16px}.facts a{display:flex;flex-direction:column;padding:0 13px;border-right:1px solid var(--line);line-height:1.5}.facts a:first-child{padding-left:0}.facts a:last-child{border:0}.facts strong{font-size:20px;font-weight:400}.facts .fact-github{font-size:14px;line-height:30px}.facts span{font-size:10px;color:var(--muted);white-space:nowrap}.facts a:hover strong{color:var(--blue)}.section{margin-top:54px}.section h2{color:var(--muted);font-size:12px;margin-bottom:12px}.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.section-header h2{margin:0}.filters{display:flex;gap:3px}.filters button{font-size:10px;color:var(--muted);padding:2px 6px;border-radius:4px;transition:background .2s,color .2s}.filters button:hover{color:var(--ink)}.filters button[aria-pressed=true]{background:var(--surface);color:var(--ink)}.tree{padding-left:8px}.folder{border-left:1px solid var(--line);padding-left:18px;position:relative}.folder:before{content:'';position:absolute;left:0;top:18px;width:11px;border-top:1px solid var(--line)}.folder:last-child{border-image:linear-gradient(to bottom,var(--line) 18px,transparent 18px) 1}.folder summary{display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer;padding:6px 0;color:var(--muted);user-select:none;min-height:36px}.folder summary::-webkit-details-marker{display:none}.folder-icon{width:15px;height:15px;fill:none;stroke:var(--blue);stroke-width:1.2;stroke-linejoin:round}.apps-folder .folder-icon{stroke:var(--orange)}.folder[open] summary{color:var(--blue)}.apps-folder[open] summary{color:var(--orange)}.folder-count{color:var(--muted);font-size:10px;margin-left:3px;opacity:.65}.branches{margin:2px 0 8px 8px;border-left:1px solid color-mix(in srgb,var(--blue) 20%,transparent)}.apps-folder .branches{border-color:color-mix(in srgb,var(--orange) 20%,transparent)}.project-row{display:flex;align-items:center;gap:8px;position:relative;min-height:37px;padding:5px 0 5px 19px;border-radius:4px;transition:background .18s,color .18s}.project-row:before{content:'';position:absolute;left:0;top:18px;width:11px;border-top:1px solid color-mix(in srgb,var(--blue) 24%,transparent)}.apps-folder .project-row:before{border-color:color-mix(in srgb,var(--orange) 24%,transparent)}.project-row:hover{background:var(--surface)}.project-name{display:flex;align-items:center;gap:7px;font-size:12px;white-space:nowrap}.badge{font-size:9px;line-height:1.8;padding:0 4px;background:color-mix(in srgb,var(--blue) 10%,transparent);color:var(--blue);border-radius:3px}.badge.live{background:color-mix(in srgb,var(--green) 11%,transparent);color:var(--green)}.project-type{margin-left:auto;color:var(--muted);font-size:10px;white-space:nowrap}.project-type:before{content:'// ';opacity:.35}.row-arrow{width:0;opacity:0;color:var(--muted);transition:width .2s,opacity .2s}.project-row:hover .row-arrow,.project-row:focus-visible .row-arrow{width:12px;opacity:1}.section-note{color:var(--ink);font-size:12px}.skill-strip{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}.skill-strip span{font-size:10px;border:1px solid var(--line);padding:3px 6px;border-radius:3px;color:var(--muted)}.connect p{line-height:1.75}.small-note{color:var(--muted);font-size:10px}.photo-stack{display:flex;align-items:center;justify-content:center;padding:26px 8px 14px;height:173px}.photo{display:block;position:relative;flex:0 0 132px;margin-left:-12px;padding:6px 6px 4px;background:var(--modal);border:1px solid var(--line);box-shadow:0 3px 7px #0000000b,0 1px 2px #0000000b;transform:translateY(var(--lift)) rotate(var(--tilt));transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s;transform-origin:50% 80%;border-radius:2px}.photo:first-child{margin-left:0}.photo img{display:block;width:118px;height:88px;object-fit:cover;object-position:left top;background:var(--surface);filter:saturate(.75)}.photo:nth-child(3) img{object-position:top;object-fit:cover}.photo span{display:block;text-align:center;font-size:8px;line-height:2.3;color:var(--muted)}.photo:hover,.photo:focus-visible{transform:translateY(-14px) rotate(0) scale(1.22);z-index:2;box-shadow:0 10px 25px #0002}.site-footer{border-top:1px solid var(--line);margin-top:40px;padding-top:20px;display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:10px}.status-dot{display:inline-block;width:5px;height:5px;background:var(--green);border-radius:50%;margin-right:7px}.footer-actions{display:flex;gap:12px;align-items:center}.secret-zone{position:relative;display:flex;align-items:center;gap:7px}.mascot{display:flex;align-items:center;justify-content:center;gap:3px;width:23px;height:23px;border-radius:6px;background:var(--surface)}.mascot span{background:var(--ink);border-radius:50%;width:3px;height:6px;transition:transform .2s}.mascot:hover span{transform:translateX(2px)}#secretLogin{font-size:18px;position:absolute;right:-25px}.colophon{margin-top:21px;color:var(--muted);font-size:8px;line-height:1.8;opacity:.7}.colophon span{display:block}.colophon a:hover{text-decoration:underline}.project-dialog{border:1px solid var(--line);border-radius:12px;padding:0;width:min(780px,calc(100% - 32px));max-height:90dvh;background:var(--modal);color:var(--ink);box-shadow:var(--shadow);font:13px/1.7 GeistPixel,monospace}.project-dialog::backdrop{background:#15181960;backdrop-filter:blur(6px)}.project-dialog[open]{animation:dialog-in .22s ease-out}.dialog-shell{padding:25px 30px 30px}.dialog-header{display:flex;align-items:center;justify-content:space-between;gap:20px;color:var(--muted);font-size:10px;margin-bottom:14px}.close-button{font-size:25px;width:32px;height:32px;line-height:1}.project-dialog h2{font-size:22px;letter-spacing:-.5px;line-height:1.3;max-width:600px}.dialog-description{color:var(--muted);margin-top:13px;max-width:650px}.project-figure{margin:24px 0}.project-figure img{display:block;width:100%;max-height:360px;object-fit:contain;background:var(--surface);border:1px solid var(--line);border-radius:5px}.project-figure figcaption{font-size:9px;color:var(--muted);margin-top:7px}.case-columns{display:grid;grid-template-columns:1fr 1fr;gap:24px}.case-columns h3{font-size:11px;font-weight:400;color:var(--muted);margin:0 0 7px}.case-columns p,.case-columns li{font-size:12px}.case-columns ul{padding-left:15px;margin:0}.tech-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px}.tech-tags span{border:1px solid var(--line);border-radius:4px;padding:2px 6px;color:var(--muted);font-size:10px}.dialog-actions{display:flex;flex-wrap:wrap;gap:10px;border-top:1px solid var(--line);margin-top:24px;padding-top:18px}.action-link{background:var(--ink);color:var(--bg);border:1px solid var(--ink);padding:8px 12px;border-radius:5px;font-size:11px;transition:transform .15s}.action-link:hover{transform:translateY(-2px)}.action-link.secondary{background:var(--surface);color:var(--ink);border-color:var(--line)}body:has(dialog[open]){overflow:hidden}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,10px);background:var(--ink);color:var(--bg);font-size:12px;padding:8px 16px;border-radius:5px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}.toast.visible{opacity:1;transform:translate(-50%,0)}.skip-link{position:fixed;top:-60px;left:20px;padding:8px 12px;background:var(--ink);color:var(--bg);z-index:5}.skip-link:focus{top:12px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}@keyframes dialog-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:560px){.page{margin-top:42px;width:calc(100% - 40px)}.identity{margin-bottom:25px}.facts a{padding:0 8px}.facts span{font-size:8px}.facts strong{font-size:18px}.section{margin-top:40px}.project-name{font-size:11px;gap:5px}.project-type{font-size:8px}.badge{font-size:8px}.project-row{gap:4px;padding-left:15px}.photo{flex-basis:27%;margin-left:-6px}.photo img{width:100%;height:76px}.photo span{font-size:6px}.photo-stack{height:145px;padding-left:0;padding-right:0}.dialog-shell{padding:17px}.project-dialog h2{font-size:19px}.case-columns{grid-template-columns:1fr;gap:18px}.site-footer{margin-top:25px}.small-note{font-size:9px}.project-type:before{content:''}}
@media(max-width:370px){.project-row{align-items:flex-start;flex-wrap:wrap;gap:0;padding:7px 0 7px 15px}.project-type{flex-basis:100%;margin-left:0}.row-arrow{display:none}.facts span{font-size:7px}.photo span{font-size:5px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.photo:hover,.photo:focus-visible{transform:rotate(0)}}
/* Photo titles reveal above the lifted print, one letter at a time. */
.photo{padding-bottom:14px}
.photo>.photo-title{position:absolute;left:0;bottom:calc(100% + 7px);width:max-content;max-width:180px;margin:0;padding:2px 5px;background:var(--modal);border:1px solid var(--line);border-radius:3px;box-shadow:0 2px 7px #00000008;color:var(--ink);font-size:9px;line-height:1.5;text-align:left;white-space:nowrap;opacity:0;pointer-events:none;transform:translateY(3px);transition:opacity .14s,transform .2s}
.photo .photo-title .photo-letter{display:inline-block;font:inherit;line-height:inherit;color:inherit;white-space:pre;opacity:0;filter:blur(3px);transform:translateY(5px);transition:opacity .2s,filter .25s,transform .25s;transition-delay:0s}
.photo:hover>.photo-title,.photo:focus-visible>.photo-title{opacity:1;transform:translateY(0)}
.photo:hover .photo-title .photo-letter,.photo:focus-visible .photo-title .photo-letter{opacity:1;filter:blur(0);transform:translateY(0);transition-delay:calc(var(--letter-index) * 18ms)}
@media(prefers-reduced-motion:reduce){.photo .photo-title .photo-letter{filter:none;transform:none}.photo>.photo-title{transform:none}}