:root{--bg:#000;--fg:#f2f2f2;--dim:#9a9a9a;--yellow:#ffd400;--cyan:#28d7ff;--green:#3ee06a;--red:#ff5a4f;--key:#1b1b1b;--key-edge:#333;--mono:ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--fg);margin:0;font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}body{min-height:100dvh;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);flex-direction:column;display:flex}.bar{background:#0b0b0b;border-bottom:1px solid #222;align-items:center;gap:10px;padding:10px 16px;display:flex}.brand{font:700 15px var(--mono);color:var(--yellow);letter-spacing:.12em}.status{font:13px var(--mono);color:var(--dim);border:1px solid #333;border-radius:999px;padding:2px 8px}.status.ok{color:var(--green);border-color:#1f6b35}.status.demo{color:var(--cyan);border-color:#1d5f70}.connect{color:#000;background:var(--cyan);border:0;border-radius:8px;min-height:40px;margin-left:auto;padding:8px 14px;font:600 14px system-ui,sans-serif}main{flex-direction:column;flex:1;gap:10px;width:100%;max-width:560px;margin:0 auto;padding:12px 16px 16px;display:flex}.screen{background:#050505;border:1px solid #262626;border-radius:10px;min-height:42dvh;padding:12px 14px 14px}.head{justify-content:space-between;align-items:baseline;display:flex}.pageno{font:700 34px var(--mono);color:var(--yellow);letter-spacing:.04em}.pageno.typing{color:var(--cyan)}.clock{font:20px var(--mono);color:var(--dim)}.age{font:14px var(--mono);color:var(--green);margin:2px 0 10px}.age.stale{color:var(--red);font-weight:700}.age.missing{color:var(--dim)}.age .stale{color:var(--red);font-weight:700}.age .times{color:var(--dim);font-size:12px}.age .failing{color:var(--red);font-size:12px;font-weight:700}.body{font:17px/1.45 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--fg);margin:0}.body .title{color:var(--cyan);font-weight:700}.note,.error{font:14px var(--mono);min-height:1.2em;margin:0}.note{color:var(--dim)}.error{color:var(--red)}.held{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.held .label{font:12px var(--mono);color:var(--dim);margin-right:2px}.held button{font:14px var(--mono);color:var(--fg);background:0 0;border:1px solid #333;border-radius:6px;min-height:32px;padding:4px 8px}.held button[aria-current=true]{color:#000;background:var(--yellow);border-color:var(--yellow)}.pad{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:auto;display:grid}.pad button{font:600 22px var(--mono);color:var(--fg);background:var(--key);border:1px solid var(--key-edge);touch-action:manipulation;border-radius:10px;min-height:52px}.pad button:active{background:#2a2a2a}.pad .wide{font-size:16px}.pad .red{color:#000;background:var(--red);border-color:var(--red)}.pad .green{color:#000;background:var(--green);border-color:var(--green);font-size:16px}.pad .yellow{color:#000;background:var(--yellow);border-color:var(--yellow)}button:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}.unsupported{max-width:560px;color:var(--yellow);margin:0 auto 16px;padding:12px 16px;font-size:14px}.unsupported a{color:var(--cyan)}.journal{width:100%;max-width:560px;font:13px var(--mono);color:var(--dim);margin:0 auto 16px;padding:0 16px}.journal summary{cursor:pointer;min-height:32px;padding:8px 0}.journal pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:40dvh;color:var(--fg);background:#0b0b0b;border:1px solid #262626;border-radius:8px;margin:0 0 8px;padding:8px 10px;overflow:auto}.journal button{color:#000;background:var(--cyan);border:0;border-radius:8px;min-height:40px;padding:8px 14px;font:600 14px system-ui,sans-serif}.drawing{margin:0 0 12px}.drawing svg{background:#070707;border:1px solid #222;border-radius:8px;width:100%;height:auto;display:block}.siren-wave{fill:none;stroke:var(--yellow);stroke-width:2.5px;stroke-linejoin:round}.siren-tone{fill:var(--yellow)}.siren-base{stroke:#444;stroke-width:1px}.siren-axis{fill:var(--dim);font:11px var(--mono)}.siren-on{fill:var(--cyan);font:12px var(--mono)}.siren-off{fill:var(--dim);font:12px var(--mono)}.siren-on-line{fill:none;stroke:var(--cyan);stroke-width:1px}.siren-off-line{fill:none;stroke:var(--dim);stroke-width:1px}
