:root{--aura-blue: #003DA5;--aura-blue-700: #002E7C;--aura-blue-900: #001D52;--aura-blue-500: #1E5BC6;--aura-blue-300: #6E96DF;--aura-blue-100: #D9E3F4;--aura-blue-050: #EEF3FB;--aura-ink: #1A1A1A;--aura-grey-700: #4A4A4A;--aura-grey-600: #6B6B6B;--aura-grey-500: #8A8A8A;--aura-grey-400: #B4B4B4;--aura-grey-300: #D6D6D6;--aura-grey-200: #E6E6E6;--aura-grey-100: #F2F2F2;--aura-grey-050: #F8F8F8;--font-sans: "Source Sans 3", system-ui, sans-serif;--font-mono: "JetBrains Mono", "IBM Plex Mono", monospace}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden;background:#fff;color:var(--aura-ink);font-family:var(--font-sans);font-size:14px;-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit}button{color:inherit}button:disabled{opacity:.38;cursor:not-allowed;box-shadow:none}.app{display:flex;height:100vh}.sidebar{--sidebar-width: 316px;width:var(--sidebar-width);flex-shrink:0;margin-right:0;display:flex;flex-direction:column;background:var(--aura-grey-050);border-right:1px solid var(--aura-grey-200);overflow:hidden;transform:translate(0);opacity:1;transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .22s ease,margin-right .28s cubic-bezier(.2,.8,.2,1),border-color .2s ease}.sidebar-head{padding:18px 20px 14px;border-bottom:1px solid var(--aura-grey-200);flex-shrink:0}.overline{margin-bottom:4px;color:var(--aura-blue);font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase}.sidebar-head h1{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;letter-spacing:-.01em}.sidebar-head-title{display:inline-flex;align-items:baseline;gap:8px}.sidebar-head .version{color:var(--aura-grey-400);font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}.sidebar-head-actions{margin-left:auto;display:inline-flex;align-items:center;gap:6px}.sidebar-stage{position:relative;flex:1;overflow:hidden}.sidebar-body{flex:1;overflow-y:auto;overscroll-behavior:contain}.sidebar-body::-webkit-scrollbar{width:3px}.sidebar-body::-webkit-scrollbar-track{background:transparent}.sidebar-body::-webkit-scrollbar-thumb{background:var(--aura-grey-300);border-radius:2px}.sidebar-panel{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--aura-grey-050);transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .22s ease}.sidebar-panel.generator-panel{transform:translate(0);opacity:1}.sidebar-panel.animation-panel{transform:translate(30px);opacity:0;pointer-events:none}.sidebar.mode-animation .generator-panel{transform:translate(-30px);opacity:0;pointer-events:none}.sidebar.mode-animation .animation-panel{transform:translate(0);opacity:1;pointer-events:auto}.section{padding:12px 20px 13px;border-bottom:1px solid var(--aura-grey-200)}.section.dim{opacity:.38;pointer-events:none}.section-label{margin-bottom:9px;color:var(--aura-grey-500);font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase}.section-note,.paint-hint,.kbd-list,.status-line,.grid-info{color:var(--aura-grey-500);font-family:var(--font-mono);font-size:9px;line-height:1.55}.section-note,.status-line{margin-top:8px}.sidebar-foot{flex-shrink:0;padding:10px 20px;border-top:1px solid var(--aura-grey-200);display:flex;flex-direction:column;gap:5px;transition:opacity .18s ease}body.zen-mode .sidebar{margin-right:calc(var(--sidebar-width) * -1);transform:translate(-30px);opacity:0;border-right-color:transparent;pointer-events:none}.glyph-row,.paint-row,.seg-row,.preset-actions,.json-actions,.foot-row,.action-row,.tool-row,.selection-actions{display:flex;gap:6px}.tool-row,.action-row,.selection-actions{flex-wrap:wrap}.glyph-btn{flex:1;height:44px;border:1.5px solid var(--aura-grey-300);border-radius:4px;background:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;transition:border-color .12s,background .12s;user-select:none}.glyph-btn svg{width:20px;height:20px}.glyph-btn .gl{fill:var(--aura-grey-400);transition:fill .12s}.glyph-btn .cap{color:var(--aura-grey-500);font-family:var(--font-mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase;transition:color .12s}.glyph-btn.active{border-color:var(--aura-blue);background:var(--aura-blue-050)}.glyph-btn.active .gl{fill:var(--aura-blue)}.glyph-btn.active .cap{color:var(--aura-blue)}.glyph-btn:not(.active) .gl{fill:var(--aura-grey-300)}.glyph-btn:not(.active) .cap{color:var(--aura-grey-400)}.color-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}.color-row:last-of-type{margin-bottom:0}.color-row label{width:76px;flex-shrink:0;font-size:12px;color:var(--aura-grey-700)}input[type=color]{width:26px;height:26px;padding:2px;border:1px solid var(--aura-grey-300);border-radius:3px;background:none;cursor:pointer;flex-shrink:0}.hex-in,.seed-in,.preset-name-in,.json-area,.ctrl-val{border:1px solid var(--aura-grey-300);background:#fff;color:var(--aura-ink)}.hex-in{width:84px;padding:3px 6px;border-radius:3px;font-family:var(--font-mono);font-size:11px;flex-shrink:0}.hex-in:focus,.seed-in:focus,.preset-name-in:focus,.json-area:focus,select:focus,.ctrl-val:focus{outline:none;border-color:var(--aura-blue)}.preset-sub{margin-bottom:4px;color:var(--aura-grey-500);font-family:var(--font-mono);font-size:9px;letter-spacing:.08em}.presets-wrap{display:flex;gap:4px;margin-top:6px}.swatch{width:20px;height:20px;border:none;border-radius:3px;cursor:pointer;flex-shrink:0;transition:transform .1s}.swatch:hover{transform:scale(1.12)}.swatch.on{outline:2px solid var(--aura-blue);outline-offset:1px}.ctrl-row{display:flex;align-items:center;gap:0;margin-bottom:6px}.ctrl-row:last-child{margin-bottom:0}.ctrl-row label{width:64px;flex-shrink:0;font-size:12px;color:var(--aura-grey-700)}input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:3px;margin:0 8px;border-radius:2px;background:var(--aura-grey-300);cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border:2px solid #fff;border-radius:50%;background:var(--aura-blue);box-shadow:0 0 0 1px var(--aura-blue);cursor:pointer}input[type=range]::-moz-range-thumb{width:13px;height:13px;border:2px solid #fff;border-radius:50%;background:var(--aura-blue);box-shadow:0 0 0 1px var(--aura-blue);cursor:pointer}.ctrl-value-wrap{width:54px;flex-shrink:0;display:flex;align-items:center;justify-content:flex-end;gap:3px}.ctrl-val{width:34px;padding:1px 2px;border-radius:2px;border-width:1px;text-align:right;background:transparent;color:var(--aura-ink);font-family:var(--font-mono);font-size:10px;cursor:ns-resize;-moz-appearance:textfield}.ctrl-val::-webkit-inner-spin-button,.ctrl-val::-webkit-outer-spin-button{-webkit-appearance:none}.ctrl-val:focus{width:38px;cursor:text;background:var(--aura-blue-050)}.ctrl-unit{width:16px;color:var(--aura-grey-500);font-family:var(--font-mono);font-size:9px;text-align:left}.size-presets{display:flex;gap:4px;margin-bottom:9px}.size-btn,.mult-btn,.btn-small,.btn-shuffle,.btn-mode,.btn-tool,.btn-action,.btn-exp,.btn-help,.help-close{transition:all .12s;cursor:pointer}.size-btn{flex:1;padding:3px 0;border:1px solid var(--aura-grey-300);border-radius:3px;background:#fff;color:var(--aura-grey-600);font-family:var(--font-mono);font-size:8px;letter-spacing:.06em;text-align:center}.size-btn:hover,.size-btn.active{border-color:var(--aura-blue);background:var(--aura-blue-050);color:var(--aura-blue)}.mult-row{display:flex;align-items:center;gap:3px;margin-top:1px;margin-bottom:8px;padding-left:64px;flex-wrap:wrap}.mult-label{margin-right:2px;color:var(--aura-grey-400);font-family:var(--font-mono);font-size:8px;white-space:nowrap}.mult-btn{padding:2px 5px;border:1px solid var(--aura-grey-200);border-radius:2px;background:#fff;color:var(--aura-grey-500);font-family:var(--font-mono);font-size:8px;white-space:nowrap}.mult-btn:hover{border-color:var(--aura-blue-300);color:var(--aura-blue)}.mult-btn.active{border-color:var(--aura-blue);background:var(--aura-blue-050);color:var(--aura-blue)}.density-bar{height:5px;margin-top:6px;border-radius:3px;background:var(--aura-grey-200);display:flex;overflow:hidden}.db-zero{background:var(--aura-blue);transition:width .08s}.db-one{background:var(--aura-blue-300);transition:width .08s}.density-note{margin-top:3px;text-align:right}select{width:100%;padding:6px 8px;border:1px solid var(--aura-grey-300);border-radius:4px;background:#fff;color:var(--aura-ink);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B6B6B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}.seed-row,.preset-save-row,.export-size-row{display:flex;align-items:center;gap:6px}.seed-in{width:92px;padding:5px 8px;border-radius:4px;font-family:var(--font-mono);font-size:12px}.btn-shuffle,.btn-small{padding:5px 8px;border:1px solid var(--aura-grey-300);border-radius:4px;background:#fff;color:var(--aura-grey-700);font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;white-space:nowrap}.btn-shuffle:hover,.btn-small:hover,.btn-mode:hover,.btn-tool:hover,.btn-action:hover{border-color:var(--aura-blue);color:var(--aura-blue)}.btn-mode,.btn-tool,.btn-action{flex:1;padding:5px 7px;border:1px solid var(--aura-grey-300);border-radius:4px;background:#fff;color:var(--aura-grey-700);font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}.btn-mode.active,.btn-tool.active,.btn-action.active,.btn-small.active{border-color:var(--aura-blue);background:var(--aura-blue);color:#fff}.selection-actions,.action-row{margin-top:6px;flex-wrap:wrap}.selection-actions{flex-wrap:nowrap;gap:4px}.selection-actions .btn-small{flex:1 1 0;min-width:0;padding:6px 4px;font-size:9px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}.selection-actions .ico{margin-right:4px;font-size:10px;line-height:1}.export-actions{display:flex;gap:6px;margin-top:8px}.btn-small[disabled],.btn-action[disabled]{opacity:.34;cursor:default;pointer-events:none}.paint-grid{display:grid;gap:10px;margin-top:8px}.paint-stack{display:grid;gap:8px}.paint-meta{display:grid;gap:7px;min-width:0}.paint-advanced{display:grid;gap:10px;margin-top:0;max-height:0;opacity:0;overflow:clip;pointer-events:none;transform:translateY(-6px);transition:max-height .24s ease,opacity .18s ease,transform .24s ease,margin-top .24s ease}.section.editing .paint-advanced{margin-top:8px;max-height:420px;opacity:1;pointer-events:auto;transform:translateY(0)}.paint-hint strong,.status-line strong,.preview-badge strong{color:var(--aura-ink);font-weight:700}.paint-hint kbd,.status-line kbd,.preview-badge kbd{margin:0 1px}.paint-hint em,.preview-badge em{font-style:italic}.brush-disabled{opacity:.38}.kbd-list{margin-top:8px;display:grid;grid-template-columns:1fr;gap:2px}.preset-name-in{flex:1;padding:4px 6px;border-radius:3px;font-family:var(--font-mono);font-size:11px}.preset-list{display:flex;flex-direction:column;gap:3px;min-height:0;margin-top:10px;margin-bottom:8px}.preset-item{display:flex;align-items:center;gap:4px;padding:3px 6px;border:1px solid var(--aura-grey-200);border-radius:3px;background:#fff}.preset-item-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;color:var(--aura-ink);font-family:var(--font-mono);font-size:10px}.preset-item-name:hover{color:var(--aura-blue)}.preset-item-del{padding:0 2px;border:none;background:none;color:var(--aura-grey-400);font-size:11px;line-height:1;cursor:pointer}.preset-item-del:hover{color:var(--aura-ink)}.json-area{width:100%;min-height:96px;padding:6px;border-radius:3px;resize:vertical;color:var(--aura-ink);font-family:var(--font-mono);font-size:9px;line-height:1.5}.btn-exp{flex:1;padding:6px 4px;border:none;border-radius:4px;text-align:center;font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}.btn-primary{background:var(--aura-blue);color:#fff}.btn-primary:hover{background:var(--aura-blue-700)}.btn-secondary{border:1px solid var(--aura-grey-300);background:#fff;color:var(--aura-grey-700)}.btn-secondary:hover{border-color:var(--aura-blue);color:var(--aura-blue)}.opt-row{display:flex;align-items:center;gap:6px;margin-top:2px}.opt-row label{display:flex;align-items:center;gap:4px;color:var(--aura-grey-600);font-family:var(--font-mono);font-size:9px;cursor:pointer}.opt-row input{cursor:pointer}.foot-note{display:none;color:var(--aura-grey-500);font-family:var(--font-mono);font-size:9px;line-height:1.5}.sidebar.mode-animation .foot-note{display:block}.btn-help{margin-left:auto;width:24px;height:24px;border:1px solid var(--aura-grey-300);border-radius:999px;background:#fff;color:var(--aura-grey-600);font-family:var(--font-mono);font-size:11px;font-weight:700;line-height:1}.btn-anim-toggle{width:auto;min-width:60px;padding:0 10px;border-radius:999px;font-size:9px;letter-spacing:.14em;text-transform:uppercase}.btn-help:hover,.btn-help.active{border-color:var(--aura-blue);background:var(--aura-blue-050);color:var(--aura-blue)}.btn-anim-toggle.active{border-color:var(--aura-blue);background:var(--aura-blue);color:#fff}.preview{flex:1;position:relative;overflow:hidden;background:#fff}.preview canvas{position:absolute;inset:0;display:block}.preview.editing canvas{cursor:crosshair}.preview.editing.selecting canvas{cursor:cell}.preview.editing.moving canvas{cursor:move}.preview.editing.resizing canvas{cursor:ew-resize}.preview-badge{position:absolute;top:18px;right:18px;z-index:3;min-width:184px;padding:8px 10px;border:1px solid rgba(0,61,165,.15);border-radius:4px;background:#ffffffeb;backdrop-filter:blur(10px);color:var(--aura-grey-700);font-family:var(--font-mono);font-size:10px;line-height:1.55;transition:opacity .14s,transform .14s;pointer-events:none}.preview-badge-title{margin-bottom:2px;color:var(--aura-blue);font-size:9px;letter-spacing:.12em;text-transform:uppercase}.preview-badge.occluded{opacity:.34;transform:translate(-18px,12px)}body.zen-mode .preview-badge{opacity:0;pointer-events:none}body.zen-mode .preview-badge.override-visible{opacity:1;pointer-events:auto}.anim-intro,.anim-mode-note{color:var(--aura-grey-600);font-size:12px;line-height:1.45}.anim-intro strong{color:var(--aura-ink);font-weight:700}.pill-row{display:flex;flex-wrap:wrap;gap:4px}.pill-btn{padding:5px 8px;border:1px solid var(--aura-grey-300);border-radius:999px;background:#fff;color:var(--aura-grey-700);font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:all .12s}.pill-btn:hover{border-color:var(--aura-blue);color:var(--aura-blue)}.pill-btn.active{border-color:var(--aura-blue);background:var(--aura-blue);color:#fff}.anim-direction-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.direction-btn{min-height:34px;padding:0;border:1px solid var(--aura-grey-300);border-radius:4px;background:#fff;color:var(--aura-grey-700);font-size:16px;line-height:1;cursor:pointer;transition:all .12s}.direction-btn:hover{border-color:var(--aura-blue);color:var(--aura-blue)}.direction-btn.active{border-color:var(--aura-blue);background:var(--aura-blue-050);color:var(--aura-blue)}.switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.switch-row:last-child{margin-bottom:0}.switch-copy{display:grid;gap:2px;min-width:0}.switch-title{color:var(--aura-ink);font-size:12px;font-weight:600}.switch-sub{color:var(--aura-grey-500);font-family:var(--font-mono);font-size:9px;line-height:1.45}.toggle-chip{min-width:52px;padding:5px 8px;border:1px solid var(--aura-grey-300);border-radius:999px;background:#fff;color:var(--aura-grey-700);font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:all .12s}.toggle-chip.active{border-color:var(--aura-blue);background:var(--aura-blue);color:#fff}.anim-mode-settings[hidden],.section.is-hidden{display:none}.preset-caption{margin-top:8px;color:var(--aura-grey-500);font-family:var(--font-mono);font-size:9px;line-height:1.5}.help-panel{position:absolute;top:18px;left:18px;z-index:4;width:min(360px,calc(100% - 36px));padding:14px 14px 12px;border:1px solid rgba(0,61,165,.16);border-radius:6px;background:#fffffff0;backdrop-filter:blur(14px);box-shadow:0 16px 48px #001d521f}.help-panel[hidden]{display:none}.help-panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;color:var(--aura-ink);font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}.help-close{padding:3px 6px;border:1px solid var(--aura-grey-300);border-radius:3px;background:#fff;color:var(--aura-grey-600);font-family:var(--font-mono);font-size:9px}.help-close:hover{border-color:var(--aura-blue);color:var(--aura-blue)}.help-grid{display:grid;gap:10px}.help-group{display:grid;gap:4px;color:var(--aura-grey-700);font-family:var(--font-mono);font-size:10px;line-height:1.55}.help-group-title{color:var(--aura-blue);font-size:9px;letter-spacing:.12em;text-transform:uppercase}kbd{display:inline-block;min-width:16px;padding:1px 4px;border:1px solid var(--aura-grey-300);border-bottom-width:2px;border-radius:3px;background:#fff;color:var(--aura-ink);font-family:var(--font-mono);font-size:9px;line-height:1.4;text-align:center}.toast{position:fixed;right:20px;bottom:20px;z-index:200;padding:7px 14px;border-radius:4px;background:var(--aura-ink);color:#fff;font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;opacity:0;transform:translateY(6px);transition:opacity .18s,transform .18s;pointer-events:none}.toast.show{opacity:1;transform:translateY(0)}