:root{--bg:#1e1e1e;--panel:#2c2c2c;--panel-2:#383838;--panel-3:#444;--border:#444;--border-strong:#555;--menu-bg:#1e1e1e;--menu-bg-hover:#2c2c2c;--text:#fff;--text-2:#ffffffb3;--text-3:#fff6;--accent:#0d99ff;--accent-soft:#0d99ff33;--selected-row:#394360;--component:#9747ff;--brand:#d7e64a;--danger:#f24822;--measure:#f24822;--spacing-overlay:#ff24bd;--radius:5px;--radius-sm:2px;--radius-lg:13px;--shadow-pop:0 10px 16px #00000059, 0 2px 5px #00000059;--control-h:24px;--row-h:32px}*{box-sizing:border-box}html,body,#root{height:100%;margin:0;overflow:hidden}body{background:var(--bg);color:var(--text);font-variant-numeric:tabular-nums slashed-zero;-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;font-size:11px;line-height:16px}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--panel-3);border:2px solid var(--panel);border-radius:5px}::-webkit-scrollbar-track{background:0 0}button{font:inherit;color:var(--text);border-radius:var(--radius-sm);cursor:pointer;background:0 0;border:none;padding:5px 10px}button:hover{background:var(--panel-2)}button:focus-visible,input:focus-visible{outline:1px solid var(--accent);outline-offset:-1px}button:disabled{color:var(--text-3);cursor:default}button:disabled:hover{background:0 0}.btn-primary{background:var(--accent);color:#fff;font-weight:500}.btn-primary:hover{background:#3d92f5}input[type=text],input[type=number],select{font:inherit;color:var(--text);background:var(--panel-2);border-radius:var(--radius-sm);border:1px solid #0000;min-width:0;padding:4px 8px}input[type=text]:hover,input[type=number]:hover,select:hover{border-color:var(--border-strong)}input[type=text]:focus,input[type=number]:focus,select:focus{border-color:var(--accent);outline:none}input[type=number]::-webkit-inner-spin-button{display:none}.icon-btn{border-radius:var(--radius-sm);width:32px;height:32px;color:var(--text-2);justify-content:center;align-items:center;padding:0;display:inline-flex}.icon-btn:hover{color:var(--text)}.icon-btn.active{background:var(--accent);color:#fff}.icon-btn.active:hover{background:var(--accent)}.divider-v{background:var(--border);align-self:stretch;width:1px;margin:6px 4px}.section{border-bottom:1px solid var(--border);padding:12px}.section-title{letter-spacing:.02em;color:var(--text);justify-content:space-between;align-items:center;margin:0 0 10px;font-size:11px;font-weight:600;display:flex}.row{align-items:center;gap:8px;display:flex}.muted{color:var(--text-2)}.menu{z-index:1000;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-pop);min-width:180px;padding:4px;position:fixed}.menu button{border-radius:var(--radius-sm);text-align:left;justify-content:space-between;gap:24px;width:100%;padding:6px 10px;display:flex}.menu button:hover{background:var(--accent);color:#fff}.menu .sep{background:var(--border);height:1px;margin:4px 6px}.menu .kbd{color:var(--text-3);font-size:11px}.menu button:hover .kbd{color:#ffffffb3}.tooltip{position:relative}.home{grid-template-columns:260px 1fr;height:100%;display:grid}.home-side{background:var(--panel);border-right:1px solid var(--border);padding:24px 20px}.home-brand{align-items:center;gap:10px;font-size:16px;font-weight:600;display:flex}.home-brand em{color:var(--brand);font-style:normal}.home-tag{color:var(--text-2);margin-top:12px;font-size:12px}.home-main{padding:32px 40px 80px;overflow-y:auto}.home-main h1{margin:0 0 16px;font-size:22px;font-weight:600}.home-main h2{color:var(--text-2);text-transform:uppercase;letter-spacing:.06em;margin:28px 0 12px;font-size:12px;font-weight:600}.home-custom{margin-bottom:8px}.home-custom label{color:var(--text-2);align-items:center;gap:6px;font-size:12px;display:flex}.home-custom input{width:72px}.preset-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px;max-width:940px;display:grid}.preset-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);text-align:left;flex-direction:column;align-items:stretch;gap:6px;padding:10px;transition:border-color .15s,background .15s;display:flex}.preset-card:hover{background:var(--panel-2);border-color:var(--border-strong)}.preset-thumb{background:linear-gradient(135deg, var(--panel-3), var(--panel-2));border:1px solid var(--border);border-radius:3px;width:100%;max-height:90px;margin:0 auto;display:block}.preset-name{font-size:12px;font-weight:500}.preset-size{color:var(--text-2);font-size:11px}.doc-list{max-width:640px;margin:0;padding:0;list-style:none}.doc-list li{border-bottom:1px solid var(--border);align-items:center;gap:8px;display:flex}.doc-open{border-radius:0;flex:1;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 8px;display:flex}.doc-name{font-weight:500}.doc-date{color:var(--text-2);font-size:11px}.danger{color:var(--danger)}.img-bar{z-index:160;background:var(--menu-bg,#1e1e1e);border:1px solid var(--border);border-radius:var(--radius-lg,13px);box-shadow:var(--shadow-pop);white-space:nowrap;align-items:center;gap:2px;padding:4px;display:flex;position:absolute;transform:translate(-50%)}.img-bar-btn{border-radius:var(--radius-sm);height:28px;color:var(--text);background:0 0;border:none;align-items:center;gap:6px;padding:0 10px;font-size:11px;display:inline-flex}.img-bar-btn:hover:not(:disabled){background:var(--panel-3)}.img-bar-btn.active{background:var(--accent);color:#fff}.img-bar-btn:disabled{opacity:.5}.img-bar-sep{background:var(--border);width:1px;height:18px;margin:0 4px}.img-bar-input{background:var(--panel-2);border:1px solid var(--accent);border-radius:var(--radius-sm);width:320px;height:28px;color:var(--text);padding:0 10px;font-size:11px}.area-select-layer{z-index:150;cursor:crosshair;position:absolute;inset:0}.area-select-rect{border:1px solid var(--accent);background:color-mix(in srgb, var(--accent) 14%, transparent);pointer-events:none;position:absolute}.frame-label-input{z-index:170;background:var(--panel-2);border:1px solid var(--accent);height:20px;color:var(--text);border-radius:3px;padding:0 4px;font-size:11px;position:absolute}.layers-tree{flex:1;padding:4px 0;font-size:12px;overflow-y:auto}.layer-row{cursor:default;border:1px solid #0000;align-items:center;gap:5px;height:28px;padding-right:6px;display:flex;position:relative}.layer-row:hover{background:var(--panel-2)}.layer-row.selected{background:var(--accent-soft)}.layer-row.selected .layer-name{color:var(--text)}.layer-row.hidden-node .layer-name,.layer-row.hidden-node .layer-type-icon{opacity:.4}.layer-row.drop-inside{border-color:var(--accent)}.layer-row.drop-before:before,.layer-row.drop-after:after{content:"";background:var(--accent);height:2px;position:absolute;left:0;right:0}.layer-row.drop-before:before{top:-1px}.layer-row.drop-after:after{bottom:-1px}.layer-chevron{width:14px;height:14px;color:var(--text-3);flex:none;justify-content:center;align-items:center;padding:0;display:inline-flex}.layer-chevron:hover{color:var(--text);background:0 0}.layer-type-icon{color:var(--text-2);flex:none}.layer-name{text-overflow:ellipsis;white-space:nowrap;color:var(--text-2);flex:1;overflow:hidden}.layer-row input{flex:1;height:20px;font-size:12px}.layer-actions{flex:none;gap:2px;display:none}.layer-row:hover .layer-actions{display:inline-flex}.layer-actions:has([data-active]){display:inline-flex}.layer-action{color:var(--text-3);padding:2px;display:inline-flex}.layer-action:hover{color:var(--text)}.layer-action[data-active]{color:var(--text-2);display:inline-flex}.cp-overlay{z-index:380;position:fixed;inset:0}.cp-popover{background:var(--menu-bg,#2c2c2c);border:1px solid var(--border);width:244px;color:var(--text);border-radius:13px;padding:8px;font-size:11px;position:fixed;box-shadow:0 2px 6px #00000047,0 10px 32px #00000070}.cp-head{justify-content:space-between;align-items:center;padding:0 2px 6px;display:flex}.cp-title{font-weight:600}.cp-sv{cursor:crosshair;touch-action:none;border-radius:6px;height:150px;position:relative}.cp-sv-dot{pointer-events:none;border:2px solid #fff;border-radius:50%;width:12px;height:12px;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #0006}.cp-sliders{align-items:center;gap:8px;margin-top:10px;display:flex}.cp-slider-stack{flex-direction:column;flex:1;gap:8px;min-width:0;display:flex}.cp-pipette{flex:none}.cp-hue,.cp-alpha{appearance:none;border-radius:5px;outline:none;width:100%;height:10px;margin:0}.cp-hue{background:linear-gradient(90deg,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}.cp-alpha{background:linear-gradient(to right, transparent, var(--cp-solid,#fff)), repeating-conic-gradient(#8a8a8a 0% 25%, #5f5f5f 0% 50%) 0 0 / 8px 8px}.cp-hue::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#fff;border:1px solid #00000059;border-radius:50%;width:12px;height:12px;box-shadow:0 1px 3px #0006}.cp-alpha::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#fff;border:1px solid #00000059;border-radius:50%;width:12px;height:12px;box-shadow:0 1px 3px #0006}.cp-fields{grid-template-columns:62px 1fr 46px;gap:4px;margin-top:10px;display:grid}.cp-fields select,.cp-text,.cp-alpha-num{background:var(--panel-2);border-radius:var(--radius-sm);height:26px;color:var(--text);border:1px solid #0000;min-width:0;padding:0 6px;font-size:11px}.cp-text{font-variant-numeric:tabular-nums;text-transform:uppercase}.cp-alpha-num{text-align:right;font-variant-numeric:tabular-nums}.cp-text:focus,.cp-alpha-num:focus{border-color:var(--accent);outline:none}.cp-swatches{margin-top:10px}.cp-swatch-label{color:var(--text-3);margin-bottom:6px;display:block}.cp-swatch-row{flex-wrap:wrap;gap:4px;display:flex}.cp-swatch{cursor:pointer;border:1px solid #ffffff29;border-radius:4px;width:20px;height:20px;padding:0}.cp-swatch:hover{transform:scale(1.1)}.font-picker{flex:1;min-width:0;position:relative}.font-picker-trigger{background:var(--panel-2);border-radius:var(--radius-sm);width:100%;height:26px;color:var(--text);text-align:left;border:1px solid #0000;justify-content:space-between;align-items:center;gap:6px;padding:0 8px;font-size:11px;display:flex}.font-picker-trigger:hover{border-color:var(--border-strong)}.font-picker-trigger span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.font-picker-menu{z-index:300;background:var(--menu-bg,#1e1e1e);border:1px solid var(--border);border-radius:var(--radius-lg,13px);width:248px;max-height:340px;box-shadow:var(--shadow-pop);flex-direction:column;display:flex;position:absolute;top:calc(100% + 4px);left:0;overflow:hidden}.font-picker-search{background:var(--panel-2);border-radius:var(--radius-sm);height:26px;color:var(--text);border:1px solid #0000;margin:8px;padding:0 8px;font-size:11px}.font-picker-search:focus{border-color:var(--accent);outline:none}.font-picker-list{padding-bottom:6px;overflow-y:auto}.font-picker-group{letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);padding:8px 12px 4px;font-size:9px;font-weight:500}.font-picker-item{width:100%;color:var(--text);text-align:left;white-space:nowrap;text-overflow:ellipsis;background:0 0;border:none;border-radius:0;padding:6px 12px;font-size:14px;display:block;overflow:hidden}.font-picker-item:hover{background:var(--accent);color:#fff}.font-picker-item.active{color:var(--accent)}.font-picker-item.active:hover{color:#fff}.font-picker-empty{padding:12px;font-size:11px}.field-grid{grid-template-columns:1fr 1fr;gap:6px;display:grid}.num-field{background:var(--panel-2);border-radius:var(--radius-sm);border:1px solid #0000;align-items:center;min-width:0;height:28px;display:flex}.num-field:hover{border-color:var(--border-strong)}.num-field:focus-within{border-color:var(--accent)}.num-field input{font-variant-numeric:tabular-nums;background:0 0;border:none;flex:1;min-width:0;height:100%;padding:0 6px 0 0}.num-field input:hover,.num-field input:focus{border:none}.num-label{text-align:center;width:22px;color:var(--text-3);cursor:ew-resize;-webkit-user-select:none;user-select:none;flex:none;font-size:11px}.align-row{justify-content:space-between;gap:4px;margin-bottom:10px;display:flex}.align-btn{min-width:0;height:28px;color:var(--text-2);letter-spacing:-.08em;flex:1;padding:0;font-size:11px}.align-btn:hover{color:var(--text)}.color-field{background:var(--panel-2);border-radius:var(--radius-sm);flex:1;align-items:center;gap:6px;padding:3px 6px;display:flex}.color-field input[type=color]{border:1px solid var(--border-strong);cursor:pointer;background:0 0;border-radius:3px;width:20px;height:20px;padding:0}.color-field input[type=color]::-webkit-color-swatch-wrapper{padding:0}.color-field input[type=color]::-webkit-color-swatch{border:none;border-radius:2px}.hex-input{text-transform:uppercase;flex:1;min-width:0;padding:0;background:0 0!important;border:none!important}.slider-field{align-items:center;gap:8px;display:flex}.slider-field input[type=range]{accent-color:var(--accent);flex:1;min-width:0}.slider-field .num-field{flex:none;width:64px}.field-label{width:64px;min-width:0;color:var(--text-2);white-space:nowrap;text-overflow:ellipsis;flex:none;font-size:11px;overflow:hidden}.radius-grid{flex:1}.right-panel input[type=checkbox]{accent-color:var(--accent)}.right-panel select{flex:1;min-width:0}.layout-body{align-items:flex-start;gap:8px;margin-top:8px;display:flex}.layout-align-grid{background:var(--panel-2);border-radius:var(--radius-sm);flex:none;grid-template-columns:repeat(3,18px);grid-auto-rows:18px;gap:1px;padding:4px;display:grid}.layout-align-grid.collapsed-v{grid-template-columns:18px}.layout-align-grid.collapsed-h{grid-template-columns:repeat(3,18px)}.layout-align-dot{cursor:pointer;background:0 0;border:none;place-items:center;width:18px;height:18px;padding:0;display:grid}.layout-align-dot span{background:var(--text-3);opacity:.5;border-radius:50%;width:4px;height:4px;transition:transform 80ms,opacity 80ms,background 80ms}.layout-align-dot:hover span{opacity:1}.layout-align-dot.active span{background:var(--accent);opacity:1;border-radius:2px;transform:scale(1.9)}.layout-fields{flex:1;grid-template-columns:1fr 1fr;gap:6px;min-width:0;display:grid}.section-head{justify-content:space-between;align-items:center;gap:8px;min-height:24px;margin-bottom:8px;display:flex}.section-head .section-title{margin:0}.section-actions{opacity:.75;align-items:center;gap:2px;display:flex}.section:hover .section-actions{opacity:1}.icon-btn.tiny{width:22px;height:22px;color:var(--text-2);flex:none;justify-content:center;align-items:center;display:inline-flex}.icon-btn.tiny:hover{color:var(--text);background:var(--panel-3)}.icon-btn.tiny[aria-pressed=true]{color:var(--text)}.num-suffix{color:var(--text-3);flex:none;padding-right:6px;font-size:11px}.align-btn.align-gap{margin-left:8px}.align-btn.active{background:var(--panel-3);color:var(--text)}.dim-grid{grid-template-columns:1fr 1fr 24px;align-items:center}.ratio-btn{height:28px}.btn-pair{gap:4px;display:flex}.btn-pair .align-btn{flex:1;height:28px}.paint-row{align-items:center;gap:4px;margin-top:6px;display:flex}.paint-row .color-field{flex:1;min-width:0}.paint-row-actions{flex:none;gap:2px;display:flex}.export-named{justify-content:center;width:100%;height:30px;margin-top:8px}.color-swatch{cursor:pointer;background:linear-gradient(var(--swatch,#fff), var(--swatch,#fff)), repeating-conic-gradient(#8a8a8a 0% 25%, #5f5f5f 0% 50%) 0 0 / 8px 8px;border:1px solid #ffffff2e;border-radius:4px;flex:none;width:22px;height:22px;padding:0}.color-swatch:hover{border-color:#fff6}.insp-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;display:flex}.insp-header-text{flex-direction:column;gap:1px;min-width:0;display:flex}.insp-name{color:var(--text);text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:600;overflow:hidden}.insp-type{color:var(--text-3);font-size:10px}.grid-controls{margin-top:4px}.grid-track-list{margin-top:10px}.grid-track-head{justify-content:space-between;align-items:center;margin-bottom:4px;display:flex}.grid-track-row{grid-template-columns:14px 1fr 1fr 22px;align-items:center;gap:4px;margin-bottom:4px;display:grid}.grid-track-index{color:var(--text-3);text-align:center;font-variant-numeric:tabular-nums;font-size:10px}.grid-track-row select{min-width:0;height:24px}.grid-track-auto{padding-left:6px;font-size:11px}.num-field select{min-width:0;height:100%;color:var(--text);background:0 0;border:none;flex:1;font-size:11px}.constraints-block{align-items:center;gap:8px;margin-top:8px;display:flex}.constraints-fields{flex-direction:column;flex:1;gap:6px;min-width:0;display:flex}.constraints-diagram{background:var(--panel-2);border-radius:var(--radius-sm);flex:none;width:60px;height:60px;position:relative}.cd-frame{border:1px solid var(--border-strong);border-radius:2px;position:absolute;inset:10px}.cd-center{background:var(--text-3);pointer-events:none;border-radius:2px;width:10px;height:10px;margin:-5px 0 0 -5px;position:absolute;top:50%;left:50%}.cd-bar{background:var(--text-3);cursor:pointer;border:none;border-radius:1px;padding:0;position:absolute}.cd-bar:hover{background:var(--text-2)}.cd-bar.on{background:var(--accent)}.cd-top,.cd-bottom{width:2px;height:10px;margin-left:-1px;left:50%}.cd-top{top:0}.cd-bottom{bottom:0}.cd-left,.cd-right{width:10px;height:2px;margin-top:-1px;top:50%}.cd-left{left:0}.cd-right{right:0}.rp-tabs{border-bottom:1px solid var(--border);gap:2px;padding:8px 8px 0;display:flex}.rp-tabs button{border-radius:var(--radius-sm) var(--radius-sm) 0 0;height:26px;color:var(--text-2);flex:1;font-size:11px}.rp-tabs button.active{background:var(--panel-2);color:var(--text)}.inspect-measure{grid-template-columns:auto 1fr;gap:4px 12px;font-size:11px;display:grid}.inspect-measure span{color:var(--text-3)}.inspect-measure b{font-variant-numeric:tabular-nums;font-weight:500}.inspect-code{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-2);white-space:pre;-webkit-user-select:text;user-select:text;max-height:320px;margin:0;padding:8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;line-height:1.5;overflow:auto}.right-panel input[type=text],.right-panel input[type=number],.right-panel select,.right-panel button:not(.icon-btn):not(.align-btn):not(.layout-align-dot):not(.paint-swatch){height:28px}.right-panel select{padding:0 6px}.right-panel .row>*{min-width:0}.right-panel .row{flex-wrap:wrap;row-gap:6px}.proto-row{background:var(--panel-2);border-radius:var(--radius-sm);margin-bottom:8px;padding:8px}.proto-row:last-child{margin-bottom:0}.toolbar{background:var(--menu-bg,#2c2c2c);border:1px solid var(--border);border-radius:var(--radius-lg,13px);z-index:40;align-items:center;gap:2px;padding:6px;display:flex;position:fixed;bottom:20px;left:50%;transform:translate(-50%);box-shadow:0 2px 6px #0000004d,0 8px 28px #0000006b}.tb-group{align-items:center;display:flex;position:relative}.tb-btn{width:34px;height:34px;color:var(--text-2);cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;display:inline-flex}.tb-btn:hover{color:var(--text);background:#ffffff14}.tb-btn.active{background:var(--accent);color:#fff}.tb-caret{width:14px;height:34px;color:var(--text-3);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:flex-end;padding:0 0 6px;display:inline-flex}.tb-caret:hover{color:var(--text)}.tb-flyout{background:var(--menu-bg,#2c2c2c);border:1px solid var(--border);border-radius:12px;min-width:168px;padding:6px 0;position:absolute;bottom:calc(100% + 8px);left:-6px;box-shadow:0 10px 32px #00000073}.tb-flyout button{width:100%;height:28px;color:var(--text);text-align:left;cursor:default;background:0 0;border:none;border-radius:0;align-items:center;gap:10px;padding:0 12px;font-size:12px;display:flex}.tb-flyout button:hover{background:var(--accent);color:#fff}.tb-flyout button.active{color:var(--accent)}.tb-flyout button.active:hover{color:#fff}.tb-flyout span{flex:1}.tb-kbd{color:var(--text-3);font-size:11px;flex:none!important}.tb-flyout button:hover .tb-kbd{color:#ffffffb3}.shell-grid{grid-template-rows:48px 1fr;grid-template-columns:var(--left-w,240px) 1fr var(--right-w,240px);grid-template-areas:"topbar topbar topbar""left canvas right";height:100%;display:grid;position:relative}.topbar{background:var(--panel);border-bottom:1px solid var(--border);z-index:10;grid-area:topbar;justify-content:space-between;align-items:center;gap:12px;padding:0 8px;display:flex}.topbar-zone{align-items:center;gap:4px;min-width:220px;display:flex}.topbar-zone.right{justify-content:flex-end}.topbar-tools{align-items:center;gap:2px;display:flex}.doc-title{text-overflow:ellipsis;white-space:nowrap;max-width:220px;font-weight:500;overflow:hidden}.doc-title-input{width:180px}.zoom-wrap{position:relative}.zoom-btn{color:var(--text-2);font-variant-numeric:tabular-nums;justify-content:center;align-items:center;gap:4px;min-width:64px;display:inline-flex}.zoom-btn:hover{color:var(--text)}.zoom-menu{top:36px;right:0}.export-btn{align-items:center;gap:6px;margin-left:4px;display:inline-flex}.left-panel{background:var(--panel);border-right:1px solid var(--border);flex-direction:column;grid-area:left;min-height:0;display:flex;position:relative}.right-panel{background:var(--panel);border-left:1px solid var(--border);grid-area:right;min-height:0;position:relative;overflow-y:auto}.pages-strip{border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:4px;padding:6px 8px;display:flex}.page-chip{border-radius:var(--radius-sm);background:var(--panel-2);min-width:24px;height:24px;color:var(--text-2);font-variant-numeric:tabular-nums;padding:0 6px}.page-chip.active{background:var(--accent);color:#fff}.page-chip-wrap input{width:80px;height:24px;font-size:12px}.panel-tabs{border-bottom:1px solid var(--border);gap:2px;padding:6px 8px;display:flex}.panel-tabs button{color:var(--text-2);padding:5px 10px;font-weight:500}.panel-tabs button.active{color:var(--text);background:var(--panel-2)}.panel-empty{padding:16px 12px;font-size:12px}.insert-panel{flex:1;overflow-y:auto}.preset-buttons{gap:6px;display:grid}.text-preset{text-align:left;background:var(--panel-2);border-radius:var(--radius-sm);padding:10px 12px}.text-preset:hover{background:var(--panel-3)}.upload-cta{border:1px dashed var(--border-strong);border-radius:var(--radius);width:100%;color:var(--text-2);flex-direction:column;align-items:center;gap:8px;padding:20px 12px;font-size:12px;display:flex}.upload-cta:hover{color:var(--text);border-color:var(--accent);background:0 0}.asset-grid{grid-template-columns:1fr 1fr;gap:6px;display:grid}.asset-thumb{border-radius:var(--radius-sm);aspect-ratio:1;background:var(--panel-2);padding:0;overflow:hidden}.asset-thumb img{object-fit:cover;width:100%;height:100%;display:block}.template-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.template-card{background:var(--panel-2);border-radius:var(--radius-sm);text-align:left;flex-direction:column;gap:4px;padding:0 0 6px;display:flex;overflow:hidden}.template-card:hover{background:var(--panel-3)}.template-card img{width:100%;display:block}.template-card span{color:var(--text-2);text-overflow:ellipsis;white-space:nowrap;padding:0 8px;font-size:11px;overflow:hidden}.sticker-thumb{background:var(--panel-2);padding:8px}.sticker-thumb img{object-fit:contain}.swatch-row{flex-wrap:wrap;gap:6px;display:flex}.swatch{border:1px solid var(--border-strong);border-radius:50%;width:26px;height:26px;padding:0}.swatch:hover{outline:2px solid var(--accent);outline-offset:1px}.ruler{z-index:5;position:absolute}.ruler-top{cursor:row-resize;top:0;left:0}.ruler-left{cursor:col-resize;top:0;left:0}.ruler-corner{background:var(--panel);border-right:1px solid var(--border);border-bottom:1px solid var(--border);z-index:6;width:20px;height:20px;position:absolute;top:0;left:0}.canvas-area{background:var(--bg);touch-action:none;overscroll-behavior:none;grid-area:canvas;min-width:0;min-height:0;position:relative;overflow:hidden}.shell-grid.ui-hidden{grid-template:"canvas"1fr/1fr}.shell-grid.ui-hidden>:not(.canvas-area){display:none}.pages-panel{border-bottom:1px solid var(--border);flex-direction:column;flex:none;max-height:30%;padding-bottom:6px;display:flex}.pages-panel.collapsed{padding-bottom:0}.pages-head{justify-content:space-between;align-items:center;gap:8px;padding:8px 8px 4px 10px;display:flex}.pages-toggle{color:var(--text-2);background:0 0;border:none;align-items:center;gap:6px;padding:0;font-size:11px;font-weight:500;display:flex}.pages-toggle:hover{color:var(--text)}.pages-list{padding:0 6px;overflow-y:auto}.page-row{border-radius:var(--radius-sm);width:100%;height:28px;color:var(--text-2);text-align:left;white-space:nowrap;text-overflow:ellipsis;background:0 0;border:none;padding:0 8px;font-size:12px;display:block;overflow:hidden}.page-row:hover{background:var(--panel-2);color:var(--text)}.page-row.active{background:var(--panel-3);color:var(--text)}.page-rename{border-radius:var(--radius-sm);width:100%;height:28px;padding:0 8px;font-size:12px}.panel-resize{z-index:20;cursor:col-resize;touch-action:none;width:6px;position:absolute;top:48px;bottom:0}.panel-resize.left{left:var(--left-w,240px);margin-left:-3px}.panel-resize.right{right:var(--right-w,240px);margin-right:-3px}.panel-resize:after{content:"";background:0 0;transition:background .12s;position:absolute;inset:0 2px}.panel-resize:hover:after,.panel-resize:focus-visible:after{background:var(--accent)}.panel-resize:focus-visible{outline:none}.present-root{z-index:900;background:#0d0d0d;flex-direction:column;display:flex;position:fixed;inset:0}.present-bar{background:var(--panel);border-bottom:1px solid var(--border);align-items:center;gap:8px;padding:8px 12px;display:flex}.present-bar button{background:var(--panel-2);height:28px}.present-name{min-width:0;color:var(--text-2);text-align:center;white-space:nowrap;text-overflow:ellipsis;flex:1;font-size:12px;overflow:hidden}.present-stage{flex:1;place-items:center;min-height:0;display:grid;position:relative;overflow:auto}.present-frame{background:#fff;position:relative;overflow:hidden;box-shadow:0 12px 48px #00000080}.present-frame img{width:100%;height:100%;display:block}.present-loading{height:100%;color:var(--text-3);place-items:center;font-size:12px;display:grid}.present-hotspot{cursor:pointer;background:0 0;border:none;border-radius:0;padding:0;position:absolute}.present-hotspot:hover{background:#4c9fff1f}.present-hotspot:focus-visible{outline:2px solid var(--accent)}.present-overlay-layer{place-items:center;display:grid;position:absolute;inset:0}.present-dim{background:#00000073;position:absolute;inset:0}.present-overlay{position:relative}.present-overlay-layer .pos-top{align-self:start;margin-top:24px}.present-overlay-layer .pos-bottom{align-self:end;margin-bottom:24px}.present-overlay-layer .pos-left{justify-self:start;margin-left:24px}.present-overlay-layer .pos-right{justify-self:end;margin-right:24px}@keyframes present-dissolve{0%{opacity:0}to{opacity:1}}@keyframes present-push{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes present-slide{0%{opacity:0;transform:translate(40%)}to{opacity:1;transform:translate(0)}}@keyframes present-moveIn{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes present-moveOut{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes present-instant{0%{opacity:1}to{opacity:1}}@media (prefers-reduced-motion:reduce){.present-frame{animation:none!important}}.ctx-overlay{z-index:400;position:fixed;inset:0}.ctx-menu{background:var(--menu-bg,#2c2c2c);border:1px solid var(--border);color:var(--text);overscroll-behavior:contain;border-radius:13px;max-height:calc(100vh - 16px);padding:6px 0;font-size:12px;position:fixed;overflow-y:auto;box-shadow:0 2px 6px #00000047,0 10px 32px #00000070}.ctx-item{width:100%;height:26px;color:var(--text);text-align:left;cursor:default;white-space:nowrap;background:0 0;border:none;border-radius:0;align-items:center;gap:8px;padding:0 12px 0 4px;font-size:12px;display:flex}.ctx-item:hover:not(.disabled),.ctx-item.open:not(.disabled){background:var(--accent);color:#fff}.ctx-item.disabled{color:var(--text-3);opacity:.55;cursor:default}.ctx-check{flex:none;justify-content:center;align-items:center;width:18px;display:inline-flex}.ctx-label{text-overflow:ellipsis;flex:1;min-width:0;overflow:hidden}.ctx-shortcut{color:var(--text-3);font-variant-numeric:tabular-nums;flex:none;padding-left:20px;font-size:11px}.ctx-item:hover:not(.disabled) .ctx-shortcut,.ctx-item.open:not(.disabled) .ctx-shortcut{color:#ffffffb8}.ctx-arrow{color:var(--text-2);flex:none;align-items:center;margin-left:4px;display:inline-flex}.ctx-item:hover:not(.disabled) .ctx-arrow{color:#fff}.ctx-sep{background:var(--border);height:1px;margin:5px 0}.toast-stack{z-index:2000;pointer-events:none;flex-direction:column;align-items:center;gap:8px;display:flex;position:fixed;bottom:16px;left:50%;transform:translate(-50%)}.toast{pointer-events:auto;background:var(--panel);border:1px solid var(--border-strong);border-radius:var(--radius);box-shadow:var(--shadow-pop);color:var(--text);text-align:left;max-width:480px;padding:8px 16px;font-size:12.5px}.toast-warn{border-color:#c9a03c}.toast-error{border-color:var(--danger)}.storage-banner{z-index:2001;background:var(--danger);color:#fff;text-align:center;padding:6px 12px;font-size:12.5px;position:fixed;top:0;left:0;right:0}.reload-overlay{z-index:2002;background:#0009;place-items:center;display:grid;position:fixed;inset:0}.reload-card{background:var(--panel);border:1px solid var(--border-strong);border-radius:var(--radius);box-shadow:var(--shadow-pop);text-align:center;max-width:380px;padding:24px}.save-dot{background:var(--text-3);border-radius:50%;width:8px;height:8px;margin-right:4px;display:inline-block}.save-dot[data-status=saving]{background:#c9a03c}.save-dot[data-status=saved]{background:#58a55c}.save-dot[data-status=error]{background:var(--danger)}