/* The diagram page: the stage, the part panel, the caption band. Lifted from the library's diagram.html so the free page and the members' page share it. */
  html,body{height:100%}
  body{display:flex;flex-direction:column;min-height:100dvh}
  .top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 18px;border-bottom:2px solid var(--ink)}
  .top h1{font-size:clamp(22px,4vw,34px);margin:0}
  .top .eyebrow{display:block;margin-bottom:2px}
  .modes{display:flex;gap:6px}
  .modes button,.replay{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;background:var(--paper);color:var(--ink);border:1px solid var(--ink);padding:7px 12px;cursor:pointer}
  .modes button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
  .modes button:focus-visible,.replay:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
  @media (max-width:600px){.top{flex-direction:column;align-items:flex-start;gap:8px;padding:10px 14px}.top .eyebrow{white-space:nowrap}.top h1{font-size:22px}}
  .body{display:flex;flex:1;min-height:0}
  .stage{position:relative;flex:1;min-height:360px;background:#F4F2EC;overflow:hidden}
  .stage .hint{position:absolute;right:12px;top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#7C8794;background:rgba(244,242,236,.85);padding:4px 8px;pointer-events:none}
  body.clip .stage .hint{display:none}
  .panel{width:0;flex:none;overflow:hidden;background:var(--paper);border-left:2px solid var(--ink);transition:width .25s;display:flex;flex-direction:column}
  .panel.open{width:min(420px,44vw)}
  .panel .ph{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:14px 18px 10px;border-bottom:1px solid var(--rule)}
  .panel h2{font-family:var(--disp);font-size:28px;font-weight:700;text-transform:uppercase;line-height:1;margin:0 0 4px}
  .panel .sum{margin:0;font-size:13.5px;color:var(--ink-2);max-width:40ch}
  .panel .st{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-ink);margin-top:6px}
  .panel .x{font-family:var(--mono);font-size:12px;background:var(--paper);color:var(--ink);border:1px solid var(--ink);padding:6px 10px;cursor:pointer;white-space:nowrap}
  .panel .x:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
  .panel .pb{flex:1;min-height:0;overflow:auto;padding:0 18px 30px;font-size:14.5px;line-height:1.55}
  .panel .q{padding:12px 0;border-top:1px solid var(--rule)}.panel .q:first-child{border-top:0}
  .panel .q h3{margin:0 0 6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);font-weight:500}
  .panel .q.flow h3{color:var(--orange-ink)}.panel .q.flow{background:var(--blue-soft);margin:0 -18px;padding:12px 18px}
  .panel .q p{margin:0 0 8px;max-width:62ch}.panel .q p:last-child{margin:0}.panel .q h4{font-size:13.5px;margin:10px 0 4px}
  .panel .q ul{margin:4px 0 8px;padding-left:20px}.panel .q li{margin:3px 0}
  .panel .q.sources{font-size:12.5px;color:var(--ink-2)}.panel .q a{color:var(--blue);word-break:break-all}
  .panel table{font-size:12.5px}.panel mark{background:#FFE7B0;color:inherit;padding:0 3px}
  .panel .list{padding:10px 18px 20px}.panel .list button{display:block;width:100%;text-align:left;font:inherit;font-size:13.5px;background:none;border:0;border-bottom:1px dotted var(--rule);padding:7px 0;color:var(--ink);cursor:pointer}
  .panel .list button b{font-weight:600}.panel .list button span{color:var(--ink-3);font-size:12px;display:block}
  .panel .list button:hover b,.panel .list button:focus-visible b{color:var(--orange-ink)}
  .modes .parts{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;background:var(--paper);color:var(--blue);border:1px solid var(--blue);padding:7px 12px;cursor:pointer}
  body.held .cap p{opacity:.5}
  @media (max-width:760px){body.held .cap{cursor:pointer}body.held .cap:not(.more) p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}body.held .cap:not(.more){grid-template-columns:auto minmax(0,1fr)}}
  @media (max-width:760px){.body{flex-direction:column}.panel{width:auto;height:0;border-left:0;border-top:2px solid var(--ink);transition:height .25s}.panel.open{width:auto;height:38dvh}.stage{min-height:36dvh}.cap{padding:8px 14px 10px;gap:8px}.cap p{font-size:14px}.cap .n{font-size:10px}}
  body.clip .panel,body.clip .body{display:contents}
  .stage svg{position:absolute;inset:0;width:100%;height:100%;display:block}
  .cap{background:var(--paper);padding:12px 18px 16px;border-top:1px solid var(--rule);display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:start}
  .cap .n{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-ink);padding-top:4px;white-space:nowrap}
  .cap p{margin:0;font-size:clamp(15px,2.2vw,19px);line-height:1.4;max-width:68ch;transition:opacity .18s}
  .cap p.fade{opacity:0}
  .bar{height:4px;background:var(--rule)}.bar i{display:block;height:100%;width:0;background:var(--orange)}
  /* clip frame: 1080×1920, caption in the top band, progress at the bottom */
  body.clip{width:1080px;height:1920px;min-height:0;overflow:hidden;background:#F4F2EC;color:#1B2430}
  body.clip .top,body.clip .cap{display:none}
  body.clip .stage{position:absolute;inset:0;flex:none}
  .clipcap{display:none}
  body.clip .clipcap{display:block;position:absolute;left:0;right:0;top:0;height:27%;padding:64px 64px 0;box-sizing:border-box;z-index:2;background:linear-gradient(#F4F2EC 84%,rgba(244,242,236,0))}
  .clipcap .eyebrow{font-size:20px;letter-spacing:.14em;color:#B84E15}
  .clipcap h1{font-family:'Barlow Condensed','IBM Plex Sans Condensed','Arial Narrow',sans-serif;font-size:74px;line-height:.95;margin:6px 0 22px;text-transform:uppercase;color:#1B2430}
  .clipcap p{font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:37px;line-height:1.3;margin:0;color:#1B2430;transition:opacity .18s}
  .clipcap p.fade{opacity:0}
  .clipfoot{display:none}
  body.clip .clipfoot{display:block;position:absolute;left:0;right:0;bottom:0;height:9%;z-index:1;background:#F4F2EC}
  .clipdetail{display:none}
  body.clip .clipdetail{display:block;position:absolute;left:0;right:0;top:56%;height:35%;z-index:2;background:#F4F2EC;border-top:2px solid #1B2430;border-bottom:2px solid #1B2430;overflow:hidden}
  body.clip .clipdetail[hidden]{display:none}
  .clipdetail .dt{position:absolute;left:0;right:0;top:0;padding:10px 18px;font-family:'IBM Plex Mono',monospace;font-size:19px;letter-spacing:.1em;text-transform:uppercase;color:#B84E15;background:#F4F2EC;border-bottom:1px solid #D9D4C9}
  .clipdetail svg{position:absolute;left:0;top:44px;width:100%;height:calc(100% - 44px)}
  .pdetail{display:none;flex:none;width:100%;height:clamp(200px,24vw,300px);border-bottom:1px solid var(--rule);background:#F4F2EC}
  @media (max-width:760px){.pdetail{height:150px}}
  .pdetail.on{display:block}
  .clipbar{display:none}
  body.clip .clipbar{display:block;position:absolute;left:64px;right:64px;bottom:60px;height:8px;background:#D9D4C9;z-index:2}
  .clipbar i{display:block;height:100%;width:0;background:#E0621F}
  .clipstep{display:none}
  body.clip .clipstep{display:block;position:absolute;left:64px;bottom:84px;z-index:2;font-family:'IBM Plex Mono',monospace;font-size:22px;letter-spacing:.12em;text-transform:uppercase;color:#7C8794}