/* EMBED BUILD. This file is the rubiks-shapes prototype, which shipped with a
     dev toolbar and its own page background. Neither belongs inside the hero, so
     both are removed here rather than in the prototype, which stays untouched as
     the reference. */
  #cube-runtime-root{height:100%;}
  #controls{display:none!important;}
  #stage{width:100vw!important;height:100vh!important;}
  /* With the sidebar open the stage is the REMAINING content area, so the
     renderer centers the cube in the visible space, not the full window. */
  html.controls-on #stage{width:calc(100vw - 956px)!important;}
  #fadeoverlay{display:none!important;}
  html,body{background:var(--cube-bg)!important;overflow:hidden;}

  /* Match the landing-page ground (--bg: #F3F3F1) in both the standalone and
     controls views so the cube is always judged on the surface it sits on. */
  html, body { margin: 0; height: 100%; overflow: hidden; background: var(--cube-bg); }
  html.controls-on, html.controls-on body { background: var(--cube-bg) !important; }
  /* Sidebar "black bg": paints only the page ground behind the cube.
     Declared after the controls-on ground so it wins when checked. */
  html.blackbg, html.blackbg body { background: #000000 !important; }
  #landing-wrapper{position:fixed;inset:0;z-index:18;pointer-events:none;}
  html.controls-on #landing-wrapper{right:956px;}
  #landing-wrapper[hidden]{display:none!important;}
  html:not(.controls-on) #stage{transform:translateY(var(--cube-anchor-shift,-12vh));}
  html:not(.controls-on) #stage canvas{
    transform:scale(0.8);transform-origin:center center;
  }
  #sbtransportfullreset {
    display: none;
    position: fixed;
    left: 6px;
    bottom: 6px;
    z-index: 2147483647;
    border: 1px solid #b94b4b;
    border-radius: 4px;
    background: #e8a3a3;
    color: #591818;
    padding: 3px 6px;
    font: 11px/1 system-ui, sans-serif;
    cursor: pointer;
  }
  #sbtransportfullreset:hover { background: #dc8585; }
  #app { display: flex; flex-direction: column; height: 100%; }
  #controls {
    box-sizing: border-box;
    background: #ffffff;
    border-bottom: 1px solid #4a4f4c; /* hairline divider, dark grey */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
  }
  #controls .row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; align-items: center; }
  #stage { flex: 1; position: relative; }
  #stage canvas { display: block; }
  #fps-hud {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 30;
    display: none;
    align-items: stretch;
    gap: 4px;
  }
  html.controls-on #fps-hud { display: flex; }
  .fps-chip {
    box-sizing: border-box;
    padding: 3px 6px;
    border: 1px solid #68706c;
    border-radius: 4px;
    background: rgba(243, 243, 241, 0.9);
    color: #303735;
    font: 11px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  }
  #fps-meter { display: none; pointer-events: none; }
  html.show-fps #fps-meter { display: block; }
  #debug-hover-toggle {
    width: 21px;
    min-width: 21px;
    padding: 3px;
    cursor: pointer;
  }
  #debug-hover-toggle[aria-pressed="true"] {
    background: #303735;
    color: #f3f3f1;
  }
  #debug-label-overlay {
    display: none;
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 80;
    max-width: 300px;
    box-sizing: border-box;
    padding: 5px 7px;
    border: 0;
    background: transparent;
    color: #202623;
    font: 15px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    overflow-wrap: anywhere;
    pointer-events: none;
  }
  html.debug-labels #debug-label-overlay.visible { display: block; }
  html.debug-labels #stage canvas { cursor: default !important; }
  #debug-highlight-labels {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 79;
    pointer-events: none;
    overflow: hidden;
  }
  #debug-cell-leader {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  #debug-cell-leader line { stroke: #ef2d24; stroke-width: 3; }
  html.debug-labels #debug-highlight-labels.visible { display: block; }
  #debug-highlight-labels span {
    position: absolute;
    padding: 2px 4px;
    border-radius: 2px;
    font: 800 13.5px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
    box-shadow: 0 1px 5px rgba(0,0,0,.28);
    white-space: nowrap;
    transform: translate(-50%, calc(-100% - 2px));
  }
  #debug-highlight-labels .flat { opacity: .75; transform: translate(-50%, -50%); }
  #debug-highlight-labels .cell-label {
    opacity: 1;
    transform: translate(-50%, calc(-100% - 34px));
  }
  .btn {
    font: 16px/1 system-ui, sans-serif;
    color: #343b3a;
    background: transparent;
    border: 1px solid #95a199;
    border-radius: 6px;
    width: 34px;
    height: 30px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .btn:hover { background: rgba(0,0,0,0.05); }
  .toggle {
    font: 12px/1 system-ui, sans-serif;
    color: #343b3a;
    background: transparent;
    border: 1px solid #95a199;
    border-radius: 6px;
    height: 26px;
    padding: 0 10px;
    cursor: pointer;
  }
  .toggle:hover { background: rgba(0,0,0,0.05); }
  .toggle.active { background: #343b3a; color: #e7edea; border-color: #343b3a; }
  .mode-item { display: flex; align-items: center; gap: 4px; }
  .incl {
    width: 13px;
    height: 13px;
    accent-color: #343b3a;
    cursor: pointer;
  }
  .sliderbox {
    display: flex;
    align-items: center;
    gap: 5px;
    font: 12px/1 system-ui, sans-serif;
    color: #343b3a;
  }
  .anim-group {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 6px;
    border: 1px solid #d8ded9;
    border-radius: 6px;
    font: 11px/1 system-ui, sans-serif;
    color: #6b736f;
  }
  .stepper { display: inline-flex; align-items: center; gap: 3px; }
  .stepper .step {
    width: 18px;
    height: 18px;
    font: 12px/1 system-ui, sans-serif;
    color: #343b3a;
    background: transparent;
    border: 1px solid #95a199;
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .stepper .step:hover { background: rgba(0,0,0,0.05); }
  .stepper .stepval {
    min-width: 14px;
    text-align: center;
    font: 12px/1 system-ui, sans-serif;
    color: #343b3a;
  }
  .sliderbox input[type="range"] { width: 90px; accent-color: #343b3a; }
  .sliderbox .val { min-width: 34px; text-align: left; }

  /* Sidebar (2026-08-04). Live tuning controls, shown only when the page is
     asked for them via ?controls=on — the embed stays chromeless. Overlaid
     (fixed) rather than in-flow so turning it on never re-lays-out the
     stage the host sized. Flush against the window's right edge — no margin
     and no border on the edges it touches, only a left hairline. */
  #sidebar {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    width: 956px;
    box-sizing: border-box;
    background: #ffffff;
    border-left: 1px solid #d8ded9;
    font: 12px/1.6 system-ui, sans-serif;
    color: #343b3a;
    flex-direction: column;
  }
  html.controls-on #sidebar { display: flex; }
  #sidebar .sb-tab {
    display: none;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 14px;
  }
  #sidebar .sb-tab.active { display: block; }
  #sidebar .sb-title {
    font-size: 11px;
    text-transform: none;
    letter-spacing: 0.06em;
    color: #6b736f;
    margin: 0 0 4px;
  }
  #sidebar .sb-subtitle {
    margin: 9px -2px 4px;
    padding-top: 7px;
    border-top: 1px solid #e2e7e3;
    color: #6b736f;
    font-size: 10px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .055em;
  }
  #sidebar .sb-subtitle:first-of-type { margin-top: 3px; border-top: 0; }
  #sidebar .sb-help { color: #8a928e; font-size: 10px; margin: 2px 0 5px; }
  #sidebar .sb-spread-second-tabs { gap: 4px; margin-bottom: 6px; }
  #sidebar .sb-spread-second-tab {
    flex: 1 1 0;
    border: 1px solid #cfd6d2;
    border-radius: 4px;
    background: #f6f8f6;
    color: #69716d;
    padding: 5px 7px;
    font: 10px/1.2 system-ui, sans-serif;
    cursor: pointer;
  }
  #sidebar .sb-spread-second-tab.active {
    color: #fff;
    border-color: #3b4340;
    background: #3b4340;
  }
  #sidebar .sb-spread-preset-add {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px;
    margin-bottom: 6px;
  }
  #sidebar .sb-spread-preset-add select,
  #sidebar .sb-spread-preset-add button {
    min-width: 0;
    border: 1px solid #cfd6d2;
    border-radius: 4px;
    background: #fff;
    color: #343b3a;
    padding: 5px 7px;
    font: 10px/1.2 system-ui, sans-serif;
  }
  #sidebar .sb-spread-preset-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 5px;
    padding: 5px 0;
    border-top: 1px solid #e2e7e3;
    font-size: 10px;
  }
  #sidebar .sb-spread-preset-row button {
    border: 1px solid #d6dcd8;
    border-radius: 4px;
    background: #f7f8f7;
    color: #5d6662;
    padding: 3px 5px;
    font: inherit;
    cursor: pointer;
  }
  #sidebar .sb-spread-preset-timing {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 34px;
    align-items: center;
    gap: 4px;
    color: #7a837f;
  }
  #sidebar .sb-spread-preset-timing input { width: 100%; min-width: 0; }
  #sidebar .sb-nested-section {
    border: 1px solid #d8ded9;
    border-radius: 6px;
    padding: 8px 9px;
    margin-bottom: 9px;
    background: #fbfcfb;
  }
  #sidebar .sb-nested-section:last-of-type { margin-bottom: 0; }
  #sidebar .sb-nested-title {
    margin: 0 0 7px;
    color: #343b3a;
    font-weight: 650;
  }
  #sidebar .sb-sequence-child {
    margin-top: 8px;
    padding: 7px 8px;
    border: 1px solid #e0e5e2;
    border-radius: 5px;
    background: #fff;
  }
  #sidebar .sb-sequence-child > .sb-subtitle:first-child {
    margin-top: 0;
    color: #454d49;
    font-weight: 650;
  }
  #sidebar #sbsub-spread {
    border: 0;
    border-radius: 0;
    padding: 12px 14px;
    background: transparent;
  }
  #sidebar #sbsub-spread > .sb-nested-section {
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
    background: transparent;
  }
  #sidebar .sb-slider.disabled { opacity: .45; }
  #sidebar .sb-sec {
    border: 1px solid #e2e7e3;
    border-radius: 6px;
    padding: 6px 10px;
    margin-bottom: 8px;
    min-width: 0;
    overflow-x: hidden;
  }
  /* A disabled animation's whole section dims until it is enabled again. */
  #sidebar .sb-sec.dimmed { opacity: 0.5; }
  /* Nested control rail: Global and every animation are peer destinations. */
  #sidebar #sbtab-controls.active {
    display: grid;
    grid-template-columns: 312px 132px minmax(0, 1fr);
    padding: 0;
    overflow: hidden;
  }
  #sidebar .sb-subtabs {
    display: flex;
    flex-direction: column;
    gap: 2px;
    grid-column: 2;
    grid-row: 1;
    min-height: 0;
    padding: 10px 8px;
    overflow-y: auto;
    border-right: 1px solid #d8ded9;
    background: #fafbfa;
  }
  #sidebar .sb-sequences {
    display: flex;
    flex-direction: column;
    gap: 3px;
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    padding: 10px 8px;
    overflow-y: auto;
    border-right: 1px solid #d8ded9;
    background: #f4f6f4;
  }
  #sidebar .sb-sequence-btn {
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: #68706c;
    padding: 3px 5px;
    font: 10px/1.1 system-ui, sans-serif;
    text-align: left;
    cursor: pointer;
  }
  #sidebar .sb-sequence-btn:hover { background: rgba(0,0,0,.045); }
  #sidebar .sb-sequence-btn.active {
    border-color: #b9c1bd;
    background: #dfe4e1;
    color: #303936;
  }
  #sidebar .sb-sequence-btn.playing:not(.active) {
    border-color: #649579;
    background: transparent;
    color: #274738;
    box-shadow: inset 3px 0 #649579;
  }
  #sidebar .sb-sequence-btn.playing.active {
    border-color: #649579;
    background: #649579;
    box-shadow: none;
    color: #fff;
  }
  #sidebar .settings-selector {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 8px;
    border: 1px solid #aeb8b2;
    border-radius: 5px;
    background: #e9eeeb;
    color: #303a35;
    padding: 6px 8px;
    font-size: 11px;
    line-height: 1.15;
    font-weight: 700;
    padding: 6px 8px;
    font-weight: 700;
  }
  #sidebar .settings-selector:hover { background: #dfe7e2; }
  #sidebar .settings-selector.active {
    border-color: #343b3a;
    background: #343b3a;
    color: #fff;
  }
  #sidebar #sbsequencebank,
  #sidebar .sb-sequence-folder-children {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  #sidebar .sb-sequence-folder-children[hidden] { display: none; }
  #sidebar .sb-sequence-folder-children {
    margin-left: 8px;
    padding-left: 7px;
    border-left: 1px solid #cfd7d2;
  }
  #sidebar .sb-sequence-folder-row {
    display: flex;
    align-items: center;
    gap: 3px;
    margin: 2px 0 1px;
  }
  #sidebar .sb-sequence-folder {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: #58615d;
    padding: 3px 5px 3px calc(5px + var(--folder-indent, 0px));
    font: 600 10px/1.15 system-ui, sans-serif;
    text-align: left;
    cursor: pointer;
  }
  #sidebar .sb-sequence-folder:hover { background: rgba(0,0,0,.045); }
  #sidebar .sb-sequence-folder-arrow {
    width: 10px;
    color: #8b948f;
    text-align: center;
  }
  #sidebar .sb-sequence-btn.sequence-row {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) 24px;
    align-items: center;
    column-gap: 4px;
  }
  #sidebar .sb-sequence-star { text-align: center; color: #d49c25; }
  #sidebar .sb-sequence-id {
    opacity: .65;
    font-variant-numeric: tabular-nums;
    margin-right: 5px;
  }
  #sidebar .sb-sequence-name {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
  }
  #sidebar .sb-sequence-btn.folder-main .sb-sequence-name {
    font-weight: 700;
  }
  #sidebar .sb-sequence-btn.referenced:not(.active):not(.playing) {
    border-color: #eadb86;
    background: #fffdf1;
  }
  #sidebar .sb-sequence-play,
  #sidebar .sb-sequence-folder-play {
    width: 22px;
    height: 19px;
    border: 1px solid #eceeed;
    border-radius: 4px;
    background: transparent;
    color: #333;
    padding: 0;
    font: 10px/1 system-ui, sans-serif;
    cursor: pointer;
    justify-self: end;
  }
  #sidebar .sb-sequence-play:hover,
  #sidebar .sb-sequence-folder-play:hover {
    border-color: #c8ceca;
    background: rgba(0,0,0,.05);
  }
  #sidebar .playing .sb-sequence-play,
  #sidebar .sb-sequence-folder-play.playing {
    border-color: #9ead9f;
    background: #b9d5c6;
    color: #fff;
  }
  #sidebar .sb-sequence-btn.active .sb-sequence-play,
  #sidebar .sb-sequence-folder-row.active .sb-sequence-folder-play {
    background: #7c8781;
    border-color: #7c8781;
    color: #fff;
  }
  #sidebar .sb-sequence-btn.playing.active .sb-sequence-play,
  #sidebar .sb-sequence-folder-row.active .sb-sequence-folder-play.playing {
    background: #649579;
    border-color: #649579;
    color: #fff;
  }
  #sidebar .sb-sequence-folder-row.active .sb-sequence-folder {
    background: #dfe4e1;
    color: #303936;
  }
  #sidebar .sb-sequence-link {
    display: block;
    box-sizing: border-box;
    width: 100%;
    border: 1px solid #cfd6d2;
    border-radius: 5px;
    background: #f6f8f6;
    color: #343b3a;
    padding: 8px 9px;
    font: 11px/1.2 system-ui, sans-serif;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
  }
  #sidebar .sb-sequence-link:hover { background: #edf1ee; }
  #sidebar .sb-embedded-sequence {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 4px 0;
    border: 1px solid #ccd5d0;
    border-radius: 5px;
    background: #f7f9f7;
    padding: 6px 8px;
    cursor: pointer;
  }
  #sidebar .sb-embedded-sequence:hover { background: #eef3ef; }
  #sidebar .setting-default { opacity: .5; }
  #sidebar .setting-default:hover { opacity: .75; }
  #sidebar .setting-modified { opacity: 1; }
  #sidebar .sb-sequencer-config {
    margin-top: 10px;
    padding-top: 4px;
    border-top: 1px solid #dfe5e1;
  }
  #sidebar .sb-subtab > .sb-sequencer-config:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    margin-bottom: 10px;
  }
  #sidebar .sb-subbtn {
    font: 11px/1 system-ui, sans-serif;
    color: #6b736f;
    background: transparent;
    flex: 1 1 auto;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 6px 7px;
    text-align: left;
    cursor: pointer;
  }
  #sidebar .sb-subbtn:hover { background: rgba(0, 0, 0, 0.04); }
  #sidebar .sb-subbtn.active {
    background: #343b3a;
    color: #e7edea;
    border-color: #343b3a;
  }
  #sidebar .settings-selector {
    border: 1px solid #aeb8b2;
    background: #e9eeeb;
    color: #303a35;
  }
  #sidebar .settings-selector:hover { background: #dfe7e2; }
  #sidebar .settings-selector.active,
  #sidebar .settings-selector.active:hover {
    border-color: #343b3a;
    background: #343b3a;
    color: #fff;
  }
  #sidebar .sb-settings-group { margin: 0 0 12px; }
  #sidebar .sb-settings-heading {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    border: 0;
    border-bottom: 1px solid #dfe5e1;
    background: transparent;
    color: #59635e;
    padding: 7px 2px 8px;
    font: 600 11px/1.2 system-ui, sans-serif;
    text-align: left;
    cursor: pointer;
  }
  #sidebar .sb-settings-heading::before {
    content: '\25B8';
    width: 10px;
    color: #8a938e;
  }
  #sidebar .sb-settings-group.open > .sb-settings-heading::before {
    content: '\25BE';
  }
  #sidebar .sb-settings-content { padding: 8px 0 12px; }
  #sidebar .sb-settings-group:not(.open) > .sb-settings-content {
    display: none;
  }
  #sidebar .sb-animation-header {
    margin: 2px 0 8px;
    padding: 3px 2px 7px;
    border-bottom: 1px solid #dfe5e1;
  }
  #sidebar .sb-animation-header label {
    color: #303936;
    font-size: 12px;
    font-weight: 700;
  }
  #sidebar .sb-live-sequence-owner {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: -3px 2px 10px;
    border: 0;
    background: transparent;
    color: #2b9460;
    padding: 0;
    font: 600 10px/1.35 system-ui, sans-serif;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
  }
  #sidebar .sb-live-sequence-owner:hover { color: #166a40; }
  #sidebar .sb-live-sequence-owner[hidden] { display: none; }
  #sidebar .sb-subtab { display: none; }
  #sidebar .sb-subtab.active {
    display: block;
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
    margin: 0;
    overflow-y: auto;
    border: 0;
    border-radius: 0;
    padding: 12px 14px;
  }
  /* Sequence-global controls inherit their root value until touched. */
  #sidebar #sbsub-global.sequence-context .seq-inherited {
    opacity: .5;
    transition: opacity 100ms linear;
  }
  #sidebar #sbsub-global.sequence-context .seq-inherited:hover { opacity: .75; }
  #sidebar #sbsub-global.sequence-context .seq-overridden { opacity: 1; }
  #sidebar .sb-subwrap {
    display: flex;
    align-items: center;
    gap: 3px;
    width: 100%;
    box-sizing: border-box;
    padding: 2px 0 4px;
    border-bottom: 1px solid #e2e7e3;
  }
  #sidebar .sb-subwrap:last-child { border-bottom: 0; }
  #sidebar .sb-subwrap .sb-on { flex: 0 0 auto; margin: 0 3px 0 0; }
  #sidebar #sbcaroster {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
  }
  #sidebar .sb-rosterrow {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  #sidebar .sb-species {
    width: 18px;
    height: 18px;
    cursor: pointer;
    box-sizing: content-box;
    border: 2px solid transparent; /* off */
    border-radius: 5px;
  }
  #sidebar .sb-species.on { border-color: #000000; }
  /* Slider labels keep their full names visible. */
  #sidebar .sb-lab {
    flex: 0 0 92px;
    font-size: 10px;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
  }
  #sidebar #sbsub-global .sb-lab { flex-basis: 118px; }
  #sidebar .sb-mini {
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #sidebar .sb-sec > .sb-row > .sb-mini {
    flex: 1 1 0;
    min-width: 0;
  }
  #sidebar .sb-presets {
    gap: 6px;
    margin-top: 6px;
  }
  #sidebar .sb-prewrap {
    flex: 1 1 0; /* the preset tabs share the row's full width equally */
    display: flex;
    align-items: center;
    gap: 2px;
  }
  #sidebar .sb-preseton { cursor: pointer; accent-color: #343b3a; }
  #sidebar .sb-preset {
    flex: 1 1 0;
    font: 10px/1 system-ui, sans-serif;
    color: #6b736f;
    background: transparent;
    border: 1px solid #d8ded9;
    border-radius: 4px;
    padding: 4px 0;
    cursor: pointer;
  }
  #sidebar .sb-preset:hover { background: rgba(0, 0, 0, 0.05); }
  #sidebar .sb-link {
    border: 0;
    padding: 0;
    color: #4f6258;
    background: transparent;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
  }
  /* Lit while the live configuration matches this preset exactly. */
  #sidebar .sb-preset.active {
    background: #343b3a;
    color: #e7edea;
    border-color: #343b3a;
  }
  /* Bottom progress strip: the running animation, then the gap. Bar
     widths are proportioned to Duration vs Gap live. */
  #sidebar #sbprogress {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 8px 14px 7px;
    border-top: 1px solid #d8ded9;
  }
  #sidebar #sbptime {
    flex: 0 0 22ch;
    min-width: 22ch;
    margin-left: -1px;
    color: #59615d;
    font: 10px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
  }
  #sidebar #sbtransportfullreset,
  #sidebar #sbtransportplayreset,
  #sidebar #sbtransportreset,
  #sidebar #sbtransporttoggle,
  #sidebar #sbtransporttarget,
  #sidebar #sbtogglefolders {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid #d8ded9;
    border-radius: 4px;
    color: #343b3a;
    background: transparent;
    cursor: pointer;
    font: 11px/1 system-ui, sans-serif;
  }
  #sidebar #sbtransportfullreset:hover,
  #sidebar #sbtransportplayreset:hover,
  #sidebar #sbtransportreset:hover,
  #sidebar #sbtransporttoggle:hover,
  #sidebar #sbtransporttarget:hover,
  #sidebar #sbtogglefolders:hover { background: rgba(0,0,0,0.05); }
  #sidebar #sbtransportfullreset {
    color: #8d2929;
    background: #f7dddd;
    border-color: #dfa9a9;
  }
  #sidebar #sbtransportfullreset:hover { background: #efc5c5; }
  #sidebar #sbtransportplayreset { flex-basis: 30px; width: 30px; }
  #sidebar #sbtransporttoggle {
    border-color: #eceeed;
    color: #333;
  }
  #sidebar #sbprogress:not(.paused) #sbtransporttoggle {
    border-color: #c8ceca;
    background: #eef2ef;
  }
  #sidebar .sb-transporttrack {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 4px;
    flex: 1 1 0;
    min-width: 0;
  }
  #sidebar .sb-progressregion {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-grow: 1;
    flex-basis: 0;
    min-width: 0;
  }
  #sidebar .sb-progbar {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: #eef1ef;
    overflow: hidden;
  }
  #sidebar .sb-regiontime {
    width: 100%;
    color: #8a928e;
    font: 9px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
  }
  #sidebar .sb-progfill {
    height: 100%;
    width: 0;
    background: #343b3a;
  }
  #sidebar .sb-proggap .sb-progfill { background: #95a199; }
  #sidebar #sbtransportseek {
    display: none;
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    top: -6px;
    width: 100%;
    height: 18px;
    margin: 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    cursor: ew-resize;
  }
  #sidebar #sbprogress.paused #sbtransportseek { display: block; }
  #sidebar #sbtransportseek::-webkit-slider-runnable-track {
    height: 6px;
    background: transparent;
  }
  #sidebar #sbtransportseek::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 10px;
    height: 16px;
    margin-top: -5px;
    border: 1px solid #343b3a;
    border-radius: 3px;
    background: #ffffff;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.7);
  }
  #sidebar #sbpname {
    font: 10px/1 system-ui, sans-serif;
    color: #6b736f;
    min-width: 52px;
    margin-left: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #sidebar .sb-settings-selector-row {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 24px;
    gap: 4px;
    align-items: stretch;
    margin-bottom: 8px;
  }
  #sidebar .sb-settings-selector-row .settings-selector { margin-bottom: 0; }
  #sidebar .sb-settings-selector-row > button { height: 28px; }
  #sidebar .sb-download-diff,
  #sidebar #sbtogglefolders {
    width: 24px;
    min-width: 24px;
    border: 1px solid #d8ded9;
    border-radius: 5px;
    background: #f4f6f4;
    color: #7b8580;
    padding: 0;
    cursor: pointer;
  }
  #sidebar .sb-download-diff,
  #sidebar #sbtogglefolders { height: 100%; }
  #sidebar .sb-middle-settings-row {
    grid-template-columns: 24px minmax(0, 1fr);
  }
  #sidebar .sb-follow-control {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-left: 3px;
    color: #59615d;
    font: 10px/1 system-ui, sans-serif;
    white-space: nowrap;
    cursor: pointer;
  }
  #sidebar .sb-follow-control input {
    width: 13px;
    height: 13px;
    margin: 0;
    accent-color: #4fbf83;
  }
  #sidebar .sb-sequence-btn.live-nested .sb-sequence-name,
  #sidebar .sb-sequence-folder-row.live-nested .sb-sequence-folder > span:last-child {
    color: #31bd73;
    font-weight: 700;
  }
  #sidebar .sb-subwrap.live-animation .sb-subbtn {
    color: #31bd73;
    font-weight: 700;
  }
  #sidebar .sb-now {
    flex: 1 1 0;
    min-width: 0;
    margin-left: 6px;
    font: 10px/1 system-ui, sans-serif;
    color: #95a199;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Instant tooltip overlay: rides the mouse, above everything. */
  #sbtooltip {
    display: none;
    position: fixed;
    z-index: 999;
    max-width: 280px;
    background: #343b3a;
    color: #f1f4f3;
    font: 11px/1.5 system-ui, sans-serif;
    padding: 7px 9px;
    border-radius: 6px;
    pointer-events: none;
  }
  .sb-easing-hovercard {
    display: none;
    position: fixed;
    z-index: 1000;
    width: 424px;
    box-sizing: border-box;
    padding: 11px 12px 12px;
    border: 1px solid #cbd1cd;
    border-radius: 7px;
    background: #ffffff;
    color: #252927;
    box-shadow: 0 8px 26px rgba(24, 31, 27, .16);
    font: 11px/1.45 system-ui, sans-serif;
    pointer-events: none;
  }
  .sb-easing-hovercard-title {
    margin-bottom: 3px;
    font-size: 12px;
    font-weight: 700;
    color: #111311;
  }
  .sb-easing-hovercard-copy { margin-bottom: 9px; }
  .sb-easing-hovercard svg {
    display: block;
    width: 400px;
    height: 100px;
    background: #e6e8e6;
  }
  #sidebar .sb-mini {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: #6b736f;
    cursor: pointer;
  }
  #sidebar .sb-mini input { accent-color: #343b3a; cursor: pointer; }
  #sidebar .sb-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  #sidebar .sb-row label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
  }
  #sidebar .sb-tools { display: flex; align-items: center; gap: 6px; }
  #sidebar .sb-on { accent-color: #343b3a; cursor: pointer; }
  #sidebar .sb-lock {
    font: 10px/1 system-ui, sans-serif;
    color: #6b736f;
    background: transparent;
    border: 1px solid #d8ded9;
    border-radius: 4px;
    padding: 2px 6px;
    cursor: pointer;
  }
  #sidebar .sb-lock:hover { background: rgba(0, 0, 0, 0.05); }
  #sidebar .sb-lock.active {
    background: #343b3a;
    color: #e7edea;
    border-color: #343b3a;
  }
  #sidebar .sb-slider {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
  }
  #sidebar .sb-highlight-setting {
    background: #fff6c7;
    border-radius: 6px;
    box-shadow: inset 3px 0 0 #e3cc1c;
    padding-left: 8px;
    padding-right: 8px;
  }
  #sidebar .sb-slider input[type="range"] {
    flex: 1;
    min-width: 0;
    accent-color: #343b3a;
  }
  #sidebar .sb-slider.fade-disabled .sb-lab,
  #sidebar .sb-slider.fade-disabled input[type="range"],
  #sidebar .sb-slider.fade-disabled .sb-val,
  #sidebar .sb-slider.fade-disabled .sb-lock { opacity: 0.38; }
  #sidebar .sb-val { min-width: 34px; text-align: right; }
  #sidebar #sbplanespacingval { min-width: 48px; white-space: nowrap; }
  /* Lock gutter: every lock sits in the same 24px column, and rows
     without one are padded by the same width, so the locks align
     vertically and pair structure is visible at a glance. */
  #sidebar .sb-slider .sb-lock {
    flex: 0 0 24px;
    width: 24px;
    padding: 2px 0;
    box-sizing: border-box;
    text-align: center;
  }
  #sidebar .sb-gutterbox {
    flex: 0 0 24px;
    width: 24px;
    margin: 0;
    accent-color: #343b3a;
    cursor: pointer;
  }
  #sbsub-global .sb-slider:not(:has(.sb-lock)):not(:has(.sb-gutterbox)),
  #sbsub-flat .sb-slider:not(:has(.sb-lock)):not(:has(.sb-gutterbox)),
  #sbsub-invert .sb-slider:not(:has(.sb-lock)):not(:has(.sb-gutterbox)),
  #sbsub-ca .sb-slider:not(:has(.sb-lock)):not(:has(.sb-gutterbox)),
  #sbsub-perlin .sb-slider:not(:has(.sb-lock)):not(:has(.sb-gutterbox)) {
    padding-left: 30px;
  }
  #sidebar .sb-select {
    flex: 1;
    min-width: 0;
    font: 10px/1.4 system-ui, sans-serif;
    color: #343b3a;
    border: 1px solid #d8ded9;
    border-radius: 4px;
    background: transparent;
    padding: 2px 4px;
  }
  #sidebar .sb-btn {
    display: block;
    width: 100%;
    font: 12px/1 system-ui, sans-serif;
    color: #343b3a;
    background: transparent;
    border: 1px solid #95a199;
    border-radius: 6px;
    padding: 7px 0;
    cursor: pointer;
    margin: 4px 0;
  }
  #sidebar .sb-btn:hover { background: rgba(0, 0, 0, 0.05); }
  #sidebar .sb-btnrow {
    display: flex;
    gap: 6px;
    margin-top: 8px;
  }
  #sidebar .sb-btnrow .sb-btn {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    margin: 0;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #sidebar #sbresetcfg {
    width: 100%;
    margin-top: 10px;
    background: #f8dddd;
    border-color: #d7a3a3;
  }
  #sidebar #sbresetcfg:hover { background: #f2cccc; }
  #sidebar .sb-textinput {
    flex: 1 1 0;
    min-width: 0;
    border: 1px solid #d8ded9;
    border-radius: 4px;
    padding: 3px 6px;
    color: #343b3a;
    background: #fff;
    font: 11px/1.4 system-ui, sans-serif;
  }
  #sidebar .sb-tab ul {
    margin: 2px 0 10px;
    padding-left: 18px;
  }
  #sidebar .sb-tab li { margin: 1px 0; }