:root{--bg:#1b1e24;--panel:#23272f;--line:#353b46;--tx:#d9dde3;--mut:#8a93a1;--acc:#f2a93b}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{display:grid;grid:44px 1fr 32px/176px 1fr;grid-template-areas:"h h" "t m" "f f";background:var(--bg);color:var(--tx);font:13px system-ui,'Segoe UI',sans-serif}
header{grid-area:h}
aside{grid-area:t}
main{grid-area:m;position:relative;min-width:0;min-height:0}
footer{grid-area:f}
header,footer{display:flex;align-items:center;gap:8px;padding:0 10px;background:var(--panel);border:0 solid var(--line)}
header{border-bottom-width:1px}
footer{border-top-width:1px}
header b{margin-right:8px;font-size:15px}
aside{background:var(--panel);border-right:1px solid var(--line);padding:8px;display:flex;flex-direction:column;gap:4px}
button,select{font:inherit;color:var(--tx);background:#2d323c;border:1px solid var(--line);border-radius:4px;padding:5px 9px;cursor:pointer}
button:hover{border-color:var(--mut)}
button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
#tools button{display:flex;justify-content:space-between;text-align:left}
#tools button span{color:var(--mut)}
button.on{border-color:var(--acc);color:var(--acc);background:#2f2a20}
#tools label{justify-content:space-between;margin-top:8px}
canvas{position:absolute;inset:0;touch-action:none;cursor:crosshair}
.sep{width:1px;height:20px;background:var(--line)}
#hint{flex:1;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#coord{font:12px ui-monospace,monospace;min-width:170px}
label{display:flex;align-items:center;gap:4px}
[hidden]{display:none!important}
input[type=number]{width:70px;font:inherit;color:var(--tx);background:#15171c;border:1px solid var(--line);border-radius:4px;padding:3px 5px}
.grp{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px;color:var(--mut)}
.grp label{justify-content:space-between;color:var(--tx)}
#num{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--acc);border-radius:6px;padding:6px 12px;white-space:nowrap}
#num span{color:var(--mut);font-size:12px}
body{height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
#acts{position:absolute;top:8px;right:8px;display:flex;gap:6px}
#num{flex-wrap:wrap;justify-content:center;max-width:calc(100% - 16px)}
#dimmenu{position:fixed;z-index:10;min-width:170px;display:flex;flex-direction:column;gap:4px;padding:4px;background:var(--panel);border:1px solid var(--line);border-radius:6px;box-shadow:0 6px 20px rgba(0,0,0,.45)}
#dimmenu button{text-align:left}
@media(max-width:640px){
  body{grid:48px auto 1fr 40px/1fr;grid-template-areas:"h" "t" "m" "f"}
  header{overflow-x:auto}
  header>*,aside>*{flex:none}
  aside{flex-direction:row;align-items:center;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:6px 8px}
  #tools button{white-space:nowrap;gap:8px}
  #tools label{margin-top:0;gap:6px}
  .grp{flex-direction:row;align-items:center;margin:0 0 0 6px;padding:0 0 0 10px;border-top:0;border-left:1px solid var(--line);gap:10px}
  .grp label{gap:6px}
  #hint,#num span{display:none}
  #coord{min-width:0;font-size:11px}
  footer{justify-content:space-around}
  input,select{font-size:16px}
  input[type=number]{width:64px}
}
@media(pointer:coarse){button,select{min-height:38px}}
input[type=text]{width:180px;font:inherit;color:var(--tx);background:#15171c;border:1px solid var(--line);border-radius:4px;padding:3px 5px}
@media(max-width:640px){input[type=text]{width:150px}}
html,body{overscroll-behavior:none}
*{-webkit-tap-highlight-color:transparent}
button,label,header,aside,footer{user-select:none;-webkit-user-select:none}
aside{overflow-y:auto}
#fit{position:absolute;left:8px;top:8px;z-index:2;background:var(--panel);font-weight:600;box-shadow:0 2px 8px rgba(0,0,0,.4)}
@media(pointer:coarse){#fit,#acts button{min-height:44px;min-width:44px}#num input{min-height:38px}}
@media(max-height:500px) and (min-width:641px){body{grid:40px 1fr 32px/150px 1fr}header b{display:none}}