/* Reference typography uses the measured article tokens. Tool widths, 44px
   targets and form states are adaptations: the reference article is not an
   editor. Artwork and its animation remain controlled by the individual study. */
body.experiment-site {
  --paper:var(--ds-paper); --ink:var(--ds-ink); --muted:var(--ds-muted); --rule:var(--ds-rule);
  --ui-surface:#f4f4f4; --ui-border:rgba(0,0,0,.14); --ui-focus:#3153aa;
  --reading-width:var(--ds-measure);
  margin:0; padding:0; background:var(--paper); color:var(--ink);
  font:var(--ds-weight-body) var(--ds-font-body)/var(--ds-line-body) var(--ds-font);
  letter-spacing:var(--ds-tracking);
}
.experiment-site .experiment-site-header,
.experiment-site .experiment-intro,
.experiment-site .experiment-site-footer,
.experiment-site main.experiment-workspace {
  width:min(var(--workspace-width),calc(100% - var(--ds-gutter) * 2)); max-width:var(--workspace-width);
  margin:0 auto; padding:0; min-width:0;
}
.experiment-site .experiment-site-header,
.experiment-site .experiment-intro,
.experiment-site .experiment-site-footer { display:block; color:var(--ink); background:transparent; font:inherit; text-align:left; }
.experiment-site .experiment-site-header { padding-top:64px; }
.experiment-site .experiment-name { font:500 var(--ds-font-body)/var(--ds-line-body) var(--ds-font); letter-spacing:var(--ds-tracking); text-decoration:none; }
.experiment-site .experiment-site-header nav {
  display:flex; flex-wrap:wrap; justify-content:flex-start; gap:4px 24px;
  margin:12px 0 0; padding:0; border:0; font:inherit;
}
.experiment-site .experiment-site-header nav a,
.experiment-site .experiment-related a { display:inline-flex; align-items:center; min-height:44px; }
.experiment-site .experiment-site-header [aria-current=page] { text-decoration:none; color:var(--muted); }
.experiment-site .experiment-intro { margin-top:32px; margin-bottom:32px; }
.experiment-site .experiment-intro > * { max-width:var(--reading-width); }
.experiment-site .experiment-intro h1 {
  font:500 var(--ds-font-body)/var(--ds-line-body) var(--ds-font);
  letter-spacing:var(--ds-tracking); margin:0 0 12px; color:var(--ink);
}
.experiment-site .experiment-intro p { font:inherit; letter-spacing:inherit; margin:0 0 12px; color:var(--ink); }
.experiment-site .experiment-intro :is(.eyebrow,.meta,.fine) { font:inherit; letter-spacing:inherit; color:var(--muted); margin-bottom:12px; }
.experiment-site .experiment-intro .intro { font:inherit; }
.experiment-site .experiment-related { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:4px 24px; margin:12px 0 0; padding:0; border:0; font:inherit; }
.experiment-site .experiment-workspace > * { min-width:0; }
.experiment-site .experiment-workspace > p,
.experiment-site .experiment-workspace :is(.below,.study-notes,.reference,.framing,.chapter) > p,
.experiment-site .experiment-workspace .below > div > p {
  max-width:var(--reading-width);
  font-size:var(--ds-font-body); line-height:var(--ds-line-body); letter-spacing:var(--ds-tracking);
}
.experiment-site .experiment-workspace :is(h2,h3) { font:500 var(--ds-font-body)/var(--ds-line-body) var(--ds-font); letter-spacing:var(--ds-tracking); }
.experiment-site .experiment-workspace :is(.fine,.quiet,.caption,.footnote,.notes,.small,.source,.muted,.demo-note) { color:var(--muted); font-size:var(--ds-font-body); line-height:var(--ds-line-body); }
/* Hints and live feedback carry meaning; keep their authored state colors. */
.experiment-site .experiment-workspace .hint { font-size:var(--ds-font-body); line-height:var(--ds-line-body); }
.experiment-site .experiment-workspace :is(.caption,.eyebrow) { letter-spacing:var(--ds-tracking); }
.experiment-site .experiment-workspace :is(.layout,.comparison,.development,.review) > * { min-width:0; }
.experiment-site .experiment-workspace > :is(.review,.caption,.controls,.notes,.reference) { max-width:100%; }
.experiment-site .experiment-workspace > .toolbar { margin-top:0; padding-top:0; }
.experiment-site .experiment-site-footer { display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:48px; padding:16px 0 32px; border-top:1px solid var(--rule); font:inherit; }
.experiment-site .experiment-site-footer a { min-height:44px; display:inline-flex; align-items:center; }
.experiment-site a { color:inherit; text-underline-offset:3px; text-decoration-thickness:1px; text-decoration-color:rgba(0,0,0,.2); }
.experiment-site a:hover { text-decoration-color:var(--ink); }
.experiment-site :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible { outline:2px solid var(--ui-focus); outline-offset:4px; }
.experiment-site .experiment-skip { position:absolute; z-index:1000; top:10px; left:24px; min-height:44px; display:inline-flex; align-items:center; padding:8px 12px; background:var(--paper); color:var(--ink); transform:translateY(-200%); }
.experiment-site .experiment-skip:focus { transform:none; }
/* Explicit control atoms. Icon children never change an action's treatment.
   Artwork controls keep their authored geometry and animation. */
.experiment-site button { font-family:var(--ds-font); }
.experiment-site :is([data-ui-control=action],[data-ui-control=choice],[data-ui-control=file]) {
  min-height:44px; max-width:100%; padding:10px 14px; border:1px solid var(--ui-border); border-radius:6px;
  background:var(--paper); color:var(--ink); font:var(--ds-weight-body) var(--ds-font-body)/var(--ds-line-body) var(--ds-font); letter-spacing:var(--ds-tracking);
  text-align:center; white-space:normal; overflow-wrap:anywhere; cursor:pointer;
  transition:background-color var(--ds-duration-hover) ease, border-color var(--ds-duration-hover) ease, color var(--ds-duration-hover) ease;
}
.experiment-site :is([data-ui-control=action],[data-ui-control=choice],[data-ui-control=file]):hover:not(:disabled) { background:var(--ui-surface); border-color:rgba(0,0,0,.24); }
.experiment-site :is([data-ui-control=action],[data-ui-control=file])[data-ui-priority=primary],
.experiment-site :is([data-ui-control=action],[data-ui-control=file])[data-ui-priority=primary]:hover:not(:disabled) { background:var(--ink); border-color:var(--ink); color:#fff; }
.experiment-site [data-ui-control=choice]:is([aria-pressed=true],[aria-selected=true],[aria-current=true],.selected),
.experiment-site [data-ui-control=choice]:is([aria-pressed=true],[aria-selected=true],[aria-current=true],.selected):hover:not(:disabled) { background:#e9eef9; border-color:var(--ui-focus); color:#1e3c82; }
.experiment-site [data-ui-control=artwork]:is([aria-pressed=true],[aria-current=true],[aria-selected=true],.selected,.marked) { outline:2px solid var(--ui-focus); outline-offset:-2px; }
.experiment-site [data-ui-control=artwork]:focus-visible { outline:2px solid var(--ui-focus); outline-offset:4px; }
.experiment-site [data-ui-control=file] { display:inline-flex; align-items:center; justify-content:center; }
.experiment-site [data-ui-control=file]:focus-within,
.experiment-site input[type=file]:focus-visible + [data-ui-control=file] { outline:2px solid var(--ui-focus); outline-offset:4px; }
/* Compact icon controls share the exhibit target and glyph tokens. Authored
   transport labels stay text actions; close/step glyphs keep their own labels. */
.experiment-site [data-ui-control=icon] {
  display:inline-grid; place-items:center; flex:none; min-width:var(--ds-hit-size); min-height:var(--ds-hit-size);
  width:var(--ds-hit-size); height:var(--ds-hit-size); padding:0; border:0; border-radius:7px;
  background:transparent; color:var(--ink); font:460 16px/1 var(--ds-font); cursor:pointer; touch-action:manipulation;
}
.experiment-site [data-ui-control=icon] svg { display:block; width:var(--ds-icon-size); height:var(--ds-icon-size); opacity:var(--ds-control-rest); pointer-events:none; }
.experiment-site [data-ui-control=icon]:is(:hover,:focus-visible):not(:disabled) svg { opacity:var(--ds-control-hover); }
.experiment-site [data-ui-control=icon]:active:not(:disabled) { transform:scale(.95); }
/* Disabled must win over ID-specific playback styles in the independent tools. */
.experiment-site :is([data-ui-control=action],[data-ui-control=choice],[data-ui-control=file]):disabled { opacity:1!important; color:#999!important; background:#f6f6f5!important; border-color:#e3e3e1!important; cursor:default; box-shadow:none; }
.experiment-site [data-ui-control=icon]:disabled { opacity:1!important; color:#999!important; background:transparent!important; border-color:transparent!important; cursor:default; box-shadow:none; }
.experiment-site [data-ui-control=icon]:disabled svg { opacity:var(--ds-control-disabled); }
.experiment-site [data-ui-control=artwork]:disabled { cursor:default; }
.experiment-site :is(input,textarea,select) { max-width:100%; accent-color:var(--ui-focus); font-family:var(--ds-font); }
.experiment-site :is(textarea,select,input[type=number],input[type=text]) { min-height:44px; font:var(--ds-weight-body) var(--ds-font-body)/var(--ds-line-body) var(--ds-font); letter-spacing:var(--ds-tracking); padding:10px 12px; border:1px solid var(--ui-border); border-radius:6px; background:var(--paper); color:var(--ink); }
.experiment-site :is(textarea,select,input):disabled { color:#999; }
.experiment-site input[type=range] { min-height:44px; cursor:pointer; }
.experiment-site input[type=range]:disabled { cursor:default; }
.experiment-site :is(.controls,.transport,.actions,.edit-actions,.states,.buttons,.tone-options,.toolbar) { gap:8px 12px; }
.experiment-site :is(.controls,.transport,.toolbar) { align-items:center; }
.experiment-site :is(.controls,.transport) label { font:inherit; }
.experiment-site :is(.controls,.transport,.toolbar) output { font-size:12px; font-variant-numeric:tabular-nums; }
.experiment-site summary { min-height:44px; padding:10px 0; font:inherit; }
.experiment-site dialog { background:#fff; color:var(--ink); border:1px solid var(--ui-border); border-radius:10px; padding:24px; }
.experiment-site dialog::backdrop { background:#20202099; }
/* Frame editor: neutral transparency, deliberate empty state and useful tracks. */
.experiment-site[data-experiment=frames] .drawing { background:#f6f6f5; border:1px dashed #c5c5c2; border-radius:8px; min-height:360px; }
.experiment-site[data-experiment=frames] .drawing:has(#empty:not([hidden])) canvas { visibility:hidden; }
.experiment-site[data-experiment=frames] #empty { max-width:280px; padding:20px; color:#666; line-height:1.6; }
.experiment-site[data-experiment=frames] .checker { background-color:#fff; background-image:linear-gradient(45deg,#eee 25%,transparent 25%),linear-gradient(-45deg,#eee 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eee 75%),linear-gradient(-45deg,transparent 75%,#eee 75%); }
.experiment-site[data-experiment=frames] .editor { background:#fff; border:1px solid var(--ui-border); border-radius:8px; padding:20px; }
.experiment-site[data-experiment=frames] .editor legend { padding:0 8px; font-size:13px; color:var(--muted); }
.experiment-site[data-experiment=frames] .editor label { font-size:13px; margin:16px 0 6px; }
.experiment-site[data-experiment=frames] .small-preview { background:#f6f6f5; border-radius:8px; padding:16px; }
.experiment-site[data-experiment=frames] .settings { font-size:13px; gap:8px 20px; }
.experiment-site[data-experiment=frames] .settings label { min-height:32px; display:flex; align-items:center; gap:6px; }
.experiment-site[data-experiment=frames] .file { position:absolute; left:0; }
.experiment-site[data-experiment=frames] .actions { margin-bottom:16px; }
.experiment-site[data-experiment=frames] #status:empty { min-height:0; margin:0 0 24px; }
.experiment-site[data-experiment=frames] .layout { gap:32px; align-items:start; }
.experiment-site .animation-timeline { border-color:var(--ui-border); border-radius:8px; background:#fff; }
.experiment-site .timeline-head { background:#f6f6f5; padding:14px 16px; }
.experiment-site .timeline-head span { color:#666; }
.experiment-site .timeline-ruler { background:#fff; border-color:var(--rule); }
.experiment-site .track-name { background:#f6f6f5; border-color:var(--rule); }
.experiment-site .exposures { background:repeating-linear-gradient(90deg,transparent 0,transparent 19px,#eee 20px); }
.experiment-site .exposure { background:#eee; border-color:#ccc; }
.experiment-site .exposure.active { background:#e9eef9; outline-color:var(--ui-focus); }
.experiment-site .exposure-select:hover { background:transparent; }
.experiment-site .exposure-edge:hover,.experiment-site .exposure-edge:focus-visible { background:#3153aa55; }
.experiment-site .timeline-cue { background:#f0f0ee; border-color:#fff; }
.experiment-site .timeline-foot { border-color:var(--rule); color:#666; }
.experiment-site .timecode { color:#202020; }
/* Specimen grounds are neutral; colors inside the drawings are untouched. */
.experiment-site :is(.habitat,.portrait,.context,.prompt,.message.user,.reflection,#reflection,.spec,.small-preview) { background:#f6f6f5; }
.experiment-site :is(.habitat,.portrait) { border-radius:8px; }
.experiment-site .art { background:#f6f6f5; }
.experiment-site .graphic .art { background:#b7bacb; }
.experiment-site .size-row { background:#f6f6f5; }
.experiment-site .size-row.dark { background:#303030; color:#fff; }
.experiment-site .prompt { font-size:16px; line-height:1.6; font-family:inherit; padding:20px; border-radius:8px; }
.experiment-site .messages li { background:#f6f6f5; }
.experiment-site .messages li.you { background:#e9eef9; }
.experiment-site .messages mark { background:#fff1a6; }
.experiment-site .spec { border-color:var(--ui-border); border-radius:8px; }
.experiment-site .spec.marked { border-color:var(--ui-focus); background:#e9eef9; }
.experiment-site .sheet .spec:hover { background:#eee; }
.experiment-site .transport:where([style]),.experiment-site[data-experiment=ear-study] .transport,.experiment-site[data-experiment=agent-parameters] .transport { background:#fffffff5; border-color:var(--rule); }
.experiment-site[data-experiment=conversation] > main { gap:48px; }
.experiment-site[data-experiment=conversation] main > .intro { margin:0; padding:0; }
.experiment-site[data-experiment=conversation] .chapter { margin-top:0; }
.experiment-site[data-experiment=conversation] .phone { box-shadow:none; }
.experiment-site[data-experiment=presence] :is(.caption,.fine,.message small,.size-button small,.studio-heading span,.companion-row p span) { font-size:13px; color:#666; letter-spacing:0; }
.experiment-site[data-experiment=presence] .size-button[aria-pressed=true] { border-color:var(--ui-focus); background:#e9eef9!important; }
.experiment-site[data-experiment=presence] #render { max-width:100%; }
.experiment-site[data-experiment=presence] #render canvas { max-width:100%; }
.experiment-site[data-experiment=atlas] #atlas > * { background:#fff; }
.experiment-site[data-experiment=atlas] #atlas .tile:hover { background:#f6f6f5; }
.experiment-site[data-experiment=atlas] #atlas .row { background:#f6f6f5; border-right:1px solid #ddd; }
.experiment-site[data-experiment=atlas] .row small { font-size:11px; color:#666; }
.experiment-site[data-experiment=atlas] .scroll { border:1px solid var(--ui-border); border-radius:8px; }
.experiment-site[data-experiment=workbench] #studio { z-index:auto; }
.experiment-site .experiment-workspace > #animal.stage { width:100%; aspect-ratio:auto; }
@media(max-width:700px){
 .experiment-site .experiment-site-header { padding-top:32px; }
 .experiment-site .experiment-intro { margin-top:24px; margin-bottom:28px; }
 .experiment-site .experiment-site-footer { margin-top:36px; }
 .experiment-site :is(.transport,.controls) { flex-wrap:wrap; }
 .experiment-site[data-experiment=conversation] > main { gap:32px; }
 .experiment-site[data-experiment=workbench] .comparison { grid-template-columns:1fr; gap:24px; }
 .experiment-site[data-experiment=workbench] .label { display:flex; height:auto; min-height:44px; gap:8px; margin-bottom:12px; }
 .experiment-site[data-experiment=workbench] .label select,.experiment-site[data-experiment=workbench] .label label { margin:0; }
 .experiment-site[data-experiment=frames] .drawing { min-height:300px; }
 .experiment-site[data-experiment=frames] .editor { padding:16px; }
 .experiment-site[data-experiment=frames] .drawing canvas { max-width:100%; }
 /* Prevent automatic zoom when editing on a phone; prose stays at14/20. */
 .experiment-site :is(textarea,select,input[type=number],input[type=text]) { font-size:16px; }
}
@media(prefers-reduced-motion:reduce){.experiment-site *{scroll-behavior:auto!important;}.experiment-site [data-ui-control=icon]:active:not(:disabled){transform:none;}}

.experiment-site .experiment-site-header nav a:not([aria-current]), .experiment-site .experiment-related a { text-decoration:underline; }
.experiment-site[data-experiment=ear-study] dialog input[type=range] { width:100%; }
/* The whole label is the touch target; keep the native checkbox glyph compact. */
.experiment-site .experiment-workspace label:has(input[type=checkbox]) {
  display:inline-flex; align-items:center; min-height:44px; min-width:44px; cursor:pointer;
}