@font-face{font-family:"Michroma";src:url("/assets/fonts/michroma-regular.8edbe375.woff2") format("woff2");font-display:swap}
/* KANALI's Font menu, for the simulated screen only (prototypes/capcom/README.md). */
@font-face{font-family:"Roboto";src:url("/assets/fonts/roboto-regular.13183467.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Bitcount Single";src:url("/assets/fonts/bitcount-single.ede5b0e8.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Orbitron";src:url("/assets/fonts/orbitron-wght.f688f73a.woff2") format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"Rubik Glitch";src:url("/assets/fonts/rubik-glitch-regular.a7d0e849.woff2") format("woff2");font-display:swap}

:root{
  --bg:#050505;--ink:#f3f3ef;--muted:#9a9a94;--line:rgba(255,255,255,.12);
  --accent:var(--pulse-neon);
  --font-edition-title:"Michroma",var(--font-headline);
  --pad:clamp(16px,4vw,64px);--ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box}
html{background:var(--bg);overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
body.intro-on{overflow:hidden}
h1,p{margin:0}
h1{font-family:var(--font-headline);letter-spacing:0;text-wrap:balance;line-height:1.08;font-weight:750}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.skip{position:fixed;z-index:300;left:16px;top:16px;padding:10px 18px;background:var(--ink);color:var(--bg);transform:translateY(-200%)}.skip:focus{transform:none}
.eyebrow{font-family:var(--font-headline);font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* ─── Intro ─────────────────────────────────────────────── */
.intro{position:fixed;inset:0;z-index:200;background:#000;overflow:hidden;perspective:1800px;display:none}
.intro.on{display:block}
/* Set in the head before first paint when the intro will play (index.html). */
.intro-due .intro{display:block}
.intro-due body{overflow:hidden}
.intro.leaving{animation:intro-leave .9s var(--ease) forwards}
@keyframes intro-leave{to{clip-path:inset(0 0 100% 0)}}
.intro-field{position:absolute;inset:0;overflow:hidden}
/* A triangle cut from its box; the picture covers the box. */
.shard{position:absolute;background:#0d0d0c center/cover no-repeat;will-change:transform}
.shard.up{clip-path:polygon(50% 0,100% 100%,0 100%)}
.shard.down{clip-path:polygon(0 0,100% 0,50% 100%)}
.shard.device-shard{background-color:#1a1b18;background-size:150% auto}
.shard.dark{background:#141512}
.shard.neon{background:var(--accent)}
.intro-title{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:18px;opacity:0;pointer-events:none}
.intro.titled .intro-field{filter:brightness(.32) saturate(.8);transition:filter .6s ease}
.intro.titled .intro-title{opacity:1}
.intro-word{font-family:var(--font-headline);font-weight:900;font-size:clamp(54px,15vw,240px);line-height:.9;letter-spacing:0;color:var(--ink);opacity:0;transform:scale(1.4)}
.intro.titled .intro-word{animation:word-land .55s cubic-bezier(.3,0,.2,1) forwards}
@keyframes word-land{0%{opacity:0;transform:scale(1.4)}70%{opacity:1;transform:scale(.97)}100%{opacity:1;transform:none}}
.intro-sub{font-family:var(--font-headline);font-size:clamp(12px,1.4vw,16px);font-weight:700;letter-spacing:.5em;text-transform:uppercase;color:var(--accent);opacity:0}
.intro.titled .intro-sub{animation:fade-up .6s .45s var(--ease) forwards}
@keyframes fade-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.intro-load{position:absolute;left:50%;top:50%;width:min(240px,50vw);height:2px;transform:translate(-50%,-50%);background:rgba(255,255,255,.1)}
.intro-load i{display:block;height:100%;width:var(--loaded,0%);background:var(--accent);transition:width .2s}
.intro.playing .intro-load{display:none}
.intro-skip{position:absolute;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:2;padding:10px 18px;border:1px solid rgba(255,255,255,.3);border-radius:999px;background:rgba(0,0,0,.5);backdrop-filter:blur(8px);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.intro-skip:hover{border-color:var(--accent);color:var(--accent)}

/* ─── Header ────────────────────────────────────────────── */
.top{position:fixed;z-index:50;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px;padding:0 var(--pad);background:linear-gradient(#050505e6,#05050500)}
.top-brand{display:flex;align-items:center;gap:12px;font-family:var(--font-body);font-size:12px;font-weight:700;letter-spacing:.18em}
/* The mark at its own 80 × 45 ratio, never squeezed. */
.top-brand img{width:auto;height:22px;aspect-ratio:80/45}
.top-end{display:flex;align-items:center;gap:20px}
.top-replay{white-space:nowrap;padding:8px 16px;border:1px solid var(--line);border-radius:999px;background:rgba(10,10,10,.6);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.top-replay:hover{color:var(--ink);border-color:rgba(255,255,255,.3)}

/* ─── Try ───────────────────────────────────────────────── */
.try{position:relative;min-height:100svh;display:grid;align-content:center;justify-items:center;gap:clamp(20px,3vh,36px);padding:88px var(--pad) 48px;isolation:isolate;overflow:clip}
.try-atmosphere{position:absolute;inset:0;z-index:-2}
.try-atmosphere img{width:100%;height:100%;object-fit:cover;opacity:.2;filter:blur(18px) saturate(.8);transform:scale(1.1)}
.try-atmosphere::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 70% at 50% 55%,transparent,var(--bg) 80%),linear-gradient(transparent 60%,var(--bg))}
.try-glow{position:absolute;z-index:-1;left:30%;top:60%;width:60vmin;height:45vmin;transform:translate(-50%,-50%);border-radius:50%;background:var(--screen-glow,#2ab7fe);filter:blur(110px);opacity:.22;transition:background-color .8s,opacity .8s;pointer-events:none}
.screen-off .try-glow{opacity:0}
/* The display's own light: the screen's picture, blurred in page.js on a
   canvas three times the device's size (as on the CAPCOM page), so it never shows
   an edge; dark when the screen is off. */
.device-glow{position:absolute;z-index:-1;left:-100%;top:-100%;width:300%;height:300%;mix-blend-mode:screen;opacity:0;transition:opacity .4s ease;pointer-events:none}
.device-glow.on{opacity:.8}
.try-copy{display:grid;justify-items:center;gap:14px;max-width:820px;text-align:center}
.try h1{font-family:var(--font-edition-title);font-weight:400;font-synthesis:none;font-size:clamp(28px,3.4vw,52px);line-height:1.2}
.try-lede{color:var(--muted);font-size:clamp(15px,1.2vw,18px);max-width:60ch}
/* Device and KANALI side by side at one height: 1620/1359 and 3/2 wide. */
.try-stage{display:grid;grid-template-columns:minmax(0,1.192fr) minmax(0,1.5fr);align-items:center;gap:clamp(16px,2.4vw,40px);width:min(100%,max(860px,calc((100svh - 300px) * 2.692 + 40px)))}
.device-col{display:grid;justify-items:center;gap:14px;min-width:0}
.device{position:relative;width:100%;aspect-ratio:1620/1359}
/* Shutter: the device itself flares, not a box over it. */
.device.flash{animation:flash .55s ease-out}
@keyframes flash{from{filter:brightness(2.4)}to{filter:none}}
.snapshot{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 22px 0 18px;border:1px solid var(--accent);border-radius:999px;background:var(--accent);color:#000;font-size:15px;font-weight:800;transition:transform .2s}
.snapshot:hover{transform:translateY(-2px)}
.snapshot:disabled{opacity:.6;cursor:progress;transform:none}
.snapshot svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.device>img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 40px 60px rgba(0,0,0,.7))}
.screen-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.kanali-host{position:relative;min-width:0;isolation:isolate}
.kanali-hint{position:absolute;left:50%;top:calc(100% + 14px);transform:translateX(-50%);padding:6px 14px;border-radius:999px;background:rgba(0,0,0,.6);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);white-space:nowrap;animation:pulse 2s ease-in-out infinite;transition:opacity .4s}
.kanali-hint.gone{opacity:0;pointer-events:none}
.kanali-hint[hidden]{display:none}
@keyframes pulse{50%{opacity:.5}}

.foot{display:flex;justify-content:space-between;gap:24px;padding:28px var(--pad);font-size:13px;color:var(--muted)}
.foot span:first-child{color:var(--ink);font-weight:800;letter-spacing:.18em}

/* ─── Narrow screens: the display stays in view above KANALI ─── */
@media (max-width:900px){
  .top{height:56px;background:var(--bg)}
  .try{padding-top:72px;align-content:start}
  .try-stage{grid-template-columns:minmax(0,1fr);width:100%;gap:16px}
  .device-col{position:sticky;top:56px;z-index:30;gap:8px;padding-bottom:8px;background:var(--bg);box-shadow:0 0 0 100vmax var(--bg);clip-path:inset(0 -100vmax)}
  /* Pinned, the device takes under half the screen's height (its column is
     the device, the Save button and about 54px of gaps), so KANALI always
     has room below it: 1.192 is the device render's width over its height. */
  .device{width:min(100%,520px,calc((45svh - 54px) * 1.192))}
  @media (max-height:700px){.device{width:min(100%,calc((40svh - 54px) * 1.192))}}
  .snapshot{min-height:38px;padding:0 16px 0 14px;font-size:13px}
  .kanali-hint{position:static;transform:none;display:block;width:max-content;max-width:100%;white-space:normal;text-align:center;margin:0 auto 12px}
  .foot{flex-direction:column}
}
@media (max-width:560px){.top-end{gap:12px}.top-replay{padding:7px 12px;font-size:11px}.device{width:min(86%,calc((45svh - 54px) * 1.192))}@media (max-height:700px){.device{width:min(86%,calc((40svh - 54px) * 1.192))}}.try h1{font-size:24px}.try-lede{font-size:14px}}

@media (max-width:420px){.top-brand span{display:none}}

/* ─── Phones and tablets held upright: KANALI is a bottom sheet ───
   (owner, 2026-11-06: the display "huge and span across the whole page", and
   KANALI brought in with a swipe, signalled rather than a button.) page.js
   adds .sheet-mode to <html> and drives --p, 0 with the sheet down and the
   display full width, 1 with it up and the display pinned small above it. Its
   other variables are measured: --dw, --dx, --y0, --y1, --s1, --sheet-h,
   --travel. The page itself does not scroll; KANALI scrolls inside the sheet. */
.sheet-head{display:none}
html.sheet-mode,html.sheet-mode body{height:100%;overflow:hidden;overscroll-behavior:none}
.sheet-mode .foot,.sheet-mode .try-copy .eyebrow,.sheet-mode .try-lede,.sheet-mode .kanali-hint{display:none}
.sheet-mode .try{display:block;height:100svh;min-height:0;padding:0}
.sheet-mode .try-copy{position:absolute;left:16px;right:16px;top:var(--title-top,64px);opacity:calc(1 - var(--p) * 1.6);transform:translateY(calc(var(--p) * -16px))}
.sheet-mode .try h1{font-size:clamp(20px,5.2vw,28px)}
.sheet-mode .try-stage{display:block;width:auto}
.sheet-mode .device-col{position:absolute;left:0;top:0;z-index:1;display:block;width:var(--dw);padding:0;background:none;box-shadow:none;clip-path:none;transform-origin:50% 0;transform:translate(var(--dx),calc(var(--y0) + (var(--y1) - var(--y0)) * var(--p))) scale(calc(1 - (1 - var(--s1)) * var(--p)))}
.sheet-mode .device{width:100%;margin:0}
/* Sheet up: the header slides away and the display sits small on a card,
   live, so each change still lands in view. Tapping the card brings it back. */
.preview-card{display:none}
.sheet-mode .top{transform:translateY(calc(var(--p) * -100%));opacity:calc(1 - var(--p) * 1.5);transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .4s}
.sheet-mode.is-dragging .top{transition:none}
.sheet-mode.sheet-up .top{pointer-events:none}
.sheet-mode .preview-card{position:absolute;z-index:0;display:block;left:12px;right:12px;top:var(--card-top);height:var(--card-h);padding:0;border:0;border-radius:20px;background:radial-gradient(60% 90% at 50% 55%,rgba(42,183,254,.22),transparent 70%),#0d0e0c;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 18px 40px rgba(0,0,0,.5);opacity:var(--p);transform:scale(calc(.96 + var(--p) * .04));pointer-events:none;transition:opacity .4s,transform .5s cubic-bezier(.2,.8,.2,1)}
.sheet-mode.is-dragging .preview-card{transition:none}
.sheet-mode.sheet-up .preview-card{pointer-events:auto;cursor:pointer}
.sheet-mode.sheet-up .device-col{pointer-events:none}

/* The sheet: KANALI's own window rises from the bottom edge, its top always
   showing, which is the cue that it can be pulled up. */
.sheet-mode .kanali-host{position:fixed;z-index:40;left:0;right:0;top:var(--sheet-top);bottom:0;display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom);border-radius:22px 22px 0 0;background:#0d0e0c;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 -24px 60px rgba(0,0,0,.65);transform:translateY(calc((1 - var(--p)) * var(--travel)));will-change:transform}
.sheet-mode .sheet-head{position:relative;display:flex;align-items:center;gap:12px;min-height:68px;padding:14px 16px 10px;flex:0 0 auto}
.sheet-grab{position:absolute;left:0;right:0;top:0;height:22px;padding:0;border:0;background:none}
.sheet-grab i{position:absolute;left:50%;top:8px;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:rgba(255,255,255,.32)}
.sheet-label{display:flex;align-items:center;gap:10px;flex:1;min-width:0;pointer-events:none}
.sheet-label svg{flex:0 0 auto;width:22px;height:22px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transform:rotate(calc(var(--p) * 180deg))}
.sheet-label span{display:grid;line-height:1.2}
.sheet-label b{font-family:var(--font-headline);font-size:13px;font-weight:800;letter-spacing:.16em}
.sheet-cue{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheet-label span{min-width:0}
.sheet-save .snapshot{min-height:40px;padding:0 16px 0 13px;font-size:13px;white-space:nowrap}
.sheet-save .snapshot:hover{transform:none}
/* The narrowest phones (320px): the cue wraps beside a tighter Save
   instead of being cut short. */
@media (max-width:360px){.sheet-cue{white-space:normal;font-size:12px}.sheet-mode .sheet-head{gap:8px;padding-inline:12px}.sheet-save .snapshot{padding:0 12px 0 10px;font-size:12px}}
/* KANALI scrolls inside the sheet, only once it is up. */
/* No touch-action:none on the page or the sheet: iOS Safari carries it into
   KANALI's scroll area, which then would not scroll (2026-11-06). page.js
   stops the page itself from moving instead. */
.sheet-mode .kanali-live{flex:1;min-height:0;margin:0;padding:0 12px 24px;overflow:hidden;overscroll-behavior:contain}
.sheet-mode .kanali-host.is-up .kanali-live{overflow-y:auto;touch-action:pan-y}
.sheet-mode .kanali-live .kanali-carousel{touch-action:pan-y}
/* The sheet is placed by its top, measured from innerHeight, and runs to the
   foot of the screen. In the TRYX Portal iOS app innerHeight stops above the
   app's floating tab bar while fixed elements reach the screen's foot, so a
   sheet pinned by its bottom sat ~80pt too low there. KANALI's end also
   scrolls clear of that tab bar. */
html.tryx-app.sheet-mode .kanali-live{padding-bottom:110px}
/* Settling: the sheet and the display move together. Not while a finger drags. */
.sheet-mode .kanali-host,.sheet-mode .device-col,.sheet-mode .try-copy,.sheet-label svg,.sheet-cue{transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .4s}
.sheet-mode.is-dragging .kanali-host,.sheet-mode.is-dragging .device-col,.sheet-mode.is-dragging .try-copy,.sheet-mode.is-dragging .sheet-label svg,.sheet-mode.is-dragging .sheet-cue{transition:none}
/* First visit: the sheet lifts a little twice, to show it moves. */
.sheet-mode .kanali-host.is-nudging{animation:sheet-nudge 1.6s .2s cubic-bezier(.3,0,.2,1) 2}
@keyframes sheet-nudge{0%,100%{transform:translateY(var(--travel))}30%{transform:translateY(calc(var(--travel) - 44px))}55%{transform:translateY(calc(var(--travel) - 6px))}}

/* ─── Save my PANORAMA (keepsake.js) ─── */
.keep{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:24px}
.keep[hidden]{display:none}
.keep-backdrop{position:absolute;inset:0;background:rgba(3,3,3,.72);backdrop-filter:blur(14px);opacity:0;transition:opacity .35s}
.keep.on .keep-backdrop{opacity:1}
.keep-card{position:relative;display:grid;grid-template-columns:auto minmax(260px,320px);align-items:center;gap:36px;padding:24px 40px 24px 24px;border-radius:24px;background:#0d0e0c;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 120px rgba(0,0,0,.6)}
/* The clip's height is also capped by the window's width, so on a narrow
   desktop window (761 to about 900px) it leaves the text column its 320px
   (the grid keeps that column full and squeezes the clip's): the 4:5 clip
   may be at most 100vw less the outer and card padding, the gap and that
   column (468px) wide. */
.keep-media{position:relative;height:min(72vh,680px,calc((100vw - 468px) * 1.25));aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:#050505}
.keep-media>canvas,.keep-media>video,.keep-media>img{display:block;width:100%;height:100%;object-fit:cover}
/* While recording: a thin bar fills along the frame's bottom edge, below the
   text, and the kicker carries a pulsing dot. Nothing covers the PANORAMA
   name, the CAPCOM wordmark or the lines at the bottom. */
.keep-bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.12);transition:opacity .3s}
.keep-bar i{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:0 50%}
.keep[data-state="ready"] .keep-bar{opacity:0}
.keep[data-state="recording"] .keep-kicker::before{content:"";display:inline-block;width:8px;height:8px;margin-right:10px;border-radius:50%;background:var(--accent);vertical-align:1px;animation:pulse 1s ease-in-out infinite}
.keep-media::after{content:"";position:absolute;left:0;top:0;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);transform:translateX(-120%);pointer-events:none}
.keep[data-state="ready"] .keep-media::after{animation:sweep 1.1s .1s var(--ease) forwards}
@keyframes sweep{to{transform:translateX(330%)}}
.keep-side{display:grid;gap:14px;align-content:center}
.keep-kicker{font-family:var(--font-headline);font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.keep-side h2{margin:0;font-family:var(--font-edition-title);font-weight:400;font-size:clamp(22px,2vw,30px);line-height:1.25}
.keep-note{color:var(--muted);font-size:15px}
.keep-actions{display:grid;gap:10px;margin-top:10px}
.keep-actions>*{opacity:0;transform:translateY(12px);pointer-events:none}
.keep[data-state="ready"] .keep-actions>*{animation:rise .5s var(--ease) forwards;pointer-events:auto}
.keep[data-state="ready"] .keep-actions>:nth-child(2){animation-delay:.08s}
.keep[data-state="ready"] .keep-actions>:nth-child(3){animation-delay:.16s}
@keyframes rise{to{opacity:1;transform:none}}
.keep-actions [hidden]{display:none}
.keep-download{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;background:var(--accent);color:#000;font-size:16px;font-weight:800}
.keep-download svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.keep-download:hover{transform:translateY(-2px)}
.keep-share,.keep-still{min-height:46px;padding:0 20px;border:1px solid var(--line);border-radius:999px;background:none;font-size:14px;font-weight:700;color:var(--ink)}
.keep-share:hover,.keep-still:hover{border-color:rgba(255,255,255,.35)}
/* Post it: one round mark per network and Copy link, five in one row, which
   fits the card's side column and the phone sheet alike. Marks stay white until
   hovered; the networks' own colours would turn the card into a logo wall. */
.keep-post{display:grid;gap:10px;margin-top:6px;padding-top:16px;border-top:1px solid var(--line);opacity:0;transform:translateY(12px);pointer-events:none}
.keep[data-state="ready"] .keep-post{animation:rise .5s .24s var(--ease) forwards;pointer-events:auto}
.keep-post-label{font-family:var(--font-headline);font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.keep-post-row{display:grid;grid-template-columns:repeat(5,44px);justify-content:space-between;gap:10px}
.keep-post-item{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:50%;background:none;color:var(--ink);transition:border-color .2s,background-color .2s,transform .2s}
.keep-post-item:hover,.keep-post-item:focus-visible{border-color:var(--accent);background:rgba(214,250,0,.08);transform:translateY(-2px)}
.keep-post-item svg{width:18px;height:18px;fill:currentColor}
.keep-post-item .keep-post-stroke{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.keep-post-status{min-height:1.4em;font-size:13px;color:var(--accent);overflow-wrap:anywhere}
.keep-close{position:absolute;right:14px;top:12px;width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.06);font-size:22px;color:var(--muted)}
.keep-close:hover{color:var(--ink);background:rgba(255,255,255,.12)}
@media (max-width:760px){
  .keep{padding:12px;align-items:end}
  .keep-card{grid-template-columns:minmax(0,1fr);gap:16px;width:100%;max-width:420px;max-height:calc(100svh - 24px);overflow-y:auto;overscroll-behavior:contain;padding:16px 16px 20px;border-radius:20px}
  /* The clip gives up height so the buttons and the Post it row stay in view
     (about 390px of them under it). */
  .keep-media{height:auto;width:min(100%,calc(56svh * .8),max(144px,calc((100svh - 420px) * .8)));margin:0 auto}
  .keep-side h2{font-size:22px}
  .keep-side{gap:8px;text-align:center;justify-items:center}
  .keep-actions{width:100%;margin-top:4px}
  .keep-post{width:100%;justify-items:center;padding-top:12px}
  .keep-post-row{grid-template-columns:repeat(5,44px);justify-content:center;gap:10px 14px}
  .keep-close{right:8px;top:8px;z-index:3;background:rgba(0,0,0,.5)}
}
/* A wide, short window (a phone on its side): the clip fits the height and
   the text column scrolls inside the card, so Copy link is never below the
   screen (QA 2026-11-10: it sat at 423px of 390). */
@media (min-width:761px) and (max-height:560px){
  .keep{padding:12px}
  .keep-card{align-items:start;gap:24px;padding:16px 44px 16px 16px}
  .keep-media{height:min(calc(100svh - 56px),calc((100vw - 440px) * 1.25))}
  .keep-side{gap:8px;align-content:start;max-height:calc(100svh - 56px);padding:2px 4px 2px 0;overflow-y:auto;overscroll-behavior:contain}
}

/* ─── First-visit tour (guide.js) ─── */
.cue-ring{position:absolute;z-index:60;border-radius:12px;box-shadow:0 0 0 2px var(--accent),0 0 0 6px rgba(214,250,0,.25);pointer-events:none;opacity:0;transition:opacity .3s,left .35s var(--ease),top .35s var(--ease),width .35s var(--ease),height .35s var(--ease)}
.cue-ring.on{opacity:1;animation:cue-pulse 1.6s ease-in-out infinite}
@keyframes cue-pulse{50%{box-shadow:0 0 0 2px var(--accent),0 0 0 12px rgba(214,250,0,0)}}
/* The spotlight: KANALI darkens around the lit area (the window clips the
   shadow, so the pump head and the page stay bright). Clicks pass through. */
.cue-dim{position:absolute;z-index:40;border-radius:12px;box-shadow:0 0 0 300vmax rgba(8,14,18,.6);pointer-events:none;opacity:0;transition:opacity .4s,left .4s var(--ease),top .4s var(--ease),width .4s var(--ease),height .4s var(--ease),background-color .4s}
.cue-dim.on{opacity:1}
.cue-dim.full{border-radius:0;background-color:rgba(8,14,18,.6)}
/* The dock: one fixed place at the foot of the screen for the caption, its
   progress, Back, Next and Skip, so the tour never moves the thing you read or tap. */
.cue-dock{position:fixed;z-index:61;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px 14px;width:min(440px,calc(100vw - 24px));padding:14px 14px 12px 18px;border-radius:18px;background:rgba(17,18,16,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--ink);box-shadow:0 0 0 1px rgba(255,255,255,.1),0 18px 44px rgba(0,0,0,.55);opacity:0;transform:translate(-50%,12px);transition:opacity .35s,transform .45s var(--ease);pointer-events:none}
.cue-dock.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.cue-dock-text{display:grid;gap:3px;min-width:0}
.cue-count{font-family:var(--font-headline);font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.cue-dock p{font-size:14px;line-height:1.4;min-height:2.8em}
.cue-skip{align-self:start;justify-self:end;padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:none;font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap}
.cue-skip:hover{color:var(--ink)}
.cue-bars{grid-column:1;align-self:center;display:flex;gap:4px}
.cue-bars i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden}
.cue-bars b{display:block;height:100%;width:0;background:var(--accent)}
.cue-bars .done b{width:100%}
.cue-bars .now b{width:100%}
/* Back and Next: the only things that move the tour. */
.cue-nav{grid-column:2;display:flex;gap:8px}
.cue-back,.cue-next{min-height:36px;padding:0 16px;border-radius:999px;font-size:13px;font-weight:800;white-space:nowrap}
.cue-back{border:1px solid var(--line);background:none;color:var(--ink)}
.cue-back:disabled{visibility:hidden}
.cue-next{min-width:72px;border:0;background:var(--accent);color:#000}
/* Inside the TRYX Portal iOS app (WebAppearance adds html.tryx-app) the page
   runs under the app's floating tab bar, whose top is about 80pt above the
   foot of the screen: the dock sits clear of it. */
html.tryx-app .cue-dock{bottom:96px}
/* Short screens (a phone held sideways): one slim line, so it hides as little
   of KANALI as it can. */
@media (max-height:500px){
  .cue-dock{bottom:calc(8px + env(safe-area-inset-bottom));width:min(600px,calc(100vw - 24px));padding:8px 8px 12px 16px;gap:0 12px;border-radius:999px}
  .cue-dock-text{display:flex;align-items:baseline;gap:12px}
  .cue-count{flex:none}
  .cue-dock p{min-height:0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cue-dock{grid-template-columns:1fr auto auto}
  .cue-nav{grid-column:2;grid-row:1}
  .cue-skip{grid-column:3;grid-row:1;align-self:center;padding:5px 12px}
  .cue-back,.cue-next{min-height:30px;padding:0 12px}
  .cue-bars{position:absolute;left:22px;right:22px;bottom:5px}
  .cue-bars i{height:2px}
}

/* Too short to pin anything (a phone held sideways, a small window): the
   device scrolls with the page, at a size that fits, and the cue tour
   scrolls each control into view instead. */
@media (max-width:900px) and (max-height:560px){
  .device-col{position:static;box-shadow:none;clip-path:none}
  .device{width:min(100%,calc((100svh - 140px) * 1.192))}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ─── Wide screens: an opener, then the stage (page.js, one GSAP move) ───
   html.staged is set by page.js from 901px wide. A gesture down plays one move
   from the opener (the headline, the display centred below it) to the stage,
   where the display and KANALI share the whole screen. The layout here
   is the stage; the opener is drawn from it by GSAP transforms.
   --d is the display column's width and --gap the clear space between the
   display and KANALI, which never touch (owner, 2026-11-12). KANALI fills
   its own column, 1.13 of --d, at 3:2. The display column's height is the
   display box (.839 of --d) and Save below it. */
.try-cue{display:none}
html.staged .try{display:flex;align-items:center;justify-content:center;height:100svh;min-height:0;padding:64px var(--pad) 32px}
html.staged .try-copy{position:absolute;left:50%;top:calc(64px + 7svh);width:min(820px,calc(100% - 2 * var(--pad)));transform:translateX(-50%);z-index:3;pointer-events:none}
html.staged .try h1{font-size:clamp(32px,3.6vw,60px)}
html.staged .try-stage{--gap:clamp(32px,4vw,80px);--d:min(calc((100vw - 2 * var(--pad) - var(--gap)) / 2.13),calc((100svh - 156px) / .839));display:grid;grid-template-columns:var(--d) calc(var(--d) * 1.13);align-items:center;gap:var(--gap);width:auto}
html.staged .device-col{position:relative;z-index:1}
html.staged .kanali-host{z-index:2;width:calc(var(--d) * 1.13)}
html.staged .kanali-host .kanali-window{box-shadow:-24px 30px 60px rgba(0,0,0,.55)}
html.staged .try-cue{display:block;position:absolute;left:50%;bottom:20px;width:28px;height:28px;margin-left:-14px;color:var(--muted);animation:cue 1.8s ease-in-out infinite}
.try-cue svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@keyframes cue{50%{transform:translateY(6px)}}