*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden;background:#caa86a}body{font-family:JetBrains Mono,ui-monospace,SFMono-Regular,Menlo,monospace;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.app{position:relative;width:100vw;height:100vh;--glass: rgba(28, 20, 8, .6);--glass-float: rgba(24, 17, 6, .66);--border: rgba(255, 236, 196, .24);--border-strong: rgba(255, 226, 160, .55);--text: rgba(249, 240, 216, .82);--text-strong: #fff6e2;--text-dim: rgba(249, 240, 216, .52);--accent: #ffd98a;--accent-soft: rgba(255, 216, 142, .16);--shadow: 0 16px 46px rgba(34, 22, 6, .4)}.app.night{--glass: rgba(16, 18, 40, .62);--glass-float: rgba(13, 15, 34, .7);--border: rgba(184, 198, 244, .26);--border-strong: rgba(184, 198, 244, .6);--text: rgba(223, 230, 255, .84);--text-strong: #f3f6ff;--text-dim: rgba(223, 230, 255, .5);--accent: #c0ccff;--accent-soft: rgba(150, 168, 230, .2);--shadow: 0 16px 46px rgba(4, 6, 22, .5)}canvas{display:block;touch-action:none}.ui-layer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:10}.ui-layer button,.ui-layer .panel{pointer-events:auto}.panel-fab,.sound-toggle{position:absolute;display:flex;align-items:center;justify-content:center;background:var(--glass-float);backdrop-filter:blur(16px) saturate(1.1);-webkit-backdrop-filter:blur(16px) saturate(1.1);border:1px solid var(--border);color:var(--text-strong);cursor:pointer;box-shadow:var(--shadow);transition:background .25s,transform .2s,border-color .25s}.panel-fab{top:28px;right:28px;height:44px;padding:0 18px 0 15px;gap:10px;border-radius:22px;z-index:2}.panel-fab.open{width:44px;padding:0;border-radius:50%}.fab-label{font-size:12.5px;font-weight:400;letter-spacing:.06em;text-transform:uppercase}.panel-fab:hover,.sound-toggle:hover{background:var(--accent-soft);border-color:var(--border-strong);transform:scale(1.05)}.draw-entry .draw-icon{flex:0 0 auto;color:var(--text-dim);margin-right:-6px;transition:color .2s}.draw-entry:hover .draw-icon,.draw-entry.active .draw-icon{color:var(--accent)}.pattern-btn .share-btn{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:24px;height:24px;border-radius:7px;color:var(--text-dim);opacity:0;cursor:pointer;transition:opacity .18s,color .18s,background .18s}.draw-entry:hover .share-btn,.draw-entry.active .share-btn{opacity:.75}.pattern-btn .share-btn:hover{opacity:1;color:var(--text-strong);background:var(--accent-soft)}.pattern-btn .share-btn.copied{opacity:1;color:var(--accent)}.drawpad-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:14px;background:#08060280;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);pointer-events:auto}.drawpad{width:min(94vw,calc(96vh - 264px),880px);max-height:calc(100vh - 28px);overflow-y:auto;padding:20px;background:var(--glass-float);backdrop-filter:blur(20px) saturate(1.15);-webkit-backdrop-filter:blur(20px) saturate(1.15);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow);scrollbar-width:thin}.drawpad-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}.drawpad-title{font-size:15px;letter-spacing:.01em;text-transform:uppercase;color:var(--accent)}.drawpad-sub{margin-top:5px;font-size:11.5px;line-height:1.5;color:var(--text-dim);letter-spacing:.01em;max-width:280px}.drawpad-x{flex:0 0 auto;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:transparent;border:1px solid var(--border);color:var(--text);cursor:pointer;transition:background .2s,color .2s}.drawpad-x:hover{background:var(--accent-soft);color:var(--text-strong)}.drawpad-toolbar{display:flex;align-items:center;gap:6px;margin-bottom:12px;flex-wrap:wrap}.tool-btn{display:flex;align-items:center;justify-content:center;width:32px;height:30px;flex:0 0 auto;color:var(--text);background:transparent;border:1px solid var(--border);border-radius:9px;cursor:pointer;transition:background .18s,color .18s,border-color .18s}.tool-btn svg{width:16px;height:16px}.tool-btn:hover{background:var(--accent-soft);color:var(--text-strong)}.tool-btn.active{background:var(--accent-soft);border-color:var(--border-strong);color:var(--text-strong)}.shape-picker{display:flex;gap:4px;padding-left:4px;margin-left:2px;border-left:1px solid var(--border)}.shape-btn{width:28px;height:30px;display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1;color:var(--text);background:transparent;border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:background .18s,color .18s,border-color .18s}.shape-btn:hover{background:var(--accent-soft);color:var(--text-strong)}.shape-btn.active{background:var(--accent-soft);border-color:var(--border-strong);color:var(--accent)}.sym-count{display:flex;align-items:center;gap:5px}.sym-num{min-width:16px;text-align:center;font-size:12px;font-variant-numeric:tabular-nums;color:var(--text-strong)}.drawpad-canvas{display:block;width:100%;aspect-ratio:1;border-radius:14px;border:1px solid var(--border);background:#00000038;touch-action:none;cursor:crosshair}.drawpad-tools{display:flex;align-items:center;gap:8px;margin-top:12px}.drawpad-spacer{flex:1 1 auto}.drawpad-tool{font-family:inherit;font-size:11px;letter-spacing:.03em;text-transform:uppercase;color:var(--text);background:transparent;border:1px solid var(--border);border-radius:9px;padding:7px 11px;cursor:pointer;transition:background .2s,color .2s,border-color .2s,opacity .2s}.drawpad-tool:hover:not(:disabled){background:var(--accent-soft);color:var(--text-strong)}.drawpad-tool:disabled{opacity:.4;cursor:default}.drawpad-iconbtn{display:flex;align-items:center;justify-content:center;width:32px;height:30px;color:var(--text);background:transparent;border:1px solid var(--border);border-radius:9px;cursor:pointer;transition:background .2s,color .2s,border-color .2s,opacity .2s}.drawpad-iconbtn svg{width:15px;height:15px}.drawpad-iconbtn:hover:not(:disabled){background:var(--accent-soft);color:var(--text-strong)}.drawpad-iconbtn:disabled{opacity:.4;cursor:default}.brush-ctl{display:flex;align-items:center;gap:9px}.brush-btn{width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-family:inherit;font-size:16px;line-height:1;color:var(--text);background:transparent;border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:background .2s,color .2s,border-color .2s,opacity .2s}.brush-btn:hover:not(:disabled){background:var(--accent-soft);color:var(--text-strong)}.brush-btn:disabled{opacity:.35;cursor:default}.brush-dot{flex:0 0 auto;border-radius:50%;background:var(--accent);box-shadow:0 0 8px 1px var(--accent-soft);transition:width .15s,height .15s}.drawpad-share-btn{width:100%;margin-top:12px}.drawpad-share-note{margin-top:10px;font-size:10.5px;line-height:1.5;letter-spacing:.01em;color:var(--text-dim);text-align:center}.drawpad-carve{width:100%;margin-top:12px;padding:12px;font-family:inherit;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-strong);background:var(--accent-soft);border:1px solid var(--border-strong);border-radius:11px;cursor:pointer;transition:background .25s,transform .15s,opacity .2s}.drawpad-carve:hover:not(:disabled){background:var(--accent);color:#2a1d05}.drawpad-carve:active:not(:disabled){transform:scale(.98)}.drawpad-carve:disabled{opacity:.45;cursor:default}.sound-toggle{bottom:28px;right:28px;width:44px;height:44px;border-radius:50%;z-index:12;pointer-events:auto}.sound-toggle.on{color:var(--text-strong);border-color:var(--border-strong);background:var(--accent-soft)}.panel{position:absolute;top:86px;right:28px;transform-origin:top right;width:240px;max-height:calc(100vh - 116px);overflow-y:auto;padding:22px 20px;background:var(--glass);backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px) saturate(1.15);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);scrollbar-width:thin}.panel::-webkit-scrollbar{width:5px}.panel::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:3px}.panel-label{font-size:12px;font-weight:400;letter-spacing:.036em;text-transform:uppercase;color:var(--text);margin-bottom:12px;padding-left:2px}.pattern-list{display:flex;flex-direction:column;gap:2px}.pattern-btn{display:flex;align-items:center;gap:12px;width:100%;padding:9px 12px;background:transparent;border:none;border-radius:10px;color:var(--text);font-family:inherit;font-size:15px;font-weight:400;letter-spacing:0;text-align:left;cursor:pointer;transition:background .2s,color .2s}.pattern-btn .dot{width:5px;height:5px;border-radius:50%;background:var(--text-dim);flex:0 0 auto;transition:background .25s,box-shadow .25s,transform .25s}.pattern-btn:hover{color:var(--text-strong)}.pattern-btn.active{background:var(--accent-soft);color:var(--text-strong)}.pattern-btn.active .dot{background:var(--accent);box-shadow:0 0 10px 2px var(--accent);transform:scale(1.4)}.reform-btn{margin-top:16px;width:100%;padding:12px;background:var(--accent-soft);border:1px solid var(--border-strong);border-radius:11px;color:var(--text-strong);font-family:inherit;font-size:13px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:background .25s,transform .15s}.reform-btn:hover{background:var(--accent);color:#2a1d05}.reform-btn:active{transform:scale(.98)}.theme-toggle{display:flex;align-items:center;gap:11px;width:100%;margin-top:9px;padding:9px 11px;background:transparent;border:1px solid var(--border);border-radius:11px;color:var(--text);font-family:inherit;font-size:12.5px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:background .25s,color .25s,border-color .25s}.theme-toggle:hover{background:var(--accent-soft);color:var(--text-strong)}.theme-track{position:relative;width:34px;height:18px;border-radius:9px;background:#ffe2a047;transition:background .3s;flex:0 0 auto}.theme-knob{position:absolute;top:1px;left:1px;width:16px;height:16px;border-radius:50%;background:#fff3da;display:flex;align-items:center;justify-content:center;font-size:10px;color:#6b5320;transition:transform .3s cubic-bezier(.22,1,.36,1),background .3s}.theme-toggle.night .theme-track{background:#96a8e673}.theme-toggle.night .theme-knob{transform:translate(16px);background:#cdd8ff;color:#1b1d3a}.crop-color{margin-top:12px}.crop-color-head{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:400;letter-spacing:.036em;text-transform:uppercase;color:var(--text);margin-bottom:9px;padding-left:2px}.crop-reset{font-family:inherit;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);background:transparent;border:none;cursor:pointer;padding:2px 4px;opacity:.85;transition:opacity .2s}.crop-reset:hover{opacity:1}.swatch-row{display:flex;gap:8px;align-items:center}.swatch{width:24px;height:24px;border-radius:50%;border:1px solid var(--border);padding:0;cursor:pointer;position:relative;transition:transform .15s,box-shadow .2s}.swatch:hover{transform:scale(1.12)}.swatch.active{border-color:var(--text-strong);box-shadow:0 0 0 2px var(--accent)}.swatch-custom{background:conic-gradient(from 0deg,#ff5d5d,#ffd166,#5aa83c,#2fa39a,#5b8def,#b06cf0,#ff5d5d);overflow:hidden}.swatch-custom input[type=color]{position:absolute;top:-6px;right:-6px;bottom:-6px;left:-6px;opacity:0;cursor:pointer;border:none;background:none}.lab{margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}.lab-title{font-size:16px;font-weight:400;letter-spacing:.01em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;padding-left:2px}.lab-control{margin-bottom:14px}.lab-label{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;font-weight:400;letter-spacing:.036em;text-transform:uppercase;color:var(--text);margin-bottom:7px}.lab-value{font-variant-numeric:tabular-nums;color:var(--text-strong);letter-spacing:0}.lab-seg{display:flex;flex-wrap:wrap;gap:4px}.lab-seg-btn{flex:1 1 auto;min-width:30px;padding:6px 5px;background:transparent;border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:inherit;font-size:12px;font-weight:400;letter-spacing:0;cursor:pointer;transition:background .2s,color .2s,border-color .2s}.lab-seg-btn:hover{background:var(--accent-soft);color:var(--text-strong)}.lab-seg-btn.active{background:var(--accent-soft);border-color:var(--border-strong);color:var(--text-strong)}.lab-control input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:calc(100% - 18px);margin:0 9px;height:3px;border-radius:3px;background:var(--border);outline:none;cursor:pointer}.lab-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:13px;height:13px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px 1px var(--accent);cursor:pointer}.lab-control input[type=range]::-moz-range-thumb{width:13px;height:13px;border:none;border-radius:50%;background:var(--accent);box-shadow:0 0 8px 1px var(--accent);cursor:pointer}.lab-entry{margin-top:2px}.status,.hint{position:absolute;bottom:30px;color:var(--text);font-size:11.5px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;padding:6px 15px;border-radius:999px;background:var(--glass);backdrop-filter:blur(12px) saturate(1.1);-webkit-backdrop-filter:blur(12px) saturate(1.1);border:1px solid var(--border);box-shadow:var(--shadow)}.status{left:30px;display:flex;align-items:center;gap:10px}.status-pulse{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px 2px var(--accent);animation:pulse 1.3s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}.hint{left:50%;transform:translate(-50%);text-align:center;white-space:nowrap}.vignette{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 52%,rgba(50,34,12,.42) 100%);transition:background 1s ease}.app.night .vignette{background:radial-gradient(ellipse at center,transparent 50%,rgba(6,8,24,.55) 100%)}.minimap{position:absolute;top:28px;left:28px;z-index:11;padding:13px 13px 10px;border-radius:18px;background:var(--glass-float);backdrop-filter:blur(16px) saturate(1.1);-webkit-backdrop-filter:blur(16px) saturate(1.1);border:1px solid var(--border);box-shadow:var(--shadow);pointer-events:none}.minimap canvas{display:block;border-radius:50%}.minimap-title{font-size:12px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:9px;padding-left:2px}@media (max-width: 640px){.panel-fab{top:20px;right:20px}.panel{top:74px;right:20px;left:20px;width:auto;transform-origin:top center}.panel .pattern-list{flex-direction:column}.sound-toggle{bottom:20px;right:20px}.minimap{top:18px;left:18px;transform:scale(.85);transform-origin:top left}.hint{display:none}}