:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;background:#000;color:#eee;font-synthesis:none}
*{box-sizing:border-box}
html,body{margin:0;min-width:0;min-height:100%;background:#000}
button,input,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button,input{font:inherit}
button{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #eee;outline-offset:5px}
.vault{position:relative;isolation:isolate;width:100%;height:100svh;min-height:560px;overflow:hidden;background:#000}
.vault-scene{position:absolute;inset:0;z-index:0;display:block;pointer-events:none}
.vault-scene img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.vault-atmosphere{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;opacity:0;pointer-events:none}
.vault-atmosphere[data-state="active"]{opacity:1}
@media(prefers-reduced-motion:reduce){.vault-atmosphere{display:none}}
.vault::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,#0003 0%,#0000 24%,#0000 57%,#0002 100%)}
.masthead,.access,footer{z-index:3}
.masthead{position:absolute;top:clamp(24px,1.8vw,34px);left:clamp(28px,2.4vw,46px);right:clamp(28px,2.4vw,46px);display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:clamp(20px,2vw,38px);text-decoration:none;flex-shrink:0}
.brand-badstory{display:block;width:clamp(94px,7.5vw,144px);height:auto;filter:invert(1);opacity:.98}
.brand-divider{height:clamp(50px,4.5vw,86px);width:1px;background:linear-gradient(180deg,#fff0,#ddd9 20%,#ddd9 80%,#fff0)}
.brand-y{display:block;width:clamp(48px,4.6vw,88px);height:clamp(48px,4.6vw,88px);object-fit:contain;opacity:.97}
.connection{display:flex;align-items:center;gap:15px;margin-top:12px;font-size:clamp(9px,.68vw,12px);font-weight:500;line-height:1.5;letter-spacing:.24em;color:#eee;white-space:nowrap;text-shadow:0 1px 8px #000}
.connection-dot{width:16px;height:16px;border-radius:50%;flex-shrink:0;background:radial-gradient(circle at 31% 25%,#fff 0%,#ddd 24%,#999 57%,#515151 82%,#ccc 100%);box-shadow:0 1px 7px #000, inset 0 0 1px #fff}
.access{position:absolute;left:50%;bottom:13svh;transform:translateX(-50%);width:clamp(360px,29.5vw,560px);text-align:center;color:#eee;text-shadow:0 2px 12px #000}
.access h1{font-size:clamp(21px,1.7vw,31px);line-height:1.35;font-weight:400;letter-spacing:.36em;margin:0 0 10px;padding-left:.36em;white-space:nowrap}
.access-subtitle{font-size:clamp(14px,1.07vw,20px);line-height:1.5;letter-spacing:.2em;color:#ddd;margin:0 0 14px}
.password-label{display:block;text-align:left;font-size:12px;line-height:18px;font-weight:400;letter-spacing:.26em;margin:0 0 4px 2px}
.password-control{position:relative;width:100%;height:62px;border:1px solid #eeeeeed9;border-radius:6px;background:linear-gradient(130deg,#ffffff08,#0008 48%,#ffffff05);box-shadow:inset 0 1px 1px #ffffff2b,0 0 0 1px #ffffff14,0 3px 16px #0009;backdrop-filter:blur(4px)}
.password-lock{position:absolute;left:20px;top:16px;width:24px;height:28px;fill:none;stroke:#eee;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.password-control input{display:block;width:100%;height:100%;border:0;border-radius:inherit;background:transparent;color:#eee;padding:0 61px 0 73px;font-size:23px;line-height:1;letter-spacing:.2em;caret-color:transparent;cursor:default}
.password-control input::placeholder{color:#eee;opacity:1}
.password-control input[type="text"]{font-size:12px;letter-spacing:.1em}
.eye{position:absolute;right:6px;top:8px;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:3px;background:transparent;color:#eee;padding:9px}
.eye:hover{color:#fff;background:#ffffff0c}
.eye svg{display:block;width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.eye[aria-pressed="false"] .eye-slash{display:none}
.enter{display:flex;align-items:center;justify-content:center;gap:21px;width:100%;height:61px;margin:18px 0 0;border:1px solid #eee;border-radius:6px;background:linear-gradient(122deg,#ffffff77 0%,#ffffff19 19%,#0005 47%,#0007 69%,#ffffff5c 100%),linear-gradient(180deg,#ffffff30 0%,#0006 55%,#ffffff0d 100%);box-shadow:inset 0 1px 1px #ffffff80,inset 0 -1px 1px #ffffff40,0 0 0 1px #ffffff14,0 4px 18px #000a;backdrop-filter:blur(9px);color:#eee;font-size:16px;font-weight:400;line-height:1.5;letter-spacing:.3em;padding:0 18px;text-shadow:0 1px 6px #000;text-transform:uppercase}
.enter svg{width:25px;height:20px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.enter:hover{background-color:#ffffff13;box-shadow:inset 0 1px 1px #fff9,inset 0 -1px 1px #fff6,0 0 15px #ffffff10}
.enter:active{background-color:#0008}
.preview-note{position:absolute;top:100%;left:0;right:0;font-size:10px;line-height:1.5;letter-spacing:.07em;color:#b3b3b3;margin:13px 0 0}
footer{position:absolute;left:20px;right:20px;bottom:clamp(28px,4.8svh,52px);display:flex;align-items:center;justify-content:center;gap:10px;text-align:center;font-size:11px;line-height:1.6;letter-spacing:.24em;color:#ddd;text-shadow:0 1px 8px #000}
footer::before,footer::after{content:"";width:37px;height:1px;background:#ccc;opacity:.85;margin:0 26px}
footer span{color:#aaa}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:760px){
  .masthead{top:25px;left:20px;right:20px;gap:12px;align-items:center}
  .brand{gap:13px}
  .brand-badstory{width:80px}
  .brand-divider{height:40px}
  .brand-y{width:40px;height:40px}
  .connection{font-size:8px;letter-spacing:.13em;gap:8px;margin-top:0}
  .connection-dot{width:9px;height:9px}
  .access{width:calc(100% - 44px);max-width:420px;bottom:max(14svh,90px)}
  .access h1{font-size:21px;letter-spacing:.3em;padding-left:.3em;margin-bottom:9px}
  .access-subtitle{font-size:14px;letter-spacing:.17em;margin-bottom:21px}
  .password-label{font-size:10px;line-height:16px;margin-bottom:5px}
  .password-control{height:58px}
  .password-lock{top:14px;left:17px}
  .password-control input{padding-left:61px;font-size:20px}
  .password-control input[type="text"]{font-size:10px}
  .eye{top:6px;right:5px}
  .enter{height:56px;margin-top:15px;font-size:14px}
  .preview-note{font-size:10px;letter-spacing:.025em;margin-top:12px}
  footer{font-size:8px;letter-spacing:.2em;bottom:27px;gap:7px}
  footer::before,footer::after{width:21px;margin:0 6px}
}
@media(max-width:350px){
  .masthead{left:18px;right:18px;gap:8px}
  .brand{gap:9px}
  .brand-badstory{width:66px}
  .brand-y{width:32px;height:32px}
  .brand-divider{height:32px}
  .connection{font-size:7px;letter-spacing:.1em;gap:6px}
  .connection-dot{width:8px;height:8px}
  .access{width:calc(100% - 36px)}
  .access h1{font-size:18px}
  footer{font-size:7px;gap:6px}
  footer::before,footer::after{width:17px;margin:0 5px}
}