:root{
  --bg0:#070810; --bg1:#0d0f1a; --panel:rgba(22,24,38,.72);
  --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.18);
  --text:#eef0f7; --muted:#9aa0b4;
  --acc1:#9aa0b6; --acc2:#c6ccdb;

  --au1:#5b6070; --au2:#3a3f50; --au3:#6a7088; --au4:#2a2d3a;
  --bgbase:linear-gradient(160deg,#0c0d12,#070709 60%);
  --ease:cubic-bezier(.22,.9,.27,1);
}
*{margin:0;padding:0;box-sizing:border-box;font-family:-apple-system,'Segoe UI',system-ui,sans-serif;}
html{scroll-behavior:smooth;}

.boot{
  position:fixed; inset:0; z-index:5000; background:#000;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .7s ease;
}
.boot.done{opacity:0; pointer-events:none;}
.boot-stage{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:48px;}
.boot-hello{opacity:0; pointer-events:none;}
.boot-apple{opacity:0; animation:bootApple 1s ease forwards .2s;}
@keyframes bootApple{from{opacity:0; transform:scale(.94);}to{opacity:1; transform:scale(1);}}
.boot-bar{width:210px; height:6px; border-radius:6px; background:rgba(255,255,255,.16); overflow:hidden;}
.boot-fill{width:0; height:100%; border-radius:6px; background:linear-gradient(90deg,#fff,#cdbcff); box-shadow:0 0 14px rgba(205,188,255,.6); transition:width .25s linear;}
.boot-tip{font-size:12px; letter-spacing:1px; color:rgba(255,255,255,.45); animation:bootApple 1s ease forwards .6s; opacity:0;}
body.booting{overflow:hidden;}

.hello-word{
  font-family:'Snell Roundhand','Segoe Script','Brush Script MT',cursive;
  font-size:clamp(72px,12vw,140px); font-weight:500; color:#fff; line-height:1;
  background:linear-gradient(120deg,#fff,#d9ccff); -webkit-background-clip:text; background-clip:text; color:transparent;
  clip-path:inset(0 100% 0 0);
}
.boot-hello.show .hello-word{animation:helloDraw 1.7s cubic-bezier(.6,.04,.3,1) forwards;}
@keyframes helloDraw{to{clip-path:inset(0 0 0 0);}}

.dock-icon svg{width:30px; height:30px;}
.pcard-icon svg{width:34px; height:34px;}
.win-icon svg{width:38px; height:38px;}
body{
  color:var(--text); overflow-x:hidden;
  background:var(--bgbase); background-color:#070810;
  min-height:100vh; transition:background-color .6s ease;
}

body::before{
  content:''; position:fixed; inset:0; pointer-events:none; opacity:.03; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.menubar{
  position:fixed; top:0; left:0; right:0; height:30px; z-index:1000;
  display:flex; align-items:center; justify-content:space-between; padding:0 14px;
  background:rgba(10,11,20,.85);
  border-bottom:1px solid rgba(255,255,255,.06); font-size:13px;
}
.mb-left{display:flex; align-items:center; gap:18px;}
.apple{display:flex; opacity:.9; cursor:default;}
.mb-title{font-weight:700;}
.mb-item{color:#d7dae6; cursor:pointer; transition:.15s; padding:2px 4px; border-radius:5px;}
.mb-item:hover{color:#fff; background:rgba(255,255,255,.1);}
.mb-right{display:flex; align-items:center; gap:14px; color:#dfe2ee;}
.mb-ico{display:flex; opacity:.85;}
.mb-clock{font-variant-numeric:tabular-nums; font-weight:500; min-width:48px; text-align:right;}

.desktop{position:relative; z-index:1;}
.hero{
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:120px 24px 60px; gap:18px; position:relative;
}
.hero-inner{display:flex; flex-direction:column; align-items:center; gap:20px; position:relative; z-index:2; transition:transform .25s ease-out;}

.hero-orbs{display:none;}
.hero-orbs span{position:absolute; border-radius:50%; filter:blur(50px); opacity:.5;}
.hero-orbs span:nth-child(1){width:320px; height:320px; background:var(--au1); left:14%; top:22%; animation:orb 11s ease-in-out infinite;}
.hero-orbs span:nth-child(2){width:280px; height:280px; background:var(--au2); right:12%; top:30%; animation:orb 13s ease-in-out infinite reverse;}
.hero-orbs span:nth-child(3){width:240px; height:240px; background:var(--au3); left:42%; bottom:14%; animation:orb 9s ease-in-out infinite;}
@keyframes orb{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(40px,-30px) scale(1.15);}}
.hero-badge{
  font-size:11px; letter-spacing:3px; color:var(--acc2); font-weight:700;
  padding:7px 16px; border:1px solid rgba(124,92,255,.4); border-radius:30px;
  background:rgba(124,92,255,.14);
}
.hero-title{font-size:clamp(40px,7vw,86px); font-weight:850; line-height:1.02; letter-spacing:-2px;}
.grad{background:linear-gradient(120deg,var(--acc1),var(--acc2)); -webkit-background-clip:text; background-clip:text; color:transparent; transition:none;}

.verb{display:inline-block; transition:opacity .28s var(--ease), transform .28s var(--ease);}
.verb.swap{opacity:0; transform:translateY(-10px);}
.roller{display:inline-block; position:relative; overflow:hidden; height:1.12em; line-height:1.12em; vertical-align:bottom;}
.roll-word{display:inline-block; white-space:nowrap; transition:transform .65s cubic-bezier(.22,.61,.36,1), opacity .65s ease; will-change:transform;
  background:linear-gradient(120deg,var(--acc1),var(--acc2)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.roll-word.incoming{transform:translateY(110%); opacity:0;}
.roll-word.leaving{position:absolute; left:0; top:0;}
.roll-word.up{transform:translateY(-110%); opacity:0;}
.hero-sub{max-width:580px; color:#b6bccb; font-size:16.5px; line-height:1.65;}
.hero-sub kbd{font-family:inherit; font-size:12px; background:rgba(255,255,255,.1); border:1px solid var(--line2); border-radius:6px; padding:2px 7px; color:#fff;}
.hero-actions{display:flex; gap:14px; margin-top:6px; flex-wrap:wrap; justify-content:center;}
.hero-btn{display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-family:inherit; font-size:14.5px; font-weight:700; padding:13px 26px; border-radius:14px; border:1px solid transparent; transition:.2s var(--ease);}
.hero-btn.primary{color:#fff; background:linear-gradient(120deg,var(--acc1),var(--acc2)); box-shadow:0 14px 34px rgba(124,92,255,.45);}
.hero-btn.primary:hover{transform:translateY(-2px); filter:brightness(1.1);}
.hero-btn.ghost{color:#dfe2ee; background:rgba(255,255,255,.06); border-color:var(--line2);}
.hero-btn.ghost:hover{background:rgba(255,255,255,.12); transform:translateY(-2px);}
.hero-stats{display:flex; gap:34px; margin-top:18px;}
.hstat b{display:block; font-size:26px; font-weight:850; background:linear-gradient(120deg,#fff,#cdbcff); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hstat span{font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted);}
.hero-hint{
  margin-top:34px; display:flex; flex-direction:column; align-items:center; gap:6px;
  color:var(--muted); font-size:12px; letter-spacing:1px; text-transform:uppercase;
  animation:bob 2s var(--ease) infinite; position:relative; z-index:2;
}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(8px);}}

.rail-pin{height:340vh; position:relative;}
.rail-sticky{position:sticky; top:0; height:100vh; overflow:hidden; display:flex; flex-direction:column; justify-content:center;}
.rail-head{text-align:center; margin-bottom:34px; padding:0 24px;}
.rail-head h2{font-size:clamp(28px,4vw,46px); font-weight:800; letter-spacing:-1px;}
.rail-head p{color:var(--muted); margin-top:8px; font-size:14px;}
.rail-track{display:flex; gap:34px; padding:0 12vw; will-change:transform;}

.pcard{
  flex:0 0 clamp(300px,34vw,460px); border-radius:18px; overflow:hidden;
  background:var(--panel); border:1px solid var(--line);
  box-shadow:0 30px 70px rgba(0,0,0,.55); backdrop-filter:blur(14px);
  transition:transform .3s var(--ease), border-color .3s;
}
.pcard:hover{transform:translateY(-6px); border-color:var(--line2);}
.pcard-bar{height:38px; display:flex; align-items:center; gap:8px; padding:0 14px; border-bottom:1px solid rgba(255,255,255,.06);}
.dotrow{display:flex; gap:7px;}
.dot{width:12px; height:12px; border-radius:50%;}
.dot.r{background:#ff5f57;} .dot.y{background:#febc2e;} .dot.g{background:#28c840;}
.pcard-name{font-size:12.5px; color:var(--muted); margin-left:6px;}
.pcard-body{padding:22px;}
.pcard-icon{width:62px; height:62px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:30px; box-shadow:0 10px 24px rgba(0,0,0,.4); margin-bottom:16px;}
.pcard h3{font-size:21px; font-weight:700;}
.pcard .meta{color:var(--acc2); font-size:12px; margin-top:4px; font-weight:600;}
.pcard p{color:var(--muted); font-size:13.5px; line-height:1.6; margin-top:12px;}
.pcard .open{margin-top:18px; font-size:13px; font-weight:600; color:#fff; background:linear-gradient(120deg,var(--acc1),var(--acc2)); border:none; padding:9px 16px; border-radius:10px; cursor:pointer; transition:.2s;}
.pcard .open:hover{filter:brightness(1.12); transform:translateY(-1px);}

.end-cta{min-height:80vh; display:flex; align-items:center; justify-content:center; padding:60px 24px 170px;}
.cta-card{text-align:center; padding:56px 60px; border-radius:28px; max-width:600px;}
.cta-card h2{font-size:clamp(28px,4vw,46px); font-weight:850; letter-spacing:-1px;}
.cta-card p{color:var(--muted); font-size:16px; margin-top:10px;}
.cta-btn{margin-top:22px; font-size:15px; font-weight:700; color:#fff; background:linear-gradient(120deg,var(--acc1),var(--acc2)); border:none; padding:14px 30px; border-radius:14px; cursor:pointer; box-shadow:0 14px 34px rgba(124,92,255,.4); transition:.22s var(--ease);}
.cta-btn:hover{transform:translateY(-2px); filter:brightness(1.1);}

.dock-wrap{position:fixed; left:0; right:0; bottom:12px; z-index:900; display:flex; justify-content:center; pointer-events:none;}
.dock{
  pointer-events:auto; display:flex; align-items:flex-end; gap:8px; padding:10px 12px;
  background:rgba(30,32,48,.5); border:1px solid rgba(255,255,255,.14);
  border-radius:22px;
  box-shadow:0 18px 50px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12);
}
.dock-item{position:relative; display:flex; flex-direction:column; align-items:center;}
.dock-icon{
  width:54px; height:54px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-size:28px; cursor:pointer; transform-origin:bottom center;
  box-shadow:0 8px 18px rgba(0,0,0,.4); transition:transform .12s ease;
}
.dock-icon:active{transform:scale(.9)!important;}
.dock-sep{width:1px; height:46px; background:rgba(255,255,255,.18); margin:0 6px; align-self:center;}
.dock-label{
  position:absolute; bottom:64px; left:50%; transform:translateX(-50%) translateY(6px);
  background:rgba(20,21,32,.95); color:#fff; font-size:12px; padding:5px 11px; border-radius:8px;
  white-space:nowrap; opacity:0; pointer-events:none; transition:.16s var(--ease); border:1px solid rgba(255,255,255,.12);
}
.dock-item:hover .dock-label{opacity:1; transform:translateX(-50%) translateY(0);}
.run-dot{width:4px; height:4px; border-radius:50%; background:#fff; margin-top:4px; opacity:0;}
.dock-item.running .run-dot{opacity:.8;}

.win{
  position:fixed; z-index:500; width:min(680px,92vw); border-radius:14px; overflow:hidden;
  background:rgba(16,17,27,.96); border:1px solid var(--line2);
  box-shadow:0 40px 90px rgba(0,0,0,.6);
}
.win-project{width:min(820px,94vw);}
.win.max{left:3vw!important; top:42px!important; width:94vw!important;}
.win.max .win-body{max-height:84vh!important;}
@keyframes winIn{from{opacity:0; transform:translateY(20px) scale(.97);}}
.win.closing{animation:winOut .2s var(--ease) forwards;}
@keyframes winOut{to{opacity:0; transform:translateY(14px) scale(.96);}}
.win-bar{height:42px; display:flex; align-items:center; gap:9px; padding:0 14px; cursor:grab; background:rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.07);}
.win-bar:active{cursor:grabbing;}
.win-bar .dot{transition:.15s;}
.win-bar .dotrow:hover .dot{filter:brightness(1.15);}
.win-title{font-size:13px; color:var(--muted); margin-left:6px; font-weight:600;}
.win-body{padding:26px; max-height:62vh; overflow:auto;}
.win-icon{width:70px; height:70px; border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:36px; margin-bottom:16px; box-shadow:0 12px 28px rgba(0,0,0,.45);}
.win-body h2{font-size:24px; font-weight:800;}
.win-body .meta{color:var(--acc2); font-size:13px; font-weight:600; margin-top:5px;}
.win-body p{color:#c7cbdb; line-height:1.7; margin-top:14px; font-size:14.5px;}
.feat{list-style:none; margin-top:18px; display:flex; flex-direction:column; gap:10px;}
.feat li{display:flex; align-items:center; gap:10px; color:#d7dae6; font-size:14px;}
.feat li::before{content:''; width:7px; height:7px; border-radius:50%; background:linear-gradient(120deg,var(--acc1),var(--acc2)); box-shadow:0 0 8px var(--acc1); flex:0 0 7px;}
.win-link{display:inline-block; margin-top:22px; font-size:14px; font-weight:600; color:#fff; background:linear-gradient(120deg,var(--acc1),var(--acc2)); padding:11px 20px; border-radius:11px; text-decoration:none; transition:.2s;}
.win-link:hover{filter:brightness(1.12); transform:translateY(-1px);}

.kv{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px;}
.chip{font-size:12.5px; color:#dfe2ee; background:rgba(255,255,255,.07); border:1px solid var(--line); padding:7px 13px; border-radius:30px;}
.contact-row{display:flex; align-items:center; gap:13px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.07);}
.contact-row:last-child{border:none;}
.contact-row .ci{width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:19px; background:rgba(255,255,255,.06);}
.contact-row b{display:block; font-size:14px;}
.contact-row span{color:var(--muted); font-size:12.5px;}

.term{font-family:'SF Mono',ui-monospace,Consolas,monospace; font-size:13.5px; line-height:1.7; color:#caffd6;}
.term .pr{color:var(--acc2);}
.term .cur{display:inline-block; width:8px; height:15px; background:#caffd6; vertical-align:middle; animation:blink 1s step-end infinite;}
@keyframes blink{50%{opacity:0;}}

@media (max-width:640px){
  .rail-track{padding:0 6vw;}
  .mb-item{display:none;}
}

html, body{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M6 4 L6 22 L11 17.5 L14 24 L17 22.7 L14 16.3 L20.5 16.3 Z' fill='%23000' stroke='%23fff' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 6 4, auto;
}
a, button, .dock-icon, .mb-item, .mb-clock, .pcard .open, .cta-btn, [data-open], .dot, .win-bar{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg fill='%23fff' stroke='%23000' stroke-width='.8'%3E%3Cpath d='M10 13 V6.5 a1.5 1.5 0 013 0 V12 h.6 V8 a1.4 1.4 0 012.8 0 v4 h.5 v-3 a1.4 1.4 0 012.8 0 v3.2 h.5 v-2 a1.3 1.3 0 012.6 0 V17 a6 6 0 01-6 6 h-2.2 a5 5 0 01-3.6-1.6 l-3.4-3.7 a1.5 1.5 0 012-2.2 z'/%3E%3C/g%3E%3C/svg%3E") 9 4, pointer;
}
.cursor-glow{
  position:fixed; top:0; left:0; width:340px; height:340px; border-radius:50%;
  transform:translate(-50%,-50%); pointer-events:none; z-index:2; opacity:0; transition:opacity .4s;
  background:radial-gradient(circle, rgba(124,92,255,.16), rgba(124,92,255,0) 65%);
  will-change:transform;
}

.glass{
  position:relative;
  background:linear-gradient(135deg, rgba(40,42,60,.78), rgba(22,24,36,.72));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 18px 50px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 6px rgba(0,0,0,.25);
}
.glass::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(120deg, rgba(255,255,255,.16), transparent 34%);
  opacity:.5;
}

.dock{
  background:linear-gradient(135deg, rgba(40,42,60,.8), rgba(24,26,40,.72))!important;
  border:1px solid rgba(255,255,255,.2)!important;
  box-shadow:0 18px 50px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.4), inset 0 -2px 8px rgba(0,0,0,.3)!important;
}
.win, .pcard{
  box-shadow:0 40px 90px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 8px rgba(0,0,0,.25);
}
.menubar{box-shadow:inset 0 -1px 0 rgba(255,255,255,.06), inset 0 1px 0 rgba(255,255,255,.18);}

.nowplaying{
  position:fixed; right:18px; bottom:96px; z-index:850;
  width:300px; max-width:78vw; border-radius:18px; padding:13px;
  display:flex; gap:13px; align-items:center; overflow:hidden;
  transform:translateY(16px); opacity:0; transition:.5s var(--ease);
}
.nowplaying.show{transform:translateY(0); opacity:1;}

.np-bg{
  position:absolute; inset:-30%; z-index:0; background-size:cover; background-position:center;
  filter:blur(34px) saturate(1.5) brightness(.7); opacity:0; transition:opacity .6s ease; transform:scale(1.2);
}
.np-bg.on{opacity:.5;}
.np-art{
  position:relative; z-index:2;
  width:58px; height:58px; border-radius:13px; flex:0 0 58px; background-size:cover; background-position:center;
  background-color:rgba(255,255,255,.08); box-shadow:0 8px 20px rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
}
.np-art svg{width:26px; height:26px; opacity:.7;}
.np-info{position:relative; z-index:2; min-width:0; flex:1;}
.np-label{font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--acc2); font-weight:700; display:flex; align-items:center; gap:7px;}
.np-song{font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:3px;}
.np-artist{font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.np-prog{height:4px; border-radius:4px; background:rgba(255,255,255,.14); margin-top:9px; overflow:hidden;}
.np-prog-fill{height:100%; width:0; border-radius:4px; background:linear-gradient(90deg,var(--acc1),var(--acc2)); transition:width 1s linear;}

.np-eq{display:none; align-items:flex-end; gap:2px; height:11px;}
.np-eq.on{display:inline-flex;}
.np-eq span{width:3px; background:var(--acc2); border-radius:2px; height:4px; animation:eq .9s ease-in-out infinite;}
.np-eq span:nth-child(2){animation-delay:.2s;} .np-eq span:nth-child(3){animation-delay:.4s;} .np-eq span:nth-child(4){animation-delay:.1s;}
@keyframes eq{0%,100%{height:3px;}50%{height:11px;}}
@media (max-width:640px){ .nowplaying{right:10px; bottom:90px; width:230px;} }

.dotlive{width:7px; height:7px; border-radius:50%; background:#3fcf7a; box-shadow:0 0 8px #3fcf7a; display:inline-block; animation:livePulse 1.4s infinite;}
@keyframes livePulse{0%,100%{opacity:1;}50%{opacity:.35;}}
.nowplaying{cursor:pointer;}

.dock-icon .ico-img, .pcard-icon .ico-img, .win-icon .ico-img{
  width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block;
}
.dock-icon{overflow:hidden;}
.ico-contain{object-fit:contain!important; width:68%!important; height:68%!important; border-radius:0!important;}
.dock-label{z-index:1100;}
.pcard-icon, .win-icon{overflow:hidden;}

.gallery{position:relative; margin-top:20px; border-radius:13px; overflow:hidden; border:1px solid var(--line); background:#06070d; box-shadow:0 10px 26px rgba(0,0,0,.4);}
.gal-view{overflow:hidden;}
.gal-track{display:flex; transition:transform .38s var(--ease); will-change:transform;}
.gal-slide{flex:0 0 100%; aspect-ratio:16/9; background:#06070d;}
.gal-slide img{width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in;}
.gal-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(255,255,255,.2); background:rgba(10,11,18,.6); backdrop-filter:blur(8px);
  color:#fff; font-size:22px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:.18s; opacity:.85;
}
.gal-nav:hover{opacity:1; background:rgba(124,92,255,.55);}
.gal-nav.prev{left:10px;} .gal-nav.next{right:10px;}
.gal-dots{position:absolute; bottom:10px; left:0; right:0; display:flex; gap:6px; justify-content:center;}
.gal-dots span{width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.35); cursor:pointer; transition:.2s;}
.gal-dots span.on{background:#fff; width:18px; border-radius:4px;}

.lightbox{position:fixed; inset:0; z-index:6000; background:rgba(0,0,0,.82); backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .22s ease;}
.lightbox.show{opacity:1;} .lightbox.out{opacity:0;}
.lightbox img{max-width:88vw; max-height:84vh; border-radius:14px; box-shadow:0 40px 90px rgba(0,0,0,.7); transform:scale(.95); transition:transform .25s var(--ease);}
.lightbox.show img{transform:scale(1);}
.lb-x{position:fixed; top:22px; right:30px; color:#fff; font-size:26px; cursor:pointer; opacity:.8; z-index:2;}
.lb-x:hover{opacity:1;}
.lb-nav{position:fixed; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%;
  border:1px solid rgba(255,255,255,.22); background:rgba(20,21,32,.55); backdrop-filter:blur(8px);
  color:#fff; font-size:30px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.18s; opacity:.85;}
.lb-nav:hover{opacity:1; background:rgba(124,92,255,.55);}
.lb-prev{left:24px;} .lb-next{right:24px;}

.term{min-height:300px; max-height:54vh; overflow:auto; padding-right:6px;}
.term>div{white-space:pre-wrap; word-break:break-word; animation:termIn .18s ease;}
@keyframes termIn{from{opacity:0; transform:translateY(2px);}}
.term .pa{color:#7fd6ff;}
.term .tc{color:#fff;}
.term .to{color:#bdf5cf; opacity:.92;}
.term .dim{color:#5b6b5f;}
.term::-webkit-scrollbar{width:7px;}
.term::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12); border-radius:8px;}

.dock-icon, .dock-item, button, .gal-nav, .lb-nav, .pcard, .win{outline:none;}
.dock-icon:focus, button:focus, .dock-item:focus{outline:none;}

.workspace{min-height:100vh; padding:96px 6vw 150px; display:flex; flex-direction:column; position:relative;}
.ws-head{text-align:center; margin-bottom:48px;}
.ws-kicker{font-size:11px; letter-spacing:3px; color:var(--acc2); font-weight:800;}
.ws-head h2{font-size:clamp(30px,4.5vw,52px); font-weight:850; letter-spacing:-1.2px; margin-top:10px;}
.ws-head p{color:var(--muted); margin-top:10px; font-size:14px;}
.desk-icons{display:flex; flex-wrap:wrap; gap:30px; justify-content:center; align-content:flex-start; perspective:1000px;}
.desk-icon{
  width:150px; display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:16px 10px; border-radius:18px; cursor:pointer; transition:.18s var(--ease); user-select:none; position:relative;
}
.desk-icon:hover{background:rgba(255,255,255,.05);}
.desk-icon.sel{background:rgba(124,92,255,.22); outline:1px solid rgba(124,92,255,.55);}
.di-tile{
  width:118px; height:118px; border-radius:28px; display:flex; align-items:center; justify-content:center;
  overflow:hidden; position:relative;
  box-shadow:0 22px 44px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.3); transition:transform .3s var(--ease), box-shadow .3s;
}

.di-tile::after{content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,255,255,.28), transparent 45%); opacity:.6; pointer-events:none;}
.desk-icon:hover .di-tile{transform:translateY(-8px) scale(1.06) rotateX(8deg); box-shadow:0 34px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.4);}
.di-tile svg{width:62px; height:62px; position:relative; z-index:1;}
.di-tile .ico-img{width:100%; height:100%; object-fit:cover;}

.di-reflect{display:none;}
.di-label{font-size:15px; font-weight:600; color:#eef0f7; text-align:center; text-shadow:0 1px 5px rgba(0,0,0,.85); line-height:1.2; word-break:break-word;}
.di-sub{font-size:11px; color:var(--muted); margin-top:-8px;}

.mb-cc, .mb-ico{cursor:pointer; padding:1px 3px; border-radius:6px; transition:.15s;}
.mb-cc:hover, .mb-ico:hover{background:rgba(255,255,255,.14);}
.cc{
  position:fixed; top:38px; right:14px; z-index:1200; width:332px; max-width:92vw; padding:14px; border-radius:26px;
  background:linear-gradient(135deg, rgba(36,38,54,.96), rgba(22,24,36,.93));
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 30px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 8px rgba(0,0,0,.25);
  opacity:0; transform:translateY(-12px) scale(.96); transform-origin:top right; pointer-events:none; transition:.28s var(--ease);
}
.cc.open{opacity:1; transform:none; pointer-events:auto;}
.cc-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.cc .cc-tile{border-radius:18px; padding:14px;}
.cc-wide{display:flex; align-items:center; gap:11px; cursor:pointer;}
.cc-card{display:flex; align-items:center; justify-content:center;}
.cc-slider{grid-column:1 / -1; display:flex; flex-direction:column; gap:11px; padding:15px 16px;}
.cc-ico{width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.13); color:#fff; flex:0 0 38px; transition:.2s;}
.cc-tile.active .cc-ico, .cc-ico.active{background:linear-gradient(135deg,var(--acc1),var(--acc2)); box-shadow:0 4px 14px rgba(124,92,255,.5);}
.cc-tt b{display:block; font-size:13px; color:#fff;} .cc-tt span{font-size:11px; color:var(--muted);}
.cc-mini{display:flex; gap:14px;}
.cc-ico.round{cursor:pointer;}
.cc-lbl{font-size:12px; color:var(--muted); font-weight:600;}
.cc-track{position:relative; height:30px; border-radius:16px; background:rgba(255,255,255,.15); cursor:pointer;}
.cc-fill{position:absolute; left:0; top:0; bottom:0; border-radius:16px; background:linear-gradient(90deg,#fff,#e7ddff); width:70%;}
.cc-knob{position:absolute; top:50%; left:70%; width:24px; height:24px; border-radius:50%; background:#fff; transform:translate(-50%,-50%); box-shadow:0 2px 8px rgba(0,0,0,.45); pointer-events:none;}

.screen-dim{position:fixed; inset:0; background:#000; opacity:0; z-index:4000; pointer-events:none; transition:opacity .12s linear;}

.as-body{padding:0!important;}
.appstore{color:var(--text);}

.as-hero{position:relative; overflow:hidden; padding:30px 30px 34px;}
.as-hero::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(10,11,20,.55)); pointer-events:none;}
.as-mesh{position:absolute; inset:-40%; pointer-events:none; opacity:.6;
  background:
    radial-gradient(40% 50% at 20% 20%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(40% 50% at 85% 15%, rgba(255,255,255,.25), transparent 55%),
    radial-gradient(50% 60% at 70% 90%, rgba(0,0,0,.4), transparent 60%);
  filter:blur(10px); animation:meshMove 14s ease-in-out infinite alternate;}
@keyframes meshMove{to{transform:translate(6%, 4%) rotate(8deg);}}
.as-hero-inner{position:relative; z-index:1; display:flex; align-items:center; gap:22px;}
.as-icon{width:104px; height:104px; border-radius:26px; flex:0 0 104px; display:flex; align-items:center; justify-content:center; overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.4);}
.as-icon svg{width:54px; height:54px;}
.as-icon .ico-img{width:100%; height:100%; object-fit:cover;}
.as-titles h2{font-size:30px; font-weight:850; letter-spacing:-.5px; line-height:1.05; text-shadow:0 2px 14px rgba(0,0,0,.35);}
.as-tag{margin-top:7px; font-size:13.5px; color:rgba(255,255,255,.85); font-weight:600;}
.as-cta{display:flex; align-items:center; gap:14px; margin-top:16px;}
.as-get{border:none; cursor:pointer; font-family:inherit; font-size:14px; font-weight:800; letter-spacing:.4px;
  color:#16121f; background:#fff; padding:9px 28px; border-radius:30px; text-decoration:none;
  box-shadow:0 8px 22px rgba(0,0,0,.3); transition:.18s var(--ease);}
.as-get:hover{transform:translateY(-2px) scale(1.04);}
.as-year{font-size:12.5px; color:rgba(255,255,255,.75); font-weight:600;}

.as-meta{display:flex; align-items:center; justify-content:space-around; padding:16px 18px; border-bottom:1px solid rgba(255,255,255,.07);}
.as-mcol{text-align:center;}
.as-mcol b{display:block; font-size:16px; font-weight:800; color:#fff;}
.as-mcol span{font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:var(--muted);}
.as-mdiv{width:1px; height:30px; background:rgba(255,255,255,.1);}

.as-shots-wrap{padding:22px 0 6px;}
.as-shots{display:flex; gap:16px; overflow-x:auto; padding:0 26px 16px; scroll-snap-type:x mandatory; scrollbar-width:thin;}
.as-shots::-webkit-scrollbar{height:8px;}
.as-shots::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14); border-radius:8px;}
.as-shot{flex:0 0 auto; width:74%; max-width:560px; aspect-ratio:16/9; border-radius:16px; overflow:hidden;
  scroll-snap-align:center; cursor:zoom-in; border:1px solid var(--line); background:#06070d;
  box-shadow:0 16px 40px rgba(0,0,0,.5); transition:transform .25s var(--ease);}
.as-shot:hover{transform:translateY(-4px);}
.as-shot img{width:100%; height:100%; object-fit:cover; display:block;}

.as-sec{padding:22px 30px; border-top:1px solid rgba(255,255,255,.06);}
.as-sec h3{font-size:18px; font-weight:800; margin-bottom:12px;}
.as-sec p{color:#c7cbdb; line-height:1.7; font-size:14.5px;}
.as-feats{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.as-feat{display:flex; align-items:flex-start; gap:11px; padding:14px; border-radius:14px;
  background:rgba(255,255,255,.04); border:1px solid var(--line); font-size:13.5px; color:#dfe2ee; line-height:1.45;}
.as-fi{flex:0 0 28px; width:28px; height:28px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--acc1),var(--acc2)); color:#fff; font-size:14px; box-shadow:0 4px 12px rgba(124,92,255,.45);}
@media (max-width:620px){ .as-feats{grid-template-columns:1fr;} .as-shot{width:86%;} }

.aurora{position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;}
.aurora span{position:absolute; border-radius:50%; filter:blur(48px); opacity:.38; will-change:transform; transform:translateZ(0);}
.aurora .a1{width:40vw; height:40vw; background:var(--au1); left:-8vw; top:-10vw; animation:au1 26s ease-in-out infinite;}
.aurora .a2{width:38vw; height:38vw; background:var(--au2); right:-10vw; top:-4vw; animation:au2 30s ease-in-out infinite;}
.aurora .a3{width:36vw; height:36vw; background:var(--au3); left:20vw; bottom:-14vw; animation:au3 34s ease-in-out infinite;}
.aurora .a4{display:none;}
@keyframes au1{0%,100%{transform:translate3d(0,0,0);}50%{transform:translate3d(6vw,4vw,0);}}
@keyframes au2{0%,100%{transform:translate3d(0,0,0);}50%{transform:translate3d(-5vw,6vw,0);}}
@keyframes au3{0%,100%{transform:translate3d(0,0,0);}50%{transform:translate3d(4vw,-5vw,0);}}

.grid-floor{display:none;}

.reveal{opacity:0; transform:translateY(34px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.in{opacity:1; transform:none;}

.spot{position:fixed; inset:0; z-index:3000; display:flex; align-items:flex-start; justify-content:center;
  padding-top:18vh; background:rgba(5,6,12,.6); opacity:0; pointer-events:none; transition:opacity .2s ease;}
.spot.open{opacity:1; pointer-events:auto;}
.spot-box{width:min(640px,92vw); border-radius:22px; padding:8px; transform:translateY(-16px) scale(.97); transition:.26s var(--ease);}
.spot.open .spot-box{transform:none;}
.spot-input-row{display:flex; align-items:center; gap:12px; padding:12px 16px;}
.spot-mag{color:var(--muted); flex:0 0 22px;}
#spotInput{flex:1; background:none; border:none; outline:none; color:#fff; font-family:inherit; font-size:19px;}
#spotInput::placeholder{color:#7a8094;}
.spot-esc{font-size:11px; color:var(--muted); border:1px solid var(--line2); border-radius:6px; padding:3px 8px;}
.spot-results{max-height:46vh; overflow:auto; padding:6px; display:flex; flex-direction:column; gap:4px;}
.spot-results:empty{display:none;}
.spot-item{display:flex; align-items:center; gap:13px; padding:10px 12px; border-radius:12px; cursor:pointer; transition:.12s;}
.spot-item.active, .spot-item:hover{background:linear-gradient(120deg, rgba(124,92,255,.3), rgba(124,92,255,.12));}
.spot-ic{width:40px; height:40px; border-radius:11px; flex:0 0 40px; display:flex; align-items:center; justify-content:center; overflow:hidden; box-shadow:0 6px 16px rgba(0,0,0,.4);}
.spot-ic svg{width:22px; height:22px;} .spot-ic .ico-img{width:100%; height:100%; object-fit:cover;}
.spot-tt b{display:block; font-size:14.5px; color:#fff;} .spot-tt span{font-size:12px; color:var(--muted);}
.spot-kind{margin-left:auto; font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:var(--muted);}

.cc-walls{grid-column:1 / -1; display:flex; flex-direction:column; gap:11px; padding:15px 16px;}
.cc-swatches{display:flex; gap:10px; flex-wrap:wrap;}
.cc-sw{width:44px; height:44px; border-radius:13px; cursor:pointer; border:2px solid transparent; transition:.18s var(--ease); box-shadow:0 4px 12px rgba(0,0,0,.4);}
.cc-sw:hover{transform:translateY(-2px) scale(1.06);}
.cc-sw.active{border-color:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.25);}

.widgets{display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-bottom:46px;}
.widget{border-radius:22px; padding:20px 24px; min-width:200px;}
.w-clock{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;}
.wc-time{font-size:46px; font-weight:800; letter-spacing:-1px; font-variant-numeric:tabular-nums; line-height:1; background:linear-gradient(120deg,#fff,#cdbcff); -webkit-background-clip:text; background-clip:text; color:transparent;}
.wc-date{font-size:13px; color:var(--muted); margin-top:8px; text-transform:capitalize;}
.w-weather{display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; gap:2px 16px; align-items:center;}
.ww-ico{font-size:42px; grid-row:1 / 3; width:46px; height:46px; display:flex; align-items:center; justify-content:center;}
.ww-ico svg{width:46px; height:46px; display:block;}
.ww-temp{font-size:30px; font-weight:800; line-height:1;}
.ww-city{font-size:12.5px; color:var(--muted);}
.ww-cond{grid-column:1 / -1; font-size:12.5px; color:#c7cbdb; margin-top:6px;}

.win.minimizing{transform-origin:bottom center; animation:genieMin .62s cubic-bezier(.45,.02,.25,1) forwards; filter:url(#genieWarp) blur(.4px);}
@keyframes genieMin{
  0%{clip-path:inset(0 0 0 0 round 14px);}
  28%{transform:translate(calc(var(--gx)*.35), calc(var(--gy)*.22)) scale(.8); clip-path:inset(0 10% 0 10% round 28px);}
  100%{transform:translate(var(--gx), var(--gy)) scaleX(.1) scaleY(.03); clip-path:inset(0 46% 0 46% round 90px); opacity:0;}
}
.win.minimized{display:none;}
.win.restoring{transform-origin:bottom center; animation:genieRes .56s cubic-bezier(.3,.7,.2,1); filter:url(#genieWarp);}
@keyframes genieRes{
  0%{transform:translate(var(--gx), var(--gy)) scaleX(.1) scaleY(.03); clip-path:inset(0 46% 0 46% round 90px); opacity:0;}
  100%{transform:translate(0,0) scale(1); clip-path:inset(0 0 0 0 round 14px); opacity:1;}
}

.w-dev{min-width:260px; display:flex; flex-direction:column;}
.wd-head{display:flex; align-items:center; gap:8px; font-size:11px; font-weight:800; color:var(--acc2); text-transform:uppercase; letter-spacing:1.5px; margin-bottom:14px;}
.wd-dot{width:8px; height:8px; border-radius:50%; background:#3fcf7a; box-shadow:0 0 8px #3fcf7a; animation:livePulse 1.4s infinite;}
.wd-row{margin-bottom:12px;}
.wd-row:last-child{margin-bottom:0;}
.wd-top{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:5px;}
.wd-top b{font-size:13.5px; font-weight:700; color:#fff;}
.wd-top span{color:var(--muted); font-size:11px;}
.wd-pct{color:var(--acc2)!important; font-weight:700; font-variant-numeric:tabular-nums;}
.wd-bar{height:6px; border-radius:6px; background:rgba(255,255,255,.12); overflow:hidden;}
.wd-fill{height:100%; border-radius:6px; background:linear-gradient(90deg,var(--acc1),var(--acc2)); width:0; transition:width 1.1s var(--ease);}

.widget{cursor:grab;}
.widgets{min-height:150px;}
.desk-icons{min-height:170px;}
.widget.dragging, .desk-icon.dragging{cursor:grabbing;}
.abs-pos{position:absolute!important; margin:0!important; z-index:6;}
.abs-pos.dragging{z-index:50;}
.desk-icon{touch-action:none;}
.widget{touch-action:none;}

@media (prefers-reduced-motion: reduce){
  .aurora span{animation:none!important;}
  .reveal{transition:opacity .3s ease!important; transform:none!important;}
}

.aurora{contain:layout style paint;}
.dock-icon{backface-visibility:hidden;}

.dv-hero{padding:26px 30px 28px; position:relative;}
.dv-badge{display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:#3a1d00; background:rgba(255,255,255,.55); padding:5px 12px; border-radius:30px;}
.dv-hero h2{font-size:30px; font-weight:850; margin-top:14px; color:#1c1206;}
.dv-prog{height:10px; border-radius:10px; background:rgba(0,0,0,.25); overflow:hidden; margin-top:16px;}
.dv-prog-fill{height:100%; border-radius:10px; background:#fff; box-shadow:0 0 12px rgba(255,255,255,.6); transition:width 1s var(--ease);}
.dv-pct{margin-top:8px; font-size:13px; font-weight:700; color:#2a1a06;}
.feat.doing li::before{background:#ffb347; box-shadow:0 0 8px #ffb347;}

.vsc{display:flex; height:min(540px,72vh); background:#1e1e1e; font-family:'SF Mono',ui-monospace,Consolas,monospace;}
.vsc-side{width:48px; background:#2c2c2c; display:flex; flex-direction:column; align-items:center; gap:20px; padding:14px 0;}
.vsc-si{width:24px; height:24px; color:#858585; cursor:pointer; transition:.15s;}
.vsc-si:hover{color:#cfcfcf;}
.vsc-si.active{color:#fff;}
.vsc-main{flex:1; display:flex; flex-direction:column; min-width:0;}
.vsc-tabs{height:36px; background:#252526; display:flex; align-items:stretch;}
.vsc-tab{display:flex; align-items:center; gap:8px; padding:0 16px; background:#1e1e1e; color:#d4d4d4; font-size:12.5px; border-right:1px solid #2c2c2c; border-top:1.5px solid #0a73c2;}
.vsc-tdot{width:8px; height:8px; border-radius:50%; background:#e8c07d;}
.vsc-wrap{flex:1; display:flex; overflow:hidden; min-height:0;}
.vsc-gutter{width:52px; background:#1e1e1e; overflow:hidden; flex:0 0 52px;}
.vsc-nums{color:#6e7681; font-size:13px; line-height:1.6; text-align:right; padding:14px 10px 14px 0; white-space:pre; will-change:transform;}
.vsc-code{position:relative; flex:1; overflow:hidden;}
.vsc-hl, .vsc-code textarea{
  margin:0; padding:14px 16px; font-family:inherit; font-size:13px; line-height:1.6;
  white-space:pre; tab-size:2; -moz-tab-size:2; letter-spacing:0;
}
.vsc-hl{position:absolute; inset:0; color:#d4d4d4; pointer-events:none; will-change:transform; overflow:visible;}
.vsc-code textarea{position:absolute; inset:0; width:100%; height:100%; background:transparent; color:transparent; caret-color:#fff; border:0; outline:0; resize:none; overflow:auto; white-space:pre;}
.vsc-status{height:24px; background:#0a73c2; color:#fff; font-size:11px; display:flex; align-items:center; gap:16px; padding:0 14px;}
.vsc-status span:last-child{margin-left:auto; opacity:.85;}
.t-cm{color:#6a9955;} .t-str{color:#ce9178;} .t-kw{color:#569cd6;} .t-lit{color:#569cd6;} .t-num{color:#b5cea8;} .t-fn{color:#dcdcaa;}

.demo-body{padding:0!important;}
.dm{padding:22px; color:var(--text);}
.dm-head{display:flex; align-items:center; gap:14px; margin-bottom:18px;}
.dm-ic{width:52px; height:52px; border-radius:14px; overflow:hidden; background:#0e1018; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(0,0,0,.4);}
.dm-ht b{display:block; font-size:18px;} .dm-ht span{font-size:12.5px; color:var(--muted);}

.dm-mbind .dm-body{display:flex; gap:16px;}
.dm-reports{flex:1; min-height:240px; background:rgba(0,0,0,.25); border:1px solid var(--line); border-radius:14px; padding:14px; display:flex; flex-direction:column; gap:10px;}
.dm-empty{color:var(--muted); font-size:13px; margin:auto; text-align:center;}
.dm-side{width:170px; display:flex; flex-direction:column; gap:12px;}
.dm-btn, .vp-btn, .ac-btn{cursor:pointer; border:none; font-family:inherit; font-weight:700; color:#fff; background:linear-gradient(120deg,var(--acc1),var(--acc2)); padding:12px 16px; border-radius:12px; font-size:14px; transition:.18s var(--ease);}
.dm-btn:hover, .vp-btn:hover, .ac-btn:hover{transform:translateY(-2px); filter:brightness(1.1);}
.dm-stat{background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:12px; padding:12px; text-align:center; font-size:12px; color:var(--muted);}
.dm-stat b{font-size:26px; color:#fff;}
.dm-status{font-size:12.5px; color:var(--acc2); text-align:center; font-weight:600;}
.mb-report{background:rgba(255,255,255,.05); border:1px solid var(--line2); border-radius:12px; padding:12px 14px; animation:termIn .25s ease;}
.mb-report.done{border-color:#2fae5e; background:rgba(47,174,94,.12);}
.mb-r-top{display:flex; justify-content:space-between; align-items:baseline; font-size:14px;}
.mb-r-top span{color:var(--muted); font-size:11px;}
.mb-r-text{color:#cdd2da; font-size:13px; margin:7px 0 11px;}
.mb-r-act{display:flex; gap:8px;}
.mb-yes, .mb-no{cursor:pointer; border:none; font-family:inherit; font-weight:700; font-size:12.5px; padding:8px 12px; border-radius:9px; color:#fff;}
.mb-yes{background:linear-gradient(135deg,#2fae5e,#3fcf7a);} .mb-no{background:linear-gradient(135deg,#c0392b,#e05545);}
.mb-reply{color:#9be8b6; font-size:12.5px;}

.dm-vpn{display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:26px 22px;}
.vp-shield{width:96px; height:96px; color:#7a8294; transition:.3s;}
.vp-shield #vpCheck{stroke-dasharray:14; stroke-dashoffset:14; transition:stroke-dashoffset .4s;}
.vp-shield.connecting{color:var(--acc2); animation:livePulse 1s infinite;}
.vp-shield.on{color:#3fcf7a;} .vp-shield.on #vpCheck{stroke-dashoffset:0;}
.vp-state{font-size:22px; font-weight:800;}
.vp-ip{font-size:12.5px; color:var(--muted);}
.vp-row{display:flex; gap:10px; align-items:center; width:100%; max-width:320px;}
.vp-flag{font-size:22px;}
#vpServer{flex:1; background:rgba(255,255,255,.06); color:#fff; border:1px solid var(--line2); border-radius:10px; padding:10px; font-family:inherit; font-size:13px;}
.vp-btn{width:100%; max-width:320px;}
.vp-meta{display:flex; gap:24px; margin-top:6px;}
.vp-meta span{display:block; font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:var(--muted);}
.vp-meta b{font-size:16px;}

.dm-ac{padding:22px; display:flex; flex-direction:column; gap:14px;}
.ac-games{display:flex; gap:10px;}
.ac-game{flex:1; cursor:pointer; background:rgba(255,255,255,.05); border:1px solid var(--line2); color:#cdd2da; padding:11px; border-radius:11px; font-family:inherit; font-weight:700; font-size:13px; transition:.15s;}
.ac-game.active{background:linear-gradient(120deg,var(--acc1),var(--acc2)); color:#fff; border-color:transparent;}
.ac-bar{height:8px; border-radius:8px; background:rgba(255,255,255,.1); overflow:hidden;}
.ac-fill{height:100%; width:0; border-radius:8px; background:linear-gradient(90deg,var(--acc1),var(--acc2)); transition:width .5s var(--ease);}
.ac-log{min-height:150px; background:#0b0c14; border:1px solid var(--line); border-radius:12px; padding:12px; font-family:'SF Mono',Consolas,monospace; font-size:12.5px; overflow:auto; max-height:200px;}
.ac-line{color:#8a93a6; padding:2px 0; transition:.2s;}
.ac-line.ok{color:#bdf5cf;} .ac-line.ok::before{content:'✓ '; color:#3fcf7a;}
.ac-result{text-align:center; min-height:22px;}
.ac-ok{color:#3fcf7a; font-weight:800; font-size:15px;}

.mbui{--mb-acc:#7c5cff; background:#13101c; color:#e9eaf2; font-size:13px;}
.mb-bar{display:flex; align-items:center; justify-content:space-between; padding:12px 18px; background:rgba(255,255,255,.03); border-bottom:1px solid rgba(255,255,255,.06);}
.mb-logo{display:flex; align-items:center; gap:9px; font-weight:800; font-size:15px;}
.mb-logo img{width:24px; height:24px; border-radius:6px;}
.mb-acts{display:flex; align-items:center; gap:10px; color:#9aa0b4;}
.mb-ver{font-size:11px; color:var(--mb-acc); font-weight:700; background:color-mix(in srgb,var(--mb-acc) 16%,transparent); padding:3px 9px; border-radius:20px;}
.mb-ic{cursor:pointer; opacity:.7; font-size:15px;}
.mb-ic:hover{opacity:1;}
.mb-head{padding:16px 18px 0;}
.mb-head h3{font-size:22px; font-weight:800; margin-bottom:12px;}
.mb-pills{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:16px;}
.mb-pill{cursor:pointer; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04); color:#cdd2da; padding:7px 13px; border-radius:20px; font-family:inherit; font-size:12.5px; transition:.15s;}
.mb-pill:hover{border-color:rgba(255,255,255,.25);}
.mb-pill.active{background:linear-gradient(120deg,var(--mb-acc),color-mix(in srgb,var(--mb-acc) 55%,#fff)); color:#fff; border-color:transparent;}
.mb-board{padding:0 18px 20px; min-height:230px;}
.mb-page{display:none; animation:termIn .2s ease;}
.mb-page.active{display:block;}
.mb-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.mb-stat{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:16px;}
.mb-scap{font-size:12px; color:#9aa0b4;}
.mb-sval{font-size:30px; font-weight:850; color:var(--mb-acc); margin-top:4px;}
.mb-card{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:16px;}
.mb-card.center{text-align:center;}
.mb-ch{font-size:14px; font-weight:700; margin-bottom:12px;}
.mb-row{display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.05);}
.mb-row:last-child{border-bottom:none;}
.mb-row>span:first-child{flex:1;}
.mb-keys{font-family:'SF Mono',Consolas,monospace; font-size:11.5px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:7px; padding:3px 9px; color:#fff; flex:0 0 auto!important;}
.mb-sw{flex:0 0 auto; width:40px; height:22px; border-radius:20px; background:rgba(255,255,255,.15); position:relative; cursor:pointer; transition:.2s;}
.mb-sw::after{content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; transition:.2s var(--ease);}
.mb-sw.on{background:var(--mb-acc);} .mb-sw.on::after{left:20px;}
.mb-trg{font-family:'SF Mono',Consolas,monospace; color:var(--mb-acc); font-weight:700; flex:0 0 auto!important;}
.mb-arr{color:#6a7088; flex:0 0 auto!important;}
.mb-trv{color:#cdd2da;}
.mb-mini{display:inline-flex; gap:6px; margin-bottom:14px;}
.mb-mt{cursor:pointer; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04); color:#cdd2da; padding:5px 14px; border-radius:16px; font-family:inherit; font-size:12px;}
.mb-mt.active{background:var(--mb-acc); color:#fff; border-color:transparent;}
.mb-big{font-size:64px; font-weight:850; color:var(--mb-acc); line-height:1; margin:6px 0 16px;}
.mb-grid2{display:flex; gap:10px; justify-content:center;}
.mb-btn{cursor:pointer; border:none; font-family:inherit; font-weight:700; color:#fff; background:linear-gradient(120deg,var(--mb-acc),color-mix(in srgb,var(--mb-acc) 55%,#fff)); padding:10px 22px; border-radius:11px; font-size:14px; transition:.15s;}
.mb-btn:hover{filter:brightness(1.1); transform:translateY(-1px);}
.mb-btn.soft{background:rgba(255,255,255,.1);}
.mb-btn.full{width:100%; margin-top:14px;}
.mb-cb{flex:0 0 auto; width:20px; height:20px; border-radius:6px; border:2px solid rgba(255,255,255,.25); cursor:pointer; position:relative; transition:.15s;}
.mb-cb.on{background:var(--mb-acc); border-color:var(--mb-acc);}
.mb-cb.on::after{content:'✓'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; font-weight:800;}
.mb-row.chk>span:last-child{flex:1; font-size:13px;}
.mb-themes{display:flex; gap:10px; margin-bottom:8px;}
.mb-th{width:34px; height:34px; border-radius:10px; cursor:pointer; border:2px solid transparent; transition:.15s;}
.mb-th:hover{transform:translateY(-2px);}
.mb-th.active{border-color:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.2);}

.tg{background:#0e1621; min-height:480px; display:flex; flex-direction:column;}
.tg-head{display:flex; align-items:center; gap:12px; padding:12px 16px; background:#17212b; border-bottom:1px solid rgba(255,255,255,.05);}
.tg-ava{width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,#23c4c4,#137a86); display:flex; align-items:center; justify-content:center; font-size:22px;}
.tg-hi b{display:block; color:#fff; font-size:15px;} .tg-hi span{color:#6d8197; font-size:12px;}
.tg-body{flex:1; padding:18px;}
.tg-msg{max-width:92%;}
.tg-bub{background:#182533; color:#e8eef5; padding:12px 14px; border-radius:14px 14px 14px 4px; font-size:13.5px; line-height:1.55;}
.tg-bub code{background:rgba(255,255,255,.08); padding:1px 6px; border-radius:5px; font-size:12px;}
.tg-kb{display:flex; flex-direction:column; gap:6px; margin-top:8px;}
.tg-btn{cursor:pointer; background:#2b5278; color:#fff; border:none; border-radius:9px; padding:11px; font-family:inherit; font-size:13px; transition:.15s;}
.tg-btn:hover{background:#3a6699; transform:translateY(-1px);}

.wpc{display:flex; height:min(560px,74vh); background:#0b0f17; color:#cdd5e0; font-size:13px;}
.wpc-side{width:206px; background:#0f141f; border-right:1px solid rgba(255,255,255,.06); display:flex; flex-direction:column; padding:14px 10px;}
.wpc-brand{display:flex; align-items:center; gap:9px; font-weight:800; color:#fff; font-size:14px; padding:6px 8px 14px;}
.wpc-logo{width:26px; height:26px; border-radius:7px; background:linear-gradient(135deg,#2a2d3a,#101218); display:flex; align-items:center; justify-content:center; color:#ff3b4d; font-weight:900;}
.wpc-nav{flex:1; display:flex; flex-direction:column; gap:2px; overflow:auto;}
.wpc-item{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px; border:none; background:none; color:#8a94a6; cursor:pointer; font-family:inherit; font-size:12.5px; text-align:left; transition:.13s;}
.wpc-item svg{width:17px; height:17px; flex:0 0 17px;}
.wpc-item:hover{background:rgba(255,255,255,.04); color:#cdd5e0;}
.wpc-item.active{background:linear-gradient(135deg,#5b6cff,#3a45c0); color:#fff;}
.wpc-user{display:flex; align-items:center; gap:9px; padding:10px 8px; border-top:1px solid rgba(255,255,255,.06); margin-top:8px;}
.wpc-uava{width:30px; height:30px; border-radius:50%; background:#5b6cff; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700;}
.wpc-user b{display:block; color:#fff; font-size:12.5px;} .wpc-user span{font-size:11px; color:#7a8497;}
.wpc-main{flex:1; display:flex; flex-direction:column; min-width:0;}
.wpc-top{display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-bottom:1px solid rgba(255,255,255,.06);}
.wpc-top h3{font-size:18px; font-weight:800; color:#fff;}
.wpc-tr{display:flex; gap:10px; align-items:center;}
.wpc-lang{font-size:11px; background:rgba(255,255,255,.07); padding:3px 9px; border-radius:6px;}
.wpc-badge{font-size:11px; color:#3fcf7a;}
.wpc-page{flex:1; overflow:auto; padding:18px 20px; display:flex; flex-direction:column; gap:14px;}
.wpc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
.wpc-stat{background:#121826; border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:14px;}
.wpc-stat span{font-size:11px; color:#8a94a6;} .wpc-stat b{display:block; font-size:24px; color:#fff; margin-top:4px;}
.wpc-stat b.ok{color:#3fcf7a;} .wpc-stat b.bad{color:#ff5f57;}
.wpc-card{background:#121826; border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:16px;}
.wpc-ch{font-size:14px; font-weight:700; color:#fff; margin-bottom:12px;}
.wpc-rows{display:flex; flex-direction:column;}
.wpc-ir{display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.05); font-size:13px;}
.wpc-ir:last-child{border:none;} .wpc-ir b{color:#fff;} .wpc-ir b.ok{color:#3fcf7a;} .wpc-ir b.bad{color:#ff5f57;}
.wpc-tools{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.wpc-tool{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); color:#cdd5e0; border-radius:9px; padding:11px; font-family:inherit; cursor:pointer; font-size:12.5px;}
.wpc-tool:hover{border-color:#5b6cff;}
.wpc-p{color:#aeb6c4; line-height:1.6; font-size:13px; margin-bottom:12px;}
@media (max-width:760px){ .wpc-grid{grid-template-columns:1fr 1fr;} .wpc-side{width:64px;} .wpc-item span,.wpc-brand span,.wpc-user div{display:none;} }

.c-link{color:var(--acc2); text-decoration:none;}
.c-link:hover{text-decoration:underline;}