:root{--ink:#18201f;--muted:#6d7775;--paper:#f5f4ee;--panel:rgba(251,250,246,.94);--line:#d9ddd7;--green:#1d6b52;--lime:#b6d746;--orange:#e77842;--blue:#3b709c;--purple:#755c9d}
*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--paper);color:var(--ink);font-family:"DM Sans",sans-serif}.shell{height:100%;display:grid;grid-template-columns:270px 1fr 300px;grid-template-rows:70px 1fr;position:relative}.topbar{grid-column:1/-1;display:grid;grid-template-columns:270px 1fr 300px;align-items:center;border-bottom:1px solid var(--line);background:#fbfaf6;z-index:5}.brand{height:100%;display:flex;align-items:center;gap:12px;padding:0 18px;border-right:1px solid var(--line)}.mark{display:grid;place-items:center;width:35px;height:35px;background:var(--green);color:white;font:700 20px "Space Mono";border-radius:5px}.eyebrow,.section-kicker{font:700 10px/1.2 "Space Mono";letter-spacing:.13em;color:#76807e;margin:0 0 4px}.brand h1{font-size:17px;margin:0}.status{justify-self:center;font:500 12px "Space Mono";color:var(--muted)}.status b{background:#e6e8e2;padding:3px 6px;border-radius:3px;color:var(--ink)}.pulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:#7aa73a;margin-right:8px;box-shadow:0 0 0 4px #e7efd7}.view-switch{justify-self:end;margin-right:18px;background:#e9e9e3;padding:3px;border-radius:6px}.view-switch button{border:0;background:transparent;padding:7px 14px;border-radius:4px;font:600 12px "DM Sans";cursor:pointer;color:var(--muted)}.view-switch button.active{background:white;color:var(--ink);box-shadow:0 1px 5px #0001}
.sidebar{background:var(--panel);z-index:4;overflow:auto}.left-panel{grid-column:1;border-right:1px solid var(--line);padding:22px 18px 30px}.left-panel section+section{border-top:1px solid var(--line);margin-top:22px;padding-top:20px}.toggle-row{position:relative;display:flex;align-items:center;justify-content:space-between;font-size:13px;padding:8px 0;cursor:pointer}.toggle-row span{display:flex;align-items:center}.swatch{width:9px;height:9px;border-radius:2px;margin-right:9px}.swatch.rack{background:#2c5d54}.swatch.pick{background:var(--orange)}.swatch.zones{background:var(--lime)}.swatch.upper{background:var(--purple)}.swatch.flow{background:var(--blue)}.swatch.location{background:#111;border-radius:50%}.toggle-row input{position:absolute;opacity:0}.toggle{width:28px;height:16px;border-radius:10px;background:#cdd1cc;position:relative}.toggle:after{content:"";position:absolute;width:12px;height:12px;background:#fff;left:2px;top:2px;border-radius:50%;transition:.2s;box-shadow:0 1px 2px #0003}.toggle-row input:checked+.toggle{background:var(--green)}.toggle-row input:checked+.toggle:after{transform:translateX(12px)}.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}.stats article{background:#ebece6;border-radius:6px;padding:11px}.stats strong{display:block;font:700 21px "Space Mono"}.stats span{font-size:10px;color:var(--muted)}.footnote{font-size:10px;line-height:1.45;color:var(--muted)}.meter{height:5px;border-radius:4px;background:#e1e2dc;overflow:hidden;margin:8px 0}.meter span{display:block;height:100%;background:var(--orange)}.confidence>div:last-child{display:flex;gap:10px;align-items:flex-start}.confidence b{font:700 17px "Space Mono"}.confidence span{font-size:10px;line-height:1.4;color:var(--muted)}
.level-card{display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:center;margin:7px 0;padding:8px 9px;border-left:3px solid var(--green);border-radius:3px;background:#e9ece7}.level-card b{font-size:10px}.level-card span{font-size:9px;color:var(--muted)}.level-card strong{grid-column:2;grid-row:1/3;font:700 18px "Space Mono"}.level-card.picking{border-color:var(--orange);background:#f3e8df}.level-card.compact{border-color:#dba65c;background:#f3ecdc}
.schema-options{display:grid;gap:6px;margin-top:9px}.schema-options button{position:relative;display:grid;gap:3px;width:100%;padding:9px 10px;text-align:left;border:1px solid var(--line);border-radius:5px;background:#eeefe9;color:var(--ink);cursor:pointer}.schema-options button:hover{border-color:#9eb4aa}.schema-options button.active{border-color:var(--green);background:#e6eee9;box-shadow:inset 3px 0 var(--green)}.schema-options b{font-size:10px}.schema-options code,.schema-explain code{font:700 9px "Space Mono";color:var(--green)}.schema-explain{margin-top:8px;padding:9px;background:#f2f0e9;border-radius:5px}.schema-explain>b{display:block;font-size:10px;margin-bottom:3px}.schema-explain>code{display:block;margin-bottom:7px}.schema-explain p{margin:5px 0;font-size:9px;line-height:1.35;color:var(--muted)}.schema-explain strong{color:var(--ink)}
#viewport{grid-column:2;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 45%,#fafaf6,#e7e8e1)}canvas{display:block}.viewport-help{position:absolute;top:14px;left:50%;transform:translateX(-50%);font-size:10px;color:#78817f;z-index:2;background:#f7f7f1cc;border:1px solid #dfe1da;padding:7px 10px;border-radius:20px;white-space:nowrap}.viewport-help span{color:#28312f;font-weight:700}.north{position:absolute;top:18px;right:20px;font:700 12px "Space Mono";z-index:2;text-align:center}.north span{display:block;font-size:21px;color:var(--green)}.legend{position:absolute;bottom:18px;left:18px;background:#fbfaf6e8;border:1px solid var(--line);padding:8px 10px;border-radius:5px;display:flex;gap:12px;font-size:10px}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px}.certain{background:#3e846d}.inferred{background:#dda33a}.unknown{background:#d2665d}#tooltip{position:absolute;display:none;pointer-events:none;z-index:10;background:#17201eef;color:#fff;padding:7px 9px;border-radius:4px;font-size:11px;box-shadow:0 6px 18px #0003}
.zone-tools{position:absolute;z-index:7;left:18px;top:18px;display:flex;gap:5px;padding:5px;background:#fbfaf6ec;border:1px solid var(--line);border-radius:7px;box-shadow:0 5px 18px #24332a16}.zone-tools button{border:1px solid transparent;background:#e7e9e3;color:#39423f;border-radius:4px;padding:7px 9px;font:600 10px "DM Sans";cursor:pointer}.zone-tools button:hover{background:#dde2dc}.zone-tools button.active{background:var(--green);color:white}.zone-tools button b{font:700 13px "Space Mono";margin-right:3px}.zone-tools #zoneReset{font-size:15px;padding:3px 9px}.edit-hint{display:none;position:absolute;z-index:7;left:50%;top:56px;transform:translateX(-50%);padding:7px 11px;border-radius:4px;background:#1d2d29e8;color:white;font-size:10px;pointer-events:none}.edit-hint.visible{display:block}
.right-panel{grid-column:3;border-left:1px solid var(--line);padding:22px 20px 30px;display:flex;flex-direction:column}.empty-detail{text-align:center;margin:auto 0}.inspect-icon{margin:0 auto 13px;width:43px;height:43px;border:1px solid #bcc5bf;border-radius:50%;display:grid;place-items:center;font-size:24px;color:var(--green)}.empty-detail h2{font-size:16px}.empty-detail p{font-size:12px;line-height:1.55;color:var(--muted)}.detail-head{display:flex;justify-content:space-between;align-items:flex-start}.detail-head h2{margin:0;font-size:23px}.detail-head button{border:0;background:#e8e9e3;width:28px;height:28px;border-radius:50%;font-size:19px;cursor:pointer}.badges{display:flex;flex-wrap:wrap;gap:5px;margin:13px 0}.badge{font:700 9px "Space Mono";letter-spacing:.04em;background:#e4ebe6;color:var(--green);padding:5px 7px;border-radius:3px}.badge.warn{background:#f4e5d9;color:#98532e}dl{margin:18px 0}dl div{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:12px}dt{color:var(--muted);flex:0 0 42%}dd{margin:0;font-weight:700;text-align:right;overflow-wrap:anywhere}.callout{font-size:11px;line-height:1.5;padding:11px;border-left:3px solid var(--orange);background:#f2ebe2}.sources{margin-top:auto;border-top:1px solid var(--line);padding-top:18px}.sources ul{list-style:none;padding:0;margin:0}.sources li{font-size:11px;padding:6px 0;color:var(--muted)}.sources b{font:700 12px "Space Mono";color:var(--ink);display:inline-block;width:22px}.sources span{float:right}
.zone-editor{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}.zone-editor label{display:block;color:var(--muted);font-size:10px;margin:8px 0}.zone-editor input{display:block;width:100%;margin-top:4px;border:1px solid #cfd5cf;background:white;border-radius:4px;padding:7px 8px;color:var(--ink);font:600 11px "DM Sans"}.zone-editor input[type=color]{height:33px;padding:3px}.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}.zone-editor>p:not(.section-kicker){font-size:10px;line-height:1.45;color:var(--muted)}.danger-button{width:100%;padding:8px;border:1px solid #d8b5aa;background:#fbefeb;color:#9b432b;border-radius:4px;font:600 10px "DM Sans";cursor:pointer}
.location-matrix{margin-top:14px;border:1px solid var(--line);border-radius:5px;background:#f7f6f1}.location-matrix summary{padding:10px;cursor:pointer;font-size:10px;font-weight:700}.location-matrix summary span{float:right;color:var(--green);font-family:"Space Mono"}.location-matrix>div{max-height:280px;overflow:auto;border-top:1px solid var(--line);padding:6px}.location-row{display:grid;grid-template-columns:1fr;gap:3px;padding:7px;border-bottom:1px solid #e2e3dd}.location-row:last-child{border:0}.location-row b{font:700 9px "Space Mono";color:var(--muted)}.location-row code{font:700 9px "Space Mono";color:#174f40;background:#e6eee9;padding:3px 5px;border-radius:2px}
@media(max-width:900px){.shell{grid-template-columns:1fr;grid-template-rows:64px 1fr}.topbar{grid-template-columns:1fr auto}.status{display:none}.view-switch{grid-column:2}.sidebar{display:none}#viewport{grid-column:1}.brand{border:0}.zone-tools{top:55px}.viewport-help{display:none}}