/* Round 14 · 中文 and Tiếng Việt, and the demo walk-through. From design/round-14/return/patterns.css (the Round 14 block),
   without the board-only classes. In the app the ring and the card are fixed to the screen. */
:root,[data-theme]{
--tour14-veil:color-mix(in srgb,var(--scrim) 62%,transparent);--tour14-ring:var(--kopi);--tour14-gap:var(--paper);
--tour14-card:var(--ink);--tour14-card-ink:var(--on-ink);--tour14-next:var(--paper);--tour14-next-ink:var(--ink);
--demo14-line:var(--maybe-soft);--demo14-line-ink:var(--ink);--demo14-leave:var(--kopi);
--demo14-qr:var(--paper-sunk);--demo14-would:var(--line-strong);
--lang14-on:var(--ink);--lang14-off:var(--ink-2);--lang14-rule:var(--kopi);--offer14:var(--paper-sunk);
}
:root{
--font-zh-display:"Noto Serif SC","Source Han Serif SC","Songti SC","SimSun",serif;
--font-zh-body:"Noto Sans SC","Source Han Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
--lh14-zh-body:1.7;--lh14-zh-head:1.3;--lh14-vi-head:1.2;
}
/* T · type. Latin first in every stack, so S$, PayNow, names, digits and dates stay in Fraunces / Source Sans 3; Chinese falls through */
:lang(zh){--font-display:"Fraunces",var(--font-zh-display);--font-body:"Source Sans 3",var(--font-zh-body);line-break:strict}
:lang(zh) :is(.lt,.t-title,.t-head,.sh-h h3,.sh h3,.lp12-h,.lp12-s h2,.lp12-pull,.wel10 h1,.bsent,.tour14 p,.nudge10 p){letter-spacing:0;line-height:var(--lh14-zh-head)}
:lang(zh) :is(.eyebrow6,.tag,.grp,.grp8,.db .m,.db .w,.nudge10 .e,.lp12-pc .nm,.pn){letter-spacing:.02em}
:lang(zh) :is(.t-body,.lp12-s p,.lp12-lede,.mail6 p,.would14,.demo14 p){line-height:var(--lh14-zh-body)}
:lang(zh) :is(em,i,.quote){font-style:normal}
:lang(zh) :is(.db .m,.db .w),:lang(vi) :is(.db .m,.db .w){white-space:nowrap;letter-spacing:0}
:lang(vi) :is(.lt,.t-title,.lp12-h,.lp12-s h2,.lp12-pull,.wel10 h1){line-height:var(--lh14-vi-head)}
:lang(vi) :is(.eyebrow6,.grp,.grp8,.tag,.nudge10 .e){line-height:1.3}
/* Vietnamese runs about a third longer: buttons wrap to two lines rather than cut a word */
:lang(vi) .btn{white-space:normal;height:auto;min-height:50px;padding-top:11px;padding-bottom:11px;line-height:1.25;text-align:center}
:lang(vi) .btn.sm{min-height:40px;padding-top:8px;padding-bottom:8px}
:lang(vi) .btn.lp12-go{min-height:56px}
/* T · the language switch: each language named in its own script; the current one underlined */
.lsw14{display:flex;align-items:center;gap:2px;margin-left:auto}
.lsw14 a{min-width:40px;height:44px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;font:600 15px var(--font-body);color:var(--lang14-off)}
.lsw14 a:hover{text-decoration:none;color:var(--lang14-on)}
.lsw14 a.on{color:var(--lang14-on);text-decoration:underline;text-decoration-color:var(--lang14-rule);text-decoration-thickness:2px;text-underline-offset:6px}
.lsw14 i{font-style:normal;color:var(--ink-3)}
.lsw14.nar{display:none}
@media (max-width:560px){.lsw14.wide{display:none}.lsw14.nar{display:flex}.lp12-top .wm{font-size:19px!important}}
.lsw14.force{display:flex}
.lp14-top{gap:6px}
.lp14-foot{display:flex;flex-direction:column;gap:6px;width:100%;padding-top:10px}
.lp14-draft{font-size:13px;line-height:1.45;color:var(--ink-3)}
/* the page offered once in the reader's language, when the browser asks for it */
.offer14{display:flex;align-items:center;gap:8px;min-height:44px;padding:4px 4px 4px 14px;border-radius:12px;background:var(--offer14);font:500 15px/1.35 var(--font-body);color:var(--ink)}
.offer14 span{flex:1;min-width:0}
.offer14 a{font-weight:600;white-space:nowrap}
.offer14 .iconbtn{width:40px;height:40px;color:var(--ink-2)}
.lp14-demo{display:inline-flex;align-items:center;gap:2px;min-height:44px;font:600 17px var(--font-body);color:var(--kopi)}
:lang(zh) .lp12-pc .amt small,:lang(vi) .lp12-pc .amt small{display:block;margin:8px 0 0;line-height:1.4}
.lsw14 a,.lp12-top .si,.lp14-demo{white-space:nowrap}
/* Profile → Language: three rows, each in its own script */
.lrow14{display:flex;align-items:center;gap:14px;padding:12px 16px;min-height:60px;border-top:1px solid var(--line);width:100%;text-align:left}
.lrow14:first-child{border-top:0}
.lrow14 .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.lrow14 .a{font:600 18px/1.3 var(--font-body);color:var(--ink)}.lrow14 .b{font-size:var(--t-cap);color:var(--ink-2)}
.lnote14{padding:12px 20px 0;font-size:var(--t-sub);line-height:1.5;color:var(--ink-2);text-wrap:pretty}
/* D · the one line that stays while in the demo */
.demo14{display:flex;align-items:center;flex-wrap:wrap;gap:0 10px;margin:0 12px 6px;padding:6px 6px 6px 14px;border-radius:14px;background:var(--demo14-line);color:var(--demo14-line-ink)}
.demo14 p{flex:1 1 180px;min-width:0;font:500 14px/1.35 var(--font-body);text-wrap:pretty}
.demo14 a{min-height:40px;display:inline-flex;align-items:center;gap:1px;font:600 14px var(--font-body);color:var(--demo14-leave);white-space:nowrap;margin-left:auto}
/* D · the thing the card is about, gently lit: a ring and a light veil, drawn over the live screen, never covering it */
.spot14{position:absolute;z-index:45;pointer-events:none;border-radius:16px;box-shadow:0 0 0 3px var(--tour14-gap),0 0 0 5px var(--tour14-ring),0 0 0 2400px var(--tour14-veil);transition:all var(--dur-sheet) var(--ease-sheet)}
/* D · the card: one sentence, Next, Skip the tour. Nothing else */
.tour14{position:absolute;left:12px;right:12px;bottom:24px;z-index:46;background:var(--tour14-card);color:var(--tour14-card-ink);border-radius:22px;padding:18px 16px 10px 18px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow-float)}
.tour14 p{font:500 21px/1.35 var(--font-display);text-wrap:pretty}
.tour14 .acts{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tour14 .skip,.tour14 .next,.tab span{white-space:nowrap}
.tour14 .skip{min-height:44px;padding:0 4px;font:600 15px var(--font-body);color:var(--tour14-card-ink)}
.tour14 .next{min-height:48px;padding:0 22px;border-radius:14px;background:var(--tour14-next);color:var(--tour14-next-ink);font:600 17px var(--font-body)}
.tour14.last .acts{flex-direction:column;align-items:stretch;gap:2px}
.tour14.last .next{width:100%}
.tour14.up{bottom:108px}
.tour14 .nib{position:absolute;bottom:-7px;right:38px;width:16px;height:16px;border-radius:3px;background:var(--tour14-card);transform:rotate(45deg)}
/* D · what the demo can't do: the line that would have gone, drawn dashed */
.would14{border:1.5px dashed var(--demo14-would);border-radius:16px;padding:12px 14px;font-size:16px;line-height:1.45;color:var(--ink-2);text-wrap:pretty}
.qrd14{width:136px;height:136px;border-radius:12px;background:repeating-linear-gradient(45deg,var(--demo14-qr) 0 8px,var(--paper-raised) 8px 16px);border:1.5px dashed var(--demo14-would);display:grid;place-items:center;padding:16px;text-align:center;font:500 12px/1.4 var(--font-mono);color:var(--ink-2)}
/* in the app: over the screen, not inside the board frame */
.spot14{position:fixed}
.tour14{position:fixed;max-width:456px;margin:0 auto;bottom:calc(24px + env(safe-area-inset-bottom))}
.tour14.up{bottom:calc(108px + env(safe-area-inset-bottom))}
.tour14 .nib{right:calc(50% - 8px)}