:root{
  --brand-1:#7e14ff;
  --brand-2:#1f9dff;
  --live:#12b981;
  --live-soft:#2bf29b;

  --ink:#16131f;          
  --dim:#605d6e;          
  --ground:#f9f8fc;       
  --surface:#ffffff;
  --hairline:#e4e1ee;
  --grid:#dcd8e9;

  
  --night:#0a0812;
  --night-2:#120e1f;
  --night-ink:#f5f3fb;
  --night-dim:#a49fb8;
  --night-hair:#2a2340;

  --link-direct:#60a5fa;
  --link-relay:#34d399;
  --link-pending:#f472b6;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{
  background:var(--ground);
  color:var(--ink);
  font-family:"Pretendard Variable","Pretendard",-apple-system,BlinkMacSystemFont,
    "Apple SD Gothic Neo","Malgun Gothic","맑은 고딕","Segoe UI",system-ui,sans-serif;
  word-break:keep-all; line-break:strict; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
ul{list-style:none}

.wrap{width:100%;max-width:70rem;margin-inline:auto;padding-inline:1.5rem}

.display{font-weight:800;letter-spacing:-.038em;line-height:1.12;text-wrap:balance}
.h1{font-size:clamp(2.6rem,5.6vw,4.15rem)}
.h2{font-size:clamp(1.85rem,3.1vw,2.55rem)}
.h3{font-size:1.075rem;font-weight:750;letter-spacing:-.02em}
.lede{color:var(--dim);font-size:1.0625rem;line-height:1.78;max-width:36rem}
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.7rem;font-weight:800;letter-spacing:.16em;color:var(--dim);
}
.eyebrow::before{content:"";width:.4rem;height:.4rem;border-radius:999px;background:var(--brand-1)}
.brand-text{
  background:linear-gradient(96deg,var(--brand-1),var(--brand-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.live-dot{position:relative;display:inline-block;width:.5rem;height:.5rem;border-radius:999px;background:var(--live-soft);flex:none}
.live-dot::after{content:"";position:absolute;inset:-.28rem;border-radius:999px;border:1.5px solid var(--live-soft);opacity:.45;animation:ring 2.6s cubic-bezier(.4,0,.6,1) infinite}
@keyframes ring{0%{transform:scale(.7);opacity:.6}70%,100%{transform:scale(1.35);opacity:0}}

.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border-radius:.875rem;padding:.95rem 1.7rem;font-weight:750;font-size:.98rem;color:#fff;
  background:linear-gradient(135deg,var(--brand-1),var(--brand-2));
  box-shadow:0 10px 30px -12px var(--brand-1);
  transition:transform .16s ease,box-shadow .16s ease;
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 18px 40px -14px var(--brand-1)}
.btn-ghost{
  display:inline-flex;align-items:center;gap:.4rem;border-radius:.875rem;
  padding:.95rem 1.35rem;font-weight:650;font-size:.98rem;
  border:1px solid var(--hairline);color:var(--ink);transition:background .16s ease;
}
.btn-ghost:hover{background:rgba(220,216,233,.35)}

header{
  position:sticky;top:0;z-index:60;
  background:rgba(10,8,18,.72);backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid rgba(255,255,255,.07);
  transition:background .25s ease,border-color .25s ease;
}
header.past{
  background:rgba(249,248,252,.82);
  border-bottom-color:var(--hairline);
}
.nav{display:flex;align-items:center;gap:1.6rem;height:4.15rem}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.075rem;letter-spacing:-.02em;color:#fff}
header.past .brand{color:var(--ink)}
.brand .il{color:var(--brand-2)}
header.past .brand .il{background:linear-gradient(96deg,var(--brand-1),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.navlinks{display:flex;gap:1.45rem;margin-left:auto;font-size:.92rem;font-weight:600;color:rgba(255,255,255,.72)}
header.past .navlinks{color:var(--dim)}
.navlinks a:hover{color:#fff}
header.past .navlinks a:hover{color:var(--ink)}
.navcta{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.55rem 1.1rem;border-radius:.7rem;font-size:.88rem;font-weight:750;color:#fff;
  background:linear-gradient(135deg,var(--brand-1),var(--brand-2));
}
@media(max-width:860px){.navlinks{display:none}}
.navlang{
  margin-left:auto;padding:.3rem .58rem;border-radius:.5rem;
  border:1px solid rgba(255,255,255,.28);
  font-size:.78rem;font-weight:700;color:rgba(255,255,255,.82);white-space:nowrap
}
.navlang:hover{color:#fff;border-color:rgba(255,255,255,.5)}
header.past .navlang{border-color:var(--hairline);color:var(--dim)}
header.past .navlang:hover{color:var(--ink)}

#promo{
  display:flex;align-items:center;gap:.75rem;position:relative;z-index:70;
  padding:.5rem 2.6rem .5rem 1rem;
  background:linear-gradient(96deg,var(--brand-1),var(--brand-2));
  color:#fff;font-size:.85rem;font-weight:600;
}
#promo[hidden]{display:none}
.promo-msg{display:inline-flex;align-items:center;gap:.55rem;margin-inline:auto;color:#fff;line-height:1.45}
.promo-msg strong{font-weight:800}
.promo-dot{width:.5rem;height:.5rem;border-radius:50%;background:#2bf29b;box-shadow:0 0 0 3px rgba(43,242,155,.28);flex:none}
.promo-more{opacity:.92;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.promo-x{position:absolute;right:.55rem;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:1.7rem;height:1.7rem;background:none;border:0;border-radius:.45rem;color:#fff;opacity:.92;font-size:1.4rem;line-height:1;cursor:pointer}
.promo-x:hover{opacity:1;background:rgba(255,255,255,.2)}
.promo-out{opacity:0;transition:opacity .2s ease}
@media(max-width:520px){#promo{font-size:.78rem;padding-left:.75rem}}

.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(ellipse 62% 48% at 50% -8%, rgba(126,20,255,.34) 0%, transparent 68%),
    radial-gradient(ellipse 44% 38% at 88% 12%, rgba(31,157,255,.20) 0%, transparent 70%),
    linear-gradient(180deg,var(--night) 0%,var(--night-2) 62%,var(--night) 100%);
  color:var(--night-ink);
  padding-block:5.5rem 5rem;
}
.hero-grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:58px 58px;
  mask-image:radial-gradient(ellipse 78% 62% at 50% 0%,#000 26%,transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 0%,#000 26%,transparent 76%);
}
.hero-inner{position:relative;display:grid;gap:3.2rem;align-items:center}
@media(min-width:980px){.hero-inner{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:3.6rem}}
.hero .eyebrow{color:var(--night-dim)}
.hero .h1{margin-top:1.15rem;color:#fff}
.hero .lede{margin-top:1.4rem;color:var(--night-dim);font-size:1.09rem}
.hero .lede strong{color:#fff;font-weight:700}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.1rem}
.hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.22)}
.hero .btn-ghost:hover{background:rgba(255,255,255,.07)}
.hero-facts{display:flex;flex-wrap:wrap;gap:.55rem 1.5rem;margin-top:2rem;font-size:.845rem;font-weight:650;color:var(--night-dim)}
.hero-facts li{display:flex;align-items:center;gap:.45rem}

.win{
  border-radius:1rem;overflow:hidden;background:var(--surface);
  border:1px solid var(--hairline);
  box-shadow:0 2px 4px rgba(10,8,18,.18),0 34px 80px -28px rgba(10,8,18,.75);
}
.win--onnight{border-color:rgba(255,255,255,.12)}
.win-bar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.5rem .45rem .5rem .9rem;border-bottom:1px solid var(--hairline);background:rgba(220,216,233,.28)}
.win-title{font-size:.7rem;font-weight:750;color:var(--dim)}
.win-ctl{display:flex;gap:.15rem}
.win-ctl svg{width:1.5rem;height:1.1rem;padding:.3rem .42rem;fill:none;stroke:var(--dim);stroke-width:1;opacity:.75}
.win-body{display:flex;min-height:15rem}
.win-side{display:none;flex-direction:column;gap:.1rem;width:8.5rem;flex:none;padding:.7rem .5rem;border-right:1px solid var(--hairline);background:rgba(220,216,233,.15)}
@media(min-width:640px){.win-side{display:flex}}
.win-nav{display:flex;align-items:center;gap:.45rem;padding:.36rem .5rem;border-radius:.5rem;font-size:.7rem;font-weight:650;color:var(--dim);white-space:nowrap}
.win-nav i{width:.3rem;height:.3rem;border-radius:999px;background:currentColor;opacity:.5;flex:none}
.win-nav.on{color:#fff;background:linear-gradient(135deg,var(--brand-1),var(--brand-2));box-shadow:0 6px 16px -8px var(--brand-1)}
.win-nav.on i{opacity:1}
.win-main{flex:1;min-width:0;padding:1rem}
.hero-cap{margin-top:.95rem;font-size:.78rem;color:var(--night-dim);text-align:center}
.hero-cap strong{color:#fff;font-weight:700}

.con-head{display:flex;align-items:center;justify-content:space-between;font-size:.72rem;font-weight:750;margin-bottom:.3rem}
.con-status{display:inline-flex;align-items:center;gap:.4rem;font-size:.66rem;font-weight:650;color:var(--dim)}
.con-svg{width:100%;height:auto;display:block}
.con-name{font-size:10px;font-weight:750;fill:var(--ink)}
.con-role{font-size:8.5px;font-weight:650;fill:var(--dim)}
.con-legend{display:flex;justify-content:center;gap:.3rem .9rem;padding-top:.4rem;margin-top:.15rem;border-top:1px solid var(--hairline);font-size:.64rem;font-weight:650;color:var(--dim)}
.con-legend span{display:inline-flex;align-items:center;gap:.32rem}
.con-legend i{width:.85rem;height:.16rem;border-radius:999px;background:var(--c)}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.4}50%{transform:scale(1.18);opacity:0}}
.con-ring{animation:breathe 3s ease-in-out infinite;transform-origin:220px 146px}

.strip{background:var(--night);border-top:1px solid var(--night-hair);padding-block:1.1rem}
.strip-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.6rem 2.2rem;font-size:.82rem;font-weight:650;color:var(--night-dim)}
.strip-in b{color:#fff;font-weight:750}
.strip-in span{display:flex;align-items:center;gap:.5rem}
.strip-x{color:#8b8598}

section.band{padding-block:8rem}
.sec-head{max-width:44rem}
.sec-head .h2{margin-top:1rem}

.h2 .pre{display:block;font-size:.44em;font-weight:700;color:var(--dim);
  letter-spacing:-.012em;line-height:1.45;margin-bottom:.55rem}
.sec-head .lede{margin-top:1.15rem}

.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:1.15rem;margin-top:3.2rem}
.cell{
  position:relative;overflow:hidden;
  grid-column:span 6;
  background:var(--surface);border:1px solid var(--hairline);border-radius:1.25rem;
  padding:1.6rem;
  box-shadow:0 1px 2px rgba(22,19,31,.04),0 14px 34px -26px rgba(22,19,31,.28);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.cell:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(22,19,31,.05),0 26px 50px -28px rgba(22,19,31,.34);border-color:var(--grid)}
@media(min-width:900px){
  .cell--4{grid-column:span 4}
  .cell--3{grid-column:span 3}
  .cell--2{grid-column:span 2}
  .cell--6{grid-column:span 6}
}
.cell .tag,.scene .tag{display:inline-flex;align-items:center;gap:.35rem;font-size:.68rem;font-weight:800;letter-spacing:.1em;color:var(--brand-1);background:rgba(126,20,255,.075);padding:.3rem .6rem;border-radius:999px}
.cell .h3{margin-top:.9rem}
.cell p{margin-top:.55rem;color:var(--dim);font-size:.925rem;line-height:1.72}
.cell ul{margin-top:1rem;display:flex;flex-direction:column;gap:.5rem}
.cell li{display:flex;gap:.5rem;font-size:.875rem;font-weight:600;color:var(--ink);align-items:flex-start}
.cell li svg{flex:none;margin-top:.18rem}

.cell--dark{
  background:
    radial-gradient(ellipse 70% 60% at 88% 6%,rgba(126,20,255,.28),transparent 66%),
    linear-gradient(160deg,#120e1f,#0a0812);
  border-color:#2a2340;color:var(--night-ink);
}
.cell--dark .h3{color:#fff}
.cell--dark p{color:var(--night-dim)}
.cell--dark li{color:#e9e6f4}
.cell--dark .tag{color:#c9a6ff;background:rgba(201,166,255,.12)}

.wboard{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-top:1.35rem}
@media(max-width:720px){.wboard{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.wboard{grid-template-columns:1fr}}
.wcard{background:var(--ground);border:1px solid var(--hairline);border-radius:.85rem;padding:.85rem .9rem}
.wcard .wl{font-size:.66rem;font-weight:750;color:var(--dim);display:flex;justify-content:space-between;align-items:center}
.wclock{display:flex;align-items:baseline;gap:.3rem;margin-top:.35rem}
.wclock b{font-size:1.65rem;font-weight:750;letter-spacing:-.03em}
.wclock i{font-size:.72rem;font-style:normal;color:var(--dim);font-weight:650}
.wsub{font-size:.66rem;color:var(--dim);margin-top:.2rem;font-weight:600}
.wtemp{display:flex;align-items:center;gap:.45rem;margin-top:.35rem;font-size:1.5rem;font-weight:750;letter-spacing:-.03em}
.wrow{display:flex;justify-content:space-between;font-size:.72rem;font-weight:650;margin-top:.42rem}
.wrow .g{color:var(--dim);font-weight:600}
.wdd{color:var(--brand-1);font-weight:800}
.wtodo{display:flex;align-items:center;gap:.45rem;font-size:.72rem;font-weight:600;margin-top:.42rem}
.wtodo .dot{width:.62rem;height:.62rem;border-radius:999px;border:1.6px solid var(--grid);flex:none}
.wtodo .dot.done{background:var(--live);border-color:var(--live)}
.wtodo s{color:var(--dim);text-decoration-thickness:1px}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.15rem}
.chip{font-size:.735rem;font-weight:650;color:var(--dim);background:var(--ground);border:1px solid var(--hairline);border-radius:999px;padding:.32rem .7rem}

.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-top:1.3rem}
@media(max-width:820px){.tiers{grid-template-columns:1fr}}
.tier{border:1px solid var(--hairline);border-top:3px solid var(--tc);border-radius:.85rem;padding:.95rem}
.tier b{font-size:.8rem;font-weight:800;color:var(--tc)}
.tier .who{font-size:.68rem;color:var(--dim);font-weight:650;margin-top:.15rem}
.tier .lim{font-size:.68rem;font-weight:750;color:var(--tc);margin-top:.7rem;padding-top:.6rem;border-top:1px solid var(--hairline)}

.darkgrid{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;align-items:start;margin-top:1.1rem}
@media(max-width:900px){.darkgrid{grid-template-columns:1fr}}

.modes{margin-top:1.3rem;display:flex;flex-direction:column;gap:.5rem}
.mode{display:flex;gap:.6rem;align-items:flex-start;padding:.7rem .8rem;border-radius:.7rem;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.035)}
.mode.on{border-color:#4db4ff;background:rgba(77,180,255,.1)}
.mode .rb{width:.9rem;height:.9rem;border-radius:999px;border:1.8px solid rgba(255,255,255,.35);flex:none;margin-top:.12rem;position:relative}
.mode.on .rb{border-color:#4db4ff}
.mode.on .rb::after{content:"";position:absolute;inset:.19rem;border-radius:999px;background:#4db4ff}
.mode .t{font-size:.79rem;font-weight:750;color:#fff;display:flex;align-items:center;gap:.35rem}
.mode .d{font-size:.7rem;color:var(--night-dim);margin-top:.15rem;line-height:1.55}
.mode .badge{margin-left:auto;font-size:.62rem;font-weight:750;color:var(--night-dim);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:.1rem .4rem}

.rd{border-radius:.7rem;overflow:hidden;border:1px solid var(--hairline);margin-top:1.25rem}
.rd-top{display:flex;justify-content:space-between;align-items:center;padding:.42rem .6rem;font-size:.66rem;font-weight:700;background:rgba(220,216,233,.28)}
.rd-top .l{display:flex;align-items:center;gap:.35rem}
.rd-screen{position:relative;height:9.5rem;background:linear-gradient(150deg,#1b1533,#0a0812)}
.rd-screen .fake{position:absolute;background:rgba(255,255,255,.94);border-radius:.3rem;box-shadow:0 8px 22px -10px rgba(0,0,0,.6)}
.rd-screen .fake i{display:block;height:3px;border-radius:999px;margin:.42rem .5rem 0}

.rd-cursor{
  position:absolute;left:52%;top:46%;width:1.1rem;height:1.1rem;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));
  animation:rs-move 5s ease-in-out infinite;
}
@keyframes rs-move{
  0%,100%{transform:translate(0,0)}
  35%    {transform:translate(-2.2rem,1.1rem)}
  70%    {transform:translate(1.4rem,-.7rem)}
}

.cta-band{
  position:relative;overflow:hidden;border-radius:1.5rem;
  background:linear-gradient(120deg,var(--brand-1),var(--brand-2));
  padding:3.2rem 2.2rem;text-align:center;color:#fff;
  box-shadow:0 30px 70px -34px var(--brand-1);
}
.cta-band h2{font-size:clamp(1.6rem,2.8vw,2.15rem);font-weight:800;letter-spacing:-.035em}
.cta-band p{margin-top:.85rem;color:rgba(255,255,255,.88);font-size:1rem;font-weight:600}
.cta-band .row{display:flex;justify-content:center;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem}
.cta-white{background:#fff;color:var(--brand-1);border-radius:.875rem;padding:.95rem 1.8rem;font-weight:800;font-size:.98rem;display:inline-flex;align-items:center;gap:.5rem}
.cta-out{border:1px solid rgba(255,255,255,.5);color:#fff;border-radius:.875rem;padding:.95rem 1.5rem;font-weight:700;font-size:.98rem}
.cta-band .not{margin-top:1.6rem;font-size:.8rem;color:rgba(255,255,255,.82);font-weight:650}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem;margin-top:3rem}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.step{background:var(--surface);border:1px solid var(--hairline);border-radius:1.25rem;padding:1.5rem;position:relative}
.step .n{width:2rem;height:2rem;border-radius:.7rem;display:grid;place-items:center;color:#fff;font-weight:800;font-size:.9rem;background:linear-gradient(135deg,var(--brand-1),var(--brand-2));box-shadow:0 8px 20px -10px var(--brand-1)}
.step .h3{margin-top:1rem;display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}
.step .h3 em{font-style:normal;font-size:.72rem;font-weight:750;color:var(--brand-2)}
.step p{margin-top:.5rem;color:var(--dim);font-size:.895rem;line-height:1.7}
.nope{margin-top:1.6rem;border:1px dashed var(--grid);border-radius:1rem;padding:1.1rem 1.35rem;display:flex;flex-wrap:wrap;align-items:center;gap:.55rem 1.4rem}
.nope b{font-size:.83rem;font-weight:750;margin-right:.3rem}
.nope span{display:inline-flex;align-items:center;gap:.35rem;font-size:.83rem;font-weight:650;color:var(--dim)}
.nope svg{flex:none}

footer{background:var(--night);color:var(--night-dim);padding-block:3.4rem 2.2rem;margin-top:0}
.fgrid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:2rem}
@media(max-width:820px){.fgrid{grid-template-columns:1fr 1fr}}
footer .brand{color:#fff}
footer .tagline{margin-top:.8rem;font-size:.85rem;line-height:1.7}
footer .free{margin-top:.7rem;font-size:.83rem;font-weight:700;color:#fff;display:flex;align-items:center;gap:.45rem}
footer h4{color:#fff;font-size:.8rem;font-weight:750;margin-bottom:.75rem}
footer li{font-size:.85rem;margin-bottom:.5rem}
footer li a:hover{color:#fff}
.fbot{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--night-hair);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem;font-size:.78rem}

.js .rise{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.js .rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js .rise{opacity:1;transform:none;transition:none}
  .con-ring,.live-dot::after,.os-clip,.os-cursor,.rd-cursor,.sc-dash{animation:none}
  .os-clip{inset-inline-start:46%;opacity:1}
  .particle{display:none}
}

.bk{margin-top:1.2rem;border:1px solid var(--hairline);border-radius:.8rem;overflow:hidden}
.bk-top{display:flex;justify-content:space-between;align-items:baseline;padding:.55rem .7rem;background:rgba(220,216,233,.28)}
.bk-top b{font-size:.73rem;font-weight:750}
.bk-top em{font-style:normal;font-size:.66rem;font-weight:700;color:var(--live)}
.bk-top .s{font-size:.63rem;color:var(--dim);font-weight:600;display:block;margin-top:.1rem}
.bk-row{padding:.5rem .7rem;border-top:1px solid var(--hairline)}
.bk-h{display:flex;justify-content:space-between;font-size:.72rem;font-weight:700;gap:.5rem}
.bk-s{display:flex;justify-content:space-between;font-size:.63rem;color:var(--dim);font-weight:600;margin-top:.12rem;gap:.5rem}
.bk-s .ok{color:var(--live);font-weight:700}
.bk-bar{height:4px;border-radius:999px;background:var(--grid);margin-top:.4rem;overflow:hidden}
.bk-bar b{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--brand-1),var(--brand-2))}

.monitor{margin-top:1.2rem}
.mon-bezel{background:#26232e;border-radius:.85rem;padding:.45rem;box-shadow:0 18px 40px -22px rgba(22,19,31,.55)}
.mon-screen{position:relative;display:flex;border-radius:.45rem;overflow:hidden;height:10.5rem}
.monitor--big .mon-bezel{border-radius:1.1rem;padding:.6rem}
.monitor--big .mon-screen{height:26rem;border-radius:.6rem}
@media(max-width:640px){
  .mon-screen{height:auto;aspect-ratio:16/10}
  .monitor--big .mon-screen{height:auto;aspect-ratio:16/10}
  
  .rd-screen{height:auto;aspect-ratio:16/10}
}
.monitor--big .mon-stand{width:13%;height:1.5rem}
.monitor--big .mon-base{width:26%;height:.6rem}

.os-clip{
  position:absolute;top:46%;inset-inline-start:30%;z-index:3;
  padding:.22rem .55rem;border-radius:999px;font-size:.68rem;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--brand-1),var(--brand-2));
  box-shadow:0 8px 18px -8px var(--brand-1);
  animation:os-fly 5s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes os-fly{
  0%,12%   {transform:translate(0,0) scale(.9);opacity:0}
  20%      {transform:translate(0,0) scale(1);opacity:1}
  62%      {transform:translate(min(38vw,22rem),-.4rem) scale(1);opacity:1}
  76%,100% {transform:translate(min(38vw,22rem),-.4rem) scale(.9);opacity:0}
}
.os-cursor{
  position:absolute;top:58%;inset-inline-start:34%;z-index:3;width:1.1rem;height:1.1rem;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.45));
  animation:os-walk 5s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes os-walk{
  0%,16%{transform:translate(0,0)}
  60%   {transform:translate(min(36vw,21rem),.6rem)}
  100%  {transform:translate(min(36vw,21rem),.6rem)}
}
.os-cap{margin-top:1.1rem;text-align:center;font-size:.86rem;color:var(--dim)}

.mon-task{position:absolute;inset-inline:0;bottom:0;height:7%}
.mon-l .mon-task{background:rgba(126,20,255,.11)}
.mon-r .mon-task{background:rgba(0,0,0,.4)}
.mon-l,.mon-r{flex:1;position:relative;padding:.55rem}
.mon-l{background:#f4f2fa}
.mon-r{background:linear-gradient(150deg,#1b1533,#0a0812)}
.mon-tag{font-size:.6rem;font-weight:750;display:flex;align-items:center;gap:.3rem}
.mon-r .mon-tag{color:#fff}
.mon-side{position:absolute;right:.55rem;top:.55rem;font-size:.58rem;font-weight:650;color:var(--dim)}
.mon-r .mon-side{color:var(--night-dim)}
.fakewin{background:#fff;border-radius:.28rem;box-shadow:0 7px 18px -9px rgba(0,0,0,.4)}
.fakewin i{display:block;height:3px;border-radius:999px;margin:.38rem .45rem 0}
.mon-pill{position:absolute;left:50%;bottom:1.5rem;transform:translateX(-50%);font-size:.58rem;font-weight:750;color:#fff;background:linear-gradient(135deg,var(--brand-1),var(--brand-2));padding:.2rem .5rem;border-radius:999px;box-shadow:0 6px 16px -8px var(--brand-1)}
.mon-cursor{position:absolute;left:56%;top:70%;width:12px;height:12px}
.mon-stand{width:16%;height:.55rem;background:#26232e;margin:0 auto}
.mon-base{width:30%;height:.4rem;background:#2f2b38;margin:0 auto;border-radius:999px}

.chipgroups{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:1.3rem;padding-top:1.2rem;border-top:1px solid var(--hairline)}
@media(max-width:820px){.chipgroups{grid-template-columns:1fr}}
.chipgroups h5{font-size:.76rem;font-weight:750;margin-bottom:.55rem}
.chipgroups .chips{margin-top:0}

.split{margin-top:1.2rem;display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
@media(max-width:820px){.split{grid-template-columns:1fr}}
.split>div{padding:1.1rem;border-radius:.9rem;border:1px solid var(--hairline);background:var(--ground)}
.split-h{display:flex;align-items:center;gap:.45rem;font-size:.78rem;font-weight:750}
.pill-1{background:rgba(18,185,129,.13);color:#0e8f65;border-radius:999px;padding:.18rem .5rem;font-size:.65rem;font-weight:800}
.pill-2{background:rgba(126,20,255,.1);color:var(--brand-1);border-radius:999px;padding:.18rem .5rem;font-size:.65rem;font-weight:800}
.flist{margin-top:.6rem;display:flex;flex-direction:column;gap:.5rem}
.flist li{display:grid;grid-template-columns:auto 1fr;gap:.45rem;align-items:start}
.flist b{font-size:.815rem;font-weight:700;display:block;color:var(--ink)}
.flist em{font-style:normal;font-size:.705rem;color:var(--dim);font-weight:600;display:block;margin-top:.06rem}

.tier ul{margin-top:.6rem;padding-top:.55rem;border-top:1px solid var(--hairline);display:flex;flex-direction:column;gap:.34rem}
.tier li{display:flex;gap:.3rem;align-items:flex-start;font-size:.705rem;font-weight:650;color:var(--ink)}
.tier li svg{flex:none;margin-top:.15rem}

.scenes{display:grid;grid-template-columns:repeat(4,1fr);gap:1.15rem;margin-top:3rem}
@media(max-width:1040px){.scenes{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.scenes{grid-template-columns:1fr}}
.scene{background:var(--surface);border:1px solid var(--hairline);border-radius:1.25rem;padding:1.35rem;
  box-shadow:0 1px 2px rgba(22,19,31,.04),0 14px 34px -26px rgba(22,19,31,.28);
  transition:transform .22s ease,box-shadow .22s ease}
.scene:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(22,19,31,.05),0 26px 50px -28px rgba(22,19,31,.34)}
.sc-dia{display:flex;align-items:center;gap:.3rem;margin-top:1.25rem}
.sc-pc{width:2.7rem;height:1.9rem;flex:none;border-radius:.45rem;border:2px solid var(--c);padding:.3rem .32rem;position:relative}
.sc-pc .d{position:absolute;left:.3rem;top:.28rem;width:.3rem;height:.3rem;border-radius:999px;background:var(--live)}
.sc-pc i{display:block;height:3px;border-radius:999px;background:var(--c);opacity:.5;width:72%;margin-top:.52rem}
.sc-pc i+i{width:46%;margin-top:.2rem}
.sc-link{flex:1;display:flex;align-items:center;min-width:0}

.sc-dash{
  flex:1;min-width:.35rem;height:2px;
  background-image:linear-gradient(90deg,#bdb7d8 0 6px,transparent 6px 12px);
  background-size:12px 2px;background-repeat:repeat-x;
  animation:dash-flow 3.4s linear infinite;
}
@keyframes dash-flow{to{background-position-x:24px}}
.sc-pill{font-size:.6rem;font-weight:750;background:var(--ground);border:1px solid var(--hairline);border-radius:999px;padding:.2rem .45rem;white-space:nowrap}
.sc-names{display:flex;justify-content:space-between;font-size:.655rem;font-weight:650;color:var(--dim);margin-top:.4rem}
.scene h4{font-size:.93rem;font-weight:750;letter-spacing:-.02em;margin-top:1.15rem}
.scene p{margin-top:.42rem;font-size:.845rem;color:var(--dim);line-height:1.68}

.onepc{display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem;margin-top:3rem}
@media(max-width:1000px){.onepc{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.onepc{grid-template-columns:1fr}}
.opc{background:var(--surface);border:1px solid var(--hairline);border-radius:1.25rem;padding:1.5rem;
  box-shadow:0 1px 2px rgba(22,19,31,.04),0 14px 34px -26px rgba(22,19,31,.28);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.opc:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(22,19,31,.05),0 26px 50px -28px rgba(22,19,31,.34);border-color:var(--grid)}
.opc .ic{width:2.5rem;height:2.5rem;border-radius:.8rem;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(126,20,255,.12),rgba(31,157,255,.12));color:var(--brand-1)}
.opc h4{margin-top:1rem;font-size:1.04rem;font-weight:750;letter-spacing:-.022em}
.opc>p{margin-top:.5rem;font-size:.885rem;color:var(--dim);line-height:1.7}
.opc ul{margin-top:.95rem;display:flex;flex-direction:column;gap:.45rem}
.opc li{display:flex;gap:.45rem;align-items:flex-start;font-size:.835rem;font-weight:600;color:var(--ink);line-height:1.55}
.opc li svg{flex:none;margin-top:.22rem}
.opc li em{font-style:normal;color:var(--dim);font-weight:600}
.opc .more{margin-top:.95rem;padding-top:.8rem;border-top:1px solid var(--hairline);font-size:.775rem;color:var(--dim);font-weight:600;line-height:1.6}

.plus2{margin-top:1.6rem;border:1px dashed var(--grid);border-radius:1.25rem;padding:1.4rem 1.6rem;background:var(--surface)}
.plus2 h5{font-size:.9rem;font-weight:750;display:flex;align-items:center;gap:.5rem}
.plus2 h5 .pill-2{font-size:.66rem}
.p2row{display:grid;grid-template-columns:1fr 1fr;gap:.65rem 1.4rem;margin-top:.95rem}
@media(max-width:560px){.p2row{grid-template-columns:1fr}}
.p2item{display:flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:650}
.p2item svg{flex:none}
.plus2 .tail{margin-top:1rem;font-size:.83rem;color:var(--dim)}

.moretip{margin-top:1.5rem;font-size:.87rem;color:var(--dim)}
.moretip a{font-weight:750;color:var(--brand-1);border-bottom:1.5px solid rgba(126,20,255,.35)}

.stamp{position:fixed;right:1rem;bottom:1rem;z-index:90;background:rgba(10,8,18,.86);color:#fff;font-size:.72rem;font-weight:700;padding:.5rem .85rem;border-radius:999px;border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px)}

.chap{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.35rem;height:1.35rem;margin-right:.15rem;border-radius:999px;
  background:linear-gradient(135deg,var(--brand-1),var(--brand-2));
  color:#fff;font-size:.68rem;font-weight:800;letter-spacing:0;
}
.eyebrow:has(.chap)::before{display:none}   
.film .chap{box-shadow:0 0 0 1px rgba(255,255,255,.14)}

.whatis{background:linear-gradient(180deg,var(--surface),var(--ground))}
.whatis-grid{
  display:grid;gap:1rem;margin-top:2.6rem;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
}
.whatis-card{
  background:var(--surface);border:1px solid var(--hairline);
  border-radius:.9rem;padding:1.5rem 1.4rem;
}
.whatis-q{font-size:1.02rem;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.whatis-a{margin-top:.7rem;font-size:.94rem;line-height:1.75;color:var(--dim)}
.whatis-a b{color:var(--ink);font-weight:700}

.whatis-fit{
  margin-top:1.6rem;padding:1.6rem 1.5rem;border-radius:.9rem;
  background:var(--surface);border:1px solid var(--hairline);
  border-left:3px solid var(--brand-1);
}
.whatis-fit-h{font-size:.98rem;font-weight:800;color:var(--ink)}
.whatis-fit-list{margin-top:.9rem;display:grid;gap:.5rem;list-style:none}
.whatis-fit-list li{
  position:relative;padding-left:1.5rem;font-size:.94rem;line-height:1.7;color:var(--dim);
}
.whatis-fit-list li::before{
  content:"";position:absolute;left:.35rem;top:.72em;
  width:.4rem;height:.4rem;border-radius:999px;background:var(--live);
}
.whatis-fit-list b{color:var(--ink);font-weight:700}
.whatis-fit-no{margin-top:1.1rem;font-size:.88rem;line-height:1.7;color:var(--dim)}
.whatis-fit-no b{color:var(--ink)}

.midcta{
  
  margin:0 auto 5.5rem;max-width:70rem;padding-inline:1.5rem;
}
.midcta-in{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1rem 1.5rem;padding:1.5rem 1.7rem;border-radius:1rem;
  background:linear-gradient(100deg,rgba(126,20,255,.07),rgba(31,157,255,.07));
  border:1px solid var(--hairline);
}
.midcta-t{font-size:1.02rem;font-weight:750;color:var(--ink);letter-spacing:-.02em}
.midcta-s{margin-top:.3rem;font-size:.86rem;color:var(--dim)}

.film{background:var(--night);color:var(--night-ink)}
.film .h2{color:#fff}
.film .lede{color:var(--night-dim)}
.film-frame{
  margin-top:2.6rem;border-radius:1rem;overflow:hidden;
  border:1px solid var(--night-hair);background:#000;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.film-frame video{display:block;width:100%;height:auto;aspect-ratio:16/9}
.film-cap{margin-top:1rem;font-size:.82rem;color:var(--night-dim)}
.secgrid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-top:2.4rem}
  @media(max-width:640px){.secgrid{grid-template-columns:1fr}}
  .seccard{padding:1.5rem 1.6rem 1.65rem;border-radius:1.05rem;background:var(--surface);border:1px solid var(--hairline);box-shadow:0 1px 2px rgba(30,20,60,.04),0 14px 34px -26px rgba(30,20,60,.28)}
  .secic{width:2.5rem;height:2.5rem;border-radius:.75rem;display:grid;place-items:center;color:var(--brand-1);background:linear-gradient(135deg,rgba(126,20,255,.12),rgba(31,157,255,.12))}
  .seccard h3{margin-top:1rem;font-size:1.05rem;font-weight:750;letter-spacing:-.02em;color:var(--ink)}
  .seccard p{margin-top:.55rem;font-size:.92rem;line-height:1.78;color:var(--dim)}
  .seccard b{color:var(--ink);font-weight:700}
  .secproof{margin-top:1.3rem;display:flex;gap:1rem;align-items:flex-start;padding:1.35rem 1.5rem;border-radius:1.05rem;border:1px solid rgba(43,242,155,.4);background:linear-gradient(135deg,rgba(43,242,155,.09),rgba(31,157,255,.06))}
  .secproof .pic{flex:none;color:#12b981;margin-top:.1rem}
  .secproof p{font-size:.94rem;line-height:1.75;color:var(--dim)}
  .secproof b{color:var(--ink);font-weight:750}
  .secnote{margin-top:1.5rem;font-size:.86rem;line-height:1.8;color:var(--dim);max-width:47rem}
  .secnote b{color:var(--ink);font-weight:700}
  .secnote a{color:var(--brand-2);font-weight:700;text-decoration:underline;text-underline-offset:3px}