/* Material Symbols ligature class — write the icon name as the element's
     text content, the font renders it as a glyph. */
  .micon {
    font-family: 'Material Symbols Outlined';
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  }

  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: #1a1a1a;
    color: #ddd;
    font-family: -apple-system, system-ui, sans-serif;
    overflow: hidden;
    user-select: none;
  }

  /* ---------- top toolbar ---------- */
  #toolbar {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 100000;
    display: flex;
    gap: 4px;
  }
  #toolbar button {
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
    color: #ddd;
    
    padding: 4px 10px;
    font-size: 11px;
    cursor: pointer;
    font-family: inherit;
  }
  #toolbar button:hover { background: #353535; }

  /* ---------- floating panels ---------- */
  .panel {
    position: absolute;
    background: #222;
    overflow: hidden;
    /* --accent is set per-viewer (and fallback for non-viewer panels).
       Inactive: dim outline. Active: full-strength accent. */
    --accent: #888;
    outline: 1px solid color-mix(in oklab, var(--accent) 35%, transparent);
    transition: outline-color 80ms;
  }
  .panel.active { outline-color: var(--accent); }
  .panel .titlebar {
    height: 22px;
    background: #333;
    color: #aaa;
    font-size: 11px;
    padding: 0 8px;
    line-height: 22px;
    cursor: grab;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .panel .titlebar.dragging { cursor: grabbing; }
  .panel .title {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .panel .meta {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 10px;
    color: #6b6;
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .panel .meta .loop-mark { color: #ffd000; }
  .panel .titlebar .panel-close {
    cursor: pointer;
    color: #888;
    padding: 0 2px;
    flex: 0 0 auto;
  }
  .panel .titlebar .panel-close:hover { color: #c66; }

  .panel .titlebar .fps-mini {
    width: 50px;
    background: #1a1a1a;
    border: 1px solid #333;
    color: #ddd;
    outline: none;
    
    padding: 1px 3px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 10px;
    flex: 0 0 auto;
  }

  .panel .titlebar .aspect-mini {
    background: #1a1a1a;
    border: 1px solid #333;
    color: #ddd;
    outline: none;
    padding: 1px 3px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 10px;
    flex: 0 0 auto;
    cursor: pointer;
  }

  .panel .titlebar .viewer-export-btn {
    background: #2a2a2a;
    border: 1px solid #444;
    color: #ddd;
    padding: 2px 8px;
    font: inherit;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    flex: 0 0 auto;
  }
  .panel .titlebar .viewer-export-btn:hover { background: #3a3a3a; border-color: #555; }
  .panel .titlebar .viewer-export-btn:disabled { opacity: 0.4; cursor: not-allowed; }

  /* ---------- viewer ---------- */
  .viewer-panel {
    /* Explicit initial size: required because resize:both only kicks in
       once the element has been user-sized; without an initial width the
       panel auto-sizes to content (canvas max-width 100% → panel tries to
       be canvas-native-wide → glued to viewport edge until the user drags
       the resize handle). */
    width: 1340px;
    height: 850px;
    resize: both;
    overflow: hidden;
    min-width: 320px;
    min-height: 240px;
    display: flex;
    flex-direction: column;
  }
  /* titlebar + viewer-ctrl are flex: 0 0 auto by default, so the stage
     expands to fill remaining vertical space. */
  .viewer-stage {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;     /* allow children to shrink below content size */
    background: #000;  /* shows through letterbox bars around the canvas */
  }
  /* Canvas-area wraps the canvas and centers it. Flex-grow takes leftover
     stage height; the timeline strip below it is flex-fixed. */
  .viewer-canvas-area {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    overflow: hidden;
    background: #101010;
  }
  .viewer-panel canvas {
    display: block;
    /* Drawing buffer is project-resolution (e.g. 1920×1080); intrinsic
       aspect ratio comes from the width/height HTML attributes. max-* +
       object-fit:contain lets the browser scale the canvas down to fit
       the canvas-area while preserving aspect — same shape every NLE
       does to fit a project frame inside a viewer panel. */
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
  .viewer-timeline {
    position: relative;
    height: 13px;
    flex: 0 0 13px;
    width: 100%;
    background: #111;
    display: flex;
    overflow: hidden;
    cursor: col-resize;
    user-select: none;
    margin-top: 5px;
  }
  /* During an active scrub the cursor should stay col-resize even if it
     briefly leaves the timeline strip. Set on <body> while scrubbing. */
  body.scrubbing, body.scrubbing * { cursor: col-resize !important; }
  .viewer-timeline .clip-block {
    height: 10px;
    flex-shrink: 0;
    box-shadow: inset -1px 0 0 #000;
  }
  /* Loop indicator: bright yellow on the leading and trailing edges of the
     looped clip's block. Inset box-shadows so they don't affect layout —
     narrow clips don't lose their fill colour. */
  .viewer-timeline .clip-block.loop {
    box-shadow:
      inset 2px 0 0 #ffd000,
      inset -2px 0 0 #ffd000;
  }
  .viewer-timeline .cache-strip {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    pointer-events: none;
  }
  .viewer-timeline .cache-seg {
    position: absolute;
    top: 0;
    bottom: 0;
    background: #028f1a;
  }
  .viewer-timeline .cache-seg.partial {
    background: repeating-linear-gradient(
      90deg,
      #028f1a 0 2px,
      transparent 2px 4px
    );
  }
  .viewer-timeline .playhead {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #fff;
    pointer-events: none;
    transform: translateX(0px);
    will-change: transform;
  }
  .viewer-timeline .playhead.hidden { display: none; }
  .viewer-ctrl {
    display: flex;
    gap: 12px;
    padding: 6px 10px;
    background: #2a2a2a;
    border-bottom: 1px solid #1a1a1a;
    font-size: 11px;
    color: #888;
    align-items: center;
  }
  .viewer-ctrl label {
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 9px;
  }
  .viewer-ctrl select {
    background: #1a1a1a;
    border: 1px solid #333;
    color: #ddd;
    
    padding: 2px 4px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 11px;
  }
  .viewer-ctrl select:focus { outline: none; }
  .viewer-ctrl .ctrl-readonly {
    color: #888;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 11px;
    padding: 2px 4px;
    border: 1px solid transparent;
  }
  .viewer-ctrl .mute-btn,
  .viewer-ctrl .loop-btn {
    background: #1a1a1a;
    border: 1px solid #333;
    color: #ddd;
    padding: 2px 5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* The loop button kicks the right-aligned group off the auto margin. */
  .viewer-ctrl .loop-btn { margin-left: auto; }
  .viewer-ctrl .mute-btn { margin-left: 4px; }
  .viewer-ctrl .mute-btn:hover,
  .viewer-ctrl .loop-btn:hover { border-color: #555; }
  .viewer-ctrl .mute-btn.muted {
    color: #c66;
    border-color: #553;
  }
  .viewer-ctrl .loop-btn.loop-off {
    color: #888;
    border-color: #333;
  }

  /* ---------- EDL ---------- */
  .edl-panel {
    width: 420px;
    height: 500px;       /* default height — does NOT grow with row count */
    min-height: 200px;
    /* Vertical resize handle on the bottom edge so the user can drag the
       panel taller. Without an explicit height, flex would let the inner
       rows push the panel to whatever height they need. */
    resize: vertical;
    overflow: hidden;    /* required for the resize handle to render */
    display: flex;
    flex-direction: column;
  }
  .edl-rows {
    flex: 1 1 auto;     /* take all remaining space inside the panel */
    overflow-y: auto;
    padding: 6px;
    min-height: 0;
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: #444 transparent;
  }
  /* WebKit/Chromium */
  .edl-rows::-webkit-scrollbar { width: 4px; }
  .edl-rows::-webkit-scrollbar-track { background: transparent; }
  .edl-rows::-webkit-scrollbar-thumb {
    background: #444;
  }
  .edl-rows::-webkit-scrollbar-thumb:hover { background: #555; }
  .edl-empty {
    padding: 32px 12px;
    text-align: center;
    color: #555;
    font-size: 12px;
    line-height: 1.5;
  }
  .edl-row {
    display: grid;
    grid-template-columns: 64px 1fr 1fr 18px;
    gap: 8px;
    align-items: center;
    padding: 6px;
    margin-bottom: 4px;
    background: #2a2a2a;
    position: relative;
    cursor: grab;
  }
  .edl-row.dragging { opacity: 0.4; }
  .edl-row.drop-above { box-shadow: 0 -2px 0 #4a8; }
  .edl-row.drop-below { box-shadow: 0 2px 0 #4a8; }
  .edl-row.playing {
    /* --row-accent is set by JS to the colour of the viewer playing
       this row (most-recent-arrival wins). Background is a subtle wash
       in that hue; the inset border is the colour at full strength. */
    background: color-mix(in oklab, var(--row-accent, #4a8) 12%, #2a2a2a);
    box-shadow: inset 0 0 0 1px var(--row-accent, #4a8);
  }
  .edl-row .thumb-cell canvas {
    display: block;
    width: 64px;
    height: 64px;
    background: #000;
    
  }
  .edl-row .field {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .edl-row .field-label {
    font-size: 9px;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .edl-row input.num {
    background: #1a1a1a;
    border: 1px solid #333;
    color: #ddd;
    
    padding: 3px 5px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 11px;
    width: 100%;
    box-sizing: border-box;
  }
  .edl-row input.num:focus { outline: none; }
  .edl-row input.num.invalid { border-color: #c66; }
  .edl-row .delete {
    color: #666;
    cursor: pointer;
    text-align: center;
    font-size: 14px;
    line-height: 1;
  }
  .edl-row .delete:hover { color: #c66; }

  /* ---------- EDL audio section ---------- */
  /* Audio clips on the EDL live on z<0 and render below the z=0 cut list,
     under a thin separator. Topmost (closest to 0) wins playback under
     "mute the rest" policy — visually they appear in z-descending order.
     Volume icon stands in for a thumbnail since audio has no frame. */
  .edl-audio-separator {
    padding: 4px 8px;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #555;
    background: #1c1c1c;
    border-top: 1px solid #2a2a2a;
    border-bottom: 1px solid #2a2a2a;
    flex: 0 0 auto;
  }
  .edl-row .thumb-cell .thumb-audio-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #666;
    font-size: 28px;
    background: #1a1a1a;
  }

  /* ---------- toast ---------- */
  .toast {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(200, 60, 60, 0.95);
    color: #fff;
    padding: 8px 16px;
    
    font-size: 13px;
    z-index: 10000;
  }

  /* ---------- notes ---------- */
  #notes {
    position: fixed;
    bottom: 12px;
    left: 12px;
    width: 280px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid #2a2a2a;
    
    padding: 10px 12px;
    font-size: 11px;
    line-height: 1.5;
    color: #888;
    pointer-events: none;
  }
  #notes h4 {
    margin: 0 0 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #aaa;
  }
  #notes h4:not(:first-child) { margin-top: 10px; }
  #notes ul { margin: 0; padding: 0; list-style: none; }
  #notes li { padding: 1px 0; }

  /* ---------- Timeline ---------- */
  /* Wide panel with a GL canvas inside. No track headers yet — the canvas
     draws the ruler band, audio lanes, and clip boxes itself. */
  .timeline-panel {
    width: 720px;
    height: 500px;
    min-height: 160px;
    min-width: 360px;
    resize: both;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .timeline-stage {
    flex: 1 1 auto;
    min-height: 0;
    background: #101010;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .timeline-canvas {
    display: block;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    background: #101010;
  }

  /* ---------- export modal ---------- */
  /* Full-page backdrop captures clicks while exporting. The modal is
     centered on top. Both are display:none until .open is added. */
  #export-backdrop {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    display: none;
  }
  #export-backdrop.open { display: block; }

  #export-modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 16px 18px 14px;
    z-index: 1001;
    color: #ccc;
    font-size: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    display: none;
    min-width: 520px;
  }
  #export-modal.open { display: block; }

  #export-modal h3 {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: normal;
    color: #ddd;
  }

  #export-progress {
    height: 8px;
    width: 100%;
    background: #2a2a2a;
    border: 1px solid #333;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 6px;
    box-sizing: border-box;
  }
  #export-progress-bar {
    height: 100%;
    background: #4a8;
    width: 0%;
  }

  #export-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
  }
  #export-progress-label {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 11px;
    color: #aaa;
  }
  #export-status {
    font-size: 11px;
    color: #888;
    margin-top: 4px;
    min-height: 14px;
  }
  #export-cancel {
    background: #2a2a2a;
    border: 1px solid #444;
    color: #ccc;
    padding: 4px 12px;
    cursor: pointer;
    font-size: 11px;
  }
  #export-cancel:hover:not(:disabled) { background: #333; }
  #export-cancel:disabled {
    opacity: 0.5;
    cursor: default;
  }

  /* EDL panel export button — small button alongside the fps input.
     Matches the #toolbar buttons (font, padding, colours). align-self
     stops the button from stretching to the titlebar's full height,
     which is what made it look giant before. */
  .titlebar .export-btn {
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
    color: #ddd;
    padding: 4px 10px;
    font-size: 11px;
    font-family: inherit;
    cursor: pointer;
    margin-left: 4px;
    align-self: center;
  }
  .titlebar .export-btn:hover { background: #353535; }
  .titlebar .export-btn:disabled {
    opacity: 0.4;
    cursor: default;
  }

  /* ---------- Property panel ---------- */
  .prop-panel {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 4px;
    color: #ddd;
    font-size: 12px;
  }
  .prop-panel-bar {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    background: #222;
    border-bottom: 1px solid #333;
    cursor: grab;
    user-select: none;
  }
  .prop-panel-bar.dragging { cursor: grabbing; }
  .prop-panel-title {
    flex: 1;
    font-weight: 600;
    color: #ddd;
    letter-spacing: 0.02em;
  }
  .prop-panel-chev {
    background: transparent;
    border: none;
    color: #888;
    cursor: pointer;
    padding: 0 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .prop-panel-chev:hover { color: #ddd; }
  .prop-panel-chev .micon {
    font-size: 18px;
    line-height: 1;
    transition: transform 220ms ease;
  }
  .prop-panel.collapsed .prop-panel-bar { border-bottom-color: transparent; }
  /* Body wrapper. Plain scrollable block; height comes either from the
     CSS default below or from inline setBodyHeight() in proppanel.js
     (used at boot to align prop bottom with the viewer's bottom).
     Collapse is handled by display:none on the wrap when .collapsed is
     present on the parent — instant hide, no animation, panel naturally
     shrinks to its titlebar (KDE-style window-shade). */
  .prop-panel-body-wrap {
    background: #2a2a2a;
    height: 600px;
    min-height: 100px;
    resize: vertical;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #444 transparent;
  }
  .prop-panel-body-wrap::-webkit-scrollbar { width: 4px; }
  .prop-panel-body-wrap::-webkit-scrollbar-track { background: transparent; }
  .prop-panel-body-wrap::-webkit-scrollbar-thumb { background: #444; }
  .prop-panel-body-wrap::-webkit-scrollbar-thumb:hover { background: #555; }
  /* display:none rather than height:0. height:0 fights the inline height
     set by setBodyHeight() (inline beats class), and even if we won that
     fight, an empty 0-height scrollable element still painted a 1px
     border seam under the titlebar. Hiding the box outright is what
     "roll up into the titlebar" actually means. */
  .prop-panel.collapsed .prop-panel-body-wrap {
    display: none;
  }
  .prop-panel-body { padding: 8px 10px 10px; }

  .prop-group {
    margin-bottom: 8px;
  }
  .prop-group-head {
    color: #888;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
    padding-bottom: 2px;
    border-bottom: 1px solid #2a2a2a;
  }
  .prop-group-body { display: flex; flex-direction: column; gap: 4px; }

  .prop-row {
    display: flex;
    align-items: center;
    padding: 2px 0;
  }
  .prop-row-label {
    width: 80px;
    color: #aaa;
    user-select: none;
  }
  .prop-row-value {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
  }
  .prop-row-reset {
    background: transparent;
    border: none;
    color: #777;
    cursor: pointer;
    padding: 0 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
  }
  .prop-row-reset .micon {
    font-size: 16px;
    line-height: 1;
  }
  .prop-row-reset:hover {
    color: #ddd;
    background: #2a2a2a;
  }
  .prop-row-reset.at-default {
    color: #444;
    cursor: default;
  }
  .prop-row-reset.at-default:hover {
    color: #444;
    background: transparent;
  }
  .prop-row-note {
    color: #777;
    font-style: italic;
    padding: 4px 0;
  }
  .prop-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 8px;
    border-bottom: 1px solid #2a2a2a;
  }
  .prop-tab {
    background: transparent;
    border: 0;
    color: #888;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 11px;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
  }
  .prop-tab:hover { color: #ddd; }
  .prop-tab.active {
    color: #fff;
    border-bottom-color: #4a90e2;
  }
  .prop-tab-pane { display: block; }
  .prop-effect-block {
    border-top: 1px solid #2a2a2a;
    padding: 8px 0;
  }
  .prop-effect-block:first-child {
    border-top: 0;
    padding-top: 0;
  }
  .prop-effect-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
  }
  .prop-effect-handle {
    cursor: grab;
    color: #555;
    font-size: 14px;
    line-height: 1;
    letter-spacing: -2px;
    padding: 0 4px;
    user-select: none;
  }
  .prop-effect-handle:hover { color: #999; }
  .prop-effect-block.dragging {
    opacity: 0.85;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    background: #1a1a1a;
    border-radius: 4px;
    border: 1px solid #4a90e2;
  }
  .prop-effect-block.dragging .prop-effect-handle { cursor: grabbing; }
  .prop-effect-placeholder {
    background: #4a90e2;
    opacity: 0.15;
    border-radius: 4px;
    margin: 4px 0;
  }
  body.prop-effect-dragging-cursor, body.prop-effect-dragging-cursor * {
    cursor: grabbing !important;
  }
  .prop-effect-enable {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ddd;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    user-select: none;
  }
  .prop-effect-enable input[type="checkbox"] {
    margin: 0;
    accent-color: #4a90e2;
  }
  .prop-effect-body {
    padding-left: 0;
  }
  .prop-wheels-row {
    display: flex;
    gap: 8px;
    justify-content: space-between;
    padding: 4px 0;
  }
  .prop-wheel {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  .prop-wheel-label {
    color: #aaa;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .prop-wheel-stage {
    display: flex;
    gap: 4px;
    align-items: center;
  }
  .prop-wheel-svg {
    display: block;
  }
  .prop-wheel-luma {
    height: 110px;
    display: flex;
    align-items: stretch;
  }
  .prop-wheel-luma-track {
    position: relative;
    width: 10px;
    background: linear-gradient(to top, #000, #fff);
    border: 1px solid #2a2a2a;
    border-radius: 2px;
    cursor: ns-resize;
  }
  .prop-wheel-luma-thumb {
    position: absolute;
    left: -3px;
    right: -3px;
    height: 3px;
    background: #fff;
    border: 1px solid #000;
    transform: translateY(50%);
    pointer-events: none;
  }
  .prop-wheel-luma-center {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: #555;
    pointer-events: none;
  }
  .prop-wheel-readout {
    color: #777;
    font-family: ui-monospace, SF Mono, Menlo, monospace;
    font-size: 9px;
    text-align: center;
    user-select: none;
  }
  /* Scrubbable number control */
  .prop-scrub {
    background: #111;
    border: 1px solid #2a2a2a;
    border-radius: 3px;
    color: #ddd;
    padding: 3px 8px;
    min-width: 80px;
    text-align: right;
    cursor: ew-resize;
    user-select: none;
    font-family: ui-monospace, SF Mono, Menlo, monospace;
    font-size: 11px;
  }
  .prop-scrub:hover { border-color: #3a3a3a; background: #161616; }
  .prop-scrub.scrubbing {
    border-color: #4a8ac9;
    background: #1a242e;
    color: #fff;
  }
  .prop-scrub-editor {
    background: #111;
    border: 1px solid #4a8ac9;
    border-radius: 3px;
    color: #fff;
    padding: 3px 8px;
    min-width: 80px;
    text-align: right;
    font-family: ui-monospace, SF Mono, Menlo, monospace;
    font-size: 11px;
    outline: none;
  }