html,body{margin:0;padding:0;background:#0b0b0b;min-height:100%}
body{font-family:'Archivo',Helvetica,Arial,sans-serif;color:#f2f2f0;animation:pageFadeIn .55s ease}
a{color:#f2f2f0;text-decoration:none}a:hover{color:#8f8f8b}
*{box-sizing:border-box}::selection{background:#f2f2f0;color:#0b0b0b}
@keyframes pageFadeIn{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.wrap{position:relative;min-height:100vh;display:flex;flex-direction:column}
canvas.boids{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:0;pointer-events:none}
header.top{position:relative;z-index:1;background:#0b0b0b;border-bottom:1px solid #242424;padding:16px clamp(16px,4vw,48px);display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:14px}.brand img{width:44px;height:44px;object-fit:contain}
.brand b{display:block;font-family:'Archivo Black',sans-serif;font-size:16px;letter-spacing:.04em;text-transform:uppercase;font-weight:400}
.brand small{display:block;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:#8f8f8b}
.chip{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#0b0b0b;background:#f2f2f0;padding:5px 10px;white-space:nowrap}
main.gate{position:relative;z-index:1;flex:1;display:flex;align-items:center;justify-content:center;padding:clamp(40px,7vw,80px) clamp(20px,5vw,48px)}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:#8f8f8b}
h1.display{margin:0;font-family:'Archivo Black',sans-serif;font-weight:400;font-size:clamp(34px,6vw,64px);line-height:.95;text-transform:uppercase;letter-spacing:-.01em}
.outline{color:transparent;-webkit-text-stroke:2px #f2f2f0}
.btn{display:inline-block;cursor:pointer;color:#0b0b0b;background-image:linear-gradient(to left,#0b0b0b 50%,#f2f2f0 50%);background-size:200% 100%;background-position:0% 0%;border:1px solid #f2f2f0;border-radius:2px;padding:16px 30px;font:700 14px 'Archivo',sans-serif;letter-spacing:.14em;text-transform:uppercase;transition:background-position .9s cubic-bezier(.22,1,.36,1),color .75s ease,transform .25s ease}
.btn:hover{background-position:100% 0%;color:#f2f2f0}.btn:active{transform:scale(.95)}
.pin{width:100%;max-width:520px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:28px;animation:rise .6s cubic-bezier(.22,1,.36,1) both}
.pin p{margin:0;font-size:15px;line-height:1.6;color:#c9c9c5;max-width:380px}
.pin form{width:100%;max-width:360px;display:flex;flex-direction:column;gap:14px}
.pin form.err{animation:shake .4s ease}
.pin input{width:100%;text-align:center;background:#0b0b0b;border:1px solid #2c2c2c;color:#f2f2f0;padding:18px 16px;font:28px 'Archivo',sans-serif;letter-spacing:.5em;border-radius:2px;outline:none;transition:border-color .3s}
.pin input:focus,.pin form.err input{border-color:#f2f2f0}
.msg{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#8f8f8b}
.notice{width:100%;max-width:720px;border:1px solid #2c2c2c;background:#121212;padding:clamp(28px,5vw,56px) clamp(24px,5vw,48px);display:flex;flex-direction:column;gap:28px;animation:rise .6s cubic-bezier(.22,1,.36,1) both}
.notice h1{font-size:clamp(30px,4.4vw,52px);line-height:1.02}
.row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.card{border:1px solid #2c2c2c;background:#0b0b0b;padding:22px 20px;display:flex;flex-direction:column;gap:10px}
.card b{font-family:'Archivo Black',sans-serif;font-weight:400;font-size:30px;color:transparent;-webkit-text-stroke:1.5px #f2f2f0}
.card span{font-size:14px;line-height:1.6;color:#c9c9c5}
.notice .row.foot{border-top:1px solid #2c2c2c;padding-top:24px}.notice .row.foot span{font-size:13px;color:#8f8f8b}
footer.bot{position:relative;z-index:1;border-top:1px solid #242424;padding:20px clamp(16px,4vw,48px);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;color:#8f8f8b}
footer.bot span{display:flex;align-items:center;gap:10px}footer.bot img{width:28px;height:28px;object-fit:contain}
footer.bot .legal{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.08em;text-transform:uppercase}footer.bot .legal a{color:#6f6f6b;transition:color .3s}footer.bot .legal a:hover{color:#f2f2f0}footer.bot .legal i{font-style:normal;color:#6f6f6b}
.viewer{height:100vh;display:flex;flex-direction:column}
.bar{flex:none;background:#0b0b0b;border-bottom:1px solid #242424;padding:10px clamp(12px,3vw,24px);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.bar .l{display:flex;align-items:center;gap:12px;min-width:0}.bar .l img{width:30px;height:30px;object-fit:contain}
.bar .l span{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#8f8f8b;white-space:nowrap}
.bar .chip{font-size:11px;padding:4px 8px}
.seg{display:flex;border:1px solid #2c2c2c;border-radius:2px;overflow:hidden}
.seg button{cursor:pointer;padding:9px 18px;font:700 12px 'Archivo',sans-serif;letter-spacing:.14em;text-transform:uppercase;background:#0b0b0b;color:#8f8f8b;border:0;transition:background .35s,color .35s}
.seg button+button{border-left:1px solid #2c2c2c}.seg button:hover{color:#f2f2f0}.seg button.on{background:#f2f2f0;color:#0b0b0b}
.bar .note{font-size:12px;color:#6f6f6b;white-space:nowrap}
.stage{flex:1;min-height:0;position:relative;background:#0b0b0b}
.stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;pointer-events:none;transition:opacity .45s ease}
.stage iframe.on{opacity:1;pointer-events:auto}
.logout{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#6f6f6b}