/* =========================================================================
   Claude Demo Studio — shared design system
   Design tokens & component styles reverse-engineered from claude.ai and
   claude.ai/code (Opus 4.8 era, 2026-07). Single source of truth for every
   template. Edit tokens here to re-skin all surfaces at once.
   ========================================================================= */

:root {
  /* Brand ---------------------------------------------------------------- */
  --clay:        #d97757;   /* Anthropic signature clay (spark, send, accent) */
  --clay-emph:   #c6613f;   /* hover / emphasis                              */
  --plan:        #3b7cc4;   /* Plan-mode cool blue                          */
  --amber:       #d98a2b;   /* "Needs input" status dot                     */
  --green:       #4a9d6b;   /* diff additions                               */

  /* Light surfaces ------------------------------------------------------- */
  --bg-page:     hsl(60 14% 97%);   /* #f8f8f6 app background   */
  --bg-surface:  #ffffff;           /* composer / cards         */
  --bg-rail:     hsl(48 12% 96%);   /* chat icon rail           */
  --bg-sidebar:  hsl(60 20% 99%);   /* code labeled sidebar     */
  --bg-card:     hsl(48 12% 96%);
  --bg-user:     hsl(48 9% 93%);    /* user message bubble      */
  --bg-hover:    hsl(48 11% 91%);
  --bg-active:   hsl(48 14% 89%);

  /* Text ----------------------------------------------------------------- */
  --text:        hsl(0 0% 7%);      /* #121212 */
  --text-muted:  hsl(43 3% 47%);
  --text-faint:  hsl(45 3% 61%);

  /* Lines ---------------------------------------------------------------- */
  --border:        hsl(45 8% 88%);
  --border-strong: hsl(45 6% 80%);

  /* Type ----------------------------------------------------------------- */
  --font-sans:  "Anthropic Sans", system-ui, -apple-system, "Segoe UI", Roboto, "PingFang TC", "Microsoft JhengHei", "Noto Sans CJK TC", sans-serif;
  --font-serif: "Anthropic Serif", Georgia, "Times New Roman", "PingFang TC", "Microsoft JhengHei", serif;
  --font-mono:  "Anthropic Mono", ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  --shadow-composer: 0 2px 12px rgba(40,35,25,.06), 0 0 0 1px var(--border);
  --shadow-pop:      0 8px 28px rgba(30,25,15,.14);
  --radius-bubble:   18px;
  --radius-composer: 26px;
  --content-max:     740px;
}

:root[data-theme="dark"] {
  --bg-page:     hsl(60 3% 12%);
  --bg-surface:  hsl(60 3% 16%);
  --bg-rail:     hsl(60 3% 11%);
  --bg-sidebar:  hsl(60 3% 10%);
  --bg-card:     hsl(60 3% 15%);
  --bg-user:     hsl(60 3% 20%);
  --bg-hover:    hsl(60 3% 20%);
  --bg-active:   hsl(60 3% 23%);
  --text:        hsl(48 20% 92%);
  --text-muted:  hsl(48 5% 62%);
  --text-faint:  hsl(48 5% 46%);
  --border:      hsl(60 3% 22%);
  --border-strong: hsl(60 3% 30%);
  --shadow-composer: 0 2px 12px rgba(0,0,0,.35), 0 0 0 1px var(--border);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-sans); background: var(--bg-page); color: var(--text); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
.app { display: flex; height: 100vh; overflow: hidden; }

/* ============================ animations (from claude.ai) ================ */
@keyframes fade        { 0% { opacity: 0 } 100% { opacity: 1 } }
@keyframes rise        { 0% { opacity: 0; transform: translateY(8px) } 100% { opacity: 1; transform: none } }
@keyframes spin        { 100% { transform: rotate(360deg) } }
@keyframes pulse       { 50% { opacity: .5 } }
@keyframes blink       { 0%,100% { opacity: 1 } 50% { opacity: 0 } }
@keyframes shimmertext { 0% { background-position: 100% 0 } 65%,100% { background-position: 0 0 } }
@keyframes dot-pulse   { 0%,5% { opacity:.3 } 15%,25% { opacity:1 } 65%,100% { opacity:.3 } }

.anim-fade { animation: fade .45s ease-out both; }
.anim-rise { animation: rise .4s ease-out both; }

/* ============================ chat: icon rail =========================== */
.rail { width: 60px; flex-shrink: 0; background: var(--bg-rail); border-right: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; padding: 16px 0; gap: 6px; }
.rail .logo { color: var(--clay); font-size: 22px; margin-bottom: 8px; }
.rail-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; color: var(--text-muted); cursor: pointer; }
.rail-btn:hover { background: var(--bg-hover); color: var(--text); }
.rail-btn svg { width: 20px; height: 20px; }
.rail .spacer { flex: 1; }
.rail .avatar { width: 34px; height: 34px; border-radius: 50%; background: #2b2b28; color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 600; }

/* ============================ code: labeled sidebar ==================== */
.sidebar { width: 340px; flex-shrink: 0; background: var(--bg-sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 14px 12px 10px; }
.brand { display: flex; align-items: center; gap: 8px; padding: 4px 6px 14px; }
.brand .wordmark { font-family: var(--font-serif); font-size: 20px; font-weight: 600; }
.brand .pill { font-size: 11px; color: var(--text-muted); border: 1px solid var(--border-strong); border-radius: 7px; padding: 2px 7px; }
.brand .grow { flex: 1; }
.nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 9px; cursor: pointer; font-size: 15px; }
.nav-item:hover { background: var(--bg-hover); }
.nav-item svg { width: 18px; height: 18px; color: var(--text-muted); }
.sec-label { font-size: 12px; color: var(--text-muted); font-weight: 500; padding: 16px 11px 6px; }
.list-item { display: flex; align-items: center; gap: 10px; padding: 7px 11px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.list-item:hover { background: var(--bg-hover); }
.list-item.active { background: var(--bg-active); }
.list-item .name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-item .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--clay); }
.scroll { overflow-y: auto; flex: 1; }
.side-footer { display: flex; align-items: center; gap: 10px; padding: 10px 8px 4px; margin-top: 6px; border-top: 1px solid var(--border); }
.side-footer .avatar { width: 28px; height: 28px; border-radius: 50%; background: #2b2b28; color: #fff; font-size: 11px; font-weight: 600; display: grid; place-items: center; }
.side-footer .who { flex: 1; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-footer .plan { font-size: 13px; color: var(--text-muted); }

/* ============================ main / thread ============================= */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar { height: 56px; flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 0 20px; }
.topbar .title { font-size: 15px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; }
.topbar .title svg { width: 14px; height: 14px; color: var(--text-muted); }
.topbar .mon { color: var(--text-muted); display: grid; place-items: center; }
.topbar .mon svg { width: 18px; height: 18px; }
.topbar .grow { flex: 1; }
.topbar .tool { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: var(--text-muted); cursor: pointer; }
.topbar .tool:hover { background: var(--bg-hover); }
.topbar .tool svg { width: 17px; height: 17px; }
.btn-ghost { font-size: 14px; font-weight: 500; padding: 7px 14px; border-radius: 9px; border: 1px solid var(--border-strong); background: var(--bg-surface); color: var(--text); cursor: pointer; }

.thread { flex: 1; overflow-y: auto; padding: 8px 24px 24px; }
.thread-inner { max-width: var(--content-max); margin: 0 auto; }

/* messages */
.msg { margin: 26px 0; }
.msg.user { display: flex; justify-content: flex-end; }
.msg.user .bubble { background: var(--bg-user); padding: 12px 18px; border-radius: var(--radius-bubble); max-width: 78%; }
.msg.assistant .thought { color: var(--text-muted); font-size: 14px; margin-bottom: 14px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.msg.assistant .thought svg { width: 14px; height: 14px; flex-shrink: 0; }
.msg.assistant .content > * + * { margin-top: 14px; }
.msg.assistant h3 { font-size: 20px; font-weight: 600; line-height: 1.35; }
.msg.assistant ul { padding-left: 22px; }
.msg.assistant li { margin: 4px 0; }
.msg.assistant strong { font-weight: 600; }
.msg.assistant pre { background: hsl(48 10% 95%); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; overflow-x: auto; font-family: var(--font-mono); font-size: 13.5px; line-height: 1.55; }
:root[data-theme="dark"] .msg.assistant pre { background: hsl(60 3% 13%); }
.msg.assistant code { font-family: var(--font-mono); font-size: .92em; }
.actions { display: flex; gap: 4px; margin-top: 16px; }
.act { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; color: var(--text-muted); cursor: pointer; }
.act:hover { background: var(--bg-hover); color: var(--text); }
.act svg { width: 17px; height: 17px; }

/* thinking spark + streaming caret */
.spark-thinking { color: var(--clay); font-size: 26px; display: inline-block; animation: spin 3.2s linear infinite, pulse 1.6s ease-in-out infinite; }
.shimmer-label { font-size: 14px; font-weight: 500; background: linear-gradient(100deg, var(--text-muted) 30%, var(--text) 50%, var(--text-muted) 70%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmertext 1.8s ease-in-out infinite; }
.caret { display: inline-block; width: 9px; height: 1.05em; margin-left: 2px; background: var(--clay); vertical-align: text-bottom; border-radius: 1px; animation: blink 1s step-end infinite; }

/* greeting / empty state */
.greeting { text-align: center; margin: min(16vh,130px) auto 26px; font-family: var(--font-serif); font-size: 34px; font-weight: 400; display: flex; align-items: center; justify-content: center; gap: 12px; animation: fade .6s ease-out both; }
.greeting .spark { color: var(--clay); font-size: 30px; }
.greeting .name { color: var(--text-muted); }
.welcome { display: flex; align-items: center; gap: 12px; font-size: 26px; font-weight: 600; margin: 40px 0; }
.welcome .spark { color: var(--clay); font-size: 24px; }
.welcome .name { color: var(--text-muted); }

/* ============================ chat composer ============================ */
.composer-wrap { padding: 0 24px 14px; }
.composer-inner { max-width: var(--content-max); margin: 0 auto; }
.composer { background: var(--bg-surface); border-radius: var(--radius-composer); box-shadow: var(--shadow-composer); padding: 14px 16px 10px; }
.composer .input { min-height: 26px; color: var(--text); font-size: 16px; outline: none; }
.composer .input:empty::before { content: attr(data-placeholder); color: var(--text-faint); }
.composer-row { display: flex; align-items: center; margin-top: 10px; }
.icon-btn { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: var(--text-muted); border: none; background: transparent; cursor: pointer; }
.icon-btn:hover { background: var(--bg-hover); color: var(--text); }
.icon-btn svg { width: 19px; height: 19px; }
.composer-row .grow { flex: 1; }
.model-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; color: var(--text-muted); padding: 6px 8px; border-radius: 8px; }
.model-pill b { color: var(--text); font-weight: 500; }
.model-pill svg { width: 13px; height: 13px; }
.send { width: 34px; height: 34px; border-radius: 10px; background: var(--clay); color: #fff; border: none; display: grid; place-items: center; cursor: pointer; }
.send:hover { background: var(--clay-emph); }
.send svg { width: 18px; height: 18px; }
.disclaimer { text-align: center; font-size: 12px; color: var(--text-muted); padding: 6px 0 10px; }

/* suggestion chips */
.chips { display: flex; gap: 8px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 11px; background: var(--bg-surface); cursor: pointer; }
.chip:hover { background: var(--bg-hover); }

/* ============================ code session ============================= */
.turn { margin: 22px 0; }
.a-text p { margin: 10px 0; }
.u-msg { display: flex; justify-content: flex-end; }
.u-msg .bubble { background: var(--bg-user); padding: 11px 16px; border-radius: 16px; max-width: 80%; font-size: 14.5px; }

.tool-row { display: flex; align-items: center; gap: 8px; padding: 7px 2px; color: var(--text-muted); font-size: 14px; cursor: pointer; width: fit-content; }
.tool-row .verb { color: var(--text); font-weight: 500; }
.tool-row.running .verb { background: linear-gradient(100deg, var(--text-muted) 30%, var(--text) 50%, var(--text-muted) 70%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmertext 1.6s ease-in-out infinite; }
.tool-row .chev { width: 15px; height: 15px; transition: transform .15s; }
.tool-row.open .chev { transform: rotate(90deg); }
.tool-detail { margin: 4px 0 10px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.tool-detail .head { background: var(--bg-card); padding: 8px 14px; font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.tool-detail pre { padding: 12px 14px; font-family: var(--font-mono); font-size: 13px; line-height: 1.5; overflow-x: auto; color: var(--text); }
.tool-detail pre .add { color: var(--green); }
.tool-detail pre .rm { color: var(--clay-emph); }

.status { display: flex; align-items: center; gap: 10px; margin: 18px 0 4px; color: var(--text-muted); font-size: 14px; }
.status .spark { color: var(--clay); font-size: 18px; display: inline-block; animation: spin 3.2s linear infinite, pulse 1.6s ease-in-out infinite; }

/* AskUserQuestion option picker */
.askq { border: 1px solid var(--border-strong); border-radius: 14px; background: var(--bg-surface); padding: 16px 18px; margin: 16px 0; max-width: 620px; }
.askq .qchip { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: var(--clay-emph); background: hsl(15 60% 94%); border-radius: 6px; padding: 3px 8px; margin-bottom: 10px; }
:root[data-theme="dark"] .askq .qchip { background: hsl(15 30% 22%); }
.askq .q { font-size: 15.5px; font-weight: 500; margin-bottom: 14px; }
.opt { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border); border-radius: 11px; margin-bottom: 8px; cursor: pointer; }
.opt:hover { background: var(--bg-hover); }
.opt.selected { border-color: var(--clay); background: hsl(15 60% 97%); }
:root[data-theme="dark"] .opt.selected { background: hsl(15 25% 18%); }
.opt .key { flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--border-strong); display: grid; place-items: center; font-size: 12px; color: var(--text-muted); font-weight: 600; }
.opt.selected .key { background: var(--clay); border-color: var(--clay); color: #fff; }
.opt .box { flex-shrink: 0; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--border-strong); display: grid; place-items: center; margin-top: 1px; }
.opt.selected .box { background: var(--clay); border-color: var(--clay); }
.opt .box svg { width: 13px; height: 13px; color: #fff; opacity: 0; }
.opt.selected .box svg { opacity: 1; }
.opt .body .label { font-weight: 600; font-size: 14.5px; }
.opt .body .desc { font-size: 13.5px; color: var(--text-muted); margin-top: 2px; }
.askq .foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.askq .hint { font-size: 12.5px; color: var(--text-faint); }
.askq .grow { flex: 1; }
.askq .submit { background: var(--clay); color: #fff; border: none; font-size: 13.5px; font-weight: 500; padding: 8px 16px; border-radius: 9px; cursor: pointer; }

/* code composer + permission modes */
.cc-composer-wrap { padding: 0 32px 20px; }
.cc-composer-inner { max-width: 860px; margin: 0 auto; }
.plan-banner, .bypass-banner { display: none; align-items: center; gap: 8px; font-size: 13.5px; border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; }
.plan-banner { color: var(--plan); background: hsl(210 60% 96%); border: 1px solid hsl(210 55% 86%); }
.bypass-banner { color: var(--clay-emph); background: hsl(15 65% 96%); border: 1px solid hsl(15 60% 86%); }
:root[data-theme="dark"] .plan-banner { background: hsl(210 40% 16%); border-color: hsl(210 35% 30%); color: #7fb0e0; }
:root[data-theme="dark"] .bypass-banner { background: hsl(15 35% 17%); border-color: hsl(15 35% 32%); color: #e0a284; }
.plan-banner svg, .bypass-banner svg { width: 15px; height: 15px; }
body.is-plan .plan-banner { display: flex; }
body.is-bypass .bypass-banner { display: flex; }
.task-box { background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: 14px; padding: 13px 16px; display: flex; align-items: center; gap: 10px; }
.task-box .input { flex: 1; font-size: 15px; color: var(--text-faint); }
.task-box .stop { width: 24px; height: 24px; border: 1px solid var(--border-strong); border-radius: 6px; display: grid; place-items: center; }
.task-box .stop i { width: 9px; height: 9px; background: var(--text-muted); border-radius: 2px; display: block; }
.task-row { display: flex; align-items: center; gap: 8px; margin-top: 11px; padding: 0 2px; }
.mini { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; color: var(--text-muted); cursor: pointer; }
.mini:hover { background: var(--bg-hover); }
.mini svg { width: 16px; height: 16px; }
.task-row .grow { flex: 1; }
.task-row .meta { font-size: 14px; color: var(--text-muted); padding: 5px 8px; }
.spinner { width: 15px; height: 15px; border: 2px solid var(--border-strong); border-top-color: var(--clay); border-radius: 50%; animation: spin .8s linear infinite; }
.mode-wrap { position: relative; }
.mode-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; padding: 5px 10px; border-radius: 8px; cursor: pointer; color: rgba(10,10,10,.8); }
:root[data-theme="dark"] .mode-btn { color: hsl(48 15% 85%); }
.mode-btn:hover { background: var(--bg-hover); }
.mode-btn.plan { color: var(--plan); }
.mode-btn.bypass { color: var(--clay-emph); }
.mode-menu { position: absolute; bottom: calc(100% + 10px); left: 0; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-pop); padding: 6px; min-width: 236px; z-index: 20; }
.mode-menu .mhead { font-size: 12px; color: var(--text-muted); padding: 7px 10px 5px; }
.mode-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.mode-item:hover { background: var(--bg-hover); }
.mode-item.active { background: var(--bg-active); }
.mode-item .grow { flex: 1; }
.mode-item .k { font-size: 12px; color: var(--text-faint); }
.mode-item.plan-row .lbl { color: var(--plan); font-weight: 500; }
.mode-item.bypass-row .lbl { color: var(--clay-emph); font-weight: 500; }

.hidden { display: none !important; }

/* ========================================================================
   Presentation frame — macOS window on a background, with a zoomable camera.
   Enabled per-scenario via `frame` / `camera` (see frame.js, camera.js).
   ======================================================================== */
.backdrop {
  min-height: 100vh; width: 100%;
  display: grid; place-items: center;
  padding: var(--frame-pad, 64px);
  position: relative; overflow: hidden;
}
/* soft decorative glow behind the window */
.backdrop::before {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 70%;
  background: radial-gradient(60% 100% at 50% 0%, rgba(255,255,255,.35), transparent 70%);
  pointer-events: none;
}
/* background presets (data-bg) */
.backdrop[data-bg="clay"]   { background: linear-gradient(145deg, #e8a07e 0%, #d97757 45%, #b5502f 100%); }
.backdrop[data-bg="sunset"] { background: linear-gradient(160deg, #f6d365 0%, #fda085 40%, #f76b8a 100%); }
.backdrop[data-bg="dusk"]   { background: linear-gradient(160deg, #2b3a67 0%, #4a4e69 55%, #22223b 100%); }
.backdrop[data-bg="mesh"]   { background:
  radial-gradient(45% 55% at 15% 20%, rgba(217,119,87,.75), transparent 60%),
  radial-gradient(40% 50% at 85% 15%, rgba(120,150,220,.65), transparent 60%),
  radial-gradient(55% 60% at 75% 85%, rgba(240,180,120,.7), transparent 60%),
  linear-gradient(160deg, #f3efe9, #e9e4dc); }
.backdrop[data-bg="paper"]  { background: hsl(45 20% 92%); }
.backdrop[data-bg="ink"]    { background: radial-gradient(120% 120% at 50% 0%, #26262b, #131316); }

/* the camera: a transform layer we pan/zoom */
.camera {
  transform-origin: center center;
  transition: transform var(--cam-ms, 900ms) cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}

/* the macOS window chrome */
.mac-window {
  border-radius: 13px; overflow: hidden; background: var(--bg-page);
  box-shadow: 0 40px 90px -20px rgba(20,15,10,.55), 0 0 0 1px rgba(0,0,0,.06),
              0 2px 6px rgba(0,0,0,.12);
  width: var(--win-w, 1200px); max-width: 100%;
}
.titlebar {
  height: 40px; flex-shrink: 0; display: flex; align-items: center;
  gap: 10px; padding: 0 14px; position: relative;
  background: color-mix(in srgb, var(--bg-page) 82%, #fff);
  border-bottom: 1px solid var(--border);
}
:root[data-theme="dark"] .titlebar { background: color-mix(in srgb, var(--bg-page) 70%, #000); }
.lights { display: flex; gap: 8px; }
.light { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.15); }
.light.r { background: #ff5f57; } .light.y { background: #febc2e; } .light.g { background: #28c840; }
.titlebar .wtitle {
  position: absolute; left: 0; right: 0; text-align: center;
  font-size: 13px; color: var(--text-muted); pointer-events: none;
}
.window-body { position: relative; overflow: hidden; height: var(--win-h, 760px); }

/* when framed, the app fills the window body instead of the viewport */
body.framed .window-body .app { height: 100%; }
body.framed { overflow: auto; }

/* fake cursor (cursor.js): move / click ripple / typing */
.studio-cursor {
  position: fixed; left: 0; top: 0; z-index: 80; pointer-events: none;
  margin-left: -4px; margin-top: -2px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.4));
  transition: transform 600ms cubic-bezier(.4, 0, .2, 1);
}
.studio-cursor svg { width: 24px; height: 24px; display: block; }
.studio-cursor::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px;
  margin: -20px 0 0 -20px; border-radius: 50%; border: 2px solid var(--clay); opacity: 0;
}
.studio-cursor.click::after { animation: cur-ripple .5s ease-out; }
@keyframes cur-ripple { 0% { transform: scale(.2); opacity: .75 } 100% { transform: scale(1.1); opacity: 0 } }

/* demo controls — hidden during recording via body.recording */
.demo-toggle { position: fixed; top: 12px; right: 16px; z-index: 60; display: flex; gap: 6px; }
.demo-toggle button { font-size: 12px; padding: 6px 11px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--bg-surface); color: var(--text); cursor: pointer; }
body.recording .demo-toggle { display: none; }