.tw-panel{display:flex;flex-direction:column;width:288px;height:100%;min-height:0;background:var(--bg-panel);border-left:1px solid var(--border);box-shadow:var(--shadow-md)}.tw-panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:16px 16px 12px;border-bottom:1px solid var(--border-soft)}.tw-panel-title{margin:0;font-family:var(--serif);font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--text-strong)}.tw-panel-sub{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-strong);background:var(--accent-tint);border-radius:var(--radius-pill);padding:2px 9px}.tw-panel-body{flex:1;min-height:0;overflow-y:auto;padding:14px 16px 20px;display:flex;flex-direction:column;gap:14px}.tw-empty{margin:0;font-size:12.5px;color:var(--text-muted);line-height:1.6}.tw-field{display:flex;flex-direction:column;gap:6px;padding:12px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);transition:border-color var(--dur-quick) var(--ease-out),box-shadow var(--dur-quick) var(--ease-out)}.tw-field:hover{border-color:var(--border-strong);box-shadow:var(--shadow-sm)}.tw-field-label{font-size:12px;font-weight:600;color:var(--text)}.tw-input{width:100%;font:inherit;font-size:13px;color:var(--text);background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-sm);padding:7px 9px;transition:border-color var(--dur-quick) var(--ease-out)}.tw-input:hover{border-color:var(--border-strong)}.tw-input:focus-visible,.tw-input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}.tw-select{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text-soft) 50%),linear-gradient(135deg,var(--text-soft) 50%,transparent 50%);background-position:calc(100% - 16px) center,calc(100% - 11px) center;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:28px}.tw-color{display:flex;align-items:center;gap:8px}.tw-color-swatch{flex:none;width:34px;height:30px;padding:2px;cursor:pointer;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-sm)}.tw-color-swatch:hover{border-color:var(--border-strong)}.tw-color-swatch:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.tw-color-hex{flex:1;min-width:0;font-variant-numeric:tabular-nums}.tw-range{display:flex;align-items:center;gap:10px}.tw-range-input{flex:1;min-width:0;accent-color:var(--accent);cursor:pointer}.tw-range-input:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--radius-pill)}.tw-range-value{flex:none;min-width:34px;text-align:right;font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--text-muted)}.tw-switch{display:inline-flex;align-items:center;cursor:pointer}.tw-switch input{position:absolute;opacity:0;width:0;height:0}.tw-switch-track{position:relative;display:inline-block;width:38px;height:22px;background:var(--bg-muted);border:1px solid var(--border);border-radius:var(--radius-pill);transition:background var(--dur-quick) var(--ease-out),border-color var(--dur-quick) var(--ease-out)}.tw-switch-thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;background:var(--bg-elevated);border-radius:50%;box-shadow:var(--shadow-sm);transition:transform var(--dur-enter) var(--ease-out)}.tw-switch input:checked+.tw-switch-track{background:var(--accent);border-color:var(--accent)}.tw-switch input:checked+.tw-switch-track .tw-switch-thumb{transform:translate(16px)}.tw-switch input:focus-visible+.tw-switch-track{outline:2px solid var(--accent);outline-offset:2px}.wb{display:flex;flex-direction:column;gap:24px}.wb-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid var(--border-soft)}.wb-top-title{display:flex;flex-direction:column;gap:3px}.wb-top-name{font-family:var(--serif);font-size:20px;font-weight:600;letter-spacing:-.01em;color:var(--text-strong)}.wb-top-sub{font-size:13px;color:var(--text-soft)}.wb-top-ds{display:inline-flex;align-items:center;gap:12px;font:inherit;cursor:pointer;padding:8px 12px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);transition:border-color var(--dur-quick) var(--ease-out),box-shadow var(--dur-quick) var(--ease-out)}.wb-top-ds:hover{border-color:var(--accent);box-shadow:var(--shadow-sm)}.wb-top-ds-col{display:flex;flex-direction:column;gap:1px;text-align:left}.wb-top-ds-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-soft)}.wb-top-ds-name{font-size:13px;font-weight:600;color:var(--text-strong)}.wb-top-ds-swatches{display:inline-flex;gap:3px}.wb-swatch{width:14px;height:14px;border-radius:4px;border:1px solid rgba(15,23,42,.08)}.wb-panel{display:flex;flex-direction:column;gap:14px}.wb-panel-head{display:flex;align-items:center;gap:10px}.wb-panel-title{margin:0;font-size:15px;font-weight:600;color:var(--text-strong)}.wb-panel-subtitle{margin:0;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-soft)}.wb-panel-hint{font-size:12.5px;color:var(--text-soft)}.wb-work-count{font-size:12px;font-weight:600;color:var(--text-muted);background:var(--bg-subtle);border:1px solid var(--border-soft);border-radius:999px;padding:1px 9px}.wb-link{margin-left:auto;font:inherit;font-size:12.5px;cursor:pointer;color:var(--accent-strong);background:transparent;border:none;padding:2px 4px}.wb-link:hover{text-decoration:underline}.wb-surface-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:12px}.wb-surface{display:flex;align-items:center;gap:13px;text-align:left;font:inherit;cursor:pointer;padding:15px 16px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-md);transition:border-color var(--dur-quick) var(--ease-out),box-shadow var(--dur-quick) var(--ease-out),transform var(--dur-quick) var(--ease-out)}.wb-surface:hover{border-color:var(--accent);box-shadow:0 4px 16px #0f172a14;transform:translateY(-2px)}.wb-surface:hover .wb-surface-go{background:var(--accent);color:#fff}.wb-surface-icon{flex:none;display:flex;align-items:center;justify-content:center;width:42px;height:42px;font-size:20px;background:var(--bg-subtle);border-radius:var(--radius)}.wb-surface-body{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.wb-surface-label{font-size:14px;font-weight:600;color:var(--text-strong)}.wb-surface-hint{font-size:12px;color:var(--text-muted)}.wb-surface-go{flex:none;display:flex;align-items:center;justify-content:center;width:24px;height:24px;font-size:15px;color:var(--accent-strong);background:var(--accent-tint);border-radius:50%;transition:background var(--dur-quick) var(--ease-out),color var(--dur-quick) var(--ease-out)}.wb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(204px,1fr));gap:14px}.wb-card{display:flex;flex-direction:column;text-align:left;font:inherit;cursor:pointer;padding:0;overflow:hidden;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);transition:border-color var(--dur-quick) var(--ease-out),box-shadow var(--dur-quick) var(--ease-out),transform var(--dur-quick) var(--ease-out)}.wb-card:hover{border-color:var(--accent);box-shadow:0 4px 16px #0f172a14;transform:translateY(-2px)}.wb-card-thumb{display:flex;align-items:center;justify-content:center;aspect-ratio:16 / 10;background:var(--bg-subtle);border-bottom:1px solid var(--border-soft);overflow:hidden}.wb-card-thumb img{width:100%;height:100%;object-fit:cover}.wb-card-thumb-fallback{font-size:30px;opacity:.55}.wb-card-meta{display:flex;flex-direction:column;gap:6px;padding:10px 12px 12px}.wb-card-title{font-size:13.5px;font-weight:600;color:var(--text-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wb-card-tags{display:flex;align-items:center;gap:8px}.wb-card-badge{font-size:11px;color:var(--accent-strong);background:var(--accent-tint);border-radius:5px;padding:1px 7px}.wb-card-date{font-size:11px;color:var(--text-soft)}.wb-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:44px 20px;text-align:center;background:var(--bg-subtle);border:1px dashed var(--border-strong);border-radius:var(--radius-md)}.wb-empty-icon{font-size:26px;color:var(--accent)}.wb-empty-text{margin:0;font-size:13px;color:var(--text-muted);max-width:360px}.wb-tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:10px}.wb-tool{display:flex;align-items:center;gap:11px;text-align:left;font:inherit;cursor:pointer;padding:12px 14px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);transition:border-color var(--dur-quick) var(--ease-out),background var(--dur-quick) var(--ease-out)}.wb-tool:hover{border-color:var(--accent);background:var(--accent-tint)}.wb-tool-icon{display:flex;align-items:center;justify-content:center;width:30px;height:30px;flex-shrink:0;font-size:15px;color:var(--accent-strong);background:var(--bg-subtle);border-radius:8px}.wb-tool-text{display:flex;flex-direction:column;gap:2px;min-width:0}.wb-tool-label{font-size:13px;font-weight:600;color:var(--text-strong)}.wb-tool-desc{font-size:11.5px;color:var(--text-soft)}.proj{display:flex;flex-direction:column;min-height:0;height:100%;overflow:hidden}.proj-head{display:flex;align-items:center;gap:12px;padding:16px 24px;background:var(--bg-panel);border-bottom:1px solid var(--border)}.proj-title{margin:0 auto 0 0;font-family:var(--serif);font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--text-strong)}.proj-title-count{color:var(--text-soft);font-weight:500}.proj-refresh{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:12.5px;cursor:pointer;padding:6px 12px;color:var(--text);background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-sm);transition:border-color var(--dur-quick) var(--ease-out),background var(--dur-quick) var(--ease-out)}.proj-refresh:hover{border-color:var(--accent);background:var(--bg-subtle)}.proj-refresh:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.proj-refresh:disabled{opacity:.5;cursor:default}.proj-filters{display:flex;flex-wrap:wrap;gap:6px;padding:12px 24px 0}.proj-chip{font:inherit;font-size:12px;cursor:pointer;padding:4px 12px;color:var(--text-muted);background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-pill);transition:border-color var(--dur-quick) var(--ease-out),color var(--dur-quick) var(--ease-out),background var(--dur-quick) var(--ease-out)}.proj-chip:hover{border-color:var(--accent);color:var(--text)}.proj-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.proj-chip.active{color:var(--accent-strong);background:var(--accent-tint);border-color:var(--accent-soft);font-weight:600}.proj-scroll{flex:1;min-height:0;overflow-y:auto;padding:20px 24px 28px}.proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:16px}.proj-card{display:flex;flex-direction:column;text-align:left;font:inherit;cursor:pointer;padding:0;overflow:hidden;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);transition:border-color var(--dur-quick) var(--ease-out),box-shadow var(--dur-quick) var(--ease-out),transform var(--dur-quick) var(--ease-out)}.proj-card:hover{border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(-2px)}.proj-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.proj-card.active{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint),var(--shadow-sm)}.proj-card-thumb{position:relative;aspect-ratio:4 / 3;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--bg-muted);border-bottom:1px solid var(--border-soft)}.proj-card-thumb img{width:100%;height:100%;object-fit:cover;display:block}.proj-card-glyph{font-family:var(--serif);font-size:34px;font-weight:600;color:#1c1b1a6b;-webkit-user-select:none;user-select:none}@media (prefers-color-scheme: dark){.proj-card-glyph{color:#f2ede480}}.proj-card-pages{position:absolute;right:8px;bottom:8px;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text);background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-pill);padding:1px 8px;box-shadow:var(--shadow-xs)}.proj-card-meta{display:flex;flex-direction:column;gap:6px;padding:12px 13px 14px}.proj-card-tags{display:flex;flex-wrap:wrap;gap:5px}.proj-badge{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--accent-strong);background:var(--accent-tint);border-radius:var(--radius-pill);padding:1px 8px}.proj-badge.proj-badge-kind{color:var(--text-muted);background:var(--bg-subtle)}.proj-card-name{font-size:13.5px;font-weight:500;color:var(--text-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.proj-card-time{font-size:11.5px;color:var(--text-soft);font-variant-numeric:tabular-nums}.proj-skeleton{pointer-events:none}.proj-skeleton .proj-card-thumb,.proj-sk-line{background:linear-gradient(100deg,var(--bg-muted) 30%,var(--bg-subtle) 50%,var(--bg-muted) 70%);background-size:200% 100%;animation:proj-shimmer 1.4s var(--ease-out) infinite}.proj-sk-line{height:10px;border-radius:var(--radius-xs)}.proj-sk-line.w-40{width:40%}.proj-sk-line.w-80{width:80%}.proj-sk-line.w-55{width:55%}@keyframes proj-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media (prefers-reduced-motion: reduce){.proj-skeleton .proj-card-thumb,.proj-sk-line{animation:none}}.proj-empty{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:48px 24px}.proj-empty-card{max-width:360px;text-align:center}.proj-empty-title{font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:-.01em;color:var(--text-strong);margin-bottom:8px}.proj-empty-card p{margin:0;line-height:1.6;color:var(--text-muted)}.ds-view{height:100%;overflow-y:auto;padding:28px 32px 48px;background:var(--bg)}.ds-header{max-width:1200px;margin:0 auto 24px}.ds-header-text{display:flex;flex-direction:column;gap:6px}.ds-title{margin:0;font-family:var(--serif);font-size:26px;font-weight:600;letter-spacing:-.015em;color:var(--text-strong)}.ds-subtitle{margin:0;max-width:640px;font-size:13.5px;line-height:1.6;color:var(--text-muted)}.ds-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}.ds-card{display:flex;flex-direction:column;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-xs);transition:border-color var(--dur-quick) var(--ease-out),box-shadow var(--dur-enter) var(--ease-out),transform var(--dur-quick) var(--ease-out)}.ds-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md);transform:translateY(-2px)}.ds-card--active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--shadow-md)}.ds-preview{position:relative;min-height:132px;margin:12px 12px 0;padding:18px 16px 16px;border:1px solid rgba(0,0,0,.06);display:flex;flex-direction:column;gap:8px;overflow:hidden}.ds-preview-heading{font-size:24px;font-weight:700;line-height:1.1;letter-spacing:-.01em}.ds-preview-body{font-size:12px;line-height:1.4;opacity:.85}.ds-preview-chips{margin-top:auto;display:flex;align-items:center;gap:8px}.ds-preview-chip{height:22px}.ds-preview-chip--fill{width:40px}.ds-preview-chip--outline{display:inline-flex;align-items:center;padding:0 10px;font-size:11px;font-weight:600;background:transparent;border:1.5px solid currentColor}.ds-badge-active{position:absolute;top:10px;right:10px;padding:2px 9px;font-size:10.5px;font-weight:700;letter-spacing:.02em;color:#fff;background:var(--accent);border-radius:var(--radius-pill);box-shadow:var(--shadow-sm)}.ds-card-body{display:flex;flex-direction:column;gap:10px;padding:14px 16px 16px}.ds-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.ds-name{margin:0;font-size:15px;font-weight:600;color:var(--text-strong)}.ds-tag{flex:none;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--accent-strong);background:var(--accent-tint);border:1px solid var(--accent-soft);border-radius:var(--radius-pill);padding:2px 9px}.ds-desc{margin:0;font-size:12.5px;line-height:1.5;color:var(--text-muted)}.ds-swatches{display:flex;gap:0;height:40px;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--border-soft)}.ds-swatch{position:relative;flex:1;display:flex;align-items:flex-end;justify-content:center}.ds-swatch-hex{font-size:8.5px;font-weight:600;letter-spacing:.01em;padding:1px 3px 2px;color:#fff;background:#0000006b;border-radius:var(--radius-xs) var(--radius-xs) 0 0;opacity:0;transform:translateY(3px);transition:opacity var(--dur-quick) var(--ease-out),transform var(--dur-quick) var(--ease-out);white-space:nowrap;font-variant-numeric:tabular-nums}.ds-swatch:hover .ds-swatch-hex{opacity:1;transform:translateY(0)}.ds-meta{margin:0;display:flex;flex-direction:column;gap:6px;padding-top:2px}.ds-meta-row{display:grid;grid-template-columns:40px 1fr;align-items:center;gap:10px}.ds-meta-row dt{font-size:11px;font-weight:600;color:var(--text-soft)}.ds-meta-row dd{margin:0;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ds-meta-flavor{flex:none;font-family:var(--sans);font-size:10px;font-weight:500;color:var(--text-soft);background:var(--bg-subtle);border:1px solid var(--border-soft);border-radius:var(--radius-xs);padding:1px 5px}.ds-meta-radius{font-family:var(--sans)}.ds-radius-demo{flex:none;width:22px;height:22px;background:var(--bg-muted);border:1.5px solid var(--border-strong)}.ds-meta-radius code{font-family:var(--sans);font-size:12px;color:var(--text-muted);font-variant-numeric:tabular-nums}.ds-use-btn{margin-top:2px;width:100%;font:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:9px 14px;color:#fff;background:var(--accent);border:1px solid var(--accent);border-radius:var(--radius);box-shadow:0 1px #b45a3b2e inset,var(--shadow-xs);transition:background var(--dur-quick) var(--ease-out),border-color var(--dur-quick) var(--ease-out)}.ds-use-btn:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.ds-use-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.ds-use-btn--active{color:var(--accent-strong);background:var(--accent-tint);border-color:var(--accent-soft);box-shadow:none;cursor:default}.ds-use-btn--active:hover{background:var(--accent-tint);border-color:var(--accent-soft)}@media (max-width: 640px){.ds-view{padding:20px 16px 40px}.ds-grid{grid-template-columns:1fr}}.tpl-view{height:100%;overflow-y:auto;padding:28px 32px 48px;background:var(--bg)}.tpl-header{margin-bottom:22px}.tpl-title{margin:0 0 6px;font-family:var(--serif);font-size:26px;font-weight:600;letter-spacing:-.01em;color:var(--text-strong)}.tpl-subtitle{margin:0;font-size:13.5px;color:var(--text-muted);line-height:1.55}.tpl-section{margin-bottom:28px}.tpl-section-head{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}.tpl-section-title{margin:0;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-soft)}.tpl-section-note{font-size:12px;color:var(--text-faint)}.tpl-demo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}.tpl-demo-card{display:flex;flex-direction:column;align-items:flex-start;gap:7px;text-align:left;font:inherit;cursor:pointer;padding:18px 18px 16px;background:linear-gradient(180deg,var(--accent-tint),var(--bg-elevated) 60%);border:1px solid var(--accent-soft);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);transition:border-color var(--dur-quick) var(--ease-out),box-shadow var(--dur-quick) var(--ease-out),transform var(--dur-quick) var(--ease-out)}.tpl-demo-card:hover{border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(-2px)}.tpl-demo-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.tpl-demo-label{font-size:15px;font-weight:600;color:var(--text-strong)}.tpl-demo-hint{font-size:12px;color:var(--text-muted);line-height:1.45}.tpl-demo-cta{margin-top:2px;font-size:12px;font-weight:600;color:var(--accent-strong)}.tpl-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;padding-bottom:4px}.tpl-chip{font:inherit;font-size:12.5px;cursor:pointer;padding:6px 14px;color:var(--text-muted);background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-pill);transition:border-color var(--dur-quick) var(--ease-out),color var(--dur-quick) var(--ease-out),background var(--dur-quick) var(--ease-out)}.tpl-chip:hover{border-color:var(--border-strong);color:var(--text)}.tpl-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.tpl-chip-active{color:#fff;background:var(--accent);border-color:var(--accent)}.tpl-chip-active:hover{color:#fff;background:var(--accent-hover);border-color:var(--accent-hover)}.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:14px}.tpl-card{display:flex;flex-direction:column;gap:9px;padding:18px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);transition:border-color var(--dur-quick) var(--ease-out),box-shadow var(--dur-quick) var(--ease-out),transform var(--dur-quick) var(--ease-out)}.tpl-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-sm);transform:translateY(-1px)}.tpl-card-badges{display:flex;flex-wrap:wrap;gap:6px}.tpl-badge{font-size:10.5px;font-weight:600;letter-spacing:.02em;border-radius:var(--radius-pill);padding:2px 9px;white-space:nowrap}.tpl-badge-category{color:var(--text-muted);background:var(--bg-muted);border:1px solid var(--border-soft)}.tpl-badge-surface{color:var(--accent-strong);background:var(--accent-tint);border:1px solid var(--accent-soft)}.tpl-card-name{margin:0;font-size:15.5px;font-weight:600;color:var(--text-strong);line-height:1.35}.tpl-card-desc{margin:0;flex:1;font-size:12.5px;color:var(--text-muted);line-height:1.55}.tpl-card-use{align-self:flex-start;margin-top:2px;font:inherit;font-size:12.5px;font-weight:500;cursor:pointer;padding:7px 16px;color:var(--accent-strong);background:var(--bg-elevated);border:1px solid var(--accent-soft);border-radius:var(--radius);transition:color var(--dur-quick) var(--ease-out),background var(--dur-quick) var(--ease-out),border-color var(--dur-quick) var(--ease-out)}.tpl-card-use:hover{color:#fff;background:var(--accent);border-color:var(--accent)}.tpl-card-use:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.tpl-empty{padding:40px 0;text-align:center;color:var(--text-soft);font-size:13px}.brand-view{height:100%;overflow-y:auto;padding:28px 32px 48px;background:var(--bg)}.brand-header{margin-bottom:22px}.brand-title{margin:0 0 6px;font-family:var(--serif);font-size:26px;font-weight:600;letter-spacing:-.01em;color:var(--text-strong)}.brand-subtitle{margin:0;font-size:13.5px;color:var(--text-muted);line-height:1.55}.brand-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}.brand-tab{font:inherit;font-size:12.5px;cursor:pointer;padding:7px 16px;color:var(--text-muted);background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-pill);transition:border-color var(--dur-quick) var(--ease-out),color var(--dur-quick) var(--ease-out),background var(--dur-quick) var(--ease-out)}.brand-tab:hover{border-color:var(--border-strong);color:var(--text)}.brand-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.brand-tab-active{color:#fff;background:var(--accent);border-color:var(--accent)}.brand-tab-active:hover{color:#fff;background:var(--accent-hover);border-color:var(--accent-hover)}.brand-tab-hint{margin:0 0 18px;font-size:12.5px;color:var(--text-faint);line-height:1.5}.brand-input-pane{max-width:620px;margin-bottom:22px}.brand-input,.brand-textarea{width:100%;font:inherit;font-size:13.5px;color:var(--text);background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:11px 13px;transition:border-color var(--dur-quick) var(--ease-out),box-shadow var(--dur-quick) var(--ease-out)}.brand-textarea{resize:vertical;line-height:1.6}.brand-textarea-lg{min-height:150px}.brand-input::placeholder,.brand-textarea::placeholder{color:var(--text-faint)}.brand-input:focus,.brand-textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}.brand-dropzone{position:relative;display:flex;align-items:center;justify-content:center;min-height:180px;padding:22px;text-align:center;cursor:pointer;background:var(--bg-subtle);border:1.5px dashed var(--border-strong);border-radius:var(--radius-lg);transition:border-color var(--dur-quick) var(--ease-out),background var(--dur-quick) var(--ease-out)}.brand-dropzone:hover{border-color:var(--accent);background:var(--accent-tint)}.brand-dropzone:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.brand-dropzone-over{border-color:var(--accent);background:var(--accent-tint)}.brand-file-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}.brand-drop-empty{display:flex;flex-direction:column;align-items:center;gap:6px}.brand-drop-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin-bottom:4px;font-size:20px;font-weight:600;color:var(--accent-strong);background:var(--accent-tint);border-radius:var(--radius-pill)}.brand-drop-title{font-size:14px;font-weight:600;color:var(--text-strong)}.brand-drop-hint{font-size:12px;color:var(--text-muted)}.brand-preview{display:flex;flex-direction:column;align-items:center;gap:8px}.brand-preview-img{max-width:100%;max-height:240px;object-fit:contain;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);background:#fff}.brand-preview-name{font-size:12.5px;font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.brand-preview-swap{font-size:11.5px;color:var(--text-soft)}.brand-field{display:block;max-width:620px;margin-bottom:18px}.brand-field-label{display:block;margin-bottom:7px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-soft)}.brand-error{margin:0 0 14px;font-size:12.5px;color:#9c2a25}.brand-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.brand-submit{font:inherit;font-weight:500;cursor:pointer;color:#fff;background:var(--accent);border:1px solid var(--accent);border-radius:var(--radius);padding:10px 20px;box-shadow:0 1px #b45a3b2e inset,var(--shadow-xs);transition:background var(--dur-quick) var(--ease-out),border-color var(--dur-quick) var(--ease-out)}.brand-submit:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}.brand-submit:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.brand-submit:disabled{cursor:default;opacity:.5;box-shadow:none}.brand-success{font-size:12.5px;font-weight:500;color:var(--accent-strong)}.sketch-root{height:100%;min-height:0;overflow:hidden;background:radial-gradient(1200px 620px at 50% -12%,var(--accent-tint),transparent 70%),var(--bg)}.sketch-scroll{height:100%;overflow-y:auto;padding:8px 40px 72px}.sketch-scroll>*{max-width:980px;margin-left:auto;margin-right:auto}.sketch-header{text-align:center;padding:56px 16px 28px}.sketch-title{margin:0;font-family:var(--serif);font-size:40px;line-height:1.08;font-weight:600;letter-spacing:-.02em;color:var(--text-strong)}.sketch-desc{margin:14px auto 0;max-width:520px;font-size:15px;line-height:1.6;color:var(--text-muted)}.sketch-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;padding:12px 16px;margin-bottom:16px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs)}.sketch-tool-group{display:flex;align-items:center;gap:6px}.sketch-tool-label{font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--text-soft);margin-right:2px}.sketch-size-btn{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:12.5px;cursor:pointer;padding:5px 10px;color:var(--text-muted);background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-sm);transition:border-color var(--dur-quick) var(--ease-out),color var(--dur-quick) var(--ease-out),background var(--dur-quick) var(--ease-out)}.sketch-size-btn:hover{border-color:var(--border-strong);color:var(--text)}.sketch-size-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.sketch-size-btn.is-active{color:var(--accent-strong);background:var(--accent-tint);border-color:var(--accent-soft)}.sketch-size-dot{flex:none;display:inline-block;border-radius:var(--radius-pill);background:currentColor}.sketch-size-text{line-height:1}.sketch-swatch{width:24px;height:24px;padding:0;cursor:pointer;border-radius:var(--radius-pill);border:2px solid var(--bg-panel);box-shadow:0 0 0 1px var(--border);transition:transform var(--dur-quick) var(--ease-out),box-shadow var(--dur-quick) var(--ease-out)}.sketch-swatch:hover{transform:scale(1.08)}.sketch-swatch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.sketch-swatch.is-active{box-shadow:0 0 0 2px var(--accent);transform:scale(1.08)}.sketch-action-btn{font:inherit;font-size:12.5px;font-weight:500;cursor:pointer;padding:6px 12px;color:var(--text);background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-sm);transition:border-color var(--dur-quick) var(--ease-out),color var(--dur-quick) var(--ease-out),background var(--dur-quick) var(--ease-out)}.sketch-action-btn:hover:not(:disabled){border-color:var(--border-strong);background:var(--bg-subtle)}.sketch-action-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.sketch-action-btn.is-active{color:var(--accent-strong);background:var(--accent-tint);border-color:var(--accent-soft)}.sketch-action-btn:disabled{opacity:.45;cursor:not-allowed}.sketch-canvas-wrap{padding:16px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.sketch-canvas{display:block;width:100%;max-width:900px;margin:0 auto;background:#fff;border:1px solid var(--border-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-xs) inset;touch-action:none;cursor:crosshair}.sketch-form{display:flex;flex-direction:column;gap:22px;margin-top:24px}.sketch-field{display:flex;flex-direction:column;gap:10px}.sketch-field-label{font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--text-strong)}.sketch-surface-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.sketch-surface-btn{display:flex;flex-direction:column;gap:3px;text-align:left;font:inherit;cursor:pointer;padding:12px 14px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);transition:border-color var(--dur-quick) var(--ease-out),box-shadow var(--dur-quick) var(--ease-out),background var(--dur-quick) var(--ease-out)}.sketch-surface-btn:hover{border-color:var(--accent);box-shadow:var(--shadow-xs)}.sketch-surface-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.sketch-surface-btn.is-active{background:var(--accent-tint);border-color:var(--accent);box-shadow:var(--shadow-sm)}.sketch-surface-label{font-size:14px;font-weight:600;color:var(--text-strong)}.sketch-surface-hint{font-size:12px;line-height:1.4;color:var(--text-muted)}.sketch-note{font:inherit;font-size:14px;line-height:1.6;color:var(--text);resize:vertical;min-height:78px;padding:12px 14px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);transition:border-color var(--dur-quick) var(--ease-out),box-shadow var(--dur-quick) var(--ease-out)}.sketch-note::placeholder{color:var(--text-faint)}.sketch-note:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}.sketch-footer{display:flex;align-items:center;gap:16px;margin-top:28px}.sketch-convert-btn{flex:none;font:inherit;font-size:15px;font-weight:600;cursor:pointer;padding:12px 28px;color:#fff;background:var(--accent);border:1px solid var(--accent-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);transition:background var(--dur-quick) var(--ease-out),box-shadow var(--dur-quick) var(--ease-out),transform var(--dur-quick) var(--ease-out)}.sketch-convert-btn:hover{background:var(--accent-strong);box-shadow:var(--shadow-md);transform:translateY(-1px)}.sketch-convert-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.sketch-convert-btn:active{transform:translateY(0)}.sketch-toast{font-size:13.5px;color:var(--accent-strong);background:var(--accent-tint);border:1px solid var(--accent-soft);border-radius:var(--radius-pill);padding:6px 14px}@media (max-width: 880px){.sketch-scroll{padding:8px 24px 56px}.sketch-title{font-size:32px}.sketch-surface-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 560px){.sketch-surface-grid{grid-template-columns:1fr}.sketch-header{padding:40px 8px 20px}.sketch-footer{flex-direction:column;align-items:stretch}.sketch-convert-btn{width:100%}}.share-view{height:100%;overflow-y:auto;padding:28px 32px 48px;background:var(--bg)}.share-header{margin-bottom:22px}.share-title{margin:0 0 6px;font-family:var(--serif);font-size:26px;font-weight:600;letter-spacing:-.01em;color:var(--text-strong)}.share-subtitle{margin:0;display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:13.5px;color:var(--text-muted);line-height:1.55}.share-doc-name{font-weight:600;color:var(--text-strong)}.share-badge{font-size:10.5px;font-weight:600;letter-spacing:.02em;color:var(--accent-strong);background:var(--accent-tint);border:1px solid var(--accent-soft);border-radius:var(--radius-pill);padding:2px 9px}.share-section{margin-bottom:28px}.share-section-head{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}.share-section-title{margin:0;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-soft)}.share-section-note{font-size:12px;color:var(--text-faint)}.share-grid{display:grid;gap:14px}.share-grid-export{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}.share-grid-social{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.share-card{display:flex;align-items:center;gap:14px;text-align:left;font:inherit;cursor:pointer;padding:16px 18px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);transition:border-color var(--dur-quick) var(--ease-out),box-shadow var(--dur-quick) var(--ease-out),transform var(--dur-quick) var(--ease-out)}.share-card:hover:not(:disabled){border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(-2px)}.share-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.share-card:disabled{cursor:progress;opacity:.7}.share-card-glyph{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;font-size:18px;color:var(--accent-strong);background:var(--accent-tint);border:1px solid var(--accent-soft);border-radius:var(--radius-md)}.share-card-body{display:flex;flex-direction:column;gap:3px;min-width:0}.share-card-label{font-size:14.5px;font-weight:600;color:var(--text-strong)}.share-card-hint{font-size:12px;color:var(--text-muted);line-height:1.45}.share-tick-ok{color:var(--accent-strong)}.share-tick-err{color:#9c2a25}.share-social-button{display:flex;align-items:center;gap:12px;text-align:left;font:inherit;cursor:pointer;padding:14px 16px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);transition:border-color var(--dur-quick) var(--ease-out),box-shadow var(--dur-quick) var(--ease-out),background var(--dur-quick) var(--ease-out),transform var(--dur-quick) var(--ease-out)}.share-social-button:hover{border-color:var(--border-strong);box-shadow:var(--shadow-sm);transform:translateY(-1px)}.share-social-button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.share-social-button-ok{border-color:var(--accent);background:var(--accent-tint)}.share-social-button-err{border-color:#d8a3a0;background:#fbeceb}.share-social-icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;font-size:14px;font-weight:600;color:var(--text-muted);background:var(--bg-muted);border:1px solid var(--border-soft);border-radius:var(--radius-sm)}.share-social-button-ok .share-social-icon{color:var(--accent-strong);background:var(--bg-panel);border-color:var(--accent-soft)}.share-social-body{display:flex;flex-direction:column;gap:2px;min-width:0}.share-social-label{font-size:13.5px;font-weight:600;color:var(--text-strong)}.share-social-hint{font-size:11.5px;color:var(--text-muted);line-height:1.4}.share-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:72px 0;text-align:center}.share-empty-glyph{font-size:40px;color:var(--text-faint);line-height:1}.share-empty-text{margin:0;font-size:13.5px;color:var(--text-soft)}@media (prefers-color-scheme: dark){.share-social-button-err{border-color:#6e3b38;background:#2a1b1a}}.mem-view{height:100%;overflow-y:auto;padding:28px 32px 48px;background:var(--bg)}.mem-header{max-width:680px;margin:0 auto 24px}.mem-header-text{display:flex;flex-direction:column;gap:6px}.mem-title{margin:0;font-family:var(--serif);font-size:26px;font-weight:600;letter-spacing:-.015em;color:var(--text-strong)}.mem-subtitle{margin:0;max-width:560px;font-size:13.5px;line-height:1.6;color:var(--text-muted)}.mem-form{max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:18px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);padding:24px 24px 22px}.mem-field{display:flex;flex-direction:column;gap:5px}.mem-label{font-size:13px;font-weight:600;color:var(--text-strong)}.mem-hint{margin:0;font-size:12px;line-height:1.5;color:var(--text-soft)}.mem-input,.mem-textarea,.mem-select{margin-top:3px;width:100%;font:inherit;font-size:13.5px;color:var(--text);background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--radius);padding:9px 12px;transition:border-color var(--dur-quick) var(--ease-out),box-shadow var(--dur-quick) var(--ease-out)}.mem-textarea{resize:vertical;min-height:60px;line-height:1.55}.mem-select{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text-soft) 50%),linear-gradient(135deg,var(--text-soft) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}.mem-input::placeholder,.mem-textarea::placeholder{color:var(--text-faint)}.mem-input:focus,.mem-textarea:focus,.mem-select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}.mem-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:4px;padding-top:16px;border-top:1px solid var(--border-soft)}.mem-save-btn{font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;padding:9px 18px;color:#fff;background:var(--accent);border:1px solid var(--accent);border-radius:var(--radius);box-shadow:0 1px #b45a3b2e inset,var(--shadow-xs);transition:background var(--dur-quick) var(--ease-out),border-color var(--dur-quick) var(--ease-out)}.mem-save-btn:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.mem-save-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.mem-reset-btn{font:inherit;font-size:13px;font-weight:500;cursor:pointer;padding:9px 14px;color:var(--text-muted);background:transparent;border:1px solid var(--border-strong);border-radius:var(--radius);transition:border-color var(--dur-quick) var(--ease-out),color var(--dur-quick) var(--ease-out)}.mem-reset-btn:hover{color:var(--text);border-color:var(--text-soft)}.mem-saved{font-size:12.5px;font-weight:600;color:var(--accent-strong)}@media (max-width: 640px){.mem-view{padding:20px 16px 40px}.mem-form{padding:18px 16px}}:root{--bg: #ffffff;--bg-panel: #ffffff;--bg-subtle: #f5f6f8;--bg-muted: #eef0f3;--bg-elevated: #ffffff;--border: #e3e6ea;--border-strong: #cdd2da;--border-soft: #eef0f3;--text: #1a1a1a;--text-strong: #0d0d0d;--text-muted: #6b7280;--text-soft: #9aa1ab;--text-faint: #c2c7cf;--accent: #3b82f6;--accent-strong: #2f6fe0;--accent-soft: #cfe0fd;--accent-tint: #eef4fe;--accent-hover: #2f6fe0;--shadow-xs: 0 1px 0 rgba(28, 27, 26, .04);--shadow-sm: 0 1px 2px rgba(28, 27, 26, .05), 0 1px 3px rgba(28, 27, 26, .04);--shadow-md: 0 6px 24px rgba(28, 27, 26, .07), 0 2px 6px rgba(28, 27, 26, .04);--shadow-lg: 0 24px 60px rgba(28, 27, 26, .16), 0 8px 16px rgba(28, 27, 26, .07);--radius-xs: 4px;--radius-sm: 6px;--radius: 8px;--radius-md: 10px;--radius-lg: 12px;--radius-pill: 999px;--ease-out: cubic-bezier(.23, 1, .32, 1);--dur-quick: .12s;--dur-enter: .2s;--serif: "Source Serif 4", "Source Serif Pro", "Iowan Old Style", Georgia, serif;--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei UI", "PingFang SC", "Noto Sans", Roboto, "Helvetica Neue", Arial, sans-serif}@media (prefers-color-scheme: dark){:root{--bg: #0e0f11;--bg-panel: #17181b;--bg-subtle: #1c1d21;--bg-muted: #23252a;--bg-elevated: #1c1d21;--border: #2a2c31;--border-strong: #3a3d44;--border-soft: #212227;--text: #ededed;--text-strong: #ffffff;--text-muted: #9aa1ab;--text-soft: #6b7280;--text-faint: #4a4e56;--accent: #4d94ff;--accent-strong: #6ba6ff;--accent-soft: #16335c;--accent-tint: #172136;--accent-hover: #6ba6ff;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 1px 3px rgba(0, 0, 0, .2);--shadow-md: 0 6px 24px rgba(0, 0, 0, .4), 0 2px 6px rgba(0, 0, 0, .25);--shadow-lg: 0 24px 60px rgba(0, 0, 0, .6), 0 8px 16px rgba(0, 0, 0, .3)}}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--sans);font-size:14px;line-height:1.55;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.center{height:100%;display:flex;align-items:center;justify-content:center;padding:24px}.muted{color:var(--text-muted)}.small{font-size:12.5px}.error{color:#9c2a25}.register-card{max-width:380px;text-align:center;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:36px 32px}.register-card h2{margin:0 0 10px;font-family:var(--serif);font-size:22px;font-weight:600;letter-spacing:-.01em;color:var(--text-strong)}.register-card p{margin:0 0 22px;line-height:1.65}.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-weight:500;color:#fff;background:var(--accent);border:1px solid var(--accent);border-radius:var(--radius);padding:9px 18px;cursor:pointer;box-shadow:0 1px #2f6fe02e inset,var(--shadow-xs);transition:background var(--dur-quick) var(--ease-out),border-color var(--dur-quick) var(--ease-out)}.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.btn-primary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.workspace{display:grid;grid-template-columns:264px 1fr;height:100%;background:var(--bg)}.sidebar{display:flex;flex-direction:column;min-height:0;padding:16px 14px;gap:4px;background:var(--bg-panel);border-right:1px solid var(--border);overflow-y:auto}.brand{display:flex;align-items:center;gap:8px;font-family:var(--serif);font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--text-strong);padding:2px 4px 12px}.brand:before{content:"";width:9px;height:9px;border-radius:3px;background:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}.section-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-soft);padding:14px 4px 8px}.surface-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.surface-card{display:flex;flex-direction:column;gap:3px;text-align:left;font:inherit;cursor:pointer;padding:11px 12px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);transition:border-color var(--dur-quick) var(--ease-out),box-shadow var(--dur-quick) var(--ease-out),transform var(--dur-quick) var(--ease-out)}.surface-card:hover{border-color:var(--accent);box-shadow:var(--shadow-sm);transform:translateY(-1px)}.surface-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.surface-label{font-size:13.5px;font-weight:600;color:var(--text-strong)}.surface-hint{font-size:11px;color:var(--text-muted);line-height:1.35}.design-list{display:flex;flex-direction:column;gap:3px;flex:1;min-height:0}.design-item{display:flex;flex-direction:column;gap:3px;text-align:left;font:inherit;cursor:pointer;padding:9px 10px;background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);transition:background var(--dur-quick) var(--ease-out),border-color var(--dur-quick) var(--ease-out)}.design-item:hover{background:var(--bg-subtle)}.design-item.active{background:var(--accent-tint);border-color:var(--accent-soft)}.design-kind{align-self:flex-start;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--accent-strong);background:var(--accent-tint);border-radius:var(--radius-pill);padding:1px 8px}.design-item.active .design-kind{background:var(--bg-panel)}.design-title{font-size:13px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-badge{margin-top:10px;padding:8px 10px;font-size:11px;color:var(--text-soft);background:var(--bg-subtle);border:1px solid var(--border-soft);border-radius:var(--radius-sm);font-variant-numeric:tabular-nums}.section-head{display:flex;align-items:center;justify-content:space-between}.section-head .section-title{padding-right:0}.icon-btn{font:inherit;font-size:14px;line-height:1;cursor:pointer;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;color:var(--text-muted);background:transparent;border:1px solid var(--border);border-radius:var(--radius-sm);transition:background var(--dur-quick) var(--ease-out),color var(--dur-quick) var(--ease-out)}.icon-btn:hover{background:var(--bg-subtle);color:var(--accent-strong)}.canvas-toolbar{display:flex;align-items:center;gap:8px;padding:8px 14px;background:var(--bg-panel);border-bottom:1px solid var(--border)}.toolbar-title{margin-right:auto;font-size:13px;font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn-ghost{font:inherit;font-size:12.5px;cursor:pointer;padding:6px 12px;color:var(--text);background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-sm);transition:border-color var(--dur-quick) var(--ease-out),background var(--dur-quick) var(--ease-out)}.btn-ghost:hover{border-color:var(--accent);background:var(--bg-subtle)}.btn-ghost:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.canvas-area{position:relative;min-width:0;min-height:0;overflow:hidden;background:radial-gradient(circle at 1px 1px,rgba(28,27,26,.045) 1px,transparent 0);background-size:22px 22px;background-color:var(--bg);display:flex;flex-direction:column}.canvas-inner{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:24px;overflow:auto}.deck-stage{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.deck-frame{background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);overflow:hidden}.deck-nav{position:absolute;bottom:18px;left:50%;transform:translate(-50%);display:inline-flex;align-items:center;gap:10px;padding:6px 12px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-pill);box-shadow:var(--shadow-md);font-size:12.5px;color:var(--text-muted);font-variant-numeric:tabular-nums}.deck-nav button{font:inherit;cursor:pointer;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;color:var(--text);background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-sm);transition:background var(--dur-quick) var(--ease-out)}.deck-nav button:hover:not(:disabled){background:var(--bg-subtle)}.deck-nav button:disabled{opacity:.4;cursor:default}.doc-frame{width:100%;height:100%;max-width:1200px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);overflow:hidden}.canvas-empty{max-width:340px;text-align:center}.canvas-empty-title{font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:-.01em;color:var(--text-strong);margin-bottom:8px}.canvas-empty p{margin:0;line-height:1.6}.app-shell{display:grid;grid-template-rows:auto 1fr;height:100%;background:var(--bg)}.screen-back{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:13px;cursor:pointer;margin-bottom:16px;padding:5px 10px 5px 6px;color:var(--text-muted);background:transparent;border:none;border-radius:var(--radius-sm);transition:background var(--dur-quick) var(--ease-out),color var(--dur-quick) var(--ease-out)}.screen-back:hover{background:var(--bg-subtle);color:var(--accent-strong)}.screen-back-arrow{font-size:15px;line-height:1}.screen-back-sep{color:var(--border-strong)}.screen-back-title{font-weight:600;color:var(--text-strong)}.app-body{position:relative;min-width:0;min-height:0;overflow-y:auto;background:var(--bg)}.app-body.is-canvas{overflow:hidden}.app-body.is-canvas .canvas-area{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}.screen{max-width:1080px;margin:0 auto;padding:22px 24px 48px}.canvas-back{font:inherit;font-size:12.5px;cursor:pointer;padding:5px 11px;margin-right:4px;color:var(--text-muted);background:transparent;border:1px solid var(--border);border-radius:var(--radius-sm);transition:background var(--dur-quick) var(--ease-out),color var(--dur-quick) var(--ease-out)}.canvas-back:hover{background:var(--bg-subtle);color:var(--accent-strong)}