/* ====================================================================
   collage radio — airy, poetic, hand-drawn doodle aesthetic
   (refs: Jiggling Atoms · Studio dogu · soft minimal listening apps)
   ==================================================================== */
@font-face {
  font-family: "Velvelyne";
  src: local("Velvelyne Light"), local("Velvelyne-Light");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Shantell Sans";
  src: url("./assets/fonts/shantell-sans/ShantellSans-FlowJam-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
}
@font-face {
  font-family: "Pangolin";
  src: url("./assets/fonts/pangolin/Pangolin-Latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Crafty Girls";
  src: url("./assets/fonts/crafty-girls/CraftyGirls-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Grandstander";
  src: url("./assets/fonts/grandstander/Grandstander-Latin-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Velvelyne";
  src: local("Velvelyne Book"), local("Velvelyne-Book"), local("Velvelyne Regular"), local("Velvelyne-Regular");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Velvelyne";
  src: local("Velvelyne Bold"), local("Velvelyne-Bold");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
:root {
  --paper:   #f8f4e7;
  --paper-2: #fffdf6;
  --ink:     #1d1b17;
  --ink-soft:#726e64;
  --line:    #c8c2b5;
  --tag:     #fbf7ea;
  --tag-2:   #eef3ee;
  --tag-3:   #f6eeee;
  --accent:  #7088c7;
  --archive-blue: #dfe5f4;
  --archive-pink: #efcfe0;
  --archive-green: #d7dfbd;
  --archive-yellow: #fae7ae;
  --archive-lilac: #ded5ec;
  --disc-color: #f2eee4;
  --canvas-color: #FFFDF8;
  --shadow:  rgba(40, 36, 28, 0.12);
  --hand:    "Velvelyne", "Arial Rounded MT Bold", "PingFang SC", sans-serif;
  --body:    "Velvelyne", "PingFang SC", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  display: flex; flex-direction: column;
  color: var(--ink);
  font-family: var(--body);
  font-weight: 400;
  background:
    radial-gradient(46% 38% at 12% 6%, rgba(214, 228, 216, 0.45) 0%, transparent 70%),
    radial-gradient(40% 36% at 90% 10%, rgba(232, 220, 226, 0.4) 0%, transparent 70%),
    radial-gradient(54% 44% at 78% 96%, rgba(224, 230, 214, 0.42) 0%, transparent 72%),
    var(--paper);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button, input, textarea { font: inherit; color: inherit; }

/* ---------------- top bar ---------------- */
.topbar {
  position: relative; z-index: 2; flex: none;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 58px; padding: 16px 30px 7px;
}
.brand {
  margin: 0;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--hand);
  font-size: 24px; font-weight: 600;
  letter-spacing: 0.01em;
}
.brand-mark { width: 28px; height: 28px; display: inline-block; flex: none; }
.brand-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.engine-status {
  font-family: var(--hand);
  max-width: min(300px,22vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 14px; font-weight: 400; text-align: right;
  color: var(--ink-soft);
}
.transport { display: flex; align-items: center; gap: 7px; }
.rec-time { font-size: 12px; color: #fff; background: var(--accent); border-radius: 999px; padding: 2px 9px; }
.dock-keys { width: min(576px,calc(100vw - 80px)); min-width: 0; display: none; align-items: flex-end; justify-content: center; }
.mode-keys .dock-keys { display: flex; }
.hum-rec-box { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 9px; }
.hum-rec-viz { width: 100%; height: 40px; background: #fffdf6; border: 1px solid var(--line); border-radius: 8px; display: block; }
.hum-rec-ctl { display: flex; align-items: center; gap: 9px; }
.hum-rec-btn { border: 1.2px solid var(--ink); background: var(--paper); border-radius: 999px; padding: 4px 16px; font: inherit; font-size: 12px; cursor: pointer; }
.hum-rec-btn:hover { background: var(--tag); }
.hum-rec-btn.recording { background: var(--accent); color: #fff; border-color: var(--accent); animation: recPulse 1s ease-in-out infinite; }
.hum-rec-timer { font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.hum-rec-btn.recording ~ .hum-rec-timer { color: var(--accent); font-weight: 600; }
@keyframes recPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(112,136,199,.5); } 50% { box-shadow: 0 0 0 5px rgba(112,136,199,0); } }
.hum-tray { display: flex; flex-wrap: wrap; gap: 6px; }
.hum-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 5px; background: #fff3d9; border: 1.3px solid var(--accent); border-radius: 12px; cursor: grab; }
.hum-chip.playing { box-shadow: 0 0 0 2px var(--accent); }
.hum-chip .hum-play { border: none; background: var(--accent); color: #fff; border-radius: 50%; width: 20px; height: 20px; font-size: 9px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.hum-chip .hum-thumb { width: 44px; height: 22px; border-radius: 4px; display: block; }
.hum-chip .hum-name { font-size: 10px; color: var(--accent); font-weight: 600; white-space: nowrap; }
.hum-chip .shelf-del { position: static; margin-left: 1px; }
.hum-ghost { position: fixed; font-size: 26px; pointer-events: none; transform: translate(-50%, -50%); z-index: 999; }
.item-hum .hum-tag { font-size: 11px; }
.key-modes { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; justify-content: center; }
.km-label { font-size: 10.5px; opacity: .55; text-transform: uppercase; letter-spacing: .6px; }
.km-btn { border: 1px solid var(--ink); background: transparent; color: var(--ink); border-radius: 999px; padding: 3px 12px; font-size: 12.5px; cursor: pointer; font-family: inherit; }
.km-btn.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.av-panel[hidden] { display: none !important; }
.av-panel { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.av-lead { font-size: 11px; opacity: .55; text-transform: uppercase; letter-spacing: .5px; }
.av-input { display: inline-flex; align-items: center; gap: 6px; padding: 3px 5px 3px 9px; border: 1px solid var(--ink); border-radius: 999px; }
.av-input .av-or { font-size: 10.5px; opacity: .5; }
.av-rec, .av-file { border: none; background: transparent; color: var(--ink); border-radius: 999px; padding: 2px 9px; font-size: 12px; cursor: pointer; font-family: inherit; }
.av-file { background: var(--ink); color: #fff; }
.av-rec.rec { background: var(--accent); color: #fff; animation: avPulse 1s infinite; }
.av-wave { width: 120px; height: 30px; border-radius: 6px; background: rgba(29,27,23,.06); }
.av-status { font-size: 11.5px; opacity: .75; }
.av-grow { border: none; background: linear-gradient(135deg, #3fae6a, #57c98a); color: #fff; border-radius: 999px; padding: 5px 16px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; box-shadow: 0 2px 9px rgba(63,174,106,.4); transition: filter .15s, transform .1s; }
.av-grow:hover { filter: brightness(1.06); }
.av-grow:active { transform: translateY(1px); }
@keyframes avPulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
.midi-chassis {
  width: 100%; max-width: calc(100vw - 32px);
  padding: 7px 10px 8px; border: 1px solid rgba(29,27,23,.12); border-radius: 18px 15px 19px 16px;
  background: rgba(244,247,242,.94);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 12px 32px rgba(40,36,28,.14), 0 2px 5px rgba(40,36,28,.06);
}
.midi-panel { height: 36px; display: flex; align-items: center; justify-content: center; padding: 0 4px 5px; }
.keys-row { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.keys-refresh { height: 27px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 9px; border: 0; border-radius: 10px 8px 11px 7px; background: rgba(255,255,255,.72); color: var(--ink-soft); cursor: pointer; font-family: var(--hand); font-size: 9.5px; white-space: nowrap; }
.grain-icon { color: var(--ink); font-size: 14px; line-height: 1; }
.keys-refresh.busy .grain-icon { animation: grainSpin .7s linear infinite; }
@keyframes grainSpin { to { transform: rotate(360deg); } }
.keys-refresh:hover { background: var(--tag); }
.keys-refresh.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.keys-toggle { height: 27px; border: 0; background: rgba(255,255,255,.72); border-radius: 9px 11px 8px 10px; padding: 0 9px; font-family: var(--hand); font-size: 9.5px; cursor: pointer; color: var(--ink-soft); white-space: nowrap; transition: background .12s, color .12s; }
.keys-toggle:nth-of-type(even) { border-radius: 11px 8px 10px 7px; }
.keys-toggle:hover { background: var(--tag); }
.keys-toggle.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.key-volume { display: inline-flex; align-items: center; gap: 5px; padding: 2px; color: var(--ink-soft); font-size: 9px; white-space: nowrap; }
.key-volume > span { font-family: var(--hand); color: var(--ink); font-size: 9px; font-weight: 500; }
.key-volume output { display: none; }
.key-volume input { width: 54px; height: 14px; margin: 0; padding: 0; accent-color: var(--accent); cursor: pointer; }
.key-volume input::-webkit-slider-runnable-track { height: 2px; border-radius: 999px; background: var(--ink-soft); }
.key-volume input::-webkit-slider-thumb { width: 11px; height: 11px; margin-top: -4.5px; border: 0; border-radius: 48% 52% 46% 54%; background: var(--accent); -webkit-appearance: none; box-shadow: none; }
.key-volume input { -webkit-appearance: none; appearance: none; background: transparent; }
.sustain-toggle.on { box-shadow: none; }
.midi-connect { min-width: 0; }
.midi-connect.waiting { border-style: dashed; }
.midi-connect.blocked { border-color: #a45d46; color: #8d432e; background: #fff4ee; }
.midi-connect:disabled { cursor: not-allowed; opacity: .55; }
.midi-status { max-width: 45px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 8px; color: var(--ink-soft); }
.midi-status:empty { display: none; }
.key-note, .octave-value { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.hum-row { display: flex; align-items: center; gap: 10px; }
.hum-btn { display: inline-flex; align-items: center; gap: 7px; border: 1.2px solid var(--ink); background: var(--paper); border-radius: 999px; padding: 5px 14px 5px 11px; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; filter: url(#rough); transition: background .12s, color .12s; touch-action: none; user-select: none; }
.hum-btn:hover { background: var(--tag); }
.hum-btn .hum-ico { font-size: 15px; line-height: 1; display: inline-block; }
.hum-btn.listening { background: var(--accent); color: #fff; border-color: var(--accent); animation: humPulse 0.9s ease-in-out infinite; }
.hum-btn.looping { background: #fff3d9; border-color: var(--accent); color: var(--accent); }
.hum-btn.looping .hum-ico { animation: humPulse 1.4s ease-in-out infinite; }
.hum-note { min-width: 34px; font-size: 13px; font-weight: 600; font-style: italic; color: var(--accent); text-align: center; }
@keyframes humPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
/* hum-to-board: record button + looping voice sticker */
.hum-rec.recording { color: #fff; background: var(--accent); border-radius: 999px; padding: 1px 9px; animation: humPulse 0.9s ease-in-out infinite; }
.item-hum { width: 128px; height: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: var(--paper); border: 1.4px solid var(--ink); border-radius: 14px; box-shadow: 2px 3px 0 var(--shadow); }
.item-hum .hum-emoji { font-size: 20px; line-height: 1; }
.item-hum .hum-wave { display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.item-hum .hum-wave i { width: 3px; height: 6px; background: var(--accent); border-radius: 2px; animation: humBar 0.9s ease-in-out infinite; }
.item-hum .hum-wave i:nth-child(2) { animation-delay: .15s; }
.item-hum .hum-wave i:nth-child(3) { animation-delay: .3s; }
.item-hum .hum-wave i:nth-child(4) { animation-delay: .45s; }
.item-hum .hum-wave i:nth-child(5) { animation-delay: .6s; }
.item-hum .hum-tag { font-size: 11px; font-style: italic; color: var(--ink-soft); }
@keyframes humBar { 0%, 100% { height: 5px; } 50% { height: 15px; } }
.item-video { border: 1.4px solid var(--ink); border-radius: 12px; box-shadow: 2px 3px 0 var(--shadow); background: #000; }
.item-video video { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 11px; }
.item-video .vid-badge { position: absolute; left: 6px; bottom: 5px; font-size: 10px; font-style: italic; color: #fff; background: rgba(0,0,0,.45); padding: 1px 6px; border-radius: 999px; pointer-events: none; }
.item-clone { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; background: #fff3d9; border: 1.4px solid var(--accent); border-radius: 999px; box-shadow: 2px 3px 0 var(--shadow); }
.item-clone .hum-emoji { font-size: 18px; line-height: 1; }
.item-clone .hum-tag { font-size: 12px; font-style: italic; color: var(--accent); white-space: nowrap; }
.keyboard { min-height: 80px; display: flex; align-items: flex-end; justify-content: center; gap: 10px; padding: 6px 9px 5px; border-radius: 0 0 11px 9px; background: transparent; box-shadow: none; }
.pkeys { --white-key-w: clamp(45px, 3.7vw, 52px); --white-key-h: 67px; --black-key-w: 31px; --black-key-h: 43px; position: relative; flex: none; width: max-content; height: var(--white-key-h); }
.white-row { display: flex; gap: 1px; height: var(--white-key-h); }
.pkey { position: relative; width: var(--white-key-w); height: var(--white-key-h); flex: none; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0 2px 6px; border: 1px solid rgba(29,27,23,.34); border-radius: 3px 2px 7px 5px; background: rgba(255,255,255,.9); box-shadow: none; cursor: pointer; transition: background .06s, transform .06s; touch-action: none; user-select: none; }
.pkey:nth-child(even) { border-radius: 2px 3px 5px 7px; }
.pkey:first-child { border-radius: 5px 2px 7px 6px; }
.pkey:last-child { border-radius: 2px 5px 6px 7px; }
.pkey:hover { background: var(--tag); }
.pkey.active { background: var(--accent); transform: translateY(1px); }
.pkey:focus-visible { outline: 2px solid #ff9d77; outline-offset: -4px; }
.pk-bind { display: inline-flex; align-items: center; justify-content: center; color: rgba(29,27,23,.38); font-family: var(--hand); font-size: 7px; line-height: 1; pointer-events: none; }
.black-layer { position: absolute; z-index: 3; top: 0; left: 0; height: 0; }
.pkey.black { position: absolute; top: 0; left: calc(var(--after) * (var(--white-key-w) + 1px) + var(--white-key-w) - (var(--black-key-w) / 2)); width: var(--black-key-w); height: var(--black-key-h); padding-bottom: 6px; border: 0; border-radius: 1px 2px 5px 4px; background: rgba(29,27,23,.92); box-shadow: none; }
.pkey.black:nth-child(even) { border-radius: 2px 1px 4px 6px; }
.pkey.black .pk-bind { color: rgba(255,255,255,.52); font-size: 6px; }
.pkey.black:hover { background: #39352e; }
.pkey.black.active { background: var(--accent); border-color: var(--accent); transform: translateY(1px); }
.pkey.active .pk-bind { color: #fff; }
.octave-bank { width: 58px; height: 67px; flex: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; align-content: center; padding: 7px 5px; border: 0; border-radius: 11px 8px 12px 9px; background: rgba(255,255,255,.42); }
.oct-key { width: 22px; height: 29px; border: 0; background: rgba(255,255,255,.9); border-radius: 8px 6px 9px 7px; color: var(--ink); font-family: var(--hand); font-size: 16px; line-height: 1; cursor: pointer; box-shadow: none; transition: background .1s, color .1s, transform .06s; }
.oct-key:nth-child(2) { border-radius: 6px 9px 7px 8px; }
.oct-key:hover { background: var(--accent); color: #fff; }
.oct-key:active { transform: translateY(1px); }
.kb-pebble { fill: #fff; stroke: var(--ink); stroke-width: 1.5; transition: fill .08s; }
.kb-pebble.active { fill: var(--accent); }
.kb-label { font-size: 18px; font-weight: 600; fill: var(--ink-soft); text-transform: uppercase; }

/* ---------------- stage ---------------- */
.stage {
  position: relative; z-index: 3; flex: 1; min-height: 0;
  display: block;
  padding: 8px 24px 20px;
  height: auto;
}

/* ---------------- left shelf ---------------- */
.shelf {
  position: absolute; z-index: 30; left: 40px; top: 22px; bottom: 34px; width: 216px;
  display: flex; flex-direction: column; gap: 18px;
  height: auto; min-height: 0;
  overflow-y: auto; padding: 18px 16px 20px;
  border: 1px solid rgba(29,27,23,.12); border-radius: 18px 15px 19px 16px;
  background: rgba(252,251,247,.92);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 14px 36px rgba(40,36,28,.13), 0 2px 5px rgba(40,36,28,.05);
}
.board-wrap { width: 100%; height: 100%; min-height: 0; }
.shelf-block { display: flex; flex-direction: column; }
.shelf-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 9px;
}
.shelf-head h2 {
  margin: 0; font-family: var(--hand);
  font-size: 18px; font-weight: 600; letter-spacing: 0.02em;
}
.block-note {
  margin: -4px 0 9px; font-size: 12px; font-style: italic; color: var(--ink-soft);
}
.link {
  font-family: var(--hand); font-size: 15px;
  color: var(--ink); background: none; border: none;
  cursor: pointer; padding: 0;
  border-bottom: 1.5px solid transparent;
}
.link:hover { border-bottom-color: var(--ink); }

.tray { display: flex; flex-wrap: wrap; gap: 9px; }
.tray-empty {
  margin: 2px; font-size: 14px; line-height: 1.6; color: var(--ink-soft);
}

/* photo thumbnails (polaroids) */
.thumb {
  width: 78px; height: 60px; object-fit: cover;
  background: #fff; padding: 4px 4px 11px;
  border: 1px solid var(--line);
  box-shadow: 1px 3px 7px var(--shadow);
  cursor: grab; transition: transform 0.14s ease;
  touch-action: none; -webkit-user-drag: none; user-select: none;
}
.thumb:nth-child(odd)  { rotate: -2.5deg; }
.thumb:nth-child(even) { rotate: 2deg; }
.thumb:hover { transform: scale(1.06); z-index: 3; }
.thumb-wrap { position: relative; display: inline-block; }
.shelf-del { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); font-size: 12px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s; z-index: 4; }
.thumb-wrap:hover .shelf-del,
.thumb-wrap:focus-within .shelf-del { opacity: 1; }
.sticker-del { margin-left: 6px; border: none; background: none; color: var(--ink-soft); cursor: pointer; font-size: 13px; padding: 0; }
.sticker-del:hover { color: var(--accent); }
.shelf-del:focus-visible,
.sticker-del:focus-visible { opacity: 1; outline: 2px solid var(--fj-ui-line-focus, #76a6ce); outline-offset: 2px; }
.sticker.has-actions {
  gap: 3px;
  padding-inline: 6px 3px;
}
.sticker-place {
  min-width: 0;
  padding: 0 3px;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: grab;
}
.sticker-place:focus-visible {
  outline: 2px solid var(--fj-ui-line-focus, #76a6ce);
  outline-offset: 2px;
}

/* word tags */
.sticker {
  font-family: var(--hand); font-size: 15px; line-height: 1.05;
  padding: 5px 11px; background: var(--tag);
  border: 1.6px solid var(--ink);
  border-radius: 13px 10px 14px 9px;
  cursor: grab; touch-action: none; user-select: none;
  filter: url(#sketch);
}
.sticker:nth-child(3n)   { background: var(--tag-2); rotate: -2deg; }
.sticker:nth-child(3n+1) { background: var(--tag-3); rotate: 1.5deg; }
.sticker:hover { transform: scale(1.05); }
.sticker.analyzing { position: relative; padding-right: 22px; }
.sticker.analyzing::after {
  content: ""; position: absolute; right: 8px; top: 50%;
  width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background: var(--accent); animation: tag-analysis 0.8s ease-in-out infinite alternate;
}
@keyframes tag-analysis { from { opacity: .35; } to { opacity: 1; } }

/* inline tag adder */
.tag-adder { margin-top: 11px; }
.tag-form { display: flex; align-items: center; gap: 6px; }
.tag-input {
  flex: 1; min-width: 0;
  font-family: var(--hand); font-size: 14px;
  padding: 5px 9px; background: var(--paper-2);
  border: 1.6px solid var(--ink); border-radius: 11px 9px 12px 8px;
  outline: none;
}
.tag-input::placeholder { color: var(--ink-soft); opacity: 0.8; }
.tag-ok {
  flex: none; width: 26px; height: 26px;
  font-size: 13px; cursor: pointer;
  background: var(--ink); color: var(--paper-2);
  border: none; border-radius: 50%;
}
.tag-ok:hover { background: var(--accent); }

/* instruments */
.instrument-tray { gap: 8px; }
.instrument {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 10px 5px 7px; background: var(--paper-2);
  border: 1.6px solid var(--ink); border-radius: 12px 10px 13px 9px;
  font-family: var(--hand); font-size: 14px;
  cursor: grab; touch-action: none; user-select: none;
  box-shadow: 1px 2px 5px var(--shadow);
}
.instrument:hover { transform: scale(1.04); }
.instrument svg { width: 22px; height: 22px; flex: none; }
.instrument svg * { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* doodles */
.deco-tray { gap: 12px; }
.doodle {
  width: 40px; height: 40px;
  cursor: grab; touch-action: none; user-select: none;
  transition: transform 0.14s ease;
}
.doodle:hover { transform: rotate(-8deg) scale(1.12); }
.doodle svg { width: 100%; height: 100%; display: block; }
.doodle svg * {
  fill: none; stroke: var(--ink); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
/* ---------------- board ---------------- */
.board-wrap { position: relative; min-height: 0; }
.cam-feed { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); opacity: 0; transition: opacity .4s; z-index: 0; pointer-events: none; }
.board.cam-on .cam-feed { opacity: .82; }
.hand-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 15; pointer-events: none; display: none; }
.board.cam-on .hand-fx { display: block; }
.cam-btn { position: absolute; top: 10px; right: 12px; z-index: 40; border: 1px solid var(--ink, #2b2b2b); background: rgba(255,255,255,.78); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.surprise-btn { position: absolute; top: 12px; left: auto; right: 14px; z-index: 40; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1.3px solid var(--ink); background: rgba(252,251,247,.9); color: var(--ink); border-radius: 10px 12px 9px 11px; padding: 3px; cursor: pointer; box-shadow: 1px 2px 0 var(--shadow); filter: url(#sketch); }
.surprise-btn:hover { background: var(--tag); transform: rotate(-4deg); }
.dice-doodle { width: 21px; height: 21px; transform: rotate(-7deg); overflow: visible; }
.dice-doodle rect { fill: none; stroke: currentColor; stroke-width: 1.7; }
.dice-doodle circle { fill: currentColor; stroke: none; }
.cam-btn.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.cam-btn.err { background: #ffb3a7; border-color: #c0392b; }
.cam-legend {
  position: absolute; right: 16px; bottom: 16px; z-index: 40;
  width: min(344px,calc(100% - 96px)); overflow: hidden;
  background: rgba(252,251,247,.78); color: var(--ink);
  border: 1px solid rgba(29,27,23,.16); border-radius: 8px;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(40,36,28,.12);
  transition: right .28s cubic-bezier(.4,.1,.2,1), bottom .28s cubic-bezier(.4,.1,.2,1), width .2s ease, opacity .16s ease, background .16s ease;
}
.cam-legend[hidden] { display: none !important; }
.cam-legend-toggle {
  width: 100%; min-height: 34px; display: grid; grid-template-columns: 22px minmax(0,1fr) 18px;
  align-items: center; gap: 7px; padding: 6px 8px; border: 0; background: transparent;
  color: var(--ink); text-align: left; cursor: pointer; font-size: 11px; font-weight: 600;
}
.cam-legend-toggle:hover { background: rgba(255,255,255,.5); }
.cam-guide-mark { width: 22px; height: 22px; display: grid; place-items: center; color: #277d71; }
.cam-guide-mark svg { width: 20px; height: 20px; }
.cam-guide-mark path { fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.cam-guide-chevron {
  justify-self: center; width: 16px; height: 16px; display: grid; place-items: center;
  color: var(--ink-soft); font-family: system-ui,sans-serif; font-size: 13px; line-height: 1;
}
.cam-legend-list { display: grid; grid-template-columns: 1fr; gap: 5px; padding: 7px 9px 10px; border-top: 1px dashed rgba(29,27,23,.16); }
.dj-row { min-width: 0; display: flex; align-items: center; gap: 6px; margin: 0; font-size: 9.5px; line-height: 1.25; opacity: .88; }
.dj-row span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dj-ico { flex: none; font-size: 12px; letter-spacing: -1px; }
.cam-legend.collapsed { width: 170px; background: rgba(252,251,247,.9); }
.cam-legend.collapsed .cam-legend-list { display: none; }
.viewfinder { position: absolute; top: 50%; left: 50%; width: 56%; aspect-ratio: 1; transform: translate(-50%,-50%); border: 2.5px dashed var(--accent); border-radius: 8px; z-index: 20; display: none; pointer-events: none; filter: url(#sketch); }
.board.cam-on .viewfinder { display: block; }
.vf-tip { position: absolute; bottom: -26px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; background: rgba(20,18,15,.6); color: #fff; padding: 3px 9px; border-radius: 999px; }
.snap-btn { position: absolute; top: 10px; right: 132px; z-index: 41; border: 1px solid var(--ink); background: var(--accent); color: #fff; border-radius: 999px; padding: 5px 13px; cursor: pointer; }
.snap-btn.flash { background: #fff; color: var(--accent); }
.item.cutout { background: transparent; padding: 0; box-shadow: none; filter: drop-shadow(2px 5px 5px var(--shadow)); }
.item.cutout .card { display: none; }
.item.cutout .cut-img { width: 100%; height: 100%; object-fit: contain; filter: url(#torn); }
.thumb.cut { background: transparent; border: none; box-shadow: none; padding: 0; object-fit: contain; filter: url(#torn) drop-shadow(1px 3px 3px var(--shadow)); }
.item.cutout img { border-radius: 2px; }
.crop-pick { display: flex; gap: 6px; margin: 4px 0 8px; }
.crop-opt { flex: 1; border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 4px 6px; font-size: 12px; cursor: pointer; }
.crop-opt.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.snap-panel { margin: 4px 0 8px; padding: 8px; background: var(--tag); border: 1.5px solid var(--ink); border-radius: 10px; box-shadow: 2px 3px 0 var(--shadow); }
.snap-stage { position: relative; width: 100%; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: #000; }
.snap-stage video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.vf-frame { position: absolute; inset: 14%; border: 2.5px dashed var(--accent); border-radius: 8px; filter: url(#sketch); pointer-events: none; }
.snap-tip { margin: 6px 0; font-size: 11px; font-style: italic; color: var(--ink-soft); text-align: center; }
.snap-row { display: flex; gap: 8px; }
.snap-go { flex: 1; border: 1px solid var(--ink); background: var(--accent); color: #fff; border-radius: 999px; padding: 6px; cursor: pointer; }
.snap-go.flash { background: #fff; color: var(--accent); }
.snap-x { border: 1px solid var(--ink); background: var(--paper); border-radius: 999px; padding: 6px 11px; cursor: pointer; }
.board {
  position: relative; height: 100%; overflow: hidden;
  border-radius: 20px 17px 21px 18px;
  background: rgba(255,255,255,.56);
  box-shadow: 0 16px 44px rgba(40,36,28,.08), inset 0 1px 0 rgba(255,255,255,.76);
}
.board::after {
  content: ""; position: absolute; inset: 0;
  border: 1.6px solid rgba(29, 27, 23, 0.16);
  border-radius: inherit; pointer-events: none;
  filter: url(#rough);
}
.board.dragover::after {
  border-color: rgba(29, 27, 23, 0.5);
  background: rgba(255, 255, 255, 0.3);
}
.board-hint {
  position: absolute; inset: 0; margin: auto;
  width: max-content; max-width: calc(100% - 48px); height: max-content; text-align: center;
  font-family: var(--hand); font-size: 21px; line-height: 1.42;
  color: var(--ink-soft); pointer-events: none;
}

/* placed items */
.item {
  position: absolute;
  transform: translate(calc(-50% + var(--gx, 0px) + var(--lx, 0px)), calc(-50% + var(--gy, 0px) + var(--ly, 0px))) rotate(var(--sqA, 0deg)) scale(var(--sqX, 1), var(--sqY, 1)) rotate(calc(-1 * var(--sqA, 0deg))) rotate(var(--surface-placement-offset, 0deg)) rotate(var(--tilt, 0deg)) scale(var(--gs, 1)) scale(var(--gesture-scale, 1));
  opacity: var(--lop, 1); transition: opacity 0.2s ease;
  cursor: grab; user-select: none; touch-action: none; z-index: 1;
}
.disc-item-layer > .item { --surface-placement-offset: var(--disc-placement-offset, 0deg); }
.item.dragging { cursor: grabbing; z-index: 30; filter: drop-shadow(3px 7px 9px var(--shadow)); }
.item.dj-live { z-index: 20; filter: drop-shadow(0 0 8px rgba(150,140,255,.6)) drop-shadow(2px 6px 8px var(--shadow)); }
.item.dj-grab { z-index: 25; filter: drop-shadow(0 0 15px rgba(160,120,255,.95)) drop-shadow(2px 6px 8px var(--shadow)); }
.item.dj-push { z-index: 22; filter: drop-shadow(0 0 12px rgba(110,230,210,.9)) drop-shadow(2px 6px 8px var(--shadow)); }
.item.dj-lofi { filter: url(#lofi) blur(var(--lofiB, 2px)) contrast(1.42) brightness(1.03) drop-shadow(2px 5px 6px var(--shadow)); }
.item.dj-lofi img, .item.dj-lofi svg { image-rendering: pixelated; filter: url(#lofi) contrast(1.32) brightness(1.03); }
.item.dj-lofi .cut-img { filter: url(#torn) url(#lofi) contrast(1.25); }
.item.loading {
  opacity: 0.54;
  filter: drop-shadow(0 0 12px rgba(225, 176, 62, 0.34));
}
.item.loading::before {
  content: "";
  position: absolute; inset: -10px;
  border: 2px solid rgba(225, 176, 62, 0.46);
  border-radius: 18px 14px 17px 13px;
  pointer-events: none; z-index: -1;
  animation: itemLoadingGlow 1.25s ease-in-out infinite;
  filter: url(#sketch);
}
.item.loading::after {
  content: "";
  position: absolute; inset: -5px;
  border-radius: 16px 12px 15px 11px;
  background: radial-gradient(circle at 30% 20%, rgba(255, 236, 174, 0.62), transparent 48%);
  pointer-events: none; z-index: -1;
  animation: itemLoadingBreath 1.8s ease-in-out infinite;
}
@keyframes itemLoadingGlow {
  0%, 100% { transform: scale(0.96) rotate(-1deg); opacity: 0.28; }
  50% { transform: scale(1.04) rotate(1deg); opacity: 0.72; }
}
@keyframes itemLoadingBreath {
  0%, 100% { opacity: 0.18; }
  50% { opacity: 0.5; }
}

/* flip-card photo (polaroid) */
.item-photo { perspective: 1000px; }
.item-photo .card {
  position: relative; width: 100%; height: 100%;
  transition: transform 0.55s cubic-bezier(.4,.1,.2,1);
  transform-style: preserve-3d;
}
.item-photo.flipped .card { transform: rotateY(180deg); }
.card-face {
  position: absolute; inset: 0; backface-visibility: hidden;
  background: #fff; padding: 6px 6px 18px;
  border: 1px solid var(--line); box-shadow: 2px 6px 14px var(--shadow);
}
.card-front img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-front .flip-cue {
  position: absolute; left: 0; right: 0; bottom: 4px;
  text-align: center; font-family: var(--hand); font-size: 11px; color: var(--ink-soft);
}
.card-back {
  transform: rotateY(180deg);
  display: flex; flex-direction: column;
  background: var(--tag); padding: 7px 7px 5px;
}
.semantic-field {
  position: relative; flex: none; margin: 0 1px 5px; padding: 0 21px 5px 0;
  border-bottom: 1px dashed rgba(48, 43, 37, 0.28);
}
.semantic-read {
  display: block; width: 100%; height: 30px; resize: none; overflow-y: auto;
  margin: 0; padding: 0 2px; border: none; outline: none; background: transparent;
  color: var(--ink-soft); font-family: var(--hand); font-size: 10px; line-height: 1.25;
  cursor: text;
}
.semantic-read.pending { color: var(--accent); }
.semantic-read:focus { color: var(--ink); background: rgba(255,255,255,.48); border-radius: 5px; }
.semantic-read::placeholder { color: rgba(139,133,120,.62); }
.semantic-remap {
  position: absolute; right: 0; bottom: 5px; width: 18px; height: 18px; padding: 2px;
  display: grid; place-items: center; border: 1px solid rgba(29,27,23,.18); border-radius: 6px;
  background: rgba(255,255,255,.5); color: var(--ink-soft); cursor: pointer; opacity: .62;
  transition: opacity .12s, color .12s, background .12s;
}
.semantic-remap:hover, .semantic-remap:focus-visible { opacity: 1; color: var(--accent); background: #fff; }
.semantic-remap.pending { color: var(--accent); animation: tag-analysis .8s ease-in-out infinite alternate; }
.semantic-remap svg { width: 12px; height: 12px; }
.semantic-remap path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.back-edit {
  flex: 1; width: 100%; resize: none; border: none; outline: none;
  background: transparent; color: var(--ink);
  font-family: var(--hand); font-size: 12px; line-height: 1.34;
  overflow-y: auto; cursor: text;
}
.back-edit:focus { background: rgba(255, 255, 255, 0.5); border-radius: 7px; }
.back-hint {
  margin: 2px 1px 0; text-align: right;
  font-size: 9.5px; color: var(--ink-soft); pointer-events: none; opacity: 0.8;
}

/* note tag on board */
.item-note {
  font-family: var(--hand); font-size: 17px; max-width: 180px;
  padding: 9px 13px; background: var(--tag);
  border: 1.6px solid var(--ink); border-radius: 13px 10px 14px 9px;
  box-shadow: 2px 4px 8px var(--shadow); filter: url(#sketch);
}

/* instrument on board */
.item-instrument {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 9px 11px 7px; background: var(--paper-2);
  border: 1.8px solid var(--ink); border-radius: 14px 11px 13px 12px;
  box-shadow: 2px 4px 9px var(--shadow);
}
.item-instrument svg { width: 40px; height: 40px; }
.item-instrument svg * { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.item-instrument .inst-name { font-family: var(--hand); font-size: 13px; color: var(--ink-soft); }
.item-instrument.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(112, 136, 199, 0.18), 2px 4px 9px var(--shadow);
}
.item-instrument.active svg * { stroke: var(--accent); }
.item-instrument.active .inst-name { color: var(--accent); }
.item-instrument.sounding { animation: bump 0.28s ease; }
@keyframes bump { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-4px); } }

/* doodle on board */
.item-deco { width: 54px; height: 54px; }
.item-deco svg { width: 100%; height: 100%; }
.item-deco svg * {
  fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}

.remove {
  position: absolute; top: -10px; right: -10px;
  width: 21px; height: 21px; border-radius: 50%;
  border: 1.6px solid var(--ink); background: var(--paper-2);
  color: var(--ink); font-size: 13px; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity 0.15s ease, transform 0.15s ease; z-index: 5;
}
.item:hover .remove { opacity: 1; }
.remove:hover { transform: scale(1.15) rotate(90deg); }

/* floating drag ghost */
.drag-ghost {
  position: fixed; z-index: 999; pointer-events: none; opacity: 0.92;
  transform: translate(-50%, -50%) rotate(-3deg);
  box-shadow: 4px 9px 18px var(--shadow);
}
.drag-ghost img { display: block; width: 92px; height: auto; }
.drag-ghost svg { width: 52px; height: 52px; }
.drag-ghost svg * {
  fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------------- bottom dock ---------------- */
.dock {
  position: fixed; z-index: 38; left: 0; right: 0; bottom: 24px; height: 131px;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 40px; pointer-events: none;
}
.dock::before { display: none; }
.dock-keys { pointer-events: auto; }

.transport { display: flex; align-items: center; gap: 8px; }
.now-time { font-family: var(--hand); font-size: 15px; color: var(--ink-soft); min-width: 34px; }
.tbtn {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1.8px solid var(--ink); background: var(--paper-2);
  color: var(--ink); font-size: 13px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.14s ease, background 0.14s ease;
}
.tbtn:hover { background: #fff; transform: scale(1.07); }
.tbtn.is-live { background: var(--ink); color: var(--paper-2); }

.mix-readout {
  display: flex; flex-wrap: wrap; gap: 8px 9px;
  overflow-y: auto; align-content: flex-start;
  flex: 1 1 0; min-height: 0; max-height: 100%; padding-right: 4px;
}
.mix-empty { font-size: 14px; color: var(--ink-soft); font-style: italic; }
.mix-chip {
  display: inline-flex; align-items: center; gap: 8px; max-width: 256px;
  padding: 3px 11px 3px 4px; background: var(--paper-2);
  border: 1.5px solid var(--ink); border-radius: 14px 10px 13px 11px;
  filter: url(#sketch);
}
.mix-chip.note-chip { background: var(--tag); }
.mix-chip.inst-chip { background: #eef1f6; }
.mix-chip.deco-chip { background: var(--tag-2); }
.mix-chip .txt { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mix-chip .pct { font-family: var(--hand); font-size: 15px; color: var(--ink-soft); flex: none; }

/* balance knob */
.knob { width: 30px; height: 30px; flex: none; cursor: ns-resize; touch-action: none; }
.knob svg { width: 100%; height: 100%; display: block; overflow: visible; }
.knob .track { fill: none; stroke: var(--line); stroke-width: 3.4; stroke-linecap: round; }
.knob .val { fill: none; stroke: var(--accent); stroke-width: 3.4; stroke-linecap: round; }
.knob .hub { fill: var(--paper-2); stroke: var(--ink); stroke-width: 1.4; }
.knob .pointer { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }

/* record button */
.rec-btn { color: var(--ink); font-size: 16px; }
.rec-btn:hover { background: #fff; }
.rec-btn.recording {
  background: var(--accent); color: #fff; border-color: var(--accent);
  animation: recpulse 1.1s ease-in-out infinite;
}
@keyframes recpulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(112, 136, 199, 0.5); }
  50%      { box-shadow: 0 0 0 7px rgba(112, 136, 199, 0); }
}

/* ---------------- saved-takes drawer ---------------- */
.records-drawer-shell {
  position: fixed; z-index: 52; top: 78px; right: 0; bottom: 22px;
  width: min(344px,calc(100vw - 68px)); pointer-events: none;
}
.records-drawer-shell[hidden] { display: none !important; }
.records-tab {
  position: absolute; z-index: 2; top: 50%; right: 0; width: 52px; min-height: 124px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 7px; border: 1px solid rgba(29,27,23,.16); border-right: 0;
  border-radius: 18px 0 0 21px; background: rgba(252,251,247,.96); color: var(--ink);
  cursor: pointer; pointer-events: auto; transform: translateY(-50%);
  box-shadow: -6px 10px 24px rgba(40,36,28,.13), -1px 2px 5px rgba(40,36,28,.05);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: right .32s cubic-bezier(.4,.1,.2,1), background .15s, color .15s, box-shadow .15s;
}
.records-tab:hover { background: #fff; color: var(--accent); box-shadow: -8px 12px 28px rgba(40,36,28,.17); }
.records-tab:focus-visible, .records-drawer-close:focus-visible, .creation-mini:focus-visible { outline: 3px solid rgba(112,136,199,.25); outline-offset: 3px; }
.records-tab-icon { width: 27px; height: 27px; overflow: visible; filter: url(#sketch); }
.records-tab-icon rect, .records-tab-icon path { fill: #fff; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.records-tab-icon path { fill: var(--accent); stroke: var(--accent); }
.records-tab-label { font-family: var(--hand); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); }
.records-tab-count { min-width: 21px; height: 21px; display: inline-grid; place-items: center; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 9px; font-variant-numeric: tabular-nums; }
.records-drawer-shell.empty .records-tab-count { background: #ece8de; color: var(--ink-soft); }
.records-tab-arrow { font-family: system-ui,sans-serif; font-size: 20px; font-weight: 300; line-height: 1; transition: transform .25s; }
.records-drawer-shell.open .records-tab { right: calc(100% - 1px); color: var(--accent); }
.records-drawer-shell.open .records-tab-arrow { transform: rotate(180deg); }
.records-drawer {
  position: absolute; inset: 0 0 0 auto; width: 100%; min-height: 0;
  display: flex; flex-direction: column; padding: 20px 16px 15px;
  border: 1px solid rgba(29,27,23,.13); border-right: 0; border-radius: 24px 0 0 27px;
  background:
    radial-gradient(90% 42% at 110% -4%, rgba(239,216,207,.68), transparent 72%),
    rgba(252,251,247,.975);
  box-shadow: -18px 24px 54px rgba(40,36,28,.18), -2px 3px 8px rgba(40,36,28,.06);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  opacity: 0; pointer-events: none; transform: translateX(calc(100% + 22px));
  transition: transform .32s cubic-bezier(.4,.1,.2,1), opacity .22s ease;
}
.records-drawer-shell.open .records-drawer { opacity: 1; pointer-events: auto; transform: translateX(0); }
.records-drawer-head { flex: none; display: grid; grid-template-columns: 43px minmax(0,1fr) 32px; align-items: center; gap: 10px; padding: 0 2px 16px; border-bottom: 1px dashed rgba(29,27,23,.2); }
.records-drawer-mark { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 15px 12px 16px 13px; background: #fff; box-shadow: 1px 3px 8px rgba(40,36,28,.1); transform: rotate(-2deg); }
.records-drawer-mark svg { width: 31px; height: 31px; overflow: visible; filter: url(#sketch); }
.records-drawer-mark rect, .records-drawer-mark path { fill: #fff; stroke: var(--ink); stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.records-drawer-mark path { fill: var(--accent); stroke: var(--accent); }
.records-drawer-head p { margin: 0 0 1px; color: var(--accent); font-size: 8.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.records-drawer-head h2 { margin: 0; font-family: var(--hand); font-size: 21px; line-height: 1.05; }
.rack-label { display: block; margin-top: 3px; color: var(--ink-soft); font-size: 9.5px; }
.records-drawer-close { width: 31px; height: 31px; display: grid; place-items: center; padding: 0 0 2px; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.72); color: var(--ink-soft); cursor: pointer; font-size: 20px; line-height: 1; transition: transform .14s, color .14s, background .14s; }
.records-drawer-close:hover { transform: rotate(7deg); background: #fff; color: var(--accent); }
.records-row { min-height: 0; display: flex; flex: 1; flex-direction: column; gap: 10px; overflow-y: auto; padding: 15px 4px 14px 2px; scrollbar-width: thin; scrollbar-color: rgba(29,27,23,.18) transparent; }
.records-row::-webkit-scrollbar { width: 5px; }
.records-row::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(29,27,23,.18); }
.records-empty-guide {
  flex: 1; min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 26px 24px; text-align: center; color: var(--ink-soft);
}
.records-empty-mark {
  position: relative; width: 58px; height: 58px; display: grid; place-items: center;
  border: 1.4px solid rgba(29,27,23,.24); border-radius: 19px 17px 20px 18px; background: rgba(255,255,255,.72);
  box-shadow: 2px 5px 14px rgba(40,36,28,.09); transform: rotate(-2deg);
}
.records-empty-mark::before { content: ""; width: 25px; height: 25px; border: 2px solid var(--ink); border-radius: 50%; }
.records-empty-mark i { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.records-empty-guide h3 { margin: 17px 0 5px; color: var(--ink); font-family: var(--hand); font-size: 20px; line-height: 1.15; }
.records-empty-guide p { max-width: 220px; margin: 0; font-size: 11.5px; line-height: 1.5; }
.records-empty-record {
  margin-top: 20px; padding: 9px 14px; display: inline-flex; align-items: center; gap: 7px;
  border: 1.3px solid var(--ink); border-radius: 12px 15px 11px 14px; background: var(--accent); color: #fff;
  cursor: pointer; box-shadow: 2px 3px 0 rgba(29,27,23,.14); font-size: 11px; font-weight: 600;
}
.records-empty-record:hover { transform: translateY(-1px); box-shadow: 3px 5px 0 rgba(29,27,23,.11); }
.records-empty-record span { font-size: 9px; }
.creation-mini {
  position: relative; width: 100%; min-height: 88px; display: grid; grid-template-columns: 112px minmax(0,1fr); align-items: stretch; gap: 0;
  padding: 0; overflow: hidden; border: 1px solid rgba(29,27,23,.15); border-radius: 14px 17px 13px 16px;
  background: rgba(255,255,255,.86); color: var(--ink); text-align: left; cursor: pointer;
  box-shadow: 1px 4px 12px rgba(40,36,28,.09); transition: transform .15s, box-shadow .15s, border-color .15s;
}
.creation-mini:nth-child(even) { border-radius: 17px 13px 16px 12px; }
.creation-mini:hover { transform: translateX(-3px) rotate(-.25deg); border-color: rgba(112,136,199,.42); box-shadow: 4px 7px 18px rgba(40,36,28,.14); }
.creation-mini-visual { position: relative; min-height: 88px; overflow: hidden; border-right: 1px solid rgba(29,27,23,.1); background: #eeeae1; }
.creation-mini img { width: 100%; height: 100%; display: block; object-fit: contain; }
.creation-mini-kind, .creation-mini-time { position: absolute; z-index: 2; min-width: 21px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: rgba(20,18,15,.74); color: #fff; font-size: 8px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.creation-mini-kind { left: 6px; top: 6px; }
.creation-mini-time { right: 6px; bottom: 6px; padding: 0 6px; font-variant-numeric: tabular-nums; }
.creation-mini-copy { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 12px 11px; }
.creation-mini-title { overflow: hidden; font-family: var(--hand); font-size: 13px; font-weight: 600; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.creation-mini-meta { color: var(--ink-soft); font-size: 8.5px; line-height: 1.35; }
.creation-mini-open { margin-top: 2px; color: var(--accent); font-size: 9px; font-weight: 600; }
.records-drawer-note { flex: none; margin: 0; padding: 11px 4px 0; border-top: 1px dashed rgba(29,27,23,.18); color: var(--ink-soft); font-size: 9px; line-height: 1.45; }

/* ---------------- FlowJam home ---------------- */
.home-screen {
  position: fixed; inset: 0; z-index: 210; overflow-y: auto; color: var(--ink);
  background:
    radial-gradient(42% 44% at 4% 4%, rgba(221,232,211,.7), transparent 72%),
    radial-gradient(38% 38% at 98% 0%, rgba(240,219,211,.68), transparent 70%),
    linear-gradient(180deg, #fcfbf7, #f7f4ed);
}
.home-screen[hidden], .home-guide[hidden], .home-archive[hidden] { display: none !important; }
html.flowjam-entry-pending body { background:var(--fj-ui-cream,#f8f3e7); }
html.flowjam-entry-pending #homeScreen,
html.flowjam-entry-pending #accountControl { visibility:hidden!important; }
.home-nav { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between; padding: 21px clamp(24px,5vw,76px); background: rgba(252,251,247,.82); border-bottom: 1px solid rgba(29,27,23,.08); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.home-brand { margin: 0; display: flex; align-items: center; font-family: var(--hand); font-weight: 600; font-size: 25px; }
.home-brand span { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-right: 8px; background: transparent; color: var(--ink); }
.new-flowjam { border: none; border-radius: 999px; background: var(--ink); color: #fff; padding: 10px 18px; cursor: pointer; font-size: 12px; }
.home-main { width: min(1260px, 100%); margin: 0 auto; padding: clamp(34px,5vw,68px) clamp(24px,5vw,66px) 90px; }
.home-guide { min-height: min(720px,calc(100vh - 105px)); display: grid; grid-template-columns: minmax(330px,.9fr) minmax(430px,1.1fr); gap: clamp(42px,6vw,86px); align-items: center; }
.guide-copy h1 { margin: 12px 0 20px; font-family: var(--hand); font-size: clamp(42px,4vw,56px); line-height: 1.06; letter-spacing: -.035em; }
.guide-lead { max-width: 540px; color: var(--ink-soft); font-size: 16px; line-height: 1.62; }
.guide-create { display: inline-flex; align-items: center; gap: 12px; margin-top: 31px; border: 1.5px solid var(--ink); border-radius: 17px 20px 16px 21px; background: var(--accent); color: #fff; padding: 12px 19px; cursor: pointer; font-weight: 600; box-shadow: 3px 4px 0 rgba(29,27,23,.16); filter: url(#sketch); transition: transform .12s, box-shadow .12s; }
.guide-create span { font-size: 18px; line-height: 1; }
.guide-create:hover { transform: translateY(-2px) rotate(-.4deg); box-shadow: 4px 6px 0 rgba(29,27,23,.13); }
.guide-steps { display: flex; gap: 25px; margin: 38px 0 0; padding: 23px 0 0; border-top: 1px dashed rgba(29,27,23,.25); list-style: none; }
.guide-steps li { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; line-height: 1.35; }
.guide-steps b { color: var(--accent); font-size: 11px; }
.guide-steps small { color: var(--ink-soft); font-size: 11px; white-space: nowrap; }
.guide-collage { position: relative; aspect-ratio: 1.08; background: transparent; isolation: isolate; }
.guide-polaroid { position: absolute; z-index: 4; left: 5%; top: 7%; width: 64%; padding: 10px 10px 27px; background: #fff; box-shadow: 7px 12px 24px rgba(29,27,23,.22); transform: rotate(-5deg); }
.guide-polaroid svg { display: block; width: 100%; }
.guide-polaroid span { position: absolute; left: 15px; bottom: 7px; font-size: 9px; color: var(--ink-soft); }
.guide-ui { position: absolute; z-index: 3; pointer-events: none; }
.guide-ui * { pointer-events: none !important; }
.guide-sticker .sticker, .guide-instrument .instrument, .guide-doodle .doodle { cursor: default; }
.guide-sticker .sticker { box-shadow: 2px 4px 9px rgba(29,27,23,.13); }
.guide-rain { z-index: 8; left: 64%; right: auto; top: 12%; transform: rotate(7deg) scale(1.12); }
.guide-piano { z-index: 7; left: 0; right: auto; top: 35%; transform: rotate(-6deg) scale(.98); }
.guide-instrument { z-index: 9; left: 63%; right: auto; top: 51%; bottom: auto; transform: rotate(8deg) scale(1.18); filter: drop-shadow(2px 4px 3px rgba(29,27,23,.16)); }
.guide-keys { left: 13%; top: 59%; bottom: auto; z-index: 5; width: 76%; height: 74px; transform: rotate(-2.5deg); filter: drop-shadow(3px 6px 4px rgba(29,27,23,.14)); }
.guide-keys > .pkeys { --white-key-w: 50px; --white-key-h: 67px; --black-key-w: 30px; --black-key-h: 43px; position: absolute; left: 0; bottom: 0; width: max-content; transform: scale(.75); transform-origin: left bottom; }
.guide-keys .pkey { cursor: default; }
.guide-doodle { width: 40px; height: 40px; }
.guide-heart { z-index: 7; left: 0; top: 49%; bottom: auto; transform: rotate(-12deg) scale(1.08); }
.guide-wave { z-index: 7; left: 74%; right: auto; top: 69%; transform: rotate(7deg) scale(1.16); }
.guide-star { z-index: 8; left: 60%; top: 1%; transform: rotate(-6deg) scale(1.02); }
.home-archive { display: flex; flex-direction: column; gap: 66px; margin-top: clamp(46px,6vw,82px); padding-top: clamp(44px,5vw,66px); border-top: 1px solid rgba(29,27,23,.14); }
.new-flowjam { background: var(--accent); padding: 9px 15px; font-weight: 600; box-shadow: 0 5px 14px rgba(112,136,199,.19); }
.home-section { padding-top: 0; }
.home-section + .home-section { padding-top: 50px; border-top: 1px solid rgba(29,27,23,.12); }
.home-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 20px; }.home-section-head h2 { margin: 0 0 5px; font-family: var(--hand); font-size: clamp(25px,2.4vw,33px); }.home-section-head p, .home-section-head > span, .section-tools > span { margin: 0; color: var(--ink-soft); font-size: 11.5px; }
.section-tools { display: flex; align-items: center; gap: 13px; }
.boards-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(270px,1fr)); gap: 20px; }
.board-file { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: 0 8px 24px rgba(40,36,28,.07); transition: transform .16s, box-shadow .16s; }.board-file:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(40,36,28,.13); }
.board-file-cover { position: relative; width: 100%; aspect-ratio: 1.45; padding: 0; border: none; background: #eee8da; cursor: pointer; overflow: hidden; }.board-file-cover img { width: 100%; height: 100%; object-fit: contain; display: block; }.board-file-cover .board-file-open { position: absolute; inset: auto 12px 11px auto; opacity: 0; padding: 6px 10px; border-radius: 999px; background: rgba(28,25,21,.76); color: #fff; font-size: 10px; transition: opacity .15s; }.board-file:hover .board-file-open { opacity: 1; }
.board-file-body { display: grid; gap: 5px; align-items: center; padding: 12px 13px; }.board-file-title { min-width: 0; border: none; border-bottom: 1px dashed transparent; outline: none; background: none; font-family: var(--hand); font-weight: 600; }.board-file-title:focus { border-bottom-color: var(--accent); }.board-file-meta { color: var(--ink-soft); font-size: 9.5px; }.board-file-delete { position: absolute; top: 9px; right: 9px; z-index: 3; width: 26px; height: 26px; display: inline-grid; place-items: center; padding: 0 0 2px; border: 1px solid rgba(29,27,23,.68); border-radius: 50%; background: rgba(252,251,247,.9); color: var(--ink); cursor: pointer; font-size: 17px; line-height: 1; opacity: 0; pointer-events: none; box-shadow: 1px 2px 5px rgba(29,27,23,.16); transition: opacity .14s, transform .14s, background .14s; }.board-file:hover .board-file-delete, .board-file:focus-within .board-file-delete { opacity: 1; pointer-events: auto; }.board-file-delete:hover { transform: rotate(8deg) scale(1.06); background: #fff1ed; color: #9b3f2e; }
.home-empty { min-height: 128px; display: flex; align-items: center; justify-content: center; gap: 11px; border: 1px dashed var(--line); border-radius: 14px; color: var(--ink-soft); }.home-empty[hidden] { display: none; }.home-empty > span { color: var(--accent); font-size: 24px; }.home-empty p { margin: 0; font-size: 12px; }
.creations-home-section .creations-grid { grid-template-columns: repeat(auto-fill,minmax(255px,1fr)); }

body.home-open > .topbar, body.home-open > .stage, body.home-open > .dock, body.home-open > .records-drawer-shell, body.home-open > .panel-toggle { visibility: hidden; pointer-events: none; }
.board-title { width: min(220px,18vw); border: none; border-bottom: 1px dashed transparent; background: none; outline: none; font-family: var(--hand); font-size: 15px; font-weight: 500; text-align: center; }.board-title:focus { border-bottom-color: var(--accent); }
.brand { border: none; background: none; padding: 0; cursor: pointer; }

/* ---------------- multimodal creations ---------------- */
.modal-layer { position: fixed; inset: 0; z-index: 220; display: flex; align-items: center; justify-content: center; padding: 28px; }
.modal-layer[hidden] { display: none !important; }
.modal-scrim { position: absolute; inset: 0; border: none; background: rgba(24,21,17,.58); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: default; }
.modal-scrim:disabled { opacity: 1; }
.creations-sheet { position: relative; width: min(1120px, 96vw); max-height: 91vh; overflow-y: auto; background: var(--paper); border: 1px solid rgba(255,255,255,.6); border-radius: 26px; padding: 28px; box-shadow: 0 28px 90px rgba(24,21,17,.35); }
.creations-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 0 4px 22px; }
.creations-head h2 { margin: 1px 0 4px; font-family: var(--hand); font-size: 36px; line-height: 1; }
.creations-head p { margin: 0; color: var(--ink-soft); font-size: 13px; }
.eyebrow { margin: 0; color: var(--accent) !important; font-size: 10.5px !important; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.modal-close { flex: none; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: var(--paper-2); cursor: pointer; font-size: 23px; line-height: 1; }
.modal-close[hidden] { display: none; }
.take-sheet { position: relative; width: min(980px,96vw); max-height: 91vh; overflow-y: auto; padding: 25px; border: 1.5px solid rgba(255,255,255,.7); border-radius: 23px 27px 22px 26px; background: var(--paper); box-shadow: 0 28px 90px rgba(24,21,17,.38); }
.take-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; margin-bottom: 18px; }
.take-head h2 { margin: 5px 0 0; font-family: var(--hand); font-size: clamp(30px,3.4vw,42px); line-height: 1; }
.take-layout { display: grid; grid-template-columns: minmax(390px,1.25fr) minmax(280px,.75fr); gap: clamp(25px,4vw,42px); align-items: stretch; }
.take-media { position: relative; width: 100%; min-width: 0; }
.take-media.is-video { align-self: center; aspect-ratio: 16 / 9; overflow: hidden; display: grid; place-items: center; border: 1.5px solid var(--ink); border-radius: 15px 18px 14px 17px; background: #111; box-shadow: 4px 6px 0 rgba(29,27,23,.12); }
.take-media.is-video > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; background: #111; }
.take-media.is-audio { align-self: center; overflow: hidden; display: flex; flex-direction: column; padding: 8px 8px 7px; border: 1.5px solid var(--ink); border-radius: 15px 18px 14px 17px; background: #fff; box-shadow: 4px 6px 0 rgba(29,27,23,.12); }
.take-audio-cover { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 9px 12px 8px 11px; background: #efebe2; }
.take-audio-cover img { width: 100%; height: 100%; object-fit: contain; display: block; }
.take-timeline-canvas { width: 100%; height: 100%; display: block; object-fit: contain; }
.take-audio-stamp { position: absolute; top: 10px; left: 10px; padding: 4px 8px; border-radius: 999px; background: rgba(29,27,23,.72); color: #fff; font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.take-player { display: grid; grid-template-columns: 43px minmax(0,1fr); align-items: center; gap: 11px; padding: 11px 7px 5px; }
.take-preview-play { width: 43px; height: 43px; display: inline-grid; place-items: center; padding: 0 0 0 2px; border: 1.4px solid var(--ink); border-radius: 46% 54% 49% 51%; background: var(--accent); color: #fff; cursor: pointer; font-size: 15px; box-shadow: 1px 2px 0 rgba(29,27,23,.16); transition: transform .12s, box-shadow .12s; }
.take-preview-play:hover { transform: translateY(-1px); box-shadow: 2px 3px 0 rgba(29,27,23,.16); }
.take-preview-play:focus-visible { outline: 3px solid rgba(112,136,199,.24); outline-offset: 3px; }
.take-preview-play.is-playing { padding-left: 0; background: var(--ink); }
.take-player-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.take-player-copy { display: flex; align-items: baseline; justify-content: space-between; gap: 9px; }
.take-player-label { overflow: hidden; color: var(--ink); font-size: 10.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.take-player-label.is-error { color: #a34b39; }
.take-player-time { flex: none; color: var(--ink-soft); font-size: 9.5px; font-variant-numeric: tabular-nums; }
.take-progress { --played: 0%; width: 100%; height: 16px; margin: 0; padding: 0; border: 0; outline: none; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.take-progress::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: linear-gradient(to right,var(--accent) 0 var(--played),var(--line) var(--played) 100%); }
.take-progress::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -5px; border: 1.2px solid var(--ink); border-radius: 50%; background: #fff; box-shadow: 1px 1px 0 rgba(29,27,23,.14); -webkit-appearance: none; }
.take-progress::-moz-range-track { height: 4px; border-radius: 999px; background: var(--line); }
.take-progress::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--accent); }
.take-progress::-moz-range-thumb { width: 14px; height: 14px; border: 1.2px solid var(--ink); border-radius: 50%; background: #fff; }
.take-audio-element { display: none; }
.take-details { min-width: 0; display: flex; flex-direction: column; align-items: stretch; padding: 6px 0 2px; }
.take-copy { margin: 0 0 25px; color: var(--ink-soft); font-size: 13px; line-height: 1.6; }
.take-title-label { margin-bottom: 7px; color: var(--ink-soft); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.take-title { width: 100%; border: 1.3px solid var(--line); border-radius: 10px 13px 9px 12px; background: #fff; outline: none; padding: 9px 11px 10px; font-family: var(--hand); font-size: 22px; font-weight: 600; transition: border-color .12s, box-shadow .12s; }
.take-title:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(112,136,199,.1); }
.take-meta { margin: 9px 2px 15px; color: var(--ink-soft); font-size: 10.5px; }
.take-elements { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 26px; }
.take-elements[hidden] { display: none; }
.take-elements span { max-width: 160px; overflow: hidden; padding: 5px 9px; border: 1px solid rgba(29,27,23,.1); border-radius: 999px; background: var(--tag); color: #6f695d; font-size: 10px; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.take-actions { display: flex; align-items: center; gap: 9px; margin-top: auto; }
.take-actions button { min-height: 42px; border: 1.3px solid var(--ink); border-radius: 14px 17px 13px 16px; padding: 9px 14px; cursor: pointer; font-size: 11.5px; }
.take-discard { background: transparent; color: #9c4938; }
.take-keep { flex: 1; background: var(--accent); color: #fff; font-weight: 600; }
.take-actions button:hover { transform: translateY(-1px); }
.creations-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.creations-empty { min-height: 330px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--ink-soft); border: 1.5px dashed var(--line); border-radius: 20px; }
.creations-empty[hidden] { display: none; }
.creations-empty > span { font-size: 34px; color: var(--accent); }
.creations-empty h3 { margin: 12px 0 4px; color: var(--ink); font-family: var(--hand); font-size: 21px; }
.creations-empty p { max-width: 380px; margin: 0; font-size: 13px; }
.creation-card { overflow: hidden; background: var(--paper-2); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 10px 28px rgba(40,36,28,.08); transition: transform .16s, box-shadow .16s; }
.creation-card:hover { transform: translateY(-2px); box-shadow: 0 15px 34px rgba(40,36,28,.13); }
.creation-visual { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #eeeae1; }
.creation-visual > img, .creation-visual > video { width: 100%; height: 100%; display: block; object-fit: contain; }
.creation-visual > video { position: absolute; inset: 0; background: #111; }
.creation-badge { position: absolute; top: 10px; left: 10px; z-index: 2; padding: 4px 9px; border-radius: 999px; background: rgba(20,18,15,.7); color: #fff; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); font-size: 10px; }
.creation-play { position: absolute; inset: 0; z-index: 1; margin: auto; width: 54px; height: 54px; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; background: rgba(20,18,15,.62); color: #fff; cursor: pointer; font-size: 16px; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.creation-card.playing .creation-play { opacity: 0; }
.creation-body { padding: 13px 14px 15px; }
.creation-title { width: 100%; border: none; border-bottom: 1px dashed transparent; outline: none; background: transparent; font-family: var(--hand); font-weight: 600; font-size: 17px; }
.creation-title:focus { border-bottom-color: var(--accent); }
.creation-meta { margin: 5px 0 10px; color: var(--ink-soft); font-size: 10.5px; }
.creation-tags { display: flex; flex-wrap: wrap; gap: 5px; min-height: 22px; }
.creation-tags span { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 7px; border-radius: 999px; background: var(--tag); font-size: 9.5px; }
.creation-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.creation-actions button { border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 5px 9px; cursor: pointer; font-size: 10px; }
.creation-actions button:hover { border-color: var(--ink); }
.download-control { position: relative; display: inline-flex; }
.download-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 9px; white-space: nowrap; line-height: 1; }
.download-trigger > span:first-child { display: block; line-height: 1; }
.download-trigger-caret { width: 8px; height: 8px; flex: none; display: block; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transform-origin: 50% 50%; }
.download-control.open .download-trigger-caret { transform: translateY(2px) rotate(225deg); }
.download-menu { position: absolute; z-index: 30; left: 0; bottom: calc(100% + 9px); width: 218px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-2); box-shadow: 0 16px 36px rgba(40,36,28,.18); }
.download-menu[hidden] { display: none !important; }
.download-menu .download-option { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); text-align: left; }
.download-menu .download-option:hover, .download-menu .download-option:focus-visible { transform: none; border-color: transparent; outline: none; background: var(--tag); }
.download-option-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.download-option-copy strong { font-family: var(--hand); font-size: 12px; font-weight: 600; }
.download-option-copy small { color: var(--ink-soft); font-size: 9.5px; }
.download-option-badge { flex: none; padding: 3px 6px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); font-size: 8px; }
.creation-actions .download-trigger { background: var(--accent); border-color: var(--accent); color: #fff; }
.creation-actions .delete { margin-left: auto; color: #a34b39; }
.take-download-slot { flex: 1; min-width: 0; }
.take-download-slot .download-control, .take-download-slot .download-trigger { width: 100%; }
.take-download-slot .download-trigger { min-height: 42px; border: 1.3px solid var(--ink); border-radius: 14px 17px 13px 16px; padding: 9px 14px; background: var(--ink); color: #fff; font-weight: 600; }
.take-download-slot .download-menu { width: min(238px, 70vw); }

/* ---------------- doodle keyboard ---------------- */
.dock-kb { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.kb-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 9px; }
.kb-instrument { font-family: var(--hand); font-size: 17px; color: var(--accent); }
.kb-sep { color: var(--ink-soft); }
.kb-sub { font-size: 12px; font-style: italic; color: var(--ink-soft); }
.keyboard { user-select: none; touch-action: none; }
.keyboard svg { display: block; }
.kb-pebble { fill: #fff; stroke: var(--ink); stroke-width: 2.4; cursor: pointer; transition: fill 0.08s ease; }
.kb-pebble:hover { fill: var(--tag); }
.kb-pebble.active { fill: #fbd9a0; }
.kb-label { font-family: var(--hand); font-size: 12px; fill: var(--ink-soft); pointer-events: none; }
.kb-hint { margin: 11px 0 0; font-size: 13px; color: var(--ink-soft); font-style: italic; }
.kb-hint b { font-style: normal; font-family: var(--hand); font-size: 15px; letter-spacing: 0.04em; }

/* scrollbars — hidden, content still scrolls (native overlay on trackpad) */
.shelf, .mix-readout { scrollbar-width: none; -ms-overflow-style: none; }
.shelf::-webkit-scrollbar, .mix-readout::-webkit-scrollbar { width: 0; height: 0; }

/* ---------------- FigJam rail + flyout + full-bleed canvas ---------------- */
.stage { padding: 0; }
.board { border-radius: 0; background: transparent; box-shadow: none; overflow: hidden; }
.board::after { display: none; }
.board.dragover { background: rgba(255,255,255,.34); box-shadow: inset 0 0 0 2.5px rgba(112,136,199,.42); }

.rail {
  position: absolute; z-index: 44; left: 20px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 5px; padding: 8px;
  border: 1px solid rgba(29,27,23,.11); border-radius: 23px 20px 24px 21px;
  background: rgba(252,251,247,.92);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 14px 36px rgba(40,36,28,.14), 0 2px 5px rgba(40,36,28,.05);
}
.rail-divider { width: 30px; height: 1px; flex: none; align-self: center; margin: 4px 0 3px; background: rgba(29,27,23,.14); }
.rail-group { display: flex; flex-direction: column; gap: 7px; }
.rail-btn {
  --rail-ink: var(--ink); --rail-paper: #fffdf8; --rail-wash: #eee8d8;
  width: 46px; height: 46px; flex: none;
  border: 1.5px solid transparent; border-radius: 15px 13px 16px 14px;
  background: transparent; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .14s, transform .12s, border-color .14s, box-shadow .14s;
}
.rail-btn:nth-child(2n) { border-radius: 13px 16px 14px 17px; }
.rail-btn:hover { background: var(--tag); transform: translateY(-1px) rotate(-1deg); }
.rail-btn:nth-child(even):hover { transform: translateY(-1px) rotate(1deg); }
.rail-btn.on { --rail-ink: var(--accent); --rail-paper: #fff8f5; --rail-wash: #f2dfd7; background: #fff; border-color: rgba(112,136,199,.72); box-shadow: 0 3px 12px rgba(112,136,199,.22); }
.rail-btn:focus-visible { outline: 3px solid rgba(112,136,199,.22); outline-offset: 2px; }
.rail-btn .rail-icon { width: 30px; height: 30px; display: block; overflow: visible; filter: url(#sketch); }
.rail-icon .icon-paper { fill: var(--rail-paper); stroke: var(--rail-ink); stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.rail-icon .icon-line { fill: none; stroke: var(--rail-ink); stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.rail-icon .icon-detail { stroke-width: 1.15; opacity: .84; }
.rail-icon .icon-wash { fill: var(--rail-wash); stroke: none; }
.rail-icon .icon-accent { fill: var(--accent); stroke: var(--accent); stroke-width: 1.05; stroke-linecap: round; stroke-linejoin: round; }
.rail-icon .icon-accent-line { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.rail-icon .icon-squiggle { stroke-width: 1.35; }
.rail-icon .icon-leaf-wash { fill: #dfe9d8; }
.rail-icon .icon-key { fill: var(--ink); stroke: var(--ink); stroke-width: .8; stroke-linejoin: round; }
.rail-btn.on .icon-key { fill: var(--accent); stroke: var(--accent); }
.rail-icon .icon-keycap { fill: var(--rail-paper); stroke: var(--rail-ink); stroke-width: 1.4; }
.rail-icon .icon-key-label { fill: var(--rail-ink); font-family: var(--hand); font-size: 7px; font-weight: 600; text-anchor: middle; }
.rail-perform {
  width: 46px; align-self: center;
  display: flex; flex-direction: column; gap: 7px;
  padding: 2px 1px 1px;
  border: 0; background: transparent; box-shadow: none;
}
.rail-perform .rail-tool-btn {
  --tool-ink: #a84b39; --tool-paper: #fff1ec;
  position: relative; width: 46px; height: 46px; padding: 4px 3px 3px;
  flex-direction: column; gap: 1px;
  border: 1px solid rgba(29,27,23,.12); border-radius: 13px 11px 14px 12px;
  background: rgba(255,255,255,.42); color: rgba(29,27,23,.72);
  box-shadow: none; transform: none;
}
.rail-perform .rail-tool-btn[data-tool="dj"] { --tool-ink: #277d71; --tool-paper: #eaf5f1; border-radius: 11px 14px 12px 13px; }
.rail-perform .rail-tool-btn:hover,
.rail-perform .rail-tool-btn:nth-child(even):hover {
  color: var(--ink); background: rgba(29,27,23,.06); transform: translateY(-1px);
}
.rail-perform .rail-tool-btn.on {
  color: var(--tool-ink); background: var(--tool-paper); border-color: currentColor;
  box-shadow: 0 2px 7px rgba(40,36,28,.1);
}
.rail-perform .rail-tool-btn.on::after {
  content: ""; position: absolute; right: 5px; top: 5px;
  width: 4px; height: 4px; border-radius: 50%; background: currentColor;
}
.rail-perform .rail-tool-btn.err { color: #9b3e32; background: #fff0ed; border-color: #c66c5f; }
.rail-perform .rail-tool-btn.pending { animation: perform-pending .7s ease-in-out infinite alternate; }
.rail-perform .rail-tool-btn .rail-icon { width: 25px; height: 25px; margin: 0; filter: none; }
.perform-name {
  display: block; max-width: 100%; overflow: hidden; text-overflow: clip; white-space: nowrap;
  color: currentColor; font-family: var(--body); font-size: 8.5px; font-weight: 500; line-height: 1;
  letter-spacing: 0; text-transform: none; pointer-events: none;
}
.perform-icon-frame, .perform-icon-line, .perform-icon-corners {
  fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
}
.perform-icon-corners { stroke-width: 1.15; opacity: .64; }
.perform-icon-fill { fill: currentColor; stroke: none; }
@keyframes perform-pending { from { opacity: .48; } to { opacity: 1; } }
.rail-icon .icon-sticker { fill: var(--rail-paper); stroke: var(--rail-ink); stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.rail-icon .icon-fold { fill: #fff; stroke: var(--rail-ink); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }

.rail-flyout {
  position: absolute; z-index: 43; left: 88px; top: 50%;
  transform: translateY(-50%) translateX(-10px);
  width: 248px; max-height: min(560px, calc(100% - 40px));
  overflow-y: auto; padding: 17px 17px 19px;
  border: 1px solid rgba(29,27,23,.1); border-radius: 20px;
  background: rgba(252,251,247,.97);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 20px 48px rgba(40,36,28,.18), 0 2px 6px rgba(40,36,28,.06);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .2s cubic-bezier(.4,.1,.2,1);
  scrollbar-width: none;
}
.rail-flyout::-webkit-scrollbar { width: 0; height: 0; }
.rail-flyout.open { opacity: 1; pointer-events: auto; transform: translateY(-50%) translateX(0); }
.rail-flyout::before {
  content: ""; position: absolute; left: -7px; top: 50%;
  width: 13px; height: 13px; transform: translateY(-50%) rotate(45deg);
  background: rgba(252,251,247,.97);
  border-left: 1px solid rgba(29,27,23,.1); border-bottom: 1px solid rgba(29,27,23,.1);
}
.rail-panel { display: none; }
.rail-panel.on { display: flex; flex-direction: column; }
.rail-panel + .rail-panel { margin-top: 0; }
.merged-instruments.on { margin-top: 18px; padding-top: 16px; border-top: 1px dashed rgba(29,27,23,.18); }

/* the old shelf collapse toggle is replaced by the rail */
#shelfToggle { display: none !important; }

/* keys dock — one clearly-contained centered floating panel */
.midi-chassis {
  position: relative;
  padding: 14px 14px 10px; border-radius: 22px;
  border: 1px solid rgba(29,27,23,.14);
  background: rgba(248,250,246,.96);
  box-shadow: 0 18px 40px rgba(40,36,28,.18), 0 2px 6px rgba(40,36,28,.07);
  transform: translateY(0);
  transition: transform .28s cubic-bezier(.4,.1,.2,1), box-shadow .2s ease;
}
.midi-chassis::before { display: none; }
.keys-edge-toggle {
  position: absolute; z-index: 3; left: 50%; top: 0;
  width: 44px; height: 13px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transform: translateX(-50%);
  border: 0; border-radius: 0 0 8px 8px;
  background: transparent; color: rgba(29,27,23,.42);
  box-shadow: none; cursor: pointer; opacity: .8;
}
.keys-edge-toggle svg { width: 17px; height: 9px; overflow: visible; transition: transform .2s ease; }
.keys-edge-toggle path { fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.keys-edge-toggle:hover { color: var(--accent); opacity: 1; }
.keys-edge-toggle:focus-visible { outline: 3px solid rgba(112,136,199,.22); outline-offset: 2px; }
body.dock-collapsed .midi-chassis {
  transform: translateY(var(--keys-collapse-y, 150px));
  box-shadow: 0 -4px 14px rgba(40,36,28,.1);
}
body.dock-collapsed .keys-edge-toggle svg { transform: rotate(180deg); }

/* ---------------- collapsible panels + immersive DJ ---------------- */
.panel-toggle {
  position: fixed; z-index: 55; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--line); background: var(--paper); color: var(--ink-soft);
  cursor: pointer; font-size: 11px; line-height: 1;
  box-shadow: 0 2px 10px rgba(29,27,23,.10);
  transition: left .3s cubic-bezier(.4,.1,.2,1), transform .18s ease, background .18s, color .18s, box-shadow .18s;
}
.panel-toggle:hover { background: var(--accent); color: #fff; box-shadow: 0 3px 14px rgba(29,27,23,.2); }
.pt-shelf { left: 248px; top: 94px; width: 24px; height: 44px; border-radius: 9px 12px 11px 8px; }
.pt-shelf:hover { transform: translateX(1px); }

.shelf { transition: transform .3s cubic-bezier(.4,.1,.2,1), opacity .25s ease; }
.dock { transition: opacity .24s ease; }
body.shelf-collapsed .shelf { transform: translateX(calc(-100% - 56px)); opacity: 0; pointer-events: none; }
body.shelf-collapsed .pt-shelf { left: 12px; }

/* Camera DJ is a performance layer on the collage canvas, not a separate full-screen mode. */
body.mode-dj .board.cam-on .cam-feed { opacity: .72; }
body.mode-dj .cam-legend { display: block; }
body.mode-keys:not(.dock-collapsed) .cam-legend { bottom: 16px; }
body.records-open .cam-legend,
body:has(.records-drawer-shell.open) .cam-legend {
  right: calc(min(344px, calc(100vw - 68px)) + 16px);
}

@media (max-width: 1499px) {
  body.mode-keys:not(.dock-collapsed) .cam-legend:not(.collapsed) {
    width: min(300px,calc(100% - 96px));
  }
  body.records-open .cam-legend,
  body:has(.records-drawer-shell.open) .cam-legend {
    opacity: 0; pointer-events: none;
  }
}

@media (max-width: 1180px) {
  .engine-status { display: none; }
  .midi-status { display: none; }
  .dock-keys { width: min(480px,calc(100vw - 80px)); }
  body.mode-dj.mode-keys:not(.dock-collapsed) .dock { right: 320px; }
}

@media (max-width: 900px) {
  .board-title { display: none; }
  .stage { padding: 8px 16px 16px; }
  .shelf { left: 28px; top: 18px; bottom: 28px; width: 196px; }
  body.mode-keys .shelf { bottom: 174px; }
  .board-hint { left: 76px; right: 16px; width: auto; max-width: none; font-size: 18px; }
  .pt-shelf { left: 216px; top: 90px; }
  .dock { bottom: 20px; padding-inline: 24px; }
  .dock-keys { width: min(520px,calc(100vw - 210px)); }
  body.mode-dj.mode-keys:not(.dock-collapsed) .dock { right: 190px; }
  body.mode-dj.mode-keys:not(.dock-collapsed) .cam-legend { width: 170px; }
  body.mode-dj.mode-keys:not(.dock-collapsed) .cam-legend .cam-legend-list { display: none; }
}

@media (max-width: 1050px) {
  .guide-steps { flex-wrap: wrap; }
}

@media (max-width: 760px) {
  .home-guide { grid-template-columns: 1fr; }
  .guide-copy { order: 1; }
  .guide-collage { order: 2; width: min(650px,100%); justify-self: center; }
  .modal-layer { padding: 12px; }
  .take-sheet { padding: 20px; }
  .take-layout { grid-template-columns: 1fr; }
  .take-media.is-audio { width: min(520px,100%); justify-self: center; }
}

/* Compact playback, silent visual status, and a detached Creations popover. */
@media (min-width: 761px) {
  body:not(.home-open) .topbar .studio-playback-island {
    width: 156px !important;
    min-width: 0 !important;
    flex: 0 0 156px !important;
    padding: 4px 6px !important;
  }
  body:not(.home-open) .topbar .engine-status,
  body.records-open:not(.home-open) .topbar .engine-status {
    position: fixed !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    display: block !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }
  #recordsDrawer.records-drawer-shell,
  body.records-open #recordsDrawer.records-drawer-shell,
  body.photo-inspector-open #recordsDrawer.records-drawer-shell {
    right: 16px !important;
    bottom: 14px !important;
    width: 156px !important;
    height: 54px !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  #recordsDrawer.records-drawer-shell.open,
  body.records-open #recordsDrawer.records-drawer-shell.open,
  body.photo-inspector-open #recordsDrawer.records-drawer-shell.open {
    width: 156px !important;
    height: 54px !important;
  }
  #recordsDrawer .records-tab,
  #recordsDrawer.records-drawer-shell.open .records-tab,
  body.records-open #recordsDrawer.records-drawer-shell.open .records-tab {
    position: absolute !important;
    inset: 0 !important;
    width: 156px !important;
    height: 54px !important;
    min-height: 54px !important;
    border: 1px solid rgba(36,37,34,.1) !important;
    border-radius: 12px !important;
    background: rgba(255,255,253,.96) !important;
    box-shadow: 0 1px 2px rgba(32,31,28,.045), 0 5px 14px rgba(32,31,28,.06) !important;
  }
  #recordsDrawer.records-drawer-shell.open .records-tab,
  body.records-open #recordsDrawer.records-drawer-shell.open .records-tab {
    border-color: rgba(36,37,34,.17) !important;
    background: #fff !important;
  }
  #recordsDrawer .records-drawer,
  #recordsDrawer.records-drawer-shell.open .records-drawer,
  body.records-open #recordsDrawer .records-drawer,
  body.photo-inspector-open #recordsDrawer.records-drawer-shell.open .records-drawer {
    position: absolute !important;
    inset: auto 0 62px auto !important;
    width: 300px !important;
    height: auto !important;
    min-height: 150px !important;
    max-height: min(430px, calc(100dvh - 100px)) !important;
    box-sizing: border-box !important;
    padding: 14px !important;
    overflow: hidden !important;
    border: 1px solid rgba(36,37,34,.1) !important;
    border-radius: 14px !important;
    background: rgba(255,255,253,.98) !important;
    box-shadow: 0 2px 5px rgba(32,31,28,.055), 0 14px 34px rgba(32,31,28,.09) !important;
    backdrop-filter: blur(16px) saturate(1.06) !important;
    transform: translateY(6px) scale(.985) !important;
    transform-origin: 100% 100% !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform .2s cubic-bezier(.2,.78,.18,1), opacity .14s ease, visibility 0s .2s !important;
  }
  #recordsDrawer.records-drawer-shell.open .records-drawer,
  body.records-open #recordsDrawer.records-drawer-shell.open .records-drawer,
  body.photo-inspector-open #recordsDrawer.records-drawer-shell.open .records-drawer {
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition-delay: 0s !important;
  }
  #recordsDrawer .records-drawer-head {
    display: grid !important;
    grid-template-columns: 32px minmax(0,1fr) 28px !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid #ecebe6 !important;
  }
  #recordsDrawer .records-drawer-mark { width: 32px !important; height: 32px !important; display: grid !important; border-radius: 8px !important; transform: none !important; box-shadow: none !important; }
  #recordsDrawer .records-drawer-mark svg { width: 23px !important; height: 23px !important; filter: none !important; }
  #recordsDrawer .records-drawer-head p { margin: 0 0 2px !important; font-size: 8px !important; }
  #recordsDrawer .records-drawer-head h2 { margin: 0 !important; font: 650 15px/1.1 var(--body) !important; }
  #recordsDrawer .rack-label { margin-top: 3px !important; font-size: 8px !important; }
  #recordsDrawer .records-drawer-close { width: 28px !important; height: 28px !important; display: grid !important; border: 0 !important; border-radius: 7px !important; background: #f1f0eb !important; }
  #recordsDrawer .records-row {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    max-height: 318px !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 12px 0 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    pointer-events: auto !important;
  }
  #recordsDrawer .records-empty-guide {
    position: static !important;
    width: 100% !important;
    min-height: 116px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    padding: 14px 4px 4px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left !important;
  }
  #recordsDrawer .records-empty-mark { display: none !important; }
  #recordsDrawer .records-empty-guide h3 { margin: 0 0 5px !important; font: 650 13px/1.2 var(--body) !important; }
  #recordsDrawer .records-empty-guide p { margin: 0 !important; font: 500 9px/1.45 var(--body) !important; }
  #recordsDrawer .records-empty-record { margin-top: 13px !important; }
  #recordsDrawer .records-drawer-note[hidden] { display: none !important; }
}

@media (min-width: 761px) and (max-height: 620px) {
  #recordsDrawer .records-drawer { max-height: calc(100dvh - 88px) !important; }
  #recordsDrawer .records-row { max-height: calc(100dvh - 182px) !important; }
}

@media (min-width: 761px) {
  html body.records-open:not(.home-open) .topbar #engineStatus,
  html body:not(.home-open) .topbar #engineStatus {
    position: fixed !important;
    left: -10000px !important;
    top: auto !important;
    right: auto !important;
    width: 1px !important;
    max-width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    display: block !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    transform: none !important;
  }
}

@media (max-width: 680px) {
  body.mode-dj.mode-keys:not(.dock-collapsed) .dock { right: 0; }
  body.mode-dj.mode-keys:not(.dock-collapsed) .dock-keys { width: min(576px,calc(100vw - 48px)); }
  body.mode-dj.mode-keys:not(.dock-collapsed) .cam-legend { opacity: 0; pointer-events: none; }
}

@media (max-width: 580px) {
  .topbar { flex-wrap: nowrap; gap: 5px; padding: 12px 12px 4px; }
  .brand { font-size: 20px; gap: 6px; }
  .brand-mark { width: 24px; height: 24px; }
  .transport { gap: 3px; }
  .now-time { display: none; }
  .tbtn { width: 29px; height: 29px; font-size: 11px; }
  .cam-legend { right: 10px; bottom: 10px; width: min(294px,calc(100% - 80px)); }
  body.mode-keys:not(.dock-collapsed) .cam-legend { bottom: 10px; }
  .board-hint { left: 66px; right: 10px; font-size: 16px; line-height: 1.38; }
  .home-nav { padding: 15px 18px; }
  .home-main { padding: 35px 17px 70px; }
  .guide-copy h1 { font-size: 45px; }
  .guide-steps { display: grid; grid-template-columns: 1fr 1fr; }
  .guide-collage { font-size: 80%; }
  .guide-keys > .pkeys { transform: scale(.46); }
  .midi-chassis { max-width: calc(100vw - 14px); padding-inline: 6px; }
  .midi-panel { padding-inline: 1px; }
  .keys-row { gap: 4px; }
  .key-volume { gap: 3px; }
  .key-volume input { width: 38px; }
  .key-volume output { display: none; }
  .keys-toggle, .keys-refresh { padding-inline: 6px; font-size: 8.5px; }
  .keyboard { gap: 6px; padding-inline: 5px; }
  .pkeys { --white-key-w: calc((100vw - 111px) / 8); --white-key-h: 62px; --black-key-w: 23px; --black-key-h: 38px; }
  .octave-bank { width: 58px; height: 62px; padding: 5px 4px; }
  .oct-key { width: 22px; }
  .home-section-head { align-items: flex-start; flex-direction: column; }
  .section-tools { width: 100%; justify-content: space-between; }
  .boards-grid, .creations-grid { grid-template-columns: 1fr; }
  .rail { left: 9px; gap: 4px; padding: 6px; border-radius: 19px; }
  .rail-group { gap: 4px; }
  .rail-btn { width: 42px; height: 42px; }
  .rail-btn .rail-icon { width: 29px; height: 29px; }
  .rail-perform { width: 42px; gap: 5px; padding-inline: 0; }
  .rail-perform .rail-tool-btn { width: 42px; height: 42px; padding-block: 3px; }
  .rail-perform .rail-tool-btn .rail-icon { width: 23px; height: 23px; }
  .perform-name { font-size: 7.5px; }
  .rail-flyout { left: 66px; width: min(240px,calc(100vw - 82px)); }
  .records-drawer-shell { top: 65px; bottom: 10px; width: calc(100vw - 52px); }
  .records-tab { width: 44px; min-height: 111px; padding-inline: 5px; }
  .records-drawer { padding: 17px 12px 12px; border-radius: 21px 0 0 23px; }
  .records-drawer-head { grid-template-columns: 39px minmax(0,1fr) 30px; }
  .records-drawer-mark { width: 39px; height: 39px; }
  .creation-mini { grid-template-columns: 96px minmax(0,1fr); min-height: 80px; }
  .creation-mini-visual { min-height: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  .records-tab, .records-drawer, .records-tab-arrow, .creation-mini { transition-duration: .01ms !important; }
}

@media (hover: none) {
  .board-file-delete { opacity: .72; pointer-events: auto; }
}

/* Account access — a small blue sketch control shared by Home and Studio. */
.account-control {
  position:fixed;
  z-index:214;
  top:14px;
  right:16px;
  width:auto;
  min-width:44px;
  height:44px;
  font-family:var(--fj-ui-font,"Grandstander",sans-serif);
  pointer-events:auto;
}
.account-control[hidden],.account-menu[hidden],.account-sign-in[hidden],.account-toggle[hidden] { display:none!important; }
.account-sign-in {
  min-width:62px;
  min-height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 13px;
  background:transparent var(--fj-shape-pill-hover,url("./assets/ui/doodle-pill-ice.svg")) center/100% 100% no-repeat;
  color:#2d789e;
  font-size:10.5px;
  font-weight:680;
  text-decoration:none;
  transition:transform var(--fj-ui-motion-fast,160ms) ease;
}
.account-sign-in:hover { transform:translateY(-1px) rotate(-.5deg); }
.account-sign-in:focus-visible { outline:0;background-image:var(--fj-shape-pill-focus,url("./assets/ui/doodle-pill-focus.svg")); }
body:not(.home-open) .account-sign-in { display:none!important; }
.account-toggle {
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  outline:0;
  background:transparent var(--fj-shape-circle-hover,url("./assets/ui/doodle-circle-ice.svg")) center/100% 100% no-repeat;
  color:#477596;
  cursor:pointer;
  transition:transform var(--fj-ui-motion-fast,160ms) ease;
}
.account-toggle:hover { transform:translateY(-1px) rotate(1deg); }
.account-toggle:focus-visible,.account-toggle[aria-expanded="true"] {
  background-image:var(--fj-shape-circle-focus,url("./assets/ui/doodle-circle-focus.svg"));
}
.account-avatar { font-size:15px;font-weight:720;line-height:1;text-transform:uppercase; }
.account-menu {
  position:absolute;
  top:52px;
  right:0;
  width:max-content;
  min-width:0;
  min-height:0;
  box-sizing:border-box;
  padding:8px 9px 9px;
  border:0;
  background:color-mix(in srgb,var(--fj-ui-paper,#fffdf8) 96%,transparent);
  border-radius:10px 12px 9px 11px;
  color:#477596;
  box-shadow:0 7px 18px rgba(45,120,158,.13);
}
.account-sign-out {
  width:auto;
  min-height:30px;
  display:inline-flex;
  align-items:center;
  padding:2px 3px;
  border:0;
  outline:0;
  background:none;
  box-shadow:none;
  color:#2d789e;
  font-size:11px;
  font-weight:650;
  text-align:left;
  white-space:nowrap;
  text-decoration:underline;
  text-decoration-color:transparent;
  text-decoration-thickness:1.5px;
  text-underline-offset:4px;
  cursor:pointer;
}
.account-sign-out:hover,.account-sign-out:focus-visible { color:#216b91;text-decoration-color:currentColor; }
.account-sign-out:disabled,.account-sign-out[aria-busy="true"] { cursor:wait;opacity:.5; }
.account-status { max-width:210px;margin:7px 3px 1px;color:#8b4d45;font-size:9px;font-weight:550;line-height:1.35;overflow-wrap:anywhere; }
.account-status[hidden] { display:none!important; }
body.home-open .account-control { top:18px;right:24px; }
@media (min-width:901px) {
  body:not(.home-open) .studio-control-cluster { right:68px!important; }
}
@media (max-width:900px) {
  body:not(.home-open) .account-control { top:64px;right:12px; }
}
@media (max-width:520px) {
  body.home-open .account-control { top:12px;right:14px; }
  .account-sign-in { min-height:42px;padding-inline:14px; }
  .account-menu { width:max-content;max-width:calc(100vw - 28px); }
}
@media (prefers-reduced-motion:reduce) { .account-toggle,.account-sign-in { transition:none; } }

/* ====================================================================
   Core Studio V3 — archival source drawer + flat disc canvas
   This layer intentionally keeps every original control id and event path.
   ==================================================================== */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  z-index: 10000;
  top: 10px;
  left: 12px;
  padding: 9px 13px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  color: var(--ink);
  background: var(--paper-2);
  font-weight: 700;
  transform: translateY(calc(-100% - 18px));
  transition: transform .16s ease;
}

.skip-link:focus-visible {
  transform: translateY(0);
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
body.home-open .skip-link-studio,
body:not(.home-open) .skip-link-home { display: none; }

body {
  background: var(--paper);
  background-image:
    linear-gradient(rgba(29, 27, 23, .022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29, 27, 23, .018) 1px, transparent 1px);
  background-size: 22px 22px;
}

.topbar {
  z-index: 60;
  min-height: 72px;
  padding: 14px 24px;
  border-bottom: 1px solid rgba(29, 27, 23, .48);
  background: rgba(248, 244, 231, .96);
}
.brand {
  gap: 8px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.025em;
}
.brand-mark { width: 30px; height: 30px; }
.board-title {
  position: absolute;
  left: clamp(190px, 25vw, 390px);
  width: min(270px, 22vw);
  font-size: 17px;
  font-weight: 400;
  text-align: left;
}
.engine-status {
  position: fixed;
  z-index: 58;
  right: 23px;
  bottom: 20px;
  max-width: min(340px, 28vw);
  padding: 7px 10px;
  border: 1px solid rgba(29, 27, 23, .34);
  border-radius: 2px;
  background: rgba(248, 244, 231, .9);
  color: var(--ink-soft);
  font-family: var(--body);
  font-size: 10px;
  letter-spacing: .035em;
  text-transform: lowercase;
}

.transport {
  position: fixed;
  z-index: 62;
  top: 91px;
  right: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 7px 10px;
  border: 1px solid rgba(29, 27, 23, .58);
  border-radius: 26px;
  background: rgba(248, 244, 231, .94);
}
.transport .rec-time {
  position: absolute;
  top: -21px;
  padding: 1px 5px;
  border-radius: 2px;
  background: var(--archive-pink);
  color: var(--ink);
  font-size: 9px;
}
.now-time {
  order: -1;
  min-width: auto;
  padding: 0 2px 3px;
  color: var(--ink-soft);
  font-family: var(--body);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.tbtn {
  width: 42px;
  height: 42px;
  border: 1.2px solid var(--ink);
  border-radius: 50%;
  background: var(--paper-2);
  font-family: system-ui, sans-serif;
  font-size: 12px;
  box-shadow: none;
}
.tbtn:hover { background: var(--archive-yellow); transform: none; }
#playPause { background: var(--archive-pink); }
#playPause.is-live { background: var(--archive-green); color: var(--ink); }
#recBtn { background: var(--archive-blue); }

.stage {
  --archive-width: clamp(318px, 25vw, 382px);
  --control-gutter: 96px;
  position: relative;
  display: grid;
  grid-template-columns: var(--archive-width) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 52px);
  height: calc(100dvh - 72px);
  min-height: 0;
  padding: 18px var(--control-gutter) 22px 20px;
  overflow: hidden;
  transition: grid-template-columns .36s cubic-bezier(.4, .1, .2, 1), gap .36s cubic-bezier(.4, .1, .2, 1);
}

.archive-shell {
  position: relative;
  z-index: 45;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(29, 27, 23, .68);
  background: #f9f6ec;
  box-shadow: 4px 5px 0 rgba(29, 27, 23, .06);
  transition: width .36s cubic-bezier(.4, .1, .2, 1), background .2s ease;
}
.archive-head {
  position: relative;
  min-height: 76px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 44px 12px 15px;
  border-bottom: 1px solid rgba(29, 27, 23, .68);
}
.archive-heading { min-width: 0; }
.archive-kicker,
.performance-caption,
.panel-eyebrow {
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.archive-heading p {
  max-width: 270px;
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 10px;
  line-height: 1.25;
}
.archive-toggle {
  position: absolute;
  z-index: 5;
  top: 0;
  right: 0;
  width: 38px;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-left: 1px solid rgba(29, 27, 23, .68);
  background: var(--archive-yellow);
  cursor: pointer;
}
.archive-toggle:hover { background: #f5d983; }
.archive-toggle-mark {
  display: block;
  font-family: system-ui, sans-serif;
  font-size: 28px;
  font-weight: 300;
  transition: transform .32s ease;
}
.archive-contents {
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  opacity: 1;
  transition: opacity .16s ease;
}

.rail {
  position: static;
  z-index: auto;
  left: auto;
  top: auto;
  transform: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.rail > .rail-btn {
  --section-colour: var(--archive-blue);
  position: relative;
  width: 100%;
  height: 56px;
  display: grid;
  grid-template-columns: 22px 29px minmax(0, 1fr) 16px;
  align-items: center;
  justify-content: stretch;
  gap: 7px;
  padding: 8px 10px;
  border: 0;
  border-right: 1px solid rgba(29, 27, 23, .52);
  border-bottom: 1px solid rgba(29, 27, 23, .52);
  border-radius: 0;
  background: color-mix(in srgb, var(--section-colour) 70%, var(--paper) 30%);
  text-align: left;
  transition: background .14s ease, color .14s ease;
}
.rail > .rail-btn:nth-child(2n) { border-right: 0; border-radius: 0; }
.rail > .rail-btn[data-panel="vibes"] { --section-colour: var(--archive-pink); }
.rail > .rail-btn[data-panel="ambience"] { --section-colour: var(--archive-green); }
.rail > .rail-btn[data-panel="doodles"] { --section-colour: var(--archive-yellow); }
.rail > .rail-btn:hover,
.rail > .rail-btn:nth-child(even):hover { background: var(--section-colour); transform: none; }
.rail > .rail-btn.on {
  --rail-ink: var(--ink);
  --rail-paper: var(--paper-2);
  --rail-wash: rgba(255,255,255,.42);
  border-color: rgba(29, 27, 23, .7);
  background: var(--section-colour);
  box-shadow: inset 0 -4px 0 rgba(29, 27, 23, .16);
}
.rail > .rail-btn.on .rail-arrow { transform: rotate(45deg); }
.rail-index {
  color: rgba(29, 27, 23, .64);
  font-size: 8px;
  letter-spacing: .08em;
}
.rail-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
}
.rail-arrow {
  justify-self: end;
  font-family: system-ui, sans-serif;
  font-size: 13px;
  transition: transform .18s ease;
}
.rail > .rail-btn .rail-icon { width: 28px; height: 28px; filter: none; }

.rail-flyout {
  position: relative;
  z-index: auto;
  left: auto;
  top: auto;
  width: auto;
  max-height: none;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  transition: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(29, 27, 23, .28) transparent;
}
.rail-flyout.open { opacity: 1; pointer-events: auto; transform: none; }
.rail-flyout::before { display: none; }
.disc-colour {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(29, 27, 23, .52);
  background: rgba(255, 253, 246, .72);
}
.disc-colour > div:first-child { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.disc-colour span { font-size: 11px; font-weight: 700; }
.disc-colour small {
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 8px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.disc-swatches { display: flex; gap: 5px; }
.disc-swatch {
  width: 19px;
  height: 19px;
  padding: 0;
  border: 1px solid rgba(29, 27, 23, .68);
  border-radius: 50%;
  background: var(--swatch);
  cursor: pointer;
  transition: transform .13s ease, box-shadow .13s ease;
}
.disc-swatch:hover { transform: scale(1.12); }
.disc-swatch.on { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--ink); }

.rail-panel {
  min-height: 0;
  padding: 15px 14px 22px;
}
.rail-panel.on { display: flex; flex-direction: column; }
.rail-panel + .rail-panel { margin-top: 0; }
.merged-instruments.on {
  min-height: auto;
  margin: 0 14px 20px;
  padding: 16px 0 0;
  border-top: 1px solid rgba(29, 27, 23, .42);
}
.shelf-head { align-items: center; margin: 0 0 8px; }
.shelf-head h2 {
  margin-top: 5px;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -.01em;
}
.panel-count {
  min-width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--archive-blue);
  font-size: 9px;
}
.block-note {
  margin: 0 0 10px;
  color: var(--ink-soft);
  font-size: 9.5px;
  font-style: normal;
  line-height: 1.35;
}
.photo-instruction { max-width: 290px; }
.photo-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.archive-action {
  min-height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 8px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--paper-2);
  font-size: 10px;
  cursor: pointer;
}
.archive-action:first-child { background: var(--archive-blue); }
.archive-action:hover,
.archive-action.on { background: var(--archive-pink); }
.crop-pick {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 5px;
  margin: 9px 0 11px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(29, 27, 23, .28);
}
.crop-pick > span { color: var(--ink-soft); font-size: 9px; }
.crop-opt {
  min-width: 54px;
  flex: none;
  padding: 5px 8px;
  border: 1px solid rgba(29, 27, 23, .5);
  border-radius: 999px;
  background: transparent;
  font-size: 9px;
}
.crop-opt.on { border-color: var(--ink); background: var(--archive-green); color: var(--ink); }
.snap-panel {
  margin: 0 0 12px;
  padding: 9px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--archive-blue);
  box-shadow: none;
}
.snap-stage { aspect-ratio: 4 / 3; border-radius: 0; background: #1d1b17; }
.vf-frame { border-color: var(--archive-yellow); border-radius: 0; filter: none; }
.snap-tip { margin: 7px 0; color: var(--ink); font-size: 8.5px; font-style: normal; text-align: left; }
.snap-go,
.snap-x {
  padding: 7px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--paper-2);
  color: var(--ink);
  font-size: 9px;
}
.snap-go { background: var(--archive-yellow); }
#photoTray {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 9px;
}
#photoTray .tray-empty {
  grid-column: 1 / -1;
  min-height: 88px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 16px;
  border: 1px dashed rgba(29, 27, 23, .45);
  color: var(--ink-soft);
  font-size: 10px;
  line-height: 1.45;
  text-align: center;
}
#photoTray .thumb-wrap { width: 100%; min-width: 0; display: block; }
#photoTray .thumb {
  width: 100%;
  height: 92px;
  display: block;
  padding: 5px 5px 16px;
  border: 1px solid rgba(29, 27, 23, .48);
  border-radius: 0;
  background: #fffdf7;
  box-shadow: 2px 2px 0 rgba(29, 27, 23, .09);
  rotate: 0deg;
}
#photoTray .thumb.cut { padding: 4px; border-style: dashed; background: rgba(255,255,255,.45); }
#photoTray .thumb-wrap.in-use .thumb { border-color: var(--ink); box-shadow: inset 0 -5px 0 var(--archive-green); }
.photo-use-badge {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 2px 4px;
  border: 1px solid rgba(29,27,23,.6);
  background: var(--archive-green);
  font-size: 7px;
  line-height: 1;
  letter-spacing: .04em;
  pointer-events: none;
}
.photo-use-badge[hidden] { display: none; }
#photoTray .shelf-del {
  top: 4px;
  right: 4px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--archive-yellow);
  opacity: .86;
  pointer-events: auto;
  z-index: 6;
}
#photoTray .thumb-wrap:hover .shelf-del,
#photoTray .thumb-wrap:focus-within .shelf-del,
#photoTray .shelf-del:focus-visible { opacity: 1; }

.performance-rail {
  position: fixed;
  z-index: 61;
  top: 315px;
  right: 22px;
  width: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 9px 3px 7px;
  border-top: 1px solid rgba(29, 27, 23, .55);
  border-bottom: 1px solid rgba(29, 27, 23, .55);
}
.performance-caption {
  width: 48px;
  margin-bottom: 1px;
  color: var(--ink-soft);
  font-size: 7px;
  text-align: center;
}
.rail-perform .rail-tool-btn {
  --tool-ink: var(--ink);
  --tool-paper: var(--archive-blue);
  width: 46px;
  height: 48px;
  border: 1px solid rgba(29, 27, 23, .62);
  border-radius: 0;
  background: var(--paper-2);
  color: var(--ink);
}
.rail-perform .rail-tool-btn[data-tool="dj"] { --tool-ink: var(--ink); --tool-paper: var(--archive-green); border-radius: 0; }
.rail-perform .rail-tool-btn.on { background: var(--tool-paper); color: var(--ink); border-color: var(--ink); box-shadow: none; }
.rail-perform .rail-tool-btn.err { background: var(--archive-yellow); color: var(--ink); border-color: var(--ink); }
.rail-perform .rail-tool-btn .rail-icon { width: 24px; height: 24px; }
.perform-name { font-size: 7.5px; font-weight: 700; }

.board-wrap {
  position: relative;
  grid-column: 2;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: visible;
}
.board {
  width: min(calc(100dvh - 128px), calc(100vw - var(--archive-width) - var(--control-gutter) - 92px));
  height: auto;
  aspect-ratio: 1;
  flex: none;
  overflow: hidden;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--disc-color);
  box-shadow: none;
  transition: width .36s cubic-bezier(.4, .1, .2, 1), background-color .24s ease;
  isolation: isolate;
}
.board::after {
  display: block;
  content: "";
  position: absolute;
  inset: 0;
  z-index: 50;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: inherit;
  pointer-events: none;
  filter: none;
}
.board.dragover { background: color-mix(in srgb, var(--disc-color) 78%, white 22%); box-shadow: inset 0 0 0 4px rgba(29,27,23,.12); }
.board.dragover::after { border-color: var(--ink); background: transparent; }
.disc-center {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: 17%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 1.3px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  pointer-events: none;
}
.disc-hole {
  width: 24%;
  aspect-ratio: 1;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--disc-color);
}
.disc-registration {
  position: absolute;
  left: 50%;
  top: 8%;
  width: max-content;
  transform: translateX(-50%);
  font-size: clamp(5px, .42vw, 7px);
  letter-spacing: .12em;
}
body.transport-playing .disc-center { animation: disc-spin 110s linear infinite; }
@keyframes disc-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.board-hint {
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(29, 27, 23, .56);
  font-family: var(--body);
  font-size: clamp(10px, .88vw, 13px);
  line-height: 1.45;
}
.board-hint > span {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .14em;
}
.surprise-btn {
  top: 14px;
  right: max(14px, calc((100% - min(calc(100dvh - 128px), calc(100vw - var(--archive-width) - var(--control-gutter) - 92px))) / 2));
  border-radius: 50%;
  background: var(--archive-yellow);
  box-shadow: none;
  filter: none;
}
.cam-feed { border-radius: 50%; }
.cam-legend { right: 10%; bottom: 7%; border-radius: 0; background: rgba(248,244,231,.92); backdrop-filter: none; }

body.archive-collapsed .stage {
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 18px;
}
body.archive-collapsed .archive-shell {
  width: 44px;
  background: var(--archive-yellow);
  box-shadow: none;
}
body.archive-collapsed .archive-head {
  min-height: 100%;
  padding: 0;
  border: 0;
}
body.archive-collapsed .archive-heading,
body.archive-collapsed .archive-contents { opacity: 0; pointer-events: none; visibility: hidden; }
body.archive-collapsed .archive-toggle {
  width: 100%;
  border-left: 0;
  background: transparent;
}
body.archive-collapsed .archive-toggle-mark { transform: rotate(180deg); }
body.archive-collapsed .board {
  width: min(calc(100dvh - 128px), calc(100vw - var(--control-gutter) - 118px));
}

body.mode-keys:not(.dock-collapsed) .board {
  width: min(calc(100dvh - 292px), calc(100vw - var(--archive-width) - var(--control-gutter) - 92px));
}
body.mode-keys.archive-collapsed:not(.dock-collapsed) .board {
  width: min(calc(100dvh - 292px), calc(100vw - var(--control-gutter) - 118px));
}
.dock { bottom: 12px; }
.midi-chassis { border-color: rgba(29,27,23,.68); background: rgba(248,244,231,.96); box-shadow: none; }

@media (max-width: 1050px) {
  .stage { --archive-width: 304px; --control-gutter: 84px; gap: 18px; padding-left: 14px; }
  .archive-heading p { display: none; }
  .archive-head { min-height: 48px; padding-top: 17px; }
  .rail-label { font-size: 9px; }
  .disc-colour { grid-template-columns: 1fr; }
  .disc-colour small { display: none; }
  .disc-swatches { justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  body.transport-playing .disc-center { animation: none; }
  .stage, .board, .archive-toggle-mark { transition-duration: .01ms !important; }
}

/* ====================================================================
   Studio V3.1 — true expanding archive strips
   ==================================================================== */
.topbar { border-bottom-color: rgba(29, 27, 23, .16); }
.archive-shell {
  border: 0;
  border-radius: 16px;
  background: rgba(255, 253, 246, .78);
  box-shadow: 0 10px 32px rgba(40, 36, 28, .08);
  overflow: hidden;
}
.archive-head {
  min-height: 70px;
  border-bottom: 0;
  background: rgba(255, 253, 246, .74);
}
.archive-toggle {
  width: 36px;
  border-left: 0;
  background: transparent;
  color: var(--ink-soft);
}
.archive-toggle:hover { background: rgba(250, 231, 174, .62); color: var(--ink); }
.archive-contents {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 5px;
  overflow: hidden;
  background: rgba(255, 253, 246, .5);
}
.archive-strip {
  --strip-colour: var(--archive-blue);
  min-height: 54px;
  flex: 0 1 54px;
  display: grid;
  grid-template-rows: 54px minmax(0, 0fr);
  overflow: hidden;
  border-radius: 12px;
  background: color-mix(in srgb, var(--strip-colour) 24%, var(--paper-2) 76%);
  transition:
    flex-grow .52s cubic-bezier(.34, 1.02, .52, 1),
    flex-basis .52s cubic-bezier(.34, 1.02, .52, 1),
    grid-template-rows .52s cubic-bezier(.34, 1.02, .52, 1),
    background-color .3s ease;
}
.archive-strip[data-archive-panel="vibes"] { --strip-colour: var(--archive-pink); }
.archive-strip[data-archive-panel="ambience"] { --strip-colour: var(--archive-green); }
.archive-strip[data-archive-panel="doodles"] { --strip-colour: var(--archive-yellow); }
.archive-strip.is-open {
  flex: 1 1 300px;
  grid-template-rows: 58px minmax(0, 1fr);
  background: color-mix(in srgb, var(--strip-colour) 42%, var(--paper-2) 58%);
}
.archive-strip-trigger {
  --rail-ink: var(--ink);
  --rail-paper: rgba(255,255,255,.62);
  --rail-wash: rgba(255,255,255,.32);
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 54px;
  display: grid;
  grid-template-columns: 24px 30px minmax(0, 1fr) auto 18px;
  align-items: center;
  justify-content: stretch;
  gap: 8px;
  padding: 8px 12px;
  border: 0;
  border-radius: 12px;
  background: var(--strip-colour);
  color: var(--ink);
  text-align: left;
  box-shadow: none;
  transform: none;
  cursor: pointer;
  transition: filter .18s ease, min-height .45s cubic-bezier(.34, 1.02, .52, 1);
}
.archive-strip-trigger:hover,
.archive-strip-trigger:nth-child(even):hover { background: var(--strip-colour); transform: none; filter: saturate(1.08) brightness(.99); }
.archive-strip-trigger.on {
  --rail-ink: var(--ink);
  --rail-paper: rgba(255,255,255,.72);
  --rail-wash: rgba(255,255,255,.35);
  border: 0;
  background: var(--strip-colour);
  box-shadow: none;
}
.archive-strip-trigger .rail-icon { width: 28px; height: 28px; filter: none; }
.archive-strip-trigger .rail-index { font-size: 8px; }
.archive-strip-trigger .rail-label { font-size: 12px; font-weight: 700; }
.rail-note {
  color: rgba(29, 27, 23, .58);
  font-size: 8px;
  letter-spacing: .035em;
  white-space: nowrap;
}
.archive-strip-trigger .rail-arrow {
  font-size: 17px;
  line-height: 1;
  transform: rotate(-90deg);
  transition: transform .42s cubic-bezier(.34, 1.2, .52, 1);
}
.archive-strip.is-open .archive-strip-trigger .rail-arrow { transform: rotate(0deg); }
.archive-strip-body {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-7px);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--strip-colour) 75%, var(--ink) 25%) transparent;
  transition: opacity .24s ease, transform .42s cubic-bezier(.34, 1.02, .52, 1);
}
.archive-strip.is-open .archive-strip-body {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .1s;
}
.archive-strip-body .rail-panel {
  min-height: 0;
  padding: 14px 14px 20px;
  background: transparent;
}
.archive-strip-body .rail-panel.on { display: flex; }
.archive-strip-body .merged-instruments.on {
  margin: 0 14px 16px;
  padding: 14px 0 0;
  border-top: 1px dashed color-mix(in srgb, var(--archive-pink) 64%, var(--ink) 36%);
}

/* Soft, coloured chips replace the old outlined doodle controls. */
.sticker {
  padding: 7px 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 253, 246, .72);
  box-shadow: none;
  filter: none;
  rotate: 0deg !important;
  font-size: 12px;
}
.sticker:nth-child(4n) { background: var(--archive-blue); }
.sticker:nth-child(4n + 1) { background: var(--archive-yellow); }
.sticker:nth-child(4n + 2) { background: rgba(255, 253, 246, .82); }
.sticker:nth-child(4n + 3) { background: var(--archive-green); }
.sticker:hover { transform: translateY(-1px); }
.instrument {
  padding: 7px 11px 7px 8px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 253, 246, .78);
  box-shadow: none;
  font-size: 10px;
}
.instrument:nth-child(3n + 1) { background: var(--archive-blue); }
.instrument:nth-child(3n + 2) { background: var(--archive-green); }
.instrument:nth-child(3n) { background: var(--archive-yellow); }
.instrument:hover { transform: translateY(-1px); }
.archive-action {
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
}
.crop-pick { border-bottom-color: rgba(29, 27, 23, .12); }
.crop-opt {
  border: 0;
  background: rgba(255, 253, 246, .6);
}
.crop-opt.on { border: 0; background: var(--archive-green); }
.tag-input {
  border: 0;
  border-radius: 999px;
  background: rgba(255, 253, 246, .78);
  box-shadow: inset 0 0 0 1px rgba(29,27,23,.08);
}
.tag-ok { background: var(--archive-blue); color: var(--ink); }
.link { border: 0; padding: 5px 9px; border-radius: 999px; background: rgba(255,253,246,.62); font-size: 10px; }
.link:hover { border: 0; background: var(--archive-yellow); }
.snap-panel {
  border: 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--archive-blue) 72%, white 28%);
  box-shadow: none;
}
.snap-stage { border-radius: 9px; }
.snap-go,
.snap-x { border: 0; border-radius: 999px; }
#photoTray .thumb {
  border: 0;
  border-radius: 8px;
  box-shadow: 0 5px 14px rgba(40,36,28,.09);
}
#photoTray .thumb-wrap.in-use .thumb { border: 0; box-shadow: inset 0 -5px 0 var(--archive-green), 0 5px 14px rgba(40,36,28,.09); }
.photo-use-badge { border: 0; border-radius: 999px; }
#photoTray .shelf-del { border: 0; border-radius: 50%; }
.panel-count { border: 0; background: rgba(255,253,246,.72); }

/* The placed label language follows the same soft chip system. */
.item-note {
  padding: 9px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--archive-yellow);
  box-shadow: 0 4px 12px rgba(40,36,28,.09);
  font-size: 14px;
}
.item-instrument {
  border: 0;
  border-radius: 16px;
  background: var(--archive-blue);
  box-shadow: 0 4px 12px rgba(40,36,28,.09);
}
.item-hum,
.item-clone { border: 0; box-shadow: 0 4px 12px rgba(40,36,28,.09); }

/* Disc colour belongs to the right-side disc controls, not the archive. */
.disc-colour-floating {
  position: fixed;
  z-index: 61;
  top: 488px;
  right: 20px;
  width: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 6px 9px;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 253, 246, .78);
  box-shadow: 0 7px 22px rgba(40,36,28,.07);
}
.disc-colour-floating > span {
  color: var(--ink-soft);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .12em;
}
.disc-colour-floating .disc-swatches {
  display: grid;
  grid-template-columns: repeat(2, 18px);
  gap: 5px;
}
.disc-colour-floating .disc-swatch {
  width: 18px;
  height: 18px;
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(29,27,23,.1);
}
.disc-colour-floating .disc-swatch.on { box-shadow: inset 0 0 0 2px rgba(29,27,23,.55); }
.performance-rail { border: 0; border-radius: 14px; background: rgba(255,253,246,.7); }
.rail-perform .rail-tool-btn,
.rail-perform .rail-tool-btn.on { border: 0; border-radius: 12px; box-shadow: none; }

/* One real rotating layer: collage elements and the flat centre rotate together. */
.disc-rotor {
  position: absolute;
  z-index: 2;
  inset: 0;
  transform: rotate(var(--disc-angle, 0deg));
  transform-origin: 50% 50%;
  pointer-events: none;
}
.disc-rotor .item { pointer-events: auto; }
.disc-rotor .board-hint { pointer-events: none; }
.disc-spinning .disc-rotor { will-change: transform; }
body.transport-playing .disc-center { animation: none !important; }
.disc-center { z-index: 0; }
.cam-feed { z-index: 1; }
.model-offline .engine-status {
  background: var(--archive-yellow);
  color: var(--ink);
  cursor: pointer;
}
.model-connected .engine-status { background: color-mix(in srgb, var(--archive-green) 72%, var(--paper) 28%); }

body.archive-collapsed .archive-shell { border-radius: 12px; background: var(--archive-yellow); }
body.archive-collapsed .archive-toggle { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  .archive-strip,
  .archive-strip-trigger,
  .archive-strip-body,
  .archive-strip-trigger .rail-arrow { transition-duration: .01ms !important; }
}

/* ====================================================================
   Studio V3.2 — input archive / disc / output archive
   ==================================================================== */
.topbar {
  z-index: 72;
  min-height: 72px;
  display: grid;
  grid-template-columns: auto minmax(120px, 210px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 9px 18px;
  background: rgba(248, 244, 231, .93);
  border-bottom: 1px solid rgba(29, 27, 23, .12);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
}
.topbar .brand { border: 0; background: transparent; cursor: pointer; }
.topbar .board-title {
  position: static;
  left: auto;
  width: 100%;
  min-width: 0;
  padding: 6px 9px;
  border: 0 !important;
  border-radius: 8px;
  background: rgba(255, 253, 246, .62);
}
.topbar-studio-tools {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.topbar .performance-rail {
  position: static;
  width: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(255,253,246,.66);
}
.topbar .performance-caption {
  width: auto;
  margin: 0 2px 0 3px;
  font-size: 7px;
  white-space: nowrap;
}
.topbar .rail-perform .rail-tool-btn,
.topbar .rail-perform .rail-tool-btn.on {
  width: auto;
  height: 36px;
  min-width: 52px;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: 9px;
}
.topbar .rail-perform .rail-tool-btn[data-tool="dj"] { border-radius: 9px; }
.topbar .rail-perform .rail-tool-btn .rail-icon { width: 19px; height: 19px; }
.topbar .perform-name { font-size: 8px; white-space: nowrap; }
.topbar .disc-colour-floating {
  position: static;
  width: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border-radius: 12px;
  background: rgba(255, 253, 246, .66);
  box-shadow: none;
}
.topbar .disc-colour-floating > span { writing-mode: initial; font-size: 7px; }
.topbar .disc-colour-floating .disc-swatches { display: flex; grid-template-columns: none; gap: 4px; }
.topbar .disc-colour-floating .disc-swatch { width: 15px; height: 15px; }
.topbar .transport {
  position: static;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 0 !important;
  border-radius: 999px;
  background: rgba(255,253,246,.7);
}
.topbar .now-time { order: 0; min-width: 35px; padding: 0 4px; text-align: center; }
.topbar .tbtn { width: 34px; height: 34px; border: 0; font-size: 10px; }
.topbar .transport .rec-time { top: auto; right: 4px; bottom: -15px; }
.topbar .engine-status {
  max-width: 178px;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(255,253,246,.62);
  font-size: 9px;
  text-align: center;
}

.stage {
  --archive-width: clamp(248px, 23vw, 344px);
  --output-width: clamp(164px, 17vw, 246px);
  --control-gutter: 0px;
  grid-template-columns: var(--archive-width) minmax(0, 1fr);
  gap: clamp(14px, 2vw, 30px);
  height: calc(100dvh - 72px);
  padding: 14px calc(var(--output-width) + 26px) 16px 14px;
}
.board-wrap { grid-column: 2; overflow: hidden; }
.board {
  width: min(calc(100dvh - 112px), calc(100vw - var(--archive-width) - var(--output-width) - 92px));
  min-width: 220px;
}
.surprise-btn {
  top: 8px;
  right: max(8px, calc((100% - min(calc(100dvh - 112px), calc(100vw - var(--archive-width) - var(--output-width) - 92px))) / 2));
}

/* Album-sleeve archive: the coloured indices are the object, not a white card around it. */
.archive-shell {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.archive-head {
  min-height: 54px;
  padding: 7px 42px 8px 19px;
  border: 0;
  background: transparent;
}
.archive-heading p { max-width: 250px; margin-top: 6px; font-size: 8.5px; }
.archive-toggle {
  top: 7px;
  right: 2px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,253,246,.64);
}
.archive-contents {
  gap: 3px;
  padding: 2px 0 2px 18px;
  overflow: visible;
  background: transparent;
}
.archive-strip {
  position: relative;
  overflow: visible;
  border-radius: 3px 15px 9px 4px;
  background: color-mix(in srgb, var(--strip-colour) 31%, var(--paper-2) 69%);
  box-shadow: 0 5px 12px rgba(40,36,28,.045);
}
.archive-strip::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 5px -3px -3px 5px;
  border-radius: 4px 15px 9px 5px;
  background: color-mix(in srgb, var(--strip-colour) 44%, var(--paper) 56%);
}
.archive-strip-trigger {
  overflow: visible;
  grid-template-columns: 26px 29px minmax(0, 1fr) auto 16px;
  padding: 8px 11px 8px 8px;
  border-radius: 3px 15px 7px 3px;
  background: color-mix(in srgb, var(--strip-colour) 86%, var(--paper) 14%);
}
.archive-strip-trigger:hover,
.archive-strip-trigger:nth-child(even):hover,
.archive-strip-trigger.on { background: var(--strip-colour); }
.archive-strip-trigger .rail-index {
  position: relative;
  left: -24px;
  width: 36px;
  height: 32px;
  display: grid;
  place-items: center;
  margin-right: -18px;
  border-radius: 8px 2px 2px 8px;
  background: var(--strip-colour);
  color: var(--ink);
  font-size: 8px;
  box-shadow: -2px 3px 6px rgba(40,36,28,.06);
}
.archive-strip.is-open .archive-strip-trigger { min-height: 58px; }
.archive-strip-body {
  overflow-x: hidden;
  border-radius: 0 0 9px 4px;
  background: color-mix(in srgb, var(--strip-colour) 38%, var(--paper) 62%);
}
.archive-strip-body .rail-panel { padding: 13px 13px 18px; }
#photoTray .tray-empty { border: 0; border-radius: 10px; background: rgba(255,253,246,.38); }

body.archive-collapsed .stage { grid-template-columns: 62px minmax(0, 1fr); gap: 16px; }
body.archive-collapsed .archive-shell {
  width: 62px;
  overflow: visible;
  border-radius: 0;
  background: transparent;
}
body.archive-collapsed .archive-head { min-height: 42px; height: 42px; padding: 0; }
body.archive-collapsed .archive-heading { display: none; }
body.archive-collapsed .archive-toggle { top: 3px; right: 12px; width: 34px; height: 34px; background: rgba(255,253,246,.76); }
body.archive-collapsed .archive-contents {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  flex: 1;
  gap: 4px;
  padding: 0 8px 0 0;
}
body.archive-collapsed .archive-strip,
body.archive-collapsed .archive-strip.is-open {
  min-height: 0;
  flex: 1 1 0;
  display: block;
  overflow: visible;
  border-radius: 0 11px 11px 0;
  background: transparent;
  box-shadow: none;
}
body.archive-collapsed .archive-strip::after,
body.archive-collapsed .archive-strip-body { display: none; }
body.archive-collapsed .archive-strip-trigger {
  width: 54px;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 4px;
  border-radius: 0 11px 11px 0;
  background: var(--strip-colour);
}
body.archive-collapsed .archive-strip-trigger .rail-index {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  background: transparent;
  box-shadow: none;
}
body.archive-collapsed .archive-strip-trigger .rail-label {
  display: block;
  max-height: 76px;
  overflow: hidden;
  font-size: 8px;
  line-height: 1;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
body.archive-collapsed .archive-strip-trigger .rail-icon,
body.archive-collapsed .archive-strip-trigger .rail-note,
body.archive-collapsed .archive-strip-trigger .rail-arrow { display: none; }
body.archive-collapsed .board {
  width: min(calc(100dvh - 112px), calc(100vw - 62px - var(--output-width) - 78px));
}

/* Output is a reserved archive column, so it never covers the disc. */
.records-drawer-shell {
  z-index: 52;
  top: 86px;
  right: 12px;
  bottom: 16px;
  width: var(--output-width, clamp(164px, 17vw, 246px));
  pointer-events: auto;
}
.records-tab {
  top: 0;
  right: 0;
  width: 100%;
  min-height: 50px;
  height: 50px;
  flex-direction: row;
  justify-content: flex-start;
  gap: 8px;
  padding: 8px 11px;
  border: 0;
  border-radius: 5px 15px 7px 5px;
  background: var(--archive-lilac);
  box-shadow: 0 5px 12px rgba(40,36,28,.06);
  transform: none;
}
.records-tab::before {
  content: "OUTPUT";
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .12em;
}
.records-tab-icon { width: 23px; height: 23px; }
.records-tab-label { margin-left: auto; font-size: 8px; writing-mode: initial; transform: none; }
.records-tab-arrow { margin-left: 1px; transform: rotate(-90deg); }
.records-drawer-shell.open .records-tab { right: 0; color: var(--ink); }
.records-drawer-shell.open .records-tab-arrow { transform: rotate(90deg); }
.records-drawer {
  inset: 55px 0 0;
  width: 100%;
  padding: 13px 10px 10px;
  border: 0;
  border-radius: 5px 15px 9px 5px;
  background: color-mix(in srgb, var(--archive-lilac) 30%, rgba(255,253,246,.94) 70%);
  box-shadow: 0 8px 20px rgba(40,36,28,.07);
  transform: translateY(-8px);
}
.records-drawer-shell.open .records-drawer { transform: translateY(0); }
.records-drawer-head {
  grid-template-columns: 32px minmax(0,1fr) 26px;
  gap: 7px;
  padding-bottom: 10px;
  border-bottom-color: rgba(29,27,23,.11);
}
.records-drawer-mark { width: 32px; height: 32px; border-radius: 8px; box-shadow: none; }
.records-drawer-mark svg { width: 24px; height: 24px; }
.records-drawer-head h2 { font-size: 15px; }
.records-drawer-head p,
.rack-label { font-size: 7px; }
.records-drawer-close { width: 26px; height: 26px; border: 0; font-size: 16px; }
.records-row { gap: 7px; padding: 9px 0; }
.records-empty-guide { min-height: 190px; padding: 18px 10px; }
.records-empty-mark { width: 45px; height: 45px; border: 0; border-radius: 12px; box-shadow: none; }
.records-empty-guide h3 { font-size: 15px; }
.records-empty-guide p { font-size: 9px; }
.records-empty-record { padding: 8px 10px; border: 0; border-radius: 999px; box-shadow: none; font-size: 9px; }
.creation-mini { grid-template-columns: 72px minmax(0,1fr); min-height: 70px; border: 0; border-radius: 9px; box-shadow: none; }
.creation-mini-visual { min-height: 70px; border: 0; }
.creation-mini-copy { gap: 3px; padding: 8px 7px; }
.creation-mini-title { font-size: 10px; }
.creation-mini-meta,
.creation-mini-open { font-size: 7px; }

/* Direct manipulation: size is also musical importance. */
.item-transform-controls {
  position: absolute;
  z-index: 12;
  inset: -9px;
  border: 1.5px dashed rgba(112,136,199,.72);
  border-radius: 11px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease;
}
.item.is-selected { z-index: 32; }
.item.is-selected .item-transform-controls { opacity: 1; }
.item-transform-handle {
  position: absolute;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--archive-blue);
  color: var(--ink);
  box-shadow: 0 2px 7px rgba(40,36,28,.13);
  pointer-events: auto;
  cursor: grab;
  font-family: system-ui, sans-serif;
  font-size: 12px;
}
.item-rotate-handle { top: -13px; left: -13px; }
.item-scale-handle { right: -13px; bottom: -13px; cursor: nwse-resize; background: var(--archive-yellow); }
.item-size-readout {
  position: absolute;
  left: 50%;
  bottom: -30px;
  min-width: max-content;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(255,253,246,.94);
  color: var(--ink-soft);
  font-size: 7px;
  line-height: 1;
  transform: translateX(-50%);
  box-shadow: 0 2px 7px rgba(40,36,28,.08);
}
.item .remove { top: -13px; right: -13px; border: 0; background: var(--archive-pink); }
.item-photo .photo-edit-cue {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(255,253,246,.84);
  color: var(--ink-soft);
  font-size: 7px;
  opacity: 0;
  transition: opacity .14s ease;
}
.item-photo:hover .photo-edit-cue,
.item-photo.is-selected .photo-edit-cue { opacity: 1; }
.item-photo .card { transform: none !important; }
.item-photo .card-face { backface-visibility: visible; border: 0; border-radius: 7px; box-shadow: 2px 5px 12px rgba(40,36,28,.11); }

/* Small photo file editor; no more front/back card editing. */
.photo-inspector[hidden] { display: none !important; }
.photo-inspector { position: fixed; z-index: 180; inset: 0; display: grid; place-items: center; padding: 24px; }
.photo-inspector-scrim { position: absolute; inset: 0; border: 0; background: rgba(29,27,23,.17); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.photo-inspector-card {
  position: relative;
  width: min(660px, calc(100vw - 48px));
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  padding: 17px;
  border-radius: 8px 19px 12px 8px;
  background: color-mix(in srgb, var(--archive-blue) 28%, var(--paper-2) 72%);
  box-shadow: 0 24px 70px rgba(40,36,28,.22);
}
.photo-inspector-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.photo-inspector-head span,
.photo-inspector-fields > label,
.photo-edge-control > span,
.photo-transform-readout > label,
.photo-sound-label label { font-size: 7px; font-weight: 700; letter-spacing: .12em; }
.photo-inspector-head h2 { margin: 3px 0 0; font-family: var(--hand); font-size: 22px; font-weight: 500; }
.photo-inspector-head > button { width: 29px; height: 29px; border: 0; border-radius: 50%; background: rgba(255,253,246,.72); font-size: 18px; }
.photo-inspector-layout { display: grid; grid-template-columns: minmax(190px, .82fr) minmax(250px, 1.18fr); gap: 16px; }
.photo-inspector-preview { min-height: 265px; overflow: hidden; border-radius: 5px 13px 7px 5px; background: rgba(255,253,246,.55); }
.photo-inspector-preview img { width: 100%; height: 100%; display: block; object-fit: contain; }
.photo-inspector-fields { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.photo-inspector-fields textarea {
  width: 100%;
  resize: vertical;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  outline: 0;
  background: rgba(255,253,246,.72);
  font-size: 11px;
  line-height: 1.4;
}
.photo-inspector-fields textarea:focus { box-shadow: 0 0 0 2px rgba(112,136,199,.22); }
.photo-edge-control { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; }
.photo-edge-control > span { margin-right: auto; }
.photo-edge-control button,
.photo-sound-label button {
  padding: 5px 8px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,253,246,.66);
  font-size: 8px;
}
.photo-edge-control button.on { background: var(--archive-green); }
.photo-sound-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.photo-sound-label button { color: #536ba9; }
.photo-transform-readout { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 5px 8px; margin-top: 5px; }
.photo-transform-readout input { grid-column: 1; width: 100%; accent-color: var(--accent); }
.photo-transform-readout output { grid-column: 2; grid-row: 1 / span 2; min-width: 42px; font-size: 10px; text-align: right; }
.photo-inspector-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; }
.photo-inspector-actions p { max-width: 390px; margin: 0; color: var(--ink-soft); font-size: 8.5px; line-height: 1.35; }
.photo-inspector-actions button { flex: none; padding: 9px 14px; border: 0; border-radius: 999px; background: var(--archive-pink); font-size: 10px; font-weight: 700; }

/* Camera DJ keeps the person inside the disc with a restrained colour-offset texture. */
.board.cam-on .cam-feed {
  opacity: .72;
  mix-blend-mode: multiply;
  filter: saturate(.82) contrast(1.08) hue-rotate(-5deg);
}
.board.cam-on::before {
  content: "";
  position: absolute;
  z-index: 5;
  inset: 0;
  border-radius: 50%;
  background:
    linear-gradient(90deg, rgba(112,136,199,.13), transparent 34%, rgba(239,207,224,.16) 72%, transparent),
    repeating-linear-gradient(0deg, transparent 0 8px, rgba(255,255,255,.055) 8px 9px);
  mix-blend-mode: color-burn;
  pointer-events: none;
  animation: cameraOffsetDrift 7s ease-in-out infinite alternate;
}
@keyframes cameraOffsetDrift { from { transform: translateX(-1.2%); } to { transform: translateX(1.2%); } }

@media (max-width: 1080px) {
  .topbar { grid-template-columns: auto 1fr auto; gap: 8px; padding-inline: 10px; }
  .topbar .board-title,
  .topbar .engine-status,
  .topbar .performance-caption,
  .topbar .perform-name,
  .topbar .disc-colour-floating > span { display: none; }
  .topbar-studio-tools { grid-column: 2; }
  .topbar .rail-perform .rail-tool-btn { min-width: 36px; padding-inline: 7px; }
  .stage { --archive-width: 248px; --output-width: 164px; gap: 12px; padding-left: 10px; padding-right: 184px; }
  .archive-heading p { display: none; }
  .archive-head { min-height: 42px; }
  .records-drawer-shell { top: 82px; right: 8px; bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .board.cam-on::before { animation: none; }
  .item-transform-controls { transition-duration: .01ms !important; }
}

/* ====================================================================
   Studio V3.3 — readable type scale and clean disc copy
   Atlassian/Carbon-inspired desktop scale: 12 / 14 / 16 / 20+.
   ==================================================================== */
:root {
  --type-fine: .75rem;
  --type-label: .8125rem;
  --type-ui: .875rem;
  --type-body: 1rem;
  --type-heading-sm: 1.25rem;
  --type-heading-md: 1.5rem;
  --line-ui: 1.4;
  --line-body: 1.5;
}

/* The archive number is now plain information inside the sleeve header. */
.archive-contents { padding-left: 0; }
.archive-strip-trigger {
  grid-template-columns: 24px 31px minmax(0, 1fr) auto 16px;
  padding-left: 11px;
}
.archive-strip-trigger .rail-index,
body.archive-collapsed .archive-strip-trigger .rail-index {
  position: static;
  left: auto;
  width: auto;
  height: auto;
  display: block;
  margin: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(29,27,23,.56);
  font-size: var(--type-fine);
  line-height: 1;
}

/* Text belongs to the workspace, never on top of the artwork. */
.board-wrap {
  grid-template-rows: minmax(48px, auto) minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  place-items: center;
  row-gap: 8px;
}
.disc-caption {
  grid-row: 1;
  width: min(100%, 620px);
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  color: var(--ink-soft);
}
.disc-caption-id {
  flex: none;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--archive-pink);
  color: var(--ink);
  font-size: var(--type-fine);
  font-weight: 700;
  letter-spacing: .09em;
}
.disc-caption .board-hint {
  display: block;
  flex: 1;
  min-width: 0;
  position: static;
  inset: auto;
  width: auto;
  max-width: none;
  height: auto;
  margin: 0;
  color: var(--ink-soft);
  font-family: var(--body);
  font-size: var(--type-label);
  line-height: var(--line-ui);
  text-align: left;
  text-wrap: pretty;
}
.disc-caption .board-hint strong { display: inline; color: var(--ink); font-weight: 600; }
.board { grid-row: 2; }
.board,
body.archive-collapsed .board {
  width: min(calc(100dvh - 174px), calc(100vw - var(--archive-width) - var(--output-width) - 92px));
}
body.archive-collapsed .board {
  width: min(calc(100dvh - 174px), calc(100vw - 62px - var(--output-width) - 78px));
}
.disc-center { width: 15%; height: 15%; }
.disc-hole { width: 20%; height: 20%; }
.surprise-btn { top: 60px; }

/* Studio typography: supporting copy never drops below 12px. */
.archive-kicker,
.performance-caption,
.panel-eyebrow { font-size: var(--type-fine); line-height: 1.2; }
.archive-heading p {
  font-size: var(--type-fine);
  line-height: var(--line-ui);
}
.archive-strip-trigger .rail-label {
  font-size: var(--type-ui);
  line-height: 1.15;
}
.rail-note {
  font-size: var(--type-fine);
  line-height: 1.2;
}
.shelf-head h2 {
  font-size: var(--type-heading-md);
  line-height: 1.15;
}
.panel-count {
  min-width: 30px;
  height: 30px;
  border: 0;
  font-size: var(--type-fine);
}
.block-note,
.photo-instruction {
  font-size: var(--type-fine);
  line-height: var(--line-body);
}
.archive-action {
  min-height: 38px;
  font-size: var(--type-fine);
  line-height: 1.2;
}
.crop-pick > span,
.crop-opt,
.snap-tip,
.snap-go,
.snap-x,
#photoTray .tray-empty {
  font-size: var(--type-fine);
  line-height: var(--line-ui);
}
.sticker { font-size: var(--type-ui); }
.instrument { font-size: var(--type-fine); }
.link,
.tag-input,
.tag-ok { font-size: var(--type-ui); }

/* Top-level controls remain compact, but are no longer micro-type. */
.topbar .performance-caption,
.topbar .disc-colour-floating > span { font-size: .6875rem; }
.topbar .perform-name,
.topbar .now-time,
.topbar .engine-status { font-size: var(--type-fine); }
.topbar .board-title { font-size: var(--type-ui); }

/* Output archive typography. */
.records-tab::before,
.records-tab-label,
.records-drawer-head p,
.rack-label { font-size: .6875rem; }
.records-tab-count { font-size: var(--type-fine); }
.records-drawer-head h2 {
  font-size: 1.125rem;
  line-height: 1.15;
}
.records-empty-guide h3 {
  margin-bottom: 7px;
  font-size: 1.125rem;
  line-height: 1.2;
}
.records-empty-guide p,
.records-empty-record,
.records-drawer-note { font-size: var(--type-fine); line-height: var(--line-ui); }
.creation-mini-title { font-size: var(--type-label); }
.creation-mini-meta,
.creation-mini-open { font-size: var(--type-fine); }

/* Direct manipulation labels and the photo editor. */
.item-size-readout,
.item-photo .photo-edit-cue { font-size: var(--type-fine); }
.photo-inspector-head span,
.photo-inspector-fields > label,
.photo-edge-control > span,
.photo-transform-readout > label,
.photo-sound-label label { font-size: var(--type-fine); }
.photo-inspector-fields textarea { font-size: var(--type-ui); line-height: var(--line-body); }
.photo-edge-control button,
.photo-sound-label button,
.photo-transform-readout output,
.photo-inspector-actions p,
.photo-inspector-actions button { font-size: var(--type-fine); line-height: var(--line-ui); }

/* Home and saved work follow the same scale rather than a separate tiny one. */
.guide-lead { font-size: 1.125rem; line-height: 1.55; }
.guide-create { font-size: var(--type-ui); }
.guide-steps li { font-size: var(--type-ui); }
.guide-steps b,
.guide-steps small,
.home-section-head p,
.home-section-head > span,
.section-tools > span,
.board-file-meta,
.home-empty p { font-size: var(--type-fine); line-height: var(--line-ui); }
.board-file-title { font-size: var(--type-body); }
.board-file-open,
.new-flowjam { font-size: var(--type-label); }
.take-copy,
.creations-head p,
.creations-empty p { font-size: var(--type-ui); line-height: var(--line-body); }
.take-title-label,
.take-meta,
.take-elements span,
.take-actions button { font-size: var(--type-fine); }

@media (max-width: 1080px) {
  .archive-strip-trigger { grid-template-columns: 22px 29px minmax(0, 1fr) 16px; }
  .archive-strip-trigger .rail-note { display: none; }
  .disc-caption { width: 100%; padding-inline: 2px; gap: 7px; }
  .disc-caption .board-hint { font-size: var(--type-fine); }
  .disc-caption-id { padding-inline: 6px; }
  .topbar .perform-name { display: none; }
  .records-tab-label { display: none; }
  .records-tab { gap: 6px; }
  .records-tab-count { margin-left: auto; }
  .records-drawer-head { grid-template-columns: 28px minmax(0,1fr) 24px; gap: 5px; }
  .records-drawer-mark { width: 28px; height: 28px; }
  .records-drawer-head h2 { font-size: 1rem; }
}

/* ====================================================================
   FlowJam V3.4 — coloured identity, clear disc colour, archive home
   ==================================================================== */
:root {
  --brand-storm: #53627c;
  --brand-peony: #d7a4c3;
  --brand-sun: #f4d77a;
  --home-cream: #f7f2e5;
}

/* The refreshed mark borrows the disc metaphor and the archive palette. */
.brand-mark {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(83,98,124,.3);
  border-radius: 50%;
  background:
    radial-gradient(circle at center, var(--home-cream) 0 9%, var(--brand-sun) 10% 17%, transparent 18%),
    conic-gradient(from 22deg, var(--brand-peony), var(--brand-sun) 32%, var(--archive-green) 55%, var(--archive-blue) 77%, var(--brand-peony));
}
.brand-img { opacity: 0; }
.brand-word {
  color: var(--brand-storm);
  background: linear-gradient(92deg, var(--brand-storm) 0 58%, #b86f9c 58% 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Presets read as choices, while the final colour-well opens the native picker. */
.topbar .disc-colour-floating { padding: 6px 8px; }
.topbar .disc-colour-floating .disc-swatches { align-items: center; gap: 6px; }
.topbar .disc-colour-floating .disc-swatch {
  width: 19px;
  height: 19px;
  box-shadow: inset 0 0 0 1px rgba(29,27,23,.16);
}
.topbar .disc-colour-floating .disc-swatch.on {
  box-shadow: inset 0 0 0 2px rgba(255,253,246,.9), 0 0 0 1.5px var(--brand-storm);
}
.disc-custom {
  --custom-colour: var(--disc-color);
  position: relative;
  width: 23px;
  height: 23px;
  flex: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: conic-gradient(var(--archive-pink), var(--archive-yellow), var(--archive-green), var(--archive-blue), var(--archive-lilac), var(--archive-pink));
  box-shadow: inset 0 0 0 1px rgba(29,27,23,.12);
  cursor: pointer;
}
.disc-custom::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--custom-colour);
}
.disc-custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.disc-custom span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  color: var(--ink);
  font-family: system-ui, sans-serif;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1;
  pointer-events: none;
}
.disc-custom:hover { transform: scale(1.08); }
.disc-custom.on { box-shadow: 0 0 0 1.5px var(--brand-storm), inset 0 0 0 1px rgba(29,27,23,.12); }

/* Homepage: one immediate action, one live visual metaphor, then the archive. */
.home-screen {
  background-color: var(--home-cream);
  background-image:
    linear-gradient(rgba(83,98,124,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(83,98,124,.04) 1px, transparent 1px),
    radial-gradient(48% 42% at 104% -4%, rgba(215,164,195,.28), transparent 75%),
    radial-gradient(40% 42% at -8% 36%, rgba(220,229,200,.38), transparent 72%);
  background-size: 28px 28px, 28px 28px, auto, auto;
}
.home-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  min-height: 78px;
  padding: 14px clamp(24px,4.5vw,72px);
  border-bottom: 0;
  background: rgba(247,242,229,.9);
  box-shadow: 0 1px 0 rgba(83,98,124,.18);
}
.home-brand {
  justify-self: start;
  gap: 9px;
  color: var(--brand-storm);
  font-size: 1.8rem;
  letter-spacing: -.035em;
}
.home-brand span { margin: 0; }
.home-brand .brand-mark {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(83,98,124,.3);
  background:
    radial-gradient(circle at center, var(--home-cream) 0 9%, var(--brand-sun) 10% 17%, transparent 18%),
    conic-gradient(from 22deg, var(--brand-peony), var(--brand-sun) 32%, var(--archive-green) 55%, var(--archive-blue) 77%, var(--brand-peony));
}
.home-brand .brand-word {
  width: auto;
  height: auto;
  display: inline;
  color: var(--brand-storm);
  background: linear-gradient(92deg, var(--brand-storm) 0 58%, #b86f9c 58% 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.home-local-note {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-soft);
  font-size: var(--type-fine);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.home-local-note > span { width: 8px; height: 8px; border-radius: 50%; background: var(--archive-green); box-shadow: 0 0 0 3px rgba(215,223,189,.42); }
.home-nav-archive {
  justify-self: end;
  padding: 9px 13px;
  border: 0;
  border-radius: 999px;
  background: var(--archive-blue);
  color: var(--brand-storm);
  cursor: pointer;
  font-size: var(--type-label);
  font-weight: 700;
}
.home-nav-archive:hover { background: var(--archive-pink); }
.home-main { width: min(1480px, 100%); padding: 0 clamp(24px,4.5vw,72px) 110px; }
.home-guide {
  min-height: min(780px, calc(100dvh - 78px));
  grid-template-columns: minmax(390px,.78fr) minmax(560px,1.22fr);
  gap: clamp(48px,6vw,104px);
  padding: clamp(56px,7vh,92px) 0 clamp(48px,6vh,76px);
}
.guide-copy { position: relative; z-index: 2; align-self: center; }
.guide-kicker {
  width: fit-content;
  margin: 0 0 19px;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--archive-yellow);
  color: var(--brand-storm);
  font-size: var(--type-fine);
  font-weight: 700;
  letter-spacing: .12em;
}
.guide-copy h1 {
  margin: 0 0 25px;
  color: var(--brand-storm);
  font-size: clamp(4rem,6.15vw,6.8rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.068em;
}
.guide-copy h1 em { color: var(--brand-peony); font-style: normal; }
.guide-lead { max-width: 590px; margin: 0; color: #565a61; font-size: clamp(1.05rem,1.3vw,1.25rem); line-height: 1.55; text-wrap: pretty; }
.guide-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; margin-top: 31px; }
.guide-create,
.guide-browse {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin: 0;
  padding: 12px 18px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-size: var(--type-ui);
  font-weight: 700;
  filter: none;
  box-shadow: none;
  transition: transform .16s ease, background .16s ease;
}
.guide-create { background: var(--brand-storm); color: var(--paper-2); }
.guide-create:hover { background: #64728b; transform: translateY(-2px); box-shadow: none; }
.guide-browse { background: var(--archive-pink); color: var(--ink); }
.guide-browse:hover { background: #e7b9d2; transform: translateY(-2px); }
.guide-reassurance { max-width: 490px; margin: 20px 0 0; color: var(--ink-soft); font-size: var(--type-label); line-height: var(--line-ui); }
.guide-reassurance span { color: var(--brand-peony); }

.guide-demo { position: relative; width: min(100%,760px); justify-self: end; padding-top: 41px; }
.guide-file-tab {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 3%;
  width: 55%;
  min-height: 88px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  align-content: start;
  padding: 13px 23px 12px;
  border-radius: 17px 17px 0 0;
  background: var(--archive-blue);
  color: var(--brand-storm);
}
.guide-file-tab span { grid-column: 1 / -1; font-size: var(--type-fine); letter-spacing: .12em; }
.guide-file-tab b { font-size: var(--type-heading-sm); font-weight: 400; }
.guide-file-tab small { align-self: end; color: rgba(83,98,124,.72); font-size: var(--type-fine); text-align: right; }
.guide-sleeve {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1.12;
  display: grid;
  place-items: center;
  padding: clamp(29px,4vw,54px) clamp(26px,4vw,50px) clamp(55px,5vw,72px);
  border-radius: 7px 34px 10px 7px;
  background: color-mix(in srgb, var(--archive-lilac) 72%, var(--paper-2) 28%);
  box-shadow: 18px 22px 0 rgba(83,98,124,.08), 0 24px 70px rgba(83,98,124,.12);
}
.guide-collage {
  position: relative;
  width: min(100%,590px);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  background: var(--archive-pink);
  box-shadow: 0 0 0 2px rgba(83,98,124,.78);
  isolation: isolate;
}
.guide-collage::after {
  content: "";
  position: absolute;
  z-index: 30;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
  pointer-events: none;
}
.guide-disc-centre {
  position: absolute;
  z-index: 24;
  left: 50%;
  top: 50%;
  width: 18%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--paper-2);
  box-shadow: 0 0 0 1.5px var(--brand-storm);
  transform: translate(-50%,-50%);
}
.guide-disc-centre i { width: 28%; aspect-ratio: 1; border-radius: 50%; background: var(--home-cream); box-shadow: 0 0 0 1.5px var(--brand-storm); }
.guide-polaroid { left: 12%; top: 10%; width: 50%; padding: 8px 8px 24px; box-shadow: 4px 7px 15px rgba(40,36,28,.16); transform: rotate(-8deg); }
.guide-rain { left: 68%; top: 13%; transform: rotate(7deg) scale(.96); }
.guide-piano { left: 5%; top: 53%; transform: rotate(-6deg) scale(.85); }
.guide-instrument { left: 68%; top: 53%; transform: rotate(8deg) scale(.9); }
.guide-keys { left: 22%; top: 70%; width: 66%; height: 55px; transform: rotate(-2.5deg); }
.guide-keys > .pkeys { transform: scale(.55); }
.guide-heart { left: 7%; top: 43%; transform: rotate(-12deg) scale(.92); }
.guide-wave { left: 78%; top: 72%; transform: rotate(7deg) scale(.96); }
.guide-star { left: 61%; top: 4%; transform: rotate(-6deg) scale(.88); }
.guide-playback {
  position: absolute;
  z-index: 36;
  left: 8%;
  right: 8%;
  bottom: 14px;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px 0 13px;
  border-radius: 999px;
  background: rgba(255,253,246,.82);
  color: var(--brand-storm);
}
.guide-playback span { margin-right: 6px; font-size: .65rem; font-weight: 700; letter-spacing: .09em; }
.guide-playback i { width: clamp(13px,3vw,36px); height: 2px; border-radius: 2px; background: var(--brand-peony); }
.guide-playback i:nth-of-type(2), .guide-playback i:nth-of-type(4) { height: 7px; }
.guide-playback b { margin-left: auto; font-size: var(--type-fine); font-weight: 400; font-variant-numeric: tabular-nums; }
.guide-playback strong { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: var(--archive-yellow); font-size: 10px; }

.home-flow {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  border-radius: 8px 25px 8px 8px;
  overflow: hidden;
  list-style: none;
  box-shadow: 0 1px 0 rgba(83,98,124,.18), 0 -1px 0 rgba(83,98,124,.18);
}
.home-flow li { min-width: 0; display: grid; gap: 7px; padding: 23px clamp(17px,2.2vw,32px); background: var(--archive-blue); }
.home-flow li + li { border-left: 1px solid rgba(83,98,124,.23); }
.home-flow li:nth-child(2) { background: var(--archive-pink); }
.home-flow li:nth-child(3) { background: var(--archive-green); }
.home-flow b { color: rgba(83,98,124,.78); font-size: var(--type-fine); letter-spacing: .12em; }
.home-flow strong { color: var(--brand-storm); font-size: var(--type-heading-sm); font-weight: 400; }
.home-flow span { color: #60636a; font-size: var(--type-label); }

.home-archive { gap: 78px; margin-top: 86px; padding-top: 0; border-top: 0; }
.home-section {
  position: relative;
  padding: clamp(34px,4vw,52px);
  border-radius: 8px 34px 10px 8px;
  background: rgba(255,253,246,.66);
  box-shadow: 0 16px 48px rgba(83,98,124,.07);
}
.home-section + .home-section { padding-top: clamp(34px,4vw,52px); border-top: 0; }
.home-section-index {
  position: absolute;
  left: 32px;
  top: -28px;
  min-width: 245px;
  height: 29px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 17px;
  border-radius: 13px 13px 0 0;
  background: var(--archive-yellow);
  color: var(--brand-storm);
}
.creations-home-section .home-section-index { background: var(--archive-pink); }
.home-section-index span { font-size: var(--type-fine); letter-spacing: .1em; }
.home-section-index b { font-size: var(--type-fine); }
.home-section-head { align-items: center; margin-bottom: 27px; }
.home-section-head h2 { margin-bottom: 7px; color: var(--brand-storm); font-size: clamp(2rem,3vw,3.25rem); font-weight: 400; letter-spacing: -.045em; }
.home-section-head p,
.home-section-head > span,
.section-tools > span { color: var(--ink-soft); font-size: var(--type-label); }
.new-flowjam { min-height: 42px; padding: 10px 16px; border-radius: 999px; background: var(--brand-storm); color: #fff; box-shadow: none; }
.new-flowjam:hover { background: #64728b; }
.boards-grid { grid-template-columns: repeat(auto-fill,minmax(290px,1fr)); gap: 25px; }
.board-file {
  overflow: visible;
  padding: 14px 10px 10px;
  border: 0;
  border-radius: 5px 21px 7px 6px;
  background: var(--archive-blue);
  box-shadow: 7px 9px 0 rgba(83,98,124,.07);
}
.board-file:nth-child(3n+2) { background: var(--archive-green); }
.board-file:nth-child(3n+3) { background: var(--archive-yellow); }
.board-file::before { content: "WORKING DISC"; position: absolute; left: 16px; top: -17px; height: 18px; min-width: 106px; padding: 0 11px; border-radius: 9px 9px 0 0; background: inherit; color: rgba(83,98,124,.78); font-size: .62rem; line-height: 18px; letter-spacing: .08em; }
.board-file:hover { transform: translateY(-4px); box-shadow: 9px 14px 0 rgba(83,98,124,.07); }
.board-file-cover { border-radius: 4px 14px 4px 4px; background: rgba(255,253,246,.72); }
.board-file-cover .board-file-open { opacity: 1; border-radius: 999px; background: rgba(83,98,124,.82); }
.board-file-body { padding: 13px 5px 3px; }
.board-file-delete { border: 0; background: rgba(255,253,246,.86); color: var(--brand-storm); }
.board-file-delete:hover { background: var(--archive-pink); color: var(--brand-storm); }
.home-empty { min-height: 150px; border: 0; border-radius: 12px; background: rgba(83,98,124,.045); }
.home-empty > span { color: var(--brand-peony); }
.home-empty p { font-size: var(--type-ui); }
.creations-home-section .creations-grid { gap: 25px; }
.creations-home-section .creation-card { border: 0; border-radius: 5px 21px 7px 6px; background: var(--archive-lilac); box-shadow: 7px 9px 0 rgba(83,98,124,.07); }
.creations-home-section .creation-card:nth-child(even) { background: var(--archive-pink); }
.creations-home-section .creation-visual { margin: 10px 10px 0; border-radius: 4px 13px 4px 4px; }
.creation-badge { background: rgba(83,98,124,.82); }
.creation-play { background: var(--brand-storm); }
.creation-actions .download-trigger { background: var(--brand-storm); border-color: var(--brand-storm); }
.creation-actions .delete { color: var(--brand-storm); }

@media (max-width: 1180px) {
  .home-guide { grid-template-columns: minmax(320px,.76fr) minmax(480px,1.24fr); gap: 40px; }
  .guide-copy h1 { font-size: clamp(3.8rem,6.5vw,5.7rem); }
  .home-local-note { display: none; }
  .home-nav { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .home-guide { min-height: auto; grid-template-columns: 1fr; padding-top: 50px; }
  .guide-copy { order: 1; max-width: 720px; }
  .guide-demo { order: 2; justify-self: center; }
  .guide-collage { order: initial; }
  .home-flow { grid-template-columns: 1fr; }
  .home-flow li + li { border-left: 0; border-top: 1px solid rgba(83,98,124,.23); }
  .home-section-head { align-items: flex-start; flex-direction: column; }
}

/* ====================================================================
   FlowJam V3.5 — one visual voice, outlined archive pair, safe toolbar
   ==================================================================== */
:root {
  --theme: #6f80a3;
  --theme-deep: #52617f;
  --theme-mid: #c7d0e2;
  --theme-soft: #e4e8f1;
  --theme-pale: #f1f2f3;
  --theme-line: rgba(82, 97, 127, .34);
  --theme-line-soft: rgba(82, 97, 127, .18);
  --studio-side: clamp(210px, 22vw, 320px);
  --studio-rail: 58px;
  --accent: var(--theme);
  --brand-storm: var(--theme-deep);
  --brand-peony: #8494b4;
  --brand-sun: #cbd3e2;
  --archive-blue: #dfe4ee;
  --archive-pink: #e3e7ef;
  --archive-green: #e7eaf0;
  --archive-yellow: #dbe1ec;
  --archive-lilac: #e1e5ee;
}

/* One-colour identity: the disc remains recognisable without a rainbow logo. */
.brand-mark,
.home-brand .brand-mark {
  border: 1px solid var(--theme-line);
  background:
    radial-gradient(circle at center, var(--paper) 0 10%, #bac5da 11% 18%, transparent 19%),
    conic-gradient(from 25deg, #8292b2, #c6cfdf 45%, #9eabc4 72%, #6f80a3);
}
.brand-word,
.home-brand .brand-word {
  color: var(--theme-deep);
  background: none;
  -webkit-text-fill-color: currentColor;
}

/* The toolbar owns three bounded groups. Nothing may spill over the logo. */
.topbar {
  z-index: 72;
  height: 78px;
  min-height: 78px;
  grid-template-columns: auto minmax(150px, 230px) minmax(0, 1fr);
  gap: 12px;
  padding: 10px 16px;
  overflow: hidden;
  border-bottom: 1px solid var(--theme-line);
  background: rgba(248, 244, 231, .97);
  backdrop-filter: none;
}
.topbar .brand {
  min-width: 0;
  gap: 8px;
  color: var(--theme-deep);
  white-space: nowrap;
}
.topbar .brand-mark { width: 34px; height: 34px; }
.topbar .brand-word { font-size: 1.35rem; }
.topbar .board-title {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--theme-line-soft);
  border-radius: 4px;
  background: rgba(255,253,246,.72);
}
.topbar-studio-tools {
  width: 100%;
  min-width: 0;
  justify-content: flex-end;
  gap: 7px;
  overflow: hidden;
}
.topbar .performance-rail,
.topbar .disc-colour-floating,
.topbar .transport {
  flex: none;
  min-height: 44px;
  border: 1px solid var(--theme-line);
  border-radius: 5px;
  background: rgba(255,253,246,.72);
  box-shadow: none;
}
.topbar .performance-caption { display: none; }
.topbar .rail-perform .rail-tool-btn,
.topbar .rail-perform .rail-tool-btn.on {
  min-width: 48px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
}
.topbar .rail-perform .rail-tool-btn:hover,
.topbar .rail-perform .rail-tool-btn.on {
  border-color: var(--theme-line);
  background: var(--theme-soft);
}
.topbar .disc-colour-floating { padding: 7px 9px; }
.topbar .disc-colour-floating > span { color: var(--theme-deep); }
.topbar .disc-colour-floating .disc-swatch {
  width: 18px;
  height: 18px;
  border: 1px solid rgba(82,97,127,.22);
}
.topbar .disc-colour-floating .disc-swatch.on {
  box-shadow: inset 0 0 0 2px var(--paper-2), 0 0 0 1px var(--theme-deep);
}
.cd-finish-toggle,
.home-cd-finish {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border: 1px solid var(--theme-line-soft);
  border-radius: 4px;
  background: rgba(255,253,246,.58);
}
.cd-finish-toggle button,
.home-cd-finish button {
  min-height: 24px;
  padding: 3px 7px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: .6875rem;
  line-height: 1;
}
.cd-finish-toggle button.on,
.home-cd-finish button.on {
  background: var(--theme-deep);
  color: #fff;
}
.cd-finish-toggle button:focus-visible,
.home-cd-finish button:focus-visible { outline: 2px solid var(--theme); outline-offset: 2px; }
.disc-custom {
  width: 22px;
  height: 22px;
  border: 1px solid var(--theme-line);
  background: var(--theme-soft);
  box-shadow: none;
}
.disc-custom::before { inset: 4px; border: 1px solid rgba(82,97,127,.22); }
.disc-custom span { color: var(--theme-deep); }
.topbar .transport { padding: 4px 5px; }
.topbar .tbtn {
  width: 34px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
}
.topbar .tbtn:hover { border-color: var(--theme-line); background: var(--theme-soft); }
.topbar .play-on,
.topbar #playPause { background: var(--theme-mid); }
.topbar .rec-btn { border-color: var(--theme-line-soft); background: var(--theme-pale); }
.topbar button:focus-visible,
.topbar label:focus-within,
.archive-shell button:focus-visible,
.records-drawer-shell button:focus-visible {
  outline: 2px solid var(--theme);
  outline-offset: 2px;
}
.topbar .engine-status {
  position: fixed;
  z-index: 58;
  right: calc(var(--studio-rail) + 24px);
  bottom: 17px;
  max-width: 340px;
  padding: 6px 9px;
  border: 1px solid var(--theme-line);
  border-radius: 4px;
  background: rgba(248,244,231,.94);
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.records-open .topbar .engine-status { right: calc(var(--studio-side) + 24px); }

/* Input and Output use the same outlined archive-cabinet grammar. */
.stage {
  --archive-width: var(--studio-side);
  --output-width: var(--studio-rail);
  grid-template-columns: var(--archive-width) minmax(0, 1fr);
  gap: 14px;
  height: calc(100dvh - 78px);
  padding: 12px calc(var(--output-width) + 24px) 14px 12px;
  transition: padding-right .42s cubic-bezier(.34,1.02,.52,1);
}
body.records-open .stage { --output-width: var(--studio-side); }
.board-wrap { border: 0; overflow: hidden; }
.board,
body.archive-collapsed .board {
  width: min(calc(100dvh - 180px), calc(100vw - var(--archive-width) - var(--output-width) - 76px));
  min-width: 190px;
  border-color: var(--theme-deep);
}
.disc-center { border-color: var(--theme-deep); }
.disc-caption {
  width: min(100%, 660px);
  padding: 7px 9px;
  border: 1px solid var(--theme-line-soft);
  border-radius: 4px;
  background: rgba(248,244,231,.76);
}
.disc-caption-id {
  border: 1px solid var(--theme-line);
  border-radius: 3px;
  background: var(--theme-soft);
  color: var(--theme-deep);
}
.surprise-btn {
  border: 1px solid var(--theme-line);
  background: var(--theme-soft);
  box-shadow: none;
}

.archive-shell {
  overflow: hidden;
  border: 1px solid var(--theme-line);
  border-radius: 6px;
  background: rgba(248,246,239,.94);
  box-shadow: none;
}
.archive-head {
  min-height: 58px;
  padding: 12px 48px 11px 15px;
  border-bottom: 1px solid var(--theme-line);
  background: var(--theme-pale);
}
.archive-heading p { max-width: 245px; margin-top: 5px; color: var(--ink-soft); }
.archive-toggle {
  top: 11px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: 1px solid var(--theme-line);
  border-radius: 3px;
  background: rgba(255,253,246,.72);
  color: var(--theme-deep);
}
.archive-toggle:hover { background: var(--theme-mid); }
.archive-contents { gap: 0; padding: 0; background: transparent; }
.archive-strip,
.archive-strip[data-archive-panel="vibes"],
.archive-strip[data-archive-panel="ambience"],
.archive-strip[data-archive-panel="doodles"] {
  --strip-colour: var(--theme-soft);
  overflow: hidden;
  border-bottom: 1px solid var(--theme-line-soft);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.archive-strip:last-child { border-bottom: 0; }
.archive-strip::after { display: none; }
.archive-strip-trigger,
.archive-strip-trigger:hover,
.archive-strip-trigger:nth-child(even):hover,
.archive-strip-trigger.on {
  grid-template-columns: 24px 31px minmax(0,1fr) auto 16px;
  padding: 8px 12px;
  border-radius: 0;
  background: transparent;
  filter: none;
}
.archive-strip.is-open .archive-strip-trigger,
.archive-strip-trigger.on { background: var(--theme-soft); }
.archive-strip-trigger .rail-index {
  color: var(--theme-deep);
  font-variant-numeric: tabular-nums;
}
.archive-strip-trigger .rail-icon { color: var(--theme-deep); }
.rail-note { color: rgba(82,97,127,.72); }
.archive-strip-body { border-top: 1px solid var(--theme-line-soft); border-radius: 0; background: var(--theme-pale); }
.archive-strip-body .rail-panel { padding: 14px 14px 18px; }
.panel-count,
.archive-action,
.crop-opt,
#photoTray .tray-empty,
.tag-input,
.tag-ok {
  border: 1px solid var(--theme-line-soft);
  background: rgba(255,253,246,.78);
  box-shadow: none;
}
.archive-action:hover,
.crop-opt.on { border-color: var(--theme-line); background: var(--theme-mid); }
#photoTray .tray-empty { border-style: dashed; border-radius: 4px; }

body.archive-collapsed .stage { grid-template-columns: var(--studio-rail) minmax(0,1fr); gap: 14px; }
body.archive-collapsed .archive-shell {
  width: var(--studio-rail);
  border: 1px solid var(--theme-line);
  border-radius: 6px;
  background: var(--theme-pale);
}
body.archive-collapsed .archive-head { height: 48px; min-height: 48px; border-bottom: 1px solid var(--theme-line); }
body.archive-collapsed .archive-toggle { top: 7px; right: 11px; width: 34px; height: 34px; }
body.archive-collapsed .archive-contents { gap: 0; padding: 0; }
body.archive-collapsed .archive-strip,
body.archive-collapsed .archive-strip.is-open { border-bottom: 1px solid var(--theme-line-soft); border-radius: 0; }
body.archive-collapsed .archive-strip-trigger {
  width: 100%;
  border-radius: 0;
  background: transparent;
}
body.archive-collapsed .archive-strip-trigger.on { background: var(--theme-mid); }
body.archive-collapsed .board {
  width: min(calc(100dvh - 180px), calc(100vw - var(--studio-rail) - var(--output-width) - 76px));
}

.records-drawer-shell {
  z-index: 52;
  top: 90px;
  right: 12px;
  bottom: 14px;
  width: var(--studio-rail);
  overflow: hidden;
  border: 1px solid var(--theme-line);
  border-radius: 6px;
  background: var(--theme-pale);
  box-shadow: none;
  transition: width .42s cubic-bezier(.34,1.02,.52,1);
}
body.records-open .records-drawer-shell { width: var(--studio-side); }
.records-tab {
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  padding: 14px 7px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.records-tab::before {
  order: -2;
  content: "OUTPUT";
  color: var(--theme-deep);
  writing-mode: vertical-rl;
  letter-spacing: .12em;
}
.records-tab-icon { flex: none; color: var(--theme-deep); }
.records-tab-label {
  margin: 2px 0 auto;
  color: var(--theme-deep);
  writing-mode: vertical-rl;
  transform: none;
  letter-spacing: .08em;
}
.records-tab-count { margin: 0; background: var(--theme-mid); color: var(--theme-deep); }
.records-tab-arrow { margin: 0; color: var(--theme-deep); transform: rotate(180deg); }
.records-drawer-shell.open .records-tab {
  height: 58px;
  min-height: 58px;
  flex-direction: row;
  justify-content: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--theme-line);
  background: var(--theme-pale);
}
.records-drawer-shell.open .records-tab::before { writing-mode: initial; }
.records-drawer-shell.open .records-tab-label { margin: 0 0 0 auto; writing-mode: initial; }
.records-drawer-shell.open .records-tab-arrow { transform: rotate(90deg); }
.records-drawer {
  inset: 58px 0 0;
  width: 100%;
  padding: 14px 12px 12px;
  border: 0;
  border-radius: 0;
  background: rgba(248,246,239,.94);
  box-shadow: none;
}
.records-drawer-head { border-bottom: 1px solid var(--theme-line-soft); }
.records-drawer-mark,
.records-drawer-close,
.records-empty-record,
.creation-mini { border: 1px solid var(--theme-line-soft); background: rgba(255,253,246,.76); box-shadow: none; }
.records-empty-guide { border: 1px dashed var(--theme-line-soft); border-radius: 4px; background: var(--theme-pale); }
.records-empty-mark { border: 1px solid var(--theme-line-soft); background: var(--theme-soft); }

/* Home and Studio now share one family of tints; collage content may stay colourful. */
.home-screen {
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(82,97,127,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(82,97,127,.04) 1px, transparent 1px),
    radial-gradient(48% 42% at 104% -4%, rgba(111,128,163,.16), transparent 75%);
}
.home-nav { border-bottom: 1px solid var(--theme-line-soft); box-shadow: none; }
.home-nav-archive,
.guide-browse { border: 1px solid var(--theme-line); background: var(--theme-soft); color: var(--theme-deep); }
.guide-create,
.new-flowjam { border: 1px solid var(--theme-deep); background: var(--theme-deep); }
.guide-demo,
.home-section { border: 1px solid var(--theme-line-soft); box-shadow: none; }
.home-flow { border: 1px solid var(--theme-line); box-shadow: none; }
.home-flow li,
.home-flow li:nth-child(2),
.home-flow li:nth-child(3) { background: var(--theme-soft); }
.home-section-index,
.creations-home-section .home-section-index { border: 1px solid var(--theme-line); border-bottom: 0; background: var(--theme-mid); }
.board-file,
.board-file:nth-child(3n+2),
.board-file:nth-child(3n+3),
.creations-home-section .creation-card,
.creations-home-section .creation-card:nth-child(even) {
  border: 1px solid var(--theme-line-soft);
  background: var(--theme-soft);
  box-shadow: none;
}

@media (max-width: 1320px) {
  .topbar { grid-template-columns: auto minmax(0,1fr); gap: 10px; padding-inline: 12px; }
  .topbar .board-title { display: none; }
  .topbar-studio-tools { grid-column: 2; }
  .topbar .perform-name { display: inline; }
  .topbar .disc-colour-floating > span,
  .archive-strip-trigger .rail-note { display: none; }
  .topbar .rail-perform .rail-tool-btn { min-width: 36px; padding-inline: 7px; }
}

@media (max-width: 760px) {
  :root { --studio-side: 210px; }
  .topbar .brand-word { font-size: 1.15rem; }
  .topbar-studio-tools { gap: 5px; }
  .topbar .performance-rail,
  .topbar .disc-colour-floating,
  .topbar .transport { min-height: 40px; }
  .topbar .disc-colour-floating .disc-swatch { display: none; }
  .topbar .disc-colour-floating .disc-swatch.on { display: block; }
  .topbar .now-time { display: none; }
  .topbar .transport { gap: 2px; }
  .stage { gap: 10px; padding-left: 9px; padding-right: calc(var(--output-width) + 18px); }
  .records-drawer-shell { right: 8px; }
  .archive-heading p { display: none; }
}

@media (max-width: 620px) {
  .topbar { grid-template-columns: 36px minmax(0,1fr); }
  .topbar .brand-word { display: none; }
  .topbar .brand-mark { width: 32px; height: 32px; }
  .topbar .perform-name { display: none; }
}

/* ====================================================================
   FlowJam V3.6 — unobstructed disc and in-workspace photo inspector
   ==================================================================== */
.board-wrap {
  grid-template-rows: minmax(0, 1fr);
  row-gap: 0;
}
.board { grid-row: 1; }
.surprise-btn { top: 8px; }
.disc-rotor .board-hint {
  z-index: 4;
  max-width: min(460px, 72%);
  font-size: var(--type-body);
  line-height: var(--line-body);
}

.photo-inspector[hidden] { display: none !important; }
.photo-inspector {
  position: fixed;
  z-index: 56;
  inset: 90px 12px auto auto;
  width: min(420px, calc(100vw - 24px));
  max-height: min(380px, calc(100dvh - 108px));
  display: block;
  align-self: center;
  padding: 0;
  pointer-events: none;
}
.photo-inspector-card {
  position: relative;
  width: 100%;
  max-height: inherit;
  overflow-y: auto;
  padding: 14px;
  border: 1px solid var(--theme-line);
  border-radius: 6px;
  background: rgba(248,246,239,.97);
  box-shadow: 0 16px 42px rgba(40,36,28,.16);
  pointer-events: auto;
}
.photo-inspector-head {
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}
.photo-inspector-head h2 { margin-top: 2px; font-size: 18px; }
.photo-inspector-head > button {
  width: 30px;
  height: 30px;
  border: 1px solid var(--theme-line-soft);
  border-radius: 3px;
  background: rgba(255,253,246,.8);
  cursor: pointer;
}
.photo-inspector-layout {
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.photo-inspector-preview {
  min-height: 0;
  height: 142px;
  border: 1px solid var(--theme-line-soft);
  border-radius: 4px;
  background: rgba(255,253,246,.72);
}
.photo-inspector-fields { gap: 5px; }
.photo-inspector-fields textarea {
  min-height: 46px;
  padding: 7px 8px;
  resize: none;
  border: 1px solid var(--theme-line-soft);
  border-radius: 4px;
  background: rgba(255,253,246,.76);
  font-size: var(--type-label);
  line-height: 1.35;
}
.photo-edge-control { margin-bottom: 2px; }
.photo-edge-control button,
.photo-sound-label button {
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: rgba(255,253,246,.72);
  font-size: var(--type-fine);
  cursor: pointer;
}
.photo-edge-control button.on {
  border-color: var(--theme-line);
  background: var(--theme-soft);
}
.photo-inspector-actions {
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
}
.photo-inspector-actions p { display: none; }
.photo-inspector-actions button {
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid var(--theme-line);
  border-radius: 3px;
  background: var(--theme-mid);
  font-size: var(--type-fine);
  cursor: pointer;
}

.records-drawer-shell {
  top: 112px;
  bottom: 18px;
  transition: width .42s cubic-bezier(.34,1.02,.52,1), opacity .18s ease;
}
body.photo-inspector-open .records-drawer-shell { top: 482px; }

@media (max-width: 760px) {
  .photo-inspector {
    inset: 86px 8px auto auto;
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 98px);
  }
  .photo-inspector-layout { grid-template-columns: 96px minmax(0, 1fr); gap: 9px; }
  .photo-inspector-preview { height: 116px; }
  body.photo-inspector-open .records-drawer-shell { opacity: 0; pointer-events: none; }
}

/* ====================================================================
  FlowJam V3.8 — tintable iridescent CD player
  ==================================================================== */
.board-wrap {
  --flowjam-disc-size: max(190px, min(calc(100dvh - 180px), calc(100vw - var(--archive-width) - var(--output-width) - 76px)));
  isolation: isolate;
}
body.archive-collapsed .board-wrap {
  --flowjam-disc-size: max(190px, min(calc(100dvh - 180px), calc(100vw - var(--studio-rail) - var(--output-width) - 76px)));
}
.board,
body.archive-collapsed .board {
  z-index: 2;
  width: var(--flowjam-disc-size);
  border: 1px solid rgba(75, 84, 96, .46);
  background: radial-gradient(circle, #e9edf0 0 94.5%, #bdc6ce 95%, #f7f8f8 97.4%, #aab4bd 100%);
  box-shadow:
    0 10px 24px rgba(40, 44, 52, .09),
    0 2px 5px rgba(40, 44, 52, .07),
    inset 0 1px 0 rgba(255, 255, 255, .76);
}
.board::after {
  border: 1px solid rgba(255, 255, 255, .5);
  box-shadow: inset 0 0 0 1px rgba(30, 34, 39, .12);
}
.turntable-plinth {
  position: absolute;
  inset: 0;
  width: min(calc(var(--flowjam-disc-size) + 176px), calc(100% - 18px));
  height: min(calc(var(--flowjam-disc-size) + 48px), calc(100% - 8px));
  margin: auto;
  border: 1px solid rgba(82, 97, 127, .23);
  border-radius: 18px;
  background: rgba(247, 247, 243, .88);
  box-shadow:
    0 18px 42px rgba(40, 36, 28, .09),
    inset 0 1px 0 rgba(255, 255, 255, .95);
  pointer-events: none;
}
.turntable-plinth::before {
  content: "";
  position: absolute;
  inset: 13px;
  border: 1px solid rgba(82, 97, 127, .1);
  border-radius: 13px;
}
.turntable-plinth::after {
  content: "";
  position: absolute;
  left: 24px;
  bottom: 18px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #99a78c;
  box-shadow: 0 0 0 4px rgba(153, 167, 140, .13);
}
.disc-surface {
  position: absolute;
  z-index: 0;
  inset: 2.8%;
  overflow: hidden;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at center, transparent 0 3.3px, rgba(44,59,76,.055) 3.6px, transparent 4px 4.8px),
    conic-gradient(from 208deg,
      color-mix(in srgb, var(--disc-color) 60%, #dce8ee 40%) 0 7%,
      color-mix(in srgb, var(--disc-color) 58%, #78eaff 42%) 12%,
      color-mix(in srgb, var(--disc-color) 60%, #ff82cf 40%) 21%,
      color-mix(in srgb, var(--disc-color) 62%, #ffe879 38%) 30%,
      color-mix(in srgb, var(--disc-color) 62%, #86dcff 38%) 40%,
      color-mix(in srgb, var(--disc-color) 56%, #edf1f4 44%) 51%,
      color-mix(in srgb, var(--disc-color) 60%, #9c8aff 40%) 62%,
      color-mix(in srgb, var(--disc-color) 61%, #72efc5 39%) 73%,
      color-mix(in srgb, var(--disc-color) 63%, #ffc0df 37%) 84%,
      color-mix(in srgb, var(--disc-color) 57%, #e8eef2 43%) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.52),
    inset 0 0 16px rgba(53,67,84,.08),
    0 1px 3px rgba(47,60,75,.13);
  pointer-events: none;
  transition: opacity .35s ease;
}
.board.cam-on .disc-surface { opacity: .18; }
.disc-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(from 118deg,
    transparent 0 13%,
    rgba(104,231,255,.2) 17%,
    rgba(255,108,207,.18) 21%,
    rgba(255,235,117,.16) 26%,
    transparent 34% 63%,
    rgba(147,129,255,.15) 68%,
    rgba(104,240,202,.14) 73%,
    transparent 82% 100%);
  -webkit-mask: radial-gradient(circle, transparent 0 17%, #000 21% 95%, transparent 96%);
  mask: radial-gradient(circle, transparent 0 17%, #000 21% 95%, transparent 96%);
}
.disc-surface::after {
  content: "";
  position: absolute;
  inset: 13.5%;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(71,86,104,.07),
    0 0 0 34px rgba(255,255,255,.025),
    0 0 0 35px rgba(71,86,104,.055),
    0 0 0 88px rgba(255,255,255,.02),
    0 0 0 89px rgba(71,86,104,.045);
}
.disc-rotor .item { z-index: 4; }
.disc-center {
  z-index: 3;
  width: 22%;
  height: 22%;
  border: 1px solid rgba(104,117,132,.38);
  background:
    radial-gradient(circle,
      rgba(247,249,250,.96) 0 27%,
      rgba(164,178,191,.46) 28% 33%,
      rgba(255,255,255,.3) 34% 48%,
      color-mix(in srgb, var(--disc-color) 38%, transparent 62%) 49% 62%,
      rgba(225,231,235,.56) 63% 68%,
      transparent 69%);
  box-shadow:
    0 1px 3px rgba(48,62,78,.12),
    inset 0 0 0 1px rgba(255,255,255,.44);
}
.disc-hole {
  width: 42%;
  height: 42%;
  border-color: rgba(101,113,128,.46);
  background: rgba(248,249,247,.92);
  box-shadow: inset 0 1px 2px rgba(55,68,84,.16), 0 0 0 3px rgba(255,255,255,.24);
}
.disc-rotor .board-hint {
  z-index: 5;
  color: rgba(29,27,23,.62);
  text-shadow: none;
}
.disc-rotor .board-hint strong { color: var(--ink); }
.board.dragover .disc-surface { filter: brightness(1.18); }

html[data-cd-finish="solid"] .board,
html[data-cd-finish="solid"] body.archive-collapsed .board {
  border-color: color-mix(in srgb, var(--disc-color) 64%, #343942 36%);
  background: var(--disc-color);
  box-shadow: none;
}
html[data-cd-finish="solid"] .board::after { border-color: rgba(29,31,35,.2); box-shadow: none; }
html[data-cd-finish="solid"] .disc-surface {
  background:
    radial-gradient(circle at 64% 29%, rgba(255,255,255,.19), transparent 4.5%),
    radial-gradient(circle at 31% 72%, rgba(28,30,32,.08), transparent 3.5%),
    var(--disc-color);
  box-shadow: none;
}
html[data-cd-finish="solid"] .disc-surface::before,
html[data-cd-finish="solid"] .disc-surface::after { display: none; }
html[data-cd-finish="solid"] .disc-center {
  border-color: rgba(29,31,35,.28);
  background: var(--disc-color);
  box-shadow: none;
}
html[data-cd-finish="solid"] .disc-hole {
  border-color: rgba(29,31,35,.34);
  background: var(--paper-2);
  box-shadow: none;
}
.cd-dark .disc-rotor .board-hint { color: rgba(255,255,255,.76); }
.cd-dark .disc-rotor .board-hint strong { color: #fff; }

.turntable-tonearm {
  position: absolute;
  z-index: 7;
  right: 10px;
  top: 50%;
  width: 142px;
  height: 58px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  transform: translate(58px, -50%);
  transform-origin: right center;
  transition: transform .55s cubic-bezier(.34,1.12,.64,1);
  pointer-events: auto;
  cursor: pointer;
  filter: drop-shadow(0 2px 3px rgba(41,54,69,.1));
}
body.transport-playing .turntable-tonearm { transform: translate(6px, -50%); }
.turntable-tonearm:focus-visible { outline: none; }
.turntable-tonearm:focus-visible .tonearm-pivot { box-shadow: 0 0 0 3px rgba(111,128,163,.28); }
.turntable-tonearm:hover .tonearm-pivot { background: #d1d4d5; }
.tonearm-pivot {
  position: absolute;
  right: 0;
  top: 4px;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(86,101,118,.34);
  border-radius: 13px;
  background: rgba(231,235,237,.96);
  box-shadow: inset 0 0 0 6px rgba(255,255,255,.28), 0 2px 5px rgba(41,54,69,.1);
  transition: background .16s ease, box-shadow .16s ease;
}
.tonearm-pivot::after {
  content: "";
  position: absolute;
  inset: 15px;
  border: 1px solid rgba(86,101,118,.28);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #fff 0 12%, #8dd9f0 22%, #5f7184 62%, #d8e2e7 68% 100%);
}
.tonearm-shaft {
  position: absolute;
  right: 42px;
  top: 24px;
  width: 88px;
  height: 10px;
  border: 1px solid rgba(86,101,118,.28);
  border-radius: 999px;
  background: rgba(207,215,220,.95);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.34);
  transform: none;
}
.tonearm-head {
  position: absolute;
  left: -10px;
  top: 50%;
  bottom: auto;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(86,101,118,.36);
  border-radius: 8px;
  background: rgba(225,231,234,.98);
  transform: translate(-50%, -50%);
}
.tonearm-head::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff5b73;
  box-shadow: 0 0 0 3px rgba(255,91,115,.13);
  transform: translate(-50%, -50%);
}

@media (max-width: 1080px) {
  .turntable-plinth { width: min(calc(var(--flowjam-disc-size) + 112px), calc(100% - 10px)); }
  .turntable-tonearm {
    right: -4px;
    top: 50%;
    transform: translate(54px, -50%) scale(.78);
    transform-origin: right center;
  }
  body.transport-playing .turntable-tonearm { transform: translate(10px, -50%) scale(.78); }
}

@media (max-width: 760px) {
  .turntable-plinth { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .turntable-tonearm { transition-duration: .01ms !important; }
}

/* ====================================================================
   FlowJam V3.9 — interactive printed-CD homepage
   ==================================================================== */
.guide-demo.home-cd-player {
  width: min(100%, 760px);
  min-height: 620px;
  display: grid;
  grid-template-rows: 230px minmax(360px, 1fr);
  align-self: center;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.home-cd-rack {
  position: relative;
  z-index: 4;
  width: 100%;
  min-height: 230px;
  isolation: isolate;
}
.home-cd-option {
  position: absolute;
  top: 28px;
  width: 34%;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  filter: saturate(.88) brightness(.96);
  transition: transform .32s cubic-bezier(.34,1.2,.64,1), filter .2s ease;
}
.home-cd-option:nth-child(1) { left: 2%; z-index: 1; transform: rotate(-9deg); }
.home-cd-option:nth-child(2) { left: 33%; top: 6px; z-index: 2; transform: rotate(6deg); }
.home-cd-option:nth-child(3) { right: 2%; top: 27px; z-index: 3; transform: rotate(-5deg); }
.home-cd-option:hover,
.home-cd-option:focus-visible {
  z-index: 12;
  outline: 0;
  filter: saturate(1.04) brightness(1.02);
  transform: translateY(-13px) rotate(0deg) scale(1.045);
}
.home-cd-option.is-selected {
  z-index: 14;
  filter: saturate(1.08) brightness(1.03);
  transform: translateY(-18px) rotate(0deg) scale(1.07);
}
.home-cd-option:focus-visible .home-cd-face { box-shadow: 0 0 0 4px rgba(82,97,127,.24), 0 13px 24px rgba(43,48,58,.2); }

.home-cd-face,
.home-cd-main-face {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(72,82,94,.52);
  border-radius: 50%;
  isolation: isolate;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.32),
    inset 0 0 18px rgba(42,51,64,.12),
    0 12px 22px rgba(43,48,58,.17),
    0 2px 4px rgba(43,48,58,.13);
}
.home-cd-face::before,
.home-cd-main-face::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  background:
    repeating-radial-gradient(circle, transparent 0 3px, rgba(255,255,255,.06) 3.5px, transparent 4px 5px),
    conic-gradient(from 118deg,
      transparent 0 12%,
      rgba(105,230,255,.16) 16%,
      rgba(255,110,206,.14) 21%,
      rgba(255,236,111,.12) 27%,
      transparent 34% 64%,
      rgba(143,126,255,.13) 70%,
      rgba(102,236,198,.11) 76%,
      transparent 84% 100%);
  mix-blend-mode: screen;
  pointer-events: none;
}
.home-cd-face::after,
.home-cd-main-face::after {
  content: "";
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 50%;
  width: 20%;
  aspect-ratio: 1;
  border: 1px solid rgba(73,83,96,.48);
  border-radius: 50%;
  background: rgba(248,249,247,.96);
  box-shadow:
    0 0 0 7px rgba(218,225,230,.52),
    0 0 0 9px rgba(255,255,255,.42),
    inset 0 2px 4px rgba(52,65,80,.14);
  transform: translate(-50%, -50%);
}
.cd-base-ivory { --cd-base: #f2eee4; --cd-edge: #c8c1b2; }
.cd-base-rose { --cd-base: #f58db7; --cd-edge: #d76f9b; }
.cd-base-black { --cd-base: #3f4145; --cd-edge: #292b2e; }
.cd-base-silver { --cd-base: #e8edf2; --cd-edge: #aebbc6; }
.cd-base-cyan { --cd-base: #79d9e8; --cd-edge: #48afc2; }
.cd-base-lime { --cd-base: #b9df72; --cd-edge: #83b34f; }
.cd-base-ultraviolet { --cd-base: #a78bfa; --cd-edge: #7561c5; }
.home-cd-face,
.home-cd-main-face {
  background:
    repeating-radial-gradient(circle at center, transparent 0 3px, rgba(67,82,99,.045) 3.5px, transparent 4px 5px),
    conic-gradient(from 212deg,
      color-mix(in srgb, var(--cd-base) 72%, #eef3f5 28%) 0 12%,
      color-mix(in srgb, var(--cd-base) 68%, #72e9ff 32%) 19%,
      color-mix(in srgb, var(--cd-base) 70%, #ff8ed1 30%) 29%,
      color-mix(in srgb, var(--cd-base) 72%, #ffe77d 28%) 39%,
      color-mix(in srgb, var(--cd-base) 70%, #8de6ef 30%) 52%,
      color-mix(in srgb, var(--cd-base) 76%, #f3f5f6 24%) 66%,
      color-mix(in srgb, var(--cd-base) 70%, #a58cff 30%) 78%,
      color-mix(in srgb, var(--cd-base) 70%, #86efc9 30%) 88%,
      color-mix(in srgb, var(--cd-base) 75%, #eef2f4 25%) 100%);
  border-color: color-mix(in srgb, var(--cd-edge) 58%, #5c6875 42%);
}

.home-cd-deck {
  position: relative;
  min-height: 380px;
  display: grid;
  grid-template-columns: minmax(150px, .72fr) minmax(300px, 1.28fr);
  align-items: center;
  padding: 22px 24px 28px;
  border: 1px solid rgba(82,97,127,.2);
  border-radius: 8px 28px 10px 8px;
  background: rgba(248,248,244,.66);
  box-shadow: 0 16px 34px rgba(55,61,72,.08);
}
.home-cd-deck::before {
  content: "";
  position: absolute;
  right: 8%;
  top: 50%;
  width: min(340px, 48%);
  aspect-ratio: 1;
  border: 1px solid rgba(82,97,127,.13);
  border-radius: 50%;
  background: rgba(82,97,127,.045);
  transform: translateY(-50%);
}
.home-cd-copy {
  position: relative;
  z-index: 4;
  align-self: start;
  display: grid;
  gap: 7px;
  padding: 56px 12px 0 2px;
  color: var(--theme-deep);
}
.home-cd-copy > span { font-size: var(--type-fine); font-weight: 700; letter-spacing: .12em; }
.home-cd-copy strong { font-size: clamp(1.7rem, 3vw, 2.7rem); font-weight: 400; letter-spacing: -.035em; }
.home-cd-copy small { max-width: 180px; color: var(--ink-soft); font-size: var(--type-label); line-height: 1.45; }
.home-cd-finish { width: fit-content; margin-top: 8px; }
.home-cd-main {
  position: relative;
  z-index: 3;
  justify-self: center;
  width: min(330px, 92%);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 16px 17px rgba(43,48,58,.16));
}
.home-cd-main:focus-visible { outline: 4px solid rgba(82,97,127,.27); outline-offset: 6px; }
.home-cd-main-face { width: 100%; height: 100%; transition: transform .25s ease; }
.home-cd-main:hover .home-cd-main-face { transform: scale(1.018); }
.home-cd-play-icon {
  position: absolute;
  z-index: 12;
  right: 3%;
  bottom: 10%;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding-left: 3px;
  border: 1px solid rgba(82,97,127,.3);
  border-radius: 50%;
  background: rgba(250,250,247,.94);
  color: var(--theme-deep);
  box-shadow: 0 5px 12px rgba(43,48,58,.14);
  font-size: .82rem;
}
.home-cd-main.is-playing .home-cd-main-face { animation: home-cd-spin 9s linear infinite; }
.home-cd-main.is-playing .home-cd-play-icon { padding-left: 0; background: var(--theme-deep); color: #fff; }
@keyframes home-cd-spin { to { transform: rotate(360deg); } }

.home-cd-player[data-finish="solid"] .home-cd-face,
.home-cd-player[data-finish="solid"] .home-cd-main-face {
  border-color: color-mix(in srgb, var(--cd-edge) 62%, #39414b 38%);
  background: var(--cd-base);
  box-shadow: 0 8px 16px rgba(43,48,58,.12);
}
.home-cd-player[data-finish="solid"] .home-cd-face::before,
.home-cd-player[data-finish="solid"] .home-cd-main-face::before { display: none; }
.home-cd-player[data-finish="solid"] .home-cd-face::after,
.home-cd-player[data-finish="solid"] .home-cd-main-face::after {
  border-color: rgba(48,55,64,.34);
  background: var(--paper-2);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--cd-base) 76%, #d7dde1 24%);
}

.home-cd-transport {
  position: absolute;
  z-index: 6;
  left: 24px;
  right: 24px;
  bottom: 16px;
  min-height: 34px;
  display: grid;
  grid-template-columns: auto minmax(90px,1fr) 42px;
  align-items: center;
  gap: 12px;
  padding: 0 9px 0 12px;
  border: 1px solid rgba(82,97,127,.14);
  border-radius: 999px;
  background: rgba(250,250,247,.84);
  color: var(--theme-deep);
}
.home-cd-transport > span { font-size: .64rem; font-weight: 700; letter-spacing: .09em; white-space: nowrap; }
.home-cd-transport time { font-size: var(--type-fine); font-variant-numeric: tabular-nums; text-align: right; }
.home-cd-wave { height: 18px; display: flex; align-items: center; gap: 4px; overflow: hidden; }
.home-cd-wave i { flex: 1; height: 2px; border-radius: 2px; background: var(--theme); transform-origin: center; }
.home-cd-player.is-playing .home-cd-wave i { animation: home-cd-wave .72s ease-in-out infinite alternate; }
.home-cd-player.is-playing .home-cd-wave i:nth-child(2) { animation-delay: -.18s; }
.home-cd-player.is-playing .home-cd-wave i:nth-child(3) { animation-delay: -.42s; }
.home-cd-player.is-playing .home-cd-wave i:nth-child(4) { animation-delay: -.08s; }
.home-cd-player.is-playing .home-cd-wave i:nth-child(5) { animation-delay: -.56s; }
.home-cd-player.is-playing .home-cd-wave i:nth-child(6) { animation-delay: -.29s; }
.home-cd-player.is-playing .home-cd-wave i:nth-child(7) { animation-delay: -.48s; }
@keyframes home-cd-wave { from { transform: scaleY(1); } to { transform: scaleY(6); } }

@media (max-width: 900px) {
  .guide-demo.home-cd-player { width: min(720px,100%); justify-self: center; }
}

@media (max-width: 620px) {
  .guide-demo.home-cd-player { min-height: 490px; grid-template-rows: 158px minmax(310px,1fr); }
  .home-cd-rack { min-height: 158px; }
  .home-cd-option { top: 22px; width: 35%; }
  .home-cd-option:nth-child(2) { top: 7px; }
  .home-cd-option:nth-child(3) { top: 23px; }
  .home-cd-face::after { box-shadow: 0 0 0 4px rgba(218,225,230,.52), 0 0 0 6px rgba(255,255,255,.42), inset 0 1px 3px rgba(52,65,80,.14); }
  .home-cd-deck { min-height: 310px; grid-template-columns: 92px minmax(190px,1fr); padding: 12px 10px 42px; }
  .home-cd-deck::before { right: 3%; width: 65%; }
  .home-cd-copy { gap: 4px; padding: 38px 2px 0; }
  .home-cd-copy strong { font-size: 1.15rem; }
  .home-cd-copy small { font-size: .68rem; }
  .home-cd-finish button { padding-inline: 6px; font-size: .62rem; }
  .home-cd-main { width: min(230px,96%); }
  .home-cd-play-icon { width: 40px; height: 40px; }
  .home-cd-transport { left: 10px; right: 10px; bottom: 8px; grid-template-columns: auto 1fr 38px; gap: 7px; }
  .home-cd-transport > span { font-size: .55rem; }
}

@media (prefers-reduced-motion: reduce) {
  .home-cd-main.is-playing .home-cd-main-face,
  .home-cd-player.is-playing .home-cd-wave i { animation: none; }
}

/* ====================================================================
   FlowJam V4 — white print studio and solid CD bases
   ==================================================================== */
:root {
  --paper: #ffffff;
  --paper-2: #ffffff;
  --theme: #202124;
  --theme-deep: #161719;
  --theme-mid: #e9e9e7;
  --theme-soft: #f3f3f1;
  --theme-pale: #fafaf9;
  --theme-line: rgba(26, 28, 31, .24);
  --theme-line-soft: rgba(26, 28, 31, .11);
}
html,
body,
.stage,
.home-screen {
  background-color: #fff;
  background-image: none;
}
.topbar {
  border-bottom: 1px solid #ececea;
  background: rgba(255,255,255,.96);
  box-shadow: none;
}
.topbar-studio-tools { justify-content: flex-end; }
.topbar .rail-perform,
.topbar .transport { background: #fff; }
.topbar #playPause { background: #e8e8e5; }
.topbar .rec-btn { background: #fafafa; }
.topbar .engine-status {
  border-color: #e2e2df;
  background: rgba(255,255,255,.96);
}

.archive-shell {
  border: 1px solid #dededb;
  border-radius: 9px;
  background: #fff;
  box-shadow: none;
}
.archive-head {
  min-height: 58px;
  border-bottom: 1px solid #e8e8e5;
  background: #fff;
}
.archive-kicker { color: #191a1c; }
.archive-toggle {
  border-color: #dededb;
  background: #fff;
  color: #191a1c;
}
.archive-toggle:hover { background: #f2f2f0; }
.archive-contents { background: #fff; }
.archive-strip,
.archive-strip[data-archive-panel="appearance"],
.archive-strip[data-archive-panel="vibes"],
.archive-strip[data-archive-panel="ambience"],
.archive-strip[data-archive-panel="doodles"] {
  --strip-colour: #f5f5f3;
  border-bottom: 1px solid #e7e7e4;
  background: #fff;
}
.archive-strip-trigger,
.archive-strip-trigger:hover,
.archive-strip-trigger:nth-child(even):hover,
.archive-strip-trigger.on {
  min-height: 54px;
  padding: 8px 12px;
  background: #fff;
  color: #202124;
  transition: background-color .16s ease, color .16s ease;
}
.archive-strip.is-open .archive-strip-trigger,
.archive-strip-trigger.on {
  background: #171719;
  color: #fff;
}
.archive-strip.is-open .archive-strip-trigger .rail-index,
.archive-strip.is-open .archive-strip-trigger .rail-note,
.archive-strip.is-open .archive-strip-trigger .rail-arrow { color: rgba(255,255,255,.66); }
.archive-strip.is-open .archive-strip-trigger .rail-icon { color: #fff; }
.archive-strip-trigger .rail-index { color: #777a80; }
.archive-strip-trigger .rail-icon { color: #26282b; }
.archive-strip-trigger .rail-note { color: #85888d; }
.archive-strip-body {
  border-top: 0;
  background: #fff;
  opacity: 1;
  visibility: hidden;
  transform: none;
  transition: visibility 0s linear .34s;
}
.archive-strip.is-open .archive-strip-body {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.archive-strip-body .rail-panel { padding: 16px 14px 20px; }
.panel-count,
.archive-action,
.crop-opt,
#photoTray .tray-empty,
.tag-input,
.tag-ok {
  border-color: #dededb;
  background: #fff;
}
.archive-action:hover,
.crop-opt.on { border-color: #1c1d1f; background: #f1f1ef; color: #1c1d1f; }

.appearance-panel .shelf-head { margin-bottom: 7px; }
.appearance-swatches {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 7px;
}
.appearance-swatch {
  position: relative;
  width: 100%;
  height: auto;
  min-width: 0;
  min-height: 70px;
  display: grid;
  grid-template-columns: 36px minmax(0,1fr);
  align-items: center;
  gap: 8px;
  padding: 9px;
  border: 1px solid #dededb;
  border-radius: 5px;
  background: #fff;
  color: #252629;
  cursor: pointer;
  text-align: left;
  transition: border-color .14s ease, background-color .14s ease;
}
.appearance-swatch::before {
  content: "";
  width: 36px;
  aspect-ratio: 1;
  border: 1px solid rgba(27,29,32,.28);
  border-radius: 50%;
  background: var(--swatch, var(--custom-colour, #f58db7));
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.12);
}
.appearance-swatch > span {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: var(--type-fine);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.appearance-swatch:hover { border-color: #9b9da1; background: #fafaf9; }
.appearance-swatch.on {
  border-color: #1b1c1e;
  background: #f4f4f2;
  box-shadow: inset 0 0 0 1px #1b1c1e;
}
.appearance-custom { --swatch: var(--custom-colour, #f58db7); }
.appearance-custom.disc-custom {
  width: auto;
  height: auto;
  display: grid;
  overflow: visible;
  border-radius: 5px;
  background: #fff;
  box-shadow: none;
}
.appearance-custom.disc-custom::before {
  position: static;
  inset: auto;
  width: 36px;
  height: auto;
  aspect-ratio: 1;
  border: 1px solid rgba(27,29,32,.28);
  background: var(--custom-colour, #f58db7);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.12);
}
.appearance-custom.disc-custom > span {
  position: static;
  z-index: auto;
  width: auto;
  height: auto;
  display: block;
  border-radius: 0;
  color: inherit;
  font: inherit;
  pointer-events: none;
}
.appearance-custom::after {
  content: "+";
  position: absolute;
  left: 31px;
  top: 30px;
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  border: 1px solid #b8b9b8;
  border-radius: 50%;
  background: #fff;
  color: #242527;
  font: 10px/1 system-ui,sans-serif;
}
.appearance-custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

.board-wrap { isolation: isolate; }
.turntable-plinth {
  width: min(calc(var(--flowjam-disc-size) + 112px), calc(100% - 16px));
  height: min(calc(var(--flowjam-disc-size) + 112px), calc(100% - 8px));
  border: 1px solid #ececea;
  border-radius: 34px;
  background-color: #fff;
  background-image: radial-gradient(circle, #dededb .8px, transparent .9px);
  background-size: 10px 10px;
  box-shadow: none;
}
.turntable-plinth::before {
  inset: 18px;
  border: 1px solid #efefed;
  border-radius: 25px;
  background: rgba(255,255,255,.88);
}
.turntable-plinth::after { display: none; }
.cd-player-hinge {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: -7px;
  width: 176px;
  height: 13px;
  border: 1px solid #d9d9d6;
  border-radius: 7px 7px 3px 3px;
  background: #f5f5f3;
  transform: translateX(-50%);
}
.cd-player-hinge::before,
.cd-player-hinge::after {
  content: "";
  position: absolute;
  top: 3px;
  width: 34px;
  height: 5px;
  border: 1px solid #d1d1ce;
  border-radius: 999px;
  background: #fff;
}
.cd-player-hinge::before { left: 17px; }
.cd-player-hinge::after { right: 17px; }
.cd-player-display {
  position: absolute;
  z-index: 4;
  right: 25px;
  bottom: 13px;
  width: 88px;
  height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #2b2d31;
  border-radius: 5px;
  background: #17191d;
  color: #d5d9dd;
  font: 600 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
}
.cd-player-display::before {
  content: "";
  width: 5px;
  height: 5px;
  margin-right: 8px;
  border-radius: 50%;
  background: #8c969f;
}
.cd-player-display::after { content: "READY"; }
body.transport-playing .cd-player-display::before { background: #ef5a68; }
body.transport-playing .cd-player-display::after { content: "PLAY"; }
.board,
body.archive-collapsed .board,
html[data-cd-finish="solid"] .board,
html[data-cd-finish="solid"] body.archive-collapsed .board {
  border: 1px solid #9fa6ac;
  background: #d9dde0;
  box-shadow: 0 7px 18px rgba(35,39,44,.11), 0 1px 3px rgba(35,39,44,.12);
  transition: width .36s cubic-bezier(.4,.1,.2,1);
}
.board::after,
html[data-cd-finish="solid"] .board::after {
  border: 1px solid rgba(255,255,255,.52);
  box-shadow: inset 0 0 0 1px rgba(31,34,38,.13);
}
.disc-surface,
html[data-cd-finish="solid"] .disc-surface {
  inset: 1.2%;
  border: 1px solid rgba(29,31,35,.25);
  background-color: var(--disc-color);
  background-image: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  opacity: 1;
  transition: none;
}
.disc-surface::before,
.disc-surface::after,
html[data-cd-finish="solid"] .disc-surface::before,
html[data-cd-finish="solid"] .disc-surface::after { display: none; }
.disc-center,
html[data-cd-finish="solid"] .disc-center {
  z-index: 5;
  width: 22%;
  height: 22%;
  border: 1px solid rgba(56,62,69,.34);
  background: rgba(255,255,255,.2);
  box-shadow: 0 0 0 6px rgba(225,229,232,.3), inset 0 0 0 1px rgba(255,255,255,.34);
}
.disc-center::before,
.disc-center::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.disc-center::before {
  inset: 10%;
  border: 1px solid rgba(72,79,87,.2);
}
.disc-center::after {
  inset: 27%;
  border: 1px solid rgba(255,255,255,.58);
}
.disc-hole,
html[data-cd-finish="solid"] .disc-hole {
  width: 43%;
  height: 43%;
  border: 1px solid rgba(62,69,76,.4);
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(44,50,57,.14);
}
.board.cam-on .disc-surface { opacity: .16; }
.surprise-btn { border-color: #d7d7d4; background: #fff; }

.records-drawer-shell,
.records-drawer,
.records-drawer-shell.open .records-tab,
.home-nav,
.home-section,
.home-cd-deck { background-color: #fff; background-image: none; }
.records-drawer-shell,
.home-section,
.home-cd-deck { box-shadow: none; }
.home-screen { color: #202124; }
.home-nav { border-bottom-color: #ececea; }
.home-flow { border-color: #dededb; }
.home-flow li,
.home-flow li:nth-child(2),
.home-flow li:nth-child(3) { background: #f7f7f5; }
.home-cd-player { --home-cd-finish: solid; }
.home-cd-face,
.home-cd-main-face,
.home-cd-player[data-finish="solid"] .home-cd-face,
.home-cd-player[data-finish="solid"] .home-cd-main-face {
  border-color: color-mix(in srgb, var(--cd-edge) 62%, #39414b 38%);
  background: var(--cd-base);
  box-shadow: 0 7px 14px rgba(35,39,44,.11), inset 0 0 0 1px rgba(255,255,255,.12);
}
.home-cd-face::before,
.home-cd-main-face::before { display: none; }
.home-cd-face::after,
.home-cd-main-face::after,
.home-cd-player[data-finish="solid"] .home-cd-face::after,
.home-cd-player[data-finish="solid"] .home-cd-main-face::after {
  border-color: rgba(55,61,68,.34);
  background: #fff;
  box-shadow: 0 0 0 7px rgba(219,224,228,.54), inset 0 1px 2px rgba(46,52,59,.11);
}

body.archive-collapsed .archive-shell { background: #fff; }
body.archive-collapsed .archive-strip-trigger { background: #fff; color: #202124; }
body.archive-collapsed .archive-strip-trigger.on { background: #171719; color: #fff; }

@media (max-width: 760px) {
  .appearance-swatches { grid-template-columns: 1fr; }
  .appearance-swatch { min-height: 54px; }
  .turntable-plinth { display: none; }
}

/* RoomSmith-like object drawer: a white sheet with a physical edge tab. */
.archive-strip-body .rail-panel.on { animation: archive-sheet-in .32s cubic-bezier(.2,.72,.2,1); }
@keyframes archive-sheet-in {
  from { transform: translateX(-12px); }
  to { transform: translateX(0); }
}
.archive-strip-body .shelf-head { margin-bottom: 10px; }
.archive-strip-body .shelf-head h2 {
  font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  font-size: clamp(2rem, 2.4vw, 2.65rem);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.035em;
}
.archive-strip-body .block-note {
  max-width: 250px;
  margin: 0 0 18px;
  color: #737579;
  font-size: var(--type-label);
  font-style: normal;
  line-height: 1.45;
}
.appearance-swatches {
  gap: 18px 12px;
  padding: 8px 4px 14px;
}
.appearance-swatch,
.appearance-custom.disc-custom {
  min-height: 116px;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  justify-items: center;
  align-content: center;
  gap: 9px;
  padding: 5px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
  transform: rotate(var(--sample-tilt, 0deg));
  transition: transform .2s cubic-bezier(.2,.8,.2,1);
}
.appearance-swatch:nth-child(1) { --sample-tilt: -3deg; }
.appearance-swatch:nth-child(2) { --sample-tilt: 2.5deg; }
.appearance-swatch:nth-child(3) { --sample-tilt: 2deg; }
.appearance-swatch:nth-child(4) { --sample-tilt: -2deg; }
.appearance-swatch:hover,
.appearance-swatch.on,
.appearance-custom.disc-custom:hover,
.appearance-custom.disc-custom.on {
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: translateY(-5px) rotate(0deg) scale(1.03);
}
.appearance-swatch::before,
.appearance-custom.disc-custom::before {
  width: 78px;
  height: auto;
  aspect-ratio: 1;
  border: 4px solid #fff;
  outline: 1px solid rgba(42,45,50,.28);
  border-radius: 50%;
  background: var(--swatch, var(--custom-colour, #f58db7));
  box-shadow: 0 7px 12px rgba(34,38,44,.15), inset 0 0 0 1px rgba(255,255,255,.12);
}
.appearance-swatch.on::before,
.appearance-custom.disc-custom.on::before { outline: 2px solid #171719; outline-offset: 2px; }
.appearance-swatch > span,
.appearance-custom.disc-custom > span {
  font-size: var(--type-label);
  font-weight: 500;
  text-align: center;
}
.appearance-custom::after {
  left: calc(50% + 19px);
  top: 59px;
  width: 18px;
  height: 18px;
  border-color: #aeb0b3;
  box-shadow: 0 2px 4px rgba(34,38,44,.11);
}

@media (min-width: 761px) {
  .archive-shell { overflow: visible; }
  .archive-head {
    min-height: 40px;
    padding: 10px 14px;
  }
  .archive-heading p,
  .archive-toggle { display: none; }
  .archive-contents {
    position: relative;
    gap: 0;
    padding: 0;
    overflow: visible;
  }
  .archive-strip {
    order: 2;
    min-height: 49px;
    flex: 0 0 49px;
    grid-template-rows: 49px minmax(0,0fr);
    overflow: hidden;
    border-radius: 0;
  }
  .archive-strip::after { display: none; }
  .archive-strip:not(.is-open) > .archive-strip-trigger {
    min-height: 49px;
    border-radius: 0;
  }
  .archive-strip.is-open {
    position: static;
    order: 1;
    min-height: 0;
    flex: 1 1 280px;
    display: grid;
    grid-template-rows: minmax(0,1fr);
    overflow: visible;
    border-bottom: 1px solid #e5e5e2;
    background: #fff;
  }
  .archive-strip.is-open > .archive-strip-trigger {
    position: absolute;
    z-index: 30;
    top: 17px;
    right: -41px;
    width: 42px;
    height: 132px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 5px;
    border: 1px solid #dededb;
    border-left: 0;
    border-radius: 0 7px 7px 0;
    background: #fff;
    color: #202124;
    box-shadow: 5px 5px 10px rgba(34,38,44,.06);
  }
  .archive-strip.is-open > .archive-strip-trigger:hover { background: #f7f7f5; }
  .archive-strip.is-open > .archive-strip-trigger .rail-index,
  .archive-strip.is-open > .archive-strip-trigger .rail-icon,
  .archive-strip.is-open > .archive-strip-trigger .rail-note,
  .archive-strip.is-open > .archive-strip-trigger .rail-arrow { display: none; }
  .archive-strip.is-open > .archive-strip-trigger .rail-label {
    display: block;
    color: #202124;
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
  }
  .archive-strip.is-open > .archive-strip-body {
    grid-row: 1;
    height: 100%;
    overflow-y: auto;
    border: 0;
    background: #fff;
  }
  .archive-strip.is-open > .archive-strip-body .rail-panel { padding: 26px 20px 24px; }

  body.archive-collapsed .archive-strip:not(.is-open) { display: none; }
  body.archive-collapsed .archive-shell {
    border: 0;
    background: transparent !important;
    transition-property: width;
  }
  body.archive-collapsed .archive-contents {
    align-items: flex-start;
    background: transparent;
  }
  body.archive-collapsed .archive-strip.is-open {
    position: static;
    order: initial;
    display: block;
    width: 54px;
    height: 160px !important;
    min-height: 160px;
    max-height: 160px;
    flex: 0 0 160px !important;
    overflow: visible;
    border: 0;
    background: transparent !important;
    transition: none !important;
  }
  body.archive-collapsed .archive-strip.is-open > .archive-strip-trigger {
    position: static;
    width: 54px;
    height: 160px;
    display: flex;
    padding: 8px 4px;
    border: 1px solid #dededb;
    border-left: 0;
    border-radius: 0 7px 7px 0;
    background: #fff !important;
    color: #202124;
    box-shadow: none;
    transition: none;
  }
  body.archive-collapsed .archive-strip.is-open > .archive-strip-trigger .rail-label {
    max-height: 110px;
    color: #202124;
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    font-size: 1rem;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
  }
}

.item-photo .pipeline-generation-badge { display:none!important; }
.item-photo.loading { opacity:1!important;filter:none!important; }
.item-photo.loading::before,
.item-photo.loading::after { content:none!important;display:none!important; }
.pipeline-retry-button {
  min-height: 30px;
  margin-top: 7px;
  padding: 0 10px;
  border: 1px solid #deddd8;
  border-radius: 5px;
  background: #fff;
  color: var(--machine-ink);
  cursor: pointer;
  font: 650 9px/1 var(--body);
}
.pipeline-retry-button:hover { background: #f4f3ef; }

/* FlowJam-native custom colour picker: compact, embedded, and clearly a colourful + action. */
.inspector-color-head { margin-bottom: 8px; }
.inspector-custom-trigger {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50%;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
}
.inspector-rainbow-plus {
  position: relative;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 0;
  border-radius: 50%;
  background: conic-gradient(#f05d5e,#f6b73c,#78bc61,#47b8bd,#557fd1,#a86bc0,#f05d5e);
  color: #fff;
  text-shadow: 0 1px 2px rgba(32,30,27,.28);
  font: 600 17px/1 var(--body);
}
.inspector-custom-trigger:hover .inspector-rainbow-plus,
.inspector-custom-trigger[aria-expanded="true"] .inspector-rainbow-plus {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(45,43,38,.12);
}
.inspector-custom-trigger:focus-visible { outline: 2px solid rgba(189,123,18,.5); outline-offset: 2px; }
.inspector-inline-palette {
  display: grid;
  grid-template-columns: 58px minmax(0,1fr);
  align-items: center;
  gap: 9px 10px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #e8e6df;
  border-radius: 9px;
  background: #faf9f5;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.inspector-inline-palette[hidden] { display: none !important; }
.inspector-inline-palette > label {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  gap: 4px;
  color: #77746d;
  font: 650 7px/1 var(--body);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.inspector-inline-palette > label input {
  width: 58px !important;
  height: 29px !important;
  box-sizing: border-box;
  padding: 0 6px !important;
  border: 1px solid #dedbd2 !important;
  border-radius: 5px !important;
  background: #fff !important;
  color: #34332f;
  font: 600 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace !important;
  text-transform: uppercase;
}
.inspector-inline-palette > label input.is-invalid { border-color: #b84f42 !important; background: #fff5f2 !important; }
.inspector-hue-strip {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: linear-gradient(90deg,#f15b64,#f2b44a,#efe75a,#71c878,#50c4bd,#5685db,#a66ccc,#f15b64);
  box-shadow: 0 0 0 1px #dedbd2;
  cursor: ew-resize;
  touch-action: none;
}
.inspector-hue-strip > span {
  position: absolute;
  left: var(--hue-x,0%);
  top: 50%;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 0 1px rgba(37,35,31,.48),0 1px 3px rgba(37,35,31,.18);
  transform: translate(-50%,-50%);
  pointer-events: none;
}
.inspector-hue-strip:focus-visible { outline: 2px solid rgba(189,123,18,.42); outline-offset: 3px; }
.inspector-tone-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(6,1fr);
  gap: 7px;
}
.inspector-tone {
  height: 27px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 6px;
  background: var(--swatch);
  box-shadow: 0 0 0 1px #d8d5cd,0 2px 4px rgba(45,43,38,.07);
  cursor: pointer;
}
.inspector-tone:hover { transform: translateY(-1px); }
.inspector-tone:focus-visible { outline: 2px solid #5b5c57; outline-offset: 2px; }

/* The older generic inspector label rule is intentionally less specific.
   Keep the custom colour label and its hex value inside their own grid cell. */
.item-inspector-colors .inspector-inline-palette > label {
  width: 58px;
  display: grid;
  align-items: stretch;
  gap: 4px;
}
.item-inspector-colors .inspector-inline-palette > label input { width: 58px !important; }

.item-inspector-text-field { display: grid; gap: 6px; }
.item-inspector-text-field[hidden] { display: none !important; }
.item-inspector-text-field > span { color: #6d6b64; font: 650 8px/1 var(--body); letter-spacing: .07em; text-transform: uppercase; }
.item-inspector-text-field input {
  width: 100%; height: 34px; box-sizing: border-box; padding: 0 9px;
  border: 1px solid #e1dfd8; border-radius: 6px; background: #fff; color: #292824; font: 500 11px/1 var(--body);
}
.item-inspector-text-field input:focus { border-color: #bd7b12; outline: 2px solid rgba(230,154,25,.15); }
/* Edit colours fill the row and Custom is the last chip. */
.inspector-color-head { justify-content: flex-start; margin-bottom: 8px; }
.inspector-color-reference {
  width: 100%;
  display: grid !important;
  grid-template-columns: repeat(7,minmax(0,1fr)) !important;
  align-items: center;
  gap: 7px !important;
}
.inspector-color-reference > .inspector-colour-swatch,
.inspector-color-reference > .inspector-custom-trigger {
  width: 100% !important;
  height: auto !important;
  min-width: 0;
  aspect-ratio: 1;
  place-self: stretch;
}
.inspector-color-reference > .inspector-custom-trigger { order: 99; }
.inspector-color-reference .inspector-rainbow-plus {
  width: 100%;
  height: 100%;
  min-width: 0;
  font-size: 17px;
}

/* Compact desktop console: reduce chrome while keeping every Studio surface aligned. */
@media (min-width: 761px) {
  :root { --studio-topbar-height: 62px; }
  body:not(.home-open) .topbar {
    height: var(--studio-topbar-height) !important;
    min-height: var(--studio-topbar-height) !important;
    padding-block: 7px !important;
  }
  body:not(.home-open) .topbar .brand { height: 36px !important; }
  body:not(.home-open) .topbar .brand-mark { width: 30px !important; height: 30px !important; }
  body:not(.home-open) .topbar .brand-word { font-size: 1.18rem !important; }
  body:not(.home-open) .topbar .board-title { padding-block: 5px !important; }
  body:not(.home-open) .studio-canvas-choice { top: 12px !important; height: 36px !important; padding: 3px !important; }
  body:not(.home-open) .studio-canvas-choice button { height: 28px !important; }
  body:not(.home-open) .topbar-studio-tools { height: var(--studio-topbar-height) !important; }
  body:not(.home-open) .topbar .machine-top-transport { height: 38px !important; min-height: 38px !important; }
  body:not(.home-open) .topbar .machine-top-transport .tbtn,
  body:not(.home-open) .topbar .machine-top-transport #playPause { height: 30px !important; }
  body:not(.home-open) .topbar .performance-rail { height: 38px !important; min-height: 38px !important; padding-block: 2px !important; }
  body:not(.home-open) .topbar .performance-rail .rail-tool-btn,
  body:not(.home-open) .topbar .performance-rail .rail-tool-btn[data-tool="dj"] { height: 32px !important; }
  body:not(.home-open) .topbar .topbar-surprise { top: 10px !important; width: 40px !important; height: 40px !important; }
  body:not(.home-open) .stage { top: auto !important; height: calc(100dvh - var(--studio-topbar-height)) !important; }
  body:not(.home-open) .board-wrap,
  body.records-open:not(.home-open) .board-wrap { inset: var(--studio-topbar-height) 0 0 !important; }
  .source-toolbar,
  body.archive-collapsed .source-toolbar,
  body:not(.archive-collapsed) .source-toolbar {
    top: calc(50% + (var(--studio-topbar-height) / 2)) !important;
  }
  #archiveShell,
  body.archive-collapsed #archiveShell,
  body:not(.archive-collapsed) #archiveShell {
    top: calc(50% + (var(--studio-topbar-height) / 2)) !important;
  }
  #photoInspector.photo-inspector,
  body.records-open.photo-inspector-open #photoInspector.photo-inspector { top: var(--studio-topbar-height) !important; }
  #photoInspector .photo-inspector-card,
  body.records-open.photo-inspector-open #photoInspector .photo-inspector-card {
    max-height: calc(100dvh - var(--studio-topbar-height) - var(--utility-panel-height) - var(--utility-panel-gap)) !important;
  }
  .cam-legend { --cam-guide-top: 74px; }
  body.mode-keys .dock:not(.is-positioned) { top: 74px !important; }
}

/* Quiet customization surfaces inspired by Notion and Vercel. */
.base-template-tabs {
  gap: 18px !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #ecebe6 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.base-template-tabs button {
  min-height: 34px !important;
  padding: 0 2px !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.base-template-tabs button.on {
  border-bottom-color: var(--machine-accent) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.appearance-reference-swatches {
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  gap: 14px 8px !important;
  margin-top: 8px !important;
  padding: 4px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.appearance-reference-swatches .appearance-swatch {
  min-height: 70px !important;
  gap: 7px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.appearance-reference-swatches .appearance-swatch::before {
  width: 50px !important;
  height: 50px !important;
  border: 1px solid rgba(38,39,42,.2) !important;
  outline: 0 !important;
  background: var(--swatch) !important;
  box-shadow: none !important;
  transition: transform .16s ease, box-shadow .16s ease;
}
.appearance-reference-swatches .appearance-swatch:hover::before { transform: scale(1.035); }
.appearance-reference-swatches .appearance-swatch.on::before {
  outline: 0 !important;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--machine-accent) !important;
}
.appearance-reference-swatches .appearance-swatch > span { font-size: 9px !important; }

@media (min-width: 761px) {
  body:not(.archive-collapsed) .source-toolbar {
    grid-template-rows: 42px !important;
    align-items: start !important;
    padding: 5px 6px 13px !important;
  }
  body:not(.archive-collapsed) .source-tool,
  body:not(.archive-collapsed) .source-tool:hover,
  body:not(.archive-collapsed) .source-tool:focus-visible,
  body:not(.archive-collapsed) .source-tool.on { align-self: start !important; }
  #archiveShell > #archiveGridClose {
    right: 0 !important;
    width: 24px !important;
    height: 44px !important;
    border: 0 !important;
    border-left: 1px solid #efeee9 !important;
    border-radius: 5px 0 0 5px !important;
    background: rgba(255,255,255,.74) !important;
    color: var(--machine-muted) !important;
    opacity: .42;
    box-shadow: none !important;
  }
  #archiveShell > #archiveGridClose:hover,
  #archiveShell > #archiveGridClose:focus-visible {
    background: #f8f8f5 !important;
    color: var(--machine-ink) !important;
    opacity: 1;
  }

  body:not(.home-open) .topbar { position: relative; }
  body:not(.home-open) .topbar-studio-tools {
    position: absolute !important;
    z-index: 4;
    inset: 0 !important;
    width: 100% !important;
    height: 78px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    pointer-events: none;
  }
  .topbar .machine-top-transport {
    order: 1;
    width: 182px !important;
    flex: 0 0 182px !important;
    padding: 0 8px 0 0 !important;
    border: 0 !important;
    border-right: 1px solid #ecebe6 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: auto;
  }
  .topbar .performance-rail {
    order: 2;
    width: auto !important;
    min-width: 0 !important;
    height: 44px !important;
    padding: 4px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: auto;
  }
  .topbar .topbar-surprise {
    position: absolute !important;
    top: 17px !important;
    right: 18px !important;
    left: auto !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    pointer-events: auto;
  }
  .topbar .engine-status,
  body.records-open .topbar .engine-status {
    position: absolute !important;
    top: 50% !important;
    right: 76px !important;
    width: auto !important;
    max-width: 250px !important;
    padding: 0 !important;
    transform: translateY(-50%) !important;
    pointer-events: none;
  }
}
@media (min-width: 761px) and (max-width: 1120px) {
  .topbar .engine-status,
  body.records-open .topbar .engine-status { display: none !important; }
}

/* Lighter CD tray: keep the optical-disc cues, soften the hardware beneath. */
.turntable-plinth {
  border: 1px solid #f0efeb !important;
  background: #f8f8f5 !important;
  background-image: none !important;
  box-shadow: none !important;
}
.board,
body.archive-collapsed .board,
html[data-cd-finish] .board,
html[data-cd-finish] body.archive-collapsed .board {
  border-color: #b8bdc0 !important;
  background: #e6e9eb !important;
  box-shadow:
    0 0 0 2px #dfe1dd,
    0 1px 3px rgba(35,39,44,.08),
    inset 0 0 0 1px rgba(255,255,255,.38) !important;
}
.board::after,
html[data-cd-finish] .board::after {
  border-color: rgba(255,255,255,.6) !important;
  box-shadow: inset 0 0 0 1px rgba(51,54,51,.06) !important;
}

/* Flat mini-CD presets and a single compact custom hue wheel. */
.appearance-reference-swatches .disc-swatch::before {
  background:
    radial-gradient(circle, #fff 0 5px, #ccd2d6 5.5px 8px, transparent 8.5px),
    var(--swatch) !important;
}
.appearance-custom-choice {
  position: relative;
  min-width: 0;
}
.appearance-reference-swatches .appearance-custom-trigger {
  position: relative;
  width: 100%;
  min-height: 70px !important;
}
.appearance-reference-swatches .appearance-custom-trigger::before {
  background:
    radial-gradient(circle, #fff 0 5px, #ccd2d6 5.5px 8px, transparent 8.5px),
    conic-gradient(#ef5b62, #f1a72c, #f0d64a, #69b878, #50afd2, #716fce, #c868bd, #ef5b62) !important;
}
.appearance-custom-trigger b {
  position: absolute;
  z-index: 2;
  top: 25px;
  left: 50%;
  color: #393a36;
  font: 500 13px/1 var(--body);
  transform: translate(-50%,-50%);
  pointer-events: none;
}
#appearanceMorePalette.appearance-custom-editor {
  position: absolute;
  z-index: 40;
  left: 0;
  bottom: 72px;
  width: 120px;
  height: 120px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid #e7e6e1;
  border-radius: 8px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 8px 24px rgba(42,40,35,.12);
}
#appearanceMorePalette[hidden] { display: none !important; }
.disc-hue-wheel {
  --hue: 334deg;
  --custom-colour: #F58DB7;
  position: relative;
  width: 102px;
  height: 102px;
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff 0 31px, transparent 32px),
    conic-gradient(from 0deg, #f44, #ffb52d, #f3ec46, #58c875, #42b9d5, #5f75e8, #be5dd8, #f44);
  cursor: crosshair;
  outline: 0;
  touch-action: none;
}
.disc-hue-wheel:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--machine-accent); }
.disc-hue-wheel-handle {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  border: 2px solid #fff;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 0 1px rgba(35,36,33,.55);
  transform: translate(-50%,-50%) rotate(var(--hue)) translateY(-43px);
  pointer-events: none;
}
.disc-hue-wheel-center {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(38,39,42,.18);
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff 0 5px, #ccd2d6 5.5px 8px, transparent 8.5px),
    var(--custom-colour);
  transform: translate(-50%,-50%);
  pointer-events: none;
}

/* Playback remains centered, with just enough surface to read as one control. */
@media (min-width: 761px) {
  .topbar .machine-top-transport {
    width: 190px !important;
    flex: 0 0 190px !important;
    padding: 5px !important;
    border: 1px solid #e7e6e1 !important;
    border-radius: 7px !important;
    background: #f8f8f5 !important;
    box-shadow: none !important;
  }
  .topbar .machine-top-transport #playPause {
    border: 1px solid #deddd8 !important;
    border-radius: 5px !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  .topbar .machine-top-transport .tbtn:not(#playPause) { border-radius: 4px !important; }
}

/* Keys is an invisible input layer: computer keys + MIDI, no layout change. */
body.mode-keys .dock,
body.mode-keys .dock-keys { display: none !important; }
.dock,
.dock-keys { display: none !important; }
body.mode-keys .board-wrap,
body.mode-keys.archive-collapsed .board-wrap,
body.mode-keys.records-open .board-wrap,
body.mode-keys.photo-inspector-open .board-wrap {
  padding-bottom: 0 !important;
}
body.mode-keys .board,
body.mode-keys.archive-collapsed .board,
body.mode-keys.records-open .board,
body.mode-keys.photo-inspector-open .board {
  width: var(--flowjam-disc-size) !important;
}
body.mode-keys .turntable-plinth,
body.mode-keys.archive-collapsed .turntable-plinth,
body.mode-keys.records-open .turntable-plinth,
body.mode-keys.photo-inspector-open .turntable-plinth {
  transform: none !important;
}

/* Compact collage controls and continuous archive folders. */
.item-transform-controls {
  inset: 0;
  border: 0;
}
.item-transform-handle,
.item .remove {
  width: 20px;
  height: 20px;
  min-width: 20px;
  padding: 0;
  border: 0 !important;
  border-radius: 50%;
  background: rgba(255,254,250,.96) !important;
  box-shadow: 0 2px 6px rgba(42,40,35,.16) !important;
  font-size: 11px;
}
.item-rotate-handle { top: -25px; left: 50%; transform: translateX(-50%); }
.item-scale-handle { right: -25px; bottom: 50%; transform: translateY(50%); }
.item .remove { top: -25px; right: -25px; }
.item-size-readout { display: none !important; }

@media (min-width: 761px) {
  .source-toolbar,
  body:not(.archive-collapsed) .source-toolbar,
  .archive-shell,
  body:not(.archive-collapsed) .archive-shell {
    background: linear-gradient(90deg, #f1efe8, #ebe8df) !important;
  }
  .source-toolbar {
    box-shadow: inset 1px 0 0 rgba(255,255,255,.72) !important;
  }
  body:not(.archive-collapsed) .archive-shell {
    box-shadow: none !important;
  }
  .source-tool,
  .source-tool + .source-tool,
  .source-tool:hover,
  .source-tool.on {
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }
  .source-tool.on { opacity: 1; }
  .source-tool:not(.on) { opacity: .58; }
  .source-toolbar.gsap-dock .tool-object {
    will-change: transform, opacity;
  }
}


/* Inspector separates visual interpretation from the editable music direction. */
.photo-reading-card {
  padding: 11px 0 12px;
  border-top: 1px solid #ecebe6;
  border-bottom: 1px solid #ecebe6;
}
.photo-reading-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.photo-reading-head > span,
.photo-sound-label label {
  color: var(--machine-ink);
  font: 700 10px/1.2 var(--body);
}
.photo-reading-head small {
  color: var(--machine-muted);
  font: 500 8px/1.2 var(--body);
  text-align: right;
}
#photoInspectorScene {
  margin: 8px 0 0;
  color: #62635e;
  font: 500 11px/1.45 var(--body);
}
.photo-inspector-fields textarea {
  min-height: 92px;
  resize: vertical;
}
.inspector-color-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.inspector-custom-colour {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--machine-muted);
  font: 600 8px/1 var(--body);
  cursor: pointer;
}
.inspector-custom-colour input[type="color"] {
  width: 22px;
  height: 22px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.inspector-custom-colour input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.inspector-custom-colour input[type="color"]::-webkit-color-swatch {
  border: 1px solid rgba(62,62,56,.18);
  border-radius: 50%;
}
.inspector-color-reference,
.inspector-color-more {
  gap: 7px;
}
.photo-inspector[data-kind="photo"] .item-inspector-colors:not([hidden]) {
  display: grid;
  margin-bottom: 14px;
}
.photo-inspector[data-kind="photo"] .item-inspector-common { gap: 12px; }
.inspector-color-head [data-inspector-color-toggle],
.inspector-custom-colour { font-size: 9px !important; }

/* Torn tape lives behind the note so its transform controls are never clipped. */
.item-note.text-tape {
  position: absolute;
  isolation: isolate;
  overflow: visible !important;
  padding: 10px 18px;
  border-radius: 0 !important;
  background: transparent !important;
  clip-path: none !important;
}
.item-note.text-tape::before,
.item-note.text-tape::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  clip-path: var(--tape-clip, polygon(2% 4%, 98% 0, 96% 96%, 1% 100%));
}
.item-note.text-tape::before {
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(255,255,255,.26), transparent 12%, transparent 88%, rgba(88,66,31,.07)),
    color-mix(in srgb, var(--item-fill) 88%, transparent 12%);
  filter: drop-shadow(0 2px 2px rgba(42,38,30,.14));
}
.item-note.text-tape::after {
  z-index: -1;
  opacity: .44;
  background:
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(255,255,255,.16) 5px 6px),
    linear-gradient(90deg, rgba(255,255,255,.35), transparent 5% 95%, rgba(79,58,24,.1));
  mix-blend-mode: soft-light;
}
.item-note.text-tape.is-selected {
  z-index: 40 !important;
  overflow: visible !important;
}
.item-note.text-tape .item-transform-controls {
  z-index: 30;
  inset: 0;
  overflow: visible;
}
.item-note.text-tape.is-selected .item-transform-controls {
  opacity: 1;
  visibility: visible;
}
.item-note.text-tape.is-selected .remove {
  z-index: 33;
  top: -27px;
  right: -12px;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto;
}
.item-note.text-tape .item-rotate-handle {
  z-index: 32;
  top: -27px;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translateX(-50%) !important;
}
.item-note.text-tape .item-scale-nw {
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  transform: translate(-50%,-50%) !important;
}
.item-note.text-tape .item-scale-ne {
  top: 0;
  right: 0;
  left: auto;
  bottom: auto;
  transform: translate(50%,-50%) !important;
}
.item-note.text-tape .item-scale-se {
  right: 0;
  bottom: 0;
  left: auto;
  top: auto;
  transform: translate(50%,50%) !important;
}
.item-note.text-tape .item-scale-sw {
  bottom: 0;
  left: 0;
  right: auto;
  top: auto;
  transform: translate(-50%,50%) !important;
}
.item-note.text-tape .item-transform-handle { pointer-events: auto; }

/* Camera DJ keeps one stage presentation: full camera plus a reflective disc. */
.topbar .performance-rail { position: relative; overflow: visible; }
.cam-cutout {
  position: absolute;
  z-index: 2;
  inset: 1.2%;
  width: 97.6%;
  height: 97.6%;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
  -webkit-mask: radial-gradient(circle, transparent 0 10.5%, #000 11.5% 96%, transparent 97%);
  mask: radial-gradient(circle, transparent 0 10.5%, #000 11.5% 96%, transparent 97%);
}
.board.cam-on.cam-mode-disc .cam-feed { opacity: 0 !important; }
.board.cam-on.cam-mode-disc .cam-cutout { opacity: .96 !important; }
.board.cam-on.cam-mode-disc .disc-surface { filter: saturate(.86) brightness(.94); }
.board.cam-on.cam-mode-disc.scratching .disc-surface { filter: saturate(1.08) brightness(1.04); }
.disc-mirror-face::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 3%;
  border-radius: 50%;
  opacity: 0;
  background:
    repeating-radial-gradient(circle, transparent 0 8px, rgba(255,255,255,.34) 8.5px 9px, transparent 9.5px 15px),
    conic-gradient(from 20deg, transparent 0 14%, rgba(255,255,255,.46) 16%, transparent 18% 52%, rgba(255,255,255,.26) 54%, transparent 56% 100%);
  mix-blend-mode: soft-light;
  pointer-events: none;
  transition: opacity .08s linear;
}
.board.cam-on.cam-mode-disc.scratching .disc-mirror-face::after {
  opacity: max(.18, var(--scratch-energy, 0));
  animation: vinyl-scratch-flash .16s steps(2,end) infinite alternate;
}
@keyframes vinyl-scratch-flash {
  from { transform: rotate(-1.5deg) scale(.995); }
  to { transform: rotate(1.5deg) scale(1.005); }
}

/* Guide is a right-side utility, positioned from live board/panel bounds. */
.cam-legend {
  position: fixed !important;
  z-index: 64 !important;
  left: auto !important;
  top: var(--cam-guide-top, 96px) !important;
  right: var(--cam-guide-right, 18px) !important;
  bottom: auto !important;
  width: var(--cam-guide-width, 270px) !important;
  max-width: none !important;
  border: 1px solid #e4e3dd;
  border-radius: 7px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 10px 24px rgba(40,38,33,.1);
  backdrop-filter: blur(10px);
}
.cam-legend.collapsed { width: min(170px, var(--cam-guide-width, 270px)) !important; }
.cam-legend-toggle { cursor: default; }
.cam-legend-toggle:hover { background: transparent; }
.cam-legend.is-compact .cam-legend-list { padding-inline: 7px; }
.cam-legend.is-compact .cam-legend-toggle { min-height: 30px; padding-block: 4px; }
.cam-legend.is-compact .cam-legend-list { gap: 2px; padding: 4px 7px 6px; }
.cam-legend.is-compact .dj-row { font-size: 8.5px; line-height: 1.05; }
body.records-open.photo-inspector-open .cam-legend .cam-legend-toggle { min-height: 30px; padding-block: 4px; }
body.records-open.photo-inspector-open .cam-legend .cam-legend-list { gap: 2px; padding: 4px 7px 6px; }
body.records-open.photo-inspector-open .cam-legend .dj-row { font-size: 8.5px; line-height: 1.05; }

/* Photo editing is a compact, editable Image reading -> Music prompt flow. */
.photo-inspector[data-kind="photo"] .photo-inspector-layout { display: block; }
.photo-inspector[data-kind="photo"] .photo-inspector-fields {
  display: grid;
  gap: 8px;
}
.photo-reading-card {
  padding: 10px 0 0;
  border-top: 1px solid #ecebe6;
  border-bottom: 0;
}
#photoInspectorScene.photo-reading-input {
  width: 100%;
  min-height: 58px !important;
  max-height: 112px;
  box-sizing: border-box;
  margin: 8px 0 0;
  padding: 9px 10px;
  border: 1px solid #e0ded6;
  border-radius: 6px;
  background: #fff;
  box-shadow: inset 0 1px 3px rgba(57,55,49,.05);
  color: var(--machine-ink);
  font: 500 11px/1.4 var(--body);
  resize: vertical;
}
.photo-map-arrow {
  height: 24px;
  display: grid;
  place-items: center;
  color: #8c8b84;
}
.photo-map-arrow span {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f1f0eb;
  font: 600 14px/1 sans-serif;
}
#photoInspectorPrompt {
  width: 100%;
  height: 72px !important;
  min-height: 72px !important;
  max-height: 112px;
  padding: 9px 10px;
  font-size: 12px;
  line-height: 1.4;
  resize: vertical;
}
body.music-director-unavailable #engineStatus { color: #9a593d; }
.inspector-color-reference {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px 5px;
  scrollbar-width: thin;
}
.inspector-color-reference > .inspector-colour-swatch,
.inspector-color-reference > .inspector-custom-colour {
  flex: 0 0 auto;
}
.inspector-color-more {
  display: grid;
  grid-template-columns: repeat(5, 26px);
  gap: 7px;
}

/* Saved boards remain below the untouched home cover in one horizontal file strip. */
body.home-open #homeArchive {
  width: min(1180px, calc(100% - 64px));
  margin: 34px auto 78px;
  padding: 26px 0 0;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 12px 18px;
  border-top: 1px solid #ecebe6;
}
body.home-open #boardCount,
body.home-open #creationCount {
  color: var(--machine-ink);
  font: 700 14px/1.2 var(--body);
}
body.home-open #newBoardBtn {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--machine-ink);
  font: 650 10px/1 var(--body);
  cursor: pointer;
}
body.home-open #newBoardBtn::before { content: "+ "; color: var(--machine-accent); }
body.home-open #boardsGrid,
body.home-open #creationsGrid {
  grid-column: 1 / -1;
  display: flex;
  gap: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 16px 4px 24px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: rgba(90,88,80,.18) transparent;
}
body.home-open #boardsGrid .board-file {
  flex: 0 0 280px;
  scroll-snap-align: start;
}
body.home-open #creationCount { grid-column: 1 / -1; margin-top: 22px; }
body.home-open #homeArchive:not(:has(#creationsGrid > *)) #creationCount,
body.home-open #homeArchive:not(:has(#creationsGrid > *)) #creationsGrid,
body.home-open #homeArchive:not(:has(#creationsGrid > *)) #creationsEmpty { display: none !important; }
body.home-open #boardsEmpty,
body.home-open #creationsEmpty { grid-column: 1 / -1; }

.sticker:focus-visible,
.instrument:focus-visible,
.doodle:focus-visible,
#photoTray .thumb:focus-visible {
  outline: 2px solid #73746f;
  outline-offset: 3px;
}

/* Camera DJ spatial model: full-stage camera or a flipped mirror-side CD. */
.stage > .stage-camera {
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  object-fit: cover;
  transform: scaleX(-1);
  opacity: 0 !important;
  filter: saturate(.96) contrast(1.01) brightness(.98);
  pointer-events: none;
  transition: opacity .38s ease !important;
}
.stage > .stage-hand-fx {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  pointer-events: none;
}
body.mode-dj .stage > .stage-hand-fx { display: block; }
.stage > .board-wrap { z-index: 2; }
body.mode-dj.cam-mode-disc .stage > .stage-camera { opacity: 1 !important; }
body.mode-dj.cam-mode-disc .stage {
  background: #d9dedc !important;
  box-shadow: none !important;
}
body.mode-dj.cam-mode-disc .turntable-plinth,
body.mode-dj.cam-mode-disc .board::before { opacity: 0 !important; }
body.mode-dj.cam-mode-disc .board,
html[data-cd-finish] body.mode-dj.cam-mode-disc .board {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}
.board { perspective: 1200px; }
.disc-flip {
  position: absolute;
  z-index: 2;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition: transform .62s cubic-bezier(.2,.78,.18,1);
  pointer-events: none;
}
.disc-item-layer {
  position: absolute;
  z-index: 5;
  inset: 0;
  border-radius: 50%;
  transform: rotate(calc(var(--disc-angle, 0deg) + var(--scratch-angle, 0deg)));
  transform-origin: 50% 50%;
  pointer-events: none;
}
.disc-item-layer > .item { pointer-events: auto; }
.disc-spinning .disc-item-layer { will-change: transform; }
.disc-front-face,
.disc-mirror-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
}
.disc-front-face { transform: rotate(var(--disc-angle,0deg)); }
.disc-mirror-face {
  z-index: 2;
  overflow: hidden;
  transform: rotateY(180deg);
  border: 1px solid rgba(64,72,78,.38);
  background:
    radial-gradient(circle at 38% 28%, rgba(255,255,255,.94), rgba(224,232,234,.42) 27%, transparent 48%),
    conic-gradient(from 215deg, #d5dde0, #f8fbfb 12%, #aebdc2 26%, #edf3f4 39%, #9dabb0 53%, #f8fafa 67%, #bec9cc 81%, #e9eff0);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.34), 0 8px 24px rgba(35,40,44,.16);
  pointer-events: none;
}
.disc-mirror-surface {
  position: absolute;
  z-index: 3;
  inset: 0;
  overflow: hidden;
  border-radius: 50%;
  -webkit-clip-path: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%);
  background:
    radial-gradient(circle, rgba(255,255,255,.08) 0 9%, rgba(52,60,64,.18) 9.4% 10.2%, transparent 10.7%),
    repeating-radial-gradient(circle, transparent 0 5px, rgba(44,53,57,.075) 5.4px 5.8px, rgba(255,255,255,.09) 6.1px 6.4px, transparent 6.8px 11px),
    conic-gradient(from 18deg, transparent 0 10%, rgba(111,218,233,.2) 14%, transparent 20% 43%, rgba(247,119,186,.15) 49%, transparent 57% 76%, rgba(249,221,112,.14) 81%, transparent 87%);
  mix-blend-mode: screen;
  transform: rotate(calc(var(--disc-angle,0deg) + var(--scratch-angle,0deg)));
  will-change: transform;
  pointer-events: none;
}
.disc-mirror-surface::before,
.disc-mirror-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}
.disc-mirror-surface::before {
  background:
    conic-gradient(from 224deg, transparent 0 7%, rgba(132,228,244,.2) 10%, transparent 15% 34%, rgba(255,157,206,.16) 38%, transparent 43% 65%, rgba(255,231,138,.15) 70%, transparent 76%),
    radial-gradient(circle at 34% 23%, rgba(255,255,255,.5), transparent 24%);
  mix-blend-mode: color-dodge;
  opacity: .72;
}
.disc-mirror-surface::after {
  inset: 1.5%;
  border: 1px solid rgba(255,255,255,.34);
  box-shadow: inset 0 0 34px rgba(39,48,53,.16), inset 0 0 0 1px rgba(49,58,62,.12);
}
.disc-mirror-face .cam-cutout {
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -webkit-mask: none;
  mask: none;
  transform: none;
  filter: contrast(1.035) saturate(.88) brightness(1.035);
}
.disc-mirror-center {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 50%;
  width: 5%;
  aspect-ratio: 1;
  border: 1px solid rgba(55,63,67,.24);
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  box-shadow: 0 0 0 3px rgba(255,255,255,.1);
  transform: translate(-50%,-50%);
  pointer-events: none;
}
body.mode-dj.cam-mode-disc .disc-flip { transform: rotateY(180deg); }
body.mode-dj.cam-mode-disc .disc-front-face { pointer-events: none; }
.disc-center,
html[data-cd-finish="solid"] .disc-center {
  width: 15% !important;
  height: 15% !important;
}
.disc-hole,
html[data-cd-finish="solid"] .disc-hole {
  width: 32% !important;
  height: 32% !important;
}

@media (min-width: 761px) {
  body.mode-dj .board-wrap,
  body.mode-dj.archive-collapsed .board-wrap,
  body.mode-dj:not(.archive-collapsed) .board-wrap {
    --flowjam-disc-size: max(220px, min(calc(100dvh - 140px), calc(100vw - 340px))) !important;
    box-sizing: border-box;
    padding-right: 300px !important;
  }
  body.mode-dj .board,
  html[data-cd-finish] body.mode-dj .board {
    width: var(--flowjam-disc-size) !important;
    transition: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .disc-flip { transition-duration: .01ms; }
}
body.records-open .cam-legend,
body:has(.records-drawer-shell.open) .cam-legend,
body.photo-inspector-open .cam-legend {
  opacity: 1 !important;
  pointer-events: auto !important;
}
@media (min-width: 761px) {
  body.mode-dj .board-wrap {
    box-sizing: border-box;
    padding-right: 220px !important;
    transition: padding-right .32s cubic-bezier(.2,.78,.18,1);
  }
}

/* Dragging highlights the drop boundary without repainting the CD surface. */
.board.dragover,
html[data-cd-finish] .board.dragover,
body.archive-collapsed .board.dragover,
html[data-cd-finish] body.archive-collapsed .board.dragover {
  background: #e6e9eb !important;
  box-shadow:
    0 0 0 2px #dfe1dd,
    0 1px 3px rgba(35,39,44,.08),
    inset 0 0 0 1px rgba(255,255,255,.38) !important;
}
.board.dragover .disc-surface {
  filter: none !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.14),
    inset 0 0 0 2px rgba(62,62,56,.16) !important;
}

/* The transport stays open and legible; only a short rule separates performance inputs. */
@media (min-width: 761px) {
  .topbar .machine-top-transport {
    position: relative !important;
    border-right: 0 !important;
    padding-right: 14px !important;
  }
  .topbar .machine-top-transport::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 1px;
    height: 24px;
    background: #deddd8;
    transform: translateY(-50%);
  }
  .topbar .machine-top-transport #playPause,
  body.transport-playing .topbar .machine-top-transport #playPause {
    border: 0 !important;
    border-radius: 5px !important;
    background: transparent !important;
    color: var(--machine-ink) !important;
    box-shadow: none !important;
    font-size: 15px !important;
    line-height: 1 !important;
  }
  .topbar .machine-top-transport #playPause:hover { background: #f1f0eb !important; }
  .topbar .machine-top-transport #playPause::before,
  body.transport-playing .topbar .machine-top-transport #playPause::before { display: none !important; }
  .topbar .performance-rail .rail-tool-btn[data-tool="dj"] {
    width: 78px !important;
    min-width: 78px !important;
    flex: 0 0 78px !important;
  }
  .topbar .performance-rail .rail-tool-btn[data-tool="dj"] .perform-name {
    overflow: visible !important;
    text-overflow: clip !important;
  }
}

.archive-strip.is-open,
.archive-strip-body,
.archive-strip-body .rail-panel {
  background: var(--surface-high) !important;
}
.archive-strip.is-open,
.archive-strip-body { height: 100%; min-height: 0; }
.archive-strip-body .rail-panel.on {
  min-height: 100%;
  box-sizing: border-box;
}
.archive-strip-body .rail-panel.on::before { display: none; }

#archivePhotos .rail-panel,
#archiveDoodles .rail-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 18px;
  background: var(--surface-high) !important;
}
.photo-drawer-head { align-items: center; }
.photo-head-actions { display: flex; align-items: center; gap: 8px; }
.photo-add-files {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-main);
  box-shadow: 0 2px 6px rgba(50,48,42,.1), inset 0 1px 0 rgba(255,255,255,.85);
  color: var(--machine-ink);
  cursor: pointer;
  font-size: 20px;
}
.photo-instruction { margin: -4px 0 0; }
.photo-polaroid {
  --booth-accent: var(--machine-accent);
  --booth-accent-deep: #bd7b12;
  --booth-ink: var(--machine-ink);
  --booth-muted: var(--machine-muted);
  --booth-paper: var(--machine-panel);
  position: relative;
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 8px 8px 10px;
  border: 1px solid var(--machine-line-soft);
  border-radius: 8px;
  background: var(--machine-panel);
  box-shadow: none;
}
.photo-booth > * { min-width: 0; max-width: 100%; box-sizing: border-box; }
.booth-marquee {
  height: 28px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 7px;
  padding: 0 8px;
  border: 1px solid var(--machine-line-soft);
  border-radius: 3px;
  background: var(--machine-panel);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
  color: var(--booth-ink);
  font: 700 8px/1 var(--body);
  letter-spacing: .08em;
}
.booth-marquee span { color: var(--booth-accent); }
.booth-marquee strong { text-align: center; font-size: 10px; letter-spacing: .04em; }
.booth-marquee i { color: var(--booth-muted); font-size: 7px; font-style: normal; }
.photo-polaroid .snap-stage {
  position: relative;
  isolation: isolate;
  width: auto;
  aspect-ratio: 1;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--machine-line);
  border-radius: 7px;
  background: var(--machine-recess);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.38);
}
.photo-polaroid .snap-stage::after {
  content: "";
  position: absolute;
  z-index: 7;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(62,62,56,.08);
}
.photo-polaroid .snap-stage video { position: relative; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.booth-look {
  position: absolute;
  z-index: 4;
  top: 10px;
  right: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #70b583;
  box-shadow: 0 0 0 3px rgba(251,250,246,.76);
  pointer-events: none;
}
.booth-countdown {
  position: absolute;
  z-index: 8;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--machine-ink);
  background: rgba(251,250,246,.72);
  font: 700 72px/1 var(--display);
  opacity: 0;
  transform: scale(.88);
  transition: opacity .12s ease, transform .18s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}
.photo-booth.counting .booth-countdown { opacity: 1 !important; transform: scale(1) !important; }
.photo-booth.booth-flash .snap-stage::after { animation: booth-flash .22s ease-out; }
@keyframes booth-flash {
  0% { background: rgba(255,255,255,.98); }
  100% { background: rgba(255,255,255,0); }
}
.snap-idle {
  z-index: 5;
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  color: var(--machine-muted);
  background: var(--machine-recess);
}
.snap-idle > svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .68;
}
.photo-polaroid.camera-on .snap-idle { display: none; }
.photo-polaroid .snap-row {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 32px minmax(0,1fr) 32px;
  align-items: center;
  gap: 4px;
  min-height: 52px;
  padding: 0 5px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.photo-polaroid .snap-row::after { content: ""; width: 32px; height: 1px; }
.camera-power,
.photo-polaroid .snap-go {
  min-height: 0;
  padding: 0;
  border: 1px solid var(--machine-line);
  border-radius: 50%;
  background: var(--machine-panel);
  color: var(--booth-ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  cursor: pointer;
}
.photo-booth .camera-power,
.photo-booth .snap-go { min-width: 0; }
.photo-booth .camera-power {
  position: relative;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  justify-self: center;
}
.photo-booth .camera-power-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .82;
}
.photo-polaroid:not(.camera-on) .snap-row { grid-template-columns: 1fr; }
.photo-polaroid:not(.camera-on) .snap-row::after { display: none; }
.photo-polaroid:not(.camera-on) .camera-power {
  width: 44px;
  height: 44px;
  border-color: var(--booth-accent-deep);
  background: var(--booth-accent);
  color: #2d2b25;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32);
}
.photo-polaroid:not(.camera-on) .camera-power-icon { opacity: .94; }
.photo-polaroid:not(.camera-on) .snap-go { display: none; }
.camera-power.on { background: var(--machine-panel); color: var(--machine-muted); }
.camera-power.on::after {
  content: "";
  position: absolute;
  width: 21px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: rotate(-45deg);
}
.photo-polaroid .snap-go:disabled { opacity: .35; cursor: default; }
.photo-polaroid .snap-go:not(:disabled) {
  border-color: rgba(189,123,18,.58);
  background: var(--machine-panel);
  color: var(--booth-accent-deep);
  box-shadow: 0 1px 3px rgba(50,48,42,.1), inset 0 1px 0 rgba(255,255,255,.72);
}
.photo-polaroid .snap-go {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  justify-self: center;
}
.snap-shutter-dot {
  position: relative;
  width: 19px;
  height: 19px;
  flex: none;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: transparent;
  transition: transform .12s ease;
}
.snap-shutter-dot::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: currentColor;
}
.photo-polaroid .snap-go:active .snap-shutter-dot { transform: scale(.82); }
.booth-printer {
  position: relative;
  min-height: 22px;
  padding-top: 4px;
  overflow: hidden;
  transition: min-height 1.9s cubic-bezier(.22,.76,.28,1);
}
.booth-printer.has-print { min-height: 196px; }
.booth-printer-indicator {
  position: absolute;
  z-index: 5;
  top: 9px;
  right: 21px;
  width: 5px;
  height: 5px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}
.booth-printer-indicator span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4e9a61;
  box-shadow: 0 0 0 2px var(--machine-panel);
}
.booth-printer.is-printing .booth-printer-indicator span {
  background: var(--machine-accent);
  animation: booth-printer-led .6s steps(2,end) infinite;
}
@keyframes booth-printer-led { 50% { opacity: .32; } }
.booth-printer-slot {
  position: relative;
  z-index: 4;
  height: 14px;
  margin: 0 10px;
  border: 0;
  border-radius: 7px;
  background: var(--machine-recess);
  box-shadow: inset 0 2px 4px rgba(64,63,58,.12);
}
.booth-printer-slot::after {
  content: "";
  position: absolute;
  inset: 5px 12px 4px;
  border-radius: 3px;
  background: #16191b;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.82);
}
.booth-print-viewport {
  position: absolute;
  z-index: 2;
  top: 11px;
  left: 0;
  right: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
  transition: height 1.9s cubic-bezier(.22,.76,.28,1);
}
.booth-printer.has-print .booth-print-viewport { height: 185px; }
.booth-print-viewport:has(.booth-print.is-draggable) { pointer-events: auto; }
.booth-print {
  position: absolute;
  top: 0;
  left: 50%;
  width: 150px;
  margin: 0;
  padding: 6px 6px 16px;
  box-sizing: border-box;
  border: 1px solid #d8d8d2;
  background: #fffefa;
  box-shadow: 0 8px 16px rgba(35,40,44,.16);
  opacity: 0;
  transform: translate(-50%,-100%);
  transform-origin: top center;
  pointer-events: none;
  user-select: none;
  touch-action: none;
}
.booth-printer.has-print .booth-print {
  opacity: 1;
  transform: translate(-50%,6px);
}
.booth-printer.is-printing .booth-print { animation: booth-print-photo 1.9s cubic-bezier(.22,.76,.28,1) both; }
.booth-print.is-draggable { pointer-events: auto; cursor: grab; }
.booth-print.is-draggable:hover {
  transform: translate(-50%,3px) rotate(-.7deg);
  box-shadow: 0 10px 18px rgba(35,40,44,.22);
}
.booth-print.is-draggable:active { cursor: grabbing; }
.booth-print-image {
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid #e0e0db;
  background: #ecece8;
}
.booth-print-image img { width: 100%; height: 100%; display: block; object-fit: cover; }
@keyframes booth-print-photo {
  0% { opacity: .15; transform: translate(-50%,-100%) scaleY(.96); }
  18% { opacity: 1; }
  74% { transform: translate(-50%,-10%) scaleY(.99); }
  100% { opacity: 1; transform: translate(-50%,6px) scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .booth-printer.is-printing .booth-print { animation-duration: .01ms; }
}
#archivePhotos .crop-pick { margin: 0; }
#archivePhotos .crop-opt.on {
  background: var(--surface-well) !important;
  box-shadow: none !important;
}
#photoTray {
  min-height: 120px;
  flex: 1;
  align-content: start;
  padding: 10px 0 0;
  border: 0;
  background: transparent;
}
#photoTray .tray-empty {
  min-height: 90px;
  display: grid;
  place-items: center;
  margin: 0;
  background: transparent;
  color: var(--machine-muted);
}
#archiveDoodles .deco-tray {
  flex: 1;
  min-height: 0;
  align-content: start;
  grid-auto-rows: minmax(92px, 1fr);
  padding: 4px 0 0;
  background: transparent;
}

.disc-play-btn {
  position: absolute;
  z-index: 18;
  left: 50%;
  top: 50%;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  padding: 0 0 0 3px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,254,250,.94);
  color: var(--machine-accent);
  box-shadow: 0 6px 18px rgba(35,33,29,.2), inset 0 1px 0 #fff;
  transform: translate(-50%, -50%);
  cursor: pointer;
  font: 700 18px/1 var(--body);
}
body.transport-playing .disc-play-btn { padding-left: 0; background: #31322f; color: #fff; }
.topbar .topbar-surprise {
  position: static;
  inset: auto;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 7px;
}
.topbar .topbar-surprise .dice-doodle { width: 21px; height: 21px; }

@media (max-width: 760px) {
  .topbar .machine-top-transport { width: 124px; flex-basis: 124px; }
  .topbar .topbar-surprise { width: 40px; height: 40px; flex-basis: 40px; }
  .disc-play-btn { width: 48px; height: 48px; font-size: 15px; }
}

/* Keys chooses an input; it no longer replaces the disc with a large keyboard. */
.topbar .performance-rail {
  position: relative;
  min-width: 286px;
  flex: 0 0 286px;
  gap: 4px;
  padding-inline: 7px;
}
.topbar .performance-caption {
  max-width: 76px;
  line-height: 1.2;
}
.topbar .performance-rail .rail-tool-btn,
.topbar .performance-rail .rail-tool-btn[data-tool="dj"] {
  flex: 1 1 0;
  min-width: 72px;
  border-radius: 4px;
  background: var(--surface-main);
  color: var(--machine-ink);
}
.topbar .performance-rail .rail-tool-btn[data-tool="dj"].on,
.topbar .performance-rail .rail-tool-btn[data-tool="keys"].on {
  background: #fff7e4;
  color: var(--machine-ink);
  box-shadow: 0 2px 5px rgba(92,68,23,.13), inset 3px 0 0 var(--machine-accent);
}
.keys-choice-popover {
  position: absolute;
  z-index: 120;
  right: 0;
  top: calc(100% + 9px);
  width: 216px;
  display: grid;
  gap: 6px;
  box-sizing: border-box;
  padding: 9px;
  border-radius: 8px;
  background: linear-gradient(150deg, #fffefa, #edeae2);
  box-shadow: 0 14px 30px rgba(45,42,36,.2), inset 0 1px 0 #fff;
}
.keys-choice-popover[hidden] { display: none !important; }
.keys-choice-popover header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 26px;
  padding: 0 3px;
  color: var(--machine-muted);
  font: 700 8px/1 var(--body);
  letter-spacing: .12em;
}
.keys-power-off {
  min-height: 24px;
  border: 0;
  border-radius: 4px;
  background: #dfddd5;
  color: var(--machine-ink);
  cursor: pointer;
  font: 650 8px/1 var(--body);
}
.keys-choice-btn {
  min-height: 48px;
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  border: 0;
  border-radius: 5px;
  background: var(--surface-high);
  color: var(--machine-ink);
  box-shadow: 0 2px 6px rgba(45,42,36,.1), inset 0 1px 0 #fff;
  cursor: pointer;
  text-align: left;
}
.keys-choice-btn span { font: 650 11px/1 var(--body); }
.keys-choice-btn small { color: var(--machine-muted); font: 500 8px/1 var(--body); }
.keys-choice-btn:hover { background: #fff7e4; }
.keys-octave-control {
  display: grid;
  grid-template-columns: 1fr 30px 30px 30px;
  align-items: center;
  gap: 3px;
  min-height: 38px;
  padding: 4px 5px 4px 9px;
  border-radius: 5px;
  background: var(--surface-well);
  box-shadow: inset 0 2px 5px rgba(57,55,49,.1);
  color: var(--machine-muted);
  font: 700 8px/1 var(--body);
  letter-spacing: .1em;
}
.keys-octave-control button,
.keys-octave-control output {
  width: 30px;
  height: 28px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 0;
  border-radius: 3px;
  background: var(--surface-high);
  color: var(--machine-ink);
  box-shadow: 0 1px 3px rgba(45,42,36,.1), inset 0 1px 0 #fff;
  font: 650 11px/1 var(--body);
}
.keys-octave-control button { cursor: pointer; }
body.mode-keys .dock { display: none !important; }
@media (min-width: 761px) {
  body.mode-keys:not(.dock-collapsed) .board-wrap {
    --flowjam-disc-size: max(190px, min(calc(100dvh - 180px), calc(100vw - 134px)));
    padding-bottom: 0;
  }
  body.mode-keys:not(.dock-collapsed):not(.archive-collapsed) .board-wrap,
  body.mode-keys.photo-inspector-open:not(.dock-collapsed) .board-wrap {
    --flowjam-disc-size: max(160px, min(calc(100dvh - 180px), calc(100vw - 176px - var(--machine-bay-size) - var(--machine-bay-size))));
  }
  body.mode-keys:not(.dock-collapsed) .board,
  body.mode-keys.archive-collapsed:not(.dock-collapsed) .board { width: var(--flowjam-disc-size) !important; }
  body.mode-keys:not(.dock-collapsed) .turntable-plinth {
    width: min(calc(var(--flowjam-disc-size) + 46px), calc(100% - 210px));
    height: min(calc(var(--flowjam-disc-size) + 46px), calc(100% - 20px));
    transform: none;
  }
}

/* Creations is a compact lower-right stack, not a full-height column. */
.stage,
body.records-open .stage { --output-width: 0px !important; }
.records-drawer-shell,
body.records-open .records-drawer-shell,
.records-drawer-shell.open,
body.photo-inspector-open .records-drawer-shell,
body.photo-inspector-open .records-drawer-shell.open {
  top: auto !important;
  right: 18px !important;
  bottom: 18px !important;
  width: 190px !important;
  height: 140px !important;
  overflow: visible !important;
  pointer-events: none;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 52;
}
.records-tab,
.records-drawer-shell.open .records-tab {
  position: absolute;
  inset: auto 0 0 auto !important;
  width: 132px !important;
  height: 54px !important;
  min-height: 54px !important;
  grid-template-columns: 34px minmax(0,1fr) 22px;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 8px !important;
  pointer-events: auto;
  z-index: 5;
}
.records-tab-disc,
.records-drawer-shell.open .records-tab-disc { width: 34px; height: 34px; }
.records-tab-label,
.records-drawer-shell.open .records-tab-label {
  writing-mode: initial;
  transform: none;
  font-size: 8px;
  letter-spacing: .08em;
}
.records-drawer,
.records-drawer-shell.open .records-drawer,
body.records-open .records-drawer-shell .records-drawer {
  position: absolute;
  inset: 0 !important;
  width: 190px !important;
  height: 140px !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 0;
  pointer-events: none;
}
.records-drawer-shell.open .records-drawer,
body.records-open .records-drawer-shell .records-drawer { opacity: 1; }
.records-drawer-head,
.records-drawer-note { display: none !important; }
.records-row {
  position: absolute;
  right: 4px;
  bottom: 42px;
  width: 176px;
  height: 96px;
  min-height: 0 !important;
  display: block !important;
  padding: 0 !important;
  overflow: visible !important;
  pointer-events: none;
}
.records-drawer-shell:not(.empty) .creation-mini {
  position: absolute !important;
  left: 102px;
  top: 24px;
  width: 72px !important;
  min-width: 72px !important;
  height: 72px !important;
  min-height: 72px !important;
  display: block !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 3px solid #fffefa !important;
  border-radius: 50% !important;
  background: #d9dde0 !important;
  box-shadow: 0 6px 13px rgba(35,33,29,.18) !important;
  pointer-events: auto;
  transform-origin: 50% 50%;
}
.records-drawer-shell:not(.empty) .creation-mini:nth-child(1) { transform: translate(0,0) rotate(-45deg); z-index: 7; }
.records-drawer-shell:not(.empty) .creation-mini:nth-child(2) { transform: translate(-32px,-10px) rotate(-57deg); z-index: 6; }
.records-drawer-shell:not(.empty) .creation-mini:nth-child(3) { transform: translate(-62px,-2px) rotate(-69deg); z-index: 5; }
.records-drawer-shell:not(.empty) .creation-mini:nth-child(4) { transform: translate(-88px,17px) rotate(-81deg); z-index: 4; }
.records-drawer-shell:not(.empty) .creation-mini:nth-child(5) { transform: translate(-106px,43px) rotate(-93deg); z-index: 3; }
.records-drawer-shell:not(.empty) .creation-mini:nth-child(n+6) { display: none !important; }
.records-drawer-shell:not(.empty) .creation-mini-visual {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  border-radius: 50% !important;
}
.records-drawer-shell:not(.empty) .creation-mini-copy,
.records-drawer-shell:not(.empty) .creation-mini-time { display: none !important; }
.records-empty-guide {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 154px !important;
  min-width: 0 !important;
  min-height: 72px !important;
  height: 72px;
  grid-template-columns: 28px minmax(0,1fr) !important;
  gap: 7px !important;
  padding: 8px !important;
  border: 0 !important;
  border-radius: 8px;
  background: rgba(250,248,242,.96);
  box-shadow: 0 6px 14px rgba(45,42,36,.13);
  pointer-events: auto;
}
.records-empty-guide h3 { margin: 0 0 2px !important; font-size: 11px !important; }
.records-empty-guide p { max-width: 96px !important; font-size: 8px !important; line-height: 1.25 !important; }
.records-empty-mark { width: 28px !important; height: 28px !important; }
.records-empty-record { display: none !important; }
body.records-open.photo-inspector-open .photo-inspector,
body.records-open.photo-inspector-open .photo-inspector-card {
  max-height: calc(100dvh - 104px);
}
@media (min-width: 761px) {
  body.records-open.archive-collapsed:not(.photo-inspector-open) .board-wrap {
    --flowjam-disc-size: max(190px, min(calc(100dvh - 180px), calc(100vw - 134px))) !important;
  }
  body.records-open:not(.archive-collapsed) .board-wrap {
    --flowjam-disc-size: max(160px, min(calc(100dvh - 180px), calc(100vw - 176px - var(--machine-bay-size) - var(--machine-bay-size)))) !important;
  }
}
@media (max-width: 760px) {
  .topbar .performance-rail { min-width: 84px; flex-basis: 84px; padding-inline: 4px; }
  .keys-choice-popover { position: fixed; top: 68px; right: 8px; width: 216px; }
  .records-drawer-shell,
  body.records-open .records-drawer-shell,
  .records-drawer-shell.open { right: 8px !important; bottom: 8px !important; width: 164px !important; height: 122px !important; }
  .records-tab,
  .records-drawer-shell.open .records-tab { width: 120px !important; height: 50px !important; min-height: 50px !important; }
  .records-drawer,
  .records-drawer-shell.open .records-drawer { width: 164px !important; height: 122px !important; }
  .records-row { width: 156px; height: 82px; }
  .records-drawer-shell:not(.empty) .creation-mini { left: 88px; top: 18px; width: 64px !important; min-width: 64px !important; height: 64px !important; min-height: 64px !important; }
}

.topbar .performance-rail {
  position: static;
  inset: auto;
  min-width: 0;
  width: auto;
  flex: 1 1 auto;
}
.topbar .performance-rail .rail-tool-btn,
.topbar .performance-rail .rail-tool-btn[data-tool="dj"] {
  min-width: 0;
  flex: 1 1 0;
}

@media (max-width: 360px) {
  .topbar .machine-top-transport {
    width: 76px;
    min-width: 76px;
    max-width: 76px;
    flex-basis: 76px;
  }
}

/* Home cover: one wordmark, one object, one action. */
body.home-open { overflow: hidden; }
body.home-open #homeScreen {
  min-height: 100dvh;
  overflow: hidden;
  background: #efeee8;
  color: #111214;
}
body.home-open .home-main.home-cover {
  width: 100%;
  height: 100dvh;
  margin: 0;
  padding: 0;
}
body.home-open .home-cover-stage {
  position: relative;
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  display: block;
  padding: 0;
  overflow: hidden;
}
body.home-open .home-cover-wordmark {
  position: absolute;
  z-index: 20;
  left: clamp(24px, 4vw, 60px);
  top: clamp(22px, 4vh, 42px);
  margin: 0;
  color: #090a0b;
  font-family: "Helvetica Neue", "Arial Nova", Arial, sans-serif;
  font-size: clamp(8rem, 15.4vw, 14.2rem);
  font-weight: 300;
  line-height: .76;
  letter-spacing: -.075em;
  white-space: nowrap;
  pointer-events: none;
}
body.home-open .guide-demo.home-cd-player {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 50%;
  width: min(620px, calc(100vw - 120px), calc(100dvh - 180px));
  min-height: 0;
  aspect-ratio: 1;
  display: block;
  justify-self: auto;
  padding: 0;
  transform: translate(-50%, -48%);
}
body.home-open .home-cd-deck {
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: 0;
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  place-items: center;
  box-sizing: border-box;
  padding: 5.5%;
  overflow: visible;
  border: 0;
  border-radius: 4px 28px 6px 4px;
  background: #fffefa;
  box-shadow: 0 18px 45px rgba(31,30,26,.08), inset 0 1px 0 #fff;
}
body.home-open .home-cd-deck::before {
  content: "";
  position: absolute;
  inset: 5.5%;
  width: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #e5e5e0;
  box-shadow: inset 0 7px 18px rgba(39,39,35,.12), 0 1px 0 #fff;
  transform: none;
}
body.home-open .home-cd-main {
  position: relative;
  z-index: 4;
  grid-area: 1 / 1;
  justify-self: center;
  align-self: center;
  width: 89%;
  height: 89%;
  max-width: none;
  max-height: none;
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  filter: drop-shadow(0 10px 14px rgba(25,24,21,.14));
}
body.home-open .home-cd-main-face { width: 100%; height: 100%; }
body.home-open .home-cd-play-icon {
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  width: 54px;
  height: 54px;
  transform: translate(-50%, -50%);
}
body.home-open .home-cd-copy {
  position: absolute;
  z-index: 9;
  left: 18px;
  top: 14px;
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 0;
  color: #828078;
}
body.home-open .home-cd-copy > span,
body.home-open .home-cd-copy small { display: none; }
body.home-open .home-cd-copy strong {
  font: 600 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}
body.home-open .home-cd-rack {
  position: absolute;
  z-index: 18;
  right: 13px;
  top: 13px;
  left: auto;
  bottom: auto;
  width: auto;
  min-height: 0;
  display: flex;
  gap: 5px;
  transform: none;
  perspective: 700px;
}
body.home-open .home-cd-option,
body.home-open .home-cd-option:nth-child(1),
body.home-open .home-cd-option:nth-child(2),
body.home-open .home-cd-option:nth-child(3) {
  position: relative;
  inset: auto;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: #f1f0eb;
  box-shadow: 0 2px 5px rgba(31,30,26,.12), inset 0 1px 0 #fff;
  transform: rotateZ(var(--cover-tilt, 0deg));
  transform-origin: center bottom;
  transition: transform .35s cubic-bezier(.2,.78,.18,1), opacity .2s ease;
}
body.home-open .home-cd-option:nth-child(1) { --cover-tilt: -4deg; }
body.home-open .home-cd-option:nth-child(2) { --cover-tilt: 3deg; }
body.home-open .home-cd-option:nth-child(3) { --cover-tilt: 5deg; }
body.home-open .home-cd-option:hover,
body.home-open .home-cd-option:focus-visible,
body.home-open .home-cd-option.is-selected {
  z-index: 3;
  filter: none;
  transform: translateY(-4px) rotateX(-18deg) rotateZ(0deg) scale(1.08);
}
body.home-open .home-cd-face { box-shadow: none; }
body.home-open .home-cd-transport {
  position: absolute;
  z-index: 12;
  left: 14px;
  right: 14px;
  bottom: 12px;
  width: auto;
  height: 28px;
  min-height: 28px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 42px 1fr 34px;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border: 0;
  border-radius: 3px;
  background: rgba(232,230,223,.88);
  color: #77756e;
  box-shadow: inset 0 1px 3px rgba(43,42,37,.08), 0 1px 0 #fff;
}
body.home-open .home-cd-transport > span { font-size: 6px; letter-spacing: .08em; }
body.home-open .home-cd-transport time { font-size: 7px; }
body.home-open .home-cd-wave { height: 12px; gap: 3px; }
body.home-open .home-cd-wave i { background: #9d9a92; }
body.home-open .home-cover-tagline {
  position: absolute;
  z-index: 20;
  left: 50%;
  bottom: clamp(28px, 4vh, 42px);
  width: max-content;
  max-width: calc(100vw - 48px);
  margin: 0;
  color: #090a0b;
  font-family: "Helvetica Neue", "Arial Nova", Arial, sans-serif;
  font-size: clamp(3.5rem, 7.2vw, 6.8rem);
  font-weight: 300;
  line-height: .82;
  letter-spacing: .04em;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
}
body.home-open .home-cover-start {
  position: absolute;
  z-index: 30;
  right: clamp(20px, 3vw, 44px);
  top: clamp(20px, 3vh, 32px);
  min-width: 112px;
  min-height: 46px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid #181917;
  border-radius: 4px;
  background: #181917;
  color: #fff;
  box-shadow: none;
  filter: none;
  font: 600 11px/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .05em;
}
body.home-open .home-cover-start:hover {
  background: #fffefa;
  color: #181917;
  box-shadow: none;
  transform: none;
}
body.home-open .home-cover-start span { font-size: 13px; }
body.home-open .home-data-sink { display: none !important; }
body.home-open .home-cd-player.is-swapping .home-cd-main-face {
  animation: home-cover-disc-swap .56s cubic-bezier(.2,.78,.18,1);
}
@keyframes home-cover-disc-swap {
  0% { opacity: .2; transform: rotateY(76deg) scale(.92); }
  55% { opacity: 1; transform: rotateY(-8deg) scale(1.015); }
  100% { opacity: 1; transform: rotateY(0deg) scale(1); }
}

@media (max-width: 620px) {
  body.home-open .home-cover-wordmark {
    left: 16px;
    top: 22px;
    font-size: clamp(4.7rem, 22vw, 5.5rem);
    line-height: .8;
  }
  body.home-open .guide-demo.home-cd-player {
    top: 48%;
    width: min(350px, calc(100vw - 34px));
    transform: translate(-50%, -50%);
  }
  body.home-open .home-cd-deck { border-radius: 4px 20px 6px 4px; }
  body.home-open .home-cd-play-icon { width: 44px; height: 44px; }
  body.home-open .home-cd-copy { left: 12px; top: 10px; }
  body.home-open .home-cd-rack { right: 9px; top: 9px; gap: 4px; }
  body.home-open .home-cd-option,
  body.home-open .home-cd-option:nth-child(1),
  body.home-open .home-cd-option:nth-child(2),
  body.home-open .home-cd-option:nth-child(3) { width: 25px; height: 25px; flex-basis: 25px; }
  body.home-open .home-cd-transport { left: 9px; right: 9px; bottom: 8px; height: 25px; }
  body.home-open .home-cover-tagline {
    bottom: 34px;
    max-width: calc(100vw - 24px);
    font-size: clamp(2.25rem, 10vw, 2.75rem);
    letter-spacing: .02em;
  }
  body.home-open .home-cover-start {
    right: 12px;
    top: 18px;
    min-width: 76px;
    min-height: 40px;
    padding: 0 11px;
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home-open .home-cd-player.is-swapping .home-cd-main-face { animation: none; }
}

/* Interaction stability: transport, performance modes, and Creations. */
.disc-play-btn { display: none !important; }
.topbar .machine-top-transport {
  width: 190px;
  min-width: 190px;
  flex-basis: 190px;
}
.topbar .machine-top-transport .tbtn,
.topbar .machine-top-transport #playPause {
  width: 34px;
  height: 32px;
  flex: 0 0 34px;
}
.topbar .machine-top-transport #playPause {
  width: 40px;
  flex-basis: 40px;
}
.topbar .rail-tool-btn.pending {
  background: #fff4cf !important;
  box-shadow: inset 3px 0 0 var(--machine-accent), 0 2px 6px rgba(92,68,23,.14) !important;
}
.topbar .rail-tool-btn.err {
  background: #ffe4df !important;
  color: #9e3e32 !important;
  box-shadow: inset 3px 0 0 #d95645 !important;
}
body.mode-keys .dock {
  display: flex !important;
  pointer-events: auto;
}
body.mode-keys .dock-keys { display: flex !important; }

.stage,
body.records-open .stage { --output-width: 0px !important; }
.records-drawer-shell,
body.records-open .records-drawer-shell,
.records-drawer-shell.open,
body.photo-inspector-open .records-drawer-shell,
body.photo-inspector-open .records-drawer-shell.open {
  top: auto !important;
  right: 16px !important;
  bottom: 16px !important;
  width: 164px !important;
  height: 60px !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  z-index: 76;
}
body.records-open .records-drawer-shell,
.records-drawer-shell.open,
body.photo-inspector-open .records-drawer-shell.open {
  width: min(320px, calc(100vw - 32px)) !important;
  height: min(230px, calc(100dvh - 100px)) !important;
}
.records-tab,
.records-drawer-shell.open .records-tab {
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  width: 100% !important;
  height: 60px !important;
  min-height: 60px !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0,1fr) 24px !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: linear-gradient(145deg, #faf8f2, #ece9e1) !important;
  box-shadow: 0 8px 20px rgba(50,48,42,.12), inset 0 1px 0 #fff !important;
  transform: none !important;
  pointer-events: auto !important;
  z-index: 3;
}
.records-drawer-shell.open .records-tab { border-radius: 7px 7px 0 0 !important; }
.records-tab-disc,
.records-drawer-shell.open .records-tab-disc {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 40px !important;
  height: 40px !important;
}
.records-tab-label,
.records-drawer-shell.open .records-tab-label {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: block !important;
  align-self: center !important;
  overflow: hidden !important;
  writing-mode: initial !important;
  transform: none !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.records-tab-count,
.records-drawer-shell.open .records-tab-count {
  grid-column: 3 !important;
  grid-row: 1 !important;
  align-self: center !important;
}
.records-drawer,
.records-drawer-shell.open .records-drawer,
body.records-open .records-drawer-shell .records-drawer {
  position: absolute !important;
  inset: 59px 0 0 !important;
  width: 100% !important;
  height: auto !important;
  box-sizing: border-box;
  display: flex !important;
  padding: 12px 10px 10px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 0 7px 7px !important;
  background: #f5f3ed !important;
  box-shadow: 0 12px 28px rgba(50,48,42,.12), inset 0 1px 0 #fff !important;
  transform: translateY(6px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.records-drawer-shell.open .records-drawer,
body.records-open .records-drawer-shell .records-drawer {
  transform: translateY(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
.records-drawer-head,
.records-drawer-note { display: none !important; }
.records-row {
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex: 1 1 auto;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 2px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  pointer-events: auto !important;
}
.records-drawer-shell:not(.empty) .creation-mini,
.creation-mini {
  position: relative !important;
  inset: auto !important;
  width: 104px !important;
  min-width: 104px !important;
  height: 118px !important;
  min-height: 118px !important;
  flex: 0 0 104px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 78px auto !important;
  gap: 5px !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  pointer-events: auto !important;
}
.records-drawer-shell:not(.empty) .creation-mini:nth-child(n) { display: grid !important; transform: none !important; }
.records-drawer-shell:not(.empty) .creation-mini-visual,
.creation-mini-visual {
  width: 76px !important;
  height: 76px !important;
  min-height: 76px !important;
  justify-self: center;
  border-radius: 50% !important;
}
.records-drawer-shell:not(.empty) .creation-mini-copy,
.creation-mini-copy { display: grid !important; }
.records-drawer-shell:not(.empty) .creation-mini-time,
.creation-mini-time { display: block !important; }
.records-empty-guide {
  position: static !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 36px minmax(0,1fr) !important;
  align-content: center !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 10px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: auto !important;
}
.records-empty-guide h3 { margin: 0 0 3px !important; font-size: 13px !important; }
.records-empty-guide p { max-width: none !important; margin: 0 !important; font-size: 9px !important; line-height: 1.35 !important; }
.records-empty-mark { width: 34px !important; height: 34px !important; }
.records-empty-record { display: inline-flex !important; }

@media (max-width: 760px) {
  .topbar .machine-top-transport {
    width: 116px;
    min-width: 116px;
    max-width: 116px;
    flex-basis: 116px;
  }
  .topbar .machine-top-transport .tbtn,
  .topbar .machine-top-transport #playPause {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }
  .records-drawer-shell,
  body.records-open .records-drawer-shell,
  .records-drawer-shell.open {
    right: 8px !important;
    bottom: 8px !important;
  }
}

@media (min-width: 761px) {
  body.mode-keys:not(.dock-collapsed) .board-wrap {
    --flowjam-disc-size: min(520px, calc(100dvh - 360px), calc(100vw - 180px)) !important;
    box-sizing: border-box;
    padding-bottom: 150px !important;
  }
  body.mode-keys:not(.dock-collapsed) .board,
  body.mode-keys.archive-collapsed:not(.dock-collapsed) .board {
    width: var(--flowjam-disc-size) !important;
  }
  body.mode-keys:not(.dock-collapsed) .turntable-plinth {
    width: min(calc(var(--flowjam-disc-size) + 112px), calc(100% - 16px)) !important;
    height: min(calc(var(--flowjam-disc-size) + 112px), calc(100% - 8px)) !important;
    transform: translateY(-75px) !important;
  }
}

@media (max-width: 760px) {
  .archive-strip-body .shelf-head h2 { font-size: 1.7rem; }
  .appearance-swatch,
  .appearance-custom.disc-custom {
    min-height: 88px;
    grid-template-columns: 54px minmax(0,1fr);
    grid-template-rows: 1fr;
    justify-items: start;
    text-align: left;
    transform: none;
  }
  .appearance-swatch::before,
  .appearance-custom.disc-custom::before { width: 50px; border-width: 3px; }
  .appearance-custom::after { left: 42px; top: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .archive-strip-body .rail-panel.on { animation: none; }
}

/* Flat sticker objects: user-controlled fill and ink, no floating shadows. */
.item { --item-fill: #fff; --item-ink: #1d1b17; color: var(--item-ink); }
.item-note,
.item-instrument,
.item-deco,
.item-hum,
.item-clone {
  border: 4px solid #fff;
  outline: 1px solid color-mix(in srgb, var(--item-ink) 36%, transparent 64%);
  background: var(--item-fill);
  color: var(--item-ink);
  box-shadow: none;
  filter: none;
}
.item-note { border-radius: 13px 10px 14px 9px; }
.item-instrument { border-radius: 14px 11px 13px 12px; }
.item-instrument svg *,
.item-deco svg * { stroke: var(--item-ink); }
.item-instrument .inst-name,
.item-hum .hum-tag,
.item-clone .hum-tag { color: var(--item-ink); }
.item-instrument.active { border-color: #fff; outline-color: var(--item-ink); box-shadow: none; }
.item-instrument.active svg * { stroke: var(--item-ink); }
.item-instrument.active .inst-name { color: var(--item-ink); }
.item-deco {
  width: 70px;
  height: 70px;
  padding: 6px;
  border-radius: 13px;
}
.item-photo .card,
.item-photo .card-face {
  background: var(--item-fill);
  box-shadow: none;
}
.item-photo .card-face {
  border: 4px solid #fff;
  outline: 1px solid color-mix(in srgb, var(--item-ink) 34%, transparent 66%);
}
.item-photo .photo-edit-cue { color: var(--item-ink); box-shadow: none; }
.item.cutout {
  background: transparent;
  filter: none;
}
.item.cutout .cut-img {
  filter:
    drop-shadow(2px 0 0 #fff)
    drop-shadow(-2px 0 0 #fff)
    drop-shadow(0 2px 0 #fff)
    drop-shadow(0 -2px 0 #fff);
}
.item-video {
  border: 4px solid #fff;
  outline: 1px solid color-mix(in srgb, var(--item-ink) 34%, transparent 66%);
  box-shadow: none;
}
.item.loading,
.item.dragging { box-shadow: none; filter: none; }
.drag-ghost { box-shadow: none; }
.item-transform-handle,
.item-size-readout { box-shadow: none; }
.item-transform-handle { border: 1px solid #d7d7d4; background: #fff; }
.item .remove { border: 1px solid #d7d7d4; background: #fff; color: var(--item-ink); }
.item-style-toolbar {
  position: absolute;
  left: 50%;
  top: -46px;
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 6px;
  border: 1px solid #d9d9d6;
  border-radius: 5px;
  background: #fff;
  color: #27282a;
  pointer-events: auto;
  transform: translateX(-50%);
}
.item-style-toolbar label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.item-style-toolbar span { font-size: 9px; line-height: 1; }
.item-style-toolbar input {
  width: 22px;
  height: 22px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #c9c9c6;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.item-style-toolbar input::-webkit-color-swatch-wrapper { padding: 2px; }
.item-style-toolbar input::-webkit-color-swatch { border: 0; border-radius: 50%; }
.item-transform-controls { visibility: hidden; }
.item.is-selected .item-transform-controls { visibility: visible; }

/* Element surfaces are flat; editing appears in the inspector, not as outlines. */
.item-note,
.item-instrument,
.item-deco,
.item-hum,
.item-clone,
.item-video,
.item-photo .card-face {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}
.item-note {
  max-width: 220px;
  color: var(--item-ink);
  box-shadow: none;
  filter: none;
}
.item-note.text-plain {
  padding: 3px 5px;
  border-radius: 0;
  background: transparent;
}
.item-note.text-tape {
  padding: 9px 16px;
  border-radius: 0;
  background: color-mix(in srgb, var(--item-fill) 86%, transparent 14%);
  clip-path: polygon(2% 5%, 98% 0, 96% 96%, 1% 100%);
}
.item-instrument,
.item-hum,
.item-clone { background: var(--item-fill); }
.item-deco {
  padding: 7px;
  border-radius: 13px;
  background: var(--item-fill);
}
.item-photo .card-face { background: var(--item-fill); }
.item-photo .card-front { padding: 6px 6px 18px; }
.item-photo[data-photo-effect="mono"] img,
.photo-inspector[data-photo-effect="mono"] .photo-inspector-preview img { filter: grayscale(1) contrast(1.04); }
.item-photo[data-photo-effect="warm"] img,
.photo-inspector[data-photo-effect="warm"] .photo-inspector-preview img { filter: sepia(.28) saturate(1.12); }
.item-photo.cutout,
.item-photo.cutout .cut-img {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}
.thumb.cut {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}
.item-transform-controls { border: 0; }

/* Photo controls: direct edit, four-corner resize, and a real prompt-share target. */
.item-photo .photo-edit-cue { display: none !important; }
.item-scale-handle {
  right: auto;
  bottom: auto;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
.item-scale-handle::before {
  content: "";
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  border: 1.5px solid #565954;
  border-radius: 50%;
  background: #fffefa;
  box-shadow: 0 1px 3px rgba(42,40,35,.14);
}
.item-scale-nw { top: -13px; left: -13px; cursor: nwse-resize; }
.item-scale-ne { top: -13px; right: -13px; left: auto; cursor: nesw-resize; }
.item-scale-se { right: -13px; bottom: -13px; cursor: nwse-resize; }
.item-scale-sw { bottom: -13px; left: -13px; cursor: nesw-resize; }
.item-photo,
.item-photo .card,
.item-photo .card-face,
.item-photo .card-front,
.item-photo .card-front img {
  border-radius: 0 !important;
}
.item-photo .card-face,
.item-photo .card-front {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

/* Independent, aligned utility panels and lighter studio controls. */
body:not(.home-open) .topbar {
  border-bottom: 1px solid #ecebe7 !important;
  background: #fff !important;
  box-shadow: none !important;
}
.topbar .board-title {
  border: 1px solid #eeede8 !important;
  background: #fff !important;
  box-shadow: none !important;
}
.topbar .machine-top-transport {
  border: 1px solid #ecebe6 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.topbar .machine-top-transport .tbtn,
.topbar .machine-top-transport #playPause {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.topbar .machine-top-transport .tbtn:hover,
.topbar .machine-top-transport #playPause:hover { background: #f7f7f4 !important; }
.topbar .topbar-surprise,
.topbar > .surprise-btn,
.topbar .surprise-btn {
  border: 1px solid #ecebe6 !important;
  background: #fff !important;
  box-shadow: none !important;
}
.topbar .performance-rail {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.topbar .performance-rail .rail-tool-btn,
.topbar .performance-rail .rail-tool-btn[data-tool="dj"] {
  border: 1px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}
.topbar .performance-rail .rail-tool-btn:hover,
.topbar .performance-rail .rail-tool-btn[data-tool="dj"]:hover { background: #f7f7f4 !important; }
.topbar .performance-rail .rail-tool-btn.on,
.topbar .performance-rail .rail-tool-btn[data-tool="dj"].on {
  border-color: rgba(189,123,18,.24) !important;
  background: #fffaf0 !important;
  box-shadow: none !important;
}
.topbar .performance-rail .rail-tool-btn.window-hidden::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--machine-accent);
}
.topbar .engine-status,
body.records-open .topbar .engine-status {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media (min-width: 761px) {
  body.home-open .source-toolbar,
  body.home-open #archiveShell {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body:not(.home-open) {
    --utility-panel-width: clamp(292px, 22vw, 340px);
    --utility-panel-height: 230px;
    --utility-panel-gap: 18px;
  }
  #photoInspector.photo-inspector,
  body.records-open.photo-inspector-open #photoInspector.photo-inspector {
    top: 78px !important;
    right: 0 !important;
    bottom: auto !important;
    width: var(--utility-panel-width) !important;
    height: auto !important;
    max-height: calc(100dvh - 78px - var(--utility-panel-height) - var(--utility-panel-gap)) !important;
    padding: 0 !important;
    place-items: stretch !important;
  }
  #photoInspector .photo-inspector-card,
  body.records-open.photo-inspector-open #photoInspector .photo-inspector-card {
    width: 100% !important;
    max-height: calc(100dvh - 78px - var(--utility-panel-height) - var(--utility-panel-gap)) !important;
    overflow-y: auto !important;
    border: 0 !important;
    border-left: 1px solid #ecebe6 !important;
    border-bottom: 1px solid #ecebe6 !important;
    border-radius: 0 0 0 8px !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  #recordsDrawer.records-drawer-shell,
  body.records-open #recordsDrawer.records-drawer-shell,
  body.photo-inspector-open #recordsDrawer.records-drawer-shell {
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 156px !important;
    height: 54px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    z-index: 182 !important;
  }
  #recordsDrawer.records-drawer-shell.open,
  body.records-open #recordsDrawer.records-drawer-shell.open,
  body.photo-inspector-open #recordsDrawer.records-drawer-shell.open {
    width: var(--utility-panel-width) !important;
    height: var(--utility-panel-height) !important;
  }
  #recordsDrawer .records-tab,
  #recordsDrawer.records-drawer-shell.open .records-tab {
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    width: 100% !important;
    height: 54px !important;
    min-height: 54px !important;
    grid-template-columns: 38px minmax(0,1fr) 22px !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 10px !important;
    border: 1px solid #ecebe6 !important;
    border-right: 0 !important;
    border-radius: 8px 0 0 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    transform: none !important;
  }
  #recordsDrawer.records-drawer-shell.open .records-tab { border-bottom-color: #f3f2ee !important; }
  #recordsDrawer .records-tab-disc,
  #recordsDrawer.records-drawer-shell.open .records-tab-disc {
    width: 36px !important;
    height: 36px !important;
  }
  #recordsDrawer .records-tab-label,
  #recordsDrawer.records-drawer-shell.open .records-tab-label {
    display: block !important;
    writing-mode: initial !important;
    transform: none !important;
    white-space: nowrap;
  }
  #recordsDrawer .records-drawer,
  #recordsDrawer.records-drawer-shell.open .records-drawer,
  body.records-open #recordsDrawer .records-drawer,
  body.photo-inspector-open #recordsDrawer.records-drawer-shell.open .records-drawer {
    position: absolute !important;
    inset: 53px 0 0 !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
    padding: 12px 10px 10px !important;
    overflow: hidden !important;
    border: 1px solid #ecebe6 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    transform: translateY(5px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  #recordsDrawer.records-drawer-shell.open .records-drawer,
  body.records-open #recordsDrawer.records-drawer-shell.open .records-drawer,
  body.photo-inspector-open #recordsDrawer.records-drawer-shell.open .records-drawer {
    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  #recordsDrawer .creation-mini,
  #recordsDrawer .records-empty-guide {
    border-color: #efeee9 !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  #recordsDrawer .records-empty-guide {
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    grid-template-rows: auto auto auto !important;
    align-content: start !important;
    gap: 7px !important;
    padding: 16px 12px !important;
    text-align: left !important;
  }
  #recordsDrawer .records-empty-mark { display: none !important; }
  #recordsDrawer .records-empty-guide h3,
  #recordsDrawer .records-empty-guide p,
  #recordsDrawer .records-empty-record {
    grid-column: 1 !important;
    width: auto;
    max-width: none !important;
    margin: 0 !important;
  }
  #recordsDrawer .records-empty-guide h3 { font-size: 14px !important; }
  #recordsDrawer .records-empty-guide p { font-size: 9px !important; }
  #recordsDrawer .records-empty-record {
    min-width: 0 !important;
    min-height: 32px !important;
    justify-self: start;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 5px !important;
    padding: 0 10px !important;
    border: 1px solid #deddd8 !important;
    border-radius: 5px !important;
    background: #fff !important;
    color: var(--machine-ink) !important;
    box-shadow: none !important;
    font-size: 9px !important;
    white-space: nowrap;
  }
  #recordsDrawer .records-empty-record span { color: #d85a64; }
}

/* Minimal source drawer: square pocket, five stickers, independent edge control. */
@media (min-width: 761px) {
  .source-toolbar,
  body.archive-collapsed .source-toolbar,
  body:not(.archive-collapsed) .source-toolbar {
    bottom: 0 !important;
    border-radius: 0 !important;
  }
  body.archive-collapsed .source-toolbar {
    box-shadow: inset -1px 0 #ecebe6 !important;
  }
  body:not(.archive-collapsed) .source-toolbar {
    grid-template-columns: repeat(5, minmax(0,1fr)) !important;
  }
  #archiveShell,
  .archive-shell,
  body.archive-collapsed #archiveShell,
  body.archive-collapsed .archive-shell,
  body:not(.archive-collapsed) #archiveShell,
  body:not(.archive-collapsed) .archive-shell {
    bottom: 0 !important;
    border-radius: 0 !important;
  }
  #archiveShell > #archiveGridClose {
    position: absolute !important;
    z-index: 20 !important;
    top: 50% !important;
    right: -16px !important;
    width: 32px !important;
    height: 48px !important;
    display: grid !important;
    place-items: center;
    padding: 0 !important;
    border: 1px solid #e6e5e0 !important;
    border-left-color: #f3f2ee !important;
    border-radius: 0 7px 7px 0 !important;
    background: #fff !important;
    color: var(--machine-muted) !important;
    box-shadow: none !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(-50%) !important;
  }
  #archiveShell > #archiveGridClose:hover {
    border-color: #d8d7d2 !important;
    background: #fafaf8 !important;
    color: var(--machine-ink) !important;
  }
  body.archive-collapsed #archiveShell > #archiveGridClose {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}
@media (max-width: 760px) {
  #archiveGridClose { display: none !important; }
}
.item-photo .item-scale-nw {
  top: 0;
  left: 0;
  transform: translate(-50%,-50%) !important;
}
.item-photo .item-scale-ne {
  top: 0;
  right: 0;
  left: auto;
  transform: translate(50%,-50%) !important;
}
.item-photo .item-scale-se {
  right: 0;
  bottom: 0;
  transform: translate(50%,50%) !important;
}
.item-photo .item-scale-sw {
  bottom: 0;
  left: 0;
  transform: translate(-50%,50%) !important;
}
.item-rotate-handle { top: -36px; }
.item .remove { top: -36px; right: -8px; }

.item-inspector-common {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e5e2;
}
.item-inspector-colors {
  display: flex;
  align-items: center;
  gap: 8px;
}
.item-inspector-colors label {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #62656a;
  font-size: var(--type-fine);
  font-weight: 700;
  letter-spacing: .08em;
}
.item-inspector-colors input {
  width: 32px;
  height: 32px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #cfd0cd;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.item-inspector-colors input::-webkit-color-swatch-wrapper { padding: 3px; }
.item-inspector-colors input::-webkit-color-swatch { border: 0; border-radius: 50%; }
.item-inspector-segment {
  display: grid;
  grid-template-columns: minmax(0,1fr) repeat(3,auto);
  align-items: center;
  gap: 4px;
}
.item-inspector-segment[hidden],
.photo-inspector-layout[hidden] { display: none !important; }
.item-inspector-segment > span { color: #62656a; font-size: var(--type-fine); font-weight: 700; letter-spacing: .08em; }
.item-inspector-segment button {
  min-height: 29px;
  padding: 5px 9px;
  border: 1px solid #d6d6d3;
  border-radius: 3px;
  background: #fff;
  color: #3d3f43;
  cursor: pointer;
  font-size: var(--type-fine);
}
.item-inspector-segment button.on { border-color: #1b1c1e; background: #1b1c1e; color: #fff; }
.photo-inspector:not([data-kind="photo"]) { max-height: 250px; }

/* Compact source rail, player transport, and creation rack. */
.source-toolbar { display: none; }
.cd-player-transport {
  position: absolute;
  z-index: 8;
  inset: auto auto 12px 24px;
  width: max-content;
  height: auto;
  min-height: 29px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 3px;
  padding: 2px 4px 2px 8px;
  border: 1px solid #d7d7d4;
  border-radius: 6px;
  background: rgba(255,255,255,.94);
  pointer-events: auto;
}
.cd-player-transport .now-time { min-width: 28px; font-size: 10px; font-variant-numeric: tabular-nums; }
.cd-player-transport .tbtn {
  width: 27px;
  height: 27px;
  border: 0;
  border-radius: 4px;
  background: #f3f3f1;
  font-size: 10px;
  transform: none;
}
.cd-player-transport #playPause { background: #202124; color: #fff; }
.cd-player-transport .rec-btn { border: 1px solid #dededb; background: #fff; }
.cd-player-transport .tbtn:hover { background: #e7e7e4; transform: none; }
.cd-player-transport #playPause:hover { background: #34363a; }

.stage,
body.records-open .stage {
  --output-width: 0px;
}
.records-drawer-shell {
  top: auto !important;
  right: 18px;
  bottom: 18px;
  width: 166px;
  height: 86px;
  overflow: visible;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  transition: width .34s cubic-bezier(.2,.72,.2,1), height .34s cubic-bezier(.2,.72,.2,1);
}
body.records-open .records-drawer-shell,
.records-drawer-shell.open {
  width: min(350px, calc(100vw - 28px));
  height: min(430px, calc(100dvh - 110px));
}
.records-tab {
  inset: 0;
  width: 100%;
  height: 86px;
  min-height: 0;
  display: grid;
  grid-template-columns: 38px minmax(0,1fr) auto;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  gap: 0 9px;
  padding: 11px 12px;
  border: 1px solid #d9d9d6;
  border-radius: 8px;
  background: rgba(255,255,255,.97);
  color: #202124;
  box-shadow: 0 5px 14px rgba(34,38,44,.09);
  transform: none;
}
.records-tab::before {
  grid-column: 2;
  grid-row: 1;
  content: "CD RACK";
  align-self: end;
  color: #202124;
  writing-mode: initial;
  font-size: 9px;
  letter-spacing: .1em;
}
.records-tab::after {
  grid-column: 1;
  grid-row: 1 / 3;
  content: "";
  width: 36px;
  height: 36px;
  border: 1px solid #aeb3b8;
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff 0 16%, #cbd1d5 17% 25%, transparent 26%),
    #e8edf2;
  box-shadow: -5px 3px 0 -1px #f58db7, -9px 6px 0 -2px #17191d;
}
.records-tab-icon { display: none; }
.records-tab-label {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  margin: 0;
  color: #777a80;
  writing-mode: initial;
  font-size: 9px;
  letter-spacing: 0;
}
.records-tab-count { grid-column: 3; grid-row: 1 / 3; margin: 0; background: #202124; color: #fff; }
.records-tab-arrow { display: none; }
.records-drawer-shell.open .records-tab {
  inset: 0 0 auto;
  height: 54px;
  min-height: 54px;
  display: flex;
  padding: 9px 12px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background: #fff;
}
.records-drawer-shell.open .records-tab::after { width: 28px; height: 28px; flex: none; }
.records-drawer-shell.open .records-tab::before { content: "CD RACK"; margin-left: 6px; }
.records-drawer-shell.open .records-tab-label { margin-left: auto; }
.records-drawer {
  inset: 53px 0 0;
  width: 100%;
  padding: 12px;
  border: 1px solid #d9d9d6;
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(34,38,44,.12);
  transform: translateY(8px);
}
.records-drawer-shell.open .records-drawer { transform: translateY(0); }
body.photo-inspector-open .records-drawer-shell { top: auto !important; }
body.photo-inspector-open .records-drawer-shell.open {
  height: min(380px, calc(100dvh - 500px));
}

@media (min-width: 761px) {
  .source-toolbar {
    position: fixed;
    z-index: 66;
    left: 12px;
    top: 90px;
    width: 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 7px 5px;
    border: 1px solid #dededb;
    border-radius: 9px;
    background: #fff;
  }
  .source-tool {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: #fff;
    color: #55585d;
    cursor: pointer;
    font: 500 14px/1 Georgia,serif;
  }
  .source-tool svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .source-tool:hover { background: #f3f3f1; color: #202124; }
  .source-tool.on { background: #202124; color: #fff; }
  .source-tool:focus-visible { outline: 2px solid #202124; outline-offset: 2px; }

  .stage,
  body.archive-collapsed .stage {
    --archive-width: 58px;
    grid-template-columns: 58px minmax(0,1fr);
    gap: 12px;
    padding-left: 12px;
    padding-right: 18px;
  }
  body:not(.archive-collapsed) .stage {
    --archive-width: 372px;
    grid-template-columns: 372px minmax(0,1fr);
  }
  .board-wrap { grid-column: 2; }
  .archive-shell,
  body.archive-collapsed .archive-shell {
    position: fixed;
    z-index: 64;
    left: 78px;
    top: 90px;
    bottom: 14px;
    width: 294px;
    height: auto;
    display: flex;
    border: 1px solid #dededb;
    border-radius: 9px;
    background: #fff !important;
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition: opacity .18s ease, transform .28s cubic-bezier(.2,.72,.2,1);
  }
  body.archive-collapsed .archive-shell {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-12px);
  }
  .archive-head { display: none; }
  .archive-contents,
  body.archive-collapsed .archive-contents {
    width: 100%;
    height: 100%;
    display: block;
    padding: 0;
    overflow: hidden;
  }
  .archive-strip:not(.is-open) { display: none; }
  .archive-strip.is-open,
  body.archive-collapsed .archive-strip.is-open {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    display: block;
    overflow: hidden;
    border: 0;
    background: #fff !important;
  }
  .archive-strip.is-open > .archive-strip-trigger { display: none; }
  .archive-strip.is-open > .archive-strip-body {
    width: 100%;
    height: 100%;
    display: block;
    overflow-y: auto;
    visibility: visible;
  }
  .archive-strip.is-open > .archive-strip-body .rail-panel { padding: 26px 20px 24px; }
}

@media (max-width: 760px) {
  .source-toolbar { display: none; }
  .cd-player-transport {
    position: fixed;
    z-index: 70;
    inset: auto auto 84px 50%;
    transform: translateX(-50%);
  }
  body.mode-keys .cd-player-transport { bottom: 146px; }
  .turntable-plinth { display: contents; }
  .cd-player-hinge,
  .cd-player-display { display: none; }
  .records-drawer-shell {
    right: 8px;
    bottom: 10px;
    width: 132px;
    height: 68px;
  }
  .records-tab { height: 68px; padding: 8px 9px; }
  body.records-open .records-drawer-shell,
  .records-drawer-shell.open { width: calc(100vw - 16px); height: min(380px, calc(100dvh - 98px)); }
}

/* Object-like source tools, physical player controls, and compact trays. */
body:not(.home-open) .stage {
  background-color: #fafaf8;
  background-image: radial-gradient(circle, rgba(72,74,70,.24) 1px, transparent 1.1px);
  background-position: 10px 10px;
  background-size: 20px 20px;
}

@media (min-width: 761px) {
  .source-toolbar {
    width: 70px;
    gap: 4px;
    padding: 8px;
    border: 1px solid #d6d7d4;
    border-radius: 16px;
    background: rgba(255,255,253,.97);
    box-shadow: 0 4px 12px rgba(34,36,33,.1), inset 0 1px 0 #fff;
    overflow: visible;
    isolation: isolate;
  }
  .source-toolbar::before {
    display: none;
  }
  .source-toolbar::after {
    display: none;
  }
  .source-tool {
    position: relative;
    z-index: 1;
    width: 52px;
    height: 52px;
    padding: 0;
    place-items: center;
    border-radius: 10px;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible;
  }
  .source-tool::before {
    display: none;
  }
  .source-tool::after {
    content: "";
    position: absolute;
    z-index: 2;
    left: -4px;
    top: 19px;
    width: 3px;
    height: 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    pointer-events: none;
  }
  .source-tool:hover { background: #f4f4f1 !important; }
  .source-tool.on {
    color: #202124;
    background: #ececea !important;
    box-shadow: none;
  }
  .source-tool.on::after {
    background: #252625;
  }
  .source-tool:focus-visible {
    outline: 2px solid #252625;
    outline-offset: 2px;
  }
  .tool-object {
    position: relative;
    display: block;
    pointer-events: none;
    transform-origin: left center;
    transition: translate .24s cubic-bezier(.2,.8,.2,1), scale .24s cubic-bezier(.2,.8,.2,1), opacity .18s ease;
    will-change: translate, scale;
  }
  .source-toolbar.gsap-dock .tool-object { transition: none; }
  .source-toolbar:not(.gsap-dock):has(.source-tool:hover) .source-tool:not(:hover) .tool-object {
    scale: .94;
    opacity: .76;
  }
  .source-toolbar:not(.gsap-dock):has(.source-tool:hover) .source-tool:has(+ .source-tool:hover) .tool-object,
  .source-toolbar:not(.gsap-dock):has(.source-tool:hover) .source-tool:hover + .source-tool .tool-object {
    translate: 2px 0;
    scale: 1.06;
    opacity: 1;
  }
  .source-toolbar:not(.gsap-dock) .source-tool:hover .tool-object,
  .source-toolbar:not(.gsap-dock) .source-tool:focus-visible .tool-object {
    translate: 7px 0;
    scale: 1.24;
    opacity: 1;
  }
  .source-toolbar:not(.gsap-dock) .source-tool:active .tool-object {
    translate: 4px 1px;
    scale: 1.15;
  }
  .source-tool-tip {
    display: none !important;
  }
  .source-tool-tip::before {
    content: "";
    position: absolute;
    left: -6px;
    top: calc(50% - 6px);
    border-top: 6px solid transparent;
    border-right: 7px solid #252525;
    border-bottom: 6px solid transparent;
  }
  .source-tool-tip kbd {
    min-width: 20px;
    padding: 3px 5px;
    border: 1px solid #5c5c5c;
    border-radius: 5px;
    background: #3b3b3b;
    color: #e8e8e8;
    font: 500 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    text-align: center;
  }
  .source-tool:hover .source-tool-tip,
  .source-tool:focus-visible .source-tool-tip {
    display: none;
  }
  .tool-asset {
    width: 48px;
    height: 48px;
    object-fit: contain;
  }
  .tool-asset-camera { width: 50px; height: 50px; }
  .tool-asset-type { width: 45px; height: 45px; }
  .tool-asset-leaf { width: 43px; height: 49px; }
  .tool-asset-stickers { width: 51px; height: 45px; }
  .tool-cd {
    width: 38px;
    height: 38px;
    border: 1px solid #7e878d;
    border-radius: 50%;
    background-color: var(--disc-color);
    background-image:
      radial-gradient(circle, transparent 0 9%, #f9faf9 10% 13%, #808990 14% 16%, transparent 17%),
      conic-gradient(from 25deg, rgba(255,255,255,.48), transparent 14%, rgba(181,224,231,.35) 20%, transparent 31%, rgba(255,216,232,.32) 44%, transparent 57%, rgba(255,255,255,.32) 72%, transparent 86%);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.28);
  }
  .tool-cd::after {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 50%;
  }
  .tool-cd i {
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(64,68,72,.48);
    border-radius: 50%;
    background: #fff;
  }
  .tool-camera {
    width: 42px;
    height: 32px;
    border: 1px solid #92979a;
    border-radius: 7px 7px 6px 6px;
    background: linear-gradient(#f9faf9 0 27%, #d9dcdd 28% 100%);
    box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(83,87,91,.08);
  }
  .tool-camera::before {
    content: "";
    position: absolute;
    left: 6px;
    top: -6px;
    width: 16px;
    height: 7px;
    border: 1px solid #92979a;
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(#f7f8f7, #c9cccd);
  }
  .camera-lens {
    position: absolute;
    left: 9px;
    top: 7px;
    width: 19px;
    height: 19px;
    border: 3px solid #3d4245;
    border-radius: 50%;
    background: radial-gradient(circle at 39% 36%, #d68891 0 8%, #622f39 19%, #15191d 53%, #727a7f 57% 68%, #252a2e 69%);
  }
  .camera-shutter {
    position: absolute;
    right: 5px;
    top: 5px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ef5a68;
    box-shadow: inset 0 1px rgba(255,255,255,.65);
  }
  .tool-type {
    width: 40px;
    height: 31px;
    display: grid;
    place-items: center;
    background: #fffefa;
    color: #252629;
    font: 600 18px/1 Georgia,serif;
    clip-path: polygon(1% 7%, 98% 0, 95% 94%, 2% 100%);
    transform: rotate(-2deg);
    box-shadow: inset 0 0 0 1px rgba(62,64,62,.05);
  }
  .tool-type::before {
    content: "";
    position: absolute;
    left: 10px;
    right: 9px;
    top: -3px;
    height: 6px;
    background: rgba(223,215,194,.75);
    transform: rotate(2deg);
  }
  .tool-leaf {
    width: 30px;
    height: 40px;
    border-radius: 75% 12% 75% 15%;
    background: linear-gradient(135deg, #9fc47d 0, #5a9058 58%, #34633d 100%);
    transform: rotate(-35deg);
    box-shadow: inset -2px -2px 0 rgba(43,82,48,.12);
  }
  .tool-leaf::after {
    content: "";
    position: absolute;
    left: 6px;
    bottom: 3px;
    width: 1px;
    height: 31px;
    background: rgba(255,255,255,.62);
    transform: rotate(-38deg);
    transform-origin: bottom;
  }
  .tool-leaf i {
    position: absolute;
    left: 8px;
    top: 11px;
    width: 15px;
    height: 1px;
    background: rgba(255,255,255,.42);
    transform: rotate(-10deg);
  }
  .tool-sticker {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 8px 13px 8px 11px;
    background: #f3b5cf;
    color: #9b3f68;
    box-shadow: inset 0 0 0 1px rgba(157,70,108,.08);
    transform: rotate(4deg);
  }
  .tool-sticker::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 11px;
    height: 11px;
    border-radius: 10px 0 7px 0;
    background: #fff;
  }
  .tool-sticker i { font: normal 17px/1 sans-serif; }
}

.appearance-swatch::before,
.appearance-custom.disc-custom::before {
  border: 3px solid #fff;
  outline: 1px solid rgba(42,45,50,.34);
  background:
    radial-gradient(circle, #fff 0 10%, #c9d0d5 11% 17%, transparent 18%),
    var(--swatch, var(--custom-colour, #f58db7));
  box-shadow: 0 3px 6px rgba(34,38,44,.13), inset 0 0 0 1px rgba(255,255,255,.15);
}
.appearance-swatch.on::before,
.appearance-custom.disc-custom.on::before { outline: 2px solid #202124; outline-offset: 2px; }

.cd-player-transport {
  width: 150px;
  min-height: 38px;
  gap: 1px;
  padding: 2px 4px 2px 8px;
  border: 1px solid #dedfdb;
  border-radius: 8px;
  background: rgba(250,250,247,.96);
  box-shadow: none;
}
.cd-player-transport .now-time {
  width: 38px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #6d706c;
  font: 500 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  box-shadow: none;
}
.cd-player-transport .tbtn {
  position: relative;
  width: 26px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: transparent;
  font-size: 0;
  box-shadow: none;
  transition: background-color .14s ease, transform .12s ease;
}
.cd-player-transport .tbtn::before { content: ""; display: block; }
.cd-player-transport #playPause {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  background: #242624;
  box-shadow: none;
}
.cd-player-transport #playPause::before {
  width: 0;
  height: 0;
  margin-left: 3px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #fff;
}
body.transport-playing .cd-player-transport #playPause::before {
  width: 9px;
  height: 12px;
  margin-left: 0;
  border: 0;
  background: linear-gradient(90deg,#fff 0 3px,transparent 3px 6px,#fff 6px 9px);
}
.cd-player-transport #stopBtn::before { width: 8px; height: 8px; border-radius: 1px; background: #6f726e; }
.cd-player-transport #recBtn::before { width: 8px; height: 8px; border: 0; border-radius: 50%; background: #d94b59; }
.cd-player-transport .tbtn:hover,
.cd-player-transport #playPause:hover { background: #e8e9e5; transform: translateY(-1px); }
.cd-player-transport #playPause:hover { background: #343734; }
.cd-player-transport .tbtn:active { transform: translateY(1px); }
.cd-player-transport .tbtn:focus-visible { outline: 2px solid #252825; outline-offset: 2px; }
.cd-player-display { display: none !important; }
.topbar .engine-status,
body.records-open .topbar .engine-status {
  position: static;
  z-index: auto;
  right: auto;
  bottom: auto;
  flex: 0 1 180px;
  max-width: 180px;
  margin-left: auto;
  padding: 0 8px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #737570;
  font-size: 9px;
  line-height: 1.2;
  text-align: right;
}

@media (min-width: 1181px) {
  .photo-inspector {
    inset: 90px 18px auto auto;
    width: 304px;
    max-height: calc(100dvh - 200px);
  }
  .photo-inspector-card {
    padding: 12px;
    border-color: #d9d9d6;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 6px 16px rgba(34,38,44,.08);
  }
  .photo-inspector-head { margin-bottom: 9px; }
  .photo-inspector-head h2 { font-size: 17px; }
  .photo-inspector-layout { grid-template-columns: 78px minmax(0,1fr); gap: 9px; }
  .photo-inspector-preview { height: 102px; }
  .photo-inspector-fields textarea { min-height: 42px; font-size: 11px; }
  .photo-inspector:not([data-kind="photo"]) { max-height: 225px; }
}

@media (min-width: 761px) {
  .board-wrap,
  body.records-open .board-wrap {
    --flowjam-disc-size: max(190px, min(calc(100dvh - 180px), calc(100vw - 134px)));
    position: fixed;
    inset: 78px 0 0;
    width: auto;
    height: auto;
    z-index: 1;
    grid-column: 1;
    transform: none;
    transition: none;
  }
}
.records-drawer-shell {
  width: 138px;
  height: 58px;
}
body.records-open .records-drawer-shell,
.records-drawer-shell.open {
  width: min(274px, calc(100vw - 28px));
  height: 154px;
}
.records-tab { height: 58px; padding: 7px 9px; }
.records-tab::after { width: 28px; height: 28px; }
.records-drawer-shell.open .records-tab { height: 42px; min-height: 42px; }
.records-drawer {
  inset: 41px 0 0;
  padding: 7px 8px 8px;
  overflow: hidden;
}
.records-row {
  min-height: 0;
  flex-direction: row;
  gap: 7px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 5px 1px;
}
.creation-mini { width: 238px; min-width: 238px; height: 92px; flex: 0 0 238px; grid-template-columns: 88px minmax(0,1fr); }
.creation-mini-visual { min-height: 92px; }
.records-empty-guide {
  width: 100%;
  min-width: 0;
  min-height: 92px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  padding: 7px 8px;
  text-align: left;
}
.records-empty-mark { grid-column: 1; grid-row: 1 / 3; width: 36px; height: 36px; margin: 0; }
.records-empty-guide h3,
.records-empty-guide p { grid-column: 2; min-width: 0; }
.records-empty-guide h3 { margin: 0 0 3px; font-size: 14px; }
.records-empty-guide p { max-width: 166px; font-size: 9px; }
.records-empty-record { display: none; }
.records-drawer-head,
.records-drawer-note { display: none; }
body.photo-inspector-open .records-drawer-shell.open { height: 154px; }

@media (min-width: 1144px) and (max-width: 1399px) {
  body.records-open .records-drawer-shell,
  .records-drawer-shell.open {
    width: clamp(126px, calc(50vw - 446px), 274px);
  }
  .creation-mini {
    width: calc(100% - 2px);
    min-width: calc(100% - 2px);
    flex-basis: calc(100% - 2px);
    grid-template-columns: minmax(52px, 40%) minmax(0, 1fr);
  }
  .records-empty-guide { gap: 7px; padding-inline: 6px; }
  .records-empty-guide > div { min-width: 0; }
  .records-empty-guide p { max-width: none; }
}

@media (max-width: 760px) {
  .records-drawer-shell { width: 126px; height: 64px; }
  .records-tab { height: 64px; }
  body.records-open .records-drawer-shell,
  .records-drawer-shell.open { width: calc(100vw - 16px); height: 168px; }
  .board-wrap,
  body.records-open .board-wrap {
    --flowjam-disc-size: max(190px, min(calc(100dvh - 180px), calc(100vw - 134px)));
    position: fixed;
    inset: 78px 0 0;
    width: auto;
    height: auto;
    transform: none;
    transition: none;
  }
  body.records-open .cd-player-transport { bottom: 188px; }
}

/* Unified physical controls, connected source drawer, and live inspectors. */
.board-hint { display: none !important; }
.item-deco {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}
.item-deco svg { width: 100%; height: 100%; overflow: visible; }

.cd-player-transport {
  width: 136px;
  min-height: 36px;
  gap: 3px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.cd-player-transport .now-time {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  color: #7b7d78;
  font-size: 8px;
}
.cd-player-transport .tbtn {
  width: 24px;
  height: 30px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.cd-player-transport #playPause {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
  border: 1px solid #c9cbc7;
  background: #f8f8f5;
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(55,58,54,.08);
}
.cd-player-transport #playPause::before {
  border-top-width: 6px;
  border-bottom-width: 6px;
  border-left: 10px solid #242624;
}
body.transport-playing .cd-player-transport #playPause::before {
  background: linear-gradient(90deg,#242624 0 3px,transparent 3px 6px,#242624 6px 9px);
}
.cd-player-transport .tbtn:hover { background: rgba(35,38,35,.06); }
.cd-player-transport #playPause:hover { background: #fff; }

.appearance-reference-swatches,
.appearance-more-palette {
  display: grid;
  border: 1px solid #e4e5e1;
  border-radius: 10px;
  background: #fafaf8;
}
.appearance-reference-swatches {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
  padding: 11px 9px;
}
.appearance-reference-swatches .appearance-swatch,
.appearance-more-palette .appearance-swatch {
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  justify-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  box-shadow: none;
  text-align: center;
  transform: none !important;
}
.appearance-reference-swatches .appearance-swatch::before,
.appearance-more-palette .appearance-swatch::before {
  width: 42px;
  height: 42px;
  border: 1px solid #c3c6c7;
  outline: 0;
  background:
    radial-gradient(circle, #fff 0 10%, #c9d0d5 11% 17%, transparent 18%),
    var(--swatch);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.3);
}
.appearance-reference-swatches .appearance-swatch > span,
.appearance-more-palette .appearance-swatch > span {
  font-family: var(--body);
  font-size: 9px;
  font-weight: 500;
  line-height: 1;
}
.appearance-reference-swatches .appearance-swatch:hover::before,
.appearance-more-palette .appearance-swatch:hover::before { border-color: #7f827e; }
.appearance-reference-swatches .appearance-swatch.on::before,
.appearance-more-palette .appearance-swatch.on::before {
  outline: 0;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), 0 0 0 2px #242624;
}
.appearance-palette-toggle {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding: 7px 10px;
  border: 1px solid #e4e5e1;
  border-radius: 8px;
  background: #fff;
  color: #555854;
  cursor: pointer;
  font-family: var(--body);
  font-size: 10px;
}
.appearance-palette-toggle b { font: 400 15px/1 sans-serif; }
.appearance-palette-toggle[aria-expanded="true"] b { transform: rotate(45deg); }
.appearance-more-palette {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px 6px;
  margin-top: 8px;
  padding: 10px 7px;
}
.appearance-more-palette[hidden] { display: none; }
.appearance-more-palette .appearance-swatch::before { width: 32px; height: 32px; }
.appearance-more-palette .appearance-swatch > span { font-size: 8px; }

.archive-strip-body,
.photo-inspector-card {
  scrollbar-width: thin;
  scrollbar-color: rgba(67,70,66,.14) transparent;
}
.archive-strip-body::-webkit-scrollbar,
.photo-inspector-card::-webkit-scrollbar { width: 7px; }
.archive-strip-body::-webkit-scrollbar-track,
.photo-inspector-card::-webkit-scrollbar-track { background: transparent; }
.archive-strip-body::-webkit-scrollbar-thumb,
.photo-inspector-card::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(67,70,66,.14);
  background-clip: padding-box;
}

.photo-inspector-card,
.photo-inspector-card button,
.photo-inspector-card textarea,
.photo-inspector-card output { font-family: var(--body); }
.photo-inspector-card {
  padding: 15px;
  border: 1px solid #dfe0dc;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(35,38,35,.07);
}
.photo-inspector-head { margin-bottom: 13px; }
.photo-inspector-head span {
  color: #777a76;
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}
.photo-inspector-head h2 {
  margin: 3px 0 0;
  font-family: var(--body);
  font-size: 19px;
  font-weight: 650;
  line-height: 1.15;
}
.photo-inspector-head > button {
  width: 30px;
  height: 30px;
  border: 1px solid #dedfdb;
  border-radius: 7px;
  background: #fafaf7;
  font-size: 18px;
}
.item-inspector-common { gap: 12px; margin-bottom: 12px; padding-bottom: 12px; }
.item-inspector-colors { display: grid; grid-template-columns: 1fr; gap: 8px; }
.inspector-color-field {
  min-width: 0;
  padding: 9px;
  border: 1px solid #e6e7e3;
  border-radius: 8px;
  background: #fafaf8;
}
.inspector-color-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.inspector-color-head > span,
.item-inspector-segment > span,
.photo-edge-control > span,
.photo-inspector-fields > label,
.photo-sound-label label,
.photo-transform-readout > label {
  color: #666964;
  font-family: var(--body);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .04em;
  line-height: 1.25;
  text-transform: none;
}
.inspector-color-head button {
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: #5f6f9d;
  cursor: pointer;
  font-size: 9px;
}
.inspector-color-reference,
.inspector-color-more { display: grid; grid-template-columns: repeat(5, 26px); gap: 7px; }
.inspector-color-more {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid #e4e5e1;
}
.inspector-color-more[hidden] { display: none; }
.inspector-colour-swatch {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid #c8cbc7;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.45);
  cursor: pointer;
}
.inspector-colour-swatch.on { box-shadow: inset 0 0 0 2px rgba(255,255,255,.45), 0 0 0 2px #242624; }
.item-inspector-segment { grid-template-columns: minmax(0,1fr) repeat(3,auto); gap: 5px; }
.item-inspector-segment button,
.photo-edge-control button,
.photo-sound-label button {
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid #d9dad6;
  border-radius: 6px;
  background: #fff;
  color: #464944;
  font-size: 10px;
}
.item-inspector-segment button.on,
.photo-edge-control button.on { border-color: #242624; background: #242624; color: #fff; }
.photo-inspector-layout { grid-template-columns: 82px minmax(0,1fr); gap: 11px; }
.photo-inspector-preview { height: 104px; border-color: #e0e1dd; border-radius: 7px; background: #fafaf8; }
.photo-inspector-fields { gap: 7px; }
.photo-inspector-fields textarea {
  min-height: 46px;
  padding: 8px 9px;
  border: 1px solid #dedfdb;
  border-radius: 7px;
  background: #fcfcfa;
  color: #292b28;
  font-size: 11px;
  line-height: 1.4;
}
.photo-sound-label { margin-top: 2px; }
.photo-sound-label button { border: 0; color: #526aa6; }
.photo-transform-readout output { color: #4e514d; font-size: 10px; }
.photo-transform-readout input { accent-color: #242624; }
body.records-open.photo-inspector-open .photo-inspector { max-height: calc(100dvh - 286px); }

.records-drawer-shell { width: 124px; height: 54px; }
.records-tab {
  height: 54px;
  grid-template-columns: 34px minmax(0,1fr) 22px;
  grid-template-rows: 1fr;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid #d8dad6;
  border-radius: 10px;
  background: linear-gradient(#fff,#f6f6f3);
  box-shadow: 0 3px 8px rgba(35,38,35,.08);
}
.records-tab::before {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  content: "CREATIONS";
  color: #4c4f4b;
  font-size: 8px;
  font-weight: 650;
  letter-spacing: .08em;
}
.records-tab::after {
  grid-column: 1;
  grid-row: 1;
  width: 32px;
  height: 32px;
  border: 1px solid #b9bec1;
  background:
    radial-gradient(circle, #fff 0 13%, #cbd1d5 14% 22%, transparent 23%),
    conic-gradient(from 20deg,#e9edf0,#c7cdd0,#f9f9f8,#c8ced1,#e9edf0);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35);
}
.records-tab-label { display: none; }
.records-tab-count {
  grid-column: 3;
  grid-row: 1;
  min-width: 20px;
  height: 20px;
  margin: 0;
  padding: 0 4px;
  background: #ecebe6;
  color: #686b67;
}
.records-drawer-shell.open .records-tab {
  height: 42px;
  min-height: 42px;
  padding: 5px 8px;
  border-radius: 9px 9px 0 0;
  background: #fafaf7;
}
.records-drawer-shell.open .records-tab::before { margin: 0; content: "CREATIONS"; }
.records-drawer-shell.open .records-tab::after { width: 28px; height: 28px; }
.records-drawer {
  border-color: #d8dad6;
  border-radius: 0 0 9px 9px;
  background: #fafaf7;
  box-shadow: 0 6px 16px rgba(35,38,35,.08);
}

@media (min-width: 761px) {
  body:not(.archive-collapsed) .source-toolbar {
    border-right-color: transparent;
    border-radius: 16px 0 0 16px;
    box-shadow: none;
  }
  body:not(.archive-collapsed) .archive-shell {
    left: 81px;
    width: 278px;
    border-left: 0;
    border-radius: 0 14px 14px 0;
    box-shadow: none;
  }
  body:not(.archive-collapsed) .stage {
    --archive-width: 360px;
    grid-template-columns: 360px minmax(0,1fr);
  }
}

@media (max-width: 760px) {
  .appearance-reference-swatches { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .appearance-reference-swatches .appearance-swatch { grid-template-columns: 1fr; grid-template-rows: auto auto; min-height: 0; }
  .appearance-reference-swatches .appearance-swatch::before { width: 38px; }
  .appearance-more-palette { grid-template-columns: repeat(5, minmax(0,1fr)); }
  body.photo-inspector-open .records-drawer-shell { opacity: 1; pointer-events: auto; }
  body.records-open.photo-inspector-open .photo-inspector { max-height: calc(100dvh - 286px); }
}

/* Rams-inspired transport and a recognition-first photo editor. */
.cd-player-transport {
  width: 148px;
  height: 32px;
  min-height: 32px;
  gap: 2px;
  padding: 3px 4px;
  border: 1px solid #c9cac4;
  border-radius: 5px;
  background: #e8e7e1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.cd-player-transport .now-time {
  width: 34px;
  height: 24px;
  flex-basis: 34px;
  color: #686a66;
  font: 500 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .02em;
}
.cd-player-transport .tbtn,
.cd-player-transport #playPause {
  width: 25px;
  height: 24px;
  flex: 0 0 25px;
  border: 1px solid #c2c3bd;
  border-radius: 3px;
  background: #f5f4ee;
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(58,60,56,.08);
  transform: none;
  align-self: center !important;
}
.cd-player-transport #playPause {
  width: 37px;
  flex-basis: 37px;
  border-color: #b9bab4;
  background: #f8f7f1;
}
.cd-player-transport #playPause::before {
  margin-left: 2px;
  border-top-width: 5px;
  border-bottom-width: 5px;
  border-left: 8px solid #ef6849;
}
body.transport-playing .cd-player-transport #playPause {
  border-color: #3a3c38;
  background: #3a3c38;
}
body.transport-playing .cd-player-transport #playPause::before {
  width: 8px;
  height: 10px;
  background: linear-gradient(90deg,#fff 0 3px,transparent 3px 5px,#fff 5px 8px);
}
.cd-player-transport #stopBtn::before { width: 7px; height: 7px; background: #5d605b; }
.cd-player-transport #recBtn::before { width: 8px; height: 8px; background: #df5362; }
.cd-player-transport .tbtn:hover,
.cd-player-transport #playPause:hover { background: #fff; transform: none; }
body.transport-playing .cd-player-transport #playPause:hover { background: #3a3c38; }
.cd-player-transport .tbtn:active { transform: translateY(1px); }

.photo-inspector[data-kind="photo"] .item-inspector-colors { display: none; }
.photo-inspector[data-kind="photo"] .item-inspector-common { gap: 0; }
.photo-recognition-card,
.photo-auto-match-card {
  border: 1px solid #dfe0da;
  border-radius: 7px;
  background: #f1f1ec;
}
.photo-recognition-card { padding: 9px 10px; }
.photo-recognition-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.photo-recognition-card header > span,
.photo-auto-match-card span,
.photo-prompt-share > span {
  color: #62645f;
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.photo-recognition-card header small {
  color: #777a74;
  font-size: 8px;
}
#photoInspectorScene {
  display: block;
  color: #252724;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
}
.photo-auto-match-card {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  align-items: center;
  gap: 9px;
  padding: 8px 9px 8px 10px;
}
.photo-auto-match-card > div { min-width: 0; display: grid; gap: 4px; }
.photo-auto-match-card strong {
  overflow: hidden;
  color: #252724;
  font-size: 10px;
  font-weight: 550;
  line-height: 1.35;
  text-overflow: ellipsis;
}
.photo-auto-match-card button {
  justify-self: start;
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid #bfc0ba;
  border-radius: 4px;
  background: #f8f7f1;
  color: #343632;
  cursor: pointer;
  font-size: 9px;
}
.photo-auto-match-card button:disabled { cursor: wait; opacity: .5; }
.photo-sound-label { align-items: flex-end; }
.photo-sound-label small {
  max-width: 140px;
  color: #777a74;
  font-size: 8px;
  line-height: 1.25;
  text-align: right;
}
.photo-prompt-share {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 1px 1px;
}
.photo-prompt-share output {
  color: #343632;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.photo-edge-control button[aria-busy="true"] { cursor: wait; opacity: .55; }

/* Rams-style performance instrument. */
body.mode-keys .dock {
  z-index: 72;
  bottom: 12px;
  height: 128px;
  padding: 0 18px;
}
body.mode-keys .dock-keys { width: min(640px, calc(100vw - 36px)); }
body.mode-keys .midi-chassis {
  width: 100%;
  max-width: none;
  padding: 9px 11px 10px;
  border: 1px solid #aeb0aa;
  border-radius: 7px;
  background: #deddd6;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
body.mode-keys .keys-edge-toggle {
  top: -1px;
  width: 46px;
  height: 11px;
  border: 1px solid #b7b8b2;
  border-top: 0;
  border-radius: 0 0 4px 4px;
  background: #ecebe5;
  color: #62645f;
}
body.mode-keys .midi-panel {
  height: 31px;
  justify-content: flex-end;
  padding: 0 1px 7px;
  border-bottom: 1px solid #bebfb8;
}
body.mode-keys .keys-row { gap: 5px; }
body.mode-keys .key-volume {
  height: 24px;
  gap: 6px;
  padding: 0 7px;
  border: 1px solid #c2c3bc;
  border-radius: 3px;
  background: #eae9e3;
  color: #4f514d;
  font-size: 8px;
}
body.mode-keys .key-volume > span { font-family: var(--body); font-size: 8px; text-transform: uppercase; }
body.mode-keys .key-volume input { width: 62px; accent-color: #ef6849; }
body.mode-keys .key-volume input::-webkit-slider-runnable-track { background: #777974; }
body.mode-keys .key-volume input::-webkit-slider-thumb { border-radius: 50%; background: #ef6849; }
body.mode-keys .keys-toggle,
body.mode-keys .keys-refresh {
  height: 24px;
  padding: 0 8px;
  border: 1px solid #c2c3bc;
  border-radius: 3px;
  background: #efeee8;
  color: #4b4d49;
  font-family: var(--body);
  font-size: 8px;
  text-transform: uppercase;
}
body.mode-keys .keys-toggle:hover,
body.mode-keys .keys-refresh:hover { background: #faf9f4; }
body.mode-keys .keys-toggle.on,
body.mode-keys .keys-refresh.on { border-color: #e45f43; background: #ef6849; color: #fff; }
body.mode-keys .grain-icon { color: currentColor; font-size: 11px; }
body.mode-keys .keyboard {
  min-height: 74px;
  gap: 8px;
  padding: 8px 2px 0;
  border-radius: 0;
  background: transparent;
}
body.mode-keys .octave-bank {
  width: 56px;
  height: 64px;
  gap: 4px;
  padding: 6px 5px;
  border: 1px solid #bcbdb6;
  border-radius: 4px;
  background: #cecdc6;
}
body.mode-keys .oct-key {
  width: 21px;
  height: 28px;
  border: 1px solid #b6b7b0;
  border-radius: 3px;
  background: #f3f2ec;
  color: #333531;
  font-family: var(--body);
  font-size: 14px;
}
body.mode-keys .oct-key:hover { border-color: #e45f43; background: #ef6849; color: #fff; }
body.mode-keys .pkeys {
  --white-key-w: 50px;
  --white-key-h: 64px;
  --black-key-w: 29px;
  --black-key-h: 40px;
}
body.mode-keys .pkey {
  padding-bottom: 5px;
  border: 1px solid #aaa;
  border-radius: 2px;
  background: #f5f4ed;
  color: #555753;
}
body.mode-keys .pkey:nth-child(even),
body.mode-keys .pkey:first-child,
body.mode-keys .pkey:last-child { border-radius: 2px; }
body.mode-keys .pkey:hover { background: #fff; }
body.mode-keys .pkey.active { border-color: #df5c41; background: #ef6849; }
body.mode-keys .pkey.black,
body.mode-keys .pkey.black:nth-child(even) {
  border: 1px solid #262724;
  border-radius: 2px;
  background: #343531;
}
body.mode-keys .pkey.black:hover { background: #454641; }
body.mode-keys .pkey.black.active { border-color: #df5c41; background: #ef6849; }
body.mode-keys .pk-bind { color: #777974; font-family: var(--body); font-size: 7px; }

@media (min-width: 761px) {
  body.mode-keys:not(.dock-collapsed) .board-wrap {
    --flowjam-disc-size: min(520px, calc(100dvh - 360px), calc(100vw - 180px));
    box-sizing: border-box;
    padding-bottom: 150px;
  }
  body.mode-keys:not(.dock-collapsed) .board,
  body.mode-keys.archive-collapsed:not(.dock-collapsed) .board {
    width: var(--flowjam-disc-size) !important;
  }
  body.mode-keys:not(.dock-collapsed) .turntable-plinth {
    width: min(calc(var(--flowjam-disc-size) + 112px), calc(100% - 16px));
    height: min(calc(var(--flowjam-disc-size) + 112px), calc(100% - 8px));
    transform: translateY(-75px);
  }
  body.mode-keys:not(.dock-collapsed) .cd-player-transport {
    inset: 20px auto auto 24px;
  }
}

@media (max-width: 760px) {
  body.mode-keys .dock { bottom: 8px; height: 122px; padding: 0 8px; }
  body.mode-keys .dock-keys { width: calc(100vw - 16px); }
  body.mode-keys .midi-chassis { padding: 8px 6px; }
  body.mode-keys .midi-panel { height: 28px; padding-bottom: 5px; }
  body.mode-keys .key-volume { padding-inline: 4px; }
  body.mode-keys .key-volume input { width: 38px; }
  body.mode-keys .keys-toggle,
  body.mode-keys .keys-refresh { padding-inline: 5px; font-size: 7px; }
  body.mode-keys .keyboard { gap: 5px; padding-top: 6px; }
  body.mode-keys .pkeys {
    --white-key-w: calc((100vw - 91px) / 8);
    --white-key-h: 58px;
    --black-key-w: 21px;
    --black-key-h: 35px;
  }
  body.mode-keys .octave-bank { width: 50px; height: 58px; padding: 5px 3px; }
  body.mode-keys .oct-key { width: 20px; height: 25px; }
  body.mode-keys:not(.dock-collapsed) .board-wrap {
    --flowjam-disc-size: min(260px, calc(100dvh - 350px), calc(100vw - 134px));
    box-sizing: border-box;
    padding-bottom: 140px;
  }
  body.mode-keys .records-drawer-shell {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  body.photo-inspector-open .cd-player-transport {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* One industrial language across the entire player and its instruments. */
body {
  --machine-shell: #f3f1ea;
  --machine-panel: #fbfaf6;
  --machine-recess: #e8e6de;
  --machine-line: #cbc8be;
  --machine-line-soft: #dfdcd3;
  --machine-ink: #3e3e38;
  --machine-muted: #85837b;
  --machine-accent: #e69a19;
}
.turntable-plinth {
  border: 1px solid var(--machine-line);
  border-radius: 15px;
  background-color: var(--machine-shell);
  background-image: linear-gradient(180deg, rgba(255,255,255,.24), transparent 22%, rgba(68,70,66,.025));
  background-size: auto;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -1px 0 rgba(70,72,68,.08);
}
.turntable-plinth::before {
  inset: 43px 12px;
  border: 1px solid #dbd8cf;
  border-radius: 10px;
  background: var(--machine-panel);
  box-shadow: inset 0 1px 3px rgba(59,61,57,.08), inset 0 0 0 1px rgba(255,255,255,.35);
}
.turntable-plinth::after {
  content: "FLOWJAM  FJ-01";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  width: auto;
  height: 34px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 12px;
  border: 1px solid #d3d0c7;
  border-radius: 5px;
  background: var(--machine-recess);
  color: #8c8980;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42);
  font: 600 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .13em;
}
.cd-player-hinge {
  top: -6px;
  height: 12px;
  border-color: var(--machine-line);
  border-radius: 5px 5px 2px 2px;
  background: var(--machine-shell);
}
.cd-player-hinge::before,
.cd-player-hinge::after {
  top: 3px;
  height: 4px;
  border-color: #d0cdc4;
  background: #fffefa;
}
.board,
body.archive-collapsed .board,
html[data-cd-finish="solid"] .board,
html[data-cd-finish="solid"] body.archive-collapsed .board {
  border: 1px solid #989c9e;
  box-shadow:
    0 0 0 4px #c9cac4,
    0 0 0 5px #aeb1b1,
    inset 0 0 0 1px rgba(255,255,255,.2);
}
.board::after,
html[data-cd-finish="solid"] .board::after {
  border-color: rgba(255,255,255,.52);
  box-shadow: inset 0 0 0 1px rgba(51,54,51,.1);
}
.disc-center,
html[data-cd-finish="solid"] .disc-center {
  border-color: #c6c3ba;
  background: color-mix(in srgb, var(--disc-color) 18%, var(--machine-shell) 82%);
  box-shadow: 0 0 0 5px rgba(235,232,224,.82), inset 0 1px 0 rgba(255,255,255,.72);
}
.disc-center::before { border-color: rgba(73,76,71,.2); }
.disc-center::after { border-color: rgba(255,255,255,.62); }
.disc-hole,
html[data-cd-finish="solid"] .disc-hole {
  border-color: #c4c1b8;
  background: #fffefa;
  box-shadow: inset 0 1px 2px rgba(55,58,54,.13);
}
.cd-player-transport {
  z-index: 10;
  inset: auto auto 13px 22px;
  width: 148px;
  height: 32px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.cd-player-transport .now-time { color: var(--machine-muted); }
.cd-player-transport .tbtn,
.cd-player-transport #playPause {
  border-color: #cbc8bf;
  background: #f8f6f0;
  color: var(--machine-ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), inset 0 -1px 0 rgba(65,67,63,.08);
}
.cd-player-transport #playPause { background: #fffefa; }
.cd-player-transport #playPause::before { border-left-color: var(--machine-accent); }
body.transport-playing .cd-player-transport #playPause {
  border-color: var(--machine-ink);
  background: var(--machine-ink);
}
.surprise-btn {
  top: 18px;
  width: 28px;
  height: 28px;
  border: 1px solid #cfccc3;
  border-radius: 4px;
  background: #faf8f2;
  color: var(--machine-ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}
.surprise-btn:hover { border-color: var(--machine-accent); background: #fffefa; }
.surprise-btn .dice-doodle { width: 17px; height: 17px; filter: none; }

.records-tab {
  border-color: var(--machine-line);
  border-radius: 5px;
  background: var(--machine-shell);
  background-image: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.records-tab::before { color: var(--machine-ink); }
.records-tab::after {
  border-color: #c4c5c1;
  background:
    radial-gradient(circle, #f7f6f0 0 13%, #bec3c4 14% 22%, transparent 23%),
    conic-gradient(from 20deg,#eef0ef,#bfc4c5,#faf9f5,#c1c6c6,#eceeec);
}
.records-tab-count { background: var(--machine-accent); color: #fff; }
.records-drawer-shell.empty .records-tab-count { background: #e4e1d8; color: #66645d; }
.records-drawer-shell.open .records-tab { background: var(--machine-shell); }
.records-drawer {
  border-color: var(--machine-line);
  background: var(--machine-panel);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}

body.mode-keys .midi-chassis {
  border-color: var(--machine-line);
  background: var(--machine-shell);
}
body.mode-keys .keys-edge-toggle,
body.mode-keys .key-volume,
body.mode-keys .keys-toggle,
body.mode-keys .keys-refresh {
  border-color: #d0cdc4;
  background: #f8f6f0;
}
body.mode-keys .octave-bank { border-color: #cbc8bf; background: var(--machine-recess); }
body.mode-keys .keys-toggle.on,
body.mode-keys .keys-refresh.on,
body.mode-keys .oct-key:hover,
body.mode-keys .pkey.active,
body.mode-keys .pkey.black.active {
  border-color: #df5c41;
  background: var(--machine-accent);
}

@media (max-width: 760px) {
  .board-wrap,
  body.records-open .board-wrap {
    inset: 86px 8px 8px;
    border: 1px solid var(--machine-line);
    border-radius: 10px;
    background: var(--machine-shell);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
  }
  .cd-player-transport {
    position: fixed;
    inset: auto auto 84px 50%;
    border: 1px solid var(--machine-line);
    border-radius: 5px;
    background: var(--machine-recess);
    transform: translateX(-50%);
  }
  body.records-open .cd-player-transport { bottom: 188px; }
  body.mode-keys .cd-player-transport { bottom: 146px; }
}

/* CD Base template hierarchy: large samples, true DIY color, and patterns. */
.appearance-panel .shelf-head { margin-bottom: 10px; }
.base-template-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 3px;
  padding: 3px;
  border: 1px solid #dedbd2;
  border-radius: 7px;
  background: #f1efe9;
}
.base-template-tabs button {
  min-height: 32px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #69675f;
  cursor: pointer;
  font: 600 10px/1 var(--body);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.base-template-tabs button.on {
  background: #fffefa;
  color: #33342f;
  box-shadow: inset 0 0 0 1px #d4d1c8;
}
.base-template-panel[hidden] { display: none; }
.base-template-panel > .block-note {
  margin: 12px 2px 5px;
  font-size: 11px;
}
.appearance-reference-swatches {
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px 8px;
  padding: 12px 8px 14px;
}
.appearance-reference-swatches .appearance-swatch {
  min-height: 112px;
  align-content: center;
  gap: 8px;
  transition: transform .18s cubic-bezier(.2,.8,.2,1);
}
.appearance-reference-swatches .appearance-swatch::before {
  width: 82px;
  height: 82px;
  border: 2px solid #fffefa;
  outline: 1px solid #c4c6c3;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.28), 0 2px 4px rgba(45,47,44,.08);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.appearance-reference-swatches .appearance-swatch > span {
  font-size: 11px;
  line-height: 1.1;
}
.appearance-reference-swatches .appearance-swatch:hover {
  transform: translateY(-2px) !important;
}
.appearance-reference-swatches .appearance-swatch.on {
  transform: translateY(-3px) !important;
}
.appearance-reference-swatches .appearance-swatch.on::before {
  border-color: #fffefa;
  outline: 0;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.32),
    0 6px 12px rgba(65,62,54,.16),
    0 0 0 2px rgba(230,154,25,.22);
}
.appearance-palette-toggle {
  min-height: 40px;
  margin-top: 10px;
  border-color: #dedbd2;
  background: #fbfaf6;
  color: #4f504b;
  font-size: 11px;
}
.appearance-palette-toggle[aria-expanded="true"] {
  border-radius: 8px 8px 0 0;
  border-bottom-color: transparent;
  background: #f5f3ed;
}
.appearance-custom-editor {
  display: grid;
  gap: 11px;
  padding: 11px 10px 12px;
  border: 1px solid #dedbd2;
  border-radius: 0 0 8px 8px;
  background: #f5f3ed;
}
.appearance-custom-editor[hidden] { display: none; }
.appearance-custom-editor.on { box-shadow: inset 3px 0 0 rgba(230,154,25,.55); }
.appearance-custom-summary {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) 72px;
  align-items: center;
  gap: 8px;
}
.appearance-custom-preview {
  width: 32px;
  height: 32px;
  border: 2px solid #fffefa;
  border-radius: 50%;
  background: var(--custom-colour, #F58DB7);
  box-shadow: 0 0 0 1px #c5c6c1;
}
.appearance-custom-summary label,
.appearance-custom-slider span {
  color: #595b56;
  font: 600 9px/1.2 var(--body);
}
.appearance-custom-summary input {
  width: 72px;
  min-width: 0;
  box-sizing: border-box;
  padding: 5px 6px;
  border: 1px solid #d0cdc4;
  border-radius: 4px;
  background: #fffefa;
  color: #383a36;
  font: 500 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
}
.appearance-custom-slider {
  display: grid;
  grid-template-columns: 64px minmax(0,1fr);
  align-items: center;
  gap: 8px;
}
.appearance-custom-slider input { width: 100%; accent-color: var(--machine-accent); }
.base-pattern-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px 8px;
  padding: 12px 8px 14px;
  border: 1px solid #e4e1d8;
  border-radius: 10px;
  background: #faf9f5;
}
.base-pattern-swatch {
  min-height: 116px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 5px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #31332f;
  cursor: pointer;
  font: 500 11px/1.1 var(--body);
  transition: transform .18s cubic-bezier(.2,.8,.2,1);
}
.base-pattern-swatch i {
  position: relative;
  width: 82px;
  height: 82px;
  border: 2px solid #fffefa;
  border-radius: 50%;
  outline: 1px solid #c4c6c3;
  background-color: var(--sample-base,#fffdf8);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.22), 0 2px 4px rgba(45,47,44,.08);
}
.base-pattern-swatch[data-disc-finish="stars-pink"] i {
  background-color:#fff9c9;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 54 54'%3E%3Cpath fill='%23f58db7' d='m13.5 3 2.6 6.8 7.2.4-5.6 4.6 1.8 7-6-3.9-6 3.9 1.8-7-5.6-4.6 7.2-.4z'/%3E%3Cpath fill='%23f58db7' d='m40.5 30 2.6 6.8 7.2.4-5.6 4.6 1.8 7-6-3.9-6 3.9 1.8-7-5.6-4.6 7.2-.4z'/%3E%3C/svg%3E");
  background-size:54px 54px;
}
.base-pattern-swatch[data-disc-finish="stripes-pastel"] i {
  background-color:#fffdf8;
  background-image:repeating-linear-gradient(90deg,#cfeaf4 0 6px,#fffdf8 6px 14px,#fff7c8 14px 18px,#fffdf8 18px 25px);
}
.base-pattern-swatch[data-disc-finish="dots-cobalt"] i {
  background-color:#52a5ce;
  background-image:radial-gradient(circle,#b8cee8 0 2.5px,transparent 3.5px);
  background-size:19px 19px;
}
.base-pattern-swatch[data-disc-finish="plaid-pastel"] i {
  background-color:#fff8c9;
  background-image:
    repeating-linear-gradient(0deg,transparent 0 11px,rgba(207,232,242,.72) 11px 27px,transparent 27px 32px,rgba(243,195,211,.58) 32px 38px,transparent 38px 50px),
    repeating-linear-gradient(90deg,transparent 0 11px,rgba(207,232,242,.72) 11px 27px,transparent 27px 32px,rgba(243,195,211,.58) 32px 38px,transparent 38px 50px);
}
.base-pattern-swatch i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  border: 6px solid #cbd1d5;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%,-50%);
}
.base-pattern-swatch:hover { transform: translateY(-2px); }
.base-pattern-swatch.on { transform: translateY(-3px); }
.base-pattern-swatch.on i {
  outline: 0;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.25), 0 6px 12px rgba(65,62,54,.16), 0 0 0 2px rgba(230,154,25,.22);
}
html[data-cd-finish="dots-fine"] { --disc-dot-color:#876029; --disc-dot-size:5px; --disc-dot-gap:22px; }
html[data-cd-finish="dots-pink"] { --disc-dot-color:#F9D4F8; --disc-dot-size:6px; --disc-dot-gap:28px; }
html[data-cd-finish="dots-cobalt"] { --disc-dot-color:#B8CEE8; --disc-dot-size:2.5px; --disc-dot-gap:19px; }
html[data-cd-finish="dots-mono"] { --disc-dot-color:#F7E9B2; --disc-dot-size:6px; --disc-dot-gap:30px; }
html[data-cd-finish^="dots-"] .disc-surface {
  background-color: var(--disc-color);
  background-image: radial-gradient(circle, var(--disc-dot-color) 0 var(--disc-dot-size), transparent calc(var(--disc-dot-size) + 1px));
  background-size: var(--disc-dot-gap) var(--disc-dot-gap);
}
html[data-cd-finish="stars-pink"] .disc-surface {
  background-color:var(--disc-color);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 54 54'%3E%3Cpath fill='%23f58db7' d='m13.5 3 2.6 6.8 7.2.4-5.6 4.6 1.8 7-6-3.9-6 3.9 1.8-7-5.6-4.6 7.2-.4z'/%3E%3Cpath fill='%23f58db7' d='m40.5 30 2.6 6.8 7.2.4-5.6 4.6 1.8 7-6-3.9-6 3.9 1.8-7-5.6-4.6 7.2-.4z'/%3E%3C/svg%3E");
  background-size:54px 54px;
}
html[data-cd-finish="stripes-pastel"] .disc-surface {
  background-color:var(--disc-color);
  background-image:repeating-linear-gradient(90deg,#cfeaf4 0 6px,#fffdf8 6px 14px,#fff7c8 14px 18px,#fffdf8 18px 25px);
}
html[data-cd-finish="plaid-pastel"] .disc-surface {
  background-color:var(--disc-color);
  background-image:
    repeating-linear-gradient(0deg,transparent 0 11px,rgba(207,232,242,.72) 11px 27px,transparent 27px 32px,rgba(243,195,211,.58) 32px 38px,transparent 38px 50px),
    repeating-linear-gradient(90deg,transparent 0 11px,rgba(207,232,242,.72) 11px 27px,transparent 27px 32px,rgba(243,195,211,.58) 32px 38px,transparent 38px 50px);
  background-size:auto;
}
@media (max-width: 760px) {
  .appearance-reference-swatches { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .appearance-reference-swatches .appearance-swatch::before,
  .base-pattern-swatch i { width: 72px; height: 72px; }
  .appearance-reference-swatches .appearance-swatch { min-height: 102px; }
}

/* Cohesive studio shell: every persistent surface belongs to one machine. */
body:not(.home-open),
body:not(.home-open) .stage {
  background: #f7f6f1;
  background-image: none;
}
.topbar {
  height: 78px;
  box-sizing: border-box;
  padding: 10px 14px;
  border-bottom: 1px solid var(--machine-line);
  background: var(--machine-shell);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.55);
}
.brand {
  min-height: 42px;
  gap: 9px;
  padding: 0 14px 0 4px;
  border-right: 1px solid var(--machine-line-soft);
  color: var(--machine-ink);
}
.brand-word { font-family: var(--body); font-size: 20px; font-weight: 700; letter-spacing: 0; }
.brand-mark { width: 34px; height: 34px; }
.board-title {
  position: static;
  width: min(260px, 24vw);
  height: 36px;
  box-sizing: border-box;
  padding: 0 11px;
  border: 1px solid var(--machine-line-soft);
  border-radius: 4px;
  background: var(--machine-panel);
  color: var(--machine-ink);
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  box-shadow: inset 0 1px 2px rgba(64,63,58,.04);
}
.topbar-studio-tools {
  min-width: 0;
  gap: 10px;
  background: transparent;
}
.topbar .engine-status,
body.records-open .topbar .engine-status {
  max-width: 220px;
  flex-basis: 220px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  color: var(--machine-muted);
  font-family: var(--body);
  font-size: 9px;
}
.topbar .engine-status::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--machine-accent);
}
.performance-rail {
  min-height: 40px;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--machine-line);
  border-radius: 5px;
  background: var(--machine-recess);
}
.performance-caption { display: none; }
.topbar .performance-rail .rail-tool-btn {
  min-width: 76px;
  height: 32px;
  padding: 0 9px;
  border: 1px solid var(--machine-line-soft);
  border-radius: 3px;
  background: var(--machine-panel);
  color: var(--machine-ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.topbar .performance-rail .rail-tool-btn:hover { border-color: #b7b4aa; background: #fffefa; }
.topbar .performance-rail .rail-tool-btn.on {
  border-color: #d48d17;
  background: #fff8e8;
  color: var(--machine-ink);
  box-shadow: inset 3px 0 0 var(--machine-accent);
}
.topbar .performance-rail .rail-icon { width: 18px; height: 18px; }
.topbar .perform-name { font-family: var(--body); font-size: 10px; font-weight: 600; }

@media (min-width: 761px) {
  .source-toolbar {
    border-color: var(--machine-line);
    border-radius: 9px;
    background: var(--machine-shell);
    box-shadow: none;
  }
  .source-tool {
    border-radius: 5px;
    background: transparent !important;
  }
  .source-tool:hover { background: rgba(255,255,255,.55) !important; }
  .source-tool.on {
    background: var(--machine-recess) !important;
    box-shadow: inset 3px 0 0 var(--machine-accent) !important;
  }
  .source-tool.on::after { display: none; }
  .tool-asset { filter: none !important; box-shadow: none !important; }
  body:not(.archive-collapsed) .source-toolbar {
    border-right: 0;
    border-radius: 9px 0 0 9px;
  }
  body:not(.archive-collapsed) .archive-shell {
    border-left: 0;
    border-color: var(--machine-line);
    border-radius: 0 9px 9px 0;
  }
}
.archive-shell,
.archive-strip.is-open,
.archive-strip-body {
  background: var(--machine-shell) !important;
}
.archive-strip-body .rail-panel {
  box-sizing: border-box;
  background: var(--machine-panel);
}
.archive-strip-body .rail-panel.on { animation: none; }
.archive-strip-body .shelf-head h2 {
  margin: 0;
  font-family: var(--body);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0;
}
.archive-strip-body .block-note {
  color: var(--machine-muted);
  font-family: var(--body);
  font-size: 11px;
  line-height: 1.45;
}
.archive-action,
.crop-opt,
.tag-input,
.tag-ok,
.sticker,
.instrument {
  border-color: var(--machine-line-soft);
  border-radius: 4px;
  background: var(--machine-shell);
  color: var(--machine-ink);
  box-shadow: none;
}
.archive-action:hover,
.crop-opt.on,
.sticker:hover,
.instrument:hover { border-color: #b9b6ad; background: #fffefa; }
.archive-strip-body,
.photo-inspector-card { scrollbar-color: rgba(90,88,80,.12) transparent; }

.photo-inspector {
  inset: 90px 10px auto auto;
  width: 292px;
  max-height: none;
}
.photo-inspector-card {
  width: 100%;
  max-height: none;
  overflow: visible;
  box-sizing: border-box;
  border-color: var(--machine-line);
  border-radius: 9px;
  background: var(--machine-panel);
  box-shadow: none;
}
.photo-inspector-head > button,
.item-inspector-segment button,
.photo-edge-control button,
.photo-auto-match-card button {
  border-color: var(--machine-line-soft);
  background: var(--machine-shell);
  color: var(--machine-ink);
}
.item-inspector-segment button.on,
.photo-edge-control button.on {
  border-color: #d48d17;
  background: #fff8e8;
  color: var(--machine-ink);
  box-shadow: inset 3px 0 0 var(--machine-accent);
}
.inspector-color-field,
.photo-recognition-card,
.photo-auto-match-card,
.photo-inspector-fields textarea {
  border-color: var(--machine-line-soft);
  background: var(--machine-shell);
}
.inspector-colour-swatch.on { box-shadow: inset 0 0 0 2px rgba(255,255,255,.55), 0 0 0 2px rgba(230,154,25,.45); }

/* Library content uses the same quiet controls instead of alternating archive colors. */
.sticker,
.sticker:nth-child(4n),
.sticker:nth-child(4n + 1),
.sticker:nth-child(4n + 2),
.sticker:nth-child(4n + 3),
.instrument,
.instrument:nth-child(n) {
  border: 1px solid var(--machine-line-soft) !important;
  border-radius: 4px !important;
  background: var(--machine-shell) !important;
  color: var(--machine-ink) !important;
  box-shadow: none !important;
  transform: none;
}
.sticker:hover,
.instrument:hover {
  border-color: #c6a565 !important;
  background: #fffaf0 !important;
}
.sticker.custom { border-style: dashed !important; }
.merged-instruments.on {
  margin-top: 18px;
  padding-top: 17px;
  border-top: 1px solid var(--machine-line-soft);
}

/* A physical recording rack: one disc per saved creation. */
.records-drawer-shell {
  right: 18px;
  bottom: 4px;
  width: 164px;
  height: 60px;
}
.records-tab,
.records-drawer-shell.open .records-tab {
  width: 100%;
  height: 60px;
  min-height: 60px;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) 24px;
  grid-template-rows: 1fr;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border: 1px solid var(--machine-line);
  border-radius: 6px;
  background: var(--machine-shell);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.records-tab::before,
.records-tab::after,
.records-tab-icon,
.records-tab-arrow { display: none; }
.records-tab-disc {
  position: relative;
  grid-column: 1;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border: 1px solid #b9bdbe;
  border-radius: 50%;
  background: conic-gradient(from 20deg,#f6f7f5,#c4c9ca,#fff,#c7cccd,#f4f5f3);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.4);
}
.records-tab-disc::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border: 4px solid #c9cecf;
  border-radius: 50%;
  background: #fffefa;
  transform: translate(-50%,-50%);
}
.records-tab-label {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  display: block;
  margin: 0;
  overflow: hidden;
  color: var(--machine-ink);
  font: 650 9px/1 var(--body);
  letter-spacing: .06em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  writing-mode: initial;
  transform: none;
}
.records-tab-count {
  grid-column: 3;
  grid-row: 1;
  min-width: 22px;
  width: 22px;
  height: 22px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  align-self: center !important;
  border-radius: 50%;
  background: var(--machine-accent);
  color: #fff;
  font: 650 9px/1 var(--body);
}
.records-drawer-shell.empty .records-tab-count { background: #e3e0d7; color: #77746b; }
body.records-open .records-drawer-shell,
.records-drawer-shell.open {
  width: min(284px, calc(100vw - 28px));
  height: 190px;
}
.records-drawer-shell.open .records-tab {
  border-radius: 6px 6px 0 0;
}
.records-drawer-shell.open .records-tab-disc { width: 40px; height: 40px; flex: none; }
.records-drawer-shell.open .records-tab-label { margin: 0; }
.records-drawer {
  inset: 59px 0 0;
  padding: 10px 8px 8px;
  border: 1px solid var(--machine-line);
  border-top: 0;
  border-radius: 0 0 6px 6px;
  background: var(--machine-panel);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
.records-row {
  align-items: flex-start;
  gap: 10px;
  padding: 2px 1px 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(90,88,80,.12) transparent;
}
.creation-mini {
  width: 104px;
  min-width: 104px;
  height: 104px;
  flex: 0 0 104px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 74px auto;
  align-items: start;
  justify-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--machine-ink);
}
.creation-mini:hover { background: transparent; transform: translateY(-2px); }
.creation-mini-visual {
  position: relative;
  width: 72px;
  height: 72px;
  min-height: 72px;
  overflow: hidden;
  border: 2px solid #fffefa;
  border-radius: 50%;
  outline: 1px solid #b9bdbe;
  background: #d9dde0;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.25), 0 2px 5px rgba(45,47,44,.09);
}
.creation-mini-visual::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  border: 5px solid #c7cccd;
  border-radius: 50%;
  background: #fffefa;
  transform: translate(-50%,-50%);
}
.creation-mini-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.creation-mini-kind { display: none; }
.creation-mini-time {
  right: 3px;
  bottom: 3px;
  min-width: 26px;
  padding: 3px 5px;
  border-radius: 3px;
  background: rgba(54,55,51,.78);
  color: #fff;
  font-size: 8px;
}
.creation-mini-copy {
  width: 100%;
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 1px;
  text-align: center;
}
.creation-mini-title {
  width: 100%;
  overflow: hidden;
  font: 650 10px/1.15 var(--body);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.creation-mini-meta,
.creation-mini-open { display: none; }
.records-empty-guide { min-height: 104px; }

@media (min-width: 1144px) and (max-width: 1399px) {
  body.records-open .records-drawer-shell,
  .records-drawer-shell.open { width: clamp(148px, calc(50vw - 434px), 284px); }
  .creation-mini { width: 104px; min-width: 104px; flex-basis: 104px; grid-template-columns: 1fr; }
}

/* Desktop inspector expands into all available right-side space and only scrolls when genuinely necessary. */
@media (min-width: 761px) {
  .photo-inspector {
    right: 10px;
    width: clamp(292px, calc((100vw - 832px) / 2 - 12px), 380px);
    max-height: calc(100dvh - 104px);
  }
  .photo-inspector-card {
    max-height: calc(100dvh - 104px);
    overflow-y: auto;
    scrollbar-width: none;
  }
  .photo-inspector-card::-webkit-scrollbar { width: 0; }
}

@media (max-width: 760px) {
  .records-drawer-shell { right: 8px; bottom: 10px; width: 126px; height: 54px; }
  .records-tab { height: 54px; min-height: 54px; grid-template-columns: 36px minmax(0,1fr) 22px; padding: 6px 7px; }
  .records-tab-disc { width: 34px; height: 34px; }
  body.records-open .records-drawer-shell,
  .records-drawer-shell.open { width: calc(100vw - 16px); height: 174px; }
  .records-drawer { inset: 53px 0 0; }
}

/* Final material pass: depth comes from surfaces, not boxes and outlines. */
body {
  --surface-high: #fffefa;
  --surface-main: #f5f3ed;
  --surface-low: #e9e7df;
  --surface-well: #dfddd5;
  --surface-shadow: rgba(50, 48, 42, .12);
  --surface-shadow-soft: rgba(50, 48, 42, .07);
}
body:not(.home-open),
body:not(.home-open) .stage { background: #efeee9; }

.topbar {
  border: 0;
  background: linear-gradient(180deg, #fffefa 0%, #f4f2eb 100%);
  box-shadow: 0 5px 18px var(--surface-shadow-soft), inset 0 1px 0 rgba(255,255,255,.95);
}
.brand { border: 0; }
.board-title {
  border: 0;
  background: var(--surface-high);
  box-shadow: inset 0 2px 5px rgba(57,55,49,.07), 0 1px 0 rgba(255,255,255,.9);
}
.performance-rail {
  border: 0;
  background: var(--surface-well);
  box-shadow: inset 0 2px 5px rgba(57,55,49,.1), 0 1px 0 rgba(255,255,255,.8);
}
.topbar .performance-rail .rail-tool-btn {
  border: 0;
  background: var(--surface-main);
  box-shadow: 0 1px 3px rgba(48,46,41,.1), inset 0 1px 0 rgba(255,255,255,.9);
}
.topbar .performance-rail .rail-tool-btn:hover { border: 0; background: var(--surface-high); }
.topbar .performance-rail .rail-tool-btn.on {
  border: 0;
  background: #fff7e4;
  box-shadow: 0 2px 5px rgba(92,68,23,.13), inset 3px 0 0 var(--machine-accent);
}

@media (min-width: 761px) {
  .source-toolbar {
    border: 0;
    background: linear-gradient(180deg, #f8f6ef, #efede6);
    box-shadow: 0 8px 22px var(--surface-shadow), inset 0 1px 0 rgba(255,255,255,.9);
  }
  .source-tool { border: 0; }
  .source-tool:hover { background: rgba(255,255,255,.72) !important; }
  .source-tool.on {
    background: var(--surface-high) !important;
    box-shadow: 0 3px 8px rgba(50,48,42,.13), inset 3px 0 0 var(--machine-accent) !important;
  }
  body:not(.archive-collapsed) .source-toolbar { border-radius: 11px 0 0 11px; }
  body:not(.archive-collapsed) .archive-shell {
    border: 0;
    border-radius: 0 11px 11px 0;
    box-shadow: 9px 10px 28px var(--surface-shadow);
  }
}
.archive-shell,
.archive-strip.is-open,
.archive-strip-body { border: 0 !important; background: var(--surface-main) !important; }
.archive-strip-body .rail-panel { border: 0; background: var(--surface-high); }
.archive-action,
.crop-opt,
.tag-input,
.tag-ok,
.sticker,
.instrument,
.sticker:nth-child(n),
.instrument:nth-child(n) {
  border: 0 !important;
  background: var(--surface-main) !important;
  box-shadow: 0 2px 6px rgba(50,48,42,.08), inset 0 1px 0 rgba(255,255,255,.75) !important;
}
.archive-action:hover,
.crop-opt.on,
.sticker:hover,
.instrument:hover {
  border: 0 !important;
  background: var(--surface-high) !important;
  box-shadow: 0 4px 10px rgba(50,48,42,.12) !important;
}
.merged-instruments.on { border-top: 0; box-shadow: inset 0 10px 14px -16px rgba(45,43,38,.35); }

.base-template-tabs {
  border: 0;
  background: var(--surface-well);
  box-shadow: inset 0 2px 5px rgba(57,55,49,.1);
}
.base-template-tabs button.on {
  background: var(--surface-high);
  box-shadow: 0 2px 5px rgba(50,48,42,.12), inset 0 1px 0 rgba(255,255,255,.9);
}
.appearance-reference-swatches,
.base-pattern-grid {
  border: 0;
  background: var(--surface-main);
  box-shadow: inset 0 2px 8px rgba(57,55,49,.06);
}
.appearance-reference-swatches .appearance-swatch::before,
.base-pattern-swatch i {
  border: 0;
  outline: 0;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), 0 4px 9px rgba(48,46,41,.13);
}
.appearance-reference-swatches .appearance-swatch.on::before,
.base-pattern-swatch.on i {
  border: 0;
  outline: 0;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.38), 0 8px 16px rgba(52,49,42,.2), 0 0 0 3px rgba(230,154,25,.18);
}
.appearance-palette-toggle {
  border: 0;
  background: var(--surface-main);
  box-shadow: 0 2px 6px rgba(50,48,42,.08), inset 0 1px 0 rgba(255,255,255,.75);
}
.appearance-palette-toggle[aria-expanded="true"] { border: 0; background: var(--surface-low); }
.appearance-custom-editor {
  border: 0;
  background: var(--surface-low);
  box-shadow: inset 0 2px 6px rgba(57,55,49,.08);
}
.appearance-custom-preview { border: 0; box-shadow: inset 0 0 0 2px rgba(255,255,255,.5), 0 2px 6px rgba(45,43,38,.14); }
.appearance-custom-summary input {
  border: 0;
  background: var(--surface-high);
  box-shadow: inset 0 2px 4px rgba(57,55,49,.08);
}

.turntable-plinth {
  border: 0;
  background: linear-gradient(145deg, #fffefa, #eeeae1);
  box-shadow: 0 16px 38px rgba(48,46,41,.14), inset 0 1px 0 #fff, inset 0 -2px 3px rgba(56,54,48,.06);
}
.turntable-plinth::before {
  border: 0;
  background: var(--surface-high);
  box-shadow: inset 0 5px 14px rgba(54,52,46,.08), inset 0 -1px 0 rgba(255,255,255,.9);
}
.turntable-plinth::after {
  border: 0;
  background: var(--surface-well);
  box-shadow: inset 0 3px 7px rgba(54,52,46,.09), 0 1px 0 rgba(255,255,255,.75);
}
.cd-player-hinge { border: 0; background: var(--surface-main); box-shadow: 0 2px 5px rgba(45,43,38,.14), inset 0 1px 0 #fff; }
.cd-player-hinge::before,
.cd-player-hinge::after { border: 0; box-shadow: inset 0 2px 4px rgba(55,53,47,.08); }
.cd-player-transport .tbtn,
.cd-player-transport #playPause {
  border: 0;
  background: var(--surface-main);
  box-shadow: 0 2px 5px rgba(45,43,38,.13), inset 0 1px 0 #fff;
}
body.transport-playing .cd-player-transport #playPause { border: 0; }
.surprise-btn {
  border: 0;
  background: var(--surface-main);
  box-shadow: 0 3px 8px rgba(45,43,38,.13), inset 0 1px 0 #fff;
}
.surprise-btn:hover { border: 0; background: var(--surface-high); }

.photo-inspector-card {
  border: 0;
  background: linear-gradient(150deg, #fffefa, #f0eee7);
  box-shadow: 0 14px 34px var(--surface-shadow), inset 0 1px 0 #fff;
}
.photo-inspector-head > button,
.item-inspector-segment button,
.photo-edge-control button,
.photo-auto-match-card button {
  border: 0;
  background: var(--surface-main);
  box-shadow: 0 2px 6px rgba(50,48,42,.09), inset 0 1px 0 rgba(255,255,255,.8);
}
.item-inspector-segment button.on,
.photo-edge-control button.on {
  border: 0;
  background: #fff7e4;
  box-shadow: 0 3px 8px rgba(80,60,22,.12), inset 3px 0 0 var(--machine-accent);
}
.inspector-color-field,
.photo-recognition-card,
.photo-auto-match-card {
  border: 0;
  background: var(--surface-main);
  box-shadow: inset 0 2px 6px rgba(57,55,49,.06);
}
.photo-inspector-fields textarea {
  border: 0;
  background: var(--surface-high);
  box-shadow: inset 0 2px 6px rgba(57,55,49,.08);
}
.inspector-colour-swatch { border: 0; box-shadow: inset 0 0 0 2px rgba(255,255,255,.45), 0 2px 5px rgba(45,43,38,.1); }

.records-tab,
.records-drawer-shell.open .records-tab {
  border: 0;
  background: linear-gradient(145deg, #faf8f2, #ece9e1);
  box-shadow: 0 8px 20px var(--surface-shadow), inset 0 1px 0 #fff;
}
.records-tab-disc { border: 0; box-shadow: inset 0 0 0 2px rgba(255,255,255,.4), 0 3px 7px rgba(45,43,38,.13); }
.records-drawer {
  border: 0;
  background: var(--surface-main);
  box-shadow: 0 12px 28px var(--surface-shadow), inset 0 1px 0 #fff;
}
.creation-mini-visual {
  border: 0;
  outline: 0;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.3), 0 5px 12px rgba(45,43,38,.15);
}

body.mode-keys .midi-chassis {
  border: 0;
  background: linear-gradient(145deg, #fffefa, #ebe8df);
  box-shadow: 0 14px 30px var(--surface-shadow), inset 0 1px 0 #fff;
}
body.mode-keys .keys-edge-toggle,
body.mode-keys .key-volume,
body.mode-keys .keys-toggle,
body.mode-keys .keys-refresh,
body.mode-keys .octave-bank,
body.mode-keys .oct-key {
  border: 0;
  box-shadow: inset 0 2px 5px rgba(57,55,49,.07), 0 1px 0 rgba(255,255,255,.7);
}
body.mode-keys .pkey {
  border: 0;
  box-shadow: inset -1px 0 0 rgba(70,68,62,.08), 0 2px 4px rgba(45,43,38,.1);
}
body.mode-keys .pkey.black,
body.mode-keys .pkey.black:nth-child(even) {
  border: 0;
  box-shadow: 0 3px 6px rgba(25,24,21,.2), inset 0 1px 0 rgba(255,255,255,.08);
}

@media (max-width: 760px) {
  .board-wrap,
  body.records-open .board-wrap {
    border: 0;
    box-shadow: 0 8px 24px var(--surface-shadow), inset 0 1px 0 #fff;
  }
  .cd-player-transport { border: 0; box-shadow: inset 0 3px 7px rgba(54,52,46,.08); }
}

.topbar .board-title { border: 0 !important; }
.topbar .performance-rail {
  border: 0 !important;
  background: var(--surface-well) !important;
  box-shadow: inset 0 2px 5px rgba(57,55,49,.1), 0 1px 0 rgba(255,255,255,.8) !important;
}
.records-tab .records-tab-label,
.records-tab .records-tab-count { align-self: center !important; }

.photo-inspector-preview {
  border: 0;
  background: var(--surface-low);
  box-shadow: inset 0 2px 7px rgba(57,55,49,.08), 0 1px 0 rgba(255,255,255,.8);
}
body.mode-keys .midi-panel { border-bottom: 0; }

@media (max-width: 760px) {
  .board-wrap,
  body.records-open .board-wrap {
    --flowjam-disc-size: max(190px, min(calc(100dvh - 180px), calc(100vw - 134px)));
    place-items: center;
  }
  .board,
  body.archive-collapsed .board,
  html[data-cd-finish] .board,
  html[data-cd-finish] body.archive-collapsed .board {
    width: var(--flowjam-disc-size) !important;
    max-width: calc(100vw - 134px);
  }
}

/* Studio is the machine: one top console and one continuous deck. */
body:not(.home-open) .topbar {
  background: linear-gradient(180deg, #fffefa 0%, #f1efe8 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96), inset 0 -1px 0 rgba(67,64,57,.08);
}
body:not(.home-open) .stage {
  background: linear-gradient(145deg, #f7f5ef 0%, #ebe8df 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 12px 24px -22px rgba(43,41,36,.45);
}
.topbar .machine-top-transport {
  position: static;
  inset: auto;
  width: 190px;
  height: 44px;
  min-height: 44px;
  flex: 0 0 190px;
  box-sizing: border-box;
  gap: 4px;
  padding: 6px;
  border-radius: 7px;
  background: var(--surface-well);
  box-shadow: inset 0 3px 7px rgba(57,55,49,.11), 0 1px 0 rgba(255,255,255,.85);
  transform: none;
}
.topbar .machine-top-transport .now-time {
  width: 42px;
  flex-basis: 42px;
  color: var(--machine-ink);
  font-size: 9px;
}
.topbar .machine-top-transport .tbtn,
.topbar .machine-top-transport #playPause {
  width: 34px;
  height: 32px;
  flex: 0 0 34px;
}
.topbar .machine-top-transport #playPause {
  width: 40px;
  flex-basis: 40px;
  background: var(--surface-high);
}
.topbar .performance-caption {
  display: block;
  padding: 0 5px;
  color: var(--machine-muted);
  font: 650 7px/1 var(--body);
  letter-spacing: .12em;
}
.turntable-plinth {
  width: min(calc(var(--flowjam-disc-size) + 46px), calc(100% - 210px));
  height: min(calc(var(--flowjam-disc-size) + 46px), calc(100% - 20px));
  border-radius: 50%;
  background: var(--surface-well);
  box-shadow: inset 0 12px 28px rgba(48,46,40,.13), inset 0 -2px 0 rgba(255,255,255,.78), 0 1px 0 rgba(255,255,255,.8);
}
.turntable-plinth::before,
.turntable-plinth::after,
.cd-player-hinge,
.cd-player-display { display: none; }

@media (min-width: 761px) {
  body:not(.home-open) .topbar {
    padding: 10px 18px;
  }
  body:not(.home-open) .stage {
    top: auto;
    height: calc(100dvh - 78px);
  }
  body:not(.home-open) .board-wrap,
  body.records-open:not(.home-open) .board-wrap {
    inset: 78px 0 0;
  }
  .source-toolbar {
    position: fixed;
    z-index: 66;
    left: 0;
    top: 78px;
    bottom: 0;
    width: 88px;
    height: auto;
    box-sizing: border-box;
    display: grid;
    grid-template-rows: repeat(5, minmax(68px, 1fr));
    align-items: stretch;
    gap: 0;
    padding: 12px 10px;
    border-radius: 0 !important;
    background: linear-gradient(90deg, #f2efe7 0%, #e6e3da 100%);
    box-shadow: inset -1px 0 0 rgba(61,59,53,.08), inset 1px 0 0 rgba(255,255,255,.72) !important;
  }
  .source-tool {
    width: 68px;
    height: auto;
    min-height: 68px;
    border-radius: 8px;
    background: transparent !important;
    box-shadow: none !important;
  }
  .source-tool + .source-tool { box-shadow: inset 0 1px 0 rgba(62,59,52,.055) !important; }
  .source-tool:hover { background: rgba(255,255,255,.5) !important; }
  .source-tool.on {
    background: var(--surface-high) !important;
    box-shadow: 0 4px 12px rgba(50,48,42,.13), inset 3px 0 0 var(--machine-accent) !important;
  }
  .source-tool .tool-asset { width: 42px; height: 42px; }
  .archive-shell,
  body.archive-collapsed .archive-shell,
  body:not(.archive-collapsed) .archive-shell {
    position: fixed;
    z-index: 64;
    left: 88px;
    top: 78px;
    bottom: 0;
    width: 304px;
    height: auto;
    border-radius: 0 !important;
    background: linear-gradient(90deg, #f3f1ea, #ece9e1) !important;
    box-shadow: inset -1px 0 0 rgba(61,59,53,.08), 12px 0 26px rgba(50,48,42,.08) !important;
  }
  body.archive-collapsed .archive-shell {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-18px);
  }
  body:not(.archive-collapsed) .source-toolbar { border-radius: 0 !important; }
  .photo-inspector {
    right: 88px;
    top: 78px;
    width: clamp(292px, calc((100vw - 832px) / 2 - 12px), 380px);
    max-height: calc(100dvh - 78px);
  }
  .photo-inspector-card {
    border-radius: 0 0 0 12px;
    box-shadow: -12px 12px 28px rgba(50,48,42,.1), inset 1px 0 0 rgba(255,255,255,.74);
  }
  .records-drawer-shell {
    z-index: 67;
    right: 0;
    bottom: 0;
    width: 88px;
    height: calc(100dvh - 78px);
  }
  .records-tab,
  .records-drawer-shell.open .records-tab {
    position: absolute;
    inset: 0;
    width: 88px;
    height: 100%;
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: 52px auto 26px;
    align-content: center;
    justify-items: center;
    gap: 14px;
    padding: 16px 10px;
    border-radius: 0;
    background: linear-gradient(270deg, #f2efe7 0%, #e6e3da 100%);
    box-shadow: inset 1px 0 0 rgba(61,59,53,.08), inset -1px 0 0 rgba(255,255,255,.72);
  }
  .records-tab-disc,
  .records-drawer-shell.open .records-tab-disc {
    grid-column: 1;
    grid-row: 1;
    width: 50px;
    height: 50px;
  }
  .records-tab-label,
  .records-drawer-shell.open .records-tab-label {
    grid-column: 1;
    grid-row: 2;
    align-self: center !important;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    overflow: visible;
    font-size: 9px;
    letter-spacing: .14em;
  }
  .records-tab-count,
  .records-drawer-shell.open .records-tab-count {
    grid-column: 1;
    grid-row: 3;
  }
  body.records-open .records-drawer-shell,
  .records-drawer-shell.open {
    width: 372px;
    height: calc(100dvh - 78px);
  }
  .records-drawer-shell.open .records-tab {
    right: 0;
    left: auto;
    width: 88px;
    height: 100%;
  }
  .records-drawer {
    inset: 0 88px 0 0;
    width: 284px;
    height: 100%;
    box-sizing: border-box;
    padding: 22px 14px;
    border-radius: 12px 0 0 0;
    background: linear-gradient(270deg, #f3f1ea, #ece9e1);
    box-shadow: -12px 0 28px rgba(50,48,42,.1), inset 1px 0 0 rgba(255,255,255,.72);
  }
  .records-row {
    height: 100%;
    align-content: start;
    flex-wrap: wrap;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

@media (min-width: 761px) {
  body:not(.home-open) {
    --machine-rail-size: 88px;
    --machine-bay-size: clamp(200px, calc(50vw - 448px), 380px);
  }
  .archive-shell,
  body.archive-collapsed .archive-shell,
  body:not(.archive-collapsed) .archive-shell {
    left: var(--machine-rail-size);
    width: var(--machine-bay-size);
  }
  body:not(.archive-collapsed) .archive-shell {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
  }
  body:not(.archive-collapsed) .board-wrap,
  body.records-open .board-wrap,
  body.photo-inspector-open .board-wrap {
    --flowjam-disc-size: max(160px, min(calc(100dvh - 180px), calc(100vw - 176px - var(--machine-bay-size) - var(--machine-bay-size))));
  }
  body:not(.archive-collapsed) .board,
  body.records-open .board,
  body.photo-inspector-open .board {
    width: var(--flowjam-disc-size) !important;
  }
  body.mode-keys:not(.dock-collapsed):not(.archive-collapsed) .board-wrap,
  body.mode-keys.records-open:not(.dock-collapsed) .board-wrap,
  body.mode-keys.photo-inspector-open:not(.dock-collapsed) .board-wrap {
    --flowjam-disc-size: max(160px, min(520px, calc(100dvh - 360px), calc(100vw - 176px - var(--machine-bay-size) - var(--machine-bay-size))));
  }
  .photo-inspector {
    right: var(--machine-rail-size);
    width: var(--machine-bay-size);
  }
  .records-drawer-shell > .surprise-btn {
    position: absolute;
    z-index: 4;
    top: 20px;
    left: 18px;
    width: 52px;
    height: 52px;
    border-radius: 9px;
  }
  .records-tab,
  .records-drawer-shell.open .records-tab {
    top: 88px;
    height: calc(100% - 88px);
  }
  body.records-open .records-drawer-shell,
  .records-drawer-shell.open {
    width: calc(var(--machine-rail-size) + var(--machine-bay-size));
    height: calc(100dvh - 78px);
  }
  .records-drawer {
    inset: 0 var(--machine-rail-size) 0 auto;
    width: var(--machine-bay-size);
  }
  .records-drawer-shell.open .records-drawer,
  body.records-open .records-drawer-shell .records-drawer {
    opacity: 1;
    pointer-events: auto;
    transform: translate(0, 0);
  }
  body.photo-inspector-open .records-drawer-shell,
  body.photo-inspector-open .records-drawer-shell.open {
    height: calc(100dvh - 78px);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  body.photo-inspector-open .records-drawer-shell.open .records-drawer {
    top: auto;
    bottom: 0;
    height: 190px;
    border-radius: 12px 0 0 0;
  }
  body.records-open.photo-inspector-open .photo-inspector {
    max-height: calc(100dvh - 278px);
  }
  body.records-open.photo-inspector-open .photo-inspector-card {
    max-height: calc(100dvh - 278px);
    overflow-y: auto;
  }
}

@media (max-width: 760px) {
  body:not(.home-open) .topbar {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 8px;
    padding: 10px 8px;
  }
  body:not(.home-open) .topbar .brand {
    position: static;
    grid-column: 1;
    width: 36px;
    min-width: 36px;
    padding: 0;
  }
  body:not(.home-open) .topbar-studio-tools {
    grid-column: 2;
    min-width: 0;
    display: flex;
    justify-content: space-between;
    gap: 6px;
    overflow: visible;
  }
  .topbar .machine-top-transport {
    width: 164px;
    height: 40px;
    min-height: 40px;
    flex-basis: 164px;
    gap: 2px;
    padding: 4px;
  }
  .topbar .machine-top-transport .now-time,
  .topbar .performance-caption { display: none; }
  .topbar .machine-top-transport .tbtn,
  .topbar .machine-top-transport #playPause {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }
  .topbar .machine-top-transport #playPause {
    width: 36px;
    flex-basis: 36px;
  }
  .topbar .performance-rail {
    width: 84px;
    min-width: 84px;
    flex: 0 0 84px;
  }
  .topbar .performance-rail .rail-tool-btn {
    width: 36px;
    min-width: 36px;
    padding: 0;
  }
  .topbar .perform-name { display: none; }
  .turntable-plinth {
    width: calc(var(--flowjam-disc-size) + 28px);
    height: calc(var(--flowjam-disc-size) + 28px);
    max-width: calc(100vw - 106px);
    max-height: calc(100vw - 106px);
  }
  .records-drawer-shell > .surprise-btn {
    position: absolute;
    z-index: 4;
    top: 7px;
    left: -48px;
    width: 40px;
    height: 40px;
    border-radius: 7px;
  }
}

@media (min-width: 761px) {
  body.mode-keys:not(.dock-collapsed) .board-wrap,
  body.mode-keys.archive-collapsed:not(.dock-collapsed) .board-wrap,
  body.mode-keys.records-open:not(.dock-collapsed) .board-wrap,
  body.mode-keys.photo-inspector-open:not(.dock-collapsed) .board-wrap {
    --flowjam-disc-size: min(520px, calc(100dvh - 360px), calc(100vw - 180px)) !important;
    box-sizing: border-box;
    padding-bottom: 150px !important;
  }
  body.mode-keys:not(.dock-collapsed) .board,
  body.mode-keys.archive-collapsed:not(.dock-collapsed) .board,
  body.mode-keys.records-open:not(.dock-collapsed) .board,
  body.mode-keys.photo-inspector-open:not(.dock-collapsed) .board {
    width: var(--flowjam-disc-size) !important;
  }
  body.mode-keys:not(.dock-collapsed) .turntable-plinth {
    width: min(calc(var(--flowjam-disc-size) + 112px), calc(100% - 16px)) !important;
    height: min(calc(var(--flowjam-disc-size) + 112px), calc(100% - 8px)) !important;
    transform: translateY(-75px) !important;
  }
}

/* Roomsmith sidebar: loose source stickers peek from a warm paper sleeve. */
@media (min-width: 761px) {
  body {
    --roomsmith-drawer-width: clamp(270px, 22vw, 320px);
    --roomsmith-pocket-edge: 76px;
  }

  .source-toolbar,
  body.archive-collapsed .source-toolbar,
  body:not(.archive-collapsed) .source-toolbar {
    position: fixed;
    z-index: 78;
    top: 78px;
    bottom: 16px;
    left: -104px;
    width: 126px;
    height: auto;
    display: block;
    padding: 0;
    overflow: visible;
    border: 1px solid rgba(91,84,72,.12) !important;
    border-left: 0 !important;
    border-radius: 0 30px 30px 0 !important;
    background: rgba(218,214,205,.94) !important;
    box-shadow: 8px 12px 28px rgba(67,61,52,.12), inset -1px 0 rgba(255,255,255,.72) !important;
    backdrop-filter: blur(12px) saturate(.82);
    opacity: 0;
    visibility: hidden;
    pointer-events: auto;
    transform: none;
    transition: opacity .2s ease, visibility 0s linear .2s;
  }
  .source-toolbar::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 26px;
    right: 9px;
    bottom: 26px;
    width: 1px;
    background: rgba(93,86,74,.13);
    box-shadow: 1px 0 rgba(255,255,255,.5);
    pointer-events: none;
  }
  body.archive-collapsed .source-toolbar {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
  body:not(.archive-collapsed) .source-toolbar {
    z-index: 82;
    top: 90px;
    bottom: auto;
    left: 16px;
    width: calc(var(--roomsmith-drawer-width) - 32px);
    height: 54px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) 34px;
    align-items: center;
    gap: 2px;
    padding: 5px 6px;
    box-sizing: border-box;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: inset 0 -1px rgba(91,84,72,.12) !important;
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
  body:not(.archive-collapsed) .source-toolbar::after { display: none; }

  .source-tool,
  .source-tool + .source-tool,
  .source-tool:hover,
  .source-tool:focus-visible,
  .source-tool.on {
    --roomsmith-tool-x: 0px;
    --roomsmith-tool-left: 112px;
    --roomsmith-tool-y: 72px;
    --roomsmith-tool-r: 0deg;
    position: absolute;
    inset: 0 auto auto var(--roomsmith-tool-left);
    z-index: 1;
    width: 84px;
    height: 84px;
    min-height: 0;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0 !important;
    border-radius: 0;
    outline-offset: 3px;
    appearance: none;
    background: transparent !important;
    box-shadow: none !important;
    opacity: .96;
    pointer-events: auto;
    transform: translate(var(--roomsmith-tool-x), var(--roomsmith-tool-y)) rotate(var(--roomsmith-tool-r)) !important;
    transform-origin: center;
    transition: transform .24s cubic-bezier(.2,.78,.18,1), opacity .16s ease, filter .16s ease;
  }
  .source-tool:nth-child(1) { --roomsmith-tool-left: 70px; --roomsmith-tool-y: 178px; --roomsmith-tool-r: -13deg; z-index: 5; }
  .source-tool:nth-child(2) { --roomsmith-tool-left: 78px; --roomsmith-tool-y: 240px; --roomsmith-tool-r: 8deg; z-index: 9; }
  .source-tool:nth-child(3) { --roomsmith-tool-left: 66px; --roomsmith-tool-y: 296px; --roomsmith-tool-r: -7deg; z-index: 7; }
  .source-tool:nth-child(4) { --roomsmith-tool-left: 80px; --roomsmith-tool-y: 360px; --roomsmith-tool-r: 14deg; z-index: 8; }
  .source-tool:nth-child(5) { --roomsmith-tool-left: 70px; --roomsmith-tool-y: 418px; --roomsmith-tool-r: -10deg; z-index: 6; }
  .source-tool:hover,
  .source-tool:focus-visible { --roomsmith-tool-x: 18px; }
  .source-tool:has(+ .source-tool:hover),
  .source-tool:has(+ .source-tool:focus-visible),
  .source-tool:hover + .source-tool,
  .source-tool:focus-visible + .source-tool { --roomsmith-tool-x: 8px; }
  .source-tool:has(+ .source-tool + .source-tool:hover),
  .source-tool:has(+ .source-tool + .source-tool:focus-visible),
  .source-tool:hover + .source-tool + .source-tool,
  .source-tool:focus-visible + .source-tool + .source-tool { --roomsmith-tool-x: 3px; }
  .source-tool:hover,
  .source-tool:focus-visible,
  .source-tool.on {
    z-index: 12;
    opacity: 1;
    filter: saturate(1.06) drop-shadow(0 4px 5px rgba(0,0,0,.18));
  }
  .source-tool.on::after { display: none !important; }
  .source-tool .tool-object,
  .source-tool .tool-asset {
    width: 64px;
    height: 64px;
    max-width: none;
    max-height: none;
    object-fit: contain;
    box-shadow: none !important;
    filter: drop-shadow(0 3px 2px rgba(57,52,45,.12)) drop-shadow(0 8px 8px rgba(57,52,45,.08));
  }
  .source-tool:nth-child(1) .tool-object { width: 74px; height: 74px; }
  .source-tool:nth-child(2) .tool-object { width: 72px; height: 72px; }
  .source-tool:nth-child(3) .tool-object { width: 72px; height: 72px; }
  .source-tool:nth-child(4) .tool-object { width: 78px; height: 78px; }
  .source-tool:nth-child(5) .tool-object { width: 80px; height: 80px; }

  body:not(.archive-collapsed) .source-tool,
  body:not(.archive-collapsed) .source-tool + .source-tool,
  body:not(.archive-collapsed) .source-tool:hover,
  body:not(.archive-collapsed) .source-tool:focus-visible,
  body:not(.archive-collapsed) .source-tool.on {
    position: relative;
    inset: auto;
    z-index: 1;
    width: 100%;
    height: 40px;
    opacity: .72;
    filter: none;
    transform: none !important;
  }
  body:not(.archive-collapsed) .source-tool:hover,
  body:not(.archive-collapsed) .source-tool:focus-visible,
  body:not(.archive-collapsed) .source-tool.on {
    z-index: 2;
    border-radius: 8px;
    background: rgba(232,229,221,.58) !important;
    opacity: 1;
    box-shadow: none !important;
    transform: none !important;
  }
  body:not(.archive-collapsed) .source-tool .tool-object,
  body:not(.archive-collapsed) .source-tool .tool-asset {
    width: 30px !important;
    height: 30px !important;
    opacity: 1 !important;
    transform: none !important;
    filter: drop-shadow(0 2px 2px rgba(57,52,45,.1));
  }

  #archiveShell,
  .archive-shell,
  body.archive-collapsed #archiveShell,
  body:not(.archive-collapsed) #archiveShell {
    position: fixed;
    z-index: 80;
    top: 78px;
    bottom: 16px;
    left: 0;
    width: var(--roomsmith-drawer-width);
    height: auto;
    box-sizing: border-box;
    overflow: visible;
    border: 0 !important;
    border-radius: 0 22px 22px 0 !important;
    background: #fffefa !important;
    box-shadow: 12px 12px 34px rgba(48,45,39,.12), inset 0 1px 0 #fff !important;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: left .42s cubic-bezier(.2,.78,.18,1), background-color .18s ease, box-shadow .18s ease;
  }
  body.archive-collapsed #archiveShell,
  body.archive-collapsed .archive-shell {
    left: calc(var(--roomsmith-pocket-edge) - var(--roomsmith-drawer-width));
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none;
  }
  body:not(.archive-collapsed) #archiveShell,
  body:not(.archive-collapsed) .archive-shell {
    left: 0;
    background: #fffefa !important;
    pointer-events: auto;
  }

  .archive-head,
  body.archive-collapsed .archive-head,
  body:not(.archive-collapsed) .archive-head {
    position: absolute;
    z-index: 3;
    top: 24px;
    right: -54px;
    width: 54px;
    height: 160px;
    min-height: 0;
    display: block !important;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none;
    pointer-events: none;
  }
  .archive-heading,
  body.archive-collapsed .archive-heading,
  body:not(.archive-collapsed) .archive-heading {
    display: none !important;
  }
  #archiveToggle,
  .archive-toggle,
  body.archive-collapsed #archiveToggle,
  body:not(.archive-collapsed) #archiveToggle {
    position: absolute;
    inset: 0;
    width: 54px;
    height: 160px;
    min-height: 0;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 0;
    border: 1px solid rgba(84,78,68,.14) !important;
    border-left: 0 !important;
    border-radius: 0 14px 14px 0;
    background: #f4f0e7 !important;
    color: #4e4a43;
    box-shadow: 6px 8px 18px rgba(48,45,39,.12), inset 1px 0 0 rgba(255,255,255,.84) !important;
    font-size: 0;
    pointer-events: auto;
    cursor: ew-resize;
  }
  #archiveToggle::before,
  .archive-toggle::before {
    content: none;
  }
  #archiveToggle:hover,
  #archiveToggle:focus-visible,
  .archive-toggle:hover,
  .archive-toggle:focus-visible {
    background: #fffefa !important;
  }
  .archive-toggle-mark {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    font-size: 17px;
    line-height: 1;
    transform: none;
    transition: transform .2s ease;
  }
  body.archive-collapsed .archive-toggle-mark { transform: rotate(180deg); }

  body.archive-collapsed .archive-head {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none;
    transition: opacity .1s ease, visibility 0s linear .1s;
  }
  body.archive-collapsed #archiveToggle { display: none !important; }
  body:not(.archive-collapsed) .archive-head {
    display: none !important;
  }
  body.archive-collapsed #archiveGridClose { display: none !important; }
  body:not(.archive-collapsed) #archiveGridClose {
    position: relative;
    inset: auto;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #565149;
    cursor: pointer;
  }
  body:not(.archive-collapsed) #archiveGridClose:hover,
  body:not(.archive-collapsed) #archiveGridClose:focus-visible {
    background: rgba(78,73,64,.08);
  }
  body:not(.archive-collapsed) #archiveToggle {
    position: relative;
    inset: auto;
    width: 32px;
    height: 32px;
    justify-self: end;
    padding: 0;
    border: 0 !important;
    border-radius: 50%;
    background: transparent !important;
    box-shadow: none !important;
    color: #565149;
    cursor: pointer;
  }
  body:not(.archive-collapsed) #archiveToggle::before { content: none; }
  body:not(.archive-collapsed) #archiveToggle:hover,
  body:not(.archive-collapsed) #archiveToggle:focus-visible {
    background: rgba(78,73,64,.08) !important;
  }
  body:not(.archive-collapsed) .archive-toggle-mark {
    width: 32px;
    height: 32px;
    font-size: 21px;
    transform: none;
  }

  .archive-contents,
  body.archive-collapsed .archive-contents,
  body:not(.archive-collapsed) .archive-contents {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 18px 18px 18px 20px;
    overflow: hidden;
    transition: opacity .18s ease, visibility 0s linear .18s;
  }
  body.archive-collapsed .archive-contents {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  body:not(.archive-collapsed) .archive-contents {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    padding-top: 84px;
    transition-delay: 0s;
  }
  .archive-strip.is-open,
  .archive-strip-body,
  .archive-strip-body .rail-panel.on {
    width: 100%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    background: #fffefa !important;
  }
  .archive-strip-body { overflow-y: auto; }

  .board-wrap,
  body.archive-collapsed .board-wrap,
  body:not(.archive-collapsed) .board-wrap {
    inset: 78px 0 0 !important;
    transform: none !important;
  }
  body:not(.archive-collapsed) .board-wrap {
    --flowjam-disc-size: max(190px, min(calc(100dvh - 180px), calc(100vw - var(--roomsmith-drawer-width) - var(--roomsmith-drawer-width) - 96px))) !important;
  }
  body:not(.archive-collapsed) .board,
  html[data-cd-finish] body:not(.archive-collapsed) .board,
  html[data-cd-finish="solid"] body:not(.archive-collapsed) .board {
    width: var(--flowjam-disc-size) !important;
  }
}

@media (min-width: 761px) and (max-height: 700px) {
  body.archive-collapsed .source-toolbar { left: -104px; transform: none; }
  body:not(.archive-collapsed) .source-toolbar { left: 16px; transform: none; }
}

@media (min-width: 761px) and (prefers-reduced-motion: reduce) {
  .source-toolbar,
  .source-tool,
  #archiveShell,
  .archive-shell,
  .archive-contents,
  .archive-toggle-mark {
    transition: none !important;
  }
}

/* Precision pass: aligned tools, compact modes, and contextual editing. */
.topbar .topbar-surprise {
  display: grid;
  place-items: center;
  padding: 0;
  overflow: visible;
}
.topbar .topbar-surprise .dice-doodle {
  width: 20px;
  height: 20px;
  display: block;
  overflow: visible;
  transform: none;
}
.topbar .topbar-surprise .dice-doodle rect {
  vector-effect: non-scaling-stroke;
  stroke-width: 1.55;
}

@media (min-width: 761px) {
  .topbar-studio-tools {
    display: grid;
    grid-template-columns: 190px 44px minmax(0, 1fr) max-content;
    align-items: center;
    gap: 8px;
    overflow: visible;
  }
  .topbar .machine-top-transport,
  .topbar .topbar-surprise,
  .topbar .engine-status,
  .topbar .performance-rail { margin: 0; }
  .topbar .engine-status,
  body.records-open .topbar .engine-status {
    min-width: 0;
    width: auto;
    max-width: none;
    flex: none;
    justify-content: flex-end;
    padding-right: 2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .topbar .performance-rail {
    width: max-content;
    min-width: 0;
    flex: none;
    gap: 4px;
    padding: 4px;
  }
  .topbar .performance-caption { display: none !important; }
  .topbar .performance-rail .rail-tool-btn,
  .topbar .performance-rail .rail-tool-btn[data-tool="dj"] {
    width: auto;
    min-width: 0;
    height: 34px;
    flex: none;
    gap: 5px;
    padding: 0 9px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    box-shadow: none;
  }
  .topbar .performance-rail #modeKeys { width: 68px; }
  .topbar .performance-rail #camBtn { width: 76px; }
  .topbar .performance-rail .rail-tool-btn.on,
  .topbar .performance-rail .rail-tool-btn[data-tool="dj"].on {
    border-color: rgba(113, 91, 49, .24);
    background: #fff8e8;
    box-shadow: none;
  }
  .topbar .performance-rail .rail-tool-btn.err {
    border-color: rgba(180, 75, 62, .35);
    background: #fff0ed;
    box-shadow: none !important;
  }

  body:not(.archive-collapsed) .source-toolbar {
    height: 60px;
    grid-template-columns: repeat(5, minmax(0, 1fr)) 32px;
    align-items: center;
    gap: 2px;
    padding: 8px 6px;
  }
  body:not(.archive-collapsed) .source-tool,
  body:not(.archive-collapsed) .source-tool:hover,
  body:not(.archive-collapsed) .source-tool:focus-visible,
  body:not(.archive-collapsed) .source-tool.on {
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 8px;
  }
  body:not(.archive-collapsed) .source-tool.on {
    background: rgba(224, 220, 211, .62) !important;
    box-shadow: inset 0 0 0 1px rgba(88, 82, 72, .12) !important;
  }
  body:not(.archive-collapsed) .source-tool,
  body:not(.archive-collapsed) .source-tool:hover,
  body:not(.archive-collapsed) .source-tool:focus-visible,
  body:not(.archive-collapsed) .source-tool.on {
    height: 42px !important;
    min-height: 42px !important;
    transition: opacity .14s ease, background-color .14s ease, filter .14s ease !important;
  }
  body:not(.archive-collapsed) .source-tool .tool-object,
  body:not(.archive-collapsed) .source-tool .tool-asset {
    width: 34px !important;
    height: 34px !important;
    display: block;
    place-self: center;
    object-fit: contain;
    object-position: 50% 50%;
    opacity: 1 !important;
    transform: none !important;
  }
  body:not(.archive-collapsed) .source-tool .tool-asset-type { width: 32px !important; height: 32px !important; }
  body:not(.archive-collapsed) .source-tool .tool-asset-stickers { width: 36px !important; height: 36px !important; }
}

.item-inspector-colors[hidden],
.inspector-color-field[hidden] { display: none !important; }
.item-inspector-colors { gap: 14px; }
.inspector-color-field {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.inspector-color-field + .inspector-color-field {
  padding-top: 12px;
  border-top: 1px solid rgba(87, 83, 74, .12);
}
#itemTextStyle { grid-template-columns: minmax(0, 1fr) repeat(2, auto); }
#itemPhotoEffect { grid-template-columns: minmax(0, 1fr) repeat(3, auto); }
.item-inspector-segment button.on,
.photo-edge-control button.on {
  border: 1px solid rgba(113, 91, 49, .24);
  background: #fff8e8;
  box-shadow: none;
}

/* Simplified photo editor: preview, effect, edge, prompt, and mix only. */
.item-photo .card,
.item-photo.flipped .card {
  transform: none !important;
  transform-style: flat;
}
.item-photo .card-face {
  position: relative;
  inset: auto;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
}
.item-photo .card-back { display: none !important; }
.photo-inspector[data-kind="photo"] .photo-inspector-card {
  max-height: calc(100dvh - 78px);
  overflow-y: auto;
  padding: 16px;
}
.photo-inspector[data-kind="photo"] .item-inspector-common {
  margin-bottom: 12px;
  padding-bottom: 12px;
}
.photo-inspector[data-kind="photo"] #itemPhotoEffect {
  grid-template-columns: minmax(0,1fr) repeat(3,minmax(42px,auto));
  gap: 5px;
}
.photo-inspector[data-kind="photo"] #itemPhotoEffect button {
  min-height: 32px;
  padding: 0 8px;
}
.photo-inspector[data-kind="photo"] .photo-inspector-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 12px;
}
.photo-inspector[data-kind="photo"] .photo-inspector-preview {
  width: 100%;
  height: 132px;
  min-height: 132px;
  border-radius: 6px;
  background: var(--surface-well);
}
.photo-inspector[data-kind="photo"] .photo-inspector-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.photo-inspector[data-kind="photo"] .photo-inspector-fields { gap: 10px; }
.photo-inspector[data-kind="photo"] .photo-edge-control {
  min-height: 34px;
  margin: 0;
}
.photo-inspector[data-kind="photo"] .photo-edge-control button {
  min-height: 30px;
  padding: 0 10px;
}
.photo-inspector[data-kind="photo"] .photo-sound-label {
  align-items: center;
  margin: 2px 0 -2px;
}
.photo-inspector[data-kind="photo"] .photo-sound-label label,
.photo-inspector[data-kind="photo"] .photo-edge-control > span,
.photo-inspector[data-kind="photo"] .photo-prompt-share > span {
  color: var(--machine-muted);
  font: 650 9px/1 var(--body);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.photo-inspector[data-kind="photo"] #photoInspectorRemap {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--machine-line-soft);
  border-radius: 4px;
  background: var(--machine-shell);
  color: var(--machine-ink);
}
.photo-inspector[data-kind="photo"] #photoInspectorRemap svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.photo-inspector[data-kind="photo"] #photoInspectorPrompt {
  width: 100%;
  height: 132px;
  min-height: 132px;
  box-sizing: border-box;
  resize: vertical;
  padding: 10px;
  border: 1px solid var(--machine-line-soft);
  border-radius: 5px;
  background: #fffefa;
  color: var(--machine-ink);
  font: 500 12px/1.45 var(--body);
}
.photo-inspector[data-kind="photo"] #photoInspectorPrompt:focus {
  border-color: #bd7b12;
  outline: 2px solid rgba(230,154,25,.18);
  outline-offset: 0;
  box-shadow: none;
}
.photo-inspector[data-kind="photo"] .photo-prompt-share {
  min-height: 38px;
  display: grid;
  grid-template-columns: 32px minmax(0,1fr) 38px;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 0 0;
  border-top: 1px solid var(--machine-line-soft);
  background: transparent;
}
.photo-inspector[data-kind="photo"] #photoInspectorMix {
  width: 100%;
  height: 28px;
  margin: 0;
  accent-color: var(--machine-accent);
  cursor: ew-resize;
}
.photo-inspector[data-kind="photo"] #photoInspectorMix:disabled { cursor: default; opacity: .42; }
.photo-inspector[data-kind="photo"] #photoInspectorPromptShare {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--machine-ink);
  font: 650 10px/1 var(--body);
  text-align: right;
}
.item-photo[data-photo-effect="original"] .card-front img { filter:none!important; }
.item-photo[data-photo-effect="mono"] .card-front img { filter:grayscale(1) contrast(1.04)!important; }
.item-photo[data-photo-effect="warm"] .card-front img { filter:sepia(.28) saturate(1.12)!important; }

/* Cutouts land as tactile paper stickers. Four offset white silhouettes make
   the border follow the real transparent subject; the existing rough edge
   filter breaks the contour so it reads as torn paper rather than a glow. */
.item-photo.cutout .cutout-art {
  position:absolute;
  z-index:0;
  inset:0;
  display:grid;
  place-items:center;
  overflow:visible;
  pointer-events:none;
}
.item-photo.cutout[data-paper-edge="true"] .cutout-art { filter:url(#paper-torn); }
.item-photo.cutout[data-paper-edge="false"] .cutout-art { filter:drop-shadow(0 2px 2px rgba(39,50,41,.14)); }
.item-photo.cutout .cut-img { display:block;width:100%;height:100%;object-fit:contain;filter:none!important; }
.item-photo.cutout[data-photo-effect="mono"] .cut-img { filter:grayscale(1) contrast(1.04)!important; }
.item-photo.cutout[data-photo-effect="warm"] .cut-img { filter:sepia(.28) saturate(1.12)!important; }
.photo-paper-edge-control[hidden] { display:none!important; }
.photo-inspector-preview-art { width:100%;height:100%;display:grid;place-items:center; }
.photo-inspector[data-kind="photo"][data-cutout="true"][data-paper-edge="true"] .photo-inspector-preview-art { filter:url(#paper-torn); }
.photo-inspector[data-kind="photo"][data-cutout="true"][data-paper-edge="false"] .photo-inspector-preview-art { filter:drop-shadow(0 2px 2px rgba(39,50,41,.14)); }

/* Paper-white studio surfaces: content and the disc carry the colour. */
body:not(.home-open),
body:not(.home-open) .stage {
  background: #fff !important;
  background-image: none !important;
  box-shadow: none !important;
}
body:not(.home-open) .topbar {
  border-bottom-color: #e8e7e2 !important;
  background: #fff !important;
  background-image: none !important;
  box-shadow: none !important;
}
.archive-strip.is-open,
.archive-strip-body,
.archive-strip-body .rail-panel,
#archivePhotos .rail-panel,
#archiveDoodles .rail-panel {
  background: #fff !important;
}
.photo-polaroid {
  border-color: #e6e5e0;
  background: #fff;
  box-shadow: none;
}
@media (min-width: 761px) {
  .source-toolbar,
  body:not(.archive-collapsed) .source-toolbar {
    background: rgba(255,255,255,.97) !important;
    background-image: none !important;
  }
  body.archive-collapsed .source-toolbar {
    border-color: #ecebe6 !important;
    border-left: 0 !important;
    background: rgba(255,255,255,.97) !important;
    background-image: none !important;
    box-shadow: 8px 12px 28px rgba(67,61,52,.09), inset -1px 0 rgba(255,255,255,.82) !important;
  }
  body:not(.archive-collapsed) .source-toolbar {
    border: 0 !important;
    box-shadow: inset 0 -1px #ecebe6 !important;
  }
  body:not(.archive-collapsed) .source-tool.on {
    background: transparent !important;
    box-shadow: none !important;
    filter: saturate(1.06) drop-shadow(0 4px 5px rgba(0,0,0,.18));
  }
  .source-tool .tool-object,
  .source-tool .tool-asset {
    filter: drop-shadow(0 3px 2px rgba(57,52,45,.12)) drop-shadow(0 8px 8px rgba(57,52,45,.08)) !important;
  }
  #archiveShell,
  .archive-shell,
  body.archive-collapsed #archiveShell,
  body.archive-collapsed .archive-shell,
  body:not(.archive-collapsed) #archiveShell,
  body:not(.archive-collapsed) .archive-shell {
    border: 0 !important;
    border-right: 1px solid #ecebe6 !important;
    background: #fff !important;
    background-image: none !important;
    box-shadow: none !important;
    transition: left .42s cubic-bezier(.2,.78,.18,1), opacity .18s ease, transform .42s cubic-bezier(.2,.78,.18,1) !important;
  }
  body.archive-collapsed #archiveShell,
  body.archive-collapsed .archive-shell {
    border-right-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }
}

/* Canvas fills the Studio; the internal `card` value remains for saved-board compatibility. */
html.surface-switching .stage > .board-wrap {
  opacity: .97;
  transition: opacity .11s ease !important;
}
html.surface-switching #board,
html.surface-switching .turntable-plinth,
html.surface-switching #discFlip,
html.surface-switching #discItemLayer {
  transition: none !important;
}
html.surface-switching .stage > .stage-hand-fx { opacity: 0 !important; }

/* A pair of almost invisible registration marks makes rotation legible on solid CDs. */
html[data-cd-finish="solid"] body:not(.home-open) .disc-surface {
  background-color: var(--disc-color) !important;
  background-image:
    radial-gradient(circle at 65% 28%, rgba(255,255,255,.2) 0 2px, transparent 3px),
    radial-gradient(circle at 31% 73%, rgba(28,30,32,.1) 0 1.5px, transparent 2.5px) !important;
}

/* Canvas Camera DJ: the workbench remains the interaction layer but must not cover the live video. */
html[data-canvas-type="card"] body:not(.home-open).mode-dj.cam-mode-card .stage > .board-wrap {
  background: transparent !important;
}

/* Minimal desktop console: one quiet 52px row, with compact but usable controls. */
@media (min-width: 761px) {
  :root { --studio-topbar-height: 52px; }
  body:not(.home-open) .topbar {
    height: var(--studio-topbar-height) !important;
    min-height: var(--studio-topbar-height) !important;
    padding: 5px 14px !important;
    border-bottom-color: #efeee9 !important;
  }
  body:not(.home-open) .topbar .brand {
    height: 34px !important;
    min-height: 34px !important;
    gap: 7px !important;
    padding-right: 10px !important;
  }
  body:not(.home-open) .topbar .brand-mark { width: 27px !important; height: 27px !important; }
  body:not(.home-open) .topbar .brand-word { font-size: 1.02rem !important; }
  body:not(.home-open) .studio-canvas-choice {
    top: 9px !important;
    width: 104px !important;
    height: 32px !important;
    padding: 2px !important;
    border-color: #ecebe6 !important;
    background: #f4f3ef !important;
    box-shadow: none !important;
  }
  body:not(.home-open) .studio-canvas-choice button { height: 26px !important; }
  body:not(.home-open) .topbar-studio-tools {
    height: var(--studio-topbar-height) !important;
    gap: 5px !important;
  }
  body:not(.home-open) .topbar .machine-top-transport {
    width: 166px !important;
    flex: 0 0 166px !important;
    height: 34px !important;
    min-height: 34px !important;
    margin-right: 2px !important;
    padding: 0 8px 0 0 !important;
    gap: 2px !important;
  }
  body:not(.home-open) .topbar .machine-top-transport .now-time {
    width: 36px !important;
    flex-basis: 36px !important;
    height: 24px !important;
    padding-inline: 2px !important;
    font-size: 8px !important;
  }
  body:not(.home-open) .topbar .machine-top-transport .tbtn,
  body:not(.home-open) .topbar .machine-top-transport #playPause {
    width: 30px !important;
    height: 30px !important;
    flex-basis: 30px !important;
  }
  body:not(.home-open) .topbar .machine-top-transport #playPause {
    width: 36px !important;
    flex-basis: 36px !important;
  }
  body:not(.home-open) .topbar .performance-rail {
    width: 138px !important;
    min-width: 138px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 1px 0 !important;
    gap: 2px !important;
  }
  body:not(.home-open) .topbar .performance-rail .rail-tool-btn,
  body:not(.home-open) .topbar .performance-rail .rail-tool-btn[data-tool="dj"] {
    height: 30px !important;
    gap: 4px !important;
    padding-inline: 7px !important;
    border-radius: 5px !important;
  }
  body:not(.home-open) .topbar .performance-rail #modeKeys { width: 62px !important; }
  body:not(.home-open) .topbar .performance-rail #camBtn { width: 72px !important; }
  body:not(.home-open) .topbar .performance-rail .rail-icon { width: 16px !important; height: 16px !important; }
  body:not(.home-open) .topbar .perform-name { font-size: 9px !important; }
  body:not(.home-open) .topbar .topbar-surprise {
    top: 8px !important;
    right: 14px !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 5px !important;
  }
  body:not(.home-open) .topbar .topbar-surprise .dice-doodle { width: 17px !important; height: 17px !important; }
  body:not(.home-open) .topbar .engine-status,
  body.records-open:not(.home-open) .topbar .engine-status {
    right: 60px !important;
    max-width: 220px !important;
    font-size: 8px !important;
  }
  body:not(.home-open) .stage { height: calc(100dvh - var(--studio-topbar-height)) !important; }
  body:not(.home-open) .stage > .board-wrap,
  body.records-open:not(.home-open) .stage > .board-wrap { inset: var(--studio-topbar-height) 0 0 !important; }
  #photoInspector.photo-inspector,
  body.records-open.photo-inspector-open #photoInspector.photo-inspector { top: var(--studio-topbar-height) !important; }
  body.mode-keys .dock:not(.is-positioned) { top: calc(var(--studio-topbar-height) + 12px) !important; }
}

@media (min-width: 761px) and (max-width: 1023px) {
  body:not(.home-open) .topbar {
    grid-template-columns: 104px minmax(0,1fr) !important;
    grid-template-rows: 42px !important;
    gap: 6px !important;
    padding: 5px 10px !important;
  }
  body:not(.home-open) .studio-canvas-choice { width: 104px !important; }
  body:not(.home-open) .topbar-studio-tools { height: 42px !important; gap: 3px !important; }
  body:not(.home-open) .topbar .machine-top-transport { width: 150px !important; flex-basis: 150px !important; padding-right: 4px !important; }
  body:not(.home-open) .topbar .machine-top-transport .now-time { width: 28px !important; flex-basis: 28px !important; }
  body:not(.home-open) .topbar .performance-rail { width: 132px !important; min-width: 132px !important; flex-basis: 132px !important; }
  body:not(.home-open) .topbar .performance-rail #modeKeys { width: 58px !important; }
  body:not(.home-open) .topbar .performance-rail #camBtn { width: 70px !important; }
}
html[data-canvas-type="card"] body:not(.home-open) .board-wrap,
html[data-canvas-type="card"] body:not(.home-open).mode-dj .board-wrap,
html[data-canvas-type="card"] body:not(.home-open).archive-collapsed .board-wrap,
html[data-canvas-type="card"] body:not(.home-open):not(.archive-collapsed) .board-wrap {
  box-sizing: border-box !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  place-items: stretch !important;
  transition: none !important;
}
html[data-canvas-type="card"] body:not(.home-open) .board,
html[data-canvas-type="card"][data-cd-finish] body:not(.home-open) .board,
html[data-canvas-type="card"] body:not(.home-open).mode-dj .board,
html[data-canvas-type="card"][data-cd-finish] body:not(.home-open).mode-dj .board {
  position: relative !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background-color: #fff !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
}
html[data-canvas-type="card"] body:not(.home-open) .board::before,
html[data-canvas-type="card"] body:not(.home-open) .board::after { display: none !important; }
html[data-canvas-type="card"] body:not(.home-open).mode-dj.cam-mode-card .board,
html[data-canvas-type="card"][data-cd-finish] body:not(.home-open).mode-dj.cam-mode-card .board {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* One workbench, two interchangeable surfaces. */
.studio-canvas-choice {
  position: absolute;
  z-index: 12;
  top: 20px;
  left: calc(180px + min(230px, 24vw) + 12px);
  width: 112px;
  height: 38px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 2px;
  padding: 3px;
  border: 1px solid #e5e4de;
  border-radius: 5px;
  background: #efeee9;
  box-shadow: inset 0 1px 3px rgba(48,46,41,.07);
}
.studio-canvas-choice button {
  min-width: 0;
  height: 30px;
  display: grid;
  grid-template-columns: 1fr;
  place-content: center;
  align-items: center;
  gap: 3px;
  padding: 0 4px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: #77756e;
  font: 650 8px/1 var(--body);
  letter-spacing: 0;
  cursor: pointer;
}
.studio-canvas-choice button:hover,
.studio-canvas-choice button:focus-visible { background: rgba(255,255,255,.72); color: #1b1c1a; }
.studio-canvas-choice button:focus-visible { outline: 2px solid #73746f; outline-offset: 1px; }
.studio-canvas-choice button.is-selected {
  background: #fffefa;
  color: #1b1c1a;
  box-shadow: 0 1px 3px rgba(48,46,41,.11), inset 0 1px 0 #fff;
}
@media (max-width: 1320px) {
  .studio-canvas-choice { left: 180px; }
}
@media (min-width: 1321px) and (max-width: 1437px) {
  .topbar .board-title { width: 160px !important; }
  .studio-canvas-choice { left: 352px; }
}

html[data-canvas-type="card"] body:not(.home-open) .turntable-plinth,
html[data-canvas-type="card"] body:not(.home-open) .disc-flip { display: none !important; }
html[data-canvas-type="card"] body:not(.home-open) .disc-item-layer {
  transform: none !important;
  border-radius: 0 !important;
}
html[data-canvas-type="card"] body:not(.home-open) .disc-item-layer > .item {
  --disc-angle: 0deg !important;
}
html[data-canvas-type="disc"] body.mode-dj.cam-mode-disc .stage > .stage-camera { opacity: 0 !important; }
html[data-canvas-type="disc"] body.mode-dj.cam-mode-disc .stage {
  background: #fff !important;
}
html[data-canvas-type="card"] body.mode-dj.cam-mode-card .stage > .stage-camera {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
  opacity: 1 !important;
  transform: scaleX(-1);
}
html[data-canvas-type="card"] body.mode-dj.cam-mode-card .stage {
  background: #fff !important;
  box-shadow: none !important;
}
html[data-canvas-type="card"] body.mode-dj.cam-mode-card .board,
html[data-canvas-type="card"][data-cd-finish] body.mode-dj.cam-mode-card .board {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.board-file[data-canvas-type="card"]::before { content: "WORKING CANVAS"; }

@media (min-width: 761px) {
  html[data-canvas-type="disc"] body.mode-dj .board-wrap,
  html[data-canvas-type="disc"] body.mode-dj.archive-collapsed .board-wrap,
  html[data-canvas-type="disc"] body.mode-dj:not(.archive-collapsed) .board-wrap {
    --flowjam-disc-size: max(190px, min(calc(100dvh - 180px), calc(100vw - 134px))) !important;
    box-sizing: border-box !important;
    padding-right: 0 !important;
    place-items: center !important;
    transition: none !important;
  }
  html[data-canvas-type="disc"] body.mode-dj .board,
  html[data-canvas-type="disc"][data-cd-finish] body.mode-dj .board {
    width: var(--flowjam-disc-size) !important;
  }
}

/* Final utility-panel and top-console cascade. */
.topbar .performance-rail {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.topbar .performance-rail .rail-tool-btn,
.topbar .performance-rail .rail-tool-btn[data-tool="dj"] {
  border: 1px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}
.topbar .performance-rail .rail-tool-btn:hover,
.topbar .performance-rail .rail-tool-btn[data-tool="dj"]:hover { background: #f7f7f4 !important; }
.topbar .performance-rail .rail-tool-btn.on,
.topbar .performance-rail .rail-tool-btn[data-tool="dj"].on {
  border-color: rgba(189,123,18,.24) !important;
  background: #fffaf0 !important;
  box-shadow: none !important;
}

@media (min-width: 761px) {
  #recordsDrawer.records-drawer-shell.open,
  body.records-open #recordsDrawer.records-drawer-shell.open,
  body.photo-inspector-open #recordsDrawer.records-drawer-shell.open {
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    width: var(--utility-panel-width) !important;
    height: var(--utility-panel-height) !important;
  }
  #recordsDrawer.records-drawer-shell.open .records-tab,
  body.records-open #recordsDrawer.records-drawer-shell.open .records-tab {
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    width: 100% !important;
    height: 54px !important;
    min-height: 54px !important;
    grid-template-columns: 38px minmax(0,1fr) 22px !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 10px !important;
    border: 1px solid #ecebe6 !important;
    border-right: 0 !important;
    border-bottom-color: #f3f2ee !important;
    border-radius: 8px 0 0 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    transform: none !important;
  }
  #recordsDrawer.records-drawer-shell.open .records-drawer,
  body.records-open #recordsDrawer.records-drawer-shell.open .records-drawer,
  body.photo-inspector-open #recordsDrawer.records-drawer-shell.open .records-drawer {
    position: absolute !important;
    inset: 53px 0 0 !important;
    width: 100% !important;
    height: auto !important;
    padding: 12px 10px 10px !important;
    overflow: hidden !important;
    border: 1px solid #ecebe6 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

@media (min-width: 761px) {
  .source-toolbar,
  body.archive-collapsed .source-toolbar,
  body:not(.archive-collapsed) .source-toolbar {
    bottom: 0 !important;
    border-radius: 0 !important;
  }
  body.archive-collapsed .source-toolbar {
    box-shadow: inset -1px 0 #ecebe6 !important;
  }
  body:not(.archive-collapsed) .source-toolbar {
    grid-template-columns: repeat(5, minmax(0,1fr)) !important;
  }
  #archiveShell,
  .archive-shell,
  body.archive-collapsed #archiveShell,
  body.archive-collapsed .archive-shell,
  body:not(.archive-collapsed) #archiveShell,
  body:not(.archive-collapsed) .archive-shell {
    bottom: 0 !important;
    border-radius: 0 !important;
  }
  .topbar .machine-top-transport {
    width: 182px !important;
    flex: 0 0 182px !important;
    padding: 0 8px 0 0 !important;
    border: 0 !important;
    border-right: 1px solid #ecebe6 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  #archiveShell > #archiveGridClose {
    right: 0 !important;
    width: 24px !important;
    height: 44px !important;
    border: 0 !important;
    border-left: 1px solid #efeee9 !important;
    border-radius: 5px 0 0 5px !important;
    background: rgba(255,255,255,.74) !important;
    color: var(--machine-muted) !important;
    box-shadow: none !important;
    opacity: .42 !important;
  }
  #archiveShell > #archiveGridClose:hover,
  #archiveShell > #archiveGridClose:focus-visible {
    background: #f8f8f5 !important;
    color: var(--machine-ink) !important;
    opacity: 1 !important;
  }
}

@media (min-width: 761px) {
  .topbar .machine-top-transport {
    width: 190px !important;
    flex: 0 0 190px !important;
    box-sizing: border-box;
    padding: 5px !important;
    border: 1px solid #e7e6e1 !important;
    border-radius: 7px !important;
    background: #f8f8f5 !important;
    box-shadow: none !important;
  }
  .topbar .machine-top-transport #playPause {
    border: 1px solid #deddd8 !important;
    border-radius: 5px !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  .topbar .machine-top-transport .tbtn:not(#playPause) {
    border-radius: 4px !important;
    background: transparent !important;
  }
}

/* Photo import mode picker. */
.photo-drawer-head { position: relative; z-index: 12; }
.photo-add-menu { position: relative; }
.photo-add-files {
  box-sizing: border-box;
  padding: 0;
  border: 1px solid #deddd8;
  background: #fff;
  box-shadow: none;
  font-family: inherit;
  line-height: 1;
}
.photo-add-files:hover,
.photo-add-files[aria-expanded="true"] {
  border-color: #c8c6bf;
  background: #f8f8f5;
}
.photo-add-files:focus-visible { outline: 2px solid rgba(189,123,18,.42); outline-offset: 2px; }
.photo-add-popover {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  right: 0;
  width: 148px;
  box-sizing: border-box;
  display: grid;
  gap: 2px;
  padding: 5px;
  border: 1px solid #e6e5df;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(40,38,33,.12);
}
.photo-add-popover[hidden] { display: none; }
.photo-add-popover button {
  width: 100%;
  min-height: 38px;
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 9px;
  padding: 5px 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--machine-ink);
  font: 600 11px/1 var(--body);
  text-align: left;
  cursor: pointer;
}
.photo-add-popover button:hover,
.photo-add-popover button:focus-visible {
  outline: 0;
  background: #f4f3ee;
}
.photo-mode-icon {
  position: relative;
  width: 24px;
  height: 24px;
  display: block;
  box-sizing: border-box;
}
.photo-mode-frame {
  width: 21px;
  height: 24px;
  margin-left: 1px;
  border: 1px solid #77746c;
  background: #fff;
}
.photo-mode-frame::after {
  content: "";
  position: absolute;
  inset: 3px 3px 7px;
  background: #cbc9c2;
}
.photo-mode-cutout {
  width: 20px;
  height: 22px;
  margin-left: 2px;
  background: #c9c7c0;
  clip-path: polygon(47% 0, 74% 9%, 82% 28%, 100% 43%, 86% 65%, 88% 91%, 61% 100%, 39% 88%, 12% 93%, 8% 66%, 0 43%, 20% 26%, 24% 7%);
  filter: drop-shadow(1px 0 0 #77746c) drop-shadow(-1px 0 0 #77746c) drop-shadow(0 1px 0 #77746c) drop-shadow(0 -1px 0 #77746c);
}

/* Cutout photos are paper-edged stickers, never a second Polaroid frame. */
#photoTray .thumb.cut,
.booth-print.is-cutout .booth-print-image img {
  filter:
    drop-shadow(2px 0 0 #fff)
    drop-shadow(-2px 0 0 #fff)
    drop-shadow(0 2px 0 #fff)
    drop-shadow(0 -2px 0 #fff)
    drop-shadow(0 3px 3px rgba(35,40,44,.18)) !important;
}
#photoTray .thumb.cut {
  padding: 4px !important;
  object-fit: contain;
}
.booth-print.is-cutout {
  padding: 8px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.booth-print.is-cutout .booth-print-image {
  overflow: visible;
  border: 0;
  background: transparent;
}
.booth-print.is-cutout .booth-print-image img { object-fit: contain; }

/* Color and Pattern share one quiet two-column mini-CD system. */
.appearance-reference-swatches,
.base-pattern-grid {
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  align-items: start !important;
  gap: 12px 8px !important;
  padding: 4px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.appearance-reference-swatches .appearance-swatch,
.base-pattern-swatch {
  min-height: 98px !important;
  gap: 8px !important;
}
.appearance-reference-swatches .appearance-swatch::before,
.base-pattern-swatch i {
  width: 72px !important;
  height: 72px !important;
  box-sizing: border-box;
}

/* Standard HSV picker, expanded in flow below Custom. */
#appearanceMorePalette.appearance-custom-editor {
  position: static;
  width: calc(200% + 8px);
  height: auto;
  place-items: stretch;
  gap: 8px;
  margin: 7px 0 0 calc(-100% - 8px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.disc-sv-field,
.disc-hue-strip {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid rgba(38,39,42,.22);
  border-radius: 4px;
  outline: 0;
  cursor: crosshair;
  touch-action: none;
}
.disc-sv-field {
  height: 78px;
  background:
    linear-gradient(to top, #000, transparent),
    linear-gradient(to right, #fff, hsl(var(--picker-hue) 100% 50%));
}
.disc-channel-controls {
  display: grid;
  gap: 5px;
}
.disc-channel-controls label {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--machine-muted, #547462);
  font: 600 9px/1.2 var(--body);
}
.disc-channel-controls input[type="range"] {
  width: 100%;
  min-width: 0;
  margin: 0;
  accent-color: var(--fj-ui-line-focus, #76a6ce);
}
.disc-channel-controls output {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.disc-channel-controls input[type="range"]:focus-visible {
  outline: 2px solid var(--fj-ui-line-focus, #76a6ce);
  outline-offset: 2px;
}
.disc-hue-strip {
  height: 13px;
  background: linear-gradient(to right, #f44, #ffb52d, #f3ec46, #58c875, #42b9d5, #5f75e8, #be5dd8, #f44);
}
.disc-sv-field:focus-visible,
.disc-hue-strip:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--machine-accent); }
.disc-sv-handle,
.disc-hue-strip-handle {
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(35,36,33,.7), 0 1px 2px rgba(35,36,33,.22);
  pointer-events: none;
}
.disc-sv-handle {
  left: var(--sv-x);
  top: var(--sv-y);
  width: 11px;
  height: 11px;
  transform: translate(-50%,-50%);
}
.disc-hue-strip-handle {
  left: var(--hue-x);
  top: 50%;
  width: 8px;
  height: 17px;
  border-radius: 3px;
  transform: translate(-50%,-50%);
}

/* Keep the Custom label clear of the rainbow disc artwork. */
.appearance-custom-trigger > span {
  display: inline-flex;
  align-items: baseline;
}

/* The camera mode sits below the viewfinder, outside the captured image. */
.snap-mode-pick {
  position: static;
  z-index: auto;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 8px;
  background: #efeee9;
}
.snap-mode-button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--machine-muted);
  cursor: pointer;
}
.snap-mode-button:hover { background: rgba(255,255,255,.62); }
.snap-mode-button.on {
  outline: 0;
  background: #fff;
  color: var(--machine-ink);
  box-shadow: 0 1px 3px rgba(40,38,33,.1);
}
.snap-mode-button:focus-visible { outline: 2px solid #73746f; outline-offset: 1px; }
.snap-mode-button .photo-mode-icon { margin: 0; transform: scale(.72); }
.photo-mode-cutout-icon {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.photo-polaroid .snap-row,
.photo-polaroid:not(.camera-on) .snap-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 52px;
  padding: 0;
}
.photo-polaroid .snap-row::after { display: none; }
.photo-booth .camera-power,
.photo-polaroid:not(.camera-on) .camera-power,
.photo-polaroid .snap-go,
.photo-polaroid .snap-go:not(:disabled) {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--machine-ink);
  box-shadow: none;
}
.photo-polaroid:not(.camera-on) .camera-power:hover,
.photo-polaroid .snap-go:not(:disabled):hover { background: #efeee9; }
.photo-polaroid .camera-power.on { background: #e8e7e2; color: var(--machine-ink); }
.photo-polaroid:not(.camera-on) .camera-power,
.photo-polaroid .snap-go:not(:disabled) {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
  border-radius: 50%;
  background: var(--booth-accent);
  color: #2d2b25;
  box-shadow: 0 2px 5px rgba(93,64,18,.16);
}
.photo-polaroid:not(.camera-on) .camera-power:hover,
.photo-polaroid .snap-go:not(:disabled):hover {
  background: #eda529;
  transform: translateY(-1px);
}
.photo-polaroid .camera-power.on {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
  border-radius: 6px;
  background: #e8e7e2;
  box-shadow: none;
}
.base-template-tabs button.on {
  border-bottom-color: transparent !important;
  background: #f1f0eb !important;
  color: var(--machine-ink) !important;
  font-weight: 700;
}

/* Preset instruments stay in the first viewport; custom writing follows with air. */
.vibes-instruments { margin-top: 24px; }
.vibes-instruments .shelf-head { margin: 0 0 10px; }
.vibes-instruments .shelf-head h2 { font-size: 15px; }
.vibes-instruments .instrument-tray {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px;
}
.vibes-instruments .instrument {
  width: 56px;
  height: 50px;
  min-width: 0;
  justify-self: center;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}
.instrument .inst-emoji {
  display: block;
  font-family: sans-serif;
  font-size: 31px;
  line-height: 1;
  filter:
    drop-shadow(2px 0 0 #fff)
    drop-shadow(-2px 0 0 #fff)
    drop-shadow(0 2px 0 #fff)
    drop-shadow(0 -2px 0 #fff)
    drop-shadow(0 3px 3px rgba(35,40,44,.16));
}
.vibes-instruments .instrument:nth-child(odd) .inst-emoji { transform: rotate(-4deg); }
.vibes-instruments .instrument:nth-child(even) .inst-emoji { transform: rotate(4deg); }
.vibes-instruments .instrument:hover .inst-emoji { transform: translateY(-2px) rotate(0); }
.item.item-instrument {
  width: 62px;
  min-width: 62px;
  height: 62px;
  min-height: 62px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}
.item-instrument .inst-emoji {
  display: block;
  font-family: sans-serif;
  font-size: 40px;
  line-height: 1;
  filter:
    drop-shadow(2px 0 0 #fff)
    drop-shadow(-2px 0 0 #fff)
    drop-shadow(0 2px 0 #fff)
    drop-shadow(0 -2px 0 #fff)
    drop-shadow(0 4px 4px rgba(35,40,44,.2));
}
#archiveVibes .tag-adder { margin-top: 28px; }

/* Ambience is a loose set of emoji stickers, not another text-chip list. */
#ambientTray {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(4, minmax(0,1fr));
  justify-content: stretch;
  gap: 6px;
  padding-top: 8px;
}
#ambientTray .sticker.ambience-sticker {
  width: 42px;
  height: 48px;
  justify-self: center;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: sans-serif;
  font-size: 31px;
  line-height: 1;
  filter:
    drop-shadow(2px 0 0 #fff)
    drop-shadow(-2px 0 0 #fff)
    drop-shadow(0 2px 0 #fff)
    drop-shadow(0 -2px 0 #fff)
    drop-shadow(0 3px 3px rgba(35,40,44,.16)) !important;
}
#ambientTray .ambience-sticker:nth-child(odd) { transform: rotate(-4deg); }
#ambientTray .ambience-sticker:nth-child(even) { transform: rotate(4deg); }
#ambientTray .ambience-sticker:hover { transform: translateY(-2px) rotate(0); }
.item.item-note.ambience-item {
  width: 56px;
  min-width: 56px;
  height: 56px;
  min-height: 56px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: sans-serif;
  font-size: 38px;
  line-height: 1;
  filter:
    drop-shadow(2px 0 0 #fff)
    drop-shadow(-2px 0 0 #fff)
    drop-shadow(0 2px 0 #fff)
    drop-shadow(0 -2px 0 #fff)
    drop-shadow(0 4px 4px rgba(35,40,44,.2)) !important;
}

/* Playback is one control run, separated from performance inputs by one rule. */
@media (min-width: 761px) {
  .topbar .machine-top-transport {
    width: 190px !important;
    flex: 0 0 190px !important;
    height: 44px !important;
    margin-right: 6px !important;
    padding: 0 14px 0 0 !important;
    border: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

/* Desktop source palette: persistent object icons with a compact flyout. */
@media (min-width: 761px) {
  body:not(.home-open) {
    --source-palette-left: -46px;
    --source-palette-width: 92px;
    --source-flyout-left: 64px;
    --source-flyout-width: clamp(274px, 19.5vw, 288px);
  }

  .source-toolbar,
  body.archive-collapsed .source-toolbar,
  body:not(.archive-collapsed) .source-toolbar {
    position: fixed !important;
    z-index: 82 !important;
    inset: calc(50% + 39px) auto auto var(--source-palette-left) !important;
    width: var(--source-palette-width) !important;
    height: auto !important;
    max-height: calc(100dvh - 104px);
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(-50%) !important;
    transition: none !important;
  }
  .source-toolbar::before,
  .source-toolbar::after { display: none !important; }

  .source-tool,
  .source-tool + .source-tool,
  .source-tool:hover,
  .source-tool:focus-visible,
  .source-tool.on,
  body:not(.archive-collapsed) .source-tool,
  body:not(.archive-collapsed) .source-tool + .source-tool,
  body:not(.archive-collapsed) .source-tool:hover,
  body:not(.archive-collapsed) .source-tool:focus-visible,
  body:not(.archive-collapsed) .source-tool.on {
    position: relative !important;
    inset: auto !important;
    z-index: 1 !important;
    width: 92px !important;
    height: 56px !important;
    min-height: 56px !important;
    flex: 0 0 56px !important;
    display: grid !important;
    place-items: center !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    border: 1px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: background-color .16s ease, border-color .16s ease, opacity .16s ease, transform .16s ease !important;
  }
  .source-tool[hidden] { display: none !important; }
  .source-tool:hover,
  .source-tool:focus-visible {
    z-index: 2 !important;
    border-color: transparent !important;
    background: transparent !important;
    opacity: 1 !important;
    transform: translateY(-1px) !important;
  }
  .source-tool.on,
  body:not(.archive-collapsed) .source-tool.on {
    z-index: 3 !important;
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .source-tool:focus-visible { outline: 2px solid rgba(189,123,18,.5) !important; outline-offset: 2px !important; }
  .source-tool.on::after { display: none !important; }
  .source-tool .tool-object,
  .source-tool .tool-asset,
  body:not(.archive-collapsed) .source-tool .tool-object,
  body:not(.archive-collapsed) .source-tool .tool-asset {
    width: 52px !important;
    height: 52px !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
    place-self: center !important;
    object-fit: contain !important;
    opacity: 1 !important;
    transform: none !important;
    translate: calc(var(--dock-x, 0) * 1px + var(--tool-rest-x, 0px)) var(--tool-rest-y, 0px);
    scale: var(--dock-scale, 1);
    rotate: var(--tool-rest-rotate, 0deg);
    transform-origin: left center !important;
    will-change: translate, scale, opacity;
    filter: drop-shadow(0 2px 2px rgba(57,52,45,.1)) drop-shadow(0 5px 7px rgba(57,52,45,.07)) !important;
  }
  .source-tool:nth-child(1) .tool-object { --tool-rest-x: 1px; --tool-rest-rotate: -5deg; width: 55px !important; height: 55px !important; }
  .source-tool:nth-child(2) .tool-object { --tool-rest-x: 4px; --tool-rest-rotate: 7deg; width: 54px !important; height: 54px !important; }
  .source-tool:nth-child(3) .tool-object { --tool-rest-y: 1px; --tool-rest-rotate: -6deg; width: 52px !important; height: 52px !important; }
  .source-tool:nth-child(4) .tool-object { --tool-rest-x: 5px; --tool-rest-y: -1px; --tool-rest-rotate: 8deg; width: 56px !important; height: 56px !important; }
  .source-tool:nth-child(5) .tool-object { --tool-rest-x: 1px; --tool-rest-rotate: -7deg; width: 57px !important; height: 57px !important; }

  #archiveShell,
  .archive-shell,
  body.archive-collapsed #archiveShell,
  body.archive-collapsed .archive-shell,
  body:not(.archive-collapsed) #archiveShell,
  body:not(.archive-collapsed) .archive-shell {
    position: fixed !important;
    z-index: 81 !important;
    inset: calc(50% + 39px) auto auto var(--source-flyout-left) !important;
    width: var(--source-flyout-width) !important;
    height: min(480px, calc(100dvh - 112px)) !important;
    box-sizing: border-box !important;
    display: block !important;
    overflow: visible !important;
    border: 1px solid #e8e7e2 !important;
    border-radius: 15px !important;
    background: #fff !important;
    background-image: none !important;
    box-shadow: 0 14px 34px rgba(45,43,38,.1), 0 2px 7px rgba(45,43,38,.04) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(-50%) translateX(0) scale(1) !important;
    transform-origin: left center !important;
    transition: opacity .18s ease, transform .24s cubic-bezier(.2,.78,.18,1), visibility 0s !important;
  }
  body.archive-collapsed #archiveShell,
  body.archive-collapsed .archive-shell {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-50%) translateX(-10px) scale(.985) !important;
    transition: opacity .14s ease, transform .18s ease, visibility 0s linear .18s !important;
  }
  .archive-head,
  body.archive-collapsed .archive-head,
  body:not(.archive-collapsed) .archive-head { display: none !important; }

  #archiveContents,
  .archive-contents,
  body.archive-collapsed .archive-contents,
  body:not(.archive-collapsed) .archive-contents {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: inherit !important;
    background: #fff !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: none !important;
  }
  .archive-strip:not(.is-open) { display: none !important; }
  .archive-strip.is-open,
  .archive-strip-body,
  .archive-strip-body .rail-panel.on {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: inherit !important;
    background: #fff !important;
  }
  .archive-strip.is-open { display: block !important; overflow: hidden !important; }
  .archive-strip.is-open > .archive-strip-trigger { display: none !important; }
  .archive-strip.is-open > .archive-strip-body {
    display: block !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-gutter: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .archive-strip.is-open > .archive-strip-body::-webkit-scrollbar { width: 0; height: 0; }
  .archive-strip.is-open > .archive-strip-body .rail-panel,
  .archive-strip.is-open > .archive-strip-body .rail-panel.on {
    min-height: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
    padding: 18px 16px 20px !important;
  }
  #archivePhotos .photo-drawer-head { padding-right: 30px !important; }
  #archivePhotos .photo-polaroid { gap: 4px !important; padding: 7px 7px 8px !important; }
  #archivePhotos .photo-polaroid .snap-stage { aspect-ratio: 1 / 1 !important; }
  #archivePhotos .photo-polaroid .snap-row { min-height: 44px !important; }
  #archivePhotos #photoTray { min-height: 88px !important; }

  #archiveShell > #archiveGridClose { display: none !important; }

  html[data-canvas-type="disc"] body:not(.home-open):not(.archive-collapsed):not(.mode-keys) .board-wrap {
    --flowjam-disc-size: max(190px, min(calc(100dvh - 180px), calc(100vw - 134px))) !important;
    padding-right: 0 !important;
    place-items: center !important;
  }
  html[data-canvas-type="disc"] body:not(.home-open):not(.archive-collapsed):not(.mode-keys) .board {
    width: var(--flowjam-disc-size) !important;
  }
}

/* Floating virtual keyboard: a real performance layer that shares the Studio safely. */
@media (min-width: 761px) {
  body.mode-keys .dock {
    position: fixed !important;
    z-index: 90 !important;
    inset: auto max(18px, var(--keys-right-safe, 18px)) 16px max(18px, var(--keys-left-safe, 18px)) !important;
    width: auto !important;
    height: 136px !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    pointer-events: none !important;
    transition: opacity .18s ease, transform .24s cubic-bezier(.2,.78,.18,1) !important;
  }
  body.mode-keys:not(.archive-collapsed) { --keys-left-safe: calc(var(--source-flyout-left) + var(--source-flyout-width) + 14px); }
  body.mode-keys.photo-inspector-open,
  body.mode-keys.records-open { --keys-right-safe: 338px; }
  body.mode-keys .dock-keys {
    width: min(620px, 100%) !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    pointer-events: auto !important;
  }
  body.mode-keys .midi-chassis {
    position: relative !important;
    width: 100% !important;
    max-width: 620px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 9px 12px 10px !important;
    overflow: visible !important;
    border: 1px solid #e3e1da !important;
    border-radius: 13px !important;
    background: rgba(255,255,255,.97) !important;
    box-shadow: 0 14px 34px rgba(45,43,38,.12), 0 2px 8px rgba(45,43,38,.05) !important;
    backdrop-filter: blur(14px) saturate(.9) !important;
    transform: translateY(0) !important;
    transition: transform .28s cubic-bezier(.2,.78,.18,1), box-shadow .18s ease !important;
  }
  body.mode-keys .keys-edge-toggle {
    position: absolute !important;
    z-index: 4 !important;
    left: 50% !important;
    top: -11px !important;
    width: 54px !important;
    height: 18px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border: 1px solid #e3e1da !important;
    border-bottom: 0 !important;
    border-radius: 8px 8px 0 0 !important;
    background: rgba(255,255,255,.97) !important;
    color: #74736d !important;
    box-shadow: 0 -3px 8px rgba(45,43,38,.05) !important;
    transform: translateX(-50%) !important;
    cursor: pointer !important;
  }
  body.mode-keys .midi-panel {
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 0 2px 6px !important;
    border-bottom: 1px solid #efeee9 !important;
  }
  body.mode-keys .keys-row { gap: 5px !important; }
  body.mode-keys .key-volume,
  body.mode-keys .keys-toggle,
  body.mode-keys .keys-refresh {
    min-height: 25px !important;
    border: 0 !important;
    border-radius: 5px !important;
    background: #f3f2ed !important;
    box-shadow: none !important;
    color: var(--machine-ink) !important;
    font-family: var(--body) !important;
  }
  body.mode-keys .key-volume { padding: 0 7px !important; }
  body.mode-keys .key-volume output { display: inline !important; min-width: 28px; font-size: 8px; }
  body.mode-keys .keys-toggle,
  body.mode-keys .keys-refresh { padding: 0 8px !important; font-size: 8px !important; }
  body.mode-keys .keys-toggle.on { background: #fff7e4 !important; box-shadow: inset 3px 0 0 var(--machine-accent) !important; color: var(--machine-ink) !important; }
  body.mode-keys .keyboard {
    min-height: 72px !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 7px 0 0 !important;
  }
  body.mode-keys .octave-bank {
    width: 54px !important;
    height: 62px !important;
    padding: 5px 4px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: #efeee9 !important;
    box-shadow: none !important;
  }
  body.mode-keys .oct-key {
    width: 21px !important;
    height: 27px !important;
    border: 0 !important;
    border-radius: 5px !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(45,43,38,.08) !important;
  }
  body.mode-keys .pkeys {
    --white-key-w: clamp(42px, 3.4vw, 49px) !important;
    --white-key-h: 62px !important;
    --black-key-w: 28px !important;
    --black-key-h: 39px !important;
  }
  body.mode-keys .pkey {
    border: 0 !important;
    border-radius: 3px 3px 6px 6px !important;
    background: #fff !important;
    box-shadow: inset -1px 0 0 #e3e2dc, 0 2px 4px rgba(45,43,38,.08) !important;
  }
  body.mode-keys .pkey.black,
  body.mode-keys .pkey.black:nth-child(even) {
    border: 0 !important;
    border-radius: 2px 2px 5px 5px !important;
    background: #30312e !important;
    box-shadow: 0 3px 6px rgba(25,24,21,.18) !important;
  }
  body.mode-keys .pkey.active,
  body.mode-keys .pkey.black.active { background: var(--machine-accent) !important; }
  body.mode-keys.dock-collapsed .midi-chassis {
    transform: translateY(118px) !important;
    box-shadow: 0 -4px 14px rgba(45,43,38,.06) !important;
  }
  body.mode-keys.dock-collapsed .keys-edge-toggle svg { transform: rotate(180deg); }
  html[data-canvas-type="card"] body.mode-keys .board-wrap { padding: 0 !important; }
  html[data-canvas-type="card"] body.mode-keys .board { width: 100% !important; height: 100% !important; }
}

.tbtn:disabled { cursor: default !important; opacity: .34 !important; }

.confirm-layer { display: grid; place-items: center; padding: 18px; }
.confirm-layer[hidden] { display: none !important; }
.confirm-sheet {
  position: relative; z-index: 2; width: min(390px, calc(100vw - 36px)); box-sizing: border-box;
  display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 12px; padding: 20px;
  border: 1px solid #e5e3dc; border-radius: 14px; background: #fff;
  box-shadow: 0 20px 54px rgba(45,43,38,.16), 0 2px 8px rgba(45,43,38,.05);
}
.confirm-mark { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #fff1e8; color: #b64b3e; font: 700 14px/1 var(--body); }
.confirm-copy { min-width: 0; }
.confirm-copy h2 { margin: 0 0 6px; color: var(--machine-ink); font: 700 17px/1.25 var(--body); }
.confirm-copy p { margin: 0; color: var(--machine-muted); font: 500 11px/1.5 var(--body); }
.confirm-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 7px; margin-top: 4px; }
.confirm-actions button { min-height: 34px; padding: 0 14px; border: 0; border-radius: 6px; cursor: pointer; font: 650 10px/1 var(--body); }
.confirm-cancel { background: #f1f0eb; color: var(--machine-ink); }
.confirm-accept { background: #b84f42; color: #fff; }
.confirm-actions button:focus-visible { outline: 2px solid rgba(189,123,18,.5); outline-offset: 2px; }

/* Keys is an overlay only: it never changes the CD/Canvas workbench geometry. */
@media (min-width: 761px) {
  body.mode-keys .topbar .machine-top-transport,
  body.mode-keys:not(.dock-collapsed) .topbar .machine-top-transport {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
  }
  html[data-canvas-type] body.mode-keys:not(.home-open):not(.dock-collapsed) .stage > .board-wrap,
  html[data-canvas-type] body.mode-keys:not(.home-open).archive-collapsed:not(.dock-collapsed) .stage > .board-wrap,
  html[data-canvas-type] body.mode-keys:not(.home-open):not(.archive-collapsed):not(.dock-collapsed) .stage > .board-wrap {
    padding: 0 !important;
  }
  html[data-canvas-type="disc"] body.mode-keys .board-wrap,
  html[data-canvas-type="disc"] body.mode-keys.archive-collapsed .board-wrap,
  html[data-canvas-type="disc"] body.mode-keys:not(.archive-collapsed) .board-wrap {
    --flowjam-disc-size: max(190px, min(calc(100dvh - 180px), calc(100vw - 134px))) !important;
    place-items: center !important;
  }
  html[data-canvas-type="disc"] body.mode-keys .board,
  html[data-canvas-type="disc"] body.mode-keys.archive-collapsed .board,
  html[data-canvas-type="disc"] body.mode-keys:not(.archive-collapsed) .board {
    width: var(--flowjam-disc-size) !important;
  }
  html[data-canvas-type="disc"] body.mode-keys .turntable-plinth,
  html[data-canvas-type="disc"] body.mode-keys.archive-collapsed .turntable-plinth,
  html[data-canvas-type="disc"] body.mode-keys:not(.archive-collapsed) .turntable-plinth {
    width: min(calc(var(--flowjam-disc-size) + 46px), calc(100% - 210px)) !important;
    height: min(calc(var(--flowjam-disc-size) + 46px), calc(100% - 20px)) !important;
    transform: none !important;
  }
  html[data-canvas-type="disc"] body:not(.home-open) .turntable-plinth {
    --flowjam-plinth-size: min(calc(var(--flowjam-disc-size) + 46px), calc(100vw - 210px), calc(100dvh - 98px));
    inset: auto !important;
    left: 50% !important;
    top: 50% !important;
    width: var(--flowjam-plinth-size) !important;
    height: var(--flowjam-plinth-size) !important;
    aspect-ratio: 1 !important;
    transform: translate(-50%,-50%) !important;
  }
  html[data-canvas-type="disc"] body:not(.home-open).archive-collapsed .stage > .board-wrap > .turntable-plinth,
  html[data-canvas-type="disc"] body:not(.home-open):not(.archive-collapsed) .stage > .board-wrap > .turntable-plinth,
  html[data-canvas-type="disc"] body.mode-keys:not(.home-open).archive-collapsed .stage > .board-wrap > .turntable-plinth,
  html[data-canvas-type="disc"] body.mode-keys:not(.home-open):not(.archive-collapsed) .stage > .board-wrap > .turntable-plinth {
    width: var(--flowjam-plinth-size) !important;
    height: var(--flowjam-plinth-size) !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: 1 !important;
    transform: translate(-50%,-50%) !important;
  }
  body.mode-keys .dock {
    inset: 90px 14px auto auto !important;
    width: min(420px, calc(100vw - 28px)) !important;
    height: 106px !important;
  }
  body.mode-keys.mode-dj .dock,
  body.mode-keys.records-open .dock,
  body.mode-keys.photo-inspector-open .dock {
    right: auto !important;
    left: 64px !important;
  }
  body.mode-keys .dock-keys,
  body.mode-keys .midi-chassis { max-width: min(420px, 100%) !important; }
  body.mode-keys .midi-chassis { padding: 7px 9px 8px !important; }
  body.mode-keys .midi-chassis {
    display: grid !important;
    grid-template-rows: 28px 28px 54px !important;
    align-content: start !important;
    gap: 4px !important;
  }
  body.mode-keys .midi-panel {
    height: 28px !important;
    min-height: 28px !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    align-items: center !important;
    padding: 0 !important;
  }
  body.mode-keys .keys-row {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(130px,1fr) auto auto auto !important;
    align-items: center !important;
    gap: 4px !important;
  }
  body.mode-keys .key-volume { padding-inline: 5px !important; }
  body.mode-keys .key-volume input { width: 46px !important; }
  body.mode-keys .keys-toggle,
  body.mode-keys .keys-refresh { padding-inline: 6px !important; }
  body.mode-keys .keyboard {
    width: 100% !important;
    min-height: 54px !important;
    height: 54px !important;
    display: grid !important;
    grid-template-columns: 46px minmax(0,1fr) !important;
    align-items: end !important;
    justify-items: center !important;
    gap: 7px !important;
    padding: 0 !important;
  }
  body.mode-keys .octave-bank { width: 46px !important; height: 52px !important; box-sizing: border-box !important; padding: 4px 3px !important; }
  body.mode-keys .oct-key {
    width: 18px !important; height: 22px !important; display: grid !important; place-items: center !important;
    box-sizing: border-box !important; padding: 0 !important; line-height: 0 !important;
  }
  body.mode-keys .oct-key svg { width: 14px !important; height: 14px !important; display: block; overflow: visible; }
  body.mode-keys .oct-key svg path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  body.mode-keys .pkeys {
    --white-key-w: clamp(30px, 2.5vw, 36px) !important;
    --white-key-h: 52px !important;
    --black-key-w: 22px !important;
    --black-key-h: 33px !important;
    justify-self: start !important;
  }
  body.mode-keys.dock-collapsed .midi-chassis { transform: translateX(calc(100% - 54px)) !important; }
  body.mode-keys.dock-collapsed .keys-edge-toggle { left: 14px !important; transform: none !important; }
  body.mode-keys.mode-dj.dock-collapsed .midi-chassis,
  body.mode-keys.records-open.dock-collapsed .midi-chassis,
  body.mode-keys.photo-inspector-open.dock-collapsed .midi-chassis { transform: translateX(calc(-100% + 54px)) !important; }
  body.mode-keys.mode-dj.dock-collapsed .keys-edge-toggle,
  body.mode-keys.records-open.dock-collapsed .keys-edge-toggle,
  body.mode-keys.photo-inspector-open.dock-collapsed .keys-edge-toggle { left: auto !important; right: 14px !important; }
}

/* Narrow desktop console: explicit zones instead of overlapping wide-screen positioning. */
@media (min-width: 761px) and (max-width: 1023px) {
  body:not(.home-open) .topbar {
    height: var(--studio-topbar-height) !important;
    display: grid !important;
    grid-template-columns: 112px minmax(0,1fr) !important;
    grid-template-rows: 48px !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 7px 12px !important;
    box-sizing: border-box !important;
  }
  body:not(.home-open) .topbar .brand {
    display: none !important;
  }
  body:not(.home-open) .topbar .board-title { display: none !important; }
  body:not(.home-open) .studio-canvas-choice {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: static !important;
    justify-self: start !important;
    width: 112px !important;
    margin: 0 !important;
  }
  body:not(.home-open) .topbar-studio-tools {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: static !important;
    inset: auto !important;
    width: auto !important;
    height: 48px !important;
    min-width: 0 !important;
    display: flex !important;
    justify-content: center !important;
    gap: 5px !important;
    pointer-events: none !important;
  }
  body:not(.home-open) .topbar .machine-top-transport {
    width: 162px !important;
    flex: 0 0 162px !important;
    margin: 0 !important;
    padding-right: 8px !important;
    pointer-events: auto !important;
  }
  body:not(.home-open) .topbar .machine-top-transport .now-time { width: 34px !important; flex-basis: 34px !important; }
  body:not(.home-open) .topbar .performance-rail {
    width: 150px !important;
    flex: 0 0 150px !important;
    pointer-events: auto !important;
  }
  body:not(.home-open) .topbar .topbar-surprise { display: none !important; }
  body:not(.home-open) .topbar .engine-status { display: none !important; }
  body:not(.home-open) .topbar .performance-rail #modeKeys { width: 68px !important; }
  body:not(.home-open) .topbar .performance-rail #camBtn { width: 76px !important; }
  body.mode-keys .dock {
    inset: 90px 14px auto auto !important;
    width: min(400px, calc(100vw - 28px)) !important;
    height: 106px !important;
  }
  body.mode-keys.mode-dj .dock,
  body.mode-keys.records-open .dock,
  body.mode-keys.photo-inspector-open .dock { right: auto !important; left: 54px !important; }
  body.mode-keys .dock-keys,
  body.mode-keys .midi-chassis { max-width: min(400px, 100%) !important; }
  body.mode-keys .midi-chassis { padding: 7px 9px 8px !important; }
  body.mode-keys .midi-panel { height: 26px !important; padding-bottom: 4px !important; }
  body.mode-keys .key-volume { padding-inline: 5px !important; }
  body.mode-keys .key-volume input { width: 48px !important; }
  body.mode-keys .keys-toggle,
  body.mode-keys .keys-refresh { padding-inline: 6px !important; }
  body.mode-keys .keyboard { min-height: 58px !important; gap: 6px !important; padding-top: 5px !important; }
  body.mode-keys .octave-bank { width: 48px !important; height: 52px !important; padding: 4px 3px !important; }
  body.mode-keys .oct-key { width: 19px !important; height: 22px !important; }
  body.mode-keys .pkeys {
    --white-key-w: clamp(29px, 4.3vw, 35px) !important;
    --white-key-h: 52px !important;
    --black-key-w: 23px !important;
    --black-key-h: 33px !important;
  }
}

/* Draggable Keys window: free-positioned after the user moves it. */
@media (min-width: 761px) {
  body.keys-window-hidden #keysDock { display: none !important; }
  body.mode-keys .dock,
  body.mode-keys .dock-keys { align-items: flex-start !important; }
  body.mode-keys .dock.is-positioned {
    inset: 0 auto auto 0 !important;
    width: min(420px, calc(100vw - 20px)) !important;
    height: auto !important;
    transform: translate3d(var(--keys-window-x, 10px), var(--keys-window-y, 90px), 0) !important;
    transition: none !important;
  }
  body.mode-keys .dock.is-positioned .dock-keys,
  body.mode-keys .dock.is-positioned .midi-chassis {
    width: 100% !important;
    max-width: none !important;
  }
  body.mode-keys .dock.keys-dragging { user-select: none; }
  body.mode-keys .dock.keys-dragging .midi-chassis { box-shadow: 0 14px 34px rgba(45,43,38,.12), 0 2px 8px rgba(45,43,38,.05) !important; }
  body.mode-keys .keys-window-bar {
    min-height: 28px;
    height: 28px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    padding: 0 1px 3px;
    border-bottom: 1px solid #efeee9;
    cursor: grab;
    touch-action: none;
  }
  body.mode-keys .keys-window-bar:active { cursor: grabbing; }
  body.mode-keys .keys-window-title {
    min-width: 0; flex: 1; padding: 0 7px; color: #77756e;
    font: 650 9px/1 var(--body); letter-spacing: .04em; pointer-events: none;
  }
  body.mode-keys .keys-window-actions { display: flex; align-items: center; gap: 2px; }
  body.mode-keys .keys-edge-toggle,
  body.mode-keys .keys-window-close {
    position: static !important;
    inset: auto !important;
    width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 5px !important;
    background: transparent !important;
    color: #77756e !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: pointer !important;
  }
  body.mode-keys .keys-edge-toggle:hover,
  body.mode-keys .keys-window-close:hover { background: #f0efea !important; color: var(--machine-ink) !important; }
  body.mode-keys .keys-window-close { font: 400 17px/1 var(--body); }
  body.mode-keys .keys-edge-toggle svg { width: 15px !important; height: 9px !important; }
  body.mode-keys.dock-collapsed .midi-chassis,
  body.mode-keys.mode-dj.dock-collapsed .midi-chassis,
  body.mode-keys.records-open.dock-collapsed .midi-chassis,
  body.mode-keys.photo-inspector-open.dock-collapsed .midi-chassis {
    transform: none !important;
    box-shadow: 0 10px 24px rgba(45,43,38,.1) !important;
    transition: none !important;
  }
  body.mode-keys.dock-collapsed .midi-panel,
  body.mode-keys.dock-collapsed .keyboard { display: none !important; }
  body.mode-keys.dock-collapsed .midi-chassis { grid-template-rows: 28px !important; }
  body.mode-keys.dock-collapsed .keys-window-bar { padding-bottom: 0; border-bottom: 0; }
  body.mode-keys.dock-collapsed .keys-edge-toggle svg { transform: rotate(180deg) !important; }

  /* Keep the control content and the playable key group centered inside their full-width rows. */
  body.mode-keys .key-volume {
    display: grid !important;
    grid-template-columns: auto minmax(46px, 1fr) auto !important;
    align-items: center !important;
    gap: 6px !important;
  }
  body.mode-keys .key-volume input {
    width: 100% !important;
    min-width: 46px !important;
  }
  body.mode-keys .keyboard {
    grid-template-columns: auto max-content !important;
    justify-content: center !important;
    justify-items: start !important;
  }
}
@media (min-width: 761px) and (max-width: 1023px) {
  body.mode-keys .dock.is-positioned { width: min(400px, calc(100vw - 20px)) !important; }
}

/* Final compact-console authority: a quiet 52px desktop bar, shared by every fixed Studio layer. */
@media (min-width: 761px) {
  :root { --studio-topbar-height: 52px; }
  body:not(.home-open) .topbar {
    height: var(--studio-topbar-height) !important;
    min-height: var(--studio-topbar-height) !important;
    padding-block: 5px !important;
  }
  body:not(.home-open) .topbar-studio-tools { height: var(--studio-topbar-height) !important; }
  body:not(.home-open) .topbar .brand { height: 34px !important; min-height: 34px !important; }
  body:not(.home-open) .topbar .brand-mark { width: 28px !important; height: 28px !important; }
  body:not(.home-open) .topbar .brand-word { font-size: 1.08rem !important; }
  body:not(.home-open) .studio-canvas-choice { top: 9px !important; height: 32px !important; padding: 2px !important; }
  body:not(.home-open) .studio-canvas-choice button { height: 26px !important; }
  body:not(.home-open) .topbar .machine-top-transport { height: 34px !important; min-height: 34px !important; }
  body:not(.home-open) .topbar .machine-top-transport .tbtn,
  body:not(.home-open) .topbar .machine-top-transport #playPause { height: 28px !important; }
  body:not(.home-open) .topbar .performance-rail { height: 34px !important; min-height: 34px !important; padding-block: 1px !important; }
  body:not(.home-open) .topbar .performance-rail .rail-tool-btn,
  body:not(.home-open) .topbar .performance-rail .rail-tool-btn[data-tool="dj"] { height: 30px !important; }
  body:not(.home-open) .topbar .topbar-surprise { top: 8px !important; width: 34px !important; height: 34px !important; }
  body:not(.home-open) .stage { height: calc(100dvh - var(--studio-topbar-height)) !important; }
  body:not(.home-open) .stage > .board-wrap,
  body.records-open:not(.home-open) .stage > .board-wrap { inset: var(--studio-topbar-height) 0 0 !important; }
  .source-toolbar,
  body.archive-collapsed .source-toolbar,
  body:not(.archive-collapsed) .source-toolbar {
    top: calc(50% + (var(--studio-topbar-height) / 2)) !important;
  }
  #archiveShell,
  body.archive-collapsed #archiveShell,
  body:not(.archive-collapsed) #archiveShell {
    top: calc(50% + (var(--studio-topbar-height) / 2)) !important;
  }
  #photoInspector.photo-inspector,
  body.records-open.photo-inspector-open #photoInspector.photo-inspector { top: var(--studio-topbar-height) !important; }
  body.mode-keys .dock:not(.is-positioned) { top: calc(var(--studio-topbar-height) + 12px) !important; }
}
@media (min-width: 761px) and (max-width: 1023px) {
  body:not(.home-open) .topbar {
    grid-template-rows: 44px !important;
    padding-block: 5px !important;
  }
  body:not(.home-open) .topbar-studio-tools { height: 44px !important; }
}

/* Content-sized source flyouts: each tool gets only the room its workflow needs. */
@media (min-width: 761px) {
  body:not(.archive-collapsed) #archiveShell[data-active-panel] {
    transition: height .26s cubic-bezier(.2,.78,.18,1), opacity .18s ease, transform .24s cubic-bezier(.2,.78,.18,1), visibility 0s !important;
  }
  body:not(.archive-collapsed) #archiveShell[data-active-panel="ambience"] {
    height: min(194px, calc(100dvh - 92px)) !important;
  }
  body:not(.archive-collapsed) #archiveShell[data-active-panel="doodles"] {
    height: min(282px, calc(100dvh - 92px)) !important;
  }
  body:not(.archive-collapsed) #archiveShell[data-active-panel="appearance"] {
    height: min(480px, calc(100dvh - 92px)) !important;
  }
  body:not(.archive-collapsed) #archiveShell[data-active-panel="vibes"] {
    height: min(620px, calc(100dvh - 92px)) !important;
  }
  body:not(.archive-collapsed) #archiveShell[data-active-panel="photos"] {
    height: min(620px, calc(100dvh - 92px)) !important;
  }
  body:not(.archive-collapsed) #archiveShell[data-active-panel="photos"]:has(.booth-printer.has-print) {
    height: min(720px, calc(100dvh - 76px)) !important;
  }
  body:not(.archive-collapsed) #archiveShell[data-active-panel="ambience"] .archive-strip-body .rail-panel.on,
  body:not(.archive-collapsed) #archiveShell[data-active-panel="doodles"] .archive-strip-body .rail-panel.on {
    min-height: 0 !important;
  }
}

/* Edit colour authority: six presets plus one full-colour custom chip. */
.item-inspector-colors .inspector-color-reference {
  width: 100%;
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  align-items: center;
  gap: 7px !important;
  overflow: visible !important;
  padding: 2px !important;
}
.item-inspector-colors .inspector-color-reference > .inspector-colour-swatch,
.item-inspector-colors .inspector-color-reference > .inspector-custom-trigger {
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  aspect-ratio: 1;
  place-self: stretch;
}
.item-inspector-colors .inspector-color-reference > .inspector-custom-trigger { order: 99; }
.item-inspector-colors .inspector-color-reference .inspector-rainbow-plus {
  width: 100%;
  height: 100%;
  min-width: 0;
}

/* Floating studio islands: the canvas owns the window; controls sit above it. */
@media (min-width: 761px) {
  :root { --studio-topbar-height: 0px; }

  body:not(.home-open) .topbar {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    z-index: 80 !important;
    width: 100% !important;
    height: var(--fj-layout-topbar-height) !important;
    min-height: var(--fj-layout-topbar-height) !important;
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    pointer-events: none !important;
  }

  body:not(.home-open) .studio-file-island,
  body:not(.home-open) .studio-canvas-choice,
  body:not(.home-open) .studio-control-island {
    border: 1px solid rgba(35, 36, 33, .11) !important;
    background: rgba(255, 255, 253, .92) !important;
    box-shadow: 0 1px 2px rgba(32, 31, 28, .08), 0 8px 26px rgba(32, 31, 28, .09) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    backdrop-filter: blur(18px) saturate(1.2);
    pointer-events: auto !important;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
  }
  body:not(.home-open) .studio-file-island:hover,
  body:not(.home-open) .studio-canvas-choice:hover,
  body:not(.home-open) .studio-control-island:hover {
    border-color: rgba(35, 36, 33, .17) !important;
    box-shadow: 0 2px 4px rgba(32, 31, 28, .08), 0 12px 30px rgba(32, 31, 28, .11) !important;
  }

  body:not(.home-open) .studio-file-island {
    position: absolute;
    top: 14px;
    left: 16px;
    width: min(330px, calc(38vw - 18px));
    height: 44px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    gap: 8px;
    padding: 5px 8px 5px 6px;
    border-radius: 12px;
  }
  body:not(.home-open) .studio-file-island .brand {
    flex: 0 0 auto;
    height: 32px !important;
    min-height: 32px !important;
    gap: 6px !important;
    padding: 0 4px 0 0 !important;
    pointer-events: auto !important;
  }
  body:not(.home-open) .studio-file-island .brand-mark { width: 26px !important; height: 26px !important; }
  body:not(.home-open) .studio-file-island .brand-word { font-size: .98rem !important; }
  .studio-island-divider { width: 1px; height: 20px; flex: 0 0 1px; background: rgba(35, 36, 33, .12); }
  body:not(.home-open) .studio-file-island .board-title {
    position: static !important;
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    height: 30px !important;
    flex: 1 1 auto;
    padding: 0 8px !important;
    border-radius: 7px !important;
    background: transparent !important;
    font-size: 11px !important;
    text-align: left;
  }
  body:not(.home-open) .studio-file-island .board-title:hover,
  body:not(.home-open) .studio-file-island .board-title:focus { background: rgba(35, 36, 33, .055) !important; }

  body:not(.home-open) .studio-canvas-choice {
    position: absolute !important;
    inset: 14px auto auto 50% !important;
    transform: translateX(-50%);
    width: 116px !important;
    height: 44px !important;
    box-sizing: border-box;
    padding: 4px !important;
    border-radius: 12px !important;
  }
  body:not(.home-open) .studio-canvas-choice button { height: 34px !important; border-radius: 8px !important; font-size: 9px !important; }
  body:not(.home-open) .studio-canvas-choice button.is-selected { background: #232421 !important; color: #fff !important; box-shadow: none !important; }

  body:not(.home-open) .topbar-studio-tools {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: var(--fj-layout-topbar-height) !important;
    display: block !important;
    overflow: visible !important;
    pointer-events: none !important;
  }
  body:not(.home-open) .studio-control-island {
    position: absolute;
    top: 14px;
    right: 16px;
    height: 44px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    gap: 5px;
    padding: 4px;
    border-radius: 12px;
  }
  body:not(.home-open) .topbar .machine-top-transport {
    width: 166px !important;
    height: 34px !important;
    min-height: 34px !important;
    flex: 0 0 166px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .studio-control-divider {
    width: 1px;
    height: 22px;
    flex: 0 0 1px;
    background: rgba(35, 36, 33, .12);
  }
  body:not(.home-open) .topbar .performance-rail {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    display: flex !important;
    gap: 3px !important;
    box-sizing: border-box;
    padding: 2px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  body:not(.home-open) .topbar .performance-caption { display: none !important; }
  body:not(.home-open) .topbar .performance-rail .rail-tool-btn,
  body:not(.home-open) .topbar .performance-rail .rail-tool-btn[data-tool="dj"] {
    width: auto !important;
    height: 30px !important;
    padding: 0 9px !important;
    border-radius: 7px !important;
  }
  body:not(.home-open) .topbar .engine-status,
  body.records-open:not(.home-open) .topbar .engine-status {
    position: absolute !important;
    top: 64px !important;
    right: 20px !important;
    width: auto !important;
    max-width: 340px !important;
    min-height: 16px;
    box-sizing: border-box;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    padding: 0 2px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    color: #85857e !important;
    font-size: 8px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body:not(.home-open) .topbar .engine-status::before { margin-right: 5px; }

  body:not(.home-open) .stage { height: 100dvh !important; }
  html[data-canvas-type="disc"] body:not(.home-open) .stage > .board-wrap,
  html[data-canvas-type="disc"] body.records-open:not(.home-open) .stage > .board-wrap {
    inset: 58px 0 0 !important;
    height: auto !important;
  }
  html[data-canvas-type="card"] body:not(.home-open) .stage > .board-wrap,
  html[data-canvas-type="card"] body.records-open:not(.home-open) .stage > .board-wrap { inset: 0 !important; }
  .source-toolbar,
  body.archive-collapsed .source-toolbar,
  body:not(.archive-collapsed) .source-toolbar,
  #archiveShell,
  body.archive-collapsed #archiveShell,
  body:not(.archive-collapsed) #archiveShell { top: 50% !important; }
  #photoInspector.photo-inspector,
  body.records-open.photo-inspector-open #photoInspector.photo-inspector { top: 0 !important; }
  body.mode-keys .dock:not(.is-positioned) { top: 118px !important; }
}

@media (min-width: 761px) and (max-width: 1023px) {
  body:not(.home-open) .studio-file-island { width: 220px; }
  body:not(.home-open) .studio-file-island .brand-word { display: none; }
  body:not(.home-open) .studio-canvas-choice { left: 50% !important; width: 106px !important; }
  body:not(.home-open) .topbar .engine-status { display: none !important; }
  body:not(.home-open) .studio-control-island { right: 12px; }
}

@media (max-width: 760px) {
  /* The wrappers only create desktop islands; mobile keeps its established compact grid. */
  body:not(.home-open) .studio-file-island,
  body:not(.home-open) .studio-control-island { display: contents; }
  .studio-control-divider { display: none; }
}


/* Refined floating controls: four clear groups with restrained elevation. */
@media (min-width: 761px) {
  body:not(.home-open) .studio-file-island,
  body:not(.home-open) .studio-canvas-choice,
  body:not(.home-open) .studio-playback-island,
  body:not(.home-open) .studio-performance-island,
  #recordsDrawer .records-tab,
  #recordsDrawer.records-drawer-shell.open .records-tab,
  #recordsDrawer.records-drawer-shell.open .records-drawer {
    border-color: rgba(36,37,34,.1) !important;
    background: rgba(255,255,253,.95) !important;
    box-shadow: 0 1px 2px rgba(32,31,28,.045), 0 5px 14px rgba(32,31,28,.06) !important;
    backdrop-filter: blur(14px) saturate(1.08) !important;
  }
  body:not(.home-open) .studio-file-island,
  body:not(.home-open) .studio-canvas-choice,
  body:not(.home-open) .studio-playback-island,
  body:not(.home-open) .studio-performance-island {
    transition: border-color .14s ease, background .14s ease, box-shadow .14s ease !important;
  }
  body:not(.home-open) .studio-file-island:hover,
  body:not(.home-open) .studio-canvas-choice:hover,
  body:not(.home-open) .studio-playback-island:hover,
  body:not(.home-open) .studio-performance-island:hover {
    border-color: rgba(36,37,34,.16) !important;
    background: rgba(255,255,253,.98) !important;
    box-shadow: 0 1px 2px rgba(32,31,28,.05), 0 7px 18px rgba(32,31,28,.07) !important;
  }
  body:not(.home-open) .topbar-studio-tools {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 90px !important;
    pointer-events: none !important;
  }
  body:not(.home-open) .studio-control-cluster {
    position: absolute !important;
    top: 14px !important;
    right: 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 44px !important;
    pointer-events: none !important;
  }
  body:not(.home-open) .topbar .studio-playback-island {
    position: relative !important;
    inset: auto !important;
    width: 156px !important;
    height: 44px !important;
    min-height: 44px !important;
    flex: 0 0 156px !important;
    gap: 3px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 4px 6px !important;
    overflow: hidden !important;
    border: 1px solid rgba(36,37,34,.1) !important;
    border-radius: 12px !important;
    transform: none !important;
    pointer-events: auto !important;
  }
  body:not(.home-open) .topbar .studio-playback-island::before,
  body:not(.home-open) .topbar .studio-playback-island::after { content: none !important; display: none !important; }
  body:not(.home-open) .topbar .studio-playback-island .now-time { width: 38px !important; flex: 0 0 38px !important; }
  body:not(.home-open) .topbar .studio-playback-island .tbtn,
  body:not(.home-open) .topbar .studio-playback-island #playPause { height: 32px !important; }
  body:not(.home-open) .topbar .studio-performance-island {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    min-width: 148px !important;
    height: 44px !important;
    min-height: 44px !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    box-sizing: border-box !important;
    padding: 4px !important;
    overflow: hidden !important;
    border: 1px solid rgba(36,37,34,.1) !important;
    border-radius: 12px !important;
    transform: none !important;
    pointer-events: auto !important;
  }
  body:not(.home-open) .topbar .studio-performance-island .rail-tool-btn,
  body:not(.home-open) .topbar .studio-performance-island .rail-tool-btn[data-tool="dj"] {
    height: 34px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
  }
  body:not(.home-open) .topbar .engine-status { top: 62px !important; right: 18px !important; max-width: 320px !important; color: #92918a !important; }
  #recordsDrawer.records-drawer-shell,
  body.records-open #recordsDrawer.records-drawer-shell,
  body.photo-inspector-open #recordsDrawer.records-drawer-shell { right: 16px !important; bottom: 14px !important; }
  #recordsDrawer .records-tab,
  #recordsDrawer.records-drawer-shell.open .records-tab {
    border: 1px solid rgba(36,37,34,.1) !important;
    border-radius: 12px !important;
    background: rgba(255,255,253,.95) !important;
  }
  #recordsDrawer.records-drawer-shell.open .records-tab { border-radius: 12px 12px 0 0 !important; }
  #recordsDrawer.records-drawer-shell.open .records-drawer {
    border: 1px solid rgba(36,37,34,.1) !important;
    border-radius: 0 0 12px 12px !important;
  }
}

@media (min-width: 761px) and (max-width: 1023px) {
  body:not(.home-open) .studio-control-cluster { right: 12px !important; gap: 6px !important; }
  body:not(.home-open) .topbar .studio-playback-island { width: 152px !important; flex-basis: 152px !important; }
  body:not(.home-open) .topbar .studio-performance-island { min-width: 80px !important; }
  body:not(.home-open) .topbar .studio-performance-island .perform-name { display: none !important; }
  body:not(.home-open) .topbar .studio-performance-island .rail-tool-btn,
  body:not(.home-open) .topbar .studio-performance-island .rail-tool-btn[data-tool="dj"] { width: 35px !important; min-width: 35px !important; padding: 0 !important; }
}

@media (max-width: 760px) {
  body:not(.home-open) .studio-control-cluster { display: contents !important; }
  body:not(.home-open) .topbar .studio-playback-island,
  body:not(.home-open) .topbar .studio-performance-island { pointer-events: auto !important; }
}

/* The element editor is an independent, draggable workspace window. */
@media (min-width: 761px) {
  #photoInspector.photo-inspector,
  body.records-open.photo-inspector-open #photoInspector.photo-inspector {
    position: fixed !important;
    inset: 70px 12px auto auto !important;
    width: min(314px, calc(100vw - 24px)) !important;
    height: auto !important;
    max-height: var(--edit-window-max-height, calc(100dvh - 82px)) !important;
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    z-index: 190 !important;
  }
  #photoInspector.photo-inspector[hidden] { display: none !important; }
  #photoInspector.photo-inspector.is-positioned,
  body.records-open.photo-inspector-open #photoInspector.photo-inspector.is-positioned {
    inset: var(--edit-window-y) auto auto var(--edit-window-x) !important;
  }
  #photoInspector .photo-inspector-card,
  #photoInspector[data-kind="photo"] .photo-inspector-card,
  body.records-open.photo-inspector-open #photoInspector .photo-inspector-card {
    width: 100% !important;
    height: auto !important;
    max-height: var(--edit-window-max-height, calc(100dvh - 82px)) !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    border: 1px solid rgba(36,37,34,.12) !important;
    border-radius: 14px !important;
    background: rgba(255,255,253,.98) !important;
    box-shadow: 0 2px 5px rgba(32,31,28,.055), 0 14px 34px rgba(32,31,28,.09) !important;
    backdrop-filter: blur(16px) saturate(1.06) !important;
    scrollbar-width: none;
  }
  #photoInspector .photo-inspector-card::-webkit-scrollbar { width: 0; height: 0; }
  #photoInspector .photo-inspector-head {
    position: sticky;
    top: 0;
    z-index: 4;
    cursor: grab;
    touch-action: none;
    user-select: none;
    background: rgba(255,255,253,.96);
    backdrop-filter: blur(12px) saturate(1.04);
  }
  #photoInspector .photo-inspector-head:focus-visible { outline: 2px solid rgba(189,123,18,.5); outline-offset: -2px; border-radius: 8px; }
  #photoInspector.is-dragging .photo-inspector-head { cursor: grabbing; }
  #photoInspector.is-dragging .photo-inspector-card {
    box-shadow: 0 10px 28px rgba(32,31,28,.13) !important;
  }
  #photoInspector .photo-inspector-head > button { cursor: pointer; }
}

/* FlowJam colour system — one warm, playful palette across every product surface. */
:root {
  --fj-cream: #fffaf2;
  --fj-paper: #fffdf8;
  --fj-ink: #422f0e;
  --fj-ink-soft: #715e3b;
  --fj-pink: #ea5e86;
  --fj-coral: #ef6545;
  --fj-orange: #f49625;
  --fj-yellow: #f7e9b2;
  --fj-mint: #ddf2b8;
  --fj-tea: #aacc96;
  --fj-forest: #25533f;
  --fj-pool: #037f71;
  --fj-teal: #57b1a8;
  --fj-blue: #52a5ce;
  --fj-ice: #b8cee8;
  --fj-lilac: #d3b6d3;
  --fj-frost: #f4beae;
  --fj-line: color-mix(in srgb, var(--fj-ink) 15%, transparent);
  --fj-line-soft: color-mix(in srgb, var(--fj-ink) 8%, transparent);
  --fj-shadow: rgba(66,47,14,.13);
  --paper: var(--fj-cream);
  --paper-2: var(--fj-paper);
  --ink: var(--fj-ink);
  --ink-soft: var(--fj-ink-soft);
  --line: color-mix(in srgb, var(--fj-ink) 22%, transparent);
  --accent: var(--fj-pool);
  --archive-blue: var(--fj-ice);
  --archive-pink: #f9d4f8;
  --archive-green: var(--fj-mint);
  --archive-yellow: var(--fj-yellow);
  --archive-lilac: var(--fj-lilac);
  --theme: var(--fj-pool);
  --theme-deep: var(--fj-forest);
  --theme-mid: var(--fj-teal);
  --theme-soft: color-mix(in srgb, var(--fj-teal) 18%, var(--fj-paper));
  --theme-pale: var(--fj-cream);
  --theme-line: color-mix(in srgb, var(--fj-pool) 32%, transparent);
  --theme-line-soft: color-mix(in srgb, var(--fj-pool) 15%, transparent);
  --brand-storm: var(--fj-forest);
  --brand-peony: var(--fj-pink);
  --brand-sun: var(--fj-yellow);
  --home-cream: var(--fj-cream);
  --machine-shell: color-mix(in srgb, var(--fj-yellow) 25%, var(--fj-paper));
  --machine-panel: var(--fj-paper);
  --machine-line: color-mix(in srgb, var(--fj-ink) 20%, transparent);
  --machine-line-soft: color-mix(in srgb, var(--fj-ink) 10%, transparent);
  --machine-ink: var(--fj-ink);
  --machine-muted: var(--fj-ink-soft);
  --machine-accent: var(--fj-coral);
  --surface-high: var(--fj-paper);
  --surface-main: color-mix(in srgb, var(--fj-yellow) 34%, var(--fj-paper));
  --surface-low: color-mix(in srgb, var(--fj-tea) 28%, var(--fj-paper));
  --surface-well: color-mix(in srgb, var(--fj-ice) 58%, var(--fj-paper));
  --studio-workspace-background: var(--fj-cream);
  --home-display: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, "PingFang SC", sans-serif;
  --home-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, "PingFang SC", sans-serif;
}

body:not(.home-open),
body:not(.home-open) .stage { background: var(--studio-workspace-background) !important; }
html[data-canvas-type="card"] body:not(.home-open):not(.cam-mode-card) .board-wrap {
  background-color: var(--studio-workspace-background) !important;
  background-image: none !important;
}
html[data-canvas-type="card"] body:not(.home-open):not(.cam-mode-card) .board {
  background-color: var(--canvas-color) !important;
  background-image: none !important;
}
body:not(.home-open) .studio-file-island,
body:not(.home-open) .studio-canvas-choice,
body:not(.home-open) .studio-playback-island,
body:not(.home-open) .studio-performance-island,
#recordsDrawer .records-tab,
#photoInspector .photo-inspector-card,
body.mode-keys .midi-chassis {
  border-color: var(--fj-line) !important;
  background: color-mix(in srgb, var(--fj-paper) 94%, transparent) !important;
  box-shadow: 0 2px 5px rgba(66,47,14,.05), 0 12px 28px rgba(66,47,14,.09) !important;
}
@media (min-width:761px) {
  body:not(.home-open) .studio-file-island,
  body:not(.home-open) .studio-canvas-choice,
  body:not(.home-open) .studio-playback-island,
  body:not(.home-open) .studio-performance-island,
  #recordsDrawer .records-tab,
  #recordsDrawer.records-drawer-shell.open .records-drawer {
    border-color: var(--fj-line)!important;
    background: color-mix(in srgb,var(--fj-paper) 94%,transparent)!important;
    box-shadow: 0 2px 5px rgba(66,47,14,.045),0 8px 20px rgba(66,47,14,.075)!important;
  }
}

/* Final Creations icon authority: a clear Mint optical disc. */
@media (min-width:761px) {
  #recordsDrawer .records-tab-disc {
    border:1px solid color-mix(in srgb,var(--fj-pool) 42%,var(--fj-forest) 12%)!important;
    background:radial-gradient(circle,var(--fj-paper) 0 12%,color-mix(in srgb,var(--fj-ice) 72%,var(--fj-paper)) 13% 21%,transparent 22%),var(--fj-mint)!important;
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.38)!important;
  }
  #recordsDrawer .records-tab-disc::after {
    border-color:color-mix(in srgb,var(--fj-pool) 30%,var(--fj-paper))!important;
    background:var(--fj-paper)!important;
  }
}

body.home-open .home-cover-stage {
  min-height:700px;
  height:100dvh;
  overflow:hidden;
  padding:24px clamp(24px,4vw,58px) 28px;
}
body.home-open .home-simple-layout {
  width:min(1240px,100%);
  height:calc(100% - 34px);
  grid-template-columns:minmax(330px,390px) minmax(0,780px);
  gap:clamp(36px,4.2vw,66px);
}
body.home-open .home-simple-layout .home-cover-wordmark {
  max-width:390px;
  font-size:clamp(3.35rem,4.55vw,4.35rem);
}
body.home-open .home-gallery-subtitle { max-width:370px; }
.home-preview-status {
  margin:14px 0 0;
  color:#697267;
  font:550 9px/1.35 var(--home-ui);
  letter-spacing:.045em;
  text-transform:none;
}
body.home-open .home-gallery-intro > .home-preview-status {
  margin-top:14px;
  color:#697267;
  font:550 9px/1.35 var(--home-ui);
  letter-spacing:.045em;
  text-transform:none;
}
.home-preview-status::before {
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  margin:0 7px 1px 0;
  border-radius:50%;
  background:#d5c985;
}
body.home-preview-unlocked .home-preview-status::before { background:#57b1a8; }
body.home-preview-active .home-preview-status::before {
  background:#ef6545;
  box-shadow:0 0 0 4px rgba(239,101,69,.13);
}
body.home-open .home-surface-stage {
  width:100%;
  height:540px;
  display:grid;
  place-items:center;
}
.home-hover-grid {
  width:min(760px,100%);
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:center;
  gap:22px 20px;
  padding:30px 18px;
  perspective:1100px;
  isolation:isolate;
}
.home-hover-tile {
  --inertia-x:0px;
  --inertia-y:0px;
  --inertia-r:0deg;
  --hover-scale:1;
  container-type:inline-size;
  position:relative;
  z-index:1;
  width:100%;
  aspect-ratio:1;
  box-sizing:border-box;
  display:block;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:inherit;
  cursor:pointer;
  outline:none;
  transform:translate3d(var(--inertia-x),var(--inertia-y),0) rotate(calc(var(--tile-rest,0deg) + var(--inertia-r))) scale(var(--hover-scale));
  transform-origin:center;
  transition:transform .72s cubic-bezier(.16,.78,.18,1),filter .22s ease,opacity .18s ease;
  will-change:transform;
}
.home-hover-tile:hover,
.home-hover-tile:focus-visible,
.home-hover-tile.is-previewing {
  --hover-scale:1.065;
  z-index:8;
  filter:drop-shadow(0 16px 15px rgba(39,50,41,.18));
}
.home-hover-tile.is-inertia-kick { transition-duration:.1s,.22s,.18s; }
.home-hover-tile:focus-visible::after {
  content:"";
  position:absolute;
  z-index:40;
  inset:-7px;
  border:2px solid #037f71;
  border-radius:inherit;
  pointer-events:none;
}
.home-hover-tile-disc { border-radius:50%; }
.home-hover-art {
  position:absolute;
  inset:0;
  display:block;
  pointer-events:none;
}
.home-hover-card {
  overflow:hidden;
  border:1px solid rgba(82,98,78,.23);
  background:#fcfaf6;
  box-shadow:0 7px 16px rgba(39,50,41,.09),inset 0 0 0 1px rgba(255,255,255,.72);
}
.home-hover-card::before {
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.68' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
.home-hover-disc {
  box-sizing:border-box;
  overflow:visible;
  border:1px solid #b8bdc0;
  border-radius:50%;
  background:#e6e9eb;
  box-shadow:0 0 0 2px #dfe1dd,inset 0 0 0 1px rgba(255,255,255,.55),0 2px 5px rgba(35,39,44,.09);
}
.home-hover-disc-surface {
  position:absolute;
  z-index:1;
  inset:1.2%;
  display:block;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.34);
  border-radius:50%;
  box-shadow:inset 0 0 14px rgba(39,50,41,.05);
}
.home-hover-disc-blue-dots {
  background-color:#52a5ce;
  background-image:radial-gradient(circle,#b8cee8 0 1.45px,transparent 1.85px);
  background-size:12px 12px;
}
.home-hover-disc-butter { background:#f7e9b2; }
.home-hover-disc-pool {
  background:#037f71;
}
.home-hover-disc-ice {
  background-color:#b8cee8;
  background-image:radial-gradient(circle,rgba(255,253,248,.74) 0 1.35px,transparent 1.8px);
  background-size:12px 12px;
}
.home-hover-disc-center {
  position:absolute;
  z-index:25;
  left:50%;
  top:50%;
  width:15%;
  aspect-ratio:1;
  box-sizing:border-box;
  display:grid;
  place-items:center;
  border:1px solid #c6c3ba;
  border-radius:50%;
  background:#eff0ec;
  box-shadow:0 0 0 3px rgba(235,232,224,.86),inset 0 1px 0 rgba(255,255,255,.72);
  transform:translate(-50%,-50%);
}
.home-hover-disc-hole {
  width:32%;
  aspect-ratio:1;
  border:1px solid #c4c1b8;
  border-radius:50%;
  background:#f4f0e8;
  box-shadow:inset 0 1px 2px rgba(55,58,54,.13);
}
.home-hover-photo {
  position:absolute;
  z-index:5;
  display:block;
  box-sizing:border-box;
  overflow:visible;
  container-type:inline-size;
}
.home-hover-photo img {
  display:block;
  width:100%;
  height:100%;
  box-sizing:border-box;
  object-fit:cover;
  padding:7cqi 7cqi 19cqi;
  background:#fffdf8;
  box-shadow:0 7cqi 14cqi rgba(39,50,41,.15);
}
.home-hover-cutout {
  position:absolute;
  z-index:7;
  display:block;
  filter:url(#paper-torn);
}
.home-hover-cutout img { display:block;width:100%;height:100%;object-fit:contain; }
.home-hover-photo-raw {
  overflow:hidden;
}
.home-hover-photo-raw img { padding:0;background:transparent;box-shadow:none; }
.home-hover-tape {
  position:absolute;
  z-index:12;
  display:block;
  padding:4px 7px 3px;
  color:#422f0e;
  background:rgba(247,233,178,.94);
  font:650 clamp(5px,.47vw,7px)/1 var(--home-ui);
  letter-spacing:.02em;
  white-space:nowrap;
  clip-path:polygon(2% 6%,98% 1%,96% 95%,1% 100%);
  filter:drop-shadow(0 1px 1px rgba(42,38,30,.13));
}
.home-hover-sticker {
  position:absolute;
  z-index:11;
  display:block;
  font-family:sans-serif;
  font-size:clamp(20px,2vw,28px);
  line-height:1;
  filter:drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff) drop-shadow(0 2px 2px rgba(35,40,44,.16));
}
.home-hover-doodle {
  position:absolute;
  z-index:10;
  display:block;
}
.home-hover-doodle svg { width:100%;height:100%;overflow:visible; }
.home-hover-doodle svg * { fill:none;stroke:#52624e;stroke-width:3.1;stroke-linecap:round;stroke-linejoin:round; }
.home-hover-cutout-cat { left:8%;top:5%;width:68%;height:55%;transform:rotate(1.8deg); }
.home-hover-photo-canopy { right:8%;bottom:8%;width:31%;height:52%;transform:rotate(-2.8deg); }
.home-hover-tape-field { left:7%;bottom:15%;transform:rotate(-5deg); }
.home-hover-sticker-field { left:17%;bottom:25%;transform:rotate(-10deg); }
.home-hover-doodle-wave { left:10%;bottom:4%;width:35%;height:13%; }
.home-hover-photo-paris { left:10%;top:20%;width:28%;height:27%;transform:rotate(-4deg); }
.home-hover-photo-paris img { object-position:center 70%; }
.home-hover-photo-paris-night { right:16%;bottom:15%;width:23%;height:33%;transform:rotate(4deg); }
.home-hover-tape-paris { left:12%;top:16%;transform:rotate(-6deg); }
.home-hover-sticker-trumpet { left:14%;bottom:18%;transform:rotate(-10deg); }
.home-hover-sticker-strings { right:15%;top:17%;transform:rotate(9deg); }
.home-hover-tile-dance .home-hover-card { background:#ddf2b8; }
.home-hover-photo-dance { left:9%;top:8%;width:76%;height:77%;transform:rotate(-2deg); }
.home-hover-photo-dance img { object-position:center; }
.home-hover-tape-dance { right:5%;bottom:9%;background:#f4beae;transform:rotate(5deg); }
.home-hover-sticker-dance { left:6%;bottom:8%;transform:rotate(-7deg); }
.home-hover-doodle-star { right:7%;top:6%;width:20%;height:20%;transform:rotate(8deg); }
.home-hover-photo-matcha { left:9%;top:29%;width:29%;height:29%;transform:rotate(-4deg); }
.home-hover-tape-matcha { left:13%;top:24%;background:#aacd96;transform:rotate(-5deg); }
.home-hover-sticker-matcha { right:14%;bottom:18%;transform:rotate(7deg); }
.home-hover-doodle-flower { right:13%;top:18%;width:20%;height:20%; }
.home-hover-photo-berlin { left:9%;top:16%;width:36%;height:35%;transform:rotate(-3deg); }
.home-hover-photo-berlin img { object-position:center 54%; }
.home-hover-tape-berlin { left:15%;top:12%;background:#ddf2b8;transform:rotate(-5deg); }
.home-hover-sticker-berlin { right:13%;bottom:17%;transform:rotate(8deg); }
.home-hover-tile-street .home-hover-card { background:#b8cee8; }
.home-hover-photo-street { left:7%;top:7%;width:77%;height:77%;transform:rotate(2deg); }
.home-hover-photo-street img { object-position:center; }
.home-hover-tape-street { right:7%;bottom:13%;background:#f7e9b2;transform:rotate(-4deg); }
.home-hover-sticker-street { left:9%;bottom:8%;transform:rotate(-8deg); }
.home-hover-doodle-eye { right:5%;top:5%;width:24%;height:24%;transform:rotate(7deg); }
.home-hover-photo-snow { left:9%;top:16%;width:34%;height:34%;transform:rotate(-4deg); }
.home-hover-photo-snow img { object-position:center; }
.home-hover-tape-snow { left:14%;top:12%;background:#fffdf8;transform:rotate(-5deg); }
.home-hover-sticker-snow { right:13%;bottom:17%;transform:rotate(8deg); }
.home-hover-doodle-moon { right:12%;top:16%;width:20%;height:20%; }
.home-hover-tile-night .home-hover-card { background:#422f0e; }
.home-hover-photo-night { left:10%;top:7%;width:70%;height:78%;transform:rotate(-2deg); }
.home-hover-tape-night { right:6%;bottom:10%;background:#d3b6d3;transform:rotate(5deg); }
.home-hover-sticker-night { left:6%;bottom:8%;transform:rotate(-8deg); }
.home-hover-doodle-night-star { right:5%;top:5%;width:21%;height:21%;transform:rotate(8deg); }
.home-hover-doodle-night-star svg * { stroke:#f7e9b2; }
.home-hover-tile.is-previewing .home-hover-disc-surface { animation:home-preview-disc-spin 7s linear infinite; }
.home-hover-tile.is-previewing .home-hover-card { box-shadow:0 9px 20px rgba(39,50,41,.13),inset 0 0 0 2px rgba(3,127,113,.18); }
@keyframes home-preview-disc-spin { to { transform:rotate(360deg); } }
@media (max-width:1100px) and (min-width:761px) {
  body.home-open .home-simple-layout { grid-template-columns:320px minmax(0,620px);gap:28px; }
  .home-hover-grid { gap:18px 15px;padding-inline:10px; }
}
@media (max-width:760px) {
  body.home-open .home-cover-stage { height:auto;min-height:100dvh;overflow:visible; }
  body.home-open .home-simple-layout { height:auto;grid-template-columns:1fr;gap:30px;padding:64px 0 30px; }
  body.home-open .home-surface-stage { width:100%;height:auto; }
  .home-hover-grid { width:min(560px,94vw);grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;padding:16px; }
}
@media (prefers-reduced-motion:reduce) {
  .home-hover-tile { transition:none!important;transform:rotate(var(--tile-rest,0deg))!important; }
  .home-hover-tile.is-previewing .home-hover-disc-surface { animation:none; }
}

/* Homepage art direction — one shared collage made from real FlowJam surfaces. */
:root {
  --home-hand: "Grandstander", "Crafty Girls", "Pangolin", "Arial Rounded MT Bold", "PingFang SC", sans-serif;
  --home-bg: var(--fj-cream);
  --home-ink: var(--fj-forest);
  --home-blue: #b8cee8;
  --home-blue-strong: #52a5ce;
  --home-yellow: #f7e9b2;
  --home-mint: #ddf2b8;
}
body.home-open #homeArchive { display:none!important; }
body.home-open #homeScreen { background:var(--home-bg); }
body.home-open .home-cover-stage { min-height:700px;height:100dvh;padding:22px clamp(24px,4vw,58px) 24px;overflow:hidden; }
body.home-open .home-cover-stage::before { display:block;opacity:.07; }
.home-gallery-head { position:relative;z-index:30;width:min(1260px,100%);height:20px;margin:0 auto;display:flex;justify-content:flex-end;align-items:center; }
.home-gallery-edition { color:color-mix(in srgb,var(--home-ink) 74%,transparent);font:600 8px/1 var(--home-ui);letter-spacing:.12em;text-transform:uppercase; }
body.home-open .home-simple-layout { position:relative;z-index:2;width:min(1260px,100%);height:calc(100% - 20px);margin:0 auto;display:block; }
body.home-open .home-simple-layout .home-gallery-intro { position:absolute;z-index:4;left:0;top:50%;width:470px;margin:0;pointer-events:none;transform:translateY(-50%); }
body.home-open .home-simple-layout .home-gallery-intro>p:first-child { margin:0 0 12px;color:var(--home-ink);font:650 8px/1 var(--home-ui);letter-spacing:.19em;text-transform:uppercase; }
body.home-open .home-simple-layout .home-cover-wordmark { max-width:455px;margin:0;color:var(--home-ink);font-family:var(--home-hand);font-size:clamp(4rem,5.65vw,5.65rem);font-weight:540;line-height:.82;letter-spacing:-.055em;font-variation-settings:"INFM" 46,"BNCE" 18;transform:rotate(-1.2deg); }
body.home-open .home-simple-layout .home-cover-wordmark>span { display:block;white-space:nowrap; }
body.home-open .home-simple-layout .home-cover-wordmark em { position:relative;color:var(--home-blue-strong);font-style:normal; }
body.home-open .home-simple-layout .home-cover-wordmark em::after { content:"";position:absolute;left:-2%;right:-4%;bottom:-.05em;height:.08em;border-radius:50%;background:var(--home-yellow);transform:rotate(-2deg); }
body.home-open .home-gallery-subtitle { max-width:320px;margin:23px 0 0 8px!important;color:color-mix(in srgb,var(--home-ink) 72%,transparent)!important;font:400 12px/1.5 var(--home-ui)!important;letter-spacing:0!important;text-transform:none!important; }
body.home-open .home-surface-controls { width:max-content;max-width:100%;margin:22px 0 0 8px;pointer-events:auto; }
body.home-open .home-surface-controls .home-cover-start { height:auto!important;min-height:0!important;padding:0 0 4px!important;border:0!important;border-bottom:1.5px solid var(--home-ink)!important;border-radius:0!important;background:transparent!important;color:var(--home-ink)!important;font:650 10px/1 var(--home-hand)!important;box-shadow:none!important;transform:rotate(-1deg)!important; }
body.home-open .home-surface-controls .home-cover-start:hover { color:#037f71!important;box-shadow:none!important;transform:rotate(-1deg) translateY(-1px)!important; }
body.home-open .home-gallery-intro>.home-preview-status { margin:14px 0 0 8px;color:color-mix(in srgb,var(--home-ink) 68%,transparent);font:550 8px/1.35 var(--home-ui);letter-spacing:.035em;pointer-events:none; }
body.home-open .home-surface-stage { position:absolute;z-index:3;inset:0;width:auto;height:auto;display:block;pointer-events:none; }
.home-hover-grid { position:relative;width:100%;height:100%;display:block;padding:0;perspective:1100px;isolation:isolate; }
.home-hover-tile { position:absolute;width:var(--tile-size);height:var(--tile-size);pointer-events:auto;transform:translate3d(var(--inertia-x),var(--inertia-y),0) rotate(calc(var(--tile-rest,0deg) + var(--inertia-r))) scale(var(--hover-scale)); }
.home-hover-tile-logo { --tile-size:232px;left:34.5%;top:3%;z-index:12; }
.home-hover-tile-dance { --tile-size:176px;left:61%;top:5%;z-index:5; }
.home-hover-tile-matcha { --tile-size:160px;right:1%;top:2%;z-index:4; }
.home-hover-tile-field { --tile-size:224px;left:52%;top:35%;z-index:7; }
.home-hover-tile-snow { --tile-size:138px;right:1.5%;top:39%;z-index:6; }
.home-hover-tile-berlin { --tile-size:170px;left:43%;bottom:1%;z-index:8; }
.home-hover-tile-night { --tile-size:138px;left:32%;bottom:5%;z-index:11; }
.home-hover-tile-street { --tile-size:138px;right:9%;bottom:1%;z-index:10; }
.home-hover-logo-disc { overflow:visible;border-radius:50%;filter:drop-shadow(0 9px 10px rgba(39,50,41,.12)); }
.home-hover-logo-disc img { width:100%;height:100%;display:block;object-fit:contain; }
.home-hover-tile.is-previewing .home-hover-logo-disc { animation:home-preview-logo-spin 7s linear infinite; }
@keyframes home-preview-logo-spin { to { transform:rotate(360deg); } }
.home-hover-tile-dance .home-hover-card { background:var(--home-mint); }
.home-hover-tile-street .home-hover-card { background:var(--home-blue); }
.home-hover-tile-night .home-hover-card { background:#52624e; }
.home-hover-disc-pool { background:var(--fj-pool); }
.home-hover-disc-butter { background:var(--home-yellow); }
.home-hover-disc-ice { background-color:var(--home-blue); }
.home-hover-tape { font-family:var(--home-hand);font-variation-settings:"INFM" 42,"BNCE" 12; }

@media (min-width:761px) and (max-width:1100px) {
  body.home-open .home-simple-layout .home-gallery-intro { width:355px; }
  body.home-open .home-simple-layout .home-cover-wordmark { max-width:350px;font-size:clamp(3.45rem,6.3vw,4.3rem); }
  body.home-open .home-surface-stage { left:260px; }
  .home-hover-grid { transform:scale(.86);transform-origin:center right; }
}
@media (max-width:760px) {
  body.home-open .home-cover-stage { height:auto;min-height:100dvh;padding:22px 24px 40px;overflow:visible; }
  .home-gallery-head { height:18px; }
  body.home-open .home-simple-layout { height:auto;display:grid;grid-template-columns:1fr;gap:30px;padding:50px 0 0; }
  body.home-open .home-simple-layout .home-gallery-intro { position:relative;left:auto;top:auto;width:auto;transform:none; }
  body.home-open .home-simple-layout .home-cover-wordmark { max-width:560px;font-size:clamp(3.2rem,14vw,4.4rem); }
  body.home-open .home-gallery-subtitle { max-width:420px; }
  body.home-open .home-surface-stage { position:relative;inset:auto;width:100%;height:auto; }
  .home-hover-grid { width:min(560px,94vw);height:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;padding:8px 0; }
  .home-hover-tile { position:relative;inset:auto!important;width:100%;height:auto;aspect-ratio:1; }
}
@media (prefers-reduced-motion:reduce) { .home-hover-tile.is-previewing .home-hover-logo-disc { animation:none; } }

/* Tape is the default visual surface for text; its computed palette must remain visible. */
.item-note.text-tape {
  background:transparent!important;
  clip-path:none!important;
}
.item-note.text-tape::before {
  background:linear-gradient(90deg,rgba(255,255,255,.18),transparent 12%,transparent 88%,rgba(66,47,14,.035)),var(--item-fill)!important;
}

/* A visible Mint mini-CD for the Creations entry, still without a count badge. */
@media (min-width:761px) {
  #recordsDrawer .records-tab-disc {
    border:1px solid color-mix(in srgb,var(--fj-pool) 34%,var(--fj-forest) 16%)!important;
    background:radial-gradient(circle,var(--fj-paper) 0 12%,color-mix(in srgb,var(--fj-ice) 72%,var(--fj-paper)) 13% 21%,transparent 22%),var(--fj-mint)!important;
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.34)!important;
  }
  #recordsDrawer .records-tab-disc::after {
    border-color:color-mix(in srgb,var(--fj-pool) 28%,var(--fj-paper))!important;
    background:var(--fj-paper)!important;
  }
}
#photoInspector .photo-inspector-card {
  border-color: var(--fj-line)!important;
  background: color-mix(in srgb,var(--fj-paper) 97%,transparent)!important;
  box-shadow: 0 2px 5px rgba(66,47,14,.05),0 12px 28px rgba(66,47,14,.09)!important;
}
#photoInspector .photo-inspector-head { background: color-mix(in srgb,var(--fj-paper) 96%,transparent)!important; }
body:not(.home-open) .studio-canvas-choice button.is-selected,
body:not(.home-open) .topbar #playPause.is-live { background: var(--fj-pool) !important; color: #fff !important; }
.topbar .rail-tool-btn.on,
.topbar .rail-tool-btn[data-tool="dj"].on,
body.mode-keys .keys-toggle.on { background: var(--fj-mint) !important; color: var(--fj-forest) !important; box-shadow: inset 3px 0 0 var(--fj-pool) !important; }
.source-tool:focus-visible,
body:not(.archive-collapsed) .source-tool:focus-visible,
#archiveToggle:focus-visible,
.archive-toggle:focus-visible,
.snap-mode-button:focus-visible,
.confirm-actions button:focus-visible,
#photoInspector .photo-inspector-head:focus-visible { outline-color: var(--fj-pool)!important; }
.base-template-tabs button.on { background: color-mix(in srgb,var(--fj-mint) 48%,var(--fj-paper))!important; color:var(--fj-forest)!important; }
body.mode-keys .midi-panel { border-bottom-color:var(--fj-line-soft)!important; }
body.mode-keys .key-volume,
body.mode-keys .keys-toggle,
body.mode-keys .keys-refresh,
body.mode-keys .octave-bank { background:color-mix(in srgb,var(--fj-ice) 30%,var(--fj-paper))!important; }
body.mode-keys .keys-edge-toggle,
body.mode-keys .keys-window-close { color:var(--fj-ink-soft)!important; }
.photo-polaroid .camera-power.on { background:color-mix(in srgb,var(--fj-mint) 60%,var(--fj-paper))!important;color:var(--fj-forest)!important; }
.photo-polaroid .camera-power.on:hover { background:var(--fj-mint)!important; }
.topbar .rail-tool-btn.err { background: color-mix(in srgb, var(--fj-frost) 68%, var(--fj-paper)) !important; color: #8b3624 !important; }
.records-tab-count,
.photo-polaroid:not(.camera-on) .camera-power,
.photo-polaroid .snap-go:not(:disabled) { background: var(--fj-coral) !important; color: var(--fj-ink) !important; }
.photo-polaroid:not(.camera-on) .camera-power:hover,
.photo-polaroid .snap-go:not(:disabled):hover { background: var(--fj-orange) !important; }
.inspector-rainbow-plus,
.appearance-reference-swatches .appearance-custom-trigger::before {
  background:radial-gradient(circle,var(--fj-paper) 0 9%,color-mix(in srgb,var(--fj-ink) 22%,transparent) 10% 14%,transparent 15%),conic-gradient(var(--fj-pink),var(--fj-coral),var(--fj-orange),var(--fj-yellow),var(--fj-mint),var(--fj-pool),var(--fj-blue),var(--fj-lilac),var(--fj-pink))!important;
}
.item-inspector-colors .inspector-color-reference > .inspector-colour-swatch,
.item-inspector-colors .inspector-color-reference > .inspector-custom-trigger {
  border-color: color-mix(in srgb,var(--fj-ink) 18%,transparent)!important;
}
.item-inspector-colors .inspector-colour-swatch.on {
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.56),0 0 0 2px var(--fj-pool)!important;
}
.appearance-reference-swatches .appearance-swatch.on::before {
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.42),0 5px 12px var(--fj-shadow)!important;
}

.cd-base-butter { --cd-base: var(--fj-yellow); --cd-edge: #c9a64b; }
.cd-base-pool { --cd-base: var(--fj-pool); --cd-edge: #025d54; }
.cd-base-tomato { --cd-base: var(--fj-coral); --cd-edge: #b6402d; }
.cd-base-lilac { --cd-base: var(--fj-lilac); --cd-edge: #9d789d; }
.cd-base-shower { --cd-base: var(--fj-pink); --cd-edge: #ad365c; }
.cd-base-mint { --cd-base: var(--fj-mint); --cd-edge: #8eb467; }
.cd-base-blueberry { --cd-base: var(--fj-blue); --cd-edge: #2d789e; }
.cd-base-chocolate { --cd-base: var(--fj-ink); --cd-edge: #211704; }
.cd-base-tea { --cd-base: var(--fj-tea); --cd-edge: #628557; }
.cd-base-orange { --cd-base: var(--fj-orange); --cd-edge: #b8650d; }
.cd-base-forest { --cd-base: var(--fj-forest); --cd-edge: #143225; }
.cd-base-frost { --cd-base: var(--fj-frost); --cd-edge: #c87865; }

/* Original inertia CD gallery: velocity response without copying the reference layout or assets. */
body.home-open { overflow: auto; background: #f1efe9; font-family:var(--home-ui); }
body.home-open #homeScreen { min-height: 100dvh; overflow: auto; background:radial-gradient(ellipse at 50% -12%,rgba(255,255,255,.98) 0 29%,rgba(255,255,255,0) 67%),linear-gradient(108deg,rgba(255,255,255,.45),transparent 37% 68%,rgba(66,47,14,.035)),#f1efe9;color:var(--fj-ink); }
body.home-open .home-main.home-cover { width: 100%; height: auto; min-height: 100dvh; background:transparent; }
body.home-open .home-cover-stage { position: relative; min-height: 700px; height: 100dvh; padding: 24px clamp(22px,4vw,62px) 34px; overflow: hidden; }
.home-cover-stage::before { content:"";position:absolute;z-index:0;inset:0;pointer-events:none;opacity:.23;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.11'/%3E%3C/svg%3E");mix-blend-mode:multiply; }
.home-gallery-head { position: relative; z-index: 30; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; }
.home-gallery-brand { width: fit-content; display: inline-flex; align-items: center; gap: 9px; color: var(--fj-ink); text-decoration: none; }
.home-gallery-brand { padding:0;border:0;background:transparent;cursor:pointer; }
.home-gallery-brand:focus-visible { outline:2px solid var(--fj-pool);outline-offset:5px;border-radius:6px; }
.home-gallery-logo { width:92px;height:auto;display:block;object-fit:contain; }
.home-gallery-head > p { margin: 0; color: var(--fj-ink-soft); font: 600 9px/1 var(--home-ui); letter-spacing: .17em; text-transform: uppercase; }
.home-gallery-browse { justify-self: end; border: 0; background: transparent; color: var(--fj-ink); font: 600 10px/1 var(--home-ui); cursor: pointer; }
.home-gallery-browse span { color: var(--fj-coral); }
.home-gallery-intro { position: relative; z-index: 18; margin: clamp(38px,6vh,66px) 0 0; pointer-events: none; }
.home-gallery-intro > p { margin: 0 0 12px; color: var(--fj-coral); font: 650 9px/1 var(--home-ui); letter-spacing: .19em; text-transform: uppercase; }
body.home-open .home-cover-wordmark { position: static; margin: 0; max-width: 900px; color: var(--fj-ink); font: 500 clamp(3.3rem,5.25vw,5.75rem)/.92 var(--home-display); letter-spacing: -.062em; white-space: normal; }
body.home-open .home-cover-wordmark em { color: var(--fj-pool); font-style: normal; }
.home-inertia-grid { position: relative; z-index: 12; width: min(650px,56vw); margin: clamp(8px,1.4vh,15px) 0 0 clamp(112px,18vw,345px); display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: clamp(2px,.35vw,6px); perspective: 1100px;transform-style:preserve-3d; }
.home-inertia-disc { --inertia-x:0px;--inertia-y:0px;--inertia-rotate:0deg;--hover-tilt-x:0deg;--hover-tilt-y:0deg;position:relative;grid-column:var(--grid-col);grid-row:var(--grid-row);aspect-ratio:1;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;transform:translate3d(var(--inertia-x),var(--inertia-y),var(--disc-z,0px)) rotateX(calc(var(--rest-tilt-x,0deg) + var(--hover-tilt-x))) rotateY(calc(var(--rest-tilt-y,0deg) + var(--hover-tilt-y))) rotateZ(calc(var(--rest-rotate) + var(--inertia-rotate))) scale(var(--disc-scale,1));transform-style:preserve-3d;transition:transform .68s cubic-bezier(.16,.78,.18,1),filter .22s ease,opacity .22s ease;will-change:transform; }
.home-inertia-disc:hover,.home-inertia-disc:focus-visible,.home-inertia-disc.is-selected { --disc-scale:1.045; z-index: 5; outline: 0; filter:drop-shadow(0 18px 16px rgba(49,38,21,.23)); }
.home-inertia-disc:hover,.home-inertia-disc:focus-visible { --disc-z:12px; }
.home-inertia-disc:nth-child(1){--rest-tilt-x:2deg;--rest-tilt-y:-4deg}.home-inertia-disc:nth-child(2){--rest-tilt-x:-2deg;--rest-tilt-y:3deg}.home-inertia-disc:nth-child(3){--rest-tilt-x:3deg;--rest-tilt-y:-2deg}.home-inertia-disc:nth-child(4){--rest-tilt-x:-3deg;--rest-tilt-y:4deg}.home-inertia-disc:nth-child(5){--rest-tilt-x:2deg;--rest-tilt-y:2deg}.home-inertia-disc:nth-child(6){--rest-tilt-x:-2deg;--rest-tilt-y:-3deg}.home-inertia-disc:nth-child(7){--rest-tilt-x:3deg;--rest-tilt-y:2deg}.home-inertia-disc:nth-child(8){--rest-tilt-x:-3deg;--rest-tilt-y:-2deg}.home-inertia-disc:nth-child(9){--rest-tilt-x:2deg;--rest-tilt-y:-3deg}.home-inertia-disc:nth-child(10){--rest-tilt-x:-2deg;--rest-tilt-y:2deg}.home-inertia-disc:nth-child(11){--rest-tilt-x:3deg;--rest-tilt-y:-2deg}.home-inertia-disc:nth-child(12){--rest-tilt-x:-2deg;--rest-tilt-y:3deg}
.home-inertia-disc.is-selected::after { content:"";position:absolute;z-index:5;left:50%;bottom:-2px;width:30%;height:2px;border-radius:99px;background:var(--fj-pool);box-shadow:0 0 10px rgba(3,127,113,.32);transform:translateX(-50%);pointer-events:none; }
.home-cd-product { position:relative;z-index:1;width:100%;height:100%;display:block;object-fit:contain;user-select:none;pointer-events:none;filter:saturate(.96) contrast(1.02); }
.home-inertia-disc:not(.is-selected)::after { content:"";position:absolute;z-index:2;inset:7.7%;border-radius:50%;background:radial-gradient(circle at var(--light-x,35%) var(--light-y,28%),rgba(255,255,255,.24),transparent 22%);mix-blend-mode:screen;opacity:.58;pointer-events:none; }
.home-inertia-disc::before { content:"";position:absolute;z-index:-1;left:12%;right:7%;bottom:3%;height:15%;border-radius:50%;background:rgba(39,29,18,.28);filter:blur(13px);transform:translateY(7px) scaleX(.92);opacity:.66;transition:opacity .2s ease,transform .68s cubic-bezier(.16,.78,.18,1); }
.home-inertia-disc:hover::before,.home-inertia-disc.is-selected::before { opacity:.82;transform:translateY(10px) scaleX(.98); }
.home-inertia-disc small { position:absolute;left:10%;bottom:3%;z-index:3;padding:3px 5px;border-radius:3px;background:rgba(245,243,237,.72);backdrop-filter:blur(6px);color:var(--fj-ink);font:650 7px/1 var(--home-ui);letter-spacing:.14em;text-transform:uppercase; }
.home-inertia-disc.is-atmosphere { cursor:default; opacity:.88; }
.home-gallery-card { position:absolute;z-index:22;right:clamp(24px,4vw,62px);bottom:clamp(24px,4vh,42px);width:min(318px,calc(100vw - 48px));display:grid;gap:7px;padding:16px;border:1px solid rgba(66,47,14,.14);border-radius:10px;background:rgba(246,244,238,.77);box-shadow:0 18px 45px rgba(50,40,27,.13),inset 0 1px 0 rgba(255,255,255,.7);backdrop-filter:blur(20px) saturate(.82); }
.home-gallery-card>span { color:var(--fj-coral);font:700 8px/1 var(--home-ui);letter-spacing:.16em; }
.home-gallery-card h2 { margin:0;color:var(--fj-ink);font:650 20px/1.1 var(--home-display);letter-spacing:-.025em; }
.home-gallery-card>p { margin:0;color:var(--fj-ink-soft);font:450 10px/1.5 var(--home-ui);letter-spacing:.01em; }
.home-gallery-actions { display:grid;grid-template-columns:1fr 1.12fr;gap:8px;margin-top:6px; }
.home-gallery-preview,.home-gallery-card .home-cover-start { position:static!important;inset:auto!important;width:auto!important;min-width:0!important;min-height:36px!important;margin:0!important;padding:0 10px!important;border:1px solid rgba(66,47,14,.16)!important;border-radius:6px!important;background:rgba(247,233,178,.74)!important;color:var(--fj-ink)!important;font:600 9px/1 var(--home-ui)!important;transform:none!important; }
.home-gallery-card .home-cover-start { background:var(--fj-pool)!important;color:#fff!important;border-color:var(--fj-pool)!important; }
.home-gallery-preview { display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px;cursor:pointer; }
.home-gallery-preview .home-cd-play-icon { position:static!important;inset:auto!important;z-index:auto!important;width:auto!important;height:auto!important;display:inline!important;place-items:normal!important;aspect-ratio:auto!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;color:inherit!important;box-shadow:none!important;font-size:8px!important;line-height:1!important;transform:none!important; }
.home-gallery-preview time { font-size:7px; }
.home-gallery-card .home-cd-wave { height:8px;display:flex;align-items:center;gap:4px;margin-top:4px; }
.home-gallery-card .home-cd-wave i { flex:1;height:2px;border-radius:2px;background:var(--fj-pink);transform-origin:center; }
.home-gallery-card:has(.home-gallery-preview[aria-pressed="true"]) .home-cd-wave i { animation:home-cd-wave .72s ease-in-out infinite alternate; }
body.home-open .guide-demo.home-cd-player { display:none!important; }
body.home-open #homeArchive { display:grid!important;width:min(1180px,calc(100% - 48px));margin:0 auto 70px;padding:60px 0 0;border-top:1px solid var(--fj-line); }
body.home-open #boardsGrid .board-file { background:var(--fj-yellow);border:1px solid var(--fj-line);box-shadow:0 8px 20px rgba(66,47,14,.08); }
body.home-open #boardsGrid .board-file:nth-child(3n+2) { background:var(--fj-mint); }
body.home-open #boardsGrid .board-file:nth-child(3n+3) { background:var(--fj-ice); }
body.home-open #newBoardBtn { color:var(--fj-pool); }
body:not(.home-open) .studio-file-island .brand-mark {
  overflow:hidden;
  border-radius:50%;
  background:radial-gradient(circle,var(--fj-paper) 0 9%,var(--fj-coral) 10% 15%,transparent 16%),conic-gradient(var(--fj-pink),var(--fj-orange),var(--fj-mint),var(--fj-pool),var(--fj-blue),var(--fj-lilac),var(--fj-pink));
  box-shadow:0 2px 6px var(--fj-shadow);
}
body:not(.home-open) .studio-file-island .brand-img { opacity:0; }

@media (min-width:1081px) and (max-width:1300px){.home-inertia-grid{width:min(560px,52vw);margin-left:clamp(80px,10vw,130px)}}
@media (max-width:1080px){body.home-open .home-cover-stage{height:auto;min-height:100dvh;padding-bottom:36px}.home-gallery-intro{margin-top:38px}body.home-open .home-cover-wordmark{max-width:760px;font-size:clamp(3.05rem,7.2vw,4.8rem)}.home-inertia-grid{width:min(540px,calc(100vw - 64px));margin:15px auto 0;gap:2px}.home-inertia-disc:nth-child(n+9){display:none}.home-gallery-card{position:relative;right:auto;bottom:auto;margin:16px auto 0}}
@media (max-width:620px){.home-gallery-head{grid-template-columns:1fr auto}.home-gallery-head>p{display:none}.home-gallery-intro{margin-top:34px}body.home-open .home-cover-wordmark{font-size:clamp(3rem,14vw,4.6rem)}.home-inertia-grid{width:92vw;grid-template-columns:repeat(2,1fr);margin-top:20px}.home-inertia-disc{grid-column:auto!important;grid-row:auto!important}.home-inertia-disc:nth-child(n+9){display:none}.home-gallery-card{width:92vw}.home-gallery-actions{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.home-inertia-disc{transition:none!important}.home-gallery-card .home-cd-wave i{animation:none!important}}

/* Honest, minimal home: every preview maps directly to an Appearance preset. */
body.home-open #homeScreen { background:var(--studio-workspace-background); }
body.home-open .home-cover-stage { min-height:700px;height:100dvh;padding:24px clamp(28px,5vw,76px) 42px; }
body.home-open .home-cover-stage::before { display:none; }
.home-gallery-head { grid-template-columns:1fr 1fr; }
.home-simple-layout { position:relative;z-index:2;width:min(1180px,100%);height:calc(100% - 42px);margin:0 auto;display:grid;grid-template-columns:minmax(420px,.9fr) minmax(360px,.72fr);align-items:center;gap:clamp(58px,9vw,140px); }
.home-simple-layout .home-gallery-intro { margin:0;pointer-events:auto; }
.home-simple-layout .home-gallery-intro>p:first-child { margin:0 0 18px;color:var(--fj-pool);font:650 9px/1 var(--home-ui);letter-spacing:.18em;text-transform:uppercase; }
.home-simple-layout .home-cover-wordmark { max-width:620px;font-size:clamp(3.45rem,5.8vw,5.9rem);line-height:.93;letter-spacing:-.065em; }
.home-gallery-subtitle { max-width:520px;margin:24px 0 0!important;color:var(--fj-ink-soft)!important;font:400 14px/1.55 var(--home-ui)!important;letter-spacing:0!important;text-transform:none!important; }
.home-surface-controls { max-width:520px;margin-top:34px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 16px;align-items:end; }
.home-surface-options { grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px; }
.home-surface-option { min-width:0;display:grid;grid-template-columns:26px minmax(0,1fr);align-items:center;gap:8px;padding:7px 8px;border:1px solid var(--fj-line);border-radius:8px;background:color-mix(in srgb,var(--fj-paper) 72%,transparent);color:var(--fj-ink-soft);font:600 9px/1.15 var(--home-ui);text-align:left;cursor:pointer;transition:border-color .15s ease,background .15s ease,color .15s ease; }
.home-surface-option:hover { border-color:color-mix(in srgb,var(--fj-ink) 28%,transparent); }
.home-surface-option:focus-visible { outline:2px solid var(--fj-pool);outline-offset:2px; }
.home-surface-option.is-selected { border-color:var(--fj-pool);background:var(--fj-paper);color:var(--fj-ink);box-shadow:0 0 0 1px var(--fj-pool); }
.home-surface-chip { position:relative;width:26px;aspect-ratio:1;border:1px solid color-mix(in srgb,var(--preview-color) 70%,var(--fj-ink) 30%);border-radius:50%;background:var(--preview-color);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); }
.home-surface-option[data-finish="dots-pink"] .home-surface-chip { background-color:var(--preview-color);background-image:radial-gradient(circle,#F9D4F8 0 1.5px,transparent 2px);background-size:7px 7px; }
.home-surface-option[data-finish="dots-cobalt"] .home-surface-chip { background-color:var(--preview-color);background-image:radial-gradient(circle,#B8CEE8 0 1.4px,transparent 1.9px);background-size:7px 7px; }
.home-selected-surface { min-width:0;display:grid;gap:4px; }
.home-selected-surface h2 { margin:0;color:var(--fj-ink);font:650 15px/1.1 var(--home-ui);letter-spacing:-.015em; }
.home-selected-surface p { margin:0;color:var(--fj-ink-soft);font:400 10px/1.35 var(--home-ui); }
.home-surface-controls .home-cover-start { position:static!important;inset:auto!important;min-width:142px!important;height:42px!important;margin:0!important;padding:0 15px!important;border:0!important;border-radius:8px!important;background:var(--fj-pool)!important;color:#fff!important;font:650 10px/1 var(--home-ui)!important;transform:none!important;box-shadow:none!important; }
.home-surface-stage { display:grid;justify-items:center;align-content:center;gap:18px; }
.home-surface-preview { --home-disc-color:#F7E9B2;position:relative;width:min(360px,31vw);aspect-ratio:1;display:grid;place-items:center;border-radius:50%;filter:drop-shadow(0 20px 22px rgba(66,47,14,.12)); }
.home-actual-disc { position:relative;width:100%;height:100%;display:block;overflow:hidden;border:1px solid color-mix(in srgb,var(--home-disc-color) 62%,var(--fj-ink) 38%);border-radius:50%;background-color:var(--home-disc-color);box-shadow:inset 0 0 0 3px rgba(255,255,255,.22),inset 0 0 28px rgba(66,47,14,.08); }
.home-actual-disc::after { content:"";position:absolute;left:50%;top:50%;width:14%;aspect-ratio:1;border:1px solid rgba(66,47,14,.32);border-radius:50%;background:var(--studio-workspace-background);box-shadow:0 0 0 10px color-mix(in srgb,var(--home-disc-color) 76%,#d7dde1 24%);transform:translate(-50%,-50%); }
.home-surface-preview[data-finish="dots-pink"] .home-actual-disc { background-color:var(--home-disc-color);background-image:radial-gradient(circle,#F9D4F8 0 6px,transparent 7px);background-size:28px 28px; }
.home-surface-preview[data-finish="dots-cobalt"] .home-actual-disc { background-color:var(--home-disc-color);background-image:radial-gradient(circle,#B8CEE8 0 5px,transparent 6px);background-size:25px 25px; }
.home-surface-stage>p { margin:0;color:var(--fj-ink-soft);font:500 9px/1 var(--home-ui);letter-spacing:.1em;text-transform:uppercase; }
@media(max-width:900px){body.home-open .home-cover-stage{height:auto;min-height:100dvh}.home-simple-layout{height:auto;grid-template-columns:1fr;gap:38px;padding:70px 0 30px}.home-simple-layout .home-cover-wordmark{font-size:clamp(3.1rem,9vw,5rem)}.home-surface-stage{grid-row:2}.home-surface-preview{width:min(340px,54vw)}}
@media(max-width:620px){
  body.home-open .home-cover-stage { min-height:100dvh;padding:22px 28px 36px; }
  .home-simple-layout { gap:34px;padding:62px 0 22px; }
  .home-simple-layout .home-cover-wordmark { font-size:clamp(3rem,13vw,4rem); }
  .home-gallery-subtitle { margin-top:20px!important;font-size:13px!important; }
  .home-surface-controls { grid-template-columns:1fr;margin-top:28px;gap:16px; }
  .home-surface-options { grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
  .home-surface-option { min-height:44px;padding:8px 10px;font-size:9px; }
  .home-selected-surface { grid-column:1; }
  .home-surface-controls .home-cover-start { grid-column:1;width:100%!important;min-width:0!important; }
  .home-surface-stage { gap:14px; }
  .home-surface-preview { width:min(290px,74vw); }
}
@media(max-width:350px){
  body.home-open .home-cover-stage { padding-inline:20px; }
  .home-gallery-head { width:calc(100% + 2px); }
  .home-simple-layout { padding-top:54px; }
}

/* Honest home samples: every visible piece maps to a current Studio item. */
body.home-open #homeScreen {
  background:#f4f0e8;
}
body.home-open .home-cover-stage { min-height:760px; }
body.home-open .home-cover-stage::before { display:block;opacity:.13; }
.home-gallery-brand,.home-gallery-browse,body.home-open .home-cover-wordmark { color:#52624e; }
.home-gallery-browse span { color:#718066; }
.home-simple-layout .home-gallery-intro>p:first-child { color:#52624e; }
.home-simple-layout .home-cover-wordmark em { color:#718066; }
.home-gallery-subtitle,.home-selected-surface p { color:#697267!important; }
.home-simple-layout { grid-template-columns:minmax(380px,.76fr) minmax(500px,1.04fr);gap:clamp(42px,6vw,100px); }
.home-simple-layout .home-cover-wordmark { max-width:590px;font-size:clamp(3.25rem,5.25vw,5.45rem); }
.home-surface-options { grid-template-columns:repeat(2,minmax(0,1fr)); }
.home-surface-option { min-height:55px;grid-template-columns:30px minmax(0,1fr);padding:8px 10px;border-color:rgba(82,98,78,.22);background:rgba(252,250,246,.58); }
.home-surface-option:hover { border-color:rgba(82,98,78,.48); }
.home-surface-option:focus-visible { outline-color:#718066; }
.home-surface-option.is-selected { border-color:#718066;background:#fcfaf6;box-shadow:0 0 0 1px #718066; }
.home-surface-option>span:last-child { min-width:0;display:grid;gap:3px; }
.home-surface-option strong { overflow:hidden;color:inherit;font:650 10px/1.1 var(--home-ui);text-overflow:ellipsis;white-space:nowrap; }
.home-surface-option small { color:var(--fj-ink-soft);font:500 8px/1 var(--home-ui);letter-spacing:.04em; }
.home-surface-chip { width:29px; }
.home-surface-chip-canvas { border-radius:3px;transform:rotate(-4deg);box-shadow:3px 3px 0 rgba(113,128,102,.34); }
.home-selected-surface h2 { color:#52624e; }
.home-surface-controls .home-cover-start { background:#52624e!important; }
.home-surface-stage { min-width:0;gap:10px; }
.home-sample-stage { position:relative;width:min(570px,45vw);aspect-ratio:1.16;isolation:isolate; }
.home-real-sample { position:absolute;inset:50% auto auto 50%;margin:0;opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,-50%) scale(.96);transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .2s ease; }
.home-real-sample.is-selected { z-index:7;opacity:1;visibility:visible;transform:translate(-50%,-50%) rotate(var(--sample-tilt));filter:drop-shadow(0 15px 20px rgba(39,50,41,.14)); }
.home-real-sample-canvas { --sample-tilt:-2deg;width:82%; }
.home-real-sample-disc { --sample-tilt:1deg;width:68%; }
.home-real-canvas { position:relative;aspect-ratio:1.32;overflow:hidden;border:1px solid rgba(82,98,78,.22);background:#fcfaf6;box-shadow:0 7px 18px rgba(39,50,41,.11); }
.home-real-canvas::after,.home-real-disc::after { content:"";position:absolute;z-index:15;inset:0;pointer-events:none;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.68' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");mix-blend-mode:multiply; }
.home-real-photo { position:absolute;z-index:3;display:block;box-sizing:border-box;padding:6px 6px 18px;background:#fcfaf6;box-shadow:0 6px 16px rgba(39,50,41,.12); }
.home-real-photo img { display:block;width:100%;height:auto;object-fit:contain; }
.home-real-photo-cat { left:9%;top:12%;width:72%;transform:rotate(2deg); }
.home-real-photo-canopy { right:7%;bottom:8%;width:29%;transform:rotate(-3deg); }
.home-real-tape { position:absolute;z-index:9;display:block;padding:6px 11px 5px;color:var(--fj-ink);font:650 clamp(6px,.62vw,9px)/1 var(--home-ui);white-space:nowrap;clip-path:polygon(2% 5%,98% 0,96% 96%,1% 100%);filter:drop-shadow(0 2px 2px rgba(42,38,30,.14)); }
.home-real-tape-summer { left:5%;bottom:15%;background:rgba(213,201,133,.84);transform:rotate(-5deg); }
.home-real-doodle { position:absolute;z-index:8;display:block; }
.home-real-doodle svg { width:100%;height:100%;overflow:visible; }
.home-real-doodle svg * { fill:none;stroke:#52624e;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round; }
.home-real-doodle-wave { left:19%;bottom:5%;width:34%;height:13%;transform:rotate(-2deg); }
.home-real-disc { position:relative;aspect-ratio:1;overflow:hidden;border:1px solid rgba(82,98,78,.24);border-radius:50%;background:#ede8de;box-shadow:inset 0 0 0 3px rgba(255,255,255,.25),inset 0 0 22px rgba(39,50,41,.05),0 8px 18px rgba(39,50,41,.11); }
.home-real-photo-matcha { z-index:3;left:7%;top:36%;width:28%;padding:5px 5px 13px;transform:rotate(-3deg); }
.home-real-photo-matcha img { border-radius:1px; }
.home-real-tape-piano { left:28%;right:auto;top:33%;background:rgba(183,195,167,.86);transform:rotate(3deg); }
.home-real-doodle-flower { left:18%;right:auto;top:62%;width:14%;height:14%;transform:rotate(-5deg); }
.home-real-doodle-flower svg * { stroke:#52624e; }
.home-real-disc-hole { position:absolute;z-index:16;left:50%;top:50%;width:14%;aspect-ratio:1;border:1px solid rgba(82,98,78,.3);border-radius:50%;background:#f4f0e8;box-shadow:0 0 0 7px rgba(255,255,255,.5),0 2px 7px rgba(39,50,41,.16) inset;transform:translate(-50%,-50%); }
@media(max-width:980px){
  body.home-open .home-cover-stage { height:auto; }
  .home-simple-layout { grid-template-columns:1fr;gap:30px;padding-top:58px; }
  .home-surface-stage { grid-row:2; }
  .home-sample-stage { width:min(650px,84vw); }
}
@media(max-width:620px){
  body.home-open .home-cover-stage { padding-bottom:44px; }
  .home-simple-layout { gap:28px;padding-top:50px; }
  .home-simple-layout .home-cover-wordmark { font-size:clamp(2.85rem,13.3vw,4rem); }
  .home-surface-option { min-height:54px; }
  .home-sample-stage { width:min(460px,92vw);margin:5px auto 10px; }
  .home-real-tape { padding:5px 8px 4px;font-size:7px; }
  .home-real-sample-canvas { width:82%; }
  .home-real-sample-disc { width:68%; }
}
@media(max-width:350px){
  .home-surface-options { grid-template-columns:1fr; }
  .home-sample-stage { width:98vw;transform:translateX(-3vw); }
  .home-real-sample-disc { width:64%; }
}
@media(prefers-reduced-motion:reduce){.home-real-sample{transition:none}}

/* Final desktop home composition: both real Studio surfaces share one still collage. */
body.home-open #homeScreen {
  background:#f4f0e8;
}
body.home-open .home-cover-stage {
  min-height:700px;
  height:100dvh;
  padding:24px clamp(28px,5vw,76px) 34px;
}
body.home-open .home-cover-stage::before {
  display:block;
  opacity:.08;
}
.home-gallery-head {
  width:min(1180px,100%);
  margin:0 auto;
}
.home-simple-layout {
  width:min(1180px,100%);
  height:calc(100% - 34px);
  grid-template-columns:420px minmax(0,680px);
  justify-content:center;
  gap:60px;
}
.home-simple-layout .home-cover-wordmark {
  max-width:420px;
  font-size:clamp(3.65rem,5vw,4.75rem);
}
.home-gallery-subtitle {
  max-width:390px;
}
.home-surface-controls {
  display:block;
  width:max-content;
  max-width:100%;
  margin-top:30px;
}
.home-surface-controls .home-cover-start {
  min-width:0!important;
  height:42px!important;
  padding:0 17px!important;
  border-radius:7px!important;
  background:#52624e!important;
  box-shadow:0 5px 12px rgba(39,50,41,.1)!important;
}
.home-surface-controls .home-cover-start:hover {
  transform:translateY(-1px)!important;
  box-shadow:0 7px 15px rgba(39,50,41,.14)!important;
}
.home-surface-stage {
  width:680px;
  min-width:0;
  height:540px;
  display:block;
}
.home-sample-stage {
  position:relative;
  width:680px;
  height:540px;
  aspect-ratio:auto;
  isolation:isolate;
}
.home-real-sample,
.home-real-sample.is-selected {
  position:absolute;
  inset:auto;
  margin:0;
  opacity:1;
  visibility:visible;
  pointer-events:none;
  transition:none;
  filter:none;
}
.home-real-sample-canvas {
  z-index:1;
  top:24px;
  left:0;
  width:410px;
  transform:rotate(-1.5deg);
  filter:drop-shadow(0 12px 16px rgba(39,50,41,.1));
}
.home-real-sample-disc {
  z-index:3;
  right:0;
  bottom:0;
  width:360px;
  transform:rotate(1.6deg);
  filter:drop-shadow(0 14px 18px rgba(39,50,41,.13));
}
.home-real-canvas {
  position:relative;
  aspect-ratio:410/311;
  overflow:hidden;
  border:1px solid rgba(82,98,78,.24);
  background:#fcfaf6;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);
}
.home-real-canvas::before {
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  pointer-events:none;
  opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.68' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
.home-real-canvas::after,
.home-real-disc::after {
  display:none;
}
.home-real-photo {
  position:absolute;
  z-index:3;
  display:block;
  box-sizing:border-box;
  padding:6px 6px 17px;
  overflow:hidden;
  background:#fcfaf6;
  box-shadow:0 5px 12px rgba(39,50,41,.13);
}
.home-real-photo img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.home-real-photo-cat {
  left:8%;
  top:10%;
  width:64%;
  height:51%;
  transform:rotate(1.8deg);
}
.home-real-photo-cat img {
  aspect-ratio:16/9;
  object-position:center;
}
.home-real-photo-canopy {
  right:7%;
  bottom:7%;
  width:31%;
  height:58%;
  transform:rotate(-2.8deg);
}
.home-real-photo-canopy img {
  aspect-ratio:3/4;
  object-position:center;
}
.home-real-tape {
  position:absolute;
  z-index:9;
  display:block;
  padding:6px 11px 5px;
  color:#52624e;
  font:650 9px/1 var(--home-ui);
  white-space:nowrap;
  clip-path:polygon(2% 5%,98% 0,96% 96%,1% 100%);
  filter:drop-shadow(0 2px 2px rgba(42,38,30,.12));
}
.home-real-tape-summer {
  left:5%;
  bottom:15%;
  background:rgba(213,201,133,.88);
  transform:rotate(-5deg);
}
.home-real-doodle {
  position:absolute;
  z-index:8;
  display:block;
}
.home-real-doodle svg {
  width:100%;
  height:100%;
  overflow:visible;
}
.home-real-doodle svg * {
  fill:none;
  stroke:#52624e;
  stroke-width:3.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.home-real-doodle-wave {
  left:19%;
  bottom:5%;
  width:34%;
  height:13%;
  transform:rotate(-2deg);
}
.home-real-disc {
  position:relative;
  box-sizing:border-box;
  aspect-ratio:1;
  overflow:visible;
  border:1px solid #b8bdc0;
  border-radius:50%;
  background:#e6e9eb;
  box-shadow:
    0 0 0 2px #dfe1dd,
    inset 0 0 0 1px rgba(255,255,255,.55),
    0 1px 3px rgba(35,39,44,.08);
}
.home-real-disc-surface {
  position:absolute;
  z-index:1;
  inset:1.2%;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.34);
  border-radius:50%;
  background-color:#52a5ce;
  background-image:radial-gradient(circle,#b8cee8 0 2.3px,transparent 2.8px);
  background-size:19px 19px;
  box-shadow:inset 0 0 18px rgba(39,50,41,.05);
}
.home-real-disc .home-real-photo {
  padding:5px 5px 14px;
  box-shadow:0 4px 10px rgba(29,49,58,.17);
}
.home-real-photo-paris {
  left:11%;
  top:20%;
  width:27%;
  height:24%;
  transform:rotate(-4deg);
}
.home-real-photo-paris img {
  aspect-ratio:4/3;
  object-position:center 72%;
}
.home-real-photo-eiffel {
  right:16%;
  bottom:16%;
  width:23%;
  height:34%;
  transform:rotate(4deg);
}
.home-real-photo-eiffel img {
  aspect-ratio:3/4;
  object-position:center;
}
.home-real-tape-summer-disc {
  left:13.5%;
  top:17.2%;
  background:rgba(244,225,150,.92);
  transform:rotate(-6deg);
}
.home-real-tape-holiday {
  right:14%;
  bottom:31%;
  background:rgba(192,218,188,.94);
  transform:rotate(5deg);
}
.home-real-instrument {
  position:absolute;
  z-index:10;
  display:block;
  font-family:sans-serif;
  font-size:38px;
  line-height:1;
  filter:
    drop-shadow(2px 0 0 #fff)
    drop-shadow(-2px 0 0 #fff)
    drop-shadow(0 2px 0 #fff)
    drop-shadow(0 -2px 0 #fff)
    drop-shadow(0 3px 3px rgba(35,40,44,.16));
}
.home-real-instrument-trumpet {
  left:14%;
  bottom:19%;
  transform:rotate(-10deg);
}
.home-real-instrument-strings {
  right:15%;
  top:18%;
  transform:rotate(9deg);
}
.home-real-disc-center {
  position:absolute;
  z-index:20;
  left:50%;
  top:50%;
  width:15%;
  aspect-ratio:1;
  box-sizing:border-box;
  display:grid;
  place-items:center;
  border:1px solid #c6c3ba;
  border-radius:50%;
  background:color-mix(in srgb,#52a5ce 18%,#f4f0e8 82%);
  box-shadow:0 0 0 5px rgba(235,232,224,.82),inset 0 1px 0 rgba(255,255,255,.72);
  transform:translate(-50%,-50%);
}
.home-real-disc-hole {
  position:static;
  z-index:auto;
  width:32%;
  aspect-ratio:1;
  box-sizing:border-box;
  border:1px solid #c4c1b8;
  border-radius:50%;
  background:#f4f0e8;
  box-shadow:inset 0 1px 2px rgba(55,58,54,.13);
  transform:none;
}
@media (max-width:1200px) and (min-width:981px) {
  .home-simple-layout {
    grid-template-columns:380px 570px;
    gap:34px;
  }
  .home-surface-stage,
  .home-sample-stage {
    width:570px;
    height:500px;
  }
  .home-real-sample-canvas { width:380px; }
  .home-real-sample-disc { width:330px; }
}

/* Quiet outline chrome: title, surface switch and Creations follow Keys / Cam DJ. */
:root { --studio-selected-soft:var(--fj-mint);--studio-outline:color-mix(in srgb,var(--fj-ink) 14%,transparent); }
@media (min-width:761px) {
  body:not(.home-open) .studio-file-island,
  body:not(.home-open) .studio-canvas-choice,
  body:not(.home-open) .studio-playback-island,
  body:not(.home-open) .studio-performance-island,
  #recordsDrawer .records-tab {
    border:1px solid var(--studio-outline)!important;
    background:color-mix(in srgb,var(--fj-paper) 88%,transparent)!important;
    box-shadow:none!important;
    backdrop-filter:blur(12px) saturate(1.02)!important;
  }
  body:not(.home-open) .studio-file-island:hover,
  body:not(.home-open) .studio-canvas-choice:hover,
  body:not(.home-open) .studio-playback-island:hover,
  body:not(.home-open) .studio-performance-island:hover,
  #recordsDrawer .records-tab:hover {
    border-color:color-mix(in srgb,var(--fj-ink) 24%,transparent)!important;
    background:var(--fj-paper)!important;
    box-shadow:none!important;
  }
  body:not(.home-open) .studio-file-island { width:min(318px,calc(38vw - 18px));height:42px;border-radius:10px!important; }
  body:not(.home-open) .studio-file-island .board-title { font-weight:550!important; }
  body:not(.home-open) .studio-canvas-choice { width:112px!important;height:42px!important;padding:4px!important;border-radius:10px!important; }
  body:not(.home-open) .studio-canvas-choice button { height:32px!important;border-radius:7px!important; }
  body:not(.home-open) .studio-canvas-choice button.is-selected {
    background:var(--studio-selected-soft)!important;
    color:var(--fj-forest)!important;
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fj-pool) 18%,transparent)!important;
  }
  #recordsDrawer.records-drawer-shell { width:122px!important;height:42px!important; }
  #recordsDrawer .records-tab { height:42px!important;min-height:42px!important;grid-template-columns:24px minmax(0,1fr)!important;gap:7px!important;padding:6px 9px!important;border-radius:10px!important; }
  #recordsDrawer .records-tab-disc { width:24px!important;height:24px!important;border-color:color-mix(in srgb,var(--fj-ink) 18%,transparent)!important;background:transparent!important;box-shadow:none!important; }
  #recordsDrawer .records-tab-disc::after { width:5px!important;height:5px!important;border-width:2px!important; }
  #recordsDrawer .records-tab-label { grid-column:2!important;color:var(--fj-ink)!important;font-size:8px!important;letter-spacing:.08em!important; }
  #recordsDrawer .records-tab-count { display:none!important; }
  #recordsDrawer.records-drawer-shell.open,body.records-open #recordsDrawer.records-drawer-shell.open { width:min(284px,calc(100vw - 28px))!important;height:190px!important; }
  #recordsDrawer.records-drawer-shell.open .records-tab { height:42px!important;border-radius:10px 10px 0 0!important; }
}
@media (min-width:761px) and (max-width:1023px) {
  body:not(.home-open) .topbar { display:block!important;height:64px!important;min-height:64px!important;padding:0!important; }
  body:not(.home-open) .studio-file-island { position:absolute!important;inset:10px auto auto 12px!important;width:190px!important;height:42px!important; }
  body:not(.home-open) .studio-file-island .brand-word { display:none!important; }
  body:not(.home-open) .studio-canvas-choice { position:absolute!important;inset:10px auto auto 50%!important;width:106px!important;height:42px!important;transform:translateX(-50%)!important; }
  body:not(.home-open) .topbar-studio-tools { position:absolute!important;inset:0!important;width:100%!important;height:64px!important; }
  body:not(.home-open) .studio-control-cluster { position:absolute!important;inset:10px 10px auto auto!important;width:auto!important;height:44px!important;display:flex!important;align-items:center!important;gap:6px!important;transform:none!important; }
  body:not(.home-open) .topbar .studio-playback-island { width:152px!important;height:44px!important;flex:0 0 152px!important; }
  body:not(.home-open) .topbar .studio-performance-island { position:relative!important;inset:auto!important;width:80px!important;min-width:80px!important;height:44px!important;display:flex!important;flex:0 0 80px!important; }
  body:not(.home-open) .topbar .studio-performance-island .perform-name { display:none!important; }
  body:not(.home-open) .topbar .studio-performance-island .rail-tool-btn,
  body:not(.home-open) .topbar .studio-performance-island .rail-tool-btn[data-tool="dj"] { width:35px!important;min-width:35px!important;padding:0!important; }
}
.photo-polaroid:not(.camera-on) .camera-power,
.photo-polaroid .snap-go:not(:disabled) {
  background:var(--studio-selected-soft)!important;
  color:var(--fj-forest)!important;
  box-shadow:0 1px 3px rgba(37,83,63,.12)!important;
}
.photo-polaroid:not(.camera-on) .camera-power:hover,
.photo-polaroid .snap-go:not(:disabled):hover { background:color-mix(in srgb,var(--studio-selected-soft) 82%,var(--fj-pool) 18%)!important; }

/* Source windows stay below the top chrome and above the bottom Creations tab. */
@media (min-width:761px) {
  body:not(.archive-collapsed) #archiveShell[data-active-panel="photos"],
  body:not(.archive-collapsed) #archiveShell[data-active-panel="vibes"] {
    height:min(560px,calc(100dvh - 126px))!important;
  }
  body:not(.archive-collapsed) #archiveShell[data-active-panel="photos"]:has(.booth-printer.has-print) {
    height:min(600px,calc(100dvh - 126px))!important;
  }
  body:not(.archive-collapsed) #archiveShell[data-active-panel] {
    max-height:calc(100dvh - 126px)!important;
    border-color:var(--studio-outline)!important;
    background:var(--fj-paper)!important;
    box-shadow:0 8px 22px rgba(66,47,14,.07)!important;
  }
  body:not(.archive-collapsed) #archiveShell[data-active-panel] #archiveContents,
  body:not(.archive-collapsed) #archiveShell[data-active-panel] .archive-strip-body,
  body:not(.archive-collapsed) #archiveShell[data-active-panel] .rail-panel.on,
  body:not(.archive-collapsed) #archiveShell[data-active-panel] .photo-polaroid {
    background-color:var(--fj-paper)!important;
    background-image:none!important;
  }
}

/* Camera CD grooves are their own rotating layer; clip that layer, not the items or hand FX. */
body.mode-dj.cam-mode-disc .disc-mirror-surface {
  overflow:hidden!important;
  border-radius:50%!important;
  -webkit-clip-path:circle(49.7% at 50% 50%);
  clip-path:circle(49.7% at 50% 50%);
  contain:paint;
}

/* The title and surface switch are outlines on the workspace, without white cards. */
@media (min-width:761px) {
  body:not(.home-open) .studio-file-island,
  body:not(.home-open) .studio-canvas-choice,
  body:not(.home-open) .studio-file-island:hover,
  body:not(.home-open) .studio-canvas-choice:hover {
    background:transparent!important;
    box-shadow:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
}

/* Final Creations icon authority: a clear Mint optical disc. */
@media (min-width:761px) {
  #recordsDrawer .records-tab-disc {
    border:1px solid color-mix(in srgb,var(--fj-pool) 42%,var(--fj-forest) 12%)!important;
    background:radial-gradient(circle,var(--fj-paper) 0 12%,color-mix(in srgb,var(--fj-ice) 72%,var(--fj-paper)) 13% 21%,transparent 22%),var(--fj-mint)!important;
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.38)!important;
  }
  #recordsDrawer .records-tab-disc::after {
    border-color:color-mix(in srgb,var(--fj-pool) 30%,var(--fj-paper))!important;
    background:var(--fj-paper)!important;
  }
}
/* Final homepage authority: Logo palette, hand lettering, and one continuous collage. */
:root {
  --home-hand: "Grandstander", "Crafty Girls", "Pangolin", "Arial Rounded MT Bold", "PingFang SC", sans-serif;
  --home-bg: var(--fj-cream);
  --home-paper: var(--fj-paper);
  --home-ink: var(--fj-forest);
  --home-brand: var(--fj-pool);
  --home-blue: var(--fj-ice);
  --home-yellow: var(--fj-yellow);
}
body.home-open #homeArchive { display:none!important; }
body.home-open #homeScreen { background:var(--home-bg)!important; }
body.home-open .home-cover-stage::before { display:block!important;opacity:.07!important; }
body.home-open .home-gallery-head { display:none!important; }
.home-gallery-edition { color:color-mix(in srgb,var(--home-ink) 74%,transparent)!important;font:600 8px/1 var(--home-ui)!important;letter-spacing:.12em!important;text-transform:uppercase!important; }
body.home-open .home-simple-layout .home-gallery-intro>p:first-child { color:var(--home-ink)!important; }
body.home-open .home-simple-layout .home-cover-wordmark { color:var(--home-ink)!important;font-family:var(--home-hand)!important;font-weight:500!important;font-variation-settings:normal!important; }
body.home-open .home-simple-layout .home-cover-wordmark em { color:var(--home-brand)!important; }
body.home-open .home-simple-layout .home-cover-wordmark>span { display:block!important;white-space:nowrap!important; }
body.home-open .home-gallery-subtitle,body.home-open .home-gallery-intro>.home-preview-status { color:color-mix(in srgb,var(--home-ink) 70%,transparent)!important; }
body.home-open .home-surface-controls .home-cover-start { background:transparent!important;color:var(--home-ink)!important;border:0!important;border-bottom:1.5px solid var(--home-ink)!important;border-radius:0!important;box-shadow:none!important;font-family:var(--home-hand)!important; }
body.home-open .home-surface-controls .home-cover-start:hover { color:var(--home-brand)!important;box-shadow:none!important; }
.home-learn-more { color:var(--home-ink);text-decoration:none; }
.home-learn-more:focus-visible,body.home-open .home-surface-controls .home-cover-start:focus-visible { outline:2px solid var(--home-brand)!important;outline-offset:4px!important; }
.home-hover-tape { font-family:var(--home-hand)!important;font-variation-settings:normal!important; }
.home-hover-tile-dance .home-hover-card { background:var(--fj-mint)!important; }
.home-hover-tile-street .home-hover-card { background:var(--home-blue)!important; }
.home-hover-tile-night .home-hover-card { background:var(--home-ink)!important; }
.home-hover-disc-pool { background:color-mix(in srgb,var(--home-brand) 66%,var(--home-blue) 34%)!important; }
.home-hover-disc-butter { background:var(--home-yellow)!important; }
.home-hover-disc-ice { background-color:var(--home-blue)!important; }
.home-hover-logo-disc { overflow:visible!important;border-radius:50%!important;filter:drop-shadow(0 9px 10px rgba(37,83,63,.13))!important; }
.home-hover-logo-disc img { width:100%!important;height:100%!important;display:block!important;object-fit:contain!important;pointer-events:none!important; }
.home-hover-tile.is-previewing .home-hover-logo-disc { animation:home-preview-logo-spin 7s linear infinite; }
@keyframes home-preview-logo-spin { to { transform:rotate(360deg); } }

@media (min-width:1101px) {
  body.home-open .home-cover-stage { min-height:700px!important;height:100dvh!important;padding:20px 32px!important;display:block!important;overflow:hidden!important; }
  body.home-open .home-simple-layout { position:relative!important;width:min(1280px,calc(100vw - 64px))!important;height:min(718px,calc(100dvh - 40px))!important;margin:0 auto!important;display:block!important; }
  body.home-open .home-simple-layout .home-gallery-intro { position:absolute!important;z-index:20!important;left:50%!important;top:248px!important;width:500px!important;margin:0!important;text-align:center!important;pointer-events:none!important;transform:translateX(-50%)!important; }
  body.home-open .home-simple-layout .home-cover-wordmark { max-width:560px!important;margin:0 auto!important;font-size:clamp(3.2rem,4.2vw,3.85rem)!important;line-height:.92!important;letter-spacing:-.045em!important;transform:rotate(-.5deg)!important;white-space:nowrap!important; }
  body.home-open .home-gallery-subtitle { max-width:430px!important;margin:15px auto 0!important;font:400 12px/1.5 var(--home-ui)!important;letter-spacing:0!important;text-align:center!important;text-transform:none!important; }
  body.home-open .home-surface-controls { position:relative!important;z-index:60!important;width:max-content!important;max-width:100%!important;margin:20px auto 0!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:12px!important;pointer-events:auto!important; }
  body.home-open .home-surface-controls .home-learn-more,body.home-open .home-surface-controls .home-cover-start { min-height:39px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:0 15px!important;border:1px solid var(--home-brand)!important;border-radius:999px!important;font:500 11px/1 var(--home-ui)!important;transform:none!important; }
  body.home-open .home-surface-controls .home-learn-more { background:var(--home-paper)!important;color:var(--home-brand)!important; }
  body.home-open .home-surface-controls .home-cover-start { background:var(--home-brand)!important;color:var(--home-paper)!important; }
  body.home-open .home-surface-controls .home-learn-more:hover { background:color-mix(in srgb,var(--home-blue) 35%,var(--home-paper))!important; }
  body.home-open .home-surface-controls .home-cover-start:hover { background:var(--home-ink)!important;color:var(--home-paper)!important; }
  body.home-open .home-gallery-intro>.home-preview-status { margin:12px auto 0!important;font:550 8px/1.35 var(--home-ui)!important;letter-spacing:.035em!important;text-align:center!important; }
  body.home-open .home-surface-stage { position:absolute!important;z-index:3!important;inset:0!important;width:auto!important;height:auto!important;display:block!important;pointer-events:none!important; }
  body.home-open .home-hover-grid { position:relative!important;width:100%!important;height:100%!important;display:block!important;padding:0!important;perspective:1100px!important;isolation:isolate!important;pointer-events:none!important; }
  body.home-open .home-hover-tile { position:absolute!important;width:var(--tile-size)!important;height:var(--tile-size)!important;pointer-events:auto!important; }
  body.home-open .home-hover-tile-logo { --tile-size:168px;left:50%!important;top:10px!important;z-index:22!important;transform:translate3d(calc(-50% + var(--inertia-x)),var(--inertia-y),0) rotate(calc(var(--tile-rest,0deg) + var(--inertia-r))) scale(var(--hover-scale))!important; }
  body.home-open .home-hover-tile-field { --tile-size:164px;left:1%!important;top:20px!important;z-index:7!important; }
  body.home-open .home-hover-tile-dance { --tile-size:124px;left:20%!important;top:48px!important;z-index:5!important; }
  body.home-open .home-hover-tile-matcha { --tile-size:138px;right:2%!important;top:22px!important;z-index:4!important; }
  body.home-open .home-hover-tile-berlin { --tile-size:142px;left:3%!important;top:276px!important;z-index:8!important; }
  body.home-open .home-hover-tile-snow { --tile-size:126px;right:3%!important;top:270px!important;z-index:6!important; }
  body.home-open .home-hover-tile-night { --tile-size:126px;left:20%!important;bottom:44px!important;z-index:11!important; }
  body.home-open .home-hover-tile-street { --tile-size:122px;right:19%!important;bottom:42px!important;z-index:10!important; }
  body.home-open .home-hover-tile:hover,body.home-open .home-hover-tile:focus-visible,body.home-open .home-hover-tile.is-previewing { z-index:50!important; }
}

@media (min-width:761px) and (max-width:1100px) {
  body.home-open #homeScreen { overflow-y:auto!important; }
  body.home-open .home-cover-stage { height:auto!important;min-height:100dvh!important;padding:34px 24px 46px!important;overflow:visible!important;display:block!important; }
  body.home-open .home-simple-layout { width:min(960px,100%)!important;height:auto!important;display:grid!important;grid-template-columns:1fr!important;gap:30px!important; }
  body.home-open .home-simple-layout .home-gallery-intro { position:relative!important;inset:auto!important;width:min(620px,90%)!important;margin:0!important;transform:none!important;pointer-events:auto!important; }
  body.home-open .home-surface-controls { display:flex!important;flex-wrap:wrap!important;align-items:center!important;justify-content:flex-start!important;gap:10px!important; }
  body.home-open .home-surface-controls .home-learn-more,body.home-open .home-surface-controls .home-cover-start { min-height:40px!important;display:inline-flex!important;align-items:center!important;padding:0 14px!important;border:1px solid var(--home-brand)!important;border-radius:999px!important;font:500 11px/1 var(--home-ui)!important; }
  body.home-open .home-surface-stage { position:relative!important;inset:auto!important;width:100%!important;height:auto!important;pointer-events:none!important; }
  body.home-open .home-hover-grid { position:relative!important;width:100%!important;height:auto!important;padding:10px 0 28px!important;display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;grid-template-rows:repeat(2,var(--tab-l))!important;gap:26px 8px!important;--tab-l:clamp(166px,19vw,210px);pointer-events:none!important;transform:none!important; }
  body.home-open .home-hover-tile { position:relative!important;inset:auto!important;width:var(--tab-s)!important;height:auto!important;align-self:center!important;justify-self:center!important;pointer-events:auto!important; }
  body.home-open .home-hover-tile-logo { grid-column:1/5!important;grid-row:1!important;--tab-s:var(--tab-l); }
  body.home-open .home-hover-tile-dance { grid-column:5/8!important;grid-row:1!important;--tab-s:clamp(128px,14vw,154px); }
  body.home-open .home-hover-tile-matcha { grid-column:8/11!important;grid-row:1!important;--tab-s:clamp(128px,14vw,154px); }
  body.home-open .home-hover-tile-snow { grid-column:11/13!important;grid-row:1!important;--tab-s:clamp(96px,10vw,110px); }
  body.home-open .home-hover-tile-field { grid-column:1/5!important;grid-row:2!important;--tab-s:var(--tab-l); }
  body.home-open .home-hover-tile-berlin { grid-column:5/8!important;grid-row:2!important;--tab-s:clamp(128px,14vw,154px); }
  body.home-open .home-hover-tile-street { grid-column:8/10!important;grid-row:2!important;--tab-s:clamp(96px,10vw,110px); }
  body.home-open .home-hover-tile-night { grid-column:10/12!important;grid-row:2!important;--tab-s:clamp(96px,10vw,110px); }
}

@media (max-width:760px) {
  body.home-open .home-cover-stage { height:auto!important;min-height:100dvh!important;padding:22px 24px 40px!important;overflow:visible!important;display:block!important; }
  body.home-open .home-simple-layout { height:auto!important;display:grid!important;grid-template-columns:1fr!important;gap:30px!important;padding:50px 0 0!important; }
  body.home-open .home-simple-layout .home-gallery-intro { position:relative!important;inset:auto!important;width:auto!important;transform:none!important; }
  body.home-open .home-surface-controls { display:grid!important;grid-template-columns:1fr!important;gap:9px!important; }
  body.home-open .home-surface-controls .home-learn-more,body.home-open .home-surface-controls .home-cover-start { min-height:42px!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:0 13px!important;border:1px solid var(--home-brand)!important;border-radius:999px!important;font:500 11px/1 var(--home-ui)!important; }
  body.home-open .home-simple-layout .home-cover-wordmark { max-width:560px!important;font-size:clamp(3.2rem,14vw,4.4rem)!important; }
  body.home-open .home-surface-stage { position:relative!important;inset:auto!important;width:100%!important;height:auto!important; }
  body.home-open .home-hover-grid { width:min(560px,94vw)!important;height:auto!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:22px!important;padding:8px 0!important; }
  body.home-open .home-hover-tile { position:relative!important;inset:auto!important;width:100%!important;height:auto!important;aspect-ratio:1!important; }
}
@media (prefers-reduced-motion:reduce) { .home-hover-tile.is-previewing .home-hover-logo-disc { animation:none!important; } }

body.about-page { min-height:100%;display:block;overflow:auto;background:var(--fj-cream);color:var(--fj-forest); }
.about-main { width:min(1080px,calc(100% - 48px));margin:0 auto;padding:30px 0 72px; }
.about-back { color:var(--fj-pool);font:600 11px/1 var(--home-ui);text-decoration:none; }
.about-hero { min-height:460px;display:grid;grid-template-columns:330px minmax(0,1fr);align-items:center;gap:72px;border-bottom:1px solid color-mix(in srgb,var(--fj-forest) 16%,transparent); }
.about-hero img { width:310px;height:310px;display:block;object-fit:contain;transform:rotate(-2deg); }
.about-hero>div>p:first-child { margin:0 0 16px;color:var(--fj-pool);font:650 9px/1 var(--home-ui);letter-spacing:.16em;text-transform:uppercase; }
.about-hero h1 { margin:0;font:500 clamp(3.4rem,6vw,5.5rem)/.92 "Grandstander",sans-serif;letter-spacing:-.05em; }
.about-hero h1+p { max-width:520px;margin:24px 0 0;color:color-mix(in srgb,var(--fj-forest) 72%,transparent);font:400 15px/1.6 var(--home-ui); }
.about-steps { display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding:56px 0; }
.about-steps article { padding:22px;border:1px solid color-mix(in srgb,var(--fj-forest) 16%,transparent);background:var(--fj-paper);transform:rotate(var(--about-tilt,0deg)); }
.about-steps article:nth-child(1){--about-tilt:-1deg}.about-steps article:nth-child(2){--about-tilt:.8deg}.about-steps article:nth-child(3){--about-tilt:-.6deg}
.about-steps span { color:var(--fj-pool);font:650 9px/1 var(--home-ui);letter-spacing:.14em; }
.about-steps h2 { margin:14px 0 9px;font:500 25px/1 "Grandstander",sans-serif; }
.about-steps p { margin:0;color:color-mix(in srgb,var(--fj-forest) 72%,transparent);font:400 12px/1.55 var(--home-ui); }
.about-start { min-height:44px;display:inline-flex;align-items:center;gap:8px;padding:0 18px;border-radius:999px;background:var(--fj-pool);color:var(--fj-paper);font:600 12px/1 var(--home-ui);text-decoration:none; }
.about-back:focus-visible,.about-start:focus-visible { outline:2px solid var(--fj-pool);outline-offset:4px; }
@media(max-width:760px){.about-hero{grid-template-columns:1fr;gap:24px;padding:54px 0}.about-hero img{width:220px;height:220px;margin:auto}.about-steps{grid-template-columns:1fr}}

/* Desktop landing composition — one centered brand island, seven playable collages. */
@media (min-width:1101px) {
  body.home-open .home-cover-stage {
    min-height:700px!important;
    height:100dvh!important;
    padding:16px max(24px,calc((100vw - 1360px)/2))!important;
    display:block!important;
    overflow:hidden!important;
  }
  body.home-open .home-simple-layout,
  body.home-open .home-composition {
    position:relative!important;
    width:min(1360px,calc(100vw - 48px))!important;
    height:min(726px,calc(100dvh - 32px))!important;
    margin:0 auto!important;
    display:block!important;
  }
  body.home-open .home-center-island {
    position:absolute!important;
    z-index:20!important;
    left:50%!important;
    top:50%!important;
    width:560px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    text-align:center!important;
    transform:translate(-50%,-50%)!important;
    pointer-events:none!important;
  }
  body.home-open .home-center-island .home-hover-tile-logo {
    --tile-size:184px;
    position:relative!important;
    inset:auto!important;
    flex:0 0 var(--tile-size)!important;
    width:var(--tile-size)!important;
    height:var(--tile-size)!important;
    z-index:30!important;
    pointer-events:auto!important;
    transform:translate3d(var(--inertia-x),var(--inertia-y),0) rotate(calc(var(--tile-rest,0deg) + var(--inertia-r))) scale(var(--hover-scale))!important;
  }
  body.home-open .home-center-island .home-gallery-intro {
    position:relative!important;
    z-index:40!important;
    inset:auto!important;
    width:560px!important;
    margin:12px 0 0!important;
    text-align:center!important;
    transform:none!important;
    pointer-events:none!important;
  }
  body.home-open .home-simple-layout .home-cover-wordmark {
    max-width:none!important;
    margin:0!important;
    color:var(--home-ink)!important;
    font:500 60px/.92 var(--home-hand)!important;
    letter-spacing:-.025em!important;
    white-space:nowrap!important;
    transform:none!important;
  }
  body.home-open .home-gallery-subtitle {
    max-width:430px!important;
    margin:12px auto 0!important;
    color:#547462!important;
    font:400 13px/1.5 var(--home-ui)!important;
    text-align:center!important;
  }
  body.home-open .home-surface-controls {
    position:relative!important;
    z-index:80!important;
    width:max-content!important;
    max-width:100%!important;
    margin:18px auto 0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:12px!important;
    pointer-events:auto!important;
  }
  body.home-open .home-surface-stage {
    position:absolute!important;
    z-index:3!important;
    inset:0!important;
    width:auto!important;
    height:auto!important;
    display:block!important;
    pointer-events:none!important;
  }
  body.home-open .home-hover-grid {
    position:relative!important;
    width:100%!important;
    height:100%!important;
    display:block!important;
    padding:0!important;
    perspective:1100px!important;
    isolation:isolate!important;
    pointer-events:none!important;
  }
  body.home-open .home-hover-grid .home-hover-tile {
    position:absolute!important;
    width:var(--tile-size)!important;
    height:var(--tile-size)!important;
    pointer-events:auto!important;
  }
  body.home-open .home-hover-tile-field { --tile-size:216px;left:54px!important;top:66px!important;z-index:8!important; }
  body.home-open .home-hover-tile-dance { --tile-size:156px;left:340px!important;top:126px!important;z-index:9!important; }
  body.home-open .home-hover-tile-matcha { --tile-size:168px;left:1126px!important;top:44px!important;z-index:7!important; }
  body.home-open .home-hover-tile-berlin { --tile-size:170px;left:68px!important;top:396px!important;z-index:10!important; }
  body.home-open .home-hover-tile-snow { --tile-size:138px;left:1182px!important;top:254px!important;z-index:9!important; }
  body.home-open .home-hover-tile-night { --tile-size:134px;left:290px!important;top:530px!important;z-index:12!important; }
  body.home-open .home-hover-tile-street { --tile-size:130px;left:1018px!important;top:454px!important;z-index:11!important; }
  body.home-open .home-hover-tile:hover,
  body.home-open .home-hover-tile:focus-visible,
  body.home-open .home-hover-tile.is-previewing { z-index:60!important; }
}

/* Handmade paper-label controls shared by Home and About. */
body.home-open .home-surface-controls .home-learn-more,
body.home-open .home-surface-controls .home-cover-start,
.about-start {
  --paper-fill:var(--fj-paper);
  --sketch-line:var(--fj-forest);
  position:relative!important;
  min-height:46px!important;
  box-sizing:border-box!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  padding:0 20px!important;
  border-style:solid!important;
  border-color:var(--sketch-line)!important;
  border-width:2.7px 2.45px 2.9px 2.6px!important;
  border-radius:23px 20px 25px 21px / 21px 25px 20px 24px!important;
  background:var(--paper-fill)!important;
  color:var(--fj-forest)!important;
  font:600 13px/1 var(--home-hand)!important;
  text-decoration:none!important;
  box-shadow:none!important;
  transition:transform .18s ease,background-color .18s ease,box-shadow .18s ease!important;
}
body.home-open .home-surface-controls .home-learn-more { transform:none!important; }
body.home-open .home-surface-controls .home-cover-start,
.about-start {
  --paper-fill:var(--fj-yellow);
  background:var(--paper-fill)!important;
  color:var(--fj-forest)!important;
  transform:none!important;
  box-shadow:none!important;
}
body.home-open .home-surface-controls .home-learn-more::after,
body.home-open .home-surface-controls .home-cover-start::after,
.about-start::after {
  content:none!important;
}
body.home-open .home-surface-controls .home-learn-more::before,
body.home-open .home-surface-controls .home-cover-start::before,
.about-start::before {
  content:none;
}
body.home-open .home-surface-controls .home-learn-more:hover {
  background:color-mix(in srgb,var(--fj-ice) 22%,var(--fj-paper))!important;
  transform:translate(-1px,-2px)!important;
}
body.home-open .home-surface-controls .home-cover-start:hover,
.about-start:hover {
  background:color-mix(in srgb,var(--fj-yellow) 76%,var(--fj-paper))!important;
  color:var(--fj-forest)!important;
  transform:translate(-1px,-2px)!important;
}
body.home-open .home-surface-controls>*:focus-visible,
.about-start:focus-visible { outline:3px solid var(--fj-pool)!important;outline-offset:5px!important; }

@media (forced-colors:active) {
  body.home-open .home-surface-controls .home-learn-more,
  body.home-open .home-surface-controls .home-cover-start,
  .about-start { border:2px solid ButtonText!important;background:ButtonFace!important;color:ButtonText!important; }
  body.home-open .home-surface-controls>*::before,body.home-open .home-surface-controls>*::after,.about-start::before,.about-start::after { display:none!important; }
}

/* Restored collage pieces retain their product-scale texture. */
.home-hover-card {
  border-color:color-mix(in srgb,var(--fj-forest) 20%,transparent)!important;
  border-radius:2px 5px 3px 4px;
  box-shadow:4px 5px 0 rgba(184,206,232,.36),0 9px 17px rgba(37,83,63,.08)!important;
}
.home-hover-tile-dance .home-hover-card { background:color-mix(in srgb,var(--fj-mint) 78%,var(--fj-paper))!important; }
.home-hover-tile-night .home-hover-card { background:color-mix(in srgb,var(--fj-forest) 82%,#422f0e 18%)!important; }
.home-hover-disc {
  border-color:#9fa6ac!important;
  background:#d9dde0!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.52),inset 0 0 0 1px rgba(31,34,38,.13),0 6px 14px rgba(35,39,44,.12)!important;
}
.home-hover-disc-center {
  width:15%!important;
  border-color:rgba(56,62,69,.34)!important;
  background:rgba(255,255,255,.34)!important;
  box-shadow:0 0 0 6px rgba(225,229,232,.38),inset 0 0 0 1px rgba(255,255,255,.44)!important;
}
.home-hover-disc-hole { width:32%!important;border-color:rgba(62,69,76,.4)!important;background:#fff!important; }
.home-hover-tape {
  padding:5px 8px 4px!important;
  font:600 clamp(7px,.58vw,9px)/1 var(--home-hand)!important;
}
.home-hover-sticker { font-size:clamp(22px,2.15vw,31px)!important; }

/* About uses the same quiet grid and handmade paper language. */
body.about-page { background:var(--fj-cream)!important;color:var(--fj-forest)!important; }
.about-main { width:min(1040px,calc(100% - 64px))!important;margin:0 auto!important;padding:28px 0 56px!important; }
.about-back {
  position:relative;
  color:var(--fj-pool)!important;
  font:600 12px/1 var(--home-hand)!important;
  text-decoration:none!important;
}
.about-back::after { content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;background:var(--fj-yellow);transform:rotate(-1deg) scaleX(.72);transform-origin:left;transition:transform .18s ease; }
.about-back:hover::after { transform:rotate(-1deg) scaleX(1); }
.about-hero {
  min-height:390px!important;
  padding:22px 0 32px!important;
  display:grid!important;
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  align-items:center!important;
  column-gap:20px!important;
  border-bottom:0!important;
}
.about-hero::after {
  content:"";
  grid-column:1/-1;
  height:8px;
  margin-top:24px;
  background:var(--fj-pool);
  opacity:.25;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 8'%3E%3Cpath d='M0 5Q5 1 10 5T20 5T30 5T42 5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center/42px 8px;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 8'%3E%3Cpath d='M0 5Q5 1 10 5T20 5T30 5T42 5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center/42px 8px;
}
.about-hero>img { grid-column:1/4!important;width:240px!important;height:240px!important;display:block!important;object-fit:contain!important;transform:rotate(-1.2deg)!important; }
.about-copy { grid-column:5/13!important;min-width:0!important; }
.about-copy>p:first-child { margin:0 0 14px!important;color:var(--fj-pool)!important;font:650 10px/1 var(--home-ui)!important;letter-spacing:.16em!important;text-transform:uppercase!important; }
.about-hero h1 { margin:0!important;font:500 clamp(48px,4.1vw,60px)/.94 var(--home-hand)!important;letter-spacing:-.035em!important; }
.about-title-line { display:inline-block;white-space:nowrap; }
.about-title-line-sound { color:var(--fj-pool); }
.about-hero h1+p { max-width:560px!important;margin:18px 0 0!important;color:#547462!important;font:400 14px/1.55 var(--home-ui)!important; }
.about-steps { display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;gap:20px!important;padding:34px 0 28px!important; }
.about-steps article {
  grid-column:span 4!important;
  min-height:184px!important;
  position:relative!important;
  box-sizing:border-box!important;
  padding:20px!important;
  border:1.35px solid color-mix(in srgb,var(--fj-forest) 48%,transparent)!important;
  border-radius:29px 34px 27px 32px / 32px 27px 35px 29px!important;
  color:var(--fj-forest)!important;
  transform:rotate(var(--about-tilt,0deg))!important;
}
.about-steps article::after { content:"";position:absolute;inset:3px -3px -3px 3px;border:1px solid color-mix(in srgb,var(--fj-forest) 22%,transparent);border-radius:32px 27px 35px 29px / 27px 34px 29px 33px;pointer-events:none;transform:rotate(-.16deg); }
.about-step-art { --about-tilt:-.24deg;background:color-mix(in srgb,var(--fj-yellow) 31%,var(--fj-paper))!important;box-shadow:2px 3px 0 rgba(247,233,178,.46)!important; }
.about-step-sound { --about-tilt:.2deg;background:color-mix(in srgb,var(--fj-ice) 35%,var(--fj-paper))!important;box-shadow:2px 3px 0 rgba(184,206,232,.42)!important; }
.about-step-play { --about-tilt:-.18deg;background:color-mix(in srgb,var(--fj-mint) 29%,var(--fj-paper))!important;box-shadow:2px 3px 0 rgba(221,242,184,.44)!important; }
.about-steps span { color:var(--fj-pool)!important;font:650 10px/1 var(--home-ui)!important;letter-spacing:.14em!important; }
.about-steps h2 { margin:14px 0 9px!important;font:500 22px/1.08 var(--home-hand)!important;letter-spacing:-.015em!important; }
.about-steps p { margin:0!important;color:#547462!important;font:400 13px/1.5 var(--home-ui)!important; }
.about-step-sound>span,.about-step-sound p { color:#25533f!important; }
.about-back { min-height:32px;display:inline-flex;align-items:center;padding:0 8px 0 2px; }
.about-footer { display:flex;align-items:center;gap:22px;padding-top:4px; }
.about-footer-line { flex:1;height:2px;border-radius:50%;background:color-mix(in srgb,var(--fj-pool) 28%,transparent);transform:rotate(-.15deg); }

@media (prefers-reduced-motion:reduce) {
  body.home-open .home-surface-controls>*,.about-start,.about-back::after { transition:none!important; }
}

/* About story — real FlowJam surfaces in a clean, rounded sketch layout. */
html:has(body.about-page),
body.about-page { min-height:100%;height:auto!important;background:var(--fj-cream)!important; }
body.about-page { overflow:auto!important;display:block!important; }
body.about-page .about-main { width:min(1120px,calc(100% - 64px))!important;margin:0 auto!important;padding:24px 0 0!important; }
.about-nav { height:40px;display:flex;align-items:center;justify-content:space-between; }
.about-nav-start { color:var(--fj-forest);font:600 12px/1 var(--home-hand);text-decoration:none;border-bottom:1.5px solid var(--fj-pool);padding:8px 2px 5px; }
.about-nav-start:focus-visible { outline:3px solid var(--fj-pool);outline-offset:4px; }

body.about-page .about-hero { min-height:440px!important;padding:30px 0 42px!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;column-gap:20px!important;position:relative; }
body.about-page .about-hero::after { display:none!important; }
.about-hero-art { grid-column:1/5;position:relative;width:360px;height:330px;align-self:center; }
.about-logo { position:absolute;z-index:3;left:42px;top:28px;width:248px;height:248px;object-fit:contain;transform:rotate(-2deg);filter:drop-shadow(0 12px 14px rgba(37,83,63,.08)); }
.about-hero-photo { position:absolute;z-index:5;right:4px;bottom:2px;width:92px;height:126px;padding:7px 7px 20px;background:var(--fj-paper);border:1px solid color-mix(in srgb,var(--fj-forest) 20%,transparent);transform:rotate(5deg);box-shadow:0 7px 13px rgba(37,83,63,.1); }
.about-hero-photo img { width:100%;height:100%;display:block;object-fit:cover; }
.about-hero-cutout { position:absolute;z-index:6;left:0;top:8px;width:118px;height:96px;filter:drop-shadow(2px 3px 0 var(--fj-paper)) drop-shadow(-2px -2px 0 var(--fj-paper));transform:rotate(-5deg); }
.about-hero-cutout img { width:100%;height:100%;object-fit:contain; }
.about-hero-doodle { position:absolute;z-index:7;right:28px;top:28px;color:var(--fj-pool);font:500 55px/1 var(--home-hand);transform:rotate(13deg); }
body.about-page .about-copy { grid-column:5/13!important;align-self:center; }
body.about-page .about-copy>p:first-child { margin-bottom:16px!important; }
body.about-page .about-hero h1 { font-size:clamp(50px,4.2vw,62px)!important;line-height:.94!important; }
body.about-page .about-hero h1+p { max-width:590px!important;font-size:15px!important; }

.about-story { padding:42px 0 70px; }
.about-story-head { max-width:700px;margin:0 auto 46px;text-align:center; }
.about-story-head p,.about-chapter-copy>span { margin:0;color:var(--fj-pool);font:700 10px/1 var(--home-ui);letter-spacing:.16em;text-transform:uppercase; }
.about-story-head h2 { margin:12px 0 0;color:var(--fj-forest);font:500 44px/.98 var(--home-hand);letter-spacing:-.035em; }
.about-chapter { min-height:390px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:center;column-gap:20px;margin:0 0 62px;padding:38px 44px;border:1.4px solid color-mix(in srgb,var(--fj-forest) 42%,transparent);border-radius:52px 46px 56px 48px / 46px 56px 44px 54px;position:relative;background:color-mix(in srgb,var(--fj-paper) 80%,transparent); }
.about-chapter::after { content:none; }
.about-chapter-art { background:color-mix(in srgb,var(--fj-yellow) 20%,var(--fj-paper)); }
.about-chapter-sound { background:color-mix(in srgb,var(--fj-ice) 25%,var(--fj-paper)); }
.about-chapter-play { background:color-mix(in srgb,var(--fj-mint) 22%,var(--fj-paper));margin-bottom:0; }
.about-chapter-copy { grid-column:1/6;max-width:400px;position:relative;z-index:4; }
.about-chapter-sound .about-chapter-copy { grid-column:8/13; }
.about-chapter-copy h3 { margin:15px 0 14px;color:var(--fj-forest);font:500 34px/1.02 var(--home-hand);letter-spacing:-.03em; }
.about-chapter-copy p { margin:0;color:#547462;font:400 15px/1.6 var(--home-ui); }

.about-art-pair { grid-column:7/13;position:relative;height:300px; }
.about-demo-card,.about-demo-disc { position:absolute;width:240px;height:240px; }
.about-demo-card { left:0;top:30px;overflow:hidden;background:color-mix(in srgb,var(--fj-mint) 78%,var(--fj-paper));border:1px solid rgba(37,83,63,.2);border-radius:30px 25px 32px 24px;transform:rotate(-4deg);box-shadow:5px 7px 0 rgba(184,206,232,.3); }
.about-demo-raw { position:absolute;left:18px;top:18px;width:185px;height:180px;overflow:hidden;border-radius:19px 16px 20px 15px; }
.about-demo-raw img { width:100%;height:100%;object-fit:cover; }
.about-demo-tape { position:absolute;z-index:5;right:12px;bottom:28px;padding:6px 10px 5px;background:#f4beae;color:#422f0e;font:600 10px/1 var(--home-hand);transform:rotate(4deg);clip-path:polygon(2% 7%,98% 1%,96% 95%,1% 100%); }
.about-demo-sticker { position:absolute;z-index:6;left:8px;bottom:12px;font-size:38px;filter:drop-shadow(1.5px 0 #fff) drop-shadow(-1.5px 0 #fff) drop-shadow(0 1.5px #fff) drop-shadow(0 -1.5px #fff); }
.about-demo-star { position:absolute;right:14px;top:8px;color:var(--fj-forest);font-size:36px; }
.about-demo-disc { right:0;top:6px;border:1px solid #9fa6ac;border-radius:50%;background:#d9dde0;box-shadow:0 0 0 2px rgba(255,255,255,.6),0 9px 18px rgba(37,83,63,.11);transform:rotate(5deg); }
.about-demo-disc-surface { position:absolute;inset:3px;overflow:hidden;border-radius:50%;background:var(--fj-yellow); }
.about-demo-photo { position:absolute;left:22px;top:72px;width:64px;height:64px;transform:rotate(-4deg); }
.about-demo-photo img { width:100%;height:100%;object-fit:cover;padding:5px 5px 14px;background:var(--fj-paper); }
.about-demo-tape-disc { left:28px;right:auto;top:57px;bottom:auto;background:#aacd96; }
.about-demo-keys { left:auto;right:28px;bottom:32px; }
.about-demo-flower { position:absolute;right:28px;top:32px;color:var(--fj-forest);font:500 30px/1 sans-serif; }
.about-demo-disc-center { position:absolute;z-index:8;left:50%;top:50%;width:36px;height:36px;border:1px solid #b9b7af;border-radius:50%;background:#eef0ec;box-shadow:0 0 0 7px rgba(225,229,232,.55);transform:translate(-50%,-50%); }
.about-demo-disc-center i { position:absolute;inset:12px;border:1px solid #b9b7af;border-radius:50%;background:#fff; }


.about-play-panel { grid-column:7/13;position:relative;min-height:275px;padding:34px;border:1.4px solid var(--fj-forest);border-radius:42px 35px 45px 34px;background:var(--fj-paper);transform:rotate(1deg); }
.about-play-modes { display:flex;align-items:center;gap:9px; }
.about-play-modes>* { padding:9px 14px;border:1px solid var(--fj-forest);border-radius:999px;font:600 11px/1 var(--home-hand); }
.about-play-modes span:first-child { background:var(--fj-yellow); }.about-play-modes b { margin-left:auto;color:#a24a46;border-color:#a24a46; }
.about-mini-keys { position:absolute;left:35px;right:35px;bottom:34px;height:120px;display:flex;overflow:hidden;border:1.4px solid var(--fj-forest);border-radius:14px;background:#fff; }
.about-mini-keys i { flex:1;border-right:1px solid var(--fj-forest); }.about-mini-keys i:last-child{border:0}.about-mini-keys i:nth-child(2n)::after { content:"";display:block;width:55%;height:61%;margin-left:-28%;background:var(--fj-forest);border-radius:0 0 7px 7px; }
.about-play-gesture { position:absolute;z-index:4;right:82px;bottom:17px;font-size:50px;transform:rotate(-12deg); }.about-play-loop { position:absolute;right:23px;top:75px;color:var(--fj-pool);font:500 52px/1 var(--home-hand);transform:rotate(18deg); }

body.about-page .about-footer { width:100%;min-height:210px;margin:54px 0 64px;padding:48px 56px!important;display:flex;align-items:center;justify-content:space-between;gap:40px;border:1.5px solid var(--fj-forest);border-radius:52px 47px 55px 49px / 47px 55px 46px 53px;background:var(--fj-yellow); }
.about-footer p { margin:0 0 9px;color:#547462;font:500 13px/1 var(--home-ui); }.about-footer h2 { margin:0;color:var(--fj-forest);font:500 43px/1 var(--home-hand); }
body.about-page .about-footer .about-start { background:var(--fj-paper)!important;min-width:158px!important; }

@media (max-width:900px) {
  .about-hero-art{grid-column:1/6;transform:scale(.85);transform-origin:left center}.about-copy{grid-column:6/13!important}.about-title-line{white-space:normal}.about-chapter{padding:34px}.about-chapter-copy{grid-column:1/6}.about-art-pair,.about-play-panel{grid-column:6/13}.about-chapter-sound .about-chapter-copy{grid-column:7/13}.about-demo-card,.about-demo-disc{width:200px;height:200px}
}

/* About interactions: a spinning logo, real audio, and real opt-in camera preview. */
.about-hero-art { display:grid;place-items:center; }
.about-logo-button { width:270px;height:270px;display:block;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;outline:none; }
.about-logo-button .about-logo { position:static;width:100%;height:100%;display:block;object-fit:contain;transform:none;filter:drop-shadow(0 12px 14px rgba(37,83,63,.08));transition:filter .2s ease; }
.about-logo-button:hover .about-logo,.about-logo-button:focus-visible .about-logo { animation:about-logo-spin 6s linear infinite;filter:drop-shadow(0 16px 16px rgba(37,83,63,.13)); }
.about-logo-button.is-click-spinning .about-logo { animation:about-logo-once 1.2s cubic-bezier(.3,.7,.2,1); }
.about-logo-button:focus-visible { outline:3px solid var(--fj-pool);outline-offset:7px; }
@keyframes about-logo-spin { to { transform:rotate(360deg); } }
@keyframes about-logo-once { to { transform:rotate(360deg); } }
.about-chapter-art { transition:transform .22s ease,background-color .22s ease; }
.about-chapter-art:hover,.about-chapter-art:focus-visible { transform:translateY(-4px) rotate(-.18deg);background:color-mix(in srgb,var(--fj-yellow) 27%,var(--fj-paper));outline:none; }
.about-chapter-art:hover .about-demo-card,.about-chapter-art:focus-visible .about-demo-card { transform:translate(-5px,-4px) rotate(-6deg); }
.about-chapter-art:hover .about-demo-disc,.about-chapter-art:focus-visible .about-demo-disc { transform:translate(5px,-3px) rotate(10deg); }
.about-demo-card,.about-demo-disc { transition:transform .28s cubic-bezier(.2,.75,.2,1); }
#aboutSoundAudio { display:none; }
.about-play-modes button { padding:9px 14px;border:1.5px solid var(--fj-forest);border-radius:999px;background:var(--fj-paper);color:var(--fj-forest);font:600 11px/1 var(--home-hand);cursor:pointer; }
.about-play-modes button[aria-selected="true"] { background:var(--fj-yellow);border-width:2px; }
.about-play-modes button:focus-visible,#aboutCameraStart:focus-visible { outline:3px solid var(--fj-pool);outline-offset:3px; }
.about-performance-demo[hidden] { display:none!important; }
.about-performance-demo { position:absolute;left:34px;right:34px;top:82px;bottom:28px; }
.about-performance-keys .about-mini-keys { left:0;right:0;bottom:0; }
.about-performance-camera { display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr) auto;gap:10px 12px; }
.about-camera-frame { grid-column:1/-1;position:relative;min-height:138px;overflow:hidden;border:2px solid var(--fj-forest);border-radius:23px 19px 25px 20px;background:color-mix(in srgb,var(--fj-ice) 42%,var(--fj-paper)); }
.about-camera-frame video { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scaleX(-1);transition:opacity .2s ease; }
.about-camera-frame video.is-live { opacity:1; }
.about-camera-placeholder { position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:var(--fj-forest);pointer-events:none; }
.about-camera-placeholder span { font-size:42px; }.about-camera-placeholder p { margin:5px 0 0;font:600 13px/1.2 var(--home-hand); }
.about-camera-frame:has(video.is-live) .about-camera-placeholder { opacity:0; }
.about-camera-corners::before,.about-camera-corners::after { content:"";position:absolute;inset:12px;border:2px solid var(--fj-paper);border-top-color:transparent;border-bottom-color:transparent;border-radius:18px;pointer-events:none; }
#aboutCameraStart { min-height:34px;padding:0 14px;border:2px solid var(--fj-forest);border-radius:999px;background:var(--fj-yellow);color:var(--fj-forest);font:600 11px/1 var(--home-hand);cursor:pointer; }
#aboutCameraStatus { align-self:center;margin:0;color:#547462;font:500 10px/1.25 var(--home-ui); }
@media(prefers-reduced-motion:reduce){.about-logo-button:hover .about-logo,.about-logo-button:focus-visible .about-logo,.about-logo-button.is-click-spinning .about-logo{animation:none}.about-chapter-art,.about-demo-card,.about-demo-disc{transition:none}}

/* Async state remains visually distinct without continuous motion. */
@media (prefers-reduced-motion: reduce) {
  .sticker.analyzing::after,
  .semantic-remap.pending,
  .item.loading::before,
  .item.loading::after,
  .keys-refresh.busy .grain-icon,
  .rail-perform .rail-tool-btn.pending,
  .hum-rec-btn.recording,
  .av-rec.rec,
  .hum-btn.listening,
  .hum-btn.looping .hum-ico,
  .hum-rec.recording,
  .item-hum .hum-wave i,
  .rec-btn.recording,
  .board.cam-on.cam-mode-disc.scratching .disc-mirror-face::after,
  .booth-printer.is-printing .booth-printer-indicator span {
    animation: none !important;
  }
  .sticker.analyzing::after,
  .semantic-remap.pending { opacity: 1 !important; }
  .item.loading::before { transform: none !important; opacity: .72 !important; }
  .item.loading::after { opacity: .42 !important; }
  .hum-rec-btn.recording,
  .av-rec.rec,
  .hum-btn.listening,
  .hum-rec.recording,
  .rec-btn.recording { outline: 2px solid currentColor; outline-offset: 2px; }
  .item-hum .hum-wave i:nth-child(odd) { height: 12px; }
}

/* Canvas elements expose one semantic primary action plus independent controls. */
.item-primary-action {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: transparent;
  cursor: grab;
  appearance: none;
}
.item-primary-action:focus-visible {
  outline: 2px solid var(--fj-pool, #037f71);
  outline-offset: 4px;
}
.item.dragging .item-primary-action { cursor: grabbing; }
.item .remove {
  visibility: hidden;
  pointer-events: none;
}
.item:is(:hover, :focus-within, .is-selected) .remove {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.item:focus-within .item-transform-controls {
  opacity: 1;
  visibility: visible;
}
.item-transform-handle:focus-visible,
.item .remove:focus-visible {
  outline: 2px solid var(--fj-pool, #037f71);
  outline-offset: 3px;
}
@media (hover: none) {
  .item .remove {
    opacity: .82;
    visibility: visible;
    pointer-events: auto;
  }
}

/* Final account placement authority: reserve a real slot beside Studio tools. */
@media (min-width: 901px) {
  body:not(.home-open) .studio-control-cluster { right: 76px !important; }
}
@media (min-width: 761px) and (max-width: 900px) {
  body:not(.home-open) .account-control { top: 70px; right: 12px; }
}
@media (max-width: 760px) {
  body:not(.home-open) .account-control {
    top: 84px;
    right: 8px;
    min-width: 40px;
    height: auto;
  }
  body:not(.home-open) .account-toggle { width: 40px; height: 40px; }
  body:not(.home-open) .account-menu {
    top: 48px;
    right: 0;
    width: max-content;
    max-width: calc(100vw - 16px);
  }
}

/* Final model status authority: quiet, viewport-safe text below the canvas. */
html:not([data-flowjam-demo]) body > #engineStatus {
  position: fixed !important;
  z-index: 70;
  left: max(16px, env(safe-area-inset-left)) !important;
  right: auto !important;
  top: auto !important;
  bottom: max(14px, env(safe-area-inset-bottom)) !important;
  display: flex !important;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  width: auto !important;
  min-width: 0 !important;
  max-width: min(280px, calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right))) !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  clip: auto !important;
  clip-path: none !important;
  transform: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: var(--fj-ui-line-focus, #76a6ce) !important;
  font: 550 10px/1.35 var(--fj-ui-font, "Grandstander", sans-serif) !important;
  letter-spacing: .02em !important;
  text-align: left !important;
  text-overflow: clip !important;
  text-transform: none !important;
  white-space: normal !important;
  pointer-events: none;
}
html:not([data-flowjam-demo]) body > #engineStatus::before {
  content: "";
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fj-ui-line, #b1d0ec);
}
html:not([data-flowjam-demo]) body > #engineStatus[data-state="checking"]::before,
html:not([data-flowjam-demo]) body > #engineStatus[data-state="connecting"]::before,
html:not([data-flowjam-demo]) body > #engineStatus[data-state="buffering"]::before { background: var(--fj-blue, #52a5ce); }
html:not([data-flowjam-demo]) body > #engineStatus[data-state="ready"]::before,
html:not([data-flowjam-demo]) body > #engineStatus[data-state="playing"]::before { background: var(--fj-pool, #037f71); }
html:not([data-flowjam-demo]) body > #engineStatus[data-state="paused"]::before { background: var(--fj-orange, #f4a261); }
html:not([data-flowjam-demo]) body > #engineStatus[data-state="offline"]::before { background: var(--fj-ui-line-focus, #76a6ce); }
html:not([data-flowjam-demo]) body > #engineStatus[data-state="error"],
html:not([data-flowjam-demo]) body > #engineStatus[data-state="blocked"] {
  color: var(--fj-coral, #ef6545) !important;
  color: color-mix(in srgb, var(--fj-coral, #ef6545) 78%, var(--fj-ink, #422f0e)) !important;
}
html:not([data-flowjam-demo]) body > #engineStatus[data-state="error"]::before,
html:not([data-flowjam-demo]) body > #engineStatus[data-state="blocked"]::before { background: var(--fj-coral, #ef6545); }
html:not([data-flowjam-demo]) body.home-open > #engineStatus { display: none !important; }
html:not([data-flowjam-demo]) body > #engineStatus .engine-status-copy { display: block; min-width: 0; }
html:not([data-flowjam-demo]) body > #engineStatus .engine-status-usage {
  display: block; margin-top: 4px; color: var(--fj-ui-line-focus, #76a6ce);
  font: inherit; font-variant-numeric: tabular-nums;
}
html:not([data-flowjam-demo]) body.model-offline:not(.home-open) > #engineStatus[role="link"] {
  pointer-events: auto !important;
  cursor: pointer;
}
html:not([data-flowjam-demo]) body > #engineStatus[role="link"]:focus-visible {
  outline: 2px solid var(--fj-ui-line-focus, #76a6ce);
  outline-offset: 4px;
}
@media (max-width: 760px) {
  html:not([data-flowjam-demo]) body:not(.home-open) > #engineStatus {
    left: max(12px, env(safe-area-inset-left)) !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    max-width: min(280px, calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right))) !important;
  }
}

/* Keep the existing gesture card; only add a quiet close/reopen affordance. */
html body:not(.home-open) #camLegend .cam-legend-toggle {
  position: relative; padding-right: 46px !important;
}
html body:not(.home-open) #camGuideClose {
  position: absolute; right: 12px; top: 10px; width: 26px; height: 26px;
  display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--fj-ui-line-focus, #76a6ce); cursor: pointer;
}
html body:not(.home-open) #camGuideClose:hover { background: var(--fj-ui-ice, #f3f8fc); }
#camGuideClose:focus-visible {
  outline: 2px solid var(--fj-ui-line-focus, #76a6ce); outline-offset: 2px;
}