.doc-editor{color:var(--text);font-family:inherit;max-width:1700px;margin:auto}.doc-editor *{box-sizing:border-box}.doc-editor h1{font-size:1.35rem;letter-spacing:-.025em;line-height:1.25;margin:0}.doc-editor h2{font-size:.9rem;margin:0 0 16px}.doc-editor h3,.doc-editor h4{font-size:.9rem;margin:18px 0 10px}.doc-editor p,.doc-help{font-size:.8rem;color:var(--text-soft);line-height:1.5;margin:0 0 16px;max-width:70ch}.doc-editor-heading{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:20px}.doc-title{display:flex;align-items:center;gap:16px}.doc-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.doc-actions [role=status]{font-size:.75rem;color:var(--text-soft);margin-right:8px}.doc-editor .pos-button{min-height:44px;touch-action:manipulation}.doc-options{display:flex;gap:16px;align-items:center;padding:14px 0;margin-bottom:18px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.doc-options .pos-field{margin:0;min-width:100px}.doc-options select,.doc-options input{min-height:44px}.doc-options input{max-width:110px}.doc-example-label{font-size:.75rem;color:var(--text-soft);margin-left:auto;text-align:right}.doc-page-settings{position:relative;font-size:.8rem}.doc-page-settings summary{min-height:44px;display:flex;align-items:center;cursor:pointer;padding:10px;border-radius:8px}.doc-page-settings[open]>.pos-field{position:absolute;top:50px;z-index:6;padding:14px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 20px rgba(0,0,0,.12)}.doc-workbench{display:grid;grid-template-columns:164px minmax(0,1fr) 252px;gap:24px;align-items:start}.doc-palette,.doc-properties{min-width:0}.doc-palette{padding:12px 0}.doc-component{width:100%;display:flex;gap:8px;align-items:center;text-align:left;border:0;border-bottom:1px solid var(--border);border-radius:0;padding:14px 0;background:transparent;color:var(--text);font:inherit;cursor:pointer;min-height:64px;touch-action:manipulation}.doc-component:hover{background:var(--surface-hover)}.doc-component:active{background:var(--surface-hover)}.doc-component>svg{flex:none}.doc-component span{flex:1;min-width:0}.doc-component strong{display:block;font-size:.8rem}.doc-component small{display:block;font-size:.72rem;line-height:1.4;color:var(--text-soft);margin-top:4px}.doc-component:disabled{opacity:.55;cursor:default}.doc-palette>.doc-help{margin-top:16px}.doc-canvas-panel{min-width:0}.doc-canvas-panel>header{display:flex;justify-content:space-between;gap:10px;margin-bottom:12px;font-size:.72rem;color:var(--text-soft)}.doc-canvas{max-height:78vh;overflow:auto;min-height:400px;border-radius:12px;background:var(--surface-subtle,var(--surface));padding:28px 16px;scrollbar-color:var(--text-soft) transparent}.doc-paper-frame{margin:auto;position:relative}.doc-paper{transform-origin:top left}.doc-properties{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px}.doc-properties h3{margin-top:0;margin-bottom:18px}.doc-properties fieldset{border:0;padding:0;margin:0;min-width:0}.doc-properties textarea{resize:vertical;line-height:1.5;min-height:140px}.doc-properties input,.doc-properties select{min-height:44px}.doc-style-options{display:grid;grid-template-columns:1fr;gap:10px;align-items:center}.doc-check{display:flex;align-items:center;gap:10px;font-size:.8rem;line-height:1.4;margin:12px 0;min-height:44px;cursor:pointer}.doc-check input{accent-color:var(--brand-primary);width:20px;height:20px;min-height:20px}.doc-markdown-tools,.doc-tokens,.doc-move{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 18px}.doc-markdown-tools button,.doc-tokens button,.doc-tool-tabs button{font:inherit;font-size:.8rem;color:var(--text);border:1px solid var(--border);border-radius:8px;background:var(--surface);min-height:44px;min-width:44px;padding:8px 10px;cursor:pointer;touch-action:manipulation}.doc-move>*{flex:1}.doc-advanced,.doc-token-options{border-top:1px solid var(--border);margin:16px 0}.doc-advanced summary,.doc-token-options summary{font-size:.8rem;font-weight:600;min-height:48px;padding:14px 0;cursor:pointer}.doc-advanced[open]>.pos-field{margin-top:12px}.doc-editor :focus-visible{outline:2px solid var(--brand-primary);outline-offset:3px}.doc-editor ::selection{background:var(--brand-primary);color:var(--brand-on-primary)}.doc-editor input{caret-color:var(--brand-primary)}.doc-loading{height:320px;background:var(--surface);padding:24px;border-radius:12px}.doc-editor [data-doc-action=remove]{color:var(--danger);width:100%}.doc-inspector-empty{padding:28px 0 12px}.doc-inspector-empty>svg{width:28px;height:28px;color:var(--text-soft);margin-bottom:18px}.doc-inspector-empty h3{font-size:1rem;line-height:1.35;margin-bottom:10px}.doc-tool-tabs{display:none}
@media(max-width:1200px){.doc-workbench{grid-template-columns:140px minmax(0,1fr) 230px;gap:14px}.doc-options{gap:12px}.doc-editor-heading{align-items:start}.doc-title{display:block}.doc-title h1{margin-top:10px}}
@media(max-width:900px){.doc-workbench{grid-template-columns:minmax(0,1fr) 235px}.doc-palette{grid-column:1/-1}.doc-palette [data-doc-palette]{display:flex;gap:20px;flex-wrap:wrap}.doc-component{width:180px;border-bottom:0}.doc-palette h2,.doc-palette>.doc-help{display:none}.doc-options{flex-wrap:wrap}.doc-example-label{width:100%;text-align:left;margin:0}.doc-actions [role=status]{width:100%}}
@media(max-width:620px){.doc-editor-heading{display:block;margin-bottom:14px}.doc-title{display:flex}.doc-title h1{font-size:1.15rem;margin:0}.doc-actions{margin-top:14px;display:grid;grid-template-columns:auto 1fr 1fr}.doc-actions [role=status]{grid-column:1/-1}.doc-options{gap:12px;margin-bottom:12px}.doc-options .pos-field{flex:1;min-width:110px}.doc-example-label{font-size:.7rem}.doc-tool-tabs{display:flex;gap:6px;margin-bottom:14px}.doc-tool-tabs button{flex:1}.doc-tool-tabs [aria-pressed=true]{background:var(--brand-primary);color:var(--brand-on-primary);border-color:var(--brand-primary)}.doc-workbench{grid-template-columns:1fr}.doc-palette,.doc-properties{display:none}.doc-editor[data-tool=elements] .doc-palette,.doc-editor[data-tool=properties] .doc-properties{display:block;grid-row:1}.doc-palette [data-doc-palette]{display:grid;grid-template-columns:1fr 1fr;gap:12px}.doc-component{width:100%;min-height:70px}.doc-component>svg:last-child{display:none}.doc-canvas{max-height:65vh;min-height:300px;padding:24px 16px}.doc-canvas-panel>header{flex-wrap:wrap}.doc-properties textarea{min-height:100px}.doc-properties form{max-height:45vh;overflow:auto;padding:0 4px}.doc-editor[data-tool=properties] .doc-properties h2{display:none}}
.workspace:has(.doc-editor){width:100%;padding-left:24px;padding-right:24px}.doc-view-tools{display:flex;align-items:center;gap:12px}.doc-view-tools select{min-height:44px;min-width:88px;padding:8px;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:8px;font:inherit}.doc-canvas-panel>header{align-items:center}.doc-editor-heading h1{flex:none}
.doc-inspector-done{display:none}
.doc-document-settings>summary{display:none}.doc-document-settings:not([open])>.doc-options{display:flex}.doc-add-tools>summary{display:flex;align-items:center;gap:8px;min-height:48px;font-size:.8rem;font-weight:650;cursor:pointer;border-bottom:1px solid var(--border);margin-bottom:12px}.doc-layer-list{display:grid;gap:3px;margin-top:14px}.doc-layer{display:flex;gap:10px;align-items:center;width:100%;min-height:44px;padding:8px;border:0;border-radius:8px;background:transparent;color:var(--text);font:inherit;font-size:.78rem;text-align:left;cursor:pointer;touch-action:manipulation}.doc-layer span{min-width:0}.doc-layer svg{flex:none}.doc-layer small{display:block;color:var(--text-soft);font-size:.7rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:130px}.doc-layer:hover{background:var(--surface-hover)}.doc-layer.selected{background:var(--surface-hover);font-weight:700}.doc-add-tools:not([open]) .doc-component{display:none}
@media(max-width:620px){.workspace:has(.doc-editor){padding-left:16px;padding-right:16px}.doc-view-tools{width:100%;justify-content:space-between}}
@media(max-width:620px){.doc-editor[data-tool=properties] .doc-properties{position:fixed;left:0;right:0;bottom:0;z-index:25;border-radius:16px 16px 0 0;padding:16px 20px;max-height:48dvh;box-shadow:0 -8px 30px rgba(0,0,0,.15)}.doc-editor[data-tool=properties] .doc-properties h2{display:block;margin-bottom:12px;padding-right:70px}.doc-inspector-done{display:block;position:absolute;top:8px;right:16px}.doc-properties form{max-height:34dvh}.doc-properties h3{margin:0 0 12px}}
@media(max-width:620px){.doc-title{gap:12px}.doc-editor-heading{margin-bottom:8px}.doc-actions{margin-top:8px;grid-template-columns:auto 1fr 1fr}.doc-actions [role=status]{font-size:.68rem;grid-column:1/-1}.doc-document-settings{border-bottom:1px solid var(--border);margin-bottom:10px}.doc-document-settings>summary{display:list-item;min-height:44px;padding:12px 0;font-size:.8rem;font-weight:600;cursor:pointer}.doc-document-settings:not([open])>.doc-options{display:none}.doc-options{padding-top:8px;margin-bottom:12px;border:0}.doc-example-label{display:none}.doc-tool-tabs{margin-bottom:10px}.doc-canvas-panel>header>[data-doc-preview-state]{display:none}.doc-canvas-panel>header{margin-bottom:8px}.doc-view-tools{font-size:.7rem}.doc-palette [data-doc-palette]{display:block}.doc-layer-list{grid-template-columns:1fr 1fr;gap:6px}.doc-layer{min-height:48px;background:var(--surface);border:1px solid var(--border)}.doc-layer.selected{border-color:var(--brand-primary)}.doc-canvas{padding-top:16px}}
@media(prefers-reduced-motion:reduce){.doc-editor *{transition:none!important}}
@media(max-width:620px){.workspace:has(.doc-editor){padding-top:16px}.doc-actions [role=status]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.doc-canvas-panel>header{margin-bottom:4px}}
.doc-hit{touch-action:pan-y}.doc-editor [aria-busy=true]{cursor:progress}.doc-actions .ui-icon-action{flex:none}.doc-actions .ui-icon-action.primary{width:48px!important}
@media(max-width:620px){.doc-actions{display:flex;justify-content:flex-end;gap:8px}.doc-actions .ui-icon-action{width:44px!important}}