/* The animations of the feature rows on the home page (assets/demos/).
   Each animation is a copy of an app screen on a stage of 960 x 540 px.
   demos/core.js scales the stage to the box and moves a "camera" over its parts. */
.ui-demo {
  /* The colors of the app (Palette.kt, default seeds). The page has other colors (site.css). */
  --bg: #0e0e0e; --inset: #121212; --panel: #161616; --card: #1a1a1a; --raised: #202020;
  --line: #262626; --line-2: #363636;
  --fg: #e4e4e4; --fg-2: #adaaaa; --fg-3: #8a8a8a; --fg-strong: #ffffff;
  --sage: #a7b78e; --radius: 10px;
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; background: var(--bg);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7);
}
.ui-stage {
  position: absolute; left: 0; top: 0; width: 960px; height: 540px; transform-origin: 0 0;
  font: 12px/1.3 var(--font); color: var(--fg);
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.3s;
}
.ui-demo.fading .ui-stage, .ui-demo.fading .ui-hud { opacity: 0; }
.ui-demo.no-anim, .ui-demo.no-anim * { transition: none !important; animation: none !important; }
/* Off the screen, the CSS animations stop too (core.js adds "paused"). */
.ui-demo.paused, .ui-demo.paused * { animation-play-state: paused !important; }
.ui-num { font-variant-numeric: tabular-nums; }
/* The site rule "max-width: 100%" makes an icon in a zero-width element (a flag pole) disappear. */
.ui-stage svg, .ui-stage img { max-width: none; }
/* A short press on a button of the copy. */
.ui-stage .press { transform: scale(0.94); background: rgba(200, 236, 70, 0.16) !important; border-color: var(--lime) !important; color: var(--fg-strong) !important; }

.ui-nav { position: absolute; left: 0; top: 0; width: 48px; height: 540px; background: var(--inset); border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 10px; }
.ui-nav img { width: 26px; height: 26px; margin-bottom: 8px; }
.ui-nav i { display: block; width: 30px; height: 30px; border-radius: 7px; background: var(--card); }
.ui-nav i.on { background: var(--lime-tint); box-shadow: inset 0 0 0 1px var(--lime-edge); }

.ui-video { position: absolute; left: 48px; top: 0; width: 632px; height: 356px; overflow: hidden; background: #000; }
.ui-video img, .ui-photo { width: 100%; height: 100%; object-fit: cover; transform-origin: 62% 45%; animation: ui-pan 16s ease-in-out infinite alternate; }
@keyframes ui-pan { from { transform: scale(1); } to { transform: scale(1.08); } }

.ui-playbar { position: absolute; left: 48px; top: 356px; width: 632px; height: 52px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 12px; background: var(--overlay, #1c1c1c); border-top: 1px solid var(--line); }
.ui-now { font-size: 13px; }
.ui-transport { display: flex; align-items: center; gap: 5px; }
.ui-seek { height: 28px; padding: 0 8px; display: grid; place-items: center; border-radius: 5px; background: #292929; border: 1px solid #474747; font-size: 11px; font-weight: 600; }
.ui-play { width: 40px; height: 40px; margin: 0 4px; display: grid; place-items: center; border-radius: 50%; background: var(--lime); color: var(--on-lime); }
.ui-play svg { width: 18px; height: 18px; }
.ui-addc { justify-self: end; height: 28px; padding: 0 10px; display: flex; align-items: center; border-radius: 5px; background: var(--raised); border: 1px solid var(--line-2); font-size: 11px; color: var(--fg-2); }

.ui-side { position: absolute; left: 680px; top: 0; width: 280px; height: 408px; display: flex; flex-direction: column; background: var(--bg); border-left: 1px solid var(--line); }
.ui-mark { margin: 10px; padding: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.ui-mark-head { display: flex; align-items: center; margin-bottom: 8px; font-size: 13px; font-weight: 600; }
.ui-pending { margin-left: auto; font-size: 10.5px; font-weight: 400; color: var(--fg-3); }
.ui-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ui-step { display: grid; gap: 5px; padding: 8px; border-radius: 6px; background: var(--raised); border: 1px solid var(--line-2); transition: border-color 0.15s, background 0.15s, transform 0.1s; }
.ui-step-top { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.ui-n { width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); color: var(--fg-2); font-size: 10px; font-weight: 700; }
.ui-val { font-size: 14px; font-weight: 600; color: var(--fg-3); }
.ui-step.next { border-color: rgba(200, 236, 70, 0.6); box-shadow: inset 0 0 0 1px rgba(200, 236, 70, 0.2); }
.ui-step.next .ui-n { border-color: var(--lime); color: var(--lime); }
.ui-step.done { background: linear-gradient(var(--lime-tint), var(--lime-tint)), var(--raised); }
.ui-step.done .ui-n { background: var(--lime); border-color: var(--lime); color: var(--on-lime); }
.ui-step.done .ui-val { color: var(--lime); }
.ui-list-head { padding: 2px 12px 8px; }
.ui-list-head b { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 600; color: var(--fg-strong); }
.ui-counts { display: flex; gap: 10px; font-size: 11px; color: var(--fg-2); }
.ui-counts em { font-style: normal; font-weight: 600; color: var(--fg); }
.ui-thead, .ui-row { display: grid; grid-template-columns: 30px 1fr 50px 16px; column-gap: 4px; align-items: center; padding: 0 12px; }
.ui-thead { height: 22px; flex: none; font-size: 9.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fg-3); background: var(--inset); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ui-rows { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.ui-row { position: relative; flex: none; height: 34px; font-size: 11.5px; border-bottom: 1px solid #191919; }
.ui-row .n { font-weight: 700; color: var(--fg-2); }
.ui-row .len { text-align: right; color: var(--fg-3); }
.ui-row .star { color: var(--yellow); text-align: center; }
.ui-row.sel { background: #232323; }
.ui-row.sel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--lime); }
.ui-row.sel .n { color: var(--lime); }
/* The new point: it pops up and stays highlighted. */
.ui-row.new { background: rgba(200, 236, 70, 0.16); box-shadow: inset 0 0 0 1px rgba(200, 236, 70, 0.6); animation: ui-row-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.ui-row.new span { color: var(--fg-strong); }
.ui-row.new .n { color: var(--lime); }
@keyframes ui-row-in {
  0% { opacity: 0; transform: translateY(16px) scale(0.96); }
  60% { opacity: 1; transform: scale(1.05); background: rgba(200, 236, 70, 0.4); }
  100% { transform: none; }
}

.ui-tl { position: absolute; left: 48px; top: 408px; width: 912px; height: 132px; background: var(--inset); border-top: 1px solid var(--line); }
.ui-gut { position: absolute; left: 12px; font-size: 9.5px; font-weight: 600; letter-spacing: 0.07em; color: var(--fg-3); }
.ui-ruler { position: absolute; left: 76px; width: 824px; top: 0; height: 26px; border-bottom: 1px solid var(--line); }
.ui-ruler span { position: absolute; top: 7px; transform: translateX(-50%); font-size: 9.5px; color: var(--fg-3); }
.ui-ruler span::after { content: ""; position: absolute; left: 50%; top: 13px; height: 6px; border-left: 1px solid var(--line-2); }
.ui-marks { position: absolute; left: 76px; width: 824px; top: 38px; height: 28px; background: var(--card); border-radius: 4px; }
.ui-mk { position: absolute; top: 0; height: 100%; background: var(--lime); border-radius: 2px; transition: left 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s; }
.ui-mk.fav { background: var(--yellow); }
.ui-mk.pend { background: repeating-linear-gradient(135deg, rgba(200, 236, 70, 0.6) 0 4px, rgba(200, 236, 70, 0.2) 4px 8px); }
.ui-mk.pop { animation: ui-pop 0.35s ease-out; }
@keyframes ui-pop { 50% { transform: scaleY(1.35); } }
.ui-vtrack { position: absolute; left: 76px; width: 824px; top: 80px; height: 18px; border-radius: 4px; background: rgba(111, 181, 255, 0.35); transition: width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s; }
.ui-ph { position: absolute; top: 26px; bottom: 0; width: 2px; margin-left: -1px; background: var(--red); transition: opacity 0.2s; }
.ui-ph::before { content: ""; position: absolute; top: -6px; left: -4px; border: 5px solid transparent; border-top-color: var(--red); }
.ui-result { position: absolute; right: 12px; top: 102px; display: flex; gap: 8px; align-items: baseline; font-size: 12px; opacity: 0; transform: translateY(4px); transition: opacity 0.3s, transform 0.3s; }
.ui-result s { color: var(--fg-3); }
.ui-result b { color: var(--lime); font-size: 14px; }
.ui-tl.collapsed .ui-result { opacity: 1; transform: none; }
.ui-tl.collapsed .ui-ph { opacity: 0; }
/* The flags at the start and the end of the new point. */
.ui-flag { position: absolute; top: 6px; height: 62px; margin-left: -1px; border-left: 2px solid var(--lime); transform-origin: bottom; animation: ui-flag-in 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); transition: opacity 0.3s; }
.ui-flag svg { position: absolute; left: -3px; top: -4px; width: 20px; height: 20px; color: var(--lime); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); }
.ui-flag.gone { opacity: 0; }
@keyframes ui-flag-in { from { opacity: 0; transform: scaleY(0); } }


/* The action label at the bottom of the box. It is outside the stage, so the camera does not scale it. */
.ui-hud {
  position: absolute; left: 50%; bottom: 14px; display: flex; align-items: center; gap: 10px;
  padding: 6px 18px 6px 6px; border-radius: 12px; background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2), 0 10px 30px rgba(0, 0, 0, 0.6);
  font-weight: 700; font-size: 16px; color: #141414; white-space: nowrap;
  opacity: 0; transform: translate(-50%, 12px) scale(0.9); transition: opacity 0.15s, transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1); pointer-events: none;
}
.ui-hud i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--lime); color: var(--on-lime); }
.ui-hud i svg { width: 19px; height: 19px; }
.ui-hud.show { opacity: 1; transform: translate(-50%, 0); }
/* When the controls are at the bottom of the box, the label shows at the top. */
.ui-demo.hud-top .ui-hud { top: 14px; bottom: auto; transform: translate(-50%, -12px) scale(0.9); }
.ui-demo.hud-top .ui-hud.show { transform: translate(-50%, 0); }

/* ---- The image at the top of the home page (demos/hero.js) ----
   A still copy: no movement. The box shows the stage without the navigation column. */
.ui-demo.hero-shot { aspect-ratio: 912 / 540; }
.ui-demo.still .ui-stage img { animation: none; }
.hero-shot .sb { font-size: 16px; }

/* ---- Feature 2: the scoreboard in the video ----
   The sizes are in em, so the scoreboard scales with its font-size.
   --acc is the accent color of the scoreboard style. */
.sb {
  --acc: #c8ec46; position: absolute; min-width: 15em; padding: 0.55em 0.55em 0.5em 0.75em;
  font: 700 10px/1 var(--font-display); color: #f2f2f2;
  background: rgba(14, 14, 14, 0.9); border-radius: 0.7em; box-shadow: 0 0.4em 1.2em rgba(0, 0, 0, 0.5);
  transition: left 0.6s cubic-bezier(0.65, 0, 0.35, 1), top 0.6s cubic-bezier(0.65, 0, 0.35, 1), transform 0.6s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.3s,
    background-color 0.3s, color 0.3s, border-radius 0.3s;
}
.sb-title { display: flex; align-items: center; gap: 0.5em; margin-bottom: 0.45em; font-size: 0.75em; letter-spacing: 0.12em; color: var(--acc); transition: color 0.3s; }
.sb-title i { width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--acc); transition: background 0.3s; }
.sb-row { display: grid; grid-template-columns: 1fr 1.7em 1.7em 2.8em; align-items: center; height: 2em; }
.sb-name { display: flex; align-items: center; gap: 0.5em; letter-spacing: 0.04em; white-space: nowrap; }
.sb-name b { width: 0.75em; height: 0.75em; border-radius: 0.15em; }
.sb-set { text-align: center; color: #8a8a8a; }
.sb-games { text-align: center; }
.sb-pts { align-self: stretch; margin: 0.15em 0; display: grid; place-items: center; border-radius: 0.35em; background: #262626; color: #bdbdbd; transition: color 0.3s, background 0.3s; }
.sb-pts span { font-size: 1.15em; }
.sb-pts.word span { font-size: 0.72em; letter-spacing: 0.06em; }
.sb-row.lead .sb-pts { color: var(--acc); background: color-mix(in srgb, var(--acc) 18%, #141414); }
.sb .flash { animation: sb-flash 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes sb-flash { from { transform: scale(1.45); } }
/* The "light" style: a white scoreboard with square corners and a colored title band. */
.sb.light { padding: 0; border-radius: 0.25em; background: #f7f7f5; color: #141414; overflow: hidden; }
.sb.light .sb-title { margin: 0; padding: 0.55em 0.75em; background: var(--acc); color: #fff; }
.sb.light .sb-title i { background: #fff; }
.sb.light .sb-row { padding: 0 0.45em 0 0.75em; border-top: 1px solid #e2e2e2; }
.sb.light .sb-set { color: #9a9a9a; }
.sb.light .sb-pts { border-radius: 0.15em; background: #e9e9e6; color: #555; }
.sb.light .sb-row.lead .sb-pts { background: var(--acc); color: #fff; }
/* The "band" style: no title, a colored bar on the left, and a solid points cell. */
.sb.band { border-radius: 0.3em; background: rgba(16, 24, 43, 0.95); box-shadow: inset 0.35em 0 0 var(--acc), 0 0.4em 1.2em rgba(0, 0, 0, 0.5); padding-left: 0.95em; }
.sb.band .sb-title { display: none; }
.sb.band .sb-pts { border-radius: 0.2em; background: rgba(255, 255, 255, 0.1); }
.sb.band .sb-row.lead .sb-pts { background: var(--acc); color: #1a1000; }
/* The positions in the video. */
.sb.pos-tl { left: 3%; top: 4%; transform: none; }
.sb.pos-tr { left: 97%; top: 4%; transform: translateX(-100%); }
.sb.pos-bl { left: 3%; top: 96%; transform: translateY(-100%); }
.sb.pos-br { left: 97%; top: 96%; transform: translate(-100%, -100%); }

/* The copy of the Scoring tab. */
.sc-video { position: absolute; left: 48px; top: 0; width: 592px; height: 452px; overflow: hidden; background: #000; }
.sc-video img { width: 100%; height: 100%; object-fit: cover; transform-origin: 62% 45%; animation: ui-pan 16s ease-in-out infinite alternate; transition: filter 0.2s; }
.sc-video.seek img { filter: brightness(0.35); }
.sc-video .sb { font-size: 12px; }
.sc-bar { position: absolute; left: 48px; top: 452px; width: 592px; height: 88px; padding: 10px 14px 0; background: var(--inset); border-top: 1px solid var(--line); }
.sc-scrub { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--fg-3); }
.sc-track { position: relative; flex: 1; height: 6px; border-radius: 3px; background: var(--raised); }
.sc-track i { position: absolute; left: 0; top: 0; bottom: 0; width: 40%; border-radius: 3px; background: var(--lime); }
.sc-bar .ui-transport { justify-content: center; margin-top: 8px; }

.sc-side { position: absolute; left: 640px; top: 0; width: 320px; height: 540px; display: flex; flex-direction: column; background: var(--bg); border-left: 1px solid var(--line); }
.sc-panel { margin: 10px; padding: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.sc-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-bottom: 10px; font-size: 11px; color: var(--fg-3); }
.sc-nav b { font-size: 14px; color: var(--fg-strong); }
.sc-nav span:last-child { text-align: right; }
.sc-table { margin-bottom: 10px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.sc-thead, .sc-trow { display: grid; grid-template-columns: 1fr 38px 44px 46px; align-items: center; padding: 0 8px; }
.sc-thead { height: 20px; font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); background: var(--inset); }
.sc-thead span:not(:first-child), .sc-trow span:not(:first-child) { text-align: center; }
.sc-trow { height: 28px; border-top: 1px solid var(--line); font-size: 12px; font-weight: 600; }
.sc-trow .who { display: flex; align-items: center; gap: 7px; }
.sc-trow .who b, .sc-btn b, .sc-row .who b { width: 4px; height: 14px; border-radius: 2px; }
.sc-trow .set { color: var(--fg-3); }
.sc-trow .pts { justify-self: center; min-width: 32px; padding: 3px 0; border-radius: 4px; color: var(--fg-2); transition: color 0.3s, background 0.3s; }
.sc-trow.lead .pts { color: var(--lime); background: rgba(200, 236, 70, 0.14); }
.sc-trow .flash { animation: sb-flash 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.sc-ask { margin-bottom: 6px; font-size: 11.5px; font-weight: 600; color: var(--fg-2); }
.sc-btns { display: grid; grid-template-columns: 1fr 0.8fr 1fr; gap: 6px; }
.sc-btn { height: 40px; display: flex; align-items: center; justify-content: center; gap: 7px; border-radius: 6px; background: var(--raised); border: 1px solid var(--line-2); font-size: 12px; font-weight: 600; white-space: nowrap; transition: transform 0.1s, background 0.15s, border-color 0.15s; }
.sc-btn.none { color: var(--fg-3); }
.sc-head { padding: 2px 12px 8px; }
.sc-head div { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.sc-head b { font-size: 14px; font-weight: 600; color: var(--fg-strong); }
.sc-head span { font-size: 11px; color: var(--fg-2); }
.sc-head em { font-style: normal; font-weight: 600; color: var(--fg); }
.sc-progress { height: 4px; border-radius: 2px; background: var(--raised); }
.sc-progress i { display: block; height: 100%; border-radius: 2px; background: var(--lime); transition: width 0.3s; }
.sc-rows { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.sc-row { position: relative; flex: none; height: 40px; display: grid; grid-template-columns: 30px 1fr 56px; align-items: center; padding: 0 12px; border-bottom: 1px solid #191919; font-size: 11.5px; }
.sc-row .n { font-weight: 700; color: var(--fg-2); }
.sc-row .who { display: flex; align-items: center; gap: 7px; }
.sc-row:not(.won) .who { color: var(--fg-3); }
.sc-row .score { text-align: right; color: var(--fg-3); }
.sc-row.cur { background: #232323; }
.sc-row.cur::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--lime); }
.sc-row.cur .n { color: var(--lime); }
.sc-row.new { background: rgba(200, 236, 70, 0.16); box-shadow: inset 0 0 0 1px rgba(200, 236, 70, 0.6); animation: ui-row-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.sc-row.new .n, .sc-row.new .score { color: var(--lime); }
.sc-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px; border-top: 1px solid var(--line); }
.sc-foot span { height: 32px; display: grid; place-items: center; border-radius: 6px; background: var(--raised); border: 1px solid var(--line-2); font-size: 11.5px; color: var(--fg-2); transition: transform 0.1s, background 0.15s, border-color 0.15s, color 0.15s; }

/* ---- Shared controls of the copies ---- */
.ui-btn { display: inline-grid; place-items: center; height: 30px; padding: 0 12px; border-radius: 6px; background: var(--raised); border: 1px solid var(--line-2); font-size: 11.5px; font-weight: 600; color: var(--fg); white-space: nowrap; transition: transform 0.1s, background 0.15s, border-color 0.15s, color 0.15s; }
.ui-btn.lime { background: var(--lime); border-color: var(--lime); color: var(--on-lime); }
.ui-btn.lime.press { color: var(--on-lime) !important; background: #d8f27a !important; }
.ui-cap { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.ui-check { width: 16px; height: 16px; display: grid; place-items: center; border-radius: 4px; border: 1.5px solid #5a5a5a; color: transparent; transition: background 0.15s, border-color 0.15s, transform 0.1s; }
.ui-check svg { width: 13px; height: 13px; }
.ui-check.on { background: var(--lime); border-color: var(--lime); color: var(--on-lime); }
.ui-check.press { transform: scale(1.3); }
/* A pulse around an element that just changed. */
.ui-glow { animation: ui-glow 1.1s ease-out; }
@keyframes ui-glow { 0% { box-shadow: 0 0 0 0 rgba(200, 236, 70, 0.7); } 100% { box-shadow: 0 0 0 14px rgba(200, 236, 70, 0); } }

/* ---- Feature 3: a copy of the Statistics tab ---- */
.st-left { position: absolute; left: 48px; top: 0; width: 456px; height: 540px; }
.st-grid, .st-thead, .st-row, .st-gt, .st-mo { display: grid; grid-template-columns: 84px 1fr 84px 64px; align-items: center; }
.st-thead { height: 40px; border-bottom: 1px solid var(--line); font-size: 12.5px; font-weight: 700; }
.st-thead .p1 { padding-left: 12px; display: flex; align-items: center; gap: 6px; }
.st-thead .p2 { padding-right: 12px; display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.st-thead .p1 b, .st-thead .p2 b { width: 8px; height: 8px; border-radius: 50%; }
.st-thead .mid { text-align: center; font-size: 13px; font-weight: 600; color: var(--fg); }
.st-lane { align-self: stretch; display: grid; place-items: center; background: rgba(200, 236, 70, 0.035); border-left: 1px solid rgba(200, 236, 70, 0.14); }
.st-thead .st-lane { font-size: 9.5px; letter-spacing: 0.05em; color: #bcc49f; text-transform: uppercase; }
.st-scope { display: flex; gap: 0; margin: 8px 76px 8px 12px; height: 28px; border: 1px solid var(--line-2); border-radius: 6px; overflow: hidden; }
.st-scope span { flex: 1; display: grid; place-items: center; font-size: 11px; color: var(--fg-2); border-left: 1px solid var(--line-2); transition: background 0.15s, color 0.15s, transform 0.1s; }
.st-scope span:first-child { border-left: 0; }
.st-scope span.sel { background: var(--lime-tint); color: var(--lime); font-weight: 600; }
.st-mo { height: 102px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.st-mo-main { grid-column: 1 / 4; padding: 8px 12px 6px; height: 100%; }
.st-mo-main b { display: block; font-size: 11.5px; color: #bcc49f; margin-bottom: 2px; }
.st-mo svg { width: 100%; height: 70px; display: block; }
.st-mo .st-lane { place-items: start center; padding-top: 10px; }
.st-gt .t { grid-column: 1 / 4; display: flex; align-items: center; gap: 10px; padding: 0 12px; height: 26px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: #bcc49f; }
.st-gt .t::before, .st-gt .t::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.st-gt .t::before { max-width: 40px; }
.st-gt .st-lane { font-size: 9.5px; color: var(--fg-3); }
.st-row { height: 44px; border-bottom: 1px solid #1b1b1b; }
.st-row .v { padding: 0 12px; font-size: 18px; font-weight: 700; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.st-row .v.p2 { text-align: right; }
.st-row .v.lead { color: #fff; }
.st-row .mid { text-align: center; font-size: 11.5px; color: var(--fg); }
.st-bar { display: flex; gap: 3px; height: 5px; margin-top: 5px; }
.st-bar i { border-radius: 3px; transition: flex-grow 0.25s; }
.st-row.inv .st-lane { background: rgba(200, 236, 70, 0.08); }
.st-row.new { animation: ui-glow-row 1.2s ease-out; }
@keyframes ui-glow-row { 0% { background: rgba(200, 236, 70, 0.3); } 100% { background: transparent; } }

.st-col { position: absolute; left: 504px; top: 0; width: 456px; height: 540px; padding: 14px 16px; background: var(--card); border-left: 1px solid var(--line); }
.st-col h4 { margin: 0; font-size: 14px; color: var(--fg-strong); }
.st-sub { margin: 2px 0 10px; font-size: 11px; color: var(--fg-2); }
.st-prev { position: relative; height: 238px; border-radius: 6px; overflow: hidden; background: #000; }
.st-prev .ui-photo { filter: brightness(0.55); }
.st-pcard { position: absolute; left: 50%; top: 50%; width: 250px; transform: translate(-50%, -50%); padding: 10px 12px; border-radius: 8px; background: rgba(12, 12, 12, 0.88); font-family: var(--font-display); transition: opacity 0.25s; }
.st-pcard.out { opacity: 0; }
.st-ptitle { display: flex; align-items: center; gap: 6px; font-size: 9px; font-weight: 700; letter-spacing: 0.12em; color: var(--lime); margin-bottom: 6px; }
.st-ptitle::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }
.st-phead { display: flex; justify-content: space-between; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; padding-bottom: 4px; border-bottom: 1px solid #2a2a2a; }
.st-prow { display: grid; grid-template-columns: 28px 1fr 28px; align-items: center; height: 20px; font-size: 9.5px; color: #cfcfcf; text-align: center; }
.st-prow b { font-size: 11px; color: #9a9a9a; }
.st-prow b:first-child { text-align: left; }
.st-prow b:last-child { text-align: right; }
.st-prow b.lead { color: var(--lime); }
.st-prow.new { animation: ui-glow-row 1.4s ease-out; border-radius: 3px; }
.st-pchart { width: 100%; height: 90px; display: block; margin-top: 4px; }
.st-pager { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; font-size: 11px; color: var(--fg-2); }
.st-field { margin-top: 14px; font-size: 11.5px; }
.st-field div { display: flex; justify-content: space-between; margin-bottom: 6px; }
.st-help { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 11px; line-height: 1.5; color: var(--fg-2); }

/* A slider: the track, the filled part, and the knob. --v is the position from 0 to 1. */
.ui-slider { --v: 0.5; position: relative; height: 16px; }
.ui-slider::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 3px; border-radius: 2px; background: #333; }
.ui-slider i { position: absolute; left: 0; top: 7px; height: 3px; width: calc(var(--v) * 100%); border-radius: 2px; background: var(--lime); }
.ui-slider b { position: absolute; top: 1px; left: calc(var(--v) * 100% - 7px); width: 14px; height: 14px; border-radius: 50%; background: #f2f2f2; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); transition: transform 0.15s; }
.ui-slider.drag b { transform: scale(1.3); box-shadow: 0 0 0 5px rgba(200, 236, 70, 0.3); }
/* A slider with the zero in the middle fills from the middle. */
.ui-slider.mid i { left: min(50%, calc(var(--v) * 100%)); width: calc(max(var(--v) - 0.5, 0.5 - var(--v)) * 100%); }

/* ---- Feature 4: comments in the Points tab ---- */
.cm-cap {
  position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%) translateY(6px); max-width: 86%;
  padding: 5px 12px; border-radius: 6px; font: 600 19px/1.25 var(--font); white-space: nowrap;
  opacity: 0; transition: opacity 0.2s, transform 0.2s;
}
.cm-cap.show { opacity: 1; transform: translateX(-50%); }
.cm-cap.box { background: #f2d64b; color: #141414; }
.cm-cap.dark { background: rgba(20, 20, 20, 0.88); color: #f2d64b; }
.cm-cap.outline { padding: 0; color: #f2d64b; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 4px #000; }
.cm-cap.blue { background: #1d4ed8; color: #fff; }
.cm-dialog {
  position: absolute; left: 50%; top: 62%; width: 320px; transform: translate(-50%, -50%) scale(0.9); opacity: 0;
  padding: 14px; border-radius: 10px; background: #1e1e1e; border: 1px solid var(--line-2); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  transition: opacity 0.15s, transform 0.2s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.cm-dialog.show { opacity: 1; transform: translate(-50%, -50%); }
.cm-dialog h5 { display: flex; justify-content: space-between; margin: 0 0 10px; font-size: 14px; color: var(--fg-strong); }
.cm-dialog h5 span { font-size: 11px; font-weight: 400; color: var(--fg-3); }
.cm-field { min-height: 52px; padding: 8px 10px; border-radius: 6px; background: var(--inset); border: 1px solid var(--lime); font-size: 14px; color: var(--fg-strong); }
.cm-field::after { content: ""; display: inline-block; width: 1.5px; height: 15px; margin-left: 1px; vertical-align: -2px; background: var(--lime); animation: cm-caret 0.9s steps(1) infinite; }
@keyframes cm-caret { 50% { opacity: 0; } }
.cm-btns { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; }
.cm-list { flex: 1; min-height: 0; overflow: hidden; border-top: 1px solid var(--line); }
.cm-row { position: relative; display: grid; grid-template-columns: 62px 1fr; gap: 6px; align-items: center; min-height: 44px; padding: 6px 12px; border-bottom: 1px solid #191919; font-size: 11.5px; transition: background 0.2s; }
.cm-row .t { color: var(--fg-3); font-variant-numeric: tabular-nums; }
.cm-row.on { background: #232323; }
.cm-row.on::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--yellow); }
.cm-row.new { animation: ui-row-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; background: rgba(242, 214, 75, 0.14); }
.cm-lane { position: absolute; left: 76px; width: 824px; top: 76px; height: 26px; background: var(--card); border-radius: 4px; }
.cm-mk { position: absolute; top: 3px; width: 20px; height: 20px; margin-left: -10px; display: grid; place-items: center; border-radius: 5px; background: var(--yellow); color: #141414; }
.cm-mk svg { width: 13px; height: 13px; }
.cm-mk.new { animation: ui-flag-in 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); }
.cm-mk.hit { box-shadow: 0 0 0 3px rgba(242, 214, 75, 0.45); }
/* While the video plays, the button shows the pause bars. */
.ui-play.playing svg { display: none; }
.ui-play.playing::before { content: ""; width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; box-sizing: border-box; }

/* ---- Feature 5: a copy of the Adjustments and the Crop tabs ---- */
.pc-video { position: absolute; left: 48px; top: 0; width: 552px; height: 452px; overflow: hidden; background: #000; }
.pc-frame { position: absolute; inset: 0; }
.pc-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pc-grid { position: absolute; inset: 0; opacity: 0; transition: opacity 0.25s; pointer-events: none;
  background:
    linear-gradient(90deg, transparent calc(33.33% - 0.5px), rgba(255, 255, 255, 0.45) calc(33.33% - 0.5px) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px) calc(66.66% - 0.5px), rgba(255, 255, 255, 0.45) calc(66.66% - 0.5px) calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px)),
    linear-gradient(180deg, transparent calc(33.33% - 0.5px), rgba(255, 255, 255, 0.45) calc(33.33% - 0.5px) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px) calc(66.66% - 0.5px), rgba(255, 255, 255, 0.45) calc(66.66% - 0.5px) calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px)); }
.pc-grid.show { opacity: 1; }
.pc-bar { position: absolute; left: 48px; top: 452px; width: 552px; height: 88px; padding: 10px 14px 0; background: var(--inset); border-top: 1px solid var(--line); }
.pc-bar .ui-transport { justify-content: center; margin-top: 8px; }
.pc-panel { position: absolute; left: 600px; top: 0; width: 360px; height: 540px; padding: 0 12px; background: var(--bg); border-left: 1px solid var(--line); }
.pc-head { display: flex; align-items: center; justify-content: space-between; height: 54px; }
.pc-head h4 { margin: 0; font-size: 15px; color: var(--fg-strong); }
.pc-head h4 span { display: block; font-size: 11px; font-weight: 400; color: var(--fg-3); }
.pc-group { margin-bottom: 10px; padding: 6px 0 8px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.pc-group .ui-cap { padding: 4px 14px; }
.pc-line { position: relative; display: grid; grid-template-columns: 82px 1fr 52px; gap: 10px; align-items: center; height: 34px; padding: 0 14px; font-size: 12px; }
.pc-line .val { height: 22px; display: grid; place-items: center; border-radius: 5px; background: var(--inset); border: 1px solid var(--line-2); font-size: 11px; font-variant-numeric: tabular-nums; }
.pc-line.changed::before { content: ""; position: absolute; left: 0; top: 7px; height: 20px; width: 2px; border-radius: 0 2px 2px 0; background: var(--lime); }
.pc-page { display: none; }
.pc-page.on { display: block; }

/* ---- Feature 6: a copy of the Export tab ---- */
.ex-config { position: absolute; left: 48px; top: 0; width: 380px; height: 540px; display: flex; flex-direction: column; background: var(--card); border-right: 1px solid var(--line); }
.ex-scroll { flex: 1; padding: 12px 16px 0; }
.ex-step { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.ex-step + * + .ex-step, .ex-gap { margin-top: 14px; }
.ex-step i { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--lime-edge); color: var(--lime); font-size: 10px; font-style: normal; font-weight: 700; }
.ex-choices { display: grid; gap: 5px; }
.ex-choice { display: grid; grid-template-columns: 14px 1fr auto; gap: 10px; align-items: center; height: 38px; padding: 0 12px; border-radius: 7px; background: var(--raised); border: 1px solid var(--line); font-size: 12px; transition: transform 0.1s, background 0.15s, border-color 0.15s; }
.ex-choice::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid #5a5a5a; box-sizing: border-box; }
.ex-choice.sel { border-color: rgba(200, 236, 70, 0.5); background: linear-gradient(var(--lime-tint), var(--lime-tint)), var(--raised); }
.ex-choice.sel::before { border: 4px solid var(--lime); }
.ex-choice small { font-size: 11px; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.ex-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.ex-tile { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border-radius: 6px; background: var(--raised); border: 1px solid var(--line); font-size: 11.5px; }
.ex-tile .ui-check { width: 14px; height: 14px; }
.ex-enc { display: grid; gap: 4px; }
.ex-enc div { display: grid; grid-template-columns: 1fr auto; align-items: center; height: 30px; padding: 0 10px; border-radius: 6px; background: var(--raised); border: 1px solid var(--line); font-size: 11.5px; transition: background 0.2s, border-color 0.2s, opacity 0.2s; }
.ex-enc span { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--fg-3); }
.ex-enc span svg { width: 13px; height: 13px; }
.ex-enc .ok span { color: var(--lime); }
.ex-enc .no { opacity: 0.45; }
.ex-enc .sel { border-color: var(--lime); background: linear-gradient(rgba(200, 236, 70, 0.1), rgba(200, 236, 70, 0.1)), var(--raised); }
.ex-enc .test span::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--fg-3); border-top-color: transparent; animation: ex-spin 0.6s linear infinite; }
@keyframes ex-spin { to { transform: rotate(360deg); } }
.ex-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--bg); }
.ex-foot small { font-size: 11px; color: var(--fg-2); }
.ex-foot .ui-btn { height: 36px; padding: 0 22px; font-size: 13px; }
.ex-side { position: absolute; left: 428px; top: 0; width: 532px; height: 540px; padding: 14px 16px; background: var(--bg); }
.ex-side h4 { margin: 0 0 12px; font-size: 15px; color: var(--fg-strong); }
.ex-side .ui-cap { margin: 10px 0 6px; }
.ex-row { display: grid; grid-template-columns: 30px 1fr 112px; gap: 10px; align-items: center; height: 58px; padding: 0 12px; margin-bottom: 6px; border-radius: 8px; background: var(--card); border: 1px solid var(--line); animation: ui-row-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.ex-row .ic { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 6px; background: var(--raised); color: var(--fg-2); }
.ex-row .ic svg { width: 17px; height: 17px; }
.ex-row b { display: block; font-size: 12px; font-weight: 600; color: var(--fg-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-row small { display: block; margin-top: 2px; font-size: 10.5px; color: var(--fg-3); }
.ex-prog { height: 5px; margin-top: 6px; border-radius: 3px; background: #2c2c2c; overflow: hidden; }
.ex-prog i { display: block; height: 100%; width: 0; background: var(--lime); }
.ex-row .st { text-align: right; font-size: 11px; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.ex-row .st em { display: block; font-style: normal; font-size: 10.5px; color: var(--fg-3); }
.ex-row.done { border-color: rgba(200, 236, 70, 0.35); }
.ex-row.done .ic { background: var(--lime); color: var(--on-lime); }
.ex-row.done .st { color: var(--lime); font-weight: 600; }
.ex-row.wait { opacity: 0.7; }
.ex-speed { color: var(--lime) !important; }