/* Upper violet glow falls into a continuous black canvas and group shelf. */
.canvas-screen {
  --canvas-preview-height:410px;
  --canvas-editor-height:618px;
  --group-height:104px;
  padding:0 0 44px;
  background:#000;
}
.app[data-screen=canvas] {background:#000;color:#f5f1f8;}
.app[data-screen=canvas] .status-bar {color:#fafafa;transition:background 180ms;}
.app[data-screen=canvas].canvas-scrolled .status-bar {background:#17001de6;backdrop-filter:blur(12px);}
.app[data-screen=canvas] .home-indicator {background:#e7dfed;mix-blend-mode:normal;}
.canvas-sheet {
  --canvas-control-fill:#cdb4ef20;
  --canvas-control-hover:#cdb4ef38;
  --canvas-control-hover-overlay:#cdb4ef1b;
  --canvas-control-ink:#f8f5fc;
  --canvas-control-rim:#ffffff08;
  --canvas-control-blur:14px;
  position:relative;
  padding:48px 16px 38px;
  border-radius:0;
  background:
    radial-gradient(ellipse 100% 34% at 76% 23%,#8500a124 0%,#8500a100 78%),
    linear-gradient(180deg,#39004b 0%,#48005e 17%,#52006b 29%,#340044 39%,#120018 48%,#030004 59%,#000 70%);
  box-shadow:none;
}
.canvas-sheet::after {
  content:"";position:absolute;inset:auto 0 0;height:64px;
  background:linear-gradient(180deg,#0000,#0008 60%,#000);
  pointer-events:none;
}
.canvas-sheet .canvas-header {
  position:absolute;top:48px;left:18px;right:18px;z-index:5;
  height:44px;margin:0;gap:8px;pointer-events:none;
}
.canvas-sheet .canvas-header>.icon-button {
  width:38px;height:38px;flex:none;pointer-events:auto;
  color:var(--canvas-control-ink);background:var(--canvas-control-fill);-webkit-backdrop-filter:blur(var(--canvas-control-blur));backdrop-filter:blur(var(--canvas-control-blur));
  box-shadow:inset 0 1px var(--canvas-control-rim);
}
.canvas-sheet .canvas-header>.canvas-back {border-radius:50%;}
.canvas-sheet .canvas-header>.icon-button:hover {background:var(--canvas-control-hover);}
.canvas-sheet .canvas-header>.icon-button .icon {width:21px;height:21px;}
.canvas-sheet .canvas-header [data-action=project-menu] circle {fill:currentColor;stroke:none;}
.canvas-sheet .idea-board {
  height:var(--canvas-preview-height);border:0;border-radius:0;background:transparent;
}
.canvas-sheet .idea-board.is-expanded {height:var(--canvas-editor-height);}
.canvas-sheet .floating-canvas {background:transparent;}
.canvas-sheet :is(.canvas-board-title,.canvas-rosette,.floating-photo-caption,.object-label,.record-caption,.record-foot,.paper-tape),
.canvas-sheet .voice-value small,.canvas-sheet .card-note>small {display:none;}
.canvas-sheet .floating-card {box-shadow:0 4px 9px #0002,0 16px 23px -12px #0007;}
.canvas-sheet .card-object img {filter:drop-shadow(0 9px 12px #0007);}
.canvas-sheet .card-record {background:linear-gradient(145deg,#fafafa,#dfe1de);border-color:#fbfbfb;}
.canvas-sheet .canvas-record {filter:grayscale(1);}
.canvas-sheet .voice-on {border-radius:16px;}
.canvas-sheet .rhythm-value small {color:#555820;}
.canvas-sheet :is(.board-preview,.floating-card,button):focus-visible {outline:2px solid #d5b8f0;outline-offset:3px;}

/* A compact moon-and-name label replaces the oversized identity block. */
.canvas-identity {position:relative;z-index:2;margin-top:-20px;padding:0 22px;pointer-events:none;}
.canvas-identity-row {display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;pointer-events:auto;}
.canvas-group-info {min-width:0;flex:1;}
.canvas-group-info h1 {display:flex;align-items:center;gap:7px;min-width:0;margin:0;font-size:13px;line-height:20px;letter-spacing:0;font-weight:600;color:#cb39ef;text-shadow:0 0 10px #c82deb30;}
.canvas-group-info h1 .icon {width:17px;height:17px;flex:none;filter:drop-shadow(0 0 4px #c82deb30);}
.canvas-group-info h1 span {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.canvas-explore {
  flex:none;display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 15px;border-radius:999px;
  color:#eadcf5;background:linear-gradient(135deg,#261c30,#18111f);
  box-shadow:inset 0 0 0 1px #c6a4e54d,0 7px 15px #0004;font-size:11px;white-space:nowrap;
}
.canvas-explore .icon {width:17px;height:17px;stroke-width:1.7;}
.canvas-explore:hover {background:#30223d;box-shadow:inset 0 0 0 1px #d1b1e67a,0 7px 17px #0005;}
.canvas-explore:active {transform:scale(.98);}
.canvas-identity button:focus-visible,.canvas-groups button:focus-visible {outline:2px solid #c8a2e3;outline-offset:3px;}
.canvas-groups {padding:20px 20px 12px;}
.canvas-groups .group-heading {height:28px;margin-top:0;font-size:11px;letter-spacing:.2px;color:#a99bb4;}
.canvas-groups .group-sort {min-height:44px;gap:6px;font-size:11px;color:#c9bdd4;}
.canvas-groups .group-sort svg {width:17px;height:17px;}
.canvas-groups .groups-grid {grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px;}
.canvas-groups :is(.group-tile,.group-placeholder,.group-new) {
  width:100%;height:var(--group-height);border-radius:999px;background:linear-gradient(145deg,#1b1521,#100d14);box-shadow:inset 0 0 0 1px #bca4ce18;
}
.canvas-groups .group-label {top:27px;left:4px;right:4px;padding:4px 0;font-size:12px;line-height:17px;}
.canvas-groups .group-tile {color:#d8cddf;}
.canvas-groups .group-placeholder {background:#0d0a10;box-shadow:inset 0 0 0 1px #bca4ce0c;}
.canvas-groups .group-tile.selected {
  background:radial-gradient(ellipse at 30% 14%,#463155,#291d33 83%);color:#fbf5ff;
  box-shadow:inset 0 0 0 1px #d2b4e2,0 0 18px #ba80e00d;
}
.canvas-groups .group-tile.selected::before {content:"";position:absolute;top:14px;left:calc(50% - 3.5px);width:7px;height:7px;border-radius:50%;background:#eadbfd;pointer-events:none;}
.canvas-groups .group-tile.drop-over {box-shadow:0 0 0 2px #d4acef;}
.canvas-groups .group-grip {bottom:7px;color:#93839e;}
.canvas-groups .group-grip .six-dots {color:inherit;}
.canvas-groups .group-tile.selected .group-grip {color:#d4b4e9;}
.canvas-groups .group-new {padding:8px 4px;}
.canvas-groups .group-new>span {width:37px;height:37px;background:linear-gradient(145deg,#d3b4e8,#b68fcc);color:#271a32;}
.canvas-groups .group-new svg {width:26px;height:26px;stroke-width:1.8;}

/* Editing controls stay legible on the dark canvas; material contents keep their colors. */
/* A connected quarter-circle of actions wraps below and to the right of Back. */
/* One alpha-composited glass surface avoids dark/bright seams at the joins. */
.canvas-action-surface {
  --canvas-action-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20110%20110%22%20fill%3D%22white%22%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2286%22%20r%3D%2222%22%2F%3E%3Cpath%20d%3D%22M32.419%2C65.675C40.734%2C69.119%2044.070%2C67.736%2047.515%2C59.421L59.421%2C88.165C51.106%2C84.721%2047.770%2C86.104%2044.325%2C94.419Z%22%2F%3E%3Ccircle%20cx%3D%2267.84%22%20cy%3D%2267.84%22%20r%3D%2222%22%2F%3E%3C%2Fsvg%3E");
  position:absolute;top:0;left:0;width:110px;height:110px;z-index:35;pointer-events:none;
  background:var(--canvas-control-fill);
  -webkit-backdrop-filter:blur(var(--canvas-control-blur));backdrop-filter:blur(var(--canvas-control-blur));
  -webkit-mask-image:var(--canvas-action-mask);mask-image:var(--canvas-action-mask);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.has-canvas-audition .canvas-action-surface {--canvas-action-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20110%20110%22%20fill%3D%22white%22%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2286%22%20r%3D%2222%22%2F%3E%3Cpath%20d%3D%22M32.419%2C65.675C40.734%2C69.119%2044.070%2C67.736%2047.515%2C59.421L59.421%2C88.165C51.106%2C84.721%2047.770%2C86.104%2044.325%2C94.419Z%22%2F%3E%3Ccircle%20cx%3D%2267.84%22%20cy%3D%2267.84%22%20r%3D%2222%22%2F%3E%3Cpath%20d%3D%22M59.421%2C47.515C67.736%2C44.070%2069.119%2C40.734%2065.675%2C32.419L94.419%2C44.325C86.104%2C47.770%2084.721%2C51.106%2088.165%2C59.421Z%22%2F%3E%3Ccircle%20cx%3D%2286%22%20cy%3D%2224%22%20r%3D%2222%22%2F%3E%3C%2Fsvg%3E");}
.idea-board:has(.canvas-story-toggle[hidden]) .canvas-action-surface,
.idea-board:has(.canvas-story-host[hidden]) .canvas-action-surface {--canvas-action-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20110%20110%22%20fill%3D%22white%22%3E%3Ccircle%20cx%3D%2267.84%22%20cy%3D%2267.84%22%20r%3D%2222%22%2F%3E%3C%2Fsvg%3E");}
.idea-board.has-canvas-audition:has(.canvas-story-toggle[hidden]) .canvas-action-surface,
.idea-board.has-canvas-audition:has(.canvas-story-host[hidden]) .canvas-action-surface {--canvas-action-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20110%20110%22%20fill%3D%22white%22%3E%3Ccircle%20cx%3D%2267.84%22%20cy%3D%2267.84%22%20r%3D%2222%22%2F%3E%3Cpath%20d%3D%22M59.421%2C47.515C67.736%2C44.070%2069.119%2C40.734%2065.675%2C32.419L94.419%2C44.325C86.104%2C47.770%2084.721%2C51.106%2088.165%2C59.421Z%22%2F%3E%3Ccircle%20cx%3D%2286%22%20cy%3D%2224%22%20r%3D%2222%22%2F%3E%3C%2Fsvg%3E");}
.canvas-action-surface::before {
  content:"";position:absolute;inset:0;background:var(--canvas-control-rim);
  -webkit-mask-image:var(--canvas-action-mask),var(--canvas-action-mask);mask-image:var(--canvas-action-mask),var(--canvas-action-mask);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:0 0,0 1px;mask-position:0 0,0 1px;
  -webkit-mask-composite:source-out;mask-composite:subtract;
}
.canvas-sheet .canvas-top-action {
  position:absolute;bottom:auto;z-index:36;
  display:grid;place-items:center;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;
  border:0;border-radius:50%;background:transparent;backdrop-filter:none;color:var(--canvas-control-ink);
  box-shadow:none;pointer-events:auto;
  transition:background 140ms ease;
}
.canvas-sheet .canvas-top-action svg {width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.canvas-sheet .canvas-story-toggle {left:2px;top:64px;}
.canvas-sheet .canvas-done {left:45.84px;top:45.84px;right:auto;}
.canvas-sheet .canvas-listen-trigger {left:64px;top:2px;}
.canvas-sheet .canvas-top-action:hover,.canvas-sheet .canvas-top-action[aria-expanded=true] {background:var(--canvas-control-hover-overlay);}
.canvas-sheet .canvas-top-action:active {background:var(--canvas-control-hover-overlay);transform:scale(.95);}
.canvas-sheet .canvas-top-action:focus-visible {outline:2px solid #d5b8f0;outline-offset:3px;}
@media(prefers-reduced-motion:reduce){.canvas-sheet .canvas-top-action{transition:none;}}
.canvas-sheet .canvas-dock button {color:#cebddf;}
.canvas-sheet .canvas-dock>button svg {width:20px;height:20px;stroke-width:1.65;}
.canvas-sheet .canvas-add-control {width:90px;height:30px;border-radius:18px;border-color:#cdb4ef26;background-color:#cdb4ef14;box-shadow:inset 0 1px #ffffff08,0 3px 12px #0003;}
.canvas-sheet .canvas-add-control:not(.is-open):hover {background-color:#cdb4ef24;border-color:#cdb4ef40;}
.canvas-sheet .canvas-dock .canvas-add:hover {background:transparent;}
.canvas-sheet .canvas-add-control.is-open {width:292px;height:50px;border-radius:26px;background-color:#f5f2f9ed;border-color:#fff9;}
.canvas-sheet .canvas-dock .canvas-add svg {width:18px;height:18px;color:#cebddf;}
.canvas-sheet .canvas-focus-actions button {color:#eee2fb;}
.canvas-sheet .canvas-focus-actions button::before {border-color:#cdb4ef50;background:#cdb4ef18;box-shadow:inset 0 1px #ffffff12;}
.canvas-sheet .canvas-dock .canvas-add-options button {color:#372c44;background:#372c4409;}
.canvas-sheet .canvas-dock .canvas-add-options .canvas-add-primary {background:#e6ddf0;}
.canvas-sheet .canvas-dock .canvas-add-options .canvas-add-close {background:transparent;}
.canvas-sheet .canvas-dock .canvas-add-options button:hover {background:#dccfe9;}