/* Rubii · 深夜AI聊天电台 */
:root{
  --void:#0B0618;
  --night:#120B28;
  --panel:#181034;
  --cyan:#00E4FC;
  --cyan-dim:#5BA8B8;
  --pur:#7C20E0;
  --white:#EDF2FF;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
body{background:var(--void);color:var(--white);font-family:"PingFang SC","Microsoft YaHei",Arial,sans-serif;line-height:1.75;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{width:1100px;max-width:calc(100% - 40px);margin:0 auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.btn{display:inline-block;padding:11px 26px;border:2px solid var(--cyan);font-weight:700;font-size:15px;cursor:pointer;transition:transform .12s}
.btn:hover{transform:translate(-2px,-2px)}
.btn-cyan{background:var(--cyan);color:#04121A}
.btn-pur{background:var(--pur);border-color:var(--pur);color:#fff}
.btn-linepur{background:transparent;color:var(--cyan);border-color:var(--pur)}
.btn-lg{padding:14px 34px;font-size:16px}
.rkick{display:flex;align-items:center;gap:10px;font-style:normal;font-size:12px;letter-spacing:3px;color:var(--cyan);margin-bottom:14px}
.rkick i{display:inline-block;background:var(--pur);color:#fff;font-style:normal;padding:2px 8px;letter-spacing:1px}

/* bar */
.rbar{position:sticky;top:0;z-index:50;background:rgba(11,6,24,.94);border-bottom:2px solid var(--pur)}
.rbar-in{display:flex;align-items:center;justify-content:space-between;height:64px}
.rlogo{display:flex;align-items:center;gap:10px}
.rlogo img{border:2px solid var(--cyan)}
.rlogo-t{display:flex;flex-direction:column;line-height:1.2}
.rlogo-t strong{font-size:17px;letter-spacing:1px}
.rlogo-t small{font-size:11px;color:var(--cyan-dim)}
.rnav{display:flex;gap:6px}
.rnav a{padding:7px 13px;font-size:14px;color:#9AA3C8;border:2px solid transparent}
.rnav a:hover,.rnav a.on{color:var(--cyan);border-color:var(--cyan)}
.rbar-r{display:flex;align-items:center;gap:14px}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.burger span{width:24px;height:3px;background:var(--cyan)}

/* hero */
.rhe{background:var(--night);border-bottom:2px solid var(--pur);padding:64px 0 86px}
.rhe-in{display:grid;grid-template-columns:1.12fr .88fr;gap:56px;align-items:center}
.rhe-l h1{font-size:66px;letter-spacing:2px;line-height:1;margin:2px 0 18px;color:#fff}
.rhe-l .lead{font-size:15px;color:#BDC4E4;max-width:560px}
.rhe-acts{display:flex;gap:16px;margin:28px 0 20px;flex-wrap:wrap}
.rtags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin-bottom:22px}
.rtags li{border:2px solid var(--pur);color:#B79CF5;font-size:12px;padding:3px 12px}
.rnote{font-size:12px;color:#7E87AC;display:flex;align-items:center;gap:8px}
.rnote .dot{width:9px;height:9px;background:var(--cyan);animation:blink 1.6s steps(1) infinite}
@keyframes blink{50%{opacity:.15}}

/* radio console */
.console{position:relative;background:var(--panel);border:2px solid var(--cyan);box-shadow:14px 14px 0 var(--pur)}
.con-h{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:2px solid var(--cyan);font-size:11px;letter-spacing:2px;color:var(--cyan)}
.con-h img{border:1px solid var(--pur)}
.onair{margin-left:auto;background:var(--pur);color:#fff;font-weight:700;padding:1px 9px;animation:blink 1.4s steps(1) infinite}
.con-screen{display:grid;grid-template-columns:26px 1fr 26px;gap:10px;align-items:center;margin:18px;padding:16px;background:var(--void);border:2px solid var(--pur)}
.vu{display:flex;flex-direction:column;gap:5px;justify-content:center;height:100%}
.vu i{width:8px;background:var(--cyan)}
.vu i:nth-child(1){height:10px}.vu i:nth-child(2){height:16px}.vu i:nth-child(3){height:22px}
.vu i:nth-child(4){height:28px}.vu i:nth-child(5){height:34px}.vu i:nth-child(6){height:34px}
.vu i:nth-child(7){height:28px}.vu i:nth-child(8){height:22px}.vu i:nth-child(9){height:16px}.vu i:nth-child(10){height:10px}
.vu-r i{background:var(--pur)}
.con-shot{background:var(--panel);border:2px solid var(--cyan);padding:8px}
.con-shot img{width:100%;height:auto;border:1px solid var(--pur)}
.con-shot figcaption{text-align:center;font-size:10px;letter-spacing:1px;color:var(--cyan-dim);margin-top:6px}
.con-dial{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:2px solid var(--cyan);font-size:11px;color:var(--cyan-dim);letter-spacing:1px}
.dial-line{flex:1;height:2px;background:repeating-linear-gradient(90deg,var(--pur) 0 6px,transparent 6px 12px)}
.dial-num{color:var(--cyan);font-weight:800;font-size:15px;letter-spacing:2px}
.dial-khz{font-style:normal}
.con-tag{position:absolute;padding:8px 12px;min-width:126px;border:2px solid var(--cyan)}
.con-tag b{display:block;font-size:14px}
.con-tag span{font-size:11px;color:#BDC4E4}
.cta{left:-14px;bottom:-22px;background:#0A2030}
.cta b{color:var(--cyan)}
.ctb{right:-12px;top:42%;background:#220E44;border-color:var(--pur)}
.ctb b{color:#C79CFE}
.wave{position:absolute;width:8px;height:8px;background:var(--cyan);transform:rotate(45deg)}
.w1{left:-10px;top:30%}.w2{right:-8px;top:18%;background:var(--pur)}.w3{right:-14px;bottom:24%;width:6px;height:6px}

/* band */
.rpb{background:var(--pur);box-shadow:12px -12px 0 var(--cyan)}
.rpb-in{display:grid;grid-template-columns:repeat(4,1fr)}
.rp{display:flex;flex-direction:column;padding:20px 26px;color:#fff;border-right:2px solid rgba(255,255,255,.3);min-width:0}
.rp:last-child{border-right:0}
.rp b{font-size:25px;letter-spacing:1px}
.rp span{font-size:13px;opacity:.92}

/* sections */
.sec-h{text-align:center;margin-bottom:42px}
.sec-h .rkick{justify-content:center}
.sec-h h2{font-size:30px;letter-spacing:1px;color:#fff}
.sec-sub{color:#9AA3C8;font-size:14px;margin-top:10px}
.rft{padding:78px 0}
.rguide{display:grid;grid-template-columns:1fr 1fr;gap:24px;background:var(--night);border:2px solid var(--cyan);padding:36px;box-shadow:-14px -10px 0 var(--cyan)}
.rg{display:grid;grid-template-columns:88px 1fr;background:var(--panel);border:2px solid #33265E}
.rg-time{display:flex;align-items:center;justify-content:center;background:var(--cyan);color:#04121A;font-family:Consolas,monospace;font-weight:800;font-size:14px;letter-spacing:1px;writing-mode:vertical-rl}
.rg-time.pur{background:var(--pur);color:#fff}
.rg h3{font-size:16.5px;color:#fff;margin:14px 18px 6px}
.rg p{font-size:13.5px;color:#BDC4E4;margin:0 18px 16px}

/* cassette wall */
.rga{padding:78px 0;background:var(--night);border-top:2px solid var(--pur);border-bottom:2px solid var(--pur)}
.rshelf{display:flex;justify-content:center;gap:24px;background:var(--void);border:2px solid var(--cyan);padding:40px 26px 34px;box-shadow:16px 8px 0 var(--pur)}
.rt{flex:none;width:184px;background:var(--panel);border:2px solid var(--pur);padding:12px 12px 0}
.rt-reel{display:flex;justify-content:space-around;padding:4px 12px 10px}
.rt-reel i{width:22px;height:22px;border:3px solid var(--cyan);transform:rotate(45deg)}
.rt-reel i:last-child{border-color:var(--pur)}
.rt img{width:100%;height:auto;border:1px solid var(--cyan)}
.rt figcaption{display:flex;align-items:center;gap:8px;padding:9px 2px;font-size:11px;color:#BDC4E4;border-top:2px solid #2A1F52;margin-top:10px}
.rt figcaption b{color:var(--cyan);font-family:Consolas,monospace;letter-spacing:1px}
.t1{margin-top:0}.t2{margin-top:30px}.t3{margin-top:8px}.t4{margin-top:38px}.t5{margin-top:16px}

/* steps */
.rfl{padding:78px 0}
.rsteps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;background:var(--night);border:2px solid var(--pur);padding:38px;box-shadow:10px 16px 0 var(--cyan)}
.rs{background:var(--panel);border:2px solid #33265E;padding:24px 22px;position:relative}
.rs::before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:var(--cyan)}
.rs-no{display:inline-block;font-family:Consolas,monospace;font-size:12px;font-weight:800;letter-spacing:1px;color:#04121A;background:var(--cyan);padding:3px 10px;margin-bottom:12px}
.rs-no.pur{background:var(--pur);color:#fff}
.rs h3{font-size:18px;color:#fff;margin-bottom:6px}
.rs p{font-size:14px;color:#BDC4E4}

/* mailbox */
.rak{padding:78px 0;background:var(--night);border-top:2px solid var(--cyan)}
.rmail{background:var(--panel);border:2px solid var(--cyan);box-shadow:0 14px 0 var(--cyan)}
.rq{border-bottom:2px solid #2C2156}
.rq:last-child{border-bottom:0}
.rq summary{display:grid;grid-template-columns:86px 1fr 30px;align-items:center;gap:14px;padding:19px 26px;cursor:pointer;list-style:none}
.rq summary::-webkit-details-marker{display:none}
.rq-n{background:var(--pur);color:#fff;font-size:12px;font-weight:800;text-align:center;padding:4px 0;letter-spacing:1px}
.rq-t{font-size:16px;font-weight:700;color:#fff}
.rq-x{position:relative;width:16px;height:16px;justify-self:end}
.rq-x::before,.rq-x::after{content:"";position:absolute;background:var(--cyan);top:7px;left:0;width:16px;height:2px}
.rq-x::after{transform:rotate(90deg);transition:transform .18s}
.rq[open] .rq-x::after{transform:rotate(0)}
.rq-a{padding:0 26px 20px 126px;color:#BDC4E4;font-size:14px}

/* letters */
.rvo{padding:78px 0}
.rletters{display:grid;grid-template-columns:1fr 1fr;gap:24px;background:var(--night);border:2px solid var(--pur);padding:38px;box-shadow:-16px 8px 0 var(--pur)}
.rl{position:relative;background:var(--panel);border:2px solid #33265E;border-left:6px solid var(--cyan);padding:22px 24px 16px}
.rl.pur-edge{border-left-color:var(--pur)}
.rl-stamp{position:absolute;top:14px;right:16px;border:2px solid var(--cyan);color:var(--cyan);font-size:10px;letter-spacing:2px;padding:1px 7px;transform:rotate(6deg)}
.rl-stamp.s2{border-color:var(--pur);color:#C79CFE;transform:rotate(-5deg)}
.rl p{font-size:13.5px;color:#D6DBF4;padding-right:70px}
.rl footer{margin-top:12px;padding-top:9px;border-top:2px solid #2C2156;display:flex;justify-content:space-between;gap:8px;font-size:11px;color:#7E87AC;flex-wrap:wrap}
.rl footer b{color:var(--cyan);font-size:12px}

/* cta */
.rct{padding:78px 0;background:var(--night);border-top:2px solid var(--cyan)}
.rct-box{text-align:center;background:var(--panel);border:3px solid var(--pur);padding:58px 30px;box-shadow:12px -14px 0 var(--pur)}
.rct-sign{display:inline-block;color:var(--cyan);font-size:12px;letter-spacing:3px;margin-bottom:22px;animation:blink 1.8s steps(1) infinite}
.rct-box h2{font-size:30px;letter-spacing:1px;color:#fff;margin-bottom:12px}
.rct-p{color:#BDC4E4;font-size:14px;margin-bottom:28px}
.rct-note{margin-top:16px;font-size:12px;color:#7E87AC}

/* footer */
.rfoot{background:var(--void);border-top:2px solid var(--pur);padding:36px 0 30px}
.rfoot-in{text-align:center}
.rfoot-brand{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--cyan);font-weight:700;margin-bottom:16px}
.rfoot-brand img{border:1px solid var(--pur)}
.rfoot-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 22px;font-size:13px;color:#BDC4E4;margin-bottom:18px}
.rfoot-nav a:hover{color:var(--cyan)}
.rfoot-icp{font-size:12px;color:#7E87AC;margin-bottom:4px}
.rfoot-c{font-size:12px;color:#565E82}

.backtop{position:fixed;right:24px;bottom:40px;width:44px;height:44px;background:var(--pur);color:#fff;border:2px solid var(--cyan);font-size:18px;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .2s;z-index:60}
.backtop.show{opacity:1;visibility:visible}

.rv{opacity:0;transform:translateY(22px);transition:opacity .55s ease,transform .55s ease}
.rv.in{opacity:1;transform:none}

@media(max-width:900px){
  .rhe-r{display:flex;justify-content:center}
  .rhe-in{grid-template-columns:1fr;gap:52px}
  .console{width:100%;max-width:430px}
  .rpb-in{grid-template-columns:1fr 1fr}
  .rp:nth-child(2){border-right:0}
  .rp:nth-child(1),.rp:nth-child(2){border-bottom:2px solid rgba(255,255,255,.3)}
  .rguide{grid-template-columns:1fr}
  .rshelf{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;padding:32px 18px}
  .rt{margin-top:0!important}
  .rsteps{grid-template-columns:1fr}
  .rletters{grid-template-columns:1fr}
}
@media(max-width:640px){
  .burger{display:flex}
  .rnav{position:absolute;top:64px;left:0;right:0;flex-direction:column;background:var(--night);border-bottom:2px solid var(--pur);display:none;padding:8px 20px}
  .rnav.open{display:flex}
  .rhe-l h1{font-size:46px}
  .console{box-shadow:9px 9px 0 var(--pur)}
  .con-screen{grid-template-columns:18px 1fr 18px;padding:10px}
  .rpb{box-shadow:8px -8px 0 var(--pur)}
  .rguide{padding:20px;box-shadow:-10px -8px 0 var(--cyan)}
  .rg{grid-template-columns:64px 1fr}
  .rg-time{font-size:12px}
  .rshelf{box-shadow:10px 6px 0 var(--cyan);gap:16px}
  .rt{width:168px}
  .rsteps{padding:24px 18px;box-shadow:8px 10px 0 var(--pur)}
  .rmail{box-shadow:0 10px 0 var(--cyan)}
  .rq summary{grid-template-columns:60px 1fr 24px;padding:15px 14px;gap:10px}
  .rq-n{font-size:11px}
  .rq-a{padding:0 14px 16px 14px}
  .rletters{padding:24px 18px;box-shadow:-8px 10px 0 var(--cyan)}
  .rl p{padding-right:0}
  .rl-stamp{position:static;display:inline-block;margin-bottom:8px}
  .rct-box{box-shadow:8px -10px 0 var(--cyan)}
  .sec-h h2,.rct-box h2{font-size:23px}
}