/* Famulus Science · animated demo (assets/demo.js). Idiom of the Famulus Academic demo, with a drawn workbench
   window instead of a phone. Oxford blue + gold. */
.fd{--o:#00152e;--o2:#002147;--g:#c4a15a;--gd:#8c6d2a;--cream:#fffdf8;margin:8px 0 26px}
.fd-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0 0 18px}
.fd-tab{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:999px;padding:7px 12px 7px 10px;font:600 13.5px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;cursor:pointer;position:relative;overflow:hidden}
.fd-tab svg{width:19px;height:19px;stroke:var(--gold);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.fd-tab[aria-selected="true"]{background:var(--o2);border-color:var(--o2);color:#fffdf8}
.fd-tab .fd-tp{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--g)}
.fd-tab:focus-visible,.fd-btn:focus-visible,.fd-step:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.fd-win{position:relative;border-radius:22px;background:radial-gradient(120% 90% at 30% 0%,#123158 0%,var(--o) 62%);
  border:1px solid rgba(196,161,90,.5);box-shadow:0 40px 80px -36px rgba(0,0,0,.6),0 0 70px -24px rgba(196,161,90,.35);
  padding:26px 24px 16px;color:var(--cream);overflow:hidden}
.fd-stage{display:grid;grid-template-columns:minmax(200px,290px) 1fr;align-items:center;gap:26px;min-width:0}

.fd-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.fd-step{display:grid;grid-template-columns:28px 1fr;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:transparent;
  color:#b7c0cf;padding:7px 10px;border-radius:10px;font:500 14.5px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;cursor:pointer;transition:background .35s,color .35s}
.fd-step b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid rgba(196,161,90,.55);font:600 13px/1 inherit;color:var(--g);transition:all .35s}
.fd-step.done b{background:rgba(196,161,90,.18)}
.fd-step.on{background:rgba(255,253,248,.08);color:#fffdf8}
.fd-step.on b{background:var(--g);color:var(--o);border-color:var(--g)}
.fd-step:hover{color:#fffdf8}

/* the drawn workbench window */
.fd-app{display:grid;grid-template-columns:48px 1fr;min-height:340px;border-radius:14px;overflow:hidden;background:#fffdf8;color:#1d2433;
  box-shadow:0 24px 50px -24px rgba(0,0,0,.7);border:1px solid rgba(196,161,90,.4);min-width:0}
.fd-rail{background:var(--o2);display:flex;flex-direction:column;align-items:center;gap:2px;padding:38px 0 10px}
.fd-ri{display:grid;place-items:center;width:32px;height:30px;border-radius:8px;transition:background .4s}
.fd-ri svg{width:18px;height:18px;stroke:#8fa0bb;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s}
.fd-ri.on{background:rgba(196,161,90,.22)}.fd-ri.on svg{stroke:var(--g)}
.fd-main{display:flex;flex-direction:column;min-width:0}
.fd-bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-bottom:1px solid #ece5d4;background:#f6f1e7}
.fd-bar i{width:10px;height:10px;border-radius:50%;background:#d9cfb9}
.fd-bar span{margin-left:8px;font:600 12px/1 -apple-system,system-ui,sans-serif;color:#5b6475;letter-spacing:.04em}
.fd-pane{padding:16px 18px 18px;display:flex;flex-direction:column;gap:9px;font:14.5px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;min-width:0}
.fd-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:15.5px;color:var(--o2);margin-bottom:2px}
.fd-h svg{width:22px;height:22px;stroke:var(--gd);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fd-sample{font:600 10.5px/1 -apple-system,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#8a6d2c;border:1px solid #d8c597;border-radius:999px;padding:3px 7px;margin-left:auto}
.fd-src{font-size:12.5px;color:#5b6475;border-top:1px dashed #d8cdb4;padding-top:7px;margin-top:2px}
.fd-meta{color:#3a4458;font-size:14px}

/* staged reveal */
.st{opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s ease}
.st.in{opacity:1;transform:none}

.fd-scan{display:grid;grid-template-columns:80px 1fr;align-items:center;gap:10px;font-size:13px;color:#3a4458}
.fd-scan i{height:6px;border-radius:3px;background:#ece5d4;position:relative;overflow:hidden}
.fd-scan.in i:after{content:"";position:absolute;inset:0;width:0;background:var(--g);animation:fd-fill 1.6s ease forwards}
@keyframes fd-fill{to{width:100%}}
.fd-funnel{display:flex;flex-direction:column;gap:7px}
.fd-funnel div{width:var(--w);min-width:120px;background:color-mix(in srgb,var(--o2) 10%,#fff);border-left:4px solid var(--g);border-radius:6px;padding:6px 10px;font-size:13px;color:#3a4458}
.fd-funnel b{font:600 18px/1 "EB Garamond",Georgia,serif;color:var(--o2);margin-right:8px}
.fd-row{display:flex;align-items:baseline;gap:9px;font-size:14px}
.fd-tag{flex:none;font:600 11.5px/1 -apple-system,system-ui,sans-serif;border-radius:999px;padding:4px 8px;background:#ece5d4;color:#3a4458}
.fd-tag.ok{background:#e4ecd9;color:#3d5a1e}.fd-tag.no{background:#f3dfd8;color:#7a2e1a}
.fd-paper{border:1px solid #e3dac6;border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:3px}
.fd-paper b{font:500 17px/1.2 "EB Garamond",Georgia,serif;color:var(--o2)}.fd-paper > span{font-size:12.5px;color:#5b6475}
.fd-go{display:inline-flex;align-self:flex-start;align-items:center;gap:6px;background:var(--o2);color:#fffdf8;border-radius:9px;padding:7px 12px;font-weight:600;font-size:13.5px}
.fd-go svg{width:16px;height:16px;stroke:var(--g);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fd-claim{display:grid;grid-template-columns:30px 1fr auto;gap:8px;align-items:baseline;border-left:3px solid var(--g);padding:4px 0 4px 10px}
.fd-claim b{color:var(--gd)}.fd-claim small{color:#5b6475}
.fd-arg{width:100%;max-width:420px;height:auto}
.fd-arg rect{fill:#f6f1e7;stroke:var(--o2);stroke-width:1.2}.fd-arg rect.weak{stroke:#b4492b;stroke-dasharray:4 3}.fd-arg rect.concl{fill:var(--o2)}
.fd-arg path{stroke:var(--gd);stroke-width:1.6;fill:none}
.fd-arg text{font:600 11px -apple-system,system-ui,sans-serif;fill:#1d2433;text-anchor:middle}
.fd-arg text:last-of-type{fill:#fffdf8}
.fd-formula{font:500 24px/1.2 "EB Garamond",Georgia,serif;color:var(--o2);background:#f6f1e7;border-radius:10px;padding:10px 14px;align-self:flex-start}
.fd-verdict{display:grid;grid-template-columns:30px 130px 1fr;align-items:center;gap:8px;font-size:14px}
.fd-verdict b{color:var(--gd)}
.fd-verdict i{height:8px;border-radius:4px;background:#ece5d4;position:relative;overflow:hidden}
.fd-verdict i:after{content:"";position:absolute;inset:0;width:var(--v);background:var(--o2)}
.fd-nb{font:italic 500 18px/1.35 "EB Garamond",Georgia,serif;color:#1d2433;background:repeating-linear-gradient(#fffdf8 0 25px,#e9e1cf 25px 26px);border-left:3px solid #c98a7a;padding:4px 12px}
.fd-hyp{display:grid;grid-template-columns:24px 1fr;gap:4px 10px;align-items:start;border:1px solid #e3dac6;border-radius:10px;padding:9px 11px}
.fd-hyp svg{width:22px;height:22px;fill:none;stroke-width:2;stroke-linecap:round}
.fd-hyp.no svg{stroke:#b4492b}.fd-hyp.open svg{stroke:var(--gd)}
.fd-hyp > span{display:flex;flex-direction:column}.fd-hyp > span > b{display:block}.fd-hyp > span b{color:var(--o2)}
.fd-hyp.no > span{text-decoration:line-through;text-decoration-color:#b4492b;color:#5b6475}
.fd-hyp em{grid-column:2;font-size:12.5px;color:#5b6475;font-style:normal}
.fd-pred{display:flex;gap:8px;align-items:baseline;font-size:14px}.fd-pred b{color:var(--gd)}
.fd-pred.ok{align-items:center;background:#e4ecd9;border-radius:9px;padding:7px 10px;color:#3d5a1e;font-weight:600}
.fd-pred.ok svg{width:18px;height:18px;stroke:#3d5a1e;fill:none;stroke-width:2.2;flex:none}
.fd-cycle,.fd-cvl{width:100%;max-width:420px;height:auto}
.fd-cycle .ring{fill:none;stroke:var(--g);stroke-width:2.2;stroke-dasharray:6 5}
.fd-cycle.in .ring{animation:fd-spin 8s linear infinite;transform-origin:150px 75px}
@keyframes fd-spin{to{stroke-dashoffset:-110}}
.fd-cycle .n circle{fill:var(--o2)}
.fd-cycle path{stroke:var(--o2);stroke-width:1.6;fill:none;marker-end:none}
.fd-cycle text,.fd-cvl text{font:600 12px -apple-system,system-ui,sans-serif;fill:#1d2433;text-anchor:middle}
.fd-cvl .f circle{fill:#f6f1e7;stroke:var(--o2);stroke-width:1.4}
.fd-cvl path{stroke:var(--o2);stroke-width:1.5;fill:none}.fd-cvl path.e{marker-end:url(#fdh)}.fd-cvl path.arc{stroke:var(--g);stroke-width:2}
.fd-tb{border-collapse:collapse;font-size:13.5px;align-self:flex-start}
.fd-tb th,.fd-tb td{padding:4px 14px;border-bottom:1px solid #ece5d4;text-align:center}
.fd-tb th{color:var(--o2)}.fd-tb td.y{color:var(--gd);font-weight:700}
.fd-doc{border:1px solid #e3dac6;border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:7px}
.fd-doc i{display:block;height:6px;border-radius:3px;background:#d7dbe2;width:var(--w,100%)}
.fd-doc i.hd{height:9px;width:46%;background:var(--g)}
.fd-ref{font-size:11.5px;color:var(--gd);font-weight:600}
.fd-share{display:flex;gap:10px;flex-wrap:wrap}
.fd-share > span{display:flex;flex-direction:column;align-items:center;gap:6px;border:1px solid #e3dac6;border-radius:12px;padding:12px 14px;font-size:13px;min-width:96px}
.fd-share svg{width:26px;height:26px;stroke:var(--o2);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

.fd-cap{display:none}
.fd-ctl{display:flex;justify-content:center;gap:10px;margin-top:14px}
.fd-btn{width:38px;height:38px;border-radius:50%;border:1px solid rgba(196,161,90,.55);background:transparent;display:grid;place-items:center;cursor:pointer}
.fd-btn svg{width:18px;height:18px;stroke:var(--g);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fd-btn.play svg{fill:var(--g)}

@media (max-width:820px){
  .fd-win{padding:16px 12px 12px}
  .fd-stage{grid-template-columns:1fr;gap:12px}
  .fd-steps{display:none}
  .fd-cap{display:block;border-left:3px solid var(--g);padding:6px 10px;margin-top:12px;font:500 14.5px/1.35 -apple-system,system-ui,sans-serif;color:#fffdf8;min-height:3.2em}
  .fd-app{grid-template-columns:38px 1fr;min-height:330px}
  .fd-ri{width:28px;height:28px}.fd-ri svg{width:17px;height:17px}
  .fd-pane{padding:12px}
  .fd-sample{margin-left:0}
}
@media (prefers-reduced-motion:reduce){.st{transition:none}.fd-cycle.in .ring,.fd-scan.in i:after{animation:none}.fd-scan i:after{width:100%}}

/* agenda scene */
.fd-ms{display:grid;grid-template-columns:14px 34px 1fr auto;align-items:center;gap:8px;font-size:14px;border-bottom:1px solid #efe8d8;padding:5px 0}
.fd-ms i{width:12px;height:12px;border-radius:50%;border:2px solid #c9bfa6}
.fd-ms.done i{background:var(--o2);border-color:var(--o2)}.fd-ms.run i{border-color:var(--g);background:radial-gradient(circle,var(--g) 0 45%,transparent 50%)}
.fd-ms b{color:var(--gd)}.fd-ms small{color:#5b6475;font-size:12px}
.fd-req{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:9px;font-size:14px;border:1px solid #e3dac6;border-radius:10px;padding:8px 10px}
.fd-req svg,.fd-mail svg{width:20px;height:20px;stroke:var(--o2);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fd-req em{font-style:normal;font-size:12px;color:#8a6d2c}.fd-req em.ok{color:#3d5a1e;font-weight:600}
.fd-mail{display:grid;grid-template-columns:22px 1fr;gap:9px;align-items:start;background:#f6f1e7;border-radius:10px;padding:9px 11px;font-size:14px}
.fd-mail > span b{display:block;color:var(--o2)}

/* research day: who does what */
.fd-clock{margin-left:auto;display:flex;align-items:center;gap:5px;font:600 12.5px/1 -apple-system,system-ui,sans-serif;color:var(--o2)}
.fd-clock svg{width:15px;height:15px;stroke:var(--gd);fill:none;stroke-width:1.8;stroke-linecap:round}
.fd-win.night .fd-bar{background:#1b2c47;border-bottom-color:#2a3d5c}.fd-win.night .fd-clock{color:#e2cb8f}.fd-win.night .fd-clock svg{stroke:#e2cb8f}
.fd-win.night .fd-pane{background:linear-gradient(#f1ecdf,#fffdf8 60%)}
.fd-win{transition:background .8s}.fd-win.night{background:radial-gradient(120% 90% at 30% 0%,#0a1c36 0%,#000a18 70%)}
.fd-who{display:grid;gap:6px;margin:0 0 4px}
.fd-who > div{display:grid;grid-template-columns:22px 64px 1fr;align-items:start;gap:8px;border-radius:10px;padding:8px 10px;font-size:14px;line-height:1.35}
.fd-who svg{width:20px;height:20px;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fd-who .you{background:#eef0f4}.fd-who .you svg{stroke:#3a4458}.fd-who .you b{color:#3a4458}
.fd-who .fam{background:#002147;color:#fffdf8}.fd-who .fam svg{stroke:#e2cb8f;fill:rgba(226,203,143,.25)}.fd-who .fam b{color:#e2cb8f}
.fd-t{display:inline-block;font-style:normal;font:600 11.5px/1 -apple-system,system-ui,sans-serif;color:var(--g);border:1px solid rgba(196,161,90,.5);border-radius:5px;padding:2px 4px;margin-right:6px;vertical-align:1px}
.fd-done{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
.fd-done > span{display:flex;align-items:center;gap:7px;font-size:13.5px}
.fd-done svg{width:17px;height:17px;flex:none;stroke:#3d5a1e;fill:none;stroke-width:2.4;stroke-linecap:round}
@media (max-width:820px){.fd-who > div{grid-template-columns:20px 1fr;gap:2px 8px}.fd-who svg{grid-row:span 2}.fd-who > div > b,.fd-who > div > span{grid-column:2}.fd-done{grid-template-columns:1fr}}

/* overall work plan */
.fd-plan{display:flex;flex-direction:column;gap:8px}
.fd-plan > div{display:grid;grid-template-columns:22px 1fr;gap:8px;align-items:center}
.fd-plan > div > b{color:var(--gd)}
.fd-plan > div > span{position:relative;height:26px;background:repeating-linear-gradient(90deg,#efe8d8 0 1px,transparent 1px 20%)}
.fd-plan i{position:absolute;left:var(--x);width:var(--w);top:2px;bottom:2px;border-radius:6px;background:#dfe4ec;color:#1d2433;font:600 11.5px/22px -apple-system,system-ui,sans-serif;font-style:normal;padding:0 7px;white-space:nowrap;overflow:hidden}
.fd-plan i.d{background:var(--o2);color:#fffdf8}.fd-plan i.r{background:var(--g);color:#00152e}
.fd-plan em{font-style:normal;font-size:12.5px;color:#5b6475}
@media (prefers-color-scheme:dark){.fd-tab[aria-selected="true"]{background:#c4a15a;border-color:#c4a15a;color:#00152e}.fd-tab[aria-selected="true"] svg{stroke:#00152e}}

/* history player (training): sepia scheme, clearly apart from the offer player */
.fd--hist .fd-win{background:radial-gradient(120% 90% at 30% 0%,#5a4423 0%,#2a1f10 70%);border-color:rgba(196,161,90,.7)}
.fd--hist .fd-tab{background:#fbf6ea;border-color:#dccfb2;color:#2b2418}
.fd--hist .fd-tab[aria-selected="true"]{background:#4a3410;border-color:#4a3410;color:#fbf6ea}
.fd--hist .fd-tab[aria-selected="true"] svg{stroke:#e2cb8f}
.fd--hist .fd-rail{background:#4a3410}.fd--hist .fd-app{background:#fffaf0}
.fd--hist .fd-bar{background:#f3ead6}
.fd-fact{display:grid;grid-template-columns:1fr;gap:2px;border-left:3px solid var(--g);padding:3px 0 3px 10px;font-size:14px}
.fd-fact em{font:600 11px/1.2 -apple-system,system-ui,sans-serif;font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--gd)}
.fd-fact small{font-size:11.5px;color:#5b6475}
.fd-rg{width:100%;max-width:380px;height:auto}.fd-rg circle{fill:#002147}.fd-rg circle.u{fill:none;stroke:#8c6d2a;stroke-width:1.5;stroke-dasharray:3 2}
.fd-rg path{stroke:#002147;stroke-width:1.5;fill:none}.fd-rg path.q{stroke:#8c6d2a;stroke-dasharray:4 3}
.fd-rg text{font:600 11px -apple-system,system-ui,sans-serif;fill:#1d2433;text-anchor:middle}
.fd-qp{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12.5px}.fd-qp b{width:100%;color:#4a3410;font-size:12.5px}
.fd-qp span{border:1px dashed #9a7428;border-radius:999px;padding:3px 9px;color:#4a3410}
@media (prefers-color-scheme:dark){.fd--hist .fd-tab[aria-selected="true"]{background:#c4a15a;color:#2a1f10}}
.fd--hist .fd-stage{align-items:start}