:root {
  --studio-doodle-stroke: var(--fj-ui-line);
  --studio-doodle-selected: var(--fj-ui-selected);
  --studio-doodle-paper: var(--fj-ui-paper);
  --studio-doodle-ink: var(--fj-ui-ink);
  --studio-doodle-focus: var(--fj-ui-line-focus);
  --studio-doodle-island: var(--fj-shape-island);
  --studio-doodle-island-fill: var(--fj-shape-island-fill);
  --studio-doodle-island-outline: var(--fj-shape-island-outline);
  --studio-doodle-window: var(--fj-shape-window, url("./assets/ui/doodle-window.svg"));
  --studio-doodle-window-medium: var(--fj-shape-medium-window, url("./assets/ui/doodle-medium-window.svg"));
  --studio-doodle-window-wide: var(--fj-shape-wide-window, url("./assets/ui/doodle-wide-window.svg"));
  --studio-doodle-keyboard-window: url("./assets/ui/doodle-keyboard-window.svg");
  --studio-doodle-review-window: url("./assets/ui/doodle-review-window.svg");
  --studio-doodle-sidebar: var(--fj-shape-sidebar, url("./assets/ui/doodle-sidebar.svg"));
  --studio-doodle-sidebar-medium: var(--fj-shape-sidebar-medium, url("./assets/ui/doodle-sidebar-medium.svg"));
  --studio-doodle-sidebar-compact: var(--fj-shape-sidebar-compact, url("./assets/ui/doodle-sidebar-compact.svg"));
  --studio-doodle-sidebar-short: url("./assets/ui/doodle-sidebar-short.svg");
  --studio-doodle-editor-window: url("./assets/ui/doodle-editor-window.svg");
  --studio-doodle-device: var(--fj-shape-device);
  --studio-doodle-window-outline: var(--fj-shape-window-outline);
  --studio-doodle-sidebar-outline: url("./assets/ui/doodle-sidebar-outline.svg");
  --studio-doodle-sidebar-medium-outline: url("./assets/ui/doodle-sidebar-medium-outline.svg");
  --studio-doodle-sidebar-compact-outline: url("./assets/ui/doodle-sidebar-compact-outline.svg");
  --studio-doodle-sidebar-short-outline: url("./assets/ui/doodle-sidebar-short-outline.svg");
  --studio-doodle-device-outline: url("./assets/ui/doodle-device-outline.svg");
  --studio-doodle-editor-window-outline: url("./assets/ui/doodle-editor-window-outline.svg");
  --studio-doodle-keyboard-window-outline: url("./assets/ui/doodle-keyboard-window-outline.svg");
  --studio-doodle-review-window-outline: url("./assets/ui/doodle-review-window-outline.svg");
  --studio-doodle-medium-window-outline: url("./assets/ui/doodle-medium-window-outline.svg");
  --studio-doodle-pill-outline: url("./assets/ui/doodle-pill-outline.svg");
  --studio-doodle-pill-fill: url("./assets/ui/doodle-pill-fill.svg");
  --studio-doodle-window-fill: url("./assets/ui/doodle-window-fill.svg");
  --studio-doodle-card-fill: url("./assets/ui/doodle-card-fill.svg");
  --studio-doodle-medium-window-fill: url("./assets/ui/doodle-medium-window-fill.svg");
  --studio-doodle-sidebar-fill: url("./assets/ui/doodle-sidebar-fill.svg");
  --studio-doodle-sidebar-medium-fill: url("./assets/ui/doodle-sidebar-medium-fill.svg");
  --studio-doodle-sidebar-compact-fill: url("./assets/ui/doodle-sidebar-compact-fill.svg");
  --studio-doodle-sidebar-short-fill: url("./assets/ui/doodle-sidebar-short-fill.svg");
  --studio-doodle-device-fill: url("./assets/ui/doodle-device-fill.svg");
  --studio-doodle-editor-window-fill: url("./assets/ui/doodle-editor-window-fill.svg");
  --studio-doodle-keyboard-window-fill: url("./assets/ui/doodle-keyboard-window-fill.svg");
  --studio-doodle-review-window-fill: url("./assets/ui/doodle-review-window-fill.svg");
  --studio-doodle-card: var(--fj-shape-card);
  --studio-doodle-card-outline: var(--fj-shape-card-outline);
  --studio-doodle-segment: var(--fj-shape-segment);
  --studio-doodle-segment-selected: var(--fj-shape-segment-selected);
  --studio-doodle-segment-selected-focus: var(--fj-shape-segment-selected-focus);
  --studio-doodle-segment-focus: var(--fj-shape-segment-focus);
  --studio-doodle-card-focus: var(--fj-shape-card-focus);
  --studio-doodle-island-focus: var(--fj-shape-island-focus);
}

/*
 * Studio shell pass, matched to Figma 6:62.
 * Each surface has one SVG perimeter; native borders, outlines and elevation
 * are removed so no second line can appear beneath the irregular stroke.
 */
@media (min-width: 761px) {
  /* Confirmation can open from Creation Review, so it must sit above it. */
  #takeReview.modal-layer { z-index: 220 !important; }
  #confirmDialog.modal-layer { z-index: 240 !important; }

  /* Mixer uses the same stable foreground-outline architecture as Edit. */
  body:not(.home-open) #mixerPanel.mixer-panel {
    --mixer-top: 72px;
    position: fixed !important;
    z-index: 188 !important;
    top: var(--mixer-top) !important;
    right: 14px !important;
    width: min(302px, calc(100vw - 24px)) !important;
    height: min(var(--mixer-height, 132px), calc(100dvh - var(--mixer-top) - 70px)) !important;
    min-height: 132px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: auto !important;
  }
  body:not(.home-open) #mixerPanel[hidden] { display: none !important; }
  body:not(.home-open) #mixerPanel .mixer-panel-frame {
    position: relative !important;
    isolation: isolate !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;
    background: var(--studio-doodle-window-fill) center / 100% 100% no-repeat !important;
    box-shadow: none !important;
  }
  body:not(.home-open) #mixerPanel .mixer-panel-frame::after {
    content: "" !important;
    position: absolute !important;
    z-index: 1000 !important;
    inset: 0 !important;
    display: block !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;
    background: var(--studio-doodle-window-outline) center / 100% 100% no-repeat !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }
  body:not(.home-open) #mixerPanel .mixer-panel-body {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    padding: 21px 22px 23px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    background: transparent !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--studio-doodle-stroke) transparent !important;
  }

  body:not(.home-open) {
    --source-flyout-left: 72px;
    --source-flyout-width: clamp(316px, 22vw, 336px);
  }

  body:not(.home-open) :is(
    .studio-canvas-choice,
    .topbar .studio-playback-island,
    .topbar .studio-performance-island
  ) {
    border: 0 !important;
    outline: 0 !important;
    background-color: var(--studio-doodle-paper) !important;
    background-image: var(--studio-doodle-island) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body:not(.home-open) :is(
    .studio-canvas-choice,
    .topbar .studio-playback-island,
    .topbar .studio-performance-island
  ) { border-radius: 31px !important; }

  body:not(.home-open) :is(
    .studio-canvas-choice,
    .topbar .studio-playback-island,
    .topbar .studio-performance-island
  ):hover {
    border: 0 !important;
    outline: 0 !important;
    background-color: var(--studio-doodle-paper) !important;
    background-image: var(--studio-doodle-island) !important;
    box-shadow: none !important;
  }

  /* Figma toggle: one 125 x 44 outer line and one 58 x 32 selected line. */
  body:not(.home-open) .studio-canvas-choice {
    width: 125px !important;
    height: 44px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1px !important;
    padding: 6px 4px !important;
  }

  body:not(.home-open) .studio-canvas-choice > button,
  body:not(.home-open) .studio-canvas-choice > button:hover {
    height: 32px !important;
    min-width: 0 !important;
    padding: 0 4px !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 999px !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--studio-doodle-ink) !important;
  }

  body:not(.home-open) .studio-canvas-choice > button.is-selected,
  body:not(.home-open) .studio-canvas-choice > button.is-selected:hover {
    border: 0 !important;
    outline: 0 !important;
    background-color: transparent !important;
    background-image: var(--studio-doodle-segment-selected) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    box-shadow: none !important;
    color: var(--studio-doodle-ink) !important;
  }

  body:not(.home-open) .studio-canvas-choice > button:focus-visible {
    outline: 0 !important;
    background-image: var(--studio-doodle-segment-focus) !important;
  }
  body:not(.home-open) .studio-canvas-choice > button.is-selected:focus-visible {
    background-image: var(--studio-doodle-segment-selected-focus) !important;
  }

  /* Source objects remain loose collage objects; only their active/hover beds draw. */
  body:not(.home-open) .source-toolbar,
  body:not(.home-open).archive-collapsed .source-toolbar,
  body:not(.home-open):not(.archive-collapsed) .source-toolbar {
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body:not(.home-open) .source-toolbar::before,
  body:not(.home-open) .source-toolbar::after {
    content: none !important;
    display: none !important;
  }

  /* The source objects are real collage assets, not a drawer tab. Keep every
     pixel inside the desktop viewport while leaving their loose edges free. */
  html body:not(.home-open) .source-toolbar,
  html body:not(.home-open).archive-collapsed .source-toolbar,
  html body:not(.home-open):not(.archive-collapsed) .source-toolbar {
    left: 6px !important;
    width: var(--fj-layout-source-toolbar-width) !important;
    align-items: center !important;
  }
  html body:not(.home-open) .source-tool,
  html body:not(.home-open).archive-collapsed .source-tool,
  html body:not(.home-open):not(.archive-collapsed) .source-tool {
    width: var(--fj-layout-source-toolbar-width) !important;
    height: var(--fj-layout-source-tool-row-height) !important;
    min-height: var(--fj-layout-source-tool-row-height) !important;
    flex: 0 0 var(--fj-layout-source-tool-row-height) !important;
  }
  html body:not(.home-open) .source-tool :is(.tool-object, .tool-asset),
  html body:not(.home-open).archive-collapsed .source-tool :is(.tool-object, .tool-asset),
  html body:not(.home-open):not(.archive-collapsed) .source-tool :is(.tool-object, .tool-asset) {
    transform-origin: center !important;
  }

  body:not(.home-open) .source-tool,
  body:not(.home-open):not(.archive-collapsed) .source-tool {
    border: 0 !important;
    outline: 0 !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  body:not(.home-open) .source-tool:is(:hover, .on),
  body:not(.home-open):not(.archive-collapsed) .source-tool:is(:hover, .on) {
    border: 0 !important;
    outline: 0 !important;
    background-color: transparent !important;
    background-image: none !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    box-shadow: none !important;
  }

  body:not(.home-open) .source-tool.on,
  body:not(.home-open):not(.archive-collapsed) .source-tool.on {
    background-color: transparent !important;
    background-image: none !important;
  }

  body:not(.home-open) .source-tool:focus-visible,
  body:not(.home-open):not(.archive-collapsed) .source-tool:focus-visible {
    border: 0 !important;
    outline: 0 !important;
    background-color: transparent !important;
    background-image: none !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    box-shadow: none !important;
  }
  body:not(.home-open) .source-tool::before,
  body:not(.home-open) .source-tool::after,
  body:not(.home-open):not(.archive-collapsed) .source-tool::before,
  body:not(.home-open):not(.archive-collapsed) .source-tool::after {
    content: none !important;
    display: none !important;
  }
  /* Keyboard focus stays on the collage object itself, never a card behind it. */
  body:not(.home-open) .source-tool:focus-visible :is(.tool-object, .tool-asset) {
    filter: drop-shadow(0 2px 2px rgba(57,52,45,.1))
      drop-shadow(0 5px 7px rgba(57,52,45,.07)) !important;
  }

  /* The open Sources/Photos flyout is one cream sheet with one blue path. */
  body:not(.home-open):not(.archive-collapsed) #archiveShell.archive-shell[data-active-panel] {
    border: 0 !important;
    outline: 0 !important;
    border-radius: 28px 25px 30px 26px / 26px 30px 24px 29px !important;
    background-color: var(--studio-doodle-paper) !important;
    background-image: var(--studio-doodle-window) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body:not(.home-open):not(.archive-collapsed) #archiveShell.archive-shell:is([data-active-panel="appearance"], [data-active-panel="photos"]) {
    background-image: var(--studio-doodle-sidebar) !important;
  }
  body:not(.home-open):not(.archive-collapsed) #archiveShell.archive-shell[data-active-panel="appearance"] {
    top: 66px !important;
    height: min(720px, calc(100dvh - 80px)) !important;
    max-height: calc(100dvh - 80px) !important;
    transform: none !important;
  }
  body:not(.home-open):not(.archive-collapsed) #archiveShell.archive-shell[data-active-panel="photos"] {
    top: 66px !important;
    height: min(660px, calc(100dvh - 80px)) !important;
    max-height: calc(100dvh - 80px) !important;
    transform: none !important;
  }
  body:not(.home-open):not(.archive-collapsed) #archiveShell.archive-shell[data-active-panel="vibes"] {
    top: 66px !important;
    height: min(620px, calc(100dvh - 80px)) !important;
    max-height: calc(100dvh - 80px) !important;
    background-image: var(--studio-doodle-sidebar-medium) !important;
    transform: none !important;
  }
  body:not(.home-open):not(.archive-collapsed) #archiveShell.archive-shell[data-active-panel="ambience"] {
    background-image: var(--studio-doodle-sidebar-short) !important;
  }
  body:not(.home-open):not(.archive-collapsed) #archiveShell.archive-shell[data-active-panel="doodles"] {
    background-image: var(--studio-doodle-sidebar-compact) !important;
  }

  body:not(.home-open):not(.archive-collapsed) #archiveShell.archive-shell[data-active-panel] .archive-strip.is-open > .archive-strip-body {
    overscroll-behavior: contain;
  }
  body:not(.home-open):not(.archive-collapsed) #archiveShell.archive-shell[data-active-panel="appearance"] .archive-strip.is-open > .archive-strip-body,
  body:not(.home-open):not(.archive-collapsed) #archiveShell.archive-shell[data-active-panel="vibes"] .archive-strip.is-open > .archive-strip-body {
    box-sizing: border-box !important;
    padding-bottom: 18px !important;
    scroll-padding-bottom: 18px !important;
  }

  body:not(.home-open):not(.archive-collapsed) #archiveShell.archive-shell[data-active-panel] > #archiveContents,
  body:not(.home-open):not(.archive-collapsed) #archiveShell.archive-shell[data-active-panel] .archive-strip.is-open,
  body:not(.home-open):not(.archive-collapsed) #archiveShell.archive-shell[data-active-panel] .archive-strip-body,
  body:not(.home-open):not(.archive-collapsed) #archiveShell.archive-shell[data-active-panel] .rail-panel.on {
    border: 0 !important;
    outline: 0 !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }
  body:not(.home-open):not(.archive-collapsed) #archiveShell.archive-shell[data-active-panel] > #archiveContents,
  body:not(.home-open):not(.archive-collapsed) #archiveShell.archive-shell[data-active-panel] .archive-strip.is-open,
  body:not(.home-open):not(.archive-collapsed) #archiveShell.archive-shell[data-active-panel] .archive-strip-body,
  body:not(.home-open):not(.archive-collapsed) #archiveShell.archive-shell[data-active-panel] .archive-strip-body .rail-panel.on {
    background: transparent !important;
  }

  /* Photos gets one outer sheet and one large blue camera preview, never an inset frame. */
  body:not(.home-open):not(.archive-collapsed) #archiveShell.archive-shell[data-active-panel="photos"] #snapPanel.photo-polaroid {
    border: 0 !important;
    outline: 0 !important;
    border-radius: 25px 22px 27px 23px / 23px 27px 22px 26px !important;
    background-color: var(--studio-doodle-paper) !important;
    background-image: var(--studio-doodle-device) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    box-shadow: none !important;
  }

  body:not(.home-open):not(.archive-collapsed) #archiveShell.archive-shell[data-active-panel="photos"] .photo-polaroid .snap-stage {
    border: 0 !important;
    outline: 0 !important;
    border-radius: 22px 19px 23px 20px / 20px 23px 19px 22px !important;
    background-color: var(--control-doodle-ice) !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  /* Camera-off is a calm blue preview surface. Live video replaces the same
     area, so the viewfinder never changes size between off and on. */
  body:not(.home-open):not(.archive-collapsed) #archiveShell.archive-shell[data-active-panel="photos"] #snapPanel.photo-polaroid > .snap-stage > .snap-idle {
    background-color: var(--control-doodle-ice) !important;
    background-image: none !important;
  }

  body:not(.home-open):not(.archive-collapsed) #archiveShell.archive-shell[data-active-panel="photos"] .photo-polaroid .snap-stage::before {
    content: none !important;
    display: none !important;
  }

  body:not(.home-open):not(.archive-collapsed) #archiveShell.archive-shell[data-active-panel="photos"] .photo-polaroid .snap-stage::after {
    z-index: 8 !important;
    box-shadow: none !important;
    background: transparent;
  }

  /* Edit and Keys are independent windows. Their paths match their actual
     proportions instead of stretching the compact 3:2 card across a keyboard. */
  body:not(.home-open) #photoInspector.photo-inspector .photo-inspector-frame,
  body:not(.home-open) #photoInspector.photo-inspector[data-kind] .photo-inspector-frame,
  body:not(.home-open).records-open.photo-inspector-open #photoInspector.photo-inspector .photo-inspector-frame,
  body.mode-keys:not(.home-open) .midi-chassis {
    border: 0 !important;
    outline: 0 !important;
    border-radius: 26px 23px 28px 24px / 24px 28px 22px 27px !important;
    background-color: var(--studio-doodle-paper) !important;
    background-image: var(--studio-doodle-window) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  body:not(.home-open) #photoInspector.photo-inspector .photo-inspector-frame,
  body:not(.home-open) #photoInspector.photo-inspector[data-kind] .photo-inspector-frame,
  body:not(.home-open).records-open.photo-inspector-open #photoInspector.photo-inspector .photo-inspector-frame {
    background-image: var(--studio-doodle-editor-window) !important;
  }
  body:not(.home-open) #photoInspector.photo-inspector[data-kind="photo"] .photo-inspector-frame,
  body:not(.home-open).records-open.photo-inspector-open #photoInspector.photo-inspector[data-kind="photo"] .photo-inspector-frame {
    background-image: var(--studio-doodle-editor-window) !important;
  }
  body:not(.home-open) #photoInspector.photo-inspector[data-kind="deco"] .photo-inspector-frame {
    background-image: var(--studio-doodle-window-medium) !important;
  }

  body.mode-keys:not(.home-open) .midi-chassis {
    border-radius: 26px 23px 28px 24px / 24px 28px 22px 27px !important;
    background-image: var(--studio-doodle-keyboard-window) !important;
  }

  body:not(.home-open) #photoInspector.is-dragging .photo-inspector-frame {
    border: 0 !important;
    outline: 0 !important;
    background-color: var(--studio-doodle-paper) !important;
    box-shadow: none !important;
  }
  body.mode-keys:not(.home-open) .dock.keys-dragging .midi-chassis,
  body.mode-keys:not(.home-open).dock-collapsed .midi-chassis {
    border: 0 !important;
    outline: 0 !important;
    background-color: var(--studio-doodle-paper) !important;
    background-image: var(--studio-doodle-keyboard-window) !important;
    box-shadow: none !important;
  }

  body:not(.home-open) #photoInspector.photo-inspector .photo-inspector-frame {
    width: 100% !important;
    max-height: var(--edit-window-max-height, calc(100dvh - 82px)) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  body:not(.home-open) #photoInspector.photo-inspector .photo-inspector-card,
  body:not(.home-open) #photoInspector.photo-inspector[data-kind] .photo-inspector-card,
  body:not(.home-open).records-open.photo-inspector-open #photoInspector.photo-inspector .photo-inspector-card,
  body:not(.home-open) #photoInspector.is-dragging .photo-inspector-card {
    width: 100% !important;
    max-height: var(--edit-window-max-height, calc(100dvh - 82px)) !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  body:not(.home-open) #photoInspector .photo-inspector-head {
    background: color-mix(in srgb, var(--studio-doodle-paper) 96%, transparent) !important;
  }
  body:not(.home-open) #photoInspector .photo-inspector-head:focus-visible {
    outline: 0 !important;
  }

  /* Closed Creations is a pill. Open state has one complete window, never two joined frames. */
  #recordsDrawer.records-drawer-shell:not(.open) .records-tab {
    border: 0 !important;
    outline: 0 !important;
    border-radius: 31px !important;
    background-color: var(--studio-doodle-paper) !important;
    background-image: var(--studio-doodle-island) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body:not(.home-open) #recordsDrawer.records-drawer-shell.open,
  body.records-open:not(.home-open) #recordsDrawer.records-drawer-shell.open,
  body.photo-inspector-open:not(.home-open) #recordsDrawer.records-drawer-shell.open {
    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: none !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    box-shadow: none !important;
  }

  body:not(.home-open) #recordsDrawer.records-drawer-shell.open > .records-tab,
  body:not(.home-open) #recordsDrawer.records-drawer-shell.open > .records-drawer,
  body.records-open:not(.home-open) #recordsDrawer.records-drawer-shell.open > .records-tab,
  body.records-open:not(.home-open) #recordsDrawer.records-drawer-shell.open > .records-drawer {
    border: 0 !important;
    outline: 0 !important;
    border-radius: 24px !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body:not(.home-open) #recordsDrawer.records-drawer-shell.open > .records-drawer,
  body.records-open:not(.home-open) #recordsDrawer.records-drawer-shell.open > .records-drawer,
  body.photo-inspector-open:not(.home-open) #recordsDrawer.records-drawer-shell.open > .records-drawer {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 16px 14px 14px !important;
    border: 0 !important;
    background-color: var(--studio-doodle-paper) !important;
    background-image: var(--studio-doodle-window) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    border-radius: 26px 23px 28px 24px / 24px 28px 22px 27px !important;
  }
  html body.records-open:not(.home-open) #recordsDrawer.records-drawer-shell.open > #recordsRack.records-drawer,
  html body.photo-inspector-open.records-open:not(.home-open) #recordsDrawer.records-drawer-shell.open > #recordsRack.records-drawer {
    position: absolute !important;
    inset: auto 0 62px auto !important;
    width: min(300px, calc(100vw - 28px)) !important;
    height: auto !important;
    min-height: 150px !important;
    max-height: min(430px, calc(100dvh - 100px)) !important;
    padding: 16px 14px 14px !important;
    overflow: hidden !important;
    border: 0 !important;
    outline: 0 !important;
    background: var(--studio-doodle-window) center / 100% 100% no-repeat !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transform: translateY(0) scale(1) !important;
  }

  body:not(.home-open) #recordsDrawer.records-drawer-shell .records-tab:focus-visible {
    outline: 0 !important;
    background-image: var(--studio-doodle-island-focus) !important;
  }

  /* Confirmation and saved-take review keep their existing dialog semantics. */
  body:not(.home-open) #confirmDialog .confirm-sheet {
    border: 0 !important;
    outline: 0 !important;
    border-radius: 28px 25px 30px 26px / 26px 30px 24px 29px !important;
    background-color: var(--studio-doodle-paper) !important;
    background-image: var(--studio-doodle-window) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    box-shadow: none !important;
  }

  body:not(.home-open) #takeReview .take-sheet-frame {
    position: relative !important;
    width: min(980px, 96vw) !important;
    max-height: 91vh !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 28px 25px 30px 26px / 26px 30px 24px 29px !important;
    background: var(--studio-doodle-review-window) center / 100% 100% no-repeat !important;
    box-shadow: none !important;
  }
  body:not(.home-open) #takeReview .take-sheet {
    width: 100% !important;
    max-height: 91vh !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable;
  }
  body:not(.home-open) #takeReview .take-sheet::after {
    content: none !important;
    display: none !important;
  }

  /* Content geometry is never styled as application chrome. */
  html[data-canvas-type="disc"] body:not(.home-open) #board.board,
  html[data-canvas-type="disc"] body:not(.home-open) #board.board::after,
  html[data-canvas-type="disc"] body:not(.home-open) #board .disc-surface {
    border: 0 !important;
    outline: 0 !important;
  }
  html[data-canvas-type="disc"] body:not(.home-open) #board.board {
    background-image: none !important;
    box-shadow: 0 8px 22px rgba(37, 83, 63, .045) !important;
  }
  html[data-canvas-type="disc"] body:not(.home-open) #board.board::after {
    content: none !important;
    display: none !important;
  }
  html[data-canvas-type="disc"] body:not(.home-open) #board .disc-surface {
    box-shadow: none !important;
  }
}

/* Wide desktop Keys window: compact enough to read as a small instrument,
   while retaining the short-key proportions used by the About demo. The
   untouched state sits just below the top controls; user-positioned windows
   keep their saved drag coordinates. */
@media (min-width: 1100px) {
  body:not(.home-open) {
    --studio-p3-keys-width: clamp(390px, 27.2vw, 400px);
    --studio-p3-keys-height: 148px;
    --studio-p3-keyboard-height: 64px;
  }

  body.mode-keys:not(.home-open) .dock:not(.is-positioned) {
    inset: 72px 14px auto auto !important;
    width: var(--studio-p3-keys-width) !important;
    height: var(--studio-p3-keys-height) !important;
    align-items: flex-start !important;
  }

  body.mode-keys:not(.home-open).mode-dj .dock:not(.is-positioned),
  body.mode-keys:not(.home-open).records-open .dock:not(.is-positioned),
  body.mode-keys:not(.home-open).photo-inspector-open .dock:not(.is-positioned) {
    right: auto !important;
    left: 64px !important;
  }

  body.mode-keys:not(.home-open) .dock:not(.is-positioned) .dock-keys,
  body.mode-keys:not(.home-open) .dock:not(.is-positioned) .midi-chassis {
    width: 100% !important;
    max-width: none !important;
  }

  body.mode-keys:not(.home-open) .dock:not(.is-positioned) .midi-chassis {
    height: 100% !important;
    min-height: var(--studio-p3-keys-height) !important;
    aspect-ratio: auto !important;
    grid-template-rows: 28px 32px var(--studio-p3-keyboard-height) !important;
    gap: 4px !important;
    padding: 8px 13px !important;
  }

  body.mode-keys:not(.home-open) .dock:not(.is-positioned) .keyboard {
    height: var(--studio-p3-keyboard-height) !important;
    min-height: var(--studio-p3-keyboard-height) !important;
    align-items: end !important;
  }
  body.mode-keys:not(.home-open) .dock:not(.is-positioned) .octave-bank {
    width: 42px !important;
    height: 60px !important;
    align-self: end !important;
    padding: 4px 2px !important;
  }
  body.mode-keys:not(.home-open) .dock:not(.is-positioned) .pkeys {
    --white-key-w: 36px !important;
    --white-key-h: 61px !important;
    --black-key-w: 22px !important;
    --black-key-h: 38px !important;
    align-self: end !important;
  }

  body.mode-keys:not(.home-open).dock-collapsed .dock:not(.is-positioned) {
    height: 42px !important;
  }

  body.mode-keys:not(.home-open).dock-collapsed .dock:not(.is-positioned) .midi-chassis {
    height: 42px !important;
    min-height: 42px !important;
    aspect-ratio: auto !important;
  }
}

/* My Creations is a fixed overlay. Opening it never reflows or moves the
   artwork, and the panel itself does not slide upward from the launcher. */
html body.records-open:not(.home-open) .stage > .board-wrap,
html[data-canvas-type="disc"] body.records-open:not(.home-open) .stage > .board-wrap,
html[data-canvas-type="card"] body.records-open:not(.home-open) .stage > .board-wrap {
  inset: var(--studio-topbar-height, 58px) 0 0 !important;
  transform: none !important;
  translate: none !important;
}
html[data-canvas-type="card"] body.records-open:not(.home-open) .stage > .board-wrap { inset: 0 !important; }
html body.records-open:not(.home-open) #board.board,
html body.records-open:not(.home-open) .turntable-plinth { translate: none !important; }
html body.records-open:not(.home-open) #recordsDrawer.records-drawer-shell.open > #recordsRack.records-drawer {
  transform: none !important;
  transition: opacity .14s ease !important;
}

/* Foreground window outlines ---------------------------------------------
 * Window fills clip their own content. A transparent, pointer-inert overlay
 * owns the sole two-pixel path, so white panels and scrolling descendants can
 * never paint over the perimeter. Artwork, CD geometry and piano keys are not
 * selected by this architecture. */
@media (min-width: 761px) {
  body:not(.home-open):not(.archive-collapsed) #archiveShell.archive-shell[data-active-panel] {
    isolation: isolate !important;
    border: 0 !important;
    outline: 0 !important;
    background-color: transparent !important;
    background-image: var(--studio-doodle-window-fill) !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    box-shadow: none !important;
  }
  body:not(.home-open) :is(
    #snapPanel.photo-polaroid,
    #photoInspector .photo-inspector-frame,
    #keysDock .midi-chassis,
    #recordsRack.records-drawer,
    #confirmDialog .confirm-sheet,
    #takeReview .take-sheet-frame,
    #camLegend.cam-legend
  ),
  html body:not(.home-open) :is(
    .photo-add-popover,
    .appearance-custom-editor,
    .inspector-inline-palette,
    .keys-choice-popover,
    .download-menu,
    .photo-recognition-card,
    .photo-auto-match-card
  ) {
    isolation: isolate !important;
    border: 0 !important;
    outline: 0 !important;
    background-color: transparent !important;
    background-image: var(--studio-doodle-card-fill) !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    box-shadow: none !important;
  }
  body:not(.home-open) :is(
    #snapPanel.photo-polaroid,
    #photoInspector .photo-inspector-frame,
    #keysDock .midi-chassis,
    #confirmDialog .confirm-sheet,
    #takeReview .take-sheet-frame,
    .appearance-custom-editor,
    .inspector-inline-palette,
    .photo-recognition-card,
    .photo-auto-match-card
  ) {
    position: relative !important;
  }

  body:not(.home-open) :is(
    #snapPanel.photo-polaroid,
    #photoInspector .photo-inspector-frame,
    #keysDock .midi-chassis,
    #recordsRack.records-drawer,
    #confirmDialog .confirm-sheet,
    #takeReview .take-sheet-frame,
    #camLegend.cam-legend
  )::after {
    content: "" !important;
    position: absolute !important;
    z-index: 40 !important;
    inset: 0 !important;
    display: block !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;
    background: var(--studio-doodle-window-outline) center / 100% 100% no-repeat !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }
  /* Controls loads after this file; keep every outline host transparent even
     when that layer supplies fallback card styling. */
  html body:not(.home-open) :is(
    #snapPanel.photo-polaroid,
    #photoInspector .photo-inspector-frame,
    #keysDock .midi-chassis,
    #recordsRack.records-drawer,
    #confirmDialog .confirm-sheet,
    #takeReview .take-sheet-frame,
    #camLegend.cam-legend
  ) {
    background-color: transparent !important;
  }
  html body:not(.home-open) :is(
    .photo-add-popover,
    .appearance-custom-editor,
    .inspector-inline-palette,
    .keys-choice-popover,
    .download-menu,
    .photo-recognition-card,
    .photo-auto-match-card
  ) {
    background-color: transparent !important;
  }
  html body:not(.home-open) :is(
    #recordsRack.records-drawer,
    #confirmDialog .confirm-sheet,
    #camLegend.cam-legend
  ) {
    background-image: var(--studio-doodle-window-fill) !important;
  }
  html body:not(.home-open) :is(
    .photo-add-popover,
    .appearance-custom-editor,
    .inspector-inline-palette,
    .keys-choice-popover,
    .download-menu,
    .photo-recognition-card,
    .photo-auto-match-card
  ) {
    background-image: var(--studio-doodle-card-fill) !important;
  }
  body:not(.home-open):not(.archive-collapsed) #archiveShell.archive-shell[data-active-panel]::after {
    content: "" !important;
    position: absolute !important;
    z-index: 40 !important;
    inset: 0 !important;
    display: block !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;
    background: var(--studio-doodle-window-outline) center / 100% 100% no-repeat !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }

  /* The flyout shell keeps a warm paper fill and clips the scroll viewport;
     its outline is selected by panel height, never stretched from another
     aspect family. */
  body:not(.home-open):not(.archive-collapsed) #archiveShell.archive-shell[data-active-panel] {
    overflow: hidden !important;
    background-color: transparent !important;
    background-image: var(--studio-doodle-window-fill) !important;
  }
  body:not(.home-open):not(.archive-collapsed) #archiveShell.archive-shell:is([data-active-panel="appearance"], [data-active-panel="photos"])::after {
    background-image: var(--studio-doodle-sidebar-outline) !important;
  }
  body:not(.home-open):not(.archive-collapsed) #archiveShell.archive-shell:is([data-active-panel="appearance"], [data-active-panel="photos"]) {
    background-image: var(--studio-doodle-sidebar-fill) !important;
  }
  body:not(.home-open):not(.archive-collapsed) #archiveShell.archive-shell[data-active-panel="vibes"]::after {
    background-image: var(--studio-doodle-sidebar-medium-outline) !important;
  }
  body:not(.home-open):not(.archive-collapsed) #archiveShell.archive-shell[data-active-panel="vibes"] {
    background-image: var(--studio-doodle-sidebar-medium-fill) !important;
  }
  body:not(.home-open):not(.archive-collapsed) #archiveShell.archive-shell[data-active-panel="ambience"]::after {
    background-image: var(--studio-doodle-sidebar-short-outline) !important;
  }
  body:not(.home-open):not(.archive-collapsed) #archiveShell.archive-shell[data-active-panel="ambience"] {
    background-image: var(--studio-doodle-sidebar-short-fill) !important;
  }
  body:not(.home-open):not(.archive-collapsed) #archiveShell.archive-shell[data-active-panel="doodles"]::after {
    background-image: var(--studio-doodle-sidebar-compact-outline) !important;
  }
  body:not(.home-open):not(.archive-collapsed) #archiveShell.archive-shell[data-active-panel="doodles"] {
    background-image: var(--studio-doodle-sidebar-compact-fill) !important;
  }

  /* Appearance is deliberately a shorter file drawer; its existing body is
     the scroll owner. This restores visual room for the working CD. */
  body:not(.home-open):not(.archive-collapsed) #archiveShell.archive-shell[data-active-panel="appearance"] {
    height: min(480px, calc(100dvh - 94px)) !important;
    max-height: calc(100dvh - 94px) !important;
  }
  body:not(.home-open):not(.archive-collapsed) #archiveShell.archive-shell[data-active-panel="photos"] #snapPanel.photo-polaroid {
    overflow: hidden !important;
    background-image: var(--studio-doodle-device-fill) !important;
  }
  body:not(.home-open):not(.archive-collapsed) #archiveShell.archive-shell[data-active-panel="photos"] #snapPanel.photo-polaroid::after {
    background-image: var(--studio-doodle-device-outline) !important;
  }

  body:not(.home-open) #photoInspector .photo-inspector-frame {
    overflow: hidden !important;
    background-image: var(--studio-doodle-editor-window-fill) !important;
  }
  body:not(.home-open) #photoInspector .photo-inspector-frame::after {
    z-index: 1000 !important;
    background-image: var(--studio-doodle-editor-window-outline) !important;
  }
  body:not(.home-open) #photoInspector[data-kind="photo"] .photo-inspector-frame::after {
    background-image: var(--studio-doodle-editor-window-outline) !important;
  }
  body:not(.home-open) #photoInspector[data-kind="photo"] .photo-inspector-frame {
    background-image: var(--studio-doodle-editor-window-fill) !important;
  }
  body:not(.home-open) #photoInspector[data-kind="deco"] .photo-inspector-frame {
    background-image: var(--studio-doodle-medium-window-fill) !important;
  }
  body:not(.home-open) #photoInspector[data-kind="deco"] .photo-inspector-frame::after {
    background-image: var(--studio-doodle-medium-window-outline) !important;
  }

  /* Match the specificity of the earlier Edit variants so no legacy
     fill-and-stroke asset can survive underneath the foreground outline. */
  html body:not(.home-open) #photoInspector.photo-inspector .photo-inspector-frame,
  html body:not(.home-open) #photoInspector.photo-inspector[data-kind] .photo-inspector-frame,
  html body:not(.home-open).records-open.photo-inspector-open #photoInspector.photo-inspector .photo-inspector-frame,
  html body:not(.home-open) #photoInspector.is-dragging .photo-inspector-frame {
    background-color: transparent !important;
    background-image: var(--studio-doodle-editor-window-fill) !important;
  }
  html body:not(.home-open) #photoInspector.photo-inspector[data-kind="photo"] .photo-inspector-frame,
  html body:not(.home-open).records-open.photo-inspector-open #photoInspector.photo-inspector[data-kind="photo"] .photo-inspector-frame {
    background-color: transparent !important;
    background-image: var(--studio-doodle-editor-window-fill) !important;
  }
  html body:not(.home-open) #photoInspector.photo-inspector[data-kind="deco"] .photo-inspector-frame {
    background-color: transparent !important;
    background-image: var(--studio-doodle-medium-window-fill) !important;
  }

  body.mode-keys:not(.home-open) #keysDock .midi-chassis {
    overflow: hidden !important;
    background-image: var(--studio-doodle-keyboard-window-fill) !important;
  }
  body.mode-keys:not(.home-open) #keysDock .midi-chassis::after {
    z-index: 1000 !important;
    background-image: var(--studio-doodle-keyboard-window-outline) !important;
  }

  body:not(.home-open) #recordsRack.records-drawer,
  body:not(.home-open) #confirmDialog .confirm-sheet,
  body:not(.home-open) #camLegend.cam-legend {
    overflow: hidden !important;
    background-image: var(--studio-doodle-window-fill) !important;
  }
  html body.records-open:not(.home-open) #recordsDrawer.records-drawer-shell.open > #recordsRack.records-drawer,
  html body.photo-inspector-open.records-open:not(.home-open) #recordsDrawer.records-drawer-shell.open > #recordsRack.records-drawer {
    background-color: transparent !important;
    background-image: var(--studio-doodle-window-fill) !important;
  }

  body:not(.home-open) #takeReview .take-sheet-frame {
    overflow: hidden !important;
    background-image: var(--studio-doodle-review-window-fill) !important;
  }
  body:not(.home-open) #takeReview .take-sheet-frame::after {
    z-index: 1000 !important;
    background-image: var(--studio-doodle-review-window-outline) !important;
  }
  body:not(.home-open) :is(
    #recordsRack.records-drawer,
    #confirmDialog .confirm-sheet,
    #camLegend.cam-legend
  ) {
    background-color: transparent !important;
    background-image: var(--studio-doodle-window-fill) !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
  }

  /* Compact shell-like cards use the existing card outline; their contents
     remain interactive because the overlay never receives pointer events. */
  body:not(.home-open) :is(
    .photo-add-popover,
    .appearance-custom-editor,
    .inspector-inline-palette,
    .keys-choice-popover,
    .download-menu,
    .photo-recognition-card,
    .photo-auto-match-card
  ) {
    overflow: hidden !important;
    background-image: var(--studio-doodle-card-fill) !important;
  }
  html body:not(.home-open) :is(
    #recordsRack.records-drawer,
    #camLegend.cam-legend
  ) {
    background-color: transparent !important;
  }
  html body:not(.home-open) :is(
    .photo-add-popover,
    .appearance-custom-editor,
    .inspector-inline-palette,
    .keys-choice-popover,
    .download-menu,
    .photo-recognition-card,
    .photo-auto-match-card
  ) {
    background-color: transparent !important;
  }
  body:not(.home-open) :is(
    .photo-add-popover,
    .appearance-custom-editor,
    .inspector-inline-palette,
    .keys-choice-popover,
    .download-menu,
    .photo-recognition-card,
    .photo-auto-match-card
  )::after {
    content: "" !important;
    position: absolute !important;
    z-index: 40 !important;
    inset: 0 !important;
    display: block !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;
    background: var(--studio-doodle-card-outline) center / 100% 100% no-repeat !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }
}

@media (forced-colors: active) and (min-width: 761px) {
  body:not(.home-open) :is(
    .studio-file-island,
    .studio-canvas-choice,
    .topbar .studio-playback-island,
    .topbar .studio-performance-island,
    #archiveShell.archive-shell[data-active-panel],
    #photoInspector .photo-inspector-frame,
    .midi-chassis,
    #recordsDrawer .records-tab,
    #recordsDrawer .records-drawer,
    #confirmDialog .confirm-sheet,
    #takeReview .take-sheet-frame
  ) {
    border: 2px solid ButtonText !important;
    background: Canvas !important;
    color: ButtonText !important;
    forced-color-adjust: auto;
  }
}

/* Desktop window avoidance ------------------------------------------------
 * The CD remains the visual anchor while the floating performance windows
 * occupy real, non-overlapping lanes. These offsets only affect the default
 * window positions; a window the user has dragged keeps its saved position. */
@media (min-width: 1100px) {
  /* Keys normally stays in the quiet upper-right lane. Records occupies the
     lower-right lane, so those two windows do not need to swap sides. */
  body.mode-keys:not(.home-open) .dock:not(.is-positioned),
  body.mode-keys:not(.home-open).records-open .dock:not(.is-positioned) {
    inset: 72px 14px auto auto !important;
    width: var(--studio-p3-keys-width) !important;
    height: var(--studio-p3-keys-height) !important;
  }
  body.mode-keys:not(.home-open) .dock.is-positioned {
    width: var(--studio-p3-keys-width) !important;
    height: var(--studio-p3-keys-height) !important;
  }
  body.mode-keys:not(.home-open) .dock.is-positioned :is(.dock-keys, .midi-chassis) {
    width: 100% !important;
    max-width: none !important;
  }
  body.mode-keys:not(.home-open) .dock.is-positioned .midi-chassis {
    height: 100% !important;
    min-height: var(--studio-p3-keys-height) !important;
    aspect-ratio: auto !important;
    grid-template-rows: 28px 32px var(--studio-p3-keyboard-height) !important;
    gap: 4px !important;
    padding: 8px 13px !important;
    background-color: transparent !important;
    background-image: var(--studio-doodle-keyboard-window-fill) !important;
  }
  body.mode-keys:not(.home-open) .dock.is-positioned .keyboard {
    height: var(--studio-p3-keyboard-height) !important;
    min-height: var(--studio-p3-keyboard-height) !important;
  }
  body.mode-keys:not(.home-open) .dock.is-positioned .octave-bank {
    width: 42px !important;
    height: 60px !important;
    padding: 4px 2px !important;
  }
  body.mode-keys:not(.home-open) .dock.is-positioned .pkeys {
    --white-key-w: 36px !important;
    --white-key-h: 61px !important;
    --black-key-w: 22px !important;
    --black-key-h: 38px !important;
  }

  /* Camera DJ publishes the guide's measured lower edge. Keys consumes that
     shared boundary, so copy changes cannot make the two windows overlap. */
  body.mode-keys.mode-dj:not(.home-open) .dock:not(.is-positioned),
  body.mode-keys.mode-dj:not(.home-open).records-open .dock:not(.is-positioned) {
    inset: var(--cam-guide-stack-top, 224px) 14px auto auto !important;
  }

  /* Floating performance windows never change the work-surface geometry. */
  html[data-canvas-type="disc"] body.mode-keys:not(.home-open) .turntable-plinth {
    z-index: 0 !important;
  }

  /* Text/photo Edit is the tall upper-right window. Stack Keys at upper-left
     without moving or resizing the CD underneath either floating window. */
  body.mode-keys.photo-inspector-open:not(.home-open) .dock:not(.is-positioned),
  body.mode-keys.mode-dj.photo-inspector-open:not(.home-open) .dock:not(.is-positioned) {
    inset: 72px auto auto 64px !important;
  }
}

/* Narrow desktop keeps its established horizontal lanes, but uses the same
   measured vertical stack as wide desktop. Dragged Keys windows are clamped
   against the live guide rectangle in app.js. */
@media (min-width: 761px) and (max-width: 1099px) {
  body.mode-keys.mode-dj:not(.home-open) #keysDock.dock:not(.is-positioned) {
    top: var(--cam-guide-stack-top, 224px) !important;
    bottom: auto !important;
  }
}

/* The work surface is the fixed visual anchor. Floating tools may overlap its
   quiet edge, but opening a tool must never move or resize the user's CD. */
@media (min-width: 1100px) {
  html[data-canvas-type="disc"] body:not(.home-open) .stage > .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) #board.board {
    width: var(--flowjam-disc-size) !important;
    translate: 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));
    width: var(--flowjam-plinth-size) !important;
    height: var(--flowjam-plinth-size) !important;
    translate: none !important;
  }
}

/* Desktop Canvas is the workspace itself. It deliberately has no visible
   edge, card, radius or shadow: users should be able to place work anywhere
   in the viewport without encountering a hidden 620px square boundary. The
   CD geometry above remains a separate, untouched authority. */
@media (min-width: 761px) {
  html[data-canvas-type="card"] body:not(.home-open) .stage > .board-wrap {
    position: fixed !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    display: grid !important;
    place-items: stretch !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: var(--studio-workspace-background) !important;
    box-shadow: none !important;
  }

  html[data-canvas-type="card"] body:not(.home-open) .stage > .board-wrap > #board.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;
    box-sizing: border-box !important;
    flex: none !important;
    overflow: hidden !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;
    background-color: var(--canvas-color) !important;
    background-image: none !important;
    box-shadow: none !important;
    transform: none !important;
    translate: none !important;
    isolation: isolate !important;
  }

  html[data-canvas-type="card"] body:not(.home-open) .stage > .board-wrap > #board.board::before,
  html[data-canvas-type="card"] body:not(.home-open) .stage > .board-wrap > #board.board::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
  }

html[data-canvas-type="card"] body.mode-dj.cam-mode-card:not(.home-open) .stage > .board-wrap > #board.board {
    background-color: transparent !important;
  }
}

/* Canvas colour samples read as paper, while CD keeps its optical-disc
   silhouette. Dimensions and label alignment remain shared. */
@media (min-width: 761px) {
  html[data-canvas-type="card"] body:not(.home-open) #archiveAppearance .appearance-reference-swatches .disc-swatch::before {
    box-sizing: border-box !important;
    border: 1px solid color-mix(in srgb, var(--studio-doodle-ink, #25533F) 18%, transparent) !important;
    border-radius: 12px 9px 13px 10px !important;
    background: var(--swatch) !important;
  }
  html[data-canvas-type="card"] body:not(.home-open) #archiveAppearance .appearance-reference-swatches > #appearancePaletteToggle.appearance-custom-trigger::before {
    box-sizing: border-box !important;
    border: 4px solid transparent !important;
    border-radius: 12px 9px 13px 10px !important;
    outline: 0 !important;
    background:
      linear-gradient(var(--studio-doodle-paper, #FFFDF8), var(--studio-doodle-paper, #FFFDF8)) padding-box,
      conic-gradient(#ef5b62, #f1a72c, #f0d64a, #69b878, #50afd2, #716fce, #c868bd, #ef5b62) border-box !important;
    box-shadow: none !important;
  }
}

/* Final authority: My Creations opens over the Studio and the persistent
   lower-right launcher remains the sole open/close control. */
@media (min-width: 761px) {
  html[data-canvas-type="disc"] body.records-open:not(.home-open) .stage > .board-wrap {
    inset: 58px 0 0 !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
    translate: none !important;
  }
  html[data-canvas-type="card"] body.records-open:not(.home-open) .stage > .board-wrap {
    inset: 0 !important;
  }
  html body.records-open:not(.home-open) #recordsDrawer.records-drawer-shell.open > #recordsRack.records-drawer {
    transform: none !important;
    transition: opacity .14s ease !important;
  }
}