:root{--concrete-900: #17181a;--concrete-800: #202225;--concrete-700: #2b2e32;--concrete-600: #3a3e44;--concrete-400: #6d737b;--concrete-200: #b9bec6;--paper: #f2f0ea;--ink: #e8e6e0;--accent: #e8523f;--edge: 1px solid var(--concrete-600);--panel-w: 268px}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--concrete-900);color:var(--ink);font:12px/1.45 ui-monospace,SF Mono,Cascadia Mono,Menlo,Consolas,monospace;-webkit-font-smoothing:antialiased;overscroll-behavior:none}#view{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}.panel{position:fixed;top:12px;left:12px;width:var(--panel-w);max-height:calc(100dvh - 24px);display:flex;flex-direction:column;background:color-mix(in srgb,var(--concrete-800) 92%,transparent);backdrop-filter:blur(10px);border:var(--edge);box-shadow:0 12px 32px #00000073;user-select:none}.panel__head{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-bottom:var(--edge);background:var(--concrete-700);cursor:default}.panel__title{margin:0;font-size:12px;font-weight:700;letter-spacing:.22em}.panel__body{padding:10px;display:flex;flex-direction:column;gap:10px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--concrete-600) transparent}.panel.is-collapsed .panel__body{display:none}.row{display:flex;align-items:center;gap:6px}.row--wrap{flex-wrap:wrap}.row--transport .btn{flex:1}.group{border-top:var(--edge);padding-top:9px;display:flex;flex-direction:column;gap:7px}.group__head{font-size:10px;letter-spacing:.18em;color:var(--concrete-400);text-transform:uppercase}.lbl{font-size:10px;letter-spacing:.14em;color:var(--concrete-400);text-transform:uppercase;min-width:44px}.btn,.icon-btn,.select{font:inherit;color:var(--ink);background:var(--concrete-700);border:var(--edge);padding:5px 10px;cursor:pointer;transition:background 90ms linear,color 90ms linear}.btn:hover,.icon-btn:hover,.select:hover{background:var(--concrete-600)}.btn:active,.icon-btn:active{transform:translateY(1px)}.btn:focus-visible,.icon-btn:focus-visible,.select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.btn--primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}.btn--primary:hover{background:#f2604d}.btn--wide{flex:1}.btn--generate{width:100%;border-color:var(--accent);color:var(--accent);font-weight:700;letter-spacing:.08em}.btn--generate:hover{background:var(--accent);color:#fff}.btn[disabled]{opacity:.4;cursor:not-allowed;pointer-events:none}.icon-btn{width:26px;padding:4px 0;text-align:center;line-height:1}.icon-btn--wide{width:auto;padding:4px 8px;font-size:10px;letter-spacing:.08em}.panel__head-actions{display:flex;align-items:center;gap:5px}.icon-btn.is-off{color:var(--concrete-400)}.select{flex:1;padding:4px 6px}.range{flex:1;appearance:none;height:3px;background:var(--concrete-600);border:var(--edge);cursor:pointer}.range::-webkit-slider-thumb{appearance:none;width:11px;height:15px;background:var(--accent);border:var(--edge)}.range::-moz-range-thumb{width:11px;height:15px;border-radius:0;background:var(--accent);border:var(--edge)}.range:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.progress{height:3px;background:var(--concrete-700);border:var(--edge);overflow:hidden}.progress__fill{height:100%;width:0%;background:var(--accent);transition:width .11s linear}.stats{font-size:10px;color:var(--concrete-400);letter-spacing:.03em;min-height:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.layers{display:flex;flex-direction:column;gap:5px}.layer{display:flex;align-items:center;gap:6px;padding:4px 5px;background:var(--concrete-700);border:var(--edge)}.layer.is-off{opacity:.45}.layer__eye{width:18px;flex:none;background:none;border:0;color:inherit;cursor:pointer;padding:0;font-size:11px;line-height:1}.layer__swatch{width:15px;height:15px;flex:none;padding:0;border:var(--edge);background:none;cursor:pointer;appearance:none}.layer__swatch::-webkit-color-swatch-wrapper{padding:1px}.layer__swatch::-webkit-color-swatch{border:0}.layer__swatch::-moz-color-swatch{border:0}.layer__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.layer__nib{width:46px;flex:none;font:inherit;font-size:10px;color:var(--ink);background:var(--concrete-800);border:var(--edge);padding:2px 3px}.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.sample{aspect-ratio:1;padding:0;background:var(--paper);border:var(--edge);cursor:pointer;overflow:hidden;position:relative;transition:outline-color 90ms linear;outline:2px solid transparent;outline-offset:-2px}.sample:hover,.sample.is-active{outline-color:var(--accent)}.sample svg{display:block;width:100%;height:100%}.hint{position:fixed;bottom:10px;left:50%;transform:translate(-50%);padding:4px 10px;font-size:10px;letter-spacing:.06em;color:var(--concrete-200);background:color-mix(in srgb,var(--concrete-900) 72%,transparent);border:var(--edge);pointer-events:none;white-space:nowrap}kbd{font:inherit;padding:0 3px;border:var(--edge);background:var(--concrete-700)}.drop-hint{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:color-mix(in srgb,var(--concrete-900) 60%,transparent);pointer-events:none}.drop-hint[hidden]{display:none}.drop-hint__box{padding:22px 34px;border:2px dashed var(--accent);font-size:14px;letter-spacing:.2em;text-transform:uppercase;background:color-mix(in srgb,var(--concrete-800) 88%,transparent)}.toast{position:fixed;bottom:40px;left:50%;transform:translate(-50%);z-index:30;padding:7px 14px;background:var(--concrete-800);border:var(--edge);border-left:3px solid var(--accent);font-size:11px;box-shadow:0 8px 22px #0006;animation:toast-in .14s ease-out}.toast.is-out{opacity:0;transition:opacity .22s linear}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,6px)}to{opacity:1;transform:translate(-50%)}}.rec-dot{position:fixed;top:12px;right:12px;z-index:20;display:flex;align-items:center;gap:6px;padding:5px 10px;background:color-mix(in srgb,var(--concrete-900) 78%,transparent);border:var(--edge);font-size:10px;letter-spacing:.14em}.rec-dot:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);animation:blink 1s steps(2,end) infinite}@keyframes blink{50%{opacity:.15}}@media(max-width:620px){:root{--panel-w: calc(100vw - 24px) }.panel{max-height:62dvh}.hint{display:none}}