@font-face{font-family:fira sans;font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/fira-sans-300-latin.woff2)format('woff2')}@font-face{font-family:fira sans;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/fira-sans-400-latin.woff2)format('woff2')}@font-face{font-family:fira sans;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/fira-sans-700-latin.woff2)format('woff2')}*,*::before,*::after{box-sizing:border-box}:root{--ui-bg:#0d0d0d;--ui-panel:#141414;--ui-line:#2a2a2a;--ui-text:#d8d8d8;--ui-muted:#777;--ui-salmon:#fa8072;--ui-gold:#eee8aa}body{margin:0;font-family:fira sans,system-ui,sans-serif;font-size:14px;background:var(--ui-bg);color:var(--ui-text)}button,select{font:inherit;color:inherit}.app-head{position:sticky;top:0;z-index:10;display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem;padding:.6rem 1rem;background:var(--ui-bg);border-bottom:1.5px solid var(--ui-line)}.app-title{font-weight:700;color:var(--ui-salmon);letter-spacing:.02em}.app-actions{display:flex;flex-wrap:wrap;gap:.4rem;margin-left:auto}.btn{background:var(--ui-panel);border:1.5px solid var(--ui-line);padding:.35rem .7rem;cursor:pointer;font-size:.8rem}.btn:hover{border-color:#555}.btn-primary{border-color:var(--ui-salmon);color:var(--ui-salmon)}.seg{display:inline-flex}.seg button{background:var(--ui-panel);border:1.5px solid var(--ui-line);margin-left:-1.5px;padding:.3rem .7rem;cursor:pointer;font-size:.8rem;color:var(--ui-muted)}.seg button.active{color:var(--ui-text);border-color:var(--ui-text);position:relative}.app{display:grid;grid-template-columns:minmax(300px,380px)1fr;height:calc(100vh - 3.5rem)}.controls{overflow-y:auto;background:var(--ui-panel);border-right:1.5px solid var(--ui-line);padding:.5rem 1rem 3rem}.controls section{padding:1rem 0;border-bottom:1px solid var(--ui-line)}.controls h2{margin:0 0 .6rem;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ui-muted)}.hint{margin:.3rem 0 .6rem;font-size:.75rem;color:var(--ui-muted)}.export-help{margin:0;padding-left:1.1rem;font-size:.8rem;line-height:1.6}.export-help code{font-family:fira code,ui-monospace,monospace;font-size:.85em}.stage{min-width:0;background:#000}#preview{width:100%;height:100%;border:0;display:block}.token{margin-bottom:1rem}.token-name{font-size:.8rem;margin-bottom:.35rem}.token-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.35rem}.token-mode{width:2.8rem;flex-shrink:0;font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ui-muted)}.swatches{display:flex;flex-wrap:wrap;gap:3px}.swatch-break{flex-basis:100%;height:6px}.swatch{width:18px;height:18px;border:1.5px solid transparent;padding:0;cursor:pointer}.swatch:hover{border-color:rgba(255,255,255,.5)}.swatch.active{box-shadow:0 0 0 2px var(--ui-panel),0 0 0 4px #fff}.pattern-picker{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem}.pattern-option{background:var(--ui-bg);border:1.5px solid var(--ui-line);padding:.5rem .3rem;cursor:pointer;font-size:.65rem;color:var(--ui-muted);text-align:center}.pattern-option:hover{border-color:#555}.pattern-option.active{border-color:#fff;color:var(--ui-text)}.pat-swatch{--accent:#888;--accent-2:#888;display:block;height:28px;margin-bottom:.35rem;background-image:var(--shadow-1);background-size:var(--shadow-size);background-position:var(--shadow-pos)}.field{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem}.field span{width:3.5rem;flex-shrink:0;font-size:.75rem;color:var(--ui-muted)}.field select{flex:1;background:var(--ui-bg);border:1.5px solid var(--ui-line);padding:.35rem .5rem}@media(max-width:800px){.app{grid-template-columns:1fr;height:auto}.controls{overflow:visible;border-right:0}.stage{height:80vh}}