:root{--cyan:#4be8e4;--pale:#e6f1ef}*{box-sizing:border-box}html,body{margin:0;background:#030708;color:var(--pale);font-family:Arial,Helvetica,sans-serif}.portal{min-height:100svh;overflow:hidden;position:relative}.access{position:absolute;inset:0;z-index:4;overflow:hidden;transition:opacity 1.2s ease 1s,transform 1.8s cubic-bezier(.7,0,.2,1) .8s}.scene{position:absolute;inset:0;background:linear-gradient(90deg,#020405,transparent 30%,transparent 70%,#020405),linear-gradient(0deg,#020405,transparent 58%),url('gray-corridor-vault.png') center/cover no-repeat;filter:brightness(.7) saturate(.72)}.floor{position:absolute;width:80vw;height:38vh;bottom:-16vh;left:10vw;transform:perspective(250px) rotateX(60deg);background:repeating-linear-gradient(90deg,transparent 0 7vw,rgba(102,235,230,.1) 7.05vw 7.1vw),repeating-linear-gradient(0deg,transparent 0 5vh,rgba(102,235,230,.08) 5.05vh 5.1vh);mask-image:linear-gradient(to bottom,transparent,#000 35%)}.vault{position:absolute;top:17%;left:50%;width:min(34vw,510px);aspect-ratio:.9;transform:translateX(-50%);opacity:.25;text-align:center;font:700 9px/1 "Courier New",monospace;letter-spacing:.28em}.door{position:relative;width:100%;aspect-ratio:1;margin-top:18px;border:2px solid #9cb5b5;border-radius:50%;background:radial-gradient(circle,#253133 0 9%,#030606 10% 22%,#1e2a2c 23% 25%,#030606 26% 46%,#1a2426 47% 49%,#030606 50%);overflow:hidden;box-shadow:0 0 25px #2c8b87}.door i{position:absolute;top:0;width:50%;height:100%;border:1px solid rgba(135,212,208,.4);transition:transform 1.6s cubic-bezier(.68,0,.18,1) .25s}.door .left{left:0;border-radius:100% 0 0 100%;background:repeating-radial-gradient(circle at 100% 50%,transparent 0 18%,rgba(115,205,200,.25) 18.5% 19%,transparent 19.5% 27%)}.door .right{right:0;border-radius:0 100% 100% 0;background:repeating-radial-gradient(circle at 0 50%,transparent 0 18%,rgba(115,205,200,.25) 18.5% 19%,transparent 19.5% 27%)}.door b{position:absolute;inset:39% 32%;z-index:2;display:grid;place-items:center;border:1px solid #a4d9d6;border-radius:50%;letter-spacing:.1em}.door em{position:absolute;z-index:3;top:0;bottom:0;left:50%;width:1px;background:var(--cyan);box-shadow:0 0 9px 3px var(--cyan)}.panel{position:absolute;left:50%;bottom:10vh;transform:translateX(-50%);width:min(30rem,88vw);padding:19px 22px 14px;border:1px solid rgba(101,226,223,.48);background:linear-gradient(135deg,rgba(10,21,23,.94),rgba(1,6,7,.88));clip-path:polygon(5% 0,95% 0,100% 15%,100% 85%,95% 100%,5% 100%,0 85%,0 15%);box-shadow:0 16px 70px rgba(0,0,0,.72)}.status,.footer{display:flex;justify-content:space-between;color:#8ca6a6;font:700 9px/1 "Courier New",monospace;letter-spacing:.18em}.status strong{color:#8ca6a6}.status strong.checking,.status strong.approved{color:var(--cyan)}.status strong.denied{color:#ff6b66}.panel label{display:block;margin:19px 0 8px;font:700 10px/1 "Courier New",monospace;letter-spacing:.23em;text-transform:uppercase}.code{position:relative}.code input{width:100%;padding:10px 8px;color:transparent;caret-color:var(--cyan);background:#060d0e;border:1px solid rgba(126,197,196,.3);outline:none;letter-spacing:1em}.code input:focus{border-color:var(--cyan);box-shadow:0 0 13px rgba(75,232,228,.2)}#dots{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:17px;pointer-events:none}#dots i{width:8px;height:8px;border:1px solid #567474;border-radius:50%}#dots i.filled{background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 9px 2px rgba(75,232,228,.45)}.panel p{margin:8px 0 14px;color:#638181;font:600 8px/1 "Courier New",monospace;letter-spacing:.16em}.panel button{width:100%;height:38px;display:flex;justify-content:center;align-items:center;gap:30px;border:1px solid var(--cyan);background:rgba(8,49,50,.28);color:var(--cyan);font:700 11px/1 "Courier New",monospace;letter-spacing:.24em;cursor:pointer}.panel button:hover{background:var(--cyan);color:#061314}.panel button:disabled{cursor:wait}.footer{margin-top:15px;font-size:7px}.system,.required{position:absolute;bottom:20px;margin:0;color:#7f9998;font:700 8px/1 "Courier New",monospace;letter-spacing:.12em}.system{left:22px}.system i{display:inline-block;width:5px;height:5px;margin:0 7px;background:var(--cyan);border-radius:50%;box-shadow:0 0 8px var(--cyan)}.required{right:22px;color:#597271}.archive{position:relative;min-height:100svh;padding:24px clamp(24px,5vw,76px);opacity:0;transform:scale(.97);transition:opacity .85s ease .85s,transform 1.15s cubic-bezier(.16,1,.3,1) .85s;overflow:hidden}.archive:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 52%,transparent 0 10%,rgba(0,0,0,.16) 38%,rgba(0,0,0,.68) 100%);pointer-events:none}canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1}header,footer,.eyebrow,.black-hole,.map-caption,.orbit-nav{position:relative;z-index:2}header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(194,255,253,.18);padding-bottom:18px}header p,header span{margin:0;color:#a8c4c1;font:700 9px/1 "Courier New",monospace;letter-spacing:.16em;text-transform:uppercase}.wordmark{color:#efffff;text-decoration:none;font:bold clamp(21px,2vw,30px)/1 Georgia,serif;letter-spacing:-.08em}.wordmark span{color:var(--cyan)}.eyebrow{position:absolute;top:18%;left:0;right:0;text-align:center;color:var(--cyan);font:700 9px/1 "Courier New",monospace;letter-spacing:.2em}.black-hole{position:absolute;left:50%;top:50%;width:min(25vw,330px);min-width:210px;aspect-ratio:1;transform:translate(-50%,-50%);display:grid;place-items:center;filter:drop-shadow(0 0 32px rgba(51,242,227,.26))}.black-hole:before{content:"";position:absolute;inset:16%;border-radius:50%;background:radial-gradient(circle at 43% 40%,#172526,#071012 25%,#000 56%);box-shadow:0 0 30px 13px #091617,0 0 70px 28px rgba(47,215,205,.18),inset 0 0 25px #000;z-index:2}.black-hole:after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(105,252,242,.26);animation:orbit 13s linear infinite}.accretion{position:absolute;inset:5%;border:2px solid transparent;border-radius:50%;border-top-color:var(--cyan);border-bottom-color:rgba(47,172,217,.25);transform:rotateX(68deg);box-shadow:0 0 20px rgba(75,232,228,.38);animation:orbit 7s linear infinite}.two{inset:23%;border-width:1px;animation-direction:reverse;animation-duration:4.8s}.event-horizon{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px;font:700 clamp(21px,3vw,38px)/1 "Courier New",monospace;letter-spacing:.26em;text-indent:.26em;text-shadow:0 0 18px rgba(149,255,248,.8)}.event-horizon small{color:#75c2bd;font-size:7px;letter-spacing:.25em}.map-caption{position:absolute;top:calc(50% + min(14vw,175px));left:0;right:0;margin:0;color:#b1d7d4;text-align:center;font:400 11px/1.5 "Courier New",monospace}.orbit-nav{position:absolute;inset:0;z-index:3}.orbit{position:absolute;width:150px;display:grid;grid-template-columns:auto 1fr auto;gap:4px 9px;padding:10px 12px;color:#eefafa;text-decoration:none;border:1px solid rgba(139,243,237,.24);background:linear-gradient(90deg,rgba(7,21,23,.68),transparent);clip-path:polygon(0 0,100% 0,100% 80%,92% 100%,0 100%);transition:.25s}.orbit:hover{transform:scale(1.06);background:rgba(17,80,79,.55);border-color:var(--cyan)}.orbit b,.orbit small{font:700 7px/1.2 "Courier New",monospace;letter-spacing:.1em;color:#89aaa7}.orbit strong{font:400 18px/1 Georgia,serif}.orbit em{grid-row:1/3;grid-column:3;color:var(--cyan);font-style:normal}.orbit small{grid-column:2/4}.a{left:clamp(28px,16vw,265px);top:31%}.b{right:clamp(28px,15vw,255px);top:30%}.c{left:clamp(35px,23vw,360px);bottom:24%}.d{right:clamp(35px,22vw,360px);bottom:23%}.archive footer{position:absolute;left:clamp(24px,5vw,76px);right:clamp(24px,5vw,76px);bottom:24px;display:flex;justify-content:space-between;color:#71908d;font:700 8px/1 "Courier New",monospace;letter-spacing:.13em}.unsealing .panel{animation:exit .8s forwards}.unsealing .door .left{transform:translateX(-70%) rotate(-8deg)}.unsealing .door .right{transform:translateX(70%) rotate(8deg)}.unsealing .door b{opacity:0}.entered .access{opacity:0;transform:scale(1.12)}.entered .archive{opacity:1;transform:scale(1)}@keyframes orbit{to{transform:rotate(360deg) rotateX(68deg)}}@keyframes exit{to{opacity:0;transform:translate(-50%,12px) scale(.96)}}@media(max-width:700px){.vault{top:24%;width:64vw}.panel{bottom:11vh}.system{left:14px;bottom:12px}.required{right:14px;bottom:12px}header p{display:none}.orbit{width:132px}.a{left:20px;top:27%}.b{right:20px;top:28%}.c{left:20px;bottom:24%}.d{right:20px;bottom:23%}.map-caption{top:calc(50% + 130px)}.archive footer{bottom:16px;left:20px;right:20px;font-size:6px}.archive footer span:last-child{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* Centerpiece black hole image overrides */
.black-hole{
  position:absolute;
  left:50%;
  top:50%;
  width:min(8.7vw,138px);
  min-width:18px;
  aspect-ratio:1672/941;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  filter:drop-shadow(0 0 42px rgba(255,207,160,.22)) drop-shadow(0 0 66px rgba(51,242,227,.1));
  mix-blend-mode:screen;
  isolation:isolate;
}
.black-hole img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  opacity:.9;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 0 36%,rgba(0,0,0,.72) 48%,rgba(0,0,0,.22) 61%,transparent 76%);
  mask-image:radial-gradient(ellipse at center,#000 0 36%,rgba(0,0,0,.72) 48%,rgba(0,0,0,.22) 61%,transparent 76%);
}
.black-hole:before,.black-hole:after,.accretion,.event-horizon{display:none}
@media(max-width:700px){.black-hole{width:14.4vw;min-width:54px}}

.nebula-field{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:auto;
}
.nebula{
  position:absolute;
  width:clamp(44px,8vmin,64px);
  height:clamp(44px,8vmin,64px);
  display:grid;
  place-items:center;
  opacity:.46;
  mix-blend-mode:screen;
  filter:saturate(1.08) brightness(.84) drop-shadow(0 0 12px rgba(120,230,255,.14));
  transform:translate(-50%,-50%) rotate(var(--r,0deg));
  animation:none;
  cursor:pointer;
  pointer-events:auto;
  touch-action:manipulation;
  text-decoration:none;
}
.nebula img{
  display:block;
  width:clamp(10px,1.45vmin,23px);
  max-width:100%;
  height:auto;
  max-height:100%;
  pointer-events:none;
}
.nebula:hover{
  opacity:.88;
  filter:saturate(1.25) brightness(1.05) drop-shadow(0 0 16px rgba(120,230,255,.26));
}
.n1{left:38.6%;top:18.6%;--r:-18deg;--turn:360deg;--dx:0px;--dy:0px;--d:104s;opacity:.42}
.n2{left:41.8%;top:23.8%;--r:12deg;--turn:-360deg;--dx:0px;--dy:0px;--d:96s;opacity:.36}
.n3{left:46.2%;top:29.0%;--r:22deg;--turn:360deg;--dx:0px;--dy:0px;--d:112s;opacity:.34}
.n4{left:51.2%;top:34.2%;--r:-28deg;--turn:-360deg;--dx:0px;--dy:0px;--d:88s;opacity:.4}
.n5{left:55.9%;top:39.4%;--r:8deg;--turn:360deg;--dx:0px;--dy:0px;--d:118s;opacity:.3}
.n6{left:59.5%;top:44.6%;--r:-8deg;--turn:-360deg;--dx:0px;--dy:0px;--d:91s;opacity:.44}
.n7{left:61.6%;top:49.8%;--r:33deg;--turn:360deg;--dx:0px;--dy:0px;--d:126s;opacity:.36}
.n8{left:62.1%;top:55.0%;--r:-36deg;--turn:-360deg;--dx:0px;--dy:0px;--d:108s;opacity:.32}
.n9{left:60.8%;top:60.2%;--r:16deg;--turn:360deg;--dx:0px;--dy:0px;--d:122s;opacity:.38}
.n10{left:57.9%;top:65.4%;--r:-10deg;--turn:-360deg;--dx:0px;--dy:0px;--d:86s;opacity:.5}
.n11{left:53.8%;top:70.6%;--r:21deg;--turn:360deg;--dx:0px;--dy:0px;--d:115s;opacity:.46}
.n12{left:48.8%;top:75.8%;--r:-16deg;--turn:-360deg;--dx:0px;--dy:0px;--d:102s;opacity:.42}
.n13{left:44.1%;top:81.0%;--r:31deg;--turn:360deg;--dx:0px;--dy:0px;--d:98s;opacity:.44}
@media(max-width:700px){
  .nebula{width:48px;height:48px}
  .nebula img{width:clamp(10px,2.4vmin,16px)}
}

/* Viewport fit overrides */
html,body{
  width:100%;
  min-height:100%;
  overflow:hidden;
}
.portal,.access,.archive{
  width:100vw;
  height:100svh;
  min-height:100svh;
  max-height:100svh;
}
.archive{
  padding:0;
}
.scene{
  background-position:center;
  background-size:cover;
}
.vault{
  top:clamp(72px,13svh,140px);
  width:clamp(150px,32vmin,410px);
}
.door{
  margin-top:clamp(8px,1.6vmin,18px);
}
.panel{
  width:min(30rem,88vw);
  bottom:clamp(40px,9svh,92px);
  padding:clamp(14px,2.2vmin,19px) clamp(16px,2.7vmin,22px) clamp(12px,2vmin,14px);
}
.black-hole{
  width:clamp(54px,8.7vmin,138px);
}
.nebula{
  width:clamp(44px,8vmin,64px);
  height:clamp(44px,8vmin,64px);
}
@media(max-width:700px){
  .vault{
    top:clamp(78px,16svh,132px);
    width:clamp(150px,45vmin,250px);
  }
  .panel{
    width:min(21rem,90vw);
    bottom:clamp(42px,8svh,72px);
  }
  .system,.required{
    bottom:10px;
    font-size:6px;
    letter-spacing:.08em;
  }
  .black-hole{
    width:clamp(54px,14.4vmin,96px);
  }
  .nebula{
    width:48px;
    height:48px;
  }
  .nebula img{
    width:clamp(10px,2.4vmin,16px);
  }
}
@media(max-height:640px){
  .vault{
    top:clamp(48px,9svh,72px);
    width:clamp(120px,28vmin,210px);
  }
  .panel{
    bottom:clamp(24px,6svh,40px);
    transform:translateX(-50%) scale(.92);
    transform-origin:bottom center;
  }
}

/* Static random nebula map */
.nebula{
  width:clamp(100px,14.5vmin,230px);
  height:clamp(100px,14.5vmin,230px);
  opacity:.5;
  filter:saturate(1.12) brightness(.9) drop-shadow(0 0 18px rgba(120,230,255,.18));
}
.nebula img{
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:contain;
}
.n1{left:14%;top:22%;--r:-24deg;opacity:.42}
.n2{left:73%;top:16%;--r:18deg;opacity:.36}
.n3{left:39%;top:10%;--r:31deg;opacity:.34}
.n4{left:88%;top:34%;--r:-17deg;opacity:.4}
.n5{left:24%;top:45%;--r:9deg;opacity:.32}
.n6{left:68%;top:42%;--r:-34deg;opacity:.46}
.n7{left:10%;top:67%;--r:27deg;opacity:.38}
.n8{left:47%;top:63%;--r:-41deg;opacity:.34}
.n9{left:83%;top:72%;--r:13deg;opacity:.4}
.n10{left:58%;top:86%;--r:-9deg;opacity:.5}
.n11{left:31%;top:80%;--r:22deg;opacity:.44}
.n12{left:92%;top:54%;--r:-29deg;opacity:.42}
.n13{left:54%;top:25%;--r:36deg;opacity:.4}
@media(max-width:700px){
  .nebula{
    width:clamp(100px,26vmin,160px);
    height:clamp(100px,26vmin,160px);
  }
  .n1{left:15%;top:17%}
  .n2{left:72%;top:12%}
  .n3{left:40%;top:25%}
  .n4{left:90%;top:32%}
  .n5{left:18%;top:42%}
  .n6{left:67%;top:43%}
  .n7{left:9%;top:63%}
  .n8{left:45%;top:60%}
  .n9{left:83%;top:66%}
  .n10{left:59%;top:84%}
  .n11{left:27%;top:82%}
  .n12{left:94%;top:51%}
  .n13{left:54%;top:20%}
}

/* Make the opened star map clickable */
.entered .access{
  pointer-events:none;
  visibility:hidden;
  z-index:0;
}
.entered .archive{
  pointer-events:auto;
}
.nebula-field{
  pointer-events:none;
}
.nebula,.nebula img{
  pointer-events:auto;
}

/* Polished mobile layout */
.black-hole{
  pointer-events:none;
  z-index:5;
}
@media(max-width:760px){
  html,body{
    height:100%;
    overscroll-behavior:none;
  }
  .portal,.access,.archive{
    height:100dvh;
    min-height:100dvh;
    max-height:100dvh;
  }
  .scene{
    background-position:center top;
    filter:brightness(.66) saturate(.74);
  }
  .floor{
    width:118vw;
    left:-9vw;
    bottom:-20vh;
    opacity:.68;
  }
  .vault{
    top:clamp(86px,14dvh,132px);
    width:clamp(165px,54vw,245px);
    opacity:.3;
  }
  .panel{
    width:min(342px,calc(100vw - 28px));
    bottom:max(18px,calc(env(safe-area-inset-bottom) + 16px));
    padding:15px 16px 13px;
  }
  .status,.footer{
    font-size:7px;
    letter-spacing:.13em;
  }
  .panel label{
    margin:15px 0 8px;
    font-size:9px;
  }
  .code input{
    min-height:42px;
    font-size:16px;
  }
  #dots{
    gap:13px;
  }
  .panel p{
    margin:7px 0 12px;
    font-size:7px;
  }
  .panel button{
    height:40px;
    font-size:10px;
  }
  .system,.required{
    display:none;
  }
  .archive{
    padding:0;
    transform:scale(1);
  }
  .archive:after{
    background:radial-gradient(circle at 50% 50%,transparent 0 14%,rgba(0,0,0,.1) 36%,rgba(0,0,0,.6) 100%);
  }
  .black-hole{
    top:49.5%;
    width:clamp(70px,21vw,98px);
    min-width:70px;
  }
  .nebula-field{
    z-index:4;
  }
  .nebula{
    width:clamp(82px,25vw,118px);
    height:clamp(82px,25vw,118px);
    opacity:.5;
    -webkit-tap-highlight-color:transparent;
  }
  .nebula:hover{
    transform:translate(-50%,-50%) rotate(var(--r,0deg));
  }
  .n1{left:17%;top:14%;--r:-22deg;opacity:.42}
  .n2{left:72%;top:11%;--r:18deg;opacity:.36}
  .n3{left:41%;top:25%;--r:31deg;opacity:.34}
  .n4{left:86%;top:31%;--r:-17deg;opacity:.4}
  .n5{left:16%;top:40%;--r:9deg;opacity:.34}
  .n6{left:68%;top:40%;--r:-34deg;opacity:.46}
  .n7{left:10%;top:58%;--r:27deg;opacity:.38}
  .n8{left:39%;top:61%;--r:-41deg;opacity:.34}
  .n9{left:82%;top:62%;--r:13deg;opacity:.4}
  .n10{left:61%;top:82%;--r:-9deg;opacity:.5}
  .n11{left:25%;top:82%;--r:22deg;opacity:.44}
  .n12{left:90%;top:48%;--r:-29deg;opacity:.42}
  .n13{left:55%;top:20%;--r:36deg;opacity:.4}
}
@media(max-width:380px){
  .nebula{
    width:clamp(74px,24vw,96px);
    height:clamp(74px,24vw,96px);
  }
  .black-hole{
    width:clamp(62px,19vw,82px);
    min-width:62px;
  }
  .panel{
    width:min(326px,calc(100vw - 22px));
  }
}
@media(max-width:760px) and (max-height:700px){
  .vault{
    top:clamp(54px,10dvh,82px);
    width:clamp(132px,38vw,190px);
  }
  .panel{
    bottom:max(10px,env(safe-area-inset-bottom));
    transform:translateX(-50%) scale(.9);
  }
  .nebula{
    width:clamp(66px,21vw,92px);
    height:clamp(66px,21vw,92px);
  }
}
@media(max-width:920px) and (orientation:landscape){
  .vault{
    top:7dvh;
    width:clamp(120px,24vw,190px);
  }
  .panel{
    bottom:12px;
    width:min(360px,58vw);
    transform:translateX(-50%) scale(.88);
  }
  .nebula{
    width:clamp(62px,14vmin,104px);
    height:clamp(62px,14vmin,104px);
  }
  .black-hole{
    width:clamp(54px,12vmin,84px);
    min-width:54px;
  }
  .n1{left:12%;top:18%}
  .n2{left:78%;top:18%}
  .n3{left:32%;top:20%}
  .n4{left:91%;top:42%}
  .n5{left:18%;top:50%}
  .n6{left:68%;top:39%}
  .n7{left:9%;top:76%}
  .n8{left:42%;top:72%}
  .n9{left:82%;top:72%}
  .n10{left:60%;top:84%}
  .n11{left:28%;top:84%}
  .n12{left:90%;top:58%}
  .n13{left:54%;top:22%}
}

/* Ancient numeric seal keypad */
.ancient-code{
  height:42px;
  border:1px solid rgba(188,154,91,.42);
  background:
    radial-gradient(circle at 50% 0,rgba(226,183,102,.12),transparent 50%),
    linear-gradient(180deg,rgba(27,22,16,.95),rgba(5,7,7,.96));
  box-shadow:inset 0 0 18px rgba(0,0,0,.72),0 0 18px rgba(196,158,83,.1);
}
.ancient-code input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.ancient-code #dots{
  gap:14px;
}
.ancient-code #dots i{
  width:10px;
  height:10px;
  border-color:rgba(205,169,99,.62);
  background:radial-gradient(circle,rgba(55,43,25,.9),rgba(7,8,8,.95));
  box-shadow:inset 0 0 6px rgba(0,0,0,.9);
}
.ancient-code #dots i.filled{
  background:radial-gradient(circle,#f2ce87 0 28%,#a67130 55%,#22170b 100%);
  border-color:#f1c777;
  box-shadow:0 0 12px rgba(239,190,105,.55),inset 0 0 5px rgba(255,234,173,.5);
}
.ancient-keypad{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin:12px auto 10px;
  max-width:245px;
}
.ancient-keypad button{
  position:relative;
  min-height:42px;
  border:1px solid rgba(195,161,96,.52);
  border-radius:13px;
  background:
    radial-gradient(circle at 35% 24%,rgba(255,231,172,.23),transparent 35%),
    linear-gradient(145deg,#2e261a,#0c0e0d 62%,#20170d);
  color:#f3d59b;
  font:700 18px/1 Georgia,serif;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,231,178,.22),inset 0 -8px 16px rgba(0,0,0,.45),0 7px 18px rgba(0,0,0,.36);
  text-shadow:0 1px 0 #000,0 0 9px rgba(231,184,99,.38);
  transition:transform .12s ease,filter .12s ease,border-color .12s ease;
}
.ancient-keypad button:before{
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid rgba(238,199,123,.18);
  border-radius:10px;
  pointer-events:none;
}
.ancient-keypad button:hover,.ancient-keypad button:focus-visible{
  border-color:rgba(244,202,116,.88);
  filter:brightness(1.12);
  outline:none;
}
.ancient-keypad button:active{
  transform:translateY(2px) scale(.98);
  box-shadow:inset 0 4px 12px rgba(0,0,0,.68),0 2px 8px rgba(0,0,0,.28);
}
.ancient-keypad.complete button{
  border-color:rgba(76,232,228,.5);
  color:#e9fff8;
}
@media(max-width:760px){
  .ancient-code{
    height:38px;
  }
  .ancient-keypad{
    max-width:230px;
    gap:7px;
    margin:10px auto 9px;
  }
  .ancient-keypad button{
    min-height:39px;
    border-radius:12px;
    font-size:17px;
  }
  .panel{
    padding-top:13px;
  }
}
@media(max-width:380px){
  .ancient-keypad{
    max-width:212px;
    gap:6px;
  }
  .ancient-keypad button{
    min-height:36px;
    font-size:16px;
  }
  .ancient-code{
    height:35px;
  }
  .panel label{
    margin:10px 0 6px;
  }
  .panel p{
    margin:6px 0 9px;
  }
}
@media(max-width:760px) and (max-height:700px){
  .ancient-keypad{
    max-width:204px;
    gap:5px;
    margin:7px auto;
  }
  .ancient-keypad button{
    min-height:32px;
    font-size:15px;
  }
  .ancient-code{
    height:32px;
  }
  .panel label{
    margin:8px 0 5px;
  }
  .panel button{
    height:34px;
  }
}

/* Smaller, subtler ancient keypad refinement */
.ancient-code{
  height:34px;
  max-width:210px;
  margin:0 auto;
}
.ancient-code #dots{
  gap:10px;
}
.ancient-code #dots i{
  width:7px;
  height:7px;
}
.ancient-keypad{
  width:154px;
  max-width:154px;
  gap:6px;
  margin:8px auto 9px;
  padding:8px;
  border:1px solid rgba(170,139,82,.24);
  border-radius:20px;
  background:
    radial-gradient(circle at 50% 8%,rgba(215,174,99,.08),transparent 42%),
    linear-gradient(145deg,rgba(19,17,14,.72),rgba(3,6,7,.58));
  box-shadow:inset 0 0 18px rgba(0,0,0,.55),0 8px 28px rgba(0,0,0,.24);
}
.ancient-keypad button{
  justify-self:center;
  width:34px;
  height:34px;
  min-height:34px;
  padding:0;
  display:grid;
  place-items:center;
  border-radius:50%;
  border-color:rgba(157,132,86,.42);
  background:
    radial-gradient(circle at 38% 28%,rgba(232,205,142,.17),transparent 35%),
    radial-gradient(circle at 50% 68%,#0a0b0a,#242016 73%,#070807 100%);
  color:rgba(235,205,144,.9);
  font:700 13px/1 Georgia,serif;
  box-shadow:inset 0 1px 0 rgba(255,231,178,.13),inset 0 -6px 10px rgba(0,0,0,.48),0 3px 10px rgba(0,0,0,.34);
  text-shadow:0 1px 0 #000,0 0 6px rgba(218,170,86,.2);
}
.ancient-keypad button:before{
  inset:4px;
  border-radius:50%;
  border-color:rgba(238,199,123,.1);
}
.ancient-keypad button:hover,.ancient-keypad button:focus-visible{
  filter:brightness(1.08);
}
.ancient-keypad button:active{
  transform:translateY(1px) scale(.96);
}
@media(max-width:760px){
  .panel{
    width:min(318px,calc(100vw - 32px));
    padding:12px 15px 12px;
  }
  .ancient-code{
    height:32px;
    max-width:190px;
  }
  .ancient-keypad{
    width:146px;
    max-width:146px;
    gap:5px;
    margin:7px auto 8px;
    padding:7px;
  }
  .ancient-keypad button{
    width:32px;
    height:32px;
    min-height:32px;
    font-size:12px;
  }
  .panel label{
    margin:10px 0 6px;
    font-size:8px;
  }
  .panel p{
    margin:6px 0 9px;
  }
}
@media(max-width:380px), (max-width:760px) and (max-height:700px){
  .panel{
    width:min(296px,calc(100vw - 28px));
  }
  .ancient-code{
    height:30px;
    max-width:176px;
  }
  .ancient-code #dots i{
    width:6px;
    height:6px;
  }
  .ancient-keypad{
    width:132px;
    max-width:132px;
    gap:4px;
    padding:6px;
    margin:6px auto 7px;
  }
  .ancient-keypad button{
    width:28px;
    height:28px;
    min-height:28px;
    font-size:11px;
  }
}

/* Vault-door watch dial keypad */
.vault{
  opacity:.68;
  z-index:5;
}
.door{
  overflow:visible;
}
.door-keypad{
  position:absolute;
  inset:0;
  z-index:8;
  pointer-events:auto;
}
.door-keypad button{
  position:absolute;
  left:50%;
  top:50%;
  width:clamp(23px,3.2vw,38px);
  height:clamp(23px,3.2vw,38px);
  padding:0;
  border:1px solid rgba(120,226,219,.55);
  border-radius:50%;
  background:
    radial-gradient(circle at 38% 28%,rgba(139,255,246,.22),transparent 34%),
    radial-gradient(circle at 50% 62%,rgba(9,27,29,.96),rgba(2,5,6,.96) 72%);
  color:rgba(214,255,250,.92);
  font:700 clamp(10px,1.35vw,15px)/1 "Courier New",monospace;
  text-shadow:0 0 8px rgba(76,232,228,.55);
  box-shadow:inset 0 0 10px rgba(0,0,0,.68),0 0 13px rgba(75,232,228,.18);
  cursor:pointer;
  transform:translate(-50%,-50%);
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.door-keypad button:hover,.door-keypad button:focus-visible{
  border-color:rgba(245,218,151,.88);
  color:#ffe7aa;
  outline:none;
  filter:brightness(1.2);
}
.door-keypad button:active{
  transform:translate(-50%,-50%) scale(.92);
}
.door-keypad button:nth-child(1){left:65%;top:17%}
.door-keypad button:nth-child(2){left:82%;top:34%}
.door-keypad button:nth-child(3){left:88%;top:50%}
.door-keypad button:nth-child(4){left:82%;top:67%}
.door-keypad button:nth-child(5){left:65%;top:83%}
.door-keypad button:nth-child(6){left:50%;top:89%}
.door-keypad button:nth-child(7){left:35%;top:83%}
.door-keypad button:nth-child(8){left:18%;top:67%}
.door-keypad button:nth-child(9){left:12%;top:50%}
.seal-tools{
  display:flex;
  justify-content:center;
  gap:10px;
  margin:9px 0 8px;
}
.seal-tools button{
  width:auto;
  height:22px;
  padding:0 12px;
  border:1px solid rgba(124,190,188,.28);
  background:rgba(4,11,12,.62);
  color:#8ca6a6;
  font:700 7px/1 "Courier New",monospace;
  letter-spacing:.16em;
  box-shadow:none;
}
.seal-tools button:hover{
  background:rgba(15,45,46,.58);
  color:var(--cyan);
}
@media(max-width:760px){
  .vault{
    opacity:.76;
    top:clamp(68px,10dvh,104px);
    width:clamp(205px,66vw,295px);
  }
  .door-keypad button{
    width:clamp(24px,8.2vw,34px);
    height:clamp(24px,8.2vw,34px);
    font-size:clamp(10px,3vw,13px);
  }
  .panel{
    width:min(304px,calc(100vw - 32px));
  }
  .ancient-code{
    max-width:176px;
    height:30px;
  }
  .seal-tools{
    margin:7px 0 7px;
  }
  .seal-tools button{
    height:20px;
    padding:0 10px;
    font-size:6px;
  }
}
@media(max-width:760px) and (max-height:700px){
  .vault{
    top:clamp(44px,7dvh,68px);
    width:clamp(165px,50vw,220px);
  }
  .door-keypad button{
    width:clamp(20px,6.4vw,28px);
    height:clamp(20px,6.4vw,28px);
    font-size:10px;
  }
  .panel{
    width:min(286px,calc(100vw - 28px));
  }
}
@media(max-width:920px) and (orientation:landscape){
  .vault{
    top:6dvh;
    width:clamp(168px,28vw,230px);
  }
  .door-keypad button{
    width:clamp(20px,4.4vw,30px);
    height:clamp(20px,4.4vw,30px);
    font-size:10px;
  }
}

/* Remove lower access panel; door digits auto-submit */
.hidden-access{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  opacity:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
  clip-path:inset(50%)!important;
}
.access .vault{
  top:clamp(118px,17svh,180px);
}
@media(max-width:760px){
  .access .vault{
    top:clamp(86px,13dvh,132px);
    width:clamp(230px,76vw,330px);
  }
}
@media(max-width:760px) and (max-height:700px){
  .access .vault{
    top:clamp(58px,9dvh,82px);
    width:clamp(190px,58vw,250px);
  }
}

/* 12-position roman dial fitted to the main vault door */
.door-keypad.roman-dial button{
  width:clamp(25px,3vw,40px);
  height:clamp(25px,3vw,40px);
  border-color:rgba(134,232,225,.34);
  background:
    radial-gradient(circle at 50% 48%,rgba(7,23,25,.55),rgba(1,5,6,.46) 68%,rgba(0,0,0,.28)),
    linear-gradient(145deg,rgba(81,156,151,.12),rgba(0,0,0,.16));
  color:rgba(214,250,246,.78);
  font:700 clamp(8px,1.05vw,13px)/1 "Times New Roman",serif;
  letter-spacing:.04em;
  box-shadow:inset 0 0 11px rgba(0,0,0,.55),0 0 10px rgba(75,232,228,.12);
}
.door-keypad.roman-dial button:nth-child(1){left:50%;top:8%}
.door-keypad.roman-dial button:nth-child(2){left:71%;top:14%}
.door-keypad.roman-dial button:nth-child(3){left:86%;top:29%}
.door-keypad.roman-dial button:nth-child(4){left:92%;top:50%}
.door-keypad.roman-dial button:nth-child(5){left:86%;top:71%}
.door-keypad.roman-dial button:nth-child(6){left:71%;top:86%}
.door-keypad.roman-dial button:nth-child(7){left:50%;top:92%}
.door-keypad.roman-dial button:nth-child(8){left:29%;top:86%}
.door-keypad.roman-dial button:nth-child(9){left:14%;top:71%}
.door-keypad.roman-dial button:nth-child(10){left:8%;top:50%}
.door-keypad.roman-dial button:nth-child(11){left:14%;top:29%}
.door-keypad.roman-dial button:nth-child(12){left:29%;top:14%}
.access .vault{
  top:clamp(96px,15svh,162px);
  width:clamp(300px,42vw,560px);
}
.access .vault span{
  opacity:.62;
}
@media(max-width:760px){
  .access .vault{
    top:clamp(118px,18dvh,170px);
    width:clamp(300px,88vw,390px);
  }
  .door-keypad.roman-dial button{
    width:clamp(25px,7vw,34px);
    height:clamp(25px,7vw,34px);
    font-size:clamp(8px,2.7vw,12px);
  }
}
@media(max-width:760px) and (max-height:700px){
  .access .vault{
    top:clamp(76px,13dvh,112px);
    width:clamp(250px,70vw,320px);
  }
  .door-keypad.roman-dial button{
    width:clamp(21px,5.8vw,28px);
    height:clamp(21px,5.8vw,28px);
    font-size:clamp(7px,2.2vw,10px);
  }
}

/* Engraved roman numerals integrated into the vault door */
.access .vault{
  top:clamp(170px,27svh,300px);
  width:clamp(250px,30vw,420px);
  opacity:1;
}
.access .vault span{
  opacity:.48;
}
.access .door{
  border:0;
  background:transparent;
  box-shadow:none;
}
.access .door > i,
.access .door > b,
.access .door > em{
  display:none;
}
.door-keypad.roman-dial{
  inset:2%;
}
.door-keypad.roman-dial button{
  width:clamp(34px,3vw,46px);
  height:clamp(34px,3vw,46px);
  border:0;
  background:transparent;
  color:rgba(180,224,218,.52);
  font:700 clamp(9px,1vw,13px)/1 "Times New Roman",serif;
  letter-spacing:.03em;
  text-shadow:0 0 5px rgba(84,230,219,.18),0 1px 0 rgba(0,0,0,.9);
  box-shadow:none;
  mix-blend-mode:screen;
}
.door-keypad.roman-dial button:before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:1px;
  height:clamp(9px,1.1vw,14px);
  border-radius:999px;
  background:rgba(130,223,215,.22);
  transform:translate(-50%,-50%) translateY(-26px);
  box-shadow:0 0 5px rgba(84,230,219,.12);
}
.door-keypad.roman-dial button:hover,
.door-keypad.roman-dial button:focus-visible{
  color:rgba(230,255,249,.86);
  filter:none;
  text-shadow:0 0 9px rgba(84,230,219,.42);
}
.door-keypad.roman-dial button:active{
  transform:translate(-50%,-50%) scale(.94);
}
.door-keypad.roman-dial button:nth-child(1){left:50%;top:4%}
.door-keypad.roman-dial button:nth-child(2){left:73%;top:11%}
.door-keypad.roman-dial button:nth-child(3){left:89%;top:27%}
.door-keypad.roman-dial button:nth-child(4){left:96%;top:50%}
.door-keypad.roman-dial button:nth-child(5){left:89%;top:73%}
.door-keypad.roman-dial button:nth-child(6){left:73%;top:89%}
.door-keypad.roman-dial button:nth-child(7){left:50%;top:96%}
.door-keypad.roman-dial button:nth-child(8){left:27%;top:89%}
.door-keypad.roman-dial button:nth-child(9){left:11%;top:73%}
.door-keypad.roman-dial button:nth-child(10){left:4%;top:50%}
.door-keypad.roman-dial button:nth-child(11){left:11%;top:27%}
.door-keypad.roman-dial button:nth-child(12){left:27%;top:11%}
@media(max-width:760px){
  .access .vault{
    top:clamp(198px,30dvh,260px);
    width:clamp(235px,64vw,310px);
  }
  .door-keypad.roman-dial button{
    width:clamp(30px,8vw,40px);
    height:clamp(30px,8vw,40px);
    font-size:clamp(8px,2.4vw,11px);
  }
  .door-keypad.roman-dial button:before{
    height:clamp(7px,2vw,10px);
    transform:translate(-50%,-50%) translateY(-21px);
  }
}
@media(max-width:760px) and (max-height:700px){
  .access .vault{
    top:clamp(130px,23dvh,178px);
    width:clamp(205px,54vw,260px);
  }
}

/* Hide the baked-in passcode panel from the corridor artwork */
.scene{
  overflow:hidden;
}
.scene:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:38%;
  background:
    radial-gradient(ellipse at 50% 0,rgba(6,19,20,.62),rgba(2,5,6,.9) 52%,#020405 100%),
    linear-gradient(to bottom,rgba(0,0,0,.18),#020405 42%,#020405);
  box-shadow:0 -34px 64px rgba(0,0,0,.58);
  pointer-events:none;
}
.floor{
  opacity:.34;
}
.system,.required{
  display:none;
}
@media(max-width:760px){
  .scene:after{
    height:34%;
    background:
      radial-gradient(ellipse at 50% 0,rgba(5,18,19,.5),rgba(2,5,6,.9) 54%,#020405 100%),
      linear-gradient(to bottom,rgba(0,0,0,.12),#020405 44%,#020405);
  }
}

/* Auto-aligned dial: JS maps this layer to the background image coordinates */
.access .vault{
  display:none;
}
.door-keypad.roman-dial{
  position:absolute;
  inset:auto;
  z-index:7;
  transform:translate(-50%,-50%);
  pointer-events:auto;
}
.door-keypad.roman-dial button{
  width:clamp(22px,7.8%,34px);
  height:clamp(22px,7.8%,34px);
  font-size:clamp(11px,calc(var(--dial-size, 285px) * .048),18px);
}
.door-keypad.roman-dial button:before{
  height:clamp(5px,2.5%,10px);
  transform:translate(-50%,-50%) translateY(-160%);
}
@media(max-width:760px){
  .door-keypad.roman-dial button{
    width:clamp(18px,8.2%,29px);
    height:clamp(18px,8.2%,29px);
    font-size:clamp(10px,calc(var(--dial-size, 240px) * .05),16px);
  }
}

/* Antique bronze embossed roman numerals */
.door-keypad.roman-dial button{
  color:rgba(188,121,55,.86);
  background:transparent;
  opacity:.94;
  mix-blend-mode:normal;
  -webkit-text-stroke:.28px rgba(255,219,150,.34);
  text-shadow:
    0 -1px 0 rgba(255,229,158,.38),
    0 1px 0 rgba(31,13,4,.96),
    1px 1px 2px rgba(0,0,0,.76),
    -1px 0 1px rgba(92,46,15,.54),
    0 0 7px rgba(176,98,32,.2);
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.58));
}
.door-keypad.roman-dial button:before{
  background:linear-gradient(to bottom,rgba(232,164,83,.42),rgba(72,36,12,.36));
  box-shadow:
    0 -1px 0 rgba(255,223,146,.24),
    0 1px 1px rgba(0,0,0,.68);
}
.door-keypad.roman-dial button:hover,
.door-keypad.roman-dial button:focus-visible{
  color:rgba(228,166,86,.96);
  text-shadow:
    0 -1px 0 rgba(255,237,174,.5),
    0 1px 0 rgba(31,12,3,.96),
    1px 1px 2px rgba(0,0,0,.72),
    0 0 10px rgba(206,128,43,.32);
}

/* Subtle passcode feedback lights mapped to the lower vault display */
#dots.passcode-lights{
  position:absolute;
  inset:auto;
  z-index:8;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(18px,calc(var(--lights-scale, 1) * 33px),34px);
  height:clamp(12px,calc(var(--lights-scale, 1) * 22px),22px);
  pointer-events:none;
  mix-blend-mode:screen;
}
#dots.passcode-lights i{
  width:clamp(7px,calc(var(--lights-scale, 1) * 14px),15px);
  height:clamp(7px,calc(var(--lights-scale, 1) * 14px),15px);
  border-radius:50%;
  border:1px solid rgba(86,151,148,.13);
  background:rgba(35,94,91,.08);
  box-shadow:inset 0 0 5px rgba(0,0,0,.65);
  opacity:.38;
  transition:background-color .18s ease,box-shadow .18s ease,opacity .18s ease,transform .18s ease;
}
#dots.passcode-lights i.filled{
  background:rgba(88,238,228,.34);
  border-color:rgba(145,255,249,.24);
  box-shadow:
    inset 0 0 4px rgba(214,255,252,.1),
    0 0 7px rgba(76,232,228,.22);
  opacity:.72;
  transform:scale(1.04);
}