:root{--paper:#f7f6f0;--ink:#263e38;--muted:#748079;--border:#dedfd5;--green:#2c7566;--green-link:#00c445;--blue:#526c9e;--blue-link:#0077ff;--purple-link:#9b26ff;--cyan-link:#00b8d9;--orange-link:#ff6d00;--magenta-link:#f50087;--track:#866491;--gold:#9c701e;--red:#b13840;--row:48px;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}body{margin:0;height:100dvh;display:grid;grid-template-columns:280px minmax(0,1fr);overflow:hidden}button,input{font:inherit}button{cursor:pointer}button,input,summary{touch-action:manipulation}button:focus-visible,input:focus-visible,summary:focus-visible,#viewport:focus-visible{outline:2px solid var(--green);outline-offset:4px}button{color:var(--ink)}.panel{padding:31px 25px 20px;border-right:1px solid var(--border);overflow:auto;background:#fcfbf7;display:flex;flex-direction:column;gap:24px}.eyebrow{font-size:9px;font-weight:650;letter-spacing:1.65px;display:flex;align-items:center;gap:8px;color:var(--muted)}.mark{font-size:23px;line-height:16px;color:var(--green)}h1{font-family:Georgia,serif;font-size:43px;letter-spacing:-2px;font-weight:400;margin:18px 0 13px}h1 span{color:var(--green)}.intro{color:var(--muted);font-size:12px;line-height:1.8;margin:0}label,legend{font-size:12px}form>label{display:block;margin-bottom:9px}.input-action{display:flex;gap:7px}input:not([type=checkbox]):not([type=range]){width:100%;min-width:0;background:#fffefa;border:1px solid #d4d9ce;padding:11px 10px;border-radius:6px;font-size:13px;color:var(--ink);font-variant-numeric:tabular-nums}.input-action button{border:0;border-radius:6px;background:#e4ede7;color:#285e52;padding:0 12px;font-size:11px;font-weight:650;white-space:nowrap}.input-action button:hover{background:#d5e4db}.hint{font-size:10px;line-height:1.6;color:var(--muted);margin:8px 0 0}#error{background:#fae9e3;color:#923c28;border-radius:5px;padding:9px;font-size:12px;margin:0}fieldset{border:0;border-top:1px solid var(--border);margin:0;padding:17px 0 0}legend{padding:0 8px 0 0;color:var(--muted);font-size:10px;letter-spacing:1px;text-transform:uppercase}.check{display:flex;gap:8px;align-items:center;margin:0 0 12px;font-size:11px;cursor:pointer}.check:last-child{margin-bottom:0}input[type=checkbox]{margin:0;accent-color:var(--green);width:13px;height:13px}.swatch{display:inline-block;width:16px;height:1px;vertical-align:middle;background:var(--green);flex:none}.swatch.red{background:var(--red);height:2px}.swatch.green{background:var(--green-link);height:2.5px}.swatch.blue-link{background:var(--blue-link);height:2.5px}.swatch.purple-link{background:var(--purple-link);height:2.5px}.swatch.cyan-link{background:var(--cyan-link);height:2.5px}.swatch.orange-link{background:var(--orange-link);height:2.5px}.swatch.magenta-link{background:var(--magenta-link);height:2.5px}.swatch.two{background:var(--blue)}.swatch.track{background:var(--track)}.spacing-control label{display:flex;justify-content:space-between}.spacing-control output{font-size:11px;color:var(--muted)}input[type=range]{width:100%;accent-color:var(--green);height:4px;margin:16px 0 0}.actions{display:flex;justify-content:space-between;gap:10px;margin-top:-12px}.quiet{padding:3px 0;border:0;background:transparent;font-size:11px;color:#607267}.quiet:hover{color:var(--green);text-decoration:underline}.reading-note{position:relative;padding:14px 14px 14px 31px;border-radius:6px;background:#edf0e8;font-size:11px;line-height:1.7;color:#52695d}.reading-note p{margin:0 0 9px}.reading-note p:last-child{margin:0}.note-number{position:absolute;left:12px;top:12px;font-size:17px}.formulas{font-size:11px;line-height:1.75;color:#67796f}.formulas summary{cursor:pointer;color:var(--ink)}.formulas p{margin:12px 0}.formulas strong{font-weight:550}.formulas .swatch{margin-right:5px}.panel footer{margin-top:auto;padding-top:8px;color:var(--muted);font-size:8px;letter-spacing:1px;display:flex;align-items:center;gap:6px}.local-dot{height:4px;width:4px;background:#7f9b82;border-radius:50%}.workspace{display:flex;flex-direction:column;min-width:0;height:100%;overflow:hidden}.diagram-heading{height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;gap:15px;font-size:9px;letter-spacing:1.5px;color:var(--muted);flex:none}.diagram-heading span:last-child{letter-spacing:0;font-size:11px}.column-headers{height:56px;overflow:hidden;border-bottom:1px solid var(--border);flex:none}#header-inner{height:100%;position:relative}.column-label{position:absolute;top:7px;transform:translateX(-50%);text-align:center;white-space:nowrap;font-size:11px}.column-label small{display:block;font-size:9px;letter-spacing:.25px;color:var(--muted);margin-top:5px}.column-label.child-label{color:var(--green)}.column-label.track-label{color:var(--track)}#viewport{overflow:auto;position:relative;flex:1;min-height:0;overscroll-behavior:contain;scrollbar-color:#c4cdbf var(--paper);scrollbar-width:thin;touch-action:pan-x}#surface{position:relative;min-height:100%}#rows{position:sticky;top:0;overflow:hidden;isolation:isolate}.red-links{position:absolute;left:0;top:0;pointer-events:none;z-index:1;overflow:visible}.red-same-line{stroke:var(--red);stroke-width:1.65;stroke-opacity:.82;vector-effect:non-scaling-stroke}.green-same-line{stroke:var(--green-link);stroke-width:2.1;stroke-opacity:.94;vector-effect:non-scaling-stroke}.blue-same-line{stroke:var(--blue-link);stroke-width:2.1;stroke-opacity:.92;vector-effect:non-scaling-stroke}#guides{position:absolute;inset:0;pointer-events:none;overflow:hidden}.guide{position:absolute;top:0;bottom:0;width:1px;background:#e3e8df}.guide.main{background:#adbdb0}.guide.track{background:#e8dfea}.guide.child{background:none;border-left:1px dashed #d9e2d7}.odd-row{position:absolute;left:0;height:var(--row);width:100%}.odd-row:after{content:"";position:absolute;left:28px;right:28px;top:50%;height:1px;background:#dde2d7;opacity:.22;z-index:0}.odd-row.active:before{content:"";position:absolute;inset:2px 0;background:#e8eee4;opacity:.7;z-index:0}.connections{position:absolute;left:0;top:50%;width:100%;height:2px;overflow:visible;pointer-events:none;z-index:1}.connections line{stroke-width:1;vector-effect:non-scaling-stroke}.connections .one-line{stroke:#6f9c8c}.connections .one-line.red-row-line{stroke:var(--red);stroke-width:2.1}.connections .one-line.blue-red-row-line{stroke:var(--purple-link);stroke-width:2.6}.connections .one-line.red-green-row-line{stroke:var(--magenta-link);stroke-width:2.6}.connections .two-line{stroke:#92a5c4}.connections .two-line.green-row-line{stroke:var(--green-link);stroke-width:2.5}.connections .two-line.blue-green-row-line{stroke:var(--cyan-link);stroke-width:2.6}.connections .two-line.green-red-row-line{stroke:var(--orange-link);stroke-width:2.6}.connections .root-line{stroke:#bd9d5f}.connections .track-line{stroke:#ad94b4}.connections .track-line.blue-row-line{stroke:var(--blue-link);stroke-width:2.5}.value{position:absolute;top:50%;transform:translate(-50%,-50%);border:0;background:var(--paper);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;line-height:1.4;white-space:nowrap;padding:5px 9px;border-radius:4px;max-width:176px;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums;z-index:2}.odd-row.active .value{background:#eef2e9}.value.central{font-weight:600;color:var(--ink)}.value.child{color:var(--green);font-size:13px;max-width:144px}.value.child.two{color:var(--blue)}.value.child.root{color:var(--gold)}.value.red-circled{border:1.85px solid var(--red);border-radius:999px;padding:3px 9px;background:#fcf6f5}.odd-row.active .value.red-circled{background:#f7ecea}.value.green-circled{border:2.2px solid var(--green-link);border-radius:999px;padding:3px 9px;background:#e6ffef;box-shadow:0 0 0 1px rgba(0,196,69,.18)}.odd-row.active .value.green-circled{background:#d4ffe3}.value.blue-circled{border:2.2px solid var(--blue-link);border-radius:999px;padding:3px 9px;background:#eaf4ff;box-shadow:0 0 0 1px rgba(0,119,255,.18)}.odd-row.active .value.blue-circled{background:#d8ebff}.value.track{color:var(--track);padding-right:23px;max-width:192px}.value.track.blue-circled{padding-right:23px}.value.track:after{content:"+";position:absolute;right:7px;top:50%;transform:translateY(-50%);font:11px system-ui;opacity:.5}.value.track.expanded:after{content:"→"}.value.track:hover{background:#eae1ed;color:#60476b}.value.child:hover{background:#e2ece5}.value.central.vine:after{content:"";display:inline-block;width:3px;height:3px;background:#9aa99c;border-radius:50%;margin-left:5px;vertical-align:middle}.value.central:hover{background:#e3eadd}.value.red-circled:hover{background:#f7e4e2}.value.green-circled:hover{background:#c8ffdc}.value.blue-circled:hover{background:#cce5ff}.root-star{font:10px system-ui;margin-left:3px}.status-bar{padding:12px 26px;font-size:10px;color:var(--muted);display:flex;justify-content:space-between;border-top:1px solid var(--border);gap:15px;flex:none}.tiny-arrow{color:var(--track);font-size:13px;margin-left:5px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:800px){body{grid-template-columns:225px minmax(0,1fr)}.panel{padding:22px 18px;gap:20px}h1{font-size:37px}.check{font-size:10px;gap:6px}.diagram-heading{padding:0 18px;flex-wrap:wrap;align-content:center;gap:5px;height:62px}.status-bar{padding:10px 18px}.status-bar span:last-child{display:none}}
@media(max-width:520px){body{grid-template-columns:170px minmax(0,1fr)}.panel{padding:18px 12px}.eyebrow{font-size:7px;letter-spacing:.8px}h1{font-size:32px}.intro{font-size:10px}.check{font-size:10px;gap:4px;align-items:start}.swatch{width:10px;margin-top:6px}.formulas .swatch{margin-top:0}.input-action{gap:4px}.input-action button{padding:0 7px;font-size:10px}.reading-note{padding:10px;font-size:10px}.note-number{display:none}.panel footer{font-size:6px}.diagram-heading span:first-child{display:none}.actions{flex-wrap:wrap;gap:5px}}
.track-length-control>label{display:block;margin-bottom:9px}
.workspace{position:relative}
#drawing-layer{position:absolute;z-index:5;pointer-events:none}
#drawing-layer.drawing-active{pointer-events:auto;cursor:crosshair;touch-action:none}
.drawing-controls{border-top:1px solid var(--border);padding-top:15px}
.drawing-title{display:flex;align-items:center;justify-content:space-between;font-size:12px}
.drawing-controls button:not(.pen-colour){border:1px solid #c9d7cc;border-radius:5px;background:#f1f5ef;padding:6px 9px;font-size:11px}
#draw-toggle[aria-pressed=true]{background:#2d645a;color:#fff;border-color:#2d645a}
.drawing-colours{display:flex;align-items:center;gap:10px;margin:12px 0}
.pen-colour{width:22px;height:22px;border:2px solid #fff;border-radius:50%;background:var(--pen);padding:0;box-shadow:0 0 0 1px #b4bfb6}
.pen-colour[aria-pressed=true]{box-shadow:0 0 0 2px var(--pen)}
.drawing-actions{display:flex;flex-wrap:wrap;gap:8px}
.drawing-controls button:disabled{opacity:.5;cursor:default}
#drawing-status:empty{display:none}
.subtree-card{background:#eef3ec;border:1px solid #c5d4c8;border-radius:6px;padding:11px 12px;font-size:11px;line-height:1.55;color:var(--ink)}
.subtree-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.subtree-clear{border:1px solid #b8c9bc;background:#fff;color:#285e52;border-radius:4px;padding:2px 8px;font-size:10px;font-weight:600}
.subtree-clear:hover{background:#e4ede7}
.subtree-body p{margin:4px 0}
.subtree-path{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;background:#fffefa;border:1px solid #d4ddd5;border-radius:4px;padding:5px 7px;margin-top:5px;word-break:break-word}
.value.selected-odd{box-shadow:0 0 0 2.5px #263e38 !important;font-weight:700}