:root{--bg:#f4f5f8;--surface:#fff;--surface-2:#f8f9fb;--surface-3:#eef0f4;--surface-hover:#e7e9ef;--border:#e3e6ec;--border-strong:#cdd2dc;--text:#161922;--text-2:#464c5c;--text-3:#767d8f;--accent:#4f5bd5;--accent-hover:#4350c4;--accent-soft:#eceefd;--accent-text:#3a45b8;--on-accent:#fff;--success:#17864a;--success-soft:#e3f6ec;--warning:#a86b00;--warning-soft:#fff3d6;--danger:#d0342c;--danger-soft:#fde9e7;--workspace:#e5e7ed;--page-border:#14182824;--grid-line:#4f5bd533;--critical-1:#ff5a1f;--critical-2:#e3171f;--shadow-sm:0 1px 2px #1014230f;--shadow-md:0 4px 14px #10142314, 0 1px 3px #1014230f;--shadow-lg:0 16px 40px #10142329, 0 2px 8px #10142314;--radius-sm:8px;--radius:10px;--radius-lg:14px;--font:Inter, "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;--header-h:56px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-theme=dark]{--bg:#111318;--surface:#1a1d24;--surface-2:#1f232b;--surface-3:#262a33;--surface-hover:#2e333d;--border:#2b3039;--border-strong:#3b414d;--text:#eceef3;--text-2:#b9bfcc;--text-3:#868d9d;--accent:#7d87f3;--accent-hover:#8f98f6;--accent-soft:#7d87f329;--accent-text:#a8b0ff;--on-accent:#0e1020;--success:#3ccf7e;--success-soft:#3ccf7e24;--warning:#f2b544;--warning-soft:#f2b54424;--danger:#ff6b61;--danger-soft:#ff6b6126;--workspace:#0b0d11;--page-border:#ffffff1f;--grid-line:#7d87f347;--shadow-sm:0 1px 2px #0006;--shadow-md:0 4px 14px #00000059;--shadow-lg:0 18px 44px #0000008c;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;overscroll-behavior:none;font-size:14px;line-height:1.4}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer;background:0 0;border:0;padding:0}button:disabled,[aria-disabled=true]{cursor:not-allowed}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}input[type=text],input[type=number],input:not([type]),select{background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-sm);min-width:0;height:34px;padding:0 10px}input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}kbd{background:var(--surface-3);border:1px solid var(--border);color:var(--text-2);white-space:nowrap;border-radius:6px;padding:2px 6px;font-family:inherit;font-size:11px;font-weight:600}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;position:absolute!important}.skip-link{z-index:2000;background:var(--accent);color:var(--on-accent);border-radius:var(--radius);padding:8px 12px;text-decoration:none;position:absolute;top:-48px;left:8px}.skip-link:focus{top:8px}.hint{color:var(--text-3);margin:0;font-size:12.5px}.hint.error{color:var(--danger)}.header-spacer{flex:1}.btn{border-radius:var(--radius);white-space:nowrap;border:1px solid #0000;justify-content:center;align-items:center;gap:6px;height:38px;padding:0 14px;font-size:14px;font-weight:600;transition:background-color .15s,color .15s,box-shadow .15s,transform .1s;display:inline-flex}.btn:active:not(:disabled){transform:translateY(1px)}.btn.small{height:32px;padding:0 10px;font-size:13px}.btn-primary{background:var(--accent);color:var(--on-accent)}.btn-primary:hover:not(:disabled){background:var(--accent-hover)}.btn-primary:disabled{opacity:.5}.btn-soft{background:var(--surface-3);color:var(--text)}.btn-soft:hover:not(:disabled):not([aria-disabled=true]){background:var(--surface-hover)}.btn-soft[aria-disabled=true],.btn-soft:disabled{color:var(--text-3)}.btn-ghost{color:var(--text-2)}.btn-ghost:hover:not(:disabled){background:var(--surface-3);color:var(--text)}.btn-ghost.on{background:var(--accent-soft);color:var(--accent-text)}.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover{filter:brightness(.95)}.btn-danger-soft{background:var(--danger-soft);color:var(--danger)}.btn.icon-only{width:38px;padding:0}.icon-btn{border-radius:var(--radius);width:38px;height:38px;color:var(--text-2);flex:none;place-items:center;transition:background-color .15s,color .15s;display:inline-grid}.icon-btn:hover:not(:disabled){background:var(--surface-3);color:var(--text)}.icon-btn:disabled{opacity:.38}.icon-btn.on{background:var(--accent-soft);color:var(--accent-text)}.icon-btn.small{border-radius:var(--radius-sm);width:30px;height:30px}.icon-btn.danger:hover:not(:disabled){color:var(--danger);background:var(--danger-soft)}.icon-btn.fav-on{color:#e8a400}.chip{background:var(--surface-3);height:32px;color:var(--text-2);border-radius:999px;padding:0 12px;font-size:13px;font-weight:600}.chip:hover{background:var(--surface-hover);color:var(--text)}.chip.active{background:var(--accent);color:var(--on-accent)}.chip-row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.app{flex-direction:column;height:100dvh;display:flex;position:relative;overflow:hidden}.app-header{height:var(--header-h);background:var(--surface);border-bottom:1px solid var(--border);z-index:10;flex:none;align-items:center;gap:8px;padding:0 12px;display:flex}.brand{flex:none;align-items:center;gap:10px;margin-right:8px;display:flex}.brand-mark{background:var(--accent);width:32px;height:32px;color:var(--on-accent);border-radius:10px;place-items:center;display:grid}.brand-name{letter-spacing:-.01em;font-size:16px;font-weight:800}.brand-name span{color:var(--accent-text)}.work-name{color:var(--text-3);border-left:1px solid var(--border);align-items:center;gap:6px;padding-left:12px;display:flex}.work-name input{width:190px;color:var(--text);background:0 0;border-color:#0000;font-weight:600}.work-name input:hover{border-color:var(--border)}.history-btns{gap:2px;margin-left:4px;display:flex}.save-status{color:var(--text-3);align-items:center;gap:4px;margin-right:4px;font-size:12.5px;display:inline-flex}.workspace{flex:1;grid-template-columns:84px minmax(0,1fr);min-height:0;display:grid;position:relative}.is-focus .workspace{grid-template-columns:minmax(0,1fr)}.stage{flex-direction:column;flex:1;min-width:0;min-height:0;display:flex;position:relative}.layers-float{z-index:6;width:288px;max-height:calc(100% - 76px);box-shadow:var(--shadow-lg);border-radius:var(--radius-lg);flex-direction:column;animation:.12s ease-out pop-in;display:flex;position:absolute;top:64px;right:12px}.layers-float .layers-panel{max-height:100%}.focus-exit{z-index:20;background:var(--surface);color:var(--text-2);border:1px solid var(--border);box-shadow:var(--shadow-md);border-radius:999px;padding:8px 16px;font-size:13px;font-weight:600;position:fixed;bottom:16px;left:50%;transform:translate(-50%)}.tool-rail.vertical{background:var(--surface);border-right:1px solid var(--border);flex-direction:column;align-items:stretch;gap:4px;padding:10px 8px;display:flex;overflow-y:auto}.rail-btn{border-radius:var(--radius);min-height:56px;color:var(--text-2);border:1.5px solid #0000;flex-direction:column;justify-content:center;align-items:center;gap:3px;padding:6px 2px;transition:background-color .15s,color .15s,border-color .15s;display:flex}.rail-btn:hover{background:var(--surface-3);color:var(--text)}.rail-btn.active{background:var(--accent-soft);color:var(--accent-text);border-color:var(--accent)}.rail-label{text-align:center;text-overflow:ellipsis;white-space:nowrap;max-width:68px;font-size:11px;font-weight:600;line-height:1.15;overflow:hidden}.tool-rail.vertical .rail-btn:nth-child(7){margin-top:6px;position:relative}.tool-rail.horizontal{justify-content:space-between;gap:2px;padding:4px 6px;display:flex}.tool-rail.horizontal .rail-btn{flex:1;min-width:44px;min-height:52px;padding:4px 0}.tool-rail.horizontal .rail-label{font-size:10px}.tool-menu{flex-direction:column;gap:2px;min-width:220px;display:flex}.tool-menu>button{border-radius:var(--radius-sm);text-align:left;height:40px;color:var(--text);align-items:center;gap:10px;padding:0 10px;display:flex}.tool-menu>button span{flex:1}.tool-menu>button:hover{background:var(--surface-3)}.tool-menu>button.active{background:var(--accent-soft);color:var(--accent-text);font-weight:600}.menu-note{color:var(--text-3);margin:6px 10px 2px;font-size:12px}.menu-input{color:var(--text-3);border-bottom:1px solid var(--border);flex-direction:column;gap:4px;margin-bottom:4px;padding:4px 10px 10px;font-size:12px;display:flex}.context-bar{background:var(--surface);border-bottom:1px solid var(--border);scrollbar-width:thin;white-space:nowrap;flex:none;align-items:center;gap:8px;min-height:52px;padding:6px 12px;display:flex;overflow:auto hidden}.context-bar>*{flex:none}.context-bar.is-locked .ctx-btn:not([aria-expanded]),.context-bar.is-locked .range-field,.context-bar.is-locked .segmented{opacity:.55}.ctx-tool-name{color:var(--text-2);align-items:center;gap:6px;padding-right:4px;font-size:13px;font-weight:700;display:inline-flex}.ctx-title{align-items:center;gap:6px;font-size:13px;font-weight:700;display:inline-flex}.ctx-sep{background:var(--border);align-self:stretch;width:1px;margin:6px 2px}.ctx-hint{color:var(--text-3);font-size:12.5px}.ctx-spacer{flex:1!important}.ctx-btn{border-radius:var(--radius-sm);min-width:34px;height:34px;color:var(--text-2);justify-content:center;align-items:center;gap:6px;padding:0 8px;font-size:13px;font-weight:600;display:inline-flex}.ctx-btn:hover:not(:disabled){background:var(--surface-3);color:var(--text)}.ctx-btn.active{background:var(--accent-soft);color:var(--accent-text)}.ctx-btn.danger:hover{background:var(--danger-soft);color:var(--danger)}.ctx-group,.ctx-select{align-items:center;gap:6px;display:inline-flex}.ctx-select select{max-width:140px;height:32px}.range-label{color:var(--text-2);font-size:12.5px;font-weight:600}.num-input{color:var(--text-2);align-items:center;gap:4px;font-size:12.5px;font-weight:600;display:inline-flex}.num-input input{text-align:right;font-variant-numeric:tabular-nums;height:32px;padding:0 6px}.num-input em{color:var(--text-3);font-style:normal}.fill-chip{border:1px solid var(--border-strong);border-radius:6px;width:18px;height:18px;display:inline-block}.size-preview-btn{width:40px;padding:0}.size-dot{border-radius:50%;min-width:3px;max-width:28px;min-height:3px;max-height:28px;display:inline-block}.size-presets{flex-direction:column;gap:10px;width:260px;display:flex}.size-preset-row{gap:6px;display:flex}.size-preset{border-radius:var(--radius-sm);border:1px solid var(--border);flex-direction:column;flex:1;justify-content:flex-end;align-items:center;gap:4px;height:64px;padding-bottom:6px;font-size:12px;font-weight:600;display:flex}.size-preset:hover{background:var(--surface-3)}.size-preset.active{border-color:var(--accent);background:var(--accent-soft)}.stroke-preview{background:var(--surface-2);border-radius:var(--radius-sm);width:100%;height:60px;color:var(--text-2)}.advanced-panel{flex-direction:column;gap:12px;width:280px;display:flex}.check-row{align-items:center;gap:8px;font-size:13px;display:flex}.icon-grid{flex-direction:column;gap:8px;display:flex}.icon-grid-row{gap:4px;display:flex}.popover-title{margin:0;font-size:13px;font-weight:700}.popover-actions{justify-content:flex-end;gap:8px;display:flex}.range-field{align-items:center;gap:8px;display:inline-flex}.range-field input[type=range]{appearance:none;--fill:50%;background:0 0;width:140px;height:22px}.range-field.compact input[type=range]{width:96px}.range-field input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--accent) var(--fill), var(--border-strong) var(--fill));border-radius:2px;height:4px}.range-field input[type=range]::-moz-range-track{background:var(--border-strong);border-radius:2px;height:4px}.range-field input[type=range]::-moz-range-progress{background:var(--accent);border-radius:2px;height:4px}.range-field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--surface);border:2px solid var(--accent);width:16px;height:16px;box-shadow:var(--shadow-sm);border-radius:50%;margin-top:-6px}.range-field input[type=range]::-moz-range-thumb{background:var(--surface);border:2px solid var(--accent);border-radius:50%;width:14px;height:14px}.num-field{background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-sm);align-items:center;height:30px;padding-right:6px;display:inline-flex}.num-field:focus-within{outline:2px solid var(--accent);border-color:var(--accent)}.num-field input{text-align:right;font-variant-numeric:tabular-nums;width:40px;background:0 0!important;border:0!important;outline:none!important;height:28px!important;padding:0 4px 0 6px!important}.num-field .unit{color:var(--text-3);font-size:12px}.segmented{background:var(--surface-3);border-radius:var(--radius);gap:2px;padding:3px;display:inline-flex}.segmented button{height:30px;color:var(--text-2);border-radius:7px;align-items:center;gap:6px;padding:0 10px;font-size:13px;font-weight:600;display:inline-flex}.segmented.seg-sm button{height:28px;padding:0 8px}.segmented button:hover{color:var(--text)}.segmented button.active{background:var(--surface);color:var(--accent-text);box-shadow:var(--shadow-sm)}.switch-row{border-bottom:1px solid var(--border);justify-content:space-between;align-items:flex-start;gap:16px;padding:12px 0;display:flex}.switch-row label{font-weight:600}.switch-text{flex-direction:column;gap:4px;display:flex}.switch{background:var(--border-strong);border-radius:999px;flex:none;width:44px;height:26px;transition:background-color .18s;position:relative}.switch.on{background:var(--accent)}.switch-thumb{width:20px;height:20px;box-shadow:var(--shadow-sm);background:#fff;border-radius:50%;transition:transform .18s;position:absolute;top:3px;left:3px}.switch.on .switch-thumb{transform:translate(18px)}.color-btn{border-radius:var(--radius);height:36px;color:var(--text-2);align-items:center;gap:8px;padding:0 10px 0 6px;font-size:13px;font-weight:600;display:inline-flex}.color-btn:hover{background:var(--surface-3)}.color-stack{width:28px;height:28px;position:relative}.color-stack .fg,.color-stack .bg{border:1.5px solid var(--surface);width:20px;height:20px;box-shadow:0 0 0 1px var(--border-strong);border-radius:6px;position:absolute}.color-stack .fg{z-index:1;top:0;left:0}.color-stack .bg{bottom:0;right:0}.quick-swatches{align-items:center;gap:4px;display:inline-flex}.swatch{background:var(--swatch);border:1px solid #0000001a;border-radius:8px;flex:none;width:28px;height:28px;transition:transform .1s}.swatch.light{border-color:var(--border-strong)}.swatch:hover{transform:scale(1.08)}.swatch.active{outline:2px solid var(--accent);outline-offset:2px}.swatch-sm{border-radius:6px;width:22px;height:22px}.color-panel{flex-direction:column;gap:12px;width:300px;display:flex}.fgbg-row{align-items:center;gap:6px;display:flex}.fgbg{border-radius:var(--radius-sm);border:1px solid var(--border);flex:1;align-items:center;gap:8px;height:36px;padding:0 10px;font-size:13px;font-weight:600;display:flex}.fgbg.active{border-color:var(--accent);background:var(--accent-soft)}.fgbg-chip{width:18px;height:18px;box-shadow:0 0 0 1px var(--border-strong);border-radius:5px}.palette-tabs{flex-wrap:wrap;gap:4px;display:flex}.palette-tabs button{height:28px;color:var(--text-2);background:var(--surface-3);border-radius:999px;padding:0 10px;font-size:12px;font-weight:600}.palette-tabs button.active{background:var(--accent);color:var(--on-accent)}.swatch-grid{grid-template-columns:repeat(7,1fr);gap:8px;display:grid}.swatch-grid .swatch{aspect-ratio:1;width:100%;height:auto}.custom-color{align-items:center;gap:8px;display:flex}.native-color{border-radius:var(--radius-sm);color:#fff;cursor:pointer;background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red);flex:none;place-items:center;width:36px;height:36px;display:grid;position:relative}.native-color input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.native-color svg{filter:drop-shadow(0 1px 1px #00000080)}.hex-field{color:var(--text-3);flex:1;align-items:center;gap:6px;font-size:12px;font-weight:700;display:flex}.hex-field input{font-variant-numeric:tabular-nums;text-transform:uppercase;flex:1}.hex-field input[aria-invalid=true]{border-color:var(--danger)}.color-row{flex-direction:column;gap:6px;display:flex}.row-label{color:var(--text-3);font-size:12px;font-weight:700}.swatch-line{flex-wrap:wrap;align-items:center;gap:6px;min-height:22px;display:flex}.canvas-wrap{background:var(--workspace);touch-action:none;flex:1;min-height:0;position:relative;overflow:hidden}.drawing-canvas{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;outline:none;display:block;position:absolute;inset:0}.timer-pill{--pill-tone:var(--text-2);z-index:5;background:var(--surface);color:var(--text);border:1.5px solid var(--border);box-shadow:var(--shadow-md);white-space:nowrap;border-radius:999px;align-items:center;gap:10px;max-width:calc(100% - 24px);padding:5px 5px 5px 14px;transition:background-color .2s,color .2s,border-color .2s,padding .2s;display:inline-flex;position:absolute;top:12px;left:50%;transform:translate(-50%)}.pill-digits{letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--pill-tone);align-items:center;gap:6px;font-size:18px;font-weight:750;line-height:1;transition:font-size .2s;display:inline-flex}.pill-text{color:var(--pill-tone);text-overflow:ellipsis;min-width:0;font-size:13px;font-weight:600;overflow:hidden}.pill-actions{flex:none;align-items:center;gap:4px;display:inline-flex}.timer-pill .btn{border-radius:999px;height:34px;min-height:34px;padding:0 12px;font-size:13px}.timer-pill .btn.icon-only,.timer-pill .sound-toggle.compact{width:34px;height:34px;padding:0}.timer-pill .duration-btn{padding:0 10px}.timer-pill.status-idle .pill-digits{color:var(--text)}.timer-pill.status-running{--pill-tone:var(--success);border-color:color-mix(in srgb, var(--success) 45%, var(--border))}.timer-pill.status-paused{--pill-tone:var(--warning);border-color:color-mix(in srgb, var(--warning) 65%, var(--border))}.timer-pill.status-finished{--pill-tone:var(--danger);border-color:color-mix(in srgb, var(--danger) 55%, var(--border))}.timer-pill.critical{--pill-tone:#fff;background:linear-gradient(135deg, var(--critical-1), var(--critical-2));color:#fff;border-color:#0000;box-shadow:0 10px 30px #e3171f59}.timer-pill.critical.big{gap:14px;padding:8px 8px 8px 20px}.timer-pill.critical.big .pill-digits{text-shadow:0 2px 10px #0000002e;font-size:56px;font-weight:850}.timer-pill.critical .btn-soft,.timer-pill.critical .sound-toggle{color:#fff;background:#ffffff38}.timer-pill.critical .btn-primary{color:var(--critical-2);background:#fff}.timer-pill.flash{animation:1.4s ease-out flash}.is-compact .timer-pill{display:none}.text-editor{z-index:3;border:1px dashed var(--accent);resize:none;white-space:pre;background:#ffffff0a;border-radius:2px;outline:none;min-width:40px;margin:0;padding:0;position:absolute;overflow:hidden}.timer-primary{min-width:0}.timer-primary.pause{background:var(--text);color:var(--surface)}.timer-primary.pulse{animation:.65s ease-in-out 2 pulse}.duration-btn{gap:4px;padding:0 10px}.sound-toggle{background:var(--surface-3);height:34px;color:var(--text-2);border-radius:999px;align-items:center;gap:6px;padding:0 10px;font-size:13px;font-weight:600;display:inline-flex}.sound-toggle.compact{justify-content:center;width:38px;padding:0}.sound-toggle.on{color:var(--accent-text);background:var(--accent-soft)}.sound-toggle.off{color:var(--text-3)}.blink{animation:1s steps(2,start) infinite blink}.duration-editor{flex-direction:column;gap:12px;width:280px;display:flex}.preset-row{flex-wrap:wrap;gap:6px;display:flex}.mmss{align-items:flex-end;gap:8px;display:flex}.mmss label{color:var(--text-3);flex-direction:column;flex:1;gap:4px;font-size:12px;font-weight:600;display:flex}.mmss input{text-align:center;font-variant-numeric:tabular-nums;height:44px;font-size:22px;font-weight:700}.mmss-sep{padding-bottom:8px;font-size:22px;font-weight:700}.timer-bar{background:var(--surface);border-bottom:1px solid var(--border);flex-direction:column;flex:none;gap:6px;padding:6px 10px;transition:background-color .2s;display:flex}.timer-bar-row{align-items:center;gap:6px;display:flex}.timer-bar-digits{font-variant-numeric:tabular-nums;align-items:center;gap:6px;min-width:0;margin-right:auto;font-size:24px;font-weight:750;display:inline-flex}.timer-bar.status-running .timer-bar-digits{color:var(--success)}.timer-bar.status-paused{background:var(--warning-soft)}.timer-bar.status-paused .timer-bar-digits{color:var(--warning)}.timer-bar.status-finished .timer-bar-digits{color:var(--danger)}.timer-bar .btn,.timer-bar .sound-toggle{height:44px}.timer-bar .btn.icon-only,.timer-bar .sound-toggle.compact{width:44px}.timer-bar .btn{min-width:44px}.timer-bar .timer-primary{flex:none;padding:0 14px}.timer-bar.critical{background:linear-gradient(135deg, var(--critical-1), var(--critical-2));color:#fff}.timer-bar.critical .timer-bar-digits{color:#fff}.timer-bar.critical .btn-soft,.timer-bar.critical .sound-toggle{color:#fff;background:#ffffff38}.timer-bar.critical .btn-primary{color:var(--critical-2);background:#fff}.timer-bar-critical{justify-content:center;align-items:baseline;gap:12px;font-weight:700;display:flex}.timer-bar-critical .big-digits{font-variant-numeric:tabular-nums;font-size:52px;font-weight:850;line-height:1}.timer-bar-line{color:var(--text-2);margin:0;font-size:12.5px;font-weight:600}.timer-bar-line.locked{color:var(--danger)}.timer-bar.flash{animation:1.4s ease-out flash}.layers-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);flex-direction:column;min-height:0;display:flex}.panel-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:8px 8px 8px 14px;display:flex}.panel-header h2{align-items:center;gap:6px;margin:0;font-size:13px;display:inline-flex}.panel-actions{gap:2px;display:flex}.layer-list{flex-direction:column;gap:2px;max-height:320px;margin:0;padding:6px;list-style:none;display:flex;overflow-y:auto}.layer-row{border-radius:var(--radius-sm);border:1px solid #0000;align-items:center;gap:2px;padding:2px;display:flex}.layer-row.active{background:var(--accent-soft);border-color:color-mix(in srgb, var(--accent) 40%, transparent)}.layer-row.hidden-layer .layer-name{opacity:.5}.layer-name{text-align:left;min-width:0;height:30px;color:var(--text);border-radius:6px;flex:1;align-items:center;gap:6px;padding:0 6px;font-size:13px;font-weight:600;display:flex}.layer-name span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.layer-name svg{color:var(--text-3);flex:none}.layer-name-input{flex:1;height:30px!important}.layer-tools{border-top:1px solid var(--border);flex-direction:column;gap:8px;padding:8px 10px 10px;display:flex}.layer-btns{justify-content:space-between;display:flex}.status-bar{background:var(--surface);border-top:1px solid var(--border);height:42px;color:var(--text-2);flex:none;align-items:center;gap:12px;padding:0 12px;font-size:13px;display:flex}.zoom-controls{align-items:center;gap:2px;display:inline-flex}.zoom-value{border-radius:var(--radius-sm);font-variant-numeric:tabular-nums;min-width:52px;height:30px;font-weight:700}.zoom-value:hover{background:var(--surface-3)}.edit-state{border-radius:999px;align-items:center;gap:6px;padding:4px 10px;font-weight:700;display:inline-flex}.edit-state.open{color:var(--success);background:var(--success-soft)}.edit-state.locked{color:var(--danger);background:var(--danger-soft)}.status-meta{color:var(--text-3)}.popover{z-index:1000;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);padding:12px;animation:.12s ease-out pop-in;position:fixed;overflow:auto}.dialog-backdrop{z-index:1100;background:#0a0c1673;justify-content:center;align-items:center;padding:16px;animation:.15s ease-out fade-in;display:flex;position:fixed;inset:0}.dialog{background:var(--surface);box-shadow:var(--shadow-lg);border-radius:16px;flex-direction:column;width:100%;max-height:calc(100dvh - 32px);animation:.15s ease-out pop-in;display:flex;overflow:hidden}.dialog-sm{max-width:440px}.dialog-md{max-width:560px}.dialog-lg{max-width:780px}.dialog-header{justify-content:space-between;align-items:center;padding:14px 14px 10px 20px;display:flex}.dialog-header h2{margin:0;font-size:18px}.dialog-desc{color:var(--text-3);margin:-4px 20px 4px;font-size:13px}.dialog-body{padding:8px 20px 20px;overflow-y:auto}.dialog-body p{color:var(--text-2);margin:0}.dialog-footer{border-top:1px solid var(--border);background:var(--surface-2);justify-content:flex-end;gap:8px;padding:12px 16px;display:flex}.settings-layout{grid-template-columns:180px 1fr;gap:20px;min-height:380px;display:grid}.settings-tabs{flex-direction:column;gap:2px;display:flex}.settings-tabs button{text-align:left;border-radius:var(--radius-sm);height:38px;color:var(--text-2);padding:0 12px;font-weight:600}.settings-tabs button:hover{background:var(--surface-3)}.settings-tabs button.active{background:var(--accent-soft);color:var(--accent-text)}.settings-panel{flex-direction:column;gap:12px;min-width:0;display:flex}.settings-panel>.switch-row:first-child{padding-top:0}.settings-block{flex-direction:column;gap:10px;padding:8px 0;display:flex}.settings-block h3{margin:0;font-size:14px}.size-inputs{flex-wrap:wrap;align-items:flex-end;gap:8px;display:flex}.size-inputs label{color:var(--text-3);flex-direction:column;gap:4px;font-size:12px;font-weight:600;display:flex}.size-inputs input{width:96px}.size-inputs>span{padding-bottom:8px}.bg-swatch{border-radius:var(--radius-sm);border:1px solid var(--border-strong);width:36px;height:36px}.bg-swatch.active{outline:2px solid var(--accent);outline-offset:2px}.bg-swatch.transparent{background:repeating-conic-gradient(#d9dbe1 0% 25%,#fff 0% 50%) 50%/12px 12px}.schedule-table,.shortcut-table{border-collapse:collapse;width:100%;font-size:13px}.schedule-table caption{text-align:left;padding:8px 0;font-weight:700}.schedule-table th,.schedule-table td,.shortcut-table td{text-align:left;border-bottom:1px solid var(--border);padding:8px 10px}.schedule-table th{color:var(--text-3);font-size:12px;font-weight:600}.shortcut-table td:first-child{width:46%}.form-grid{flex-direction:column;gap:14px;display:flex}.field{color:var(--text-2);flex-direction:column;gap:6px;font-size:12.5px;font-weight:600;display:flex}.field input{height:38px}.reset-options{flex-direction:column;gap:10px;display:flex}.option-card{text-align:left;border-radius:var(--radius-lg);border:1px solid var(--border);background:var(--surface);align-items:flex-start;gap:14px;padding:14px;transition:border-color .15s,background-color .15s;display:flex}.option-card:hover:not(:disabled){border-color:var(--accent);background:var(--accent-soft)}.option-card.danger:hover{border-color:var(--danger);background:var(--danger-soft)}.option-card.danger svg{color:var(--danger)}.option-card:disabled{opacity:.5}.option-card span{flex-direction:column;gap:4px;display:flex}.option-card small{color:var(--text-3);font-size:12.5px}.toasts{z-index:1200;pointer-events:none;flex-direction:column;align-items:center;gap:8px;width:max-content;max-width:calc(100vw - 24px);display:flex;position:fixed;bottom:56px;left:50%;transform:translate(-50%)}.toast{pointer-events:auto;background:var(--text);color:var(--surface);box-shadow:var(--shadow-lg);border-radius:12px;align-items:center;gap:10px;padding:8px 8px 8px 14px;font-size:13.5px;font-weight:600;animation:.18s ease-out toast-in;display:flex}.toast .icon-btn{color:inherit;opacity:.7}.toast.tone-warning svg:first-child{color:#ffc145}.toast.tone-danger svg:first-child{color:#ff7a70}.toast.tone-success svg:first-child{color:#53d98f}.recovery-banner{background:var(--accent-soft);color:var(--accent-text);border-bottom:1px solid var(--border);flex-wrap:wrap;flex:none;align-items:center;gap:10px;padding:8px 12px;font-size:13px;display:flex}.recovery-banner strong{color:var(--text)}.recovery-text{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.is-compact .recovery-banner{flex-wrap:nowrap;gap:6px;padding:6px 8px}.is-compact .recovery-banner>svg{display:none}.is-compact .app-header{gap:4px;height:52px;padding:0 8px}.is-compact .brand-name{font-size:15px}.mobile-bottom{background:var(--surface);border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom);flex:none}.mobile-bottom .context-bar{border-bottom:1px solid var(--border);min-height:50px}.mobile-bottom .ctx-tool-name,.mobile-bottom .ctx-hint{display:none}.mobile-bottom .swatch-sm{width:28px;height:28px}.drawer-backdrop{z-index:900;background:#0a0c1659;justify-content:flex-end;display:flex;position:fixed;inset:0}.drawer{background:var(--bg);width:min(320px,88vw);height:100%;padding:12px;animation:.18s ease-out slide-in;overflow-y:auto}.drawer .layer-list{max-height:none}@media (width<=1180px){.work-name input{width:140px}.save-status{display:none}}@media (width<=899px){.toasts{bottom:150px}.settings-layout{grid-template-columns:1fr;gap:12px}.settings-tabs{flex-direction:row;overflow-x:auto}.settings-tabs button{white-space:nowrap}.dialog-backdrop{align-items:flex-end;padding:0}.dialog{border-radius:18px 18px 0 0;max-height:92dvh}.dialog-footer{padding-bottom:calc(12px + env(safe-area-inset-bottom))}.range-field.compact input[type=range]{width:84px}.btn,.ctx-btn,.icon-btn{min-height:44px}.icon-btn{width:44px}.icon-btn.small{width:40px;height:40px;min-height:40px}}@media (width<=599px){.hide-sm{display:none!important}.brand-name{display:none}.timer-bar-digits{font-size:21px}.timer-bar .timer-primary span{display:none}.timer-bar .timer-primary{width:44px;padding:0}.timer-bar .duration-btn span{text-overflow:ellipsis;max-width:52px;overflow:hidden}.timer-bar .duration-btn>svg:last-child{display:none}.color-panel{width:min(300px,100vw - 40px)}}@media (width<=380px){.timer-bar .duration-btn span{display:none}}@keyframes breathe{50%{opacity:.35}}@keyframes blink{to{visibility:hidden}}@keyframes pulse{0%,to{box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent)}50%{box-shadow:0 0 0 8px color-mix(in srgb, var(--accent) 0%, transparent);transform:scale(1.03)}}@keyframes flash{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--warning) 70%, transparent)}30%{box-shadow:0 0 0 6px color-mix(in srgb, var(--warning) 45%, transparent)}to{box-shadow:0 0 #0000}}@keyframes pop-in{0%{opacity:0;transform:translateY(4px)scale(.98)}}@keyframes fade-in{0%{opacity:0}}@keyframes toast-in{0%{opacity:0;transform:translateY(8px)}}@keyframes slide-in{0%{opacity:0;transform:translate(24px)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}.blink{animation:none!important}}
