/* The painting workspace is the desktop app, mirrored on the tablet. */
.demo-stage {
  --brush-color: #254553;
  --brush-hue: 199deg;
}

.tablet-mode {
  background: #087dff;
  border-color: #087dff;
  border-radius: 12px;
  color: #fff;
  font-weight: 650;
  padding: 3px 9px;
}

.tablet-mode::after { content: '⌄'; }
.tablet-mode .icon { color: #fff; }

.paint-workspace {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  background: #42464a;
  color: #d7dadd;
  font-family: Inter, sans-serif;
}

.paint-menu, .paint-document-bar {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  font-size: 1.45cqw;
}

.paint-menu {
  height: 4cqw;
  gap: 2.6cqw;
  padding-inline: 2cqw;
  background: #33373b;
}

.paint-document-bar {
  height: 4.2cqw;
  justify-content: space-between;
  padding: 0 2cqw 0 8cqw;
  border-top: 1px solid #4d5156;
  border-bottom: 1px solid #262b30;
  background: #3d4247;
  color: #c8cdd1;
}

.paint-document-bar span:last-child { color: #a0a8b0; font-size: 1.2cqw; }
.paint-content { display: grid; grid-template-columns: 7% minmax(0, 1fr) 22%; flex: 1; min-height: 0; }
.paint-viewport { position: relative; display: flex; align-items: center; padding: 3cqw 2cqw; min-width: 0; overflow: hidden; background: #656a70; }
.drawing-sheet { position: relative; aspect-ratio: 800 / 520; width: 100%; background: #efeee7; box-shadow: 0 2px 6px #0003; }
.drawing-sheet img, .drawing-sheet canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.art-ready .drawing-sheet img { visibility: hidden; }
.paint-workspace .paint-toolbar { position: static; display: flex; flex-direction: column; align-items: center; gap: 1cqw; padding: 2cqw .5cqw; border: 0; border-radius: 0; background: #34393e; }
.paint-toolbar .tool { width: 5.8cqw; height: 5.8cqw; border-radius: 2px; color: #dce0e2; }
.paint-toolbar .tool.active, .mirror-tools .icon.active { background: #647f97; }
.paint-toolbar .tool .icon { width: 3.3cqw; height: 3.3cqw; }
.paint-toolbar .tool:hover:not(:disabled) { background: #536778; }
.paint-toolbar .tool-rule { align-self: stretch; margin: .6cqw; background: #616972; }
.mirror-tools > .icon { width: 5.8cqw; height: 5.8cqw; padding: 1.2cqw; }
.paint-workspace .canvas-hint { left: 0; right: 0; bottom: 2.3cqw; text-align: center; color: #d1d4d5; font-size: 2cqw; }
.paint-dock { padding: 0 1.1cqw; border-left: 1px solid #262c32; background: #3b4147; min-width: 0; }
.dock-title { display: block; font-size: 1.28cqw; line-height: 1.5; padding: 1.5cqw 0; color: #c7cdd2; white-space: nowrap; }
.color-wheel { position: relative; width: 17.5cqw; aspect-ratio: 1; margin: 0 auto; border-radius: 50%; background: conic-gradient(#e64a45, #ead34c, #59c757, #4acece, #557de8, #bd55d7, #e64a45); box-shadow: 0 0 0 1px #232a30; }
#brush-wheel { touch-action: none; cursor: crosshair; }
.color-wheel::before { content: ''; position: absolute; inset: 16%; border-radius: 50%; background: #3b4147; }
.color-field { position: absolute; inset: 27%; background: linear-gradient(0deg, #000, transparent), linear-gradient(90deg, #fff, transparent), hsl(var(--brush-hue) 70% 50%); }
.color-field::after { content: ''; position: absolute; top: 54%; left: 62%; width: 1.2cqw; height: 1.2cqw; border: .25cqw solid #e0e3e4; border-radius: 50%; box-shadow: 0 0 0 .15cqw #26323a; }
.hue-marker { position: absolute; inset: 0; transform: rotate(var(--brush-hue)); pointer-events: none; }
.hue-marker::after { content: ''; position: absolute; top: 2%; left: 44%; width: 12%; height: 12%; border-radius: 50%; border: .3cqw solid #fff; box-shadow: 0 0 0 .2cqw #26323a; }
.foreground-color { display: flex; align-items: center; gap: 1.2cqw; margin: 2cqw 0; font-size: 1.3cqw; color: #b2bac1; }
.foreground-color i { width: 3.3cqw; height: 2.5cqw; background: var(--brush-color); border: 1px solid #97a2aa; }
.layers-title, .presets-title { border-top: 1px solid #626870; padding-block: 1cqw; }
.paint-layer { display: flex; align-items: center; gap: 1cqw; padding: 1cqw .7cqw; font-size: 1.25cqw; color: #c9cfd4; }
.paint-layer.selected { background: #546d83; }
.paint-layer > i { width: 3cqw; height: 2.3cqw; border: 1px solid #a4a9a7; flex-shrink: 0; }
.art-layer { background: linear-gradient(140deg, #eeede6 40%, #254553 42% 70%, #eeede6 72%); }
.paper-layer { background: #efeee7; }
.presets-title { margin-top: 1.8cqw; }
.brush-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6cqw; }
.brush-presets i { aspect-ratio: 1; background: #d2d5d4; position: relative; }
.brush-presets i::after { content: ''; position: absolute; inset: 42% 13%; background: #374954; transform: rotate(-35deg); border-radius: 50%; }
.brush-presets i:nth-child(2)::after { inset-block: 30%; }
.brush-presets i:nth-child(3)::after { border-radius: 0; inset-block: 34%; }
.brush-presets i:nth-child(4)::after { opacity: .4; filter: blur(.3cqw); }

/* One material and lighting model continues through the Pencil's nib. */
.pencil-object {
  --pencil-material: linear-gradient(90deg, #c9cec3, #fffef4 45%, #eceee2 70%, #c7cec0);
  background: var(--pencil-material);
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
}

.pencil-object::after {
  left: -1px;
  right: -1px;
  background: var(--pencil-material);
  clip-path: polygon(0 0, 100% 0, 60% 91%, 50% 100%, 40% 91%);
}

/* A viewport-clipped cursor lets the nib sit precisely at the mouse position,
   without the full-size stylus creating horizontal page overflow. */
.pencil-cursor { position: fixed; inset: 0; z-index: 90; pointer-events: none; overflow: clip; }
.pencil-cursor .pencil-object { position: absolute; left: var(--cursor-x); top: var(--cursor-y); right: auto; bottom: auto; width: 11px; height: 175px; transform-origin: 50% calc(100% + 17px); transform: translate(-50%, calc(-100% - 17px)) rotate(23deg); box-shadow: 5px 7px 5px #28372e24; }
.pencil-cursor .pencil-object::after { height: 17px; bottom: -17px; }
.pencil-following > .pencil-object { visibility: hidden; }
.pencil-following .tablet, .pencil-following #draw-canvas { cursor: none; }
.cursor-eraser { display: none; position: absolute; left: var(--cursor-x); top: var(--cursor-y); width: 25px; height: 34px; transform: translate(-50%, -50%) rotate(25deg); border: 1px solid #bebcaf; border-radius: 5px; background: linear-gradient(90deg, #cdcbc1, #f3f1e7 55%, #e2dfd2); box-shadow: 4px 5px 5px #28372e25; }
.pencil-cursor[data-tool=eraser] .pencil-object { display: none; }
.pencil-cursor[data-tool=eraser] .cursor-eraser { display: block; }

/* The whole phone moves, pivoting at the wrist, rather than a finger moving
   over a touch surface. The monitor remains completely visible. */
.demo-stage[data-mode=pointer] .computer { width: 48%; }
.demo-stage[data-mode=pointer] .computer-label { top: 270px; }
.phone-rig { position: absolute; bottom: 59px; left: 0; width: 49%; height: 340px; perspective: 750px; touch-action: none; cursor: move; }
.motion-arcs { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #a7afa2; stroke-width: 1; stroke-dasharray: 3 5; }
.phone-pivot { position: absolute; top: 18px; left: calc(50% - 83px); width: 166px; height: 285px; transform-origin: 50% 50%; transition: transform .12s ease-out; transform-style: preserve-3d; }
.pointer-phone { position: relative; margin: 0 auto; width: 137px; height: 270px; padding: 15px 7px 9px; border: 1px solid #77817a; border-radius: 23px; background: #293134; box-shadow: 0 0 0 2px #bcc3b7, 6px 12px 17px -9px #21392e66; }
.phone-speaker { position: absolute; top: 6px; left: 44%; width: 12%; height: 3px; border-radius: 2px; background: #111d21; }
.phone-screen { height: 100%; border-radius: 10px 10px 15px 15px; background: #172428; padding: 10px 7px 12px; display: flex; flex-direction: column; align-items: center; color: #e9ece7; position: relative; }
.phone-connection { align-self: flex-start; font-size: 5px; display: flex; align-items: center; gap: 4px; color: #bbc9c2; }
.phone-connection i { width: 3px; height: 3px; border-radius: 50%; background: #8fac99; }
.phone-mode-title { align-self: flex-end; margin-top: 7px; background: #087dff; color: #fff; border-radius: 9px; font-size: 7px; padding: 3px 9px; font-weight: 600; }
.phone-screen .pointer-buttons { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr .4fr; flex: 1; min-height: 0; width: 100%; gap: 5px; margin-top: 18px; }
.phone-screen .pointer-buttons button { background: #435960; border-color: #687d81; color: #eef2ed; border-radius: 4px; font-size: 6px; padding: 10px 2px; box-shadow: 0 2px 0 #0f1c20; }
.phone-screen .pointer-buttons button:last-child { grid-column: 1 / -1; padding: 5px; }
.phone-screen .modifier-buttons { width: 100%; gap: 3px; margin-top: 8px; }
.phone-screen .modifier-buttons button { font-size: 5px; background: #30464e; color: #c8d7d5; border-radius: 2px; padding: 5px 0; }
.phone-screen .modifier-buttons button[aria-pressed=true] { background: #087dff; color: #fff; }
.phone-home { position: absolute; bottom: 5px; left: 35%; right: 35%; height: 2px; border-radius: 2px; background: #a4b5b2; }
.phone-instruction { position: absolute; bottom: -22px; left: 0; right: 0; font: italic 12px Georgia, serif; color: #6c756d; text-align: center; }
.demo-stage[data-mode=pointer] .tablet-label { display: none; }
#turn-phone { margin-left: auto; }
.connection-section { margin-top: 86px; }

@container (max-width: 330px) {
  .abxy { justify-self: end; }
}

@media (max-width: 1000px) {
  .demo-stage[data-mode=pointer] .computer-label { top: 255px; }
}

@media (max-width: 650px) {
  .game-controls { gap: 12px; top: 43px; bottom: 22px; }
  .analog-pad, .abxy { width: 84px; height: 84px; scale: 1; flex-basis: auto; margin: 0; }
  .abxy { justify-self: end; }
  .shoulder-buttons button { width: 28px; height: 28px; padding: 0; font-size: 9px; }
  .tablet-mode { padding: 2px 6px; }
  .paint-content { grid-template-columns: 11% minmax(0, 1fr) 23%; }
  .paint-workspace .paint-toolbar { padding: 2cqw .5cqw; gap: 2px; }
  .paint-toolbar .tool { width: 24px; height: 24px; max-width: 100%; }
  .paint-toolbar .tool .icon { width: 12px; height: 12px; }
  .paint-workspace .canvas-hint { font-size: 2.25cqw; bottom: 2cqw; }
  .paint-menu { height: 4.5cqw; }
  .paint-document-bar { height: 5cqw; }
  .pencil-cursor .pencil-object { height: 145px; }
  .demo-stage[data-mode=pointer] { height: 515px; }
  .demo-stage[data-mode=pointer] .computer { width: 60%; max-width: 310px; }
  .demo-stage[data-mode=pointer] .computer-label { top: calc((100vw - 46px) * .47 + 5px); }
  .phone-rig { width: 68%; height: 305px; bottom: 59px; left: 0; }
  .phone-pivot { top: 10px; width: 150px; left: calc(50% - 75px); height: 255px; }
  .pointer-phone { width: 124px; height: 246px; padding-top: 14px; }
    .phone-screen .pointer-buttons { margin-top: 16px; }
  .phone-instruction { bottom: -23px; font-size: 11px; }
  .phone-screen .pointer-buttons button { padding-block: 8px; }
  .phone-screen .pointer-buttons button:last-child { padding-block: 4px; }
  .phone-screen .modifier-buttons { margin-top: 6px; }
  .connection-section { margin-top: 36px; }
}

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