:root { color-scheme:dark; font:16px/1.5 system-ui,sans-serif; background:#061321; color:#f2f6fc; }
* { box-sizing:border-box; } body { margin:0; } a { color:#8de7ff; } button,select,a { -webkit-tap-highlight-color:transparent; }
header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; padding:20px clamp(16px,4vw,48px); border-bottom:1px solid #27566e; }
header strong { color:#8de7ff; letter-spacing:.15em; } header p { color:#ffc355; font:12px/1.5 monospace; margin:4px 0 0; } nav { display:flex; gap:8px; flex-wrap:wrap; }
nav a,button,select { display:inline-flex; align-items:center; min-height:44px; padding:10px 14px; border:1px solid #42748c; border-radius:6px; background:#0a1d2e; color:#f2f6fc; font:inherit; text-decoration:none; }
button,select { cursor:pointer; } button:disabled,select:disabled { opacity:.5; cursor:default; }
a:focus-visible,button:focus-visible,select:focus-visible,summary:focus-visible { outline:3px solid #ffc355; outline-offset:3px; } :is(a,button):hover { border-color:#8de7ff; }
main { max-width:1040px; margin:auto; padding:24px 16px 48px; } h1 { font-size:clamp(24px,4vw,36px); margin:0 0 20px; }
.controls { display:flex; align-items:end; gap:12px; flex-wrap:wrap; } label { display:flex; flex-direction:column; gap:4px; font-size:14px; } #status { color:#8de7ff; min-height:24px; }
#sheet { border:1px solid #27566e; border-radius:8px; padding:8px; background:#020910; overflow:auto; } #canvas-wrap { min-height:200px; text-align:center; } canvas { display:block; margin:auto; }
#error { border-left:3px solid #ffc355; padding:12px; } details { margin-top:20px; } summary { cursor:pointer; min-height:44px; padding:10px 0; } #page-text { white-space:pre-wrap; color:#b9d4e2; }
@media(max-width:420px) { nav a,button,select { padding:10px; font-size:14px; } .controls { gap:8px; } header { padding:16px; } }
@media(prefers-reduced-motion:no-preference) { a,button { transition:border-color .15s; } }