/* Thegrop — styles.
   Hero prototype: a 3D world with an After Effects-style timeline / graph
   editor. Palette and fonts are placeholders until Lau picks from options. */

:root {
  --bg: #050608;
  --fg: #e6f7ff;
  --muted: rgba(170, 220, 240, .55);
  --holo: #4fd8ff;
  --holo-dim: rgba(79, 216, 255, .22);
  --holo-faint: rgba(79, 216, 255, .08);
  --hot: #ff3b6b;
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ui-font: "Martian Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --mono: var(--ui-font);
  --pad: max(16px, env(safe-area-inset-left, 0px));
}

/* The editor's font: Martian Mono (pinned version, from jsDelivr) */
@font-face {
  font-family: "Martian Mono"; font-weight: 400; font-display: swap;
  src: url(https://cdn.jsdelivr.net/npm/@fontsource/martian-mono@5.3.0/files/martian-mono-latin-400-normal.woff2) format("woff2");
}
@font-face {
  font-family: "Martian Mono"; font-weight: 500 700; font-display: swap;
  src: url(https://cdn.jsdelivr.net/npm/@fontsource/martian-mono@5.3.0/files/martian-mono-latin-600-normal.woff2) format("woff2");
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Top bar ---------- */

.topbar {
  position: absolute; inset: 0 0 auto 0; z-index: 2;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px var(--pad);
  font-size: 13px;
}
.topbar a { color: var(--muted); text-decoration: none; transition: color .2s; }
.topbar a:hover, .topbar a:focus-visible { color: var(--holo); }
.topbar-links { display: flex; gap: 18px; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column;
  padding: 56px var(--pad) max(16px, env(safe-area-inset-bottom, 0px));
  background: radial-gradient(60% 50% at 50% 42%, rgba(79, 216, 255, .08), transparent 70%), var(--bg);
  overflow: hidden;
}

/* The 3D world sits behind everything in the hero */
.scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }

.stage {
  position: relative; z-index: 1; flex: 1; min-height: 260px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none;
}

/* Flat SVG logo: only shown if the 3D scene can't run */
.mover {
  --x: 0px;
  position: relative;
  transform: translateX(var(--x));
}
.is-3d .mover { visibility: hidden; }
.logo {
  width: min(400px, 58vw); height: auto; overflow: visible;
  filter: drop-shadow(0 0 18px rgba(79, 216, 255, .55));
}
.letter {
  fill: rgba(79, 216, 255, .25); stroke: var(--holo); stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box; transform-origin: 50% 100%;
}

.is-3d .tagline {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.tagline {
  position: absolute; left: 0; right: 0; bottom: 6%;
  margin: 0; text-align: center;
  font-size: clamp(15px, 2.2vw, 20px); letter-spacing: .02em;
  text-shadow: 0 0 12px rgba(79, 216, 255, .6);
}
.tagline span { color: var(--holo); }

/* ---------- Holographic panel ---------- */

.panel {
  --sel: var(--holo);
  font-family: var(--ui-font, var(--font));
  position: relative; z-index: 1;
  width: 100%; max-width: 980px; margin: 0 auto;
  background: rgba(6, 22, 32, .55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(79, 216, 255, .35); border-radius: 6px;
  box-shadow: 0 0 28px rgba(79, 216, 255, .14), inset 0 0 40px rgba(79, 216, 255, .05);
  font-size: 12px; overflow: hidden;
}
/* Scanlines over the whole panel */
.panel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(79, 216, 255, .045) 0 1px, transparent 1px 3px);
}

.panel-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px; border-bottom: 1px solid var(--holo-dim);
  background: var(--holo-faint);
}
.panel-title { color: var(--holo); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 0 8px rgba(79, 216, 255, .7); }
.panel-hint { color: var(--muted); font-size: 11px; }

.panel-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }

.timeline {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px; border-right: 1px solid var(--holo-dim);
}

.tl-head { display: flex; align-items: center; gap: 10px; }
.play {
  width: 26px; height: 26px; display: grid; place-items: center;
  background: var(--holo-faint); border: 1px solid var(--holo-dim); border-radius: 4px; cursor: pointer;
}
.play svg { width: 12px; height: 12px; fill: var(--holo); }
.play .i-play { display: none; }
.is-paused .play .i-play { display: block; }
.is-paused .play .i-pause { display: none; }
.timecode { font-family: var(--mono); color: var(--holo); font-size: 14px; font-variant-numeric: tabular-nums; text-shadow: 0 0 8px rgba(79, 216, 255, .8); }

/* Layer rows: eye, name, keyframe track */
.layers { --name: 88px; display: flex; flex-direction: column; gap: 2px; }
.layer { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 4px; }
.eye {
  width: 20px; height: 20px; padding: 0; display: grid; place-items: center;
  background: none; border: 0; cursor: pointer; color: var(--holo);
}
.eye svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.eye[aria-pressed="false"] { color: rgba(170, 220, 240, .25); }
.eye:focus-visible, .layer-pick:focus-visible { outline: 1px solid var(--holo); outline-offset: 1px; }

.layer-pick {
  display: grid; grid-template-columns: var(--name) minmax(0, 1fr); align-items: center; gap: 8px;
  border-radius: 3px; cursor: pointer; color: var(--muted);
}
.layer-pick:hover { color: var(--fg); }
.layer-pick[aria-checked="true"] { color: var(--fg); }
.layer-name { display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--mono); font-size: 11px; }
.layer-name i { flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--c); box-shadow: 0 0 6px var(--c); }
.is-off .layer-name { opacity: .45; }
.is-off .layer-name i { box-shadow: none; opacity: .4; }

.track {
  position: relative; height: 18px;
  background: repeating-linear-gradient(90deg, var(--holo-faint) 0 1px, transparent 1px 10%) rgba(0, 0, 0, .35);
  border: 1px solid var(--holo-faint); border-radius: 3px; touch-action: none;
}
.layer-pick[aria-checked="true"] .track { border-color: var(--holo-dim); background-color: rgba(79, 216, 255, .07); }
.key {
  position: absolute; top: 50%; left: 0; width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px; background: var(--fg);
  transform: rotate(45deg);
  box-shadow: 0 0 6px var(--holo);
}
.key:first-child { margin-left: 0; }
.is-off .key { opacity: .3; }
/* Eased keyframes get After Effects' hourglass shape */
.is-eased .key { transform: none; clip-path: polygon(0 0, 100% 0, 50% 50%, 100% 100%, 0 100%, 50% 50%); }
.key-inner, .key-end { cursor: ew-resize; }
.key-inner::after, .key-end::after { content: ""; position: absolute; inset: -6px; }
.key-inner:focus-visible, .key-end:focus-visible { outline: 2px solid var(--holo); outline-offset: 3px; }
/* Each layer's own playhead */
.tick {
  position: absolute; top: -2px; bottom: -2px; left: var(--tick, 0); width: 1.5px;
  background: var(--c); box-shadow: 0 0 6px var(--c); pointer-events: none;
}
.is-off .tick { display: none; }

.presets { display: flex; flex-wrap: wrap; gap: 6px; }
.presets button {
  background: var(--holo-faint); border: 1px solid var(--holo-dim); border-radius: 4px;
  padding: 4px 8px; color: var(--muted); cursor: pointer;
}
.presets button:hover, .presets button:focus-visible { color: var(--fg); border-color: var(--holo); }
.presets button.is-active { color: var(--fg); border-color: var(--holo); box-shadow: 0 0 10px rgba(79, 216, 255, .35); }

.graph { position: relative; padding: 8px; }
#graph { display: block; width: 100%; height: 150px; touch-action: none; overflow: visible; }
.grid line { stroke: var(--holo-faint); stroke-width: 1; vector-effect: non-scaling-stroke; }
.grid .base { stroke: var(--holo-dim); }
.curve { fill: none; stroke: var(--holo); stroke-width: 2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px var(--holo)); }
.arm { stroke: var(--hot); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .8; }
.anchor { fill: var(--fg); stroke: var(--bg); stroke-width: 1.5; vector-effect: non-scaling-stroke; cursor: move; }
.anchor.is-end { cursor: default; }
.anchor:hover:not(.is-end), .anchor.is-dragging { fill: var(--holo); }
.anchor:focus-visible { outline: none; stroke: var(--holo); stroke-width: 2.5; }
/* How to add / remove keyframes (desktop only) */
.graph-tip {
  position: absolute; right: 12px; top: 6px; margin: 0;
  font-size: 10px; color: var(--muted); pointer-events: none; text-align: right;
}
.graph-tip kbd {
  font: inherit; padding: 0 4px; border: 1px solid var(--holo-dim); border-radius: 3px; color: var(--fg);
}
.dot { fill: var(--sel); filter: drop-shadow(0 0 4px var(--sel)); }
.handle { fill: var(--bg); stroke: var(--hot); stroke-width: 2; vector-effect: non-scaling-stroke; cursor: grab; filter: drop-shadow(0 0 4px var(--hot)); }
.handle:hover, .handle.is-dragging { fill: var(--hot); }
.handle:focus-visible { outline: none; stroke: var(--fg); }

/* ---------- Render modes (on top of the timeline) ---------- */

.render-modes {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 12px; border-bottom: 1px solid var(--holo-dim);
  background: var(--holo-faint);
  overflow-x: auto; scrollbar-width: none;
}
.render-label { color: var(--holo); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-right: 8px; }
.render-modes button:not(.swatch) {
  flex: none; padding: 7px 14px; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 500;
  background: rgba(0, 0, 0, .18); border: 1px solid var(--holo-dim); color: var(--muted);
}
.render-modes button:not(.swatch):hover { color: var(--fg); border-color: var(--holo); }
.render-modes button:focus-visible { outline: 1px solid var(--holo); outline-offset: 1px; }
.render-modes button[aria-checked="true"] { color: var(--fg); border-color: var(--holo); background: color-mix(in srgb, var(--holo) 22%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--holo) 30%, transparent); }
/* The look's two colours, as small swatches you can click to change */
.swatches { margin-left: auto; display: flex; gap: 6px; flex: none; padding-left: 8px; }
.swatch {
  flex: none; width: 24px; height: 24px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 2px solid rgba(0, 0, 0, .35); box-shadow: 0 0 0 1px var(--holo-dim);
}
.swatch[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--holo); }
.swatch:focus-visible { outline: 1px solid var(--holo); outline-offset: 3px; }

/* The colour picker pops up above the swatches, in the style's own colours */
.picker {
  position: absolute; z-index: 3; width: 212px; padding: 10px;
  display: flex; flex-direction: column; gap: 10px;
  background: color-mix(in srgb, var(--holo) 6%, rgba(8, 10, 14, .92));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--holo-dim); border-radius: 10px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
}
.picker[hidden] { display: none; }
.picker-sv { position: relative; height: 130px; border-radius: 6px; cursor: crosshair; touch-action: none; }
.picker-hue {
  position: relative; height: 12px; border-radius: 6px; cursor: pointer; touch-action: none;
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}
.picker-knob {
  position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .4); pointer-events: none;
}
.picker-hue .picker-knob { top: 50%; }
.picker-sv:focus-visible, .picker-hue:focus-visible { outline: 1px solid var(--holo); outline-offset: 2px; }
.picker-row { display: flex; align-items: center; gap: 8px; }
.picker-chip { width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--holo-dim); flex: none; }
.picker-row input {
  flex: 1; min-width: 0; padding: 5px 8px; border-radius: 6px;
  background: rgba(0, 0, 0, .3); border: 1px solid var(--holo-dim); color: var(--fg);
  font-family: var(--mono); font-size: 12px; text-transform: uppercase;
}
.picker-row input:focus { outline: none; border-color: var(--holo); }
[data-look="toy"] .picker { background: color-mix(in srgb, var(--toy-bg, #4a5bd8) 70%, rgba(20, 20, 40, .7)); border-radius: 14px; }
[data-look="viewport"] .picker { background: #303338; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- Switching looks ---------- */

/* Wipe: a scan line travels down; above it the new look, below it a still of the old one.
   js/main.js drives --wipe from 0% to 100%. */
.scene-old {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
  display: none; clip-path: inset(var(--wipe, 0%) 0 0 0);
}
.switch-scan {
  position: absolute; left: 0; right: 0; top: var(--wipe, 0%); height: 2px; margin-top: -1px;
  z-index: 1; pointer-events: none; display: none;
  background: var(--holo); box-shadow: 0 0 18px 4px var(--holo);
}
.is-switching .scene-old, .is-switching .switch-scan { display: block; }

/* ---------- Looks: the panel and page follow the 3D look ---------- */

/* Viewport: a 3D app's editor, flat grey panels, orange selection */
[data-look="viewport"] {
  --bg: #2a2d31; --fg: #e4e6e9; --muted: rgba(220, 224, 230, .55);
  --holo: #5aa9ff; --holo-dim: rgba(255, 255, 255, .14); --holo-faint: rgba(255, 255, 255, .05); --hot: #ff9a1f;
}
[data-look="viewport"] .hero { background: radial-gradient(90% 80% at 50% 40%, #50545b, #2a2d31 75%); }
[data-look="viewport"] .panel { background: #303338; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: #44474d; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
[data-look="viewport"] .panel-bar { background: #3a3d43; }

/* Tron: black, neon blue lines, red accent */
[data-look="tron"], [data-look="led"], [data-look="dust"] {
  --holo-dim: color-mix(in srgb, var(--holo) 30%, transparent);
  --holo-faint: color-mix(in srgb, var(--holo) 8%, transparent);
}
[data-look="tron"] { --holo: #5aa2ff; --hot: #ff3b6b; }
[data-look="tron"] .panel { background: rgba(0, 4, 12, .7); }

/* LED wall: black, warm white UI, blue/red content */
[data-look="led"] { --holo: #2f7bff; --hot: #ff3b6b; }
[data-look="dust"] { --holo: #2ee6a6; --hot: #2f8fff; }

/* Toy box: soft, rounded, a tinted glass panel over the coloured background */
[data-look="toy"] {
  --fg: #ffffff; --muted: rgba(255, 255, 255, .7);
  --holo: #ffffff; --holo-dim: rgba(255, 255, 255, .28); --holo-faint: rgba(255, 255, 255, .1); --hot: #ff5fa2;
}
[data-look="toy"] .hero { background: var(--toy-bg, #4a5bd8); }
[data-look="toy"] .panel {
  background: color-mix(in srgb, var(--toy-bg, #4a5bd8) 55%, rgba(20, 20, 40, .45));
  border-radius: 16px; border-color: rgba(255, 255, 255, .25); box-shadow: 0 18px 50px rgba(20, 20, 60, .35);
}
[data-look="led"] .panel { background: rgba(10, 8, 4, .7); }

/* Glow and scanlines belong to the Tron and LED looks only */
[data-look="viewport"] .panel::after, [data-look="toy"] .panel::after { display: none; }
[data-look="viewport"] *, [data-look="toy"] * { text-shadow: none !important; }
[data-look="viewport"] .curve, [data-look="viewport"] .handle,
[data-look="toy"] .curve, [data-look="toy"] .handle { filter: none; }

/* No mouse, no Alt-click: hide the tip on touch screens */
@media (hover: none) { .graph-tip { display: none; } }

/* ---------- Phone ---------- */

@media (max-width: 720px) {
  .topbar-mail { display: none; }
  .topbar { justify-content: flex-end; }
  .panel-body { grid-template-columns: 1fr; }
  .timeline { border-right: 0; border-bottom: 1px solid var(--holo-dim); }
  .logo { width: 62vw; }
  .presets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .presets button { flex: none; }
  #graph { height: 92px; }
  .panel-hint { display: none; }
  .graph-tip { display: none; }
  .render-modes { gap: 5px; padding: 8px 10px; }
  .render-modes button:not(.swatch) { padding: 6px 10px; font-size: 13px; }
  .render-label { display: none; }
  .tagline { bottom: 3%; }
}

@media (prefers-reduced-motion: reduce) {
  .topbar a { transition: none; }
}

/* ---------- Custom cursor per look (mouse only, over the hero) ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 20; pointer-events: none; display: none; will-change: transform; }
.has-cursor .cursor.is-on { display: block; }
.has-cursor .hero, .has-cursor .hero * { cursor: none !important; }
.has-cursor .hero .picker, .has-cursor .hero .picker * { cursor: auto !important; }
.cursor svg { display: block; overflow: visible; }
.cursor .c-shape { transition: transform .15s ease-out; transform-origin: 0 0; }
/* Wireframe: crosshair reticle */
.cursor .c-reticle { transform: translate(-16px, -16px); }
.cursor.is-hover .c-reticle { transform: translate(-16px, -16px) scale(1.25); transform-origin: 16px 16px; }
/* Toy box: chunky candy pointer that squishes on click */
.cursor .c-toy { filter: drop-shadow(2px 4px 3px rgba(20, 20, 60, .35)); transform-origin: 4px 4px; transition: transform .18s cubic-bezier(.3, 1.6, .5, 1); }
.cursor.is-down .c-toy { transform: scale(1.18, .78); transition-duration: .06s; }
.cursor.is-hover .c-toy { transform: rotate(-8deg) scale(1.08); }
/* Particles: a glowing dot */
.cursor .c-dot { width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 6px 2px var(--holo), 0 0 18px 6px color-mix(in srgb, var(--hot) 55%, transparent); transition: transform .15s; }
.cursor.is-hover .c-dot, .cursor.is-down .c-dot { transform: scale(1.5); }
/* Viewport: move gizmo, grab hand over the curve handles */
.cursor .c-hand { display: none; transform: translate(-12px, -10px); }
.cursor.is-grab .c-gizmo { display: none; }
.cursor.is-grab .c-hand { display: block; }
.cursor .c-hand .closed, .cursor.is-down .c-hand .open { display: none; }
.cursor.is-down .c-hand .closed { display: inline; }
.cursor .c-gizmo { transform: translate(-4px, -28px); }
/* LED wall: a little arrow made of lit LED pixels */
.cursor .c-led rect { fill: var(--holo); }
.cursor .c-led .dim { opacity: .45; }
.cursor .c-led { filter: drop-shadow(0 0 3px var(--holo)); }
.cursor.is-down .c-led rect { fill: var(--hot); }
@media (hover: none), (pointer: coarse) { .cursor { display: none !important; } }

/* Live branch only: under-construction note sitting on top of the panel */
.wip { position: relative; z-index: 1; box-sizing: border-box; width: 100%; max-width: 980px; margin: 0 auto 10px; padding: 12px 16px; text-align: center; text-transform: uppercase;
  font: 700 14px/1.4 var(--ui-font); letter-spacing: .08em; color: var(--fg);
  background: rgba(0, 4, 12, .7); border: 1px solid var(--holo-dim); border-radius: 6px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
[data-look="viewport"] .wip { background: #303338; }
[data-look="toy"] .wip { background: color-mix(in srgb, var(--toy-bg, #4a5bd8) 70%, rgba(20, 20, 40, .7)); }
/* Dots and text sit in one row, so a dot can never drop to its own line */
.wip { display: flex; align-items: center; justify-content: center; }
.wip::before, .wip::after { content: ""; flex: none; width: 7px; height: 7px; margin: 0 10px; border-radius: 50%; background: var(--hot); box-shadow: 0 0 6px var(--hot); }
.wip span { color: var(--muted); font-weight: 500; margin-left: .6em; }
@media (max-width: 600px) {
  .wip span { display: none; }
  .wip { padding: 12px 10px; font-size: 12px; letter-spacing: .06em; }
  .wip::before, .wip::after { margin: 0 8px; }
}

/* While under construction the contact links sit just above the note, not in the top bar */
.topbar { display: none; }
.wip-links { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 28px; margin: 0 auto 10px;
  font: 500 12px/1.4 var(--ui-font); letter-spacing: .06em; text-transform: uppercase; }
.wip-links a { color: var(--fg); text-decoration: none; opacity: .8; }
.wip-links a:hover { opacity: 1; color: var(--holo); }

/* ---------- Phone: tidy bottom section (layout option "A · Tidy") ----------
   Slimmer links strip and under-construction pill, no panel title bar, a smaller
   Look bar, play + timecode share a row with the presets, tighter layer rows,
   and the graph 10% shorter. Lifted a little off the bottom of the screen. */
.mail-short { display: none; }
@media (max-width: 720px) {
  .hero { padding-bottom: max(22px, calc(env(safe-area-inset-bottom, 0px) + 14px)); }
  .mail-full { display: none; }
  .mail-short { display: inline; }
  .wip-links { flex-wrap: nowrap; gap: 0 18px; margin-bottom: 8px; font-size: 10.5px; }
  .wip { padding: 7px 10px; font-size: 10.5px; margin-bottom: 8px; border-radius: 999px; }
  .wip::before, .wip::after { width: 6px; height: 6px; margin: 0 7px; }

  .panel-bar { display: none; }
  .render-modes { padding: 4px 8px; gap: 4px; }
  .render-modes button:not(.swatch) { padding: 4px 9px; font-size: 11px; border-radius: 5px; }
  .swatch { width: 20px; height: 20px; }
  .swatches { gap: 5px; padding-left: 6px; }

  .timeline {
    padding: 6px 8px 4px;
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 10px;
  }
  .tl-head { grid-column: 1; grid-row: 1; gap: 8px; }
  .presets { grid-column: 2; grid-row: 1; gap: 4px; }
  .layers { grid-column: 1 / -1; grid-row: 2; --name: 70px; gap: 0; }
  .eye { height: 17px; }
  .play { width: 22px; height: 22px; }
  .timecode { font-size: 11px; }
  .layer-name { font-size: 10px; gap: 5px; }
  .layer-name i { width: 7px; height: 7px; }
  .track { height: 13px; }
  .presets button { padding: 3px 7px; font-size: 10.5px; }
  .graph { padding: 4px 8px; }
  #graph { height: 76px; }
}

/* Look bar: fade the edge that has more looks hidden past it (set by js/main.js) */
.render-modes.fade-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
.render-modes.fade-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent); }
.render-modes.fade-l.fade-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); }