@font-face{font-family:FFFORWA;src:url('../font/FFFFORWA.ttf') format('truetype');font-display:swap}
@font-face{font-family:agsfnt0;src:url('../font/agsfnt0.ttf') format('truetype');font-display:swap}
:root{font-family:agsfnt0,'Courier New',monospace;color:#111;background:#0000aa}
*{box-sizing:border-box}
html{min-height:100%}
body{min-height:100vh;margin:0;background:#0000aa}
[hidden]{display:none!important}
button,textarea,input{font:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid #ff5555;outline-offset:3px}
.app-shell{max-width:1440px;min-height:100vh;margin:0 auto;background:#55ffff;border-inline:3px solid #000;box-shadow:0 0 0 3px #000}
.topbar{min-height:92px;padding:17px 26px;display:flex;align-items:center;gap:20px;border-bottom:3px solid #000;background:#55ffff;background-image:repeating-linear-gradient(0deg,transparent 0 5px,#00aaaa10 5px 6px)}
.site-link{font:12px FFFORWA,monospace;color:#ff5555;text-decoration:none;white-space:nowrap;text-shadow:2px 2px #aa0000}
.site-link span{color:#55ff55;text-shadow:2px 2px #00aaaa}
.site-link:hover{text-decoration:underline}
.header-divider{height:36px;width:2px;background:#000}
.brand{display:flex;align-items:center;font:clamp(20px,2.5vw,31px) FFFORWA,monospace;letter-spacing:.09em;color:#050519;text-shadow:3px 3px #00aaaa;white-space:nowrap}
.brand-mark{width:36px;height:36px;margin-right:10px;background:#ff5555;border:2px solid #000;box-shadow:3px 3px #000;color:#fff;display:grid;place-items:center;font:26px Arial,sans-serif;text-shadow:none}
.accent{color:#ff5555;text-shadow:2px 2px #aa0000}
.local-badge{margin-left:auto;border:2px solid #000;background:#000;color:#55ff55;padding:9px 10px;white-space:nowrap;font:9px FFFORWA,monospace;box-shadow:3px 3px #00aaaa}
main{padding:24px}
.intro{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:10px 6px 27px}
.eyebrow,.panel-heading,.field-label,.dimensions,.preview-footer,.glyph-heading h2,.glyph-group h3,.page-footer{font-family:FFFORWA,'Courier New',monospace}
.eyebrow{margin:0 0 13px;color:#aa0000;font-size:10px;letter-spacing:.09em}
.intro h1{font:clamp(38px,5.2vw,72px) FFFORWA,monospace;letter-spacing:.01em;line-height:1.15;color:#050519;text-shadow:4px 4px #fff;margin:0}
.intro h1 span:first-child{color:#ff5555;text-shadow:3px 3px #aa0000}
.intro h1 .cursor{color:#0000aa;animation:blink 1s steps(1) infinite}
.lead{font-size:15px;line-height:1.35;color:#164247;margin:12px 0 0;max-width:650px}
.intro-badge{flex:none;width:115px;height:115px;background:#fff;border:2px solid #ff5555;outline:1px solid #000;box-shadow:5px 7px #000;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(5deg);text-align:center}
.intro-badge>span{font:21px FFFORWA,monospace;color:#aa0000}
.intro-badge small{font:9px/1.55 FFFORWA,monospace;margin-top:8px}
.workspace{display:grid;grid-template-columns:minmax(315px,375px) minmax(0,1fr);gap:18px;align-items:stretch}
.control-panel,.preview-panel{min-width:0;background:#fff;border:2px solid #ff5555;outline:1px solid #000;box-shadow:5px 8px #000;padding:20px}
.panel-heading{display:flex;align-items:center;gap:10px;border-bottom:2px solid #000;padding-bottom:13px;margin-bottom:19px}
.panel-heading h2{font-size:13px;line-height:1.4;letter-spacing:.04em;margin:0}
.panel-number{color:#aa0000;font-size:12px}
.field-label{display:block;font-size:10px;letter-spacing:.04em;margin:0 0 11px}
.control-panel textarea{display:block;resize:vertical;width:100%;min-height:132px;padding:12px;background:#050819;border:2px solid #000;color:#79ff9a;font:22px/1.4 agsfnt0,'Courier New',monospace;outline:none}
.control-panel textarea:focus{border-color:#ff5555}
.field-help,.input-status{font-size:12px;line-height:1.4;color:#34555c;margin:10px 0 0}
.input-status{min-height:17px;color:#aa0000}
.divider{height:2px;background:#000;margin:19px 0}
.palette-picker{border:0;padding:0;margin:0}
.swatches{display:flex;gap:13px;align-items:center;min-height:44px}
.swatch{width:36px;height:36px;border:2px solid #000;background:var(--swatch);box-shadow:inset 3px 3px #ffffff70,inset -4px -4px #00000055,3px 3px #000;color:#fff;font-weight:bold}
.swatch[data-color=red]{--swatch:#ff5555}.swatch[data-color=yellow]{--swatch:#ffcc55}.swatch[data-color=blue]{--swatch:#5555ff}.swatch[data-color=green]{--swatch:#55cc77}.swatch[data-color=mixed]{--swatch:linear-gradient(135deg,#ff5555 0 25%,#ffcc55 25% 50%,#55cc77 50% 75%,#5555ff 75%)}
.swatch:hover{transform:translateY(-2px)}
.swatch.is-selected{outline:2px solid #aa0000;outline-offset:4px}
.field-label output{float:right;color:#aa0000}
input[type=range]{display:block;width:100%;margin:13px 0 0;accent-color:#ff5555}
.range-ends{display:flex;justify-content:space-between;font:9px FFFORWA,monospace;color:#34555c}
.layout-picker{border:0;padding:0;margin:0}
.layout-toggle{display:flex;align-items:center;gap:10px;cursor:pointer;font:10px/1.4 FFFORWA,monospace}
.layout-toggle input{width:18px;height:18px;margin:0;accent-color:#ff5555;flex:none}
.shuffle-button{display:block;width:100%;margin-top:13px;padding:10px 12px;border:2px solid #000;background:#e8ffff;color:#000;box-shadow:3px 3px #000;font:10px/1.3 FFFORWA,monospace;text-align:left}
.shuffle-button:not(:disabled):hover{background:#caffcb;transform:translateY(-2px);box-shadow:4px 5px #000}
.shuffle-button:disabled{opacity:.5;cursor:not-allowed}
.button-row{display:flex;gap:10px;margin-top:26px}
.primary-button,.secondary-button{min-height:45px;border:2px solid #000;outline:1px solid #000;box-shadow:3px 3px #000;padding:10px 12px;font:10px/1.3 FFFORWA,monospace}
.primary-button{background:#ff5555;color:#fff;flex:1}.secondary-button{background:#fff;color:#000}
.primary-button:hover,.secondary-button:hover{transform:translateY(-2px);box-shadow:4px 5px #000}
.primary-button:active,.secondary-button:active{transform:translate(2px,2px);box-shadow:1px 1px #000}
.preview-panel{display:flex;flex-direction:column}
.preview-heading{justify-content:space-between;gap:10px}
.preview-heading>div{display:flex;align-items:center;gap:10px}
.dimensions{color:#aa0000;font-size:9px;text-align:right;line-height:1.4}
.canvas-stage{display:flex;align-items:center;justify-content:center;min-height:420px;flex:1;padding:24px;overflow:auto;border:3px solid #000;background-color:#050505;background-image:linear-gradient(#252525 1px,transparent 1px),linear-gradient(90deg,#252525 1px,transparent 1px);background-size:24px 24px;box-shadow:3px 3px #00aaaa}
.canvas-stage:not(.is-empty){background-image:none}
.canvas-stage canvas{display:block;max-width:100%;height:auto;image-rendering:pixelated;box-shadow:0 0 0 1px #444,7px 8px #0009}
.empty-state{color:#d8fff2;text-align:center;font:12px/1.7 FFFORWA,monospace}
.empty-state span{display:block;color:#55ff55;animation:blink 1s steps(1) infinite}
.preview-footer{display:flex;justify-content:space-between;gap:12px;margin-top:19px;color:#34555c;font-size:9px;line-height:1.4}
.preview-footer>span:first-child{display:flex;align-items:center;gap:8px}
.status-light{width:8px;height:8px;flex:none;background:#55cc77;box-shadow:0 0 7px #55cc77}
.glyph-section{margin:38px 0 42px;background:#fff;border:2px solid #ff5555;outline:1px solid #000;box-shadow:5px 8px #000;padding:20px}
.glyph-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;padding-bottom:13px;border-bottom:2px solid #000}
.glyph-heading .eyebrow{margin-bottom:7px}.glyph-heading h2{font-size:17px;margin:0}.glyph-heading>p{font-size:12px;color:#34555c;margin:0}
.glyph-group{margin-top:20px}.glyph-group h3{font-size:10px;color:#aa0000;letter-spacing:.08em;margin:0 0 10px}
.glyph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:8px}
.glyph-tile{height:49px;border:2px solid #000;background:#e8ffff;color:#000;box-shadow:3px 3px #000;display:grid;place-items:center}
.glyph-tile:hover{background:#ff5555;color:#fff;transform:translateY(-2px)}
.glyph-tile strong{font:24px agsfnt0,'Courier New',monospace;line-height:1}
.page-footer{display:flex;justify-content:space-between;gap:12px;border-top:3px solid #000;padding:20px 24px;color:#07535a;font-size:9px}
@keyframes blink{50%{opacity:0}}
@media(max-width:950px){.workspace{grid-template-columns:1fr}.canvas-stage{min-height:350px}}
@media(max-width:620px){.topbar{min-height:70px;padding:13px 16px;gap:10px}.header-divider,.local-badge{display:none}.site-link{font-size:9px}.brand{font-size:18px;margin-left:auto}.brand-mark{width:27px;height:27px;font-size:18px;margin-right:7px}main{padding:15px}.intro{padding:8px 0 22px}.intro-badge{display:none}.intro h1{font-size:clamp(30px,9vw,48px)}.lead{font-size:13px}.control-panel,.preview-panel,.glyph-section{padding:15px}.preview-heading{align-items:start;flex-direction:column}.dimensions{text-align:left}.canvas-stage{min-height:270px;padding:14px}.glyph-heading{align-items:start;flex-direction:column;gap:9px}.glyph-grid{grid-template-columns:repeat(auto-fill,minmax(41px,1fr))}.page-footer{font-size:8px;padding:17px}}
@media(max-width:620px){.canvas-stage{justify-content:flex-start}.canvas-stage canvas{width:680px;max-width:none;flex:none}}
@media(prefers-reduced-motion:reduce){.cursor,.empty-state span{animation:none}}