/* ─────────────────────────────────────────────────────────────
   Hyveminds — product UI mocks

   The per-page <style> blocks from product/*.html, merged. Lifted by
   tools/extract-product-mocks.php and maintained here.

   Two changes from the source, both deliberate:

   - Every `:root{--p:…}` override is gone. A product's accent is a
     `color` field in the copy schema, written onto <body> as an
     inline custom property (CLAUDE.md §5.5.4), so no product hex is
     hardcoded in CSS any more.
   - Every hotlinked Unsplash background is a neutral tone. The
     prototype pulled ~90 photos straight from unsplash.com
     (§2.3 defect 5); the media import replaces these with real,
     licensed art.
   ───────────────────────────────────────────────────────────── */

/* A frame that fills its tour panel edge to edge. Was an inline
   style="margin:0;border-radius:0;border:none" on every panel. */
.frame-flush { margin: 0; border-radius: 0; border: none; }

/* ─── simchoices ─── */

/* simChoices, ember */


/* simChoices-specific atoms */
.sc-node{position:absolute;background:#fff;border:1px solid var(--rule);border-radius:12px;padding:14px 16px;font-size:12.5px;line-height:1.4;color:var(--ink-2);box-shadow:0 1px 0 var(--rule),0 12px 30px -18px #1B1B1F20;width:200px}
.sc-node .lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:0.12em;color:var(--ink-3);text-transform:uppercase;margin-bottom:6px;display:block}
.sc-node.start{border-color:var(--p);background:var(--p-dim)}
.sc-node.start .lbl{color:var(--p)}
.sc-node.end{background:var(--paper-2)}
.sc-node.end .lbl{color:var(--ink-3)}
.sc-edge{position:absolute;height:1px;background:var(--ink-3);opacity:.4;transform-origin:0 0}
.sc-edge.active{background:var(--p);opacity:1;height:2px}
.sc-edge .lbl{position:absolute;top:-22px;left:50%;transform:translateX(-50%);background:var(--paper);padding:2px 8px;border-radius:4px;font-family:var(--mono);font-size:10px;color:var(--ink-3);border:1px solid var(--rule);white-space:nowrap}

/* Mock 1, sim runtime */
.sim-stage{padding:32px;display:grid;grid-template-columns:1fr 280px;gap:24px;min-height:520px}
.sim-runtime{background:#fff;border:1px solid var(--rule);border-radius:14px;padding:0;display:flex;flex-direction:column;position:relative;overflow:hidden}
.sim-scene-img{height:200px;width:100%;object-fit:cover;flex-shrink:0;filter:saturate(0.9)}
.sim-runtime-body{padding:28px 32px 32px;display:flex;flex-direction:column;gap:22px;flex:1}
.sim-progress{display:flex;gap:4px;margin-bottom:8px}
.sim-progress span{flex:1;height:3px;background:var(--paper-3);border-radius:2px}
.sim-progress span.done{background:var(--p)}
.sim-progress span.now{background:var(--p);opacity:.5}
.sim-scene{font-family:var(--serif);font-size:24px;line-height:1.35;color:var(--ink);text-wrap:pretty;letter-spacing:-0.005em}
.sim-scene em{color:var(--p);font-style:italic}
.sim-speaker{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.sim-avatar{width:32px;height:32px;border-radius:50%;background:var(--p);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:15px}
.sim-speaker .who{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;color:var(--ink-3);text-transform:uppercase}
.sim-choices{display:flex;flex-direction:column;gap:10px;margin-top:auto}
.sim-choice{padding:16px 18px;border:1px solid var(--rule);border-radius:12px;font-size:14px;color:var(--ink-2);text-align:left;line-height:1.5;display:flex;gap:12px;align-items:flex-start;background:var(--paper);cursor:pointer;transition:all .15s}
.sim-choice:hover{border-color:var(--p);background:#fff}
.sim-choice.selected{border-color:var(--p);background:var(--p-dim);color:var(--ink)}
.sim-choice .key{font-family:var(--mono);font-size:11px;color:var(--p);font-weight:500;flex-shrink:0;width:14px}
.sim-side{display:flex;flex-direction:column;gap:14px}
.sim-side-card{background:#fff;border:1px solid var(--rule);border-radius:12px;padding:16px}
.sim-side-card h6{font-family:var(--mono);font-size:10.5px;letter-spacing:0.12em;color:var(--ink-3);text-transform:uppercase;margin-bottom:10px;font-weight:500}
.sim-side-card .item{display:flex;justify-content:space-between;font-size:12.5px;padding:5px 0;color:var(--ink-2)}
.sim-side-card .item:not(:last-child){border-bottom:1px solid var(--rule)}
.sim-side-card .item strong{font-family:var(--mono);font-weight:500;color:var(--p)}

/* Mock 2, author canvas */
.author-stage{padding:24px;min-height:520px}
.author-frame{position:relative;background:#fff;border:1px solid var(--rule);border-radius:14px;height:520px;overflow:hidden;background-image:
  linear-gradient(#1B1B1F1A 1px,transparent 1px),
  linear-gradient(90deg,#1B1B1F1A 1px,transparent 1px);
  background-size:24px 24px;background-position:-1px -1px}
.author-toolbar{position:absolute;top:14px;left:14px;display:flex;gap:6px;background:#fff;border:1px solid var(--rule);border-radius:10px;padding:6px;z-index:5}
.author-toolbar button{padding:6px 10px;font-size:12px;color:var(--ink-2);border-radius:6px}
.author-toolbar button.active{background:var(--p-dim);color:var(--p)}
.author-mini{position:absolute;bottom:14px;right:14px;background:#fff;border:1px solid var(--rule);border-radius:10px;padding:10px;width:180px;z-index:5}
.author-mini .ttl{font-family:var(--mono);font-size:10px;letter-spacing:0.1em;color:var(--ink-3);text-transform:uppercase;margin-bottom:6px}
.author-mini-canvas{height:84px;background:var(--paper-2);border-radius:6px;position:relative;overflow:hidden}
.author-mini-canvas .dot{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--p)}

/* Mock 3, analytics dashboard */
.ana-stage{padding:24px;display:grid;grid-template-columns:1fr 1fr;gap:14px;min-height:520px}
.ana-card{background:#fff;border:1px solid var(--rule);border-radius:14px;padding:24px;display:flex;flex-direction:column}
.ana-card .h{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}
.ana-card h6{font-family:var(--serif);font-size:18px;line-height:1.2;letter-spacing:-0.005em}
.ana-card .sub{font-family:var(--mono);font-size:10.5px;letter-spacing:0.1em;color:var(--ink-3);text-transform:uppercase;margin-top:3px}
.ana-card.span{grid-column:1/-1}
.ana-bar-row{display:flex;align-items:center;gap:12px;padding:6px 0;font-size:12.5px}
.ana-bar-row .label{width:35%;color:var(--ink-2)}
.ana-bar-row .bar{flex:1;height:8px;background:var(--paper-2);border-radius:4px;overflow:hidden}
.ana-bar-row .bar i{display:block;height:100%;background:var(--p);border-radius:4px}
.ana-bar-row .pct{font-family:var(--mono);font-size:11px;color:var(--ink-3);width:40px;text-align:right}

.nlp-row{display:flex;justify-content:space-between;padding:8px 0;border-top:1px solid var(--rule);font-size:13px}
.nlp-row:first-of-type{border-top:none}
.nlp-row .txt{color:var(--ink-2);max-width:60%}
.nlp-row .score{font-family:var(--mono);font-size:11px;padding:3px 8px;border-radius:4px;background:var(--paper-2);color:var(--ink-3)}
.nlp-row .score.hi{background:var(--p-dim);color:var(--p)}

/* ─── quanti ─── */

/* Quanti, indigo */


/* IDE-like mock */
.q-stage{padding:0;min-height:560px;background:#13182B;color:#D8E0F5;font-family:var(--mono);font-size:12.5px;line-height:1.6}
.q-stage .frame-bar{background:#0D1224;border-bottom:1px solid #1F2742;color:#9AA6CC}
.q-stage .frame-bar .frame-url{background:#1A2244;border-color:#1F2742;color:#9AA6CC}
.q-stage .frame-dots span{background:#2A325A}
.q-ide{display:grid;grid-template-columns:200px 1fr 320px;min-height:520px}
.q-side{background:#0F1428;border-right:1px solid #1F2742;padding:16px 0}
.q-side h7{display:block;padding:8px 16px;font-size:10px;letter-spacing:0.12em;color:#6E7AAD;text-transform:uppercase;font-weight:500}
.q-side .item{padding:6px 16px;color:#9AA6CC;cursor:pointer}
.q-side .item.active{background:#1A2244;color:#fff;border-left:2px solid var(--p)}
.q-side .item .var{color:#7FB6FF}
.q-main{display:flex;flex-direction:column}
.q-tabs{display:flex;border-bottom:1px solid #1F2742;background:#0F1428}
.q-tabs .tab{padding:10px 18px;font-size:11.5px;color:#9AA6CC;border-right:1px solid #1F2742;cursor:pointer}
.q-tabs .tab.active{background:#13182B;color:#fff;border-bottom:1px solid #13182B;margin-bottom:-1px}
.q-formulabar{padding:10px 18px;border-bottom:1px solid #1F2742;background:#0F1428;display:flex;align-items:center;gap:10px}
.q-formulabar .lbl{color:#6E7AAD;font-size:11px}
.q-formulabar .formula{color:#fff;font-size:13.5px}
.q-formulabar .formula .v{color:#FFB86B}
.q-formulabar .formula .op{color:#7FB6FF}
.q-formulabar .formula .fn{color:#9DDB9D}
.q-output{padding:24px;overflow:auto;flex:1}
.q-output h7{display:block;font-size:11px;color:#9AA6CC;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:10px}
.q-output pre{font-family:var(--mono);font-size:12px;color:#D8E0F5;line-height:1.55;white-space:pre;margin-bottom:18px}
.q-output .hl{color:var(--p);background:#1A73E833;padding:0 3px;border-radius:2px}
.q-output .star{color:#FFB86B}
.q-output .ok{color:#9DDB9D}
.q-output table{width:100%;font-size:12px;color:#D8E0F5;margin-bottom:18px;border-collapse:collapse}
.q-output th{text-align:left;border-bottom:1px solid #1F2742;padding:6px 8px;color:#9AA6CC;font-weight:500;font-size:11px}
.q-output td{padding:6px 8px;border-bottom:1px solid #1F2742}
.q-right{background:#0F1428;border-left:1px solid #1F2742;padding:16px;display:flex;flex-direction:column;gap:18px;font-size:11.5px}
.q-right h7{display:block;font-size:10px;color:#6E7AAD;letter-spacing:0.12em;text-transform:uppercase;margin-bottom:6px;font-weight:500}
.q-right .pill{display:inline-flex;padding:2px 8px;border-radius:3px;background:#1A2244;color:#9AA6CC;font-size:10px}
.q-right .pill.ok{background:#9DDB9D33;color:#9DDB9D}
.q-right .pill.warn{background:#FFB86B33;color:#FFB86B}

/* charts */
.q-chart{background:#0D1224;border:1px solid #1F2742;border-radius:6px;padding:16px;margin-bottom:14px}
.q-chart h7{margin-bottom:10px}
.q-chart svg{width:100%;height:auto}

/* methods card layout (panel 2) */
.meth-stage{padding:32px;display:grid;grid-template-columns:1fr 360px;gap:24px;min-height:520px;background:#FFFFFF}
.meth-card{background:#fff;border:1px solid var(--rule);border-radius:14px;padding:32px;color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.6}
.meth-card h6{font-family:var(--serif);font-size:26px;line-height:1.2;letter-spacing:-0.01em;margin-bottom:6px;color:var(--ink)}
.meth-card .sub{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;color:var(--ink-3);text-transform:uppercase;margin-bottom:18px}
.meth-card p{color:var(--ink-2);margin-bottom:14px}
.meth-card .formula{font-family:var(--mono);font-size:13px;background:var(--paper-2);border:1px solid var(--rule);border-radius:6px;padding:12px;margin-bottom:14px;color:var(--ink-2)}
.meth-card ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:10px}
.meth-card ul li{display:flex;gap:10px;font-size:13.5px;color:var(--ink-2);padding-left:0}
.meth-card ul li::before{content:"§";color:var(--p);flex-shrink:0;font-family:var(--serif);font-style:italic}
.meth-side{display:flex;flex-direction:column;gap:14px;font-family:var(--sans)}
.meth-side-card{background:#fff;border:1px solid var(--rule);border-radius:12px;padding:18px}
.meth-side-card h7{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:0.12em;color:var(--ink-3);text-transform:uppercase;margin-bottom:12px;font-weight:500}
.meth-cite{font-size:12.5px;color:var(--ink-2);line-height:1.55;padding:10px 0;border-top:1px solid var(--rule);font-family:var(--sans)}
.meth-cite:first-of-type{border-top:none;padding-top:0}
.meth-cite .au{color:var(--p);font-family:var(--serif);font-style:italic}

/* dataset preview (panel 3) */
.data-stage{padding:32px;background:#FFFFFF;min-height:520px}
.data-card{background:#fff;border:1px solid var(--rule);border-radius:14px;overflow:hidden;color:var(--ink);font-family:var(--sans)}
.data-bar{padding:14px 20px;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;align-items:center;font-size:13px}
.data-bar .name{font-family:var(--serif);font-size:18px;color:var(--ink)}
.data-bar .meta{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:0.08em}
.data-grid{overflow:auto}
.data-grid table{width:100%;border-collapse:collapse;font-size:12.5px}
.data-grid th{text-align:left;padding:10px 14px;color:var(--ink-3);background:var(--paper-2);border-bottom:1px solid var(--rule);font-weight:500;font-family:var(--mono);font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;position:sticky;top:0}
.data-grid td{padding:8px 14px;border-bottom:1px solid var(--rule);color:var(--ink-2);font-family:var(--mono);font-size:12px}
.data-grid td.cat{color:var(--p);font-family:var(--sans)}
.data-grid td.miss{color:var(--ink-4);font-style:italic}
.data-grid tr:hover td{background:var(--paper-2)}
.data-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:20px;background:var(--paper-2);border-top:1px solid var(--rule)}
.data-summary .stat{display:flex;flex-direction:column;gap:4px}
.data-summary .stat .num{font-family:var(--serif);font-size:28px;color:var(--p);line-height:1}
.data-summary .stat .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:0.1em;color:var(--ink-3);text-transform:uppercase}

/* ─── quali ─── */

/* Quali, plum */


/* transcript view */
.ql-stage{padding:24px;display:grid;grid-template-columns:1fr 320px;gap:16px;min-height:560px;background:#FAF7FE}
.ql-transcript{background:#fff;border:1px solid var(--rule);border-radius:14px;padding:28px 32px;display:flex;flex-direction:column;gap:18px;overflow:auto}
.ql-transcript .meta{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:0.08em;text-transform:uppercase;padding-bottom:14px;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between}
.ql-turn{display:grid;grid-template-columns:90px 1fr;gap:18px;align-items:start}
.ql-turn .speaker{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.ql-turn .who{font-family:var(--mono);font-size:11px;letter-spacing:0.06em;color:var(--ink-2);font-weight:500}
.ql-turn .time{font-family:var(--mono);font-size:10.5px;color:var(--ink-4)}
.ql-turn .sent{display:inline-flex;width:10px;height:10px;border-radius:50%}
.ql-turn .sent.pos{background:#188038}
.ql-turn .sent.neg{background:#D93025}
.ql-turn .sent.neu{background:#9AA0A6}
.ql-turn .sent.mix{background:linear-gradient(90deg,#188038 50%,#D93025 50%)}
.ql-turn p{font-size:14.5px;line-height:1.65;color:var(--ink);text-wrap:pretty}
.ql-coded{background:var(--p-dim);border-bottom:2px solid var(--p);padding:0 2px;cursor:pointer;position:relative}
.ql-coded[data-code="cost"]{background:#E3740040;border-color:#A65A1F}
.ql-coded[data-code="trust"]{background:#18803840;border-color:#3F7A55}
.ql-coded[data-code="time"]{background:#8430CE30;border-color:#8430CE}
.ql-coded[data-code="agency"]{background:#3B5BC430;border-color:#3B5BC4}
.ql-coded[data-code="stigma"]{background:#D9302540;border-color:#B3261E}
.ql-coded::after{content:attr(data-code);position:absolute;top:-18px;left:0;font-family:var(--mono);font-size:9.5px;letter-spacing:0.08em;color:var(--ink-3);text-transform:uppercase;background:#fff;padding:0 4px;border-radius:3px;border:1px solid var(--rule);opacity:0;transition:opacity .12s}
.ql-coded:hover::after{opacity:1}

.ql-side{display:flex;flex-direction:column;gap:14px}
.ql-side-card{background:#fff;border:1px solid var(--rule);border-radius:12px;padding:16px}
.ql-side-card h6{font-family:var(--mono);font-size:10.5px;letter-spacing:0.12em;color:var(--ink-3);text-transform:uppercase;margin-bottom:12px;font-weight:500;display:flex;justify-content:space-between}
.ql-codebook .row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:7px 0;font-size:13px;color:var(--ink-2);border-top:1px solid var(--rule)}
.ql-codebook .row:first-of-type{border-top:none}
.ql-codebook .swatch{width:10px;height:10px;border-radius:2px}
.ql-codebook .count{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.ql-codebook .name{font-family:var(--serif);font-style:italic;font-size:14.5px;color:var(--ink)}

.ql-themes{display:flex;flex-direction:column;gap:10px}
.ql-themes .row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-top:1px solid var(--rule);font-size:12.5px}
.ql-themes .row:first-of-type{border-top:none}
.ql-themes .name{font-family:var(--serif);font-size:14px;color:var(--ink);font-style:italic}
.ql-themes .bar{flex:1;margin:0 10px;height:6px;background:var(--paper-2);border-radius:3px;overflow:hidden}
.ql-themes .bar i{display:block;height:100%;background:var(--p)}
.ql-themes .pct{font-family:var(--mono);font-size:11px;color:var(--ink-3)}

.ql-sent-summary{display:flex;height:14px;border-radius:7px;overflow:hidden;margin-top:8px}
.ql-sent-summary .pos{flex:46;background:#188038}
.ql-sent-summary .neu{flex:31;background:#9AA0A6}
.ql-sent-summary .neg{flex:23;background:#D93025}
.ql-sent-legend{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--ink-3);margin-top:6px;letter-spacing:0.08em}

/* matrix view (panel 2) */
.mx-stage{padding:32px;background:#FAF7FE;min-height:520px}
.mx-card{background:#fff;border:1px solid var(--rule);border-radius:14px;overflow:hidden}
.mx-bar{padding:16px 20px;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;align-items:center}
.mx-bar .ttl{font-family:var(--serif);font-size:18px}
.mx-bar .meta{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:0.08em}
.mx-grid{padding:24px;overflow:auto}
.mx-grid table{border-collapse:collapse;font-size:12px;width:100%}
.mx-grid th{padding:10px 8px;color:var(--ink-3);font-family:var(--mono);font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;font-weight:500;text-align:center;border-bottom:1px solid var(--rule)}
.mx-grid th.row{text-align:left;padding-left:0;color:var(--ink-2)}
.mx-grid td{padding:6px 4px;text-align:center;font-family:var(--mono);font-size:11px}
.mx-grid td.row{text-align:left;padding-left:0;font-family:var(--serif);font-size:14px;font-style:italic;color:var(--ink);width:160px}
.mx-cell{display:inline-flex;width:34px;height:24px;align-items:center;justify-content:center;border-radius:3px;color:#fff}
.mx-cell[data-c="0"]{background:#F3F4F6;color:var(--ink-4)}
.mx-cell[data-c="1"]{background:#8430CE20;color:var(--p)}
.mx-cell[data-c="2"]{background:#8430CE55;color:var(--p)}
.mx-cell[data-c="3"]{background:#8430CE;color:#fff}
.mx-cell[data-c="4"]{background:#5C1F66;color:#fff}

/* triangulation view (panel 3) */
.tri-stage{padding:32px;background:#FAF7FE;min-height:520px;display:grid;grid-template-columns:1.4fr 1fr;gap:16px}
.tri-card{background:#fff;border:1px solid var(--rule);border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:14px}
.tri-card h6{font-family:var(--serif);font-size:20px;letter-spacing:-0.005em;line-height:1.2}
.tri-card .sub{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);letter-spacing:0.1em;text-transform:uppercase}
.tri-quote{padding:14px 0;border-top:1px solid var(--rule);font-size:14px;color:var(--ink-2);line-height:1.55;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
.tri-quote:first-of-type{border-top:none;padding-top:0}
.tri-quote .pid{font-family:var(--mono);font-size:11px;color:var(--p);padding-top:2px}
.tri-quote em{font-family:var(--serif);font-style:italic;color:var(--p)}
.ag-bar{height:10px;background:var(--paper-2);border-radius:5px;overflow:hidden;margin:8px 0}
.ag-bar i{display:block;height:100%;background:var(--p)}

/* ─── lexis ─── */

/* Reader */
.lx-stage{padding:32px;background:#FFF9F0;display:grid;grid-template-columns:240px 1fr 280px;gap:18px;min-height:560px}
.lx-shelf{background:#fff;border:1px solid var(--rule);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:14px}
.lx-shelf h6{font-family:var(--mono);font-size:10.5px;letter-spacing:0.12em;color:var(--ink-3);text-transform:uppercase;font-weight:500}
.lx-book{display:grid;grid-template-columns:36px 1fr;gap:10px;padding:8px 0;border-top:1px solid var(--rule);align-items:center;font-size:13px}
.lx-book:first-of-type{border-top:none;padding-top:0}
.lx-book.active{padding:8px;background:var(--p-dim);border-radius:6px;border:none;margin:0 -8px}
.lx-book .cov{width:36px;height:50px;border-radius:2px;position:relative;overflow:hidden;background-size:cover;background-position:center;background-image: linear-gradient(135deg, var(--paper-3), var(--paper-2))}
.lx-book .cov::after{content:"";position:absolute;left:3px;top:0;bottom:0;width:1px;background:rgba(255,255,255,.3)}

.lx-book .cov.green{background:linear-gradient(135deg,#2E6B4B,#1F4A33)}
.lx-book .cov.blue{background-image: linear-gradient(135deg, var(--paper-3), var(--paper-2))}
.lx-book .cov.plum{background-image: linear-gradient(135deg, var(--paper-3), var(--paper-2))}
.lx-book .cov.ink{background-image: linear-gradient(135deg, var(--paper-3), var(--paper-2))}
.lx-book .cov.red{background-image: linear-gradient(135deg, var(--paper-3), var(--paper-2))}
.lx-book .ttl{font-family:var(--serif);font-size:14px;line-height:1.25;color:var(--ink);letter-spacing:-0.005em}
.lx-book .au{font-size:11px;color:var(--ink-3);font-family:var(--mono);letter-spacing:0.04em;margin-top:2px}

.lx-page{background:#FFFCF2;border:1px solid var(--rule);border-radius:14px;padding:48px 56px;display:flex;flex-direction:column;gap:20px;font-family:'Newsreader',Georgia,serif;color:#2A241B;line-height:1.7;font-size:16px;position:relative;overflow:hidden}
.lx-page .chap-num{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;color:var(--p);text-transform:uppercase}
.lx-page h2{font-family:var(--serif);font-size:36px;letter-spacing:-0.01em;line-height:1.1;color:var(--ink);text-wrap:balance}
.lx-page .first{text-indent:0;font-size:17px}
.lx-page p{text-indent:1.6em;margin:0}
.lx-page p:first-of-type{text-indent:0}
.lx-page p:first-of-type::first-letter{font-family:var(--serif);font-size:54px;line-height:0.9;color:var(--p);float:left;padding:6px 8px 0 0;font-weight:400}
.lx-page .reading{background:linear-gradient(180deg,transparent 60%,#E3740030 60%);padding:0 2px}
.lx-page .word{background:#E3740070;padding:0 2px;border-radius:2px;color:#5C4006}
.lx-page footer{margin-top:auto;display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);letter-spacing:0.08em;text-transform:uppercase;padding-top:18px;border-top:1px solid var(--rule)}

.lx-side{display:flex;flex-direction:column;gap:14px}
.lx-pill{background:#fff;border:1px solid var(--rule);border-radius:12px;padding:14px}
.lx-pill h6{font-family:var(--mono);font-size:10.5px;letter-spacing:0.12em;color:var(--ink-3);text-transform:uppercase;margin-bottom:10px;font-weight:500;display:flex;justify-content:space-between}

.lx-player{background:linear-gradient(135deg,var(--p),#8B6508);color:#fff;padding:18px;border-radius:14px;display:flex;flex-direction:column;gap:14px}
.lx-player .now{font-family:var(--mono);font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;opacity:.7}
.lx-player .ttl{font-family:var(--serif);font-size:18px;letter-spacing:-0.005em;line-height:1.2}
.lx-player .pg{font-size:11.5px;opacity:.85}
.lx-progress{height:3px;background:rgba(255,255,255,.2);border-radius:2px;overflow:hidden}
.lx-progress i{display:block;height:100%;background:#fff;width:42%}
.lx-controls{display:flex;align-items:center;justify-content:space-between}
.lx-controls button{color:#fff;font-size:11px;opacity:.7;letter-spacing:0.06em;font-family:var(--mono)}
.lx-controls .play{width:42px;height:42px;border-radius:50%;background:#fff;color:var(--p);display:flex;align-items:center;justify-content:center;font-size:14px;opacity:1}
.lx-speed{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;opacity:.85}

.lx-anno{display:flex;flex-direction:column;gap:10px;font-size:13px}
.lx-anno-item{padding:8px 0;border-top:1px solid var(--rule);color:var(--ink-2);line-height:1.5;display:grid;grid-template-columns:auto 1fr;gap:10px}
.lx-anno-item:first-of-type{border-top:none;padding-top:0}
.lx-anno-item .pg{font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}
.lx-anno-item em{font-family:var(--serif);color:var(--p);font-style:italic}

/* Catalogue (panel 2) */
.cat-stage{padding:32px;background:#FFF9F0;min-height:520px;display:flex;flex-direction:column;gap:18px}
.cat-search{background:#fff;border:1px solid var(--rule);border-radius:12px;padding:14px 18px;display:flex;align-items:center;gap:12px;font-size:14px}
.cat-search .q{flex:1;color:var(--ink);font-family:var(--serif);font-style:italic;font-size:18px}
.cat-search .pill{font-family:var(--mono);font-size:10.5px;letter-spacing:0.1em;color:var(--p);background:var(--p-dim);padding:4px 10px;border-radius:99px}
.cat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.cat-card{background:#fff;border:1px solid var(--rule);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:10px}
.cat-card .cov{height:148px;border-radius:4px;display:flex;flex-direction:column;justify-content:flex-end;padding:14px 12px;color:#fff;font-family:var(--serif);position:relative;overflow:hidden;background-size:cover;background-position:center}
.cat-card .cov::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 40%,rgba(0,0,0,.72))}
.cat-card .cov > *{position:relative;z-index:1}
.cat-card .cov .t{font-size:14px;line-height:1.15;letter-spacing:-0.005em;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.cat-card .cov .a{font-size:10px;font-family:var(--mono);text-transform:uppercase;letter-spacing:0.08em;opacity:.85;margin-top:6px}
.cat-card .ttl{font-family:var(--serif);font-size:14px;line-height:1.25;letter-spacing:-0.005em}
.cat-card .au{font-size:11px;color:var(--ink-3);font-family:var(--mono);letter-spacing:0.04em}
.cat-card .badges{display:flex;gap:4px;flex-wrap:wrap;margin-top:auto}
.cat-card .badge{font-family:var(--mono);font-size:9.5px;color:var(--ink-3);background:var(--paper-2);padding:2px 6px;border-radius:99px;letter-spacing:0.04em}
.cat-card .badge.pd{background:var(--p-dim);color:var(--p)}
.cat-card .badge.aud{background:#18803820;color:#3F7A55}

/* Settings (panel 3) */
.set-stage{padding:32px;background:#FFF9F0;min-height:520px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.set-card{background:#fff;border:1px solid var(--rule);border-radius:14px;padding:24px}
.set-card h6{font-family:var(--serif);font-size:20px;letter-spacing:-0.005em;line-height:1.2;margin-bottom:18px}
.set-row{display:grid;grid-template-columns:1fr auto;gap:14px;padding:14px 0;border-top:1px solid var(--rule);align-items:center}
.set-row:first-of-type{border-top:none;padding-top:0}
.set-row .lbl{font-size:13.5px;color:var(--ink-2)}
.set-row .lbl .sub{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px;font-family:var(--mono);letter-spacing:0.04em}
.set-row .ctrl{font-family:var(--mono);font-size:12px}
.set-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:99px;background:var(--p-dim);color:var(--p);font-family:var(--mono);font-size:11px;letter-spacing:0.06em}
.set-toggle{width:36px;height:20px;border-radius:99px;background:var(--p);position:relative;display:inline-block}
.set-toggle::after{content:"";position:absolute;width:14px;height:14px;background:#fff;border-radius:50%;top:3px;right:3px}
.set-toggle.off{background:var(--paper-3)}
.set-toggle.off::after{right:auto;left:3px}
.set-segment{display:inline-flex;border:1px solid var(--rule);border-radius:6px;overflow:hidden}
.set-segment span{padding:5px 10px;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.set-segment span.on{background:var(--p);color:#fff}
.set-slider{width:120px;height:4px;background:var(--paper-2);border-radius:2px;position:relative}
.set-slider i{position:absolute;height:100%;background:var(--p);border-radius:2px}
.set-slider .knob{position:absolute;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--p);top:50%;transform:translate(-50%,-50%)}

.voice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.voice-card{padding:12px;border:1px solid var(--rule);border-radius:8px;display:flex;flex-direction:column;gap:4px;cursor:pointer}
.voice-card.on{border-color:var(--p);background:var(--p-dim)}
.voice-card .name{font-family:var(--serif);font-size:14px;color:var(--ink)}
.voice-card .meta{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);letter-spacing:0.06em}

/* ─── huddlegoals ─── */

/* meeting room mock */
.hg-stage{padding:0;background:#0E1612;min-height:560px;color:#D8E5DC}
.hg-stage .frame-bar{background:#06100C;border-bottom:1px solid #1E2D24;color:#9AB7A6}
.hg-stage .frame-bar .frame-url{background:#0E1612;border-color:#1E2D24;color:#9AB7A6}
.hg-stage .frame-dots span{background:#1E2D24}
.hg-meet{display:grid;grid-template-columns:1fr 320px;gap:0;min-height:520px}
.hg-canvas{padding:24px;display:flex;flex-direction:column;gap:18px;position:relative}
.hg-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hg-tile{aspect-ratio:16/10;border-radius:10px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:10px;border:1px solid #1E2D24;background-size:cover;background-position:center}
.hg-tile.speaking{border-color:var(--p);box-shadow:0 0 0 2px var(--p)}
.hg-tile .name{position:relative;z-index:1;font-family:var(--mono);font-size:10.5px;color:#fff;letter-spacing:0.06em;background:rgba(0,0,0,.45);padding:3px 8px;border-radius:4px;display:inline-flex;align-items:center;gap:6px;width:fit-content;backdrop-filter:blur(4px)}
.hg-tile .name .mic{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--p)}
.hg-tile.muted .name .mic{background:#D93025}
.hg-tile.you{outline:2px solid #E37400;outline-offset:-1px}

.hg-tile .av{display:none}
.hg-tile::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.65))}
.hg-tile.t1{background-image: linear-gradient(135deg, var(--paper-3), var(--paper-2))}
.hg-tile.t2{background-image: linear-gradient(135deg, var(--paper-3), var(--paper-2))}
.hg-tile.t3{background-image: linear-gradient(135deg, var(--paper-3), var(--paper-2))}
.hg-tile.t4{background-image: linear-gradient(135deg, var(--paper-3), var(--paper-2))}
.hg-tile.t5{background-image: linear-gradient(135deg, var(--paper-3), var(--paper-2))}
.hg-tile.t6{background-image: linear-gradient(135deg, var(--paper-3), var(--paper-2))}
.hg-tile.t7{background-image: linear-gradient(135deg, var(--paper-3), var(--paper-2))}
.hg-tile.t8{background-image: linear-gradient(135deg, var(--paper-3), var(--paper-2))}
.hg-tile.t9{background-image: linear-gradient(135deg, var(--paper-3), var(--paper-2))}

.hg-game-overlay{position:absolute;left:24px;right:24px;bottom:24px;background:linear-gradient(180deg,rgba(46,122,75,0) 0%,rgba(14,22,18,.96) 30%);padding:32px 24px 0;display:flex;flex-direction:column;gap:14px;border-radius:14px;border:1px solid #1E2D24;backdrop-filter:blur(8px)}
.hg-game-bar{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:0.1em;color:#9AB7A6;text-transform:uppercase}
.hg-game-bar .pill{padding:3px 10px;border-radius:99px;background:var(--p-dim);color:var(--p);border:1px solid var(--p)}
.hg-game-bar .timer{margin-left:auto;color:#fff;font-weight:500;font-size:13px;letter-spacing:0.06em}
.hg-prompt{font-family:var(--serif);font-size:30px;line-height:1.2;color:#fff;letter-spacing:-0.005em;text-wrap:balance}
.hg-prompt em{color:var(--p);font-style:italic}
.hg-options{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding-bottom:24px}
.hg-opt{padding:12px 14px;border:1px solid #1E2D24;border-radius:8px;font-size:13.5px;color:#D8E5DC;display:flex;gap:10px;align-items:center}
.hg-opt.picked{border-color:var(--p);background:var(--p-dim);color:#fff}
.hg-opt .key{font-family:var(--mono);font-size:11px;color:var(--p);width:14px}
.hg-opt .vote{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:#9AB7A6}

.hg-side{background:#06100C;border-left:1px solid #1E2D24;padding:18px;display:flex;flex-direction:column;gap:14px;font-size:13px}
.hg-side h6{font-family:var(--mono);font-size:10.5px;letter-spacing:0.12em;color:#9AB7A6;text-transform:uppercase;margin-bottom:10px;font-weight:500;display:flex;justify-content:space-between}
.hg-card{background:#0E1612;border:1px solid #1E2D24;border-radius:10px;padding:14px;color:#D8E5DC}
.hg-rank{display:flex;flex-direction:column;gap:8px}
.hg-rank .row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;font-size:12.5px;padding:5px 0;border-top:1px solid #1E2D24}
.hg-rank .row:first-child{border-top:none;padding-top:0}
.hg-rank .pos{font-family:var(--mono);color:#9AB7A6;width:18px}
.hg-rank .name{color:#fff;font-family:var(--serif);font-size:14px;font-style:italic}
.hg-rank .score{font-family:var(--mono);color:var(--p);font-size:11px}
.hg-tag{display:inline-flex;padding:2px 8px;border-radius:99px;background:var(--p-dim);color:var(--p);font-family:var(--mono);font-size:10px;letter-spacing:0.06em;text-transform:uppercase}

/* library (panel 2) */
.hg-lib-stage{padding:32px;background:#FFFFFF;min-height:520px;display:flex;flex-direction:column;gap:18px}
.hg-lib-bar{display:flex;justify-content:space-between;align-items:center}
.hg-lib-bar h6{font-family:var(--serif);font-size:24px;letter-spacing:-0.005em}
.hg-lib-bar .pills{display:flex;gap:6px}
.hg-lib-bar .pill{padding:5px 12px;border-radius:99px;font-family:var(--mono);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--rule);background:#fff}
.hg-lib-bar .pill.on{background:var(--p);color:#fff;border-color:var(--p)}
.hg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.hg-game-card{background:#fff;border:1px solid var(--rule);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.hg-game-card .top{height:120px;background:linear-gradient(135deg,var(--p),#1E5233);padding:18px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.hg-game-card.t-blue .top{background:linear-gradient(135deg,#2E5B7A,#1E3D52)}
.hg-game-card.t-amber .top{background:linear-gradient(135deg,#E37400,#5C4006)}
.hg-game-card.t-plum .top{background:linear-gradient(135deg,#8430CE,#4F1E55)}
.hg-game-card.t-rust .top{background:linear-gradient(135deg,#B3261E,#6B2F22)}
.hg-game-card.t-ink .top{background:linear-gradient(135deg,#3C4043,#1B1B1F)}
.hg-game-card .top .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;opacity:.85}
.hg-game-card .top .ttl{font-family:var(--serif);font-size:24px;line-height:1.1;letter-spacing:-0.005em}
.hg-game-card .body{padding:16px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.hg-game-card .desc{font-size:13px;color:var(--ink-2);line-height:1.5}
.hg-game-card .meta{display:flex;gap:10px;margin-top:auto;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);letter-spacing:0.06em}

/* facilitator dashboard (panel 3) */
.hg-fac-stage{padding:32px;background:#FFFFFF;min-height:520px;display:grid;grid-template-columns:1fr 320px;gap:18px}
.hg-fac-card{background:#fff;border:1px solid var(--rule);border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:14px}
.hg-fac-card h6{font-family:var(--serif);font-size:20px;letter-spacing:-0.005em}
.hg-step{display:grid;grid-template-columns:auto 1fr auto;gap:14px;padding:12px 0;border-top:1px solid var(--rule);align-items:center}
.hg-step:first-of-type{border-top:none}
.hg-step .pos{font-family:var(--serif);font-style:italic;font-size:24px;color:var(--p)}
.hg-step .ttl{font-family:var(--serif);font-size:16px;color:var(--ink);line-height:1.2}
.hg-step .sub{font-size:12px;color:var(--ink-3);margin-top:2px}
.hg-step .dur{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:0.06em}

.hg-fac-side{display:flex;flex-direction:column;gap:14px}
.hg-stat-card{background:#fff;border:1px solid var(--rule);border-radius:12px;padding:18px}
.hg-stat-card .num{font-family:var(--serif);font-size:42px;line-height:1;color:var(--p);letter-spacing:-0.02em;margin-bottom:6px}
.hg-stat-card .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:0.12em;color:var(--ink-3);text-transform:uppercase}
.hg-stat-card .ctx{font-size:12.5px;color:var(--ink-2);line-height:1.5;margin-top:10px}

/* ─── hyvemaps ─── */

/* Map mock */
.hm-stage{padding:0;min-height:520px;display:grid;grid-template-columns:1fr 320px;background:#EEF2F5}
.hm-map{position:relative;background:linear-gradient(135deg,#E5DFC8,#D8D0B5);overflow:hidden}
.hm-map svg{position:absolute;inset:0;width:100%;height:100%}
.hm-bubble{position:absolute;background:#fff;border:1px solid var(--rule);border-radius:8px;padding:8px 12px;font-size:11.5px;color:var(--ink);box-shadow:0 4px 14px rgba(0,0,0,.08);font-family:var(--mono);letter-spacing:0.04em}
.hm-bubble strong{color:var(--p);font-weight:500}
.hm-pin{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--p);border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transform:translate(-50%,-50%)}
.hm-pin.warn{background:#D93025}
.hm-pin.muted{background:var(--ink-4);width:10px;height:10px}
.hm-zoom{position:absolute;right:18px;bottom:18px;background:#fff;border:1px solid var(--rule);border-radius:8px;display:flex;flex-direction:column;font-family:var(--mono);font-size:14px;overflow:hidden}
.hm-zoom span{padding:8px 12px;color:var(--ink-2);border-bottom:1px solid var(--rule)}
.hm-zoom span:last-child{border-bottom:none}

.hm-side{background:#FFFFFF;border-left:1px solid var(--rule);padding:24px;display:flex;flex-direction:column;gap:14px}
.hm-side h6{font-family:var(--mono);font-size:10.5px;letter-spacing:0.12em;color:var(--ink-3);text-transform:uppercase;font-weight:500}
.hm-feat{padding:14px;border:1px solid var(--rule);border-radius:10px;background:#fff;display:flex;flex-direction:column;gap:6px}
.hm-feat .ttl{font-family:var(--serif);font-size:18px;letter-spacing:-0.005em;line-height:1.2}
.hm-feat .meta{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);letter-spacing:0.06em;display:flex;justify-content:space-between}
.hm-feat dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:12.5px;margin-top:6px}
.hm-feat dt{color:var(--ink-3)}
.hm-feat dd{color:var(--ink-2)}

/* ─── phonos ─── */

/* Player mock */
.ph-stage{padding:0;min-height:520px;background:#15101F;color:#E5DDF2;display:grid;grid-template-columns:1fr 320px}
.ph-stage .frame-bar{background:#0D0917;border-bottom:1px solid #2A2237;color:#A89BC4}
.ph-stage .frame-bar .frame-url{background:#15101F;border-color:#2A2237;color:#A89BC4}
.ph-stage .frame-dots span{background:#2A2237}

.ph-main{padding:36px 36px 24px;display:flex;flex-direction:column;gap:20px;position:relative}
.ph-now{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center}
.ph-art{width:160px;height:160px;border-radius:8px;background:linear-gradient(135deg,#8430CE,#3D2858);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:54px;color:#fff;letter-spacing:-0.02em;position:relative;overflow:hidden}
.ph-art::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.15),transparent 50%)}
.ph-now-meta .l{font-family:var(--mono);font-size:10.5px;letter-spacing:0.12em;color:#A89BC4;text-transform:uppercase;margin-bottom:8px}
.ph-now-meta .ttl{font-family:var(--serif);font-size:36px;letter-spacing:-0.01em;color:#fff;line-height:1.1;margin-bottom:6px;text-wrap:balance}
.ph-now-meta .arr{font-size:13px;color:#A89BC4}

/* spectrogram */
.ph-spec{height:120px;display:flex;align-items:center;gap:2px;padding:8px 0}
.ph-spec span{flex:1;background:linear-gradient(180deg,var(--p),#3D2858);border-radius:1px}
.ph-spec span.played{background:linear-gradient(180deg,#C9A8FF,#8430CE)}

.ph-time{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:#A89BC4;letter-spacing:0.06em}

.ph-controls{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:6px}
.ph-controls button{color:#E5DDF2;font-size:18px}
.ph-controls .play{width:54px;height:54px;border-radius:50%;background:#fff;color:var(--p);font-size:18px;display:flex;align-items:center;justify-content:center}

.ph-tabs{display:flex;gap:2px;padding-top:14px;border-top:1px solid #2A2237;margin-top:14px}
.ph-tabs span{padding:8px 14px;font-family:var(--mono);font-size:10.5px;letter-spacing:0.1em;color:#A89BC4;text-transform:uppercase}
.ph-tabs span.on{color:var(--p);border-bottom:2px solid var(--p);margin-bottom:-1px}

.ph-lyric{padding:16px 0 8px;display:flex;flex-direction:column;gap:8px;font-family:var(--serif);font-size:18px;line-height:1.4;color:#A89BC4;letter-spacing:-0.005em;text-align:center}
.ph-lyric .pre{font-size:15px;opacity:.5}
.ph-lyric .now{color:#fff;font-size:24px}
.ph-lyric .next{font-size:15px;opacity:.5}
.ph-lyric .meta{font-family:var(--mono);font-size:10px;letter-spacing:0.1em;color:#A89BC4;text-transform:uppercase;margin-top:6px}

.ph-side{background:#0D0917;border-left:1px solid #2A2237;padding:24px;display:flex;flex-direction:column;gap:14px}
.ph-side h6{font-family:var(--mono);font-size:10.5px;letter-spacing:0.12em;color:#A89BC4;text-transform:uppercase;font-weight:500}
.ph-q{display:flex;flex-direction:column;gap:2px}
.ph-q-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:8px 6px;border-radius:6px;font-size:13px}
.ph-q-row.now{background:var(--p-dim);color:#fff}
.ph-q-row .num{font-family:var(--mono);font-size:10.5px;color:#A89BC4;width:18px}
.ph-q-row .now .num{color:var(--p)}
.ph-q-row .ttl{font-family:var(--serif);font-size:14px;letter-spacing:-0.005em;color:#E5DDF2}
.ph-q-row.now .ttl{color:#fff}
.ph-q-row .dur{font-family:var(--mono);font-size:10.5px;color:#A89BC4}

.ph-card{background:#15101F;border:1px solid #2A2237;border-radius:10px;padding:14px;font-size:12.5px;color:#A89BC4;line-height:1.55}
.ph-card strong{color:#fff;font-weight:500;font-family:var(--serif);font-size:14px;display:block;margin-bottom:4px;letter-spacing:-0.005em}

/* ─── strategyspaces ─── */

/* Strategy Spaces — signal blue, drawn from the product's own tokens */


/* ── phase track ── */
.ss-stage{background:var(--ss-paper);min-height:520px;display:flex;flex-direction:column;font-family:var(--sans);color:var(--ss-ink)}
.ss-bar{padding:12px 18px;border-bottom:1px solid var(--ss-line);background:var(--ss-card);display:flex;align-items:center;justify-content:space-between}
.ss-bar .ttl{font-size:14px;font-weight:600}
.ss-bar .live{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ss-ship)}
.ss-bar .live i{width:6px;height:6px;border-radius:50%;background:var(--ss-ship);display:inline-block}

.ss-track{padding:20px 18px 14px;position:relative}
.ss-track-bar{display:flex;gap:4px;height:12px;border-radius:6px;overflow:hidden}
.ss-track-bar div{position:relative}
.ss-playhead{position:absolute;top:16px;height:20px;width:2px;background:var(--ss-ink);z-index:2}
.ss-playhead::after{content:"";position:absolute;top:-4px;left:-3px;width:8px;height:8px;border-radius:50%;background:var(--ss-ink)}
.ss-track-lbl{display:flex;gap:4px;margin-top:8px}
.ss-track-lbl span{font-family:var(--mono);font-size:9.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ss-faint)}
.ss-track-lbl span.now{color:var(--ss-ink);font-weight:600}

.ss-body{display:grid;grid-template-columns:1.4fr 1fr;gap:14px;padding:6px 18px 18px;flex:1;min-height:0}
.ss-card{background:var(--ss-card);border:1px solid var(--ss-line);border-radius:10px;padding:18px;display:flex;flex-direction:column;gap:10px}
.ss-card .kicker{font-family:var(--mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--p)}
.ss-card h6{font-size:17px;font-weight:600;line-height:1.25}
.ss-card p{font-size:12.5px;line-height:1.6;color:var(--ss-soft);margin:0}
.ss-actions{margin-top:auto;display:flex;gap:8px}
.ss-btn{padding:7px 14px;border-radius:6px;background:var(--p);color:#fff;font-size:12px;font-weight:500;white-space:nowrap;flex-shrink:0}
.ss-btn.ghost{background:transparent;border:1px solid #D3D8D2;color:var(--ss-soft)}

.ss-room{background:var(--ss-card);border:1px solid var(--ss-line);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:9px}
.ss-room .kicker{font-family:var(--mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ss-faint)}
.ss-row{display:flex;align-items:center;gap:8px;font-size:12.5px}
.ss-row i{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.ss-row .st{margin-left:auto;font-family:var(--mono);font-size:9.5px;color:var(--ss-faint)}
.ss-row .st.help{color:var(--ss-ship);font-weight:600}

/* ── admin sequence builder: palette · canvas · inspector ── */
.ad-stage{background:var(--ss-paper);min-height:520px;display:grid;grid-template-columns:146px 1fr 190px;font-family:var(--sans)}

/* left: phase-kind palette */
.ad-pal{border-right:1px solid var(--ss-line);background:var(--ss-card);padding:14px 11px;overflow:hidden}
.ad-pal .eyebrow{display:block;font-family:var(--mono);font-size:9px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ss-faint);padding:0 3px 9px}
.pal-search{display:flex;align-items:center;gap:6px;border:1px solid var(--ss-line);border-radius:7px;padding:6px 8px;font-size:10.5px;color:var(--ss-faint);margin-bottom:12px}
.pal-cat{margin-bottom:11px}
.pal-cat-h{font-size:10.5px;font-weight:600;color:var(--ss-ink);margin-bottom:5px;display:flex;justify-content:space-between}
.pal-cat-h span{font-family:var(--mono);font-size:9px;color:var(--ss-faint);font-weight:400}
.pal-kind{display:flex;align-items:center;gap:6px;padding:4px 7px;border-radius:5px;font-size:10.5px;color:var(--ss-soft);margin-bottom:2px}
.pal-kind i{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.pal-kind:hover{background:var(--p-dim);color:var(--p)}

/* centre: the horizontal rail */
.ad-canvas{overflow-x:auto;overflow-y:hidden;padding:26px 22px;
  background-color:var(--ss-paper);
  background-image:repeating-linear-gradient(90deg,transparent,transparent 23px,var(--ss-line) 23px,var(--ss-line) 24px)}
.ad-canvas .eyebrow{display:block;font-family:var(--mono);font-size:9px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ss-faint);margin-bottom:16px}
.track{display:flex;align-items:stretch;gap:0;min-height:200px}
.stop{position:relative;display:flex;flex-direction:column;flex:0 0 92px}
.stop-rail{height:3px;background:#D3D8D2;position:absolute;top:22px;left:0;right:0;z-index:0}
.stop:first-child .stop-rail{left:50%}
.stop:last-of-type .stop-rail{right:50%}
.stop-dot{position:relative;z-index:1;width:12px;height:12px;border-radius:50%;background:var(--ss-card);border:3px solid #D3D8D2;margin:16px auto 0}
.stop.sel .stop-dot{border-color:var(--p);box-shadow:0 0 0 4px var(--p-dim)}
.stop-card{margin:14px 4px 0;background:var(--ss-card);border:1px solid var(--ss-line);border-radius:10px;padding:10px;box-shadow:0 1px 2px rgba(20,26,36,.04)}
.stop.sel .stop-card{border-color:var(--p);box-shadow:0 0 0 1px var(--p),0 1px 2px rgba(20,26,36,.04)}
.stop-n{font-family:var(--mono);font-size:9.5px;color:var(--ss-faint)}
.stop-kind{display:flex;align-items:center;gap:4px;font-size:9.5px;font-weight:600;margin:2px 0 5px}
.stop-title{font-size:12px;font-weight:600;line-height:1.25;color:var(--ss-ink)}
.stop-meta{display:flex;gap:4px;margin-top:7px;flex-wrap:wrap}
.stop-meta span{font-family:var(--mono);font-size:8.5px;color:var(--ss-faint);border:1px solid var(--ss-line);border-radius:99px;padding:1px 5px}
.track-add{align-self:flex-start;margin-top:54px;display:flex;flex-direction:column;align-items:center;gap:5px;flex:0 0 74px;padding:18px 6px;border:2px dashed #D3D8D2;border-radius:10px;background:transparent;color:var(--ss-faint);flex-shrink:0}
.track-add span{font-size:9.5px;font-weight:500;line-height:1.2;text-align:center}

/* right: inspector */
.ad-insp{border-left:1px solid var(--ss-line);background:var(--ss-card);padding:14px 13px;overflow:hidden}
.ad-insp .eyebrow{display:block;font-family:var(--mono);font-size:9px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ss-faint);margin-bottom:8px}
.ad-insp .fld{border:1px solid var(--ss-line);border-radius:6px;padding:7px 9px;font-size:11px;color:var(--ss-ink);margin-bottom:8px}
.insp-tabs{display:flex;gap:2px;background:var(--ss-paper);border:1px solid var(--ss-line);border-radius:8px;padding:3px;margin:12px 0 11px}
.insp-tab{flex:1;text-align:center;font-size:9px;font-weight:500;color:var(--ss-soft);padding:5px 2px;border-radius:6px}
.insp-tab.on{background:var(--ss-card);color:var(--ss-ink);box-shadow:0 1px 2px rgba(20,26,36,.06)}
.insp-row{display:flex;justify-content:space-between;font-size:10.5px;color:var(--ss-soft);padding:6px 0;border-top:1px solid var(--ss-line)}
.insp-row:first-of-type{border-top:none}
.insp-row b{font-weight:500;color:var(--ss-ink)}

/* ── prototype gallery ── */
.gal-stage{background:var(--ss-paper);min-height:520px;padding:18px;font-family:var(--sans)}
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gal-card{background:var(--ss-card);border:1px solid var(--ss-line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.gal-thumb{height:104px;background:var(--ss-paper);border-bottom:1px solid var(--ss-line);position:relative;overflow:hidden}
.gal-thumb img{width:100%;height:100%;object-fit:cover;opacity:.9}
.gal-tag{position:absolute;top:8px;left:8px;font-family:var(--mono);font-size:8.5px;letter-spacing:0.1em;text-transform:uppercase;padding:3px 7px;border-radius:99px;background:rgba(255,255,255,.94);color:var(--ss-soft)}
.gal-meta{padding:12px 14px;display:flex;flex-direction:column;gap:5px;flex:1}
.gal-meta .t{font-size:13px;font-weight:600;line-height:1.25}
.gal-meta .b{font-size:11px;color:var(--ss-faint);line-height:1.5}
.gal-meta .f{margin-top:auto;display:flex;justify-content:space-between;font-family:var(--mono);font-size:9.5px;color:var(--ss-faint);padding-top:8px;border-top:1px solid var(--ss-line)}