/* learnea.app. Colours from docs/palette.md, fonts self hosted (no Google request, so no visitor IP leaves for a third party). The home page is a deck: each section hands over to the next by its own move, set by data-exit in the markup. Every other page is the same shell with body.reading, which hides the deck and shows the document. Built from docs/plans/website_mockup/index.html. */ @font-face { font-family: "Plus Jakarta Sans"; src: url(/assets/fonts/plus-jakarta-sans.woff2) format("woff2"); font-weight: 600 800; font-display: swap; } @font-face { font-family: "Inter"; src: url(/assets/fonts/inter.woff2) format("woff2"); font-weight: 400 700; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url(/assets/fonts/jetbrains-mono.woff2) format("woff2"); font-weight: 500 700; font-display: swap; } *{box-sizing:border-box} [hidden]{display:none!important} img{max-width:100%;height:auto} /* learnea.app, fourth pass. Shipped palette (docs/palette.md) and shipped faces. The design is the motion. The moves, in order of appearance: . THE THREAD: the page is a learning path, drawn down the left, node by node . words that climb out of a mask . Nea THINKS: his replies resolve out of noise, never fade in . the page FLINCHES when you lose a life, and he REVIVES you with the streak shield . XP rolls, digit by digit . a reel that runs sideways while you scroll down . bands that unroll over the band before them No load screen. Three were built and none of them earned their place. */ :root{ /* shipped tokens, docs/palette.md. Petrol and fox are read out of learnea-logo-wordmark.svg, cream out of learnea-app-icon.svg. */ --ink:#0E2329; --petrol:#1E4A52; --petrol-2:#16343D; --cream:#F6F0E2; --cream-2:#EFE7D5; --border:#E4DAC6; --border-2:#F0E9DA; --sun:#FEC439; --sun-br:#FFD873; --sun-dp:#DA950B; --sun-soft:#FFF4D6; --plum:#6F226B; --plum-soft:#F9E9F7; --leaf:#35B054; --leaf-dp:#137738; --leaf-soft:#DEF8E2; --ember:#B8352B; --ember-br:#9B2A21; --ember-soft:#FBE3DE; --fox:#E0682A; /* --text-3 and --on-dark-3 are the muted greys for small print. At the palette's own values they measure 2.46:1 and 2.85:1 on cream, which is not readable, so the two used on a light ground are darkened here. --sun-ink is the sun for small text: --sun-dp is only 3.47:1, fine for a rule or an arrow, not for a label. */ --text:#291C15; --text-2:#6E6055; --text-3:#7A6B5E; --sun-ink:#8D5E06; /* The page is cream now. 53 rules referenced --on-dark and 35 the hairlines, so the whole page turns by redefining these four. */ --on-dark:#291C15; --on-dark-2:#6E6055; --on-dark-3:#7A6B5E; /* docs/palette.md, the on dark set. --on-dark above is redefined for the cream page, so the dark surfaces carry their own three tones. */ --ink-text:#F6F0E2; --ink-mut:#9FBCC2; --ink-dim:#6A8A91; --d16:rgba(41,28,21,.14); --d09:rgba(41,28,21,.075); --k14:rgba(41,28,21,.14); --k38:rgba(41,28,21,.38); --display:"Plus Jakarta Sans","Avenir Next",system-ui,sans-serif; --body:Inter,-apple-system,"Segoe UI",Roboto,sans-serif; --mono:"JetBrains Mono",ui-monospace,Menlo,monospace; --pad:clamp(20px,5vw,72px); --rail:clamp(92px,11vw,150px); --maxw:1340px; --ease:cubic-bezier(.22,.78,.24,1); } *{box-sizing:border-box} [hidden]{display:none!important} html{background:var(--cream)} html.lenis,html.lenis body{height:auto} .lenis.lenis-smooth{scroll-behavior:auto!important} body{margin:0;background:var(--cream);color:var(--text);font:400 15.5px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden} img{max-width:100%;display:block} svg{display:block;flex:none} button{font:inherit;cursor:pointer;color:inherit} ::selection{background:var(--sun-br);color:var(--ink)} :focus-visible{outline:3px solid var(--sun-br);outline-offset:3px;border-radius:4px} h1,h2,h3{font-family:var(--display);font-weight:800;margin:0;letter-spacing:-.035em;line-height:.98;color:var(--petrol);text-wrap:balance} h1{font-size:clamp(33px,4.4vw,58px);line-height:1.02} h2{font-size:clamp(26px,3.2vw,42px);line-height:1.06} h3{font-size:clamp(19px,1.7vw,23px)} em{font-style:normal;color:var(--sun-dp)} .lbl{font:700 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-3);margin:0} .lead{font-size:clamp(15.5px,1.15vw,17.5px);line-height:1.6;color:var(--on-dark-2);max-width:46ch;margin:0} /* One section, one screen. Each fills the viewport and centres what is in it, so you never see half of one and half of the next. The top padding clears the fixed header. */ /* Each section pins itself and the next rides up over it, so the page reads as a deck being dealt rather than a column being scrolled. */ .band{position:sticky;top:0;z-index:1;background:var(--cream); min-height:100svh;display:flex;flex-direction:column;justify-content:center; padding-block:clamp(84px,11vh,118px) clamp(50px,7vh,80px)} /* Each hand over is its own move, set by data-exit on the section: scroll the section simply scrolls away (Start to How) cover the next section rides up over it, a card (How to Try, Memory to Get) wrap it closes into a circle and uncovers (Try to Memory) A covering section needs to sit above; a wrapping one needs to sit on top of what it is about to uncover. Hence the order below. */ #top{z-index:1} #how{z-index:2} #quests{z-index:3} #play{z-index:4} #memory{z-index:3;background:var(--cream)} #get{z-index:5;position:relative} /* the two that lay over the section before them get the card lip */ #play,#get{border-radius:30px 30px 0 0; box-shadow:0 -26px 60px -26px rgba(41,28,21,.26)} /* once the section after it is in place, a pinned section has no more to do, and must stop showing through whatever uncovers it next */ .band.spent{visibility:hidden} /* ── THE COLLAPSE ──────────────────────────────────────── A section does not just get covered by the next one. As the next card rides up, the one underneath contracts towards the middle of the screen, packs itself into a single small ball, and the ball pops. The whole move finishes above the incoming card's top edge, so you always watch it happen in clear space rather than behind the card. Driven by --p, which the scroll loop writes on the band: 0 uncovered, 1 fully covered. */ .bwrap{display:flex;flex-direction:column;justify-content:center;width:100%} /* The section itself is the circle: it is clipped down to a disc of its own background, near the top of the screen, and the next section is simply there underneath as it goes. No transform, which would break the sticky. */ .band.folding{clip-path:circle(var(--r,200vmax) at 50% var(--oy,5svh)); opacity:var(--wo,1);will-change:clip-path,opacity} .band.folding > .bwrap{opacity:var(--o,1)} @media(prefers-reduced-motion:reduce){ .band.folding{clip-path:none;opacity:1} .band.folding > .bwrap{opacity:1} } @media(max-height:680px){.band{min-height:0;padding-block:clamp(70px,9vh,90px) clamp(40px,6vh,60px)}} .pad{padding-left:max(calc(var(--rail) + 44px), calc((100vw - var(--maxw)) / 2));padding-right:max(var(--pad), calc((100vw - var(--maxw)) / 2))} @media(max-width:759px){.pad{padding-left:var(--pad)}} /* ── THE DECK IS A DESKTOP IDEA ────────────────────────── Every move on the home page rests on a section being one screen tall. On a phone three of them are not: How it works needs 1107px of a 664px screen. A section that is both taller than the screen and pinned at top:0 can never show its own bottom, so on a phone the deck is off and the sections are what they always were, one after another. */ @media(max-width:759px){ .band{position:static;min-height:0;border-radius:0;box-shadow:none; padding-block:clamp(52px,9vh,72px) clamp(40px,7vh,58px)} /* and nothing the scroll loop sets can be allowed to hide them */ .band.folding{clip-path:none!important;opacity:1!important} .band.folding > .bwrap{opacity:1!important} .band.spent{visibility:visible!important} } .light{background:var(--cream-2)} .band.light{background:var(--cream-2)} /* One dark band, where the handsets live. They glow against it, and it stops the page running one flat tone top to bottom. */ /* ── THE DARK BANDS ────────────────────────────────────── Everything inside flipped to dark text when the page went cream, so a dark band has to put it back. One block, reusable on any section. */ .on-ink{background:var(--ink);color:var(--ink-text)} .band.on-ink{background:var(--ink)} .on-ink h1,.on-ink h2,.on-ink h3,.on-ink h4{color:var(--ink-text)} .on-ink em{color:var(--sun-br)} .on-ink .lbl{color:var(--ink-dim)} .on-ink .lead,.on-ink p{color:var(--ink-mut)} .on-ink .meter{border-bottom-color:rgba(246,240,226,.16)} .on-ink .meter .num{color:var(--ink-text)} .on-ink .meter .num.gold{color:var(--sun-br)} .on-ink .shieldchip{color:#EDD6EA} .on-ink .sign input{background:rgba(246,240,226,.07);border-color:rgba(246,240,226,.22);color:var(--cream)} .on-ink .sign input::placeholder{color:var(--ink-dim)} .on-ink .sign input:focus{border-color:var(--sun-br);background:rgba(246,240,226,.12)} .on-ink .note{color:var(--ink-mut)} .on-ink .done{color:var(--sun-br)} .on-ink .hero-join,.on-ink .hero-soon,.on-ink .stores{border-top-color:rgba(246,240,226,.16)} .on-ink .store{color:#EDD6EA} .on-ink .store:hover{color:var(--sun-br)} .on-ink .your-turn{color:var(--sun-br)} .on-ink .your-turn::before{background:var(--sun-br)} .on-ink > h2::after{background:var(--sun-br)} .on-ink .reel-bar i{background:rgba(246,240,226,.18)} .on-ink .reel-bar i.on{background:var(--sun-br)} .on-ink .reel-bar .lbl{color:var(--sun-br)} /* the white quest card floats on it, which is the point */ .on-ink .quest-wrap{background:#FFFCF4;border-color:rgba(246,240,226,.18); box-shadow:0 34px 70px -28px rgba(0,0,0,.85)} .light em{color:var(--sun-dp)} .light .lbl{color:var(--text-3)} .light .lead{color:var(--text-2)} #field{position:fixed;inset:0;z-index:0;pointer-events:none} #grain{position:fixed;inset:0;z-index:75;pointer-events:none;opacity:.13;mix-blend-mode:multiply} /* MOVE 6: the flinch */ #flinch{position:fixed;inset:0;z-index:74;pointer-events:none;opacity:0;box-shadow:inset 0 0 180px 40px rgba(184,53,43,.62);transition:opacity .5s} #flinch.hit{opacity:1;transition:opacity .07s} body.shake>.band,body.shake>.reel,body.shake>footer{animation:shake .42s cubic-bezier(.36,.07,.19,.97)} @keyframes shake{ 10%{transform:translate(-7px,2px) rotate(-.22deg)} 25%{transform:translate(6px,-3px) rotate(.2deg)} 42%{transform:translate(-5px,1px) rotate(-.14deg)} 60%{transform:translate(4px,2px)} 78%{transform:translate(-2px,-1px)} 100%{transform:none} } /* ── THE TITLE SEQUENCE ────────────────────────────────── One gold stroke arrives on a curve from off screen left, runs into the first letter and keeps going until it has drawn the whole wordmark. The letters fill, it swells, then it bursts and the page comes up through the glow. Kept HIGH in this stylesheet on purpose: it lived next to the footer rules and got cut twice by edits down there. */ #intro{position:fixed;inset:0;z-index:130;display:grid;place-items:center;overflow:hidden} #intro .iveil{position:absolute;inset:0;background:#091A1E;transition:opacity 1.15s cubic-bezier(.4,0,.22,1) .12s} #intro.burst .iveil{opacity:0} #intro .iglow{position:absolute;left:50%;top:50%;width:120vmax;height:120vmax;margin:-60vmax 0 0 -60vmax; background:radial-gradient(circle,rgba(254,196,57,.20),rgba(111,34,107,.10) 38%,transparent 62%); opacity:0;transform:scale(.3);transition:opacity 1.6s var(--ease),transform 2.8s var(--ease)} #intro.s2 .iglow{opacity:1;transform:scale(1)} #intro.burst .iglow{opacity:0;transition:opacity .9s ease-out} #intro .istage{position:relative;z-index:3;display:grid;justify-items:center;transform-origin:50% 50%} #intro .iwm{width:min(42vw,460px);height:auto;overflow:visible} /* The letters are built from OVERLAPPING shapes. Stroking them drew every contour, including the seams where the pieces meet: the cross through the a, the box through the t. Dilating the filled silhouette and subtracting it from itself gives the outline of the MERGED shape, with no inner lines. */ /* The trace is in the logo's own two colours, not flat white. On the #091A1E veil the petrol half would disappear, so it is lifted to petrol-tint; the fox half is fox exactly. Paths are in left to right order: lear, the n mark, ea. */ #intro .ink{fill:#E3EFF1} #intro .ink path:nth-child(2),#intro .ink path:nth-child(3){fill:#E0682A} #intro .outline{filter:url(#olf) drop-shadow(0 0 3px rgba(255,216,115,.7));transition:opacity .45s var(--ease)} #intro .solid{fill:#E3EFF1;opacity:0;transition:opacity .5s var(--ease)} #intro .solid path:nth-child(2),#intro .solid path:nth-child(3){fill:#E0682A} #intro.s3 .outline{opacity:0} #intro.s3 .solid{opacity:1} #intro .wiper{transform-box:fill-box;transform-origin:left center;transform:scaleX(0)} #intro .measure{fill:none;stroke:none;pointer-events:none} #intro .iwm path.head{fill:none} /* the travelling head. Rides the route, leaves nothing behind. */ #intro .iwm path.head{stroke-width:.62;stroke:#FFF4D6; filter:drop-shadow(0 0 5px rgba(255,216,115,1)) drop-shadow(0 0 13px rgba(224,104,42,.85)); transition:stroke-opacity .4s var(--ease)} #intro.s3 .iwm path.head{stroke-opacity:0} @keyframes inflate{ from{transform:scale(1)} to{transform:scale(6.4)} } #intro.inflate .istage{animation:inflate 4s linear forwards} #intro.inflate .iwm path.letter{filter:drop-shadow(0 0 34px rgba(255,216,115,.95));transition:filter .5s var(--ease)} @keyframes burst{to{transform:scale(4.8);opacity:0}} #intro.burst .istage{animation:burst .34s cubic-bezier(.2,.85,.35,1) forwards} #intro .afterglow{position:fixed;inset:0;z-index:5;pointer-events:none;opacity:0; background:radial-gradient(circle at 50% 46%,rgba(255,216,115,.5),rgba(224,104,42,.16) 34%,transparent 64%)} #intro.burst .afterglow{animation:afterglow 1.7s cubic-bezier(.25,.6,.3,1) forwards} @keyframes afterglow{0%{opacity:0}12%{opacity:.85}100%{opacity:0}} #intro .shock{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px; border-radius:50%;border:2.5px solid var(--sun-br);opacity:0;z-index:4;pointer-events:none} #intro.burst .shock{animation:shock 1.15s cubic-bezier(.12,.86,.3,1) forwards} @keyframes shock{0%{opacity:1;transform:scale(1);border-width:2.5px}100%{opacity:0;transform:scale(40);border-width:.4px}} #intro .shards{position:absolute;left:50%;top:50%;z-index:4;pointer-events:none} #intro .shards i{position:absolute;left:0;top:0;width:4px;height:4px;border-radius:50%; background:var(--sun-br);box-shadow:0 0 8px rgba(255,216,115,.95);opacity:0} #intro.burst .shards i{opacity:1;transform:translate(var(--tx),var(--ty)) scale(0); transition:transform 1.35s cubic-bezier(.1,.75,.25,1),opacity 1.35s ease-out} /* ── MOVE 2: THE THREAD ────────────────────────────── The site's own learning path, drawn down the page as you go. Each node is a section. It unlocks when you reach it, exactly like a unit in the app. */ /* starts under the header and stops above the fold edge, so the first node can never sit on top of the logo. */ #thread{position:fixed;left:clamp(92px,11vw,150px);top:calc(env(safe-area-inset-top,0px) + 104px);bottom:64px;width:26px;z-index:54;pointer-events:none;transition:opacity .3s} @media(max-width:759px){#thread{display:none}} #thread .spine{position:absolute;left:12px;top:0;bottom:0;width:2px;background:var(--border);transition:background .5s} #thread .cap{position:absolute;left:9px;width:8px;height:8px;border-radius:50%;background:var(--d16)} #thread .cap.top{top:-4px} #thread .cap.bot{bottom:-4px} #thread .fill{position:absolute;left:12px;top:0;width:2px;height:0;background:linear-gradient(180deg,var(--sun),var(--sun-dp));box-shadow:0 0 10px rgba(218,149,11,.32)} #thread .node{ position:absolute;left:5px;width:16px;height:16px;border-radius:50%; background:var(--cream);border:2px solid var(--border); transform:translateY(-50%);transition:border-color .45s,background .45s,transform .45s var(--ease),box-shadow .45s; pointer-events:auto;cursor:pointer; } #thread .node::after{ content:attr(data-name);position:absolute;right:26px;top:50%;transform:translateY(-50%) translateX(6px); font:700 9.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-3); white-space:nowrap;text-align:right;color:var(--text-3);opacity:0;transition:opacity .35s,transform .35s var(--ease); } #thread .node:hover::after{opacity:1;transform:translateY(-50%)} #thread .node.done{border-color:var(--sun-dp);background:var(--sun)} #thread .node.at{ border-color:var(--sun-dp);background:var(--sun);transform:translateY(-50%) scale(1.3); box-shadow:0 0 0 4px rgba(254,196,57,.26); } #thread .node.at::after{opacity:1;transform:translateY(-50%);color:var(--sun-dp)} #mobar{position:fixed;left:0;right:0;top:0;height:3px;background:var(--sun);width:0;z-index:58;transform-origin:left} @media(min-width:760px){#mobar{display:none}} /* ── MOVE 3: words climb out of a mask ───────────────── */ .mask{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.16em;margin-bottom:-.16em} .mask>span{display:inline-block;transform:translateY(110%);transition:transform 1.15s var(--ease)} .lift .mask>span{transform:none} .js .fade{opacity:0;transform:translateY(22px)} .js .fade.lift{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)} /* ── MOVE 9: bands unroll over the one before ────────── */ .js .unroll{clip-path:inset(0 0 100% 0);transition:clip-path 1.05s var(--ease)} .js .unroll.lift{clip-path:inset(0 0 0 0)} /* the avatar art is a navy disc, so it should never sit in a square */ img[src*="nea-avatar"]{border-radius:50%!important;background:transparent!important} /* ── nav ─────────────────────────────────────────────── */ .nav{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:60; display:flex;align-items:center;gap:20px;padding:14px var(--pad); background:rgba(246,240,226,.86);-webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3);border-bottom:1px solid var(--border)} .nav .mark{display:block;line-height:0} .nav .mark img{width:88px;height:20px;transition:opacity .3s} .nav-links{margin-left:auto;display:none;gap:28px} @media(min-width:880px){.nav-links{display:flex}} .nav-links a{font:600 12.5px var(--body);letter-spacing:.02em;color:var(--petrol);text-decoration:none;opacity:.7;transition:opacity .25s,color .3s} .nav-links a:hover{opacity:1} .light-zone .nav-links a{color:var(--petrol)} .light-zone .burger{color:var(--petrol)} /* 44px is the smallest a thumb reliably hits, and the icon is 26x10 */ .burger{margin-left:auto;background:0;border:0;padding:17px 9px;margin-right:-9px; display:flex;align-items:center;justify-content:center; color:var(--petrol);transition:color .3s} @media(min-width:880px){.burger{display:none}} #sheet{position:fixed;inset:0;z-index:100;background:var(--ink);display:flex;flex-direction:column;justify-content:center;gap:4px;padding:var(--pad);clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease)} #sheet.open{clip-path:inset(0 0 0 0)} #sheet a{font:800 clamp(25px,5.2vw,36px)/1.14 var(--display);letter-spacing:-.04em;color:var(--ink-text);text-decoration:none;transition:color .25s,padding-left .35s var(--ease)} #sheet a:hover{color:var(--sun-br);padding-left:14px} #sheet .close{position:absolute;top:calc(env(safe-area-inset-top,0px) + 18px);right:var(--pad);background:0;border:0;color:var(--ink-text)} /* the colour going out of the page, without touching layout */ #drain{position:fixed;inset:0;z-index:88;pointer-events:none;opacity:0; -webkit-backdrop-filter:grayscale(1) brightness(.38);backdrop-filter:grayscale(1) brightness(.38); background:rgba(14,35,41,.62);transition:opacity .55s var(--ease)} #drain.on{opacity:1} /* The flat clip carries the navy baked into it, so unless the screen behind it is that same navy you see the edges of the video sitting on the page as a card. For that path the drain stops dimming and becomes the ground. */ #drain.solid{background:var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none} /* The storm. Same shader the retired web app ran behind this very clip, so the bolt on the page and the storm inside the video are one weather system. Masked away down the screen so the bolt terminates where he appears. */ #storm{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:0; transition:opacity .6s var(--ease)} #storm.on{opacity:1} #stormCv{position:absolute;top:0;left:0;width:100%;height:68%; -webkit-mask-image:linear-gradient(to bottom,#000 46%,transparent 100%); mask-image:linear-gradient(to bottom,#000 46%,transparent 100%)} @media(max-width:700px){#stormCv{height:56%}} /* ── hero ────────────────────────────────────────────── */ .hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center; padding-block:clamp(84px,11vh,118px) clamp(40px,6vh,64px);position:relative;overflow:hidden} .hero>.bwrap{position:relative;z-index:1} .hero h1{max-width:17ch;margin-top:24px} /* the hero splits: words on the left, a turn playing on the right */ .hero-grid{display:grid;gap:clamp(34px,5vw,64px);align-items:center;width:100%} @media(min-width:1040px){.hero-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}} .hero-vis{position:relative;min-height:clamp(340px,44vh,520px);display:none} @media(min-width:1040px){.hero-vis{display:block}} .hv-glow{position:absolute;left:6%;bottom:-6%;width:78%;height:78%;border-radius:50%; background:radial-gradient(circle,rgba(254,196,57,.26),rgba(111,34,107,.14) 46%,transparent 70%);filter:blur(6px)} .hv-him{position:absolute;left:-11%;bottom:0;height:97%;width:auto;opacity:0; transform:translateY(12px) scale(.97);filter:drop-shadow(0 30px 56px rgba(0,0,0,.66)); transition:opacity .45s var(--ease),transform .45s var(--ease)} .hv-him.on{opacity:1;transform:none} .hv-chip.lv svg.gone{opacity:.3} /* Top-RIGHT, not left: Nea stands at left:-11% and is 97% tall, so his head reached into the old left:2% corner and the chips painted over it (they come after him in the DOM). Everything that is app UI now lives on the right with the bubbles, and the left column is his alone. */ .hv-chips{position:absolute;right:2%;top:2%;display:flex;gap:8px} .hv-chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 12px; font:800 14px var(--display);font-variant-numeric:tabular-nums;backdrop-filter:blur(8px)} .hv-chip.st{background:rgba(224,104,42,.2);color:#F0A070} .hv-chip.lv{background:rgba(184,53,43,.2);color:#EFA193} .hv-bub{position:absolute;opacity:0;transform:translateY(14px) scale(.96); transition:opacity .5s var(--ease),transform .5s var(--ease)} .hv-bub.in{opacity:1;transform:none} .hv-you{right:0;top:16%;max-width:74%;background:rgba(41,28,21,.07);border:1px solid var(--d16); border-radius:16px 16px 4px 16px;padding:11px 15px;color:var(--on-dark);font:500 16px var(--body);backdrop-filter:blur(10px)} .hv-you small{display:block;font:700 9px var(--mono);letter-spacing:.2em;color:var(--on-dark-3);margin-bottom:4px} .hv-typing{right:6%;top:40%;display:flex;gap:5px;background:var(--cream);border-radius:14px;padding:11px 14px} .hv-typing i{width:6px;height:6px;border-radius:50%;background:var(--petrol);opacity:.45;animation:dots 1.3s ease-in-out infinite} .hv-typing i:nth-child(2){animation-delay:.18s} .hv-typing i:nth-child(3){animation-delay:.36s} @keyframes dots{0%,60%,100%{transform:translateY(0);opacity:.35}30%{transform:translateY(-5px);opacity:1}} .hv-say{right:0;top:36%;max-width:82%;background:var(--cream);color:var(--text);border-radius:16px 16px 16px 4px; padding:13px 16px;box-shadow:0 22px 46px -18px rgba(0,0,0,.8)} .hv-say .who{display:flex;align-items:center;gap:8px;margin:0 0 7px;font:700 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--sun-ink)} .hv-say .who img{width:22px;height:22px;border-radius:6px} .hv-say p{margin:0;font:400 15.5px/1.45 var(--body);color:var(--text)} .hv-say p b{color:var(--ember);font-weight:600} .hv-gain{right:4%;bottom:6%;display:inline-flex;align-items:center;gap:6px; border-radius:999px;padding:7px 14px;font:800 14px var(--display)} .hv-gain.up{background:linear-gradient(180deg,var(--sun-br),var(--sun));color:var(--ink);box-shadow:0 10px 24px -10px rgba(254,196,57,1)} .hv-gain.down{background:rgba(184,53,43,.92);color:#FBE3DE;box-shadow:0 10px 24px -10px rgba(184,53,43,1)} /* one column, in the order the live site reads: line, then sign up */ .hero .lead{margin-top:clamp(22px,3vw,30px)} .hero-join{margin-top:clamp(22px,3vh,34px);padding-top:clamp(20px,2.6vh,28px);border-top:1px solid var(--d16)} .hero-soon{display:flex;align-items:center;gap:clamp(18px,2.6vw,32px);flex-wrap:wrap;margin-top:clamp(18px,2.4vh,26px)} /* the one thing on the page we actually want you to do */ .sign{display:flex;gap:10px;flex-wrap:wrap;max-width:560px} .sign input{ flex:1 1 230px;min-width:0;color:var(--on-dark);font:500 16.5px var(--body); background:rgba(41,28,21,.04);border:1.5px solid rgba(246,240,226,.20); border-radius:12px;padding:16px 18px;transition:border-color .3s,background .3s; } .sign input::placeholder{color:var(--on-dark-3)} .sign input:focus{outline:none;border-color:var(--sun-br);background:rgba(41,28,21,.07)} .sign button{ border:0;border-radius:12px;white-space:nowrap;cursor:pointer; background:linear-gradient(180deg,var(--sun-br),var(--sun));color:var(--ink); font:800 16px var(--display);letter-spacing:-.015em;padding:16px 28px; box-shadow:0 3px 0 var(--sun-dp),0 16px 34px -14px rgba(254,196,57,.95); animation:cta 3.4s ease-in-out infinite;transition:transform .12s,box-shadow .25s; } @keyframes cta{ 0%,100%{box-shadow:0 3px 0 var(--sun-dp),0 16px 34px -14px rgba(254,196,57,.95)} 50% {box-shadow:0 3px 0 var(--sun-dp),0 18px 44px -12px rgba(255,216,115,1)} } .sign button:hover{animation:none;box-shadow:0 3px 0 var(--sun-dp),0 20px 46px -12px rgba(255,216,115,1)} .sign button:active{transform:translateY(3px);box-shadow:0 0 0 var(--sun-dp)} .hero-join .note{font-size:13.5px;margin-top:14px} .note{font:400 13px var(--body);color:var(--on-dark-3);margin:12px 0 0} .err{font:600 13px var(--body);color:#F0C6BF;margin:12px 0 0} .done{font:800 clamp(22px,2.6vw,32px) var(--display);letter-spacing:-.03em;color:var(--sun-br);margin:0;max-width:560px} /* ── IDEA 3: HE REMEMBERS YOU ──────────────────────────── Everything he knows lives in this browser and is never sent anywhere. Second visit onward he opens by referencing what you actually did, which is the one thing about this product nobody else can copy. */ .remembers{ display:flex;align-items:flex-start;gap:13px;max-width:52ch; margin-top:clamp(22px,3vw,30px);padding:15px 18px 15px 16px; border-left:2px solid var(--sun);background:rgba(255,216,115,.07); opacity:0;transform:translateY(14px); transition:opacity .7s var(--ease),transform .8s var(--ease); } .remembers.on{opacity:1;transform:none} .remembers img{width:30px;height:30px;border-radius:8px;flex:none} .remembers p{margin:0;font:400 16px/1.5 var(--body);color:var(--on-dark)} .remembers .who{display:block;font:700 9.5px var(--mono);letter-spacing:.18em; text-transform:uppercase;color:var(--sun-ink);margin-bottom:5px} .remembers b{color:var(--sun-br);font-weight:600} /* ── HE ASKS FIRST ─────────────────────────────────────── UK PECR covers localStorage exactly like cookies, so remembering you needs consent. He asks for it himself, after you have played, and nothing at all is written until the answer is yes. */ .ask-mem{ position:fixed;left:50%;bottom:calc(clamp(14px,2.4vw,26px) + env(safe-area-inset-bottom,0px));z-index:95; width:min(940px,calc(100vw - 28px)); background:var(--cream);color:var(--text);border-radius:20px; border-top:2px solid var(--sun); box-shadow:0 34px 80px -22px rgba(0,0,0,.9), 0 0 0 1px rgba(41,28,21,.06); padding:clamp(18px,2.2vw,24px) clamp(20px,2.4vw,28px); display:grid;gap:18px;align-items:center; transform:translate(-50%,calc(100% + 48px));opacity:0; transition:transform .8s cubic-bezier(.2,.85,.25,1),opacity .5s var(--ease); } @media(min-width:760px){.ask-mem{grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,3vw,44px)}} .ask-mem.on{transform:translate(-50%,0);opacity:1} .ask-mem .who{display:flex;align-items:center;gap:10px;margin:0 0 9px; font:700 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--sun-ink)} .ask-mem .who img{width:28px;height:28px;border-radius:8px} .ask-mem .lead-line{margin:0;font:800 clamp(17px,1.7vw,21px)/1.35 var(--display); letter-spacing:-.025em;color:var(--petrol);max-width:56ch} .ask-mem .small{margin:9px 0 0;font:400 13.5px/1.55 var(--body);color:var(--text-2);max-width:72ch} .ask-mem .small strong{color:var(--petrol);font-weight:600} .ask-mem .small a{color:var(--plum);cursor:pointer;text-decoration:underline;text-underline-offset:2px} /* Identical weight, size and colour. Only the words differ, because the ICO treats a quieter reject button as consent that was not freely given. */ .ask-mem .row{display:grid;grid-template-columns:1fr 1fr;gap:10px} @media(min-width:760px){.ask-mem .row{grid-template-columns:auto auto}} .ask-mem button{ border-radius:12px;padding:13px 22px;white-space:nowrap; font:800 14.5px var(--display);letter-spacing:-.01em; background:#fff;border:1.5px solid var(--border);color:var(--petrol);cursor:pointer; transition:border-color .2s,background .2s,color .2s; } .ask-mem button:hover{border-color:var(--petrol);background:var(--petrol);color:var(--on-dark)} .ask-mem button:active{transform:translateY(1px)} /* ── IDEA 9: HE IS WATCHING ────────────────────────────── He leans out from behind the right edge of the screen and points at what he is talking about. Strictly rationed: two remarks a visit, never inside 25s of each other, and only for things you actually did. */ #watcher{ position:fixed;right:0;bottom:0;z-index:86;pointer-events:none; display:flex;align-items:center;justify-content:flex-end;gap:0; padding-bottom:env(safe-area-inset-bottom,0px); } #watcher .him-pop{ width:min(340px,38vw);height:auto;flex:none; transform:translateX(108%); transition:transform .55s cubic-bezier(.4,0,.7,.2); filter:drop-shadow(-18px 24px 44px rgba(0,0,0,.66)); } #watcher.on .him-pop{transform:translateX(5%);transition:transform .66s cubic-bezier(.22,.9,.28,1.06)} /* He pops in over whatever is on screen. On a phone that is the footer or the middle of a paragraph, and the bubble lands on the words. Off. */ @media(max-width:759px){#watcher{display:none!important}} @media(max-width:820px){ #watcher .him-pop{width:min(230px,46vw)} #watcher .bubble{margin-right:-92px} /* the gap scales with him */ } #watcher .bubble{ position:relative;margin-right:-134px;margin-bottom:9%; max-width:min(330px,52vw); background:var(--cream);color:var(--text);border-radius:18px 18px 4px 18px; padding:15px 18px;box-shadow:0 26px 60px -20px rgba(0,0,0,.82); opacity:0;transform:translateX(26px) scale(.95);transform-origin:right center; transition:opacity .4s var(--ease) .26s,transform .55s cubic-bezier(.2,.9,.3,1.12) .26s; } #watcher.on .bubble{opacity:1;transform:none} #watcher .bubble::after{ content:"";position:absolute;right:-9px;bottom:16px;width:0;height:0; border:10px solid transparent;border-left-color:var(--cream);border-right:0; } #watcher .who{display:block;font:700 9.5px var(--mono);letter-spacing:.18em; text-transform:uppercase;color:var(--sun-ink);margin-bottom:5px} #watcher .bubble p{margin:0;font:400 16px/1.42 var(--body);color:var(--text)} @media(max-width:560px){#watcher .bubble{max-width:58vw;padding:12px 14px} #watcher .bubble p{font-size:14.5px}} /* ── the quest ───────────────────────────────────────── */ .play{display:grid;gap:40px} @media(min-width:1000px){.play{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(40px,6vw,86px);align-items:start}} .meter{display:flex;align-items:center;gap:26px;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid var(--d16)} .meter .stat{display:flex;align-items:center;gap:10px} .meter .num{font:800 30px/1 var(--display);letter-spacing:-.04em;font-variant-numeric:tabular-nums} .meter .num.gold{color:var(--sun-br)} .hearts{display:inline-flex;gap:4px} .hearts svg{color:var(--ember-br);transition:color .4s,transform .4s} .hearts svg.gone{color:var(--d16);transform:scale(.8)} .hearts svg.beat{animation:beat 2.6s ease-in-out infinite} @keyframes beat{0%,60%,100%{transform:scale(1)}64%{transform:scale(1.26)}70%{transform:scale(1)}76%{transform:scale(1.15)}82%{transform:scale(1)}} .hearts svg.stutter{animation:stutter .62s ease-out 1 forwards} @keyframes stutter{0%{transform:scale(1.36)}30%{transform:scale(.62) rotate(-12deg)}62%{transform:scale(1.1)}100%{transform:scale(.8)}} /* the streak is a live flame, and it is what he saves */ .flame{position:relative;display:inline-flex} .flame svg{color:var(--fox);animation:flicker 2.8s ease-in-out infinite;transform-origin:50% 85%} @keyframes flicker{ 0%,100%{transform:scale(1) rotate(0);filter:drop-shadow(0 0 4px rgba(224,104,42,.6))} 22%{transform:scale(1.1,.94) rotate(-3deg);filter:drop-shadow(0 0 9px rgba(255,216,115,.85))} 48%{transform:scale(.95,1.08) rotate(2deg);filter:drop-shadow(0 0 5px rgba(224,104,42,.7))} 71%{transform:scale(1.06,.97) rotate(-1deg);filter:drop-shadow(0 0 11px rgba(255,216,115,.9))} } .shieldchip{display:inline-flex;align-items:center;gap:6px;font:700 11px var(--mono);letter-spacing:.14em;color:var(--plum-soft);transition:color .5s,opacity .5s} .shieldchip svg{color:var(--plum-soft)} .shieldchip.spent{color:var(--on-dark-3);opacity:.45} .shieldchip.spent svg{color:var(--on-dark-3)} .shieldchip.firing{animation:fireShield .7s var(--ease)} @keyframes fireShield{0%{transform:scale(1)}30%{transform:scale(1.55);filter:drop-shadow(0 0 14px rgba(255,216,115,1))}100%{transform:scale(1)}} /* ── THE REVIVAL ──────────────────────────────────────── */ /* The slot for the shield revival clip (mobile/src/app/(tabs)/home.tsx has it as a TODO). Drop the file in beside the poses and it plays here and in the app from one asset. Until then it fails silently and the still poses carry the moment, so nothing breaks while it is missing. */ /* The real asset, recovered from archive/web-frontend. It is a side by side mp4: colour on the left half, alpha matte on the right. No browser plays that directly, so WebGL recombines the halves, which is the same thing the old StreakRevivalModal did. */ /* Full screen, centred, over the drained page. Tucked in the corner it read as an ad playing on top of the site. */ #revStage{position:fixed;inset:0;z-index:92;pointer-events:none;display:grid;place-items:center; padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px); opacity:0;transition:opacity .45s var(--ease)} #revStage.on{opacity:1} /* No radius and no shadow: both are what made it read as a card rather than as the screen. It meets a ground of its own colour now, and settles out of a slight push in rather than simply appearing. */ .rev-flat{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(1.05);z-index:92; height:min(92svh,1000px);width:auto;max-width:100vw;opacity:0;pointer-events:none; transition:opacity .5s var(--ease),transform 1.1s var(--ease)} .rev-flat.on{transform:translate(-50%,-50%) scale(1)} /* A phone is close enough to the clip's own shape to be it: full bleed, trimmed by a few pixels top and bottom, rather than floated in a field. */ @media(max-width:759px){ .rev-flat{height:100svh;width:100vw;max-width:none;object-fit:cover} } .rev-flat.on{opacity:1} .rev-canvas{height:min(92svh,1000px);aspect-ratio:1080/1920;max-width:94vw; filter:drop-shadow(0 50px 90px rgba(0,0,0,.85))} .him .slot img.hidden-for-clip{opacity:0} .rev-video{position:fixed;left:-9999px;top:0;width:2px;height:2px;opacity:0;pointer-events:none} /* and it ends by flooding the screen with light, then letting it go */ #revFlash{position:fixed;inset:0;z-index:93;pointer-events:none;opacity:0; background:radial-gradient(circle at 50% 46%,#FFF8DF 0%,#FFECBE 38%,rgba(255,216,115,.85) 62%,rgba(255,216,115,0) 88%)} #revFlash.up{opacity:1;transition:opacity 1.25s cubic-bezier(.45,0,.75,.6)} #revFlash.down{opacity:0;transition:opacity 1.1s var(--ease)} #bloom{position:fixed;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;z-index:73;pointer-events:none;opacity:0; background:radial-gradient(circle,rgba(255,216,115,.95),rgba(224,104,42,.5) 40%,transparent 70%)} #bloom.go{animation:bloom 1.15s cubic-bezier(.16,.9,.3,1) forwards} @keyframes bloom{0%{opacity:1;transform:scale(1)}70%{opacity:.5}100%{opacity:0;transform:scale(90)}} .dying{animation:dying .7s ease-out forwards} @keyframes dying{0%{filter:none;opacity:1}100%{filter:grayscale(1) brightness(.4);opacity:.5}} .revive{animation:reviveIn .75s var(--ease) both} @keyframes reviveIn{0%{opacity:0;transform:scale(.94) translateY(16px)}100%{opacity:1;transform:none}} .revive .kicker{font:700 10px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--ember-br);margin:0 0 16px} .revive h3{color:var(--sun-dp);margin:0 0 14px;font-size:clamp(23px,2.4vw,32px)} .revive .says{font:700 clamp(15.5px,1.35vw,18px)/1.5 var(--display);letter-spacing:-.03em;color:var(--on-dark);margin:0;max-width:30ch;min-height:2.4em} .revive .says b{color:var(--sun-dp)} .revive .cost{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:24px;padding-top:20px;border-top:1px solid var(--d16)} .revive .cost .gain{color:var(--plum-soft)} .ask{margin-top:24px} .ask .lbl{margin-bottom:18px} .your-turn{display:flex;align-items:center;gap:9px;margin:22px 0 0; font:700 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--sun-dp)} .your-turn::before{content:'';width:22px;height:1px;background:var(--sun)} .ask .q{font:800 clamp(18px,1.8vw,23px)/1.3 var(--display);letter-spacing:-.035em;margin:0;max-width:22ch;color:var(--on-dark);min-height:2.3em} .ask .q b{color:var(--sun-br);font-weight:800} .opts{margin-top:22px;overflow:hidden; transition:max-height .5s var(--ease),opacity .32s var(--ease),margin-top .5s var(--ease)} /* Once answered, the options fold away and the reply takes their place, so the section never grows past the screen it was measured for. */ .opts.folded{max-height:0!important;opacity:0;margin-top:0} /* what you picked, carried into the reply so nothing is lost */ .you-picked{display:flex;align-items:center;gap:12px;margin:0 0 16px; font:500 16px var(--body);color:var(--text-2)} .you-picked .tag{font:700 9px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--text-3)} .you-picked .val{padding:5px 11px;border-radius:8px;font-weight:600} .you-picked.ok .val{background:var(--leaf-soft);color:var(--leaf-dp)} .you-picked.no .val{background:var(--ember-soft);color:#8A2419; text-decoration:line-through;text-decoration-thickness:1.5px;text-underline-offset:3px} .on-ink .you-picked{color:var(--ink-mut)} .on-ink .you-picked .tag{color:var(--ink-dim)} /* the stage holds its height so answering does not shunt the page */ #stageBox{min-height:clamp(300px,40vh,380px)} .opt{position:relative;overflow:hidden;display:flex;align-items:center;gap:16px;width:100%;text-align:left; background:#fff;border:1.5px solid var(--border);border-radius:13px;margin-bottom:8px; padding:13px 16px;font:500 17px var(--body);color:var(--text);cursor:pointer; box-shadow:0 1px 2px rgba(41,28,21,.04); transition:border-color .25s,background .25s,transform .12s,box-shadow .25s} .opt:hover:not(:disabled){border-color:var(--sun);background:var(--sun-soft);transform:translateY(-1px);box-shadow:0 6px 16px -8px rgba(218,149,11,.5)} .opt:active:not(:disabled){transform:translateY(0)} .opt::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(280px circle at var(--mx,50%) 50%,rgba(255,216,115,.16),transparent 62%)} .opt:hover:not(:disabled)::before{opacity:1} .opt .k{font:700 11px var(--mono);letter-spacing:.14em;color:var(--on-dark-3);width:18px;flex:none} .opt .t{position:relative} .opt:disabled{cursor:default} .opt.right,.opt.right .k{color:var(--leaf-dp)} .opt.wrong,.opt.wrong .k{color:var(--ember)} .opt.wrong .t{text-decoration:line-through;text-decoration-thickness:1.5px;text-underline-offset:3px} .opt.dim{opacity:.22} .reply{margin-top:32px;display:grid;gap:22px} .reply .says{font:700 clamp(15.5px,1.35vw,18px)/1.5 var(--display);letter-spacing:-.03em;margin:0;max-width:28ch;color:var(--on-dark);min-height:2.4em} .reply .says b{color:var(--leaf);font-weight:800} .reply.miss .says b{color:var(--ember-br)} .reply-foot{display:flex;align-items:center;gap:26px;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--d16)} .gain{font:700 11px var(--mono);letter-spacing:.2em;text-transform:uppercase} .gain.up{color:var(--leaf)} .gain.down{color:var(--ember-br)} /* A button does not inherit colour: without it the label falls back to the browser's own buttontext grey. At 11.5px on a cream panel even the deep gold only reaches 3.65:1, so the label is navy and the gold is left to the rule and the arrow, where it only has to read as a graphic. */ .next{margin-left:auto;background:0;border:0;padding:0;color:var(--petrol);font:700 11.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;display:flex;align-items:center;gap:11px} .next span{position:relative;padding-bottom:5px} .next span::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--sun-dp);transform-origin:left;transition:transform .4s var(--ease)} .next:hover span::after{transform:scaleX(0);transform-origin:right} .next svg{color:var(--sun-dp);transition:transform .35s var(--ease)} .next:hover svg{transform:translateX(6px)} .finale h3{margin-bottom:18px;max-width:16ch} /* ── THE CARD IS CREAM, THE BAND IS NOT ────────────────── The quest panel is a cream card sitting inside the dark band, so every .on-ink rule above reaches into it and paints its text for a dark ground: the heading came out near white on cream and was invisible. This puts the light ground colours back for everything inside it. */ .on-ink .quest-wrap h1,.on-ink .quest-wrap h2, .on-ink .quest-wrap h3,.on-ink .quest-wrap h4{color:var(--petrol)} .on-ink .quest-wrap em{color:var(--sun-dp);font-style:normal} .on-ink .quest-wrap p,.on-ink .quest-wrap .lead{color:var(--text-2)} .on-ink .quest-wrap .lbl{color:var(--text-2)} .on-ink .quest-wrap .your-turn{color:var(--sun-ink)} .on-ink .quest-wrap .you-picked{color:var(--text-2)} .on-ink .quest-wrap .you-picked .tag{color:var(--text-3)} .on-ink .quest-wrap .tally .num{color:var(--sun-dp)} /* the two he says out loud keep their own colour */ .on-ink .quest-wrap .revive h3{color:var(--sun-dp)} .on-ink .quest-wrap .says b,.on-ink .quest-wrap .q b,.on-ink .quest-wrap em{color:var(--sun-ink)} .on-ink .quest-wrap .revive .cost .gain{color:var(--plum)} .on-ink .quest-wrap .revive .cost .lbl{color:var(--text-2)} /* the kicker is a

, so the rule above swallowed its red */ .on-ink .quest-wrap .revive .kicker{color:var(--ember)} /* 11px uppercase needs the deeper end of each hue to clear 4.5:1 on cream */ .on-ink .quest-wrap .gain.up{color:var(--leaf-dp)} .on-ink .quest-wrap .gain.down{color:var(--ember)} .tally{display:flex;gap:34px;flex-wrap:wrap;padding-block:20px;border-block:1px solid var(--d16);margin-block:26px} .tally div{display:grid;gap:7px} .tally .num{font:800 30px/1 var(--display);letter-spacing:-.04em;color:var(--sun-br);font-variant-numeric:tabular-nums} .him{position:relative} /* 450px, up from 370. The 38vw term is the guard: every pose is absolutely positioned and centred in this column, so height drives width and anything wider than the column spills both ways. 38vw keeps that spill inside the grid gap on a narrow desktop, so Nea never reaches the quest card. */ .him .slot{position:relative;min-height:min(500px,52vh,38vw);display:flex;align-items:flex-end;justify-content:center;will-change:transform} /* max-width:none undoes the global img{max-width:100%}. With width:auto and height:100% that global clamped the width alone and left the height, which squashed the one wide pose (nea-sad, 937x1000) sideways by up to 17% on a narrow desktop. Overflowing into the grid gap is the correct trade. */ .him .slot img{position:absolute;bottom:0;left:50%;width:auto;max-width:none;height:100%;max-height:min(540px,54vh);opacity:0;transform:translateX(-50%) translateY(18px) scale(.97);transition:opacity .45s var(--ease),transform .45s var(--ease);filter:drop-shadow(0 40px 70px rgba(0,0,0,.7))} .him .slot img.on{opacity:1;transform:translateX(-50%)} @media(max-width:999px){.him{display:none}} /* ── ONE PHONE, THE SCREENS FLY INTO IT ───────────────── The handset never moves. The quests come in from off the page, turn to face you, and land exactly inside its window. The bezel is a ring with nothing in it, drawn over the top, so whatever is centred sits in it. */ .reel{height:560vh;position:relative;z-index:1} @media(max-width:759px){.reel{height:auto}} .reel-pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden} @media(max-width:759px){.reel-pin{position:static;height:auto;overflow:visible;padding-block:20px}} .reel-head{padding-left:max(calc(var(--rail) + 44px), calc((100vw - var(--maxw)) / 2));padding-right:max(var(--pad), calc((100vw - var(--maxw)) / 2));margin-bottom:clamp(14px,2vw,24px)} @media(max-width:759px){.reel-head{padding-left:var(--pad)}} .reel-head h2{margin-top:20px;max-width:13ch} .carousel{position:relative;flex:1;min-height:0;perspective:1500px;perspective-origin:50% 48%} .carousel-in{position:absolute;inset:0;transform-style:preserve-3d} /* the window everything lands in */ :root{--screen-w:min(288px,66vw)} .deck-frame{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:var(--screen-w);aspect-ratio:9/18.2;z-index:60;pointer-events:none; border:9px solid #1B3A42;border-radius:40px; box-shadow:0 46px 90px -26px rgba(0,0,0,.95), 0 0 0 1px rgba(41,28,21,.07) inset, 0 0 74px -20px rgba(255,216,115,.42); } .deck-frame .notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:38%;height:19px; background:#1B3A42;border-radius:0 0 13px 13px} .qscreen{ position:absolute;left:50%;top:50%;width:var(--screen-w);aspect-ratio:9/18.2; transform-origin:50% 50%;will-change:transform,opacity; border-radius:32px;overflow:hidden; background:linear-gradient(170deg,#17363F,#091A1E 58%); box-shadow:0 30px 60px -24px rgba(0,0,0,.8); } .qscreen .screen{position:absolute;inset:0;padding:32px 18px 16px;display:flex;flex-direction:column} .qscreen::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2; background:linear-gradient(180deg,rgba(41,28,21,.05),transparent 26%)} /* the app bar */ .hs-bar{display:flex;align-items:center;gap:8px;padding-bottom:12px; font:700 9px var(--mono);letter-spacing:.16em;color:var(--on-dark-3)} .hs-bar .back{width:14px;height:14px;flex:none;color:var(--on-dark-2)} .hs-bar .right{margin-left:auto;color:var(--sun);font-variant-numeric:tabular-nums} /* the heading block */ .qscreen .qhead{padding-bottom:14px;border-bottom:1px solid var(--d09);margin-bottom:14px} .qscreen .qhead .eyebrow{margin:0 0 7px;font:700 8.5px var(--mono);letter-spacing:.2em; text-transform:uppercase;color:var(--sun)} .qscreen .qhead h3{font-size:24px;letter-spacing:-.035em;line-height:1;margin:0} .qscreen .role{margin:8px 0 0;font:400 11.5px/1.35 var(--body);color:var(--on-dark-3)} /* the bottom bar, so it ends like a screen rather than stopping */ .qscreen .hs-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--d09); display:flex;align-items:center;gap:7px;font:700 9.5px var(--mono);letter-spacing:.1em;color:var(--on-dark-3)} .qscreen .hs-foot svg{color:var(--ember-br)} .qscreen .hs-foot .xp{margin-left:auto;color:var(--sun-br)} .reel-bar{margin-top:clamp(12px,1.6vw,20px);display:flex;align-items:center;justify-content:center;gap:9px} @media(max-width:759px){.reel-bar{display:none}} .reel-bar i{width:6px;height:6px;border-radius:50%;background:var(--d16);transition:background .3s,transform .3s} .reel-bar i.on{background:var(--sun-br);transform:scale(1.5)} .reel-bar .lbl{margin-right:8px;color:var(--sun-br)} /* on a phone it is already a phone, so it is just a list */ @media(max-width:759px){ .carousel{perspective:none;min-height:0} .carousel-in{position:static;transform-style:flat} .deck-frame{display:none} .qscreen{position:static;width:auto;aspect-ratio:auto;transform:none!important;opacity:1!important; border-radius:0;background:0;box-shadow:none;border-top:1px solid var(--d16);overflow:visible} .qscreen .screen{position:static;padding:24px var(--pad)} .hs-bar{display:none} } /* ── IDEA 5: SEVEN QUESTS, SEVEN SHAPES ───────────────── Scaled for a handset screen: this all sits inside a phone now. */ A grid of identical cards says the seven are interchangeable. They are not, so each one is laid out like the thing it actually is. */ .qbody{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center} /* RECALL: a sprint. tight, mono, against a clock. */ .k-recall .qbody{font-family:var(--mono)} .k-recall .tick{height:3px;background:var(--d16);border-radius:2px;overflow:hidden;margin-bottom:14px} .k-recall .tick i{display:block;height:100%;width:24%;background:var(--sun-br)} .k-recall .rapid{display:grid;gap:5px} .k-recall .rapid div{display:flex;justify-content:space-between;gap:8px; font:700 11px var(--mono);letter-spacing:.02em;color:var(--on-dark-3); padding:5px 0;border-bottom:1px dashed var(--d09)} .k-recall .rapid b{color:var(--sun-br);font-weight:700} .k-recall .rapid .ms{color:var(--leaf);font-size:11px} /* CONCEPT: room to think. one line, big, and a lot of air. */ .k-concept .qbody{display:flex;flex-direction:column;justify-content:center;gap:22px} .k-concept .big-q{font:800 18px/1.25 var(--display);letter-spacing:-.03em;color:var(--on-dark);margin:0} .k-concept .soft{font:400 14.5px var(--body);color:var(--on-dark-3);margin:0;padding-left:16px;border-left:2px solid var(--d16)} /* PROBLEM: a worked calculation, one step under the next. */ .k-problem .steps-mini{display:grid;gap:0} .k-problem .steps-mini div{display:grid;grid-template-columns:20px 1fr auto;gap:8px;align-items:baseline; padding:7px 0;border-bottom:1px solid var(--d09);font:400 12.5px var(--body);color:var(--on-dark-2)} .k-problem .steps-mini span:first-child{font:700 10px var(--mono);color:var(--on-dark-3)} .k-problem .steps-mini b{font:700 14px var(--mono);color:var(--sun-br);font-variant-numeric:tabular-nums} /* DEBUG: it is code, so it looks like code, and the fault is marked. */ .k-debug .qbody{font-family:var(--mono)} .k-debug .code{background:rgba(0,0,0,.28);border:1px solid var(--d09);padding:11px 12px;font:400 11.5px/1.65 var(--mono);color:var(--on-dark-2)} .k-debug .code .bad{color:var(--ember-br);text-decoration:underline wavy var(--ember);text-underline-offset:4px} .k-debug .fix{margin:12px 0 0;font:700 11px var(--mono);letter-spacing:.1em;color:var(--leaf)} /* CASE: a file on someone, with a call to make. */ .k-case .file{display:grid;gap:0;border:1px solid var(--d09)} .k-case .file div{display:grid;grid-template-columns:78px 1fr;gap:10px;padding:8px 12px;border-bottom:1px solid var(--d09)} .k-case .file div:last-child{border-bottom:0} .k-case .file span{font:700 9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-3);padding-top:2px} .k-case .file b{font:500 12.5px var(--body);color:var(--on-dark);font-weight:500} .k-case .call{margin:12px 0 0;display:inline-block;font:700 10px var(--mono);letter-spacing:.16em; text-transform:uppercase;color:var(--fox);border:1px solid rgba(224,104,42,.5);padding:6px 11px} /* DIALOGUE: it is a conversation, so it is bubbles. */ .k-dialogue .chat{display:grid;gap:9px} .k-dialogue .chat p{margin:0;max-width:88%;padding:8px 11px;font:400 13px/1.4 var(--body)} .k-dialogue .chat .them{justify-self:start;background:rgba(41,28,21,.07);border-radius:14px 14px 14px 3px;color:var(--on-dark)} .k-dialogue .chat .you{justify-self:end;background:var(--plum);border-radius:14px 14px 3px 14px;color:#F9E9F7} .k-dialogue .chat .note{justify-self:start;background:0;padding:2px 0;font-size:13px;color:var(--on-dark-3);font-style:italic} /* ARGUMENT: two sides, and a line down the middle. */ .k-argument .versus{display:grid;grid-template-columns:1fr 1fr;gap:0} .k-argument .versus > div{padding:0 14px} .k-argument .versus > div:first-child{padding-left:0;border-right:1px solid var(--d16)} .k-argument .versus > div:last-child{padding-right:0} .k-argument .versus h4{margin:0 0 8px;font:700 9px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-3)} .k-argument .versus:first-child h4{color:var(--ember-br)} .k-argument .versus p{margin:0;font:400 12.5px/1.45 var(--body);color:var(--on-dark-2)} .k-argument .versus .claim{color:var(--ember-br)} /* ── memory (light) ──────────────────────────────────── */ /* heading holds the left, the sessions run down the right */ .mem-grid{display:grid;gap:clamp(24px,3vw,46px);margin-top:clamp(18px,2.4vh,30px)} @media(min-width:1000px){.mem-grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(40px,5vw,80px);align-items:start}} @media(min-width:1000px){.mem-head{position:sticky;top:130px}} .thread-list{margin-top:0;max-width:none} .beat-row{padding-block:clamp(18px,2.4vh,30px)} .beat-row{display:grid;gap:12px;padding-block:clamp(26px,3.2vw,40px);border-top:1px solid var(--border)} @media(min-width:760px){.beat-row{grid-template-columns:118px minmax(0,1fr);gap:28px;align-items:baseline}} .beat-row:last-child{border-bottom:1px solid var(--border)} .beat-row .when{font:700 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--text-3);margin:0} .beat-row.hit .when{color:var(--sun-ink)} .you-said{font:400 14px var(--body);color:var(--text-3);margin:0 0 12px} .you-said b{font-weight:600;color:var(--text-2)} .he-said{font:800 clamp(17px,1.7vw,22px)/1.35 var(--display);letter-spacing:-.03em;color:var(--petrol);margin:0;max-width:26ch} .he-said b{color:var(--sun-dp);font-weight:800} .beat-row.hit .he-said{font-size:clamp(19px,2.1vw,27px)} /* ── HOW IT WORKS ─────────────────────────────────────── Same shape as the live site: the visual on top, then the number, the heading and the line. Three across. */ .steps{margin-top:clamp(22px,3vh,36px);display:grid;gap:clamp(16px,2vw,26px)} @media(min-width:900px){ .steps{grid-template-columns:repeat(3,1fr);grid-auto-rows:auto} .step{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0} /* fills the shared panel row, so the three panels match. Only here: on a phone .step is a plain block and 100% resolves against the whole grid row, which made the panel swallow the step and push its own text into the step below. */ .step-visual{height:100%} } .step-visual{border:1px solid var(--d16);background:rgba(41,28,21,.025); padding:clamp(18px,2.2vw,24px);min-height:clamp(150px,18vh,195px);display:flex;flex-direction:column;justify-content:center;gap:12px} .step-text{padding:16px 2px 0} .step-text .num{font:700 11px var(--mono);letter-spacing:.2em;color:var(--sun);margin:0 0 10px} .step-text h3{font-size:clamp(20px,2.1vw,25px);margin:0 0 8px} .step-text p{margin:0;font:400 15.5px/1.55 var(--body);color:var(--on-dark-2);max-width:34ch} .goal-label{font:700 10.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-3);margin:0} .goalbox{border:1px dashed var(--d16);background:rgba(246,240,226,.04);padding:14px 16px; font:800 clamp(16px,1.6vw,19px)/1.3 var(--display);letter-spacing:-.025em;color:var(--on-dark-3);min-height:62px} .goalbox span{color:var(--sun-br)} /* --sun-br is the sun for a DARK ground. The #how band is light, so every place it was used as ink there measured near 1.2:1 and the typed goal was invisible. --sun-ink is the sun that survives cream, 4.95:1. Scoped to .band.light so the on-ink sections keep the bright one. */ .band.light .goalbox span, .band.light .step-text .num, .band.light .xpchip{color:var(--sun-ink)} .band.light .caret, .band.light .mini-reply p i{background:var(--sun-ink)} .caret{display:inline-block;width:3px;height:.82em;background:var(--sun-br);vertical-align:-1px;margin-left:2px;animation:blink 1s steps(1) infinite} @keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}} .btn-mini{align-self:flex-start;background:linear-gradient(180deg,var(--sun-br),var(--sun));color:var(--ink); border:0;padding:10px 18px;font:800 13px var(--display);letter-spacing:-.01em;box-shadow:0 2px 0 var(--sun-dp);transition:transform .12s,box-shadow .22s} .btn-mini:hover{box-shadow:0 2px 0 var(--sun-dp),0 12px 26px -12px rgba(254,196,57,.95)} .btn-mini:active{transform:translateY(2px);box-shadow:none} /* it lights up the moment the goal is finished being typed */ .btn-mini.ready{animation:ready 1.4s var(--ease)} @keyframes ready{ 0%,100%{box-shadow:0 2px 0 var(--sun-dp)} 40%{box-shadow:0 2px 0 var(--sun-dp),0 0 0 6px rgba(255,216,115,.22),0 14px 30px -12px rgba(255,216,115,1)} } .checklist{margin:0;padding:0;list-style:none;display:grid;gap:13px} .checklist li{display:flex;align-items:center;gap:13px;font:400 15px var(--body);color:var(--on-dark-3);opacity:.4;transition:opacity .5s,color .5s} .checklist li .ring{width:21px;height:21px;border-radius:50%;border:2px solid var(--d16);flex:none; display:grid;place-items:center;color:transparent;transition:.5s} .checklist li.done{opacity:1;color:var(--on-dark)} .checklist li.done .ring{background:var(--sun-br);border-color:var(--sun-br);color:var(--ink)} .checklist li.done .ring{animation:tickpop .42s var(--ease)} @keyframes tickpop{0%{transform:scale(.5)}62%{transform:scale(1.22)}100%{transform:scale(1)}} .mini-row{display:flex;align-items:center;gap:12px} .hearts-row{display:inline-flex;gap:4px} .hearts-row svg{color:var(--ember-br)} .hearts-row svg.beat{animation:beat 2.6s ease-in-out infinite} .xpchip{margin-left:auto;display:inline-flex;align-items:center;gap:5px;background:rgba(255,216,115,.15); color:var(--sun-br);padding:5px 11px;font:800 13.5px var(--display);font-variant-numeric:tabular-nums; opacity:0;transform:scale(.7);transition:opacity .3s var(--ease),transform .45s cubic-bezier(.2,1.5,.4,1)} .xpchip.in{opacity:1;transform:none} .hearts-row svg.drop{animation:drop .6s ease-out forwards} @keyframes drop{0%{transform:scale(1.3)}30%{transform:scale(.65) rotate(-12deg)}100%{transform:scale(.82);color:var(--d16)}} .bar{height:4px;background:var(--d16);border-radius:99px;overflow:hidden} .bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--sun),var(--sun-br));transition:width 1.6s var(--ease)} .bar.go i{width:68%} .mini-reply{display:flex;gap:11px;align-items:center} .mini-reply img{width:30px;height:30px;flex:none;background:var(--petrol-2)} .mini-reply p{margin:0;font:400 15px/1.4 var(--body);color:var(--on-dark-2);min-height:2.8em} .mini-reply p i{font-style:normal;display:inline-block;width:2px;height:.9em;background:var(--sun-br);vertical-align:-1px;margin-left:2px;animation:blink 1s steps(1) infinite} /* ── get ─────────────────────────────────────────────── */ .get-grid{display:grid;gap:clamp(40px,6vw,76px);align-items:end} @media(min-width:900px){.get-grid{grid-template-columns:minmax(0,1fr) minmax(0,.68fr)}} .get-art{position:relative;justify-self:center;max-width:min(300px,34vh);will-change:transform} .get-art img{filter:drop-shadow(0 40px 66px rgba(0,0,0,.72))} /* -14% cleared the old mascot, whose pose was narrower. Nea's tail spreads further left, so the quip sits further out and he steps right to meet it. Both only apply above 900, where the quip is absolutely placed at all. */ .get-art .quip{position:absolute;top:2%;left:-42%;font:800 clamp(17px,2vw,24px)/1.18 var(--display);letter-spacing:-.03em;color:var(--sun-br);max-width:10ch;z-index:2} @media(min-width:900px){.get-art img{transform:translateX(10%)}} @media(max-width:899px){ /* it hung off the left edge and got clipped. In flow above him instead. */ .get-art{max-width:230px} .get-art .quip{position:static;max-width:none;text-align:center;margin:0 0 16px;font-size:19px} .get-grid{gap:34px} } .stores{display:flex;gap:26px;flex-wrap:wrap;margin-top:30px;padding-top:22px;border-top:1px solid var(--d16)} .store{background:0;border:0;padding:0;display:flex;align-items:center;gap:11px;font:700 11.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-2);transition:color .25s} .store:hover{color:var(--sun-br)} /* the thread rail is fixed down the left, so the footer needs the same gutter every .pad section has, or its first link sits under a node. */ /* ── FOOTER ──────────────────────────────────────────── */ /* Treated like the nav: flat, edge to edge, translucent over a blur, one hairline. No radius and no shadow, so it reads as the end of the page and not as another card laid on top of the section above it. */ footer{position:relative;z-index:59; background:var(--ink);color:var(--ink-mut); border-top:1px solid rgba(246,240,226,.14); padding:clamp(46px,5.5vw,72px) var(--pad) calc(28px + env(safe-area-inset-bottom,0px))} .foot-in{max-width:var(--maxw);margin:0 auto} .foot-top{display:grid;gap:clamp(32px,4vw,50px)} /* Three blocks now, not four: the brand takes the room that is left and the two link lists sit against the right edge, sized to their content. */ @media(min-width:820px){.foot-top{grid-template-columns:minmax(0,1fr) auto auto; column-gap:clamp(48px,7vw,110px)}} .foot-brand img{width:108px;height:24px;margin-bottom:20px} /* Same empty space inside the file as the one in the nav, 17px at 128px wide, which is why it sat right of every line under it. */ .foot-brand .mark{display:block;line-height:0;margin-bottom:20px} .foot-brand img[src*='light']{display:block} .foot-brand img:not([src*='light']){display:none} .foot-brand .tag{margin:0 0 16px;font:400 14.5px var(--body);color:var(--ink-mut);max-width:28ch} .foot-brand a.mail{font:500 15.5px var(--body);color:var(--sun-br);text-decoration:none;border-bottom:1px solid rgba(255,216,115,.32);transition:color .22s,border-color .22s} .foot-brand a.mail:hover{color:var(--cream);border-color:var(--cream)} .foot-col h4{font:700 10px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);margin:0 0 18px} .foot-col a{display:block;margin-bottom:13px;font:400 14.5px var(--body);color:var(--ink-text);text-decoration:none;cursor:pointer;opacity:.82;transition:opacity .22s,color .22s} .foot-col a:last-child{margin-bottom:0} .foot-col a:hover{opacity:1;color:var(--sun-br)} .foot-bot{margin-top:clamp(34px,4.5vw,52px);padding-top:24px;border-top:1px solid rgba(246,240,226,.14); display:flex;flex-wrap:wrap;gap:12px 20px;align-items:baseline} .foot-bot small{font:400 14px var(--body);color:var(--ink-mut)} .foot-bot small:last-child{margin-left:auto} /* On the other pages the ground is cream, so the footer takes the cream version of the same bar rather than dropping a navy slab under the text. */ body.reading footer{background:var(--cream);color:var(--text-2); border-top:1px solid var(--border)} body.reading .foot-brand img{display:none} body.reading .foot-brand img:not([src*='light']){display:block} body.reading .foot-brand .tag{color:var(--text-2)} body.reading .foot-brand a.mail{color:var(--sun-ink);border-bottom-color:rgba(140,109,14,.45)} body.reading .foot-brand a.mail:hover{color:var(--petrol);border-color:var(--petrol)} body.reading .foot-col h4{color:var(--text-3)} body.reading .foot-col a{color:var(--petrol)} body.reading .foot-col a:hover{color:var(--sun-dp)} body.reading .foot-bot{border-top:1px solid var(--border)} body.reading .foot-bot small{color:var(--text-3)} /* ── THE OTHER PAGES ───────────────────────────────────── Same ground, same type, same gold rail. They are the site, not a document viewer bolted onto it. */ /* These are pages. They live in the normal document flow, scroll with the page, change the url and answer the back button. On the real site they are the routes legal.py already serves. */ #doc{display:none;background:var(--cream);color:var(--text);min-height:100svh} body.reading #doc{display:block;animation:pageIn .5s var(--ease) both} @keyframes pageIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} /* while reading, the site itself steps aside */ body.reading .band,body.reading .reel, body.reading #thread,body.reading #mobar,body.reading #watcher,body.reading #askMem{display:none!important} #doc .dtop{display:none} #doc .dtop-unused{position:sticky;top:0;z-index:3;background:rgba(246,240,226,.92); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); border-bottom:1px solid var(--border);display:flex;align-items:center;gap:16px;padding:16px var(--pad)} #doc .dtop .mark{display:block;line-height:0} #doc .dtop .mark img{width:96px;height:21px} #doc .dnav{margin-left:auto;display:none;gap:28px;align-items:center} @media(min-width:880px){#doc .dnav{display:flex}} #doc .dnav a{font:600 12.5px var(--body);color:var(--petrol);text-decoration:none;opacity:.7;cursor:pointer;transition:opacity .25s} #doc .dnav a:hover{opacity:1} #doc .dclose{background:0;border:1px solid var(--border);padding:9px 16px; font:700 10.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--petrol); display:flex;align-items:center;gap:9px;cursor:pointer;transition:border-color .25s,color .25s} @media(max-width:879px){#doc .dclose{margin-left:auto}} #doc .dclose:hover{border-color:var(--sun);color:var(--sun-dp)} #doc .dclose svg{transition:transform .3s var(--ease)} #doc .dclose:hover svg{transform:translateX(-4px)} #doc .dwrap{max-width:var(--maxw);margin:0 auto; padding:calc(clamp(30px,4vw,54px) + 64px) var(--pad) 30px} #doc .deyebrow{font:700 10.5px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--sun-ink);margin:0 0 20px} #doc .dhead{position:relative;padding:clamp(22px,2.6vw,32px) 0 clamp(20px,2.4vw,28px); border-top:3px solid var(--sun);margin-bottom:clamp(20px,2.6vw,30px)} #doc h1{font:800 clamp(28px,3.4vw,46px)/1.06 var(--display);letter-spacing:-.04em;color:var(--petrol);margin:0;max-width:16ch} #doc .dmeta{font:400 15.5px/1.65 var(--body);color:var(--text-2);margin:20px 0 0;max-width:56ch} #doc .dgrid{display:grid;gap:40px;margin-top:clamp(30px,4vw,50px)} @media(min-width:960px){#doc .dgrid{grid-template-columns:250px minmax(0,1fr);gap:clamp(44px,5vw,80px);align-items:start}} #doc .dtoc{position:relative} @media(min-width:960px){#doc .dtoc{position:sticky;top:120px}} #doc .dtoc>p{font:700 10px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--text-3); margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid var(--border)} #doc .dtoc .tline{position:absolute;left:5px;top:34px;bottom:6px;width:2px;background:var(--border)} @media(max-width:959px){#doc .dtoc .tline{display:none}} #doc .dtoc a{position:relative;display:flex;gap:14px;align-items:baseline;padding:9px 0 9px 24px; font:500 14px var(--body);color:var(--text-2);text-decoration:none;cursor:pointer; transition:color .28s,padding-left .3s var(--ease)} #doc .dtoc a::before{content:"";position:absolute;left:0;top:14px;width:12px;height:12px;border-radius:50%; background:var(--cream);border:2px solid var(--border);transition:.35s} #doc .dtoc a:hover{color:var(--petrol);padding-left:30px} #doc .dtoc a.on{color:var(--sun-dp);font-weight:600} #doc .dtoc a.on::before{background:var(--sun);border-color:var(--sun);box-shadow:0 0 0 4px rgba(254,196,57,.2)} #doc .dtoc a i{font-style:normal;font:700 10px var(--mono);color:var(--text-3);min-width:16px} #doc .dtoc a.on i{color:var(--sun-dp)} #doc .dbody > section{padding-block:clamp(26px,3vw,40px);border-top:1px solid var(--border)} #doc .dbody > section:first-child{border-top:0;padding-top:0} #doc .dbody h2{font:800 clamp(19px,2vw,25px)/1.15 var(--display);letter-spacing:-.03em;color:var(--petrol); margin:0 0 16px;scroll-margin-top:120px} #doc .dbody .warn p{color:#8A2419} #doc .dbody p{margin:0 0 16px;color:var(--text-2);font:400 15.5px/1.75 var(--body);max-width:66ch} /* numbered sections get their number in the margin, like a contract */ #doc .dbody > section > h2{display:flex;align-items:baseline;gap:14px} #doc .dbody p:last-child{margin-bottom:0} #doc .dbody b{color:var(--petrol);font-weight:600} #doc .dbody ul,#doc .dbody ol{margin:0 0 18px;padding-left:24px;max-width:66ch; color:var(--text-2);font:400 15.5px/1.75 var(--body)} #doc .dbody li{margin-bottom:10px} #doc .dbody li:last-child{margin-bottom:0} #doc .dbody li::marker{color:var(--sun-dp)} #doc .dbody strong{color:var(--petrol);font-weight:600} #doc .dbody a{color:var(--plum)} #doc .dmail{position:relative;border:0;border-radius:18px;padding:clamp(26px,3vw,36px); margin-bottom:clamp(26px,3vw,38px); background:linear-gradient(140deg,var(--sun-soft),#FFF4DE 60%,#FFFCF2); box-shadow:0 2px 0 rgba(254,196,57,.45), 0 20px 44px -26px rgba(218,149,11,.6)} #doc .dmail p.k{font:700 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--sun-ink);margin:0 0 12px} #doc .dmail a.addr{font:800 clamp(19px,2vw,26px) var(--display);letter-spacing:-.03em;color:var(--sun-dp);text-decoration:none;display:inline-block} #doc .dmail a.addr:hover{color:var(--petrol)} #doc .dmail p.s{margin:12px 0 0;font:400 14px var(--body);color:var(--text-2)} #doc .dnote{border-left:3px solid var(--ember);background:var(--ember-soft);padding:16px 20px;margin:0 0 18px} #doc .dnote p{color:#8A2419;margin:0;font-size:15.5px} #howto{border:0;border-radius:20px;padding:28px;max-width:440px;width:calc(100% - 40px); background:var(--cream);color:var(--text);box-shadow:0 40px 90px -30px rgba(0,0,0,.6)} #howto::backdrop{background:rgba(14,35,41,.55);backdrop-filter:blur(3px)} #howto h2{font:800 clamp(20px,2.2vw,25px) var(--display);letter-spacing:-.03em;color:var(--petrol);margin:0 0 18px} #howto p{margin:0;color:var(--text-2);font:400 16px/1.6 var(--body)} #howto .dlg-actions{display:flex;gap:10px;margin-top:22px} /* ── the live Support and Delete pages, component for component ── */ .contact{display:flex;align-items:center;gap:clamp(18px,2.4vw,28px);flex-wrap:wrap; border-radius:20px;padding:clamp(22px,2.8vw,32px);margin-bottom:clamp(24px,3vw,36px); background:linear-gradient(140deg,var(--sun-soft),#FFF4DE 60%,#FFFCF2); box-shadow:0 2px 0 rgba(254,196,57,.45), 0 20px 44px -26px rgba(218,149,11,.6)} .contact img{width:84px;height:84px;flex:none;box-shadow:0 8px 20px -10px rgba(41,28,21,.45)} .contact .eyebrow{font:700 10px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--sun-ink);margin:0 0 8px} .contact .mail-big{font:800 clamp(19px,2vw,26px) var(--display);letter-spacing:-.03em;color:var(--petrol);text-decoration:none;display:inline-block} .contact .mail-big:hover{color:var(--sun-dp)} .contact p{margin:8px 0 0;font:400 14px var(--body);color:#6B4A05} .btn-inline{margin-left:auto;display:inline-flex;align-items:center;gap:9px;text-decoration:none; background:linear-gradient(180deg,var(--sun-br),var(--sun));color:var(--ink); border-radius:12px;padding:13px 20px;font:800 14.5px var(--display);letter-spacing:-.01em; box-shadow:0 2px 0 var(--sun-dp);transition:transform .12s,box-shadow .25s} .btn-inline:hover{box-shadow:0 2px 0 var(--sun-dp),0 14px 30px -14px rgba(254,196,57,1)} .btn-inline:active{transform:translateY(2px);box-shadow:none} .cards{display:grid;align-items:stretch;gap:clamp(14px,1.8vw,20px);margin-bottom:clamp(16px,2.2vw,26px)} @media(min-width:800px){.cards{grid-template-columns:1fr 1fr}} .card{position:relative;overflow:hidden;display:flex;flex-direction:column;text-decoration:none; border:1px solid var(--border);background:#fff;border-radius:16px; padding:clamp(22px,2.6vw,30px);box-shadow:0 2px 6px rgba(41,28,21,.04); transition:transform .25s,box-shadow .3s,border-color .3s} a.card{cursor:pointer} .card > .cfoot{display:flex;margin-top:auto;padding-top:18px} .card > .cfoot > .btn-inline{margin:0} .card:hover{transform:translateY(-3px);box-shadow:0 18px 38px -20px rgba(41,28,21,.34)} .card::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px; transform:scaleY(0);transform-origin:top;transition:transform .35s var(--ease)} .card:hover::after{transform:scaleY(1)} .card .tile{display:grid;place-items:center;width:46px;height:46px;border-radius:13px; margin:0 0 16px;flex:none} .card h2{font:800 clamp(17px,1.7vw,21px)/1.18 var(--display);letter-spacing:-.03em;color:var(--petrol);margin:0 0 10px;display:block} .card p{margin:0;color:var(--text-2);font:400 14.5px/1.62 var(--body);max-width:none} .card .more{display:inline-flex;align-items:center;gap:9px;align-self:flex-start; margin-top:auto;padding-top:18px;text-decoration:none; font:700 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase} .card .more svg{transition:transform .3s var(--ease)} .card:hover .more svg{transform:translateX(5px)} .tone-cobalt .tile{background:var(--plum-soft);color:var(--plum)} .tone-cobalt::after{background:var(--plum)} .tone-cobalt .more{color:var(--plum)} .tone-gold .tile{background:var(--sun-soft);color:var(--sun-dp)} .tone-gold::after{background:var(--sun)} .tone-gold .more{color:var(--sun-ink)} .tone-sage .tile{background:var(--leaf-soft);color:var(--leaf-dp)} .tone-sage::after{background:var(--leaf)} .tone-sage .more{color:var(--leaf-dp)} .tone-terra .tile{background:var(--ember-soft);color:var(--ember)} .tone-terra::after{background:var(--ember)} .tone-terra .more{color:var(--ember)} .numbered{margin:0;padding:0;list-style:none;counter-reset:st;display:grid;gap:11px} .numbered li{counter-increment:st;display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:baseline; font:400 15.5px/1.55 var(--body);color:var(--text-2)} .numbered li::before{content:counter(st);display:grid;place-items:center;width:26px;height:26px;border-radius:50%; background:var(--cream-2);color:var(--petrol);font:700 11px var(--mono)} .card .ok{display:flex;align-items:center;gap:9px;align-self:flex-start;margin:auto 0 0;padding-top:18px; font:600 14.5px var(--body);color:var(--leaf-dp)} .card .ok svg{color:var(--leaf)} .warn{display:flex;gap:16px;align-items:flex-start;border-left:3px solid var(--ember); background:var(--ember-soft);border-radius:0 14px 14px 0;padding:clamp(20px,2.4vw,26px); margin-bottom:clamp(20px,2.6vw,30px)} .warn .tile{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;flex:none; background:rgba(184,53,43,.16);color:var(--ember)} .warn h2{font:800 clamp(16px,1.6vw,19px) var(--display);letter-spacing:-.03em;color:#8A2419;margin:0 0 8px} .warn p{margin:0;color:#8A2419;font:400 14.5px/1.62 var(--body);max-width:none} .card a,.warn a{color:var(--plum)} #doc.is-task .dtoc{display:none} #doc.is-task .dgrid{grid-template-columns:1fr} #doc.is-task h1{max-width:16ch;font-size:clamp(27px,3.2vw,42px)} #doc.is-task .dmeta{font-size:15px} .dtasks{display:grid;gap:clamp(14px,1.6vw,20px)} @media(min-width:860px){.dtasks{grid-template-columns:1fr 1fr}} .dtask{position:relative;overflow:hidden;border:1px solid var(--border);background:#fff; border-radius:16px;padding:clamp(24px,2.6vw,32px); box-shadow:0 2px 6px rgba(41,28,21,.04); transition:border-color .3s,background .3s,transform .25s,box-shadow .3s} .dtask:hover{transform:translateY(-3px);box-shadow:0 18px 38px -20px rgba(41,28,21,.34)} .dtask::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--sun); transform:scaleY(0);transform-origin:top;transition:transform .35s var(--ease)} .dtask:hover::after{transform:scaleY(1)} .dtask:hover{border-color:var(--sun);background:var(--sun-soft)} .dtask .tnum{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%; background:var(--sun-soft);color:var(--sun-dp);font:700 11.5px var(--mono);margin-bottom:18px; box-shadow:0 0 0 1px rgba(254,196,57,.35)} .dtask h2{font:800 clamp(17px,1.7vw,21px)/1.2 var(--display);letter-spacing:-.03em;color:var(--petrol);margin:0 0 12px} .dtask p{margin:0 0 10px;color:var(--text-2);font:400 14.5px/1.62 var(--body);max-width:none} .dtask p:last-child{margin-bottom:0} .dtask b{color:var(--sun-dp);font-weight:600} .dtask a{color:var(--plum)} #doc.is-task .dtoc{display:none} #doc.is-task .dgrid{grid-template-columns:1fr} #doc.is-task h1{max-width:16ch;font-size:clamp(27px,3.2vw,42px)} #doc.is-task .dmeta{font-size:15px} .dtasks{display:grid;gap:clamp(14px,1.6vw,20px)} @media(min-width:860px){.dtasks{grid-template-columns:1fr 1fr}} .dtask{position:relative;overflow:hidden;border:1px solid var(--border);background:#fff; border-radius:16px;padding:clamp(24px,2.6vw,32px); box-shadow:0 2px 6px rgba(41,28,21,.04); transition:border-color .3s,background .3s,transform .25s,box-shadow .3s} .dtask:hover{transform:translateY(-3px);box-shadow:0 18px 38px -20px rgba(41,28,21,.34)} .dtask::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--sun); transform:scaleY(0);transform-origin:top;transition:transform .35s var(--ease)} .dtask:hover::after{transform:scaleY(1)} .dtask:hover{border-color:var(--sun);background:var(--sun-soft)} .dtask .tnum{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%; background:var(--sun-soft);color:var(--sun-dp);font:700 11.5px var(--mono);margin-bottom:18px; box-shadow:0 0 0 1px rgba(254,196,57,.35)} .dtask h2{font:800 clamp(17px,1.7vw,21px)/1.2 var(--display);letter-spacing:-.03em;color:var(--petrol);margin:0 0 12px} .dtask p{margin:0 0 10px;color:var(--text-2);font:400 14.5px/1.62 var(--body);max-width:none} .dtask p:last-child{margin-bottom:0} .dtask b{color:var(--sun-dp);font-weight:600} .dtask a{color:var(--plum)} display:flex;flex-wrap:wrap;gap:16px 28px;align-items:baseline} /* a gold dot on every eyebrow, so the labels are not just small grey text */ .lbl{position:relative} .band > .bwrap > .lbl::before, .reel-head > .lbl::before{content:"";display:inline-block;width:6px;height:6px; border-radius:50%;background:var(--sun);margin-right:10px;vertical-align:1px} /* the sparks a right answer throws */ #sparks{position:fixed;inset:0;z-index:84;pointer-events:none} /* he breathes in the hero instead of standing there */ @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} .hv-him.on{animation:bob 5.2s ease-in-out infinite} /* the hearts have a pulse worth watching */ .hearts svg.beat{animation:beat 2.2s ease-in-out infinite} /* the finish card arrives with a bit of swagger */ @keyframes finaleIn{0%{opacity:0;transform:scale(.94) translateY(20px)} 60%{transform:scale(1.015) translateY(0)}100%{opacity:1;transform:none}} .finale{animation:finaleIn .7s cubic-bezier(.2,.9,.3,1.1) both} .finale h3{position:relative;display:inline-block} /* ── SOME NOISE AND COLOUR ─────────────────────────────── Cream and hairlines were reading as considered but cold. These put some play back in without touching the palette. */ /* right and wrong should feel like something */ @keyframes rightPop{0%{transform:scale(1)}38%{transform:scale(1.045)}100%{transform:scale(1)}} .opt.right{animation:rightPop .42s cubic-bezier(.3,1.5,.5,1)} @keyframes wrongShake{0%,100%{transform:translateX(0)}22%{transform:translateX(-7px)}46%{transform:translateX(6px)}72%{transform:translateX(-3px)}} .opt.wrong{animation:wrongShake .42s ease-out} /* the gold buttons get a sheen that crosses when you touch them */ .sign button,.btn-mini{position:relative;overflow:hidden} .sign button::after,.btn-mini::after{content:"";position:absolute;top:-60%;bottom:-60%;width:38%; left:-50%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-18deg);transition:left .65s cubic-bezier(.3,.8,.3,1);pointer-events:none} .sign button:hover::after,.btn-mini:hover::after{left:130%} /* the quest chips should react, not sit there */ @keyframes chipPop{0%{transform:scale(.7);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}} .gain{display:inline-block;animation:chipPop .45s cubic-bezier(.3,1.4,.5,1)} .meter .num.gold{transition:color .3s} @keyframes xpFlare{0%,100%{text-shadow:none}40%{text-shadow:0 0 18px rgba(254,196,57,.9)}} .meter .num.gold.flare{animation:xpFlare .8s ease-out} /* every section heading gets a gold underline that draws itself */ .band > .bwrap > h2, .reel-head h2{position:relative} .band > .bwrap > h2::after, .reel-head h2::after{content:"";position:absolute;left:0;bottom:-14px;height:3px; width:72px;background:var(--sun);transform:scaleX(0);transform-origin:left;border-radius:2px; transition:transform .8s cubic-bezier(.2,.8,.2,1) .35s} .band > .bwrap > h2.lift::after, .reel-head h2.lift::after{transform:scaleX(1)} .on-ink h2::after{background:var(--sun-br)} /* the quest card lifts off the page */ .quest-wrap{background:#fff;border:1px solid var(--border);border-radius:20px; padding:clamp(22px,2.6vw,32px);box-shadow:0 18px 44px -24px rgba(41,28,21,.3)} #ring{position:fixed;top:0;left:0;width:28px;height:28px;border:1.5px solid var(--sun-br);border-radius:50%;pointer-events:none;z-index:80;opacity:0;transition:width .25s var(--ease),height .25s var(--ease),background .25s,opacity .25s,border-color .25s} #ring.on{opacity:.9} #ring.big{width:62px;height:62px;background:rgba(255,216,115,.13)} @media(hover:none){#ring{display:none}} #toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 26px);transform:translate(-50%,150%);background:var(--sun-br);color:var(--ink);padding:13px 22px;font:700 13px var(--body);z-index:110;transition:transform .45s var(--ease),opacity .3s var(--ease);max-width:calc(100% - 40px);border-radius:10px;opacity:0;pointer-events:none} #toast.up{transform:translate(-50%,0);opacity:1} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} .mask>span{transform:none!important} .js .fade{opacity:1;transform:none} .js .unroll{clip-path:none} #grain,#ring,#flinch,#intro{display:none} .reel{height:auto} .reel-pin{position:static;height:auto;overflow:visible} .reel-track{transform:none!important;overflow-x:auto} } /* ── THE DOCUMENT PAGES' OWN BITS ───────────────────────── The support page opens a native

; the rest of these pages are markup the deck has no equivalent for. */ .muted{color:var(--text-3);font:400 15px var(--body)} dialog{border:0;border-radius:20px;padding:clamp(24px,3vw,34px);max-width:min(520px,calc(100vw - 32px)); background:#fff;color:var(--text);box-shadow:0 40px 90px -30px rgba(14,35,41,.5)} dialog::backdrop{background:rgba(14,35,41,.55);backdrop-filter:blur(3px)} dialog h2{font:800 clamp(21px,2.4vw,27px)/1.15 var(--display);letter-spacing:-.03em;color:var(--petrol);margin:0 0 14px} dialog p{margin:0 0 16px;color:var(--text-2);font:400 16px/1.65 var(--body)} .dialog-actions{display:flex;flex-direction:column;gap:10px;margin-top:22px} .btn-primary,.btn-secondary{display:flex;align-items:center;justify-content:center;height:52px; border-radius:14px;font:700 16px var(--display);text-decoration:none;width:100%; transition:transform .12s ease,filter .12s ease} .btn-primary{background:var(--petrol);color:#fff;border:0} .btn-primary:hover{color:#fff;transform:translateY(-1px);filter:brightness(1.08)} .btn-secondary{background:#fff;color:var(--petrol);border:1.5px solid var(--border)} .btn-secondary:hover{border-color:var(--sun)} /* ── A THUMB, NOT A CURSOR ─────────────────────────────── Everything you tap on a phone gets to 44px. These are all full width already, so it costs height, not layout. */ /* The measures are for a wide column. A phone column is 353px, so a 13ch cap put the heading in two thirds of it with a third left empty, and the memory heading ran to four short lines inside 200px. */ .band-h{margin-top:22px;max-width:13ch} .band-h.narrow{max-width:11ch} @media(max-width:759px){ .band-h,.band-h.narrow,.reel-head h2,.hero h1{max-width:none} .nav .mark{padding-block:8px} .foot-col a{padding-block:14px;margin-bottom:0} .foot-col a:last-child{margin-bottom:0} .foot-brand a.mail{display:inline-block;padding-block:12px} #doc .dtoc a{padding-block:13px} #sheet a{padding-block:6px} .store{padding-block:13px} .btn-mini{padding-block:14px} } /* Below 1040px the whole scene was simply switched off, which took the one thing on the page that shows what he actually does: the turn playing out beside the headline. Same composition, sized for a narrow column. */ @media(max-width:1039px){ .hero-vis{display:block;min-height:clamp(324px,44vh,380px);margin-top:clamp(20px,3vh,30px)} .hv-him{left:-8%;height:80%} .hv-glow{left:-4%;width:64%;height:64%} .hv-chips{right:0;top:0} .hv-chip{padding:5px 10px;font-size:13px} /* Measured across a full cycle of his scripted turns: your line runs to 138px and his starts at 94, so they sat on each other for two thirds of every cycle. His now starts below the tallest yours ever gets, and the box is tall enough to hold both plus the chip. */ .hv-you{right:0;top:11%;max-width:68%;font-size:14.5px;padding:9px 13px} .hv-typing{right:2%;top:47%} .hv-say{right:0;top:47%;max-width:76%;padding:11px 13px} .hv-say p{font-size:14px} .hv-gain{right:0;bottom:2%;font-size:13px;padding:6px 12px} } /* ══════════════════════════════════════════════════════════ THE PHONE Not the desktop narrowed. A 393px screen is a column you scroll, so the deck, the rail and the pinning are gone and what is left is one thing after another, each arriving as you reach it. The rule underneath all of it: motion never hides content. Everything is painted at full opacity and animates by transform alone, so a dropped frame, a missed observer or a script that never runs costs you an entrance, never a word. ══════════════════════════════════════════════════════════ */ @media(max-width:759px){ /* ── arrival ────────────────────────────────────────── Readable at rest, 14px below where it lands. */ .js .fade,.js [data-split]{opacity:1!important;transform:translateY(14px)} .js .fade.lift,.js [data-split].lift{transform:none; transition:transform .62s cubic-bezier(.22,.9,.28,1)} .js .mask>span{opacity:1!important;transform:none!important} .js .unroll{clip-path:none!important} /* ── the sections ───────────────────────────────────── Even air between them, and a hairline so one ends where the next starts, since nothing slides over anything now. */ .band{padding-block:clamp(46px,8vh,64px)} .band + .band{border-top:1px solid var(--d16)} .band.on-ink + .band,.band + .band.on-ink{border-top:0} .band > .bwrap > h2,.reel-head h2{margin-top:14px} /* ── the opening ────────────────────────────────────── The line, the promise, the box you type into, then him. The scene is proof, so it goes under the ask, not over it. */ /* The wordmark stays at the top; the bar does not. No pinning, no background, no hairline, no button, so it scrolls away with the page instead of taking 73px of every screen. */ .nav{position:static;padding:18px var(--pad) 0;background:0;border-bottom:0; -webkit-backdrop-filter:none;backdrop-filter:none} .burger,#sheet{display:none!important} /* The hero was still a full screen tall with its contents centred, so it held 57px of air above the first line on top of its own padding. It is as tall as what is in it, and starts at the top. */ .hero{min-height:0;justify-content:flex-start;padding-top:clamp(20px,3vh,28px)} /* and the document pages reserved 64px for a bar that is no longer there. The title block's own top padding goes with it, so every page starts the same distance under the wordmark as the home page does. */ #doc .dwrap{padding-top:clamp(18px,3vw,28px)} #doc .dhead{padding-top:0} .hero h1{margin-top:16px} .hero-join{margin-top:24px;padding-top:20px} /* the label takes the line and the two stores share the next, rather than wrapping into three ragged rows */ .hero-soon,.stores{gap:10px 22px} .hero-soon>.lbl{flex-basis:100%} .hero-soon{margin-top:18px} /* The scene is a desktop and tablet thing. On a phone it is 324px of a screen you have to scroll past to reach How it works, and the same turn is playable a section later. */ .hero-vis{display:none} /* ── how it works ───────────────────────────────────── Three panels of the same height read as a set; three of different heights read as a list that went wrong. */ .steps{gap:26px;margin-top:20px} /* Stacked, the panel came before the words, so you met the demo before you were told what it was. Each step reads title first, then proof. */ .step{display:flex;flex-direction:column-reverse} .step-text{padding:0 0 12px} .step-text .num{margin-bottom:6px} /* one height for all three, so a stack of panels reads as a set */ .step-visual{min-height:178px;padding:16px} /* ── the quest ──────────────────────────────────────── The card is the whole point here, so it gets the width. */ .quest-wrap{padding:18px 16px;border-radius:16px} .meter{gap:14px 18px;padding-bottom:12px} .meter .num{font-size:22px} .opt{padding:13px 14px} /* ── the beats ──────────────────────────────────────── The date sits above its line rather than beside it. */ .mem-grid{gap:26px} .beat-row{padding-block:18px;gap:6px} /* ── the ask, again ───────────────────────────────────*/ .get-grid{gap:26px} .stores{margin-top:22px;padding-top:18px} /* ── the footer ─────────────────────────────────────── Four blocks down the left is a long column of very little. The brand takes the width, the link lists pair up under it. */ .foot-top{grid-template-columns:1fr 1fr;gap:28px 20px} .foot-brand{grid-column:1/-1} /* ── what a phone does not carry ────────────────────── A WebGL ground and a grain overlay are two full screen canvases repainting behind a page nobody is looking at the background of. They cost battery and frames. */ #field,#grain{display:none} }