:root {
  color-scheme: dark;
  --bg: #000;
  --panel: #000;
  --raised: #111512;
  --line: #252b27;
  --line-strong: #3b433e;
  --ink: #eef2ef;
  --muted: #9ca69f;
  --lime: #7eea1e;
  --hover: #a1ff4f;
  font-family: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); }
[hidden] { display: none !important; }
button, input, summary { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; touch-action: manipulation; }
button, summary, input, canvas, .notes-window { outline-offset: 4px; }
:focus-visible { outline: 2px solid var(--ink); }
button {
  min-height: 44px;
  padding: .8rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: .86rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .035em;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
button:not(:disabled):hover { border-color: var(--lime); background: rgb(126 234 30 / .08); }
button:disabled { opacity: .4; cursor: default; }
button[aria-pressed="true"] { border-color: var(--lime); background: var(--lime); color: #031006; }
button[aria-pressed="true"]:hover { background: var(--hover); }
.demo-panel { padding: clamp(20px, 3vw, 40px); border: 1px solid var(--line-strong); border-radius: 12px; background: var(--panel); }
.demo-heading { margin-bottom: 24px; }
.stage-caption {
  font-family: "Cascadia Mono", Consolas, monospace;
  font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
h1 { margin: 0; font-family: "Arial Rounded MT Bold", "Trebuchet MS", "Segoe UI", sans-serif; font-size: clamp(1.8rem, 3.3vw, 2.6rem); line-height: 1.08; font-weight: 700; text-transform: uppercase; }
.studio-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); align-items: center; }
.product-zone, .notes-zone { min-width: 0; }
.viewer-top { display: flex; justify-content: center; margin-bottom: 4px; }
.segmented { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--raised); }
.segmented button { border-color: transparent; padding: .65rem .9rem; font-size: .8rem; letter-spacing: 0; }
#stage { position: relative; height: clamp(340px, 37vw, 470px); overflow: hidden; isolation: isolate; }
#puck-canvas { display: block; width: 100%; height: 100%; position: relative; z-index: 1; touch-action: none; cursor: ew-resize; }
#puck-canvas.exploring { cursor: grab; }
#puck-canvas:active { cursor: grabbing; }
body:not([data-interaction="active"]) #puck-canvas { pointer-events: none; touch-action: pan-y pinch-zoom; cursor: default; }
.stage-orbit { position: absolute; inset: 53% 11% 9%; border: 1px solid rgb(126 234 30 / .1); border-radius: 50%; transform: rotate(-12deg); pointer-events: none; }
.stage-caption { position: absolute; bottom: 8px; inset-inline: 8px; text-align: center; font-size: .6rem; color: var(--muted); pointer-events: none; z-index: 2; }
.reset-view { position: absolute; right: 8px; bottom: 32px; z-index: 3; min-height: 44px; padding: .5rem .75rem; font-size: .75rem; color: var(--muted); letter-spacing: 0; }
.wheel-controls { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 24px); margin-top: 20px; }
.wheel-controls > div { text-align: center; min-width: 0; }
.wheel-controls strong { display: block; font-size: 1rem; font-weight: 600; }
.wheel-controls span { display: block; color: var(--muted); font-size: .86rem; line-height: 1.5; margin-top: 5px; }
.round-control { display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; padding: 0; border-color: var(--lime); background: rgb(126 234 30 / .1); color: var(--lime); }
.wheel-controls .round-control__symbol { display: block; position: relative; width: 16px; height: 16px; margin: 0; color: inherit; font-size: 0; line-height: 0; }
.round-control__symbol::before { content: ''; position: absolute; inset-inline: 0; top: 50%; height: 2px; transform: translateY(-50%); background: currentColor; }
.round-control__symbol--plus::after { content: ''; position: absolute; inset-block: 0; left: 50%; width: 2px; transform: translateX(-50%); background: currentColor; }
.round-control:hover { background: var(--lime) !important; color: #031006; }
.notes-monitor { border: 0; border-radius: 0; background: #191919; overflow: hidden; }
.notes-window { height: clamp(380px, 40vw, 500px); padding: 20px 20px 24px; overflow-y: hidden; pointer-events: none; overscroll-behavior: auto; font-size: var(--notes-font-size, clamp(1.2rem, 2.2vw, 1.75rem)); }
.notes-window p { margin: 0 0 .65em; font-family: "Segoe UI", Arial, sans-serif; font-size: inherit; font-weight: 400; line-height: 1.35; color: #b3b3b3; }
.notes-window::-webkit-scrollbar { width: 12px; }
.notes-window::-webkit-scrollbar-track { background: #131313; }
.notes-window::-webkit-scrollbar-thumb { border: 3px solid #131313; border-radius: 999px; background: #aaa; }
.notes-font-controls { display: flex; gap: 8px; padding: 4px 12px; background: #191919; }
.notes-font-controls button { display: grid; place-items: center; min-width: 48px; min-height: 44px; padding: 0; border: 0; border-radius: 3px; background: transparent; color: #ccc; font-weight: 400; }
.notes-font-controls button:not(:disabled):hover { border: 0; background: #303030; color: #eee; }
.notes-font-icon { position: relative; display: block; padding-right: 10px; font-family: "Segoe UI", Arial, sans-serif; font-size: 26px; font-weight: 400; line-height: 1; letter-spacing: 0; }
.notes-font-icon::after { content: ''; position: absolute; top: 4px; right: 0; width: 6px; height: 6px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; }
.notes-font-icon--increase::after { transform: rotate(-45deg); }
.notes-font-icon--decrease::after { transform: rotate(135deg); }
.studio-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.studio-actions button { color: var(--lime); border-color: var(--lime); background: rgb(126 234 30 / .1); font-size: .75rem; padding: .65rem .85rem; letter-spacing: .02em; }
.studio-actions button[aria-pressed="true"] { background: var(--lime); color: #031006; }
.studio-hint { font-size: .86rem; line-height: 1.65; color: var(--muted); margin: 12px 0; }
.notes-settings { margin-top: 14px; color: var(--muted); font-size: .86rem; }
summary { cursor: pointer; width: fit-content; min-height: 44px; padding-block: 12px; color: var(--lime); }
.control-line, .speed-control { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 12px; border-top: 1px solid var(--line); }
input[role="switch"] { appearance: none; flex: 0 0 44px; width: 44px; height: 28px; margin: 0; background: var(--line-strong); border-radius: 999px; position: relative; cursor: pointer; }
input[role="switch"]::before { content: ''; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); }
input[role="switch"]:checked { background: var(--lime); }
input[role="switch"]:checked::before { transform: translateX(16px); background: #031006; }
.demo-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); font-size: .75rem; line-height: 1.5; color: var(--muted); }
.demo-footer > div { display: flex; gap: 8px; margin-left: auto; }
.demo-footer button { min-height: 44px; font-size: .75rem; letter-spacing: 0; padding: .6rem .8rem; color: var(--muted); }
#loading { position: absolute; z-index: 3; inset-inline: 0; top: 45%; padding: 12px; text-align: center; color: var(--ink); font-size: .86rem; }
.loading-line { display: block; height: 2px; width: 80px; background: var(--lime); margin: 18px auto; animation: load 1.1s ease-in-out infinite alternate; }
@keyframes load { to { opacity: .25; transform: scaleX(.3); } }
#fallback { position: absolute; inset: 10% 0; width: 100%; height: 80%; object-fit: contain; pointer-events: none; }
.sr-only { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 760px) {
  .studio-grid { grid-template-columns: minmax(0, 1fr); }
  #stage { height: clamp(290px, 75vw, 400px); }
  .notes-window { height: 320px; padding: 16px; touch-action: pan-y pinch-zoom; }
  .wheel-controls { margin-block: 12px 8px; }
  .demo-footer > div { margin-left: 0; }
}
@media (max-width: 600px) {
  .notes-window { height: 240px; }
  #puck-canvas { width: calc(100% - 48px); margin-inline: 24px; }
}
@media (max-width: 380px) {
  .demo-panel { padding: 16px; }
  .wheel-controls { gap: 8px; }
  .wheel-controls strong { font-size: .86rem; }
  .wheel-controls span { font-size: .75rem; }
  .speed-control { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}