:root{--ink:#18201d;--muted:#707873;--paper:#f2f0e9;--panel:#f8f7f2;--line:#d8d5ca;--teal:#126f68;--teal2:#5eb6a7;--coral:#ee765d;--gold:#d7ab42;--lav:#8b7eab}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif}.app-shell{min-height:100vh;display:grid;grid-template-columns:340px minmax(0,1fr)}.sidebar{height:100vh;overflow:auto;padding:26px 25px 22px;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:22px}.eyebrow{margin:0 0 8px;color:var(--teal);font-size:10px;font-weight:850;letter-spacing:.14em;text-transform:uppercase}.eyebrow a{color:inherit}.sidebar h1{font:400 35px/1.02 Georgia,serif;letter-spacing:-.03em;margin:0}.lede{margin:10px 0 0;color:var(--muted);font:15px/1.35 Georgia,serif;font-style:italic}.sidebar section{display:grid;gap:10px}.setting-card{padding:13px;border:1px solid #bed6cf;background:#edf6f2}.section-title{display:flex;align-items:center;gap:9px}.section-title>span{display:grid;place-items:center;width:23px;height:23px;border:1px solid var(--teal);border-radius:50%;color:var(--teal);font-size:9px;font-weight:800}.section-title h2{font:600 14px/1.2 Georgia,serif;margin:0}.setting-card p,.explain,details p{margin:0;color:var(--muted);font-size:11px;line-height:1.45}.setting-card strong{color:var(--ink)}code{font:10px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;color:#285c56}.tags{display:flex;flex-wrap:wrap;gap:5px}.tags span{padding:4px 6px;background:#fff;border:1px solid #d2e4df;color:#46625d;font-size:8px;text-transform:uppercase;letter-spacing:.06em}.equation{display:flex;align-items:end;gap:8px;padding:9px 10px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.equation b{font:28px Georgia,serif}.equation span{font-size:10px;color:var(--muted);margin-bottom:4px}.equation strong{margin-left:auto;color:var(--teal);font:24px Georgia,serif}.weights{display:grid;grid-template-columns:1fr 1fr;gap:6px}.weights div{display:grid;grid-template-columns:20px 1fr;align-items:center;gap:5px;padding:7px;background:#fff;border:1px solid var(--line)}.weights i{grid-row:1/3;width:14px;height:14px;transform:rotate(45deg)}.weights .thin{background:var(--gold);width:10px}.weights .thick{background:var(--teal2)}.weights span{font-size:9px;color:var(--muted)}.weights b{font-size:11px}.field{display:grid;grid-template-columns:1fr auto;gap:5px;align-items:center;font-size:10px;font-weight:750}.field input{grid-column:1/-1;width:100%;accent-color:var(--teal)}.field output{font:10px ui-monospace,monospace;color:var(--teal)}.check{display:flex;align-items:center;gap:7px;font-size:10px;color:var(--muted)}.check input{accent-color:var(--teal)}.run-row{margin-top:auto;display:grid;grid-template-columns:1.25fr .8fr .8fr;gap:6px}.run-row button{border:1px solid var(--line);background:#fff;padding:9px 7px;font-size:10px;font-weight:800;cursor:pointer}.run-row .primary{color:#fff;background:var(--teal);border-color:var(--teal)}.status{min-height:30px;margin:0;color:var(--muted);font-size:10px;line-height:1.4}details{border-top:1px solid var(--line);padding-top:10px}summary{font-size:10px;font-weight:800;cursor:pointer}details p{margin-top:8px}details a{color:var(--teal)}.stage{height:100vh;min-width:0;position:relative;overflow:hidden;background:#e8e6dd}#canvas{display:block;width:100%;height:calc(100% - 72px)}.canvas-head{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:18px 22px;pointer-events:none}.canvas-head div:first-child{display:grid;gap:4px}.canvas-head span{font-size:9px;font-weight:850;letter-spacing:.12em;color:#53605b}.canvas-head b{font:14px Georgia,serif}.live{display:flex;gap:7px;align-items:center;padding:6px 9px;background:rgba(248,247,242,.86);border:1px solid var(--line)}.live i{width:6px;height:6px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 4px rgba(238,118,93,.18);animation:pulse 1.3s infinite}.live span{color:var(--ink);font-size:8px}.live.paused i{background:#929792;box-shadow:none;animation:none}@keyframes pulse{50%{opacity:.4}}.legend{position:absolute;left:20px;bottom:92px;display:flex;gap:13px;padding:7px 9px;background:rgba(248,247,242,.88);border:1px solid var(--line);font-size:9px}.legend span{display:flex;align-items:center;gap:5px}.legend i{width:9px;height:9px}.tile-thick{background:var(--teal2)}.tile-thin{background:var(--gold)}.tile-trial{background:var(--lav)}.tile-backtrack{background:var(--coral)}.window-inset{position:absolute;right:18px;top:76px;width:190px;background:rgba(248,247,242,.92);border:1px solid var(--line);padding:9px}.window-inset>span,.window-inset small{display:block;font-size:8px;font-weight:800;letter-spacing:.12em;color:var(--muted)}.window-inset canvas{display:block;width:100%;height:120px}.window-inset small{text-align:right}.timeline{position:absolute;left:0;right:0;bottom:69px;height:3px;background:#d4d1c7}.timeline div{height:100%;width:0;background:var(--teal)}.timeline i{position:absolute;top:-3px;left:0;width:9px;height:9px;border-radius:50%;background:var(--teal);transform:translateX(-50%)}.metrics{position:absolute;left:0;right:0;bottom:0;height:70px;background:var(--panel);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr)}.metrics div{padding:12px 15px;border-right:1px solid var(--line);display:flex;flex-direction:column-reverse;gap:3px}.metrics span{font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.metrics b{font:22px Georgia,serif}@media(max-width:820px){.app-shell{grid-template-columns:1fr}.sidebar{height:auto;max-height:none}.stage{height:78vh;min-height:620px}.window-inset{width:150px}.metrics{grid-template-columns:repeat(5,1fr)}.metrics div{padding:10px 7px}.metrics b{font-size:18px}}@media(max-width:520px){.sidebar{padding:20px}.window-inset{display:none}.legend{right:12px;left:12px;justify-content:center}.metrics span{font-size:7px}.canvas-head{padding:14px}.canvas-head b{font-size:11px}}


/* Cyclotomic workbench: controls above the research detail, readable labels. */
.app-shell{grid-template-columns:380px minmax(0,1fr)}
.sidebar{padding:24px;gap:20px}.sidebar h1{font-size:34px}
.run-row{margin-top:0;position:sticky;top:-24px;z-index:3;background:var(--panel);padding:12px 0}
.run-row button,.field,.field output,.check,.status,summary{font-size:14px}
.setting-card p,.explain,details p{font-size:14px;line-height:1.5}
code{font-size:13px}.section-title h2{font-size:17px}.tags span,.eyebrow{font-size:12px}
.weights span,.weights b{font-size:13px}.canvas-head span{font-size:12px}.canvas-head b{max-width:560px}
.window-inset{top:108px;width:220px}.window-inset>span,.window-inset small{font-size:12px;letter-spacing:0}
.metrics{grid-template-columns:repeat(6,1fr)}.metrics span{font-size:12px;letter-spacing:0}.legend{font-size:12px}
@media(max-width:900px){.app-shell{grid-template-columns:1fr}.stage{grid-row:1;height:70vh;min-height:460px}.sidebar{height:auto}.metrics div{padding:10px 5px}.metrics span{font-size:12px}.canvas-head b{max-width:60vw}.run-row{top:0}}

[hidden]{display:none!important}