:root { color-scheme: dark; font-family: system-ui, sans-serif; color:#e9eef5; background:#101720; }
* { box-sizing:border-box; } body { margin:0; } header,main { max-width:1200px; margin:auto; padding:24px; }
header { padding-bottom:8px; } .eyebrow { font:11px ui-monospace,monospace; letter-spacing:.18em; color:#8ca3b5; }
h1 { font-size:clamp(25px,4vw,42px); font-weight:500; letter-spacing:-.04em; margin:12px 0; } p { color:#9eb0c2; }
#notice { padding:12px 16px; border-left:3px solid #71bdde; background:#192631; font-size:13px; line-height:1.6; }
.toolbar { display:flex; gap:18px; align-items:center; flex-wrap:wrap; padding:16px 0; font-size:13px; }
label { display:flex; align-items:center; gap:8px; } button, select { font:inherit; color:inherit; background:#233443; border:1px solid #42566a; padding:8px 12px; border-radius:5px; }
button { cursor:pointer; } button:disabled { opacity:.4; } input[type=file] { max-width:225px; font-size:12px; }
#stage { position:relative; height:430px; border:1px solid #354655; border-radius:8px; overflow:hidden; background:#14202a; }
canvas { width:100%; height:100%; display:block; touch-action:none; } #panels { position:absolute; inset:0; display:flex; pointer-events:none; }
.panel { flex:1; padding:16px; border-right:1px solid #354655; font-size:13px; } .panel:last-child { border:0; } .panel span { background:#101720dd; padding:5px 8px; display:inline-block; border-radius:4px; }
.timeline { padding:16px 0 0; } .timeline label { justify-content:space-between; font-size:13px; } #time { width:100%; margin:10px 0; accent-color:#75c6e9; }
output { font-family:ui-monospace,monospace; } #readouts { display:flex; gap:16px; flex-wrap:wrap; font:12px/1.8 ui-monospace,monospace; }
.readout { flex:1; min-width:200px; border-top:2px solid; padding:12px 0; } footer { font-size:12px; line-height:1.7; color:#a5b7c8; margin-top:16px; } #error { color:#ff9e98; }
@media(max-width:650px) { header,main { padding:16px; } #stage { height:550px; } #panels { flex-direction:column; } .panel { border-right:0; border-bottom:1px solid #354655; padding:10px; } .toolbar { gap:12px; } }
#compact-legend { display:none; }
.compact header,.compact #notice,.compact #export,.compact .toolbar>label,
.compact #readouts,.compact footer { display:none; }
#toggle-view { display:none; }
.compact #toggle-view { display:inline-block; }
.compact .timeline { padding-top:8px; }
.compact main { max-width:none; padding:0 12px 12px; }
.compact .toolbar { padding:10px 0; gap:18px; }
.compact .toolbar:has(#paths) { display:none; }
.compact #compact-legend { display:flex; gap:18px; align-items:center; flex-wrap:wrap; font-size:12px; }
#compact-legend span { display:inline-flex; gap:7px; align-items:center; }
.legend-arrow { display:inline-block; width:22px; height:3px; background:#7ce5b0; position:relative; }
.legend-arrow:after { content:''; position:absolute; right:-1px; top:-3px; border-left:6px solid #7ce5b0; border-top:4px solid transparent; border-bottom:4px solid transparent; }
.legend-gravity { background:#f2cf78; }
.legend-gravity:after { border-left-color:#f2cf78; }
.legend-applied { background:#ff82ba; }
.legend-applied:after { border-left-color:#ff82ba; }
.legend-path { display:inline-block; width:24px; height:3px; background:linear-gradient(90deg,#73c9ed 25%,#f49d86 25% 50%,#96c77b 50% 75%,#bba2f4 75%); }
.legend-scale { color:#a5b7c8; }
.compact #stage { height:300px; }
.compact .panel { padding:10px 7px; font-size:11px; }
.compact .panel span { padding:3px 4px; }
/* Peg readouts keep a fixed width and reserve three lines as measurements update. */
.compact #panels.insertion-panels:not(.overlay) .panel > span {
  display:block;
  width:100%;
  min-height:calc(3 * 1.4em + 6px);
  line-height:1.4;
  font-variant-numeric:tabular-nums;
}
.compact #error:empty { display:none; }
@media(max-width:650px) {
  .compact #stage { height:400px; }
  .compact #panels { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
  .compact #panels.overlay { display:flex; }
  .compact .panel { border-right:1px solid #354655; border-bottom:1px solid #354655; }
  .compact #panels.insertion-panels:not(.overlay) .panel > span { min-height:calc(5 * 1.4em + 6px); }
  .compact #compact-legend { gap:8px 12px; font-size:11px; flex:1; }
}
@media(max-width:350px) {
  .compact #panels.insertion-panels:not(.overlay) .panel > span { min-height:calc(6 * 1.4em + 6px); }
}

/* Manda editorial palette: warm paper, darker sand stage, olive controls. */
:root { color-scheme:light; color:#211c1a; background:#f8eee8; font-family:"Karla",system-ui,sans-serif; }
p,.eyebrow,footer,.legend-scale { color:#75655e; }
#notice { background:#eee1d7; border-color:#55604a; }
button,select { color:#3d4635; background:#eee3da; border-color:#c6b5a8; }
button:hover { background:#e1d3c6; }
button:focus-visible,select:focus-visible,input:focus-visible { outline:2px solid #55604a; outline-offset:3px; }
#play { background:#3d4635; color:#fdfaf8; border-color:#3d4635; }
#play:hover { background:#55604a; }
#stage { background:#e9ddd3; border-color:#cdbbab; }
.panel,.compact .panel { border-color:#cdbbab; }
.panel span { background:#f8eee8dd; }
#time { accent-color:#55604a; }
#error { color:#a13d32; }
.legend-arrow { background:#28734e; }
.legend-arrow:after { border-left-color:#28734e; }
.legend-gravity { background:#a27617; }
.legend-gravity:after { border-left-color:#a27617; }
.legend-applied { background:#ad4172; }
.legend-applied:after { border-left-color:#ad4172; }
.legend-path { background:linear-gradient(90deg,#315d9e 25%,#b65335 25% 50%,#548344 50% 75%,#88599a 75%); }
.compact.overview main { padding:0; }
.compact.overview #stage { height:260px; border:0; border-radius:0; }
.compact.overview #compact-legend,.compact.overview #toggle-view,
.compact.overview #panels .panel>span { display:none; }
.compact.overview .toolbar,.compact.overview .timeline { display:none; }
.force-history { margin-top:8px; }
.force-history-title { font-size:12px; font-weight:600; }
.force-history-legend { display:flex; flex-wrap:wrap; gap:4px 14px; font-size:11px; font-variant-numeric:tabular-nums; margin:4px 0; }
.force-history svg { display:block; width:100%; height:150px; cursor:crosshair; touch-action:none; overflow:visible; }
.force-history svg text { font:11px system-ui,sans-serif; fill:#65534a; }
.force-history svg:focus-visible { outline:2px solid #55604a; }

/* Deformable mode (index.html?deform=1): same chrome, five routes, no rigid-only controls. */
.deform-only { display:none; }
.deform .deform-only { display:flex; }
.deform #toggle-view { display:inline-block; }
.deform #compact-legend { display:flex; gap:8px 18px; align-items:center; flex-wrap:wrap; font-size:12px; }
.deform #export,.deform .load,.deform .toolbar>label:has(#mode),.deform .toolbar:has(#paths),.deform footer { display:none; }
.deform #panels { display:grid; grid-template-columns:repeat(3,1fr); }
.deform #panels.overlay { display:flex; }
.deform .panel { border-bottom:1px solid #cdbbab; }
.deform #stage { height:560px; }
.compact.deform #stage { height:520px; }
.legend-pad { display:inline-block; width:16px; height:10px; background:#b69a82; }
.legend-outline { display:inline-block; width:22px; height:3px; background:#9f8d80; }
#force-charts svg { display:block; width:100%; height:auto; }
@media(max-width:650px) {
  .compact.deform #stage,.deform #stage { height:640px; }
  .deform #panels,.compact.deform #panels { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:none; grid-auto-rows:1fr; }
  .deform #panels.overlay,.compact.deform #panels.overlay { display:flex; }
}

/* Show the article paper through compact views and avoid nested scrollbars. */
.compact,.compact body { background:transparent; overflow:hidden; }