/* v17 — shared cloud coverage and the post-globe interface. Menu styles: menu.css. */
#menuSky {
  position:fixed; top:0; right:0; bottom:0; left:0; inset:0; overflow:hidden; pointer-events:none; opacity:0; visibility:hidden;
  background:linear-gradient(180deg,#061329 0%,#0d2e5c 54%,#1a4b84 100%); transition:opacity .55s ease,visibility 0s .55s; contain:layout paint;
}
#menuSky.is-day {
  background:linear-gradient(180deg,#2c6fb2 0%,#599ce0 55%,#b8dcf8 100%);
}
#menuSky.is-visible { opacity:1; visibility:visible; transition:opacity .55s ease; }
#menuSky .sky-picture { position:absolute; top:0; right:0; bottom:0; left:0; inset:0; display:block; }
#menuSky .sky-picture img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
#menuSky .sky-night { opacity:1; } #menuSky .sky-day { opacity:0; }
#menuSky.is-day .sky-night { opacity:0; } #menuSky.is-day .sky-day { opacity:1; }
#menuSky::after { content:''; position:absolute; top:0; right:0; bottom:0; left:0; inset:0; background:linear-gradient(180deg,rgba(17,51,82,.06),transparent 42%,rgba(3,21,41,.1)); }
#menuSky.is-day::after { background:linear-gradient(180deg,rgba(220,239,249,.2),transparent 45%,rgba(237,245,250,.08)); }

/* The kiosk keeps its native pointer in fullscreen. */
body.kiosk,body.kiosk * { cursor:auto!important; }
body.kiosk button,body.kiosk a,body.kiosk [role="button"],body.kiosk [role="radio"],
body.kiosk button *,body.kiosk a *,body.kiosk [role="button"] *,body.kiosk [role="radio"] * { cursor:pointer!important; }
body.kiosk button:disabled,body.kiosk [aria-disabled="true"],
body.kiosk button:disabled *,body.kiosk [aria-disabled="true"] * { cursor:default!important; }
body[data-experience-screen]:not([data-experience-screen="reveal"]) #reveal { visibility:hidden; }
body[data-experience-screen] { overflow:hidden; overflow:clip; touch-action:manipulation; }
#menu,#story,#rate {
  --ui-ink:#f4faff; --ui-muted:#c8deed; --ui-accent:#8fe4ec; --ui-line:rgba(194,230,248,.25);
  --ui-panel:rgba(20,56,84,.8); --ui-soft:rgba(24,58,86,.68);
  color:var(--ui-ink); height:100vh; max-height:100vh; height:100dvh; max-height:100dvh; overflow:hidden; overflow:clip; touch-action:manipulation;
  isolation:isolate; -webkit-font-smoothing:antialiased;
}
body.light #menu,body.light #story,body.light #rate { --ui-ink:#143651; --ui-muted:#385a71; --ui-accent:#126a98; --ui-line:rgba(31,98,136,.23); --ui-panel:rgba(247,252,255,.85); --ui-soft:rgba(237,249,255,.74); }
#menu button,#menu a,#story button,#story a,#rate button,#rate a { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
#menu button:focus-visible,#menu a:focus-visible,#story button:focus-visible,#story a:focus-visible,#rate button:focus-visible,#rate a:focus-visible { outline:3px solid var(--ui-accent); outline-offset:5px; }
#menu svg,#story svg,#rate svg { flex-shrink:0; }
#menu:not(.active) { opacity:0; visibility:hidden; pointer-events:none; }
#story:not(.active),#rate:not(.active) { display:none; }
#menuHeading:focus,#story h3[tabindex="-1"]:focus,#rate h3[tabindex="-1"]:focus { outline:none; }
#story .sr-only,#rate .sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; overflow:hidden!important; clip-path:inset(50%)!important; white-space:nowrap!important; border:0!important; }

/* Short chapters sit inside a fixed stage. Only chapter navigation changes content. */
#story,#rate { padding:0 max(26px,env(safe-area-inset-right)) 0 max(26px,env(safe-area-inset-left)); }
#story::before,#rate::before { background:linear-gradient(180deg,rgba(12,39,67,.58),rgba(12,43,71,.35) 56%,rgba(7,32,57,.27)); }
body.light #story::before,body.light #rate::before { background:linear-gradient(180deg,rgba(235,247,254,.58),rgba(236,247,253,.35) 56%,rgba(227,242,251,.28)); }
#story .scr-top,#rate .scr-top { width:min(1060px,100%); margin:22px 0 0; height:44px; flex:none; }
#story .scr-logo,#rate .scr-logo { width:56px; height:auto; filter:none; }
#story .chip-btn,#rate .chip-btn { min-height:44px; padding:8px 18px; gap:8px; border:1px solid var(--ui-line); border-radius:99px; font-size:14px; line-height:1.5; font-weight:500; color:var(--ui-ink); background:var(--ui-soft); box-shadow:none; }
#story .chip-btn svg,#rate .chip-btn svg { width:18px; }
#story .scr-head,#rate .scr-head { flex:none; margin:12px 0 0; gap:3px; }
#story .scr-head h2,#rate .scr-head h2 { font-size:28px; font-weight:700; line-height:1.4; text-shadow:none; }
#story .scr-head small,#rate .scr-head small { font-size:14px; line-height:1.6; color:var(--ui-accent); text-shadow:none; }
#story .rail { width:min(460px,90%); height:44px; margin-top:12px; flex:none; }
#story .rail::before,#story .rail .fill { height:1px; box-shadow:none; }
#story .rail::before { left:22px; right:22px; background:var(--ui-line); }
#story .rail .fill { right:22px; max-width:calc(100% - 44px); background:var(--ui-accent); }
#story .rail .node { display:grid; place-items:center; width:38px; height:38px; flex:none; border:1px solid var(--ui-line); background:#214862; color:var(--ui-muted); border-radius:50%; box-shadow:none; transform:none; font:500 12px/1 system-ui,sans-serif; }
#story .rail .node::before { display:none; } #story .rail .node::after { inset:-3px; }
#story .rail .node.done { border-color:var(--ui-accent); }
#story .rail .node.on { background:#94e2eb; color:#133d54; border-color:#c9f5f8; box-shadow:0 0 0 5px rgba(128,222,240,.1); font-weight:700; }
body.light #story .rail .node { background:#edf8ff; }
body.light #story .rail .node.on { background:#17658e; border-color:#17658e; color:white; }
#story .story-progress { flex:none; margin:3px 0 0; color:var(--ui-muted); font-size:12px; line-height:1.7; text-align:center; }
#story .stage,#rate .steps { position:relative; width:min(1060px,100%); min-height:0; flex:1; max-height:580px; margin:14px 0 0; border:1px solid var(--ui-line); border-radius:28px; background:linear-gradient(135deg,rgba(32,69,94,.79),rgba(18,49,76,.77)); box-shadow:inset 0 1px 0 rgba(236,251,255,.1),0 20px 50px rgba(0,22,42,.17); backdrop-filter:none; -webkit-backdrop-filter:none; overflow:hidden; overflow:clip; isolation:isolate; touch-action:manipulation; }
body.light #story .stage,body.light #rate .steps { background:linear-gradient(135deg,rgba(255,255,255,.87),rgba(229,245,253,.79)); box-shadow:inset 0 1px 0 #fff,0 20px 50px rgba(32,86,114,.1); }
#story .chap { position:absolute; top:0; right:0; bottom:0; left:0; inset:0; padding:34px 43px; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); grid-auto-rows:min-content; column-gap:40px; row-gap:13px; align-content:center; align-items:start; justify-content:normal; overflow:hidden; overflow:clip; touch-action:manipulation; }
#story .stage,#story .chap { touch-action:pan-y pinch-zoom; }
#story .chap .vis { position:relative; grid-column:2; grid-row:1 / span 5; place-self:center; margin:0; flex:none; }
#story .chap .kick,#story .chap .hl,#story .chap .body,#story .chap .badge,#story .chap .outro-cta { grid-column:1; justify-self:start; text-align:right; margin:0; width:auto; max-width:100%; }
#story .chap .kick { display:inline-flex; align-items:center; gap:12px; color:var(--ui-accent); font-size:14px; line-height:1.6; letter-spacing:0; text-shadow:none; }
#story .kick i { width:24px; height:1px; background:var(--ui-accent); opacity:.65; }
#story .chap .hl { font-size:clamp(29px,3.5vw,46px); line-height:1.4; font-weight:700; color:var(--ui-ink); text-shadow:none; text-wrap:balance; }
#story .chap > p.body { font-size:clamp(17px,1.7vw,21px); line-height:1.9; color:var(--ui-muted); text-shadow:none; text-wrap:pretty; }
#story .badge { font-size:13px; line-height:1.7; color:var(--ui-accent); border:1px solid var(--ui-line); background:var(--ui-soft); padding:7px 14px; border-radius:99px; box-shadow:none; }
#story .vis.sig { width:min(255px,100%); height:auto; aspect-ratio:1; }
#story .vis.map { width:100%; height:auto; aspect-ratio:100/58; max-height:35vh; }
#story .vis.map svg { width:100%; height:100%; overflow:visible; }
#story .map-unavailable { display:grid; place-items:center; color:var(--ui-muted); font-size:14px; }
#story .vis.logo { width:min(260px,100%); height:auto; aspect-ratio:1126/708; }
#story .vis.logo .glow { opacity:.23; }
#story .vis.brand-original { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; width:min(280px,100%); height:auto; aspect-ratio:1; padding:16px 0; border:0; border-radius:0; background:none; box-shadow:none; }
#story .vis.brand-original img { display:block; position:static; inset:auto; width:100%; height:auto; object-fit:contain; opacity:1; transform:none; animation:none; filter:none; }
#story .vis.brand-original .story-brand-cloud { width:64%; }
#story .vis.brand-original .brand-word-night,
#story .vis.brand-original .brand-word-day { -webkit-clip-path:inset(0 0 8% 0); clip-path:inset(0 0 8% 0); }
#story .vis.brand-original .brand-word-day { display:none; }
body.light #story .vis.brand-original .brand-word-night { display:none; }
body.light #story .vis.brand-original .brand-word-day { display:block; }
#story .scr-foot { width:min(1060px,100%); flex:none; min-height:44px; margin:16px 0 22px; gap:15px; }
#story .sbtn,#rate .sbtn,#story .nav-btn { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:9px 25px; gap:11px; font:500 16px/1.6 Hanimation,sans-serif; border:1px solid rgba(160,232,248,.3); border-radius:16px 16px 7px 16px; background:linear-gradient(135deg,#219cb9,#176fa5); color:white; box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 7px 19px rgba(0,33,49,.14); transition:transform .2s,filter .2s; }
#story .sbtn svg,#rate .sbtn svg,#story .nav-btn svg { width:19px; }
#story .sbtn.ghost,#rate .sbtn.ghost,#story .nav-btn.ghost { color:var(--ui-ink); background:var(--ui-soft); border-color:var(--ui-line); box-shadow:none; }
#story .outro-cta { margin-top:8px!important; }

/* Each survey step has a fixed, complete composition. */
#rate .steps { width:min(800px,100%); margin-top:20px; }
#rate .step { position:absolute; top:0; right:0; bottom:0; left:0; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:28px; overflow:hidden; overflow:clip; gap:0; touch-action:manipulation; }
#rate .step h3 { margin:0; font-size:clamp(25px,3vw,36px); line-height:1.45; font-weight:700; color:var(--ui-ink); text-shadow:none; text-align:center; }
#rate .step-hint { font-size:15px; line-height:1.7; margin:9px 0 0; color:var(--ui-muted); text-shadow:none; }
#rate .stars { display:flex; flex:none; gap:12px; margin-top:28px; }
#rate .star-btn { width:68px; height:75px; padding:7px; flex:none; border:1px solid transparent; border-radius:17px; background:rgba(167,220,239,.04); }
#rate .star-btn .sh { fill:rgba(193,229,245,.07); stroke:#9fbdcf; stroke-width:.9; }
#rate .star-btn.on .sh { fill:url(#gStarBig); stroke:#ffe8ac; filter:drop-shadow(0 2px 8px rgba(245,191,76,.2)); }
#rate .star-btn[aria-checked="true"] { border-color:rgba(255,222,145,.6); background:rgba(255,225,156,.07); }
body.light #rate .star-btn .sh { fill:rgba(255,255,255,.3); stroke:#6a91aa; }
body.light #rate .star-btn.on .sh { fill:url(#gStarBig); stroke:#bb841e; }
body.light #rate .star-btn[aria-checked="true"] { border-color:#b49245; }
#rate .rate-word { flex:none; height:auto; font-size:21px; line-height:1.65; min-height:35px; margin-top:13px; color:var(--ui-accent); text-shadow:none; }
#rate #rateContinue { margin-top:22px; }
#rate #rateContinue:disabled { opacity:.36; visibility:visible; pointer-events:none; }
#rate .tags { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:min(560px,100%); gap:10px; margin-top:22px; flex:none; }
#rate .tag { min-height:52px; padding:10px 14px; font-size:16px; line-height:1.5; border:1px solid var(--ui-line); border-radius:16px; background:var(--ui-soft); color:var(--ui-ink); box-shadow:none; }
#rate .tag.on { border-color:var(--ui-accent); box-shadow:inset 0 0 0 1px var(--ui-accent); background:rgba(115,218,231,.17); }
#rate .step-actions { display:flex; flex-wrap:nowrap; align-items:center; justify-content:center; gap:15px; margin-top:22px; flex:none; }
#rate .link-btn { font-size:15px; line-height:1.6; padding:9px 12px; min-height:44px; color:var(--ui-muted); opacity:1; text-underline-offset:5px; }
#rate .thanks-art { flex:none; width:91px; height:91px; margin:0 0 18px; }
#rate .thanks-art svg { filter:none; }
#rate .thanks-stars { gap:7px; margin:15px 0 0; flex:none; }
#rate .thanks-stars svg { width:23px; height:23px; filter:none; }
#rate #thanksBack { margin-top:21px; }
#rate .countdown { width:150px; height:2px; margin-top:19px; border-radius:1px; background:var(--ui-line); flex:none; }
#rate .countdown i { background:var(--ui-accent); box-shadow:none; }
#rate .countdown-label { font-size:12px; line-height:1.7; color:var(--ui-muted); margin-top:12px; text-align:center; flex:none; }
#rate .rate-progress { flex:none; font-size:12px; line-height:1.7; text-align:center; color:var(--ui-muted); margin-top:11px; }
#rate .steps-dots { display:flex; gap:23px; min-height:27px; margin:9px 0 22px; flex:none; }
#rate .steps-dots i,#rate .steps-dots i.on { display:block; position:relative; width:83px; height:2px; border-radius:1px; transform:none; background:var(--ui-line); box-shadow:none; }
#rate .steps-dots i.on { background:var(--ui-accent); }
#rate .steps-dots i::after { content:attr(data-label); position:absolute; top:6px; left:0; width:100%; font-size:11px; line-height:1.5; font-style:normal; text-align:center; color:var(--ui-muted); }
#rate .steps-dots i.on::after { color:var(--ui-accent); }
#rate .rate-error,#rate [role=alert] { flex:none; width:min(560px,100%); margin:12px 0 0; padding:10px 14px; border:1px solid rgba(249,197,152,.4); border-radius:12px; font-size:14px; line-height:1.65; color:#ffe2c8; background:rgba(95,47,30,.37); text-align:center; }
body.light #rate .rate-error,body.light #rate [role=alert] { color:#804022; background:#fff2e8; border-color:#d8b399; }
#rate [role=alert]:empty,#rate .rate-error[hidden] { display:none; }

@media (max-width:760px), (max-aspect-ratio:4/5) {
  #story,#rate { padding-right:21px; padding-left:21px; }
  #story .chap { grid-template-columns:1fr; gap:11px; padding:23px 25px; align-content:center; }
  #story .chap .vis { grid-column:1; grid-row:1; margin:0 0 3px; }
  #story .chap .kick,#story .chap .hl,#story .chap .body,#story .chap .badge,#story .chap .outro-cta { grid-column:1; justify-self:center; text-align:center; }
  #story .chap .hl { font-size:31px; line-height:1.4; }
  #story .chap > p.body { max-width:560px; font-size:18px; line-height:1.85; }
  #story .vis.sig { width:145px; }
  #story .vis.logo { width:180px; }
  #story .vis.brand-original { width:190px; }
  #story .vis.map { width:min(340px,100%); max-height:190px; }
}
@media (max-width:520px) {
  #story,#rate { padding-right:17px; padding-left:17px; }
  #story .scr-top,#rate .scr-top { margin-top:16px; }
  #story .scr-logo,#rate .scr-logo { width:47px; }
  #story .scr-head,#rate .scr-head { margin-top:9px; }
  #story .scr-head h2,#rate .scr-head h2 { font-size:25px; }
  #story .scr-head small,#rate .scr-head small { font-size:13px; }
  #story .rail { margin-top:9px; }
  #story .stage,#rate .steps { border-radius:23px; margin-top:10px; }
  #story .chap { padding:21px 19px; gap:10px; }
  #story .chap .hl { font-size:28px; }
  #story .chap .kick { font-size:12px; gap:9px; }
  #story .chap > p.body { font-size:16px; line-height:1.9; }
  #story .vis.sig { width:122px; }
  #story .vis.logo { width:155px; }
  #story .vis.brand-original { width:170px; }
  #story .vis.map { width:255px; max-height:155px; }
  #story .badge { font-size:12px; padding:6px 12px; }
  #story .scr-foot { margin:12px 0 17px; }
  #rate .step { padding:22px 16px; }
  #rate .step h3 { font-size:25px; }
  #rate .stars { gap:5px; margin-top:23px; }
  #rate .star-btn { width:50px; height:61px; }
  #rate .tags { gap:9px; margin-top:17px; }
  #rate .tag { font-size:14px; min-height:48px; padding:8px; }
  #rate .step-hint { font-size:14px; }
  #rate .step-actions { margin-top:17px; }
  #rate .steps-dots { gap:14px; margin-bottom:17px; }
  #rate .steps-dots i,#rate .steps-dots i.on { width:79px; }
}

@media (max-height:740px) {
  #story .chap { gap:9px; padding:23px; }
  #story .chap .hl { font-size:31px; }
  #story .chap > p.body { font-size:17px; line-height:1.75; }
  #story .vis.sig { width:150px; } #story .vis.brand-original { width:200px; }
  #rate .step { padding:20px; }
  #rate .thanks-art { width:66px; height:66px; margin-bottom:12px; }
  #rate .thanks-stars { margin-top:10px; } #rate #thanksBack { margin-top:14px; }
}
@media (max-height:740px) and (max-width:760px) {
  #story .chap .vis { display:none; }
  #story .chap { padding:20px 18px; }
  #story .chap .hl { font-size:27px; } #story .chap > p.body { font-size:16px; }
  #rate .step { padding:16px 13px; }
  #rate .step h3 { font-size:23px; }
  #rate .stars { margin-top:18px; }
  #rate .tags { gap:7px; margin-top:13px; }
  #rate .tag { min-height:44px; font-size:13px; padding:7px; }
  #rate .step-actions { margin-top:12px; }
  #rate .step:has(.rate-error:not([hidden])) .tags { gap:5px; margin-top:8px; }
  #rate .step:has(.rate-error:not([hidden])) .tag { min-height:40px; }
  #rate .rate-error { font-size:12px; margin-top:8px; padding:7px 9px; }
}
@media (max-height:520px) and (min-aspect-ratio:1/1) {
  #story,#rate { padding-right:20px; padding-left:20px; }
  #story .scr-top,#rate .scr-top { margin-top:11px; height:38px; }
  #story .scr-logo,#rate .scr-logo { width:43px; }
  #story .scr-head,#rate .scr-head { position:absolute; top:16px; margin:0; }
  #story .scr-head h2,#rate .scr-head h2 { font-size:23px; }
  #story .scr-head small,#rate .scr-head small { display:none; }
  #story .chip-btn,#rate .chip-btn { min-height:38px; font-size:12px; padding:6px 15px; }
  #story .rail { width:340px; max-width:60%; height:34px; margin-top:6px; }
  #story .rail .node { width:30px; height:30px; font-size:10px; }
  #story .story-progress { margin-top:0; font-size:10px; }
  #story .stage,#rate .steps { margin-top:7px; border-radius:20px; }
  #story .chap { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); row-gap:5px; column-gap:25px; padding:16px 25px; }
  #story .chap .vis { display:block; grid-column:2; grid-row:1 / span 5; margin:0; }
  #story .chap .kick,#story .chap .hl,#story .chap .body,#story .chap .badge,#story .chap .outro-cta { grid-column:1; justify-self:start; text-align:right; }
  #story .chap .kick { font-size:11px; }
  #story .chap .hl { font-size:27px; line-height:1.3; }
  #story .chap > p.body { font-size:15px; line-height:1.7; }
  #story .vis.sig { width:130px; } #story .vis.logo { width:155px; } #story .vis.brand-original { width:155px; }
  #story .vis.map { width:210px; max-height:120px; }
  #story .badge { font-size:11px; padding:4px 10px; }
  #story .scr-foot { margin:9px 0 10px; min-height:40px; }
  #story .sbtn,#rate .sbtn,#story .nav-btn { min-height:40px; padding:7px 20px; font-size:14px; }
  #story .outro-cta { margin-top:3px!important; }
  #rate .steps { margin-top:12px; }
  #rate .step { padding:15px 22px; }
  #rate .step[data-step="1"],#rate .step[data-step="2"] { display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:min-content; align-content:center; column-gap:24px; row-gap:8px; }
  #rate .step[data-step="1"] h3,#rate .step[data-step="2"] h3 { grid-column:1; font-size:24px; }
  #rate .step[data-step="1"] .stars { grid-column:2; grid-row:1 / span 2; margin:0; gap:5px; justify-self:center; }
  #rate .step[data-step="1"] .rate-word { grid-column:2; grid-row:3; margin:0; font-size:16px; min-height:26px; }
  #rate #rateContinue { grid-column:1; grid-row:2 / span 2; margin:0; justify-self:center; }
  #rate .star-btn { width:45px; height:53px; }
  #rate .step[data-step="2"] .step-hint { grid-column:1; margin:0; font-size:13px; }
  #rate .step[data-step="2"] .tags { grid-column:2; grid-row:1 / span 3; margin:0; gap:6px; }
  #rate .step[data-step="2"] .step-actions { grid-column:1; margin:0; gap:8px; }
  #rate .tag { min-height:40px; padding:6px 8px; font-size:12px; }
  #rate .step[data-step="2"] .rate-error { grid-column:1 / -1; margin:0; font-size:11px; padding:5px 8px; }
  #rate .thanks-art,#rate .thanks-stars { display:none; }
  #rate .step[data-step="3"] h3 { font-size:27px; }
  #rate .step[data-step="3"] .step-hint { margin-top:5px; font-size:14px; }
  #rate #thanksBack { margin-top:14px; }
  #rate .countdown { margin-top:12px; } #rate .countdown-label { margin-top:8px; font-size:11px; }
  #rate .rate-progress { margin-top:6px; font-size:10px; }
  #rate .steps-dots { min-height:22px; margin:7px 0 9px; }
  #rate .steps-dots i::after { font-size:10px; }
}
@media (max-width:350px) {
  #rate .star-btn { width:43px; height:53px; }
  #rate .steps-dots i,#rate .steps-dots i.on { width:68px; }
}

@media (prefers-reduced-motion:reduce) {
  #menuSky,#menuSky.is-visible { transition:none; }
  #menu *,#story *,#rate *,#menu *::before,#story *::before,#rate *::before,#menu *::after,#story *::after,#rate *::after { animation:none!important; transition:none!important; }
}

/* Once the shared opaque sky has settled, exclude the parked WebGL surfaces
   from secondary-screen compositing. The home controller wakes them on return. */
body[data-sky-covered="true"] #gl,body[data-sky-covered="true"] #fx { visibility:hidden; }
#story .chip-btn,#story .sbtn,#story .nav-btn,#rate .chip-btn,#rate .sbtn,#rate .nav-btn { backdrop-filter:none; -webkit-backdrop-filter:none; }
#story:not(.active) *,#rate:not(.active) *,#services:not(.active) *,
#story:not(.active) *::before,#rate:not(.active) *::before,#services:not(.active) *::before,
#story:not(.active) *::after,#rate:not(.active) *::after,#services:not(.active) *::after { animation-play-state:paused!important; }

/* Inactive survey steps must not animate beneath the current question. */
#rate .step:not(.on) { display:none!important; }

/* A large portrait display is still portrait. Scale the complete chapter and
   survey hierarchy for viewing at kiosk distance, rather than desktop widths. */
@media (min-width:600px) and (max-aspect-ratio:4/5) {
  #story,#rate { padding-left:4.5vw; padding-right:4.5vw; }
  #story .scr-top,#rate .scr-top { width:100%; height:clamp(52px,6vw,72px); margin-top:clamp(24px,3vw,40px); }
  #story .scr-logo,#rate .scr-logo { width:clamp(62px,8vw,92px); }
  #story .chip-btn,#rate .chip-btn { min-height:clamp(50px,6vw,70px); padding:12px 25px; gap:12px; font-size:clamp(18px,2.5vw,28px); }
  #story .chip-btn svg,#rate .chip-btn svg { width:clamp(22px,2.6vw,30px); }
  #story .scr-head,#rate .scr-head { margin-top:clamp(25px,4vw,48px); gap:8px; }
  #story .scr-head h2,#rate .scr-head h2 { font-size:clamp(36px,5vw,58px); line-height:1.45; }
  #story .scr-head small,#rate .scr-head small { font-size:clamp(20px,2.7vw,31px); line-height:1.7; }
  #story .rail { width:min(68vw,780px); height:clamp(50px,6.5vw,74px); margin-top:clamp(22px,3.4vw,40px); }
  #story .rail .node { width:clamp(46px,5.8vw,68px); height:clamp(46px,5.8vw,68px); font-size:clamp(16px,2.1vw,25px); }
  #story .story-progress { font-size:clamp(16px,2.1vw,25px); margin-top:10px; }
  #story .stage,#rate .steps { border-radius:clamp(28px,4vw,48px); max-height:none; }
  #story .stage { flex:0 1 59vh; height:59vh; margin-top:clamp(22px,3.6vw,44px); }
  #story .chap { grid-template-columns:1fr; align-content:center; gap:clamp(18px,2.5vw,30px); padding:clamp(32px,5vw,64px); }
  #story .chap .vis { grid-column:1; grid-row:1; margin:0 0 clamp(10px,1.5vw,20px); }
  #story .chap .kick,#story .chap .hl,#story .chap .body,#story .chap .badge,#story .chap .outro-cta { grid-column:1; justify-self:center; text-align:center; }
  #story .chap .kick { font-size:clamp(19px,2.5vw,28px); }
  #story .chap .hl { font-size:clamp(39px,5.1vw,62px); line-height:1.5; }
  #story .chap > p.body { max-width:26em; font-size:clamp(24px,3.1vw,36px); line-height:1.9; }
  #story .vis.sig { width:clamp(180px,25vw,300px); }
  #story .vis.brand-original { display:flex; width:clamp(220px,32vw,390px); gap:clamp(20px,3vw,36px); }
  #story .vis.logo { width:clamp(220px,30vw,360px); }
  #story .vis.map { width:min(60vw,680px); max-height:25vh; }
  #story .badge { padding:10px 22px; font-size:clamp(18px,2.3vw,27px); }
  #story .scr-foot { margin:clamp(22px,3.5vw,42px) 0 clamp(28px,4vw,48px); gap:24px; }
  #story .sbtn,#rate .sbtn,#story .nav-btn { min-height:clamp(56px,7vw,82px); padding:14px 32px; gap:16px; font-size:clamp(22px,2.9vw,34px); border-radius:999px; }
  #story .sbtn svg,#rate .sbtn svg,#story .nav-btn svg { width:clamp(24px,3vw,36px); }
  #rate .steps { width:min(86vw,950px); flex:0 1 57vh; height:57vh; margin-top:clamp(30px,5vw,64px); }
  #rate .step { padding:clamp(28px,4.5vw,56px); }
  #rate .step h3 { font-size:clamp(32px,4.5vw,56px); line-height:1.5; }
  #rate .step-hint { font-size:clamp(21px,2.8vw,32px); margin-top:clamp(16px,2.4vw,28px); line-height:1.8; }
  #rate .stars { gap:clamp(12px,1.8vw,22px); margin-top:clamp(28px,4.5vw,54px); }
  #rate .star-btn { width:clamp(76px,11.5vw,132px); height:clamp(88px,13vw,150px); padding:9px; border-radius:24px; }
  #rate .rate-word { font-size:clamp(25px,3.3vw,38px); min-height:44px; margin-top:clamp(18px,2.8vw,34px); }
  #rate #rateContinue { margin-top:clamp(26px,4vw,48px); }
  #rate .tags { width:100%; gap:clamp(12px,1.8vw,22px); margin-top:clamp(24px,3.4vw,40px); }
  #rate .tag { min-height:clamp(64px,8vw,96px); padding:14px; border-radius:22px; font-size:clamp(21px,2.75vw,32px); }
  #rate .step-actions { gap:clamp(18px,3vw,36px); margin-top:clamp(26px,3.6vw,44px); }
  #rate .link-btn { font-size:clamp(20px,2.6vw,30px); min-height:56px; }
  #rate .thanks-art { width:clamp(110px,16vw,184px); height:clamp(110px,16vw,184px); margin-bottom:clamp(24px,4vw,48px); }
  #rate .thanks-stars { gap:12px; margin-top:26px; }
  #rate .thanks-stars svg { width:clamp(30px,4vw,46px); height:clamp(30px,4vw,46px); }
  #rate #thanksBack { margin-top:clamp(28px,4vw,48px); }
  #rate .countdown { width:clamp(180px,26vw,300px); margin-top:30px; }
  #rate .countdown-label,#rate .rate-progress { font-size:clamp(17px,2.2vw,26px); margin-top:clamp(16px,2.5vw,30px); }
  #rate .steps-dots { gap:clamp(20px,3vw,36px); min-height:42px; margin:clamp(16px,2.5vw,30px) 0 32px; }
  #rate .steps-dots i,#rate .steps-dots i.on { width:clamp(104px,15vw,180px); }
  #rate .steps-dots i::after { top:10px; font-size:clamp(16px,2.1vw,24px); }
  #rate .rate-error { font-size:clamp(18px,2.4vw,28px); padding:14px 18px; }
}

/* Keep the selected score visible while feedback is being composed. */
#rate .rate-review { display:flex; flex:none; align-items:center; justify-content:space-between; gap:16px; width:min(560px,100%); margin:0 0 20px; padding:0 0 12px; border-bottom:1px solid var(--ui-line); }
#rate .rate-selected-score { margin:0; color:var(--ui-accent); font-size:16px; font-weight:500; line-height:1.6; }
#rate .rate-edit { flex:none; min-height:44px; padding:8px 14px; border:1px solid var(--ui-line); border-radius:999px; background:var(--ui-soft); color:var(--ui-ink); font:500 14px/1.6 Hanimation,sans-serif; }
#rate .rate-edit:hover { border-color:var(--ui-accent); }
#rate .rate-edit:active { background:rgba(115,218,231,.17); }
#menu .back-home:disabled { opacity:.55; }
@media (max-height:740px) and (max-width:760px) {
  #rate .rate-review { gap:8px; margin-bottom:10px; padding-bottom:7px; }
  #rate .rate-selected-score { font-size:13px; }
  #rate .rate-edit { padding:7px 10px; font-size:12px; }
}
@media (max-height:640px) and (max-width:520px) {
  #rate:has(.step[data-step="2"].on) .scr-head small { display:none; }
  #rate .step[data-step="2"] { padding:12px 13px; }
  #rate .rate-review { margin-bottom:6px; padding-bottom:4px; }
  #rate .step[data-step="2"] .step-actions { flex-direction:row; gap:12px; }
  /* On a short display, a failed save gives priority to the preserved score,
     error and recovery actions. Editing restores the complete feedback form. */
  #rate .step[data-step="2"]:has(.rate-error:not([hidden])) h3,
  #rate .step[data-step="2"]:has(.rate-error:not([hidden])) .step-hint,
  #rate .step[data-step="2"]:has(.rate-error:not([hidden])) .tags { display:none; }
}
@media (max-height:520px) and (min-aspect-ratio:1/1) {
  #rate .step[data-step="2"] .rate-review { grid-column:1; grid-row:1; gap:8px; margin:0; padding:0 0 4px; }
  #rate .rate-selected-score { font-size:13px; }
  #rate .rate-edit { padding:7px 11px; font-size:12px; }
  #rate .step[data-step="2"] h3 { grid-row:2; }
  #rate .step[data-step="2"] .step-hint { grid-row:3; }
  #rate .step[data-step="2"] .step-actions { grid-row:4; flex-direction:row; }
  #rate .step[data-step="2"] .tags { grid-row:1 / span 4; }
}
@media (min-width:600px) and (max-aspect-ratio:4/5) {
  #rate .rate-review { width:100%; gap:24px; margin-bottom:clamp(26px,3.6vw,44px); padding-bottom:clamp(15px,2.2vw,27px); }
  #rate .rate-selected-score { font-size:clamp(22px,2.8vw,33px); }
  #rate .rate-edit { min-height:clamp(52px,6.6vw,76px); padding:12px 23px; font-size:clamp(19px,2.4vw,29px); }
}

/* QR Modal for Website Destination */
.qr-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(3, 12, 28, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.qr-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.qr-dialog {
  position: relative;
  width: min(90vw, 420px);
  background: linear-gradient(155deg, rgba(16, 38, 70, 0.94), rgba(7, 20, 42, 0.98));
  border: 1px solid rgba(14, 178, 226, 0.35);
  border-radius: 28px;
  padding: 34px 28px 28px;
  text-align: center;
  color: #fff;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 35px rgba(14, 178, 226, 0.22);
  transform: translateY(16px) scale(0.96);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  direction: rtl;
}
.qr-modal.is-open .qr-dialog {
  transform: translateY(0) scale(1);
}
.qr-close {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.qr-close:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}
.qr-badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #0eb2e2;
  background: rgba(14, 178, 226, 0.12);
  border: 1px solid rgba(14, 178, 226, 0.3);
  padding: 4px 14px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.qr-title {
  margin: 0 0 8px;
  font-size: clamp(20px, 3.2vw, 24px);
  font-weight: 700;
  color: #ffffff;
}
.qr-desc {
  margin: 0 auto 20px;
  max-width: 300px;
  font-size: clamp(13px, 2.2vw, 15px);
  line-height: 1.6;
  color: rgba(210, 235, 255, 0.78);
}
.qr-frame {
  display: inline-flex;
  padding: 14px;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  margin-bottom: 16px;
}
.qr-img {
  display: block;
  width: clamp(170px, 28vw, 210px);
  height: clamp(170px, 28vw, 210px);
}
.qr-url {
  margin: 0;
  font-size: 14px;
  color: #0eb2e2;
  letter-spacing: 0.3px;
  direction: ltr;
}

/* Light theme for QR Modal */
body.light .qr-modal {
  background: rgba(220, 235, 248, 0.75);
}
body.light .qr-dialog {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.96), rgba(235, 246, 255, 0.98));
  border: 1px solid rgba(25, 81, 252, 0.25);
  box-shadow: 0 25px 60px rgba(18, 55, 95, 0.18), 0 0 30px rgba(55, 129, 252, 0.15);
  color: #0b2a55;
}
body.light .qr-close {
  border-color: rgba(11, 42, 85, 0.2);
  background: rgba(11, 42, 85, 0.06);
  color: #0b2a55;
}
body.light .qr-close:hover {
  background: rgba(11, 42, 85, 0.12);
}
body.light .qr-title {
  color: #0b2a55;
}
body.light .qr-desc {
  color: #2b5585;
}
body.light .qr-badge {
  color: #1951fc;
  background: rgba(25, 81, 252, 0.1);
  border-color: rgba(25, 81, 252, 0.25);
}

/* Stealth Fullscreen Button */
.fs-stealth-btn {
  position: fixed;
  bottom: 18px;
  left: 18px;
  z-index: 9999;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(10, 25, 45, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease, background 0.3s ease, transform 0.2s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.fs-stealth-btn:hover,
.fs-stealth-btn:focus-visible {
  opacity: 0.85;
  transform: scale(1.05);
}
:fullscreen .fs-stealth-btn,
:-webkit-full-screen .fs-stealth-btn,
body.is-fullscreen .fs-stealth-btn {
  opacity: 0.4;
}
:fullscreen .fs-stealth-btn:hover,
:-webkit-full-screen .fs-stealth-btn:hover,
body.is-fullscreen .fs-stealth-btn:hover {
  opacity: 0.95;
}
.fs-stealth-btn .fs-exit { display: none; }
.fs-stealth-btn .fs-enter { display: block; }
:fullscreen .fs-stealth-btn .fs-exit,
:-webkit-full-screen .fs-stealth-btn .fs-exit,
body.is-fullscreen .fs-stealth-btn .fs-exit {
  display: block;
}
:fullscreen .fs-stealth-btn .fs-enter,
:-webkit-full-screen .fs-stealth-btn .fs-enter,
body.is-fullscreen .fs-stealth-btn .fs-enter {
  display: none;
}
body.light .fs-stealth-btn {
  border-color: rgba(11, 42, 85, 0.2);
  background: rgba(255, 255, 255, 0.6);
  color: #0b2a55;
}