/* VASE3D WORKSPACE kit: the Studio's own chrome, restated for the landing.
   Every value below is read from the Studio source for the Porcelain room (body[data-bg="luxe-light"], the
   default room every capture in landing_execution_20261004/media/tour shows). Citations are file:line in
   web/src. The values are written out (no oklch(from ...), no :has()) because iOS 16.7 is the floor; the
   accent is the owner default #1fbf72 (main.js:495), so every accent mix is precomputed for it.
   Full table with the reasoning: ./TOKENS.md.  How to use each piece: ./README.md. */

.ws, .ws-root {
  /* accent (main.js:495, style.css:49) and its room-solved inks */
  --ws-accent: #1fbf72;
  --ws-accent-text: #0e4329;            /* style.css:348  color-mix(accent 28%, #07130d) */
  --ws-icon-ink: #0c5234;               /* style.css:356  color-mix(accent 30%, #04231a) */
  --ws-cta-a: #14844e;                  /* style.css:9530 color-mix(accent 58%, #06321d) */
  --ws-cta-b: #117042;                  /*                color-mix(accent 44%, #06321d) */
  --ws-lit-body: #00c26b;               /* accent_light.css lit-body  oklch(l, c*1.12) */
  --ws-lit-core: #07d57d;               /* accent_light.css lit-core  oklch(l*1.08, c*1.12) */
  --ws-lit-deep: #008e41;               /* accent_light.css:125 light-room lit-deep oklch(l*.78, c*1.05) */
  --ws-cta-deep: #005c03;               /* accent_light.css:155 CTA lit-deep oklch(l*.54, c*1.12), sRGB-clipped */
  --ws-knob-hi: #a1e4c4;                /* style.css:2147 #pwDefs .pwh-hi  color-mix(accent 42%, #fff) */
  --ws-knob-lo: #168650;                /* style.css:2149 #pwDefs .pwh-lo  color-mix(accent 70%, #000) */

  /* ink ramp: the room's chrome (style.css:323-332) and the sequence panel's deeper ramp (style.css:8402-8408) */
  --ws-ink: #2a2438;  --ws-ink-2: #373143;  --ws-ink-3: #413b4d;  --ws-ink-4: #4d4759;
  --ws-panel-ink: #17131f;  --ws-panel-ink-2: #221d2c;  --ws-panel-ink-3: #2b2537;  --ws-panel-ink-4: #362f44;
  --ws-on-ink: #fbfaff;

  /* surfaces and hairlines (style.css:334-366) */
  --ws-surface: rgba(252,251,255,.58);
  --ws-surface-2: rgba(255,255,255,.72);
  --ws-surface-3: rgba(255,255,255,.95);
  --ws-line: rgba(34,24,66,.13);
  --ws-line-2: rgba(34,24,66,.30);
  --ws-chrome-card: rgba(255,255,255,.90);
  --ws-chrome-card-deep: rgba(250,248,255,.96);
  --ws-chrome-solid: #f7f5fb;
  --ws-prism-cool: rgba(74,126,224,.11);       /* style.css:835 */
  --ws-prism-warm: rgba(206,116,56,.10);       /* style.css:836 */
  --ws-chrome-shadow: 0 18px 48px rgba(38,28,78,.14);                       /* style.css:345 = var(--e4) */
  --ws-chrome-inset: inset 0 1px 0 rgba(255,255,255,.9), inset 1px 0 0 var(--ws-prism-cool), inset -1px -1px 0 var(--ws-prism-warm);
  --ws-chrome-edge: color-mix(in srgb, #1fbf72 22%, rgba(34,24,66,.13));   /* style.css:9394 dock + pill hairline */
  --ws-glass-fill: linear-gradient(180deg, rgba(247,245,251,.78), rgba(247,245,251,.52));            /* style.css:364 */
  --ws-glass-fill-soft: linear-gradient(180deg, rgba(247,245,251,.46), rgba(247,245,251,.28));       /* style.css:365 */
  --ws-glass-edge: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.22);             /* style.css:74 */
  --ws-glass-lift: 0 3px 10px rgba(0,0,0,.20);                                                      /* style.css:75 */
  --ws-glass-line: rgba(42,36,56,.11);                                                              /* style.css:366 */
  --ws-blur: blur(22px);                       /* style.css:64 */
  --ws-blur-glass: blur(28px) saturate(1.3);   /* style.css:65 */
  --ws-blur-small: blur(12px) saturate(1.25);  /* style.css:77 */

  /* elevation ladder (microinteractions.css:30-34) */
  --ws-e1: 0 2px 8px;  --ws-e2: 0 5px 18px;  --ws-e3: 0 9px 26px;  --ws-e4: 0 18px 48px;  --ws-e5: 0 30px 80px;

  /* type (style.css:84-92, 7873). The landing's @font-face names: Schibsted Grotesk, Jost, Plex Mono. */
  --ws-font-ui: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --ws-font-display: "Jost", "Futura", "Century Gothic", var(--ws-font-ui);
  --ws-font-mono: "Plex Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --ws-fs-cap: 11px;  --ws-fs-body: 13px;  --ws-fs-title: 15px;  --ws-fs-display: 21px;  --ws-fs-sheet: 23px;
  --ws-w-body: 450;  --ws-w-strong: 650;

  /* motion (style.css:93-129) */
  --ws-dur-0: .12s;  --ws-dur-1: .14s;  --ws-dur-2: .28s;
  --ws-instant: 60ms;  --ws-standard: 200ms;
  --ws-ease: cubic-bezier(.22,.61,.21,1);
  --ws-ease-direct: cubic-bezier(.2,.85,.3,1);
  --ws-ease-material: cubic-bezier(.16,1,.3,1);
  --ws-ease-structural: cubic-bezier(.34,.01,.2,1);
  --ws-press: .975;                            /* style.css:182 */

  font-family: var(--ws-font-ui);
  color: var(--ws-ink);
}

/* ------------------------------------------------------------------ the room (room.js mounts here) */
.ws-room { position: relative; overflow: hidden; isolation: isolate; background: #fbfafd; }   /* WHITE preset bgColor1, bg_shadergradient.jsx:225 */
.ws-room-layer { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-repeat: no-repeat; background-size: cover; background-position: 50% 0;
  transform-origin: 50% 50%; will-change: transform; }
/* the island's own surface filter for Porcelain (bg_shadergradient_surface.css:6); plates carry it baked in */
.ws-room-live { position: absolute; inset: 0; z-index: -1; pointer-events: none; filter: blur(.6px) saturate(.7);
  opacity: 0; transition: opacity 1.2s ease; }
.ws-room-live.is-ready { opacity: 1; }
/* PLATE DRIFT (room.js, plate mode). The live room drifts at the owner's uSpeed .006: the misty hills slide and
   swell very slowly. A plate cannot morph, so it carries that motion as a slow pan and swell of the whole frame,
   on the compositor (the individual translate/scale properties compose with the lean's transform). One cycle is
   70 s there and back; it holds off-screen (.ws-room-held) and never runs under reduced motion. */
@keyframes ws-room-drift {
  0% { translate: -1.1% -0.6%; scale: 1.035; }
  50% { translate: 1.0% 0.7%; scale: 1.07; }
  100% { translate: -1.1% -0.6%; scale: 1.035; }
}
.ws-room-drift > .ws-room-layer { animation: ws-room-drift 70s cubic-bezier(.45,0,.55,1) infinite; }
.ws-room-held > .ws-room-layer { animation-play-state: paused; }
/* fail closed: on-model controls only show once the stage has drawn the piece (no pearls over an empty room) */
.has-frame-gate:not(.has-frame) ~ .ws-gizmo, .has-frame-gate:not(.has-frame) ~ * > .ws-gizmo, .has-frame-gate:not(.has-frame) ~ .ws-overlay-gated { visibility: hidden; }
/* A white landing: let the room dissolve into the page instead of ending on a hard edge. */
/* a fading room has no ground of its own: the page's white shows where the room dissolves */
.ws-room--fade-b, .ws-room--fade-y { background: transparent; }
/* the masks sit on the room's own layers, so chrome and copy inside the room never fade with it */
.ws-room--fade-b > :is(.ws-room-layer, .ws-room-live, .ws-fade-with-room) { -webkit-mask-image: linear-gradient(180deg, #000 0, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 72%, transparent 100%); }
.ws-room--fade-y > :is(.ws-room-layer, .ws-room-live, .ws-fade-with-room) { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 80%, transparent 100%); }

/* ------------------------------------------------------------------ icons: the i8 liquid-glass family */
/* style.css:1814-1865. One alpha mask per glyph, painted with the icon ink; never recoloured with `color`. */
.ws-i8 { position: relative; display: block; flex: none; width: 20px; height: 20px; pointer-events: none;
  filter: drop-shadow(0 0 .45px var(--ws-icon-ink-now, var(--ws-icon-ink))); }
.ws-i8::before { content: ""; position: absolute; inset: 0; background-color: var(--ws-icon-ink-now, var(--ws-icon-ink));
  -webkit-mask: var(--i8) center / contain no-repeat; mask: var(--i8) center / contain no-repeat;
  transition: background-color var(--ws-dur-1) var(--ws-ease); }
.ws-svg-i { width: 20px; height: 20px; flex: none; color: var(--ws-icon-ink-now, var(--ws-icon-ink)); }

/* ------------------------------------------------------------------ toolbar: the command island */
/* .top-actions style.css:601; .tb-dock style.css:602 + light room :9279, :9394 */
.ws-topbar { display: flex; align-items: center; gap: 10px; }
.ws-dock { display: inline-flex; align-items: center; gap: 0; padding: 3px; border-radius: 15px;
  background: var(--ws-chrome-card); border: 1px solid var(--ws-chrome-edge); box-shadow: var(--ws-chrome-shadow);
  -webkit-backdrop-filter: var(--ws-blur) saturate(1.3); backdrop-filter: var(--ws-blur) saturate(1.3); }
.ws-group { display: inline-flex; align-items: center; gap: 1px; }
.ws-group + .ws-group { border-left: 1px solid rgba(31,191,114,.30); margin-left: 3px; padding-left: 3px; }   /* style.css:9392 */
/* .icon-btn style.css:614-619 + light room :9285-9290, :9390 */
.ws-icon { --ws-icon-ink-now: var(--ws-icon-ink);
  width: 40px; height: 40px; border-radius: 11px; border: 0; padding: 0; background: transparent; color: var(--ws-icon-ink);
  display: inline-grid; place-items: center; cursor: pointer;
  transition-property: color, background-color, box-shadow, transform; transition-duration: var(--ws-dur-1); transition-timing-function: var(--ws-ease); }
.ws-icon.has-label { width: auto; min-width: 72px; padding: 0 13px 0 11px; display: inline-flex; gap: 8px; }   /* #newBtn style.css:629 */
.ws-icon-label { font: 650 12px/1 var(--ws-font-ui); letter-spacing: .01em; color: var(--ws-icon-ink); }        /* style.css:628, :9388 */
.ws-icon:disabled { opacity: .34; cursor: default; }                                                           /* style.css:624 */
@media (hover: hover) and (pointer: fine) {
  .ws-icon:not(:disabled):hover { background: rgba(0,0,0,.06); transform: translateY(-1px); --ws-icon-ink-now: var(--ws-accent); }
}
.ws-icon:not(:disabled):active { transform: translateY(.5px) scale(.965); background: var(--ws-surface-3); }
.ws-burger { width: 20px; height: 20px; color: var(--ws-icon-ink); opacity: .92; }                             /* style.css:9918 */

/* .pill-btn style.css:647-654, .pill-glaze :674-695 + light room :9279-9281 (Paint shares it, vessel_painter.js:697) */
.ws-pill { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
  height: 46px; padding: 0 22px; border-radius: 14px; border: 1px solid var(--ws-chrome-edge); cursor: pointer;
  font: 650 13px/1 var(--ws-font-ui); letter-spacing: .01em; color: var(--ws-ink);
  background: var(--ws-chrome-card); box-shadow: var(--ws-chrome-shadow);
  -webkit-backdrop-filter: var(--ws-blur) saturate(1.3); backdrop-filter: var(--ws-blur) saturate(1.3);
  --ws-icon-ink-now: var(--ws-accent);
  transition-property: color, background-color, box-shadow, transform, filter; transition-duration: var(--ws-dur-1); transition-timing-function: var(--ws-ease); }
.ws-pill .ws-i8 { width: 19px; height: 19px; }
.ws-pill .ws-svg-i { width: 19px; height: 19px; color: var(--ws-accent); }
@media (hover: hover) and (pointer: fine) { .ws-pill:hover { transform: translateY(-1px); } }
.ws-pill:active { transform: translateY(1px) scale(.99); }
/* EXPORT: white on deep green, the one filled block in the chrome (style.css:2360, :9380, :9530; accent_light.css:290-345) */
.ws-pill--cta { border: 0; color: #fff; font-weight: 700; isolation: isolate; --ws-icon-ink-now: #fff;
  background: linear-gradient(135deg, var(--ws-cta-a), var(--ws-cta-b));
  box-shadow: var(--ws-e3) rgba(0,194,107,.30), var(--ws-e1) rgba(20,16,30,.06);
  -webkit-backdrop-filter: none; backdrop-filter: none; }
.ws-pill--cta::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: .9;
  background:
    linear-gradient(180deg, rgba(0,0,0,.16) 0%, rgba(0,0,0,0) 14%),
    radial-gradient(120% 46% at 50% -6%, rgba(255,255,255,.34) 0%, rgba(255,255,255,.12) 46%, rgba(255,255,255,0) 100%),
    radial-gradient(90% 110% at var(--mx, 50%) var(--my, 62%), rgba(255,255,255,.14) 0%, rgba(255,255,255,.05) 46%, rgba(255,255,255,0) 84%),
    radial-gradient(140% 48% at 50% 118%, rgba(7,213,125,.62) 0%, rgba(7,213,125,.30) 46%, transparent 86%),
    linear-gradient(180deg, rgba(0,92,3,.74) 0%, rgba(0,92,3,.42) 62%, transparent 100%);
  transition: opacity var(--ws-standard) var(--ws-ease-material), filter var(--ws-standard) var(--ws-ease-material); }
@media (hover: hover) and (pointer: fine) {
  .ws-pill--cta:hover { box-shadow: var(--ws-e4) rgba(0,194,107,.38), var(--ws-e2) rgba(20,16,30,.06); }
  .ws-pill--cta:hover::after { opacity: 1; filter: saturate(1.08); }
}
.ws-pill--cta:active::after { opacity: 1; filter: saturate(1.16); transition-duration: var(--ws-instant); }
/* "View" trigger under Export (.viewcube .vc-trigger, light room style.css:9216) */
.ws-chipbtn { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border-radius: 12px;
  background: var(--ws-chrome-card); border: 1px solid var(--ws-line); box-shadow: var(--ws-chrome-shadow);
  font: 650 13px/1 var(--ws-font-ui); color: var(--ws-ink); cursor: pointer; }
.ws-chipbtn svg { width: 10px; height: 10px; opacity: .7; }

/* ------------------------------------------------------------------ the floating side panel */
/* .sheet style.css:803-822 (desktop dock :820-822), light room :9303, sequence glass :8384-8408 */
.ws-panel { --ws-ink-now: var(--ws-panel-ink);
  position: relative; display: flex; flex-direction: column; width: 354px; max-height: calc(100vh - 168px); overflow: hidden;
  color: var(--ws-panel-ink); border: 1px solid var(--ws-line); border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.90) 0%, rgba(247,245,251,.88) 42%, rgba(250,248,255,.83) 100%);
  box-shadow: var(--ws-chrome-shadow), var(--ws-chrome-inset);
  -webkit-backdrop-filter: var(--ws-blur-glass); backdrop-filter: var(--ws-blur-glass); }
.ws-panel-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 16px 16px; scrollbar-width: thin; scrollbar-color: var(--ws-panel-ink-3) transparent; }
.ws-panel-body::-webkit-scrollbar { width: 5px; }
.ws-panel-body::-webkit-scrollbar-thumb { background: var(--ws-panel-ink-3); border-radius: 4px; }
/* head: style.css:7234-7247 (title Jost 560 23px -.035em) */
.ws-panel-head { padding: 18px 13px 10px 18px; }
.ws-panel-title { margin: 0; font: 560 var(--ws-fs-sheet)/1.1 var(--ws-font-display); letter-spacing: -.035em; color: var(--ws-panel-ink); }
.ws-panel-meta { display: flex; align-items: center; gap: 10px; margin-top: 6px; font: 450 12px/1.3 var(--ws-font-ui); color: var(--ws-panel-ink-3); }
/* material chip: a swatch + name, the same hairline pill the head carries in the captures */
.ws-chip { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px 0 4px; border-radius: 999px;
  border: 1px solid var(--ws-line); background: var(--ws-surface-2); font: 650 12px/1 var(--ws-font-ui); color: var(--ws-panel-ink); }
.ws-chip i { width: 20px; height: 20px; border-radius: 50%; background: var(--sw, #eee7dd);
  box-shadow: inset 0 -2px 4px rgba(0,0,0,.18), inset 0 1px 1px rgba(255,255,255,.55), 0 0 0 1px rgba(0,0,0,.06); }
.ws-chip.is-on { border-color: rgba(14,67,41,.42); background: color-mix(in srgb, #0e4329 7%, #f7f5fb); }

/* segmented tabs: .workspace-nav workspace_controls.css:4-19 with the gliding pane (.nav-ind) */
.ws-tabs { position: relative; display: flex; gap: 3px; margin: 0 14px 8px; padding: 3px; border-radius: 13px;
  background: rgba(23,19,31,.05); box-shadow: inset 0 1px 2px rgba(0,0,0,.16), inset 0 -1px 0 rgba(255,255,255,.04); }
.ws-tabs button { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; border: 1px solid transparent; border-radius: 10px; background: transparent; cursor: pointer;
  font: 650 13px/1 var(--ws-font-ui); color: var(--ws-panel-ink-3); transition: color var(--ws-dur-1) var(--ws-ease), background-color var(--ws-dur-1) var(--ws-ease); }
.ws-tabs button[aria-selected="true"], .ws-tabs button[aria-pressed="true"] { color: var(--ws-panel-ink); }
.ws-tabs:not(.has-ind) button[aria-selected="true"] { background: var(--ws-glass-fill); box-shadow: var(--ws-glass-edge), var(--ws-glass-lift); border-color: var(--ws-glass-line); }
.ws-tabs .ws-tabs-ind { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; border-radius: 10px;
  width: var(--ind-w, 0px); height: var(--ind-h, 44px); transform: translate(var(--ind-x, 0px), var(--ind-y, 0px));
  background: var(--ws-glass-fill); box-shadow: var(--ws-glass-edge), var(--ws-glass-lift); border: 1px solid var(--ws-glass-line);
  -webkit-backdrop-filter: var(--ws-blur-small); backdrop-filter: var(--ws-blur-small);
  transition: transform .34s cubic-bezier(.22,.61,.36,1), width .34s cubic-bezier(.22,.61,.36,1); }
.ws-tabs button.ws-tab-close { flex: 0 0 44px; }
.ws-tabs button.ws-tab-close svg { width: 16px; height: 16px; }
.ws-count { min-width: 18px; padding: 2px 4px; border-radius: 5px; font: 650 10px/1.2 var(--ws-font-ui); text-align: center;
  background: var(--ws-glass-fill-soft); box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
@media (hover: hover) and (pointer: fine) {
  .ws-tabs:hover button:not([aria-selected="true"]) { color: color-mix(in srgb, #17131f 58%, #2b2537); }
  .ws-tabs button:not([aria-selected="true"]):hover { background: var(--ws-glass-fill-soft); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); color: var(--ws-panel-ink); }
}

/* tool tiles: .workspace-tools workspace_controls.css:26-31 (+ accent_light.css's lit hairline for a selection) */
.ws-tools { display: flex; gap: 6px; padding: 0 14px 10px; }
.ws-tools button { position: relative; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  min-width: 0; min-height: 74px; padding: 6px; border: 1px solid transparent; border-radius: 12px; background: transparent; cursor: pointer;
  font: 600 12px/1.2 var(--ws-font-ui); color: var(--ws-panel-ink-3);
  transition: color var(--ws-dur-1) var(--ws-ease), background-color var(--ws-dur-1) var(--ws-ease), border-color var(--ws-dur-1) var(--ws-ease), box-shadow var(--ws-standard) var(--ws-ease-material); }
.ws-tools svg { width: 36px; height: 36px; color: var(--ws-icon-ink); }
.ws-tools button[aria-pressed="true"] { color: var(--ws-panel-ink); background: color-mix(in srgb, #0e4329 7%, #f7f5fb); border-color: rgba(14,67,41,.42);
  box-shadow: var(--ws-e2) rgba(0,194,107,.16), var(--ws-e1) rgba(20,16,30,.06), inset 0 -10px 18px -12px rgba(0,194,107,.38); }
@media (hover: hover) and (pointer: fine) {
  .ws-tools button:not([aria-pressed="true"]):hover { background: rgba(247,245,251,.36); border-color: rgba(23,19,31,.07); color: var(--ws-panel-ink); }
}

/* size kit: .szkit/.szbox/.szcell style.css:3855-3869 */
.ws-size { display: flex; gap: 12px; align-items: stretch; margin: 2px 0 12px; }
.ws-sizebox { flex: none; width: 112px; border: 1px solid var(--ws-line); border-radius: 12px; background: var(--ws-surface-2); padding: 5px; color: var(--ws-panel-ink-3); }
.ws-sizebox svg { width: 100%; height: 100%; display: block; }
.ws-cells { flex: 1; display: flex; flex-direction: column; gap: 6px; justify-content: center; min-width: 0; }
.ws-cell { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 8px 0 11px;
  border: 1px solid var(--ws-line); border-radius: 12px; background: var(--ws-surface-2); font: 450 12px/1 var(--ws-font-ui); color: var(--ws-panel-ink-3); }

/* readout: .ctl-val / .prow-val style.css:874-877, :934, :2188-2191. Mono is for measurement only. */
.ws-readout { font: 400 11px/1.2 var(--ws-font-mono); font-variant-numeric: tabular-nums; color: var(--ws-panel-ink);
  padding-bottom: 1px; border-bottom: 1px dashed transparent; cursor: ew-resize; user-select: none; touch-action: none;
  transition: border-color var(--ws-dur-1) var(--ws-ease), color var(--ws-dur-1) var(--ws-ease); }
.ws-readout:hover { border-bottom-color: var(--ws-line-2); }
.ws-readout.is-live { color: var(--ws-accent-text); border-bottom-color: rgba(31,191,114,.6); }
.ws-readout small { font: inherit; opacity: .78; margin-left: .35em; }

/* parameter row with a tactile well: .prow style.css:932-934, widget_instruments.css:51-56 */
.ws-prow { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 14px; align-items: center; margin: 12px 0; }
.ws-prow-name { margin: 0 0 6px; font: 450 14px/1.35 var(--ws-font-ui); color: var(--ws-panel-ink); }
.ws-prow-gesture { margin: 6px 0 0; font: 450 12px/1.4 var(--ws-font-ui); color: var(--ws-panel-ink-3); }
.ws-die { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 8px; border-radius: 9px; vertical-align: middle;
  color: var(--ws-panel-ink-4); background: color-mix(in srgb, #1fbf72 12%, transparent); }   /* .mini-die style.css:880, widget_instruments.css:45 */
.ws-die svg { width: 16px; height: 16px; }

/* tactile well: .pw style.css:1948-2016, .pw.control-well widget_instruments.css:23 (176px, radius 36) — 164px here */
.ws-well { --well: 164px; position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; box-sizing: border-box;
  width: var(--well); height: var(--well); padding: 6px; border-radius: 34px; cursor: grab; touch-action: none; color: var(--ws-panel-ink-3);
  border: 1px solid color-mix(in srgb, rgba(34,24,66,.30) 76%, rgba(255,255,255,.12));
  background: radial-gradient(circle at 28% 13%, rgba(255,255,255,.105), transparent 42%),
    linear-gradient(158deg, rgba(255,255,255,.63), rgba(252,251,255,.43));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), inset 0 -8px 18px rgba(0,0,0,.10),
    inset 1px 0 0 var(--ws-prism-cool), inset -1px -1px 0 var(--ws-prism-warm), var(--ws-e2) rgba(0,0,0,.20);
  -webkit-backdrop-filter: blur(12px) saturate(1.12); backdrop-filter: blur(12px) saturate(1.12);
  transition: transform var(--ws-standard) cubic-bezier(.34,1.56,.64,1), box-shadow var(--ws-dur-1) var(--ws-ease), border-color var(--ws-dur-1) var(--ws-ease), color var(--ws-dur-1) var(--ws-ease); }
.ws-well::before { content: ""; position: absolute; inset: -50%; z-index: 0; pointer-events: none; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle 26px at 50% 50%, rgba(255,255,255,.52), rgba(255,255,255,.14) 42%, transparent 100%),
    radial-gradient(circle closest-side at 50% 50%, transparent 30%, rgba(0,0,0,.18) 76%, transparent 100%);
  transform: translate3d(var(--lx, 0px), var(--ly, 0px), 0);
  transition: opacity var(--ws-dur-1) var(--ws-ease), transform var(--ws-instant) linear; }
.ws-well > svg { position: relative; z-index: 1; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.3)); }
.ws-well::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 3px; height: 3px; border-radius: 50%; z-index: 2;
  background: var(--ws-accent); box-shadow: 0 0 8px rgba(31,191,114,.55); opacity: 0; transform: translateX(-50%) scale(.5);
  transition: opacity var(--ws-dur-1) var(--ws-ease), transform .18s cubic-bezier(.34,1.56,.64,1); }
.ws-well.is-modified::after { opacity: .82; transform: translateX(-50%) scale(1); }
@media (hover: hover) and (pointer: fine) {
  .ws-well:hover { color: var(--ws-panel-ink); border-color: color-mix(in srgb, #1fbf72 38%, rgba(34,24,66,.30)); }
  .ws-well:hover::before { opacity: 1; }
}
.ws-well.is-dragging { cursor: grabbing; transform: scale(1.045); border-color: color-mix(in srgb, #1fbf72 68%, rgba(34,24,66,.30));
  box-shadow: 0 0 0 4px rgba(31,191,114,.14), 0 0 22px rgba(31,191,114,.13), inset 0 1px 0 rgba(255,255,255,.16), var(--ws-e3) rgba(0,0,0,.20); }
.ws-well.is-dragging::before { opacity: 1;
  background: radial-gradient(circle 30px at 50% 50%, color-mix(in srgb, #1fbf72 24%, rgba(255,255,255,.60)), rgba(255,255,255,.15) 44%, transparent 100%),
    radial-gradient(circle closest-side at 50% 50%, transparent 28%, rgba(0,0,0,.20) 74%, transparent 100%); }
/* the drawing inside a well (widget_defs.js: ink line + glossy accent handle) */
.ws-well .w-ground { fill: url(#wsWellGround); }
.ws-well .w-ink { fill: none; stroke: #17131f; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.ws-well .w-ghost { fill: none; stroke: rgba(23,19,31,.22); stroke-width: 1.4; stroke-dasharray: 3 4; }
.ws-well .w-sec { fill: none; stroke: #1fbf72; stroke-width: 3; stroke-linecap: round; }   /* the selected band: the accent bar the Studio's "Bottom join" well draws */
.ws-well .w-handle { fill: url(#wsKnob); stroke: rgba(255,255,255,.92); stroke-width: 1.4; filter: drop-shadow(0 1.5px 2.5px rgba(0,0,0,.5));
  transition: r .13s cubic-bezier(.34,1.56,.64,1), filter var(--ws-dur-1) var(--ws-ease); }
.ws-well.is-dragging .w-handle { filter: drop-shadow(0 3px 6px rgba(0,0,0,.6)) brightness(1.05); }

/* disclosure row + switch: workspace_controls.css:35-58 (sl-switch 42x24, thumb 20) */
.ws-row { display: flex; align-items: center; gap: 10px; min-height: 52px; border-top: 1px solid var(--ws-line); font: 600 12px/1.3 var(--ws-font-ui); color: var(--ws-panel-ink); }
.ws-row-glyph { width: 24px; height: 24px; color: var(--ws-accent); flex: none; }
.ws-row > span { flex: 1; }
.ws-switch { position: relative; width: 42px; height: 24px; flex: none; border-radius: 999px; border: 1px solid rgba(23,19,31,.22); padding: 0; cursor: pointer;
  background: rgba(23,19,31,.22); transition: background-color .18s ease, border-color .18s ease; }
.ws-switch::after { content: ""; position: absolute; top: 1px; left: 1px; width: 20px; height: 20px; border-radius: 50%; background: #f4f4f4;
  box-shadow: 0 1px 3px rgba(0,0,0,.24); transition: transform .18s var(--ws-ease); }
.ws-switch[aria-checked="true"] { background: var(--ws-accent); border-color: transparent; box-shadow: var(--ws-e1) rgba(0,194,107,.34); }
.ws-switch[aria-checked="true"]::after { transform: translateX(18px); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 3px rgba(0,142,65,.55); }
.ws-qmark { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.4px solid var(--ws-panel-ink-3); font: 650 12px/1 var(--ws-font-ui); color: var(--ws-panel-ink-3); }

/* slider: widget_instruments.css:27-37 (44px band, 4px track, 20px thumb) */
.ws-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: ew-resize; }
.ws-slider::-webkit-slider-runnable-track { height: 4px; border-radius: 3px; background: linear-gradient(90deg, var(--ws-accent) var(--p, 50%), rgba(23,19,31,.12) var(--p, 50%)); }
.ws-slider::-moz-range-track { height: 4px; border-radius: 3px; background: rgba(23,19,31,.12); }
.ws-slider::-moz-range-progress { height: 4px; border-radius: 3px; background: var(--ws-accent); }
.ws-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%; background: #fff; border: 1px solid rgba(23,19,31,.18); box-shadow: 0 2px 6px rgba(0,0,0,.22); }
.ws-slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 1px solid rgba(23,19,31,.18); box-shadow: 0 2px 6px rgba(0,0,0,.22); }
.ws-slider:focus-visible { outline: 2px solid var(--ws-accent-text); outline-offset: 2px; border-radius: 8px; }

/* tooltip / answer card: .context-help-answer context_help.css:30-58 on --chrome-card */
.ws-tip { width: max-content; max-width: 292px; padding: 9px 11px 8px; border-radius: 12px; color: var(--ws-ink);
  border: 1px solid color-mix(in srgb, #1fbf72 18%, rgba(34,24,66,.13));
  background: linear-gradient(145deg, rgba(255,255,255,.904), rgba(255,255,255,.90)), rgba(255,255,255,.90);
  box-shadow: 0 14px 36px rgba(0,0,0,.14), inset 0 1px rgba(255,255,255,.055);
  -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15); }
.ws-tip b { display: block; font: 680 11.5px/1.3 var(--ws-font-ui); letter-spacing: -.01em; color: var(--ws-ink); }
.ws-tip p { margin: 3px 0 0; font: 450 11.5px/1.45 var(--ws-font-ui); color: var(--ws-ink-3); }

/* on-model measurement pill: .fdim style.css:1439-1451, light room :9327 */
.ws-dim { position: absolute; transform: translate(-50%,-50%); white-space: nowrap; pointer-events: auto;
  padding: 6px 11px; border-radius: 999px; border: 1px solid var(--ws-line); background: var(--ws-chrome-card-deep); color: var(--ws-ink);
  box-shadow: var(--ws-chrome-shadow); font: 600 11px/1.3 var(--ws-font-ui); font-variant-numeric: tabular-nums; letter-spacing: .005em;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* ------------------------------------------------------------------ pearls (gizmo.js positions them) */
:where(.ws-gizmo) { position: absolute; inset: 0; } .ws-gizmo { pointer-events: none; overflow: hidden; }
.ws-gizmo svg.ws-guides { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* node gizmo guides: node_gizmo_view.css:2-5 */
.ws-guides .g-track { fill: none; stroke: rgba(255,239,215,.42); stroke-width: 1.2; stroke-dasharray: 2 5; stroke-linecap: round;
  filter: drop-shadow(0 0 1px #1f1611) drop-shadow(0 1px 2px #0008); }
.ws-guides .g-home { fill: #fff4de; stroke: #4b342e; stroke-width: 1; }
.ws-guides .g-tether { fill: none; stroke: #4b342e; stroke-width: 1.2; opacity: .7; }
.ws-guides .g-ring { fill: none; stroke: rgba(255,246,230,.62); stroke-width: 1.6; stroke-linecap: round; filter: drop-shadow(0 1px 2px rgba(34,22,10,.55)); }   /* .cg-ring style.css:5198 */
/* the highlighted edge a measurement belongs to (00-body: "118 mm wide" sits on a pale green line on the clay) */
.ws-guides .g-ring--accent { stroke: rgba(132,226,176,.95); stroke-width: 2; filter: drop-shadow(0 0 1.5px rgba(255,255,255,.9)) drop-shadow(0 1px 1px rgba(14,67,41,.35)); }
.ws-guides .g-dimline { fill: none; stroke: rgba(42,36,56,.42); stroke-width: 1; stroke-linecap: round; }
.ws-guides .g-ring-back { fill: none; stroke: rgba(255,244,226,.3); stroke-width: 1.3; stroke-dasharray: 1 6; stroke-linecap: round; }
/* the hit field is 48px; the visible core is 26px (node_gizmo_view.css:6-7, style.css:5209-5211) */
.ws-pearl { position: absolute; left: 0; top: 0; width: 48px; height: 48px; margin: -24px 0 0 -24px; padding: 0; border: 0; background: none;
  pointer-events: auto; touch-action: none; cursor: grab; outline: 0; display: grid; place-items: center; will-change: transform; }
.ws-pearl-core { position: relative; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font: 600 15px/1 var(--ws-font-ui); font-variant-numeric: tabular-nums; color: #4d3829;
  background: radial-gradient(circle at 35% 25%, #fff9ec 20%, #edd2af 68%, #bc8958);
  box-shadow: 0 2px 7px #0005, 0 0 0 1.5px #fff6, 0 0 0 3px #4b342e80;
  transition: transform 120ms, box-shadow 120ms, opacity 160ms; }
.ws-pearl-core svg { width: 14px; height: 14px; stroke: #4d3829; }
/* Porcelain pearls as the tour captures show them on the clay (04-handle, 07-terracotta, pixel read 2026-10-07):
   a small crisp bead, about 22px, white at the core, a hairline grey ring, no glow. The warm-halo recipe
   (style.css:5209-5217, .cg-pearl) read as a glowing marble next to the captures; it is kept for hover only. */
.ws-pearl--porcelain .ws-pearl-core { width: 22px; height: 22px; background: radial-gradient(circle at 44% 36%, #fff 0, #fdfcfa 42%, #ece6dc 100%);
  box-shadow: 0 0 0 1.5px rgba(112,108,104,.78), 0 0 0 2.5px rgba(255,255,255,.55), 0 2px 4px rgba(20,16,12,.28); }
/* the cool variant: the captures' pale blue-edged pearl (07-terracotta right of the lid) */
.ws-pearl--cool .ws-pearl-core { background: radial-gradient(circle at 44% 36%, #fff 0, #f7f9fc 40%, #dce5f0 100%);
  box-shadow: 0 0 0 1.5px rgba(104,118,136,.8), 0 0 0 2.5px rgba(255,255,255,.55), 0 2px 4px rgba(16,20,28,.28); }
.ws-pearl--bead .ws-pearl-core { width: 16px; height: 16px; }
.ws-pearl-label { position: absolute; left: 50%; top: 43px; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  padding: 3px 8px; border-radius: 8px; font: 600 11px/1.4 var(--ws-font-ui); font-variant-numeric: tabular-nums;
  color: #fff9ef; background: #27231fed; box-shadow: 0 2px 8px #0003; opacity: 0; transition: opacity 120ms; }
.ws-pearl.label-above .ws-pearl-label { top: -24px; }
@media (hover: hover) and (pointer: fine) {
  .ws-pearl:hover .ws-pearl-label { opacity: 1; }
  .ws-pearl:hover .ws-pearl-core { transform: scale(1.1); box-shadow: 0 2px 7px #0005, 0 0 0 2px #fff, 0 0 0 5px #eeb67655; }
  .ws-pearl--porcelain:hover .ws-pearl-core { box-shadow: 0 0 0 1.5px rgba(112,108,104,.85), 0 0 0 3.5px #fff, 0 0 0 5.5px rgba(31,191,114,.35), 0 2px 6px rgba(20,16,12,.3); }
}
.ws-pearl:focus-visible .ws-pearl-label, .ws-pearl.is-active .ws-pearl-label { opacity: 1; }
.ws-pearl:focus-visible .ws-pearl-core { transform: scale(1.1); box-shadow: 0 2px 7px #0005, 0 0 0 2px #fff, 0 0 0 5px #eeb67655; }
.ws-pearl.is-active { cursor: grabbing; }
.ws-pearl.is-active .ws-pearl-core { transform: scale(1.06); box-shadow: 0 2px 7px #0005, 0 0 0 3px #fff, 0 0 0 6px #eeb67666; }
.ws-pearl--porcelain.is-active .ws-pearl-core { box-shadow: 0 0 0 1.5px rgba(112,108,104,.9), 0 0 0 3.5px #fff, 0 0 0 6px rgba(31,191,114,.45), 0 2px 6px rgba(20,16,12,.32); }
/* round the back of the pot: the spout gizmo's occlusion recipe (style.css:5219-5220) */
.ws-pearl.is-occluded { pointer-events: none; }
.ws-pearl.is-occluded .ws-pearl-core { opacity: .16; box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
.ws-pearl[hidden] { display: none; }

/* ------------------------------------------------------------------ browser surfaces in the Studio's ink */
.ws ::selection, .ws-root ::selection { background: rgba(31,191,114,.24); color: #17131f; }
.ws :focus-visible, .ws-root :focus-visible { outline: 2px solid var(--ws-accent-text); outline-offset: 2px; }   /* workspace_controls.css:78 */

@media (prefers-reduced-motion: reduce) {
  .ws-icon, .ws-pill, .ws-pill--cta::after, .ws-tabs .ws-tabs-ind, .ws-tools button, .ws-well, .ws-well::before, .ws-well::after,
  .ws-pearl-core, .ws-pearl-label, .ws-switch, .ws-switch::after, .ws-room-live { transition: none; }
  .ws-room-drift > .ws-room-layer { animation: none; }
  .ws-well.is-dragging { transform: none; }
}