:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#283b3b;background:#f4f5f0;font-synthesis:none}*{box-sizing:border-box}body{margin:0}header,main,footer{max-width:1440px;margin:auto;padding:26px 38px}header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #dbe1da}h1{font-family:Georgia,serif;font-size:36px;font-weight:400;letter-spacing:-1px;margin:7px 0}header p{margin:0;color:#637371;font-size:14px}.eyebrow{font-size:10px;font-weight:750;letter-spacing:1.7px;color:#5c7670}button{font:inherit;font-size:13px;background:#fff;border:1px solid #cdd8d1;padding:9px 14px;border-radius:6px;color:#304d45;cursor:pointer}button:hover{background:#edf2ec}button:focus-visible,input:focus-visible{outline:3px solid #2676c8;outline-offset:3px}nav{display:flex;gap:8px}#save{background:#234f44;color:white;border-color:#234f44}main{padding-top:22px}.switchbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.switchbar p{color:#687671;font-size:13px;line-height:1.6;margin:0}#modes{display:flex;gap:6px;margin-top:8px}#modes button{font-size:15px;min-width:88px;font-family:Georgia,serif}#modes button[aria-pressed=true]{background:#ffc0cb;border-color:#c97c8c;color:#542b36;box-shadow:inset 0 -2px #c97c8c}.workspace{display:grid;grid-template-columns:1fr 1fr;gap:18px}.panel{background:white;border:1px solid #d8e0d8;border-radius:10px;overflow:hidden}.panelhead{display:flex;justify-content:space-between;align-items:center;padding:18px 20px 12px;gap:8px}h2{font-family:Georgia,serif;font-weight:400;font-size:23px;margin:5px 0}.panelhead button{font-size:11px;padding:7px 9px}.zoom{display:flex;gap:4px}.board{width:100%;aspect-ratio:1.2}.board svg{display:block;width:100%;height:100%;touch-action:none;user-select:none}.foot{border-top:1px solid #e8ece7;min-height:59px;padding:12px 18px;display:flex;align-items:center;flex-wrap:wrap;gap:12px;font-size:12px}.foot span{font-size:10px;color:#75827c}.foot button{font-size:11px;padding:6px 8px}#guides{display:flex;gap:14px}label{display:inline-flex;align-items:center;gap:4px;cursor:pointer}input{accent-color:#346d5d}.measurements{display:grid;grid-template-columns:repeat(4,1fr);margin-top:20px;border:1px solid #d8e0d8;border-radius:8px;background:#ecf0e8;padding:18px 0}.measurements div{padding:0 22px;border-right:1px solid #d2dbd0}.measurements div:last-child{border:0}.measurements span{display:flex;justify-content:space-between;font-size:12px;color:#5a7065}.measurements i{font-family:Georgia,serif}.measurements strong{display:block;font-size:28px;font-weight:450;margin-top:8px;font-variant-numeric:tabular-nums}.hint{color:#65766e;font-size:12px;line-height:1.7;max-width:880px;margin:20px 0 8px}#status{font-size:12px;min-height:18px;color:#345b4b}footer{font-size:10px;letter-spacing:1px;color:#7e8b81;padding-top:0}svg text{font-family:system-ui,sans-serif;fill:#52655d;font-size:12px}svg .math{font-family:Georgia,serif;font-style:italic;font-size:17px}svg .handle{cursor:grab;outline:none}svg .handle:focus circle:first-of-type{stroke:#164d9d;stroke-width:3}svg .handle:active{cursor:grabbing}@media(max-width:900px){header,main,footer{padding-left:20px;padding-right:20px}.workspace{grid-template-columns:1fr}.switchbar p{display:none}.board{aspect-ratio:1.4}h1{font-size:30px}}@media(max-width:520px){header{align-items:start;gap:10px}header p{max-width:200px}nav{flex-direction:column}#modes button{min-width:0;padding:10px 13px}.measurements{grid-template-columns:1fr 1fr;gap:20px}.measurements div:nth-child(2){border:0}.panelhead{padding:14px 12px}h2{font-size:20px}}

@media(max-width:520px){#modes{width:100%;gap:4px}#modes button{flex:1;padding:10px 7px;font-size:14px}.board{aspect-ratio:1.2}.panelhead{flex-wrap:wrap}}
/* Compact desktop frame: both boards and controls fit inside 1200 × 720. */
[hidden]{display:none!important}header,main,footer{max-width:1280px;padding-left:24px;padding-right:24px}header{padding-top:14px;padding-bottom:12px}h1{font-size:28px;margin:4px 0}header p{font-size:12px}main{padding-top:14px;padding-bottom:8px}.switchbar{gap:24px;margin-bottom:14px;align-items:center}.measurements{margin:0;padding:10px 0;flex:1;max-width:650px}.measurements div{padding:0 14px}.measurements strong{font-size:21px;margin-top:4px}.measurements span{font-size:11px;gap:8px}.workspace{gap:14px}.panelhead{padding:12px 16px 8px}h2{font-size:21px}.board{height:clamp(250px,calc(100dvh - 410px),410px);aspect-ratio:auto}.foot{min-height:46px;padding:8px 14px;gap:10px}.foot>span{font-size:10px}.hint{margin:10px 0 4px;font-size:11px;max-width:none}#status{margin:4px 0;font-size:11px}footer{padding-bottom:8px}.handle:focus path{stroke:#164d9d;stroke-width:2}
@media(max-width:900px){.switchbar{flex-wrap:wrap;gap:12px}.measurements{max-width:none;min-width:100%}.workspace{grid-template-columns:1fr}.board{height:340px}.measurements{grid-template-columns:repeat(4,1fr)}header,main,footer{padding-left:16px;padding-right:16px}}
@media(max-width:520px){.measurements{grid-template-columns:repeat(2,1fr);gap:12px}.measurements div:nth-child(2){border:0}.board{height:290px}#modes{width:auto}.switchbar>div{width:100%}h1{font-size:26px}.measurements strong{font-size:20px}}
/* Keep each set of controls with its corresponding view at every breakpoint. */
.view-column{min-width:0;display:flex;flex-direction:column;gap:14px}.view-column>.measurements,.plot-controls{width:100%;max-width:none;min-height:64px;margin:0}.plot-controls{display:flex;flex-direction:column;justify-content:center}.measurements div{min-width:0;padding:0 12px}.measurements strong{font-size:20px;overflow-wrap:anywhere}.measurements span{gap:4px}.fullscreen-control{position:fixed;left:max(12px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));z-index:20;width:40px;height:40px;padding:0;display:grid;place-items:center;background:#fff;box-shadow:0 2px 9px #233b3026;font-size:26px;line-height:1}.fullscreen-control[aria-pressed=true]{background:#234f44;color:#fff}footer{padding-left:76px;min-height:40px;padding-top:8px}.board{height:clamp(250px,calc(100dvh - 430px),410px)}
html.is-expanded header .eyebrow,html.is-expanded header h1,html.is-expanded header p,html.is-expanded .hint,html.is-expanded footer{display:none}html.is-expanded header{justify-content:flex-end;padding-top:8px;padding-bottom:8px}html.is-expanded main{max-width:none;padding-bottom:12px}html.is-expanded .board{height:clamp(280px,calc(100dvh - 325px),1000px)}html:fullscreen{overflow:auto;background:#f4f5f0}html.is-expanded #status{padding-left:40px}
@media(max-width:900px){.view-column{gap:10px}.board{height:340px}.plot-controls{min-height:58px}.view-column>.measurements{min-width:0}.workspace{gap:22px}html.is-expanded .board{height:clamp(280px,65dvh,650px)}}
@media(max-width:520px){.board{height:290px}.measurements span{font-size:11px}.view-column>.measurements{grid-template-columns:repeat(2,minmax(0,1fr))}body{padding-bottom:38px}html.is-expanded body{padding-bottom:0}}

/* Keep fullscreen beneath the graph, inside the desktop frame. */
.fullscreen-control{left:auto;right:max(12px,calc((100vw - 1280px)/2 + 24px),env(safe-area-inset-right))}
@media(min-width:901px){.fullscreen-control{right:max(24px,calc((100vw - 1280px)/2 + 24px));bottom:68px}.hint,#status{padding-right:56px}html.is-expanded .fullscreen-control{bottom:12px}}
.plot-controls{align-items:center;text-align:center}