:root{color-scheme:dark;--night:#101713;--paper:#f3eee2;--muted:#adb5a8;--signal:#e4a553;--line:rgba(243,238,226,.2);--screen:#06100a;--ink:#b8f5c8}
*{box-sizing:border-box}
body{margin:0;background:var(--night);color:var(--paper);font:14px/1.6 'DM Mono',monospace}
a{color:var(--signal);text-underline-offset:3px}
.wrap{max-width:980px;margin:0 auto;padding:18px 16px 20px}
.top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.crumb{font-size:12px;letter-spacing:.09em;text-transform:uppercase}
h1{font:800 clamp(40px,8vw,64px)/.95 'Barlow Condensed',Impact,sans-serif;text-transform:uppercase;margin:10px 0 4px}
.sub{color:var(--muted);margin:0 0 12px;font-size:13px}
.picker{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px}
button,.btn{font:inherit;font-size:13px;color:var(--paper);background:#1a2520;border:1px solid var(--line);border-radius:6px;padding:7px 12px;cursor:pointer}
button:hover{background:#243329}
button:focus-visible,input:focus-visible{outline:2px solid var(--signal);outline-offset:1px}
.picker button[aria-pressed="true"]{background:var(--signal);color:#101713;border-color:var(--signal);font-weight:600}
.screen{border:1px solid var(--line);background:var(--screen);border-radius:8px;overflow:hidden;box-shadow:inset 0 0 60px rgba(0,0,0,.6)}
.screen pre{margin:0;padding:12px 14px;height:var(--rows,58vh);min-height:240px;overflow:auto;color:var(--ink);font:clamp(11px,1.5vw,15px)/1.25 'DM Mono',monospace;white-space:pre;text-shadow:0 0 6px rgba(120,255,160,.25)}
.inputrow{display:flex;gap:8px;margin-top:10px}
.inputrow input{flex:1;min-width:0;font:inherit;font-size:16px;color:var(--ink);background:var(--screen);border:1px solid var(--line);border-radius:6px;padding:8px 10px;text-transform:uppercase}
.inputrow input:disabled{opacity:.5}
.quick{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;min-height:34px}
.tools{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;align-items:center}
.tools .lbl{color:var(--muted);font-size:12px}
.help{color:var(--muted);font-size:12px;margin:12px 0 0}
footer{color:var(--muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;margin-top:14px}
.fr303-back{display:block;width:max-content;margin:14px auto 12px;font:12px/1 system-ui,sans-serif;color:#e8e8e0;background:rgba(0,0,0,.45);padding:7px 10px;border-radius:4px;text-decoration:none;opacity:.8}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.brandlink{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--paper);font:800 24px/1 'Barlow Condensed',Impact,sans-serif;letter-spacing:.04em;margin-right:auto}
.brandlink b{color:var(--signal);font-weight:800;text-shadow:0 0 10px rgba(228,165,83,.55)}
.top .crumb{order:2}