/* ============================================================
   Foundations — the Biology Hub's shelf for IGCSE 0610 topics 2–5: the zoom
   This shelf's own look: the picture is the page. A dark field edge to edge, a size ruler down the left
   (1 m to 10 nm, the seven levels at their real sizes), and one caption card that says what the level is,
   in the words the exam uses. Everything else opens when asked for.
   ============================================================ */
:root{
  --deep:#0E141B; --field:#1D2733; --glass:rgba(14,20,27,.74); --glass-2:rgba(14,20,27,.55);
  --line:rgba(255,255,255,.12); --line-2:rgba(255,255,255,.22);
  --text:#E9EEF3; --muted:#9FB0C0; --dim:#6D7E8E;
  --accent:#8FE3C8; --accent-ink:#0E2A22;
  --topic:#E879F9;   /* the Foundations door's own colour on the front door */
  --syl:#1E7A3E; --beyond:#7A6B52; --ink:#1A1A1A; --grey:#6B6B6B;
  --sans:Inter,"Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:12px; --r-lg:18px; --r-pill:999px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--deep);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.5;
     -webkit-font-smoothing:antialiased;overflow:hidden;overscroll-behavior:none}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
h1,h2,h3{margin:0;line-height:1.2}
a{color:inherit}

.zoom{position:fixed;inset:0;overflow:hidden;background:var(--field)}
.zoom__gl{position:absolute;inset:0}
.zoom__gl canvas{width:100%;height:100%;outline:none}

/* ---------- the header, over the picture ---------- */
.top{position:absolute;left:0;top:0;right:0;z-index:5;padding:12px 18px 26px;pointer-events:none;
     background:linear-gradient(180deg,rgba(14,20,27,.85),rgba(14,20,27,0))}
.top a,.top button{pointer-events:auto}
/* the way back (14 Oct 2026, Daniel: pupils missed it): a solid pill in this site's own colours */
.up{display:inline-flex;align-items:center;flex:none;white-space:nowrap;min-height:34px;margin:0 0 6px;padding:0 16px 0 13px;font:650 14px/1 var(--sans,Inter,system-ui,sans-serif);letter-spacing:0;text-transform:none;color:var(--accent-ink);background:var(--accent);border:0;border-radius:999px;text-decoration:none;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.up:hover,.up:focus-visible{background:#A9ECD6;color:var(--accent-ink);text-decoration:none}
.top__mark{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px}
.top__title{font-size:22px;font-weight:700;letter-spacing:.2px}
.top__sub{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.top__by{font-size:11.5px;color:var(--muted);text-decoration:none;border-bottom:1px dotted currentColor}
.top__by:hover,.top__by:focus-visible{color:var(--text)}

/* ---------- the size ruler ---------- */
.ruler{position:absolute;left:18px;top:96px;bottom:64px;width:218px;z-index:4}
/* the ruler stays readable over a bright picture (the tissue, the cut organ) */
.zoom::before{content:"";position:absolute;left:0;top:0;bottom:0;width:260px;z-index:3;pointer-events:none;
              background:linear-gradient(90deg,rgba(14,20,27,.62),rgba(14,20,27,.38) 70%,rgba(14,20,27,0))}
.stop b,.tick span{text-shadow:0 1px 3px rgba(0,0,0,.85)}
.ruler__scale{position:absolute;left:0;top:0;bottom:0;width:60px}
.ruler__scale::before{content:"";position:absolute;left:44px;top:0;bottom:0;width:1px;background:var(--line-2)}
.tick{position:absolute;left:0;width:60px;height:0;font-family:var(--mono);font-size:10px;color:var(--dim);text-align:right}
.tick span{position:absolute;right:22px;top:-7px;white-space:nowrap}
.tick::after{content:"";position:absolute;right:12px;top:0;width:9px;height:1px;background:var(--line-2)}
.stop{position:absolute;left:38px;transform:translateY(-50%);display:flex;align-items:center;gap:8px;cursor:pointer;
      background:none;border:none;padding:3px 8px 3px 0;color:var(--muted);text-align:left;white-space:nowrap}
.stop::before{content:"";width:13px;height:13px;border-radius:50%;border:2px solid var(--muted);background:var(--deep);flex:none}
.stop b{font-size:13px;font-weight:600;transition:transform .2s}
.stop:hover b,.stop:focus-visible b{color:var(--text);text-decoration:underline}
.stop[aria-current="true"]{color:var(--text)}
.stop[aria-current="true"]::before{border-color:var(--accent);background:var(--accent);box-shadow:0 0 0 5px rgba(143,227,200,.22)}
.stop[aria-current="true"] b{font-size:14.5px;background:var(--glass);border-radius:6px;padding:1px 6px;margin-left:-6px}
.stop.is-done::before{border-color:var(--accent)}
.stop:disabled{cursor:default}

/* the topics, as brackets beside the levels they are about */
.ruler__topics{position:absolute;left:182px;top:0;bottom:0;width:30px}   /* (clear of the current level's name in its pill: "Organ system" ran over the brackets, Daniel 4 Oct) */
.bracket{position:absolute;left:var(--x,0);width:9px;padding:0;cursor:pointer;background:none;border:2px solid var(--topic);
         border-left:none;border-radius:0 6px 6px 0;opacity:.55}
.bracket span{position:absolute;left:12px;top:50%;transform:translateY(-50%);white-space:nowrap;font-size:11.5px;line-height:1.25;
              font-weight:700;color:var(--deep);background:var(--topic);border-radius:var(--r-pill);padding:2px 8px}
.bracket:hover,.bracket:focus-visible,.bracket.is-here{opacity:1}

/* ---------- the caption ---------- */
/* the right-hand column: the photograph or film above and this card below share one width (--colw) and the column's
   height (fitCap in intro.js: the picture at most what the text leaves; Daniel, 4 Oct: the two overlapped, and were
   not the same width) */
.zoom{--colw:clamp(340px,29vw,430px)}
.cap{position:absolute;right:18px;bottom:18px;z-index:6;width:var(--colw);max-height:calc(100% - var(--captop,96px) - 18px);
     display:flex;flex-direction:column;
     background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);
     border-radius:var(--r-lg);padding:13px 16px 12px;box-shadow:0 12px 40px rgba(0,0,0,.35)}
@media (max-width:1100px){.zoom{--colw:330px}}
.cap__eyebrow{margin:0 0 4px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cap__eyebrow b{color:var(--accent);font-weight:500}
#capView{text-transform:none;letter-spacing:.04em}   /* capital µ would read as M */
.cap__def{margin:0;font-size:17px;line-height:1.32;font-weight:600;color:#fff}
.cap__here{margin:6px 0 0;font-size:14px;line-height:1.45;color:#C7D2DC}
.cap__topics{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
.cap__topics:empty{display:none}
.cap__topicslbl{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-right:2px}
.tpill{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:0 6px;font-size:12.5px;line-height:1.3;text-align:left;color:var(--text);text-decoration:none;cursor:pointer;
       background:rgba(232,121,249,.10);border:1px solid rgba(232,121,249,.45);border-radius:var(--r-pill);padding:4px 11px}
.tpill b{color:var(--topic);font-weight:700}
.tpill i{font-style:normal;font-size:11.5px;color:var(--muted)}
.tpill--live{background:rgba(232,121,249,.2);border-color:var(--topic)}
.tpill--live i{color:#fff}
.tpill--x{background:rgba(143,227,200,.1);border-color:rgba(143,227,200,.5)} .tpill--x b{color:var(--accent)}
.tpill:hover{background:rgba(232,121,249,.28)}
.cap__more{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);min-height:0;flex:1 1 auto;overflow:auto;font-size:14px;color:#C7D2DC}
.cap__more p{margin:0 0 8px}
.cap__more b{color:#fff}
.cap__more a{color:#BFE9DA}
.more-open .micro,.more-open .film{visibility:hidden}
.cap__fig{margin:4px 0 10px}
.cap__figimg{position:relative;line-height:0;border-radius:6px;overflow:hidden}
.cap__figimg img{width:100%;height:auto;display:block}
.cap__figimg img+img{position:absolute;inset:0}
.cap__fig figcaption{font-size:12.5px;color:var(--muted);margin-top:5px;line-height:1.4}
.cap{overflow-y:auto;overscroll-behavior:contain}
.cap__go{display:flex;align-items:center;gap:8px;margin-top:12px;position:sticky;bottom:-12px;padding:6px 0 12px;margin-bottom:-12px;
         background:linear-gradient(180deg,rgba(14,20,27,0),rgba(14,20,27,.92) 30%)}
.cap__spacer{flex:1}
/* more to read below: a fade and a label just above the buttons, until the end is reached */
.cap__scroll{position:sticky;bottom:52px;height:0;pointer-events:none;display:none}
.cap.can-scroll .cap__scroll{display:block}
.cap__scroll::before{content:"";position:absolute;left:-16px;right:-16px;bottom:0;height:46px;background:linear-gradient(180deg,rgba(14,20,27,0),rgba(14,20,27,.92))}
.cap__scroll span{position:absolute;right:0;bottom:4px;font-size:11.5px;font-weight:600;color:var(--accent);background:rgba(14,20,27,.9);
                  border:1px solid rgba(143,227,200,.45);border-radius:var(--r-pill);padding:2px 9px;animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@media (prefers-reduced-motion:reduce){.cap__scroll span{animation:none}}
/* a slide shown: the picture first, the text card just its level, definition and buttons; More shows the rest
   (Daniel, 4 Oct: "by default I want to see the histology image big, and if you click More you see more text") */
.zoom.pic-first:not(.more-open) .cap__here,.zoom.pic-first:not(.more-open) .cap__topics{display:none}
.micro .micro__intro b::after{content:"  · click to enlarge";font-size:11.5px;color:var(--muted);font-weight:600}
.micro{cursor:zoom-in}
/* a slide enlarged: in the middle of the screen, as big as it fits; a press (or Esc) puts it back */
.zoom.pic-big::after{content:"";position:absolute;inset:0;background:rgba(5,9,13,.62);z-index:25;cursor:zoom-out}
.micro.is-big{right:auto;left:50%;top:50%;transform:translate(-50%,-50%);width:max-content;max-width:96vw;z-index:30;cursor:zoom-out}
.micro.is-big .micro__intro b::after{content:"  · click to close"}
.micro.is-big figcaption{display:block}
/* (a short screen: the slide's sentence waits for the enlarged view; its heading stays) */
@media (max-height:780px){.zoom.pic-first .micro:not(.is-big) .micro__intro{font-size:0;padding-bottom:7px} .zoom.pic-first .micro:not(.is-big) .micro__intro b{margin-bottom:0}
  .zoom.pic-first .micro:not(.is-big) .key{display:none}}   /* (the colours' key too: the names in the 3D wear the same colours) */
.micro--callouts.is-big{grid-template-columns:170px auto}
/* the text given the whole column: the photograph shrinks to its heading (a press on the heading brings it back) */
.text-first .micro .micro__img,.text-first .micro .micro__labels,.text-first .micro .micro__lines,.text-first .micro .key,.text-first .micro figcaption{display:none}
.text-first .micro{cursor:pointer} .text-first .micro .micro__intro b::after{content:"  ▸ Show the picture"}
/* a slide's own button hides its picture (Daniel, 7 Oct: "you should be able to minimise the images to see the 3D better");
   a press on what is left of it brings the picture back */
/* (a quiet glass pill like the page's other small buttons: a thin border, a chevron, "Hide"; the accent on hover) */
.micro__min{position:absolute;top:8px;right:8px;z-index:3;display:flex;align-items:center;gap:4px;height:22px;padding:0 9px 0 7px;
            border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.08);color:#DCE5EC;
            font-family:inherit;font-size:11px;font-weight:600;line-height:1;letter-spacing:.02em;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.micro__min svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.micro__min:hover,.micro__min:focus-visible{background:rgba(143,227,200,.14);border-color:var(--accent);color:var(--accent);outline:none}
.micro__min::before{content:"";position:absolute;inset:-8px}   /* (a finger's worth to press, the pill stays small) */
.micro .micro__intro{padding-right:72px}
.text-first .micro__min,.micro.is-big .micro__min{display:none}
.text-first .micro .micro__intro{padding-right:12px}
.cap{cursor:default}
.chips{list-style:none;margin:6px 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:var(--r);padding:6px 10px;line-height:1.25}
.chips b{display:block;font-size:17px;font-variant-numeric:tabular-nums}
.chips span{font-size:12px;color:var(--muted)}
.hint{font-size:13.5px;color:var(--muted)}
.btn{border:1px solid var(--line-2);border-radius:var(--r-pill);padding:8px 15px;font-size:14px;font-weight:600;cursor:pointer;
     background:rgba(255,255,255,.06);color:var(--text);white-space:nowrap}
.btn:hover{background:rgba(255,255,255,.12)}
.btn--go{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);
         white-space:normal;flex:0 1 auto;min-width:0;line-height:1.25;text-align:center}   /* (a long one wraps inside the card) */
.btn--go:hover{background:#A8EDD7}
.btn--go b{font-family:var(--mono);font-weight:600}
.btn--more[aria-expanded="true"]{background:rgba(255,255,255,.14)}
.btn:disabled{opacity:.55;cursor:default}

/* ---------- things on the picture ---------- */
.scalebar{position:absolute;left:230px;bottom:22px;z-index:4;display:flex;flex-direction:column;align-items:flex-start;gap:4px;
          font-family:var(--mono);font-size:11.5px;font-weight:500;color:var(--text);text-shadow:0 1px 2px rgba(0,0,0,.7);pointer-events:none}
.scalebar i{display:block;height:3px;width:80px;background:var(--text);border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,.6);transition:width .25s}
.topbtns{position:absolute;right:18px;top:16px;z-index:6;display:flex;gap:6px}
.aboutbtn{cursor:pointer;font-size:12.5px;color:var(--muted);
          background:var(--glass-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 13px}
.aboutbtn:hover{color:var(--text)}
.sylswitch{position:absolute;right:18px;top:58px;z-index:6;cursor:pointer;font-size:13px;font-weight:600;
           background:var(--glass);backdrop-filter:blur(6px);color:var(--text);border:1px solid var(--line-2);
           border-radius:var(--r-pill);padding:8px 14px 8px 34px;
           background-image:radial-gradient(circle at 17px 50%,transparent 6px,rgba(255,255,255,.55) 6.5px,transparent 7.5px)}
.sylswitch[aria-pressed="true"]{background-color:#E8F1EA;color:var(--syl);border-color:#BFD8C6;
           background-image:radial-gradient(circle at 17px 50%,var(--syl) 5px,transparent 5.5px)}

.tapcard{position:absolute;z-index:7;width:min(290px,calc(100% - 28px));background:rgba(250,248,242,.97);color:var(--ink);
         border-radius:var(--r);box-shadow:0 8px 28px rgba(0,0,0,.4);padding:12px 14px;border-top:4px solid var(--c,#888)}
.tapcard__x{position:absolute;right:6px;top:6px;width:26px;height:26px;border-radius:50%;border:none;background:none;font-size:18px;line-height:1;color:var(--grey);cursor:pointer}
.tapcard__x:hover{background:#EFE8DC}
.tapcard__name{font-size:17px;padding-right:24px}
.tapcard__badge{margin:4px 0 6px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.tapcard__badge.is-syl{color:var(--syl)} .tapcard__badge.is-beyond{color:var(--beyond)}
.tapcard__does{margin:0;font-size:14.5px;line-height:1.45}
.tapcard__size{margin:6px 0 0;font-size:13px;color:#4A4A4A}

/* names on the picture: a dot on the part, in the part's own colour, and its name */
.tags{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden}
/* names: only when the zoom stands still; a level line from the part to its name, no dot (cell3d.js layoutTags) */
.tag{position:absolute;left:0;top:0}
.tag b{position:absolute;left:0;top:0;height:1.5px;background:rgba(255,255,255,.95);box-shadow:0 0 0 .75px rgba(0,0,0,.5),0 0 3px rgba(0,0,0,.45)}
.tag span{position:absolute;left:0;top:0;height:25px;line-height:23px;padding:0 8px;font-size:12.5px;font-weight:600;color:#fff;white-space:nowrap;
          background:rgba(14,20,27,.8);border:1px solid rgba(255,255,255,.16);border-left:3px solid var(--c,#fff);border-radius:6px}
.tag.is-left span{border-left:1px solid rgba(255,255,255,.16);border-right:3px solid var(--c,#fff)}
.tags .tag{opacity:0;transition:opacity .1s}
.tags.is-shown .tag{opacity:1;transition:opacity .25s}
.hovertip{position:absolute;left:0;top:0;z-index:7;pointer-events:none;display:flex;align-items:center;gap:6px;
          background:rgba(250,248,242,.96);color:#1A1A1A;border-radius:8px;padding:4px 10px 4px 8px;font-size:13px;font-weight:600;
          box-shadow:0 4px 14px rgba(0,0,0,.35)}
.hovertip i{width:10px;height:10px;border-radius:50%;background:var(--c,#888)}

/* the real tissue, beside the model */
.micro{position:absolute;right:18px;top:96px;z-index:5;margin:0;width:var(--colw);box-sizing:border-box;background:var(--glass);
       backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line-2);border-radius:14px;
       overflow:hidden;box-shadow:0 12px 34px rgba(0,0,0,.45)}
.micro__img{position:relative;line-height:0;width:max-content;max-width:100%;margin:0 auto}
.micro__img img{height:min(36vh,400px);width:auto;display:block}
/* a pin: its dot on the place, its name beside, below or above it, wherever it fits inside the picture (fitPins) */
.pin{position:absolute;width:0;height:0;font-size:11px;line-height:1.2;font-weight:700;color:#fff;white-space:nowrap;pointer-events:none;
     text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 6px rgba(0,0,0,.7)}
.pin i{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px #fff}
.pin span{position:absolute;left:0;top:0;transform:translate(var(--tx,9px),var(--ty,-7px));background:rgba(14,20,27,.55);border-radius:4px;padding:0 4px}
.micro figcaption{padding:8px 11px 9px;font-size:12px;line-height:1.4;color:#C7D2DC}
/* the photograph with its names in a column beside it and a thin line to each place (callouts in intro.js): on the
   picture itself the names covered what they named */
.micro--callouts{display:grid;grid-template-columns:150px minmax(0,1fr);position:absolute}
.micro--callouts .micro__img{width:max-content;justify-self:start;margin:0;grid-column:2}   /* (its own column: on a phone the names' column is hidden, and it fell into it) */
.micro--callouts .micro__img img{height:min(54vh,520px)}
.micro--callouts figcaption{grid-column:1/-1;width:0;min-width:100%;box-sizing:border-box}   /* (the caption wraps; it never widens the panel) */
.micro--callouts .pin{font-size:0}
.micro--callouts .pin i{display:none}   /* (the line ends on the structure itself: a dot hid it) */
.micro__labels{position:relative}
.micro__labels span{position:absolute;right:30px;transform:translateY(-50%);font-size:12.5px;font-weight:700;color:#fff;white-space:nowrap;
                    line-height:1.25}
.micro__lines{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}

/* the electron micrograph: wide, with its colour key */
.micro--wide .micro__img img{width:100%;height:auto}
@media (max-height:780px){.micro figcaption{display:none}}
.micro--em .micro__img img{width:100%;height:auto}
.micro__over{position:absolute;inset:0;width:100%!important;height:100%!important;max-height:none!important}   /* (the outlines always lie on their picture) */
/* each slide says what it is first, then appears (Daniel, 4 Oct: the slides came in too fast, with nothing to say what
   they were): .is-in is set a frame after the figure is shown */
.micro__intro{margin:0;padding:10px 12px 8px;font-size:12.5px;line-height:1.4;color:#C7D2DC;opacity:0;transform:translateY(-6px);transition:opacity .35s,transform .35s}
.micro__intro b{display:block;font-size:14.5px;color:var(--accent);margin-bottom:2px}
.micro--callouts .micro__intro{grid-column:1/-1;width:0;min-width:100%;box-sizing:border-box}
.micro .micro__img,.micro .micro__labels,.micro .micro__lines,.micro .key,.micro figcaption{opacity:0;transition:opacity .5s .45s}
.micro.is-in .micro__intro{opacity:1;transform:none}
.micro.is-in .micro__img,.micro.is-in .micro__labels,.micro.is-in .micro__lines,.micro.is-in .key,.micro.is-in figcaption{opacity:1}
@media (prefers-reduced-motion:reduce){.micro__intro,.micro .micro__img,.micro .micro__labels,.micro .micro__lines,.micro .key,.micro figcaption{transition:none}}
.key{list-style:none;margin:0;padding:7px 10px 0;display:flex;flex-wrap:wrap;gap:3px 10px}
.key li{font-size:11.5px;color:#DCE3EA;display:flex;align-items:center;gap:5px}
.key li::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c)}

/* Eric Betzig, from the cell down */
.film{position:absolute;right:18px;top:96px;z-index:5;margin:0;height:var(--filmh,min(46vh,430px));aspect-ratio:9/16;
      background:#000;border-radius:14px;overflow:hidden;box-shadow:0 12px 34px rgba(0,0,0,.5);border:1px solid var(--line-2)}
.film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.film__bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:6px;padding:6px;
           background:linear-gradient(0deg,rgba(0,0,0,.78),rgba(0,0,0,0));color:#fff}
.film__who{flex:1;font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.film__play,.film__x{width:28px;height:28px;flex:none;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.35);
                     color:#fff;font-size:12px;line-height:1;cursor:pointer}
.film__x{font-size:17px}
/* who is talking, beside the film (Daniel, 4 Oct): on a laptop only, where there is room; shown while the film is
   (outside the film's box, which clips what is beyond its corners) */
.filmnote{position:absolute;top:96px;right:calc(28px + var(--filmh,min(46vh,430px)) * 9 / 16);z-index:5;box-sizing:border-box;
          width:calc(var(--colw) - var(--filmh,min(46vh,430px)) * 9 / 16 - 10px);max-height:var(--filmh,min(46vh,430px));overflow:auto;padding:10px 12px;
          border-radius:var(--r);background:var(--glass);border:1px solid var(--line);font-size:12.5px;line-height:1.45;color:#C7D2DC;
          display:none;flex-direction:column;gap:6px}
.film:not([hidden]) + .filmnote{display:flex}
.filmnote > b{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-weight:600}
.filmnote span b{color:#fff}
.more-open .filmnote{visibility:hidden}
.filmnote__link{display:block;margin-top:8px;color:var(--accent);font-weight:600;text-decoration:underline}
@media (max-width:1100px){.film:not([hidden]) + .filmnote{display:none}}
.film__sound{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);border:none;border-radius:var(--r-pill);
             background:#fff;color:#111;font-weight:700;font-size:14px;padding:10px 16px;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.filmpill{position:absolute;right:18px;top:96px;z-index:5;border:1px solid var(--line-2);border-radius:var(--r-pill);
          background:var(--glass);color:#fff;font-size:13px;font-weight:600;padding:8px 14px;cursor:pointer}
.words summary{cursor:pointer;font-weight:600;color:var(--accent);margin:4px 0 6px}
.words p{font-size:13.5px;color:#B9C4CE}

.loading{position:absolute;left:0;right:0;top:45%;z-index:8;display:flex;flex-direction:column;align-items:center;gap:8px;
         color:var(--muted);font-size:14px;pointer-events:none;transition:opacity .4s}
.loading i{display:block;width:180px;height:3px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden}
.loading b{display:block;height:100%;width:0;background:var(--muted);transition:width .2s}
.loading.is-done{opacity:0;pointer-events:none}
.loading__box{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 20px;border-radius:var(--r-lg);
              background:rgba(14,20,27,.88);border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.45)}
.loading span{color:var(--text);font-weight:600}
.loading small{font-size:12px;color:var(--muted);max-width:280px;text-align:center}
/* while loading, the picture can be seen but nothing can be pressed or scrolled */
.zoom.is-loading{cursor:progress}
.zoom.is-loading > :not(.loading):not(.zoom__gl){pointer-events:none}
.zoom.is-loading .zoom__gl{pointer-events:none;filter:brightness(.55)}
.zoom.is-loading .loading{top:0;bottom:0;justify-content:center;background:rgba(14,20,27,.35)}
.nogl{position:absolute;inset:0;display:grid;place-items:center;padding:30px;text-align:center;color:var(--text);z-index:9}

/* ---------- About this picture ---------- */
.about{width:min(680px,calc(100% - 24px));max-height:86vh;border:none;border-radius:var(--r-lg);padding:24px 28px;
       background:#FBF8F2;color:var(--ink);font-family:var(--sans)}
.about::backdrop{background:rgba(5,9,13,.6);backdrop-filter:blur(3px)}
.about h2{font-size:22px;color:#14572B;margin-bottom:6px}
.about h3{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:#A16207;margin:16px 0 6px}
.about ul{margin:0;padding-left:20px}
.about li,.about p{font-size:14.5px;line-height:1.5;margin:0 0 6px}
.about__list{margin-top:10px!important} .about__list li{font-size:15px;margin-bottom:11px}
.about .fineprint{font-size:12.5px;color:var(--grey)}
.about--topics .topic{border-top:1px solid #E7DFD1;padding:10px 0 4px;transition:background .6s}
.about--topics .topic.is-picked{background:#FBEFFD}
.about--topics .topic h3{font-size:17px;letter-spacing:0;text-transform:none;color:#1A1A1A;margin:0 0 4px;display:flex;align-items:center;gap:9px}
.topic__no{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#C026D3;color:#fff;font-size:13px}
.topic__where{font-size:13px!important;color:var(--grey)}
.topic__go{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.topic__go .btn{background:#F3EEE4;color:#1A1A1A;border-color:#E2D8C6;font-size:13.5px;padding:7px 14px}
.topic__go .btn--go{background:#14572B;border-color:#14572B;color:#fff;text-decoration:none}
.topic__build{font-size:13.5px;color:#7A4B12}
.about--topics .topic__also{margin-top:16px}
.topic__x a{color:#14572B}
.about__x{float:right;width:32px;height:32px;border-radius:50%;border:1px solid #E7DFD1;background:#FDFBF6;font-size:17px;cursor:pointer;color:var(--grey)}

/* ---------- mitochondria: book drawing or real cell? ---------- */
.cap__notice{display:block;width:100%;text-align:left;margin-top:10px;padding:8px 11px;border-radius:10px;cursor:pointer;
             border:1px solid rgba(251,191,36,.55);background:rgba(251,191,36,.12);color:#FDE7B0;font-size:13px;line-height:1.35}
.cap__notice b{display:block;color:#FCD34D;font-size:14px}
.cap__notice::after{content:" →"}
.cap__notice:hover{background:rgba(251,191,36,.22)}
.about--wide{width:min(980px,calc(100% - 24px))}
.md__answer{font-size:15px!important;background:#FFF4D6;border-left:4px solid #D97706;padding:8px 12px;border-radius:8px}
/* (the picture is sized by the screen's height and the buttons sit just under the step's words, beside it: on a
   laptop the panel was taller than the screen and "Next step" had to be scrolled to, Daniel 4 Oct) */
.md{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;margin:6px 0 14px;align-items:start}
.md__stage{position:relative;height:min(50vh,470px);aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:#0E141B}
.md__stage canvas{display:block;width:100%;height:100%}
.md__tag{position:absolute;left:0;top:0;font-size:12px;font-weight:600;color:#fff;background:rgba(14,20,27,.72);
         border:1px solid rgba(255,255,255,.18);padding:2px 7px;border-radius:6px;pointer-events:none;white-space:nowrap}
.md__side{display:flex;flex-direction:column;gap:10px}
.md__count{font:12px var(--mono);color:#A16207;letter-spacing:.06em;text-transform:uppercase;margin:0!important}
.md__text{font-size:16.5px!important;line-height:1.55!important;margin:0!important}
.md__btns{display:flex;gap:8px;flex-wrap:wrap}
.md__btns button{border-radius:999px;padding:9px 18px;font-size:14px;cursor:pointer;background:#F3EEE4;color:#1A1A1A;border:1px solid #E2D8C6}
.md__btns .md__next{background:#14572B;border-color:#14572B;color:#fff}
.md__btns button:disabled{opacity:.4;cursor:default}
.about--wide a{color:#14572B;text-decoration:underline;font-weight:600}
.linkbtn{background:none;border:none;padding:0;color:var(--accent);font-weight:600;text-decoration:underline;cursor:pointer}

/* ---------- phones and narrow windows ---------- */
/* (Daniel, 7 Oct: "the phone view is horrible": the text could not be folded or read whole, the slides and the film were
   small and covered the picture. On a phone: the title, then the seven levels as a row of dots, the picture, and the
   text as a sheet at the bottom that folds down to one line or opens to all of it; a slide is a small picture to tap,
   shown full screen; the film starts when tapped, full screen, with its sound) */
.cap__grab{display:none}
.fp-phone{display:none}
@media (max-width:760px),(max-height:500px){
  .md{grid-template-columns:1fr} .md__stage{height:38vh;width:100%;aspect-ratio:auto}
  .about--wide{padding:18px 16px}
  /* the title */
  .top{padding:9px 12px 14px}
  .top__title{font-size:19px}
  .top__sub{display:none}
  .top__by{font-size:11px}
  .top__mark{padding-right:128px}
  .topbtns{right:8px;top:10px;flex-direction:column;align-items:flex-end;gap:4px}
  .aboutbtn{font-size:12px;padding:5px 10px}
  /* the levels: a row of seven dots under the title (the text says which level and its name); a tap goes there */
  .zoom::before{display:none}
  .ruler{left:10px;right:10px;top:var(--striptop,80px);bottom:auto;width:auto;height:36px;display:flex;justify-content:space-between;align-items:center;
         background:rgba(14,20,27,.55);border-radius:var(--r-pill);padding:0 4px}
  .ruler::before{content:"";position:absolute;left:24px;right:24px;top:50%;height:2px;background:var(--line-2)}
  .ruler__scale,.ruler__topics{display:none}
  .stop{position:relative;left:auto!important;top:auto!important;transform:none;width:40px;height:36px;justify-content:center;gap:0}
  .stop::before{width:13px;height:13px}
  .stop[aria-current="true"]::before{width:16px;height:16px}
  .stop b,.stop[aria-current="true"] b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);padding:0;margin:0}
  /* the text: a sheet at the bottom; its handle folds it to one line (tap, or swipe down) and opens it (swipe up, or More) */
  .cap{left:0;right:0;bottom:0;width:auto;max-height:58vh;padding:0 16px calc(10px + env(safe-area-inset-bottom));
       border-radius:18px 18px 0 0;border-left:none;border-right:none;border-bottom:none;background:rgba(17,24,32,.94)}
  .cap__grab{display:flex;justify-content:center;align-items:center;position:sticky;top:0;z-index:2;flex:none;width:calc(100% + 32px);
             height:26px;margin:0 -16px 2px;padding:0;border:none;background:rgba(17,24,32,.97);cursor:pointer;touch-action:none}
  .cap__grab i{width:42px;height:5px;border-radius:3px;background:rgba(255,255,255,.4)}
  .cap__eyebrow{font-size:11px;touch-action:none}
  .cap__def{font-size:17.5px;line-height:1.35}
  .cap__here{font-size:15.5px;line-height:1.5}
  .cap__more{font-size:15.5px;line-height:1.55;overflow:visible}
  .cap__notice b{font-size:15px} .cap__notice{font-size:14px}
  .btn{padding:10px 15px;font-size:14.5px}
  .tpill{font-size:13px;padding:4px 10px}
  .zoom.sheet-full .cap{max-height:88vh}
  .zoom:not(.sheet-full) .cap__topics{display:none}   /* (the topics and their links wait for More: the picture keeps its room) */
  .zoom.sheet-min .cap > :not(.cap__grab):not(.cap__eyebrow):not(.cap__go){display:none}
  .zoom.sheet-min .cap{cursor:pointer}
  .scalebar{left:14px;right:auto;top:auto;bottom:calc(var(--caph,190px) + 12px)}
  .sylswitch{right:8px;top:auto;bottom:calc(var(--caph,190px) + 10px);font-size:12.5px;padding:7px 12px 7px 30px}
  .zoom.sheet-full .scalebar,.zoom.sheet-full .sylswitch{visibility:hidden}
  /* a slide: a small picture at the top right; a tap shows it full screen, with its names and its words */
  .micro{top:var(--sidetop,124px);right:8px;width:36vw;max-width:200px;border-radius:12px}
  .micro__intro{font-size:0;padding:7px 9px 6px} .micro__intro b{font-size:12.5px;margin:0}
  .micro__min{width:22px;height:22px;top:6px;right:6px;padding:0;justify-content:center} .micro__min span{display:none}
  .micro .micro__intro{padding-right:32px}
  .zoom:not(.text-first) .micro .micro__intro b::after{content:"Tap to see it big";display:block;font-size:11px;font-weight:600;color:var(--muted);margin-top:1px}
  .micro figcaption,.micro .key{display:none}
  .micro--callouts{grid-template-columns:0 1fr} .micro__labels,.micro__lines{display:none}
  .micro__img,.micro--callouts .micro__img{width:100%;max-width:none;justify-self:stretch}
  .micro__img img,.micro--callouts .micro__img img{width:100%;height:auto;max-height:20vh;object-fit:contain}
  .micro--em .micro__img img,.micro--wide .micro__img img{width:100%;height:auto;max-height:none}
  .micro.is-big{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:max-content;max-width:calc(100vw - 12px);max-height:calc(100vh - 12px);overflow:auto}
  .micro.is-big .micro__intro{font-size:13.5px;padding:10px 12px 8px} .micro.is-big .micro__intro b{font-size:15px;margin-bottom:2px}
  .micro.is-big .micro__intro b::after{content:"Tap to close";display:inline;margin-left:8px}
  .micro.is-big figcaption{display:block;font-size:13px} .micro.is-big .key{display:flex}
  .micro--callouts.is-big{grid-template-columns:150px auto} .micro.is-big .micro__labels,.micro.is-big .micro__lines{display:block}
  .micro.is-big .micro__img img{max-height:none;width:auto}
  .pin span{display:none} .micro.is-big .pin span{display:inline}
  /* the film: a button; a tap plays it full screen, with sound, and who is talking below it */
  .tag span{height:21px;line-height:19px;padding:0 6px;font-size:11px}   /* (measured so in cell3d.js: measureSm, H2 10.5) */
  .fp-wide{display:none} .fp-phone{display:inline}
  .filmpill{top:var(--sidetop,124px);right:8px;background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-size:14px;padding:10px 15px}
  .film,.filmnote,.film:not([hidden]) + .filmnote{display:none}
  .zoom.film-big::after{content:"";position:absolute;inset:0;background:rgba(5,9,13,.86);z-index:25}
  .zoom.film-big .film:not([hidden]){display:block;position:fixed;left:50%;top:10px;right:auto;transform:translateX(-50%);z-index:31;
                                      height:min(calc(100vh - 220px),calc((100vw - 16px) * 16 / 9));border-radius:12px}
  .zoom.film-big .film:not([hidden]) + .filmnote{display:flex;position:fixed;left:8px;right:8px;top:auto;bottom:10px;width:auto;max-height:200px;
                                                 z-index:31;font-size:13.5px}
  .film__who{font-size:13px} .film__play,.film__x{width:36px;height:36px}
}
/* a phone on its side: the text is a column on the right, the picture and the dots on the left */
@media (max-height:500px) and (min-width:761px){
  .ruler{right:calc(min(44vw,400px) + 10px)}
  .cap{left:auto;right:0;top:auto;bottom:0;width:min(44vw,400px);max-height:100%;border-radius:18px 0 0 0;border-left:1px solid var(--line)}
  .zoom.sheet-full .cap{max-height:100%}
  .micro,.filmpill{right:calc(min(44vw,400px) + 8px)}
  .micro{width:30vw}
  .micro__img img,.micro--callouts .micro__img img{max-height:34vh}
  .scalebar{bottom:12px} .sylswitch{bottom:10px;right:calc(min(44vw,400px) + 8px)}
  .zoom.film-big .film:not([hidden]){left:12px;transform:none;height:calc(100vh - 20px)}
  .zoom.film-big .film:not([hidden]) + .filmnote{left:calc((100vh - 20px) * 9 / 16 + 24px);right:8px;top:10px;bottom:auto;max-height:calc(100vh - 20px)}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}