@layer pages{.hero{padding-block:clamp(2.5rem, 1.5rem + 4vw, 5rem) var(--space-xl)}.hero__eyebrow{margin-bottom:var(--space-m);color:var(--emerald);font:500 var(--step--1) / 1.4 var(--font-mono)}.hero__eyebrow:before{content:"//";content:"//" / "";color:var(--text-muted);margin-right:.6em}.hero__title{font-size:var(--step-4);letter-spacing:-.03em;line-height:1.12}.hero__title em{color:var(--violet-soft);font-style:normal}.hero__row{justify-content:space-between;align-items:center;gap:var(--space-l) var(--space-2xl);margin-top:var(--space-l);flex-wrap:wrap;display:flex}.hero__lead{max-width:46ch;color:var(--text-muted);font-size:var(--step-1);line-height:1.55}.hero__actions{gap:var(--space-s);flex-wrap:wrap;display:flex}@media (prefers-reduced-motion:no-preference){.hero>*,.game{animation:rise .7s var(--ease-out) both}.hero__title{animation-delay:60ms}.hero__row{animation-delay:.14s}.game{animation-delay:.22s}}@keyframes rise{0%{opacity:0;translate:0 12px}}.game{padding-top:var(--space-m)}.game .window{width:min(100%, max(34rem, (100dvh - var(--header-h) - 9rem) * 16 / 9));margin-inline:auto}@media (width<=40em){.game .window__canvas{aspect-ratio:4/3}.game__counter-label{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}}.inventory{flex-wrap:wrap;gap:.4rem;display:flex}.inventory__slot{border:1px dashed var(--line-strong);border-radius:var(--radius-s);color:var(--text-muted);font:600 .75rem / 1 var(--font-mono);opacity:.55;transition:opacity var(--dur), color var(--dur), border-color var(--dur), background-color var(--dur);align-items:center;gap:.45rem;padding:.35rem .6rem;display:inline-flex}.inventory__slot:not(.is-collected) .inventory__name{display:none}.inventory__slot.is-collected{border-style:solid;border-color:var(--skill);background:color-mix(in oklab, var(--skill) 12%, transparent);color:var(--skill);opacity:1}@media (prefers-reduced-motion:no-preference){.inventory__slot.is-collected{animation:pop .45s var(--ease-out)}}@keyframes pop{40%{scale:1.12}}.stack{padding-top:var(--space-3xl)}.skills{gap:var(--space-m);margin-top:var(--space-2xl);grid-template-columns:repeat(6,minmax(0,1fr));display:grid}.skill{isolation:isolate;padding:var(--space-l);border:1px solid var(--line);border-radius:var(--radius-m);background:radial-gradient(120% 90% at 100% 0%, color-mix(in oklab, var(--skill) 13%, transparent), transparent 55%), var(--bg-raised);transition:border-color var(--dur) var(--ease-out);grid-column:span 2;position:relative;overflow:hidden}.skill:nth-child(n+4){grid-column:span 3}.skill:after{content:attr(data-glyph);content:attr(data-glyph) / "";z-index:-1;color:var(--skill);font:800 6.5rem / 1 var(--font-mono);letter-spacing:-.06em;opacity:.07;pointer-events:none;position:absolute;bottom:-.25em;right:-.05em}.skill:hover{border-color:color-mix(in oklab, var(--skill) 45%, var(--line))}.skill__glyph{border:1px solid color-mix(in oklab, var(--skill) 45%, transparent);border-radius:var(--radius-s);background:color-mix(in oklab, var(--skill) 8%, var(--bg));min-width:3rem;height:2.5rem;color:var(--skill);font:700 1.05rem / 1 var(--font-mono);place-items:center;padding-inline:.65rem;display:inline-grid}.skill__title{margin-top:var(--space-l);font:700 var(--step-1) / 1.25 var(--font-mono);letter-spacing:-.01em}.skill__text{margin-top:var(--space-xs);color:var(--text-muted);font-size:.975rem}.skill__text code{color:var(--text)}.skill__tags{margin-top:var(--space-m);flex-wrap:wrap;gap:.4rem;display:flex}.skill__tags li{border-radius:var(--radius-s);color:var(--text-muted);font:500 .75rem / 1 var(--font-mono);background:#ffffff0d;padding:.35rem .55rem}.skill__body{transition:filter var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out)}.skill__lock{color:var(--text-muted);font:500 var(--step--1) / 1.3 var(--font-mono);visibility:hidden;opacity:0;transition:opacity var(--dur-slow) var(--ease-out), visibility 0s var(--dur-slow);place-content:center;justify-items:center;gap:.5rem;display:grid;position:absolute;inset:0}.skill__lock .icon{width:1.5rem;height:1.5rem}[data-mode=game] .skill:not(.is-unlocked){border-style:dashed}[data-mode=game] .skill:not(.is-unlocked) .skill__body{filter:blur(7px)grayscale();opacity:.3;-webkit-user-select:none;user-select:none}[data-mode=game] .skill:not(.is-unlocked) .skill__lock{visibility:visible;opacity:1;transition-delay:0s}@media (prefers-reduced-motion:no-preference){.skill.is-fresh{animation:unlock 1.4s var(--ease-out)}}@keyframes unlock{0%{border-color:var(--skill);box-shadow:0 0 0 0 color-mix(in oklab, var(--skill) 55%, transparent)}to{box-shadow:0 0 0 16px #0000}}@media (width<=64em){.skills{grid-template-columns:repeat(2,minmax(0,1fr))}.skill,.skill:nth-child(n+4){grid-column:auto}.skill:last-child{grid-column:1/-1}}@media (width<=40em){.skills{grid-template-columns:1fr}}.outro{margin-top:var(--space-3xl);border:1px solid var(--line);border-radius:var(--radius-m);background:radial-gradient(90% 120% at 100% 100%, color-mix(in oklab, var(--violet) 16%, transparent), transparent 60%), var(--bg-raised);padding:clamp(2rem,1rem + 4vw,4rem)}.outro__title{max-width:24ch;font-size:var(--step-3);letter-spacing:-.03em}.outro__text{max-width:52ch;margin-top:var(--space-m);color:var(--text-muted)}.outro__actions{gap:var(--space-s);margin-top:var(--space-xl);flex-wrap:wrap;display:flex}.win-dialog{border:1px solid var(--line-strong);border-radius:var(--radius-m);background:var(--bg-raised);width:min(100% - 2rem,30rem);color:var(--text);margin:auto;padding:0;box-shadow:0 24px 80px #02040a99}.win-dialog::backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#05070db8}.win-dialog__inner{padding:var(--space-2xl) var(--space-xl) var(--space-xl);position:relative}.win-dialog__meta{color:var(--emerald);font:500 var(--step--1) / 1.5 var(--font-mono)}.win-dialog__meta strong{color:var(--text)}.win-dialog__best{color:var(--text-muted);font:500 var(--step--1) / 1.5 var(--font-mono)}.win-dialog__best:empty{display:none}.win-dialog__title{margin-top:var(--space-m);font-size:var(--step-2)}.win-dialog__text{margin-top:var(--space-2xs);color:var(--text-muted);font-size:var(--step-1)}.win-dialog__actions{gap:var(--space-s);margin-top:var(--space-xl);flex-wrap:wrap;display:flex}.win-dialog__close{position:absolute;top:.75rem;right:.75rem}@media (prefers-reduced-motion:no-preference){.win-dialog[open]{animation:dialog-in .45s var(--ease-out)}.win-dialog[open]::backdrop{animation:.3s ease-out fade-in}}@keyframes dialog-in{0%{opacity:0;translate:0 16px;scale:.97}}@keyframes fade-in{0%{opacity:0}}}
