:root{
    --amber:#ffb36b; --amber-hi:#ffd9a8; --ink:#e9e4d8; --dim:#8b93a8;
    --glass:rgba(10,14,24,.58); --line:rgba(255,255,255,.09);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{background:#04060c;overflow:hidden;overscroll-behavior:none}
  body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
       color:var(--ink);-webkit-tap-highlight-color:transparent}

  #stage{position:relative;width:100%;height:100svh;height:100vh;background:#04060c;overflow:hidden}
  #stage.mode-full{height:100svh}
  #stage.mode-hero{height:70svh}
  #stage.mode-banner{height:clamp(180px,30svh,320px)}
  @supports not (height:100svh){
    #stage.mode-full{height:100vh}
    #stage.mode-hero{height:70vh}
  }
  #c3d{position:absolute;inset:0;width:100%;height:100%;display:block}

  .vig{position:absolute;inset:0;pointer-events:none;z-index:1;
       background:radial-gradient(ellipse at 50% 42%,transparent 55%,rgba(0,0,5,.55) 100%)}

  /* fade from black on load */
  #fade{position:absolute;inset:0;z-index:30;background:#000;pointer-events:none;
        opacity:1;transition:opacity 2.2s ease}
  #fade.gone{opacity:0}

  /* cinematic letterbox bars while the story plays */
  .bar{position:absolute;left:0;right:0;height:0;background:#000;z-index:6;
       transition:height 1.4s cubic-bezier(.6,0,.3,1);pointer-events:none}
  .bar.top{top:0}.bar.bot{bottom:0}
  #stage.letterbox .bar{height:7vh}
  #stage.mode-banner .bar{display:none}

  /* tiny corner header, like the reference */
  header{position:absolute;top:14px;left:20px;z-index:8;pointer-events:none;opacity:0;
         transition:top 1.4s cubic-bezier(.6,0,.3,1)}
  .title{font-size:clamp(16px,2.4vmin,22px);letter-spacing:.34em;color:var(--amber-hi);font-weight:700}
  .sub{font-size:clamp(13px,1.9vmin,17px);letter-spacing:.12em;color:#aeb6c9;margin-top:6px}
  #stage.letterbox header{top:calc(7vh + 10px)}
  #stage.mode-banner header{display:none}

  /* captions - top-centre, large, fade + slide like the reference */
  #caps{position:absolute;left:50%;top:64px;transform:translateX(-50%);
        z-index:7;width:min(88vw,940px);text-align:center;pointer-events:none;
        transition:top 1.4s cubic-bezier(.6,0,.3,1)}
  #stage.letterbox #caps{top:calc(7vh + 54px)}
  .cap{position:absolute;left:0;right:0;top:0;opacity:0;
       font-size:clamp(18px,2.9vw,34px);line-height:1.45;color:#f4eddc;letter-spacing:.015em;
       text-shadow:0 2px 24px rgba(0,0,0,.9),0 0 2px rgba(0,0,0,.8)}
  .cap small{display:block;margin-top:.55em;font-size:.52em;color:var(--dim);letter-spacing:.12em}
  .cap.em{font-weight:700;color:var(--amber-hi);
          font-size:clamp(20px,3.7vw,44px);line-height:1.38;
          text-shadow:0 0 28px rgba(255,179,107,.35),0 2px 24px rgba(0,0,0,.92)}
  .cap.call{font-weight:700;color:var(--amber-hi);
          font-size:clamp(21px,4vw,48px);line-height:1.38;
          text-shadow:0 0 32px rgba(255,217,168,.45),0 2px 24px rgba(0,0,0,.92)}
  #stage.mode-banner #caps{top:40px}
  #stage.mode-banner .cap{font-size:clamp(14px,2.4vw,20px)}
  #stage.mode-banner .cap.em{font-size:clamp(15px,2.7vw,23px)}
  #stage.mode-banner .cap.call{font-size:clamp(15px,2.9vw,25px)}
  .cap.sm{font-size:clamp(18px,3vw,36px)}
  #stage.mode-banner .cap.sm{font-size:clamp(14px,2.4vw,20px)}

  /* the Genesis/Ezekiel intro */
  #intro{position:absolute;inset:0;z-index:9;pointer-events:none;display:flex;
         align-items:center;justify-content:center}
  #introBg{position:absolute;inset:0;background:#000}
  #introFx{position:absolute;inset:0;width:100%;height:100%}
  .gen{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
       width:min(88vw,900px);text-align:center;color:#fdf3dd;font-weight:700;
       font-size:clamp(19px,3.2vw,40px);line-height:1.5;opacity:0;
       text-shadow:0 0 26px rgba(255,200,120,.55),0 2px 22px rgba(0,0,0,.92)}
  #stage.mode-banner .gen{font-size:clamp(13px,2.4vw,19px)}

  /* planet labels */
  #labels{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
  .lbl{position:absolute;transform:translate(-50%,-150%);font-size:10px;letter-spacing:.28em;
       color:#cdd6ea;text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.9);white-space:nowrap;opacity:0}

  /* the Name overlay */
  #nameWrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
            pointer-events:none;z-index:6}
  #nameGlow{position:absolute;width:72vmin;height:72vmin;border-radius:50%;
            background:radial-gradient(circle,rgba(255,179,107,.26) 0%,rgba(255,179,107,.09) 38%,rgba(255,179,107,0) 70%);
            opacity:0}
  .nameLayer{position:absolute;opacity:0;display:flex;flex-direction:column;align-items:center;gap:1.4vmin}
  .glyphRow{display:flex;align-items:center;justify-content:center;gap:1.6vmin}
  .nameLayer .glyphRow img{height:clamp(58px,14vmin,150px);width:auto;
                 filter:drop-shadow(0 0 14px rgba(255,217,168,.55)) drop-shadow(0 0 40px rgba(255,179,107,.3))}
  /* dark-ink letter images: recolor to glowing gold and lift off any white background */
  .glyphRow.ink img{filter:invert(1) sepia(1) saturate(2.6) hue-rotate(-12deg) brightness(1.08)
                    drop-shadow(0 0 14px rgba(255,217,168,.5));
                    mix-blend-mode:screen}
  .nameLayer .scriptTag{font-size:clamp(12px,1.9vmin,19px);color:var(--dim);letter-spacing:.18em}
  #nameModern .heb{font-family:"Ezra SIL SR","Times New Roman",Garamond,Georgia,serif;font-weight:600;
                   font-size:clamp(60px,16vmin,170px);line-height:1.05;color:var(--amber-hi);direction:rtl;
                   text-shadow:0 0 20px rgba(255,217,168,.6),0 0 70px rgba(255,179,107,.35)}
  #nameModern .latin{font-weight:700;letter-spacing:.18em;
                     font-size:clamp(24px,5vmin,54px);color:#f4eddc;
                     text-shadow:0 0 18px rgba(255,217,168,.5)}
  #nameModern .latin2{font-weight:600;letter-spacing:.08em;
                     font-size:clamp(19px,3.8vmin,42px);color:var(--amber-hi);
                     text-shadow:0 0 16px rgba(255,217,168,.45)}

  /* early watermark of the Name */
  #wm{position:absolute;right:2.2%;bottom:13%;z-index:4;pointer-events:none}
  #wm .glyphRow{gap:.7vmin}
  #wm .glyphRow img{height:clamp(22px,3.6vmin,42px);width:auto}
  .wmLayer{position:absolute;right:0;bottom:0;opacity:0}

  /* ending banner */
  #ending{position:absolute;inset:0;background:#fff;
          opacity:0;pointer-events:none;z-index:8;overflow:hidden;
          display:flex;align-items:center;justify-content:center}
  #ending img{width:100%;height:auto;flex:none;display:block}

  /* bottom-centre dock of chips, like the reference */
  #uiWrap{position:absolute;left:50%;transform:translateX(-50%);bottom:14px;z-index:12;
      display:flex;flex-direction:column;align-items:center;gap:7px;
      padding:8px 10px;border-radius:16px;background:var(--glass);border:1px solid var(--line);
      backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);max-width:94vw;
      opacity:0;transition:opacity .5s ease,bottom 1.4s cubic-bezier(.6,0,.3,1)}
  #uiWrap.show{opacity:1}
  #stage.letterbox #uiWrap{bottom:calc(7vh + 12px)}
  #chapters{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
  .chip{appearance:none;border:1px solid var(--line);background:rgba(255,255,255,.03);
        color:#c8cfdd;border-radius:10px;padding:7px 12px;font-size:11.5px;letter-spacing:.08em;
        cursor:pointer;transition:all .25s;font-family:inherit;line-height:1}
  .chip:hover{border-color:rgba(255,179,107,.45);color:var(--amber-hi)}
  .chip.on{background:rgba(255,170,90,.14);border-color:rgba(255,179,107,.6);color:var(--amber-hi)}
  .chip:focus-visible{outline:2px solid var(--amber-hi);outline-offset:2px}
  #ui{display:flex;align-items:center;gap:7px;width:100%}
  .sep{width:1px;height:18px;background:var(--line)}
  #seek{flex:1;min-width:140px;cursor:pointer;height:20px;appearance:none;-webkit-appearance:none;background:transparent}
  #seek::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:rgba(255,255,255,.16)}
  #seek::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;
    background:var(--amber-hi);margin-top:-4.5px;box-shadow:0 0 10px rgba(255,179,107,.65)}
  #seek::-moz-range-track{height:4px;border-radius:2px;background:rgba(255,255,255,.16)}
  #seek::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;
    background:var(--amber-hi);box-shadow:0 0 10px rgba(255,179,107,.65)}
  #seek:focus-visible{outline:2px solid var(--amber-hi);outline-offset:2px}
  #clock{font-size:11px;color:var(--dim);min-width:78px;text-align:center;font-variant-numeric:tabular-nums;letter-spacing:.06em}
  @media (max-width:640px){
    #uiWrap{gap:5px;padding:7px 8px;border-radius:14px;bottom:10px}
    .chip{padding:6px 8px;font-size:10px;letter-spacing:.05em}
    .sep,#clock{display:none}
  }
  #stage.mode-banner #chapters{display:none}

  /* size menu (opens on click, lists all views) */
  #sizeWrap{position:relative;display:flex}
  #sizeMenu{position:absolute;bottom:calc(100% + 10px);right:0;display:none;flex-direction:column;gap:5px;
            padding:7px;border-radius:12px;background:var(--glass);border:1px solid var(--line);
            backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);min-width:130px}
  #sizeMenu.open{display:flex}
  #sizeMenu .chip{text-align:left;white-space:nowrap}

  /* finale - the banner emblem drawing itself together */
  #finale{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
          gap:2.4vmin;z-index:7;pointer-events:none;opacity:0}
  #finale svg{width:min(46vmin,330px);height:auto;
              filter:drop-shadow(0 0 12px rgba(255,217,168,.45)) drop-shadow(0 0 36px rgba(255,179,107,.25))}
  #finWord{font-weight:800;color:var(--amber-hi);letter-spacing:.06em;text-align:center;
           font-size:clamp(20px,4.2vmin,44px);opacity:0;
           text-shadow:0 0 22px rgba(255,179,107,.4),0 2px 18px rgba(0,0,0,.9)}
  #finWord small{display:block;font-weight:400;font-size:.5em;color:var(--dim);letter-spacing:.2em;margin-top:.4em}

  /* big invitation chip (start of story / replay) */
  #bigPlay{position:absolute;inset:0;z-index:11;display:none;align-items:center;justify-content:center;
           background:radial-gradient(circle at 50% 50%, rgba(4,6,14,.38) 0, rgba(4,6,14,.2) 110px, rgba(4,6,14,0) 230px);
           border:0;cursor:pointer;width:100%;font-family:inherit}
  #bigPlay.show{display:flex}
  #bigPlay span{color:var(--amber-hi);border:1px solid rgba(255,179,107,.5);border-radius:12px;
                padding:12px 26px;background:var(--glass);backdrop-filter:blur(8px);
                font-size:clamp(14px,2.2vmin,19px);letter-spacing:.12em}
  #bigPlay:focus-visible span{outline:2px solid var(--amber-hi);outline-offset:3px}

/* no-JS / CSP-safe fallback helpers */
.nw{white-space:nowrap}
.nojs-wrap{position:absolute;top:0;left:0;right:0;bottom:0;background:#fff;
           display:flex;align-items:center;justify-content:center;z-index:99}
.nojs-wrap img{max-width:92%;height:auto}