/* ============================================================
   ai.com: HK co-create workshop kit, shared styles
   Quiet Sky tokens (copied from current/org-brain/index.html; not linked).
   Brand cyan text uses --accent-text. ?theme=light|dark forces a theme.
   ============================================================ */
:root{
  --white:#FFFFFF;--canvas-l:#FBFBFD;--ink:#0E0E14;--gray-muted:#5B5B66;--gray-faint:#8A8A94;
  --night:#0A0D12;--night-2:#0D1117;--night-3:#12161F;
  --night-ink:#EDEEF4;--night-muted:#9DA1B2;--night-faint:#7E8095;
  --cyan:#0FA8CE;--cyan-deep:#0B86A6;--cyan-night:#5FD4F2;
  --red:#C24558;--red-night:#FF7A87;--mint:#2BD9A9;--mint-deep:#14795C;--mint-night:#8FE0C4;
  --r-pill:99px;--r-card:16px;--r-inner:14px;--r-ctrl:12px;--r-tight:8px;
  --ease:cubic-bezier(0.22,1,0.36,1);--t-fast:200ms;
  --font:"Onest","Inter",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
}
:root[data-theme="light"]{
  --bg:var(--canvas-l);--surface-1:var(--white);--surface-2:#F7F7FA;
  --text-1:var(--ink);--text-2:var(--gray-muted);--text-3:var(--gray-faint);
  --border:rgba(14,14,20,.08);--border-strong:rgba(14,14,20,.14);--fill:rgba(14,14,20,.045);
  --accent:var(--cyan);--accent-text:var(--cyan-deep);
  --accent-tint:rgba(15,168,206,.08);--accent-border:rgba(15,168,206,.30);
  --danger:var(--red);--danger-tint:rgba(194,69,88,.08);
  --ok:var(--mint);--ok-text:var(--mint-deep);--ok-tint:rgba(43,217,169,.10);--ok-border:rgba(43,217,169,.35);
  --btn-primary-bg:var(--ink);--btn-primary-fg:var(--white);
  --shadow-soft:0 1px 2px rgba(14,14,20,.04),0 12px 32px rgba(14,14,20,.07);
  --focus-ring:var(--cyan);color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:var(--night);--surface-1:var(--night-2);--surface-2:var(--night-3);
  --text-1:var(--night-ink);--text-2:var(--night-muted);--text-3:var(--night-faint);
  --border:rgba(237,238,244,.09);--border-strong:rgba(237,238,244,.18);--fill:rgba(237,238,244,.05);
  --accent:var(--cyan-night);--accent-text:var(--cyan-night);
  --accent-tint:rgba(95,212,242,.10);--accent-border:rgba(95,212,242,.30);
  --danger:var(--red-night);--danger-tint:rgba(255,122,135,.10);
  --ok:var(--mint);--ok-text:var(--mint-night);--ok-tint:rgba(43,217,169,.10);--ok-border:rgba(43,217,169,.30);
  --btn-primary-bg:var(--night-ink);--btn-primary-fg:var(--night);
  --shadow-soft:0 1px 2px rgba(0,0,0,.30),0 12px 32px rgba(0,0,0,.35);
  --focus-ring:var(--cyan-night);color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--text-1);-webkit-font-smoothing:antialiased;line-height:1.55;font-size:15px}
a{color:var(--accent-text);text-decoration:none}
a:hover{text-decoration:underline}
:is(a,button,[tabindex]):focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:4px}

/* ---------------- top bar ---------------- */
.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:14px;padding:0 20px;height:58px;
  border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px)}
.mk{display:inline-flex;align-items:center;color:var(--text-1)}
.lg{display:inline-block;flex:none;background:currentColor;-webkit-mask:var(--m) no-repeat center/contain;mask:var(--m) no-repeat center/contain;color:var(--text-1)}
.lg-ai{--m:url(logo-aicom.svg);width:68px;height:14px}
.lg-cdc{--m:url(logo-cryptocom.svg);width:85px;height:17px}
.lg-x{color:var(--text-3);font-size:12px;margin:0 -4px}
.mk:hover{text-decoration:none}
.eb{font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);white-space:nowrap}
.nav{display:flex;gap:2px;margin-left:auto;overflow-x:auto;min-width:0;scrollbar-width:none}
@media (max-width:760px){.topbar{gap:8px;padding:0 12px}.eb,.lg-x,.lg-cdc{display:none}.nav a{padding:6px 9px}}
.nav a{font-size:12.5px;font-weight:600;color:var(--text-2);padding:6px 12px;border-radius:var(--r-pill);white-space:nowrap}
.nav a:hover{color:var(--text-1);background:var(--fill);text-decoration:none}
.nav a[aria-current="page"]{color:var(--accent-text);background:var(--accent-tint)}
.tbtn{border:1px solid var(--border-strong);background:transparent;color:var(--text-2);font:600 11px var(--font);
  border-radius:var(--r-pill);padding:5px 11px;cursor:pointer;white-space:nowrap}
.tbtn:hover{color:var(--text-1)}

/* ---------------- layout + type ---------------- */
main{max-width:1000px;margin:0 auto;padding:44px 24px 96px}
.hero{padding:8px 0 28px;border-bottom:1px solid var(--border);margin-bottom:8px}
.kicker{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text);margin-bottom:10px}
h1{font-size:clamp(28px,4.4vw,40px);line-height:1.12;letter-spacing:-.03em;font-weight:800;max-width:22ch}
.lede{font-size:17px;color:var(--text-2);max-width:62ch;margin-top:14px}
.meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
section{padding:36px 0 4px}
h2{font-size:22px;letter-spacing:-.02em;font-weight:800;margin-bottom:6px;scroll-margin-top:76px}
h2 .num{color:var(--text-3);font-weight:700;margin-right:8px}
h3{font-size:16px;font-weight:700;margin:22px 0 6px;letter-spacing:-.01em;scroll-margin-top:76px}
h4{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin:16px 0 6px}
p{margin:8px 0;max-width:72ch}
.sub{color:var(--text-2);max-width:68ch}
ul,ol{margin:8px 0 8px 20px;max-width:72ch}
li{margin:4px 0}
li::marker{color:var(--text-3)}
strong{font-weight:700}
.small{font-size:13px;color:var(--text-2)}
.muted{color:var(--text-3)}
hr{border:none;border-top:1px solid var(--border);margin:28px 0}

/* ---------------- components ---------------- */
.tag{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  border-radius:var(--r-pill);padding:3px 9px;white-space:nowrap;border:1px solid var(--border-strong);color:var(--text-2)}
.tag.acc{color:var(--accent-text);background:var(--accent-tint);border-color:var(--accent-border)}
.tag.ok{color:var(--ok-text);background:var(--ok-tint);border-color:var(--ok-border)}
.tag.warn{color:var(--danger);background:var(--danger-tint);border-color:color-mix(in srgb,var(--danger) 35%,transparent)}
.card{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow-soft);padding:18px 20px}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));margin:14px 0}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr))}
.card h3{margin-top:0}
.card .n{font-size:11px;font-weight:800;color:var(--accent-text);letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px}
.card p{font-size:14px;color:var(--text-2);margin:4px 0}
.callout{border:1px solid var(--accent-border);background:var(--accent-tint);border-radius:var(--r-inner);padding:14px 16px;margin:14px 0;font-size:14px}
.callout.warn{border-color:color-mix(in srgb,var(--danger) 35%,transparent);background:var(--danger-tint)}
.callout p{margin:4px 0}
.callout strong:first-child{color:var(--accent-text)}
.callout.warn strong:first-child{color:var(--danger)}

table{width:100%;border-collapse:collapse;margin:12px 0;font-size:13.5px}
.tw{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-inner);background:var(--surface-1);margin:12px 0}
.tw table{margin:0}
th,td{text-align:left;vertical-align:top;padding:9px 12px;border-bottom:1px solid var(--border)}
tr:last-child td{border-bottom:none}
th{font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);background:var(--surface-2);white-space:nowrap}
td.t{white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:700}
tr.brk td{background:var(--fill);color:var(--text-3)}
.mode{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:var(--r-pill);white-space:nowrap}
.mode.test{color:var(--accent-text);background:var(--accent-tint)}
.mode.create{color:var(--ok-text);background:var(--ok-tint)}
.mode.both{color:var(--text-2);background:var(--fill)}

/* day strip on the overview */
.strip{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:16px 0}
.strip .s{border-radius:var(--r-ctrl);padding:12px;border:1px solid var(--border);background:var(--surface-1);font-size:12.5px}
.strip .s b{display:block;font-size:13.5px;margin:3px 0 2px}
.strip .s .t{font-size:11px;font-weight:800;color:var(--text-3);font-variant-numeric:tabular-nums}
.strip .s.test{border-top:3px solid var(--accent)}
.strip .s.create{border-top:3px solid var(--ok)}
@media (max-width:760px){.strip{grid-template-columns:repeat(2,1fr)}}

/* copy blocks */
.copy{position:relative;border:1px solid var(--border-strong);border-radius:var(--r-inner);background:var(--surface-1);margin:12px 0}
.copy .ch{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--border);background:var(--surface-2);border-radius:var(--r-inner) var(--r-inner) 0 0}
.copy .ch .lbl{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);flex:1}
.copy .ch button{border:none;background:var(--btn-primary-bg);color:var(--btn-primary-fg);font:800 10px var(--font);letter-spacing:.05em;
  text-transform:uppercase;border-radius:var(--r-pill);padding:5px 12px;cursor:pointer}
.copy .ch button.done{background:var(--ok);color:var(--ink)}
.copy .cb{padding:14px 16px;font-size:14px;white-space:pre-wrap;line-height:1.6;max-height:520px;overflow:auto}

.toc{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 0}
.toc a{font-size:12px;font-weight:600;color:var(--text-2);border:1px solid var(--border-strong);border-radius:var(--r-pill);padding:4px 11px}
.toc a:hover{color:var(--accent-text);border-color:var(--accent-border);text-decoration:none}
.cols{columns:2 300px;column-gap:28px}
.cols li{break-inside:avoid}
code{font-family:var(--mono);font-size:.88em;background:var(--fill);padding:1px 5px;border-radius:5px}
.dl{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;border:1px solid var(--accent-border);background:var(--accent-tint);
  color:var(--accent-text);border-radius:var(--r-pill);padding:6px 14px;margin:4px 6px 4px 0}
.dl:hover{text-decoration:none;filter:brightness(1.05)}
.foot{margin-top:56px;padding-top:18px;border-top:1px solid var(--border);font-size:12px;color:var(--text-3)}

/* collapsed detail: scripts and templates stay closed until needed */
details.more{border:1px solid var(--border-strong);border-radius:var(--r-inner);background:var(--surface-1);margin:10px 0}
details.more>summary{cursor:pointer;list-style:none;padding:11px 14px;font-weight:700;font-size:14px;display:flex;gap:10px;align-items:baseline}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::before{content:"▸";color:var(--text-3);display:inline-block;transition:transform var(--t-fast) var(--ease)}
details.more[open]>summary::before{transform:rotate(90deg)}
details.more>summary .hint{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--text-3);white-space:nowrap}
details.more>summary:hover{color:var(--accent-text)}
details.more>.in{padding:0 14px 14px}
details.more>.in>.copy:first-child,details.more>.in>.sheet:first-child{margin-top:0}
details.more .copy{margin:0}
.start{border:1px solid var(--accent-border);background:var(--accent-tint);border-radius:var(--r-inner);padding:14px 18px;margin:22px 0 0}
.start .n{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text);margin-bottom:4px}
.start ol{margin:4px 0 0 20px;font-size:14px}
.glance{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--text-2);margin:6px 0 4px}
.glance b{color:var(--text-1);font-weight:700}

/* ---------------- printable materials ---------------- */
.sheet{border:1.5px dashed var(--border-strong);border-radius:var(--r-inner);padding:22px;margin:16px 0;background:var(--surface-1)}
.sheet h3{margin-top:0}
.sheet .fill{border-bottom:1px solid var(--border-strong);height:30px}
.sheet .box{border:1px solid var(--border-strong);border-radius:var(--r-tight);min-height:110px;padding:8px 10px;font-size:11px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.sheet .box.tall{min-height:320px}
.sheet .row{display:grid;gap:10px;grid-template-columns:repeat(3,1fr);margin:10px 0}
.sheet .row.two{grid-template-columns:repeat(2,1fr)}
.sheet .row.four{grid-template-columns:repeat(4,1fr)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin:12px 0}
.pcard{border:1.5px solid var(--border-strong);border-radius:var(--r-ctrl);padding:14px;min-height:150px;background:var(--surface-1);display:flex;flex-direction:column;gap:6px}
.pcard .code{font-size:10px;font-weight:800;letter-spacing:.08em;color:var(--text-3)}
.pcard b{font-size:15px;line-height:1.3}
.pcard p{font-size:12.5px;color:var(--text-2);margin:0}
.pcard .tok{margin-top:auto;display:flex;gap:4px}
.pcard .tok i{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--border-strong)}
.pcard.blank b{color:var(--text-3)}
.scene{border:1.5px solid var(--border-strong);border-radius:var(--r-ctrl);padding:16px 18px;background:var(--surface-1);margin:10px 0}
.scene .code{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--text-3)}
.scene p{font-size:14px}
.scene .rate{display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;font-weight:700;color:var(--text-2);margin-top:10px}
.scene .rate span::before{content:"";display:inline-block;width:13px;height:13px;border:1.5px solid var(--border-strong);border-radius:3px;margin-right:6px;vertical-align:-2px}

@media print{
  :root{--bg:#fff;--surface-1:#fff;--surface-2:#f6f6f8;--text-1:#000;--text-2:#333;--text-3:#666;--border:#ddd;--border-strong:#999;--fill:#f2f2f2;--accent-text:#0B86A6;color-scheme:light}
  body{font-size:11.5pt;background:#fff}
  .topbar,.toc,.start,.noprint,.copy .ch button,.foot{display:none!important}
  details.more{border:none}
  details.more>summary::before{display:none}
  details.mat{break-before:page}
  details.mat>summary{display:none}
  details.mat>.in{padding:0}
  main{max-width:none;padding:0}
  .card,.tw{box-shadow:none}
  .copy .cb{max-height:none;overflow:visible}
  section{padding-top:14px}
  .pagebreak{break-before:page}
  .sheet,.pcard,.scene,tr,.card{break-inside:avoid}
  .sheet{border-style:solid}
  a{color:inherit}
}

/* group tooltips (Group A/B/C); positioned by kit.js so table overflow can't clip them */
.g{border-bottom:1px dotted currentColor;cursor:help}
.gtip{position:fixed;z-index:100;max-width:260px;padding:6px 9px;border-radius:8px;background:var(--text-1);color:var(--bg);font-size:12px;font-weight:500;line-height:1.35;pointer-events:none;opacity:0;transition:opacity .12s}
.gtip.on{opacity:1}
@media print{.g{border-bottom:none}.gtip{display:none}}

/* run of show: a session's plan and script live inside its schedule row */
table.ros td:nth-child(2){min-width:190px}
table.ros .where{font-size:12px;color:var(--text-3);margin-top:4px}
table.ros td.what>*:first-child{margin-top:0}
table.ros td.what>*:last-child{margin-bottom:0}
table.ros td.what ul{margin:0 0 6px 18px}
table.ros tr[id]{scroll-margin-top:72px}