/* Shared card and navigation defaults inherit every bundled/custom theme. */
:root,[data-appearance-scope] {
  --card-space-1:4px;
  --card-space-2:8px;
  --card-space-3:12px;
  --card-space-4:16px;
  --card-inset:var(--card-space-3);
  --card-gap:var(--card-space-2);
  --card-surface-padding:var(--card-space-3);
  --card-surface-border:var(--surface-border,var(--border,var(--text-muted,currentColor)));
  --card-radius:calc(var(--radius-surface,8px) * 1.5);
  --card-surface-radius:calc(var(--card-radius) * .65);
  --card-surface-fill:var(--surface);
  --card-nested-fill:var(--surface-secondary);
  --tab-active-weight:700;
  --tab-active-size:1.08em;
  --view-divider:var(--border);
  --view-surface:var(--surface);
  --view-emphasis:var(--control-accent);
}
@layer components {
  /* Card membership must override navigation presentation rules. */
  [data-card-target][hidden] {display:none !important;}
  .card-shell,.card-chrome,.card-surface { box-sizing:border-box; min-width:0; }
  .card-shell { display:flex; flex-direction:column; gap:var(--card-gap); padding:0 var(--card-inset) var(--card-inset); --card-shell-fill:color-mix(in srgb,var(--gameplay-background) calc(var(--game-stage-opacity,.75) * 100%),transparent); border:1px solid var(--card-surface-border); border-radius:var(--card-radius); background:var(--card-shell-fill); box-shadow:var(--shadow); }
  .card-chrome { display:flex; align-items:center; justify-content:space-between; min-height:40px; padding:var(--card-space-1) 0; gap:var(--card-gap); flex:none; position:relative; z-index:2; }
  .card-chrome-label { flex:1; min-width:64px; }
  .card-actions,.card-shared-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; min-width:0; gap:var(--card-space-2); }
  .card-actions:empty,.card-shared-actions:empty { display:none; }
  .card-actions button { min-height:calc(var(--control-height,42px) * .714286); padding:var(--card-space-1) var(--card-space-2); font-size:calc(var(--text-meta) * var(--type-scale,1) * var(--card-text-compensation,1)); }
  .card-actions :is([data-game-size-toggle],[data-card-home]) { display:inline-grid; place-items:center; }
  .card-actions [data-card-home][hidden] {display:none;}
  .card-stack { display:grid; min-width:0; gap:var(--card-gap); }
  .card-surface { padding:var(--card-surface-padding); border:1px solid var(--card-surface-border); background:var(--card-surface-fill); border-radius:var(--card-surface-radius); }
  .card-surface--compact { padding-block:var(--card-space-2); }
  /* Nested regions retain a boundary; parent padding separates their borders. */
  .card-surface--nested { padding:var(--card-space-2); background:var(--card-nested-fill); }
  .mini-card-layer {position:fixed;inset:0;z-index:90;pointer-events:none;}
  .mini-card-layer>[hidden] {display:none;}
  .mini-card {position:fixed;width:960px;max-width:calc(100vw - 16px);max-height:min(600px,calc(100dvh - 16px));pointer-events:auto;cursor:grab;--card-text-compensation:1;container-type:inline-size;}
  .developer-console-card {width:880px;max-height:min(550px,calc(100dvh - 16px));}
  .mini-card [role=tabpanel][hidden] {display:none;}
  .song-analysis-card>.analysis-panel {display:flex;flex-direction:column;}
  .song-analysis-card [data-analysis-inspector]:not([hidden]) {display:flex;flex-direction:column;min-height:0;}
  .song-analysis-card .analysis-toolbar,.song-analysis-card .analysis-debug {flex:none;}
  .song-analysis-card .analysis-graphs {flex:0 1 300px;min-height:120px;}
  .mini-card .wb-layout {grid-template-columns:minmax(0,2fr) minmax(240px,1fr);gap:12px;}
  .mini-card .wb-note {max-width:75ch;}
  .mini-card .button-row {display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
  .mini-card .button-row button {min-height:calc(var(--control-height,42px) * .857143);padding:4px 10px;}
  .song-analysis-card [data-chart-workbench]>h2 {display:none;}
  .song-analysis-card .wb-controls {margin:8px 0;}
  .song-analysis-card .wb-editor .wb-note {margin-block:6px;}
  .song-analysis-card .wb-row {gap:8px;}
  .mini-card [data-developer-console] {display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start;}
  .mini-card [data-developer-console]>p {grid-column:1 / -1;max-width:80ch;}
  .mini-card [data-developer-console]>section,.mini-card [data-developer-console]>details {min-width:0;padding:12px;background:var(--card-nested-fill);border-radius:var(--card-surface-radius);}
  @container(max-width:700px) {.mini-card .wb-layout,.mini-card [data-developer-console] {grid-template-columns:minmax(0,1fr);}.analysis-toolbar {grid-template-columns:minmax(0,1fr);}}
  @container(max-width:440px) {.mini-card .tab-header {gap:4px;}.mini-card .tab-header button {padding-inline:6px;}}

  .mini-card>.card-surface {min-height:0;overflow:auto;overscroll-behavior:contain;}
  .mini-card.is-collapsed {width:fit-content;container-type:normal;padding-bottom:0;gap:0;}
  .mini-card .card-chrome-label {user-select:none;}
  .mini-card pre {white-space:pre-wrap;overflow-wrap:anywhere;font-size:calc(var(--text-helper) * var(--type-scale,1));}
  .mini-card canvas {max-width:100%;}
  .mini-card h2 {font-size:calc(1.15rem * var(--type-scale,1));}
  .mini-card h3 {font-size:calc(1rem * var(--type-scale,1));}
  .mini-card p,.mini-card li {font-size:calc(var(--text-meta) * var(--type-scale,1));line-height:1.5;}
  .mini-card [data-console-log] {max-height:180px;overflow:auto;padding-left:24px;}
  .mini-card .card-chrome { touch-action:none; }
  .mini-card .card-chrome-label { flex:1 0 96px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  .mini-card .card-surface { cursor:auto; touch-action:auto; }
  .mini-card .card-surface[hidden] { display:none; }
  .mini-card.is-dragging { cursor:grabbing; user-select:none; }
  .stage-card { position:relative; isolation:isolate; width:100%; max-width:var(--card-reference-width,1100px); margin-inline:auto; overflow:hidden; font-size:calc(1rem * var(--type-scale,1) * var(--card-text-compensation,1)); }
  .stage-card[hidden],.history-panel[hidden],[data-trackmaster-only][hidden] { display:none; }
  .card-navigation { display:flex; flex-wrap:wrap; min-width:0; max-width:100%; gap:4px; }
  .card-navigation [aria-pressed=true] { border-color:var(--view-emphasis); color:var(--view-emphasis); }
  .game-fit .stage-card { position:absolute; top:0; left:0; width:var(--normal-card-width); transform:scale(var(--card-scale)); transform-origin:top left; }
  .game-fit .stage-card[data-fixed-layout] { height:var(--card-reference-height); }
  .game-fit .game-stage-frame { width:var(--scaled-card-width); height:var(--scaled-card-height); }
  .view-header,.view-toolbar,.view-footer { display:flex; flex-wrap:wrap; align-items:center; gap:var(--card-gap); flex:none; }
  .view-header { justify-content:space-between; }
  .view-header h2 { margin:0; font-size:calc(1.15rem * var(--type-scale,1) * var(--card-text-compensation,1)); }
  .view-header [role=status] { color:var(--judgment-miss); font-size:calc(.8rem * var(--type-scale,1) * var(--card-text-compensation,1)); }
  .view-toolbar label { display:flex; align-items:center; gap:8px; font-size:calc(.8rem * var(--type-scale,1) * var(--card-text-compensation,1)); }
  .view-toolbar select,.view-toolbar input { min-height:calc(var(--control-height,42px) * .809524); padding:5px 8px; min-width:0; }
  .view-toolbar>span { margin-left:auto; color:var(--text-muted); font-size:calc(.75rem * var(--type-scale,1) * var(--card-text-compensation,1)); }
  .view-footer { justify-content:space-between; }
  .view-footer small { color:var(--text-muted); }
  .view-footer button { font-size:calc(.72rem * var(--type-scale,1) * var(--card-text-compensation,1)); padding:6px 10px; }
  .tab-header { display:flex; align-items:center; justify-content:center; gap:var(--card-space-4); flex:none; }
  .tab-header [role=tablist] { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; }
  .tab-header [role=tab] { border:0; border-radius:var(--radius-control,8px); background:transparent; color:var(--text-muted); padding:8px; }
  .tab-header [aria-selected=true] { color:var(--text); border-bottom:2px solid var(--view-emphasis); }
  .tab-header>button { white-space:nowrap; }
  .player-history { height:700px; color:var(--text); --history-control-height:calc(var(--control-height,42px) * .761905 * var(--card-text-compensation,1)); --history-control-padding:calc(var(--card-space-1) * var(--card-text-compensation,1)); }
  /* Match the approved Help card's semantic sizes and compact vertical chrome. */
  .player-history>.view-header,.player-history>.view-toolbar,.player-history>.view-footer,.player-history>#history-tabs { padding-block:var(--history-control-padding); }
  .player-history>.view-header h2 { font-size:calc(var(--text-section-heading) * var(--type-scale,1) * var(--card-text-compensation,1)); }
  .player-history .view-header [role=status],.player-history .view-toolbar>span,.player-history .view-footer small { font-size:calc(var(--text-meta) * var(--type-scale,1) * var(--card-text-compensation,1)); line-height:1.35; }
  .player-history .view-toolbar label { font-size:calc(var(--text-control) * var(--type-scale,1) * var(--card-text-compensation,1)); line-height:1.35; }
  .player-history button:where(:not([data-card-home],[data-game-size-toggle])),.player-history .view-toolbar select,.player-history .view-toolbar input:not([type=checkbox]) { font-size:calc(var(--text-control) * var(--type-scale,1) * var(--card-text-compensation,1)); min-height:var(--history-control-height); padding:var(--history-control-padding) var(--card-space-2); }
  /* Native fields center their text without adding height above the shared minimum. */
  .player-history .view-toolbar :is(select,input:not([type=checkbox])) { padding-block:0; }
  .player-history .view-toolbar select { height:max(var(--history-control-height),calc(1.15em + 2px)); }
  .player-history .tab-header { gap:var(--card-gap); font-size:calc(var(--text-control) * var(--type-scale,1) * var(--card-text-compensation,1)); }
  .player-history .tab-header button { min-height:var(--history-control-height); padding-block:var(--history-control-padding); }
  .player-history .tab-header [role=tablist] { flex-wrap:nowrap; min-width:0; overflow-x:auto; scrollbar-width:thin; padding-bottom:2px; }
  .player-history .tab-header [role=tab] { flex:none; white-space:nowrap; }
  .player-history .tab-header>button { flex:none; }
  .player-history .history-panel .card-surface { padding:var(--card-space-2); }
  .history-panel { min-height:0; flex:1; overflow:auto; overscroll-behavior:contain; }
  .history-metrics { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:var(--card-space-3) var(--card-space-4); margin:0 0 var(--card-gap); }
  .history-metrics div { min-width:0; display:flex; flex-direction:column; gap:var(--card-space-1); }
  .history-metrics dt { flex:1; font-size:calc(var(--text-body) * var(--type-scale,1) * var(--card-text-compensation,1)); color:var(--text-muted); line-height:1.35; }
  .history-metrics dd { margin:0; font-size:calc(var(--text-section-heading) * var(--type-scale,1) * var(--card-text-compensation,1)); line-height:1.2; font-variant-numeric:tabular-nums; }
  .history-overview { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(20rem * var(--type-scale,1) * var(--card-text-compensation,1))),1fr)); gap:var(--card-gap); }
  .history-panel h3 { font-size:calc(var(--text-section-heading) * var(--type-scale,1) * var(--card-text-compensation,1)); line-height:1.2; margin:0 0 var(--card-gap); }
  .history-panel h3:not(:first-child) { margin-top:var(--card-space-3); }
  .history-panel p { font-size:calc(var(--text-body) * var(--type-scale,1) * var(--card-text-compensation,1)); color:var(--text-muted); line-height:1.35; margin:0 0 var(--card-gap); }
  .history-panel p:last-child { margin-bottom:0; }
  .history-panel small,.history-runs time { font-size:calc(var(--text-meta) * var(--type-scale,1) * var(--card-text-compensation,1)); color:var(--text-muted); line-height:1.35; }
  .history-panel summary { font-size:calc(var(--text-section-heading) * var(--type-scale,1) * var(--card-text-compensation,1)); line-height:1.2; }
  .history-panel details[open]>summary { margin-bottom:var(--card-gap); }
  .history-table { width:100%; font-size:calc(var(--text-body) * var(--type-scale,1) * var(--card-text-compensation,1)); line-height:1.35; border-collapse:collapse; font-variant-numeric:tabular-nums; margin-bottom:var(--card-gap); }
  .history-table th,.history-table td { padding:var(--card-space-1); border-bottom:1px solid var(--view-divider); text-align:right; }
  .history-table th:first-child { text-align:left; }
  .history-table thead { color:var(--text-muted); }
  .history-song-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); height:100%; gap:var(--card-gap); }
  .history-song-browser { display:flex; flex-direction:column; min-height:0; }
  .history-song-browser .view-toolbar { padding:0 0 var(--card-gap); align-items:end; gap:var(--card-gap); }
  .history-song-browser .view-toolbar label { display:grid; gap:4px; }
  .history-search { flex:1; min-width:100px; }
  .history-search input { width:100%; }
  .history-song-list,.history-details { overflow:auto; overscroll-behavior:contain; min-height:0; }
  .history-details .history-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--card-space-3); padding-bottom:var(--card-space-3); border-bottom:1px solid var(--view-divider); }
  .history-details .history-metrics dd { font-size:calc(var(--text-section-heading) * var(--type-scale,1) * var(--card-text-compensation,1)); }
  .history-list-summary { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:var(--card-gap); font-size:calc(var(--text-body) * var(--type-scale,1) * var(--card-text-compensation,1)); padding:var(--history-control-padding) 0; }
  
  .player-history .history-song-row { display:flex; justify-content:space-between; width:100%; gap:var(--card-space-3); line-height:1.35; text-align:left; padding:calc(var(--card-space-2) * var(--card-text-compensation,1)) var(--card-space-2); background:transparent; border:0; border-radius:0; border-bottom:1px solid var(--view-divider); }
  .history-song-row>span { display:grid; min-width:0; gap:4px; }
  .history-song-row>span:last-child { flex-shrink:0; text-align:right; }
  .history-song-row strong { font-size:calc(var(--text-body) * var(--type-scale,1) * var(--card-text-compensation,1)); overflow-wrap:anywhere; }
  .history-song-row[aria-pressed=true] { background:color-mix(in srgb,var(--view-emphasis) 12%,var(--view-surface)); box-shadow:inset 3px 0 var(--view-emphasis); }
  .history-runs { list-style:none; padding:0; margin:0; }
  .history-runs li { padding:calc(var(--card-space-2) * var(--card-text-compensation,1)) 0; border-bottom:1px solid var(--view-divider); font-size:calc(var(--text-body) * var(--type-scale,1) * var(--card-text-compensation,1)); line-height:1.35; }
  .history-runs li>div { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--card-space-1) var(--card-gap); margin-bottom:var(--card-space-1); }
  .history-runs time { flex-shrink:0; }
  .history-runs strong { overflow-wrap:anywhere; }
  .history-empty { padding:12px 0; }
  .view-toolbar input[type=checkbox] { min-height:0; }
  @media(max-width:760px) {
    .game-main:not(.game-fit) .history-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .game-main:not(.game-fit) .history-overview,.game-main:not(.game-fit) .history-song-layout { grid-template-columns:minmax(0,1fr); }
    .game-main:not(.game-fit) .history-song-list { max-height:260px; }
    .game-main:not(.game-fit) .history-song-layout { height:auto; }
  }
}
/* Appearance owns the global input minimum outside component layers. */
.player-history .view-toolbar input:not([type=checkbox]) { min-height:var(--history-control-height); }
/* Typography stays theme-owned, with emphasis only on the selected tab. */
.tab-header [aria-selected=true] { font-weight:var(--tab-active-weight); font-size:var(--tab-active-size); }

/* Resize feedback grows glass outward, independently of the content geometry. */
@layer components {
  .mini-card { isolation:isolate;--resize-top:0px;--resize-right:0px;--resize-bottom:0px;--resize-left:0px; }
  .mini-card::before {content:'';position:absolute;inset:calc(-1px - var(--resize-top)) calc(-1px - var(--resize-right)) calc(-1px - var(--resize-bottom)) calc(-1px - var(--resize-left));border:1px solid var(--card-surface-border);border-radius:var(--card-radius);background:var(--card-shell-fill);clip-path:polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,calc(1px + var(--resize-left)) calc(1px + var(--resize-top)),calc(100% - 1px - var(--resize-right)) calc(1px + var(--resize-top)),calc(100% - 1px - var(--resize-right)) calc(100% - 1px - var(--resize-bottom)),calc(1px + var(--resize-left)) calc(100% - 1px - var(--resize-bottom)),calc(1px + var(--resize-left)) calc(1px + var(--resize-top)));pointer-events:none;z-index:-1;transition:inset 70ms ease-out;}
  .mini-card[data-resize-active]::before {transition-duration:140ms;}
  .mini-card[data-resize-active*="n"] {--resize-top:8px;}
  .mini-card[data-resize-active*="e"] {--resize-right:8px;}
  .mini-card[data-resize-active*="s"] {--resize-bottom:8px;}
  .mini-card[data-resize-active*="w"] {--resize-left:8px;}
  .card-resize-zone {position:absolute;z-index:3;touch-action:none;user-select:none;--resize-hit:22px;}
  .card-resize-zone:is([data-resize-zone=sw],[data-resize-zone=se],[data-resize-zone=nw],[data-resize-zone=ne]) {width:calc(var(--resize-hit) + var(--resize-left) + var(--resize-right));height:calc(var(--resize-hit) + var(--resize-top) + var(--resize-bottom));}
  .card-resize-zone[data-resize-zone*="n"] {top:calc(-4px - var(--resize-top));}
  .card-resize-zone[data-resize-zone*="s"] {bottom:calc(-4px - var(--resize-bottom));}
  .card-resize-zone[data-resize-zone*="w"] {left:calc(-4px - var(--resize-left));}
  .card-resize-zone[data-resize-zone*="e"] {right:calc(-4px - var(--resize-right));}
  .card-resize-zone:is([data-resize-zone=se],[data-resize-zone=nw]) {cursor:nwse-resize;}
  .card-resize-zone:is([data-resize-zone=sw],[data-resize-zone=ne]) {cursor:nesw-resize;}
  .card-resize-zone:is([data-resize-zone=n],[data-resize-zone=s]) {left:var(--resize-hit);right:var(--resize-hit);height:12px;cursor:ns-resize;}
  .card-resize-zone:is([data-resize-zone=e],[data-resize-zone=w]) {top:var(--resize-hit);bottom:var(--resize-hit);width:12px;cursor:ew-resize;}
  .mini-card.is-collapsed>.card-resize-zone {display:none;}
  .mini-card.is-resizing {user-select:none;}
  @media (any-pointer:coarse) {.card-resize-zone {--resize-hit:30px;}}
  html[data-reduced-motion=true] .mini-card::before {transition:none;}
}

/* Help uses readable semantic type sizes and one shared gap between surfaces. */
@layer components {
  .help-card {height:700px;color:var(--text);container-type:inline-size;}
  .help-panel {position:relative;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;overflow-wrap:anywhere;}
  .help-panel[hidden] {display:none;}
  .help-content-columns {columns:2;column-gap:var(--card-gap);}
  /* Each column flows independently; a taller neighbor never adds an empty gap. */
  .help-topic {min-width:0;break-inside:avoid-column;margin:0 0 var(--card-gap);padding:var(--card-space-2);}
  .help-topic:last-child {margin-bottom:0;}
  .help-topic--wide {column-span:all;}
  .help-panel h3,.help-topic>summary {font-size:calc(var(--text-section-heading) * var(--type-scale,1) * var(--card-text-compensation,1));line-height:1.2;margin:0 0 var(--card-gap);}
  .help-card>.view-header {padding-block:calc(var(--card-space-1) * var(--card-text-compensation,1));}
  .help-card>.view-header h2 {font-size:calc(var(--text-section-heading) * var(--type-scale,1) * var(--card-text-compensation,1));}
  .help-topic>summary {cursor:pointer;margin:0;}
  .help-topic[open]>summary {margin-bottom:var(--card-gap);}
  .help-panel :is(p,li,dt,dd) {font-size:calc(var(--text-body) * var(--type-scale,1) * var(--card-text-compensation,1));line-height:1.35;}
  .help-panel p {max-width:65ch;margin:0 0 8px;}
  .help-panel p:last-child {margin-bottom:0;}
  .help-list {margin:0;padding-left:20px;display:grid;gap:var(--card-space-1);color:var(--text-muted);}
  .help-facts {display:grid;gap:var(--card-space-1);margin:0;}
  .help-facts>div {display:grid;grid-template-columns:minmax(80px,.65fr) minmax(0,1.35fr);gap:12px;}
  .help-facts dt {color:var(--text);}
  .help-facts dd {margin:0;color:var(--text-muted);}
  .help-panel .help-note {margin-top:var(--card-gap);padding-top:var(--card-space-1);border-top:1px solid var(--card-surface-border);color:var(--text-muted);}
  .help-links {margin-top:var(--card-gap);}
  .help-panel button {font-size:calc(var(--text-control) * var(--type-scale,1) * var(--card-text-compensation,1));min-height:calc(var(--control-height,42px) * .761905 * var(--card-text-compensation,1));padding:calc(var(--card-space-1) * var(--card-text-compensation,1)) var(--card-space-2);}
  .help-workflow {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none;counter-reset:help-step;}
  .help-workflow>li {position:relative;counter-increment:help-step;}
  .help-workflow>li::before {content:counter(help-step,decimal-leading-zero);display:block;color:var(--text-muted);margin-bottom:8px;}
  .help-workflow>li:not(:last-child)::after {content:'→';position:absolute;right:-14px;top:50%;color:var(--text-muted);}
  .help-workflow button {width:100%;text-align:left;}
  .help-workflow p {margin:8px 0 0;}
  .help-play-layout {display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);gap:var(--card-gap);align-items:start;margin-bottom:var(--card-gap);}
  .help-mode-guide>h3:not(:first-child) {margin-top:var(--card-space-3);}
  .help-modes {margin-bottom:var(--card-gap);font-size:calc(var(--text-control) * var(--type-scale,1) * var(--card-text-compensation,1));}
  .help-card .tab-header {gap:var(--card-gap);}
  .help-card [data-help-tabs] {padding-block:calc(var(--card-space-1) * var(--card-text-compensation,1));}
  .help-card .tab-header button {min-height:calc(var(--control-height,42px) * .761905 * var(--card-text-compensation,1));padding-block:calc(var(--card-space-1) * var(--card-text-compensation,1));}
  .help-card .tab-header [role=tablist] {position:relative;flex-wrap:nowrap;justify-content:flex-start;min-width:0;overflow-x:auto;scrollbar-width:thin;padding-bottom:2px;}
  .help-card .tab-header [role=tab] {flex:none;white-space:nowrap;}
  .help-card .tab-header>button {flex:none;}
  .help-card [data-help-tabs] {font-size:calc(var(--text-control) * var(--type-scale,1) * var(--card-text-compensation,1));}
  .help-demo-viewport {position:relative;width:100%;height:300px;overflow:hidden;border-radius:var(--card-surface-radius);background:var(--gameplay-background);}
  .help-demo-canvas {position:absolute;left:50%;top:50%;transform-origin:center;--card-text-compensation:1;}
  .help-demo-caption {margin-block:var(--card-gap);}
  .help-example-label {display:block;font-size:calc(var(--text-meta) * var(--type-scale,1) * var(--card-text-compensation,1));color:var(--text-muted);margin-bottom:4px;}
  .help-panel [hidden] {display:none;}
  @container(max-width:760px) {
    .help-play-layout {grid-template-columns:minmax(0,1fr);}
    .help-content-columns {columns:1;}
    .help-workflow {grid-template-columns:repeat(2,minmax(0,1fr));}
    .help-workflow>li:nth-child(2)::after {display:none;}
    .help-card .tab-header {gap:4px;}.help-card .tab-header button {padding-inline:6px;}
  }
}
/* Fixed logical playfield dimensions; only the parent canvas is fitted. */
.help-demo-canvas>.steppin-stage {width:272px;height:480px;min-height:480px;}
.help-demo-canvas>.wayfarer-stage {width:800px;height:320px;min-height:320px;}
.help-demo-canvas>.slide-stage {width:340px;height:420px;min-height:420px;}