:root{color-scheme:dark;font-family:system-ui,"Yu Gothic UI",sans-serif;color:#e5edf6;background:#0b1220}*{box-sizing:border-box}body{margin:0}header{max-width:1480px;margin:auto;padding:30px 28px 22px;display:flex;align-items:center;justify-content:space-between;gap:20px}.eyebrow{font-size:11px;letter-spacing:3px;color:#66d9cb}h1{font-size:30px;margin:8px 0}p{line-height:1.7;margin:8px 0;font-size:14px}header p,.hint,.ends,footer{color:#9cabc0}.hint{font-size:12px}main{max-width:1480px;margin:auto;padding:0 28px;display:grid;grid-template-columns:330px minmax(0,1fr);gap:22px}section{background:#121e30;border:1px solid #26354b;border-radius:14px;padding:18px;margin-bottom:14px}h2{font-size:14px;margin:0 0 14px;color:#c1d3e9}label{display:block;font-size:13px;margin:10px 0}input,select,button{font:inherit;border-radius:7px;border:1px solid #34475f;background:#19283c;color:#eef5ff;padding:9px;min-width:0}input:not([type=checkbox]):not([type=color]),select{width:100%;margin-top:5px}button{cursor:pointer;font-size:13px}button:hover{background:#2a415b}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #66d9cb;outline-offset:2px}button.primary,button[aria-pressed=true]{background:#267c78;border-color:#48bcb0}button:disabled{opacity:.5;cursor:default}.modes,.buttons{display:flex;gap:7px;flex-wrap:wrap}.modes button{padding:12px 20px}.buttons button{flex:1}.matrix{display:grid;gap:7px;margin:14px 0;border-left:2px solid #7792b1;border-right:2px solid #7792b1;padding:0 10px}.matrix input{text-align:center;font-family:monospace}.coords{display:flex;gap:8px}.coords label{flex:1}.check{display:flex;gap:9px;align-items:center}input[type=checkbox]{accent-color:#55c5b5}.ends,.progressLabel{display:flex;justify-content:space-between}.ends{font-size:11px}.viewport{height:clamp(420px,65vh,760px);background:#0e1727;border:1px solid #2b3b52;border-radius:16px;position:relative;overflow:hidden}canvas{width:100%;height:100%;display:block;touch-action:none}.badge,.gesture{position:absolute;background:#142237df;padding:8px 12px;border-radius:6px;font-size:12px;pointer-events:none}.badge{top:14px;left:14px}.gesture{bottom:14px;right:14px;color:#a9bcd3}.legend{display:flex;flex-wrap:wrap;gap:16px;font-size:12px;padding:15px}.red{color:#ff7b82}.green{color:#64db9c}.blue{color:#78aaff}.details{display:grid;grid-template-columns:1fr 1fr;gap:14px}pre{font-size:14px;line-height:1.7;color:#66d9cb;overflow:auto}.vectorRow{border-top:1px solid #2a3b52;padding:10px 0;font-size:12px;display:flex;align-items:center;gap:8px}.vectorRow span{flex:1;overflow-wrap:anywhere}.vectorRow button{padding:5px}#error{color:#ff9ca5;min-height:0}footer{text-align:center;padding:24px;font-size:11px}@media(max-width:850px){header{padding:20px;flex-wrap:wrap}main{padding:0 14px;grid-template-columns:1fr}article{grid-row:1}.viewport{height:55vh;min-height:340px}.details{grid-template-columns:1fr 1fr}}@media(max-width:480px){.details{grid-template-columns:1fr}.legend{gap:9px}h1{font-size:25px}}
.buttons:has(#play){display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.buttons button{white-space:nowrap}canvas:focus-visible{outline:2px solid #66d9cb;outline-offset:-3px}
@media(max-width:850px){article{display:contents}.viewport{grid-row:1}.legend{grid-row:2}aside{grid-row:3}.details{grid-row:4}article>section{grid-row:5}}

/* Each desktop pane owns its scrollbar; settings never move the drawing. */
@media(min-width:851px){
  body{height:100dvh;overflow:hidden;display:flex;flex-direction:column}
  header{width:100%;padding-top:16px;padding-bottom:16px;flex:none}
  main{width:100%;flex:1;min-height:0;overflow:hidden;padding-bottom:12px;align-items:stretch}
  aside,article{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
  aside{padding-right:8px}
  article{padding-right:8px}
  .viewport{height:clamp(300px,calc(100dvh - 335px),650px)}
  footer{padding:6px;flex:none}
}
.mobile-playback{display:none}@media(max-width:850px){.mobile-playback{display:grid;grid-template-columns:1fr 1fr;gap:10px;grid-row:2}.mobile-playback button{min-height:48px;font-size:15px}.legend{grid-row:3}aside{grid-row:4}.details{grid-row:5}article>section{grid-row:6}}