/* Spark analysis v16. Shared analysis and board appearance for Play and Practice. AMBI decisions (re.md v15, reply 17.09): one engine-row style sitewide; icon buttons with tooltips below the board (option 1); interaction squares use muted gold corners; occupied-square markers stay at the upper right in either orientation; arrows show only the side to move. */

/* Engine row. */
.spark-engine { position: relative; min-width: 0; margin: 0 0 10px; border: 1px solid rgba(255, 236, 160, .16); border-radius: 11px; background: rgba(7, 17, 29, .34); }
.spark-engine-head { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 5px 8px 5px 12px; }
/* The engine toggle is white as the main control in the row. */
.spark-engine-switch { display: inline-flex; flex: none; align-items: center; gap: 9px; margin: 0; color: #FFFFFF; font: 800 .92rem/1.2 var(--font-sans); cursor: pointer; user-select: none; }
/* Remove the site form-label bottom margin that raised the slider by 4 px (AMBI). */
#play .spark-engine-switch, #position-lab .spark-engine-switch { margin: 0; }
.spark-engine-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
/* Large slider (AMBI): the row accommodates 48×28. */
.spark-engine-switch span { position: relative; flex: none; width: 48px; height: 28px; border-radius: 999px; background: #3B4A5E; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); transition: background 320ms var(--ease); }
.spark-engine-switch span::after { content: ''; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: #C9D3DE; transition: transform 320ms var(--ease), background 320ms var(--ease); }
.spark-engine-switch input:checked + span { background: #F4FAFF; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9); }
.spark-engine-switch input:checked + span::after { transform: translateX(20px); background: #1E2A38; }
.spark-engine-switch input:focus-visible + span { outline: 2px solid #8EC5FF; outline-offset: 2px; }
.spark-engine-eval { flex: none; min-width: 58px; color: #F4FAFF; font: 800 1.2rem/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.spark-engine-eval:empty { min-width: 0; }
/* Evaluation colors: green favorable, white equal, red unfavorable. Only the number uses light red for contrast on the dark background. */
.spark-engine-eval[data-tone="good"], .spark-engine-line b[data-tone="good"] { color: #63E69A; }
.spark-engine-eval[data-tone="neutral"], .spark-engine-line b[data-tone="neutral"] { color: #F4FAFF; }
.spark-engine-eval[data-tone="bad"], .spark-engine-line b[data-tone="bad"] { color: #FF8178; }
/* Engine state: badge beside the settings gear. */
.spark-engine-state {
  margin-left: auto; min-width: 0; overflow: hidden; padding: 4px 11px; border-radius: 999px; font: 850 .74rem/1.3 var(--font-sans);
  letter-spacing: .02em; white-space: nowrap; text-overflow: ellipsis; box-shadow: inset 0 0 0 1px rgba(6, 14, 26, .25);
}
.spark-engine-state[data-state="run"] { background: #63E69A; color: #06281A; }
.spark-engine-state[data-state="done"] { background: #7FD6FF; color: #06202E; }
/* v16: loading and startup use engine-row beige, avoiding a gold flash before green (AMBI). */
.spark-engine-state[data-state="preparing"] { background: linear-gradient(180deg, #FFF7E2 0%, #EFE3BC 100%); color: #1E2A38; }
.spark-engine-state[data-state="error"] { background: #D9463C; color: #FFFFFF; }
/* Analysis off needs no badge: the toggle and Analysis label suffice (AMBI). */
.spark-engine-state[data-state="off"] { display: none; }
.spark-engine-state[data-state="off"] ~ .is-gear { margin-left: auto; }
/* Row buttons match player controls (`.demo-control`): graphite, white icons, gold border on hover or while settings are open. Less blue (AMBI). */
.spark-engine-icon {
  position: relative; display: grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0; border: 1px solid #4A5163;
  border-radius: 9px; background: linear-gradient(#2B313D 0%, #1E2533 100%); color: #FFFFFF; cursor: pointer;
  box-shadow: inset 0 1px rgba(255,255,255,.14), 0 2px 0 rgba(0, 0, 0, .45); transition: filter 220ms var(--ease), border-color 220ms var(--ease);
}
.spark-engine-icon[hidden] { display: none; }
.spark-engine-icon svg { width: 20px; height: 20px; }
.spark-engine-icon .is-stroke { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.spark-engine-icon .is-fill { fill: currentColor; }
.spark-engine-icon:hover, .spark-engine-icon[aria-expanded="true"] { border-color: #C49A35; filter: brightness(1.12); }
.spark-engine-icon[aria-expanded="true"] { border-color: #FFD24D; }
.spark-engine-icon.is-close { width: 30px; height: 30px; }
/* The plus and settings buttons use the site's light beige selection color, as selected Play levels do, with dark icons for a warmer, more visible engine row. */
.spark-engine-icon.is-gear, .spark-engine-icon.is-extend {
  border-color: #FFF7E2; background: linear-gradient(180deg, #FFF7E2 0%, #F2E7C2 55%, #E2D5A8 100%); color: #1E2A38;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -2px 0 rgba(120, 100, 60, .28), 0 2px 0 rgba(4, 13, 26, .6);
}
.spark-engine-icon.is-gear:hover, .spark-engine-icon.is-extend:hover { border-color: #FFFFFF; }
.spark-engine-icon.is-gear[aria-expanded="true"] { border-color: #63E69A; box-shadow: inset 0 0 0 1px #63E69A, 0 2px 0 rgba(4, 13, 26, .6); }
.spark-engine-progress { height: 2px; margin: 0 12px; overflow: hidden; background: rgba(157, 213, 255, .15); }
.spark-engine-progress i { display: block; height: 100%; background: #63E69A; transform: scaleX(0); transform-origin: left; }
.spark-engine.is-preparing .spark-engine-progress i { width: 32%; background: #E2D5A8; animation: spark-engine-loading 1.15s ease-in-out infinite; }
@keyframes spark-engine-loading { from { transform: translateX(-120%); } to { transform: translateX(410%); } }
.spark-engine:not(.is-on) .spark-engine-progress, .spark-engine:not(.is-on) .spark-engine-lines { display: none; }
.spark-engine-lines { padding: 2px 0; }
.spark-engine-lines:empty { display: none; }
/* Divider between lines regardless of their count. */
.spark-engine-line { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 10px 0 12px; }
.spark-engine-line + .spark-engine-line { border-top: 1px solid rgba(255, 236, 160, .2); }
.spark-engine-line b { flex: none; width: 52px; font: 800 .84rem/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.spark-engine-moves { display: flex; flex: 1 1 auto; gap: 4px; min-width: 0; overflow: hidden; }
.spark-engine-pv {
  flex: none; width: var(--pv-width, auto); min-height: 24px; padding: 0 6px; border: 1px solid #FFF7E2; border-radius: 6px;
  background: linear-gradient(180deg, #FFF7E2 0%, #EFE3BC 100%); color: #1E2A38; font: 750 .78rem/1 var(--font-sans); white-space: nowrap; text-align: left; cursor: pointer;
  transition: background 200ms var(--ease), border-color 200ms var(--ease);
}
/* Variation move: selection beige, dark blue text (contrast ~13:1), emerald hover border. */
.spark-engine-pv:hover, .spark-engine-pv:focus-visible { border-color: #1FB866; background: #FFFFFF; box-shadow: inset 0 0 0 1px #1FB866; outline: 0; }
.spark-engine-pv[hidden] { display: none; }
.spark-engine-settings {
  position: absolute; z-index: 30; top: 50px; right: 0; width: 330px; padding: 12px 16px 14px;
  border: 1px solid rgba(255, 210, 77, .4); border-radius: 12px; background: #1E2533; box-shadow: 0 18px 40px rgba(0,0,0,.6);
  animation: spark-rise 260ms var(--ease) backwards;
}
.spark-engine-settings[hidden] { display: none; }
.spark-engine-settings-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.spark-engine-settings-head strong { color: #FFFFFF; font: 800 .9rem/1.2 var(--font-sans); }
.spark-engine-settings label { display: grid; grid-template-columns: minmax(max-content, 120px) 1fr 54px; align-items: center; gap: 10px; min-height: 38px; margin: 0; color: #F4FAFF; font: 700 .86rem/1.2 var(--font-sans); }
.spark-engine-settings input[type="range"] { width: 100%; accent-color: #63E69A; }
.spark-engine-settings output { color: #B5F5D1; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@keyframes spark-rise { from { opacity: 0; transform: translateY(-6px); } }
@keyframes spark-sheet { from { transform: translateY(100%); } }

/* Buttons below the board. */
/* One row: flip, move hints, interaction squares, navigation. Enabled toggles use the site's blue fill; disabled toggles are dark with a blue border; flip is a steel-colored tool. */
/* The section sets row padding and gaps: in Practice this row also appears in puzzles. */
.spark-board-tools { position: relative; display: flex; align-items: center; flex-wrap: wrap; }
.spark-tools-gap { flex: 1 1 auto; min-width: 8px; }
.spark-tool[hidden], .spark-tools-gap[hidden] { display: none; }
.spark-tool {
  position: relative; display: grid; place-items: center; flex: none; box-sizing: border-box; width: 44px; height: 42px; padding: 0;
  border-radius: 10px; cursor: pointer; transition: background 320ms var(--ease), color 320ms var(--ease), filter 220ms var(--ease);
}
.spark-tool svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.spark-tool svg .is-fill { fill: currentColor; stroke: none; }
.spark-tool.is-flip { border: 1px solid #3D4559; background: #1E2533; color: #FFFFFF; }
.spark-tool.is-flip:hover:not(:disabled) { border-color: #C49A35; }
/* Dark toggles match player buttons (AMBI: gold disrupted the board controls). Enabled: white icon and light border; disabled: muted icon. */
.spark-tool.is-toggle { border: 1px solid #3D4559; background: #1E2533; color: #6F7B8C; }
.spark-tool.is-toggle.is-on { border-color: #8C97A8; background: #1E2533; color: #FFFFFF; }
.spark-tool:hover:not(:disabled) { filter: brightness(1.12); }
.spark-tool:disabled { opacity: .42; cursor: not-allowed; }
.spark-tool:focus-visible { outline: 2px solid #FFD24D; outline-offset: 2px; }
/* Hover and focus tooltip; a text row replaces it on touch screens. */
.spark-tool[data-tip]::after, .spark-engine-icon[data-tip]::after {
  content: attr(data-tip); position: absolute; z-index: 40; left: 50%; bottom: calc(100% + 10px); transform: translate(-50%, 4px);
  padding: 6px 10px; border: 1px solid rgba(157, 213, 255, .5); border-radius: 8px; background: #1B2433; color: #F4FAFF;
  font: 700 .76rem/1.2 var(--font-sans); white-space: nowrap; pointer-events: none; opacity: 0;
  box-shadow: 0 8px 18px rgba(0,0,0,.5); transition: opacity 180ms var(--ease), transform 180ms var(--ease);
}
.spark-engine-icon[data-tip]::after { bottom: auto; top: calc(100% + 10px); transform: translate(-50%, -4px); }
@media (hover: hover) {
  .spark-tool[data-tip]:hover::after, .spark-engine-icon[data-tip]:hover::after { opacity: 1; transform: translate(-50%, 0); transition-delay: 350ms; }
}
.spark-tool[data-tip]:focus-visible::after, .spark-engine-icon[data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.spark-engine-icon[aria-expanded="true"]::after { opacity: 0 !important; }
.spark-tool-toast {
  position: absolute; z-index: 40; left: 50%; top: calc(100% + 8px); transform: translate(-50%, -4px); padding: 6px 12px;
  border: 1px solid rgba(99, 230, 154, .7); border-radius: 999px; background: #1B2433; color: #F4FAFF;
  font: 700 .8rem/1.2 var(--font-sans); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 220ms var(--ease), transform 220ms var(--ease);
}
.spark-tool-toast.is-shown { opacity: 1; transform: translate(-50%, 0); }

/* Interaction-square marker. */
/* Muted gold corners without borders (Codex style, AMBI decision). On light squares use a darker gold tone to preserve visibility. */
:root {
  --spark-field-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'%3E%3Cpath d='M8 30V8h22M70 8h22v22M92 70v22H70M30 92H8V70' stroke='%23FFD24D' stroke-width='5'/%3E%3C/svg%3E");
  /* Legend uses the same corner, thicker and opaque for clarity on a dark badge. */
  --spark-field-key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'%3E%3Cpath d='M8 36V8h28M64 8h28v28M92 64v28H64M36 92H8V64' stroke='%23FFD24D' stroke-width='13'/%3E%3C/svg%3E");
  --spark-field-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'%3E%3Cpath d='M8 30V8h22M70 8h22v22M92 70v22H70M30 92H8V70' stroke='%23B8860B' stroke-width='5'/%3E%3C/svg%3E");
}
.lab-square.lab-interaction-field::before {
  content: ''; position: absolute; inset: 3px; z-index: 3; pointer-events: none; opacity: .62;
  background: var(--spark-field-dark) center / 100% 100% no-repeat;
}
.lab-square.light.lab-interaction-field::before { background-image: var(--spark-field-light); opacity: .7; }
.lab-board-key .spark-field-key, .spark-field-key {
  display: inline-block; box-sizing: border-box; width: 14px; height: 14px; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  background: var(--spark-field-key) center / 100% 100% no-repeat !important; opacity: 1; transform: none !important;
}

/* Dragged piece stays above the board and follows the pointer without delay. */
.lab-piece.is-dragging { z-index: 9; transition: none !important; filter: drop-shadow(0 8px 8px rgba(0,0,0,.45)); }
/* On phones, gestures starting on occupied squares drag pieces; gestures starting on empty squares scroll the page. */
.position-lab:is([data-active-mode="analysis"], [data-active-mode="puzzle"]) #position-lab-board .lab-square[data-occupied="true"] { touch-action: none; }

/* Legend below the board. */
/* Shared by Play and Practice. Light semibold labels remain clear on the dark badge (AMBI). */
#play .play-key, #position-lab .lab-board-key { color: #F4FAFF; font-weight: 650; }
#play .play-key span, #position-lab .lab-board-key span { color: #F4FAFF; }
/* Center the content-width legend on the board; match the tools row width, with icons at its left edge and the player at its right (AMBI). `sparkAlignTools()` sets --spark-key-width. */
#play .play-key, #position-lab .lab-board-key { box-sizing: border-box; width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; }
#play .spark-board-tools, .position-lab[data-active-mode="analysis"] #lab-transport { box-sizing: border-box; width: var(--spark-key-width, 100%); max-width: 100%; margin-left: auto; margin-right: auto; }

/* Occupied-square marker with Black at the bottom. */
/* The whole board rotates for Black, moving a square's upper-right corner to the lower left under the piece. Position relative to the rotated square to keep the marker at the screen's upper right. */
.is-black .lab-square[data-occupied="true"] .lab-target-marker { right: auto; top: auto; left: 7%; bottom: 7%; }

/* Variation actions. */
/* Row below the selected side variation (Codex pattern, site colors): emerald Promote, red Delete from here. */
.spark-variation-actions {
  display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin: 4px 0 2px; padding: 5px 6px;
  border: 1px solid rgba(157, 213, 255, .35); border-radius: 8px; background: rgba(27, 36, 51, .92);
  color: #F4FAFF; font: normal 700 .8rem/1.3 var(--font-sans);
}
.spark-variation-actions span { flex: 1 1 auto; min-width: 0; color: #C7D4E2; }
/* ID prefix overrides Practice's `#lab-analysis-notation button`, which removes button backgrounds and borders. */
:is(#play-notation, #lab-analysis-notation) .spark-variation-actions button {
  flex: 0 0 auto; min-height: 28px; padding: 4px 8px; border-radius: 7px; font: 800 .78rem/1.1 var(--font-sans); cursor: pointer; white-space: nowrap;
  border: 1px solid rgba(157, 213, 255, .5); background: #294F69; color: #FFFFFF;
}
:is(#play-notation, #lab-analysis-notation) .spark-variation-actions button.is-main { border-color: #9BF3C4; background: #63E69A; color: #06281A; }
:is(#play-notation, #lab-analysis-notation) .spark-variation-actions button.is-danger { border-color: #F08A82; background: #D9463C; color: #FFFFFF; }
:is(#play-notation, #lab-analysis-notation) .spark-variation-actions button:hover { filter: brightness(1.1); }
/* v17: up/down buttons move a variation among siblings. v18: AMBI requested arrows three times larger for easier targeting. */
:is(#play-notation, #lab-analysis-notation) .spark-variation-actions button.is-step {
  /* v19: AMBI requested the same 28 px height as adjacent actions and 46 px width; elongated shaft and chevron tip in matching colors. v20 item 32: shaft and tip both 2.2 px thick, producing an up-arrow shape. */
  position: relative; min-width: 46px; min-height: 28px; padding: 0; color: transparent; font: 800 .78rem/1.1 var(--font-sans);
}
:is(#play-notation, #lab-analysis-notation) .spark-variation-actions button.is-step::before {
  content: ''; position: absolute; inset: 0; margin: auto; width: 14px; height: 18px; background: #FFFFFF;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 18'%3E%3Cpath d='M7 16.5V3.2' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M2.6 7.4 7 3l4.4 4.4' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 18'%3E%3Cpath d='M7 16.5V3.2' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M2.6 7.4 7 3l4.4 4.4' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
:is(#play-notation, #lab-analysis-notation) .spark-variation-actions button.is-step:is([data-analysis-action="down"], [data-variation-action="down"])::before { transform: rotate(180deg); }
/* Narrow Analyze column: four buttons in one row. */
#lab-analysis-notation .spark-variation-actions { gap: 4px; padding: 5px 4px; }
#lab-analysis-notation .spark-variation-actions button { padding: 4px 5px; }
#lab-analysis-notation .spark-variation-actions button.is-step { min-width: 46px; padding: 0; }
:is(#play-notation, #lab-analysis-notation) .spark-variation-actions button.is-off { opacity: .4; cursor: default; filter: none; }

@media (prefers-reduced-motion: reduce) {
  .spark-engine-settings, .spark-engine.is-preparing .spark-engine-progress i { animation: none; }
}

/* Narrow screens. */
@media (max-width: 520px) {
  /* Settings: full-width bottom sheet above the backdrop. */
  .spark-engine-settings { position: fixed; z-index: 60; left: 0; right: 0; top: auto; bottom: 0; width: auto; padding: 16px 20px calc(18px + env(safe-area-inset-bottom));
    border-radius: 16px 16px 0 0; box-shadow: 0 0 0 100vmax rgba(4, 10, 20, .6), 0 -10px 30px rgba(0,0,0,.5); animation: spark-sheet 260ms var(--ease) backwards; }
  .spark-engine-settings label { min-height: 48px; }
  .spark-engine-line b { width: 46px; }
  /* Engine row wraps to two rows: state badge entirely below the toggle, allowing labels of any length in any language. */
  .spark-engine-head { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; column-gap: 8px; row-gap: 6px; }
  .spark-engine-switch { grid-column: 1; grid-row: 1; }
  .spark-engine-eval { grid-column: 2; grid-row: 1; }
  .spark-engine-icon.is-extend { grid-column: 4; grid-row: 1; }
  .spark-engine-icon.is-gear { grid-column: 5; grid-row: 1; }
  .spark-engine-state { grid-column: 1 / -1; grid-row: 2; justify-self: start; max-width: 100%; margin-left: 0; }
  .spark-tool { width: 40px; }
}

/* v19: infinite analysis has no time bar because there is no duration to measure. */
.spark-engine.is-infinite .spark-engine-progress { visibility: hidden; }

/* v19: red circular close button matches phone dialogs (AMBI: consistent closing controls everywhere). */
.spark-engine-settings .spark-engine-icon.is-close { width: 36px; height: 36px; border: 2px solid rgba(255,255,255,.75); border-radius: 50%; background: #D23A4C; color: #FFFFFF; box-shadow: 0 3px 0 rgba(110,10,22,.6), 0 6px 14px rgba(0,0,0,.35); }
.spark-engine-settings .spark-engine-icon.is-close svg { width: 18px; height: 18px; }
.spark-engine-settings .spark-engine-icon.is-close .is-stroke { stroke: #FFFFFF; stroke-width: 2.6; }
.spark-engine-settings .spark-engine-icon.is-close:hover { border-color: #FFFFFF; filter: brightness(1.08); }
.spark-engine-settings .spark-engine-icon.is-close:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(110,10,22,.6), 0 3px 8px rgba(0,0,0,.3); }

/* v20: AMBI requested desktop settings above the panel with the Analysis overlay's depth and border: 2 px gold #FFD24D, top highlight, inner and outer shadows. Preserve background colors with a subtle gradient. Keep the phone sheet's existing dialog style. */
.spark-engine-settings { border:2px solid #FFD24D; border-radius:16px; background:linear-gradient(165deg, #28324A 0%, #1E2533 62%, #181E2A 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -18px 34px rgba(0,0,0,.28), 0 16px 42px rgba(0,0,0,.5); }
/* v20: AMBI requested the infinity symbol sized consistently with time values on desktop and phone. */
.spark-engine-settings output.is-infinity { font-size:1.6em; line-height:.7; font-weight:700; }
/* v20 (2): AMBI requested desktop settings close button to match phone size. */
.spark-engine-settings .spark-engine-icon.is-close { width:34px; height:34px; }
.spark-engine-settings .spark-engine-icon.is-close svg { width:16px; height:16px; }

/* v20 (2): AMBI requested solid up/down arrows: broad tips and rectangular stems as on phones. */
:is(#play-notation, #lab-analysis-notation) .spark-variation-actions button.is-step::before { width:17px; height:17px;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.2 15.2 8.6H12.3V14.8H3.7V8.6H.8Z'/%3E%3C/svg%3E") center / contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.2 15.2 8.6H12.3V14.8H3.7V8.6H.8Z'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Label follows the solid arrow; button content sets the width. */
:is(#play-notation, #lab-analysis-notation) .spark-variation-actions button:is(.is-step, .is-main) { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
:is(#play-notation, #lab-analysis-notation) .spark-variation-actions button.is-step { min-width: 0; padding: 4px 8px; color: #FFFFFF; }
#lab-analysis-notation .spark-variation-actions button.is-step { min-width: 0; padding: 4px 5px; }
:is(#play-notation, #lab-analysis-notation) .spark-variation-actions button:is(.is-step, .is-main)::before {
  content: ''; position: static; inset: auto; margin: 0; flex: 0 0 16px; width: 16px; height: 16px; background: currentColor;
}
:is(#play-notation, #lab-analysis-notation) .spark-variation-actions button.is-step:is([data-analysis-action="down"], [data-variation-action="down"])::before {
  transform: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 14.8 15.2 7.4H12.3V1.2H3.7V7.4H.8Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 14.8 15.2 7.4H12.3V1.2H3.7V7.4H.8Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
:is(#play-notation, #lab-analysis-notation) .spark-variation-actions button.is-main::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 .6 14.4 6.2H11.9L15.2 9.6H12.3V15.2H3.7V9.6H.8L4.1 6.2H1.6Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 .6 14.4 6.2H11.9L15.2 9.6H12.3V15.2H3.7V9.6H.8L4.1 6.2H1.6Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* v20 (2): AMBI requested a tick at each allowed slider value beneath the track; endpoint ticks align with the thumb center. Shared desktop and phone rule. */
.spark-engine-settings input[type="range"] { height:24px; background:repeating-linear-gradient(90deg, rgba(234,247,255,.6) 0 1.5px, transparent 1.5px calc((100% - 1.5px) / var(--steps, 1))) 7.25px 100% / calc(100% - 14.5px) 6px no-repeat; }