/* Prefix experiment — isolated from the main exercise UI. */
#prefix-experiment-page{
  max-width:980px;
  margin:0 auto;
  padding:28px 32px 56px;
}
#prefix-experiment-page .prefix-experiment-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:var(--shadow);
  padding:28px;
}
#prefix-experiment-page .prefix-experiment-head{
  margin-bottom:24px;
}
#prefix-experiment-page h1{
  margin:0 0 8px;
  font-size:clamp(26px,4vw,36px);
  letter-spacing:-.7px;
}
#prefix-experiment-page .prefix-experiment-intro{
  margin:0;
  color:var(--muted);
}
#prefix-experiment-page .prefix-experiment-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px 28px;
  align-items:start;
}
#prefix-experiment-page .prefix-column{
  display:grid;
  gap:10px;
}
#prefix-experiment-page .prefix-column-title{
  margin:0 0 2px;
  color:var(--muted);
  font-size:12px;
  font-weight:750;
  letter-spacing:1px;
  text-transform:uppercase;
}
#prefix-experiment-page .prefix-choice{
  width:100%;
  min-height:58px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  padding:12px 16px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--button);
  color:var(--text);
  text-align:left;
  font:inherit;
  cursor:pointer;
  transition:transform .14s,border-color .14s,background .14s,box-shadow .14s;
}
#prefix-experiment-page .prefix-choice:hover{
  transform:translateY(-1px);
  border-color:color-mix(in srgb,var(--accent) 45%,var(--line));
  background:var(--selected);
  box-shadow:0 7px 18px color-mix(in srgb,var(--accent) 8%,transparent);
}
#prefix-experiment-page .prefix-choice:focus-visible{
  outline:3px solid color-mix(in srgb,var(--accent) 30%,transparent);
  outline-offset:3px;
}
#prefix-experiment-page .prefix-choice strong{
  font-size:17px;
  font-weight:720;
}
#prefix-experiment-page .prefix-choice span{
  color:var(--accent);
  font-size:17px;
  font-weight:800;
}
@media(max-width:620px){
  #prefix-experiment-page{padding:18px 16px 40px}
  #prefix-experiment-page .prefix-experiment-card{padding:20px 16px}
  #prefix-experiment-page .prefix-experiment-grid{gap:14px}
  #prefix-experiment-page .prefix-choice{min-height:54px;padding:10px 12px;gap:10px}
  #prefix-experiment-page .prefix-choice strong,
  #prefix-experiment-page .prefix-choice span{font-size:15px}
}



#prefix-experiment-page .prefix-choice[aria-expanded="true"]{
  background:var(--selected);
  border-color:color-mix(in srgb,var(--accent) 52%,var(--line));
  color:var(--accent);
  box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 9%,transparent);
}
#prefix-experiment-page .prefix-dropdown{
  display:grid;
  gap:14px;
  padding:14px;
  margin-top:-2px;
  border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));
  border-radius:13px;
  background:color-mix(in srgb,var(--panel) 94%,var(--selected));
  box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 7%,transparent);
}
#prefix-experiment-page .prefix-dropdown-magnitude{
  display:grid;
  gap:5px;
  padding:11px 12px;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--button);
}
#prefix-experiment-page .prefix-dropdown-magnitude>span{
  color:var(--muted);
  font-size:11px;
  font-weight:750;
  text-transform:uppercase;
  letter-spacing:.8px;
}
#prefix-experiment-page .prefix-dropdown-magnitude strong{
  color:var(--accent);
  font-size:14px;
  line-height:1.5;
  font-variant-numeric:tabular-nums;
}
#prefix-experiment-page .prefix-power{
  white-space:nowrap;
  display:inline-block;
}
#prefix-experiment-page .prefix-power sup{
  font-size:.72em;
  line-height:0;
  vertical-align:super;
  margin-left:1px;
}
#prefix-experiment-page .prefix-dropdown-examples{
  display:grid;
  gap:9px;
}
#prefix-experiment-page .prefix-dropdown-example{
  display:grid;
  gap:7px;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--button);
}
#prefix-experiment-page .prefix-dropdown-unit{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}
#prefix-experiment-page .prefix-dropdown-unit strong{
  font-size:14px;
}
#prefix-experiment-page .prefix-dropdown-unit span{
  color:var(--accent);
  font-weight:800;
  font-size:13px;
}
#prefix-experiment-page .prefix-dropdown-example p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}
@media(max-width:620px){
  #prefix-experiment-page .prefix-dropdown{padding:10px}
  #prefix-experiment-page .prefix-dropdown-magnitude strong{font-size:13px}
}