:root { --paper:#f1f2f4; --ink:#0b0c0f; --surface:#111318; --rule:#ffffff1c; --muted:#a4a8b1; --sv-accent:#f1f2f4; }
* { box-sizing:border-box; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible { outline:2px solid currentColor; outline-offset:4px; }
button { cursor:pointer; }
button:disabled { cursor:default; }
.original-hero { padding:150px 0 64px; isolation:isolate; }
.original-hero .hero-silhouette { z-index:-1; }
.original-hero .hero-silhouette::before { opacity:.24; top:35%; }
.original-hero .thumb-wall { z-index:-2; opacity:.46; mask-image:linear-gradient(to bottom,#000 55%,transparent 95%); }
.original-hero .thumb-wall::after { background:radial-gradient(ellipse at 50% 22%,rgba(11,12,15,.72),rgba(11,12,15,.25) 65%),linear-gradient(to bottom,rgba(11,12,15,.15),rgba(11,12,15,.7)); }
.original-hero .hero-copy { text-shadow:0 2px 30px #000; }
.hero-copy { animation:heroIn .8s cubic-bezier(.16,1,.3,1) both; }
.hero-description { font-size:18px; line-height:1.7; }
#hero-title { line-height:1.08; }
.original-stats { margin-top:28px; }
.original-stats .glass-card:hover { transform:translateY(-3px); }
#motion-toggle { display:flex; align-items:center; gap:8px; font-size:10px; color:var(--muted); padding:10px; min-height:44px; }
#motion-toggle > span:first-child { font-size:16px; }
.game-deck { --deck-step:165px; --deck-size:215px; position:relative; height:310px; margin-top:-10px; perspective:900px; transform:translateY(var(--deck-scroll,0px)); }
.deck-loading { text-align:center; padding-top:120px; font-size:12px; color:var(--muted); }
.deck-card { position:absolute; width:var(--deck-size); top:28px; left:calc(50% - var(--deck-size)/2); transform:translateX(calc(var(--slot) * var(--deck-step))) translateY(calc(var(--depth) * 15px)) rotate(calc(var(--slot) * 7deg)); z-index:calc(6 - var(--depth)); animation:dealIn .95s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(var(--order) * 65ms); }
.deck-card:hover,.deck-card:focus-visible { z-index:10; }
.deck-image-wrap { display:block; position:relative; border:5px solid var(--paper); background:#303230; box-shadow:0 12px 30px #0006; transform:translate3d(calc(var(--pointer-x,0px) * var(--parallax)),calc(var(--pointer-y,0px) * var(--parallax)),0); transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s; }
.deck-card:hover .deck-image-wrap,.deck-card:focus-visible .deck-image-wrap { transform:translateY(-28px) rotate(calc(var(--slot) * -7deg)) scale(1.06); box-shadow:0 30px 50px #0009; }
.deck-image-wrap img { display:block; width:100%; aspect-ratio:1; object-fit:cover; }
.deck-open { position:absolute; right:8px; bottom:8px; display:grid; place-items:center; width:32px; height:32px; background:var(--paper); color:var(--ink); font-size:23px; opacity:0; transform:translateY(8px); transition:opacity .2s,transform .2s; }
.deck-card:hover .deck-open,.deck-card:focus-visible .deck-open { opacity:1; transform:none; }
.deck-toolbar { display:flex; justify-content:center; align-items:center; gap:26px; min-height:35px; font-size:11px; color:#b9bab5; margin-top:-12px; }
#deck-caption { max-width:65%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#shuffle-games { color:var(--paper); padding:10px 0; min-height:44px; white-space:nowrap; }
#shuffle-games span { display:inline-block; margin-left:10px; font-size:18px; transition:transform .4s; }
#shuffle-games:hover span { transform:rotate(180deg); }

.game-deck { --deck-step:145px; --deck-size:195px; height:280px; margin-top:26px; }
.deck-image-wrap { border:2px solid #ffffff50; border-radius:16px; padding:5px; background:rgba(255,255,255,.05); box-shadow:0 18px 45px #0009; }
.deck-image-wrap img { border-radius:10px; }
.deck-open { border-radius:8px; }
.deck-toolbar { gap:20px; }
.project-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.project-row { position:relative; display:grid; grid-template-columns:76px minmax(0,1fr) 22px; gap:18px 16px; align-items:center; padding:18px; border:1px solid var(--rule); border-radius:12px; background:var(--surface); transition:transform .25s,border-color .25s; }
.project-row[hidden],#view-all-projects[hidden] { display:none; }
.project-row:hover,.project-row:focus-within { transform:translateY(-4px); border-color:#ffffff44; }
.project-index { display:none; }
.project-art { width:76px; height:76px; overflow:hidden; border-radius:7px; }
.project-art img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.project-row:hover .project-art img { transform:scale(1.06); }
.project-row .title { font-size:18px; line-height:1.25; font-weight:500; letter-spacing:-.025em; overflow-wrap:anywhere; }
.project-metric { display:flex; flex-direction:column; gap:4px; }
.project-metric:not(.project-peak) { grid-column:1 / 2; }
.project-peak { grid-column:2 / 4; }
.project-metric > span { font-size:9px; color:var(--muted); }
.project-metric strong { font-size:13px; font-weight:500; font-variant-numeric:tabular-nums; }
.spotlight-trigger { position:absolute; inset:0; width:100%; height:100%; text-align:right; border-radius:12px; }
.spotlight-trigger:focus-visible { outline-offset:4px; }
.project-open { position:absolute; right:16px; top:40px; font-size:22px; transition:transform .25s; }
.spotlight-trigger:hover .project-open { transform:translate(2px,-2px); }
.portfolio-controls { display:flex; justify-content:center; margin-top:22px; }
#view-all-projects { padding:12px 22px; min-height:44px; border:1px solid var(--rule); border-radius:8px; font-size:12px; transition:background .2s; }
#view-all-projects:hover { background:var(--surface); }
.project-row.row-enter { animation:rowIn .65s cubic-bezier(.2,.8,.2,1) both; }

.project-row { isolation:isolate; overflow:hidden; grid-template-columns:96px minmax(0,1fr) 30px; padding:22px; background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(0,0,0,.25)); border-radius:18px; transition:transform .3s ease,border-color .3s,box-shadow .3s; }
.project-backdrop { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:blur(28px); transform:scale(1.15); opacity:.16; z-index:-1; pointer-events:none; }
.project-row::before { content:''; position:absolute; inset:0; background:radial-gradient(220px circle at var(--light-x,50%) var(--light-y,50%),rgba(255,255,255,.12),transparent 75%); opacity:0; transition:opacity .3s; pointer-events:none; }
.project-row:hover,.project-row:focus-within { transform:perspective(900px) translateY(-5px) rotateX(var(--card-rx,0deg)) rotateY(var(--card-ry,0deg)); border-color:#ffffff55; box-shadow:0 18px 40px #0006; }
.project-row:hover::before,.project-row:focus-within::before { opacity:1; }
.project-row .project-art { width:96px; height:96px; border-radius:12px; box-shadow:0 8px 22px #0005; }
.project-row .title { font-weight:700; font-size:18px; }
.project-row .project-metric strong { font-size:15px; font-weight:600; }
.project-row .project-art,.project-row .title,.project-row .project-metric { position:relative; }
.project-row .spotlight-trigger { z-index:2; }
.project-row .spotlight-trigger:focus-visible { outline-offset:-4px; }
.project-open { display:grid; place-items:center; width:32px; height:32px; right:16px; top:54px; background:#ffffff0c; border:1px solid #ffffff16; border-radius:50%; font-size:19px; }
.vouches-viewport { overflow:hidden; scrollbar-width:thin; scrollbar-color:#525866 transparent; }
.vouches-mask::before,.vouches-mask::after { display:block; }
.motion-paused .vouches-viewport { overflow-x:auto; }
.motion-paused .vouches-track { transform:none !important; }
.motion-paused .vouch-clone { display:none; }
.motion-paused .vouches-mask::before,.motion-paused .vouches-mask::after { display:none; }
.spotlight-dialog { width:min(880px,calc(100% - 32px)); max-height:calc(100dvh - 32px); margin:auto; padding:0; overflow:auto; border:1px solid #ffffff26; border-radius:18px; background:var(--surface); color:var(--paper); box-shadow:0 40px 120px #0009; }
.spotlight-dialog[open] { animation:dialogIn .35s cubic-bezier(.16,1,.3,1); }
.spotlight-dialog::backdrop { background:#050609d9; backdrop-filter:blur(8px); }
.spotlight-header { display:flex; align-items:center; justify-content:space-between; padding:14px 28px; border-bottom:1px solid var(--rule); }
.spotlight-header > span { font-size:10px; letter-spacing:.14em; }
.spotlight-close { width:44px; height:44px; font-size:30px; line-height:1; }
.spotlight-close:hover { transform:rotate(90deg); transition:transform .25s; }
.spotlight-body { display:grid; grid-template-columns:1fr 1.1fr; gap:32px; padding:32px; }
.spotlight-art { width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; background:#1b1e26; }
.spotlight-kicker { text-transform:uppercase; color:var(--muted); font-size:10px; letter-spacing:.12em; margin:4px 0 12px; }
.spotlight-title { font-size:28px; line-height:1.2; font-weight:800; letter-spacing:-.025em; overflow-wrap:anywhere; }
.spotlight-stats { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:26px 0; }
.spotlight-stats dt { font-size:10px; color:var(--muted); margin-bottom:6px; }
.spotlight-stats dd { font-size:23px; font-weight:500; font-variant-numeric:tabular-nums; }
.spotlight-milestone { padding:16px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.spotlight-milestone small { color:var(--muted); text-transform:uppercase; font-size:9px; letter-spacing:.12em; }
.spotlight-milestone p { margin-top:6px; font-size:16px; font-weight:500; }
.spotlight-note { font-size:11px; line-height:1.6; color:var(--muted); margin-top:18px; }

.spotlight-title { font-family:inherit; font-size:28px; line-height:1.2; text-transform:none; font-weight:800; }
@keyframes dealIn { from { opacity:0; transform:translateX(0) translateY(60px) rotate(0); } to { opacity:1; transform:translateX(calc(var(--slot) * var(--deck-step))) translateY(calc(var(--depth) * 15px)) rotate(calc(var(--slot) * 7deg)); } }
@keyframes rowIn { from { opacity:0; translate:0 26px; } to { opacity:1; translate:0 0; } }
@keyframes dialogIn { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }

@keyframes heroIn { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
@media(max-width:1100px) { .project-list { grid-template-columns:repeat(2,minmax(0,1fr)); } .game-deck { --deck-step:125px; --deck-size:175px; height:265px; } }
@media(max-width:700px) {
  .original-hero { padding:125px 0 45px; }
  #hero-title { font-size:42px; letter-spacing:-.04em; }
  .hero-description { font-size:15px; max-width:360px; }
  .game-deck { --deck-step:56px; --deck-size:120px; height:200px; margin-top:22px; }
  .deck-card { top:15px; }
  .deck-image-wrap { padding:3px; border-radius:12px; }
  .deck-image-wrap img { border-radius:7px; }
  .deck-toolbar { font-size:9px; gap:14px; }
  #deck-caption { max-width:48%; }
  #motion-toggle { padding:10px 4px; }
  .motion-label { display:none; }
  #hero .original-stats { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .original-stats .glass-card { padding:14px 8px; }
  .original-stats .text-xs { font-size:8px; }
  .original-stats .text-3xl { font-size:23px; }
  .project-list { gap:12px; }
  .project-row { display:flex; flex-direction:column; align-items:stretch; gap:12px; padding:12px; }
  .project-art { width:100%; height:auto; aspect-ratio:1.25; }
  .project-row .project-art { width:100%; height:auto; }
  .project-row .title { font-size:14px; }
  .project-row .project-metric strong { font-size:13px; }
  .project-row .title { font-size:14px; min-height:35px; }
  .project-peak { display:none; }
  .project-metric:not(.project-peak) { margin-top:auto; }
  .project-open { top:auto; bottom:16px; right:12px; font-size:18px; }
  .spotlight-body { grid-template-columns:1fr; padding:20px; gap:20px; }
  .spotlight-art { max-height:215px; aspect-ratio:auto; object-fit:contain; }
  .spotlight-title { font-size:25px; }
  .spotlight-header { padding:10px 20px; }
  .spotlight-header > span { font-size:8px; }
  #about .glass-card { padding:22px; }
  #about .glass-card .flex.items-start { gap:15px; }
  #about .glass-card .w-20 { width:54px; height:54px; }
}
@media(max-width:360px) { .game-deck { --deck-step:49px; --deck-size:110px; } #hero-title { font-size:36px; } }
.motion-paused *,.motion-paused *::before,.motion-paused *::after { animation:none !important; transition:none !important; }
.motion-paused .game-deck,.motion-paused .deck-image-wrap,.motion-paused .reveal,.motion-paused .project-row { transform:none !important; }
.motion-paused .reveal { opacity:1; }
.motion-paused { scroll-behavior:auto !important; }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto !important; } *,*::before,*::after { animation:none !important; transition:none !important; } .game-deck,.deck-image-wrap,.reveal,.project-row { transform:none !important; } .reveal { opacity:1; } }