@font-face{font-family:"Creda Juris Tech70";src:url("../library/creda_juris_tech70/CredaJurisTech70-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap;}
  :root{ --ink:#1f2d57; --muted:#5f6b86; --line:#e2e6ef;
    --philosophy:#e8531c; --code:#1d4ed8; --governance:#0d9488; }
  /* Title/brand use Creda Juris Tech70 (local font), Garamond as fallback. */
  *{box-sizing:border-box;}
  html,body{margin:0;height:100%;}
  body{background:radial-gradient(circle at 18% 22%,rgba(232,83,28,.16),rgba(232,83,28,0) 34%),radial-gradient(circle at 82% 18%,rgba(29,78,216,.14),rgba(29,78,216,0) 36%),radial-gradient(circle at 54% 86%,rgba(13,148,136,.13),rgba(13,148,136,0) 40%),linear-gradient(135deg,#fff 0%,#f7fbff 50%,#fff6f1 100%);color:var(--ink);font-family:"Century Schoolbook","Century Schoolbook L","New Century Schoolbook","EB Garamond",Georgia,"Times New Roman",serif;-webkit-font-smoothing:antialiased;overflow:hidden;}
  #watermark{position:fixed;left:50%;top:56%;height:104vh;width:auto;transform:translate(-50%,-50%);opacity:.045;z-index:0;pointer-events:none;mix-blend-mode:multiply;}
  #stage{position:fixed;inset:0;z-index:1;}
  canvas{position:absolute;inset:0;display:block;}
  canvas:focus-visible{outline:2px solid var(--philosophy);outline-offset:-6px;}

  #words{position:fixed;left:0;right:0;top:40%;transform:translateY(-50%);text-align:center;pointer-events:none;z-index:5;}
  #words span{position:absolute;left:0;right:0;font-size:clamp(26px,6vw,64px);font-weight:650;letter-spacing:0;color:var(--ink);opacity:0;}
  @keyframes flash{0%{opacity:0;transform:translateY(8px) scale(.98);filter:blur(4px);}40%{opacity:1;transform:translateY(0) scale(1);filter:blur(0);}100%{opacity:0;transform:translateY(-8px) scale(1.01);filter:blur(4px);}}
  #w1{animation:flash .62s ease-in-out .15s both;} #w2{animation:flash .62s ease-in-out .72s both;} #w3{animation:flash .62s ease-in-out 1.29s both;}

  #header{position:fixed;left:0;right:0;top:clamp(6px,5vh,40px);text-align:center;z-index:6;pointer-events:none;opacity:0;animation:rise 1s cubic-bezier(.2,.7,.2,1) 2.1s both;}
  @keyframes rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
  #title{margin:0;font-family:"Creda Juris Tech70","EB Garamond",Garamond,"Adobe Garamond Pro",Georgia,"Times New Roman",serif;font-weight:500;letter-spacing:0;font-size:clamp(38px,6.6vw,76px);line-height:.95;color:var(--ink);pointer-events:auto;}
  #title .ai{color:var(--philosophy);}
  #subtitle{margin:.5em 0 0;font-family:"Franklin Gothic Medium","Franklin Gothic Book","Arial Narrow",Arial,sans-serif;font-size:clamp(13px,1.7vw,18px);font-weight:850;letter-spacing:.2em;text-transform:uppercase;}
  #subtitle .dword{color:var(--muted);transition:color .35s ease,text-shadow .35s ease,opacity .35s ease,transform .35s ease;display:inline-block;cursor:pointer;pointer-events:auto;position:relative;}
  #subtitle .sep{color:#c7cedd;margin:0 .45em;}
  @keyframes wordpulse{0%{transform:scale(1);}32%{transform:scale(1.22);}100%{transform:scale(1);}}
  #subtitle .dword.pulse{animation:wordpulse .62s ease;}
  #subtitle .dword.landing-pulse{animation:wordpulse 1s ease;z-index:1;isolation:isolate;}

  #tip{position:fixed;z-index:8;pointer-events:none;transform:translate(-50%,-140%);opacity:0;transition:opacity .12s ease;max-width:min(280px,74vw);white-space:normal;
    background:rgba(31,45,87,.95);color:#fff;border-radius:10px;padding:8px 12px;font-size:13px;font-weight:500;line-height:1.3;box-shadow:0 8px 26px rgba(31,45,87,.22);}
  #tip .kind{display:block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;opacity:.7;font-weight:700;margin-bottom:2px;}
  #tip .act{display:block;font-size:9px;letter-spacing:.12em;text-transform:uppercase;opacity:.58;font-weight:700;margin-top:3px;}
  #tip::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:6px solid transparent;border-top-color:rgba(31,45,87,.95);}

  /* circular, domain-coloured pop-up */
  #card{position:fixed;z-index:9;isolation:isolate;opacity:0;transform:translate(-50%,-50%) scale(.8);transition:opacity .26s ease,transform .26s cubic-bezier(.2,.8,.2,1);pointer-events:none;
    width:min(248px,82vw);height:min(248px,82vw);border-radius:50%;background:#fff;border:2px solid var(--cc,var(--line));
    box-shadow:0 24px 60px rgba(31,45,87,.22);display:flex;align-items:center;justify-content:center;text-align:center;}
  /* content wrapper: the circle is sized in JS to leave a consistent ~10% negative-space ring around this block */
  #card .cc{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;max-width:min(212px,68vw);}
  #card.essay-card h3{padding:0 6px;}
  #card.show{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto;}
  #card::before{content:"";position:absolute;inset:-3px;border-radius:50%;border:2.5px solid var(--cc,#e8531c);opacity:0;pointer-events:none;}
  #card.essay-card{background:#1f2d57;border:0;color:#fff;}
  #card.essay-card::after{content:"";position:absolute;inset:-14px;border-radius:50%;z-index:-1;background-image:linear-gradient(115deg,#e8531c,#1f2d57,#0d9488,#e8531c,#1d4ed8,#0d9488,#e8531c);background-size:260% 260%;background-position:0% 50%;box-shadow:0 0 28px rgba(232,83,28,.28);-webkit-animation:purpose-flow 36s linear infinite alternate;animation:purpose-flow 36s linear infinite alternate;}
  #card.activate::before{animation:cardburst .8s ease-out;}
  @keyframes cardburst{0%{transform:scale(.62);opacity:.9;}100%{transform:scale(1.65);opacity:0;}}
  #card .kind{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;}
  #card h3{margin:6px 0 5px;font-size:17px;font-weight:800;letter-spacing:0;line-height:1.18;}
  #card.essay-card h3{font-size:16px;line-height:1.18;margin-bottom:7px;}
  #card p{margin:0 0 11px;font-size:14.5px;color:var(--muted);line-height:1.42;}
  #card.essay-card p{display:block;color:#fff;}
  #card .work-pie{display:block;width:42px;height:42px;border-radius:50%;margin:6px auto 10px;border:2px solid rgba(255,255,255,.95);box-shadow:0 0 0 1px rgba(31,45,87,.18),0 6px 14px rgba(31,45,87,.18);}
  #card .work-pie::after{content:"";display:block;width:14px;height:14px;margin:12px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px rgba(31,45,87,.10);}
  #card video.vid{display:none;width:min(206px,64vw);aspect-ratio:16/9;border-radius:10px;background:#0c1530;margin:0 0 10px;object-fit:cover;}
  #card.video-card video.vid{display:block;}
  #card a.open{display:inline-flex;align-items:center;gap:6px;background:var(--cc,var(--ink));color:#fff;text-decoration:none;font-size:12.5px;font-weight:700;padding:8px 15px;border-radius:20px;transition:transform .15s,filter .15s;}
  #card a.open:hover{transform:scale(1.05);filter:brightness(1.12);}
  /* circular button stack inside the pop-up */
  #card .btns{display:flex;flex-direction:column;gap:8px;align-items:center;width:100%;margin-top:2px;}
  #card .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;min-width:132px;max-width:92%;
    padding:8px 17px;border-radius:999px;border:2px solid var(--cc,var(--ink));background:#fff;color:var(--cc,var(--ink));
    font-family:inherit;font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;transition:all .18s;}
  #card .btn:hover,#card .btn.glow{background:var(--cc,var(--ink));color:#fff;box-shadow:0 0 0 4px rgba(31,45,87,.08),0 8px 22px rgba(31,45,87,.18);}
  #card .btn.locked{border-color:#c4cbd8;color:#9aa4b6;background:#f5f6fa;cursor:not-allowed;}
  #card .btn.locked:hover{background:#f5f6fa;color:#9aa4b6;box-shadow:none;}
  /* secondary rectangular pop-up: abstract text or video player */
  #modal2{position:fixed;inset:0;z-index:12;display:none;align-items:center;justify-content:center;background:rgba(15,21,45,.42);padding:20px;}
  #modal2.show{display:flex;}
  #modal2 .box{position:relative;background:#fff;border:2px solid var(--cc,var(--ink));border-radius:18px;max-width:min(580px,94vw);max-height:88vh;overflow:auto;padding:30px 30px 26px;box-shadow:0 36px 90px rgba(31,45,87,.34);text-align:left;}
  #modal2 .mk{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--cc,var(--ink));}
  #modal2 h4{font-family:"Creda Juris Tech70","EB Garamond",Garamond,Georgia,serif;font-size:23px;font-weight:600;margin:5px 0 14px;line-height:1.16;}
  #modal2 .ab{font-size:14.5px;line-height:1.56;color:var(--ink);margin:0 0 20px;}
  #modal2 video{width:100%;max-height:58vh;border-radius:12px;background:#0c1530;margin:0 0 18px;display:block;}
  #modal2 .m-actions{display:flex;justify-content:center;}
  #modal2 .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;padding:11px 24px;border-radius:999px;border:2px solid var(--cc,var(--ink));background:#fff;color:var(--cc,var(--ink));font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;transition:all .2s;}
  #modal2 .btn:hover{background:var(--cc,var(--ink));color:#fff;}
  /* footer building-logo halo cue + project-purpose popup with undulating tri-colour border */
  #footer{--footer-halo:clamp(106px,14.4vh,134px);}
  #modal2 .mclose{position:absolute;top:11px;right:15px;cursor:pointer;border:none;background:none;font-size:22px;line-height:1;color:#aeb6c6;}
  #modal2 .mclose:hover{color:var(--ink);}
  #card .close{position:absolute;top:15%;right:15%;cursor:pointer;border:none;background:none;font-size:18px;line-height:1;color:#aeb6c6;z-index:2;}
  #card.essay-card .close{color:rgba(255,255,255,.72);}
  #card .close:hover{color:var(--ink);}

  #footer{position:fixed;left:0;right:0;bottom:clamp(4px,2vh,16px);text-align:center;z-index:6;opacity:0;animation:rise 1s ease 1.4s both;display:flex;flex-direction:column;align-items:center;gap:4px;}
  #footer a{color:var(--muted);text-decoration:none;font-size:13.5px;font-weight:500;border-bottom:1px solid transparent;transition:color .2s,border-color .2s;}

  #words{position:fixed;left:0;right:0;top:40%;transform:translateY(-50%);text-align:center;pointer-events:none;z-index:5;}
  #words span{position:absolute;left:0;right:0;font-size:clamp(26px,6vw,64px);font-weight:650;letter-spacing:0;color:var(--ink);opacity:0;}
  @keyframes flash{0%{opacity:0;transform:translateY(8px) scale(.98);filter:blur(4px);}40%{opacity:1;transform:translateY(0) scale(1);filter:blur(0);}100%{opacity:0;transform:translateY(-8px) scale(1.01);filter:blur(4px);}}
  #w1{animation:flash .62s ease-in-out .15s both;} #w2{animation:flash .62s ease-in-out .72s both;} #w3{animation:flash .62s ease-in-out 1.29s both;}

  #header{position:fixed;left:0;right:0;top:clamp(6px,5vh,40px);text-align:center;z-index:6;pointer-events:none;opacity:0;animation:rise 1s cubic-bezier(.2,.7,.2,1) 2.1s both;}
  @keyframes rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
  #title{margin:0;font-family:"Creda Juris Tech70","EB Garamond",Garamond,"Adobe Garamond Pro",Georgia,"Times New Roman",serif;font-weight:500;letter-spacing:0;font-size:clamp(38px,6.6vw,76px);line-height:.95;color:var(--ink);pointer-events:auto;}
  #title .ai{color:var(--philosophy);}
  .ls-logo{display:inline-block;background:transparent;font-family:"Creda Juris Tech70","EB Garamond",Garamond,"Adobe Garamond Pro",Georgia,"Times New Roman",serif;font-weight:700;line-height:1;letter-spacing:0;font-size:clamp(37px,8.6vw,52px);margin:0 0 15px;}
  .ls-name{color:#fff;}
  .ls-ai{color:var(--philosophy);}
  #subtitle{margin:.5em 0 0;font-family:"Franklin Gothic Medium","Franklin Gothic Book","Arial Narrow",Arial,sans-serif;font-size:clamp(13px,1.7vw,18px);font-weight:850;letter-spacing:.2em;text-transform:uppercase;}
  #subtitle .dword{color:var(--muted);transition:color .35s ease,text-shadow .35s ease,opacity .35s ease,transform .35s ease;display:inline-block;cursor:pointer;pointer-events:auto;position:relative;}
  #subtitle .sep{color:#c7cedd;margin:0 .45em;}
  @keyframes wordpulse{0%{transform:scale(1);}32%{transform:scale(1.22);}100%{transform:scale(1);}}
  #subtitle .dword.pulse{animation:wordpulse .62s ease;}
  #subtitle .dword.landing-pulse{animation:wordpulse 1s ease;z-index:1;isolation:isolate;}

  #tip{position:fixed;z-index:8;pointer-events:none;transform:translate(-50%,-140%);opacity:0;transition:opacity .12s ease;max-width:min(280px,74vw);white-space:normal;
    background:rgba(31,45,87,.95);color:#fff;border-radius:10px;padding:8px 12px;font-size:13px;font-weight:500;line-height:1.3;box-shadow:0 8px 26px rgba(31,45,87,.22);}
  #tip .kind{display:block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;opacity:.7;font-weight:700;margin-bottom:2px;}
  #tip .act{display:block;font-size:9px;letter-spacing:.12em;text-transform:uppercase;opacity:.58;font-weight:700;margin-top:3px;}
  #tip::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:6px solid transparent;border-top-color:rgba(31,45,87,.95);}

  /* circular, domain-coloured pop-up */
  #card{position:fixed;z-index:9;isolation:isolate;opacity:0;transform:translate(-50%,-50%) scale(.8);transition:opacity .26s ease,transform .26s cubic-bezier(.2,.8,.2,1);pointer-events:none;
    width:min(248px,82vw);height:min(248px,82vw);border-radius:50%;background:#fff;border:2px solid var(--cc,var(--line));
    box-shadow:0 24px 60px rgba(31,45,87,.22);display:flex;align-items:center;justify-content:center;text-align:center;}
  /* content wrapper: the circle is sized in JS to leave a consistent ~10% negative-space ring around this block */
  #card .cc{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;max-width:min(212px,68vw);}
  #card.essay-card h3{padding:0 6px;}
  #card.show{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto;}
  #card::before{content:"";position:absolute;inset:-3px;border-radius:50%;border:2.5px solid var(--cc,#e8531c);opacity:0;pointer-events:none;}
  #card.essay-card{background:#1f2d57;border:0;color:#fff;}
  #card.essay-card::after{content:"";position:absolute;inset:-14px;border-radius:50%;z-index:-1;background-image:linear-gradient(115deg,#e8531c,#1f2d57,#0d9488,#e8531c,#1d4ed8,#0d9488,#e8531c);background-size:2000px 2000px;background-position:0px 50%;box-shadow:0 0 28px rgba(232,83,28,.28);}
  #card.essay-card.show::after{
    -webkit-animation-name: purpose-flow;
    -webkit-animation-duration: 55s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    animation-name: purpose-flow;
    animation-duration: 55s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }
  #card.activate::before{animation:cardburst .8s ease-out;}
  @keyframes cardburst{0%{transform:scale(.62);opacity:.9;}100%{transform:scale(1.65);opacity:0;}}
  #card .kind{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;}
  #card h3{margin:6px 0 5px;font-size:17px;font-weight:800;letter-spacing:0;line-height:1.18;}
  #card.essay-card h3{font-size:16px;line-height:1.18;margin-bottom:7px;}
  #card p{margin:0 0 11px;font-size:14.5px;color:var(--muted);line-height:1.42;}
  #card.essay-card p{display:block;color:#fff;}
  #card .work-pie{display:block;width:42px;height:42px;border-radius:50%;margin:6px auto 10px;border:2px solid rgba(255,255,255,.95);box-shadow:0 0 0 1px rgba(31,45,87,.18),0 6px 14px rgba(31,45,87,.18);}
  #card .work-pie::after{content:"";display:block;width:14px;height:14px;margin:12px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px rgba(31,45,87,.10);}
  #card video.vid{display:none;width:min(206px,64vw);aspect-ratio:16/9;border-radius:10px;background:#0c1530;margin:0 0 10px;object-fit:cover;}
  #card.video-card video.vid{display:block;}
  #card a.open{display:inline-flex;align-items:center;gap:6px;background:var(--cc,var(--ink));color:#fff;text-decoration:none;font-size:12.5px;font-weight:700;padding:8px 15px;border-radius:20px;transition:transform .15s,filter .15s;}
  #card a.open:hover{transform:scale(1.05);filter:brightness(1.12);}
  /* circular button stack inside the pop-up */
  #card .btns{display:flex;flex-direction:column;gap:8px;align-items:center;width:100%;margin-top:2px;}
  #card .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;min-width:132px;max-width:92%;
    padding:8px 17px;border-radius:999px;border:2px solid var(--cc,var(--ink));background:#fff;color:var(--cc,var(--ink));
    font-family:inherit;font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;transition:all .18s;}
  #card .btn:hover,#card .btn.glow{background:var(--cc,var(--ink));color:#fff;box-shadow:0 0 0 4px rgba(31,45,87,.08),0 8px 22px rgba(31,45,87,.18);}
  #card .btn.locked{border-color:#c4cbd8;color:#9aa4b6;background:#f5f6fa;cursor:not-allowed;}
  #card .btn.locked:hover{background:#f5f6fa;color:#9aa4b6;box-shadow:none;}
  /* secondary rectangular pop-up: abstract text or video player */
  #modal2{position:fixed;inset:0;z-index:12;display:none;align-items:center;justify-content:center;background:rgba(15,21,45,.42);padding:20px;}
  #modal2.show{display:flex;}
  #modal2 .box{position:relative;background:#fff;border:2px solid var(--cc,var(--ink));border-radius:18px;max-width:min(580px,94vw);max-height:88vh;overflow:auto;padding:30px 30px 26px;box-shadow:0 36px 90px rgba(31,45,87,.34);text-align:left;}
  #modal2 .mk{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--cc,var(--ink));}
  #modal2 h4{font-family:"Creda Juris Tech70","EB Garamond",Garamond,Georgia,serif;font-size:23px;font-weight:600;margin:5px 0 14px;line-height:1.16;}
  #modal2 .ab{font-size:14.5px;line-height:1.56;color:var(--ink);margin:0 0 20px;}
  #modal2 video{width:100%;max-height:58vh;border-radius:12px;background:#0c1530;margin:0 0 18px;display:block;}
  #modal2 .m-actions{display:flex;justify-content:center;}
  #modal2 .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;padding:11px 24px;border-radius:999px;border:2px solid var(--cc,var(--ink));background:#fff;color:var(--cc,var(--ink));font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;transition:all .2s;}
  #modal2 .btn:hover{background:var(--cc,var(--ink));color:#fff;}
  /* footer building-logo halo cue + project-purpose popup with undulating tri-colour border */
  #footer{--footer-halo:clamp(106px,14.4vh,134px);}
  #footer::before{content:"";position:absolute;left:50%;top:0;width:var(--footer-halo);height:var(--footer-halo);border-radius:50%;transform:translate(-50%,0);background:rgba(29,78,216,.18);box-shadow:0 0 0 rgba(29,78,216,0);opacity:0;pointer-events:none;z-index:0;}
  #footer.halo-glow::before{animation:footer-halo-glow 5s ease forwards;}
  @keyframes footer-halo-glow{
    0%{opacity:0;box-shadow:0 0 0 rgba(29,78,216,0);transform:translate(-50%,0) scale(1)}
    14%{opacity:.68;box-shadow:0 0 20px 7px rgba(29,78,216,.48),0 0 54px 18px rgba(31,45,87,.24);transform:translate(-50%,0) scale(1.08)}
    34%{opacity:.48;box-shadow:0 0 34px 13px rgba(29,78,216,.42),0 0 86px 32px rgba(31,45,87,.22);transform:translate(-50%,0) scale(1.55)}
    52%{opacity:.62;box-shadow:0 0 28px 11px rgba(29,78,216,.48),0 0 104px 42px rgba(31,45,87,.24);transform:translate(-50%,0) scale(2.1)}
    67%{opacity:.26;box-shadow:0 0 44px 15px rgba(29,78,216,.28),0 0 122px 50px rgba(31,45,87,.16);transform:translate(-50%,0) scale(2.45)}
    100%{opacity:0;box-shadow:0 0 0 rgba(29,78,216,0);transform:translate(-50%,0) scale(3)}}
  #footer img{cursor:pointer;transition:filter .45s ease;}
  #purpose-modal{position:fixed;inset:0;z-index:13;display:flex;align-items:center;justify-content:center;background:rgba(15,21,45,.46);padding:24px;opacity:0;pointer-events:none;visibility:hidden;transition:opacity .3s;}
  #purpose-modal.show{opacity:1;pointer-events:auto;visibility:visible;}
  #purpose-modal .pbox{position:relative;z-index:0;isolation:isolate;background:#1f2d57;color:#fff;border-radius:18px;max-width:min(560px,92vw);max-height:86vh;overflow:visible;padding:32px 32px 18px;box-shadow:0 36px 90px rgba(31,45,87,.34);text-align:left;display:flex;flex-direction:column;}
  #purpose-modal .pbox::before{content:"";position:absolute;inset:-35px;border-radius:53px;z-index:-1;background-image:linear-gradient(115deg,#e8531c,#1f2d57,#0d9488,#1f2d57,#e8531c,#1f2d57,#0d9488,#1f2d57,#e8531c);background-size:3200px 2200px;background-repeat:no-repeat;background-position:-700px 50%;box-shadow:0 0 34px rgba(232,83,28,.3);}
  #purpose-modal.show .pbox::before{
    -webkit-animation-name: purpose-modal-flow;
    -webkit-animation-duration: 116s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-name: purpose-modal-flow;
    animation-duration: 116s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }
  @-webkit-keyframes purpose-flow{
    0%{background-position:-700px 50%}
    100%{background-position:-1600px 50%}
  }
  @keyframes purpose-flow{
    0%{background-position:-700px 50%}
    100%{background-position:-1600px 50%}
  }
  @-webkit-keyframes purpose-modal-flow{
    0%{background-position:-700px 50%}
    100%{background-position:-1450px 50%}
  }
  @keyframes purpose-modal-flow{
    0%{background-position:-700px 50%}
    100%{background-position:-1450px 50%}
  }

  #purpose-modal .purpose-wordmark{display:block;text-align:left;font-size:clamp(38px,8vw,82px);font-weight:700;line-height:.95;margin:0 0 16px;background:transparent;border:0;box-shadow:none;text-shadow:none;}
  #purpose-modal .purpose-wordmark img{display:block;width:min(324px,53vw);height:auto;max-height:70px;object-fit:contain;background:transparent !important;border:0 !important;box-shadow:none !important;margin:0;}
  #purpose-modal .purpose-wordmark .ls-name{color:#fff;}
  #purpose-modal .purpose-wordmark .ls-ai{color:var(--philosophy);}
  #purpose-modal .ptext{font-family:"Century Schoolbook","New Century Schoolbook","EB Garamond",Georgia,serif;font-size:14.5px;line-height:1.6;color:#fff;max-height:calc(86vh - 286px);overflow:auto;padding-right:14px;margin-right:-14px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent;}
  #purpose-modal .ptext::-webkit-scrollbar{width:4px;background:transparent;}
  #purpose-modal .ptext::-webkit-scrollbar-track{background:transparent;}
  /* mobile: scrollbar stays slightly (minimally) visible at rest, brightening while actively scrolling/hovering */
  #purpose-modal .ptext::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:10px;}
  #purpose-modal .ptext:hover::-webkit-scrollbar-thumb,#purpose-modal .ptext:active::-webkit-scrollbar-thumb{background:rgba(255,255,255,.5);}
  #purpose-modal .ptext p{margin:0 0 12px;}
  #purpose-modal .ptext a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.55);}
  #purpose-modal .pclose{position:absolute;top:10px;right:14px;cursor:pointer;font-size:24px;line-height:1;color:rgba(255,255,255,.72);background:none;border:0;padding:2px 6px;}
  #purpose-modal .pclose:focus, #purpose-modal .pclose:focus-visible{outline:none !important;}
  ::-webkit-scrollbar-button { display: none !important; }
  #purpose-modal .plogo{display:block;margin:0 0 14px;height:139px;width:auto;opacity:.95;}
  #modal2 .btn.glow{background:var(--cc,var(--ink));color:#fff;animation:btnglow 1.4s ease-in-out infinite;}
  @keyframes btnglow{0%,100%{box-shadow:0 0 0 0 var(--cc,#e8531c);}50%{box-shadow:0 0 17px 5px var(--cc,#e8531c);}}
  #modal2 .mclose{position:absolute;top:11px;right:15px;cursor:pointer;border:none;background:none;font-size:22px;line-height:1;color:#aeb6c6;}
  #modal2 .mclose:hover{color:var(--ink);}
  #card .close{position:absolute;top:15%;right:15%;cursor:pointer;border:none;background:none;font-size:18px;line-height:1;color:#aeb6c6;z-index:2;}
  #card.essay-card .close{color:rgba(255,255,255,.72);}
  #card .close:hover{color:var(--ink);}

  #footer{position:fixed;left:0;right:0;bottom:clamp(4px,2vh,16px);text-align:center;z-index:6;opacity:0;animation:rise 1s ease 1.4s both;display:flex;flex-direction:column;align-items:center;gap:4px;}
  #footer a{color:var(--muted);text-decoration:none;font-size:13.5px;font-weight:500;border-bottom:1px solid transparent;transition:color .2s,border-color .2s;}
#card.activate::before{animation:cardburst .8s ease-out;}
  @keyframes cardburst{0%{transform:scale(.62);opacity:.9;}100%{transform:scale(1.65);opacity:0;}}
  #card .kind{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;}
  #card h3{margin:6px 0 5px;font-size:17px;font-weight:800;letter-spacing:0;line-height:1.18;}
  #card.essay-card h3{font-size:16px;line-height:1.18;margin-bottom:7px;}
  #card p{margin:0 0 11px;font-size:14.5px;color:var(--muted);line-height:1.42;}
  #card.essay-card p{display:block;color:#fff;}
  #card .work-pie{display:block;width:42px;height:42px;border-radius:50%;margin:6px auto 10px;border:2px solid rgba(255,255,255,.95);box-shadow:0 0 0 1px rgba(31,45,87,.18),0 6px 14px rgba(31,45,87,.18);}
  #card .work-pie::after{content:"";display:block;width:14px;height:14px;margin:12px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px rgba(31,45,87,.10);}
  #card video.vid{display:none;width:min(206px,64vw);aspect-ratio:16/9;border-radius:10px;background:#0c1530;margin:0 0 10px;object-fit:cover;}
  #card.video-card video.vid{display:block;}
  #card a.open{display:inline-flex;align-items:center;gap:6px;background:var(--cc,var(--ink));color:#fff;text-decoration:none;font-size:12.5px;font-weight:700;padding:8px 15px;border-radius:20px;transition:transform .15s,filter .15s;}
  #card a.open:hover{transform:scale(1.05);filter:brightness(1.12);}
  /* circular button stack inside the pop-up */
  #card .btns{display:flex;flex-direction:column;gap:8px;align-items:center;width:100%;margin-top:2px;}
  #card .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;min-width:132px;max-width:92%;
    padding:8px 17px;border-radius:999px;border:2px solid var(--cc,var(--ink));background:#fff;color:var(--cc,var(--ink));
    font-family:inherit;font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;transition:all .18s;}
  #card .btn:hover,#card .btn.glow{background:var(--cc,var(--ink));color:#fff;box-shadow:0 0 0 4px rgba(31,45,87,.08),0 8px 22px rgba(31,45,87,.18);}
  #card .btn.locked{border-color:#c4cbd8;color:#9aa4b6;background:#f5f6fa;cursor:not-allowed;}
  #card .btn.locked:hover{background:#f5f6fa;color:#9aa4b6;box-shadow:none;}
  /* secondary rectangular pop-up: abstract text or video player */
  #modal2{position:fixed;inset:0;z-index:12;display:none;align-items:center;justify-content:center;background:rgba(15,21,45,.42);padding:20px;}
  #modal2.show{display:flex;}
  #modal2 .box{position:relative;background:#fff;border:2px solid var(--cc,var(--ink));border-radius:18px;max-width:min(580px,94vw);max-height:88vh;overflow:auto;padding:30px 30px 26px;box-shadow:0 36px 90px rgba(31,45,87,.34);text-align:left;}
  #modal2 .mk{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--cc,var(--ink));}
  #modal2 h4{font-family:"Creda Juris Tech70","EB Garamond",Garamond,Georgia,serif;font-size:23px;font-weight:600;margin:5px 0 14px;line-height:1.16;}
  #modal2 .ab{font-size:14.5px;line-height:1.56;color:var(--ink);margin:0 0 20px;}
  #modal2 video{width:100%;max-height:58vh;border-radius:12px;background:#0c1530;margin:0 0 18px;display:block;}
  #modal2 .m-actions{display:flex;justify-content:center;}
  #modal2 .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;padding:11px 24px;border-radius:999px;border:2px solid var(--cc,var(--ink));background:#fff;color:var(--cc,var(--ink));font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;transition:all .2s;}
  #modal2 .btn:hover{background:var(--cc,var(--ink));color:#fff;}
  /* footer building-logo halo cue + project-purpose popup with undulating tri-colour border */
  #footer{--footer-halo:clamp(106px,14.4vh,134px);}
  #modal2 .mclose{position:absolute;top:11px;right:15px;cursor:pointer;border:none;background:none;font-size:22px;line-height:1;color:#aeb6c6;}
  #modal2 .mclose:hover{color:var(--ink);}
  #card .close{position:absolute;top:15%;right:15%;cursor:pointer;border:none;background:none;font-size:18px;line-height:1;color:#aeb6c6;z-index:2;}
  #card.essay-card .close{color:rgba(255,255,255,.72);}
  #card .close:hover{color:var(--ink);}

  #footer{position:fixed;left:0;right:0;bottom:clamp(4px,2vh,16px);text-align:center;z-index:6;opacity:0;animation:rise 1s ease 1.4s both;display:flex;flex-direction:column;align-items:center;gap:4px;}
  #footer a{color:var(--muted);text-decoration:none;font-size:13.5px;font-weight:500;border-bottom:1px solid transparent;transition:color .2s,border-color .2s;}

  #words{position:fixed;left:0;right:0;top:40%;transform:translateY(-50%);text-align:center;pointer-events:none;z-index:5;}
  #words span{position:absolute;left:0;right:0;font-size:clamp(26px,6vw,64px);font-weight:650;letter-spacing:0;color:var(--ink);opacity:0;}
  @keyframes flash{0%{opacity:0;transform:translateY(8px) scale(.98);filter:blur(4px);}40%{opacity:1;transform:translateY(0) scale(1);filter:blur(0);}100%{opacity:0;transform:translateY(-8px) scale(1.01);filter:blur(4px);}}
  #w1{animation:flash .62s ease-in-out .15s both;} #w2{animation:flash .62s ease-in-out .72s both;} #w3{animation:flash .62s ease-in-out 1.29s both;}

  #header{position:fixed;left:0;right:0;top:clamp(6px,5vh,40px);text-align:center;z-index:6;pointer-events:none;opacity:0;animation:rise 1s cubic-bezier(.2,.7,.2,1) 2.1s both;}
  @keyframes rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
  #title{margin:0;font-family:"Creda Juris Tech70","EB Garamond",Garamond,"Adobe Garamond Pro",Georgia,"Times New Roman",serif;font-weight:500;letter-spacing:0;font-size:clamp(38px,6.6vw,76px);line-height:.95;color:var(--ink);pointer-events:auto;}
  #title .ai{color:var(--philosophy);}
  .ls-logo{display:inline-block;background:transparent;font-family:"Creda Juris Tech70","EB Garamond",Garamond,"Adobe Garamond Pro",Georgia,"Times New Roman",serif;font-weight:700;line-height:1;letter-spacing:0;font-size:clamp(37px,8.6vw,52px);margin:0 0 15px;}
  .ls-name{color:#fff;}
  .ls-ai{color:var(--philosophy);}
  #subtitle{margin:.5em 0 0;font-family:"Franklin Gothic Medium","Franklin Gothic Book","Arial Narrow",Arial,sans-serif;font-size:clamp(13px,1.7vw,18px);font-weight:850;letter-spacing:.2em;text-transform:uppercase;}
  #subtitle .dword{color:var(--muted);transition:color .35s ease,text-shadow .35s ease,opacity .35s ease,transform .35s ease;display:inline-block;cursor:pointer;pointer-events:auto;position:relative;}
  #subtitle .sep{color:#c7cedd;margin:0 .45em;}
  @keyframes wordpulse{0%{transform:scale(1);}32%{transform:scale(1.22);}100%{transform:scale(1);}}
  #subtitle .dword.pulse{animation:wordpulse .62s ease;}
  #subtitle .dword.landing-pulse{animation:wordpulse 1s ease;z-index:1;isolation:isolate;}

  #tip{position:fixed;z-index:8;pointer-events:none;transform:translate(-50%,-140%);opacity:0;transition:opacity .12s ease;max-width:min(280px,74vw);white-space:normal;
    background:rgba(31,45,87,.95);color:#fff;border-radius:10px;padding:8px 12px;font-size:13px;font-weight:500;line-height:1.3;box-shadow:0 8px 26px rgba(31,45,87,.22);}
  #tip .kind{display:block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;opacity:.7;font-weight:700;margin-bottom:2px;}
  #tip .act{display:block;font-size:9px;letter-spacing:.12em;text-transform:uppercase;opacity:.58;font-weight:700;margin-top:3px;}
  #tip::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:6px solid transparent;border-top-color:rgba(31,45,87,.95);}

  /* circular, domain-coloured pop-up */
  #card{position:fixed;z-index:9;isolation:isolate;opacity:0;transform:translate(-50%,-50%) scale(.8);transition:opacity .26s ease,transform .26s cubic-bezier(.2,.8,.2,1);pointer-events:none;
    width:min(248px,82vw);height:min(248px,82vw);border-radius:50%;background:#fff;border:2px solid var(--cc,var(--line));
    box-shadow:0 24px 60px rgba(31,45,87,.22);display:flex;align-items:center;justify-content:center;text-align:center;}
  /* content wrapper: the circle is sized in JS to leave a consistent ~10% negative-space ring around this block */
  #card .cc{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;max-width:min(212px,68vw);}
  #card.essay-card h3{padding:0 6px;}
  #card.show{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto;}
  #card::before{content:"";position:absolute;inset:-3px;border-radius:50%;border:2.5px solid var(--cc,#e8531c);opacity:0;pointer-events:none;}
  #card.essay-card{background:#1f2d57;border:0;color:#fff;}
  #card.essay-card::after{content:"";position:absolute;inset:-14px;border-radius:50%;z-index:-1;background-image:linear-gradient(115deg,#e8531c,#1f2d57,#0d9488,#e8531c,#1d4ed8,#0d9488,#e8531c);background-size:2000px 2000px;background-position:0px 50%;box-shadow:0 0 28px rgba(232,83,28,.28);}
  #card.essay-card.show::after{
    -webkit-animation-name: purpose-flow;
    -webkit-animation-duration: 55s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    animation-name: purpose-flow;
    animation-duration: 55s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }
  #card.activate::before{animation:cardburst .8s ease-out;}
  @keyframes cardburst{0%{transform:scale(.62);opacity:.9;}100%{transform:scale(1.65);opacity:0;}}
  #card .kind{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;}
  #card h3{margin:6px 0 5px;font-size:17px;font-weight:800;letter-spacing:0;line-height:1.18;}
  #card.essay-card h3{font-size:16px;line-height:1.18;margin-bottom:7px;}
  #card p{margin:0 0 11px;font-size:14.5px;color:var(--muted);line-height:1.42;}
  #card.essay-card p{display:block;color:#fff;}
  #card .work-pie{display:block;width:42px;height:42px;border-radius:50%;margin:6px auto 10px;border:2px solid rgba(255,255,255,.95);box-shadow:0 0 0 1px rgba(31,45,87,.18),0 6px 14px rgba(31,45,87,.18);}
  #card .work-pie::after{content:"";display:block;width:14px;height:14px;margin:12px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px rgba(31,45,87,.10);}
  #card video.vid{display:none;width:min(206px,64vw);aspect-ratio:16/9;border-radius:10px;background:#0c1530;margin:0 0 10px;object-fit:cover;}
  #card.video-card video.vid{display:block;}
  #card a.open{display:inline-flex;align-items:center;gap:6px;background:var(--cc,var(--ink));color:#fff;text-decoration:none;font-size:12.5px;font-weight:700;padding:8px 15px;border-radius:20px;transition:transform .15s,filter .15s;}
  #card a.open:hover{transform:scale(1.05);filter:brightness(1.12);}
  /* circular button stack inside the pop-up */
  #card .btns{display:flex;flex-direction:column;gap:8px;align-items:center;width:100%;margin-top:2px;}
  #card .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;min-width:132px;max-width:92%;
    padding:8px 17px;border-radius:999px;border:2px solid var(--cc,var(--ink));background:#fff;color:var(--cc,var(--ink));
    font-family:inherit;font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;transition:all .18s;}
  #card .btn:hover,#card .btn.glow{background:var(--cc,var(--ink));color:#fff;box-shadow:0 0 0 4px rgba(31,45,87,.08),0 8px 22px rgba(31,45,87,.18);}
  #card .btn.locked{border-color:#c4cbd8;color:#9aa4b6;background:#f5f6fa;cursor:not-allowed;}
  #card .btn.locked:hover{background:#f5f6fa;color:#9aa4b6;box-shadow:none;}
  /* secondary rectangular pop-up: abstract text or video player */
  #modal2{position:fixed;inset:0;z-index:12;display:none;align-items:center;justify-content:center;background:rgba(15,21,45,.42);padding:20px;}
  #modal2.show{display:flex;}
  #modal2 .box{position:relative;background:#fff;border:2px solid var(--cc,var(--ink));border-radius:18px;max-width:min(580px,94vw);max-height:88vh;overflow:auto;padding:30px 30px 26px;box-shadow:0 36px 90px rgba(31,45,87,.34);text-align:left;}
  #modal2 .mk{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--cc,var(--ink));}
  #modal2 h4{font-family:"Creda Juris Tech70","EB Garamond",Garamond,Georgia,serif;font-size:23px;font-weight:600;margin:5px 0 14px;line-height:1.16;}
  #modal2 .ab{font-size:14.5px;line-height:1.56;color:var(--ink);margin:0 0 20px;}
  #modal2 video{width:100%;max-height:58vh;border-radius:12px;background:#0c1530;margin:0 0 18px;display:block;}
  #modal2 .m-actions{display:flex;justify-content:center;}
  #modal2 .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;padding:11px 24px;border-radius:999px;border:2px solid var(--cc,var(--ink));background:#fff;color:var(--cc,var(--ink));font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;transition:all .2s;}
  #modal2 .btn:hover{background:var(--cc,var(--ink));color:#fff;}
  /* footer building-logo halo cue + project-purpose popup with undulating tri-colour border */
  #footer{--footer-halo:clamp(106px,14.4vh,134px);}
  #footer::before{content:"";position:absolute;left:50%;top:0;width:var(--footer-halo);height:var(--footer-halo);border-radius:50%;transform:translate(-50%,0);background:rgba(29,78,216,.18);box-shadow:0 0 0 rgba(29,78,216,0);opacity:0;pointer-events:none;z-index:0;}
  #footer.halo-glow::before{animation:footer-halo-glow 5s ease forwards;}
  @keyframes footer-halo-glow{
    0%{opacity:0;box-shadow:0 0 0 rgba(29,78,216,0);transform:translate(-50%,0) scale(1)}
    14%{opacity:.68;box-shadow:0 0 20px 7px rgba(29,78,216,.48),0 0 54px 18px rgba(31,45,87,.24);transform:translate(-50%,0) scale(1.08)}
    34%{opacity:.48;box-shadow:0 0 34px 13px rgba(29,78,216,.42),0 0 86px 32px rgba(31,45,87,.22);transform:translate(-50%,0) scale(1.55)}
    52%{opacity:.62;box-shadow:0 0 28px 11px rgba(29,78,216,.48),0 0 104px 42px rgba(31,45,87,.24);transform:translate(-50%,0) scale(2.1)}
    67%{opacity:.26;box-shadow:0 0 44px 15px rgba(29,78,216,.28),0 0 122px 50px rgba(31,45,87,.16);transform:translate(-50%,0) scale(2.45)}
    100%{opacity:0;box-shadow:0 0 0 rgba(29,78,216,0);transform:translate(-50%,0) scale(3)}}
  #footer img{cursor:pointer;transition:filter .45s ease;}
  #purpose-modal{position:fixed;inset:0;z-index:13;display:flex;align-items:center;justify-content:center;background:rgba(15,21,45,.46);padding:24px;opacity:0;pointer-events:none;visibility:hidden;transition:opacity .3s;}
  #purpose-modal.show{opacity:1;pointer-events:auto;visibility:visible;}
  #purpose-modal .pbox{position:relative;z-index:0;isolation:isolate;background:#1f2d57;color:#fff;border-radius:18px;max-width:min(560px,92vw);max-height:86vh;overflow:visible;padding:32px 32px 18px;box-shadow:0 36px 90px rgba(31,45,87,.34);text-align:left;display:flex;flex-direction:column;}
  #purpose-modal .pbox::before{content:"";position:absolute;inset:-35px;border-radius:53px;z-index:-1;background-image:linear-gradient(115deg,#e8531c,#1f2d57,#0d9488,#1f2d57,#e8531c,#1f2d57,#0d9488,#1f2d57,#e8531c);background-size:3200px 2200px;background-repeat:no-repeat;background-position:-700px 50%;box-shadow:0 0 34px rgba(232,83,28,.3);}
  #purpose-modal.show .pbox::before{
    -webkit-animation-name: purpose-modal-flow;
    -webkit-animation-duration: 116s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-name: purpose-modal-flow;
    animation-duration: 116s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }
  @-webkit-keyframes purpose-flow{
    0%{background-position:-700px 50%}
    100%{background-position:-1600px 50%}
  }
  @keyframes purpose-flow{
    0%{background-position:-700px 50%}
    100%{background-position:-1600px 50%}
  }
  @-webkit-keyframes purpose-modal-flow{
    0%{background-position:-700px 50%}
    100%{background-position:-1450px 50%}
  }
  @keyframes purpose-modal-flow{
    0%{background-position:-700px 50%}
    100%{background-position:-1450px 50%}
  }

  #purpose-modal .purpose-wordmark{display:block;text-align:left;font-size:clamp(38px,8vw,82px);font-weight:700;line-height:.95;margin:0 0 16px;background:transparent;border:0;box-shadow:none;text-shadow:none;}
  #purpose-modal .purpose-wordmark img{display:block;width:min(324px,53vw);height:auto;max-height:70px;object-fit:contain;background:transparent !important;border:0 !important;box-shadow:none !important;margin:0;}
  #purpose-modal .purpose-wordmark .ls-name{color:#fff;}
  #purpose-modal .purpose-wordmark .ls-ai{color:var(--philosophy);}
  #purpose-modal .ptext{font-family:"Century Schoolbook","New Century Schoolbook","EB Garamond",Georgia,serif;font-size:14.5px;line-height:1.6;color:#fff;max-height:calc(86vh - 286px);overflow:auto;padding-right:14px;margin-right:-14px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent;}
  #purpose-modal .ptext::-webkit-scrollbar{width:4px;background:transparent;}
  #purpose-modal .ptext::-webkit-scrollbar-track{background:transparent;}
  /* mobile: scrollbar stays slightly (minimally) visible at rest, brightening while actively scrolling/hovering */
  #purpose-modal .ptext::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:10px;}
  #purpose-modal .ptext:hover::-webkit-scrollbar-thumb,#purpose-modal .ptext:active::-webkit-scrollbar-thumb{background:rgba(255,255,255,.5);}
  #purpose-modal .ptext p{margin:0 0 12px;}
  #purpose-modal .ptext a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.55);}
  #purpose-modal .pclose{position:absolute;top:10px;right:14px;cursor:pointer;font-size:24px;line-height:1;color:rgba(255,255,255,.72);background:none;border:0;padding:2px 6px;}
  #purpose-modal .pclose:focus, #purpose-modal .pclose:focus-visible{outline:none !important;}
  ::-webkit-scrollbar-button { display: none !important; }
  #purpose-modal .plogo{display:block;margin:0 0 14px;height:139px;width:auto;opacity:.95;}
  #modal2 .btn.glow{background:var(--cc,var(--ink));color:#fff;animation:btnglow 1.4s ease-in-out infinite;}
  @keyframes btnglow{0%,100%{box-shadow:0 0 0 0 var(--cc,#e8531c);}50%{box-shadow:0 0 17px 5px var(--cc,#e8531c);}}
  #modal2 .mclose{position:absolute;top:11px;right:15px;cursor:pointer;border:none;background:none;font-size:22px;line-height:1;color:#aeb6c6;}
  #modal2 .mclose:hover{color:var(--ink);}
  #card .close{position:absolute;top:15%;right:15%;cursor:pointer;border:none;background:none;font-size:18px;line-height:1;color:#aeb6c6;z-index:2;}
  #card.essay-card .close{color:rgba(255,255,255,.72);}
  #card .close:hover{color:var(--ink);}

  #footer{position:fixed;left:0;right:0;bottom:clamp(4px,2vh,16px);text-align:center;z-index:6;opacity:0;animation:rise 1s ease 1.4s both;display:flex;flex-direction:column;align-items:center;gap:4px;}
  #footer a{color:var(--muted);text-decoration:none;font-size:13.5px;font-weight:500;border-bottom:1px solid transparent;transition:color .2s,border-color .2s;}
  #footer a:hover{color:var(--philosophy);border-color:var(--philosophy);}
  #footer img{height:var(--footer-halo);width:auto;display:block;margin-top:10px;margin-bottom:-6px;position:relative;z-index:1;}
  #footer img.orange-contact{animation:footer-building-orange-contact .92s ease-out both;}
  @keyframes footer-building-orange-contact{
    0%{filter:none}
    18%{filter:drop-shadow(0 0 7px rgba(232,83,28,.76)) drop-shadow(0 0 18px rgba(232,83,28,.5)) saturate(1.3) brightness(1.1)}
    52%{filter:drop-shadow(0 0 11px rgba(232,83,28,.68)) drop-shadow(0 0 28px rgba(232,83,28,.38)) saturate(1.24) brightness(1.08)}
    100%{filter:none}
  }
  #footer .brand{display:none;}   /* the lower logo now includes the wordmark */
  #footer .brand .ai{color:var(--philosophy);}
  #footer .email{margin-top:0;padding-top:11px;border-top:1px solid var(--line);min-width:230px;position:relative;z-index:1;}
  #hint{position:fixed;left:0;right:0;bottom:clamp(148px,19vh,184px);text-align:center;z-index:6;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#b6bdcc;opacity:0;animation:rise 1s ease 3.4s both;padding:0 16px;}

   /* swipe and grip hints placed behind pop-up circles */
   #swipe-hint, #grip-hint {
     position: fixed;
     left: 0;
     right: 0;
     bottom: 20px;
     transform: translateY(0);
     pointer-events: none;
     text-align: center;
   }
  .sphere-hint{position:fixed;z-index:4;box-sizing:border-box;width:clamp(188px,16.2vw,232px);height:clamp(188px,16.2vw,232px);border-radius:50%;display:flex;align-items:center;justify-content:center;
   opacity:0;pointer-events:none;color:#fff;background:radial-gradient(circle at 32% 24%,rgba(255,255,255,.92) 0%,rgba(155,198,255,.78) 17%,rgba(29,78,216,.96) 48%,rgba(10,28,82,.98) 100%);box-shadow:0 18px 48px rgba(29,78,216,.34),inset -18px -24px 38px rgba(7,21,63,.34),inset 14px 12px 24px rgba(255,255,255,.34);font-family:"Franklin Gothic Medium","Franklin Gothic Book","Arial Narrow",Arial,sans-serif;font-size:clamp(11px,1.05vw,14px);font-weight:900;letter-spacing:.08em;text-transform:uppercase;text-align:center;text-shadow:0 2px 12px rgba(0,0,0,.42);padding:20px;transition:opacity .55s ease;will-change:transform;}
  .sphere-hint.visible{opacity:1;}
  .sphere-hint.emerging{animation:guide-emerge .46s cubic-bezier(.18,.72,.22,1) both;}
  @keyframes guide-emerge{0%{clip-path:circle(0% at 50% 50%);filter:brightness(1.9) saturate(.55)}55%{clip-path:circle(58% at 50% 50%);filter:brightness(1.28) saturate(.82)}100%{clip-path:circle(75% at 50% 50%);filter:brightness(1) saturate(1)}}
  #swipe-hint.visible{animation:swipe-hint-anim 6s ease forwards;}
  @keyframes swipe-hint-anim{0%{opacity:0}6%{opacity:1}90%{opacity:1}100%{opacity:0}}
  #swipe-hint.visible .ar{animation:swipe-arrow 1.1s ease-in-out infinite;}
  @keyframes swipe-arrow{0%,100%{transform:translateX(-5px)}50%{transform:translateX(5px)}}
  #grip-hint{position:fixed;left:50%;top:clamp(108px,18vh,160px);z-index:12;display:none;align-items:center;gap:12px;transform:translateX(-50%);pointer-events:none;opacity:0;padding:9px 14px 9px 16px;background:rgba(255,255,255,.52);border:1px solid rgba(31,45,87,.08);border-radius:999px;box-shadow:0 10px 28px rgba(31,45,87,.10);font-family:"Franklin Gothic Medium","Franklin Gothic Book","Arial Narrow",Arial,sans-serif;font-size:10.5px;font-weight:850;letter-spacing:.14em;text-transform:uppercase;color:#000;text-shadow:0 1px 8px rgba(255,255,255,.72);}
  #grip-hint.visible{display:flex;animation:grip-hint-anim 5s ease forwards;}
  #grip-hint .arrow{display:inline-block;font-size:20px;line-height:1;transform-origin:50% 50%;animation:grip-arrow-pulse 1s ease-in-out infinite;}
  #grip-hint .arrow::before{content:none;}
  #grip-hint .hint-text{display:inline-block;}
  @keyframes grip-hint-anim{0%{opacity:0;transform:translate(-50%,6px)}10%{opacity:1;transform:translate(-50%,0)}84%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-5px)}}
  @keyframes grip-arrow-pulse{0%,100%{transform:translateX(0) scale(1);opacity:.7}50%{transform:translateX(6px) scale(1.12);opacity:1}}

  .sr-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
  button:focus-visible,a:focus-visible,#subtitle .dword:focus-visible{outline:2px solid var(--philosophy);outline-offset:3px;}
  #title{background:transparent;font-family:"Creda Juris Tech70","EB Garamond",Garamond,"Adobe Garamond Pro",Georgia,"Times New Roman",serif;font-weight:700;letter-spacing:0;}
  #title img{display:block;margin:0 auto;width:min(535px,60.7vw);height:auto;max-height:clamp(41px,8.7vh,75px);object-fit:contain;}
  #title .ai{color:var(--philosophy);}
  #purpose-modal .plogo.wordmark{display:block;height:auto;width:min(351px,55.3vw);max-height:81px;object-fit:contain;object-position:left center;background:transparent !important;border:0 !important;box-shadow:none !important;margin:0 0 15px 0;align-self:flex-start;}
  #purpose-modal .pbox > img.plogo:not(.wordmark){display:block;margin:14px auto 0;height:clamp(106px,14.4vh,134px);max-width:42%;width:auto;object-fit:contain;opacity:.95;flex:0 0 auto;}
  @media (max-width:620px){
    #purpose-modal.show .pbox::before{
      -webkit-animation-duration: 230s;
      animation-duration: 230s;
    }
    #watermark{height:96vh;opacity:.04;}
    /* mobile: wordmark + heading words sit a little higher than default (about halfway
       between the original position and the very top) to open clearance below them */
    #header{top:max(20px, env(safe-area-inset-top, 0px));}
    #title{font-size:clamp(30px,9vw,44px);}
    #subtitle{letter-spacing:.1em;font-size:clamp(11px,3vw,14px);margin-top:.56em;}
    #subtitle .sep{margin:0 .25em;}
    #card .kind{font-size:12px;letter-spacing:.14em;}
    #card h3{font-size:17px;line-height:1.16;}
    #card.essay-card h3{font-size:16px;line-height:1.16;}
    #card p{font-size:14px;line-height:1.38;}
    #card .btn{font-size:12px;}
    #modal2 .ab{font-size:14.5px;}
    #purpose-modal .pbox::before{background-size:3200px 2200px;}
    #footer{bottom:20px;}
    #footer img{height:104px;}
    #hint{bottom:160px;}
  }

  /* desktop: lift the wordmark + heading words slightly and shrink the wordmark by ~15% */
  @media (min-width:621px){
    #header{top:clamp(4px,3.6vh,28px);}
    #title img{width:min(455px,51.6vw);max-height:clamp(35px,7.4vh,64px);}
  }

  #larri-modal{position:fixed;inset:0;z-index:13;display:none;align-items:center;justify-content:center;background:rgba(15,21,45,.42);padding:20px;}
  #larri-modal.show{display:flex;}
  #larri-modal .box{position:relative;background:#fff;border:2px solid var(--cc,var(--ink));border-radius:18px;max-width:min(580px,94vw);max-height:88vh;overflow:auto;padding:30px 30px 26px;box-shadow:0 36px 90px rgba(31,45,87,.34);text-align:left;}
  #larri-modal .mk{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--cc,var(--ink));}
  #larri-modal h4{font-family:"Creda Juris Tech70","EB Garamond",Garamond,Georgia,serif;font-size:23px;font-weight:600;margin:5px 0 14px;line-height:1.16;}
  #larri-modal .ab{font-size:14.5px;line-height:1.56;color:var(--ink);margin:0 0 20px;}
  #larri-modal .mclose{position:absolute;top:11px;right:15px;cursor:pointer;border:none;background:none;font-size:22px;line-height:1;color:#aeb6c6;}
  #larri-modal .mclose:hover{color:var(--ink);}
  @media (orientation: landscape) and (max-height: 540px) {
    #swipe-hint { top: 76px; }
  }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }

  #matrix-access-toggle{position:fixed;left:14px;top:12px;z-index:120;transform:translateY(-160%);opacity:0;padding:10px 14px;border:2px solid var(--code);border-radius:999px;background:#fff;color:var(--ink);font:800 13px/1.2 Arial,sans-serif;box-shadow:0 8px 24px rgba(31,45,87,.2);transition:transform .16s ease,opacity .16s ease;}
  #matrix-access-toggle:focus,#matrix-access-toggle:focus-visible{transform:translateY(0);opacity:1;outline:3px solid #fff;outline-offset:2px;}
  #matrix-node-controls{position:fixed;left:14px;top:58px;z-index:121;width:min(420px,calc(100vw - 28px));max-height:min(70vh,650px);overflow:auto;visibility:hidden;opacity:0;transform:translateY(-8px);pointer-events:none;padding:16px;border:1px solid rgba(31,45,87,.18);border-radius:16px;background:rgba(255,255,255,.98);color:var(--ink);box-shadow:0 18px 50px rgba(31,45,87,.24);transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s;}
  #matrix-node-controls.open{visibility:visible;opacity:1;transform:translateY(0);pointer-events:auto;transition-delay:0s;}
  .matrix-node-controls-head{display:flex;align-items:center;justify-content:space-between;gap:14px;}
  #matrix-node-controls-title{margin:0;font:800 18px/1.2 "EB Garamond",Georgia,serif;}
  #matrix-node-controls-close{flex:0 0 auto;width:38px;height:38px;border:0;border-radius:50%;background:#1f2d57;color:#fff;font:700 25px/1 Arial,sans-serif;cursor:pointer;}
  #matrix-node-controls-help,#matrix-node-controls-count{margin:8px 0 0;font:600 12px/1.4 Arial,sans-serif;color:var(--muted);}
  #matrix-node-controls-count{font-weight:800;color:var(--ink);}
  #matrix-node-controls-list{display:grid;gap:7px;margin:12px 0 0;padding:0;list-style:none;}
  #matrix-node-controls-list button{display:block;width:100%;padding:10px 12px;border:1px solid color-mix(in srgb,var(--node-color,#1f2d57) 42%,#fff);border-left:5px solid var(--node-color,#1f2d57);border-radius:9px;background:#fff;color:var(--ink);font:700 13px/1.3 Arial,sans-serif;text-align:left;cursor:pointer;}
  #matrix-node-controls-list button:hover,#matrix-node-controls-list button:focus-visible{background:color-mix(in srgb,var(--node-color,#1f2d57) 8%,#fff);outline:2px solid var(--node-color,#1f2d57);outline-offset:2px;}
  #matrix-node-controls-list button[aria-current="true"]{box-shadow:inset 0 0 0 1px var(--node-color,#1f2d57);}
  #matrix-node-controls-list .matrix-node-meta{display:block;margin-top:3px;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;}
  @media(max-width:759px){#matrix-access-toggle{left:8px;top:8px}#matrix-node-controls{left:8px;top:54px;width:calc(100vw - 16px);max-height:72vh;padding:14px}}











#concept-edge-toggle{
  --edge-domain:#1f2d57;position:fixed;left:50%;top:clamp(132px,20vh,178px);z-index:9;transform:translate(-50%,-8px);
  display:block;opacity:0;pointer-events:none;padding:9px 16px;border:1px solid color-mix(in srgb,var(--edge-domain) 42%,transparent);
  border-radius:999px;background:rgba(255,255,255,.88);color:#1f2d57;box-shadow:0 8px 24px rgba(31,45,87,.12);
  font-family:"Franklin Gothic Medium","Franklin Gothic Book","Arial Narrow",Arial,sans-serif;font-size:10px;font-weight:850;
  letter-spacing:.11em;text-transform:uppercase;cursor:pointer;transition:opacity .22s ease,transform .22s ease,box-shadow .22s ease,color .22s ease;
}
#concept-edge-toggle.visible{opacity:1;pointer-events:auto;transform:translate(-50%,0);}
#concept-edge-toggle.active{color:#fff;background:var(--edge-domain);box-shadow:0 0 12px color-mix(in srgb,var(--edge-domain) 68%,transparent),0 0 30px color-mix(in srgb,var(--edge-domain) 42%,transparent);}
#concept-edge-toggle:hover{transform:translate(-50%,-1px);}
#concept-edge-toggle:focus-visible{outline:2px solid var(--edge-domain);outline-offset:3px;}
@media(max-width:759px){#concept-edge-toggle{top:clamp(116px,17vh,148px);font-size:9px;padding:8px 12px;}}
#concept-edge-legend-toggle{
  --edge-domain:#1f2d57;position:fixed;left:calc(50% + 112px);top:clamp(132px,20vh,178px);z-index:9;transform:translateY(-8px);
  opacity:0;pointer-events:none;padding:9px 14px;border:1px solid color-mix(in srgb,var(--edge-domain) 42%,transparent);border-radius:999px;
  background:rgba(255,255,255,.88);color:#1f2d57;box-shadow:0 8px 24px rgba(31,45,87,.12);font-family:"Franklin Gothic Medium","Franklin Gothic Book","Arial Narrow",Arial,sans-serif;
  font-size:10px;font-weight:850;letter-spacing:.11em;text-transform:uppercase;cursor:pointer;transition:opacity .22s ease,transform .22s ease,box-shadow .22s ease;
}
#concept-edge-legend-toggle.visible{opacity:1;pointer-events:auto;transform:translateY(0)}
#concept-edge-legend-toggle:hover{transform:translateY(-1px)}
#concept-edge-legend-toggle:focus-visible{outline:2px solid var(--edge-domain);outline-offset:3px}
#concept-edge-legend[hidden]{display:none}
#concept-edge-legend{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:24px;background:rgba(16,25,50,.38);backdrop-filter:blur(5px)}
.concept-edge-legend-panel{width:min(440px,calc(100vw - 32px));max-height:min(72vh,620px);overflow:auto;padding:20px;border:1px solid rgba(31,45,87,.16);border-radius:18px;background:rgba(255,255,255,.97);box-shadow:0 24px 70px rgba(15,26,55,.28)}
.concept-edge-legend-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
.concept-edge-legend-head h2{margin:0;color:#1f2d57;font:850 15px/1.2 "Franklin Gothic Medium","Arial Narrow",Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase}
#concept-edge-legend-close{border:0;background:transparent;color:#1f2d57;font-size:27px;line-height:1;cursor:pointer}
#concept-edge-legend-list{display:grid;gap:7px}
.concept-edge-legend-item{display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;border:1px solid rgba(31,45,87,.12);border-radius:10px;background:#fff;color:#1f2d57;text-align:left;font:700 13px/1.3 Arial,sans-serif;cursor:pointer;transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}
.concept-edge-legend-item:hover,.concept-edge-legend-item:focus-visible{transform:translateX(2px);border-color:rgba(31,45,87,.32);box-shadow:0 5px 16px rgba(31,45,87,.1);outline:none}
.concept-edge-legend-swatch{flex:0 0 28px;height:4px;border-radius:999px;box-shadow:0 0 8px currentColor}
@media(max-width:759px){#concept-edge-legend-toggle{left:calc(50% + 94px);top:clamp(116px,17vh,148px);font-size:9px;padding:8px 10px}.concept-edge-legend-panel{padding:16px}}
@media (orientation:landscape) and (max-height:540px) and (pointer:coarse){#concept-edge-toggle{left:12px;top:92px;transform:translateY(-8px)}#concept-edge-toggle.visible,#concept-edge-toggle:hover{transform:none}#concept-edge-legend-toggle{left:12px;top:132px}body.matrix-search-active #concept-edge-toggle{top:92px}body.matrix-search-active #concept-edge-legend-toggle{top:132px}}


/* Restored compact sphere controls */
.blue-sphere-cue{
  position:fixed;
  z-index:4;
  width:clamp(118px,11vw,138px);
  height:clamp(118px,11vw,138px);
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  opacity:0;
  pointer-events:none;
  color:#fff;
  background:radial-gradient(circle at 31% 24%,rgba(255,255,255,.95) 0%,rgba(140,190,255,.78) 17%,rgba(29,78,216,.97) 50%,rgba(8,24,78,.98) 100%);
  box-shadow:0 16px 42px rgba(29,78,216,.34),inset -14px -20px 30px rgba(7,21,63,.36),inset 12px 10px 18px rgba(255,255,255,.34);
  font-family:"Franklin Gothic Medium","Franklin Gothic Book","Arial Narrow",Arial,sans-serif;
  font-size:clamp(9px,.85vw,11px);
  font-weight:900;
  line-height:1.05;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-align:center;
  text-shadow:0 2px 10px rgba(0,0,0,.45);
}
#swipe-hint.blue-sphere-cue{
  left:auto;
  right:clamp(14px,4vw,46px);
  bottom:clamp(96px,14vh,150px);
  transform:none;
}
#grip-hint.blue-sphere-cue{
  left:auto;
  right:clamp(16px,5vw,64px);
  top:clamp(112px,18vh,168px);
  bottom:auto;
  transform:none;
  padding:0;
  border:0;
  display:flex;
  background:radial-gradient(circle at 31% 24%,rgba(255,255,255,.95) 0%,rgba(140,190,255,.78) 17%,rgba(29,78,216,.97) 50%,rgba(8,24,78,.98) 100%);
  color:#fff;
}
#swipe-hint.blue-sphere-cue.visible{animation:swipe-hint-anim 6s ease forwards;}
#grip-hint.blue-sphere-cue.visible{animation:blue-sphere-hint-anim 5s ease forwards;}
#swipe-hint.blue-sphere-cue .ar,
#grip-hint.blue-sphere-cue .arrow{font-size:20px;line-height:1;animation:grip-arrow-pulse 1s ease-in-out infinite;}

@media(min-width:760px){
  #grip-hint.blue-sphere-cue{width:clamp(184px,14vw,208px);height:clamp(184px,14vw,208px);padding:0;}

}
@keyframes blue-sphere-hint-anim{0%{opacity:0;transform:scale(.84)}10%{opacity:1;transform:scale(1)}84%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.92)}}
#start-back{
  position:fixed;
  left:clamp(14px,3vw,32px);
  top:clamp(92px,16vh,136px);
  z-index:8;
  width:clamp(48px,7vw,64px);
  height:clamp(48px,7vw,64px);
  border-radius:50%;
  border:0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  cursor:pointer;
  color:#fff;
  background:radial-gradient(circle at 31% 24%,rgba(255,255,255,.92) 0%,rgba(145,194,255,.76) 18%,rgba(29,78,216,.98) 52%,rgba(8,24,78,.98) 100%);
  box-shadow:0 14px 34px rgba(29,78,216,.34),inset -10px -15px 24px rgba(7,21,63,.36),inset 9px 8px 15px rgba(255,255,255,.34);
  transition:opacity .25s ease, transform .25s ease;
  transform:scale(.92);
}
#start-back.visible{opacity:1;pointer-events:auto;transform:scale(1);}
#start-back .back-arrow{font-size:28px;line-height:1;font-weight:900;transform:translateX(-1px);}
#start-back:hover{filter:brightness(1.08);}
#start-back:focus-visible{outline:2px solid #fff;outline-offset:4px;}

/* Back sphere now emerges from the lower logo and settles at the lower-left matrix corner. */
#start-back{
  left:clamp(16px,4vw,54px) !important;
  top:auto !important;
  bottom:clamp(118px,19vh,184px) !important;
  transform:scale(.92);
}
#start-back.visible{opacity:1;pointer-events:auto;transform:scale(1);}
#start-back.launching.visible{animation:back-from-logo .78s cubic-bezier(.18,.74,.22,1) both;}
@keyframes back-from-logo{
  0%{left:var(--back-from-x,50vw);top:var(--back-from-y,86vh);bottom:auto;transform:translate(-50%,-50%) scale(.35);opacity:0;}
  18%{opacity:1;}
  72%{transform:translate(0,0) scale(1.08);}
  100%{left:clamp(16px,4vw,54px);top:auto;bottom:clamp(118px,19vh,184px);transform:scale(1);opacity:1;}
}

#landing-guide .guide-copy,#landing-guide .guide-arrow{display:block;transform-origin:50% 50%;will-change:transform;}

/* Instruction copy follows rotating latitude bands on each 3D sphere. */
.sphere-hint,.blue-sphere-cue{perspective:520px;transform-style:preserve-3d;}
.sphere-webgl{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;border-radius:50%;pointer-events:none;transition:opacity .2s ease;}
.sphere-3d-ready .sphere-surface-copy{opacity:0!important;}
.sphere-3d-ready .guide-arrow,.sphere-3d-ready .ar,.sphere-3d-ready .arrow{display:none!important;}
#landing-guide.becoming-search .sphere-webgl{opacity:0;}
.sphere-hint{--sphere-single-band-y:-22px;--sphere-upper-band-y:-22px;--sphere-lower-band-y:22px;}
.blue-sphere-cue{--sphere-single-band-y:-16px;--sphere-upper-band-y:-18px;--sphere-lower-band-y:18px;}
#grip-hint.blue-sphere-cue{--sphere-single-band-y:-20px;--sphere-upper-band-y:-23px;--sphere-lower-band-y:23px;}
.sphere-surface-copy{position:absolute!important;inset:0;display:block!important;max-width:none!important;pointer-events:none;transform-style:preserve-3d;letter-spacing:0;}
.sphere-text-band{position:absolute;left:50%;top:50%;width:0;height:0;display:block;transform:translate3d(0,var(--sphere-band-y,0),0) rotateX(var(--sphere-band-tilt,0deg));transform-style:preserve-3d;}
.sphere-text-orbit{position:absolute;left:0;top:0;width:0;height:0;display:block;transform-style:preserve-3d;animation:sphere-text-drift 4.8s ease-in-out infinite alternate;animation-delay:var(--sphere-orbit-delay,0s);}
.sphere-char{position:absolute;left:0;top:0;width:1em;height:1em;margin:-.5em 0 0 -.5em;display:grid;place-items:center;color:#fff;font-size:clamp(11px,.92vw,13px);font-weight:900;line-height:1;letter-spacing:0;text-align:center;text-transform:uppercase;text-shadow:0 1px 2px rgba(4,12,42,.95),0 0 6px rgba(255,255,255,.62);backface-visibility:hidden;transform:rotateY(var(--sphere-char-angle)) translateZ(var(--sphere-text-radius,58px));}
.sphere-hint .sphere-surface-copy{--sphere-text-radius:clamp(54px,5.6vw,70px);}
.blue-sphere-cue .sphere-surface-copy{--sphere-text-radius:clamp(39px,4.2vw,49px);}
#grip-hint.blue-sphere-cue .sphere-surface-copy{--sphere-text-radius:clamp(60px,5.2vw,69px);}
.sphere-text-band-long .sphere-char{font-size:clamp(10px,.78vw,11.5px);}
.blue-sphere-cue .sphere-char{font-size:clamp(10px,.78vw,11.5px);}
.blue-sphere-cue .sphere-text-band-long .sphere-char{font-size:clamp(9.4px,.7vw,10.5px);}
#landing-guide .guide-arrow,#swipe-hint .ar,#grip-hint .arrow{position:relative;z-index:2;}
@keyframes sphere-text-drift{from{transform:rotateY(-4deg)}to{transform:rotateY(4deg)}}
#landing-guide .sphere-text-orbit,#grip-hint .sphere-text-orbit{animation:none;transform:rotateY(0deg);}
@media(prefers-reduced-motion:reduce){
  .sphere-text-band{display:none;}
  .sphere-surface-copy::after{content:attr(aria-label);position:absolute;inset:18%;display:grid;place-items:center;color:#fff;font-size:11px;line-height:1.15;letter-spacing:0;text-align:center;text-transform:uppercase;text-shadow:0 1px 3px rgba(4,12,42,.95);}
}

/* Back ball launch: minor pulse from the lower logo, then a leftward shot into position. */
#footer.back-launch:not(.halo-glow)::before{animation:back-logo-pulse .48s ease-out both;}
@keyframes back-logo-pulse{
  0%{opacity:0;box-shadow:0 0 0 rgba(29,78,216,0);transform:translate(-50%,0) scale(.72)}
  38%{opacity:.56;box-shadow:0 0 18px 7px rgba(29,78,216,.38),0 0 42px 15px rgba(31,45,87,.16);transform:translate(-50%,0) scale(1.08)}
  100%{opacity:0;box-shadow:0 0 0 rgba(29,78,216,0);transform:translate(-50%,0) scale(1.42)}
}
#start-back.launching.visible{animation:back-from-logo-shoot .62s cubic-bezier(.12,.78,.16,1) both;}
@keyframes back-from-logo-shoot{
  0%{left:var(--back-from-x,50vw);top:var(--back-from-y,86vh);bottom:auto;transform:translate(-50%,-50%) scale(.28);opacity:0;}
  18%{left:var(--back-from-x,50vw);top:var(--back-from-y,86vh);bottom:auto;transform:translate(-50%,-50%) scale(.9);opacity:1;}
  34%{left:var(--back-from-x,50vw);top:var(--back-from-y,86vh);bottom:auto;transform:translate(-50%,-50%) scale(.72);opacity:1;}
  74%{left:clamp(16px,4vw,54px);top:auto;bottom:clamp(118px,19vh,184px);transform:scale(1.12);opacity:1;}
  100%{left:clamp(16px,4vw,54px);top:auto;bottom:clamp(118px,19vh,184px);transform:scale(1);opacity:1;}
}


/* Final back-ball launch: emanate from lower logo with a small pulse, then shoot left. */
#start-back{
  left:var(--back-rest-left,clamp(42px,6.5vw,92px)) !important;
  top:var(--back-rest-top,auto) !important;
  bottom:auto !important;
}
#start-back.visible{opacity:1;pointer-events:auto;transform:scale(1);}
#start-back.launching.visible{animation:back-from-logo-direct 1.55s cubic-bezier(.18,.68,.16,1) both;}
@keyframes back-from-logo-direct{
  0%{transform:translate(var(--back-launch-dx,0),var(--back-launch-dy,0)) scale(.62);opacity:1;filter:brightness(1.28);}
  100%{transform:translate(0,0) scale(1);opacity:1;filter:brightness(1);}
}
#footer.back-launch:not(.halo-glow)::before{animation:back-logo-pulse-minor 2s ease-out both;}
@keyframes back-logo-pulse-minor{
  0%{opacity:0;box-shadow:0 0 0 rgba(29,78,216,0);transform:translate(-50%,0) scale(.82);}
  36%{opacity:.48;box-shadow:0 0 16px 6px rgba(29,78,216,.36),0 0 36px 12px rgba(31,45,87,.14);transform:translate(-50%,0) scale(1.05);}
  100%{opacity:0;box-shadow:0 0 0 rgba(29,78,216,0);transform:translate(-50%,0) scale(1.28);}
}

/* ---- reduced motion: keep the landing narrative, remove the movement ----
   Word flashes, header/footer rises, and tap pulses are re-expressed as opacity/
   brightness-only choreography (no translate/scale/blur); looping or continuous
   effects are stopped. Sequence and timing stay identical to the full version. */
@media (prefers-reduced-motion: reduce){
  /* identical to the full flash minus the vertical drift: same scale/blur envelope,
     so the words render at their original size and softness */
  @keyframes flash-rm{0%{opacity:0;transform:scale(.98);filter:blur(4px);}40%{opacity:1;transform:scale(1);filter:blur(0);}100%{opacity:0;transform:scale(1.01);filter:blur(4px);}}
  #w1{animation:flash-rm .62s ease-in-out .15s both;}
  #w2{animation:flash-rm .62s ease-in-out .72s both;}
  #w3{animation:flash-rm .62s ease-in-out 1.29s both;}
  @keyframes rise-rm{from{opacity:0;}to{opacity:1;}}
  #header{animation:rise-rm 1s ease 2.1s both;}
  #footer{animation:rise-rm 1s ease 1.4s both;}
  @keyframes wordpulse-rm{0%,100%{filter:brightness(1);}32%{filter:brightness(1.45);}}
  #subtitle .dword.pulse{animation:wordpulse-rm .62s ease;}
  #subtitle .dword.landing-pulse{animation:wordpulse-rm 1s ease;}
  #card.essay-card::after{animation:none;background-position:50% 50%;}
  #card.activate::before{animation:none;}
  #modal2 .btn.glow{animation:none;box-shadow:0 0 10px 2px var(--cc,#e8531c);}
  #card{transition:opacity .26s ease;transform:translate(-50%,-50%) scale(1);}
  #footer.back-launch:not(.halo-glow)::before,#footer.halo-glow::before{animation:none;}
}

/* ---- citation relevance: "why it matters here" line under the abstract ---- */
#modal2 .ab .rel{display:block;margin-top:12px;padding:9px 12px;border-left:3px solid var(--cc,#e8531c);background:rgba(31,45,87,.045);border-radius:0 8px 8px 0;font-size:13.5px;line-height:1.5;color:var(--ink);}
#modal2 .ab .rel em{display:block;font-style:normal;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--cc,#e8531c);margin-bottom:3px;}

/* ---- mobile landing words: full-bleed size (the desktop clamp floor of 26px reads tiny on phones) ---- */
@media (max-width:760px){
  #words span{font-size:clamp(40px,11.5vw,58px);}
}

/* ---- sphere paint guards: neither blue ball may paint before it is explicitly shown ----
   Both are position:fixed with JS-supplied coordinates; before those are set their fallback
   is the static (top-corner) position, so any styling race flashes a ball in the corner.
   visibility gates the paint entirely and pins a harmless default position. */
#start-back{visibility:hidden;}
#start-back.visible{visibility:visible;}
#landing-guide{left:0;top:0;visibility:hidden;}
#landing-guide.visible{visibility:visible;}

/* Improve desktop node-hover legibility without changing popup-dialog geometry. */
#tip{font-size:15.6px;}
#tip .kind,#tip .act{font-size:10.8px;}
@media(max-width:759px),(max-height:540px) and (pointer:coarse){
  #tip.mobile-concept-edge-tip{
    width:min(310px,calc(100vw - 28px));max-width:none;padding:13px 16px 12px;
    transform:translate(-50%,-50%);border-radius:8px;text-align:center;line-height:1.15;
    box-shadow:0 12px 34px rgba(31,45,87,.3);
  }
  #tip.mobile-concept-edge-tip .kind{font-size:13px;line-height:1.1;letter-spacing:.12em;margin-bottom:5px;opacity:.78;}
  #tip.mobile-concept-edge-tip .title{display:block;font-size:20px;line-height:1.12;font-weight:800;}
  #tip.mobile-concept-edge-tip .act{font-size:13px;line-height:1.1;letter-spacing:.1em;margin-top:7px;opacity:.72;}
  #tip.mobile-concept-edge-tip::after{display:none;}
}


/* Popup circles always occupy the interaction layer above fixed matrix controls. */
#card{z-index:25;touch-action:manipulation;}
#card button,#card a{touch-action:manipulation;}
#card.tap-guard{touch-action:none;}
#card.tap-guard button,#card.tap-guard a{pointer-events:none!important;}
#modal2,#purpose-modal,#larri-modal,#concept-edge-legend{z-index:40;}


/* Landing flash typography uses the intended local brand font for the entire sequence. */
#words span{
  font-family:"Creda Juris Tech70",serif;
  font-size:clamp(39px,9vw,96px);
  font-weight:400;
  font-synthesis:none;
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
}
@media (max-width:760px){
  #words span{font-size:clamp(60px,17.25vw,87px);}
}


/* Slow-network gate: preserve the complete landing choreography until the matrix is initialized. */
body.landing-loading #w1,
body.landing-loading #w2,
body.landing-loading #w3,
body.landing-loading #header,
body.landing-loading #footer{
  animation-play-state:paused !important;
}


/* Desktop interaction surfaces never become browser text/image selections. */
@media (min-width:760px){
  body,
  body *{
    -webkit-user-select:none;
    user-select:none;
  }
  input,
  textarea,
  [contenteditable="true"]{
    -webkit-user-select:text;
    user-select:text;
  }
  body img,
  body a{
    -webkit-user-drag:none;
    user-drag:none;
  }
}


/* The instruction sphere follows one controlled logo → heading → logo path. */
.sphere-hint{transition:opacity .55s ease,transform 1.75s cubic-bezier(.22,.72,.2,1);}
#landing-guide{flex-direction:column;gap:3px;}
#landing-guide .guide-copy{max-width:none;}
#landing-guide.drag-guide{z-index:14;pointer-events:auto;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;transition:opacity .22s ease;}
#landing-guide.drag-guide.guide-launching{pointer-events:none;transition:opacity .22s ease,transform 1.2s cubic-bezier(.18,.72,.22,1);}
#landing-guide.drag-guide.dragging{cursor:grabbing;}
#landing-guide.drag-guide .guide-copy{opacity:1;transform:none;max-width:none;}
#landing-guide.drag-guide .guide-arrow{display:none;}
#subtitle .dword.guide-drop-target{color:var(--guide-target-color,#60a5fa)!important;opacity:1!important;text-shadow:0 0 5px #fff,0 0 18px var(--guide-target-color,#60a5fa)!important;transform:scale(1.08);}
#landing-guide .guide-arrow{font-size:clamp(25px,3vw,34px);line-height:.86;margin-top:5px;}
#landing-guide.to-categories .guide-arrow{animation:guide-point-up .72s ease-in-out infinite;}
#landing-guide.to-logo .guide-arrow{animation:guide-point-down .72s ease-in-out infinite;}
#landing-guide .guide-copy,#landing-guide .guide-arrow{transition:opacity .24s ease,transform .24s ease;}
#landing-guide::after{content:"";position:absolute;inset:0;display:grid;place-items:center;opacity:0;font-size:15px;line-height:1;text-shadow:none;}
#landing-guide.becoming-search{z-index:10;width:38px;height:38px;padding:0;gap:0;transition:transform .95s cubic-bezier(.22,.72,.2,1),width .95s cubic-bezier(.22,.72,.2,1),height .95s cubic-bezier(.22,.72,.2,1),padding .3s ease,box-shadow .95s ease;box-shadow:0 8px 21px rgba(29,78,216,.30),inset 4px 4px 8px rgba(255,255,255,.35);}
#landing-guide.becoming-search .guide-copy,#landing-guide.becoming-search .guide-arrow{opacity:0;transform:scale(.35);}
#landing-guide.becoming-search::after{content:"\1F50D";animation:guide-search-icon-in .95s ease both;}
@keyframes guide-search-icon-in{0%,48%{opacity:0;transform:scale(.4)}78%,100%{opacity:1;transform:scale(1)}}
@keyframes guide-point-up{0%,100%{transform:translateY(5px) scale(.94);opacity:.7}50%{transform:translateY(-7px) scale(1.12);opacity:1}}
@keyframes guide-point-down{0%,100%{transform:translateY(-5px) scale(.94);opacity:.7}50%{transform:translateY(7px) scale(1.12);opacity:1}}
#footer.purpose-target::before{background:rgba(232,83,28,.24);animation:purpose-target-orange 1.05s ease-in-out infinite;}
#footer img.purpose-glow{animation:purpose-logo-orange-pulse 1.05s ease-in-out infinite;}
#footer img.launch-pulse{animation:footer-logo-launch-pulse .95s cubic-bezier(.18,.72,.22,1) both;}
@keyframes footer-logo-launch-pulse{
  0%{filter:none;transform:scale(.9)}
  28%{filter:drop-shadow(0 0 13px rgba(29,78,216,.92)) drop-shadow(0 0 34px rgba(29,78,216,.58)) brightness(1.24);transform:scale(1.1)}
  62%{filter:drop-shadow(0 0 19px rgba(29,78,216,.72)) drop-shadow(0 0 46px rgba(29,78,216,.36));transform:scale(1.035)}
  100%{filter:none;transform:scale(1)}
}
@keyframes purpose-target-orange{
  0%,100%{opacity:.28;box-shadow:0 0 13px 5px rgba(232,83,28,.3),0 0 32px 12px rgba(232,83,28,.16);transform:translate(-50%,0) scale(.96)}
  50%{opacity:.9;box-shadow:0 0 24px 10px rgba(232,83,28,.7),0 0 62px 25px rgba(232,83,28,.34);transform:translate(-50%,0) scale(1.18)}
}
@keyframes purpose-logo-orange-pulse{
  0%,100%{filter:drop-shadow(0 0 5px rgba(232,83,28,.42)) saturate(1.08);transform:scale(.99)}
  50%{filter:drop-shadow(0 0 12px rgba(232,83,28,.9)) drop-shadow(0 0 26px rgba(232,83,28,.58)) saturate(1.38) brightness(1.12);transform:scale(1.035)}
}

/* Corpus search: instantiate the node last; its field exists only while explicitly toggled open. */
#matrix-search{position:fixed;left:auto;right:clamp(18px,3vw,42px);top:clamp(104px,14vh,126px);z-index:10;display:flex;align-items:center;gap:7px;visibility:hidden;opacity:0;pointer-events:none;transform:translateY(-6px) scale(.92);transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s;touch-action:manipulation}
#matrix-search.handoff-target{transform:none}
#matrix-search.available{visibility:visible;opacity:1;pointer-events:auto;transform:none;transition:opacity .22s ease,transform .22s ease,visibility 0s}
#matrix-search-input{width:min(292px,calc(100vw - 98px));height:44px;padding:0 15px;border:1px solid rgba(31,45,87,.2);border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 8px 24px rgba(31,45,87,.11);color:#1f2d57;font:700 13px/1 Arial,sans-serif;outline:none;touch-action:manipulation;transition:width .22s ease,padding .22s ease,opacity .16s ease,border-width .22s ease}
#matrix-search:not(.expanded){gap:0}
#matrix-search:not(.expanded) #matrix-search-input{width:0;padding-left:0;padding-right:0;opacity:0;pointer-events:none;border-width:0;box-shadow:none}
#matrix-search-input::placeholder{color:#5f6b86;font-weight:600;opacity:1}
#matrix-search-input:focus{border-color:rgba(232,83,28,.72);box-shadow:0 0 0 3px rgba(232,83,28,.11),0 10px 28px rgba(31,45,87,.13)}
#matrix-search-submit{width:44px;height:44px;flex:0 0 44px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 32% 24%,#fff 0%,#a7d0ff 18%,#1d4ed8 54%,#0a225f 100%);box-shadow:0 8px 21px rgba(29,78,216,.30),inset 4px 4px 8px rgba(255,255,255,.35);color:#fff;font-size:16px;cursor:pointer;touch-action:manipulation}
#matrix-search.available #matrix-search-submit{animation:search-ball-arrive .5s cubic-bezier(.2,.76,.22,1) both}
#matrix-search.available.handoff #matrix-search-submit{animation:none}
@keyframes search-ball-arrive{0%{opacity:0;transform:scale(.2)}70%{opacity:1;transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}
#matrix-search-submit:hover,#matrix-search-submit:focus-visible{filter:brightness(1.08);box-shadow:0 0 0 3px rgba(29,78,216,.14),0 10px 24px rgba(29,78,216,.36);outline:none}
#matrix-search.no-match{animation:search-no-match .34s ease}
@keyframes search-no-match{0%,100%{transform:translateX(0)}30%{transform:translateX(-6px)}70%{transform:translateX(6px)}}
body.matrix-search-active #concept-edge-toggle,body.matrix-search-active #concept-edge-legend-toggle{top:clamp(151px,21vh,181px)}
@media(max-width:759px){
  #matrix-search{left:auto;right:14px;top:clamp(88px,12vh,108px);gap:6px}
  #matrix-search-input{width:min(244px,calc(100vw - 82px));height:44px;padding:0 12px;font-size:12px}
  #matrix-search-submit{width:44px;height:44px;flex-basis:44px;font-size:15px}
  body.matrix-search-active #concept-edge-toggle,body.matrix-search-active #concept-edge-legend-toggle{top:clamp(174px,23vh,204px)}
}
@media(prefers-reduced-motion:reduce){
  /* Preserve the required spatial instruction path even when the broader site reduces decorative motion. */
  #matrix-search.available:not(.handoff) #matrix-search-submit{animation:none;}
}
/* Legibility pass: dialog typography +20%. Canvas-node scaling lives in js/state.js. */
#card,#modal2 .box,#purpose-modal .pbox,#larri-modal .box,.concept-edge-legend-panel{font-size:120%;}
#card .kind{font-size:13.2px;}
#card h3{font-size:20.4px;}
#card.essay-card h3{font-size:19.2px;}
#card p{font-size:17.4px;}
#card a.open,#card .btn{font-size:15px;}
#card .close{font-size:21.6px;}
#modal2 .mk,#larri-modal .mk{font-size:11.4px;}
#modal2 h4,#larri-modal h4{font-size:27.6px;}
#modal2 .ab,#larri-modal .ab{font-size:17.4px;}
#modal2 .btn{font-size:14.4px;}
#modal2 .mclose,#larri-modal .mclose{font-size:26.4px;}
#modal2 .ab .rel{font-size:16.2px;}
#modal2 .ab .rel em{font-size:12px;}
#modal2 .ab .related-works{display:grid;gap:3px;}
#modal2 .ab .relation-brief{margin:0 0 14px;line-height:1.45;}
#modal2 .ab .trilogy-statement p{margin:0 0 14px;}
#modal2 .ab .trilogy-statement ul{margin:2px 0 16px;padding-left:22px;}
#modal2 .ab .trilogy-statement li{margin:0 0 7px;line-height:1.5;}
#modal2 .ab .relation-keywords{display:flex;flex-wrap:wrap;gap:6px;margin:7px 0 16px;}
#modal2 .ab .relation-keyword{display:inline-block;padding:4px 7px;border:1px solid color-mix(in srgb,var(--cc) 55%,transparent);border-radius:4px;background:color-mix(in srgb,var(--cc) 5%,#fff);color:var(--ink);font:inherit;font-size:.82em;line-height:1.2;cursor:pointer;text-align:left;touch-action:manipulation;}
#modal2 .ab .relation-keyword:hover{border-color:var(--cc);color:var(--cc);background:color-mix(in srgb,var(--cc) 10%,#fff);}
#modal2 .ab .relation-keyword:focus-visible{outline:2px solid var(--cc);outline-offset:2px;}
#modal2 .ab .concept-relations{margin-top:7px;padding-left:21px;}
#modal2 .ab .concept-relations li{margin:0 0 8px;line-height:1.42;}
#modal2 .ab .concept-relations li strong{font-size:inherit;}
#modal2 .ab .rel-work-link{display:block;width:100%;padding:5px 2px;border:0;background:transparent;color:var(--ink);font:inherit;line-height:1.35;text-align:left;text-decoration:underline;text-decoration-color:var(--work-color,var(--cc,#e8531c));text-decoration-thickness:2px;text-underline-offset:3px;cursor:pointer;touch-action:manipulation;}
#modal2 .ab .rel-work-link:hover{color:var(--work-color,var(--cc,#e8531c));}
#modal2 .ab .rel-work-link:focus-visible{outline:2px solid var(--work-color,var(--cc,#e8531c));outline-offset:2px;border-radius:3px;}
#desktop-vid-warning,#mobile-vid-warning{font-size:13.2px!important;}
#purpose-modal .purpose-wordmark{font-size:clamp(45.6px,9.6vw,98.4px);}
#purpose-modal .ptext{font-size:17.4px;}
#purpose-modal .pclose{font-size:28.8px;}
.concept-edge-legend-head h2{font-size:18px;}
#concept-edge-legend-close{font-size:32.4px;}
.concept-edge-legend-item{font-size:15.6px;}
@media(max-width:759px){
  #card .kind{font-size:14.4px;}
  #card p{font-size:16.8px;}
  #card .btn{font-size:14.4px;}
}
#purpose-modal .ptext ul{margin:0 0 14px 1.1em;padding:0;}
#purpose-modal .ptext li{margin:0 0 7px;padding-left:.15em;}

/* Matrix-only zoom: a reversible overview reflows off-screen horizontal pages down and across. */
#matrix-zoom{
  position:fixed;left:var(--matrix-zoom-left,calc(clamp(42px,6.5vw,92px) + clamp(48px,7vw,64px) + 12px));
  top:var(--matrix-zoom-top,calc(100vh - clamp(84px,13.5vh,142px) - 52px));bottom:auto;z-index:10;
  display:flex;align-items:center;gap:3px;padding:4px;border:1px solid rgba(31,45,87,.16);border-radius:999px;
  background:rgba(255,255,255,.9);box-shadow:0 9px 28px rgba(31,45,87,.13);opacity:0;pointer-events:none;
  transform:translateY(-6px);transition:opacity .3s ease,transform .3s ease;backdrop-filter:blur(7px);
  font-family:"Franklin Gothic Medium","Franklin Gothic Book","Arial Narrow",Arial,sans-serif;
}
#matrix-zoom.ready{opacity:1;pointer-events:auto;transform:none;}
#matrix-zoom button{width:44px;height:44px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#fff;
  background:radial-gradient(circle at 31% 24%,#fff 0%,#a7d0ff 18%,#1d4ed8 54%,#0a225f 100%);box-shadow:0 6px 16px rgba(29,78,216,.25),inset 3px 3px 7px rgba(255,255,255,.34);
  font:900 22px/1 Arial,sans-serif;touch-action:manipulation;}
#matrix-zoom button:hover,#matrix-zoom button:focus-visible{filter:brightness(1.09);outline:2px solid rgba(29,78,216,.38);outline-offset:2px;}
#matrix-zoom button:disabled{opacity:.28;filter:grayscale(.45);cursor:default;box-shadow:none;}
#matrix-zoom-status{min-width:43px;color:#1f2d57;text-align:center;font-size:10px;font-weight:900;letter-spacing:.06em;}
body.matrix-overview #grip-hint{display:none;}
@media(max-width:759px){
  #matrix-zoom{left:auto;right:max(12px,env(safe-area-inset-right,0px));padding:3px;}
  #matrix-zoom button{width:44px;height:44px;font-size:20px;}
  #matrix-zoom-status{min-width:38px;font-size:9px;}
}
@media(prefers-reduced-motion:reduce){#matrix-zoom{transition:none;}}

/* Unified overlay accessibility: inert backgrounds and visible keyboard focus. */
[inert]{pointer-events:none!important;user-select:none!important;-webkit-user-select:none!important}
#purpose-modal .pclose:focus-visible,[role='dialog'] button:focus-visible,[role='dialog'] a:focus-visible,#footer img[role='button']:focus-visible{outline:2px solid var(--cc,#e8531c)!important;outline-offset:3px!important}
#purpose-modal .pclose:focus-visible{outline-color:#fff!important}

#start-back.overlay-back-active{z-index:100;visibility:visible;opacity:1;pointer-events:auto;transform:scale(1);}
#start-back.overlay-back-suppressed{visibility:hidden!important;opacity:0!important;pointer-events:none!important;}

/* Short mobile landscape: keep every dialog inside the dynamic viewport while
   allowing its content to scroll. Rotation must not require a reload. */
@media (orientation:landscape) and (max-height:540px){
  #modal2,#larri-modal,#purpose-modal,#concept-edge-legend{
    padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
  }
  #modal2 .box,#larri-modal .box,#purpose-modal .pbox,.concept-edge-legend-panel{
    width:min(720px,calc(100vw - 20px));max-width:calc(100vw - 20px);max-height:calc(100dvh - 16px);overflow:auto;
  }
  #modal2 .box,#larri-modal .box{padding:22px 28px 16px;}
  #modal2 h4,#larri-modal h4{margin-bottom:9px;}
  #modal2 video{max-height:calc(100dvh - 104px);margin-bottom:10px;}
  #purpose-modal .pbox{padding:20px 26px 14px;}
  #purpose-modal .purpose-wordmark{margin-bottom:10px;}
  #purpose-modal .purpose-wordmark img{max-height:42px;width:min(270px,42vw);}
  #purpose-modal .ptext{max-height:none;min-height:0;overflow:auto;}
  #purpose-modal .pbox > img.plogo:not(.wordmark){display:none;}
  .concept-edge-legend-panel{padding:14px 18px;}
}