:root { --bg:#090909; --panel:rgba(20,20,20,.92); --panel-strong:rgba(13,13,13,.97); --line:rgba(212,176,110,.16); --text:#f3ead9; --muted:#baa68b; --accent:#b84021; --dig:#cf5342; --city:#5e9663; --final:#4e7ae6; --drop:#050505; --base:#7fb2ea; --route:#efe0bf; --route-border:#2a1d12; --kept:#d4b06e; --shadow:0 28px 80px rgba(0,0,0,.42); --radius:18px; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; font-family:"Space Grotesk",sans-serif; color:var(--text); background:radial-gradient(circle at top left, rgba(184,64,33,.16), transparent 26%), radial-gradient(circle at top right, rgba(78,122,230,.12), transparent 22%), linear-gradient(180deg, #0b0b0b 0%, var(--bg) 100%); }
.page-shell { width:min(1280px, calc(100vw - 32px)); margin:0 auto; padding:18px 0 40px; }
.hero,.panel { border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); box-shadow:var(--shadow); backdrop-filter:blur(10px); }
.hero { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:16px; padding:16px 18px; background:linear-gradient(135deg, rgba(20,20,20,.96), rgba(10,10,10,.98)), linear-gradient(90deg, rgba(184,64,33,.06), rgba(78,122,230,.05)); }
.eyebrow,.section-kicker { margin:0 0 10px; font-family:"IBM Plex Mono",monospace; text-transform:uppercase; letter-spacing:.14em; font-size:.8rem; color:var(--kept); }
h1,h2,h3 { margin:0; }
h1 { font-size:clamp(1.6rem,2.8vw,2.3rem); line-height:1.02; letter-spacing:-.03em; max-width:none; }
.intro-quote { margin:8px 0 0; max-width:52ch; color:var(--muted); line-height:1.45; font-size:.95rem; }
.hero-note { padding:12px 14px; border-radius:14px; background:rgba(255,255,255,.03); border:1px solid rgba(212,176,110,.12); align-self:center; }
.hero-note-label { margin:0; font-family:"IBM Plex Mono",monospace; text-transform:uppercase; letter-spacing:.12em; color:var(--kept); font-size:.78rem; }
.hero-note-value { margin:6px 0 0; font-size:1rem; font-weight:700; }
.hero-note-copy { margin:6px 0 0; color:var(--muted); line-height:1.45; font-size:.88rem; }
.layout { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px; margin-top:14px; }
.panel-wide { grid-column:span 2; }
.panel-head { display:flex; justify-content:space-between; align-items:end; gap:16px; padding:22px 22px 0; }
.panel-head h2 { font-size:1.8rem; }
.overview-grid,.rules-grid,.timeline-list,.step-list,.sources-copy,.final-grid,.mistakes-list { padding:18px 22px 22px; }
.overview-grid,.rules-grid,.final-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:14px; }
.info-card,.rule-card,.timeline-item,.step-card,.final-card,.mistake-card { padding:16px; border-radius:16px; border:1px solid var(--line); background:var(--panel-strong); }
.info-card p,.rule-card p,.timeline-item p,.step-card p,.final-card p,.mistake-card p,.sources-copy p { margin:8px 0 0; color:var(--muted); line-height:1.6; }
.rule-card .rule-source,.timeline-item .tiny,.step-card .tiny { font-family:"IBM Plex Mono",monospace; font-size:.8rem; color:var(--muted); }
.timeline-list,.step-list,.mistakes-list { display:grid; gap:12px; }
.tab-row { display:flex; gap:10px; flex-wrap:wrap; }
.tab-row button,.token,.source-links a { border:1px solid var(--line); border-radius:10px; font-family:"IBM Plex Mono",monospace; }
.tab-row button { padding:10px 14px; background:rgba(255,255,255,.03); color:var(--muted); cursor:pointer; text-transform:uppercase; letter-spacing:.08em; }
.tab-row button.is-active { background:linear-gradient(180deg, #c74a28, #9e3419); color:#fff7f0; border-color:rgba(255,255,255,.08); }
.map-layout { display:grid; grid-template-columns:minmax(0,1.7fr) 360px; gap:18px; padding:18px 22px 22px; }
.map-panel,.state-panel { padding:18px; border-radius:16px; border:1px solid var(--line); background:var(--panel-strong); }
.map-legend { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:14px; }
.map-help { margin:0 0 14px; color:var(--muted); line-height:1.55; font-size:.9rem; }
.legend-item { display:inline-flex; align-items:center; gap:8px; font-family:"IBM Plex Mono",monospace; font-size:.78rem; }
.legend-swatch { width:18px; height:18px; border-radius:999px; border:2px solid rgba(0,0,0,.08); }
.legend-swatch.base { background:var(--base); }
.legend-swatch.route { background:var(--route); border-radius:8px; }
.legend-swatch.dig { background:var(--dig); border-radius:8px; }
.legend-swatch.city { background:var(--city); border-radius:8px; }
.legend-swatch.kept { background:var(--kept); border-color:rgba(134,97,18,.32); border-radius:8px; }
.legend-swatch.dropped { background:linear-gradient(135deg, transparent 46%, var(--drop) 46%, var(--drop) 54%, transparent 54%); border-radius:8px; }
.route-map { position:relative; display:grid; grid-template-columns:repeat(13, 1fr); grid-template-rows:repeat(7, 98px); border-radius:24px; border:2px solid rgba(29,18,9,.9); background:linear-gradient(180deg, #c78a4c 0%, #d4a46d 100%); overflow:hidden; }
.map-cell { position:relative; border-right:2px solid rgba(29,18,9,.9); border-bottom:2px solid rgba(29,18,9,.9); padding:12px 6px 10px; display:flex; align-items:center; justify-content:center; text-align:center; transition:background-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.map-cell.has-note::after { content:""; position:absolute; inset:4px; border:1px dashed rgba(24,27,38,.45); border-radius:10px; pointer-events:none; }
.map-cell:nth-child(13n) { border-right:none; }
.map-cell:nth-last-child(-n + 13) { border-bottom:none; }
.map-cell.level-1 { background-color:#d7aa78; }
.map-cell.level-2 { background-color:#d2a06a; }
.map-cell.level-3 { background-color:#cb9558; }
.map-cell.level-4 { background-color:#c18544; }
.map-cell.level-5 { background-color:#b67537; }
.map-cell.level-6 { background-color:#a7672f; }
.map-cell.level-7 { background-color:#8e5728; }
.map-cell.state-kept { background-image:linear-gradient(180deg, rgba(240,194,95,.34), rgba(240,194,95,.16)); }
.map-cell.state-final { background-image:linear-gradient(180deg, rgba(42,103,210,.16), rgba(42,103,210,.06)); }
.map-cell.state-kept.state-final { background-image:linear-gradient(180deg, rgba(42,103,210,.22), rgba(240,194,95,.22)); }
.map-cell.state-dig { background-image:linear-gradient(180deg, rgba(200,75,59,.42), rgba(200,75,59,.2)); }
.map-cell.state-city { background-image:linear-gradient(180deg, rgba(62,143,88,.42), rgba(62,143,88,.2)); }
.map-cell.state-dig.state-kept { background-image:linear-gradient(180deg, rgba(200,75,59,.44), rgba(240,194,95,.2)); }
.map-cell.state-city.state-kept { background-image:linear-gradient(180deg, rgba(62,143,88,.42), rgba(240,194,95,.2)); }
.map-cell.state-drop { background-image:linear-gradient(180deg, rgba(17,17,17,.28), rgba(17,17,17,.12)); }
.map-cell.is-selected { box-shadow:inset 0 0 0 4px rgba(255,248,225,.98); }
.map-cell.is-selected.tone-dig { background-image:linear-gradient(180deg, rgba(200,75,59,.7), rgba(200,75,59,.34)); }
.map-cell.is-selected.tone-city { background-image:linear-gradient(180deg, rgba(62,143,88,.7), rgba(62,143,88,.34)); }
.map-cell.is-selected.tone-drop { background-image:linear-gradient(180deg, rgba(17,17,17,.42), rgba(17,17,17,.18)); }
.map-cell.is-focused { transform:scale(1.02); box-shadow:inset 0 0 0 4px rgba(255,255,255,.96), 0 0 0 2px rgba(36,24,16,.32); z-index:1; }
.map-cell-label { white-space:pre-line; font-size:.88rem; line-height:1.05; color:#3c2c1e; }
.map-cell-label.small { font-size:.76rem; }
.base-badge,.route-badge,.note-badge { position:absolute; display:inline-flex; align-items:center; justify-content:center; font-family:"IBM Plex Mono",monospace; font-weight:700; }
.base-badge { top:6px; left:50%; transform:translateX(-50%); width:18px; height:18px; border-radius:999px; background:var(--base); color:#fff; border:1.5px solid rgba(28,28,28,.85); box-shadow:0 1px 4px rgba(0,0,0,.16); font-size:.58rem; }
.note-badge { left:6px; bottom:6px; width:18px; height:18px; padding:0; border-radius:999px; background:rgba(27,31,43,.9); color:#fff9f0; border:1.5px solid rgba(255,255,255,.7); box-shadow:0 1px 4px rgba(0,0,0,.16); font-size:.62rem; cursor:pointer; z-index:2; appearance:none; -webkit-appearance:none; }
.note-badge:hover { transform:translateY(-1px); }
.tile-note-panel { margin-top:14px; padding:12px 14px; border-radius:14px; border:1px solid rgba(212,176,110,.12); background:rgba(255,255,255,.04); }
.tile-note-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.tile-note-head strong { font-size:.96rem; }
.close-note { padding:7px 10px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.04); color:var(--text); font-family:"IBM Plex Mono",monospace; font-size:.74rem; cursor:pointer; }
.route-badge { right:6px; bottom:6px; width:20px; height:20px; border-radius:7px; background:rgba(244,234,212,.96); color:#2f2014; border:1.5px solid var(--route-border); font-size:.62rem; box-shadow:0 2px 6px rgba(0,0,0,.1); }
.route-badge.is-dig { background:rgba(200,75,59,.94); color:#fff8f6; border-color:rgba(111,23,15,.9); }
.route-badge.is-city { background:rgba(62,143,88,.94); color:#f4fff7; border-color:rgba(22,79,42,.9); }
.route-badge.is-final { background:rgba(42,103,210,.94); color:#f5f9ff; border-color:rgba(14,48,108,.9); }
.route-badge.is-kept { box-shadow:0 0 0 3px rgba(240,194,95,.95), 0 2px 6px rgba(0,0,0,.12); }
.route-badge.is-dropped::after { content:"X"; position:absolute; inset:-3px; display:grid; place-items:center; color:rgba(0,0,0,.92); font-size:1.25rem; }
.state-summary-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.state-summary h3 { font-size:1.5rem; }
.state-summary p { margin:8px 0 0; color:var(--muted); line-height:1.6; }
.clear-selection { padding:9px 12px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.04); color:var(--text); font-family:"IBM Plex Mono",monospace; font-size:.76rem; cursor:pointer; }
.clear-selection:disabled { opacity:.45; cursor:default; }
.state-columns { display:grid; gap:12px; margin-top:16px; }
.state-card { padding:14px; border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.03); }
.state-card.is-active-group { border-color:rgba(212,176,110,.34); box-shadow:0 0 0 2px rgba(212,176,110,.18); }
.state-card-toggle { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0; border:none; background:transparent; color:var(--text); text-align:left; cursor:pointer; font:inherit; }
.state-card-toggle:disabled { cursor:default; opacity:.55; }
.state-card-toggle span:first-child { font-size:1rem; font-weight:600; }
.state-card-count { min-width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; border:1px solid var(--line); font-family:"IBM Plex Mono",monospace; font-size:.78rem; color:var(--muted); background:rgba(255,255,255,.05); }
.state-card-toggle.dig .state-card-count { color:var(--dig); }
.state-card-toggle.city .state-card-count { color:var(--city); }
.state-card-toggle.drop .state-card-count { color:var(--drop); }
.state-card p { margin:8px 0 0; color:var(--muted); }
.token-list { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.token { display:inline-flex; align-items:center; justify-content:center; min-width:42px; padding:10px 12px; background:rgba(255,255,255,.04); }
.token-button { cursor:pointer; transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease, background-color .16s ease; }
.token-button:hover { transform:translateY(-1px); }
.token-button.is-active-token { box-shadow:0 0 0 2px rgba(212,176,110,.26); background:rgba(255,255,255,.08); }
.token.dig { color:var(--dig); }
.token.city { color:var(--city); }
.token.final { color:var(--final); }
.token.drop { color:var(--drop); }
.source-links { display:flex; flex-wrap:wrap; gap:12px; margin-top:16px; }
.source-links a { text-decoration:none; color:var(--text); padding:10px 14px; background:rgba(255,255,255,.04); text-transform:uppercase; letter-spacing:.06em; }
.source-links a:hover { background:rgba(255,255,255,.08); }
@media (max-width: 1080px) { .hero,.map-layout,.layout { grid-template-columns:1fr; } .panel-wide { grid-column:auto; } h1 { max-width:none; } }
@media (max-width: 760px) { .route-map { grid-template-rows:repeat(7, 78px); } .map-cell-label { font-size:.68rem; } .map-cell-label.small { font-size:.62rem; } .base-badge { width:16px; height:16px; font-size:.52rem; } .route-badge { width:18px; height:18px; font-size:.56rem; } }