:root{--paper: #ece6d2;--paper-hover: #e2ddca;--ink: #1e4f9a;--ink-secondary: #405f8d;--critical: #993d39;font-family:Courier New,monospace;color:var(--ink);background:var(--paper);color-scheme:light;font-synthesis:none}*{box-sizing:border-box}body{margin:0}.sheet{position:relative;isolation:isolate;width:100%;height:100vh;height:100svh;height:100dvh;min-height:240px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));background-color:var(--paper);background-image:linear-gradient(#405f8d17 1px,transparent 1px),linear-gradient(90deg,#405f8d17 1px,transparent 1px);background-size:24px 24px}.sheet:fullscreen{width:100%;height:100%}.sheet:before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 119px,#405f8d1c 120px 121px),linear-gradient(90deg,transparent calc(50% - 216px),#405f8d0d calc(50% - 216px) calc(50% - 215px),transparent calc(50% - 215px) calc(50% + 215px),#405f8d0d calc(50% + 215px) calc(50% + 216px),transparent calc(50% + 216px))}header{display:flex;align-items:center;gap:12px;padding:4px 8px 10px}.mark{border:1px solid;padding:7px;transform:rotate(-4deg);font-size:18px}h1{font-size:clamp(15px,3.5vw,24px);margin:0;letter-spacing:-1px}header p{margin:4px 0 0;font-size:12px;color:var(--ink-secondary)}.revision{margin-left:auto;text-align:right;font-size:12px;color:var(--ink-secondary)}.instrument{min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto}.rail{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--ink-secondary);padding:0 8px 6px}.viewport{min-height:0;min-width:0;margin:0;pointer-events:none}canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;touch-action:none;pointer-events:auto}canvas:focus-visible{outline:2px solid var(--ink);outline-offset:-4px}.controls{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;padding-top:8px}button{min-height:44px;padding:9px 14px;border:1px solid var(--ink-secondary);border-radius:3px 6px 3px 5px;background:var(--paper);color:var(--ink);font:700 13px Courier New,monospace;cursor:pointer}button:hover{background:var(--paper-hover)}button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}button:disabled{cursor:default;opacity:.5}[hidden]{display:none!important}footer{display:flex;justify-content:space-between;gap:8px;padding:8px;font-size:12px;color:var(--ink-secondary)}.rotate-hint{display:none}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}#fatal{position:absolute;inset:0;padding:32px;background:var(--paper);color:var(--critical);z-index:5;pointer-events:auto}@media(max-width:480px){.revision,.mark,.rail,footer{display:none}header{justify-content:center;text-align:center;padding:0 0 6px}header p{font-size:11px}.instrument{grid-template-rows:minmax(0,1fr) auto}.controls{gap:5px}button{flex:1;padding:8px 5px;font-size:12px}}@media(orientation:landscape)and (max-height:540px){header,.rail,footer{display:none}.sheet{grid-template-rows:minmax(0,1fr)}.instrument{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr);gap:12px}.controls{flex-direction:column;justify-content:center;padding:0}.controls button{flex:initial}.rotate-hint{display:block;position:absolute;left:max(12px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));max-width:100px;font-size:12px;color:var(--ink-secondary);pointer-events:none}}@media(max-height:340px){.rotate-hint{display:none}.controls{gap:4px}}.instrument{pointer-events:none}.controls{pointer-events:auto}