/* AIM Lab 3D applets: everything the part viewer, the blade shape applet and
   the knit and weave viewers have in common. Each applet's own file keeps only
   what is specific to it. Colour system v3.1 (cool slate greys, violet accent);
   light or dark follows the visitor's system setting. */
:root{
  --grey-50:#F0F4F9; --grey-100:#E6EAF0; --grey-200:#D5DAE1; --grey-300:#C1C7CF; --grey-400:#ABB1BA;
  --grey-500:#949AA4; --grey-600:#7B828C; --grey-700:#5F666F; --grey-800:#454B54; --grey-900:#2C323A;
  --violet-300:#CCC0FE; --violet-400:#B5A7F4; --violet-700:#665CA2; --violet-900:#332E52;
  --ink:#24282F; --paper:#F7F9FB;
  --bg:var(--grey-100); --panel:rgba(247,249,251,.94); --text:var(--ink); --muted:var(--grey-700);
  --line:var(--grey-200); --hover:var(--grey-100); --accent:var(--violet-700); --on-accent:var(--paper); --link:var(--violet-700);
  --edge:#24282F; --halo:var(--grey-100); --swb:rgba(0,0,0,.25); --warn:#935636;
  /* Figure palette for the 2D mechanics drawings: specimen in celadon, loads and
     dimensions in iron, lines in the text colour. Celadon lives only inside figures. */
  --fig-body:#7BA294; --fig-body-edge:#375048; --fig-ghost:#96B9AC; --fig-note:#4B6C61; --fig-load:#B26A45; --fig-dim:#935636; --fig-line:var(--text);
  --font-sans:Arial,"Helvetica Neue",Helvetica,sans-serif;
  --font-serif:Georgia,"Times New Roman",Times,serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:var(--grey-900); --panel:rgba(69,75,84,.94); --text:var(--grey-50); --muted:var(--grey-300);
    --line:var(--grey-700); --hover:var(--grey-700); --accent:var(--violet-400); --on-accent:var(--grey-900); --link:var(--violet-400);
    --edge:#1A1E24; --halo:var(--grey-900); --swb:rgba(255,255,255,.3); --warn:#F6BB9E;
    --fig-body:#62897C; --fig-body-edge:#CDE0D8; --fig-ghost:#4B6C61; --fig-note:#96B9AC; --fig-load:#E8A17E; --fig-dim:#E8A17E;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:var(--grey-900); --panel:rgba(69,75,84,.94); --text:var(--grey-50); --muted:var(--grey-300);
  --line:var(--grey-700); --hover:var(--grey-700); --accent:var(--violet-400); --on-accent:var(--grey-900); --link:var(--violet-400);
  --edge:#1A1E24; --halo:var(--grey-900); --swb:rgba(255,255,255,.3); --warn:#F6BB9E;
  --fig-body:#62897C; --fig-body-edge:#CDE0D8; --fig-ghost:#4B6C61; --fig-note:#96B9AC; --fig-load:#E8A17E; --fig-dim:#E8A17E;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{height:100%;margin:0;background:var(--bg);color:var(--text);font:14px/1.45 var(--font-sans);position:relative;overflow:hidden}
#app{position:relative;height:100%;overflow:hidden}
#view,#stage{position:absolute;inset:0;touch-action:none}
#view canvas,#stage canvas{display:block;width:100%;height:100%;cursor:grab}
#view canvas:active,#stage canvas:active{cursor:grabbing}

/* The controls float over the view; on phones they slide up from the bottom. */
#panel{position:absolute;left:16px;top:16px;z-index:1;width:300px;max-height:calc(100% - 32px);overflow-y:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 30px rgba(36,40,47,.18);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:16px}
#panel header{padding:0 0 10px}
.eyebrow{margin:0 0 8px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
h1{font:700 1.25rem/1.15 var(--font-sans);margin:0 0 4px;letter-spacing:-.01em}
.lede{margin:0 0 12px;font-size:.9rem;line-height:1.35;color:var(--muted)}
.hint{margin:14px 0 0;color:var(--muted);font-size:11.5px;line-height:1.5}
.hint .sw{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:-1px}

/* Groups and controls */
.grp{border-top:1px solid var(--line);padding-top:12px;margin-top:14px}
.grp:first-of-type{border-top:0;margin-top:0;padding-top:0}
.ctl{margin:10px 0}
.lbl{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13px;margin:10px 0 4px}
.lbl b{font-weight:500;font-variant-numeric:tabular-nums}
input[type=range]{width:100%;accent-color:var(--accent);margin:0}
.seg{display:flex;gap:5px;margin-top:4px}
.seg button{flex:1;padding:6px 0}
.seg button.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.chk{display:flex;align-items:center;gap:8px;margin:8px 0;cursor:pointer;font-size:13px}
.chk input{accent-color:var(--accent);width:16px;height:16px;margin:0}
button{font:inherit;font-size:.88rem;color:var(--text);background:transparent;border:1px solid var(--line);border-radius:6px;padding:5px 10px;cursor:pointer}
button:hover{background:var(--hover)}
select{width:100%;font:inherit;font-size:.9rem;color:var(--text);background:transparent;border:1px solid var(--line);border-radius:6px;padding:5px 8px}
.btns{display:flex;gap:6px;margin-top:12px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Readouts, credit, and the QR of this page's address, spanning the panel */
.meta{border-top:1px solid var(--line);margin-top:14px;padding-top:10px;font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums}
.meta div{display:flex;justify-content:space-between;gap:8px;padding:2px 0}
.meta b{color:var(--text);font-weight:500}
.credit{border-top:1px solid var(--line);margin-top:14px;padding-top:10px;font-size:11px;color:var(--muted)}
.credit a{color:var(--link)}
.qr{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.qr svg{display:block;width:100%;height:auto;background:#fff;padding:8px;border-radius:6px}

/* Insets: a small figure in the panel (the blade's root section, a cross-section) */
.inset{border:1px solid var(--line);background:var(--bg);margin:0 0 10px}
.inset svg{width:100%;max-width:300px;height:auto;display:block;margin:0 auto}   /* the drawing stays small on a wide sheet */
.inset-label{margin:0 0 10px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* 2D mechanics applets: the view starts beside the panel, so the drawing centres in the free area; the formula sits under it */
#view:has(> svg){left:332px}
#view > svg{position:absolute;inset:0;width:100%;height:100%}
.formula-line{position:absolute;left:calc(50% + 166px);bottom:18px;transform:translateX(-50%);max-width:calc(100% - 380px);margin:0;
  text-align:center;font:italic 15px/1.5 var(--font-serif);color:var(--text)}
.formula-line a{font:12px var(--font-sans);font-style:normal;color:var(--link);margin-left:10px;white-space:nowrap}
em.formula{font-family:var(--font-serif);font-style:italic}
.ctl label{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13px}
.ctl label em{font-family:var(--font-serif);font-style:italic}
.ctl output{font-variant-numeric:tabular-nums;font-weight:500}
.ctl .hint{margin:2px 0 0;font-size:11px;line-height:1.35}
.meta dt{color:var(--muted)}
.meta dd{margin:0;font-variant-numeric:tabular-nums}
.meta .big dd{font-weight:700;font-size:15px;color:var(--text)}
.warn{font-size:12px;color:var(--warn);border:1px solid var(--warn);border-radius:6px;padding:8px 10px;margin:10px 0 0}
.series{margin:12px 0 0;font-size:11.5px;line-height:1.5;color:var(--muted)}
.series a{color:var(--link)}
.xdim{stroke:var(--fig-note);stroke-width:1}
.xlbl{font:13px var(--font-sans);fill:var(--fig-note)}

/* Over the view */
#overlay{position:absolute;right:14px;bottom:12px;color:var(--muted);font-size:11.5px;text-align:right;pointer-events:none}
#err{position:absolute;inset:auto 16px 16px auto;max-width:360px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px 14px;display:none}
#status{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--muted);font-size:.9rem;pointer-events:none}
#toggle{display:none}

@media (max-width:720px){
  #panel{left:8px;right:8px;top:auto;bottom:8px;width:auto;max-height:58%;transform:translateY(calc(100% + 16px));transition:transform .22s ease}
  #panel.open{transform:none}
  #toggle{display:block;position:absolute;right:12px;bottom:12px;z-index:2;background:var(--panel);font-weight:700;padding:9px 14px}
  #panel.open ~ #toggle{bottom:auto;top:12px}
  #overlay{right:auto;left:14px;text-align:left}
  #view:has(> svg){left:0}
  #view:has(> svg):has(~ #panel.open){bottom:calc(58% + 8px)}   /* the sheet's height plus its margin */
  .formula-line{left:50%;bottom:58px;max-width:calc(100% - 32px)}
  .formula-line:has(~ #panel.open){bottom:calc(58% + 12px)}
  .qr{display:none}
}
@media (prefers-reduced-motion:reduce){ #panel{transition:none} }