/* ============================================================
   MAZE · The Lab — ten experiments
   ============================================================ */
:root {
  --ink: #0A0A0B; --ink-2: #0d0d10; --paper: #F4F1EA;
  --paper-dim: rgba(244,241,234,.64); --paper-faint: rgba(244,241,234,.34);
  --gold: #C8A96A; --gold-bright: #E4CE9C; --line: rgba(244,241,234,.14); --line-soft: rgba(244,241,234,.08);
  --font-display: "Fraunces", Georgia, serif; --font-text: "Inter Tight", system-ui, sans-serif;
  --ease: cubic-bezier(.16,1,.3,1); --margin: clamp(1.5rem,6vw,7rem);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--ink); color: var(--paper); font-family: var(--font-text); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.display { font-family: var(--font-display); font-weight: 380; line-height: .98; letter-spacing: -.01em; }
.eyebrow { font-size: .72rem; text-transform: uppercase; letter-spacing: .26em; color: var(--gold); font-weight: 500; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--gold); color: var(--ink); }
canvas { display: block; }

.back { position: fixed; top: 1.4rem; left: var(--margin); z-index: 50; font-size: .82rem; letter-spacing: .04em; color: var(--paper-dim); mix-blend-mode: difference; transition: color .3s var(--ease); }
.back:hover { color: var(--gold); }

.lab-hero { min-height: 86svh; display: flex; flex-direction: column; justify-content: center; padding: 6rem var(--margin) 3rem; max-width: 1400px; margin-inline: auto; }
.lab-hero__title { font-size: clamp(3rem,11vw,9rem); margin: 1.4rem 0; }
.lab-hero__sub { max-width: 48ch; color: var(--paper-dim); font-size: clamp(1rem,1.4vw,1.25rem); }
.lab-hero__hint { margin-top: 3rem; font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--paper-faint); }

/* featured fluid solver */
.feature { max-width: 1400px; margin: 0 auto; padding: clamp(1rem, 3vh, 3rem) var(--margin) clamp(4rem, 9vh, 7rem); }
.feature__meta { text-align: center; max-width: 62ch; margin: 0 auto clamp(1.6rem, 4vh, 2.6rem); }
.feature__title { font-size: clamp(2.6rem, 8vw, 6rem); margin: 0.6rem 0 1.1rem; }
.feature__desc { color: var(--paper-dim); font-size: clamp(1rem, 1.3vw, 1.18rem); max-width: 56ch; margin: 0 auto; }
.feature__stage { position: relative; width: 100%; aspect-ratio: 2 / 1; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #070708; box-shadow: 0 60px 120px -60px rgba(0,0,0,.9), inset 0 0 90px rgba(0,0,0,.6); cursor: crosshair; }
.feature__stage canvas { width: 100%; height: 100%; display: block; }
@media (max-width: 680px) { .feature__stage { aspect-ratio: 3 / 4; } }

.lab { max-width: 1400px; margin-inline: auto; padding: 0 var(--margin); }
.xp { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(1.5rem,4vw,4rem); align-items: center; padding: clamp(4rem,9vh,8rem) 0; border-top: 1px solid var(--line-soft); }
.xp__no { font-family: var(--font-display); font-size: 1rem; color: var(--gold); letter-spacing: .1em; }
.xp__title { font-size: clamp(1.8rem,4vw,3.4rem); margin: .6rem 0 1rem; }
.xp__desc { color: var(--paper-dim); max-width: 34ch; }
.xp__input { margin-top: 1.4rem; background: transparent; border: 1px solid var(--line); border-radius: 100px; color: var(--paper); font-family: var(--font-text); font-size: .95rem; letter-spacing: .12em; text-transform: uppercase; padding: .7rem 1.3rem; width: min(100%, 260px); outline: none; transition: border-color .3s var(--ease); }
.xp__input:focus { border-color: var(--gold); }
.xp__stage { position: relative; width: 100%; aspect-ratio: 16 / 11; border: 1px solid var(--line-soft); border-radius: 14px; overflow: hidden; background: linear-gradient(150deg,#0e0e12,#070708); }
.xp__stage canvas { width: 100%; height: 100%; }
.xp__stage--text { display: grid; place-items: center; }
@media (max-width: 880px) { .xp { grid-template-columns: 1fr; gap: 1.6rem; } .xp__desc { max-width: none; } }

/* 05 scramble */
.scramble { font-family: var(--font-display); font-size: clamp(1.6rem,5vw,3.4rem); text-align: center; color: var(--paper); cursor: pointer; padding: 2rem; }
.scramble .on { color: var(--gold-bright); }

/* 06 scratch */
.scratch { position: absolute; inset: 0; }
.scratch__under { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font-size: clamp(2rem,6vw,4rem); color: var(--gold-bright); background: radial-gradient(circle at 50% 40%, rgba(200,169,106,.16), transparent 70%); }
.scratch canvas { position: absolute; inset: 0; cursor: crosshair; }

/* 07 goo */
.xp__stage--goo { cursor: none; }
.goo-layer { position: absolute; inset: 0; filter: url(#goo); }
.goo-blob { position: absolute; top: 0; left: 0; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--gold-bright), var(--gold) 60%, #8a7038); will-change: transform; }

/* 08 wave */
.wave { white-space: nowrap; font-family: var(--font-display); font-size: clamp(2rem,6vw,4.5rem); color: var(--gold); user-select: none; perspective: 600px; }
.wave span { display: inline-block; will-change: transform; }

/* footer */
.lab-foot { text-align: center; padding: clamp(6rem,16vh,12rem) var(--margin) 4rem; border-top: 1px solid var(--line-soft); }
.lab-foot .display { font-size: clamp(1.8rem,5vw,3.6rem); max-width: 20ch; margin: 0 auto 2rem; }
.back-cta { display: inline-flex; border: 1px solid var(--gold); color: var(--gold); border-radius: 100px; padding: 1rem 2rem; letter-spacing: .04em; transition: background .4s var(--ease), color .4s var(--ease); }
.back-cta:hover { background: var(--gold); color: var(--ink); }
.lab-foot__sig { margin-top: 3rem; font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--paper-faint); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }