:root { color-scheme: light; --paper:#f6f7f4; --paper-2:#fff; --pencil:#1f2433; --pencil-60:#5f6570; --pencil-25:#bfc2c8; --pencil-12:#e0e2e6; --postit:#e6ebfa; --marker:#c4562f; --chart-paper:#fcfcfb; --series-1:#2a78d6; --series-2:#eb6834; }
:root[data-theme='dark'] { color-scheme:dark; --chart-paper:#1a1a19; --series-1:#3987e5; --series-2:#d95926; }
* { box-sizing:border-box; }
body { margin:0; padding:12px; color:var(--pencil); background:var(--paper); font:16px/1.7 'LXGW WenKai Screen','Microsoft YaHei',sans-serif; }
button,input,select { font:inherit; }
button,select { color:var(--pencil); background:var(--paper-2); border:1px solid var(--pencil-25); border-radius:7px; min-height:42px; padding:7px 13px; }
button { cursor:pointer; }
button:hover,button[aria-pressed='true'] { background:var(--postit); border-color:var(--pencil); }
button:disabled { opacity:.55; cursor:default; }
:focus-visible { outline:3px solid var(--marker); outline-offset:3px; }
[hidden] { display:none!important; }
h1,h2,h3,p { margin:0 0 12px; }
h1 { font-size:1.3rem; } h2 { font-size:1.12rem; } h3 { font-size:1rem; }
small,.muted { color:var(--pencil-60); } small { font-size:.86rem; }
.lab-head { display:flex; gap:12px; align-items:start; justify-content:space-between; margin-bottom:16px; }
.eyebrow { display:block; font:12px/1.5 system-ui,sans-serif; letter-spacing:.12em; margin-bottom:5px; color:var(--pencil-60); }
.panel { padding:18px; border:1px solid var(--pencil-25); border-radius:12px 8px 14px 8px; background:var(--paper-2); margin:14px 0; min-width:0; }
.controls { display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; margin:14px 0; }
.controls label { display:grid; gap:3px; min-width:0; flex:1 1 160px; }
input[type='range'] { accent-color:var(--marker); width:100%; min-height:32px; }
input[type='number'] { max-width:100%; width:90px; color:var(--pencil); background:var(--paper-2); border:1px solid var(--pencil-25); border-radius:5px; padding:6px; }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.choice { display:grid; text-align:left; gap:5px; padding:16px; }
.choice strong { font-size:1.3rem; } .choice small { color:inherit; }
.feedback { background:var(--postit); border-left:3px solid var(--marker); padding:12px 15px; margin:14px 0; }
.status { min-height:3.5em; }
.table-wrap { overflow:auto; max-width:100%; }
table { width:100%; border-collapse:collapse; font-size:.88rem; font-variant-numeric:tabular-nums; }
caption { text-align:left; padding:8px 0; font-weight:bold; }
th,td { text-align:left; padding:7px 9px; border-bottom:1px solid var(--pencil-12); white-space:nowrap; }
th { font-weight:600; }
summary { cursor:pointer; padding:8px 0; }
code,pre { font:13px/1.7 ui-monospace,monospace; }
pre { padding:12px; overflow:auto; background:var(--paper); border-radius:6px; }
.legend { display:flex; flex-wrap:wrap; gap:6px 20px; margin:8px 0; font-size:.9rem; }
.legend span { display:inline-flex; gap:7px; align-items:center; }
.key { display:inline-block; width:24px; border-top:2px solid var(--series-1); }
.bar-key { display:inline-block; width:18px; height:8px; background:var(--series-1); }
.bar-key.second { background:var(--series-2); }
.key.second { border-color:var(--series-2); border-top-style:dashed; }
.chart { background:var(--chart-paper); border-radius:8px; padding:8px; margin:12px 0; min-width:0; }
.chart svg { display:block; width:100%; touch-action:pan-y; overflow:visible; }
.chart text { fill:var(--pencil); font:12px system-ui,sans-serif; }
.chart .gridline { stroke:var(--pencil-12); stroke-width:1; }
.chart .curve { fill:none; stroke:var(--series-1); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.chart .curve.second { stroke:var(--series-2); stroke-dasharray:6 4; }
.chart .crosshair { stroke:var(--pencil-25); stroke-width:1; }
.readout { display:block; min-height:3em; padding:6px 0; font:13px/1.6 system-ui,sans-serif; color:var(--pencil); }
.inspect { display:flex; align-items:center; gap:12px; font-size:.85rem; }
.inspect input { flex:1; }
.bar-row { position:relative; display:grid; grid-template-columns:28px minmax(0,1fr) 65px; align-items:center; gap:10px; padding:12px 0; outline-offset:2px; }
.bar-track { height:16px; border-left:1px solid var(--pencil-25); background:var(--paper); }
.bar { display:block; height:100%; border-radius:0 4px 4px 0; background:var(--series-1); }
.bar.second { background:var(--series-2); }
.bar-hint { display:none; position:absolute; z-index:1; top:100%; left:32px; padding:5px 10px; background:var(--paper-2); border:1px solid var(--pencil-25); border-radius:4px; }
.bar-row:hover .bar-hint,.bar-row:focus .bar-hint { display:block; }
.texture .bar { background-image:repeating-linear-gradient(45deg,transparent 0 4px,#0005 4px 5px); }
.texture .bar.second { background-image:repeating-linear-gradient(135deg,transparent 0 4px,#0005 4px 5px); }
.evidence { padding-left:23px; } .evidence li { margin:8px 0; }
.mini-map { width:100%; max-height:280px; background:var(--chart-paper); border-radius:8px; }
.mini-map text { fill:var(--pencil); font:12px system-ui,sans-serif; }
.mini-map .axis { stroke:var(--pencil-25); }
.mini-map .expected { stroke:var(--series-1); fill:none; stroke-width:2; }
.mini-map .actual { stroke:var(--series-2); fill:none; stroke-width:2; }
@media(max-width:520px) { body { padding:8px; font-size:15px; } .panel { padding:12px; } .grid { grid-template-columns:1fr; } .lab-head { flex-wrap:wrap; } .lab-head h1 { flex-basis:100%; } .controls { gap:8px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }
@media print, (forced-colors:active) { .bar { background:CanvasText; } .bar.second { background:repeating-linear-gradient(135deg,Canvas 0 3px,CanvasText 3px 5px); } .curve { stroke:CanvasText!important; } }