:root{--paper:#eee7db;--ink:#482a30;--accent:#1947c9;--line:#482a3035}.stage{height:clamp(470px,56vw,760px);align-self:center}.stage canvas{touch-action:pan-y;cursor:grab}.stage canvas:active{cursor:grabbing}.stage-note{position:absolute;left:5%;right:5%;top:28px;display:flex;justify-content:space-between;font:8px monospace;letter-spacing:1px;pointer-events:none}.alignment{border-top:1px solid var(--line);padding-top:17px;display:grid;grid-template-columns:1fr auto;font-size:10px;gap:10px}.alignment output{font-family:monospace;font-size:12px}.alignment meter{width:100%;grid-column:1/-1;height:4px;appearance:none;background:var(--line);border:0}.alignment meter::-webkit-meter-bar{background:var(--line);border:0;border-radius:0}.alignment meter::-webkit-meter-optimum-value{background:var(--ink)}.pill-row{margin:23px 0}.pill-row button{font-size:9px}.controls>.small{margin-top:24px}.embedded .stage{height:min(68vw,650px)}@media(max-width:700px){.stage,.embedded .stage{height:390px}.stage-note{top:20px;letter-spacing:.5px;font-size:7px}.stage-note span:first-child{max-width:70px}.stage-note span:last-child{max-width:150px;text-align:right}.controls h1 br{display:none}.controls h1 em{margin-left:8px}.alignment{margin-top:12px}}@media(max-width:370px){.controls h1{font-size:50px}}

@media(max-width:700px){.split{display:block}.stage,.embedded .stage{height:330px;position:sticky;top:0;z-index:3;background:var(--paper);border-bottom:1px solid var(--line)}.stage canvas{touch-action:none}}

@media(max-width:700px){.controls h1 br{display:block}.controls h1 em{margin-left:0}}

@media(max-width:700px){.stage{height:min(330px,42svh)}.embedded .stage{height:min(330px,42svh)}}