@font-face{font-family:Plex;src:url('/plex-sans.ttf') format('truetype');font-weight:100 700;font-display:swap}
*{box-sizing:border-box}body{margin:0;background:var(--magic-background);color:var(--magic-text);font:15px/1.5 Plex,system-ui,sans-serif;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
header,footer{display:flex;align-items:center;gap:10px;padding:16px max(16px,calc((100% - 760px)/2));background:var(--magic-chrome)}header img{width:164px;max-width:48vw;height:36px;object-fit:contain}header #theme{margin-left:auto}footer{justify-content:flex-end;background:transparent}footer span{font-size:11px}footer img{width:100px;height:25px;object-fit:contain}
main{max-width:792px;margin:auto;padding:16px}h1{font-size:22px;line-height:1.25;margin:4px 0 14px}h2{font-size:18px;margin:20px 0 10px}p{overflow-wrap:anywhere}label{display:block;margin:12px 0}input,select,textarea,button{font:inherit;color:inherit}input:not([type=checkbox]),select,textarea{display:block;width:100%;min-height:44px;border:1px solid var(--magic-border);background:var(--magic-background);padding:10px;border-radius:10px;margin-top:5px}textarea{resize:vertical}input[type=range]{padding:0;accent-color:var(--magic-nameOrange);border:0}.check{display:flex;align-items:center;gap:10px}.check input{width:20px;height:20px;accent-color:var(--magic-nameOrange)}
button{min-height:44px;padding:9px 14px;border-radius:24px;border:1px solid var(--magic-border);background:var(--magic-surface);cursor:pointer;touch-action:manipulation}button:hover{border-color:var(--magic-nameOrange)}button:active{transform:scale(.98)}button:disabled{opacity:.45;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--magic-nameOrange);outline-offset:3px}button[aria-selected=true],.ok{border-color:var(--magic-nameOrange);color:var(--magic-onState);background:var(--magic-chrome)}
.panel{padding:16px;border:1px solid var(--magic-noteBorder);border-radius:18px;background:var(--magic-surface);margin-bottom:16px}.muted{color:var(--magic-muted);font-size:13px}.note{padding:10px 12px;background:var(--magic-note);border:1px solid var(--magic-noteBorder);border-radius:10px}.note:empty{display:none}.actions,.transport{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}nav{display:flex;gap:7px;overflow-x:auto;padding:2px 0 12px;margin-bottom:4px}nav button{white-space:nowrap}.dpad{display:grid;grid-template-columns:repeat(3,64px);grid-template-rows:repeat(3,58px);justify-content:center;gap:9px;margin:24px auto}.dpad button{font-size:23px}.dpad .up{grid-area:1/2}.dpad .left{grid-area:2/1}.dpad .ok{grid-area:2/2;font-size:17px}.dpad .right{grid-area:2/3}.dpad .down{grid-area:3/2}.danger{color:var(--magic-error)}.cards{display:grid;gap:10px;margin:16px 0}.card{padding:12px;border:1px solid var(--magic-noteBorder);border-radius:12px;overflow-wrap:anywhere}.card.current{border-color:var(--magic-nameOrange)}.card p{margin:3px 0 9px}.card img{width:120px;aspect-ratio:16/9;object-fit:cover;border-radius:8px;float:left;margin:0 10px 8px 0}.card::after{content:'';display:block;clear:both}[hidden]{display:none!important}form+form{margin-top:22px}#connection{font-size:13px;color:var(--magic-muted)}
@media(max-width:360px){main{padding:10px}.panel{padding:12px}button{padding:9px 11px}header{padding:12px}.transport{gap:6px}.transport button{flex:1 0 auto}}
@media(prefers-reduced-motion:reduce){button:active{transform:none}}
h1,h2,button{overflow-wrap:anywhere}main,section,form,label,select{min-width:0}