:root{color-scheme:dark;font:15px/1.5 Futura Neu,Futura,system-ui,sans-serif;color:#f5f5f7;background:#56575b}*{box-sizing:border-box}body{margin:0}#viewport,canvas{position:fixed;inset:0;width:100%;height:100%}canvas{touch-action:none}.panel,.hint{background:#28292df2;border:1px solid #55565c;border-radius:14px;position:fixed}.panel{top:16px;left:16px;width:min(340px,calc(100% - 32px));padding:18px;max-height:calc(100dvh - 32px);overflow:auto}h1{font-size:22px;letter-spacing:-.04em;margin:0 0 12px}label{display:block;color:#d5d5da}select,input,button{font:inherit;color:inherit;background:#393a3f;border:1px solid #66676e;padding:8px 10px;border-radius:8px}button,select,summary{cursor:pointer}select,button,input{width:100%}button:disabled{opacity:.48;cursor:default}button{background:linear-gradient(#2581f9,#0862d5);border-color:#438ff6;color:#fff}button:hover:not(:disabled){background:linear-gradient(#3b91ff,#0870ec)}button:active:not(:disabled){background:#0756b8}:focus-visible{outline:2px solid #86baff;outline-offset:2px}.primary{font-weight:700}.controls{display:grid;gap:6px;margin:10px 0}.settings{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:8px}#apply{grid-column:span 2}.rotation-control{display:flex;gap:4px}.rotation-control input{min-width:0}.rotation-control button{width:auto;white-space:nowrap}#status{margin:10px 0 0;font-size:13px;color:#d5d5da}.hint{bottom:16px;left:16px;right:auto;max-width:calc(100% - 32px);padding:8px 12px;font-size:12px;pointer-events:none}