@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=DM+Mono:wght@400;500&display=swap";:root{color-scheme:light dark;font-family:Space Grotesk,DM Mono,system-ui,-apple-system,sans-serif;line-height:1.4;font-weight:500;background-color:var(--bg);color:var(--text);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*:before,*:after{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}button,select{font:inherit}:root{color-scheme:var(--theme-mode, dark);--bg: var(--background, #0a0a0a);--panel: var(--backgroundPanel, #13131a);--surface: var(--backgroundElement, #1b1b24);--border: var(--border, #2c2c34);--border-strong: var(--borderActive, #4b4b55);--text: var(--text, #f5f6fa);--muted: var(--textMuted, #8f93a4);--primary: var(--primary, #8ea8ff);--secondary: var(--secondary, #5c9cf5);--accent: var(--accent, #9d7cd8);--success: var(--success, #7fd88f);--warning: var(--warning, #f5a742);--error: var(--error, #e06c75);--info: var(--info, #56b6c2);--radius-lg: 8px;--radius-md: 6px;--radius-sm: 4px;--shadow-sm: 0 1px 2px rgba(0,0,0,.1);--shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);--shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05);--header-height: 48px;--sidebar-width: 60px;--panel-width: 280px}*{box-sizing:border-box}body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:var(--bg);color:var(--text);overflow:hidden}button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit}.app{display:flex;flex-direction:column;height:100vh}.topbar{height:var(--header-height);background-color:var(--panel);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 16px;gap:12px;flex-shrink:0;z-index:10}.brand{font-weight:700;font-size:16px;letter-spacing:-.02em;display:flex;align-items:center;gap:0px;margin-right:12px}.brand-text{display:flex;align-items:baseline;gap:2px}.logo-block{display:flex;align-items:center}.ascii-logo{font-family:Menlo,Monaco,Courier New,monospace;font-size:12px;line-height:12px;display:inline-block;margin:0;white-space:pre;background:linear-gradient(135deg,var(--primary),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:400}.ascii-text-logo{font-family:Menlo,Monaco,Courier New,monospace;font-size:6px;line-height:6px;display:inline-block;margin:0;white-space:pre;background:linear-gradient(135deg,var(--primary),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}.brand .rainbow{background:linear-gradient(90deg,var(--primary),var(--accent));-webkit-background-clip:text;color:transparent}.brand .studio{color:var(--muted)}.topbar-divider{width:1px;height:20px;background-color:var(--border)}.topbar-actions{display:flex;align-items:center;gap:4px}.topbar-actions button,.topbar-group.actions button{height:28px;padding:0 10px;border-radius:var(--radius-sm);font-size:12px;font-weight:500;color:var(--text);border:1px solid transparent;transition:all .15s ease;display:flex;align-items:center;gap:6px}.topbar-actions button:hover,.topbar-group.actions button:hover{background-color:var(--surface);border-color:var(--border)}.topbar-actions button:disabled{opacity:.4;cursor:not-allowed;background-color:transparent;border-color:transparent}.topbar-actions button.active,.topbar-group.actions button.active{background-color:color-mix(in srgb,var(--primary) 15%,transparent);color:var(--primary);border-color:color-mix(in srgb,var(--primary) 30%,transparent)}.spacer{flex:1}.topbar-group.properties{display:flex;align-items:center;gap:12px}.prop-control{display:flex;align-items:center;gap:6px}.prop-label{font-size:11px;color:var(--muted);font-weight:500}.stepper.compact{display:flex;align-items:center;background-color:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}.stepper.compact button{min-width:20px;width:auto;height:22px;display:flex;align-items:center;justify-content:center;font-size:11px;padding:0 4px;white-space:nowrap;flex-shrink:0}.stepper.compact button.text-btn{padding:0 10px}.stepper.compact button:not(:last-child){border-right:1px solid var(--border)}.stepper.compact button:hover{background-color:var(--border)}.stepper.compact button:disabled{opacity:.4;cursor:not-allowed}.stepper.compact input{width:32px;height:22px;border:none;background:transparent;text-align:center;color:var(--text);font-size:11px;padding:0;-moz-appearance:textfield}.stepper.compact input::-webkit-outer-spin-button,.stepper.compact input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.stepper.compact .value-display{width:28px;text-align:center;font-size:11px;color:var(--text)}.topbar-group.theme{display:flex;align-items:center;gap:8px}.topbar-group.theme select{background-color:var(--surface);border:1px solid var(--border);color:var(--text);padding:4px 8px;border-radius:var(--radius-sm);font-size:12px;outline:none;cursor:pointer}.theme-mode{display:flex;background-color:var(--surface);padding:2px;border-radius:var(--radius-sm);border:1px solid var(--border)}.chip{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:2px;font-size:12px;opacity:.6}.chip:hover{background-color:var(--bg);opacity:.9}.chip.active{background-color:var(--bg);opacity:1;box-shadow:var(--shadow-sm)}.chip:disabled{opacity:.2;cursor:not-allowed}.workspace{flex:1;display:flex;overflow:hidden}.sidebar{width:var(--sidebar-width);background-color:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:8px;flex-shrink:0}.tool{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);color:var(--muted);transition:all .1s ease;position:relative}.tool:hover{background-color:var(--surface);color:var(--text)}.tool.active{background-color:color-mix(in srgb,var(--primary) 20%,transparent);color:var(--primary)}.tool .icon{font-size:18px}.tool .label{display:none;position:absolute;left:100%;margin-left:8px;background:var(--bg);padding:4px 8px;border-radius:4px;font-size:11px;border:1px solid var(--border);white-space:nowrap;z-index:100;pointer-events:none;box-shadow:var(--shadow-md)}.tool:hover .label{display:block}.canvas-area{flex:1;background-color:var(--bg);display:flex;flex-direction:column;position:relative;overflow:hidden}.canvas-shell{flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;padding:40px}.canvas-grid{display:inline-grid;background-color:color-mix(in srgb,var(--surface) 80%,transparent);box-shadow:var(--shadow-lg);border:1px solid var(--border);padding:var(--grid-pad);touch-action:none}.canvas-grid.with-grid{background-image:linear-gradient(to bottom,transparent var(--cell-size),var(--border) var(--cell-size)),linear-gradient(to right,transparent calc(var(--cell-size) * .6),var(--border) calc(var(--cell-size) * .6));background-size:calc(var(--cell-size) * .6 + var(--cell-gap)) calc(var(--cell-size) + var(--cell-gap));background-position:var(--grid-pad) var(--grid-pad)}.cell{display:flex;align-items:center;justify-content:center;font-family:Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;-webkit-user-select:none;user-select:none;cursor:crosshair;line-height:1;overflow:hidden}.cell:hover{outline:1px solid var(--primary);z-index:2}.cell.anchor{outline:2px dashed var(--warning);z-index:3}.cell.selected{background-color:color-mix(in srgb,var(--secondary) 20%,transparent)!important;outline:1px solid var(--secondary);z-index:1}.statusbar{height:28px;background-color:var(--panel);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 12px;font-size:11px;color:var(--muted)}.right-panel{width:var(--panel-width);background-color:var(--panel);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0}.panel-section{padding:16px;display:flex;flex-direction:column;gap:12px}.section-title{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}.panel-divider{height:1px;background-color:var(--border);margin:0 16px}.control-row{display:flex;align-items:center;justify-content:space-between;font-size:13px}.stepper{display:flex;align-items:center;background-color:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}.stepper button{width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:14px}.stepper button:hover{background-color:var(--border)}.stepper input{width:40px;height:24px;border:none;background:transparent;text-align:center;color:var(--text);font-size:12px;padding:0;-moz-appearance:textfield}.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.value-display{width:40px;text-align:center;font-size:12px}.glyph-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}.glyph{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-family:monospace;font-size:14px;background-color:var(--surface);border:1px solid transparent;border-radius:4px;transition:all .1s ease}.glyph:hover{border-color:var(--border-strong);transform:scale(1.1);z-index:2}.glyph.active{border-color:var(--accent);background-color:color-mix(in srgb,var(--accent) 20%,var(--surface));color:var(--accent)}.color-group{display:flex;flex-direction:column;gap:8px}.group-header{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--text)}.swatch-preview{width:32px;height:16px;border-radius:2px;border:1px solid var(--border)}.color-grid{display:flex;flex-direction:column;gap:4px}.swatch-row{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}.swatch{aspect-ratio:1;border-radius:3px;border:1px solid var(--border);cursor:pointer;position:relative}.swatch.active{border-color:#fff;box-shadow:0 0 0 1px var(--bg),0 0 0 2px var(--accent);z-index:2}.swatch:hover{transform:scale(1.1);z-index:1}.swatch.transparent{background-color:transparent}.modal-overlay{position:fixed;inset:0;background-color:#0009;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal-content{background-color:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);width:400px;max-width:90vw;box-shadow:var(--shadow-lg);animation:slideUp .2s ease-out}@keyframes slideUp{0%{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-header{padding:16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}.modal-header h3{margin:0;font-size:14px;font-weight:600}.close-btn{font-size:20px;line-height:1;color:var(--muted)}.close-btn:hover{color:var(--text)}.shortcut-list{padding:16px;display:flex;flex-direction:column;gap:8px}.shortcut-row{display:flex;align-items:center;justify-content:space-between;padding:4px 0;font-size:13px}.keys{display:flex;gap:4px}.keycap{background-color:var(--surface);border:1px solid var(--border);padding:2px 6px;border-radius:4px;font-family:monospace;font-size:11px;color:var(--text);min-width:20px;text-align:center}.mobile-panel-toggle,.mobile-menu-toggle,.panel-backdrop,.mobile-menu-overlay{display:none}@media(max-width:768px){.mobile-panel-toggle,.mobile-menu-toggle{display:flex}.topbar .brand,.topbar .topbar-divider,.topbar-group.properties,.topbar-group.theme,.topbar .spacer{display:none}.topbar{justify-content:space-between;padding:0 12px}.topbar-actions{gap:8px}.topbar-actions button{min-width:44px;min-height:44px;padding:0 12px}.topbar-actions button .btn-label{display:none}.topbar-actions button .btn-icon{font-size:18px}.workspace{flex-direction:column}.canvas-area{order:1;min-height:0}.canvas-shell{padding:16px}.sidebar{order:3;width:100%;height:72px;flex-direction:row;align-items:center;justify-content:flex-start;padding:8px 12px;gap:10px;border-right:none;border-top:1px solid var(--border);overflow-x:auto;overflow-y:hidden}.sidebar .tool{flex:0 0 auto;min-width:44px;min-height:44px}.panel-backdrop{display:block;position:fixed;inset:0;top:var(--header-height);background-color:#00000080;z-index:19;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.right-panel{position:fixed;order:2;right:0;top:var(--header-height);bottom:0;width:min(85vw,var(--panel-width));transform:translate(100%);transition:transform .3s ease;z-index:20;box-shadow:var(--shadow-lg)}.right-panel.open{transform:translate(0)}.mobile-menu-overlay{display:flex;position:fixed;inset:0;top:var(--header-height);background-color:#00000080;z-index:100;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);align-items:flex-start;justify-content:center;padding:16px}.mobile-menu{background-color:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);width:100%;max-width:320px;box-shadow:var(--shadow-lg);animation:slideUp .2s ease-out}.mobile-menu-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);font-weight:600}.mobile-menu-header button{font-size:20px;color:var(--muted);min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}.mobile-menu-section{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:10px}.mobile-menu-section:last-child{border-bottom:none}.mobile-menu-label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}.mobile-menu-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.mobile-menu-row span{font-size:13px;color:var(--text)}.mobile-menu-btn{flex:1;background-color:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;font-size:13px;color:var(--text);min-height:44px}.mobile-menu-btn:hover{background-color:var(--border)}.mobile-menu-btn:disabled{opacity:.4;cursor:not-allowed}.mobile-menu-section select{width:100%;background-color:var(--surface);border:1px solid var(--border);color:var(--text);padding:10px 12px;border-radius:var(--radius-sm);font-size:13px;outline:none;cursor:pointer;min-height:44px}.mobile-menu-section .theme-mode{align-self:flex-start}.mobile-menu-section .chip{min-width:44px;min-height:44px}.statusbar{padding:0 12px;font-size:10px}}