:root {
  --scheme:dark; --bg:#111615; --text:#eeeade; --muted:#b1b9ae; --panel:#1b2220;
  --line:#3b4942; --accent:#edb18a; --on-accent:#221a16; --input:#141a18;
}
.hero { display:flex; align-items:end; justify-content:space-between; gap:15px; padding:32px 0 26px; }
.hero h1 { font-size:clamp(3.2rem,7.5vw,6.5rem); margin:0 0 9px; letter-spacing:-.064em; }
.hero p:last-child { margin:0; color:var(--muted); max-width:62ch; }
.hero .button { white-space:nowrap; }
.workspace { display:grid; grid-template-columns:minmax(0, 1.75fr) minmax(300px,1fr); gap:14px; align-items:start; }
.map, .inspector { background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden; min-width:0; }
.map { background:#151c19; }
.map-top { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:13px 17px; border-bottom:1px solid var(--line); }
.map-top h2 { margin:0 0 2px; }
.map-indicator { color:var(--muted); white-space:nowrap; }
.map svg { width:100%; height:auto; background:#131a17; }
.map-label, .diagram-value { font-family:ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing:.09em; font-weight:600; font-size:14px; }
.diagram-value { font-size:15px; letter-spacing:0; }
.person-label { fill:#c9c8b9; }
.contours { stroke:#9e9c86; stroke-opacity:.18; stroke-width:1; }
.map-bottom { display:flex; gap:15px; padding:11px 17px; border-top:1px solid var(--line); color:var(--muted); flex-wrap:wrap; font-size:.75rem; }
.map-bottom span { display:flex; align-items:center; gap:6px; }
.sample-line { width:17px; border-top:2px solid var(--accent); }
.sample-line.unknown { border-top-style:dotted; border-color:var(--muted); }
.map-text { padding:0 17px; border-top:1px solid var(--line); font-size:.85rem; }
.map-text div { padding:0 0 8px; color:var(--muted); }
.map-text p, .map-text li { overflow-wrap:anywhere; }
.panel-head { padding:13px 16px 9px; border-bottom:1px solid var(--line); }
.panel-head .kicker { margin-bottom:7px; }
.tabs { display:flex; flex-wrap:wrap; gap:4px; }
.tab { font-size:.78rem; padding:5px 8px; min-height:44px; border:1px solid transparent; border-radius:6px; background:transparent; color:var(--muted); }
.tab:hover { border-color:var(--line); }
.tab[aria-pressed=true] { background:#34302a; color:#f7c5a1; border-color:#654c3a; }
#panel { padding:16px; }
#panel h2 { font-size:clamp(1.75rem,3vw,2.35rem); margin-bottom:8px; letter-spacing:-.04em; }
#panel > p, #panel form > p { margin-bottom:13px; }
#panel .field { margin-bottom:12px; }
.source-form { border:1px solid var(--line); border-radius:8px; padding:12px; background:#18201d; }
.source-row { display:flex; align-items:flex-start; justify-content:space-between; gap:7px; padding:9px 0; border-bottom:1px solid var(--line); }
.source-row:first-child { padding-top:0; }
.source-row:last-child { border:0; }
.source-row p { margin:0; overflow-wrap:anywhere; }
.source-row .button { background:transparent; padding:5px 8px; }
.source-list { margin-bottom:8px; }
.preset { display:flex; flex-wrap:wrap; gap:5px; margin:-3px 0 12px; }
.preset .button { padding:6px 8px; font-size:.75rem; background:transparent; }
.status-text { display:block; font-size:.72rem; color:var(--muted); }
.field-group + .field-group { border-top:1px solid var(--line); padding-top:14px; margin-top:14px; }
.example-compare { border:1px solid #557362; border-radius:8px; padding:13px; margin-top:14px; background:#1a2923; }
.example-compare .button { margin-bottom:10px; }
.example-compare p { margin-bottom:7px; }
.example-compare p:last-child { margin-bottom:0; }
.below { display:flex; justify-content:space-between; align-items:flex-start; gap:12px 25px; margin-top:14px; }
.below p { max-width:75ch; margin:3px 0 0; }
.below .button-row { flex-shrink:0; }
@media(max-width:855px) {
  .workspace { grid-template-columns:1fr; }
  .below { flex-wrap:wrap; }
}
@media(max-width:550px) {
  .hero { align-items:flex-start; flex-direction:column; padding-top:25px; }
  .map-label { font-size:19px; letter-spacing:.025em; }
  .diagram-value { font-size:19px; }
  .map-top { padding-inline:11px; }
  .map-bottom { gap:6px 11px; padding-inline:11px; }
}

.sample-line.upstream { border-color:#9fd4d2; border-top-style:dashed; }
.trace-clue { margin:6px 0 12px; border-block:1px solid var(--line); }
.trace-clue summary { color:#b9dcda; font-size:.87rem; }
.trace-clue p { margin-bottom:9px; }
.source-heading { margin:12px 0 9px; font-size:.94rem; }

.sample-line.pressure { border-color:#edb18a; }
.sample-line.supportive { border-color:#8abfff; }
.trace-clue > summary.button { display:inline-flex; margin-block:6px; }
.trace-clue form label { margin-bottom:10px; }

.trace-clue .source-form label { margin-bottom:10px; }
.hero button[aria-pressed="true"] { border-color:var(--accent); }