/* ClickNext showcase deck — layout + components, shared by /showcase (TH) and /showcase-en (EN).
   Fonts live in /showcase.css (self-hosted @font-face; the domain CSP is font-src 'self').
   The shared top bar (/nav.js, 56px) sits above the deck, so the deck is fixed below --navh. */
:root{
  --bg:#07100d; --surface:#0e1815; --surface-2:#14201c; --surface-3:#1a2723;
  --border:#23332d; --border-2:#2e433b;
  --text:#e6f0ec; --dim:#8ca79d; --faint:#617970;
  --accent:#10b981; --accent-2:#34d399; --accent-soft:rgba(16,185,129,.13);
  --warn:#fbbf24; --danger:#f87171; --info:#38bdf8;
  --display:"Chakra Petch",-apple-system,BlinkMacSystemFont,sans-serif;
  --body:"IBM Plex Sans Thai",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --pad:clamp(20px,4.2vw,68px);
  --navh:56px; --foot:46px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overscroll-behavior:none} /* a swipe means next/previous slide, never browser back or pull-to-refresh */
body{background:var(--bg);color:var(--text);font-family:var(--body);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow:hidden}
p{margin:0}
a{color:inherit}
.nb{white-space:nowrap}

/* Ambient console backdrop */
.bg-grid{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:46px 46px;opacity:.10;
  mask-image:radial-gradient(ellipse 80% 75% at 70% 30%,#000 30%,transparent 85%);
  -webkit-mask-image:radial-gradient(ellipse 80% 75% at 70% 30%,#000 30%,transparent 85%)}
.bg-glow{position:fixed;z-index:0;pointer-events:none;width:60vw;height:60vw;right:-10vw;top:-18vw;border-radius:50%;
  background:radial-gradient(circle,rgba(16,185,129,.16),transparent 62%);filter:blur(8px)}

/* Deck: fixed under the shared nav, so nav.js's body padding never pushes slides off screen */
.deck{position:fixed;left:0;right:0;top:var(--navh);bottom:0;z-index:2}
.slide{position:absolute;inset:0;display:none;flex-direction:column;overflow-x:hidden;overflow-y:auto;
  /* bottom: footer + room for the chat-widget bubble (56px at bottom:20px) */
  padding:clamp(16px,3vh,40px) var(--pad) calc(var(--foot) + 34px);
  overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--border-2) transparent}
.slide.on{display:flex;animation:rise .55s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* margin:auto = centred when it fits, top-aligned (scrollable) when it does not */
.slide-inner{width:100%;max-width:1160px;margin:auto}

/* Eyebrow / kicker */
.kick{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin:0 0 16px}
.kick .idx{color:var(--faint)}
.kick .ch{color:var(--faint);letter-spacing:.1em}
.kick .rule{flex:1;height:1px;background:linear-gradient(90deg,var(--border-2),transparent);max-width:120px}

h1{font-family:var(--display);font-weight:700;letter-spacing:-.01em;text-wrap:balance;margin:0}
h2{font-family:var(--display);font-weight:700;letter-spacing:-.01em;text-wrap:balance;
  font-size:clamp(26px,min(4.1vw,6.4vh),48px);line-height:1.08;margin:0 0 14px}
h2 .hl{color:var(--accent-2)}
.lede{color:var(--dim);font-size:clamp(15px,min(1.6vw,2.5vh),19px);max-width:70ch;text-wrap:pretty}

/* Hero */
.hero .brandline{display:flex;flex-wrap:wrap;align-items:center;gap:13px;margin:0 0 24px}
.hero .brandline .logo{width:40px;height:40px;border-radius:11px;background:var(--accent-soft);
  border:1px solid var(--border-2);display:grid;place-items:center;color:var(--accent-2)}
.hero .brandline b{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:.02em}
.badge{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--accent-2);background:var(--accent-soft);
  border:1px solid var(--border-2);border-radius:999px;padding:4px 11px}
.hero h1{font-size:clamp(40px,min(8.2vw,12.5vh),104px);line-height:.98}
.hero h1 .g{background:linear-gradient(120deg,var(--accent-2),var(--accent) 55%,#0d9488);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero .sub{color:var(--dim);font-size:clamp(16px,min(2vw,3vh),23px);margin:22px 0 0;max-width:60ch}
.hero .meta{display:flex;flex-wrap:wrap;gap:10px 26px;margin:34px 0 0;font-family:var(--mono);font-size:12.5px;color:var(--faint)}
.hero .meta b{color:var(--dim);font-weight:500}
.hero .meta .dot{color:var(--accent)}
.start{display:inline-flex;align-items:center;gap:10px;margin:34px 0 0;font-size:14px;color:var(--dim)}
.start a{font-family:var(--display);font-weight:600;color:var(--accent-2);text-decoration:none;
  border:1px solid var(--border-2);border-radius:9px;padding:6px 13px;background:var(--surface)}
.start a:hover{border-color:var(--accent)}

/* Pills / tags */
.pills{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0}
.pill{font-family:var(--mono);font-size:12px;color:var(--dim);background:var(--surface);
  border:1px solid var(--border);border-radius:999px;padding:5px 12px}
.pill.on{color:var(--accent-2);border-color:var(--border-2);background:var(--accent-soft)}
.pills.t .pill{font-family:var(--body);font-size:12.5px}

/* Cards grid */
.grid{display:grid;gap:13px;margin:26px 0 0}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:15px;padding:17px 17px 18px;
  display:flex;flex-direction:column;gap:8px;position:relative;overflow:hidden}
.card::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:transparent}
.card:hover::before{background:linear-gradient(var(--accent),var(--accent-2))}
.card .ic{width:26px;height:26px;color:var(--accent-2);flex:none}
.card .hd{display:flex;align-items:center;gap:11px}
.card h3{font-family:var(--display);font-weight:600;font-size:16.5px;line-height:1.3;margin:2px 0 0;color:var(--text)}
.card .hd h3{margin:0}
.card p{color:var(--dim);font-size:13.5px;line-height:1.55;text-wrap:pretty}
.card .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--faint);text-transform:uppercase}
.card .mode{font-family:var(--display);font-weight:700;font-size:clamp(20px,2.2vw,26px);line-height:1.1;color:var(--accent-2)}
.card.hi{border-color:var(--border-2);background:linear-gradient(180deg,var(--surface-2),var(--surface))}

/* Bullet list inside cards / columns */
.bl{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.bl li{position:relative;padding-left:14px;color:var(--dim);font-size:13.5px;line-height:1.5}
.bl li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.bl li b{color:var(--text);font-weight:600}

/* Two-column feature list (icon + text) */
.flist{display:grid;grid-template-columns:1fr 1fr;gap:16px 34px;margin:26px 0 0}
.fitem{display:flex;gap:14px;align-items:flex-start}
.fitem .ic{flex:none;width:28px;height:28px;color:var(--accent-2);margin-top:2px}
.fitem b{font-family:var(--display);font-weight:600;font-size:16px;display:block;margin-bottom:3px}
.fitem span{color:var(--dim);font-size:13.5px;line-height:1.5}

/* Stat strip */
.stats{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0}
.stat{flex:1;min-width:140px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 18px}
.stat .n{font-family:var(--display);font-weight:700;font-size:clamp(24px,3vw,34px);color:var(--accent-2);font-variant-numeric:tabular-nums}
.stat .l{color:var(--dim);font-size:12.5px;margin-top:2px}

/* Diagrams */
.diagram{margin:20px 0 0;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:12px}
.diagram svg{display:block;width:100%;height:auto}
.diagram .scroll-note{display:none}
.flowline{stroke-dasharray:5 7;animation:flow 1.1s linear infinite}
@keyframes flow{to{stroke-dashoffset:-24}}

/* Agenda */
.toc{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:26px 0 0}
.toc a,.toc .tip{display:flex;flex-direction:column;gap:5px;text-decoration:none;color:inherit;background:var(--surface);
  border:1px solid var(--border);border-radius:14px;padding:15px 16px 16px;transition:border-color .2s,background .2s}
.toc a:hover,.toc a:focus-visible{border-color:var(--accent);background:var(--surface-2);outline:none}
.toc .r{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--accent)}
.toc b{font-family:var(--display);font-weight:600;font-size:16.5px;line-height:1.3}
.toc span{color:var(--dim);font-size:13px;line-height:1.5}
.toc .tip{border-style:dashed;background:transparent}
kbd{font-family:var(--mono);font-size:11px;color:var(--text);background:var(--surface-2);border:1px solid var(--border-2);
  border-bottom-width:2px;border-radius:5px;padding:0 5px;white-space:nowrap}

/* Numbered steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin:26px 0 0;padding:0;list-style:none;counter-reset:st}
.steps.s3{grid-template-columns:repeat(3,1fr)}
.steps li{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:15px 16px 17px;counter-increment:st}
.steps li::before{content:counter(st,decimal-leading-zero);display:block;font-family:var(--mono);font-size:12px;color:var(--accent);margin-bottom:7px}
.steps li b{font-family:var(--display);font-weight:600;font-size:16px;line-height:1.3;display:block;margin-bottom:4px}
.steps li > span{color:var(--dim);font-size:13.5px;line-height:1.5;display:block;text-wrap:pretty}
.steps li:not(:last-child)::after{content:"";position:absolute;top:22px;right:-10px;width:7px;height:7px;
  border-top:1.5px solid var(--border-2);border-right:1.5px solid var(--border-2);transform:rotate(45deg)}

/* What's new */
.news{display:grid;grid-template-columns:1fr 1fr;gap:0 34px;margin:22px 0 0;padding:0;list-style:none}
.news li{display:grid;grid-template-columns:118px 1fr;gap:2px 14px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--border)}
.news .v{grid-row:span 2;align-self:start;justify-self:start;font-family:var(--mono);font-size:11px;color:var(--accent-2);
  background:var(--accent-soft);border:1px solid var(--border-2);border-radius:6px;padding:2px 7px;white-space:nowrap;margin-top:2px}
.news b{font-family:var(--display);font-weight:600;font-size:15.5px;line-height:1.35}
.news span{color:var(--dim);font-size:13px;line-height:1.5}

/* Process chain */
.chain{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:22px 0 0}
.chain span{font-family:var(--display);font-weight:600;font-size:14px;color:var(--text);background:var(--surface);
  border:1px solid var(--border-2);border-radius:999px;padding:5px 14px}
.chain i{color:var(--faint);font-style:normal;font-family:var(--mono)}

/* "How to use" line + menu paths */
.how{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:20px 0 0;font-size:13.5px;color:var(--dim);line-height:1.5}
.how .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.how b{color:var(--text);font-weight:600}
.path{font-weight:500;font-size:.95em;color:var(--text);background:var(--surface-2);border:1px solid var(--border);
  border-radius:7px;padding:1px 8px;white-space:nowrap}
.card .path,.bl .path,.steps .path{white-space:normal}

/* Comparison table */
.tblwrap{overflow-x:auto;margin:20px 0 0}
.cmp{width:100%;border-collapse:collapse;font-size:13.5px}
.cmp th,.cmp td{text-align:left;padding:9px 14px;border-bottom:1px solid var(--border);vertical-align:top;line-height:1.5}
.cmp thead th{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--faint)}
.cmp thead th.us{color:var(--accent-2)}
.cmp td:first-child{font-family:var(--display);font-weight:600;color:var(--text);width:19%}
.cmp .us{color:var(--text)}
.cmp .col-us{background:var(--accent-soft)}
.cmp .them{color:var(--dim)}
.cmp tbody tr:last-child td{border-bottom:none}

/* Closing */
.close h2{font-size:clamp(30px,min(5.2vw,8vh),62px)}
.close .tagl{display:flex;flex-wrap:wrap;gap:10px 20px;margin:24px 0 0;font-family:var(--display);
  font-weight:600;font-size:clamp(16px,2.1vw,24px)}
.close .tagl span{color:var(--accent-2)}
.close .tagl i{color:var(--faint);font-style:normal}
.golinks{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:28px 0 0}
.golinks a{display:flex;flex-direction:column;gap:4px;text-decoration:none;background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:14px 16px;transition:border-color .2s}
.golinks a:hover,.golinks a:focus-visible{border-color:var(--accent);outline:none}
.golinks .ic{width:22px;height:22px;color:var(--accent-2);margin-bottom:4px}
.golinks b{font-family:var(--display);font-weight:600;font-size:15.5px;color:var(--text)}
.golinks span{font-family:var(--mono);font-size:12px;color:var(--accent-2)}
.close .url{margin:26px 0 0;font-family:var(--mono);font-size:clamp(14px,1.8vw,18px);color:var(--text)}
.close .url .b{color:var(--accent-2)}

/* Chrome: progress, footer (language, dots, counter, arrows), hint */
.progress{position:fixed;top:var(--navh);left:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent-2));
  z-index:20;width:0;transition:width .45s cubic-bezier(.2,.7,.2,1)}
/* right padding keeps the footer clear of the chat-widget bubble (56px at right:20px) */
.foot{position:fixed;left:0;right:0;bottom:0;z-index:20;height:var(--foot);display:flex;align-items:center;gap:18px;
  padding:0 92px 0 var(--pad);pointer-events:none;
  background:linear-gradient(180deg,rgba(7,16,13,0),rgba(7,16,13,.86) 45%)}
.foot .brand{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--faint);white-space:nowrap}
.foot .brand b{color:var(--dim);font-weight:500}
.lang{display:flex;pointer-events:auto;border:1px solid var(--border-2);border-radius:8px;overflow:hidden;flex:none}
.lang a,.lang span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;padding:4px 9px;text-decoration:none;color:var(--dim);background:var(--surface)}
.lang span{color:var(--accent-2);background:var(--accent-soft)}
.lang a:hover{color:var(--accent-2)}
.dots{flex:1;display:flex;justify-content:center;gap:6px;pointer-events:auto;min-width:0}
.dots button{width:7px;height:7px;padding:0;border-radius:50%;border:1px solid var(--border-2);
  background:transparent;cursor:pointer;transition:all .2s;flex:none}
.dots button.on{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.dots button:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.counter{font-family:var(--mono);font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap}
.counter b{color:var(--accent-2);font-weight:500}
.arrows{display:flex;gap:7px;pointer-events:auto}
.arrows button{width:30px;height:30px;border-radius:8px;border:1px solid var(--border-2);background:var(--surface);
  color:var(--dim);cursor:pointer;font-size:15px;line-height:1;display:grid;place-items:center}
.arrows button:hover{color:var(--accent-2);border-color:var(--accent)}
.arrows button:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.hint{position:fixed;z-index:20;bottom:calc(var(--foot) + 6px);left:50%;transform:translateX(-50%);font-family:var(--mono);
  font-size:11px;color:var(--faint);pointer-events:none;transition:opacity .6s;letter-spacing:.05em;white-space:nowrap}

/* Thai has no letter case and reads badly with wide tracking or in the (Latin-only) mono font */
:lang(th) .kick,:lang(th) .how .k,:lang(th) .card .tag,:lang(th) .toc .tip .r,:lang(th) .hint,:lang(th) .badge,
:lang(th) .hero .meta,:lang(th) .close .url,:lang(th) .pill{font-family:var(--body);letter-spacing:.03em}
:lang(th) .kick{font-size:12.5px;font-weight:500}
:lang(th) .kick .idx,:lang(th) .close .url .b{font-family:var(--mono)}
:lang(th) .how .k{font-size:12px;font-weight:600}

@media (max-width:1100px){
  .g4,.toc,.golinks{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .steps li::after{display:none}
}
@media (max-width:820px){
  .g3{grid-template-columns:1fr 1fr}
  .flist,.news{grid-template-columns:1fr}
  .foot .brand,.dots{display:none}
  .foot{justify-content:space-between}
  .hint{display:none}
}
/* Phones: no shrink-to-fit — slides scroll vertically, swipe left/right to change slide */
@media (max-width:720px){
  :root{--pad:16px}
  .slide{padding-top:20px}
  .g2,.g3,.g4,.toc,.golinks,.steps,.steps.s3{grid-template-columns:1fr}
  .news li{grid-template-columns:1fr}
  .news .v{grid-row:auto}
  .hero .meta{gap:8px 16px}
  .arrows{display:none}
  .foot{padding-right:88px}
  /* diagrams keep a readable size and scroll sideways (showcase.js does not swipe-change slides there) */
  .diagram{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .diagram svg{min-width:660px}
  .diagram .scroll-note{display:block;font-size:11.5px;color:var(--faint);padding:2px 4px 6px}
  /* comparison: row label on its own line, then the two answers side by side */
  .cmp{font-size:12.5px}
  .cmp thead th:first-child{display:none}
  .cmp tr{display:grid;grid-template-columns:1fr 1fr}
  .cmp th,.cmp td{padding:8px 10px}
  .cmp td:first-child{grid-column:1/-1;width:auto;padding:12px 2px 4px;border-bottom:none}
}
@media (prefers-reduced-motion:reduce){
  .slide.on{animation:none}
  .flowline{animation:none}
  .progress{transition:none}
}