/* AI Tester Blueprint practice pages: shared page styles.
   Sits on top of theme.css (copied from /playwright/). Uses only theme tokens,
   so light and dark mode both work. Generated pages link this file; edit here,
   not in the pages. */

/* ---------- Chapter hero ---------- */
.page-hero { display:flex; flex-direction:column; gap:12px; margin-bottom:24px; }
.page-hero h1 { margin:0; font-family:"Inter",ui-sans-serif,system-ui,sans-serif; font-size:clamp(1.9rem,4vw,2.6rem); font-weight:600; letter-spacing:-0.025em; color:var(--ink); line-height:1.05; text-wrap:balance; }
.page-hero h1 em { font-style:italic; color:var(--accent); font-weight:500; }
.page-hero p { max-width:78ch; margin:0; color:var(--muted); font-size:1rem; line-height:1.7; }
.page-hero p code { background:var(--surface-2); padding:1px 6px; border-radius:4px; font-size:0.88rem; }
.hero-cta { display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.hero-cta a { display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:10px; border:1px solid var(--border); background:var(--surface); color:var(--ink); text-decoration:none; font-weight:600; font-size:0.9rem; }
.hero-cta a:hover { border-color:var(--accent); color:var(--accent-strong); }
.hero-cta a.primary { background:var(--accent); color:#0b1424; border-color:var(--accent); }
.hero-cta a.primary:hover { color:#0b1424; }
.hero-meta { display:flex; flex-wrap:wrap; gap:8px; }

/* ---------- Stats ---------- */
.stats-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:8px 0 24px; }
.stat-card { padding:16px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:4px; }
.stat-card .stat-num { font-size:1.7rem; font-weight:700; color:var(--accent-strong); line-height:1; font-variant-numeric:tabular-nums; }
.stat-card .stat-label { color:var(--muted); font-size:0.82rem; font-weight:500; }
.stat-card .stat-sub { color:var(--ink-soft); font-size:0.82rem; line-height:1.5; }
.stat-card .stat-sub code { background:var(--surface-2); padding:0 5px; border-radius:4px; font-size:0.78rem; }

/* ---------- Topic cards (one numbered module each) ---------- */
.topic-card { padding:22px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow-sm); margin-bottom:18px; scroll-margin-top:calc(var(--topbar-h) + 16px); }
.topic-card h2 { margin:0 0 8px; font-size:1.3rem; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:10px; }
.topic-card h2 .mod-num { display:inline-grid; place-items:center; flex:0 0 auto; width:34px; height:34px; border-radius:10px; background:var(--accent-ghost); color:var(--accent-strong); font-size:0.92rem; font-weight:700; }
.topic-card h3 { margin:18px 0 6px; font-size:1.02rem; font-weight:700; color:var(--ink); }
.topic-card h4 { margin:14px 0 4px; font-size:0.84rem; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.06em; }
.topic-card p { margin:8px 0; color:var(--ink-soft); font-size:0.94rem; line-height:1.72; }
.topic-card ul, .topic-card ol { margin:8px 0; padding-left:22px; color:var(--ink-soft); font-size:0.93rem; line-height:1.72; }
.topic-card li { margin:4px 0; }
.topic-card li code, .topic-card p code, .topic-card td code { background:var(--surface-2); padding:1px 6px; border-radius:4px; font-size:0.85rem; }
.topic-card a { color:var(--accent-strong); }

/* ---------- Callouts ---------- */
.callout { margin:12px 0; padding:12px 14px; border-radius:10px; border:1px solid var(--border); background:var(--surface-2); font-size:0.9rem; line-height:1.65; color:var(--ink-soft); }
.callout b:first-child { color:var(--ink); }
.callout.is-tip { border-color:var(--accent); background:var(--accent-ghost); }
.callout.is-warn { border-color:#f2c46d; background:#fff8e6; }
[data-theme="dark"] .callout.is-warn { border-color:#8a6a1f; background:#2c2410; }

/* ---------- Code blocks ---------- */
.code-block { background:#0b1424; border-radius:10px; overflow:hidden; border:1px solid var(--border); margin:12px 0; }
.code-head { padding:8px 14px; background:#152033; color:#94a3b8; font-family:"JetBrains Mono",monospace; font-size:0.78rem; border-bottom:1px solid #1f2a3f; display:flex; gap:8px; align-items:center; }
.code-head .dot { width:10px; height:10px; border-radius:50%; flex:0 0 auto; }
.code-head .dot.red { background:#ff5f56; } .code-head .dot.yellow { background:#ffbd2e; } .code-head .dot.green { background:#27ca40; }
.code-head .file { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.code-head .copy-btn { margin-left:auto; }
.code-body { padding:14px 16px; overflow-x:auto; font-family:"JetBrains Mono",monospace; font-size:0.82rem; color:#d6e0f5; line-height:1.65; background:#0b1424; margin:0; tab-size:4; }
.code-body code, .code-body code * { background:transparent !important; color:inherit; padding:0; border-radius:0; font:inherit; }
.code-body .k { color:#c792ea !important; } .code-body .s { color:#c3e88d !important; } .code-body .f { color:#82aaff !important; } .code-body .c { color:#6f7f9f !important; } .code-body .n { color:#f78c6c !important; } .code-body .p { color:#89ddff !important; }
.code-body.is-output { color:#cfe3d4; }
.copy-btn { background:transparent; border:1px solid #2a3856; color:#94a3b8; padding:2px 8px; border-radius:4px; cursor:pointer; font-size:0.7rem; font-family:inherit; font-weight:600; }
.copy-btn:hover { color:#fff; border-color:var(--accent); }
.code-note { margin:-4px 0 12px; font-size:0.8rem; color:var(--muted); }

/* ---------- Language / artifact sub-tabs ---------- */
.sol-tabs { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:8px; border-bottom:1px dashed var(--border); }
.sol-tabs button { background:transparent; border:none; padding:6px 10px; cursor:pointer; font-family:inherit; font-size:0.82rem; font-weight:600; color:var(--muted); border-bottom:2px solid transparent; }
.sol-tabs button[aria-selected="true"] { color:var(--accent-strong); border-bottom-color:var(--accent); }
.sol-panel[hidden] { display:none; }

/* ---------- Diagrams ---------- */
.learn-diagram { margin:12px 0 16px; padding:14px 16px; border:1px dashed var(--border-strong); border-radius:10px; background:var(--bg); overflow-x:auto; }
.learn-diagram figcaption { margin-top:6px; font-size:0.8rem; color:var(--muted); text-align:center; }
.learn-diagram .mermaid { background:var(--surface); border-radius:8px; padding:10px; min-height:40px; margin:0; text-align:center; }
.learn-diagram img { display:block; margin:0 auto; max-width:100%; height:auto; border-radius:8px; background:#fff; }
.learn-diagram svg.learn-svg { display:block; margin:0 auto; max-width:100%; height:auto; background:var(--surface); border-radius:8px; padding:8px; }
.learn-diagram svg.learn-svg text { font-family:"Inter",ui-sans-serif,system-ui,sans-serif; fill:var(--ink); font-size:13px; }
.learn-diagram svg.learn-svg text.mono { font-family:"JetBrains Mono",ui-monospace,monospace; font-size:12px; }
.learn-diagram svg.learn-svg text.muted { fill:var(--muted); }
.learn-diagram svg.learn-svg text.accent { fill:var(--accent-strong); font-weight:600; }
.learn-diagram svg.learn-svg .box { fill:var(--surface-2); stroke:var(--border-strong); stroke-width:1.5; }
.learn-diagram svg.learn-svg .box-accent { fill:var(--accent-ghost); stroke:var(--accent); stroke-width:1.5; }
.learn-diagram svg.learn-svg .box-warn { fill:#fef3c7; stroke:#d4a017; stroke-width:1.5; }
.learn-diagram svg.learn-svg .box-ok { fill:#dcfce7; stroke:#22a55e; stroke-width:1.5; }
.learn-diagram svg.learn-svg .box-bad { fill:#fde2e2; stroke:#d9534f; stroke-width:1.5; }
[data-theme="dark"] .learn-diagram svg.learn-svg .box-warn { fill:#3a2f10; }
[data-theme="dark"] .learn-diagram svg.learn-svg .box-ok { fill:#123524; }
[data-theme="dark"] .learn-diagram svg.learn-svg .box-bad { fill:#3d1818; }
.learn-diagram svg.learn-svg .edge { stroke:var(--ink-soft); stroke-width:1.6; fill:none; }
.learn-diagram svg.learn-svg .edge-dash { stroke:var(--muted); stroke-width:1.4; fill:none; stroke-dasharray:5 4; }
.learn-diagram svg.learn-svg .head { fill:var(--ink-soft); }
.illus { margin:12px 0 16px; border:1px solid var(--border); border-radius:12px; overflow:hidden; background:#fff; }
.illus img { display:block; width:100%; height:auto; }
.illus figcaption { padding:10px 14px; font-size:0.86rem; color:var(--ink-soft); background:var(--surface); border-top:1px solid var(--border); line-height:1.6; }

/* ---------- Lecture / lesson cards ---------- */
.lec-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; margin-top:14px; }
.lec-card { padding:18px; border:1px solid var(--border); border-radius:14px; background:var(--surface); text-decoration:none; color:var(--ink); transition:0.14s ease; display:flex; flex-direction:column; gap:6px; }
.lec-card:hover { border-color:var(--accent); background:var(--accent-ghost); }
.lec-card .lec-num { font-family:"JetBrains Mono",monospace; font-size:0.74rem; color:var(--muted); letter-spacing:0.08em; text-transform:uppercase; }
.lec-card .lec-title { font-weight:700; font-size:1.02rem; color:var(--ink); }
.lec-card:hover .lec-title { color:var(--accent-strong); }
.lec-card .lec-sub { color:var(--muted); font-size:0.84rem; line-height:1.55; }
.lec-card .lec-chip { display:inline-block; margin-top:auto; padding:2px 8px; border-radius:999px; font-size:0.7rem; font-weight:700; background:#dcfce7; color:#166534; width:max-content; }
.lec-card .lec-chip.is-key { background:#fff1d6; color:#8a5300; }
[data-theme="dark"] .lec-card .lec-chip { background:rgba(34,197,94,0.2); color:#86efac; }
[data-theme="dark"] .lec-card .lec-chip.is-key { background:rgba(245,158,11,0.18); color:#fcd34d; }
.lesson-nav { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:22px; }
.lesson-nav a { display:flex; flex-direction:column; gap:2px; padding:14px 16px; border:1px solid var(--border); border-radius:12px; background:var(--surface); text-decoration:none; color:var(--ink); }
.lesson-nav a:hover { border-color:var(--accent); }
.lesson-nav a.next { text-align:right; grid-column:2; }
.lesson-nav small { color:var(--muted); font-size:0.76rem; text-transform:uppercase; letter-spacing:0.06em; }
.lesson-nav b { font-size:0.95rem; }

/* ---------- Tables ---------- */
.compare-table { width:100%; border-collapse:collapse; margin:12px 0; font-size:0.88rem; }
.compare-table th, .compare-table td { padding:10px 14px; border:1px solid var(--border); text-align:left; vertical-align:top; color:var(--ink-soft); }
.compare-table th { background:var(--surface-2); font-weight:700; color:var(--ink); }
.compare-table tr:nth-child(even) td { background:var(--bg); }
.table-wrap { overflow-x:auto; }

/* ---------- Practice drills ---------- */
.drills { list-style:none; margin:10px 0 0; padding:0; counter-reset:drill; display:grid; gap:10px; }
.drills > li { counter-increment:drill; position:relative; padding:14px 14px 14px 52px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.drills > li::before { content:counter(drill,decimal-leading-zero); position:absolute; left:14px; top:14px; width:28px; height:28px; display:grid; place-items:center; border-radius:8px; background:var(--accent-ghost); color:var(--accent-strong); font-weight:700; font-size:0.78rem; font-family:"JetBrains Mono",monospace; }
.drills > li > b { color:var(--ink); }
.drills > li p { margin:6px 0 0; }
.drills details { margin-top:8px; }
.drills summary { cursor:pointer; color:var(--accent-strong); font-weight:600; font-size:0.86rem; }
.drills details > div { margin-top:6px; padding:10px 12px; border-left:3px solid var(--accent); background:var(--surface-2); border-radius:0 8px 8px 0; font-size:0.88rem; color:var(--ink-soft); }
.drill-tag { display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px; font-size:0.68rem; font-weight:700; vertical-align:2px; background:var(--surface-3); color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; }
.drill-tag.is-pw { background:#e0ecff; color:#1d4ed8; }
[data-theme="dark"] .drill-tag.is-pw { background:#16264a; color:#93b4ff; }

/* ---------- Live demo panel ---------- */
.demo { border:1px solid var(--border-strong); border-radius:14px; background:var(--bg); padding:16px; margin:12px 0; }
.demo [hidden] { display:none !important; }   /* the hidden attribute must beat display:flex/grid on demo parts */
.demo-head { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:12px; }
.demo-head .demo-title { font-weight:700; color:var(--ink); font-size:0.98rem; margin-right:auto; }
.demo-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; }
.demo-grid.is-wide { grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); }
.demo-col { display:flex; flex-direction:column; gap:10px; min-width:0; }
.demo-field { display:flex; flex-direction:column; gap:4px; }
.demo-field label, .demo-label { font-size:0.78rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; }
.demo input[type="text"], .demo input[type="number"], .demo input[type="search"], .demo select, .demo textarea { width:100%; padding:9px 11px; border:1px solid var(--border-strong); border-radius:9px; background:var(--surface); color:var(--ink); font:inherit; font-size:0.9rem; }
.demo textarea { min-height:96px; resize:vertical; font-family:"JetBrains Mono",monospace; font-size:0.8rem; line-height:1.55; }
.demo input:focus-visible, .demo select:focus-visible, .demo textarea:focus-visible, .demo button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.demo-actions { display:flex; flex-wrap:wrap; gap:8px; }
.demo-actions .tta-button { padding:8px 14px; font-size:0.86rem; }
.demo-out { margin:0; padding:12px 14px; border-radius:10px; background:#0b1424; color:#d6e0f5; font-family:"JetBrains Mono",monospace; font-size:0.78rem; line-height:1.6; white-space:pre-wrap; word-break:break-word; min-height:56px; max-height:420px; overflow:auto; }
.demo-out .k { color:#c792ea; } .demo-out .s { color:#c3e88d; } .demo-out .n { color:#f78c6c; } .demo-out .c { color:#6f7f9f; } .demo-out .f { color:#82aaff; }
.demo-status { font-size:0.84rem; color:var(--ink-soft); min-height:1.3em; }
.demo-status b { color:var(--ink); }
.demo-log { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; max-height:360px; overflow:auto; }
.demo-log li { display:flex; gap:8px; align-items:flex-start; padding:8px 10px; border:1px solid var(--border); border-radius:9px; background:var(--surface); font-size:0.84rem; line-height:1.5; color:var(--ink-soft); }
.demo-log li .tag { flex:0 0 auto; padding:1px 7px; border-radius:6px; font-size:0.7rem; font-weight:700; background:var(--surface-3); color:var(--ink-soft); font-family:"JetBrains Mono",monospace; }
.demo .tta-button:disabled, .demo button:disabled { opacity:0.45; cursor:not-allowed; filter:grayscale(0.4); }
.demo-log li .tag.is-node { background:#fff4cc; color:#7a5b00; }
.demo-log li .tag.is-edge { background:#ffe0e6; color:#a1173a; }
.demo-log li .tag.is-tool { background:#e0e7ff; color:#3730a3; }
.demo-log li .tag.is-llm { background:#ede9fe; color:#5b21b6; }
.demo-log li .tag.is-ok { background:#dcfce7; color:#166534; }
.demo-log li .tag.is-bad { background:#fde2e2; color:#9b1c1c; }
.demo-log li .tag.is-human { background:#ffe9d1; color:#9a4a00; }
[data-theme="dark"] .demo-log li .tag.is-node { background:#3a3110; color:#f5d77a; }
[data-theme="dark"] .demo-log li .tag.is-edge { background:#3d1823; color:#ff9db3; }
[data-theme="dark"] .demo-log li .tag.is-tool { background:#1e2350; color:#a5b4fc; }
[data-theme="dark"] .demo-log li .tag.is-llm { background:#2a1f4d; color:#c4b5fd; }
[data-theme="dark"] .demo-log li .tag.is-ok { background:#123524; color:#86efac; }
[data-theme="dark"] .demo-log li .tag.is-bad { background:#3d1818; color:#fca5a5; }
[data-theme="dark"] .demo-log li .tag.is-human { background:#3b2510; color:#fdba74; }
.chip-row { display:flex; flex-wrap:wrap; gap:6px; }
.chip { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border:1px solid var(--border-strong); border-radius:999px; background:var(--surface); color:var(--ink-soft); font-size:0.8rem; cursor:pointer; font-family:inherit; }
.chip[aria-pressed="true"], .chip.is-on { border-color:var(--accent); background:var(--accent-ghost); color:var(--accent-strong); font-weight:600; }
.meter { height:8px; border-radius:999px; background:var(--surface-3); overflow:hidden; }
.meter > span { display:block; height:100%; background:var(--accent); border-radius:999px; transition:width 0.25s ease; }
.meter.is-bad > span { background:#d9534f; } .meter.is-warn > span { background:#e0a020; }
.kv { width:100%; border-collapse:collapse; font-size:0.84rem; }
.kv th, .kv td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--border); vertical-align:top; color:var(--ink-soft); }
.kv th { color:var(--muted); font-weight:600; width:38%; }
.kv tr.is-hit td, .kv tr.is-hit th { background:var(--accent-ghost); }
.badge-key { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:999px; font-size:0.72rem; font-weight:700; background:#dcfce7; color:#166534; }
.badge-key.is-need { background:#fff1d6; color:#8a5300; }
[data-theme="dark"] .badge-key { background:rgba(34,197,94,0.2); color:#86efac; }
[data-theme="dark"] .badge-key.is-need { background:rgba(245,158,11,0.18); color:#fcd34d; }
/* node-graph widget (used by the LangGraph and pipeline demos) */
.flow { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:10px; border:1px dashed var(--border-strong); border-radius:10px; background:var(--surface); }
.flow .node { padding:6px 10px; border-radius:8px; border:1.5px solid var(--border-strong); background:var(--surface-2); font-size:0.8rem; font-weight:600; color:var(--ink-soft); font-family:"JetBrains Mono",monospace; transition:0.15s ease; }
.flow .node.is-active { border-color:var(--accent); background:var(--accent-ghost); color:var(--accent-strong); box-shadow:0 0 0 3px var(--accent-soft); }
.flow .node.is-done { border-color:#22a55e; color:#167a45; }
.flow .node.is-skip { opacity:0.45; }
.flow .node.is-wait { border-color:#e07a1f; background:#ffe9d1; color:#9a4a00; }
[data-theme="dark"] .flow .node.is-wait { background:#3b2510; color:#fdba74; }
[data-theme="dark"] .flow .node.is-done { color:#86efac; }
.flow .arrow { color:var(--muted); font-size:0.8rem; }

/* ---------- Hub page ---------- */
.index-hero { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:28px; align-items:end; padding:8px 0 22px; }
.index-hero-copy { display:flex; flex-direction:column; gap:14px; }
.index-hero-copy h1 { margin:0; font-size:clamp(2.1rem,4.6vw,3.2rem); line-height:1.04; letter-spacing:-0.03em; color:var(--ink); font-weight:700; text-wrap:balance; }
.index-hero-copy h1 em { color:var(--accent); font-style:italic; font-weight:600; }
.index-hero-copy p { margin:0; max-width:66ch; color:var(--muted); line-height:1.7; font-size:1rem; }
.index-hero-copy p code { background:var(--surface-2); padding:1px 6px; border-radius:4px; font-size:0.86rem; color:var(--ink-soft); }
.index-hero-actions { display:flex; flex-wrap:wrap; gap:10px; }
.index-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.index-stat { padding:16px; border:1px solid var(--border); border-radius:12px; background:var(--surface); box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:4px; }
.index-stat strong { font-size:1.9rem; line-height:1; color:var(--accent-strong); font-variant-numeric:tabular-nums; }
.index-stat span { font-size:0.82rem; color:var(--muted); font-weight:500; }
.legend-row { display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 18px; }
.legend-pill { display:inline-flex; align-items:center; gap:8px; padding:5px 12px; border:1px solid var(--border); border-radius:999px; background:var(--surface); font-size:0.8rem; color:var(--ink-soft); }
.swatch { width:10px; height:10px; border-radius:3px; background:var(--accent); }
.swatch.is-project { background:#7c5cff; } .swatch.is-concept { background:#e0a020; }
.index-section-head { margin:30px 0 12px; display:flex; flex-direction:column; gap:4px; scroll-margin-top:calc(var(--topbar-h) + 16px); }
.index-section-head h2 { margin:0; font-size:1.35rem; color:var(--ink); letter-spacing:-0.01em; }
.index-section-head p { margin:0; color:var(--muted); font-size:0.92rem; }
.index-pinned { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.pinned-card { position:relative; display:flex; flex-direction:column; gap:10px; padding:20px; border:1px solid var(--border); border-top:4px solid var(--accent); border-radius:14px; background:var(--surface); box-shadow:var(--shadow-sm); }
.pinned-card.is-project { border-top-color:#7c5cff; } .pinned-card.is-concept { border-top-color:#e0a020; }
.pinned-card h3 { margin:0; font-size:1.12rem; color:var(--ink); }
.pinned-card p { margin:0; color:var(--ink-soft); font-size:0.9rem; line-height:1.6; flex:1; }
.pinned-card p code { background:var(--surface-2); padding:1px 5px; border-radius:4px; font-size:0.82rem; }
.pinned-eyebrow { font-size:0.72rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); }
.pinned-cta { display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:0.9rem; color:var(--accent-strong); text-decoration:none; }
.pinned-cta svg { width:16px; height:16px; }
.pinned-cta:hover { text-decoration:underline; }
.tracks-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.track-card { display:flex; flex-direction:column; gap:6px; padding:16px; border:1px solid var(--border); border-radius:14px; background:var(--surface); text-decoration:none; color:var(--ink); transition:0.14s ease; }
.track-card:hover { border-color:var(--accent); background:var(--accent-ghost); }
.track-icon { display:inline-grid; place-items:center; width:34px; height:34px; border-radius:10px; background:var(--accent-ghost); color:var(--accent-strong); }
.track-icon svg { width:18px; height:18px; }
.track-card h4 { margin:2px 0 0; font-size:1rem; color:var(--ink); }
.track-card p { margin:0; font-size:0.86rem; color:var(--muted); line-height:1.55; flex:1; }
.track-count { font-size:0.76rem; font-weight:700; color:var(--accent-strong); text-transform:uppercase; letter-spacing:0.06em; }
.index-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.index-grid.is-three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.index-card { display:flex; flex-direction:column; justify-content:space-between; gap:14px; padding:18px; border:1px solid var(--border); border-radius:14px; background:var(--surface); box-shadow:var(--shadow-sm); transition:0.14s ease; }
.index-card:hover { border-color:var(--accent); }
.index-card.is-project { border-left:4px solid #7c5cff; } .index-card.is-concept { border-left:4px solid #e0a020; }
.index-card-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
.index-card-icon { display:inline-grid; place-items:center; min-width:38px; height:30px; padding:0 8px; border-radius:8px; background:var(--surface-2); color:var(--ink-soft); font-weight:700; font-family:"JetBrains Mono",monospace; font-size:0.82rem; }
.index-card h3 { margin:0 0 6px; font-size:1.06rem; color:var(--ink); }
.index-card p { margin:0; color:var(--ink-soft); font-size:0.88rem; line-height:1.6; }
.index-card p code { background:var(--surface-2); padding:1px 5px; border-radius:4px; font-size:0.8rem; }
.index-topics { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.index-topic { padding:3px 9px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); font-size:0.74rem; color:var(--ink-soft); }
.index-card-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.index-card-foot .tta-button { padding:7px 12px; font-size:0.84rem; }
.index-footnote { margin:26px 0 8px; font-size:0.84rem; color:var(--muted); }

/* ---------- Responsive ---------- */
@media (max-width:1100px) { .index-hero { grid-template-columns:1fr; } .tracks-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .index-grid.is-three { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:900px) { .stats-row { grid-template-columns:repeat(2,1fr); } .demo-grid, .demo-grid.is-wide { grid-template-columns:1fr; } .index-pinned { grid-template-columns:1fr; } }
@media (max-width:700px) { .index-grid, .index-grid.is-three, .tracks-grid { grid-template-columns:1fr; } .topic-card { padding:16px; } .lesson-nav { grid-template-columns:1fr; } .lesson-nav a.next { grid-column:auto; } }

/* ---------- Hub v2: hero with art, roadmap tab ---------- */
.is-p1 { --ph:#7c3aed; --ph-band:#e4d7ff; --ph-soft:#f5f0ff; }
.is-p2 { --ph:#b7791f; --ph-band:#ffe58a; --ph-soft:#fff8dc; }
.is-p3 { --ph:#0284c7; --ph-band:#bae6fd; --ph-soft:#ecf8fe; }
.is-p4 { --ph:#be185d; --ph-band:#fbcfe8; --ph-soft:#fdf0f6; }
.is-p5 { --ph:#0f766e; --ph-band:#99f6e4; --ph-soft:#effcfa; }
.is-p6 { --ph:#c2410c; --ph-band:#fed7aa; --ph-soft:#fff4ec; }
[data-theme="dark"] .is-p1 { --ph:#a78bfa; --ph-band:#3b2a66; --ph-soft:#221a38; }
[data-theme="dark"] .is-p2 { --ph:#f0c34e; --ph-band:#4a3a10; --ph-soft:#2a2310; }
[data-theme="dark"] .is-p3 { --ph:#38bdf8; --ph-band:#0f3b55; --ph-soft:#0f2533; }
[data-theme="dark"] .is-p4 { --ph:#f472b6; --ph-band:#561b3b; --ph-soft:#2e1424; }
[data-theme="dark"] .is-p5 { --ph:#2dd4bf; --ph-band:#0f3d38; --ph-soft:#0f2522; }
[data-theme="dark"] .is-p6 { --ph:#fb923c; --ph-band:#4a2510; --ph-soft:#2a1710; }

.hub-hero { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:32px; align-items:center; padding:8px 0 18px; }
.hub-hero-copy { display:flex; flex-direction:column; gap:14px; }
.hub-hero-copy h1 { margin:0; font-size:clamp(2rem,4.2vw,3rem); line-height:1.05; letter-spacing:-0.03em; color:var(--ink); font-weight:700; text-wrap:balance; }
.hub-hero-copy h1 em { color:var(--accent); font-style:italic; font-weight:600; }
.hub-hero-copy p { margin:0; max-width:62ch; color:var(--muted); line-height:1.7; }
.hub-hero-art { margin:0; border:1px solid var(--border); border-radius:18px; overflow:hidden; background:#fff; box-shadow:var(--shadow-md); }
.hub-hero-art img { display:block; width:100%; height:auto; }
.hub-hero-art .art-placeholder { aspect-ratio:16/9; }
.hub-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:6px 0 18px; }
.hub-tabbar { margin:6px 0 4px; }

.art-placeholder { display:grid; place-items:center; width:100%; aspect-ratio:16/9; background:var(--ph-soft, var(--surface-2)); color:var(--ph, var(--accent)); }
.art-placeholder svg { width:56px; height:56px; opacity:0.75; }

.road-figure { padding:10px 12px; }
.road-svg .road { fill:var(--surface-2); stroke:var(--border-strong); stroke-width:1.5; }
.road-svg .road-dash { stroke:var(--muted-2); stroke-width:2; stroke-dasharray:14 12; }
.road-svg .flag { fill:var(--accent); stroke:none; }
.road-svg .ms-dot { fill:var(--ph); stroke:var(--surface); stroke-width:4; }
.road-svg .ms-num { fill:#fff; font-size:22px !important; font-weight:800; }
.road-svg .ms-title { font-weight:700; font-size:14px !important; }
.road-svg .ms-end { fill:#f5c518; stroke:var(--surface); stroke-width:3; }
.road-svg a:hover .ms-dot, .road-svg a:focus .ms-dot { stroke:var(--ph); stroke-opacity:0.35; stroke-width:10; }

.roadmap-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; align-items:start; margin-top:6px; }
.phase-card { border:1px solid var(--border); border-radius:16px; background:var(--surface); overflow:hidden; box-shadow:var(--shadow-sm); scroll-margin-top:calc(var(--topbar-h) + 16px); }
.phase-card:target { box-shadow:0 0 0 3px var(--ph); }
.phase-band { display:flex; align-items:center; gap:10px; padding:12px 14px; background:var(--ph-band); color:var(--ink); }
.phase-num { font-size:1.9rem; font-weight:800; line-height:1; color:var(--ph); }
.phase-title { font-weight:800; font-size:1rem; line-height:1.2; flex:1; }
.phase-start { padding:3px 9px; border-radius:999px; background:var(--surface); color:var(--ph); font-size:0.7rem; font-weight:800; text-transform:uppercase; letter-spacing:0.06em; white-space:nowrap; }
.phase-art { margin:12px 12px 4px; border-radius:12px; overflow:hidden; border:1px solid var(--border); background:#fff; }
.phase-art img { display:block; width:100%; height:auto; }
.phase-card h4 { margin:12px 14px 4px; font-size:0.74rem; text-transform:uppercase; letter-spacing:0.07em; color:var(--ph); }
.phase-card ul { margin:0 14px; padding:8px 10px 8px 26px; border-radius:10px; background:var(--ph-soft); color:var(--ink-soft); font-size:0.84rem; line-height:1.55; }
.phase-card li { margin:3px 0; }
.phase-chips { display:flex; flex-wrap:wrap; gap:6px; margin:4px 14px 16px; }
.phase-chip { display:inline-flex; padding:4px 10px; border-radius:999px; border:1px solid var(--ph); background:var(--surface); color:var(--ink); font-size:0.78rem; font-weight:600; text-decoration:none; }
.phase-chip:hover { background:var(--ph-soft); }
.phase-chip.is-soon { border-style:dashed; opacity:0.7; }

.module-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:16px 0 8px; }
.module-card { display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:20px 14px; border:1px solid var(--border); border-radius:14px; background:var(--surface); color:var(--ink); text-decoration:none; transition:0.14s ease; }
.module-card:hover { border-color:var(--ph); background:var(--ph-soft); }
.module-icon { display:grid; place-items:center; width:48px; height:48px; border-radius:12px; background:var(--ph-soft); color:var(--ph); }
.module-icon svg { width:26px; height:26px; }
.module-title { font-weight:700; font-size:1rem; line-height:1.3; }
.module-sub { font-size:0.78rem; color:var(--muted); }

@media (max-width:1200px) { .roadmap-grid, .module-row { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:1000px) { .hub-hero { grid-template-columns:1fr; } .hub-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:700px) { .roadmap-grid, .module-row { grid-template-columns:1fr; } }

/* ---------- Hub v2: icons ---------- */
.hub-hero-copy h1 { font-size:clamp(1.8rem,3.4vw,2.6rem); }
.hub-hero-side { display:flex; flex-direction:column; gap:12px; }
.phase-tiles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.phase-tiles.is-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.phase-tile { display:flex; align-items:center; gap:10px; padding:10px; border:1px solid var(--border); border-radius:12px; background:var(--ph-soft); color:var(--ink); text-decoration:none; min-width:0; transition:0.14s ease; }
.phase-tile:hover { border-color:var(--ph); box-shadow:0 0 0 3px var(--ph-band); }
.phase-tiles.is-grid .phase-tile { flex-direction:column; align-items:flex-start; padding:18px; min-height:150px; }
.phase-tile-icon { display:grid; place-items:center; flex:0 0 auto; width:38px; height:38px; border-radius:10px; background:var(--surface); color:var(--ph); box-shadow:var(--shadow-sm); }
.phase-tiles.is-grid .phase-tile-icon { width:52px; height:52px; border-radius:14px; }
.phase-tile-icon svg { width:20px; height:20px; }
.phase-tiles.is-grid .phase-tile-icon svg { width:28px; height:28px; }
.phase-tile-text { display:flex; flex-direction:column; min-width:0; }
.phase-tile-text small { font-size:0.68rem; font-weight:800; text-transform:uppercase; letter-spacing:0.07em; color:var(--ph); }
.phase-tile-text b { font-size:0.82rem; line-height:1.25; }
.phase-tiles.is-grid .phase-tile-text b { font-size:1rem; }
.index-stat .stat-icon { display:grid; place-items:center; width:34px; height:34px; margin-bottom:6px; border-radius:10px; background:var(--accent-ghost); color:var(--accent-strong); }
.index-stat .stat-icon svg { width:18px; height:18px; }
.tta-tabs > button .tab-icon { width:16px; height:16px; margin-right:6px; vertical-align:-3px; }
.phase-card h4 { display:flex; align-items:center; gap:6px; }
.phase-card h4 .h4-icon { width:15px; height:15px; flex:0 0 auto; }
@media (max-width:1200px) { .phase-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ---------- Hub v2: the 16-step journey ---------- */
.journey-legend { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 10px; }
.journey-legend .legend-pill { text-decoration:none; color:var(--ink-soft); }
.journey-legend .legend-pill:hover { border-color:var(--ph); }
.journey-svg .road-path { fill:none; stroke:var(--surface-2); stroke-width:30; stroke-linecap:round; stroke-linejoin:round; }
.journey-svg .road-center { fill:none; stroke:var(--muted-2); stroke-width:2; stroke-dasharray:12 12; }
[data-theme="dark"] .journey-svg .road-path { stroke:#2a2a2a; }
.journey-svg .js-label { font-size:12.5px !important; font-weight:600; fill:var(--ink); }
.journey-svg .ms-num { font-size:17px !important; }
.journey-svg .js-stop:hover .ms-dot, .journey-svg .js-stop:focus .ms-dot { stroke:var(--ph); stroke-opacity:0.35; stroke-width:10; }
.journey-list { display:none; list-style:none; margin:8px 0 14px; padding:0 0 0 18px; border-left:3px dashed var(--border-strong); }
.journey-list li { position:relative; margin:0 0 8px; }
.journey-list a { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--ink); text-decoration:none; font-weight:600; font-size:0.9rem; }
.journey-list .jl-num { display:grid; place-items:center; flex:0 0 auto; width:28px; height:28px; border-radius:50%; background:var(--ph); color:#fff; font-weight:800; font-size:0.8rem; margin-left:-33px; box-shadow:0 0 0 3px var(--bg); }
@media (max-width:700px) { .road-figure:has(.journey-svg) { display:none; } .journey-list { display:block; } }

/* ---------- Hub v2: certifications ---------- */
.cert-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:6px; }
.cert-card { display:flex; flex-direction:column; gap:6px; padding:16px; border:1px solid var(--border); border-top:4px solid #d97757; border-radius:14px; background:var(--surface); box-shadow:var(--shadow-sm); }
.cert-card.is-istqb { border-top-color:#2563eb; }
.cert-head { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.cert-level { padding:2px 9px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); font-size:0.72rem; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.05em; }
.cert-price { font-weight:800; color:var(--ink); }
.cert-card h4 { margin:2px 0 0; font-size:1rem; color:var(--ink); line-height:1.3; }
.cert-provider { margin:0; font-size:0.8rem; color:var(--muted); }
.cert-card dl { margin:4px 0 0; display:grid; grid-template-columns:auto 1fr; gap:4px 10px; font-size:0.84rem; }
.cert-card dt { color:var(--muted); font-weight:600; }
.cert-card dd { margin:0; color:var(--ink-soft); }
.cert-foot { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:auto; padding-top:8px; border-top:1px dashed var(--border); font-size:0.82rem; }
.cert-foot a { color:var(--accent-strong); font-weight:700; }
.cert-roi { color:var(--ink-soft); font-weight:600; }
.cert-subhead { margin:22px 0 8px; font-size:1.05rem; color:var(--ink); }
.cert-free { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.cert-free li { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface); }
.cf-name { font-weight:600; color:var(--ink); font-size:0.88rem; }
.cf-links { display:flex; gap:10px; flex:0 0 auto; font-size:0.8rem; }
.cf-links a { color:var(--accent-strong); font-weight:700; }
.cf-guide { padding:2px 8px; border-radius:999px; background:var(--accent-ghost); text-decoration:none; }
.cf-soon { color:var(--muted); }
@media (max-width:1100px) { .cert-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:700px) { .cert-grid, .cert-free { grid-template-columns:1fr; } }

/* ---------- Hub v2: live apps ---------- */
.live-apps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:4px 0 18px; }
.live-card { display:flex; flex-direction:column; gap:8px; padding:18px; border:1px solid var(--border); border-radius:14px; background:linear-gradient(160deg, var(--accent-ghost) 0%, var(--surface) 55%); box-shadow:var(--shadow-sm); }
.live-tag { font-size:0.7rem; font-weight:800; text-transform:uppercase; letter-spacing:0.07em; color:var(--accent-strong); }
.live-card h3 { margin:0; font-size:1.1rem; color:var(--ink); }
.live-card p { margin:0; color:var(--ink-soft); font-size:0.9rem; line-height:1.6; flex:1; }
.live-foot { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.live-foot .tta-button { padding:7px 12px; font-size:0.84rem; }
@media (max-width:1000px) { .live-apps { grid-template-columns:1fr; } }

/* ---------- Native project pages ---------- */
.phase-dot { display:inline-block; width:12px; height:12px; border-radius:50%; background:var(--ph); margin-right:8px; vertical-align:1px; }
.path-steps { list-style:none; margin:0 0 8px; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.path-steps li { display:flex; gap:10px; padding:14px; border:1px solid var(--border); border-top:4px solid var(--ph); border-radius:12px; background:var(--surface); }
.path-steps .path-num { display:grid; place-items:center; flex:0 0 auto; width:30px; height:30px; border-radius:50%; background:var(--ph); color:#fff; font-weight:800; }
.path-steps b { color:var(--ink); }
.path-steps p { margin:4px 0 0; font-size:0.86rem; color:var(--ink-soft); line-height:1.55; }
.proj-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.proj-card { display:flex; flex-direction:column; border:1px solid var(--border); border-top:4px solid var(--ph); border-radius:14px; background:var(--surface); overflow:hidden; box-shadow:var(--shadow-sm); scroll-margin-top:calc(var(--topbar-h) + 16px); }
.proj-card:target { box-shadow:0 0 0 3px var(--ph); }
.proj-art { margin:0; aspect-ratio:16/9; background:var(--ph-soft); border-bottom:1px solid var(--border); }
.proj-art img { display:block; width:100%; height:100%; object-fit:cover; }
.proj-art .art-placeholder { height:100%; aspect-ratio:auto; }
.proj-body { flex:1; padding:16px; display:flex; flex-direction:column; gap:6px; }
.proj-head { display:flex; justify-content:space-between; gap:8px; }
.proj-num { font-family:"JetBrains Mono",monospace; font-size:0.74rem; font-weight:700; color:var(--ph); text-transform:uppercase; letter-spacing:0.06em; }
.proj-phase { font-size:0.72rem; font-weight:700; padding:1px 8px; border-radius:999px; background:var(--ph-soft); color:var(--ph); }
.proj-card h3 { margin:0; font-size:1.05rem; color:var(--ink); }
.proj-card p { margin:0; font-size:0.88rem; color:var(--ink-soft); line-height:1.6; }
.proj-card dl { margin:2px 0 0; display:grid; grid-template-columns:auto 1fr; gap:3px 10px; font-size:0.8rem; }
.proj-card dt { color:var(--muted); font-weight:600; }
.proj-card dd { margin:0; color:var(--ink-soft); }
.proj-points { margin:4px 0 0; padding-left:18px; font-size:0.82rem; color:var(--ink-soft); line-height:1.55; }
.proj-links { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:6px; }
.proj-links .tta-button { padding:5px 10px; font-size:0.78rem; }
.proj-mini-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.proj-mini { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--border); border-left:4px solid var(--ph); border-radius:10px; background:var(--surface); color:var(--ink); text-decoration:none; font-size:0.86rem; font-weight:600; }
.proj-mini:hover { background:var(--ph-soft); }
.shot-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.shot-grid.is-winners { grid-template-columns:repeat(4,minmax(0,1fr)); }
.shot-card { display:flex; flex-direction:column; border:1px solid var(--border); border-radius:14px; background:var(--surface); overflow:hidden; box-shadow:var(--shadow-sm); }
.shot-card.is-prize { border-top:4px solid #f5c518; }
.shot-card[hidden] { display:none; }
.shot-img { display:block; padding:0; border:0; border-bottom:1px solid var(--border); background:#fff; cursor:zoom-in; }
.shot-img img { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top; }
.shot-body { display:flex; flex-direction:column; gap:4px; padding:12px 14px 14px; flex:1; }
.shot-head { display:flex; align-items:center; gap:8px; }
.medal { display:grid; place-items:center; min-width:30px; height:30px; padding:0 6px; border-radius:999px; background:var(--surface-3); color:var(--ink); font-weight:800; font-size:0.8rem; }
.medal.is-prize { background:#f5c518; color:#3b2b00; }
.win-rank { font-size:0.74rem; font-weight:800; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted); }
.shot-card h3 { margin:2px 0 0; font-size:0.98rem; color:var(--ink); line-height:1.3; }
.shot-who { margin:0; font-size:0.82rem; color:var(--muted); }
.shot-links { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:8px; }
.shot-links .tta-button { padding:5px 10px; font-size:0.78rem; }
.entry-link { color:var(--accent-strong); font-weight:700; font-size:0.82rem; }
.compare-table .muted { color:var(--muted); font-size:0.84rem; }
.shot-dialog { padding:12px; border:1px solid var(--border); border-radius:14px; background:var(--surface); max-width:min(1200px,94vw); }
.shot-dialog::backdrop { background:rgba(10,15,25,0.7); }
.shot-dialog form { display:flex; justify-content:flex-end; margin-bottom:8px; }
.shot-dialog img { display:block; max-width:100%; max-height:80vh; border-radius:8px; }
@media (max-width:1200px) { .shot-grid.is-winners, .proj-mini-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .path-steps { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:1000px) { .proj-grid { grid-template-columns:1fr; } .shot-grid, .shot-grid.is-winners { grid-template-columns:repeat(2,minmax(0,1fr)); } .proj-mini-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:700px) { .shot-grid, .shot-grid.is-winners, .path-steps, .proj-mini-grid { grid-template-columns:1fr; } }

/* ---------- /ai/: the preserved guide catalog (original markup) in the new theme ---------- */
.ai-guides .grp { margin:0 0 26px; }
.ai-guides .grp > h2 { margin:22px 0 4px; font-size:1.25rem; color:var(--ink); letter-spacing:-0.01em; }
.ai-guides .grp > .sub { margin:0 0 12px; color:var(--muted); font-size:0.92rem; }
.ai-guides .grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.ai-guides .card { position:relative; display:flex; flex-direction:column; gap:6px; padding:16px; border:1px solid var(--border); border-radius:14px; background:var(--surface); box-shadow:var(--shadow-sm); transition:0.14s ease; }
.ai-guides .card:hover { border-color:var(--accent); background:var(--accent-ghost); }
.ai-guides .card .badge { position:absolute; top:12px; right:12px; padding:1px 8px; border-radius:999px; background:var(--accent-ghost); color:var(--accent-strong); font-size:0.66rem; font-weight:800; text-transform:uppercase; letter-spacing:0.06em; }
.ai-guides .card .em { font-size:1.5rem; line-height:1; }
.ai-guides .card h3 { margin:2px 0 0; font-size:1rem; color:var(--ink); padding-right:44px; }
.ai-guides .card p { margin:0; color:var(--ink-soft); font-size:0.86rem; line-height:1.55; flex:1; }
.ai-guides .card .go { color:var(--accent-strong); font-weight:700; font-size:0.84rem; }
.ai-guides .card .stretch { position:absolute; inset:0; border-radius:14px; }
.ai-guides .card .stretch:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media (max-width:1100px) { .ai-guides .grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:700px) { .ai-guides .grid { grid-template-columns:1fr; } }