/* Hookes lag experiment — isolated from the main exercise UI. */
#hookes-experiment-page{
  --experiment-accent2:#0f766e;
  --experiment-danger:#dc2626;
  --experiment-on-accent:#fff;
  max-width:1220px;
  margin:0 auto;
  padding:18px 28px 48px;
}
:root[data-theme=warm] #hookes-experiment-page{--experiment-accent2:#9b6536;--experiment-danger:#b8513f;--experiment-on-accent:#fff}
:root[data-theme=dusk] #hookes-experiment-page{--experiment-accent2:#9b83b0;--experiment-danger:#d77f91;--experiment-on-accent:#201c25}
:root[data-theme=dark] #hookes-experiment-page{--experiment-accent2:#6fa8a0;--experiment-danger:#ef7c86;--experiment-on-accent:#10151e}
#hookes-experiment-page *{box-sizing:border-box}
#hookes-experiment-page .experiment-app{
  width:min(1180px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(300px,.8fr);
  gap:20px;
}
#hookes-experiment-page .experiment-card{
  background:color-mix(in srgb,var(--panel) 96%,transparent);
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:var(--shadow);
}
#hookes-experiment-page .experiment-sim{min-height:1100px;position:relative;overflow:hidden}
#hookes-experiment-page .experiment-sim-header{
  padding:20px 24px 12px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
}
#hookes-experiment-page h1{font-size:clamp(23px,3vw,34px);margin:0 0 4px}
#hookes-experiment-page .experiment-badge{
  padding:9px 12px;
  border-radius:999px;
  background:var(--selected);
  color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));
  font-weight:700;
  font-size:13px;
  white-space:nowrap;
}
#hookes-experiment-page canvas{display:block;width:100%;height:1010px;touch-action:none;cursor:default}
#hookes-experiment-page .experiment-controls{padding:22px}
#hookes-experiment-page .experiment-controls h2{margin:0 0 16px;font-size:20px}
#hookes-experiment-page .experiment-section{padding:17px 0;border-top:1px solid var(--line)}
#hookes-experiment-page .experiment-section:first-of-type{border-top:0;padding-top:0}
#hookes-experiment-page .experiment-labelrow{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:8px}
#hookes-experiment-page label{font-weight:700;font-size:14px}
#hookes-experiment-page .experiment-value{font-variant-numeric:tabular-nums;color:var(--accent);font-weight:800}
#hookes-experiment-page input[type=range]{width:100%;accent-color:var(--accent)}
#hookes-experiment-page .experiment-mass-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:11px}
#hookes-experiment-page .experiment-gravity-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:10px}
#hookes-experiment-page button{
  appearance:none;
  border:0;
  border-radius:13px;
  padding:11px 12px;
  font:inherit;
  font-weight:800;
  cursor:pointer;
  transition:.15s transform,.15s box-shadow,.15s background,.15s border-color;
}
#hookes-experiment-page button:hover{transform:translateY(-1px)}
#hookes-experiment-page .experiment-gravity-preset{
  background:var(--button);
  color:var(--text);
  border:1px solid var(--line);
  padding:9px 6px;
  font-size:12px;
  border-radius:11px;
}
#hookes-experiment-page .experiment-gravity-preset:hover{background:var(--hover)}
#hookes-experiment-page .experiment-gravity-preset.active{
  background:var(--selected);
  color:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 45%,var(--line));
}
#hookes-experiment-page .experiment-massbtn{
  background:var(--selected);
  color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));
}
#hookes-experiment-page .experiment-remove{
  background:color-mix(in srgb,var(--experiment-danger) 10%,var(--panel));
  color:var(--experiment-danger);
  border:1px solid color-mix(in srgb,var(--experiment-danger) 28%,var(--line));
  width:100%;
  margin-top:9px;
}
#hookes-experiment-page .experiment-reset{
  background:var(--button);
  color:var(--text);
  border:1px solid var(--line);
  width:100%;
  margin-top:8px;
}
#hookes-experiment-page .experiment-stats{margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
#hookes-experiment-page .experiment-stat{
  border:1px solid var(--line);
  border-radius:15px;
  padding:12px;
  background:var(--button);
}
#hookes-experiment-page .experiment-stat strong{display:block;font-size:20px;font-variant-numeric:tabular-nums}
#hookes-experiment-page .experiment-stat span{font-size:12px;color:var(--muted)}
#hookes-experiment-page .experiment-extension{
  margin-top:15px;
  padding:16px;
  border-radius:17px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 10%,var(--panel)),color-mix(in srgb,var(--experiment-accent2) 8%,var(--panel)));
  border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));
}
#hookes-experiment-page .experiment-extension .big{font-size:30px;font-weight:900;letter-spacing:-.02em}
#hookes-experiment-page .experiment-extension small{color:var(--muted)}
#hookes-experiment-page .experiment-weights{
  margin-top:10px;
  min-height:54px;
  border:1px dashed color-mix(in srgb,var(--muted) 42%,var(--line));
  border-radius:14px;
  padding:10px;
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  align-content:flex-start;
}
#hookes-experiment-page .experiment-chip{
  padding:6px 9px;
  border-radius:999px;
  background:var(--button);
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  border:1px solid var(--line);
  color:var(--text);
  min-width:0;
}
#hookes-experiment-page .experiment-chip:hover{
  background:color-mix(in srgb,var(--experiment-danger) 12%,var(--panel));
  color:var(--experiment-danger);
  border-color:color-mix(in srgb,var(--experiment-danger) 30%,var(--line));
}
#hookes-experiment-page .experiment-hint{font-size:12px;line-height:1.45;color:var(--muted);margin-top:8px}
#hookes-experiment-page .experiment-formula{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--muted)}
.ponderings-box:has(.experiment-button:not([hidden])){display:grid;gap:10px}
.experiment-button{width:100%;min-height:48px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:9px;background:var(--panel);color:var(--accent);font-size:16px;font-weight:650;cursor:pointer;transition:background .16s,border-color .16s,color .16s}
.experiment-button:hover{background:var(--accent);color:var(--panel);border-color:var(--accent)}
@media(max-width:850px){
  #hookes-experiment-page{padding:14px 18px 40px}
  #hookes-experiment-page .experiment-app{grid-template-columns:1fr}
  #hookes-experiment-page .experiment-sim{min-height:900px}
  #hookes-experiment-page canvas{height:810px}
}
@media(max-width:440px){
  #hookes-experiment-page{padding:10px 12px 32px}
  #hookes-experiment-page .experiment-gravity-presets{grid-template-columns:repeat(2,1fr)}
}