#surface-view[data-surface="expressive"] .expressive-studio{max-width:1400px;margin:auto;padding:20px;color:var(--skin-ink,var(--ink,#172f27));background:var(--skin-panel,var(--surface,#fff));overflow-wrap:anywhere}
.expressive-studio header{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}.expressive-studio h1{font-size:23px;margin:0 0 16px}.expressive-studio h2{font:600 14px/1.5 system-ui,sans-serif}


.expressive-studio button{font:inherit;padding:8px 12px;border:1px solid var(--skin-muted,#65766d);border-radius:8px;color:var(--skin-ink,var(--ink,#172f27));background:var(--skin-panel,var(--surface,#fff))}.expressive-studio button[aria-pressed="true"]{border:2px solid currentColor;font-weight:700}.expressive-studio :disabled{opacity:.6}
.expressive-previews{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}.expressive-previews>section{min-width:0}.expressive-previews .message{width:100%;box-sizing:border-box;margin:0;padding:18px;max-height:650px;overflow:auto;border:1px solid var(--skin-muted,#65766d);background:var(--skin-panel,var(--surface,#fff));color:var(--skin-ink,var(--ink,#172f27))}
.expressive-studio details{margin:12px 0;padding:10px;border:1px solid var(--skin-muted,#65766d);border-radius:8px}.expressive-studio summary{cursor:pointer;font-weight:600}.expressive-studio pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:560px;overflow:auto;background:var(--skin-page,var(--surface,#fff));color:var(--skin-ink,var(--ink,#172f27));padding:12px}.expressive-studio code{font:12px/1.6 ui-monospace,monospace;color:inherit;background:transparent}.expressive-studio a{color:var(--skin-link,var(--ink,#174d6a));text-decoration:underline}.expressive-studio [role="status"]{font-size:13px;min-height:1.5em}
@media(max-width:760px){.expressive-previews{grid-template-columns:1fr}.expressive-studio{padding:12px!important}}

.expressive-layout{display:grid;grid-template-columns:180px minmax(0,1fr);gap:20px;align-items:start}
.expressive-sidebar{position:sticky;top:12px;min-width:0;max-height:75vh;overflow:auto;color:var(--skin-ink,var(--ink,#172f27));background:var(--skin-panel,var(--surface,#fff))}
.expressive-sidebar h2{margin:0}.expressive-key-hint{font-size:12px;margin:4px 0 12px}
.expressive-sidebar nav{display:grid;gap:6px}.expressive-sidebar button{width:100%;min-width:0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:44px}
.expressive-sidebar button[aria-current=true]{background:var(--skin-ink,var(--ink,#172f27));color:var(--skin-panel,var(--surface,#fff));font-weight:700}
.expressive-sidebar button:focus-visible{outline:3px solid var(--skin-link,var(--ink,#174d6a));outline-offset:-3px}
.expressive-content{min-width:0}
@media(max-width:760px){.expressive-layout{grid-template-columns:104px minmax(0,1fr);gap:12px}.expressive-sidebar button{font-size:12px;padding:8px}.expressive-previews .message{padding:10px}}

.expressive-studio [hidden]{display:none!important}
.expressive-tabs{display:flex;gap:6px;margin:12px 0;border-bottom:1px solid var(--skin-muted,var(--ink,#172f27));padding-bottom:8px}
.expressive-tabs [aria-selected=true]{background:var(--skin-ink,var(--ink,#172f27));color:var(--skin-panel,var(--surface,#fff));font-weight:700}
.expressive-tabs button:focus-visible{outline:3px solid var(--skin-link,var(--ink,#174d6a));outline-offset:2px}

.expressive-process{color:var(--skin-ink,var(--ink,#172f27));background:var(--skin-panel,var(--surface,#fff));margin:16px 0 24px}
.expressive-process h2{font-size:20px}.expressive-process h3{font-size:16px;margin:22px 0 8px}.expressive-process p,.expressive-process li{line-height:1.65}.expressive-process ol{padding-left:24px}.expressive-process li{margin:12px 0}
.expressive-process figure{margin:20px 0}.expressive-process img{display:block;width:100%;max-width:520px;height:auto;border-radius:8px}.expressive-process figcaption{font-size:12px;line-height:1.5;margin-top:8px}

.expressive-content label{display:block;margin:14px 0;font-weight:600}.expressive-content :is(textarea,select){display:block;box-sizing:border-box;width:100%;min-width:0;margin-top:6px;padding:10px;color:var(--skin-ink,var(--ink,#172f27));background:var(--skin-page,var(--surface,#fff));border:1px solid var(--skin-muted,#65766d);font:13px/1.5 ui-monospace,monospace}.expressive-content textarea{resize:vertical}.expressive-content :disabled{opacity:.6}.expressive-tabs{flex-wrap:wrap}.expressive-legacy img{display:block;width:100%;max-width:520px;height:auto}

#expressive-preview-panel>figure{margin:24px 0}#expressive-preview-panel>figure img{display:block;width:100%;max-width:680px;height:auto}

/* Preview replacements must not become the browser’s page scroll anchor. */
#expressive-preview-panel{overflow-anchor:none}

.strategy-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.strategy-controls label{margin:6px 0}.strategy-controls span,.strategy-stage{font-size:12px}.strategy-controls input{max-width:130px}.strategy-previews>section{min-height:280px}.strategy-previews .message{min-height:200px}.strategy-stage{min-height:2.5em}.strategy-previews .decoration-status{display:none}

.strategy-previews .decoration-status:is([data-state=failed],[data-state=timed_out],[data-state=ready]){display:block}