/* Home section "Play the kiosk" (job V3-B). Self-contained: tokens come from v3.css with fallbacks.
   The app inside the screen keeps the client app's own palette (gold, cream, loom red), not site tokens. */
.kx{
  --kx-gold:#d9a441;--kx-cream:#e9dcc4;--kx-ease:cubic-bezier(.22,.61,.36,1);
  --kx-deva:"Noto Sans Devanagari","Kohinoor Devanagari","Nirmala UI","Mangal","Lohit Devanagari",sans-serif;
  --kx-pad:var(--v3-pad-x,var(--pad-x,clamp(20px,5vw,64px)));
  padding:clamp(56px,7vw,112px) max(var(--kx-pad),env(safe-area-inset-right,0px)) clamp(64px,8vw,128px) max(var(--kx-pad),env(safe-area-inset-left,0px));
  color:var(--v3-ink,#e1e5e5);
  scroll-margin-top:calc(var(--head-h,72px) + env(safe-area-inset-top,0px) + 8px);
  /* Off screen the section is skipped: its fonts, layout and lazy images wait until it comes near (home LCP). Sizes measured at 360 to 1920. */
  content-visibility:auto;contain-intrinsic-size:auto 1050px;
}
@media (max-width:767px){.kx{contain-intrinsic-size:auto 1200px}}
.kx [lang="hi"],.kx:lang(hi){font-family:var(--kx-deva)}
.kx-in{
  max-width:var(--v3-max,var(--max,1360px));margin:0 auto;
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,1.8vw,28px);
}
.kx-head{grid-column:1/-1}
.kx-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Copy column */
.kx-copy{grid-column:1/span 4;align-self:start;padding-top:clamp(8px,1.4vw,20px)}
.kx-lede{margin:0;font:400 var(--v3-t-lede,clamp(1.0625rem,.35vw + 1rem,1.3125rem))/1.5 var(--v3-font-text,ui-sans-serif,sans-serif);color:var(--v3-ink-2,#c8c6c0);max-width:30em;text-wrap:pretty}
.kx-facts{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--v3-line,#2b2b2b)}
.kx-facts li{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--v3-line,#2b2b2b);font:500 .8125rem/1.4 var(--v3-font-mono,ui-monospace,monospace);letter-spacing:.06em;text-transform:uppercase;color:var(--v3-ink-2,rgba(225,229,229,.78))}
.kx-facts li::before{content:"";width:6px;height:6px;background:var(--v3-red,#e2422e);flex:none}
.kx-more{display:inline-flex;align-items:center;gap:.5em;min-height:48px;margin-top:16px;font:500 1rem/1.3 var(--v3-font-text,ui-sans-serif,sans-serif);color:var(--v3-ink,#e1e5e5);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:var(--v3-line-strong,#454545);transition:text-decoration-color var(--v3-dur-1,160ms)}
.kx-more:hover{text-decoration-color:var(--v3-red,#e2422e)}
.kx-more::after{content:"";width:.42em;height:.42em;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}

/* Stage and housing */
.kx-stage{grid-column:5/-1;margin:0;display:flex;flex-direction:column;min-width:0}
.kx-kiosk{position:relative;display:flex;flex-direction:column;align-items:center}
.kx-kiosk::after{content:"";position:absolute;left:50%;bottom:-10px;width:70%;height:40px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(217,164,65,.14),transparent);filter:blur(8px);z-index:-1;pointer-events:none}
.kx-bezel{position:relative;width:100%;padding:clamp(12px,1.4vw,20px);border-radius:10px;
  background:linear-gradient(160deg,#1b1b1b,#0d0d0d 42%,#121212);
  box-shadow:0 0 0 1px var(--v3-line,#2b2b2b),inset 0 1px 0 rgba(255,255,255,.06),0 40px 80px -36px #000,0 0 120px -20px rgba(217,164,65,.14)}
.kx-bezel::after{content:"";position:absolute;left:50%;bottom:clamp(4px,.5vw,7px);width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#1f1f1f;box-shadow:0 0 0 1px #2c2c2c}
.kx-stand{display:flex;flex-direction:column;align-items:center}
.kx-stand i:first-child{width:clamp(56px,7vw,92px);height:clamp(44px,5vw,72px);background:linear-gradient(90deg,#0b0b0b,#1a1a1a 45%,#0e0e0e);box-shadow:inset 0 0 0 1px #1e1e1e}
.kx-stand i:last-child{width:clamp(180px,22vw,300px);height:12px;border-radius:3px 3px 1px 1px;background:linear-gradient(#1c1c1c,#0c0c0c);box-shadow:0 0 0 1px #242424}

.kx-screen{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:2px;background:#000;container-type:inline-size;isolation:isolate}
/* Wake (DESIGN-V3 7.2): the screen waits under the v3 veil and its light comes up once it is in view. */
.kx-screen::after{content:"";position:absolute;inset:0;z-index:5;background:#000;opacity:0;pointer-events:none;transition:opacity var(--v3-dur-3,900ms) var(--v3-ease,cubic-bezier(.22,1,.36,1))}
.kx.is-asleep .kx-screen::after{opacity:var(--v3-veil,.62);transition:none}
.kx-glare{position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,0) 28%,rgba(255,255,255,0) 72%,rgba(255,255,255,.025) 100%)}

/* Station posters: the real app screenshots, crossfade 240 ms */
.kx-poster{position:absolute;inset:0;z-index:3;width:100%;height:100%;object-fit:cover;background:#000;opacity:0;visibility:hidden;transition:opacity .24s var(--kx-ease),visibility 0s .24s}
.kx-screen[data-station="films"] .kx-poster[data-for="films"],
.kx-screen[data-station="voices"] .kx-poster[data-for="voices"]{opacity:1;visibility:visible;transition:opacity .24s var(--kx-ease),visibility 0s}

/* Stations */
.kx-stations{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(24px,2.6vw,36px)}
.kx-stations button{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 16px;border:1px solid var(--v3-line-strong,#454545);border-radius:2px;background:var(--v3-surface,#111);color:var(--v3-ink-2,rgba(225,229,229,.8));font:500 .8125rem/1 var(--v3-font-mono,ui-monospace,monospace);letter-spacing:.04em;cursor:pointer;transition:color var(--v3-dur-1,160ms),border-color var(--v3-dur-1,160ms);white-space:nowrap}
.kx-stations button:hover{color:var(--v3-ink,#e1e5e5);border-color:var(--v3-ink-3,#a4a29c)}
.kx-stations button[aria-pressed="true"]{color:var(--v3-ink,#e1e5e5);border-color:var(--v3-ink,#e1e5e5)}
.kx-stations button[aria-pressed="true"]::after{content:"";position:absolute;left:-1px;right:-1px;bottom:-1px;height:3px;background:var(--v3-red,#e2422e)}
.kx-sn{color:var(--v3-red-ink,#ff8a78)}
.kx-tag{font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;padding:3px 6px;border:1px solid var(--v3-line-strong,#454545);color:var(--v3-ink-2,rgba(225,229,229,.78))}
.kx-stations button[data-station="quiz"] .kx-tag{border-color:rgba(95,211,138,.5);color:var(--online,#5fd38a)}

.kx-cap{margin-top:14px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;font:500 .8125rem/1.5 var(--v3-font-mono,ui-monospace,monospace);letter-spacing:.04em;color:var(--v3-ink-2,rgba(225,229,229,.78))}
.kx-status{display:inline-flex;align-items:center;gap:10px}
.kx-status i{width:8px;height:8px;border-radius:50%;background:var(--online,#5fd38a);box-shadow:0 0 0 3px rgba(95,211,138,.16)}
.kx-credit b{font-weight:500;margin-right:8px;padding:1px 6px;border:1px dashed var(--v3-red-ink,#ff8a78);color:var(--v3-red-ink,#ff8a78);text-transform:uppercase;font-size:.6875rem;letter-spacing:.08em}

/* ---------- The app: The Handloom Quiz (sizes follow the screen width) ---------- */
.kq{position:absolute;inset:0;z-index:1;color:var(--kx-cream);font-family:"Bodoni Moda Fallback",Georgia,serif;
  background:radial-gradient(120% 90% at 50% 40%,transparent 40%,rgba(0,0,0,.55) 100%),linear-gradient(180deg,#1e170e 0%,#17110b 55%,#110c07 100%)}
.kq button{font:inherit;color:inherit;background:none;border:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.kq button:focus-visible{outline:3px solid #f0c464;outline-offset:2px}
.kq [hidden]{display:none!important}
.kq-warp{position:absolute;inset:0;pointer-events:none;background:
  repeating-linear-gradient(90deg,rgba(214,170,90,.075) 0 1px,transparent 1px 3px),
  repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 7px),
  repeating-linear-gradient(90deg,rgba(0,0,0,.22) 0 2px,transparent 2px 11px)}

/* Language pills: 48 px hit area, smaller visual pill */
.kq-lang{position:absolute;z-index:2;left:clamp(6px,1.6cqw,22px);top:clamp(4px,1.2cqw,18px);display:flex}
.kq-lang button,.kq-home{display:flex;align-items:center;min-height:48px;min-width:48px;padding:0 3px;font-family:var(--v3-font-text,ui-sans-serif,sans-serif)}
.kq-lang button span,.kq-home span{display:block;padding:clamp(5px,.6cqw,8px) clamp(10px,1.4cqw,18px);border-radius:99px;font-size:clamp(12px,1.55cqw,16px);line-height:1.2;color:rgba(233,220,196,.78);border:1px solid rgba(217,164,65,.24);background:rgba(0,0,0,.35);transition:background .24s,color .24s}
.kq-lang button span{min-width:5.2em;text-align:center}
.kq-lang button[aria-pressed="true"] span{background:rgba(217,164,65,.2);color:var(--kx-gold);font-weight:600;border-color:rgba(217,164,65,.55)}
.kq-home{position:absolute;z-index:2;right:clamp(6px,1.6cqw,22px);top:clamp(4px,1.2cqw,18px)}
.kq-home:hover span,.kq-lang button:hover span{color:var(--kx-cream)}

/* Views, crossfade 240 ms */
.kq-view{position:absolute;z-index:1;left:0;right:0;top:0;bottom:22%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 6%;opacity:0;transition:opacity .24s var(--kx-ease)}
.kq-view.is-in{opacity:1}
.kq[data-view="question"] .kq-view,.kq[data-view="result"] .kq-view{bottom:9%}

/* Start view */
.kq-title,.kq-sub{display:flex;flex-direction:column;align-items:center;margin:0}
.kq-title .kq-en,.kq-title .kq-hi{line-height:1.12;text-shadow:0 2px 18px rgba(0,0,0,.6)}
/* Bodoni hairlines vanish at 1x on a dark screen; a hair of stroke keeps the H crossbar */
.kq-title .kq-en,.kq-qtext,.kq-big{font-variation-settings:"opsz" 11;-webkit-text-stroke:.3px currentColor}
.kq[data-lang="en"] .kq-title .kq-en,.kq[data-lang="hi"] .kq-title .kq-hi{font-size:clamp(26px,5.4cqw,58px);font-weight:500;color:#f3e8d4}
.kq[data-lang="en"] .kq-title .kq-hi{font-size:clamp(22px,4.6cqw,50px);font-weight:600;margin-top:.1em}
.kq[data-lang="hi"] .kq-title .kq-en{font-size:clamp(17px,3.2cqw,34px);font-weight:500;color:rgba(233,220,196,.82);margin-top:.2em}
.kq[data-lang="hi"] .kq-title .kq-hi,.kq[data-lang="hi"] .kq-sub .kq-hi,.kq[data-lang="hi"] .kq-go .kq-hi{order:-1}
.kq-rule{display:block;width:min(22cqw,220px);height:2px;margin:clamp(10px,2.2cqw,24px) 0 clamp(8px,1.6cqw,18px);background:repeating-linear-gradient(90deg,#b5493b 0 10px,transparent 10px 15px,#c99a46 15px 25px,transparent 25px 30px)}
.kq-sub{font-family:var(--v3-font-text,ui-sans-serif,sans-serif);font-size:clamp(13px,1.7cqw,18px);color:rgba(233,220,196,.82);line-height:1.45}
.kq-sub .kq-hi{font-size:.92em;color:rgba(233,220,196,.74)}
.kq .kq-go{position:relative;margin-top:clamp(12px,2.6cqw,30px);min-width:clamp(96px,11.5cqw,136px);min-height:clamp(54px,7.2cqw,82px);padding:0 22px;border-radius:99px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:radial-gradient(120% 120% at 40% 25%,#f0c464,var(--kx-gold) 45%,#b9862c);color:#2a1a07;font-size:clamp(14px,1.7cqw,19px);font-weight:600;line-height:1.1;
  box-shadow:inset 0 0 0 1px rgba(255,220,150,.4),0 0 24px rgba(217,164,65,.4)}
.kq-go .kq-hi{font-size:.9em}
.kq-go:hover{filter:brightness(1.07)}
/* Start breathing glow: only while the section is in view, never under reduced motion */
.kx.is-live .kq-go{animation:kq-breathe 2.4s var(--kx-ease) infinite}
@keyframes kq-breathe{50%{box-shadow:inset 0 0 0 1px rgba(255,220,150,.4),0 0 48px rgba(217,164,65,.75)}}

/* Question view */
.kq-q{justify-content:center;gap:clamp(8px,1.2cqw,14px);padding-top:clamp(48px,7cqw,72px)}
.kq-count{display:flex;gap:1.2em;justify-content:center;margin:0;font:500 clamp(11px,1.4cqw,14px)/1.3 var(--v3-font-mono,ui-monospace,monospace);letter-spacing:.14em;text-transform:uppercase;color:var(--kx-gold)}
.kq[data-lang="hi"] .kq-count{font-family:var(--kx-deva);letter-spacing:.02em;font-size:clamp(13px,1.6cqw,16px)}
.kq-score{color:rgba(233,220,196,.7)}
.kq-qbox{position:relative;width:min(100%,72cqw);transition:opacity .12s linear}
.kq-qbox:has(.kq-flag:not([hidden])){border:1px dashed rgba(233,220,196,.45);padding:clamp(18px,2cqw,24px) clamp(12px,2cqw,24px) clamp(10px,1.4cqw,16px)}
.kq-flag{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);padding:2px 8px;background:#2a1d10;border:1px dashed rgba(240,196,100,.7);color:#f0c464;font:500 clamp(10px,1.1cqw,12px)/1.3 var(--v3-font-mono,ui-monospace,monospace);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.kq-qtext{margin:0;font-size:clamp(16px,2.3cqw,26px);line-height:1.3;font-weight:500;color:#f3e8d4;outline:none}
.kq-answers{display:grid;grid-template-columns:1fr 1fr;gap:clamp(6px,.9cqw,10px);width:min(100%,76cqw);transition:opacity .12s linear}
.kq-answers button{display:flex;align-items:center;gap:10px;min-height:48px;min-width:48px;padding:6px 12px;text-align:left;border-radius:4px;border:1px solid rgba(217,164,65,.35);background:rgba(0,0,0,.32);font-family:var(--v3-font-text,ui-sans-serif,sans-serif);font-size:clamp(13px,1.6cqw,17px);line-height:1.25;color:var(--kx-cream);transition:background .24s,border-color .24s,color .24s}
.kq[data-lang="hi"] .kq-answers button,.kq[data-lang="hi"] .kq-qtext,.kq[data-lang="hi"] .kq-feedback,.kq[data-lang="hi"] .kq-next,.kq[data-lang="hi"] .kq-again,.kq[data-lang="hi"] .kq-rnote{font-family:var(--kx-deva)}
.kq-answers b{flex:none;display:grid;place-items:center;width:1.8em;height:1.8em;border-radius:50%;border:1px solid rgba(217,164,65,.5);font-weight:600;font-size:.85em;color:var(--kx-gold)}
.kq-answers button:not([aria-disabled="true"]):hover{background:rgba(217,164,65,.14);border-color:rgba(217,164,65,.7)}
.kq-answers button[aria-disabled="true"]{cursor:default}
.kq-answers button[data-state="dim"]{opacity:.78}
.kq-answers button[data-state="right"]{border-color:#7fc98f;background:rgba(53,122,85,.35)}
.kq-answers button[data-state="right"] b{background:#7fc98f;border-color:#7fc98f;color:#10210f}
.kq-answers button[data-state="wrong"]{border-color:#e07a6c;background:rgba(179,25,43,.3)}
.kq-answers button[data-state="wrong"] b{background:#e07a6c;border-color:#e07a6c;color:#2a0b07}
.kq.is-swapping .kq-qbox,.kq.is-swapping .kq-answers{opacity:0}
.kq-after{display:flex;align-items:center;justify-content:center;gap:12px 20px;flex-wrap:wrap;min-height:48px;width:min(100%,76cqw)}
.kq-feedback{margin:0;font-family:var(--v3-font-text,ui-sans-serif,sans-serif);font-size:clamp(13px,1.5cqw,16px);line-height:1.35;color:var(--kx-cream)}
.kq-feedback:empty{display:none}
.kq .kq-next,.kq .kq-again{display:inline-flex;align-items:center;justify-content:center;min-height:48px;min-width:48px;padding:0 20px;border-radius:99px;border:1px solid rgba(217,164,65,.7);background:rgba(217,164,65,.16);color:var(--kx-gold);font-family:var(--v3-font-text,ui-sans-serif,sans-serif);font-size:clamp(13px,1.5cqw,16px);font-weight:600}
.kq .kq-next:hover,.kq .kq-again:hover{background:rgba(217,164,65,.3)}

/* Result view */
.kq-r{gap:clamp(6px,1cqw,12px)}
.kq-big{margin:0;font-size:clamp(40px,8cqw,88px);line-height:1;font-weight:500;color:#f3e8d4;outline:none}
.kq-rnote{margin:0;max-width:60cqw;font-family:var(--v3-font-text,ui-sans-serif,sans-serif);font-size:clamp(13px,1.5cqw,16px);line-height:1.45;color:rgba(233,220,196,.8)}
.kq-again{margin-top:clamp(6px,1.2cqw,14px)}

/* Loom: beam, woven band, the shuttle carrying the weft. Shrinks while a question is open. */
.kq-loom{position:absolute;left:0;right:0;bottom:0;height:22%;transition:height .24s var(--kx-ease);pointer-events:none}
.kq[data-view="question"] .kq-loom,.kq[data-view="result"] .kq-loom{height:9%}
.kq-beam{position:absolute;left:0;right:0;top:0;height:6%;min-height:2px;background:linear-gradient(#3b2d1a,#1a130b);box-shadow:0 1px 0 rgba(217,164,65,.25)}
.kq-band{position:absolute;left:0;right:0;top:20%;bottom:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='30'%3E%3Cg fill='%23d9a441'%3E%3Crect x='17' y='8' width='6' height='9'/%3E%3Crect x='14' y='10.5' width='12' height='4'/%3E%3Crect x='19' y='5' width='2' height='15'/%3E%3C/g%3E%3Cg fill='%23d9a441' opacity='.85'%3E%3Crect x='-3' y='23' width='6' height='9'/%3E%3Crect x='37' y='23' width='6' height='9'/%3E%3C/g%3E%3Cpath d='M0 27h40' stroke='%23357a55' stroke-dasharray='2 3' opacity='.7'/%3E%3C/svg%3E") 0 6px/max(24px,3.2cqw) auto,
    repeating-linear-gradient(90deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,#7a1424,#5a1414 40%,#4a0f14)}
.kq-track{position:absolute;left:0;right:0;top:4%;height:16%;min-height:8px}
.kq-shuttle{position:absolute;top:0;left:0;height:100%;width:max(48px,9cqw);transform:translateX(30cqw)}
.kx.is-live .kq[data-view="start"] .kq-shuttle{animation:kq-shuttle 7s cubic-bezier(.65,0,.35,1) infinite alternate;animation-delay:-2.2s}
.kq-body{position:absolute;inset:18% 0;border-radius:50%;background:linear-gradient(180deg,#f1d18b,#c99643 55%,#8a6424);box-shadow:0 2px 6px rgba(0,0,0,.6)}
.kq-body::after{content:"";position:absolute;left:34%;right:34%;top:30%;bottom:30%;border-radius:3px;background:#b3192b}
.kq-weft{position:absolute;right:50%;top:50%;width:200cqw;height:1.5px;background:linear-gradient(90deg,rgba(179,25,43,.2),#c4283a);transform:translateY(-50%)}
.kq[data-view="question"] .kq-track,.kq[data-view="result"] .kq-track{display:none}
@keyframes kq-shuttle{from{transform:translateX(4cqw)}to{transform:translateX(86cqw)}}

/* Tablet: kiosk under the copy, housing kept */
@media (max-width:1023px){
  .kx-copy{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);column-gap:32px;align-items:start}
  .kx-copy .kx-facts{margin-top:0}
  .kx-more{grid-column:1}
  .kx-stage{grid-column:1/-1;margin-top:32px}
}

/* Phone: the screen full width, no housing, station row scrolls sideways */
@media (max-width:767px){
  .kx-copy{display:block}
  .kx-copy .kx-facts{margin-top:20px}
  .kx-stage{margin-top:24px}
  .kx-bezel{padding:0;background:none;border-radius:4px;box-shadow:0 0 0 1px var(--v3-line,#2b2b2b)}
  .kx-bezel::after,.kx-stand,.kx-kiosk::after{display:none}
  .kx-screen{aspect-ratio:4/5;border-radius:4px}
  .kx-poster{object-fit:contain;background:radial-gradient(90% 60% at 50% 50%,#1e170e,#0b0805)}
  .kq-view{padding:0 14px}
  .kq-q{justify-content:safe center;gap:8px;padding-top:52px;padding-bottom:8px;overflow-y:auto}
  .kq[data-view="question"] .kq-view,.kq[data-view="result"] .kq-view{bottom:4%}
  .kq[data-view="question"] .kq-loom,.kq[data-view="result"] .kq-loom{height:4%}
  .kq-qbox,.kq-answers,.kq-after{width:100%}
  .kq-qbox:has(.kq-flag:not([hidden])){padding:16px 10px 8px}
  .kq-answers{gap:6px}
  .kq-answers button{flex-direction:column;align-items:flex-start;gap:4px;min-height:52px;padding:6px 10px}
  .kq-answers b{width:1.6em;height:1.6em}
  .kq-after{gap:8px}
  .kq-rnote{max-width:none}
  .kx-stations{margin:16px calc(-1 * var(--kx-pad)) 0;padding:0 max(var(--kx-pad),env(safe-area-inset-right,0px)) 4px max(var(--kx-pad),env(safe-area-inset-left,0px));flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding-inline:var(--kx-pad);overscroll-behavior-x:contain;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent)}
  .kx-stations::-webkit-scrollbar{display:none}
  .kx-stations button{flex:0 0 auto;scroll-snap-align:start}
  .kx-cap{flex-direction:column;justify-content:flex-start}
}

@media (prefers-reduced-motion:reduce){
  .kx *,.kx *::before,.kx *::after,.kx-screen::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .kx.is-asleep .kx-screen::after{opacity:0}
}
html:is(.reduced-motion,.is-lite,.rb-lite-boot) .kx *{animation:none!important}
html:is(.reduced-motion,.is-lite,.rb-lite-boot) .kx.is-asleep .kx-screen::after{opacity:0}
/* Webby step 2D: the upright Bodoni (26 KB) is the kiosk's own face, off the first-paint path. It is asked for only once kiosk.js
   starts (after load, with the kiosk within 300 px of the viewport); until then the metric-matched fallback shows. */
.kx[data-kx-ready] .kq{font-family:"Bodoni Moda","Bodoni Moda Fallback",Georgia,serif}

/* Mobile-first polish: Canvas touch-action and 360px grid tuning */
.kx canvas{touch-action:pan-y!important}

@media (max-width:360px){
  .kx{--kx-pad:max(var(--v3-pad-x,16px),env(safe-area-inset-left,0px))}
  .kq-view{padding:0 8px}
  .kq-answers button{padding:6px 8px;font-size:12px}
  .kq-lang{left:clamp(4px,1.2cqw,16px);top:clamp(4px,1cqw,14px)}
  .kq-home{right:clamp(4px,1.2cqw,16px);top:clamp(4px,1cqw,14px)}
}