main{width:100%;min-height:100vh;margin:0;padding:0;display:block}html{scroll-behavior:smooth;scrollbar-width:none}html::-webkit-scrollbar{display:none}body{background:var(--bg);min-width:320px;color:var(--fg);margin:0}.portfolio{width:100%;min-height:100vh;padding:56px 0 120px;position:relative}.portfolio-inner{width:min(100% - 48px,880px);margin:0 auto}.site-controls{z-index:20;align-items:center;gap:8px;display:flex;position:fixed;top:20px;right:20px}.control-btn{width:40px;height:40px;color:var(--fg-muted);cursor:pointer;background:var(--surface);border:0;border-radius:999px;justify-content:center;align-items:center;padding:0;transition-property:color,background-color,transform;transition-duration:.16s;transition-timing-function:cubic-bezier(.2,0,0,1);display:inline-flex;position:relative}.control-btn:hover{color:var(--fg);background:var(--surface-hover)}.control-btn:active{transform:scale(.96)}.control-btn:focus-visible{outline:2px solid var(--fg);outline-offset:3px}.volume-control{background:var(--surface);border-radius:999px;align-items:center;height:40px;padding-right:0;transition-property:background-color;transition-duration:.16s;transition-timing-function:cubic-bezier(.2,0,0,1);display:flex;overflow:hidden}.volume-control.is-open{background:var(--surface-hover)}.volume-toggle{background:0 0;flex:none}.volume-control.is-open .volume-toggle,.volume-control:hover .volume-toggle{color:var(--fg);background:0 0}.volume-slider-shell{opacity:0;pointer-events:none;align-items:center;width:0;transition-property:width,opacity,transform,padding;transition-duration:.28s;transition-timing-function:cubic-bezier(.2,0,0,1);display:grid;overflow:hidden;transform:translate(6px)}.volume-control.is-open .volume-slider-shell{opacity:1;pointer-events:auto;width:104px;padding-right:14px;transform:translate(0)}.volume-slider{appearance:none;cursor:pointer;background:0 0;width:100%;height:18px;margin:0}.volume-slider:focus-visible{outline:none}.volume-slider::-webkit-slider-runnable-track{background:color-mix(in srgb, var(--fg) 16%, transparent);border-radius:999px;height:3px}.volume-slider::-webkit-slider-thumb{appearance:none;background:var(--fg);border:0;border-radius:999px;width:12px;height:12px;margin-top:-4.5px;transition-property:transform;transition-duration:.14s;transition-timing-function:cubic-bezier(.2,0,0,1);box-shadow:0 1px 2px #0000001f}.volume-slider:active::-webkit-slider-thumb{transform:scale(1.08)}.volume-slider::-moz-range-track{background:color-mix(in srgb, var(--fg) 16%, transparent);border:0;border-radius:999px;height:3px}.volume-slider::-moz-range-progress{background:color-mix(in srgb, var(--fg) 55%, transparent);border:0;border-radius:999px;height:3px}.volume-slider::-moz-range-thumb{background:var(--fg);border:0;border-radius:999px;width:12px;height:12px;box-shadow:0 1px 2px #0000001f}.theme-toggle{position:relative}.theme-icon{opacity:0;filter:blur(4px);place-items:center;transition-property:opacity,transform,filter;transition-duration:.22s;transition-timing-function:cubic-bezier(.2,0,0,1);display:grid;position:absolute;inset:0;transform:scale(.25)}.theme-icon.active{opacity:1;filter:blur();transform:scale(1)}@media (prefers-reduced-motion:reduce){.theme-icon{transition:none}}.hero{text-align:center;flex-direction:column;align-items:center;gap:48px;padding:88px 0 96px;display:flex}.identity{flex-direction:column;align-items:center;gap:6px;display:flex}.name,.role,.eyebrow,.project-line h3,.project-status,.project-description{margin:0;font-size:14px;line-height:1.45}.name{letter-spacing:-.03em;font-size:clamp(1.75rem,3vw,2.15rem);font-weight:500;line-height:1.15}.role{color:var(--fg-muted);letter-spacing:-.01em;font-size:15px}.intro{flex-direction:column;align-items:center;display:flex}.eyebrow{color:var(--fg-muted);letter-spacing:.07em;text-transform:uppercase;margin-bottom:16px;font-size:13px;font-weight:400}h1{letter-spacing:-.02em;text-wrap:balance;max-width:28ch;color:var(--fg-muted);margin:0 auto;font-family:Geist,Arial,sans-serif;font-size:clamp(1.15rem,2.2vw,1.35rem);font-weight:400;line-height:1.45}.hero-line{display:block}.archive-section{padding-top:88px}.section-heading{text-align:center;flex-direction:column;align-items:center;gap:12px;max-width:40ch;margin:0 auto;display:flex}.section-heading .eyebrow{margin:0}h2{letter-spacing:-.03em;margin:0;font-family:Geist,Arial,sans-serif;font-size:clamp(1.75rem,3vw,2.15rem);font-weight:500;line-height:1.15}.section-description{max-width:42ch;color:var(--fg-muted);text-wrap:pretty;margin:2px 0 0;font-size:15px;line-height:1.6}.project-list{margin-top:20px}.project-row{color:inherit;border-radius:14px;margin:0 -14px;padding:20px 14px;text-decoration:none;transition-property:background-color;transition-duration:.16s;transition-timing-function:cubic-bezier(.2,0,0,1);display:block}@media (hover:hover) and (pointer:fine){.project-row:hover{background:var(--surface)}.project-row:hover .project-arrow{color:var(--fg);transform:translate(2px,-2px)}}.project-row:focus-visible{outline:2px solid var(--fg);outline-offset:2px}.project-line{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 16px;display:flex}.project-line h3{letter-spacing:-.02em;align-items:center;gap:6px;min-width:0;font-size:15px;font-weight:500;line-height:1.3;display:flex}.project-arrow{color:var(--fg-subtle);flex-shrink:0;transition-property:color,transform;transition-duration:.16s;transition-timing-function:cubic-bezier(.2,0,0,1)}.project-status{white-space:nowrap;border-radius:999px;align-items:center;gap:6px;padding:3px 10px;font-size:12px;font-weight:500;line-height:1.4;display:inline-flex}.status-dot{background:currentColor;border-radius:999px;flex-shrink:0;width:6px;height:6px}.project-status[data-tone=active]{color:var(--status-active-fg);background:var(--status-active-bg)}.project-status[data-tone=wip]{color:var(--status-wip-fg);background:var(--status-wip-bg)}.project-status[data-tone=offline]{color:var(--status-offline-fg);background:var(--status-offline-bg)}.project-status[data-tone=wip] .status-dot{animation:2.4s cubic-bezier(.4,0,.6,1) infinite project-status-pulse}@keyframes project-status-pulse{0%,to{opacity:1}50%{opacity:.35}}@media (prefers-reduced-motion:reduce){.project-status[data-tone=wip] .status-dot{animation:none}}.project-description{max-width:60ch;color:var(--fg-subtle);text-wrap:pretty;margin-top:4px;font-size:14px;line-height:1.55}.designs-section{width:min(100% - 24px,1480px);margin:0 auto;padding-top:112px}.designs-section .section-heading{margin-bottom:40px}.designs-meta{color:var(--fg-subtle);font-variant-numeric:tabular-nums;justify-content:center;align-items:center;gap:10px;margin:6px 0 0;font-size:12px;display:flex}.designs-meta-dot{opacity:.6;background:currentColor;border-radius:999px;width:3px;height:3px}.moodboard{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;display:grid}.design-tile{aspect-ratio:3/4;cursor:pointer;background:var(--surface);content-visibility:auto;contain-intrinsic-size:auto 420px;border:0;border-radius:8px;width:100%;padding:0;transition-property:transform;transition-duration:.22s;transition-timing-function:cubic-bezier(.2,0,0,1);display:block;position:relative;overflow:hidden}.design-tile:after{content:"";z-index:3;border-radius:inherit;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--fg) 8%, transparent);pointer-events:none;position:absolute;inset:0}.design-tile-skeleton{background:linear-gradient(110deg, transparent 30%, #ffffff47 48%, transparent 64%), var(--surface);background-size:200% 100%,100% 100%;animation:1.4s ease-in-out infinite design-skeleton-shine;position:absolute;inset:0}[data-theme=dark] .design-tile-skeleton{background:linear-gradient(110deg, transparent 30%, #ffffff0f 48%, transparent 64%), var(--surface);background-size:200% 100%,100% 100%}.design-tile.is-loaded .design-tile-skeleton{opacity:0;pointer-events:none;transition-property:opacity;transition-duration:.24s;transition-timing-function:cubic-bezier(.2,0,0,1);animation:none}.design-tile img{object-fit:cover;opacity:0;width:100%;height:100%;transition-property:opacity,transform;transition-duration:.32s,.62s;transition-timing-function:cubic-bezier(.2,0,0,1);display:block;position:absolute;inset:0}.design-tile.is-loaded img{opacity:1}.design-tile-caption{z-index:2;text-align:left;opacity:0;pointer-events:none;background:linear-gradient(#0000 0%,#00000057 34%,#000000b8 68%,#000000e0 100%);flex-direction:column;gap:4px;padding:46px 12px 11px;transition-property:opacity,transform;transition-duration:.22s,.26s;transition-timing-function:cubic-bezier(.2,0,0,1);display:flex;position:absolute;inset:auto 0 0;transform:translateY(6px)}.design-tile-head{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.design-tile-title{color:#fff;letter-spacing:-.01em;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;font-weight:500;overflow:hidden}.design-tile-date{color:#ffffff8c;font-variant-numeric:tabular-nums;flex-shrink:0;font-size:10.5px}.design-tile-song{color:#ffffffad;text-overflow:ellipsis;white-space:nowrap;align-items:center;gap:5px;font-size:11px;line-height:1.35;display:flex;overflow:hidden}.design-tile-song svg{flex-shrink:0}@keyframes design-skeleton-shine{0%{background-position:120% 0,0 0}to{background-position:-80% 0,0 0}}@media (hover:hover) and (pointer:fine){.design-tile:hover img{transform:scale(1.045)}.design-tile:hover .design-tile-caption{opacity:1;transform:translateY(0)}}.design-tile:active{transform:scale(.985)}.design-tile:focus-visible{z-index:4;outline:2px solid var(--fg);outline-offset:3px}.design-tile:focus-visible .design-tile-caption{opacity:1;transform:translateY(0)}.lightbox{z-index:30;background:var(--overlay);-webkit-backdrop-filter:blur(8px)saturate(1.1);place-items:center;padding:clamp(16px,2.5vw,36px);display:grid;position:fixed;inset:0}.lightbox-close{z-index:4;color:#ffffffb8;cursor:pointer;background:#ffffff14;border:0;border-radius:999px;place-items:center;width:38px;height:38px;padding:0;transition-property:color,background-color,transform;transition-duration:.16s;transition-timing-function:cubic-bezier(.2,0,0,1);display:grid;position:absolute;top:clamp(14px,2.4vw,26px);right:clamp(14px,2.4vw,26px)}@media (hover:hover) and (pointer:fine){.lightbox-close:hover{color:#fff;background:#ffffff29}}.lightbox-close:active{transform:scale(.92)}.lightbox-shell{overscroll-behavior:contain;pointer-events:none;transform-origin:50%;flex-direction:column;align-items:stretch;gap:28px;width:fit-content;max-width:100%;max-height:100%;display:flex;position:relative;overflow-y:auto}.lightbox-shell>*{pointer-events:auto}.lightbox-image-stage{cursor:zoom-in;touch-action:none;border-radius:0;flex:none;width:fit-content;max-width:100%;max-height:min(72vh,100dvh - 200px);line-height:0;display:block;position:relative;overflow:hidden}.lightbox-image-stage:not(.is-loaded){aspect-ratio:2/3;width:min(72vw,320px)}.lightbox-image-stage.zoomed{cursor:grab}.lightbox-image-stage.panning{cursor:grabbing}.lightbox-image-stage img{outline-offset:-1px;opacity:0;transform-origin:50%;border-radius:0;outline:1px solid #ffffff1a;width:auto;max-width:min(100vw - 36px,640px);height:auto;max-height:min(72vh,100dvh - 200px);transition-property:transform,opacity;transition-duration:.2s,.28s;transition-timing-function:cubic-bezier(.2,0,0,1);display:block}.lightbox-image-stage.is-loaded img{opacity:1}.lightbox-image-stage.panning img{transition-duration:0s,.28s}.lightbox-skeleton{background:linear-gradient(110deg,#0000 30%,#ffffff12 48%,#0000 64%) 0 0/200% 100%,#ffffff0a 0 0/100% 100%;border-radius:0;animation:1.4s ease-in-out infinite design-skeleton-shine;position:absolute;inset:0}.lightbox-image-stage.is-loaded .lightbox-skeleton{opacity:0;pointer-events:none;transition-property:opacity;transition-duration:.26s;transition-timing-function:cubic-bezier(.2,0,0,1);animation:none}.lightbox-zoom-chip{color:#ffffffe6;font-variant-numeric:tabular-nums;-webkit-backdrop-filter:blur(6px);opacity:0;pointer-events:none;background:#0000008c;border-radius:999px;justify-content:center;align-items:center;height:24px;padding:0 9px;font-size:11px;font-weight:500;line-height:1;transition-property:opacity,transform;transition-duration:.18s,.2s;transition-timing-function:cubic-bezier(.2,0,0,1);display:inline-flex;position:absolute;bottom:12px;left:12px;transform:translateY(4px)scale(.96)}.lightbox-zoom-chip.is-visible{opacity:1;transform:translateY(0)scale(1)}.lightbox-meta{color:#f5f5f5;box-sizing:border-box;flex-direction:column;align-items:flex-start;gap:0;width:100%;max-width:100%;padding:2px 2px 0;display:flex}#lightbox-title{letter-spacing:-.02em;color:#f5f5f5;text-wrap:balance;margin:0;font-size:clamp(1.25rem,2vw,1.5rem);font-weight:500;line-height:1.2}.lightbox-date{color:#ffffff80;font-variant-numeric:tabular-nums;margin:8px 0 0;font-size:12px}.lightbox-description{color:#ffffffad;text-wrap:pretty;max-width:42ch;margin:14px 0 0;font-size:13.5px;line-height:1.62}.song-link{color:#ffffffd9;background:#ffffff12;border:0;border-radius:12px;align-self:flex-start;align-items:center;gap:10px;max-width:100%;margin-top:16px;padding:9px 12px 9px 10px;text-decoration:none;transition-property:background-color,transform;transition-duration:.18s,.16s;transition-timing-function:cubic-bezier(.2,0,0,1);display:inline-flex}@media (hover:hover) and (pointer:fine){.song-link:not(.is-static):hover{background:#ffffff24}}.song-link:not(.is-static):active{transform:scale(.975)}.song-glyph{color:#ffffffd9;background:#ffffff1a;border-radius:8px;flex-shrink:0;place-items:center;width:26px;height:26px;display:grid}.song-text{flex-direction:column;gap:1px;min-width:0;display:flex}.song-title{letter-spacing:-.005em;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;font-weight:500;overflow:hidden}.song-artist{color:#ffffff80;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;overflow:hidden}.song-link>svg:last-child{color:#ffffff73;flex-shrink:0}.song-eq{align-items:flex-end;gap:2px;height:11px;display:flex}.song-eq i{transform-origin:bottom;background:currentColor;border-radius:1px;width:2px;height:100%;animation:.9s ease-in-out infinite alternate song-eq}.song-eq i:first-child{animation-duration:.76s}.song-eq i:nth-child(2){animation-duration:1.04s;animation-delay:-320ms}.song-eq i:nth-child(3){animation-duration:.88s;animation-delay:-560ms}@keyframes song-eq{0%{transform:scaleY(.28)}to{transform:scaleY(1)}}.lightbox :is(a,button):focus-visible{outline-offset:3px;outline:2px solid #fff}@media (width>=901px){.lightbox-image-stage{max-width:none;max-height:none}.lightbox-image-stage img{max-width:min(72vw,100vw - 80px,820px);max-height:min(82vh,100dvh - 200px)}}@media (width>=1200px) and (width<=1599px) and (hover:hover) and (pointer:fine){.lightbox-shell{box-sizing:border-box;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(240px,300px) minmax(0,1fr);align-items:start;column-gap:clamp(24px,3vw,48px);width:100%;max-width:none;height:100%;max-height:none;padding:clamp(16px,2vh,28px) clamp(16px,2vw,28px);display:grid;overflow:visible}.lightbox-meta{grid-area:1/1;width:100%;max-width:none;padding:4px 0 0;position:static}.lightbox-image-stage{grid-area:1/2;place-self:center;max-width:100%;max-height:100%}.lightbox-image-stage img{max-width:min(100%,100vw - 380px,860px);max-height:min(90vh,100dvh - 56px)}}@media (width>=1600px) and (hover:hover) and (pointer:fine){.lightbox-shell{place-items:center;width:100%;max-width:none;height:100%;max-height:none;padding:0;display:grid;overflow:visible}.lightbox-image-stage{max-width:none;max-height:none}.lightbox-image-stage img{max-width:min(70vw,920px);max-height:min(90vh,100dvh - 48px)}.lightbox-meta{z-index:3;width:min(300px,50vw - 500px);max-width:300px;padding:0;position:absolute;top:clamp(16px,2.2vh,28px);left:clamp(16px,2vw,28px)}}@media (prefers-reduced-motion:reduce){.design-tile-skeleton,.lightbox-skeleton,.song-eq i{animation:none}.design-tile,.design-tile img,.design-tile-caption{transition:none}}@media (width<=1100px){.moodboard{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (width<=900px){.lightbox-shell{gap:24px}.lightbox-image-stage{max-height:min(78vh,100dvh - 180px)}.lightbox-image-stage img{max-width:calc(100vw - 36px);max-height:min(78vh,100dvh - 180px)}#lightbox-title{font-size:1.2rem}}@media (width<=850px){.portfolio{padding-top:40px;padding-bottom:88px}.portfolio-inner{width:min(100% - 32px,640px)}.site-controls{top:14px;right:14px}.hero{gap:36px;padding:64px 0 72px}.archive-section{padding-top:64px}.project-list{margin-top:16px}.project-row{margin:0 -10px;padding:16px 10px}.designs-section{width:min(100% - 16px,1480px);padding-top:80px}.designs-section .section-heading{margin-bottom:28px}.moodboard{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.lightbox{padding:18px}}