#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}

.expressive-failures{margin:8px 0 24px;color:var(--skin-ink,var(--ink,#172f27));background:var(--skin-panel,var(--surface,#fff))}.expressive-failures h2{font-size:18px;margin:0 0 6px}.expressive-failures p{font-size:13px;line-height:1.5;margin:0 0 10px}
.expressive-failures table{border-collapse:collapse;width:100%;font-size:13px;line-height:1.45;margin:0 0 14px;color:inherit;background:inherit}.expressive-failures th,.expressive-failures td{overflow-wrap:break-word;text-align:left;vertical-align:top;padding:6px 8px;border-bottom:1px solid var(--skin-muted,#65766d)}.expressive-failures th{font-weight:600;white-space:nowrap}
.expressive-failures ul{margin:0;padding-left:16px}.expressive-failures li{margin:2px 0}.expressive-failures-scroll{max-height:420px;overflow:auto;margin:0 0 14px}.expressive-failures-scroll table{margin:0}.expressive-failures [data-failure-counts]{min-width:420px}.expressive-failures [data-failure-recent]{min-width:720px}

/* Outcome trend for the no-validator experiment. Status colors always carry a text label. */
.expressive-failures{--outcome-decorated:#0ca30c;--outcome-partial:#fab219;--outcome-failed:#d03b3b;--outcome-plain:#8a8986}
.expressive-outcome-legend{display:flex;flex-wrap:wrap;gap:6px 16px}.expressive-outcome-legend>span{display:inline-flex;align-items:center;gap:6px}
.expressive-outcome-swatch{display:inline-block;width:10px;height:10px;border-radius:2px}
.expressive-outcomes{list-style:none;margin:0 0 16px;padding:0;font-size:12px;line-height:1.4}
.expressive-outcomes li{display:grid;grid-template-columns:84px minmax(80px,1fr) minmax(0,1.6fr);gap:10px;align-items:center;margin:0 0 6px}
.expressive-outcome-track{display:block;min-width:0}
.expressive-outcome-bar{display:flex;gap:2px;height:12px;min-width:4px}
.expressive-outcome-bar>span{display:block;min-width:2px;border-radius:2px}
:is(.expressive-outcome-bar>span,.expressive-outcome-swatch)[data-decoration-outcome="decorated"]{background:var(--outcome-decorated)}
:is(.expressive-outcome-bar>span,.expressive-outcome-swatch)[data-decoration-outcome="partial"]{background:var(--outcome-partial)}
:is(.expressive-outcome-bar>span,.expressive-outcome-swatch)[data-decoration-outcome="failed"]{background:var(--outcome-failed)}
:is(.expressive-outcome-bar>span,.expressive-outcome-swatch)[data-decoration-outcome="plain"]{background:var(--outcome-plain)}
@media(max-width:760px){.expressive-outcomes li{grid-template-columns:72px minmax(0,1fr)}.expressive-outcomes li>span:last-child{grid-column:1/-1}}
@media(forced-colors:active){.expressive-outcome-bar>span,.expressive-outcome-swatch{background:CanvasText!important}}