:root{color-scheme:light;--ground:#f4f3ef;--panel:#fcfcf9;--plot:#fcfcfb;--ink:#292e2b;--muted:#5e6862;--line:#d4d8d1;--soft:#e8efeb;--accent:#2f6755;--accent-deep:#244f42;--on-accent:#fff;--header:#fbfcf8;--header-ink:#242e28;--series:#2a78d6;--travel:#777e88;--error:#a52b38;--success:#216348;--region1:#2a78d6;--region2:#eb6834;--region3:#1baf7a;--region4:#eda100;--region5:#e87ba4;--panel-shadow:0 10px 30px #14251a0b}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;--ground:#111513;--panel:#19201c;--plot:#1a1a19;--ink:#ecf0e9;--muted:#b0bbb1;--line:#35433a;--soft:#24362a;--accent:#b8cf98;--accent-deep:#cbdcb0;--on-accent:#17251b;--header:#151c17;--header-ink:#ecf0e9;--series:#3987e5;--travel:#a2a9b4;--error:#ffacb8;--success:#91dbb9;--region1:#3987e5;--region2:#d95926;--region3:#199e70;--region4:#c98500;--region5:#d55181;--panel-shadow:0 12px 34px #00000030}}
:root[data-theme=dark]{color-scheme:dark;--ground:#111513;--panel:#19201c;--plot:#1a1a19;--ink:#ecf0e9;--muted:#b0bbb1;--line:#35433a;--soft:#24362a;--accent:#b8cf98;--accent-deep:#cbdcb0;--on-accent:#17251b;--header:#151c17;--header-ink:#ecf0e9;--series:#3987e5;--travel:#a2a9b4;--error:#ffacb8;--success:#91dbb9;--region1:#3987e5;--region2:#d95926;--region3:#199e70;--region4:#c98500;--region5:#d55181;--panel-shadow:0 12px 34px #00000030}
*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:var(--ground);color:var(--ink);font:15px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif}h1,h2,h3,p{margin:0}h1{font-size:clamp(25px,2.6vw,34px);letter-spacing:-.025em;line-height:1.2;text-wrap:balance}h2{font-size:22px;line-height:1.3}h3{font-size:16px;line-height:1.4;margin:24px 0 10px}p{color:var(--muted)}a{color:var(--accent);text-underline-offset:4px}button,input,select{font:inherit;color:inherit}button,.button,select,.file-button{border:1px solid var(--line);border-radius:9px;min-height:42px;padding:10px 15px;background:var(--panel);line-height:1.25}button,.button,.file-button{cursor:pointer}.button{text-decoration:none;display:inline-flex;align-items:center}button:hover:not(:disabled),.button:hover,select:hover{border-color:var(--accent);background:var(--soft)}button:disabled{opacity:.48;cursor:not-allowed}.primary{font-weight:650;color:var(--on-accent);background:var(--accent);border-color:var(--accent)}.primary:hover:not(:disabled){background:var(--accent-deep);color:var(--on-accent)}:focus-visible{outline:3px solid var(--accent);outline-offset:3px}input{accent-color:var(--accent);caret-color:var(--accent)}input[type=range]{width:100%;min-width:50px}input[type=color]{height:40px;width:54px;padding:4px;border:1px solid var(--line);background:var(--panel);border-radius:8px}::selection{background:var(--accent);color:var(--on-accent)}*{scrollbar-color:var(--line) var(--panel);scrollbar-width:thin}.shell{max-width:1500px;margin:auto;padding:0 32px}.app-header{background:var(--header);color:var(--header-ink);border-bottom:1px solid var(--line);box-shadow:0 4px 20px #0b17100a}.header-inner{display:flex;align-items:center;gap:30px;min-height:84px}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--header-ink);flex-shrink:0}.brand svg{width:44px;height:44px}.brand span{font-size:24px;font-weight:730;letter-spacing:-.02em;line-height:1.2}.brand small{display:block;font-size:12px;font-weight:450;letter-spacing:0;color:var(--muted);margin-top:3px}.main-nav{display:flex;align-items:center;gap:5px;margin:auto}.main-nav button{color:var(--header-ink);background:transparent;border-color:transparent;padding:10px 13px;font-size:14px}.main-nav button:hover:not(:disabled){background:var(--soft);border-color:transparent}.main-nav button[aria-current=page]{background:var(--soft);border-color:var(--line)}.theme-button{font-size:13px;min-height:36px;padding:8px 11px;background:transparent;color:var(--header-ink);border-color:var(--line)}.theme-button:hover:not(:disabled){background:var(--soft);border-color:var(--accent)}.intro{display:flex;justify-content:space-between;align-items:center;gap:24px;margin:28px 0 17px}.intro>div:first-child{max-width:830px}.intro p{margin-top:9px;max-width:72ch}.model-state{padding-left:18px;position:relative;font-size:13px;max-width:310px;flex-shrink:0}.state-dot{position:absolute;top:7px;left:0;width:8px;height:8px;border-radius:50%;background:var(--muted)}.model-state.ready .state-dot{background:var(--success)}.model-state details{margin-top:5px}.model-state summary{font-size:12px;font-weight:500}.model-state details p{font-size:12px;margin-top:6px}.status{min-height:25px;font-size:14px;margin:0 0 17px;overflow-wrap:anywhere}.status.error{color:var(--error);font-weight:600}.status.success{color:var(--success)}.import-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.file-button{position:relative;cursor:pointer}.file-button input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.file-button:focus-within{outline:3px solid var(--accent);outline-offset:3px}#drop{font-size:13px;color:var(--muted);padding:8px;flex:1 1 270px}#drop.over{background:var(--soft);outline:2px dashed var(--accent);outline-offset:2px;border-radius:6px}.quick-guide{position:relative;margin-left:auto;font-size:13px}.quick-guide summary{cursor:pointer;min-height:40px;padding:10px 14px;background:var(--panel);border:1px solid var(--line);border-radius:9px}.quick-guide ol{position:absolute;z-index:4;right:0;width:330px;padding:20px 22px 20px 40px;background:var(--panel);box-shadow:0 8px 26px #14253a24;border:1px solid var(--line);border-radius:10px;margin-top:8px}.quick-guide li{margin:8px 0}.session-note{display:flex;gap:14px;flex-wrap:wrap;background:var(--soft);border:1px solid var(--line);padding:11px 15px;border-radius:9px;margin:17px 0;font-size:13px}.session-note span{flex:1 1 400px}.drawing-strip{margin:19px 0 20px}#drawings{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:11px}.empty-note{grid-column:1/-1;color:var(--muted);font-size:14px;padding:16px 0}.drawing-choice{display:grid;grid-template-columns:54px 1fr;align-items:center;gap:10px;text-align:left;padding:12px;min-height:88px}.drawing-choice canvas{width:54px;height:48px;background:var(--plot);border-radius:6px}.drawing-choice strong{font-size:14px;display:block}.drawing-choice small{display:block;font-size:12px;color:var(--muted);margin-top:2px}.mini-code{display:block;font:650 15px/1.4 ui-monospace,Consolas,monospace;margin-top:4px;letter-spacing:.025em}.drawing-choice[aria-pressed=true]{background:var(--soft);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;margin-bottom:32px;align-items:start}.viewer{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:22px;min-width:0;overflow:hidden;box-shadow:var(--panel-shadow)}.viewer-head{display:flex;justify-content:space-between;align-items:start;gap:18px;margin-bottom:18px}.viewer-head p{font-size:13px;margin-top:5px;overflow-wrap:anywhere}.view-tools{display:flex;flex-direction:column;align-items:end;gap:8px}.view-tools label{display:grid;gap:4px;font-size:12px}.view-tools select{font-size:13px;min-height:35px;padding:7px 9px;max-width:270px}.zoom-controls{display:flex;align-items:center;gap:6px}.zoom-controls button{min-height:30px;padding:5px 8px;font-size:12px}.zoom-controls output{min-width:45px;font-size:12px;font-variant-numeric:tabular-nums;text-align:center}.canvas-area{display:grid;grid-template-columns:1fr;gap:16px}.canvas-area.comparing{grid-template-columns:1fr 1fr}.plot-wrap{position:relative;background:var(--plot);border:1px solid var(--line);border-radius:10px;aspect-ratio:3/2;overflow:hidden}.plot-wrap canvas,#truth-plot{display:block;width:100%;height:100%;background:var(--plot);touch-action:pan-y}.plot-wrap canvas{cursor:crosshair}#plot-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:22px;color:var(--muted);pointer-events:none}#plot-empty small{font-size:14px;margin-top:8px}.graph-loading-track{width:min(260px,65%);height:6px;margin:19px 0 9px;border-radius:6px;background:var(--line);overflow:hidden}.graph-loading-track>span{display:block;width:40%;height:100%;border-radius:6px;background:var(--accent);animation:ink-loading-slide 1.4s ease-in-out infinite}@keyframes ink-loading-slide{from{transform:translateX(-105%)}to{transform:translateX(350%)}}#truth-preview{min-width:0;display:grid;grid-template-rows:auto 1fr auto;background:var(--plot);border:1px solid var(--line);border-radius:10px;overflow:hidden}#truth-preview h3{font-size:13px;margin:0;padding:10px 13px;background:var(--panel)}#truth-preview canvas{aspect-ratio:3/2;height:auto}#truth-preview p{padding:8px 12px;background:var(--panel)}.region-legend{display:flex;gap:8px 17px;flex-wrap:wrap;margin:14px 0 8px;font-size:13px}.region-key{display:flex;align-items:center;gap:7px}.region-key i{display:block;width:20px;height:2px;background:var(--region1)}.plot-caption{font-size:12px;margin:9px 0 18px;max-width:82ch}.plot-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px}.plot-controls button{font-size:12px;padding:9px 10px;min-height:36px}.play-button{font-weight:650;border-color:var(--accent);background:var(--soft)}.plot-controls label{display:flex;align-items:center;gap:7px}.plot-controls select{font-size:12px;min-height:36px;padding:7px}.seek-label{flex:1 1 140px}.plot-controls output{min-width:50px;font-variant-numeric:tabular-nums}.ink-tools{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}details{margin-top:14px;font-size:13px}summary{cursor:pointer;font-weight:600;min-height:30px}.ink-tools summary span{font-weight:400;font-size:12px;color:var(--muted);display:inline;margin-left:8px}.tool-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px 15px;margin-top:18px}.tool-grid label{display:grid;gap:6px;font-size:12px;min-width:0}.tool-grid select{font-size:12px;padding:8px;min-width:0}.tool-grid output{font-variant-numeric:tabular-nums}.tool-grid .check-label{display:flex;align-items:center;gap:7px;line-height:1.35}.readout{font-size:12px;color:var(--ink);padding:12px 0 4px;min-height:37px;font-variant-numeric:tabular-nums}.small{font-size:12px}.table-scroll{max-height:220px;overflow:auto;margin-top:14px}table{border-collapse:collapse;width:100%;font-size:12px;font-variant-numeric:tabular-nums}th,td{padding:7px 9px;border-bottom:1px solid var(--line);text-align:right}th{position:sticky;top:0;background:var(--panel)}th:first-child,td:first-child{text-align:left}.viewer details p{margin:10px 0}.viewer details button{font-size:12px}.answer-panel{padding:10px 0 0;min-width:0}.answer-panel>p{font-size:14px;margin:11px 0 23px}.answer-panel label{display:grid;font-size:13px;font-weight:600;gap:7px}.answer-panel input[type=text]{width:100%;border:1px solid var(--line);border-radius:10px;background:var(--panel);font:650 35px/1.25 ui-monospace,Consolas,monospace;letter-spacing:.08em;padding:17px 13px;min-height:72px}.answer-panel input[type=text]::placeholder{font-size:17px;font-weight:400;letter-spacing:0}.answer-panel input[readonly]{background:var(--soft)}#answer-validation{min-height:20px;margin:9px 0 15px}.answer-panel>button{width:100%;min-height:46px}.letter-row{display:grid;grid-template-columns:22px repeat(3,minmax(0,1fr));align-items:center;gap:8px;margin:11px 0}.letter-row>span{font-size:12px;color:var(--muted)}.letter-row button{font:650 20px ui-monospace,Consolas,monospace;min-height:44px;padding:9px 5px}.letter-row button[aria-pressed=true]{background:var(--soft);border-color:var(--accent)}#candidates{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}#candidates button{font:14px ui-monospace,Consolas,monospace}.answer-footer{display:grid;gap:9px;border-top:1px solid var(--line);padding-top:19px;margin-top:25px}.answer-footer p{margin-top:5px}#practice-reading{margin-top:22px}#practice-reading input[type=text]{font-size:26px;min-height:60px}#practice-reading>button{width:100%;margin:12px 0}#practice-reading>p{margin:4px 0 16px}.answer-reveal{border-top:1px solid var(--line);padding-top:16px}.answer-reveal button{width:100%;margin:12px 0}.answer-reveal #truth-code{display:block;font:700 31px ui-monospace,Consolas,monospace;padding:14px 0}.answer-reveal p{font-size:13px;margin:6px 0}.content-page{margin:28px 0 40px;min-height:570px}.content-page h2{font-size:27px;max-width:75ch}.content-page p{margin:14px 0}.reading-width{max-width:75ch}.guide-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:70px}.guide-layout aside{background:var(--soft);padding:28px;border:1px solid var(--line);border-radius:13px}.guide-layout aside h2{font-size:21px}.guide-layout aside li{margin:11px 0}.step-list{padding-left:25px;max-width:78ch;margin-top:22px}.step-list li{padding:0 0 22px 12px}.step-list strong{font-size:18px;display:block}.step-list span{display:block;color:var(--muted);margin-top:5px}.backup-list{margin:28px 0;border-top:1px solid var(--line)}.backup-row{display:grid;grid-template-columns:1fr auto;gap:20px;padding:20px 0;border-bottom:1px solid var(--line);align-items:center}.backup-row h3{margin:0 0 6px;font-size:18px}.backup-row p{font-size:14px;margin:0}.backup-row small{font-size:12px;color:var(--muted)}.backup-instructions{max-width:78ch;margin-top:30px}.backup-instructions li{margin:10px 0}footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding:20px 0 30px}code{font-family:ui-monospace,Consolas,monospace}.skip{position:fixed;top:10px;left:10px;z-index:20;padding:11px 18px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:8px;transform:translateY(-150%)}.skip:focus{transform:none}button,.button,select,.drawing-choice{transition:background-color .17s ease-out,border-color .17s ease-out,box-shadow .17s ease-out}.viewer{transition:box-shadow .18s ease-out}::view-transition-old(root),::view-transition-new(root){animation-duration:.16s}@media(max-width:1240px){.drawing-choice{grid-template-columns:1fr;gap:5px}.drawing-choice canvas{display:none}.workspace{grid-template-columns:minmax(0,1fr) 280px;gap:20px}.header-inner{gap:18px}.main-nav{gap:1px}.main-nav button{padding:10px 8px}.shell{padding:0 24px}.tool-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:960px){.header-inner{flex-wrap:wrap;gap:10px;padding-top:15px;padding-bottom:12px}.main-nav{order:3;width:100%;justify-content:center;border-top:1px solid var(--line);padding-top:8px}.theme-button{margin-left:auto}.intro{align-items:start}.model-state{max-width:250px}.workspace{grid-template-columns:minmax(0,1fr) 245px;gap:17px}.viewer{padding:18px}.viewer-head{flex-direction:column}.view-tools{flex-direction:row;align-items:center;flex-wrap:wrap;width:100%;justify-content:space-between}.view-tools label{max-width:250px}.guide-layout{grid-template-columns:1fr 310px;gap:28px}.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:760px){.workspace{grid-template-columns:1fr}.answer-panel{padding:18px;background:var(--panel);border:1px solid var(--line);border-radius:13px}.answer-panel input[type=text],.answer-panel>button,.letter-row,#practice-reading{max-width:450px}.intro{flex-direction:column;gap:14px}.model-state{max-width:100%;width:100%;font-size:13px}#drawings{grid-template-columns:repeat(3,minmax(0,1fr))}.drawing-choice{min-height:88px;padding:12px}.drawing-choice strong{font-size:13px}.guide-layout{grid-template-columns:1fr}.guide-layout aside{padding:22px}.canvas-area.comparing{grid-template-columns:1fr}.quick-guide{margin-left:0}.quick-guide ol{left:0;right:auto;width:min(330px,calc(100vw - 40px))}.ink-tools summary span{display:block;margin:4px 0 0}.content-page h2{font-size:23px}.plot-controls{row-gap:12px}.seek-label{order:10;flex-basis:calc(100% - 70px)}#time-output{order:11}.answer-panel h2{font-size:22px}}@media(max-width:440px){.shell{padding:0 16px}.header-inner{gap:8px}.brand span{font-size:22px}.brand svg{width:40px;height:40px}.main-nav{justify-content:space-between}.main-nav button{font-size:12px;padding:9px 7px;min-height:37px}.theme-button{font-size:12px}.intro{margin-top:23px}h1{font-size:27px}.import-bar{gap:9px}.import-bar>button,.file-button{font-size:13px;padding:10px 12px}#drop{font-size:12px;padding:5px 0}.session-note{gap:6px}.drawing-strip{margin-top:17px}.drawing-choice{padding:10px;min-height:84px}.drawing-choice small{font-size:12px}.mini-code{font-size:14px}.viewer{padding:15px}.viewer-head h2{font-size:20px}.view-tools select{max-width:228px;font-size:12px}.plot-caption{font-size:12px}.plot-controls #step-back,.plot-controls #step-forward{font-size:12px;padding:8px}.tool-grid{column-gap:13px}.region-legend{gap:7px 12px;font-size:12px}.backup-row{grid-template-columns:1fr}.backup-row .button{justify-self:start}.step-list strong{font-size:16px}.guide-layout aside{padding:18px}.step-list span,.guide-layout aside p,.guide-layout aside li{font-size:14px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}::view-transition-old(root),::view-transition-new(root){animation:none!important}}@media(forced-colors:active){.region-key i{background:CanvasText}.state-dot{background:CanvasText}.drawing-choice[aria-pressed=true]{outline:2px solid Highlight}.primary{border:2px solid ButtonText}}