:root{--bg: #0b1220;--bg-2: #0f172a;--panel: rgba(17, 25, 40, .82);--panel-solid: #111827;--border: rgba(148, 163, 184, .18);--text: #e2e8f0;--muted: #94a3b8;--accent: #38bdf8;--accent-strong: #0ea5e9;--danger: #f87171;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body,#app{margin:0;height:100%;width:100%}body{background:#05080f;color:var(--text);overflow:hidden}button{font:inherit;cursor:pointer}.btn{background:var(--panel-solid);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:7px 12px;font-size:13px;font-weight:500;transition:background .12s,border-color .12s,transform .05s}.btn:hover{border-color:#94a3b866;background:#161f33}.btn:active{transform:translateY(1px)}.btn--accent{background:var(--accent-strong);border-color:var(--accent-strong);color:#04121f;font-weight:600}.btn--accent:hover{background:var(--accent);border-color:var(--accent)}.btn--danger{color:var(--danger)}.btn[disabled]{opacity:.35;pointer-events:none}.btn--icon{padding:6px 11px;font-size:16px;line-height:1}.btn--icon svg{display:block}.topbar__group{display:flex;gap:4px}.editor{position:absolute;inset:0;overflow:hidden;background:radial-gradient(circle at 50% 6%,#16263f,#0e1a2e 38%,#0a121f 72%,#05080f)}.editor__canvas{position:absolute;inset:0;touch-action:none;user-select:none;background:transparent}.editor__canvas canvas{display:block}.tabletop-vignette{position:absolute;inset:0;pointer-events:none;z-index:5;background:radial-gradient(circle at 50% 24%,rgba(56,189,248,.12),transparent 44%),radial-gradient(circle at 50% 58%,rgba(14,165,233,.06),transparent 50%),radial-gradient(ellipse at 50% 52%,transparent 54%,rgba(0,0,0,.66) 100%)}.topbar{position:absolute;top:12px;left:12px;right:12px;height:44px;display:flex;align-items:center;gap:10px;z-index:20}.topbar__menu{flex-shrink:0;transition:opacity .15s ease,visibility .15s ease}.editor--drawer-open .topbar__menu{visibility:hidden;opacity:0;pointer-events:none}.topbar__slide{flex:1;min-width:0;display:flex;align-items:center;gap:10px;transition:transform .22s ease}.editor--drawer-open .topbar__slide{transform:translate(var(--drawer-w, 280px))}.topbar__spacer{flex:1}.topbar__name{background:transparent;border:1px solid transparent;color:var(--text);font-size:14px;font-weight:600;padding:6px 10px;border-radius:8px;width:220px}.topbar__name:hover{border-color:var(--border)}.topbar__name:focus{outline:none;border-color:var(--accent);background:var(--bg-2)}.banner{position:absolute;top:64px;left:50%;transform:translate(-50%);background:#0ea5e929;border:1px solid rgba(56,189,248,.4);color:#bae6fd;padding:7px 14px;border-radius:999px;font-size:12.5px;z-index:10}.toolbar{position:absolute;left:12px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:6px;padding:8px;background:var(--panel);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:14px;z-index:10;transition:transform .22s ease}.editor--drawer-open .toolbar{transform:translate(var(--drawer-w, 280px),-50%)}.toolbar__sep{height:1px;background:var(--border);margin:2px 4px}.tool{position:relative;width:38px;height:38px;display:grid;place-items:center;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--muted)}.tool svg{display:block}.tool__kbd{position:absolute;right:3px;bottom:1px;font-size:9px;font-weight:700;line-height:1;color:var(--muted);opacity:.7;pointer-events:none}.tool:hover .tool__kbd,.tool.is-active .tool__kbd{opacity:1}.tool.is-active .tool__kbd{color:var(--accent)}.tool:hover{background:#161f33;color:var(--text)}.tool.is-active{background:#38bdf829;border-color:#38bdf880;color:var(--accent)}.recenter-btn{position:absolute;top:64px;left:50%;display:flex;align-items:center;gap:7px;padding:8px 16px;background:var(--accent-strong);border:1px solid var(--accent-strong);color:#04121f;font-size:13px;font-weight:600;border-radius:999px;box-shadow:0 8px 24px #020c1880;z-index:15;opacity:0;pointer-events:none;transform:translate(-50%) translateY(-8px);transition:opacity .18s ease,transform .18s ease,background .12s,border-color .12s}.recenter-btn.is-visible{opacity:1;pointer-events:auto;transform:translate(-50%) translateY(0)}.recenter-btn:hover{background:var(--accent);border-color:var(--accent)}.recenter-btn:active{transform:translate(-50%) translateY(1px)}.recenter-btn svg{display:block}.zoombar{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:6px;padding:6px;background:var(--panel);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:10px;z-index:10;transition:transform .22s ease}.editor--drawer-open .zoombar{transform:translate(var(--drawer-w, 280px))}.zoombar__label{min-width:48px;text-align:center;font-size:12.5px;color:var(--muted)}.zoombar__sep{width:1px;align-self:stretch;margin:2px;background:var(--border)}.controls-help{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;padding:24px;background:#02061794;backdrop-filter:blur(3px)}.controls-help.is-open{display:flex}.controls-help__card{width:min(440px,100%);max-height:100%;overflow-y:auto;padding:18px 20px 20px;background:var(--panel-solid, #0d1626);border:1px solid var(--border);border-radius:16px;box-shadow:0 30px 80px #02061799}.controls-help__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.controls-help__head h2{margin:0;font-size:16px;letter-spacing:-.02em}.controls-help__close{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--border);border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}.controls-help__close:hover{color:var(--text);border-color:#94a3b866}.controls-help__rows{display:flex;flex-direction:column;gap:2px}.controls-help__row{display:grid;grid-template-columns:1fr 1.3fr;gap:12px;align-items:baseline;padding:7px 4px;border-bottom:1px solid rgba(148,163,184,.08)}.controls-help__action{font-size:13px;font-weight:600;color:var(--text)}.controls-help__how{font-size:12px;color:var(--muted);line-height:1.45}.controls-help__toggle{display:flex;align-items:flex-start;gap:10px;margin-top:16px;padding:12px;border:1px solid var(--border);border-radius:10px;background:#38bdf80f;cursor:pointer}.controls-help__check{margin-top:2px;width:16px;height:16px;accent-color:var(--accent);cursor:pointer}.controls-help__toggle span{display:block;font-size:13px}.controls-help__toggle-sub{margin-top:2px;font-size:11.5px;color:var(--muted)}.skill-help{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;padding:24px;background:#02061794;backdrop-filter:blur(3px)}.skill-help.is-open{display:flex}.skill-help__card{width:min(480px,100%);max-height:100%;overflow-y:auto;padding:18px 20px 20px;background:var(--panel-solid, #0d1626);border:1px solid var(--border);border-radius:16px;box-shadow:0 30px 80px #02061799}.skill-help__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.skill-help__head h2{margin:0;font-size:16px;letter-spacing:-.02em}.skill-help__close{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--border);border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}.skill-help__close:hover{color:var(--text);border-color:#94a3b866}.skill-help__body{display:flex;flex-direction:column;gap:12px;font-size:13px;line-height:1.5;color:var(--muted)}.skill-help__body p{margin:0}.skill-help__url-row{display:flex;align-items:stretch;gap:8px}.skill-help__url{flex:1;min-width:0;padding:9px 11px;border:1px solid var(--border);border-radius:9px;background:var(--bg-2, #0b1220);color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:11.5px;line-height:1.4;word-break:break-all}.skill-help__copy{flex:0 0 auto;align-self:stretch}.confirm-dialog{position:fixed;inset:0;z-index:1100;display:none;align-items:center;justify-content:center;padding:24px;background:#02061794;backdrop-filter:blur(3px)}.confirm-dialog.is-open{display:flex}.confirm-dialog__card{width:min(380px,100%);padding:20px 22px 18px;background:var(--panel-solid, #0d1626);border:1px solid var(--border);border-radius:16px;box-shadow:0 30px 80px #02061799}.confirm-dialog__title{margin:0 0 8px;font-size:16px;letter-spacing:-.02em}.confirm-dialog__message{margin:0 0 18px;font-size:13px;line-height:1.5;color:var(--muted)}.confirm-dialog__actions{display:flex;justify-content:flex-end;gap:8px}.confirm-dialog__btn{padding:8px 14px;font-size:13px;font-weight:600;border-radius:9px;border:1px solid var(--border);background:transparent;color:var(--text);cursor:pointer}.confirm-dialog__btn--ghost{color:var(--muted)}.confirm-dialog__btn--ghost:hover{color:var(--text);border-color:#94a3b866}.confirm-dialog__btn--danger{background:var(--danger);border-color:var(--danger);color:#1a0a0a}.confirm-dialog__btn--danger:hover{filter:brightness(1.08)}.confirm-dialog__btn--primary{background:var(--accent);border-color:var(--accent);color:#04212e}.confirm-dialog__btn--primary:hover{filter:brightness(1.08)}.confirm-dialog__btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.style-panel{position:absolute;bottom:12px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:14px;padding:8px 14px;background:var(--panel);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:12px;z-index:10;transition:transform .22s ease}.editor--drawer-open .style-panel{transform:translate(calc(-50% + var(--drawer-w, 280px)))}.field{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted)}.swatch-wrap{position:relative;display:inline-flex}.swatch{width:30px;height:26px;padding:0;border:1px solid var(--border);border-radius:7px;cursor:pointer}.swatch.is-open{border-color:var(--accent);box-shadow:0 0 0 2px #38bdf840}.swatch--none{background-color:var(--panel-solid);background-image:linear-gradient(to top right,transparent calc(50% - 1.2px),var(--danger) calc(50% - 1.2px),var(--danger) calc(50% + 1.2px),transparent calc(50% + 1.2px))}.size-picker{display:inline-flex;gap:3px}.size-btn{min-width:30px;height:26px;padding:0 7px;font-size:11.5px;font-weight:600;color:var(--muted);background:var(--panel-solid);border:1px solid var(--border);border-radius:7px;cursor:pointer}.size-btn:hover{color:var(--text);border-color:var(--accent)}.size-btn.is-active{color:var(--text);border-color:var(--accent);box-shadow:0 0 0 2px #38bdf840}.swatch-pop{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%);display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:10px;background:var(--panel-solid);border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 32px #00000073;z-index:20}.swatch-pop--portal{position:fixed;bottom:auto;transform:none;z-index:1000}.swatch-pop__chip{width:26px;height:26px;padding:0;border:1px solid var(--border);border-radius:6px;cursor:pointer;transition:transform .08s ease,box-shadow .08s ease}.swatch-pop__chip:hover{transform:scale(1.12)}.swatch-pop__chip.is-active{box-shadow:0 0 0 2px var(--panel-solid),0 0 0 4px var(--accent)}.text-editor{position:absolute;z-index:50;display:flex;align-items:center;justify-content:center;text-align:center;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;padding:4px 6px;border-radius:8px;border:2px solid var(--accent);box-shadow:0 8px 24px #0006;caret-color:var(--accent);line-height:1.25;white-space:pre-wrap;word-break:break-word;overflow:hidden;outline:none}.text-editor--code{display:block;align-items:stretch;justify-content:flex-start;text-align:left;border-radius:0 0 8px 8px;border-color:#30363d;box-shadow:0 12px 32px #0000008c;caret-color:#58a6ff;white-space:pre;word-break:normal;overflow:auto}.icon-palette{position:absolute;z-index:60;top:50%;left:76px;transform:translateY(-50%);width:300px;background:var(--panel-solid);border:1px solid var(--border);border-radius:12px;box-shadow:0 20px 50px #0000008c;overflow:hidden}.icon-palette__input{width:100%;border:none;border-bottom:1px solid var(--border);background:transparent;color:var(--text);font-size:15px;padding:12px 14px;outline:none}.icon-palette__list{max-height:360px;overflow-y:auto}.icon-row{display:flex;align-items:center;gap:10px;padding:7px 12px;font-size:13px;cursor:pointer}.icon-row__preview{flex:0 0 auto;border-radius:6px;background:#ffffff0a}.icon-row__key{flex:1;font-weight:600;text-transform:capitalize}.icon-row__kw{color:var(--muted);font-size:11.5px;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%}.icon-row.is-active{background:#38bdf829}.icon-row--empty{color:var(--muted);justify-content:center;cursor:default}.icon-palette__hint{padding:8px 14px;font-size:11px;color:var(--muted);border-top:1px solid var(--border)}.ai-panel-backdrop{position:absolute;inset:0;z-index:80;display:grid;place-items:center;padding:20px;background:#0206176b;backdrop-filter:blur(2px)}.ai-panel{width:min(560px,100%);background:var(--panel-solid);border:1px solid var(--border);border-radius:14px;box-shadow:0 24px 70px #0009;overflow:hidden}.ai-panel__header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:16px 18px 14px;border-bottom:1px solid var(--border)}.ai-panel__header h2{margin:0;font-size:16px}.ai-panel__header p{margin:5px 0 0;color:var(--muted);font-size:12.5px;line-height:1.4}.ai-panel__close{flex:0 0 auto;width:28px;height:28px;border:1px solid var(--border);border-radius:7px;background:transparent;color:var(--muted)}.ai-panel__close:hover{color:var(--text);border-color:#94a3b866;background:#161f33}.ai-panel__form{display:grid;gap:13px;padding:16px 18px 18px}.ai-panel__modes{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;background:var(--bg-2);border:1px solid var(--border);border-radius:10px}.ai-panel__mode{min-height:31px;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--muted);font-size:12.5px;font-weight:600}.ai-panel__mode:hover:not(:disabled){color:var(--text);background:#161f33}.ai-panel__mode.is-active{color:var(--accent);border-color:#38bdf873;background:#38bdf824}.ai-panel__mode:disabled{opacity:.4;cursor:default}.ai-panel__field{display:grid;gap:7px;color:var(--muted);font-size:12.5px}.ai-panel__input,.ai-panel__textarea{width:100%;border:1px solid var(--border);border-radius:9px;background:var(--bg-2);color:var(--text);font:inherit;font-size:13px;outline:none}.ai-panel__input{padding:9px 11px}.ai-panel__textarea{min-height:118px;padding:10px 11px;line-height:1.45;resize:vertical}.ai-panel__input:focus,.ai-panel__textarea:focus{border-color:var(--accent);box-shadow:0 0 0 2px #38bdf833}.ai-panel__input:disabled,.ai-panel__textarea:disabled{opacity:.65}.ai-panel__error{display:none;color:#fecaca;background:#f871711f;border:1px solid rgba(248,113,113,.28);border-radius:9px;padding:8px 10px;font-size:12.5px;line-height:1.4}.ai-panel__error.is-visible{display:block}.ai-panel__footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:2px}.ai-panel__hint{color:var(--muted);font-size:11px}.ctx-menu{position:absolute;z-index:70;min-width:184px;padding:5px;background:var(--panel-solid);border:1px solid var(--border);border-radius:10px;box-shadow:0 20px 50px #0000008c}.ctx-menu__item{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:7px 10px;border:none;border-radius:6px;background:transparent;color:var(--text);font-size:13px;text-align:left}.ctx-menu__item:hover:not(:disabled){background:#38bdf829}.ctx-menu__item:disabled{color:var(--muted);cursor:default}.ctx-menu__hint{color:var(--muted);font-size:11.5px;font-variant-numeric:tabular-nums}.board-drawer__backdrop{position:absolute;inset:0;z-index:25;background:#02061773;opacity:0;pointer-events:none;transition:opacity .22s ease}.board-drawer__backdrop.is-visible{opacity:1;pointer-events:auto}.board-drawer{position:absolute;top:0;left:0;bottom:0;z-index:26;display:flex;flex-direction:column;gap:12px;padding:16px 14px 20px;background:#0b1220f5;border-right:1px solid var(--border);backdrop-filter:blur(16px);transform:translate(-100%);transition:transform .22s ease;overflow:hidden}.board-drawer.is-open{transform:translate(0)}.board-drawer__header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 2px}.board-drawer__header h2{margin:0;font-size:16px;letter-spacing:-.02em}.board-drawer__close{width:32px;height:32px;border:1px solid var(--border);border-radius:8px;background:transparent;color:var(--muted);font-size:20px;line-height:1}.board-drawer__close:hover{color:var(--text);border-color:#94a3b866}.board-drawer__new{width:100%}.board-drawer__list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px}.board-drawer__empty{margin:24px 0 0;text-align:center;color:var(--muted);font-size:13px}.board-drawer__item{position:relative;display:flex;align-items:center;gap:10px;width:100%;padding:8px;border:1px solid var(--border);border-radius:12px;background:var(--panel-solid);color:var(--text);text-align:left;cursor:pointer;transition:border-color .12s,background .12s}.board-drawer__item:hover{border-color:#38bdf873;background:#161f33}.board-drawer__item[aria-current=true]{border-color:#38bdf8a6;background:#38bdf81a}.board-drawer__thumb{width:52px;height:34px;border-radius:6px;object-fit:cover;flex-shrink:0;background:#0b1220}.board-drawer__thumb--empty{display:grid;place-items:center;font-size:18px;color:#94a3b873}.board-drawer__meta{min-width:0;flex:1}.board-drawer__name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.board-drawer__sub{margin-top:2px;font-size:11px;color:var(--muted)}.board-drawer__delete{position:absolute;top:6px;right:6px;width:26px;height:26px;border:none;border-radius:6px;background:#020617a6;color:#fca5a5;font-size:12px;opacity:0;transition:opacity .1s}.board-drawer__item:hover .board-drawer__delete,.board-drawer__item:focus-within .board-drawer__delete{opacity:1}.board-drawer__delete:hover{background:#020617e6}.layers-panel{position:absolute;top:64px;right:12px;bottom:12px;width:244px;z-index:12;display:flex;flex-direction:column;gap:10px;padding:12px 12px 14px;background:var(--panel);border:1px solid var(--border);border-radius:14px;backdrop-filter:blur(16px);box-shadow:0 18px 50px #02061780;transform:translate(0);opacity:1;transition:transform .22s ease,opacity .22s ease}.layers-panel.is-collapsed{transform:translate(calc(100% + 16px));opacity:0;pointer-events:none}.layers-panel__header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 2px}.layers-panel__header h2{margin:0;font-size:15px;letter-spacing:-.02em}.layers-panel__header-actions{display:flex;align-items:center;gap:6px}.layers-panel__collapse{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--border);border-radius:8px;background:transparent;color:var(--muted)}.layers-panel__collapse:hover{color:var(--text);border-color:#94a3b866}.layers-panel__add{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--border);border-radius:8px;background:transparent;color:var(--accent)}.layers-panel__add:hover{background:#38bdf829;border-color:#38bdf866}.layers-panel__list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:6px}.layers-panel__item{display:flex;flex-direction:column;gap:4px;padding:6px 8px;border:1px solid var(--border);border-radius:10px;background:var(--panel-solid);color:var(--text);text-align:left;cursor:pointer;transition:border-color .12s,background .12s,box-shadow .12s}.layers-panel__top,.layers-panel__bottom{display:flex;align-items:center;gap:6px}.layers-panel__item:hover{border-color:#38bdf866;background:#141f33}.layers-panel__item[aria-current=true]{border-color:var(--accent);background:#38bdf81a;box-shadow:0 0 0 1px #38bdf880,0 0 22px #38bdf838 inset}.layers-panel__item.is-hidden{background:#02061766}.layers-panel__item.is-hidden .layers-panel__name,.layers-panel__item.is-hidden .layers-panel__sub{opacity:.5}.layers-panel__eye{flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--accent)}.layers-panel__eye:hover{background:#38bdf829;border-color:#38bdf866}.layers-panel__item.is-hidden .layers-panel__eye{color:var(--muted)}.layers-panel__solo{flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--muted);transition:color .12s,background .12s,border-color .12s}.layers-panel__solo:hover:not(:disabled){color:var(--text);background:#38bdf829;border-color:#38bdf866}.layers-panel__solo[aria-pressed=true]{color:var(--accent);background:#38bdf829;border-color:#38bdf880}.layers-panel__solo:disabled{opacity:.3;pointer-events:none}.layers-panel__color{flex:0 0 auto}.layers-panel__color .swatch{width:18px;height:18px;border-radius:50%;box-shadow:0 0 7px #38bdf840}.layers-panel__item.is-hidden .layers-panel__color{opacity:.5}.layers-panel__name{flex:1;min-width:0;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.layers-panel__sub{flex:1;min-width:0;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.layers-panel__actions{display:flex;gap:2px;flex:0 0 auto;opacity:0;transition:opacity .1s}.layers-panel__item:hover .layers-panel__actions,.layers-panel__item:focus-within .layers-panel__actions,.layers-panel__item[aria-current=true] .layers-panel__actions{opacity:1}.layers-panel__action{width:26px;height:26px;border:none;border-radius:6px;background:#0206178c;color:var(--muted);font-size:12px;line-height:1}.layers-panel__action:hover:not(:disabled){color:var(--text);background:#38bdf82e}.layers-panel__action:disabled{opacity:.3;pointer-events:none}.layers-panel__action--danger:hover:not(:disabled){color:#fca5a5;background:#f8717129}.layers-panel__spread{display:flex;flex-direction:column;gap:7px;padding:10px 2px 2px;border-top:1px solid var(--border)}.layers-panel__spread>span{font-size:11.5px;color:var(--muted)}.layers-panel__spread-range{width:100%;accent-color:var(--accent);cursor:pointer}.layers-panel__spread.is-disabled{opacity:.4}.layers-panel__spread.is-disabled .layers-panel__spread-range{cursor:default}.settings-panel{position:absolute;top:64px;right:12px;bottom:12px;width:260px;z-index:13;display:flex;flex-direction:column;gap:10px;padding:12px 12px 14px;background:var(--panel);border:1px solid var(--border);border-radius:14px;backdrop-filter:blur(16px);box-shadow:0 18px 50px #02061780;transform:translate(0);opacity:1;transition:transform .22s ease,opacity .22s ease}.settings-panel.is-collapsed{transform:translate(calc(100% + 16px));opacity:0;pointer-events:none}.settings-panel__header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 2px}.settings-panel__header h2{margin:0;font-size:15px;letter-spacing:-.02em}.settings-panel__header-actions{display:flex;align-items:center;gap:6px}.settings-panel__collapse{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--border);border-radius:8px;background:transparent;color:var(--muted)}.settings-panel__collapse:hover{color:var(--text);border-color:#94a3b866}.settings-panel__section{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px}.settings-panel__toggle{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid var(--border);border-radius:10px;background:#38bdf80f;cursor:pointer}.settings-panel__check{margin-top:2px;width:16px;height:16px;accent-color:var(--accent);cursor:pointer}.settings-panel__toggle span{display:block;font-size:13px}.settings-panel__toggle-sub{margin-top:2px;font-size:11.5px;color:var(--muted)}.settings-panel__slider{display:flex;flex-direction:column;gap:4px;padding:12px;border:1px solid var(--border);border-radius:10px;background:#38bdf80f}.settings-panel__slider>strong{font-size:13px}.settings-panel__slider-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.settings-panel__slider-value{font-size:12px;font-variant-numeric:tabular-nums;color:var(--accent)}.settings-panel__range{margin-top:6px;width:100%;accent-color:var(--accent);cursor:pointer}.dualrange{position:relative;height:26px;margin-top:8px}.dualrange__track{position:absolute;top:50%;left:0;right:0;height:4px;transform:translateY(-50%);background:var(--border);border-radius:2px}.dualrange__fill{position:absolute;top:50%;height:4px;transform:translateY(-50%);background:var(--accent);border-radius:2px}.dualrange__input{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}.dualrange__input::-webkit-slider-runnable-track{background:none;border:none}.dualrange__input::-moz-range-track{background:none;border:none}.dualrange__input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;pointer-events:auto;width:16px;height:16px;border-radius:50%;background:var(--accent);border:2px solid #0b1220;box-shadow:0 1px 4px #02061799;cursor:pointer}.dualrange__input::-moz-range-thumb{pointer-events:auto;width:16px;height:16px;border-radius:50%;background:var(--accent);border:2px solid #0b1220;box-shadow:0 1px 4px #02061799;cursor:pointer}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,12px);background:var(--panel-solid);border:1px solid var(--border);color:var(--text);padding:10px 16px;border-radius:10px;font-size:13px;box-shadow:0 12px 30px #00000080;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:100}.toast.is-visible{opacity:1;transform:translate(-50%)}@media(max-width:700px),(max-height:560px){.btn{min-height:40px;padding:7px 10px}.btn--icon{min-width:40px;padding:8px 10px}.topbar{top:max(8px,env(safe-area-inset-top));left:8px;right:8px;height:42px;gap:6px}.topbar__slide{gap:6px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}.topbar__slide::-webkit-scrollbar{display:none}.topbar__slide>*{flex:0 0 auto}.topbar__group{gap:3px}.topbar__spacer{display:none}.topbar__name{width:clamp(112px,34vw,160px);padding:7px 8px}.topbar__slide a[href*=github]{display:none}.banner,.recenter-btn{top:calc(max(8px,env(safe-area-inset-top)) + 98px);max-width:calc(100vw - 24px);white-space:normal;text-align:center}.toolbar{left:50%;top:auto;bottom:calc(10px + env(safe-area-inset-bottom));max-width:calc(100vw - 20px);flex-direction:row;gap:4px;padding:6px;overflow-x:auto;overscroll-behavior-x:contain;border-radius:16px;transform:translate(-50%);scrollbar-width:none;-webkit-overflow-scrolling:touch}.toolbar::-webkit-scrollbar{display:none}.editor--drawer-open .toolbar{transform:translate(-50%)}.toolbar__sep{width:1px;height:auto;margin:4px 2px}.tool{flex:0 0 auto;width:40px;height:40px}.tool__kbd{display:none}.zoombar{left:8px;right:auto;top:calc(max(8px,env(safe-area-inset-top)) + 50px);bottom:auto;width:auto;max-width:max-content;padding:5px}.editor--drawer-open .zoombar{transform:none}.zoombar__label,.zoombar__sep,.zoombar .btn[title="Zoom out"],.zoombar .btn[title="Zoom in"]{display:none}.style-panel{left:8px;right:8px;bottom:calc(66px + env(safe-area-inset-bottom));transform:none;justify-content:center;gap:8px;padding:7px 8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.style-panel::-webkit-scrollbar{display:none}.editor--drawer-open .style-panel{transform:none}.field{flex:0 0 auto}.size-btn{min-width:28px;height:28px;padding:0 6px}.icon-palette{left:10px;right:10px;top:auto;bottom:calc(66px + env(safe-area-inset-bottom));width:auto;max-height:min(58vh,380px);transform:none}.icon-palette__list{max-height:min(42vh,280px)}.ai-panel-backdrop,.controls-help,.skill-help,.confirm-dialog{align-items:flex-end;padding:max(10px,env(safe-area-inset-top)) 10px calc(10px + env(safe-area-inset-bottom))}.ai-panel,.controls-help__card,.skill-help__card,.confirm-dialog__card{width:100%;max-height:calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow-y:auto;border-radius:16px}.ai-panel__header,.ai-panel__form{padding-left:14px;padding-right:14px}.ai-panel__footer{align-items:stretch;flex-direction:column}.ai-panel__hint{order:2;text-align:center}.ai-panel__footer .btn{width:100%}.controls-help__row{grid-template-columns:1fr;gap:3px}.confirm-dialog__actions{flex-direction:column-reverse}.confirm-dialog__btn{width:100%;min-height:40px}.board-drawer{width:min(86vw,320px)!important;padding-top:max(14px,env(safe-area-inset-top));padding-bottom:calc(16px + env(safe-area-inset-bottom))}.editor--drawer-open .topbar__slide{transform:none}.layers-panel{top:auto;left:10px;right:10px;bottom:calc(116px + env(safe-area-inset-bottom));width:auto;max-height:min(44vh,320px);padding:10px;z-index:30;transform:translateY(0)}.layers-panel.is-collapsed{transform:translateY(calc(100% + 90px))}.settings-panel{top:auto;left:10px;right:10px;bottom:calc(116px + env(safe-area-inset-bottom));width:auto;max-height:min(44vh,320px);padding:10px;z-index:31;transform:translateY(0)}.settings-panel.is-collapsed{transform:translateY(calc(100% + 90px))}.layers-panel__item{padding:8px}.layers-panel__actions{opacity:1}.toast{left:10px;right:10px;bottom:calc(116px + env(safe-area-inset-bottom));transform:translateY(12px);text-align:center}.toast.is-visible{transform:translateY(0)}}@media(max-width:390px){.topbar__name{width:104px}.topbar__group{display:none}.style-panel{bottom:calc(62px + env(safe-area-inset-bottom))}}