/* Portfolio system for experimental tools. Artwork retains its own colors;
   navigation, controls and editing surfaces use these shared neutral tokens. */
body.experiment-site {
  --paper:#fff; --ink:#202020; --muted:#666; --rule:#e9e9e7;
  --ui-surface:#f6f6f5; --ui-border:#d4d4d1; --ui-focus:#3153aa;
  margin:0; padding:0; background:var(--paper); color:var(--ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
}
.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% - 48px)); 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-size:16px; font-weight:600; letter-spacing:-.015em; 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-size:14px; line-height:1.5;
}
.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:608px; }
.experiment-site .experiment-intro h1 {
  font:500 clamp(25px,4.5vw,29px)/1.26 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  letter-spacing:-.035em; margin:0 0 14px; color:var(--ink);
}
.experiment-site .experiment-intro p { font:inherit; letter-spacing:normal; margin:0 0 12px; color:var(--muted); }
.experiment-site .experiment-intro .eyebrow { font-size:12px; letter-spacing:0; margin-bottom:12px; }
.experiment-site .experiment-intro .intro { font-size:16px; }
.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-size:14px; }
.experiment-site .experiment-workspace > * { min-width:0; }
.experiment-site .experiment-workspace > p { max-width:72ch; }
.experiment-site .experiment-workspace h2 { font-family:inherit; font-size:18px; line-height:1.4; font-weight:500; letter-spacing:-.015em; }
.experiment-site .experiment-workspace h3 { font-family:inherit; font-size:16px; line-height:1.5; font-weight:500; }
.experiment-site .experiment-workspace :is(.fine,.hint,.quiet,.caption,.footnote,.notes,.small,.source,.muted,.demo-note) { color:var(--muted); font-size:13px; line-height:1.6; }
.experiment-site .experiment-workspace :is(.caption,.eyebrow) { letter-spacing:0; }
.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-size:14px; }
.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; }
.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; padding:8px 12px; background:white; color:var(--ink); transform:translateY(-200%); }
.experiment-site .experiment-skip:focus { transform:none; }
/* Compact, quiet controls; image and canvas buttons remain artwork affordances. */
.experiment-site button { font-family:inherit; }
.experiment-site button:not(:has(canvas,svg,img)):not(:where(.exposure-edge,.falling-apple,.specimen,.mini,.tile,.size-button,#creature,#companion)),
.experiment-site :is(.file-label,.import) {
  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-size:14px; line-height:1.45; font-weight:400; letter-spacing:0;
  text-align:center; white-space:normal; overflow-wrap:anywhere; cursor:pointer;
}
.experiment-site button:not(:has(canvas,svg,img)):not(:where(.exposure-edge,.falling-apple,.specimen,.mini,.tile,.size-button,#creature,#companion)):hover:not(:disabled),
.experiment-site .file-label:hover { background:var(--ui-surface); border-color:#aaa; }
.experiment-site button:not(:has(canvas,svg,img)):not(:where(.exposure-edge,.falling-apple,.size-button)):is([aria-pressed=true],.primary,.selected) { background:var(--ink); border-color:var(--ink); color:#fff; }
.experiment-site button:not(:has(canvas,svg,img)):not(:where(.exposure-edge,.falling-apple,.size-button)):is([aria-pressed=true],.primary,.selected):hover:not(:disabled) { background:var(--ink); border-color:var(--ink); color:#fff; }
.experiment-site button:has(canvas,svg,img):is([aria-pressed=true],[aria-current=true],.selected,.marked) { outline:2px solid var(--ui-focus); outline-offset:-2px; }
/* Disabled must win over ID-specific playback styles in the independent tools. */
.experiment-site button:disabled { opacity:1!important; color:#999!important; background:#f6f6f5!important; border-color:#e3e3e1!important; cursor:default; box-shadow:none; }
.experiment-site :is(input,textarea,select) { max-width:100%; accent-color:var(--ui-focus); font-family:inherit; }
.experiment-site :is(textarea,select,input[type=number],input[type=text]) { font-size:16px; line-height:1.5; padding:10px 12px; border:1px solid var(--ui-border); border-radius:6px; background:#fff; color:var(--ink); }
.experiment-site :is(textarea,select,input):disabled { color:#999; }
.experiment-site input[type=range] { min-height:32px; 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-size:13px; }
.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-size:14px; }
.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%; }
}
@media(prefers-reduced-motion:reduce){.experiment-site *{scroll-behavior:auto!important;}}

.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%; }