/* The demo tour (docs/superpowers/specs/2026-10-16-demo-tour-design.md): the player page's navy war-room ground and
   toy palette (public/player.css), one dark theme. Phones stack header, story and a full-width phone frame, with
   Back / Next pinned to the bottom; wide screens put the story on the left and the frame, sized to the window, on the
   right. The phone is an iPhone 15 / 16 Pro: a 393 x 852 screen (a 54 px status area round the Dynamic Island, the
   snapshot's 393 x 764 iframe, a 34 px home area), all scaled together by --s (tour.js). */
:root{
  --ground:#1f2742; --ground-2:#283255; --ground-3:#323d66; --edge:#141a2e; --line:#3a4670;
  --ink:#1a2036; --text:#eef1f8; --text-soft:#c3cae3; --text-mute:#8f9abf;
  --gold:#ffc83a; --gold-deep:#d98a00; --sky:#2ea7ff;
  --f-brand:"Lilita One","Noto Sans TC",system-ui,sans-serif;
  --f-head:"Fredoka","Noto Sans","Noto Sans TC",system-ui,sans-serif;
  --f-text:"Noto Sans","Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  color-scheme:dark;
}
/* Each language's own font first (tour.js sets <html lang>): Chinese, Japanese and Korean share code points. */
:root:lang(zh-Hans){--f-head:"Fredoka","Noto Sans","Noto Sans SC",system-ui,sans-serif;--f-text:"Noto Sans","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif}
:root:lang(ja){--f-head:"Fredoka","Noto Sans","Noto Sans JP",system-ui,sans-serif;--f-text:"Noto Sans","Noto Sans JP","Hiragino Sans","Yu Gothic",system-ui,sans-serif}
:root:lang(ko){--f-head:"Fredoka","Noto Sans","Noto Sans KR",system-ui,sans-serif;--f-text:"Noto Sans","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif}
:root:lang(th){--f-head:"Fredoka","Noto Sans","Noto Sans Thai",system-ui,sans-serif;--f-text:"Noto Sans","Noto Sans Thai",system-ui,sans-serif}
:root:lang(vi){--f-head:"Noto Sans",system-ui,sans-serif}
:root:lang(ar){--f-head:"Fredoka","Noto Sans Arabic","Noto Sans",system-ui,sans-serif;--f-text:"Noto Sans Arabic","Noto Sans",system-ui,sans-serif}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100dvh;background:var(--ground);color:var(--text);font:15px/1.55 var(--f-text);
  background-image:repeating-linear-gradient(45deg,transparent 0 22px,rgba(255,255,255,.025) 22px 44px);
  padding-inline:16px;overflow-x:hidden;display:flex;flex-direction:column}
button,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
a{color:var(--text-soft)}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header */
.top{display:flex;align-items:center;gap:12px;padding-block:14px 10px;max-width:1120px;width:100%;margin-inline:auto}
.brand{display:flex;align-items:baseline;gap:6px;min-width:0;flex:1;white-space:nowrap}
.logo{font:600 15px/1.2 var(--f-head);letter-spacing:.02em;color:var(--text-soft)}
.by{font:400 12px/1.2 var(--f-text);color:var(--text-mute);overflow:hidden;text-overflow:ellipsis;min-width:0}
.brand .tag{align-self:center;margin-inline-start:2px}
.tag{flex:none;font:600 11px/1 var(--f-head);text-transform:uppercase;letter-spacing:.1em;color:var(--ink);background:var(--gold);
  border:2px solid var(--edge);border-radius:999px;padding:4px 8px 3px}
.tip{display:none;margin:0;font:500 13px var(--f-head);color:var(--text-mute)}
.tip::before{content:"📱 ";filter:grayscale(.2)}
.lang select{appearance:none;background:var(--ground-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23c3cae3' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") no-repeat right 10px center;
  border:2px solid var(--line);border-radius:12px;padding:7px 28px 7px 10px;font:500 14px var(--f-head);color:var(--text);cursor:pointer;max-width:9.5rem}
[dir=rtl] .lang select{background-position:left 10px center;padding:7px 10px 7px 28px}

/* the two areas */
.tour{display:flex;flex-direction:column;gap:14px;width:100%;max-width:1120px;margin-inline:auto;flex:1}
.story{display:flex;flex-direction:column;gap:6px;min-width:0}
.chapters{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding:2px 16px 6px;scroll-padding-inline:16px}
.chapters::-webkit-scrollbar{display:none}
.chip{flex:none;border:2px solid var(--line);background:var(--ground-2);color:var(--text-soft);border-radius:999px;
  padding:5px 12px;font:500 13px/1.2 var(--f-head);cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.chip:hover{border-color:var(--text-mute);color:var(--text)}
.chip[aria-current]{background:var(--gold);border-color:var(--edge);color:var(--ink);box-shadow:0 3px 0 var(--gold-deep)}
.storyhead{display:flex;align-items:center;gap:10px;margin-top:4px;min-height:30px}
.chapter{flex:1;min-width:0;margin:0;font:600 12px/1.3 var(--f-head);text-transform:uppercase;letter-spacing:.12em;color:var(--gold)}
/* Full screen: phones only (shown below 900 px); × leaves it (shown only in it). */
.fsbtn{display:none;flex:none;align-items:center;gap:6px;min-height:32px;padding:4px 12px 4px 10px;border:2px solid var(--line);
  border-radius:999px;background:var(--ground-2);color:var(--text);font:500 13px/1.2 var(--f-head);cursor:pointer;
  transition:border-color .15s,background .15s}
.fsbtn svg{flex:none;fill:none;stroke:var(--gold);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fsbtn:hover{border-color:var(--text-mute);background:var(--ground-3)}
.fsexit{display:none;flex:none;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;
  background:#ffffff1a;color:var(--text);cursor:pointer}
.fsexit svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.fsexit:hover{background:#ffffff2e}
.more{appearance:none;align-self:flex-start;margin:-4px 0 0;padding:2px 0;border:0;background:none;color:var(--gold);
  font:600 13px/1.3 var(--f-head);cursor:pointer}
/* The disclaimer: small and quiet, under the text on phones and under the frame on wide screens. */
.disclaimer{margin:0;font-size:12px;line-height:1.45;color:var(--text-mute);unicode-bidi:plaintext;text-wrap:pretty}
.stage .disclaimer{display:none}
.title{margin:0;font:600 22px/1.2 var(--f-head);color:#fff;text-wrap:balance}
/* Direction from the text itself: a Latin brand name or number at the edge of an Arabic line stays in place. */
.title,.text{unicode-bidi:plaintext}
.text{margin:0;color:var(--text-soft);text-wrap:pretty;min-height:3.1em}

/* Back / count / Next */
.moves{display:flex;align-items:center;gap:12px}
.btn{appearance:none;flex:1;min-height:46px;border:3px solid var(--edge);border-radius:14px;background:var(--gold);color:var(--ink);
  font:600 16px/1 var(--f-head);letter-spacing:.02em;padding:10px 16px;cursor:pointer;box-shadow:0 4px 0 var(--gold-deep),0 4px 0 3px var(--edge);
  transition:transform .08s,box-shadow .08s}
.btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--gold-deep),0 1px 0 3px var(--edge)}
.btn.ghost{background:var(--ground-2);color:var(--text);border-color:var(--line);box-shadow:0 4px 0 var(--edge)}
.btn.ghost:active:not(:disabled){box-shadow:0 1px 0 var(--edge)}
.btn:disabled{opacity:.4;cursor:default}
.count{flex:none;min-width:4.2em;text-align:center;font:500 14px var(--f-head);color:var(--text-mute);font-variant-numeric:tabular-nums}
[dir=rtl] .count{direction:ltr}

.qr{display:none}

/* the phone, at --s 1: a 393 x 852 screen with 55 px corners, then an 11 px black bezel (66 px outer corners), a thin
   titanium rim and the side buttons. #device is the screen's box; the bezel is .phone's shadow and the rim and buttons
   are #device's ::before / ::after behind it, so all three sit outside the box. The status area (time, Dynamic
   Island, signal, wifi, battery) and the home area take the colours of the snapshot's top and bottom edges (tour.js
   sets --bar-top / --bar-bottom and the light or dark ink for each), so they read as part of the app's screen, as on
   a real phone. Every length is a multiple of --s. The focus outline is not here: tour.js draws it in the snapshot
   itself (FOCUS_CSS), so it scrolls with its element. */
.stage{display:flex;flex-direction:column;align-items:center;padding-block:18px 26px;min-width:0}
/* 418 = 393 + 2 x 12.5 (bezel and rim): the whole device fits the stage. */
.device{--s:1;--shift:0px;--bar-top:var(--ground);--bar-bottom:var(--ground);--ink-top:#fff;--ink-bottom:#fff;
  position:relative;isolation:isolate;width:min(393px,calc(100% * 393 / 418));margin-inline:auto;flex:none}
.device::before{content:"";position:absolute;z-index:-1;inset:calc(-12.5px * var(--s));border-radius:calc(67.5px * var(--s));
  background:linear-gradient(135deg,#7b7e86 0%,#3a3c42 14%,#1d1e22 38%,#26272c 62%,#45474e 86%,#878a92 100%);
  box-shadow:inset 0 0 0 calc(.6px * var(--s)) #ffffff2e,0 calc(4px * var(--s)) calc(10px * var(--s)) #0007,
    0 calc(26px * var(--s)) calc(64px * var(--s)) #000a}
/* action button and volume up / down on the left, the side button on the right, as seen from the front */
.device::after{content:"";position:absolute;z-index:-2;inset-block:0;left:calc(-15px * var(--s));right:calc(-15px * var(--s));
  --btn:linear-gradient(90deg,#1b1c20,#5a5d65 55%,#2a2b30);
  background:
    var(--btn) left 0 top calc(112px * var(--s)) / calc(3.5px * var(--s)) calc(32px * var(--s)) no-repeat,
    var(--btn) left 0 top calc(176px * var(--s)) / calc(3.5px * var(--s)) calc(62px * var(--s)) no-repeat,
    var(--btn) left 0 top calc(252px * var(--s)) / calc(3.5px * var(--s)) calc(62px * var(--s)) no-repeat,
    linear-gradient(270deg,#1b1c20,#5a5d65 55%,#2a2b30) right 0 top calc(206px * var(--s)) / calc(3.5px * var(--s)) calc(100px * var(--s)) no-repeat}
.phone{position:relative;width:100%;aspect-ratio:393/852;border-radius:calc(55px * var(--s));overflow:hidden;background:var(--bar-bottom);
  box-shadow:0 0 0 calc(11px * var(--s)) #050507;isolation:isolate}
.statusbar{position:absolute;inset:0 0 auto 0;height:calc(54px * var(--s));background:var(--bar-top);color:var(--ink-top);direction:ltr;
  font:600 calc(17px * var(--s))/1 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",system-ui,sans-serif;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;transition:background-color .2s,color .2s}
/* the two "ears" either side of the island (393 - 126) / 2 = 133.5 wide, each centred in its own */
.sbtime,.sbicons{position:absolute;top:0;height:100%;width:calc(133.5px * var(--s));display:flex;align-items:center;justify-content:center}
.sbtime{left:0;padding-left:calc(6px * var(--s))}
.sbicons{right:0;gap:calc(5.5px * var(--s));padding-right:calc(6px * var(--s))}
.sbicons svg{fill:currentColor;width:auto;flex:none}
.sbsignal{height:calc(11.4px * var(--s))}
.sbwifi{height:calc(11.4px * var(--s))}
.sbbattery{height:calc(13px * var(--s))}
.island{position:absolute;z-index:2;top:calc(11px * var(--s));left:50%;width:calc(126px * var(--s));height:calc(37px * var(--s));
  margin-left:calc(-63px * var(--s));border-radius:calc(18.5px * var(--s));background:#000;
  background-image:radial-gradient(circle at calc(107px * var(--s)) 50%,#141a2c calc(4.5px * var(--s)),#0a0d16 calc(6px * var(--s)),#000 calc(7.5px * var(--s)))}
.phone iframe{position:absolute;top:calc(54px * var(--s));left:0;width:393px;height:764px;border:0;transform:scale(var(--s));transform-origin:0 0;
  transition:opacity .2s;background:transparent}
.phone iframe.fading{opacity:0}
.homebar{position:absolute;inset:auto 0 0 0;height:calc(34px * var(--s));background:var(--bar-bottom);transition:background-color .2s}
.homebar i{position:absolute;left:50%;bottom:calc(8px * var(--s));width:calc(134px * var(--s));height:calc(5px * var(--s));
  margin-left:calc(-67px * var(--s));border-radius:calc(2.5px * var(--s));background:var(--ink-bottom);transition:background-color .2s}

/* the end panel: a quiet sign-off over the last step. A short title and one line, then the route just travelled: every
   chapter ticked on one gold line, each a way back to its first step. The two ways out sit at the foot, normal sized. */
.end{position:fixed;inset:0;z-index:10;background:#0a0f1fcc;display:grid;place-items:center;padding:16px;overflow-y:auto;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.endcard{position:relative;width:min(440px,100%);background:var(--ground);border:2px solid var(--line);border-radius:20px;
  padding:24px 20px 18px;box-shadow:0 0 0 1px var(--edge),0 28px 70px #000a;display:flex;flex-direction:column;
  text-align:start;overflow:hidden}
/* one restrained gold hairline along the top edge */
.endcard::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--gold),#ffc83a00 70%)}
[dir=rtl] .endcard::before{background:linear-gradient(-90deg,var(--gold),#ffc83a00 70%)}
.endtitle{margin:0;padding-inline-end:44px;font:600 26px/1.15 var(--f-head);color:#fff;letter-spacing:.005em;text-wrap:balance}
.endtext{margin:8px 0 0;color:var(--text-soft);font-size:15px;line-height:1.5;text-wrap:pretty}
.endcard p,.endtitle,.stopname{unicode-bidi:plaintext}
.endcard .contact{margin:10px 0 0;color:var(--gold);font:600 16px/1.4 var(--f-head)}
.endjump{margin:20px 0 8px;font:600 12px/1.3 var(--f-head);text-transform:uppercase;letter-spacing:.12em;color:var(--text-mute)}

/* the route: a gold line through the five ticks (centred on the first and last tick), a tile for each chapter */
.route{--tick:22px;--row:46px;position:relative;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.route::before{content:"";position:absolute;inset-inline-start:calc(var(--tick) / 2 + 13px);width:2px;margin-inline-start:-1px;
  top:calc(var(--row) / 2);bottom:calc(var(--row) / 2);background:linear-gradient(var(--gold-deep),var(--gold));opacity:.55;border-radius:2px}
.stop{appearance:none;position:relative;display:flex;align-items:flex-start;gap:12px;width:100%;min-height:var(--row);margin:0;
  padding:0 12px 0 11px;border:2px solid transparent;border-radius:14px;background:none;cursor:pointer;text-align:start;
  color:var(--text);transition:background .15s,border-color .15s}
.stop .tick{flex:none;width:var(--tick);height:var(--tick);margin-block:calc((var(--row) - 4px - var(--tick)) / 2);padding:4px;
  border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px var(--ground),inset 0 -2px 0 #0000001f;
  fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.stopname{flex:1;min-width:0;align-self:center;padding-block:9px;font:500 15px/1.3 var(--f-head);color:var(--text)}
.stop .arrow{flex:none;align-self:center;width:16px;height:16px;fill:none;stroke:var(--text-mute);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .15s,stroke .15s}
[dir=rtl] .stop .arrow,[dir=rtl] .endback .arrow{transform:scaleX(-1)}
.stop:hover{background:var(--ground-2);border-color:var(--line)}
.stop:hover .arrow{stroke:var(--gold);transform:translateX(2px)}
[dir=rtl] .stop:hover .arrow{transform:scaleX(-1) translateX(2px)}
.stop:focus-visible{outline-offset:0}

/* the ways out */
.endmoves{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 12px;margin-top:18px;
  padding-top:16px;border-top:1px solid var(--line)}
.endback{appearance:none;display:inline-flex;align-items:center;gap:6px;min-height:42px;margin-inline-start:-8px;padding:6px 10px;
  border:0;border-radius:12px;background:none;color:var(--text-soft);font:500 15px/1.2 var(--f-head);cursor:pointer}
.endback .arrow{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.endback:hover{color:#fff;background:var(--ground-2)}
.endmoves .btn{flex:none;margin-inline-start:auto;min-height:42px;padding:9px 20px;font-size:15px;border-width:2px;border-radius:12px;
  box-shadow:0 3px 0 var(--gold-deep),0 3px 0 2px var(--edge)}
.endmoves .btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--gold-deep),0 1px 0 2px var(--edge)}
.endclose{position:absolute;inset-block-start:14px;inset-inline-end:14px;width:36px;height:36px;border-radius:12px;border:0;
  background:var(--ground-2);color:var(--text-soft);cursor:pointer;display:grid;place-items:center;padding:0;transition:background .15s,color .15s}
.endclose svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.endclose:hover{color:#fff;background:var(--ground-3)}
@media (max-width:380px){
  .endcard{padding:20px 16px 14px}
  .endtitle{font-size:23px}
  .endtext{font-size:14px}
  .endjump{margin-top:16px}
  .route{--row:42px;gap:4px}
  .stopname{font-size:14px;padding-block:8px}
}
@media (min-width:900px){
  .endcard{padding:30px 28px 22px}
  .endtitle{font-size:30px}
}
.loadfail{max-width:420px;margin:48px auto;padding:18px 20px;text-align:center;background:var(--ground-2);border:3px solid var(--edge);
  border-radius:18px;color:var(--text);font:500 16px/1.5 var(--f-head)}

.foot{padding-block:8px 18px;text-align:center;font-size:12px;color:var(--text-mute)}

/* Phones: Back / Next stay at the bottom of the screen, so the frame can be scrolled to without losing them. */
@media (max-width:899px){
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .moves{position:fixed;inset:auto 0 0 0;z-index:5;padding:10px 16px calc(14px + env(safe-area-inset-bottom));
    background:linear-gradient(#1f274200,var(--ground) 30%);}
  .moves .btn{max-width:220px}
}
@media (min-width:600px) and (max-width:899px){
  .tip{display:block}
  .moves{justify-content:center}
}
@media (max-width:420px){
  .top{gap:8px}
  .lang select{max-width:7.5rem}
}
@media (max-width:380px){
  .title{font-size:20px}
  .text{font-size:14px}
}

/* Full screen on a phone (tour.js enterFs): only the snapshot, as wide as the screen from the top of its safe area, and a
   see-through panel fixed to the bottom with the step's text, the disclaimer and Back / Next. --shift slides the
   snapshot up when the step's element would sit under the panel and cannot be scrolled out from under it. */
@media (max-width:899px){
  html:not(.fs) .fsbtn{display:inline-flex}
  html.fs,html.fs body{overflow:hidden;overscroll-behavior:none}
  .fs body{padding:0}
  .fs .top,.fs .chapters,.fs .foot,.fs .qr,.fs .statusbar,.fs .island,.fs .homebar{display:none}
  .fs .stage{position:fixed;inset:0;z-index:3;display:block;overflow:hidden;background:var(--ground);
    padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}
  /* the safe area above the snapshot stays covered, in the colour of its top edge as the status area was, while the
     snapshot slides up under it */
  .fs .stage::before{content:"";position:fixed;z-index:2;inset:0 0 auto 0;height:env(safe-area-inset-top);background:var(--bar-top,var(--ground))}
  .fs .device{width:100%;margin:0;transform:translateY(calc(var(--shift) * -1));transition:transform .3s cubic-bezier(.2,.8,.2,1)}
  .fs .device::before,.fs .device::after{display:none}
  .fs .phone{aspect-ratio:393/764;border-radius:0;box-shadow:none}
  .fs .phone iframe{top:0}
  .fs .story{position:fixed;inset:auto 0 0 0;z-index:6;gap:5px;max-height:calc(100dvh - env(safe-area-inset-top) - 96px);
    padding:14px calc(16px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
    background:linear-gradient(#232c4bcc,#161c33eb 70%);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
    border-radius:22px 22px 0 0;box-shadow:inset 0 1px 0 #ffffff24,0 -14px 40px #0008}
  /* how far through the tour: a gold hairline along the panel's top edge, as on the end panel */
  .fs .story::before{content:"";position:absolute;top:0;inset-inline:22px;height:2px;border-radius:0 0 2px 2px;
    background:linear-gradient(to right,var(--gold) calc(var(--done,0) * 100%),#ffffff26 0)}
  [dir=rtl].fs .story::before{background:linear-gradient(to left,var(--gold) calc(var(--done,0) * 100%),#ffffff26 0)}
  .fs .storyhead{margin-top:2px;min-height:34px}
  .fs .chapter{font-size:11px}
  .fs .fsexit{display:grid;margin-inline-end:-6px}
  .fs .title{font-size:19px}
  .fs .text{font-size:14.5px;line-height:1.5;min-height:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
  .fs .story.open .text{display:block;-webkit-line-clamp:none;max-height:30dvh;overflow-y:auto;overscroll-behavior:contain}
  .fs .disclaimer{font-size:11.5px;opacity:.9}
  .fs .moves{position:static;padding:0;margin-top:6px;background:none}
  .fs .moves .btn{max-width:none;min-height:42px;font-size:15px}
}

/* Wide screens: story on the left, the frame sized to the window on the right. */
@media (min-width:900px){
  body{padding-inline:32px}
  .top{padding-block:22px 8px}
  .tip{display:block;margin-inline-end:8px}
  .tour{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:48px;align-items:start}
  .story{position:sticky;top:24px;gap:10px;padding-block:18px 8px}
  .chapters{flex-wrap:wrap;overflow:visible;margin-inline:0;padding:0 0 6px}
  .title{font-size:30px}
  .text{font-size:16px;min-height:4.8em}
  .moves{margin-top:8px}
  .moves .btn{flex:0 1 150px}
  .qr{display:flex;align-items:center;gap:14px;margin-top:22px;padding:12px;border:2px dashed var(--line);border-radius:16px;
    color:var(--text-soft);font:500 14px/1.4 var(--f-head);max-width:360px}
  .qr img{flex:none;width:104px;height:104px;border-radius:10px;background:#fff;padding:4px}
  .stage{padding-block:20px 28px}
  .story .disclaimer{display:none}
  .stage .disclaimer{display:block;width:min(393px,100%);margin-top:34px;text-align:center}
  /* 877 = 852 + 2 x 12.5: the whole device fits the window's height too */
  .device{width:min(calc(100% * 393 / 418),clamp(300px,calc((100dvh - 160px) * 393 / 877),393px))}
}

@media (prefers-reduced-motion:reduce){
  .phone iframe,.statusbar,.homebar,.homebar i,.chip,.btn,.stop,.stop .arrow,.endclose,.fsbtn,.fs .device{transition:none}
}