.vault-page{background:#091a32}
.vault-main{min-height:100vh;padding:76px 0 110px;background-color:#0c1e37}
.vault-hero{min-height:445px;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:40px;position:relative;padding-top:76px;padding-bottom:55px}
.vault-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 78% 45%,#2d6ab74a,transparent 48%)}
.vault-hero-copy{position:relative;z-index:1}
.vault-hero h1{font-size:clamp(3.3rem,6.1vw,6.1rem);margin:0 0 20px}
.vault-hero h1 span{color:#7ddfff}
.vault-hero-copy>p:not(.eyebrow){font-size:1.13rem;color:#bfd0e4;max-width:610px;margin-bottom:25px}
.vault-back{display:inline-flex;align-items:center;gap:10px;border-bottom:1px solid #79d8f488;padding-bottom:7px;color:#b4ecff;font-weight:600;font-size:.92rem}
.vault-back:hover,.vault-back:focus-visible{color:#fff}
.vault-hero-art{width:min(100%,360px);height:300px;position:relative;justify-self:center;display:grid;place-items:center}
.vault-art-ring{position:absolute;width:270px;height:270px;border:1px solid #7bd6fa54;border-radius:50%;animation:vaultOrbit 22s linear infinite}
.vault-art-ring::before{content:"";position:absolute;top:-6px;left:50%;width:12px;height:12px;border-radius:50%;background:#65d8ff;box-shadow:0 0 20px #60d8ff}
.vault-art-ring-two{width:205px;height:205px;border-color:#9d80ff72;animation-direction:reverse;animation-duration:17s}
.vault-art-ring-two::before{background:#a678ff;box-shadow:0 0 19px #a678ff}
.vault-art-core{width:132px;height:132px;border:1px solid #9bdcff88;border-radius:50%;display:grid;place-items:center;background:#113052;box-shadow:0 0 0 22px #2cadd218,0 0 60px #42c7f155;z-index:1}
.vault-art-core img{width:96px;filter:drop-shadow(0 8px 12px #04162db0)}
.vault-art-dot{position:absolute;width:10px;height:10px;border-radius:50%;background:#e93d58;box-shadow:0 0 15px #e93d58}.dot-a{right:15px;top:52px}.dot-b{left:18px;bottom:53px;background:#53c2ef;box-shadow:0 0 15px #53c2ef}.dot-c{right:26px;bottom:37px;background:#9f72f3;box-shadow:0 0 15px #9f72f3}
.vault-library{position:relative;z-index:1}
.vault-section-top{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:30px}
.vault-section-top .eyebrow{margin-bottom:15px}
.vault-section-top h2{font-size:clamp(2.1rem,3.7vw,3.7rem);margin:0}
.vault-count{border:1px solid #7bd2ee5e;border-radius:100px;padding:11px 16px;color:#9fe4f8;font-size:.75rem;font-weight:800;letter-spacing:.12em;white-space:nowrap}
.tutorial-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px}
.tutorial-card{display:block;min-width:0;padding:0;border:1px solid #b7d8ef2e;border-radius:20px;overflow:hidden;text-align:left;color:inherit;background:linear-gradient(155deg,#1b3759,#132944);box-shadow:0 18px 35px #0310254d;transition:transform .3s,border-color .3s,box-shadow .3s}
.tutorial-card:hover,.tutorial-card:focus-visible{transform:translateY(-6px);border-color:#86d8f39c;box-shadow:0 24px 45px #03102592}
.tutorial-card:focus-visible{outline:2px solid #9feaff;outline-offset:3px}
.tutorial-art{height:190px;position:relative;overflow:hidden;display:block;background:radial-gradient(circle at 72% 32%,#2b7bb29e,transparent 35%),linear-gradient(145deg,#213f68,#0b2440)}
.tutorial-art::before,.tutorial-art::after{content:"";position:absolute;border:1px solid #bdefff3d;border-radius:50%;width:230px;height:230px;right:-39px;top:-42px}
.tutorial-art::after{width:145px;height:145px;right:4px;top:1px;border-color:#bbecff3b}
.art-new{background:radial-gradient(circle at 75% 30%,#6541a5a3,transparent 39%),linear-gradient(145deg,#28395f,#151f40)}
.art-existing{background:radial-gradient(circle at 75% 30%,#3299c0a8,transparent 39%),linear-gradient(145deg,#1a4263,#102744)}
.art-volunteer{background:radial-gradient(circle at 75% 30%,#286baa9e,transparent 39%),linear-gradient(145deg,#1b355e,#142643)}
.art-association{background:radial-gradient(circle at 75% 30%,#7353b1a8,transparent 39%),linear-gradient(145deg,#293759,#142241)}
.tutorial-index{position:absolute;top:18px;left:20px;z-index:2;font-size:.72rem;color:#b9dff2;font-weight:800;letter-spacing:.11em}
.tutorial-symbol{position:absolute;left:23px;bottom:12px;font-size:6.7rem;line-height:1;color:#b5ebff2b;font-weight:800}
.tutorial-play{position:absolute;right:27px;top:50%;z-index:2;width:67px;height:67px;display:grid;place-items:center;transform:translateY(-50%);border:1px solid #f2faffbb;border-radius:50%;background:#c4eafa21;box-shadow:0 0 0 10px #9ee7ff13,0 0 24px #58bcf055;backdrop-filter:blur(8px);transition:background .25s,scale .25s}
.tutorial-card:hover .tutorial-play,.tutorial-card:focus-visible .tutorial-play{background:#61d0ee66;scale:1.08}
.tutorial-play i{width:0;height:0;margin-left:5px;border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:14px solid white}
.tutorial-info{display:flex;flex-direction:column;align-items:flex-start;min-height:193px;padding:21px 23px 23px}
.tutorial-kind{color:#87ddf8;font-size:.68rem;font-weight:800;letter-spacing:.14em}
.tutorial-info strong{margin:12px 0 19px;font-size:1.37rem;line-height:1.18;font-weight:800}
.tutorial-action{margin-top:auto;color:#c5eafa;font-size:.85rem;font-weight:600}
.tutorial-action span{margin-left:5px}
.tutorial-dialog{width:min(980px,calc(100% - 28px));max-height:calc(100vh - 28px);padding:24px;border:1px solid #8acfeb80;border-radius:19px;background:#10243d;color:#f7faff;box-shadow:0 35px 90px #010918d9}
.tutorial-dialog::backdrop{background:#020a19dc;backdrop-filter:blur(8px)}
.tutorial-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.tutorial-dialog-head .eyebrow{margin-bottom:10px}
.tutorial-dialog h2{font-size:clamp(1.5rem,3vw,2.3rem);margin:0}
.tutorial-close{width:42px;height:42px;flex:none;border:1px solid #9db7d05e;border-radius:50%;background:#ffffff0f;color:white;font-size:1.7rem;line-height:1}
.tutorial-close:hover,.tutorial-close:focus-visible{background:#a9e2ff33}
.tutorial-dialog video{display:block;width:100%;max-height:min(65vh,600px);background:#020914;border-radius:10px}
.tutorial-dialog>p{font-size:.8rem;color:#b6c9dc;margin:14px 0 0}
@keyframes vaultOrbit{to{transform:rotate(360deg)}}
@media(max-width:1050px){.tutorial-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){.vault-hero{grid-template-columns:1fr;padding-top:58px;gap:2px}.vault-hero-art{height:230px}.vault-art-ring{width:210px;height:210px}.vault-art-ring-two{width:160px;height:160px}.vault-art-core{width:110px;height:110px}.vault-art-core img{width:82px}.mobile-nav a.active{color:#75dcfb}}
@media(max-width:580px){.vault-main{padding-bottom:75px}.vault-hero{padding-top:46px}.vault-hero h1{font-size:clamp(3rem,12vw,4.3rem)}.vault-hero-copy>p:not(.eyebrow){font-size:1rem}.vault-section-top{align-items:start}.vault-count{font-size:.58rem;padding:8px 10px}.tutorial-grid{grid-template-columns:1fr;gap:15px}.tutorial-art{height:165px}.tutorial-info{min-height:150px}.tutorial-dialog{padding:14px}.tutorial-dialog video{max-height:60vh}}
@media(prefers-reduced-motion:reduce){.vault-art-ring{animation:none}.tutorial-card,.tutorial-play{transition:none}}