:root{font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;color:#252622;background:#f5f5ee;font-synthesis:none;font-size:13px}*{box-sizing:border-box}body{margin:0}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}header{height:68px;margin:0 36px;border-bottom:1px solid #cdd5ce;display:flex;align-items:center;justify-content:space-between}.wordmark{display:flex;align-items:center;gap:10px;font:500 22px/1 Arial,sans-serif;letter-spacing:-.8px}.mark{width:21px;height:21px;background:#83ade6;position:relative}.mark:after{content:"";position:absolute;background:#f5f5ee;inset:4px 4px 8px 8px}.reference{color:#60655e;font-size:12px}main{padding:0 36px}.intro{display:flex;justify-content:space-between;align-items:flex-end;padding:26px 0 18px}.eyebrow{font-size:10px;letter-spacing:1px;color:#718678}h1{font:400 38px/1.15 Georgia,serif;letter-spacing:-1.5px;margin:8px 0 0}.intro p{font-size:12px;line-height:1.8;color:#74796d;margin:0 4px 4px 0}#stage{position:relative;min-height:320px;height:calc(100svh - 274px);max-height:850px;overflow:hidden;background-image:linear-gradient(#88addb25 1px,transparent 1px),linear-gradient(90deg,#88addb25 1px,transparent 1px);background-size:20px 20px;border:1px solid #a7bbcf55;isolation:isolate}#stage canvas{display:block;width:100%;height:100%;position:absolute;inset:0;cursor:grab;touch-action:pan-y pinch-zoom;outline:none}#stage canvas:active{cursor:grabbing}.axis{position:absolute;left:18px;font-size:9px;letter-spacing:1.25px;color:#84a6cd;pointer-events:none;z-index:2}.axis-top{top:15px}.axis-bottom{bottom:15px}#loading{position:absolute;inset:0;display:flex;gap:15px;align-items:center;justify-content:center;color:#73866b;background:#f5f5eee8;z-index:3;transition:opacity .3s}#loading[hidden]{display:none}#loaded{font-size:11px;color:#86a7cc}footer{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:74px}.pagination{display:flex;align-items:center;gap:10px}.pagination button{border:1px solid #bcc5ba;background:transparent;width:34px;height:34px;font-size:18px;transition:background .15s}.pagination button:hover{background:#e5ebdf}.pagination button:disabled{opacity:.25;cursor:default}output{width:90px;text-align:center;font-size:12px}.hint{font-size:10px;color:#8c9285}.actions{display:flex;gap:18px}.actions button{border:0;background:transparent;padding:8px 0;font-size:11px;color:#677061}.actions button:hover,.actions button[aria-pressed=true]{color:#2671c9}.actions span{margin-left:5px}button:focus-visible,a:focus-visible,input:focus-visible,canvas:focus-visible{outline:2px solid #6997cb;outline-offset:4px}#tuning{position:absolute;right:36px;bottom:84px;background:#f9f9f2;border:1px solid #a9bbae;padding:20px;z-index:5;box-shadow:4px 4px #bccbba55}#tuning[hidden]{display:none}#tuning label{display:flex;align-items:center;gap:20px;margin:12px 0;font-size:11px}input{accent-color:#80a9dc}#error{margin:15px 0;color:#a03d31;line-height:1.8}@media(max-width:800px){header{margin:0 20px;height:58px}main{padding:0 20px}.wordmark{font-size:20px}.intro{padding:20px 0 16px}h1{font-size:32px}.intro p{font-size:10px}#stage{height:calc(100svh - 253px);min-height:360px}footer{flex-wrap:wrap;gap:5px;padding:12px 0}.hint{order:3;width:100%;text-align:center;margin:8px 0 0}.actions{gap:14px}#tuning{right:20px;bottom:100px}}@media(max-width:440px){main{padding:0 12px}header{margin:0 16px}.eyebrow{font-size:8px}.reference{font-size:10px}.intro p{max-width:108px}.actions{gap:10px}.actions button{font-size:10px}output{width:70px}.axis{font-size:7px;left:10px}}