.home-page .landing .studio-scene { padding-top: 0; --art-top: 0px; }
.home-page .studio-scene:not(.has-camera) .studio-image,
.home-page .studio-scene:not(.has-camera) .spotlight-image {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
}
.desk-play-layer {
  position: absolute;
  left: var(--art-left);
  top: var(--art-top);
  width: var(--art-width);
  height: var(--art-height);
  max-width: none;
  pointer-events: none;
}
.desk-play-layer { z-index: 1; }
.desk-play-layer > svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: hidden; pointer-events: none; }
.home-page .studio-scene .studio-spotlight { display: none; }
.home-page .studio-scene .studio-image,
.home-page .studio-scene.has-spotlight:not(.has-note) .studio-image,
.home-page .studio-scene.has-note .studio-image { filter: none; }
.home-page .studio-scene.has-spotlight:not(.has-note) .scene-surround { filter: none; }
.desk-focus-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: #000a;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  mask-image: radial-gradient(circle at var(--spot-x) var(--spot-y), transparent calc(var(--spot-radius) - 2px), #000 calc(var(--spot-radius) + 2px));
  transition: opacity .2s ease;
}
.has-note .desk-focus-veil { opacity: 1; }
.home-page .studio-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle 48px at var(--spot-x) var(--spot-y), #ffecc52b, #ffdb9912 48%, transparent 100%);
  transition: opacity .2s ease;
}
.home-page .studio-scene.has-spotlight::after { opacity: 1; }
.desk-coastal-map { position: absolute; width: 1376px; height: 768px; transform: scale(var(--art-scale, 1)); transform-origin: 0 0; pointer-events: none; }
.desk-coastal-surface { position: absolute; left: 0; top: 0; width: 560px; height: 840px; max-width: none; transform-origin: 0 0; overflow: hidden; pointer-events: none; }
.coast-sketch { transition: opacity 1s; }
.coast-sketch.is-painted { opacity: .12; }
.coast-wave { animation: coast-surf 6.8s ease-in-out infinite; }
.coast-wave-1 { animation-duration: 8.3s; }
.coast-wave-2 { animation-duration: 9.5s; }
.coast-motion-palms, .coast-motion-trunks { transform-origin: 490px 420px; animation: coast-palms 9s ease-in-out infinite; }
.coast-motion-boats { transform-origin: 130px 420px; animation: coast-boats 8s ease-in-out infinite; }
@keyframes coast-surf { 0%, 100% { transform: translateX(-1px); opacity: .22; } 45% { transform: translateX(2.4px); opacity: .76; } 75% { transform: translateX(3px); opacity: .12; } }
@keyframes coast-palms { 0%, 100% { transform: skewX(-.35deg); } 50% { transform: skewX(.45deg); } }
@keyframes coast-boats { 0%, 100% { transform: translateY(-.5px) rotate(-.14deg); } 50% { transform: translateY(.8px) rotate(.18deg); } }
.desk-easel-target, .desk-paint-region { pointer-events: all; cursor: url("assets/brush-cursor.svg") 3 29, crosshair; }
.desk-paint-region { fill: transparent; outline: none; }
.desk-paint-region:focus-visible { stroke: #c97737; stroke-width: 3; stroke-dasharray: 8 5; }
.desk-ghost-target { fill: transparent; pointer-events: all; cursor: pointer; outline: none; }
.desk-ghost-target:focus-visible { stroke: #c5d7ed; stroke-width: 2; stroke-dasharray: 7 5; }
.has-note .desk-play-layer [data-desk-interactive] { pointer-events: none; }
.desk-ghost-art { filter: none; }
.desk-ghost-reaction { opacity: 0; transition: opacity .2s; pointer-events: none; }
.desk-ghost-art.is-awake .desk-ghost-reaction { opacity: 1; }
.desk-ghost-chest { transform-origin: 1120px 658px; }
.desk-ghost-tail { transform-origin: 1301px 689px; }
.desk-ghost-snout { transform-origin: 1084px 589px; }
.desk-ghost-ear { transform-origin: 1140px 536px; }
.desk-ghost-forepaw { transform-origin: 1144px 666px; }
.desk-ghost-head { transform-origin: 1110px 614px; }
.desk-ghost-art.is-awake .desk-ghost-chest { animation: desk-ghost-breathe 3.2s ease-in-out infinite; }
.desk-ghost-art:is([data-reaction="tail"], [data-reaction="greeting"]) .desk-ghost-tail { animation: desk-ghost-tail 2.4s ease-in-out; }
.desk-ghost-lid { transform-box: fill-box; transform-origin: center top; transform: scaleY(0); }
.desk-ghost-art:is([data-reaction="blink"], [data-reaction="greeting"]) .desk-ghost-lid { animation: desk-ghost-blink 2s ease-in-out; }
.desk-ghost-art[data-reaction="greeting"] .desk-ghost-head { animation: desk-ghost-hello 2.4s ease-in-out; }
.desk-ghost-art[data-reaction="greeting"] .desk-ghost-ear { animation: desk-ghost-ear 1.7s ease-in-out; }
.desk-ghost-art[data-reaction="scrunch"] .desk-ghost-snout { animation: desk-ghost-scrunch 1.7s ease-in-out; }
.desk-ghost-wrinkle { opacity: 0; }
.desk-ghost-art[data-reaction="scrunch"] .desk-ghost-wrinkle { animation: desk-ghost-wrinkle 1.7s ease-in-out; }
.desk-ghost-art[data-reaction="ear"] .desk-ghost-ear { animation: desk-ghost-ear 1.7s ease-in-out; }
.desk-ghost-art[data-reaction="posture"] .desk-ghost-forepaw { animation: desk-ghost-settle 2.7s ease-in-out; }
.desk-ghost-art[data-reaction="posture"] .desk-ghost-chest { animation: desk-ghost-shift 2.7s ease-in-out; }
@keyframes desk-ghost-breathe { 50% { transform: scale(1.012, 1.02); } }
@keyframes desk-ghost-tail { 30% { transform: rotate(2.6deg); } 65% { transform: rotate(-1.8deg); } }
@keyframes desk-ghost-blink { 0%, 12%, 30%, 100% { transform: scaleY(0); } 19%, 24% { transform: scaleY(1); } }
@keyframes desk-ghost-hello { 28%, 55% { transform: rotate(1.6deg) translate(-.8px, -.4px); } }
@keyframes desk-ghost-scrunch { 25%, 42% { transform: translate(-1.5px, -1.1px) scale(.985, .94); } 65% { transform: translate(.5px, 0) scale(1, .98); } }
@keyframes desk-ghost-wrinkle { 25%, 42% { opacity: .6; } 70% { opacity: 0; } }
@keyframes desk-ghost-ear { 30% { transform: rotate(-3.2deg); } 50% { transform: rotate(1deg); } }
@keyframes desk-ghost-settle { 45%, 70% { transform: translate(3px, 1.6px) rotate(.8deg); } }
@keyframes desk-ghost-shift { 45%, 70% { transform: translate(1.2px, 1.8px) scale(1.014, .994); } }

.cursor-brush { display: none; position: absolute; left: -3px; top: -29px; width: 32px; height: 32px; max-width: none; }
.has-brush-cursor .cursor-brush { display: block; }
.has-brush-cursor .cursor-dot, .has-brush-cursor .cursor-trail, .has-brush-cursor .cursor-caption { display: none; }
.has-paint-cursor .desk-play-layer [data-desk-interactive] { cursor: none; }

.home-page .studio-scene .studio-note.has-source-notes {
  width: max-content;
  padding: 16px 18px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  text-shadow: 0 1px 6px #10141bf2, 0 0 18px #1119;
}
.home-page .studio-scene .studio-note:focus-visible { outline: none; }
.source-notes { display: grid; justify-items: start; gap: 24px; padding: 4px 0; }
[data-arrow-side="right"] .source-notes { justify-items: end; }
.source-note {
  width: fit-content;
  max-width: 100%;
  margin: 0;
  color: #fff9f0;
  font: 29px/1.3 var(--hand);
  text-transform: none;
  white-space: pre-line;
  transform: rotate(-2deg);
  transform-origin: center;
  overflow-wrap: anywhere;
}
.source-note:nth-child(even) { transform: rotate(-1deg); }
.source-initialism { font-family: var(--sans); font-size: .68em; font-weight: 400; letter-spacing: 0; }
.source-underline { text-decoration: underline double; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.source-heart { display: inline-block; vertical-align: middle; width: 30px; height: 28px; margin-left: 12px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.source-note-arrow { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.home-page .studio-scene:has(.has-source-notes) .story-connector { color: #fff9f0; }
@media (max-width: 699px), (max-height: 600px) {
  .source-note { font-size: 25px; line-height: 1.3; }
  .source-notes { gap: 24px; }
}
html[data-motion="off"] .desk-ghost-reaction,
html[data-motion="off"] .desk-ghost-reaction * { animation: none !important; transition: none; }
.desk-art-paused .coast-wave, .desk-art-paused .coast-motion-palms, .desk-art-paused .coast-motion-trunks, .desk-art-paused .coast-motion-boats { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .desk-ghost-reaction, .desk-ghost-reaction * { animation: none !important; transition: none; }
  .coast-wave, .coast-motion-palms, .coast-motion-trunks, .coast-motion-boats { animation: none !important; transition: none; }
  .home-page .studio-scene::after { transition: none; }
  .desk-focus-veil { transition: none; }
}
@media (prefers-reduced-transparency: reduce) { .desk-focus-veil { -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (forced-colors: active) {
  .source-note { color: CanvasText; text-shadow: none; }
  .home-page .studio-scene .studio-note.has-source-notes { background: Canvas; }
  .source-note-arrow { stroke: CanvasText; }
  .desk-paint-region:focus-visible, .desk-ghost-target:focus-visible { stroke: Highlight; }
}
@media print { .desk-play-layer { display: none; } }