:root{font-family:Nunito,system-ui,sans-serif;font-size:16px;color:#edeeff;background:#16142a;--cyan:#67e8ee;--pink:#ffafcd;--panel:#28234b}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,select{font:inherit;min-width:44px;min-height:44px;border:2px solid #7d86c0;border-radius:10px;color:#f1f1ff;background:var(--panel);padding:7px;cursor:pointer}button:focus-visible,select:focus-visible,canvas:focus-visible{outline:3px solid var(--cyan);outline-offset:-3px}button.held,button:active{background:#4b427b}button:disabled{cursor:default;color:#b9bbd4;border-color:#575b80}h1,h2,p{margin:4px 0}h1{font-size:clamp(14px,2vw,23px);margin-right:auto;min-width:0;overflow-wrap:anywhere}h2{color:var(--cyan)}#app{height:100dvh;display:flex;flex-direction:column}header{display:flex;gap:5px;align-items:center;padding:3px 8px;flex-shrink:0}header button{flex-shrink:0}#hud{display:flex;flex-wrap:wrap;gap:3px 18px;padding:2px 10px;background:#211c3e;font-size:14px;min-height:24px}#viewport{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}canvas{display:block;touch-action:none}#controls{padding:6px max(10px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom));display:flex;justify-content:center;flex-shrink:0}#jump{width:min(360px,100%);min-height:52px;border-color:var(--cyan);background:#214759;touch-action:none;user-select:none}#state{position:absolute;top:92px;left:50%;transform:translateX(-50%);background:#16142acc;padding:4px 10px;pointer-events:none}#state:empty{display:none}#clockNotice{font-size:12px;text-align:center;color:var(--pink)}#clockNotice:empty{display:none}#rotate{display:none;font-size:12px;text-align:center;color:#c9c8e8}.panel{position:fixed;inset:0;z-index:20;background:#101020cb;display:grid;place-items:center;padding:10px}.panel[hidden],[hidden]{display:none!important}.sheet{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;width:min(620px,100%);max-height:calc(100dvh - 20px);overflow:auto;padding:16px;border:3px solid #8689c3;border-radius:16px;background:var(--panel)}.sheet p{overflow-wrap:anywhere}.actions,.settings{display:flex;gap:8px;flex-wrap:wrap}label{display:grid;gap:4px}select{width:100%;min-width:0}.settings label{display:flex;align-items:center;min-height:44px}.settings input{width:24px;height:24px}#notice,#calibrationNotice{color:var(--pink)}#notebookRows{margin:0;padding-left:28px;max-height:55dvh;overflow:auto}#notebookClose{position:sticky;bottom:0}@media(max-width:600px){header{gap:3px;padding:3px}header button{font-size:12px;padding:4px}#hud{font-size:12px;gap:3px 10px}#rotate{display:block}#jump{min-height:48px}}@media(max-height:430px){#controls{padding-top:3px;padding-bottom:3px}#jump{min-height:44px}.sheet{padding:12px}#hud{font-size:12px}}
@media(max-width:600px){header{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}header h1{grid-column:1/-1;font-size:16px;padding:2px 4px}header button{min-width:44px;overflow-wrap:anywhere}}