:root{color-scheme:dark;font-family:Arial,sans-serif;background:#0a0e17;color:#e4e8f0}*{box-sizing:border-box}body{margin:0}header{display:flex;gap:14px;align-items:center;padding:22px;max-width:840px;margin:auto}header img{background:#ff4d00;border-radius:10px;width:48px;height:48px;padding:6px}small{display:block;margin-top:6px;color:#aebbd0}main{max-width:840px;margin:auto;padding:0 20px 60px}section,details{background:#111a29;border:1px solid #344055;border-radius:16px;padding:20px;margin:20px 0}h1,h2{font-size:1.4rem;margin-top:0}p,li{line-height:1.6}li{margin:12px 0}.notice{border-left:4px solid #ff4d00;padding:10px 16px;background:#251a17}label{display:block;margin:12px 0;font-size:1rem}input,select,button{font:inherit;border-radius:9px;padding:13px;min-height:48px}input,select{display:block;width:100%;margin-top:7px;background:#090f18;color:#fff;border:1px solid #526078}button{border:0;background:#ff4d00;color:#080d15;font-weight:bold;margin:5px 5px 5px 0;cursor:pointer}button.secondary{background:#253348;color:#e4e8f0}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #00e5ff;outline-offset:3px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}output{display:block;font-size:clamp(2rem,10vw,4rem);color:#00e5ff;font-weight:bold;margin:20px 0}canvas{width:100%;height:150px;background:#080e18;border-radius:10px}#live{font-variant-numeric:tabular-nums;color:#00e5ff}.record{border-top:1px solid #39465b;padding:15px 0;overflow-wrap:anywhere}a{color:#00e5ff}summary{cursor:pointer;font-weight:bold;font-size:1.1rem}[hidden]{display:none!important}@media(max-width:520px){.grid{grid-template-columns:1fr}main{padding:0 12px 40px}section{padding:16px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}