/* NoteSocket site styles: the approved foundations and homepage, built. One radius (10px) on everything. */
:root{
  --r:10px;
  --blue:#2b59ff; --violet:#7b2dff; --grad:linear-gradient(135deg,#2b59ff,#7b2dff);
  --live:#ffd60a; --night:#0b0d18;
  --ink:#10143a; --slate:#5b6178; --mute:#8a8fa6; --mist:#f5f6fb; --line:rgba(16,20,58,.1);
  --green:#12b76a; --red:#e5484d;
  --f:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",Consolas,"Cascadia Mono",monospace;
  --wrap:1280px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font:16px/1.6 var(--f);-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
svg.mk{display:block;flex:none}

/* ---------- header (from the approved foundations) */
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hdr .wrap{height:68px;display:flex;align-items:center;gap:26px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;letter-spacing:-.025em;white-space:nowrap;text-decoration:none}
.nav{display:flex;gap:4px}
.nav a{height:38px;display:flex;align-items:center;padding:0 12px;border-radius:var(--r);color:var(--slate);font-weight:600;font-size:14.5px;text-decoration:none;white-space:nowrap}
.nav a:hover{background:var(--mist);color:var(--ink)}
.nav .dot{width:7px;height:7px;border-radius:50%;background:var(--live);box-shadow:0 0 8px var(--live);margin-left:7px}
.sp{flex:1}
.hdr-r{display:flex;align-items:center;gap:10px}
.burger{display:none;width:40px;height:40px;border-radius:var(--r);place-items:center;background:var(--mist);border:0}

.btn{height:40px;padding:0 16px;border-radius:var(--r);display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 14px var(--f);white-space:nowrap;border:0;cursor:pointer;text-decoration:none}
.btn.pri{background:var(--blue);color:#fff;box-shadow:0 8px 20px rgba(60,60,255,.28)}
.btn.pri:hover{filter:brightness(1.08)}
.btn.sec{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn.sec:hover{background:var(--mist)}
.btn.ghost{background:none;color:var(--slate)}
.btn.ghost:hover{background:var(--mist);color:var(--ink)}
.btn.dark{background:var(--ink);color:#fff}
.btn.live{background:var(--live);color:#1a1400}
.btn.white{background:#fff;color:var(--ink)}
.btn.lg{height:52px;padding:0 22px;font-size:15.5px}

.chip{height:28px;display:inline-flex;align-items:center;gap:7px;padding:0 11px;border-radius:var(--r);font-size:12.5px;font-weight:600;white-space:nowrap}
.chip.live{background:rgba(255,214,10,.16);color:#8a6d00}
.chip.live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--live);box-shadow:0 0 8px var(--live)}
.chip.sync{background:rgba(18,183,106,.12);color:#0b7a47}
.chip.priv{background:var(--mist);color:var(--slate)}
.chip.pro{background:var(--grad);color:#fff}
.chip.code{background:var(--mist);color:var(--ink);font-family:var(--mono)}

section{padding:96px 0}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--blue);margin-bottom:12px}
h1,h2,h3{margin:0;letter-spacing:-.03em}
h2{font-size:40px;line-height:1.1;font-weight:800;max-width:940px}
.lede{font-size:18px;color:var(--slate);max-width:640px;margin:14px 0 0}
.head{margin-bottom:44px}

/* ---------- hero */
.hero{padding:64px 0 40px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-180px -200px auto auto;width:760px;height:620px;background:radial-gradient(closest-side,rgba(123,45,255,.16),transparent);pointer-events:none}
.hero::after{content:"";position:absolute;inset:auto auto -260px -200px;width:720px;height:560px;background:radial-gradient(closest-side,rgba(43,89,255,.12),transparent);pointer-events:none}
.hero .wrap{display:grid;grid-template-columns:1fr 1.12fr;gap:56px;align-items:center;position:relative;z-index:1}
.hero h1{font-size:58px;line-height:1.02;font-weight:800;letter-spacing:-.04em}
.hero h1 .g{background:none;color:var(--blue)}
.hero .lede{font-size:19px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.fine{display:flex;flex-wrap:wrap;gap:18px;margin-top:18px;font-size:13.5px;color:var(--slate)}
.fine span{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.fine svg{color:var(--green)}

/* app window mock */
.stage{position:relative;height:640px}
.app{position:absolute;left:0;top:0;width:540px;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px rgba(16,20,58,.12),0 30px 70px rgba(16,20,58,.22);overflow:hidden;z-index:2}
.app .tbar{height:40px;background:#f6f5f3;display:flex;align-items:center;gap:10px;padding:0 12px;border-bottom:1px solid var(--line)}
.lights{display:flex;gap:8px}
.lights i{width:12px;height:12px;border-radius:50%}
.menus{display:flex;gap:2px;margin-left:6px;font-size:13px;color:#55555e}
.menus span{padding:3px 8px;border-radius:var(--r)}
.app .ttl{flex:1;text-align:center;font-size:13px;font-weight:600;margin-right:90px;white-space:nowrap}
.fbar{height:40px;display:flex;align-items:center;gap:4px;padding:0 8px;border-bottom:1px solid var(--line)}
.fbar .ib{width:28px;height:28px;border-radius:var(--r);display:grid;place-items:center;color:#55555e;font-weight:800;font-size:14px}
.fbar .ib.on{background:#eef1ff;color:var(--blue)}
.fbar .sep{width:1px;height:18px;background:var(--line);margin:0 4px}
.fbar .sw{width:14px;height:5px;border-radius:2px;margin-top:14px;position:absolute}
.fbar .pick{font-size:12.5px;color:#55555e;padding:4px 9px;border-radius:var(--r);white-space:nowrap}
.tabs{height:34px;background:#f6f5f3;display:flex;align-items:flex-end;gap:2px;padding:0 8px;border-bottom:1px solid var(--line)}
.tabs .t{height:28px;padding:0 12px;display:flex;align-items:center;font-size:12.5px;color:#55555e;border-radius:var(--r) var(--r) 0 0;white-space:nowrap}
.tabs .t.on{background:#fff;color:var(--ink);font-weight:700;box-shadow:0 0 0 1px var(--line);margin-bottom:-1px;height:29px}
.tabs .plus{padding:0 10px;height:28px;display:flex;align-items:center;color:#8a8fa6}
.doc{padding:18px 22px 8px;font-size:14.5px;line-height:1.62;color:#1d1d1f;min-height:252px}
.doc h4{margin:0 0 6px;font-size:16px}
.doc .hl{background:#fff176;border-radius:2px}
.doc .bg{background:#bfdbfe;border-radius:2px}
.doc .red{color:#d92d20;font-weight:700}
.doc .grn{color:#12b76a;font-weight:700}
.doc hr{border:0;border-top:1px solid #d4d2ce;margin:10px 0}
.doc .caret{display:inline-block;width:2px;height:17px;background:#1d1d1f;vertical-align:-3px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.status{height:30px;border-top:1px solid var(--line);display:flex;align-items:center;gap:8px;padding:0 14px;font-size:12px;color:#8d8d96;white-space:nowrap}
.tog{width:24px;height:14px;border-radius:7px;background:#12b76a;position:relative;margin-left:4px}
.tog::after{content:"";position:absolute;right:2px;top:2px;width:10px;height:10px;border-radius:50%;background:#fff}

/* browser mock */
.browser{position:absolute;right:0;top:372px;width:360px;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px rgba(16,20,58,.12),0 30px 70px rgba(16,20,58,.25);overflow:hidden;z-index:3}
.browser .bbar{height:40px;background:#eceef3;display:flex;align-items:center;gap:10px;padding:0 12px}
.browser .dots{display:flex;gap:6px}.browser .dots i{width:9px;height:9px;border-radius:50%;background:#c9ccd8}
.addr{flex:1;height:26px;border-radius:var(--r);background:#fff;display:flex;align-items:center;gap:6px;padding:0 10px;font:600 12px var(--mono);color:var(--ink);white-space:nowrap;overflow:hidden}
.addr svg{color:var(--mute)}
.browser .bh{display:flex;align-items:center;gap:8px;padding:14px 16px 6px}
.browser .bh b{font-size:15px}
.browser .bdoc{padding:4px 16px 16px;font-size:13px;line-height:1.6;color:#39405e}
.browser .bdoc .hl{background:#fff176;border-radius:2px}
.browser .bdoc .bg{background:#bfdbfe;border-radius:2px}
.browser .bfoot{border-top:1px solid var(--line);padding:9px 16px;font-size:12px;color:var(--mute);display:flex;gap:8px;align-items:center;white-space:nowrap}

.pulse{position:absolute;z-index:4;right:18px;top:318px;display:flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:var(--r);background:var(--ink);color:#fff;font-size:12.5px;font-weight:700;box-shadow:0 10px 24px rgba(16,20,58,.3);white-space:nowrap}
.pulse i{width:8px;height:8px;border-radius:50%;background:#12b76a;box-shadow:0 0 0 0 rgba(18,183,106,.6);animation:ping 1.6s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(18,183,106,.55)}80%{box-shadow:0 0 0 10px rgba(18,183,106,0)}100%{box-shadow:0 0 0 0 rgba(18,183,106,0)}}

/* ---------- proof strip */
.proof{padding:28px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--mist)}
.proof .wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.proof .n{font-weight:800;font-size:28px;letter-spacing:-.03em;line-height:1.1}
.proof .l{font-size:13.5px;color:var(--slate);margin-top:4px}

/* ---------- how it works */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step{border-radius:var(--r);background:var(--mist);padding:24px;display:flex;flex-direction:column;gap:16px}
.step .num{width:34px;height:34px;border-radius:var(--r);background:var(--grad);color:#fff;font-weight:800;display:grid;place-items:center}
.step h3{font-size:21px}
.step p{margin:0;color:var(--slate);font-size:15px}
.vis{margin-top:auto;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line);padding:14px 16px;font-size:13.5px}
.linkcard .row{display:flex;align-items:center;gap:10px;height:40px;border-radius:var(--r);background:var(--mist);padding:0 12px;margin-top:8px;font:600 13.5px var(--mono);white-space:nowrap}
.linkcard .row span.k{font:600 12px var(--f);color:var(--mute);width:70px}
.linkcard .row .cp{margin-left:auto;font:700 12px var(--f);color:var(--blue)}
.devices{display:flex;flex-direction:column;gap:8px}
.dev{display:flex;align-items:center;gap:10px;height:42px;border-radius:var(--r);background:var(--mist);padding:0 12px;font-weight:600;font-size:13.5px;white-space:nowrap}
.dev .sp{flex:1}
.dev small{color:var(--mute);font-weight:500;font-size:12px}

/* ---------- features */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feat{border-radius:var(--r);box-shadow:0 0 0 1px var(--line),0 12px 30px rgba(16,20,58,.06);padding:22px;background:#fff;display:flex;flex-direction:column;gap:10px}
.feat h3{font-size:19px}
.feat p{margin:0;color:var(--slate);font-size:14.5px}
.mini{margin-top:auto;border-radius:var(--r);background:var(--mist);padding:14px;font-size:13px;min-height:112px}
.saving{display:flex;flex-direction:column;gap:8px}
.saving .ln{display:flex;align-items:center;gap:8px;white-space:nowrap}
.saving .ln b{font-weight:700}
.vers{display:flex;flex-direction:column;gap:6px}
.vers .v{display:flex;align-items:center;gap:10px;height:30px;border-radius:var(--r);padding:0 10px;background:#fff;white-space:nowrap}
.vers .v.on{box-shadow:inset 0 0 0 2px var(--blue)}
.vers .v time{font:600 12px var(--mono);color:var(--blue);width:44px}
.vers .v span{color:var(--slate);overflow:hidden;text-overflow:ellipsis}
.mtabs{display:flex;gap:4px;align-items:flex-end;border-bottom:1px solid var(--line);padding-bottom:0}
.mtabs span{padding:5px 10px;border-radius:var(--r) var(--r) 0 0;font-size:12.5px;color:var(--slate);white-space:nowrap}
.mtabs span.on{background:#fff;color:var(--ink);font-weight:700}
.mtabs+div{background:#fff;padding:10px;border-radius:0 0 var(--r) var(--r);color:#39405e;font-size:12.5px}
.swrow{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:10px}
.swrow i{height:22px;border-radius:var(--r)}
.findp{background:#fff;border-radius:var(--r);box-shadow:0 0 0 1px var(--line);padding:8px;display:grid;gap:6px}
.findp .f{height:28px;border-radius:var(--r);background:var(--mist);display:flex;align-items:center;padding:0 9px;font-size:12.5px;white-space:nowrap}
.findp .f b{margin-left:auto;color:var(--mute);font-weight:600}
.findtxt{margin-top:8px;color:#39405e}
.findtxt u{text-decoration:none;background:rgba(255,171,64,.35);border-bottom:2px solid #f59e0b}
.pinw{position:relative;height:84px}
.pinw .w1{position:absolute;inset:6px 60px 0 0;border-radius:var(--r);background:#e2e5ef}
.pinw .w2{position:absolute;right:0;top:18px;width:150px;height:66px;border-radius:var(--r);background:#fff;box-shadow:0 10px 24px rgba(16,20,58,.18);padding:8px 10px;font-size:12px}
.pinw .w2 b{display:flex;align-items:center;gap:6px}

/* ---------- sync modes */
.sync{background:var(--mist)}
.sync .grid{display:grid;grid-template-columns:1.2fr 1fr;gap:22px;align-items:stretch}
.modes{display:grid;gap:12px}
.mode{border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line);padding:18px 20px;display:grid;grid-template-columns:140px 1fr;gap:18px;align-items:center}
.flow{display:flex;align-items:center;gap:6px;font:700 12px var(--f);white-space:nowrap}
.flow .pc{height:30px;padding:0 9px;border-radius:var(--r);background:var(--mist);display:grid;place-items:center}
.flow .ar{color:var(--blue);font-size:16px;letter-spacing:-2px}
.mode h3{font-size:17px}
.mode p{margin:2px 0 0;color:var(--slate);font-size:14px}
.clash{border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line),0 14px 34px rgba(16,20,58,.08);overflow:hidden;display:flex;flex-direction:column}
.clash .cb{background:#fff7e0;border-bottom:1px solid #f2d58a;padding:14px 16px;font-size:13.5px}
.clash .cb b{display:block;margin-bottom:10px}
.clash .cb .acts{display:flex;gap:8px;flex-wrap:wrap}
.clash .cb .btn{height:34px;font-size:13px}
.clash .side{display:grid;grid-template-columns:1fr 1fr;flex:1}
.clash .side div{padding:14px 16px;font-size:13px;color:#39405e}
.clash .side div+div{border-left:1px solid var(--line)}
.clash .side h5{margin:0 0 6px;font-size:12px;color:var(--mute);font-weight:700;white-space:nowrap}
.clash .side ins{text-decoration:none;background:rgba(18,183,106,.15);border-radius:2px}
.clash .side del{text-decoration:none;background:rgba(43,89,255,.12);border-radius:2px}
.clash .note{padding:12px 16px;border-top:1px solid var(--line);font-size:13px;color:var(--slate)}

/* ---------- live (night band) */
.live-band{background:var(--night);color:#e7e8f5;position:relative;overflow:hidden}
.live-band::before{content:"";position:absolute;left:-10%;top:-30%;width:70%;height:90%;background:radial-gradient(closest-side,rgba(92,78,255,.35),transparent);pointer-events:none}
.live-band::after{content:"";position:absolute;right:-10%;bottom:-40%;width:60%;height:90%;background:radial-gradient(closest-side,rgba(168,85,247,.22),transparent);pointer-events:none}
.live-band .wrap{position:relative;z-index:1}
.live-band h2{color:#fff}
.live-band .lede{color:#b9bcd6}
.live-band .kicker{color:var(--live)}
.lgrid{display:grid;grid-template-columns:1.35fr 1fr;gap:22px;margin-top:40px}
.lpage{border-radius:var(--r);background:#141733;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 70px rgba(0,0,0,.4);overflow:hidden;display:flex;flex-direction:column}
.lpage .lbody{flex:1}
.lpage .lfoot{display:flex;align-items:center;gap:10px;padding:12px 18px;border-top:1px solid rgba(255,255,255,.08);font-size:12.5px;color:#8f93b8;white-space:nowrap}
.lpage .lfoot .code{font:600 12.5px var(--mono);color:#c9cbe6}
.lpage .lb{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
.lpage .lb b{color:#fff;font-size:16px}
.lpage .lb .chip.live{background:rgba(255,214,10,.14);color:var(--live)}
.lpage .lb .w{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:12.5px;color:#8f93b8;white-space:nowrap}
.faces{display:flex}
.faces span{width:24px;height:24px;border-radius:50%;margin-left:-4px;box-shadow:0 0 0 2px #141733;font-size:9.5px;font-weight:700;display:grid;place-items:center;color:#fff}
.faces span:first-child{margin-left:0}
.lpage .lbody{padding:18px 20px 22px;font-size:15px;line-height:1.7;color:#c9cbe6}
.lpage .lbody b{color:#fff}
.lpage .lbody .hl{background:rgba(255,214,10,.22);color:#fff;border-radius:2px}
.lpage .lbody .caret{display:inline-block;width:2px;height:18px;background:var(--live);vertical-align:-3px;animation:blink 1s steps(1) infinite}
.lpage .lbody hr{border:0;border-top:1px solid rgba(255,255,255,.1);margin:12px 0}
.uses{display:grid;gap:10px}
.use{border-radius:var(--r);background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);padding:14px 16px;display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:center}
.use b{color:#fff;font-size:15px}
.use span{color:#9ea2c6;font-size:13px}
.use .cnt{grid-row:span 2;display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--live);white-space:nowrap}
.use .cnt::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--live);box-shadow:0 0 8px var(--live)}
.live-cta{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.live-band .btn.sec{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}

/* ---------- open a note */
.openband .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.openbox{border-radius:var(--r);background:var(--mist);padding:26px}
.openbox h3{font-size:20px}
.openbox p{margin:4px 0 16px;color:var(--slate);font-size:14.5px}
.field{display:flex;align-items:center;height:52px;border-radius:var(--r);background:#fff;box-shadow:inset 0 0 0 1px var(--line);padding:0 14px;gap:10px}
.field:focus-within{box-shadow:inset 0 0 0 2px var(--blue),0 0 0 4px rgba(43,89,255,.12)}
.field .pre{color:var(--mute);font-weight:600;font-size:15px;white-space:nowrap}
.field input{flex:1;min-width:0;border:0;outline:0;font:600 18px var(--mono);letter-spacing:.05em;color:var(--ink);background:none}
.two{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:10px}
.openlist{display:grid;gap:10px}
.oitem{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--r);box-shadow:0 0 0 1px var(--line)}
.oitem .ic{width:38px;height:38px;border-radius:var(--r);background:var(--mist);display:grid;place-items:center;flex:none}
.oitem b{display:block;font-size:15px}
.oitem span{font-size:13.5px;color:var(--slate)}

/* ---------- pricing */
.pricing{background:var(--mist)}
.plans{display:grid;grid-template-columns:1fr 1fr .85fr;gap:22px}
.billing{border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line);padding:24px;display:flex;flex-direction:column;gap:14px}
.billing h3{font-size:18px}
.billing .bi{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--slate)}
.billing .bi b{display:block;color:var(--ink);font-size:14.5px}
.billing .bi .ic{width:34px;height:34px;border-radius:var(--r);background:var(--mist);display:grid;place-items:center;flex:none;color:var(--blue)}
.billing a.lk{margin-top:auto;font-weight:700;color:var(--blue);text-decoration:none;font-size:14.5px}
.plan{border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line),0 14px 34px rgba(16,20,58,.06);padding:28px;display:flex;flex-direction:column}
.plan.pro{box-shadow:0 0 0 2px var(--blue),0 24px 50px rgba(43,89,255,.18);position:relative}
.plan .top{display:flex;align-items:center;gap:10px}
.plan h3{font-size:22px}
.price{display:flex;align-items:baseline;gap:6px;margin:14px 0 4px}
.price b{font-size:44px;font-weight:800;letter-spacing:-.04em;line-height:1}
.price span{color:var(--slate);font-size:15px}
.plan .sub{color:var(--slate);font-size:14.5px;margin:0 0 18px}
.plan ul{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px;font-size:15px}
.plan li{display:flex;gap:10px;align-items:flex-start}
.plan li svg{flex:none;margin-top:4px;color:var(--green)}
.plan .btn{margin-top:auto}
.plan-note{margin-top:16px;font-size:13.5px;color:var(--slate)}

/* ---------- faq */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px}
.q{border-radius:var(--r);box-shadow:0 0 0 1px var(--line);padding:18px 20px}
.q b{display:block;font-size:16px;margin-bottom:4px}
.q p{margin:0;color:var(--slate);font-size:14.5px}

/* ---------- final cta */
.final{padding:0 0 96px}
.final .box{border-radius:var(--r);background:var(--grad);color:#fff;padding:52px 56px;display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;position:relative;overflow:hidden}
.final .box::after{content:"";position:absolute;right:-60px;top:-80px;width:360px;height:360px;border-radius:50%;background:rgba(255,255,255,.1)}
.final h2{color:#fff;font-size:38px}
.final p{margin:10px 0 0;color:rgba(255,255,255,.85);font-size:17px}
.final .acts{display:flex;gap:12px;position:relative;z-index:1}
.final .btn.ghostw{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}

/* ---------- footer */
footer{border-top:1px solid var(--line);padding:48px 0 36px;background:#fff}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
.fgrid h6{margin:0 0 12px;font-size:13px;color:var(--mute);font-weight:700}
.fgrid a{display:block;text-decoration:none;color:var(--slate);font-size:14.5px;margin-bottom:8px}
.fgrid a.logo{display:flex;color:var(--ink)}
.fgrid a:hover{color:var(--ink)}
.fgrid .about{color:var(--slate);font-size:14px;margin-top:12px;max-width:360px}
.legal{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);font-size:12.5px;color:var(--mute);display:flex;gap:20px;justify-content:space-between;flex-wrap:wrap}

/* ---------- smaller screens */
@media (max-width:1100px){
  .hero .wrap,.sync .grid,.lgrid,.openband .wrap{grid-template-columns:1fr}
  .stage{height:560px;max-width:620px}
  .feats,.steps{grid-template-columns:1fr 1fr}
  .plans{grid-template-columns:1fr 1fr}
  .proof .wrap{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  .wrap{padding:0 18px}
  .nav,.hdr-r{display:none}.burger{display:grid}
  .hero h1{font-size:40px}
  h2{font-size:30px}
  .stage{height:auto;display:grid;gap:14px}
  .app,.browser{position:relative;width:100%;left:auto;right:auto;top:auto;bottom:auto}
  .pulse{display:none}
  .feats,.steps,.faq,.plans,.fgrid{grid-template-columns:1fr}
  .proof .wrap{grid-template-columns:1fr 1fr}
  .mode{grid-template-columns:1fr}
  .final .box{grid-template-columns:1fr;padding:34px 26px}
  section{padding:64px 0}
}

/* ---------- built-site additions */
button.btn{font:700 14px var(--f)}
button.btn.lg{font-size:15.5px}
section,.proof,[id]{scroll-margin-top:80px}
[hidden]{display:none !important}

/* mobile menu (burger) */
.mnav{border-top:1px solid var(--line);background:#fff;padding:8px 14px 16px}
.mnav a{display:flex;align-items:center;height:46px;padding:0 12px;border-radius:var(--r);font-weight:600;color:var(--ink);text-decoration:none}
.mnav a:hover{background:var(--mist)}
.mnav .dot{width:7px;height:7px;border-radius:50%;background:var(--live);box-shadow:0 0 8px var(--live);margin-left:8px}
.mbtns{display:grid;gap:8px;margin-top:8px}
.mbtns .btn{justify-content:center;height:46px;color:inherit}
.mbtns .btn.pri{color:#fff}
@media (min-width:1101px){.mnav{display:none !important}}

/* open a note */
.formerr{margin:10px 0 0;font-size:13.5px;font-weight:600;color:#b4232a}

/* terms and privacy */
.legalpage{padding:56px 0 96px}
.legalgrid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:56px;align-items:start}
.toc{position:sticky;top:96px;border-radius:var(--r);background:var(--mist);padding:20px;display:flex;flex-direction:column;gap:10px}
.toc b{font-size:14px}
.toc p{margin:0;font-size:14px;color:var(--slate);padding-left:14px;position:relative}
.toc p::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--blue)}
.toc .btn{margin-top:6px}
.prose{max-width:760px}
.prose h1{font-size:44px;line-height:1.08;font-weight:800;letter-spacing:-.035em}
.prose .updated{color:var(--mute);font-size:14px;margin:8px 0 28px}
.prose h2{font-size:21px;letter-spacing:-.02em;margin:34px 0 8px}
.prose p{color:#39405e;margin:0 0 12px}
.prose a{color:var(--blue);font-weight:600}

/* not found */
.missing{padding:96px 0 120px}
.missbox{max-width:620px}
.missbox h1{font-size:46px;line-height:1.05;font-weight:800;letter-spacing:-.035em;margin:16px 0 10px}
.missbox p{font-size:18px;color:var(--slate);margin:0}

@media (max-width:900px){
  .legalgrid{grid-template-columns:1fr}
  .toc{position:static}
}

/* grid children may shrink below their content on a phone */
.steps > *,.feats > *,.plans > *,.faq > *,.modes > *,.lgrid > *,.sync .grid > *,.openband .wrap > *,.hero .wrap > *{min-width:0}
.linkcard .row{min-width:0;overflow:hidden}
@media (max-width:760px){
  .linkcard .row span.k{display:none}
  .clash .side{grid-template-columns:1fr}
  .clash .side div+div{border-left:0;border-top:1px solid var(--line)}
  .flow{flex-wrap:wrap}
  .lpage .lb{flex-wrap:wrap}
  .lpage .lb .w{margin-left:0}
  .final .acts{flex-direction:column}
  .legal{flex-direction:column;gap:6px}
}

/* header: drop Open a note below 1180px, switch to the burger below 1100px */
@media (max-width:1180px){.hdr-r .btn.ghost{display:none}}
@media (max-width:1100px){.nav,.hdr-r{display:none}.burger{display:grid}}
@media (max-width:760px){
  .openbox .two{grid-template-columns:1fr}
  .openbox .two .btn{width:100%}
  .lpage .lfoot{flex-wrap:wrap;white-space:normal}
}

/* ================= hero, round 2 ================= */
.hero2{position:relative;overflow:hidden;padding:56px 0 64px;background:#fff}
.hero2::before{content:"";position:absolute;right:-220px;top:-220px;width:820px;height:700px;background:radial-gradient(closest-side,rgba(123,45,255,.15),transparent);pointer-events:none}
.hero2::after{content:"";position:absolute;left:-240px;bottom:-320px;width:760px;height:620px;background:radial-gradient(closest-side,rgba(43,89,255,.12),transparent);pointer-events:none}
.hero2 .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:56px;align-items:center}
.freechips{display:flex;flex-wrap:wrap;gap:8px}
.freechips .chip{height:30px;font-size:13px}
.chip.free{background:var(--green);color:#fff;font-weight:800;letter-spacing:.02em}
.hero2 h1{font-size:60px;line-height:1.02;font-weight:800;letter-spacing:-.045em;margin:20px 0 0}
.hero2 h1 .g{background:none;color:var(--blue)}
.hero2 .lede{font-size:19px;margin-top:18px;max-width:560px}
.hero2 .lede b{color:var(--ink)}
.cta2{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn.xl{height:58px;padding:0 24px;font-size:16px}
.btn .meta{font-weight:600;opacity:.8;font-size:13px;padding-left:10px;margin-left:2px;border-left:1px solid rgba(255,255,255,.35)}
.facts2{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:10px 26px;margin-top:26px}
.facts2 div{display:flex;flex-direction:column;gap:2px}
.facts2 b{font-size:18px;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.facts2 span{font-size:12.5px;color:var(--slate);white-space:nowrap}

/* the live demo: type in the app, watch it land in the browser */
.demo{position:relative;height:700px}
.dapp{position:absolute;left:0;top:0;width:520px;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px rgba(16,20,58,.12),0 30px 70px rgba(16,20,58,.22);overflow:hidden;z-index:2}
.dapp .tbar{height:40px;background:#f6f5f3;display:flex;align-items:center;gap:10px;padding:0 12px;border-bottom:1px solid var(--line)}
.dapp .ttl{flex:1;text-align:center;font-size:13px;font-weight:600;margin-right:84px;white-space:nowrap}
.dapp .dpc{position:absolute;right:12px;top:13px;font:600 11px var(--mono);color:var(--mute)}
.ddoc{height:268px;padding:16px 20px;font:14.5px/1.62 "Segoe UI",system-ui,sans-serif;color:#1d1d1f;outline:0;overflow:hidden;cursor:text}
.ddoc p{margin:0}
.ddoc .hl{background:#fff176;border-radius:2px}
.ddoc .bg{background:#bfdbfe;border-radius:2px}
.ddoc .red{color:#d92d20;font-weight:700}
.ddoc .grn{color:#12b76a;font-weight:700}
.ddoc hr{border:0;border-top:1px solid #d4d2ce;margin:8px 0}
.ddoc:focus{box-shadow:inset 0 0 0 2px rgba(43,89,255,.25)}
.typing::after{content:"";display:inline-block;width:2px;height:16px;background:#1d1d1f;vertical-align:-3px;margin-left:1px;animation:blink 1s steps(1) infinite}
.dstatus{height:30px;border-top:1px solid var(--line);display:flex;align-items:center;gap:8px;padding:0 14px;font-size:12px;color:#8d8d96;white-space:nowrap}
.dstatus .st{min-width:44px}
.dstatus .st.saving{color:#55555e}
.dbrowser{position:absolute;right:0;top:366px;width:380px;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px rgba(16,20,58,.12),0 30px 70px rgba(16,20,58,.25);overflow:hidden;z-index:3}
.dbrowser .bbar{height:40px;background:#eceef3;display:flex;align-items:center;gap:10px;padding:0 12px}
.dbrowser .bh{display:flex;align-items:center;gap:8px;padding:12px 16px 4px}
.dbrowser .bh b{font-size:15px}
.bview{height:220px;padding:4px 16px 0;font:13px/1.6 "Segoe UI",system-ui,sans-serif;color:#39405e;overflow:hidden;position:relative}

.bview p{margin:0}
.bview .hl{background:#fff176;border-radius:2px}
.bview .bg{background:#bfdbfe;border-radius:2px}
.bview .red{color:#d92d20;font-weight:700}
.bview .grn{color:#12b76a;font-weight:700}
.bview hr{border:0;border-top:1px solid #d4d2ce;margin:6px 0}
.bview .landed{animation:landed 1.8s ease-out}
@keyframes landed{0%{background:rgba(43,89,255,.2)}100%{background:transparent}}
.dbrowser .bfoot{border-top:1px solid var(--line);padding:9px 16px;font-size:12px;color:var(--mute);display:flex;gap:8px;align-items:center;white-space:nowrap}
.dpulse{position:absolute;z-index:4;left:150px;top:320px;display:flex;align-items:center;gap:8px;height:34px;padding:0 13px;border-radius:var(--r);background:var(--ink);color:#fff;font-size:12.5px;font-weight:700;box-shadow:0 10px 24px rgba(16,20,58,.3);white-space:nowrap;transition:transform .2s}
.dpulse i{width:8px;height:8px;border-radius:50%;background:#12b76a;animation:ping 1.6s infinite}
.dpulse.hit{transform:scale(1.06)}
.tryit{position:absolute;left:0;top:398px;width:205px;display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--slate)}
.tryit .arr{flex:none;width:34px;height:34px;border-radius:var(--r);background:#eef1ff;color:var(--blue);display:grid;place-items:center}
.tryit b{display:block;color:var(--ink);font-size:14.5px}

@media (max-width:1180px){.hero2 .wrap{grid-template-columns:1fr}.demo{max-width:640px}}
@media (max-width:760px){
  .hero2 h1{font-size:40px}
  .facts2{grid-template-columns:repeat(2,auto)}
  .demo{height:auto;display:grid;gap:14px}
  .dapp,.dbrowser{position:relative;width:100%;top:auto;left:auto;right:auto}
  .dpulse{position:relative;right:auto;top:auto;justify-self:start}
  .tryit{position:relative;top:auto;width:auto}
  .btn.xl{width:100%}
}

.dbrowser .dots{display:flex;gap:6px}
.dbrowser .dots i{width:9px;height:9px;border-radius:50%;background:#c9ccd8}
.dbrowser .addr{flex:1;height:26px;border-radius:var(--r);background:#fff;display:flex;align-items:center;gap:6px;padding:0 10px;font:600 12px var(--mono);color:var(--ink);white-space:nowrap;overflow:hidden}

/* ================= hero, round 3: write it once, show it everywhere ================= */
.h3{position:relative;overflow:hidden;padding:52px 0 64px;background:#fff}
.h3::before{content:"";position:absolute;right:-240px;top:-240px;width:860px;height:720px;background:radial-gradient(closest-side,rgba(123,45,255,.16),transparent);pointer-events:none}
.h3::after{content:"";position:absolute;left:-260px;bottom:-340px;width:780px;height:640px;background:radial-gradient(closest-side,rgba(43,89,255,.12),transparent);pointer-events:none}
.h3 .wrap{position:relative;z-index:1}
.h3top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:48px;align-items:end;margin-bottom:40px}
.h3top .lede{padding-bottom:6px}
.freechips{display:flex;flex-wrap:wrap;gap:8px}
.freechips .chip{height:30px;font-size:13px}
.chip.free{background:var(--green);color:#fff;font-weight:800;letter-spacing:.02em}
.h3 h1{font-size:58px;line-height:1.02;font-weight:800;letter-spacing:-.045em;margin:20px 0 0}
.h3 h1 .g{background:none;color:var(--blue)}
.h3 .lede{font-size:18px;margin:0;max-width:560px}
.h3 .lede b{color:var(--ink)}
.cta2{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn.xl{height:58px;padding:0 24px;font-size:16px}
.btn .meta{font-weight:600;opacity:.8;font-size:13px;padding-left:10px;margin-left:2px;border-left:1px solid rgba(255,255,255,.35)}
.livedot{width:9px;height:9px;border-radius:50%;background:var(--live);box-shadow:0 0 0 0 rgba(255,214,10,.7);animation:ping3 1.6s infinite}
@keyframes ping3{0%{box-shadow:0 0 0 0 rgba(255,214,10,.6)}80%{box-shadow:0 0 0 9px rgba(255,214,10,0)}100%{box-shadow:0 0 0 0 rgba(255,214,10,0)}}

/* stage */
.stage3{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 76px minmax(0,1.3fr);align-items:center}
.app3{position:relative;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px rgba(16,20,58,.12),0 30px 70px rgba(16,20,58,.2);overflow:hidden;z-index:2}
.app3 .tbar{height:38px;background:#f6f5f3;display:flex;align-items:center;gap:10px;padding:0 12px;border-bottom:1px solid var(--line);position:relative}
.app3 .ttl{flex:1;text-align:center;font-size:12.5px;font-weight:600;margin-right:40px;white-space:nowrap}
.dpc{position:absolute;right:12px;top:12px;font:600 10.5px var(--mono);color:var(--mute)}
.doc3{padding:14px 18px 12px;font:13.5px/1.55 "Segoe UI",system-ui,sans-serif;color:#1d1d1f}
.d-title{font-weight:700;font-size:15px}
.d-now{color:#3b63f5;margin-top:2px}
.d-now .gt{font-weight:800;color:#8a8fa6}
.d-timer{margin-top:4px;color:#55555e}
.tchip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:var(--r);background:#fff4d6;color:#8a5a00;font:700 12px var(--mono);vertical-align:1px}
.tchip.dark{background:rgba(255,255,255,.12);color:#fff}
.d-table{width:100%;border-collapse:collapse;margin:10px 0 8px;font-size:13px}
.d-table th{text-align:left;font-weight:700;background:#f3f4f8;padding:5px 8px;border:1px solid #dfe2ea;white-space:nowrap}
.d-table td{padding:4px 8px;border:1px solid #dfe2ea;white-space:nowrap}
.d-table td:nth-child(2),.d-table td:nth-child(3),.d-table th:nth-child(2),.d-table th:nth-child(3){text-align:right;width:74px}
.d-table td.tot{font-weight:700;cursor:pointer;user-select:none}
.d-table td.tot:hover{background:#eef1ff}
.d-table td.bump{animation:bump .9s ease-out}
@keyframes bump{0%{background:#c9f5dc}100%{background:transparent}}
.d-check{display:flex;align-items:center;gap:7px;font-size:12.5px;color:#55555e;white-space:nowrap}
.d-check .box{width:15px;height:15px;border-radius:4px;box-shadow:inset 0 0 0 1.5px #b9bdcc;display:grid;place-items:center;margin-left:6px}
.d-check .box:first-child{margin-left:0}
.d-check .box.on{background:var(--green);box-shadow:none;color:#fff}
.dstatus{height:30px;border-top:1px solid var(--line);display:flex;align-items:center;gap:8px;padding:0 14px;font-size:12px;color:#8d8d96;white-space:nowrap}
.dstatus .st{min-width:40px}
.dstatus .st.saving{color:#55555e}

/* output panel */
.out3{position:relative;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px rgba(16,20,58,.12),0 30px 70px rgba(16,20,58,.25);overflow:hidden;z-index:3}
.osw{display:flex;gap:2px;padding:6px;background:#eceef3}
.osw button{flex:1;height:34px;border:0;border-radius:var(--r);background:none;font:700 12.5px var(--f);color:var(--slate);cursor:pointer;white-space:nowrap;position:relative;display:flex;align-items:center;justify-content:center;gap:6px}
.osw button svg{opacity:.7}
.osw button:hover{color:var(--ink)}
.osw button.on{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(16,20,58,.1)}
.osw button.on svg{opacity:1;color:var(--blue)}
.osw button.on::after{content:"";position:absolute;left:10px;right:10px;bottom:3px;height:2px;border-radius:2px;background:var(--grad);transform-origin:left;animation:fill 6s linear forwards}
.osw.held button.on::after{animation:none;transform:scaleX(1)}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.oframe{position:relative;height:336px}
.ov{position:absolute;inset:0;opacity:0;visibility:hidden;transform:scale(.985);transition:opacity .4s,transform .4s}
.ov.on{opacity:1;visibility:visible;transform:none}
.ofoot{height:38px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;padding:0 14px;font-size:12.5px;color:var(--slate);white-space:nowrap}
.ofoot span:first-child{flex:1;overflow:hidden;text-overflow:ellipsis}
.ptag{height:22px;padding:0 9px;border-radius:var(--r);display:inline-flex;align-items:center;font-size:11.5px;font-weight:800}
.ptag.prem{background:var(--grad);color:#fff}
.ptag.free{background:rgba(18,183,106,.14);color:#0b7a47}
.bbar3{height:34px;background:#f5f6f9;display:flex;align-items:center;gap:10px;padding:0 10px;border-bottom:1px solid var(--line)}
.bbar3 .dots{display:flex;gap:5px}.bbar3 .dots i{width:8px;height:8px;border-radius:50%;background:#c9ccd8}
.addr3{flex:1;height:22px;border-radius:var(--r);background:#fff;display:flex;align-items:center;gap:6px;padding:0 9px;font:600 11px var(--mono);color:var(--ink);white-space:nowrap;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.addr3 svg{color:var(--green)}

/* ---- scoreboards: team colours, rank badges, score bars; rows slide to their new place */
.board{position:relative}
.brow{position:absolute;left:0;right:0;display:flex;align-items:center;gap:9px;padding:0 10px;transition:transform .7s cubic-bezier(.2,.8,.2,1);font-size:13px;overflow:hidden}
.brow .bar{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--c);opacity:.1;transition:width .7s cubic-bezier(.2,.8,.2,1);border-radius:inherit}
.brow > span{position:relative}
.brow .rk{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font:800 10.5px var(--mono);color:var(--slate);background:rgba(16,20,58,.07);flex:none}
.brow.r1 .rk{background:linear-gradient(135deg,#ffe066,#f5b301);color:#3d2b00;box-shadow:0 0 0 2px rgba(245,179,1,.25)}
.brow.r2 .rk{background:linear-gradient(135deg,#eef0f5,#b8bdcc);color:#2a2e3d}
.brow.r3 .rk{background:linear-gradient(135deg,#f3c9a1,#c9824a);color:#3a1d05}
.brow .av2{width:22px;height:22px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font:800 9.5px var(--f);flex:none;box-shadow:0 0 0 2px rgba(255,255,255,.7)}
.brow .nm{flex:1;min-width:0;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brow .dl{position:absolute !important;right:44px;top:50%;margin-top:-9px;font:800 10.5px var(--mono);color:#0b7a47;background:#dcfae9;padding:2px 6px;border-radius:6px;opacity:0;z-index:2}
.brow .dl.show{animation:dpop 1.8s ease-out}
@keyframes dpop{0%{opacity:0;transform:translateY(6px) scale(.8)}15%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0;transform:translateY(-4px)}}
.brow .up2{font-size:10px;color:var(--green);width:10px;opacity:0}
.brow.up .up2{opacity:1;animation:upb 1.6s ease-out}
@keyframes upb{0%{transform:translateY(6px);opacity:0}30%{transform:none;opacity:1}}
.brow .pt{font:800 14px var(--mono);min-width:28px;text-align:right}
.brow.hit .pt{animation:pthit .9s ease-out}
@keyframes pthit{0%{color:var(--green);transform:scale(1.3)}100%{transform:scale(1)}}

/* ---- 1 live page */
.v-live{background:linear-gradient(#fff,#f7f8fc)}
.lvhead{display:flex;align-items:center;gap:10px;padding:10px 14px 6px}
.lvtitle{flex:1;min-width:0;display:flex;flex-direction:column}
.lvtitle b{font-size:16px;letter-spacing:-.01em}
.lvsub{font-size:11.5px;color:var(--mute);white-space:nowrap}
.livepill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--r);background:#e5484d;color:#fff;font-size:11px;font-weight:800;letter-spacing:.06em}
.livepill i{width:7px;height:7px;border-radius:50%;background:#fff;animation:blinkdot 1.2s infinite}
@keyframes blinkdot{50%{opacity:.25}}
.watchers{display:flex;align-items:center}
.watchers .av{width:22px;height:22px;border-radius:50%;background:var(--c);color:#fff;font:800 8.5px var(--f);display:grid;place-items:center;margin-left:-6px;box-shadow:0 0 0 2px #fff}
.watchers .av:first-child{margin-left:0}
.watchers b{margin-left:8px;font-size:12.5px}
.watchers b::after{content:" watching";font-weight:500;color:var(--slate)}
.lvnow{position:relative;overflow:hidden;display:flex;align-items:center;gap:9px;margin:2px 12px 8px;height:34px;padding:0 10px;border-radius:var(--r);background:var(--night);color:#fff;font-size:13px;white-space:nowrap}
.lvnow::after,.lower::after{content:"";position:absolute;top:0;bottom:0;width:80px;left:-100px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);animation:sheen 4.5s ease-in-out infinite}
@keyframes sheen{0%,60%{left:-100px}100%{left:110%}}
.nowpill{background:var(--live);color:#1a1400;font-size:10px;font-weight:800;padding:3px 7px;border-radius:6px;letter-spacing:.06em}
.lvnow .tchip{margin-left:auto}
.tchip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:var(--r);background:#fff4d6;color:#8a5a00;font:700 12px var(--mono);vertical-align:1px}
.tchip.dark{background:rgba(255,255,255,.12);color:#fff}
.b-live{margin:0 12px}
.b-live .brow{border-radius:var(--r)}
.b-live .brow.r1{box-shadow:inset 0 0 0 1px rgba(245,179,1,.35)}
.b-live .brow.r1 .bar{opacity:.16}
.reacts{position:absolute;right:74px;bottom:8px;width:40px;height:220px;pointer-events:none}
.reacts span{position:absolute;bottom:0;left:10px;font-size:20px;animation:floatup 2.6s ease-out forwards;filter:drop-shadow(0 4px 8px rgba(16,20,58,.2))}
@keyframes floatup{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:1;transform:translateY(-20px) scale(1.1)}100%{transform:translateY(-210px) translateX(-16px) scale(.9);opacity:0}}

/* ---- 2 on stream */
.scene{position:absolute;inset:0;background:#07080f;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(40px);opacity:.75}
.blob.b1{width:320px;height:220px;left:-40px;top:-40px;background:#3b2fd9;animation:drift1 12s ease-in-out infinite alternate}
.blob.b2{width:280px;height:220px;right:-60px;bottom:-60px;background:#a21caf;animation:drift2 14s ease-in-out infinite alternate}
.blob.b3{width:200px;height:160px;left:40%;top:30%;background:#0e7490;opacity:.4;animation:drift1 16s ease-in-out infinite alternate-reverse}
@keyframes drift1{to{transform:translate(60px,40px)}}
@keyframes drift2{to{transform:translate(-50px,-30px)}}
.scene::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.55));pointer-events:none}
.sbadge{position:absolute;left:12px;top:12px;z-index:2;display:flex;gap:6px;align-items:center;font-size:11px;font-weight:800;color:#fff}
.sbadge .rec{display:inline-flex;align-items:center;gap:5px;background:#e5484d;padding:3px 8px;border-radius:6px;letter-spacing:.06em}
.sbadge .rec i{width:6px;height:6px;border-radius:50%;background:#fff;animation:blinkdot 1.2s infinite}
.sbadge .vw{display:inline-flex;align-items:center;gap:5px;background:rgba(0,0,0,.5);padding:3px 8px;border-radius:6px}
.cam{position:absolute;left:12px;top:42px;z-index:2;width:220px;height:150px;border-radius:var(--r);overflow:hidden;background:radial-gradient(circle at 50% 30%,#2a2f5c,#141733);box-shadow:0 0 0 2px transparent,0 12px 30px rgba(0,0,0,.4)}
.cam::before{content:"";position:absolute;inset:0;border-radius:var(--r);padding:2px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.cam .host{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:150px;height:125px;opacity:.9}
.cam .tag{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,.55);color:#fff;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:6px}
.mic{position:absolute;right:9px;bottom:9px;display:flex;align-items:flex-end;gap:2px;height:16px}
.mic i{width:3px;background:#12b76a;border-radius:2px;animation:lvl .8s ease-in-out infinite alternate}
.mic i:nth-child(1){height:6px;animation-delay:.1s}.mic i:nth-child(2){height:12px;animation-delay:.3s}.mic i:nth-child(3){height:9px;animation-delay:.2s}.mic i:nth-child(4){height:14px}
@keyframes lvl{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
.chat{position:absolute;left:12px;top:202px;z-index:2;width:220px;display:flex;flex-direction:column;gap:5px}
.cm{display:flex;gap:6px;align-items:center;padding:5px 8px;border-radius:var(--r);background:rgba(0,0,0,.45);backdrop-filter:blur(6px);font-size:11px;color:#e7e8f5;white-space:nowrap;overflow:hidden;animation:chatin .4s ease-out}
.cm b{color:var(--c)}
.cm.out{animation:chatout .4s ease-in forwards}
@keyframes chatin{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
@keyframes chatout{to{opacity:0;transform:translateY(-6px)}}
.sboard{position:absolute;right:12px;top:12px;z-index:2;width:286px;border-radius:var(--r);background:rgba(18,20,44,.6);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 16px 40px rgba(0,0,0,.45);padding:9px 0 8px}
.sbt{display:flex;justify-content:space-between;align-items:center;padding:0 12px 6px;color:#fff;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.st2{display:inline-flex;align-items:center;gap:4px;font:700 11.5px var(--mono);color:var(--live);letter-spacing:0;text-transform:none}
.b-stream{margin:0 8px}
.b-stream .brow{height:32px;color:#fff;font-size:12.5px;border-radius:var(--r)}
.b-stream .brow .bar{opacity:.2}
.b-stream .brow .rk{background:rgba(255,255,255,.12);color:rgba(255,255,255,.75)}
.b-stream .brow.r1 .nm{color:var(--live)}
.b-stream .brow .av2{box-shadow:0 0 0 2px rgba(0,0,0,.3)}
.b-stream .brow .dl{color:#0b3d24;background:#5cf2a6}
.lower{position:absolute;left:12px;right:12px;bottom:14px;z-index:2;height:40px;border-radius:var(--r);background:linear-gradient(90deg,rgba(43,89,255,.95),rgba(123,45,255,.95));box-shadow:0 12px 30px rgba(43,89,255,.35);display:flex;align-items:center;gap:10px;padding:0 12px;color:#fff;font-size:14px;white-space:nowrap;overflow:hidden}
.lower .lwr{margin-left:auto;font:600 10.5px var(--mono);opacity:.75}

/* ---- 3 as a video */
.vidwrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:26px;background:radial-gradient(400px 260px at 30% 50%,#e8ebff,#f5f6fb 70%)}
.phone{width:172px;height:306px;border-radius:18px;background:#1a1d2e;padding:6px;box-shadow:0 0 0 1px #2c3150,0 24px 50px rgba(16,20,58,.35);position:relative;flex:none}
.phone::before{content:"";position:absolute;left:50%;top:10px;transform:translateX(-50%);width:44px;height:6px;border-radius:6px;background:#000;z-index:3}
.pscreen{position:relative;height:100%;border-radius:13px;overflow:hidden;padding-bottom:10px !important;background:radial-gradient(180px 160px at 20% 10%,#3b2fd9,transparent 70%),radial-gradient(180px 160px at 90% 90%,#a21caf,transparent 70%),#0b0d18;color:#fff;padding:20px 8px 8px;display:flex;flex-direction:column}
.ptop{display:flex;justify-content:space-between;align-items:center;padding:0 2px}
.rbadge{font-size:8.5px;font-weight:800;letter-spacing:.1em;background:rgba(255,255,255,.14);padding:2px 6px;border-radius:5px}
.ptime2{font:700 9.5px var(--mono);color:rgba(255,255,255,.7)}
.ptitle{padding:5px 2px 4px}
.ptitle b{display:block;font-size:16px;letter-spacing:-.02em;line-height:1.1}
.ptitle span{font-size:9.5px;color:rgba(255,255,255,.6)}
.b-video .brow{height:27px;color:#fff;font-size:10.5px;padding:0 6px;gap:6px;border-radius:7px}
.b-video .brow .bar{opacity:.3}
.b-video .brow .rk{width:16px;height:16px;font-size:8.5px;background:rgba(255,255,255,.14);color:#fff}
.b-video .brow .av2{width:17px;height:17px;font-size:7px;box-shadow:none}
.b-video .brow .pt{font-size:11px;min-width:20px}
.b-video .brow .dl{display:none}
.psoc{display:flex;gap:12px;align-items:center;padding:4px 4px 6px}
.psoc span{display:flex;align-items:center;gap:3px}
.psoc b{font-size:9px}
.caption{margin-top:auto;font-size:9.5px;font-weight:700;line-height:1.3;background:rgba(0,0,0,.6);padding:4px 6px;border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.caption.flash{animation:capin .4s ease-out}
@keyframes capin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.pscreen .pbar{margin-top:7px;height:3px;border-radius:2px;background:rgba(255,255,255,.18);overflow:hidden}
.pscreen .pbar i{display:block;height:100%;width:0;background:var(--live)}
.export{width:196px;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line),0 18px 40px rgba(16,20,58,.12);padding:14px;display:flex;flex-direction:column;gap:7px}
.ext{font-size:15px;letter-spacing:-.01em}
.exs{font-size:11.5px;color:var(--slate);margin-top:-4px}
.exlbl{font-size:10.5px;font-weight:800;color:var(--mute);letter-spacing:.06em;text-transform:uppercase;margin-top:3px}
.ratios{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.ratios span{height:46px;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font:700 10.5px var(--mono);color:var(--slate)}
.ratios span.on{box-shadow:inset 0 0 0 2px var(--blue);color:var(--ink);background:#f3f5ff}
.ratios i{display:block;border-radius:3px;border:2px solid currentColor}
.r916{width:10px;height:17px}.r169{width:20px;height:11px}.r11{width:14px;height:14px}
.themes{display:flex;gap:6px;align-items:center}
.themes span{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--a),var(--b));box-shadow:inset 0 0 0 1px rgba(16,20,58,.12)}
.themes span.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--blue)}
.themes em{margin-left:auto;font-style:normal;font-size:11px;font-weight:700;color:var(--slate);display:flex;align-items:center;gap:5px}
.tg{width:24px;height:14px;border-radius:7px;background:#d6d6db;position:relative}
.tg.on{background:var(--green)}
.tg::after{content:"";position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:#fff;transition:left .2s}
.tg.on::after{left:12px}
.exbtn{position:relative;height:36px;border-radius:var(--r);background:var(--ink);color:#fff;overflow:hidden;margin-top:4px}
.exbtn i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--grad)}
.exbtn span{position:relative;height:100%;display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;font-weight:700;white-space:nowrap}
.exbtn.done{background:var(--green)}

/* ---- 4 on your site */
.v-site .pub{position:absolute;top:34px;left:0;right:0;bottom:0;background:#fbf6ee;overflow:hidden}
.pubnav{display:flex;align-items:center;gap:14px;height:40px;padding:0 14px;background:#2b1d12;color:#e9dcc8;font-size:11.5px;font-weight:600}
.publogo{display:flex;align-items:center;gap:7px;margin-right:auto;color:#fff;font-weight:800;letter-spacing:.02em}
.publogo svg{color:#e8a33d}
.pubbook{background:#e8a33d;color:#2b1d12;padding:5px 10px;border-radius:var(--r);font-weight:800}
.pubbody{display:grid;grid-template-columns:1fr 250px;gap:14px;padding:16px 14px 0;align-items:start;background:radial-gradient(260px 160px at 10% 0%,rgba(232,163,61,.18),transparent 70%)}
.pubtext{display:flex;flex-direction:column;gap:6px}
.tonight{align-self:flex-start;font-size:9.5px;font-weight:800;letter-spacing:.1em;color:#9a4d0f;background:rgba(232,163,61,.22);padding:3px 7px;border-radius:6px}
.pubtext b{font-size:19px;line-height:1.15;color:#2b1d12;letter-spacing:-.02em}
.pubtext > span:not(.tonight){font-size:12px;color:#6b5a48}
.pubmeta{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}
.pubmeta span{font-size:10.5px;font-weight:700;color:#6b5a48;background:#fff;box-shadow:0 0 0 1px rgba(43,29,18,.1);padding:3px 7px;border-radius:6px}
.pubwidget{border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px rgba(43,29,18,.1),0 14px 30px rgba(43,29,18,.14);overflow:hidden}
.pwh{display:flex;align-items:center;justify-content:space-between;padding:9px 10px 7px;font-size:11.5px;font-weight:800;color:#2b1d12}
.pwlive{display:flex;align-items:center;gap:6px}
.pwlive i{width:7px;height:7px;border-radius:50%;background:#e5484d;animation:blinkdot 1.2s infinite}
.pwr{font-size:10.5px;color:#9a8a76;font-weight:700}
.b-site{margin:0 6px}
.b-site .brow{height:29px;font-size:11.5px;padding:0 6px;gap:7px;border-radius:7px}
.b-site .brow .rk{width:17px;height:17px;font-size:9px}
.b-site .brow .av2{width:18px;height:18px;font-size:7.5px}
.b-site .brow .pt{font-size:12px}
.b-site .brow .dl{font-size:9px;padding:1px 4px}
.credit{display:flex;justify-content:space-between;align-items:center;margin-top:6px;border-top:1px solid #efe7db;padding:6px 10px;font-size:10px;font-weight:700;color:#9a8a76}
.nsmark{display:inline-flex;align-items:center;gap:4px;color:#2b1d12}
.snippet{position:absolute;left:14px;bottom:14px;display:flex;align-items:center;gap:8px;max-width:calc(100% - 290px);height:34px;padding:0 10px 0 6px;border-radius:var(--r);background:#10143a;box-shadow:0 12px 26px rgba(16,20,58,.3);overflow:hidden}
.snippet .lbl1{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#10143a;background:var(--live);padding:3px 6px;border-radius:6px;flex:none}
.snippet code{font:600 10.5px var(--mono);color:#c9d3ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- 5 as updates */
.v-feed{background:linear-gradient(#fff,#f7f8fc)}
.feedhead{display:flex;align-items:center;gap:10px;padding:10px 14px 8px}
.feedhead div{flex:1;display:flex;flex-direction:column}
.feedhead b{font-size:16px;letter-spacing:-.01em}
.feedhead div span{font-size:11.5px;color:var(--mute)}
.followbtn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:var(--r);background:rgba(18,183,106,.12);color:#0b7a47;font-size:12px;font-weight:800}
.feed{position:relative;margin:0 14px;height:224px;overflow:hidden}
.feed::before{content:"";position:absolute;left:53px;top:6px;bottom:0;width:2px;background:linear-gradient(#dfe3f0,transparent)}
.fe{position:relative;display:flex;align-items:center;gap:10px;height:44px;padding:0 10px 0 0;font-size:12.5px;white-space:nowrap;border-radius:var(--r)}
.fe time{font:700 11px var(--mono);color:var(--mute);width:38px;flex:none;text-align:right}
.fe .fd{width:12px;height:12px;border-radius:50%;flex:none;background:#fff;box-shadow:inset 0 0 0 3px var(--blue);position:relative;z-index:1}
.fe.k-up .fd{box-shadow:inset 0 0 0 3px var(--green)}
.fe.k-round .fd{box-shadow:inset 0 0 0 3px var(--violet)}
.fe span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;color:#39405e}
.fe span b{color:var(--ink)}
.fe .pill{font-style:normal;font:800 10.5px var(--mono);padding:3px 7px;border-radius:6px;background:rgba(43,89,255,.1);color:var(--blue);flex:none}
.fe .pill.up{background:rgba(18,183,106,.14);color:#0b7a47}
.fe.new{animation:feedin .6s cubic-bezier(.2,.8,.2,1)}
.fe.new span{animation:none}
.fe.new::after{content:"";position:absolute;inset:0;border-radius:var(--r);background:rgba(43,89,255,.08);animation:fadebg 2s ease-out forwards;pointer-events:none}
@keyframes feedin{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes fadebg{to{opacity:0}}

@media (max-width:1180px){.h3top{grid-template-columns:1fr;gap:18px}.stage3{grid-template-columns:1fr;gap:12px;max-width:680px}.flow3{flex-direction:row;justify-content:center}.fdots{transform:rotate(90deg)}.facts4{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){
  .h3 h1{font-size:40px}
  .facts4{grid-template-columns:repeat(2,minmax(0,1fr))}.fk.k-win{grid-column:span 2}
  .osw{overflow:hidden}.osw button{font-size:10.5px;padding:0 2px}.osw button svg{display:none}
  .btn.xl{width:100%}
  .pubbody{grid-template-columns:1fr}.pubtext{display:none}.snippet{display:none}
  .cam,.chat{display:none}.sboard{left:12px;right:12px;width:auto}.vidwrap{gap:12px}.export{width:150px}.oframe{height:340px}
}

/* the connector: the note flows out to wherever it's shown */
.flow3{display:flex;flex-direction:column;align-items:center;gap:8px}
.fdots{display:flex;gap:6px}
.fdots i{width:8px;height:8px;border-radius:50%;background:var(--blue);opacity:.25;animation:flowdot 1.2s infinite}
.fdots i:nth-child(2){animation-delay:.2s}.fdots i:nth-child(3){animation-delay:.4s}
@keyframes flowdot{0%,100%{opacity:.2;transform:translateX(0)}50%{opacity:1;transform:translateX(4px)}}
.flabel{font-size:11px;font-weight:800;color:var(--green);letter-spacing:.04em;text-transform:uppercase}

/* ---- the figures row: five tiles, each with its own colour, icon and motion */
.facts4{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:40px}
.fk{--g1:#2b59ff;--g2:#7b2dff;--tint:rgba(43,89,255,.10);position:relative;display:flex;align-items:center;gap:14px;padding:16px 16px;border-radius:var(--r);background:radial-gradient(160px 110px at 100% 0%,var(--tint),transparent 70%),#fff;box-shadow:0 0 0 1px var(--line),0 10px 26px rgba(16,20,58,.06);overflow:hidden;transition:transform .25s,box-shadow .25s}
.fk::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:linear-gradient(90deg,var(--g1),var(--g2))}
.fk:hover{transform:translateY(-3px);box-shadow:0 0 0 1px var(--line),0 18px 36px var(--tint)}
.fk .fi{position:relative;flex:none;width:48px;height:48px;border-radius:var(--r);display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--g1),var(--g2));box-shadow:0 10px 20px var(--tint),inset 0 1px 0 rgba(255,255,255,.35);overflow:hidden}
.fk .ft{min-width:0;display:flex;flex-direction:column}
.fk .ft b{font-size:23px;line-height:1.1;font-weight:800;letter-spacing:-.03em;white-space:nowrap;background:none;color:var(--g1)}
.fk .ft span{font-size:13px;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-free{--g1:#12b76a;--g2:#0e9384;--tint:rgba(18,183,106,.14)}
.k-lim{--g1:#2b59ff;--g2:#7b2dff;--tint:rgba(91,63,255,.12)}
.k-ways{--g1:#f79009;--g2:#dd2590;--tint:rgba(221,37,144,.11)}
.k-sync{--g1:#06b6d4;--g2:#2b59ff;--tint:rgba(6,182,212,.13)}
.k-win{--g1:#0078d4;--g2:#00a2ed;--tint:rgba(0,120,212,.12)}
/* $0: a light sweeps across the tag */
.k-free .fi::after{content:"";position:absolute;top:-10px;bottom:-10px;width:18px;left:-30px;background:rgba(255,255,255,.55);transform:skewX(-20deg);animation:tagshine 3.6s ease-in-out infinite}
@keyframes tagshine{0%,65%{left:-30px}100%{left:70px}}
/* no limits: the infinity loop keeps drawing itself */
.inf path{fill:none;stroke-width:2.2;stroke-linecap:round}
.inf .base{stroke:rgba(255,255,255,.45)}
.inf .run{stroke:#fff;stroke-dasharray:28 72;animation:infdraw 2.4s linear infinite}
@keyframes infdraw{to{stroke-dashoffset:-100}}
/* 5 ways: shows whichever output the panel above is on */
.k-ways .fi svg{transition:transform .35s,opacity .35s}
.k-ways .fi svg.swap{transform:scale(.4) rotate(-20deg);opacity:0}
.waydots{position:absolute;right:14px;bottom:12px;display:flex;gap:4px}
.waydots i{width:6px;height:6px;border-radius:50%;background:rgba(221,37,144,.2);transition:all .3s}
.waydots i.on{width:16px;border-radius:3px;background:linear-gradient(90deg,#f79009,#dd2590)}
/* 2 seconds: one turn every sync, with a ping */
.k-sync .spin{animation:syncspin 2s cubic-bezier(.6,0,.2,1) infinite}
@keyframes syncspin{0%{transform:rotate(0)}40%,100%{transform:rotate(360deg)}}
.k-sync .ring{position:absolute;inset:6px;border-radius:50%;box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:syncring 2s ease-out infinite}
@keyframes syncring{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}45%{box-shadow:0 0 0 12px rgba(255,255,255,0)}100%{box-shadow:0 0 0 12px rgba(255,255,255,0)}}
/* Windows: the four panes light up in turn */
.k-win .fi svg{animation:winpop 3.2s ease-in-out infinite}
@keyframes winpop{0%,70%,100%{transform:scale(1)}80%{transform:scale(1.18)}90%{transform:scale(.95)}}
@media (prefers-reduced-motion:reduce){.fk *,.fk .fi::after{animation:none !important}}
@media (max-width:1180px){.facts4{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.facts4{grid-template-columns:repeat(2,minmax(0,1fr))}.fk.k-win{grid-column:span 2}}

/* ================= section 1: the dark call-to-action strip ================= */
.strip{position:relative;overflow:hidden;background:var(--night);color:#fff;padding:0}
.strip::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,#5b6cff 25%,#a855f7 55%,#12b76a 80%,transparent)}
.strip .glow{position:absolute;pointer-events:none;border-radius:50%;filter:blur(60px)}
.strip .g1{width:520px;height:220px;left:-120px;top:-120px;background:rgba(68,64,255,.45)}
.strip .g2{width:460px;height:200px;right:-80px;bottom:-140px;background:rgba(168,85,247,.35)}
.strip .wrap{position:relative;z-index:1}
.srow{display:flex;align-items:center;gap:24px;padding:28px 0 24px}
.smark{flex:none;width:58px;height:58px;border-radius:var(--r);display:grid;place-items:center;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 0 34px rgba(91,108,255,.45)}
.stext{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.stext b{font-size:26px;line-height:1.15;font-weight:800;letter-spacing:-.03em;white-space:nowrap}
.stext b .g{background:none;color:#8ea2ff}
.stext > span{font-size:14.5px;color:#b9bcd6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sacts{flex:none;display:flex;gap:10px}
.btn.ghostd{background:rgba(255,255,255,.07);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.btn.ghostd:hover{background:rgba(255,255,255,.12)}
.btn .meta2{font-weight:600;opacity:.8;font-size:12.5px;padding-left:9px;margin-left:1px;border-left:1px solid rgba(255,255,255,.35)}

/* the live ticker along the bottom edge */
.ticker{position:relative;z-index:1;display:flex;align-items:center;height:46px;border-top:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.18)}
.tlabel{flex:none;display:flex;align-items:center;gap:7px;height:100%;padding:0 18px 0 max(32px,calc((100vw - 1280px) / 2 + 32px));font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--live);background:#090b14;position:relative;z-index:2}
.tlabel::after{content:"";position:absolute;right:-40px;top:0;bottom:0;width:40px;background:linear-gradient(90deg,#090b14,transparent)}
.tlabel i{width:7px;height:7px;border-radius:50%;background:var(--live);box-shadow:0 0 10px var(--live);animation:blinkdot 1.2s infinite}
.tview{flex:1;min-width:0;overflow:hidden;height:100%;-webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 4%,#000 94%,transparent)}
.ttrack{display:flex;align-items:center;height:100%;width:max-content;animation:tick 48s linear infinite}
.ticker:hover .ttrack{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}
.ti{display:flex;align-items:center;gap:9px;padding:0 26px;height:100%;font-size:13px;white-space:nowrap;color:#dfe1f2;border-right:1px solid rgba(255,255,255,.07)}
.ti .tic{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;background:var(--c);color:#fff;flex:none}
.ti b{font-weight:700;color:#fff}
.ti .tm{font:600 11.5px var(--mono);color:#9ea2c6}
.ti .tm.live{color:#ffe066}
.ti .tm.live::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#ffd60a;margin-right:6px;vertical-align:1px}

@media (max-width:1100px){.srow{flex-wrap:wrap}.stext b{white-space:normal}.sacts{width:100%}.sacts .btn{flex:1}}
@media (max-width:760px){.smark{display:none}.stext b{font-size:22px}.stext > span{white-space:normal}.sacts{flex-direction:column}.tlabel{padding-left:18px}}

/* ================= section 2: inside the app, all free ================= */
.inapp{background:#fff;padding:88px 0 80px;position:relative}
.inapp::before{content:"";position:absolute;right:0;top:40px;width:520px;height:420px;background:radial-gradient(closest-side,rgba(43,89,255,.07),transparent);pointer-events:none}
.iahead{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:48px;align-items:end;margin-bottom:34px}
.inapp .kicker{display:inline-flex;align-items:center;gap:8px;color:var(--green)}
.kdot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(18,183,106,.15)}
.inapp h2{font-size:44px;line-height:1.06;font-weight:800;letter-spacing:-.035em;max-width:none}
.inapp h2 .g{background:none;color:#12b76a}
.inapp .lede{margin:0;font-size:17px}
.iagrid{display:grid;grid-template-columns:360px minmax(0,1fr);gap:24px;align-items:stretch}

/* the feature list */
.ialist{display:flex;flex-direction:column;gap:6px}
.ia{position:relative;display:flex;align-items:center;gap:13px;padding:10px 12px;border:0;border-radius:var(--r);background:none;text-align:left;cursor:pointer;font-family:var(--f);transition:background .2s;overflow:hidden}
.ia:hover{background:var(--mist)}
.ia .iic{flex:none;width:40px;height:40px;border-radius:var(--r);display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2));box-shadow:0 8px 16px rgba(16,20,58,.12);opacity:.55;transition:opacity .25s,transform .25s}
.ia .itx{display:flex;flex-direction:column;min-width:0}
.ia .itx b{font-size:15.5px;color:var(--slate);transition:color .2s}
.ia .itx span{font-size:13px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ia.on{background:#fff;box-shadow:0 0 0 1px var(--line),0 12px 28px rgba(16,20,58,.08)}
.ia.on .iic{opacity:1;transform:scale(1.05)}
.ia.on .itx b{color:var(--ink)}
.ia.on .itx span{color:var(--slate)}
.ia.on::after{content:"";position:absolute;left:12px;right:12px;bottom:5px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--c1),var(--c2));transform-origin:left;animation:fill 5.5s linear forwards}
.ialist.held .ia.on::after{animation:none;transform:scaleX(1)}

/* the note window */
.iawin{border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px rgba(16,20,58,.12),0 30px 70px rgba(16,20,58,.16);overflow:hidden;display:flex;flex-direction:column}
.iawin .tbar{height:40px;background:#f6f5f3;display:flex;align-items:center;gap:10px;padding:0 12px;border-bottom:1px solid var(--line);position:relative}
.iawin .ttl{flex:1;text-align:center;font-size:13px;font-weight:600;margin-right:60px;white-space:nowrap;transition:opacity .2s}
.freebadge{position:absolute;right:12px;top:10px;height:20px;padding:0 8px;border-radius:6px;background:var(--green);color:#fff;font-size:10.5px;font-weight:800;display:flex;align-items:center;letter-spacing:.04em}
.fbar2{height:38px;display:flex;align-items:center;gap:3px;padding:0 8px;border-bottom:1px solid var(--line)}
.fb{width:28px;height:28px;border-radius:var(--r);display:grid;place-items:center;color:#55555e;font-size:14px;font-weight:800}
.fb.b{color:var(--ink)}
.fsep{width:1px;height:18px;background:var(--line);margin:0 4px}
.fpick{font-size:12.5px;color:#55555e;padding:4px 9px;white-space:nowrap}
.iabody{position:relative;flex:1;min-height:392px}
.sc{position:absolute;inset:0;padding:20px 26px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .35s,transform .35s;font:14.5px/1.55 "Segoe UI",system-ui,sans-serif;color:#1d1d1f}
.sc.on{opacity:1;visibility:visible;transform:none}
.nt{font-weight:700;font-size:17px;margin-bottom:12px}
.hint{position:absolute;left:26px;bottom:16px;font:12.5px var(--f);color:var(--mute)}
.hint kbd{font:700 11px var(--mono);background:var(--mist);box-shadow:inset 0 -1px 0 rgba(16,20,58,.12),0 0 0 1px var(--line);border-radius:5px;padding:1px 6px;color:var(--ink)}
.iastatus{height:32px;border-top:1px solid var(--line);display:flex;align-items:center;gap:8px;padding:0 14px;font-size:12px;color:#8d8d96;white-space:nowrap}

/* 1 tables */
.st{width:100%;border-collapse:collapse;font-size:14px}
.st th{text-align:left;font-weight:700;background:#f3f4f8;padding:7px 10px;border:1px solid #dfe2ea;white-space:nowrap}
.st td{padding:6px 10px;border:1px solid #dfe2ea;white-space:nowrap;height:35px}
.st td.num{text-align:right;font-variant-numeric:tabular-nums}
.st td.cur{box-shadow:inset 0 0 0 2px var(--blue);background:#f5f7ff}
.st td.flash{animation:bump .9s ease-out}
.st tr.new td{animation:rowin .4s ease-out}
@keyframes rowin{from{background:#eef1ff}to{background:transparent}}
.caret2::after{content:"";display:inline-block;width:2px;height:15px;background:var(--ink);vertical-align:-2px;margin-left:1px;animation:blink 1s steps(1) infinite}
.st .low{color:#d92d20;font-weight:700}

/* 2 checklists */
.prog{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.pbar2{flex:1;height:8px;border-radius:4px;background:#eef0f6;overflow:hidden}
.pbar2 i{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,#12b76a,#0e9384);transition:width .5s cubic-bezier(.2,.8,.2,1)}
.prog b{font-size:13px;white-space:nowrap;color:#0b7a47}
.cl{display:grid;grid-template-columns:1fr 1fr;gap:6px 22px}
.ci{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border-radius:var(--r);background:#fafbfd;box-shadow:0 0 0 1px var(--line);transition:background .3s}
.ci .bx{width:18px;height:18px;border-radius:5px;box-shadow:inset 0 0 0 2px #b9bdcc;display:grid;place-items:center;color:#fff;flex:none;transition:all .25s}
.ci.done{background:#f0fbf5}
.ci.done .bx{background:var(--green);box-shadow:none;transform:scale(1.1)}
.ci.done .lbl{color:var(--mute);text-decoration:line-through;text-decoration-color:rgba(16,20,58,.3)}

/* 3 timers and counters */
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tcard{position:relative;border-radius:var(--r);padding:16px 18px;background:#fafbfd;box-shadow:0 0 0 1px var(--line);overflow:hidden}
.tl{display:block;font:700 12px var(--f);color:var(--slate);text-transform:uppercase;letter-spacing:.06em}
.big{display:block;font:800 44px/1.1 var(--mono);letter-spacing:-.03em;margin:6px 0 10px;color:var(--ink)}
.big.money{font-family:var(--f);letter-spacing:-.04em;background:none;color:#f79009}
.tring{height:8px;border-radius:4px;background:#eef0f6;overflow:hidden}
.tring i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#f79009,#e5484d);transition:width 1s linear}
.pbar2.gold i{background:linear-gradient(90deg,#f79009,#e5484d)}
.tgoal{display:block;margin-top:6px;font:12px var(--f);color:var(--mute)}
.don{margin-top:14px;display:flex;flex-direction:column;gap:6px;height:118px;overflow:hidden}
.dn{display:flex;align-items:center;gap:10px;font:13px var(--f);color:#39405e;animation:rowin .6s ease-out}
.dn b{font:800 12px var(--mono);color:#b54708;background:#fff4d6;padding:2px 7px;border-radius:6px}

/* 4 tabs */
.ntabs{display:flex;align-items:flex-end;gap:3px;border-bottom:1px solid var(--line);margin:-4px -4px 14px;padding:0 4px}
.ntabs .t{padding:8px 16px;border-radius:var(--r) var(--r) 0 0;font:600 13.5px var(--f);color:var(--slate);background:var(--mist);white-space:nowrap;transition:all .25s}
.ntabs .t.on{background:#fff;color:var(--ink);font-weight:700;box-shadow:0 0 0 1px var(--line);margin-bottom:-1px;padding-bottom:9px}
.ntabs .t.new{animation:tabin .45s cubic-bezier(.2,.8,.2,1)}
@keyframes tabin{from{opacity:0;transform:translateY(8px) scale(.9)}to{opacity:1;transform:none}}
.tplus{padding:8px 10px;font:700 15px var(--f);color:var(--mute)}
.tplus.press{color:var(--blue);transform:scale(1.3);transition:transform .15s}
.tpage p{margin:0 0 6px}
.tpage .hl{background:#fff176;border-radius:2px}

/* 5 status words */
.sl2{display:flex;flex-direction:column;gap:9px}
.srow2{display:flex;align-items:center;gap:10px;min-height:30px}
.sw{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:6px;font:800 12.5px var(--f);letter-spacing:.02em;transition:all .3s}
.sw.plain{background:transparent;color:var(--ink);padding:0;font-weight:700}
.sw.done{background:rgba(18,183,106,.14);color:#0b7a47}
.sw.blocked{background:rgba(229,72,77,.12);color:#b4232a}
.sw.next{background:rgba(43,89,255,.12);color:#1f45d6}
.sw.waiting{background:rgba(247,144,9,.15);color:#b54708}
.sw.pop{animation:swpop .45s cubic-bezier(.2,.8,.2,1)}
@keyframes swpop{0%{transform:scale(.8)}60%{transform:scale(1.12)}100%{transform:scale(1)}}

/* 6 live data */
.dl2{display:flex;flex-direction:column;gap:10px}
.dr{display:flex;align-items:center;gap:14px;height:46px;padding:0 14px;border-radius:var(--r);background:#fafbfd;box-shadow:0 0 0 1px var(--line)}
.dk{width:80px;font:700 12.5px var(--f);color:var(--slate);text-transform:uppercase;letter-spacing:.05em}
.blk code{font:600 13px var(--mono);color:#7b2dff;background:#f3eeff;padding:3px 8px;border-radius:6px}
.blk.loading code{background:linear-gradient(90deg,#f3eeff 25%,#e4d9ff 50%,#f3eeff 75%);background-size:200% 100%;animation:shimmer 1s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}
.blk .val{display:inline-flex;align-items:center;gap:8px;font:700 15px var(--f);color:var(--ink);animation:rowin .6s ease-out}
.blk .val .lv{width:7px;height:7px;border-radius:50%;background:#e5484d;animation:blinkdot 1.2s infinite}
.blk .val em{font-style:normal;font:600 12px var(--mono);color:var(--mute)}
.blk .val.tick{animation:bump .9s ease-out;border-radius:6px}

/* 7 slides */
.slgrid{display:grid;grid-template-columns:1fr 1.1fr;gap:18px;height:100%}
.slnote{font-size:13.5px}
.sn{padding:6px 10px;border-radius:var(--r);transition:background .3s,box-shadow .3s}
.sn b{display:block;font-size:14px}
.sn span{color:#55555e;font-size:13px}
.sn.on{background:#fdf2fa;box-shadow:inset 3px 0 0 #dd2590}
.dv{display:block;font:700 12px var(--mono);color:#b9bdcc;padding:3px 10px;font-style:normal}
.slscreen{display:flex;flex-direction:column;gap:10px}
.slframe{position:relative;aspect-ratio:16/10;border-radius:var(--r);background:radial-gradient(240px 160px at 20% 10%,#3b2fd9,transparent 70%),radial-gradient(220px 160px at 90% 100%,#a21caf,transparent 70%),#0b0d18;color:#fff;display:flex;flex-direction:column;justify-content:center;padding:22px;box-shadow:0 16px 36px rgba(16,20,58,.25);overflow:hidden}
.slframe b{font:800 22px/1.15 var(--f);letter-spacing:-.02em}
.slframe span{font:14px var(--f);color:#c9cbe6;margin-top:6px}
.slframe.go b,.slframe.go span{animation:slidein .5s cubic-bezier(.2,.8,.2,1)}
@keyframes slidein{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.sldots{display:flex;gap:5px;justify-content:center}
.sldots i{width:7px;height:7px;border-radius:50%;background:#e4e6ef;transition:all .3s}
.sldots i.on{width:20px;border-radius:4px;background:linear-gradient(90deg,#dd2590,#f79009)}
.sllbl{text-align:center;font:600 12px var(--f);color:var(--mute)}

/* 8 every version */
.vgrid{display:grid;grid-template-columns:1fr 230px;gap:18px}
.vtext p{margin:0 0 6px;transition:opacity .3s}
.vtext .gone{background:rgba(229,72,77,.12);text-decoration:line-through;text-decoration-color:rgba(229,72,77,.5);border-radius:2px}
.vtext .add{background:rgba(18,183,106,.14);border-radius:2px}
.vlist{display:flex;flex-direction:column;gap:5px}
.vi{display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border-radius:var(--r);font:13px var(--f);color:var(--slate);white-space:nowrap;transition:all .25s}
.vi time{font:700 12px var(--mono);color:var(--ink);width:78px}
.vi.on{background:#10143a;color:#fff}
.vi.on time{color:#ffd60a}
.vscrub{position:absolute;left:26px;right:26px;bottom:16px;display:flex;align-items:center;gap:12px;font:600 12px var(--f);color:var(--mute)}
.vtrack{flex:1;height:6px;border-radius:3px;background:#eef0f6;position:relative}
.vtrack i{position:absolute;top:50%;left:0;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#10143a;box-shadow:0 0 0 4px rgba(16,20,58,.12);transition:left .5s cubic-bezier(.2,.8,.2,1)}

/* also free */
.also{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:26px}
.alsol{font:800 12px var(--f);color:var(--green);text-transform:uppercase;letter-spacing:.08em;margin-right:6px}
.ac{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:var(--r);background:#f4fbf7;box-shadow:inset 0 0 0 1px rgba(18,183,106,.2);font:600 13px var(--f);color:#1d4b35;white-space:nowrap}
.ac svg{color:var(--green)}

@media (max-width:1180px){.iahead{grid-template-columns:1fr;gap:12px}.iagrid{grid-template-columns:300px minmax(0,1fr)}}
@media (max-width:900px){.iagrid{grid-template-columns:1fr}.ialist{flex-direction:row;overflow:hidden;flex-wrap:wrap}.ia{flex:1 1 45%}.ia .itx span{display:none}}
@media (max-width:760px){.inapp h2{font-size:32px}.cl,.tgrid,.slgrid,.vgrid{grid-template-columns:1fr}.vlist,.slnote{display:none}.big{font-size:34px}.iabody{min-height:420px}.sc{padding:16px}.st{font-size:12.5px}.st th,.st td{padding:5px 6px}}

/* ================= section 3: how it works ================= */
.how3{background:var(--mist);padding:88px 0 84px;border-top:1px solid var(--line);position:relative;overflow:hidden}
.how3::before{content:"";position:absolute;left:-160px;top:-120px;width:620px;height:420px;background:radial-gradient(closest-side,rgba(123,45,255,.08),transparent);pointer-events:none}
.howhead{position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:48px;align-items:end;margin-bottom:44px}
.how3 h2{font-size:44px;line-height:1.06;font-weight:800;letter-spacing:-.035em;max-width:none}
.how3 h2 .g{background:none;color:var(--blue)}
.how3 .lede{margin:0;font-size:17px}

.flow3w{position:relative}
.rail{position:absolute;left:calc(16.66% - 10px);right:calc(16.66% - 10px);top:26px;height:3px;border-radius:2px;background:#dfe3f0}
.rfill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:2px;background:var(--grad);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.rdot{position:absolute;top:50%;left:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px var(--blue),0 0 16px rgba(43,89,255,.7);transition:left .6s cubic-bezier(.2,.8,.2,1)}
.steps3{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.stp{display:flex;flex-direction:column;gap:16px;transition:transform .35s,opacity .35s}
.shead{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
.snum{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font:800 20px var(--f);color:var(--slate);background:#fff;box-shadow:0 0 0 1px var(--line),0 8px 18px rgba(16,20,58,.08);transition:all .35s;position:relative;z-index:1}
.stp.on .snum,.stp.done .snum{color:#fff;background:var(--grad);box-shadow:0 10px 24px rgba(60,60,255,.35)}
.stp.done .snum{background:linear-gradient(135deg,#12b76a,#0e9384);box-shadow:0 8px 18px rgba(18,183,106,.3)}
.shead b{display:block;font-size:20px;letter-spacing:-.02em}
.shead div span{display:block;font-size:14px;color:var(--slate);margin-top:2px}
.svis{height:252px;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line),0 12px 30px rgba(16,20,58,.06);padding:16px;transition:box-shadow .35s,transform .35s;overflow:hidden}
.stp.on .svis{box-shadow:0 0 0 2px rgba(43,89,255,.45),0 22px 44px rgba(43,89,255,.16);transform:translateY(-4px)}

/* step 1: a small note being typed */
.mwin{height:100%;border-radius:var(--r);box-shadow:0 0 0 1px var(--line);overflow:hidden;display:flex;flex-direction:column}
.mbar{height:30px;background:#f6f5f3;display:flex;align-items:center;gap:6px;padding:0 10px;border-bottom:1px solid var(--line)}
.mbar i{width:9px;height:9px;border-radius:50%}
.mbar span{flex:1;text-align:center;font:600 11.5px var(--f);margin-right:34px}
.mdoc{flex:1;padding:12px 14px;font:13px/1.6 "Segoe UI",system-ui,sans-serif;color:#1d1d1f}
.mdoc p{margin:0}
.mdoc .hl{background:#fff176;border-radius:2px}
.mstat{height:26px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 10px;font:11px var(--f);color:#8d8d96}
.mst.saving{color:#55555e}

/* step 2: the sync panel */
.spanel{display:flex;flex-direction:column;gap:9px}
.srow3{display:flex;align-items:center;justify-content:space-between;height:42px;padding:0 12px;border-radius:var(--r);background:var(--mist)}
.sl3{font:700 14px var(--f)}
.tg2{width:42px;height:24px;border-radius:12px;background:#d6d6db;position:relative;transition:background .3s}
.tg2 i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:left .3s cubic-bezier(.2,.8,.2,1)}
.tg2.on{background:var(--green)}
.tg2.on i{left:21px}
.kv{display:flex;align-items:center;gap:10px;height:38px;padding:0 12px;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line);opacity:.35;filter:grayscale(1);transform:translateY(4px);transition:all .4s cubic-bezier(.2,.8,.2,1)}
.kv.show{opacity:1;filter:none;transform:none;box-shadow:inset 0 0 0 1px rgba(43,89,255,.25);background:#f7f9ff}
.kk{width:64px;font:700 11.5px var(--f);color:var(--mute);text-transform:uppercase;letter-spacing:.05em}
.kv code{flex:1;font:700 13px var(--mono);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp{font:800 11.5px var(--f);color:var(--blue);padding:3px 8px;border-radius:6px;background:rgba(43,89,255,.1)}
.seg2{display:flex;gap:4px}
.seg2 i{font-style:normal;font:700 11.5px var(--mono);padding:4px 8px;border-radius:6px;color:var(--slate);background:var(--mist)}
.seg2 i.on{background:var(--ink);color:#fff}

/* step 3: devices lighting up */
.devs3{display:flex;flex-direction:column;gap:8px}
.dv3{display:flex;align-items:center;gap:10px;height:50px;padding:0 12px;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line);transition:all .35s}
.di{width:30px;height:30px;border-radius:var(--r);display:grid;place-items:center;color:#fff;background:var(--c);flex:none;opacity:.45;transition:opacity .35s}
.dn3{flex:1;min-width:0;display:flex;flex-direction:column}
.dn3 b{font-size:13.5px;white-space:nowrap}
.dn3 em{font-style:normal;font-size:11.5px;color:var(--mute);white-space:nowrap}
.ds{font:700 11.5px var(--f);color:var(--mute);padding:3px 8px;border-radius:6px;background:var(--mist);white-space:nowrap}
.dv3.live{background:#f4fbf7;box-shadow:inset 0 0 0 1px rgba(18,183,106,.3)}
.dv3.live .di{opacity:1}
.dv3.live .ds{color:#0b7a47;background:rgba(18,183,106,.14)}
.dv3.live .ds::before{content:"✓ "}
.dv3.me .di{opacity:1}
.dv3.me .ds{color:var(--blue);background:rgba(43,89,255,.1)}

/* trust row */
.trust3{display:flex;align-items:center;gap:26px;margin-top:40px;padding-top:26px;border-top:1px solid var(--line)}
.tr3{flex:1;min-width:0;display:flex;align-items:center;gap:12px}
.ti3{flex:none;width:40px;height:40px;border-radius:var(--r);display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2));box-shadow:0 8px 16px rgba(16,20,58,.1)}
.tr3 div{min-width:0}
.tr3 b{display:block;font-size:14.5px;white-space:nowrap}
.tr3 div span{display:block;font-size:13px;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trust3 .btn{flex:none}

@media (max-width:1180px){.howhead{grid-template-columns:1fr;gap:12px}.trust3{flex-wrap:wrap}.tr3{flex:1 1 40%}}
@media (max-width:900px){.steps3{grid-template-columns:1fr}.rail{display:none}.svis{height:auto;min-height:220px}.shead{flex-direction:row;text-align:left}}
@media (max-width:760px){.how3 h2{font-size:32px}.tr3{flex:1 1 100%}.trust3 .btn{width:100%}}

/* ================= section 4: go live ================= */
.golive{position:relative;overflow:hidden;background:var(--night);color:#e7e8f5;padding:88px 0 80px}
.glg{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none}
.glg.g1{width:620px;height:360px;left:-160px;top:-120px;background:rgba(68,64,255,.35)}
.glg.g2{width:560px;height:320px;right:-140px;bottom:-120px;background:rgba(229,72,77,.22)}
.golive .wrap{position:relative;z-index:1}
.glhead{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:48px;align-items:end;margin-bottom:40px}
.golive .kicker{display:inline-flex;align-items:center;gap:8px;color:var(--live)}
.lvk{width:8px;height:8px;border-radius:50%;background:#e5484d;box-shadow:0 0 0 4px rgba(229,72,77,.25);animation:blinkdot 1.2s infinite}
.golive h2{color:#fff;font-size:44px;line-height:1.06;font-weight:800;letter-spacing:-.035em;max-width:none}
.golive h2 .g{background:none;color:#ffe066}
.golive .lede{margin:0;color:#b9bcd6;font-size:17px}

.glgrid{display:grid;grid-template-columns:minmax(0,.92fr) 70px minmax(0,1.08fr);align-items:stretch}
.glside{display:flex;flex-direction:column;gap:10px;min-width:0}
.sidelbl{font:800 11.5px var(--f);letter-spacing:.1em;text-transform:uppercase;color:#8f93b8}
.glapp,.glpage{flex:none;height:472px;border-radius:var(--r);background:#fff;color:var(--ink);overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 30px 70px rgba(0,0,0,.45);display:flex;flex-direction:column}
.glapp .tbar{height:38px;background:#f6f5f3;display:flex;align-items:center;gap:10px;padding:0 12px;border-bottom:1px solid var(--line)}
.glapp .ttl{flex:1;text-align:center;font-size:12.5px;font-weight:600;margin-right:60px;white-space:nowrap}
.livebar{display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;background:#fff5f5;border-bottom:1px solid rgba(229,72,77,.2);font-size:12.5px;white-space:nowrap}
.lvdot{width:9px;height:9px;border-radius:50%;background:#e5484d;box-shadow:0 0 0 0 rgba(229,72,77,.6);animation:recping 1.5s infinite}
.lvdot.dk{background:#1a1400;animation:none}
@keyframes recping{0%{box-shadow:0 0 0 0 rgba(229,72,77,.55)}80%{box-shadow:0 0 0 9px rgba(229,72,77,0)}100%{box-shadow:0 0 0 0 rgba(229,72,77,0)}}
.livebar b{color:#e5484d;letter-spacing:.06em;font-size:12px}
.lvt{font:700 12px var(--mono);color:#b4232a}
.lvw{display:inline-flex;align-items:center;gap:5px;font-weight:700;color:var(--slate)}
.lvq{display:inline-flex;align-items:center;gap:5px;font-weight:700;color:#7b2dff;background:rgba(123,45,255,.1);padding:3px 8px;border-radius:6px}
.lvq.bump{animation:bump .9s ease-out}
.lvend{font-weight:800;color:#fff;background:#e5484d;padding:4px 10px;border-radius:6px}
.gldoc{flex:1;min-height:0;overflow:hidden;padding:16px 18px;font:14px/1.6 "Segoe UI",system-ui,sans-serif;color:#1d1d1f}
.gldoc p,.gptext p{margin:0 0 3px}
.gldoc .h,.gptext .h{font-weight:700;font-size:16px}
.gldoc .nl,.gptext .nl{color:#3b63f5}
.gldoc .nl .gt{color:#8a8fa6;font-weight:800}
.gldoc .hl,.gptext .hl{background:#fff176;border-radius:2px}
.gldoc .k,.gptext .k{font-weight:700}
.caretw::after{content:"";display:inline-block;width:2px;height:15px;background:#1d1d1f;vertical-align:-3px;margin-left:1px;animation:blink 1s steps(1) infinite}
.glstat{height:30px;border-top:1px solid var(--line);display:flex;align-items:center;gap:8px;padding:0 12px;font:600 11px var(--mono);color:#8d8d96;white-space:nowrap}

.glmid{position:relative;display:flex;align-items:center;justify-content:center}
.glmid::before{content:"";position:absolute;left:6px;right:6px;top:50%;height:2px;background:linear-gradient(90deg,rgba(229,72,77,.2),#e5484d,rgba(255,214,10,.9),rgba(255,214,10,.2))}
.pulse1{position:absolute;top:50%;left:6px;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:#ffd60a;box-shadow:0 0 14px #ffd60a;animation:travel 1.6s linear infinite}
.pulse1.p2{animation-delay:.8s}
@keyframes travel{from{left:6px;opacity:0}15%{opacity:1}85%{opacity:1}to{left:calc(100% - 16px);opacity:0}}
.glmlbl{position:relative;z-index:1;margin-top:-44px;font:800 10.5px var(--f);letter-spacing:.12em;color:#ffd60a}

.glpage{position:relative}
.gph{display:flex;align-items:center;gap:10px;padding:10px 14px 6px}
.gpt{flex:1;min-width:0;display:flex;flex-direction:column}
.gpt b{font-size:16px;letter-spacing:-.01em}
.gpt span{font-size:11.5px;color:var(--mute)}
.gpw{font-size:12.5px;color:var(--slate);white-space:nowrap}
.gpw b{color:var(--ink)}
.gpnow{display:flex;align-items:center;gap:9px;margin:2px 12px 8px;height:34px;padding:0 10px;border-radius:var(--r);background:var(--night);color:#fff;font-size:13px;white-space:nowrap;overflow:hidden;position:relative}
.gpnow::after{content:"";position:absolute;top:0;bottom:0;width:80px;left:-100px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);animation:sheen 4.5s ease-in-out infinite}
.gpnow b.flash{animation:capin .45s ease-out}
.gpbody{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:12px;padding:0 12px 12px;min-height:0}
.gptext{padding:6px 6px;font:14px/1.6 "Segoe UI",system-ui,sans-serif;color:#1d1d1f;overflow:hidden}
.gptext .yc::after{content:"";display:inline-block;width:2px;height:15px;background:#f5b301;vertical-align:-3px;margin-left:1px;box-shadow:0 0 6px #ffd60a;animation:blink 1s steps(1) infinite}
.gpq{display:flex;flex-direction:column;border-radius:var(--r);background:var(--mist);padding:10px;min-height:0}
.gpqh{font:800 12px var(--f);text-transform:uppercase;letter-spacing:.06em;color:var(--slate);display:flex;justify-content:space-between;margin-bottom:8px}
.gpqh span{color:#7b2dff}
.gpql{flex:1;display:flex;flex-direction:column;gap:6px;overflow:hidden}
.gq{background:#fff;border-radius:var(--r);padding:7px 9px;box-shadow:0 0 0 1px var(--line);font-size:12px;line-height:1.35;animation:chatin .4s ease-out}
.gq b{display:flex;justify-content:space-between;font-size:11px;color:var(--c);margin-bottom:2px}
.gq b em{font-style:normal;color:var(--mute);font-weight:700}
.gq.ans{box-shadow:0 0 0 1px rgba(18,183,106,.35);background:#f4fbf7}
.gq.ans b em{color:#0b7a47}
.gpask{display:flex;align-items:center;justify-content:space-between;margin-top:8px;height:32px;padding:0 6px 0 10px;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line);font-size:12px;color:var(--mute)}
.gpask i{font-style:normal;font-weight:800;font-size:11px;color:#fff;background:var(--grad);padding:4px 8px;border-radius:6px}
.gpreact{position:absolute;left:14px;bottom:14px;display:flex;gap:6px}
.gpreact span{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 0 0 1px var(--line),0 4px 10px rgba(16,20,58,.08);font-size:15px}
.gpreact span.tap{animation:tap .4s ease-out}
@keyframes tap{50%{transform:scale(1.25)}}
.floaters{position:absolute;right:236px;bottom:52px;width:50px;height:240px;pointer-events:none}
.floaters span{position:absolute;bottom:0;font-size:20px;animation:floatup 2.6s ease-out forwards;filter:drop-shadow(0 4px 8px rgba(16,20,58,.2))}
.gptext{padding-bottom:44px}

.glfeats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:34px}
.glf{display:flex;align-items:center;gap:11px;padding:14px;border-radius:var(--r);background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.gfi{flex:none;width:38px;height:38px;border-radius:var(--r);display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2));box-shadow:0 8px 18px rgba(0,0,0,.3)}
.glf div{min-width:0}
.glf b{display:block;font-size:14px;color:#fff;white-space:nowrap}
.glf div span{display:block;font-size:12px;color:#9ea2c6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.glcta{display:flex;align-items:center;gap:12px;margin-top:30px;flex-wrap:wrap}
.glcta .btn.live{color:#1a1400}
.glprice{margin-left:8px;font-size:13.5px;color:#9ea2c6}

@media (max-width:1180px){.glhead{grid-template-columns:1fr;gap:12px}.glgrid{grid-template-columns:1fr;gap:16px}.glmid{height:40px}.glmid::before{display:none}.pulse1{display:none}.glmlbl{margin:0}.glfeats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.golive h2{font-size:32px}.gpbody{grid-template-columns:1fr}.gpq{display:none}.glfeats{grid-template-columns:1fr}.glprice{margin:0}.livebar .lvq,.livebar .lvend{display:none}}

/* ================= section 5: on your stream ================= */
.onstream{background:#fff;padding:88px 0 84px;position:relative;overflow:hidden}
.onstream::before{content:"";position:absolute;left:50%;top:180px;width:1200px;height:760px;margin-left:-600px;background:radial-gradient(closest-side,rgba(123,45,255,.09),rgba(221,37,144,.05) 55%,transparent);pointer-events:none}
.oshead{position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:48px;align-items:end;margin-bottom:34px}
.onstream .kicker{display:inline-flex;align-items:center;gap:8px;color:#dd2590}
.onstream h2{font-size:44px;line-height:1.06;font-weight:800;letter-spacing:-.035em;max-width:none}
.onstream h2 .g{background:none;color:#dd2590}
.onstream .lede{margin:0;font-size:17px}

/* the studio: player on top, deck underneath, one object */
.studio{position:relative;border-radius:var(--r);box-shadow:0 0 0 1px rgba(16,20,58,.14),0 40px 90px rgba(40,20,90,.28);overflow:hidden}
.player{background:#0e0b1d}
.pbar3{display:flex;align-items:center;gap:12px;height:44px;padding:0 14px;background:#141026;border-bottom:1px solid rgba(255,255,255,.07);color:#e7e8f5;white-space:nowrap}
.plive{display:inline-flex;align-items:center;gap:6px;background:#e5484d;color:#fff;font:800 11px var(--f);letter-spacing:.06em;padding:3px 8px;border-radius:6px}
.plive i{width:6px;height:6px;border-radius:50%;background:#fff;animation:blinkdot 1.2s infinite}
.ptitle3{flex:1;min-width:0;font-size:14px;overflow:hidden;text-overflow:ellipsis}
.pchan{display:inline-flex;align-items:center;gap:7px;font:700 12.5px var(--f);color:#c9cbe6}
.pav{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#ffb3c7,#c2477a);box-shadow:0 0 0 2px #dd2590}
.pview{display:inline-flex;align-items:center;gap:6px;font:700 12.5px var(--mono);color:#ff8fa3}
.pmain{display:grid;grid-template-columns:minmax(0,1fr) 270px}

/* the game scene */
.canvas{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0a0620}
.game{position:absolute;inset:0;background:linear-gradient(#0d0626 0%,#2a0d55 34%,#6a1b6e 52%,#ff6f7d 60%,#ff9a6b 60.4%,#1a0838 60.5%,#07031a 100%)}
.stars{position:absolute;inset:0 0 45% 0;background-image:radial-gradient(1.5px 1.5px at 8% 12%,#fff,transparent),radial-gradient(1px 1px at 18% 30%,#fff,transparent),radial-gradient(1.5px 1.5px at 30% 8%,#ffd,transparent),radial-gradient(1px 1px at 44% 22%,#fff,transparent),radial-gradient(1.5px 1.5px at 62% 10%,#fff,transparent),radial-gradient(1px 1px at 74% 26%,#fff,transparent),radial-gradient(1.5px 1.5px at 86% 14%,#ffe,transparent),radial-gradient(1px 1px at 94% 34%,#fff,transparent),radial-gradient(1px 1px at 55% 36%,#fff,transparent);animation:twinkle 3s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.55}to{opacity:1}}
/* the sun sets behind the mountains and stops at the horizon */
.sunwrap{position:absolute;left:0;right:0;top:0;height:60.2%;overflow:hidden}
.sun{position:absolute;left:50%;bottom:-16%;width:34%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:linear-gradient(#ffe29a 0%,#ffb25b 40%,#ff5e7e 78%);box-shadow:0 0 90px 30px rgba(255,120,110,.35);-webkit-mask:linear-gradient(#000 52%,transparent 52%) top/100% 100% no-repeat,repeating-linear-gradient(#000 0 9%,transparent 9% 11.5%);mask:linear-gradient(#000 52%,transparent 52%) top/100% 100% no-repeat,repeating-linear-gradient(#000 0 9%,transparent 9% 11.5%)}
.mtns{position:absolute;left:0;right:0;bottom:39.6%;width:100%;height:24%;z-index:1}
.floor{position:absolute;left:0;right:0;bottom:0;height:39.6%;overflow:hidden;background:linear-gradient(#1a0838,#07031a);z-index:1}
.grid3d{position:absolute;left:-60%;right:-60%;top:0;bottom:-40%;background-image:linear-gradient(rgba(255,94,126,.7) 1.5px,transparent 1.5px),linear-gradient(90deg,rgba(255,94,126,.55) 1.5px,transparent 1.5px);background-size:52px 40px;transform:perspective(220px) rotateX(62deg);transform-origin:top;animation:gridrun .9s linear infinite;-webkit-mask:linear-gradient(transparent,#000 30%);mask:linear-gradient(transparent,#000 30%)}
@keyframes gridrun{to{background-position:0 40px}}
.camv{position:absolute;z-index:2;left:2.4%;bottom:20%;width:19%;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:radial-gradient(circle at 50% 30%,#3a1f5c,#1a0b33)}
.camv::before{content:"";position:absolute;inset:0;border-radius:var(--r);padding:2px;background:linear-gradient(135deg,#dd2590,#7b2dff);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;z-index:1}
.camv .host{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:84%;opacity:.95}
.camv span{position:absolute;left:6px;bottom:6px;z-index:2;font:800 10px var(--f);color:#fff;background:rgba(0,0,0,.55);padding:2px 6px;border-radius:5px}

/* overlay widgets: one layout, four looks */
.w{position:absolute;z-index:3;transition:opacity .4s,transform .4s cubic-bezier(.2,.8,.2,1);font-family:var(--f)}
.w.off{opacity:0;transform:translateY(8px) scale(.97);pointer-events:none}
.wt{display:flex;align-items:center;gap:6px;font:800 10px var(--f);letter-spacing:.1em;text-transform:uppercase;padding-bottom:7px;margin-bottom:7px}
.wt em{margin-left:auto;font-style:normal;letter-spacing:.02em;text-transform:none;font-weight:700}
.wgoals{left:2.4%;top:4.5%;width:29%;padding:11px 13px}
.wprog{height:4px;border-radius:2px;overflow:hidden;margin:-2px 0 7px}
.wprog i{display:block;height:100%;width:50%;border-radius:2px;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.gi{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;padding:2.5px 0}
.gi .gb{width:15px;height:15px;border-radius:4px;display:grid;place-items:center;flex:none;font-size:10px;font-weight:900;transition:all .3s}
.gi.done .gb::after{content:"✓"}
.gi.done span{text-decoration:line-through;opacity:.6}
.gi.pop .gb{animation:swpop .45s cubic-bezier(.2,.8,.2,1)}
.wtimer{right:2.4%;top:4.5%;width:23%;padding:11px 13px}
.clock{display:block;font:800 30px/1 var(--mono);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pbrow{display:flex;align-items:center;gap:6px;margin-top:8px;font:700 11px var(--mono);opacity:.9}
.ahead{margin-left:auto;padding:2px 7px;border-radius:5px;font-weight:800}
.wboard{right:2.4%;top:33%;width:27%;padding:11px 13px}
.lb{position:relative;height:128px}
.lr{position:absolute;left:0;right:0;height:24px;display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.lr .lk{width:17px;height:17px;border-radius:50%;display:grid;place-items:center;font:800 9.5px var(--mono);flex:none}
.lr .la{width:6px;height:6px;border-radius:50%;background:var(--c);flex:none;box-shadow:0 0 8px var(--c)}
.lr .ln{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lr .lp{font:800 12px var(--mono);font-variant-numeric:tabular-nums}
.lr.hit .lp{animation:pthit .9s ease-out}
.wnow{left:2.4%;right:2.4%;bottom:4.5%;height:46px;display:flex;align-items:center;gap:12px;padding:0 8px 0 10px;overflow:hidden}
.wnow .np{font:800 10.5px var(--f);letter-spacing:.1em;padding:4px 9px;border-radius:6px;flex:none}
.wnow b{flex:1;min-width:0;font:800 17px var(--f);letter-spacing:-.01em;white-space:nowrap;overflow:hidden}
.wnow b.caret3::after{content:"";display:inline-block;width:2px;height:17px;vertical-align:-3px;margin-left:2px;animation:blink 1s steps(1) infinite;background:currentColor}
.fromnote{display:inline-flex;align-items:center;gap:5px;font:700 10.5px var(--f);padding:4px 8px;border-radius:6px;white-space:nowrap;opacity:.85}
.wnow.typing .fromnote{opacity:1;box-shadow:0 0 0 1px rgba(255,255,255,.35)}

/* Glass */
.th-glass .w:not(.wnow){border-radius:var(--r);color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05));backdrop-filter:blur(12px) saturate(140%);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 0 0 1px rgba(255,255,255,.12),0 16px 40px rgba(0,0,0,.45)}
.th-glass .wt{color:rgba(255,255,255,.8);border-bottom:1px solid rgba(255,255,255,.14)}
.th-glass .wt em{color:#ffd166}
.th-glass .wprog{background:rgba(255,255,255,.15)}.th-glass .wprog i{background:linear-gradient(90deg,#12b76a,#5cf2a6)}
.th-glass .gi .gb{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)}
.th-glass .gi.done .gb{background:#12b76a;box-shadow:0 0 10px rgba(18,183,106,.6);color:#fff}
.th-glass .ahead{background:rgba(18,183,106,.3);color:#7dffc0}
.th-glass .lr .lk{background:rgba(255,255,255,.14)}
.th-glass .lr.r1 .lk{background:linear-gradient(135deg,#ffe066,#f5b301);color:#3d2b00}
.th-glass .wnow{border-radius:var(--r);background:linear-gradient(90deg,rgba(43,89,255,.94),rgba(123,45,255,.94));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 14px 34px rgba(43,89,255,.45)}
.th-glass .wnow .np{background:#ffd60a;color:#1a1400}
.th-glass .fromnote{background:rgba(255,255,255,.16)}
/* Night */
.th-night .w:not(.wnow){border-radius:var(--r);background:rgba(11,13,24,.92);box-shadow:inset 0 0 0 1px rgba(255,214,10,.35),0 16px 40px rgba(0,0,0,.45);color:#e7e8f5}
.th-night .wt{color:#ffd60a;border-bottom:1px solid rgba(255,214,10,.2)}
.th-night .wt em{color:#e7e8f5}
.th-night .wprog{background:rgba(255,214,10,.15)}.th-night .wprog i{background:#ffd60a}
.th-night .gi .gb{box-shadow:inset 0 0 0 1.5px #ffd60a}
.th-night .gi.done .gb{background:#ffd60a;color:#1a1400;box-shadow:none}
.th-night .clock{color:#ffd60a}.th-night .ahead{background:#ffd60a;color:#1a1400}
.th-night .lr .lk{background:rgba(255,214,10,.14);color:#ffd60a}
.th-night .wnow{border-radius:var(--r);background:rgba(11,13,24,.95);color:#fff;box-shadow:inset 0 -3px 0 #ffd60a,0 14px 34px rgba(0,0,0,.45)}
.th-night .wnow .np{background:#ffd60a;color:#1a1400}
.th-night .fromnote{background:rgba(255,214,10,.14);color:#ffd60a}
/* Chalk */
.th-chalk .w:not(.wnow){border-radius:var(--r);background:#1f3a2e;box-shadow:inset 0 0 0 3px #7a5a30,inset 0 0 0 4px #5b4222,0 14px 34px rgba(0,0,0,.45);color:#f1f5ea}
.th-chalk .wt{color:#b9e3c6;border-bottom:1px dashed rgba(241,245,234,.3)}
.th-chalk .wt em{color:#f1f5ea}
.th-chalk .wprog{background:rgba(241,245,234,.15)}.th-chalk .wprog i{background:#f1f5ea}
.th-chalk .gi .gb{box-shadow:inset 0 0 0 1.5px #f1f5ea}
.th-chalk .gi.done .gb{background:#f1f5ea;color:#1f3a2e;box-shadow:none}
.th-chalk .clock{color:#fff}.th-chalk .ahead{background:#f1f5ea;color:#1f3a2e}
.th-chalk .lr .lk{background:rgba(241,245,234,.15)}
.th-chalk .wnow{border-radius:var(--r);background:#1f3a2e;color:#f1f5ea;box-shadow:inset 0 0 0 3px #7a5a30,0 14px 34px rgba(0,0,0,.45)}
.th-chalk .wnow .np{background:#f1f5ea;color:#1f3a2e}
.th-chalk .fromnote{background:rgba(241,245,234,.14)}
/* Terminal */
.th-term .w:not(.wnow){border-radius:var(--r);background:rgba(0,0,0,.85);box-shadow:inset 0 0 0 1px #33ff99,0 0 24px rgba(51,255,153,.2);color:#33ff99}
.th-term .w,.th-term .w b,.th-term .w span,.th-term .w em,.th-term .wt{font-family:var(--mono) !important}
.th-term .wt{color:#33ff99;border-bottom:1px solid rgba(51,255,153,.3)}
.th-term .wprog{background:rgba(51,255,153,.15)}.th-term .wprog i{background:#33ff99}
.th-term .gi .gb{box-shadow:inset 0 0 0 1.5px #33ff99}
.th-term .gi.done .gb{background:#33ff99;color:#000;box-shadow:none}
.th-term .clock{color:#33ff99;text-shadow:0 0 14px rgba(51,255,153,.6)}.th-term .ahead{background:#33ff99;color:#000}
.th-term .lr .lk{background:rgba(51,255,153,.15);color:#33ff99}
.th-term .lr .la{background:#33ff99;box-shadow:0 0 8px #33ff99}
.th-term .wnow{border-radius:var(--r);background:rgba(0,0,0,.9);color:#33ff99;box-shadow:inset 0 0 0 1px #33ff99,0 0 24px rgba(51,255,153,.25)}
.th-term .wnow .np{background:#33ff99;color:#000}
.th-term .fromnote{background:rgba(51,255,153,.14);color:#33ff99}

/* chat */
.chat3{display:flex;flex-direction:column;background:#120e22;border-left:1px solid rgba(255,255,255,.07);min-height:0}
.chh{display:flex;justify-content:space-between;align-items:center;height:40px;padding:0 14px;font:800 11.5px var(--f);letter-spacing:.08em;text-transform:uppercase;color:#c9cbe6;border-bottom:1px solid rgba(255,255,255,.06)}
.chh span{font:700 11px var(--mono);letter-spacing:0;text-transform:none;color:#8f93b8}
.chl{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:7px;padding:10px 14px;overflow:hidden}
.cmsg{font:13px/1.4 var(--f);color:#dcdde8;animation:chatin .35s ease-out}
.cmsg b{color:var(--c);margin-right:5px}
.cmsg.sys{font:700 12px var(--f);color:#ffd166;background:rgba(255,209,102,.08);border-radius:var(--r);padding:5px 8px}
.chin{margin:0 12px 12px;height:36px;display:flex;align-items:center;padding:0 12px;border-radius:var(--r);background:rgba(255,255,255,.06);font:13px var(--f);color:#8f93b8}

/* the deck */
.deck{display:grid;grid-template-columns:minmax(0,.9fr) 56px minmax(0,1.1fr);align-items:center;gap:0;background:#fff;border-top:1px solid var(--line);padding:18px}
.dnote{border-radius:var(--r);box-shadow:0 0 0 1px var(--line),0 10px 24px rgba(16,20,58,.07);overflow:hidden;background:#fff}
.dnbar{height:32px;display:flex;align-items:center;gap:6px;padding:0 10px;background:#f6f5f3;border-bottom:1px solid var(--line)}
.dnbar i{width:9px;height:9px;border-radius:50%}
.dnbar b{flex:1;text-align:center;font:600 12px var(--f)}
.dnlive{display:inline-flex;align-items:center;gap:5px;font:800 10.5px var(--f);color:#dd2590;background:rgba(221,37,144,.1);padding:2px 7px;border-radius:6px}
.dnlive i{width:6px;height:6px;border-radius:50%;background:#dd2590;animation:blinkdot 1.2s infinite}
.dnbody{padding:10px 14px 12px;font:13.5px/1.55 "Segoe UI",system-ui,sans-serif;color:#1d1d1f;height:176px;overflow:hidden}
.dnbody p{margin:0}
.dnnow{color:#3b63f5;font-weight:600;white-space:nowrap;overflow:hidden}
.dnnow .gt{color:#8a8fa6;font-weight:800}
.dnnow #dnnow.caret2::after{content:"";display:inline-block;width:2px;height:14px;background:#1d1d1f;vertical-align:-2px;margin-left:1px;animation:blink 1s steps(1) infinite}
.dnchk{display:flex;align-items:center;gap:8px}
.cb{width:14px;height:14px;border-radius:4px;box-shadow:inset 0 0 0 1.5px #b9bdcc;display:grid;place-items:center;flex:none;font-style:normal;font-size:9.5px;font-weight:900;color:#fff;transition:all .25s}
.dnchk.done .cb{background:var(--green);box-shadow:none}
.dnchk.done .cb::after{content:"✓"}
.dnchk.done{color:#8d8d96}
.dnchk.flash{animation:rowin .8s ease-out}
.dnmeta{margin-top:6px !important;font:600 11.5px var(--mono);color:#7b2dff}
.darrow{display:grid;place-items:center;color:#dd2590;animation:nudge 1.4s ease-in-out infinite}
@keyframes nudge{50%{transform:translateX(4px)}}
.dctrl{display:grid;gap:12px}
.dcr{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:12px}
.dcl{font:800 11px var(--f);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.field2{display:flex;align-items:center;gap:8px;height:40px;padding:0 6px 0 11px;border-radius:var(--r);background:var(--mist);box-shadow:inset 0 0 0 1px var(--line)}
.field2 svg{color:var(--green);flex:none}
.field2 code{flex:1;min-width:0;font:700 12.5px var(--mono);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp2{font:800 11.5px var(--f);color:#fff;background:var(--blue);padding:6px 11px;border-radius:7px;cursor:pointer}
.themes3{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.themes3 button,.chips3 button{display:flex;align-items:center;justify-content:center;gap:7px;height:38px;border:0;border-radius:var(--r);background:#fff;font:700 12.5px var(--f);color:var(--slate);cursor:pointer;box-shadow:inset 0 0 0 1px var(--line);white-space:nowrap;transition:all .2s}
.themes3 button:hover,.chips3 button:hover{color:var(--ink)}
.themes3 button.on{box-shadow:inset 0 0 0 2px #dd2590;color:var(--ink);background:#fdf2fa}
.sw2{width:18px;height:18px;border-radius:5px;display:block;flex:none}
.s-glass{background:linear-gradient(135deg,#2b59ff,#7b2dff)}
.s-night{background:#0b0d18;box-shadow:inset 0 -3px 0 #ffd60a}
.s-chalk{background:#1f3a2e;box-shadow:inset 0 0 0 2px #7a5a30}
.s-term{background:#000;box-shadow:inset 0 0 0 1px #33ff99}
.chips3{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.chips3 button::before{content:"";width:8px;height:8px;border-radius:50%;background:#d6d6db;transition:all .2s}
.chips3 button.on{color:var(--ink);box-shadow:inset 0 0 0 1px rgba(18,183,106,.45);background:#f4fbf7}
.chips3 button.on::before{background:var(--green);box-shadow:0 0 0 3px rgba(18,183,106,.18)}

/* steps and button */
.osfoot{display:flex;align-items:center;gap:24px;margin-top:30px}
.ossteps{flex:1;min-width:0;display:flex;align-items:center;gap:12px;font-size:14px;color:var(--slate);white-space:nowrap}
.ossteps span{display:inline-flex;align-items:center;gap:9px}
.ossteps b{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;color:#fff;background:linear-gradient(135deg,#dd2590,#7b2dff);flex:none}
.ossteps i{flex:1;min-width:16px;height:2px;border-radius:1px;background:linear-gradient(90deg,#f0c6e2,#d9c8ff)}

@media (max-width:1180px){.oshead{grid-template-columns:1fr;gap:12px}.pmain{grid-template-columns:1fr}.chat3{display:none}.deck{grid-template-columns:1fr}.darrow{transform:rotate(90deg);height:40px;animation:none}.osfoot{flex-direction:column;align-items:flex-start}.ossteps{flex-wrap:wrap}.ossteps i{display:none}}
@media (max-width:760px){.onstream h2{font-size:32px}.camv,.wboard{display:none}.wgoals{width:46%}.wtimer{width:40%}.clock{font-size:20px}.wnow b{font-size:13px}.wnow{height:36px}.fromnote{display:none}.dcr{grid-template-columns:1fr;gap:6px}.themes3,.chips3{grid-template-columns:1fr 1fr}.ptitle3{display:none}}

/* ================= section 6: replays and video ================= */
.vidsec{position:relative;overflow:hidden;background:#0b0d18;color:#e7e8f5;padding:88px 0 84px}
.vglow{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none}
.vglow.v1{width:640px;height:380px;right:-160px;top:-120px;background:rgba(123,45,255,.3)}
.vglow.v2{width:560px;height:320px;left:-160px;bottom:-140px;background:rgba(6,182,212,.18)}
.vidsec .wrap{position:relative;z-index:1}
.vhead{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:48px;align-items:end;margin-bottom:36px}
.vidsec .kicker{display:inline-flex;align-items:center;gap:8px;color:#7dd3fc}
.vidsec h2{color:#fff;font-size:44px;line-height:1.06;font-weight:800;letter-spacing:-.035em;max-width:none}
.vidsec h2 .g{background:none;color:#7dd3fc}
.vidsec .lede{margin:0;color:#b9bcd6;font-size:17px}

.editor{border-radius:var(--r);background:#121526;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 40px 90px rgba(0,0,0,.5);overflow:hidden}
.edtop{display:flex;align-items:center;gap:14px;height:44px;padding:0 16px;background:#161a2e;border-bottom:1px solid rgba(255,255,255,.06);white-space:nowrap}
.edfile{display:inline-flex;align-items:center;gap:8px;font:700 13.5px var(--f);color:#fff}
.edfile svg{color:#7dd3fc}
.edmeta{margin-left:auto;font:600 12px var(--mono);color:#8f93b8}
.edmain{display:grid;grid-template-columns:minmax(0,1fr) 360px}

/* monitor: fixed box, the frame inside changes shape */
.monitor{height:430px;display:grid;place-items:center;background:radial-gradient(420px 260px at 50% 40%,rgba(123,45,255,.16),transparent 70%),repeating-linear-gradient(45deg,rgba(255,255,255,.015) 0 10px,transparent 10px 20px);border-right:1px solid rgba(255,255,255,.06)}
.mframe{position:relative;border-radius:var(--r);overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 24px 60px rgba(0,0,0,.55);transition:width .55s cubic-bezier(.2,.8,.2,1),height .55s cubic-bezier(.2,.8,.2,1)}
.mframe.f169{width:640px;height:360px}
.mframe.f916{width:214px;height:380px}
.mframe.f11{width:370px;height:370px}
.mscreen{position:absolute;inset:0;display:flex;flex-direction:column;background:linear-gradient(#fff,#f7f8fc)}
.mtopb{display:flex;align-items:center;gap:8px;padding:10px 12px 0}
.rpl{font:800 9.5px var(--f);letter-spacing:.1em;color:#fff;background:linear-gradient(135deg,#2b59ff,#7b2dff);padding:3px 7px;border-radius:6px}
.spd{font:800 10.5px var(--mono);color:#7b2dff;background:rgba(123,45,255,.1);padding:2px 6px;border-radius:6px}
.mtime{margin-left:auto;font:700 11px var(--mono);color:var(--slate)}
.mnote{flex:1;min-height:0;overflow:hidden;padding:10px 16px 0;font:13.5px/1.55 "Segoe UI",system-ui,sans-serif;color:#1d1d1f;display:flex;flex-direction:column;justify-content:flex-end}
.f916 .mnote{font-size:11.5px;padding:8px 10px 0}
.f11 .mnote{font-size:12.5px}
.mnote p{margin:0}
.mnote p.new{animation:linein .5s ease-out}
@keyframes linein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.mtitle{padding:8px 16px 0;font:800 16px/1.3 "Segoe UI",system-ui,sans-serif;color:#1d1d1f}
.f916 .mtitle{font-size:13px;padding:6px 10px 0}
.mnote .h{font-weight:800;font-size:1.15em}
.mnote .nl{color:#3b63f5;font-weight:600}
.mnote .ck::before{content:"✓";display:inline-grid;place-items:center;width:15px;height:15px;margin-right:7px;border-radius:4px;background:#12b76a;color:#fff;font-size:10px;font-weight:900;vertical-align:-2px}
.mnote .dn{display:inline-block;background:rgba(18,183,106,.14);color:#0b7a47;font-weight:800;padding:0 6px;border-radius:5px;margin-right:4px}
.mnote .qa b{color:#7b2dff}
.mcap{margin:10px 12px 12px;padding:6px 10px;border-radius:var(--r);background:rgba(11,13,24,.88);color:#fff;font:700 12.5px var(--f);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .25s}
.f916 .mcap{font-size:10.5px;margin:8px}
.mcap.off{opacity:0}
.mcap.flash{animation:capin .35s ease-out}

.expanel{padding:18px;display:flex;flex-direction:column;gap:14px}
.exrow{display:flex;flex-direction:column;gap:8px}
.exrow.two{flex-direction:row;gap:10px}
.exl{font:800 10.5px var(--f);letter-spacing:.1em;text-transform:uppercase;color:#8f93b8}
.shapes,.lens{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.shapes button,.lens button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 4px 8px;border:0;border-radius:var(--r);background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);color:#b9bcd6;cursor:pointer;font-family:var(--f);transition:all .2s}
.shapes button:hover,.lens button:hover{background:rgba(255,255,255,.07)}
.shapes button.on,.lens button.on{background:rgba(125,211,252,.1);box-shadow:inset 0 0 0 2px #7dd3fc;color:#fff}
.shapes b,.lens b{font:800 12.5px var(--f)}
.shapes em,.lens em{font-style:normal;font:600 10.5px var(--f);color:#8f93b8;white-space:nowrap}
.sh{display:block;border:2px solid currentColor;border-radius:3px;margin-bottom:3px}
.s169{width:24px;height:14px}.s916{width:11px;height:19px}.s11{width:16px;height:16px}
.xtg{flex:1;display:flex;align-items:center;justify-content:space-between;height:38px;padding:0 10px;border-radius:var(--r);background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);font:700 12.5px var(--f);color:#dcdde8;cursor:pointer}
.tg4{width:32px;height:18px;border-radius:9px;background:rgba(255,255,255,.18);position:relative;transition:background .25s;flex:none}
.tg4::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left .25s cubic-bezier(.2,.8,.2,1)}
.tg4.on{background:#12b76a}.tg4.on::after{left:16px}
.exbtn2{position:relative;height:46px;border-radius:var(--r);background:linear-gradient(135deg,#2b59ff,#7b2dff);color:#fff;overflow:hidden;cursor:pointer;box-shadow:0 12px 30px rgba(60,60,255,.35)}
.exbtn2 i{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(255,255,255,.22)}
.exbtn2 span{position:relative;height:100%;display:flex;align-items:center;justify-content:center;gap:8px;font:800 14px var(--f);white-space:nowrap}
.exbtn2.done{background:linear-gradient(135deg,#12b76a,#0e9384);box-shadow:0 12px 30px rgba(18,183,106,.3)}
.exsub{display:flex;justify-content:space-between;font:600 11.5px var(--f);color:#8f93b8;margin-top:-6px;white-space:nowrap}
.srt{color:#7dd3fc}
.restream{display:flex;flex-direction:column;gap:2px;padding:11px 12px;border-radius:var(--r);background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);font:800 13px var(--f);color:#fff;cursor:pointer;position:relative;padding-left:36px}
.restream svg{position:absolute;left:12px;top:13px;color:#f0abfc}
.restream em{font-style:normal;font:600 11.5px var(--f);color:#8f93b8}

/* the timeline */
.tline{position:relative;border-top:1px solid rgba(255,255,255,.06);padding:8px 16px 14px 16px;background:#0f1222;cursor:pointer}
.ruler{position:relative;height:18px;margin-left:86px;font:600 10px var(--mono);color:#6b6f92}
.ruler span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.ruler span:first-child{transform:none}.ruler span:last-child{transform:translateX(-100%)}
.ruler span:first-child::after{left:0}.ruler span:last-child::after{left:auto;right:0}
.ruler span::after{content:"";position:absolute;left:50%;top:13px;width:1px;height:5px;background:#3a3f5e}
.trk{display:flex;align-items:center;height:30px;margin-top:4px}
.tl2{width:86px;flex:none;font:700 11px var(--f);color:#8f93b8}
.bars,.chaps,.caps{position:relative;flex:1;height:100%}
.bars{display:flex;align-items:flex-end;gap:2px}
.bars i{flex:1;border-radius:2px 2px 0 0;background:linear-gradient(#7dd3fc,#2b59ff);opacity:.45;transition:opacity .2s}
.bars i.past{opacity:1}
.chaps .ch{position:absolute;top:3px;bottom:3px;border-radius:6px;padding:0 8px;display:flex;align-items:center;font:700 11px var(--f);color:#fff;white-space:nowrap;overflow:hidden;opacity:.55;transition:opacity .25s,box-shadow .25s}
.chaps .ch.on{opacity:1;box-shadow:0 0 0 2px rgba(255,255,255,.5)}
.caps .cp3{position:absolute;top:8px;bottom:8px;border-radius:4px;background:rgba(240,171,252,.35)}
.caps .cp3.on{background:#f0abfc}
.phead{position:absolute;top:6px;bottom:8px;left:102px;width:2px;background:#fff;box-shadow:0 0 12px rgba(125,211,252,.9);pointer-events:none}
.phead i{position:absolute;top:0;left:-6px;width:14px;height:12px;border-radius:3px 3px 7px 7px;background:#fff}

.vfeats{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.vf{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:var(--r);background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);font:600 13px var(--f);color:#dcdde8;white-space:nowrap}
.vf svg{color:#7dd3fc}

@media (max-width:1180px){.vhead{grid-template-columns:1fr;gap:12px}.edmain{grid-template-columns:1fr}.monitor{border-right:0;border-bottom:1px solid rgba(255,255,255,.06)}.mframe.f169{width:min(640px,86vw);height:min(360px,48vw)}}
@media (max-width:760px){.vidsec h2{font-size:32px}.monitor{height:360px}.mframe.f169{width:86vw;height:48vw}.mframe.f916{width:170px;height:300px}.mframe.f11{width:280px;height:280px}.edmeta{display:none}.tl2{width:64px}.ruler{margin-left:64px}.phead{left:80px}}

/* ================= section 7: share updates ================= */
.sharesec{background:#fff;padding:88px 0 84px;position:relative;overflow:hidden}
.sharesec::before{content:"";position:absolute;left:-200px;top:120px;width:700px;height:560px;background:radial-gradient(closest-side,rgba(18,183,106,.07),transparent);pointer-events:none}
.shhead{position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:48px;align-items:end;margin-bottom:36px}
.sharesec .kicker{display:inline-flex;align-items:center;gap:8px;color:var(--green)}
.sharesec h2{font-size:44px;line-height:1.06;font-weight:800;letter-spacing:-.035em;max-width:none}
.sharesec h2 .g{background:none;color:#12b76a}
.sharesec .lede{margin:0;font-size:17px}

.shgrid{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,1fr);grid-template-rows:318px 318px;gap:16px}
.shnote{grid-row:1 / span 2;position:relative;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px rgba(16,20,58,.12),0 30px 70px rgba(16,20,58,.16);display:flex;flex-direction:column;overflow:visible}
.shnote .tbar{height:40px;background:#f6f5f3;display:flex;align-items:center;gap:10px;padding:0 12px;border-bottom:1px solid var(--line);border-radius:var(--r) var(--r) 0 0}
.shnote .ttl{flex:1;text-align:center;font-size:13px;font-weight:600;margin-right:60px}
.shdoc{flex:1;padding:18px 20px;font:14.5px/1.65 "Segoe UI",system-ui,sans-serif;color:#1d1d1f;overflow:hidden}
.shdoc p{margin:0}
.shdoc .h{font-weight:800;font-size:17px;margin-bottom:6px}
.shdoc .it{display:flex;align-items:center;gap:8px}
.shdoc .it .pr{margin-left:auto;font:700 13.5px var(--mono);color:#55555e}
.shdoc .sw5{font:800 11.5px var(--f);padding:1px 7px;border-radius:5px;letter-spacing:.02em}
.sw5.out{background:rgba(229,72,77,.12);color:#b4232a}
.sw5.new{background:rgba(18,183,106,.14);color:#0b7a47}
.sw5.back{background:rgba(247,144,9,.15);color:#b54708}
.shdoc .it.gone .nm{text-decoration:line-through;color:#8d8d96}
.shdoc .caret4::after{content:"";display:inline-block;width:2px;height:15px;background:#1d1d1f;vertical-align:-3px;margin-left:1px;animation:blink 1s steps(1) infinite}
.shdoc .note2{margin-top:10px;color:#55555e;font-size:13px}
.shto{margin:0 16px 14px;padding:12px;border-radius:var(--r);background:var(--mist);display:flex;flex-direction:column;gap:7px}
.stl{font:800 10.5px var(--f);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:2px}
.sti{display:flex;align-items:center;gap:9px;font:700 13px var(--f);color:var(--ink);white-space:nowrap}
.sti i{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;color:#fff;background:var(--c);flex:none}
.sti em{margin-left:auto;font-style:normal;font:600 11.5px var(--f);color:var(--mute)}
.sti.hit i{animation:swpop .45s cubic-bezier(.2,.8,.2,1)}
.shstat{height:34px;border-top:1px solid var(--line);display:flex;align-items:center;gap:8px;padding:0 14px;font-size:12px;color:#8d8d96;border-radius:0 0 var(--r) var(--r);background:#fff}
.shsync{display:inline-flex;align-items:center;gap:6px;color:#0b7a47;font-weight:700}
.shsync i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(18,183,106,.2)}
.shstat .saving{color:#55555e}
.shnote.pulse{box-shadow:0 0 0 2px rgba(18,183,106,.5),0 30px 70px rgba(18,183,106,.18)}

.tile{border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line),0 14px 34px rgba(16,20,58,.07);display:flex;flex-direction:column;overflow:hidden;transition:box-shadow .3s}
.tile.hit{box-shadow:0 0 0 2px rgba(18,183,106,.55),0 14px 34px rgba(18,183,106,.14)}
.tlab{display:flex;align-items:center;gap:9px;height:44px;padding:0 14px;font:800 14px var(--f);border-bottom:1px solid var(--line);white-space:nowrap}
.tlab em{margin-left:auto;font-style:normal;font:700 11.5px var(--f);color:var(--mute)}
.tic2{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2))}
.tbody{flex:1;min-height:0;position:relative}

/* website */
.t-site .tbody{background:#faf6f0;display:flex;flex-direction:column}
.mc{flex:1;display:flex;flex-direction:column;min-height:0}
.mcnav{display:flex;align-items:center;gap:12px;height:34px;padding:0 12px;background:#3b2a1e;color:#f3e6d3;font:600 11px var(--f)}
.mcnav b{margin-right:auto;font:800 13px var(--f);color:#fff;letter-spacing:.01em}
.mcw{margin:10px 12px 12px;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px rgba(59,42,30,.12),0 8px 20px rgba(59,42,30,.08);display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
.mcwh{display:flex;align-items:center;justify-content:space-between;padding:8px 12px 6px;font-size:13px;color:#3b2a1e}
.upd{font:700 10.5px var(--f);color:#0b7a47}
.upd.flash{animation:bump .9s ease-out;border-radius:4px}
.mclist{flex:1;padding:0 12px;display:flex;flex-direction:column;gap:2px;overflow:hidden}
.mi{display:flex;align-items:center;gap:7px;height:27px;font-size:12.5px;color:#3b2a1e;border-bottom:1px dashed #efe6da;animation:linein .45s ease-out}
.mi .pr{margin-left:auto;font:700 12px var(--mono);color:#7a6552}
.mi.gone .nm{text-decoration:line-through;color:#b0a08f}
.mi .bd{font:800 9.5px var(--f);padding:1px 6px;border-radius:5px;letter-spacing:.04em}
.mi .bd.out{background:#fde8e8;color:#b4232a}.mi .bd.new{background:#dcfae9;color:#0b7a47}.mi .bd.back{background:#fff1d6;color:#b54708}
.mcfoot{padding:5px 12px;font:700 9.5px var(--f);color:#a8998a;text-align:right;border-top:1px solid #f3ece2}

/* followers */
.fbody{padding:12px 14px;display:flex;flex-direction:column}
.ffh{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.ffh div{flex:1;display:flex;flex-direction:column}
.ffh div b{font-size:14px}
.ffh div span{font-size:11.5px;color:var(--mute)}
.ffh div span b{font-size:11.5px;color:var(--ink)}
.fbtn{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border-radius:var(--r);background:rgba(18,183,106,.12);color:#0b7a47;font:800 11.5px var(--f)}
.ffl{position:relative;flex:1;min-height:0;overflow:hidden}
.ffl::before{content:"";position:absolute;left:47px;top:4px;bottom:0;width:2px;background:linear-gradient(#dfe3f0,transparent)}
.fe2{position:relative;display:flex;align-items:center;gap:9px;height:38px;font-size:12.5px;white-space:nowrap}
.fe2 time{width:38px;font:700 11px var(--mono);color:var(--mute);text-align:right;flex:none}
.fe2 .fd2{width:10px;height:10px;border-radius:50%;flex:none;background:#fff;box-shadow:inset 0 0 0 3px var(--c);z-index:1}
.fe2 span{overflow:hidden;text-overflow:ellipsis;color:#39405e}
.fe2 span b{color:var(--ink)}
.fe2.new{animation:feedin .6s cubic-bezier(.2,.8,.2,1)}
.toast{position:absolute;left:14px;right:14px;bottom:12px;display:flex;align-items:center;gap:8px;height:34px;padding:0 12px;border-radius:var(--r);background:var(--ink);color:#fff;font:700 12px var(--f);opacity:0;transform:translateY(10px);transition:all .35s cubic-bezier(.2,.8,.2,1)}
.toast.on{opacity:1;transform:none}
.toast svg{color:#5cf2a6}

/* chat */
.cbody{padding:10px 12px;display:flex;flex-direction:column;gap:7px;background:#eef2f7}
.chtop{display:flex;align-items:center;gap:9px;padding-bottom:6px;border-bottom:1px solid #dfe5ee}
.cav{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#06b6d4,#2b59ff);color:#fff;font:800 10px var(--f)}
.chtop div{display:flex;flex-direction:column}
.chtop b{font-size:12.5px}
.chtop span{font-size:10.5px;color:var(--mute)}
.bub{max-width:80%;padding:6px 10px;border-radius:var(--r);font-size:12.5px;line-height:1.35}
.bub.me{align-self:flex-end;background:#2b59ff;color:#fff}
.bub.them{align-self:flex-start;background:#fff;box-shadow:0 0 0 1px #dfe5ee}
.card4{align-self:flex-end;width:78%;border-radius:var(--r);overflow:hidden;background:#fff;box-shadow:0 0 0 1px #dfe5ee,0 6px 14px rgba(16,20,58,.08)}
.c4img{position:relative;height:84px;padding:10px 12px;background:linear-gradient(135deg,#2b59ff,#7b2dff);color:#fff;display:flex;flex-direction:column;gap:3px}
.c4img b{font-size:14px;letter-spacing:-.01em}
.c4img span{font-size:11px;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c4img span.flash{animation:capin .45s ease-out}
.c4img em{position:absolute;right:10px;bottom:8px;font:700 9.5px var(--mono);font-style:normal;opacity:.75}
.c4txt{padding:7px 10px;display:flex;flex-direction:column}
.c4txt b{font-size:12px}
.c4txt span{font-size:10.5px;color:#0b7a47;font-weight:700}

/* paper */
.qbody{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;padding:14px;background:radial-gradient(260px 200px at 20% 30%,#fff7ea,#fff 70%)}
.tent{width:138px;padding:12px 12px 10px;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px #eadfcf,0 14px 26px rgba(59,42,30,.14);display:flex;flex-direction:column;align-items:center;gap:8px;transform:rotate(-2.5deg)}
.tk{font:800 11.5px/1.25 var(--f);color:#3b2a1e;text-align:center}
.qr{width:112px;height:112px}
.qr svg{display:block;width:100%;height:100%}
.tu{font:700 9px var(--mono);color:#7a6552}
.moment{display:flex;flex-direction:column;gap:6px;min-width:0}
.ml{font:800 10.5px var(--f);letter-spacing:.08em;text-transform:uppercase;color:#b54708}
.moment code{font:700 10.5px var(--mono);color:var(--ink);background:var(--mist);padding:7px 9px;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mh{font-size:12px;color:var(--slate)}

.shfoot{display:flex;align-items:center;gap:22px;margin-top:28px}
.shf{display:inline-flex;align-items:center;gap:7px;font:700 14px var(--f);color:#1d4b35}
.shf svg{color:var(--green)}
.shfoot .btn{margin-left:auto}

@media (max-width:1180px){.shhead{grid-template-columns:1fr;gap:12px}.shgrid{grid-template-columns:1fr 1fr;grid-template-rows:auto}.shnote{grid-row:auto;grid-column:1 / span 2;height:360px}.tile{height:318px}.shfan{display:none}}
@media (max-width:760px){.sharesec h2{font-size:32px}.shgrid{grid-template-columns:1fr}.shnote{grid-column:auto}.shfoot{flex-direction:column;align-items:flex-start}.shfoot .btn{margin-left:0;width:100%}}

/* ================= section 8: API and teams ================= */
.apisec{background:var(--mist);padding:88px 0 84px;border-top:1px solid var(--line);position:relative;overflow:hidden}
.apisec::before{content:"";position:absolute;right:-180px;top:-80px;width:720px;height:520px;background:radial-gradient(closest-side,rgba(123,45,255,.08),transparent);pointer-events:none}
.aphead{position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:48px;align-items:end;margin-bottom:36px}
.apisec .kicker{display:inline-flex;align-items:center;gap:8px;color:#7b2dff}
.apisec h2{font-size:44px;line-height:1.06;font-weight:800;letter-spacing:-.035em;max-width:none}
.apisec h2 .g{background:none;color:#7b2dff}
.apisec .lede{margin:0;font-size:17px}
.apgrid{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:18px}
.apleft,.apright{display:flex;flex-direction:column;gap:18px;min-width:0}

/* the code panel */
.code{border-radius:var(--r);background:#0f1222;box-shadow:0 0 0 1px rgba(16,20,58,.2),0 30px 70px rgba(16,20,58,.22);overflow:hidden;display:flex;flex-direction:column}
.ctabs{display:flex;align-items:center;gap:2px;height:44px;padding:0 8px;background:#151a30;border-bottom:1px solid rgba(255,255,255,.06)}
.ctabs button{height:30px;padding:0 12px;border:0;border-radius:var(--r);background:none;font:700 12.5px var(--f);color:#8f93b8;cursor:pointer}
.ctabs button:hover{color:#fff}
.ctabs button.on{background:rgba(255,255,255,.08);color:#fff}
.crun{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:var(--r);background:linear-gradient(135deg,#12b76a,#0e9384);color:#fff;font:800 12px var(--f);cursor:pointer;transition:transform .15s}
.crun.press{transform:scale(.94)}
.csrc{margin:0;height:196px;padding:14px 16px;font:500 12.5px/1.65 var(--mono);color:#dcdde8;white-space:pre;overflow:hidden}
.csrc .k{color:#c4a1ff}.csrc .s{color:#86efac}.csrc .u{color:#7dd3fc}.csrc .c{color:#6b6f92}.csrc .n{color:#fdba74}
.csrc .hl{background:rgba(125,211,252,.12);border-radius:3px}
.eps{display:flex;flex-direction:column;gap:2px;padding:10px 16px 12px;border-top:1px solid rgba(255,255,255,.06)}
.ep{display:flex;align-items:center;gap:10px;height:25px;white-space:nowrap}
.vb{width:48px;text-align:center;font:800 10px var(--mono);padding:2px 0;border-radius:5px;flex:none}
.vb.post{background:rgba(92,242,166,.16);color:#5cf2a6}.vb.patch{background:rgba(253,186,116,.16);color:#fdba74}.vb.put{background:rgba(125,211,252,.16);color:#7dd3fc}
.ep code{font:600 12px var(--mono);color:#dcdde8}
.ep em{margin-left:auto;font-style:normal;font:600 11.5px var(--f);color:#8f93b8}
.cres{display:flex;align-items:center;gap:10px;height:44px;padding:0 16px;border-top:1px solid rgba(255,255,255,.06);background:#0c0f1d;white-space:nowrap;overflow:hidden}
.st201{font:800 11.5px var(--mono);color:#0b3d24;background:#5cf2a6;padding:3px 8px;border-radius:6px}
.cms{font:700 11.5px var(--mono);color:#8f93b8}
.cres code{font:600 12px var(--mono);color:#b9bcd6;overflow:hidden;text-overflow:ellipsis}
.cres.flash{animation:resin .6s ease-out}
@keyframes resin{from{background:rgba(92,242,166,.18)}to{background:#0c0f1d}}

/* Stream Deck */
.deck2{border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line),0 12px 30px rgba(16,20,58,.07);padding:14px}
.dk2h{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.dk2h b{font-size:14.5px}
.dk2h span{font-size:12.5px;color:var(--mute)}
.keys{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.key{aspect-ratio:1;border-radius:var(--r);background:#1a1d2e;color:#c9cbe6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font:700 10.5px var(--f);text-align:center;box-shadow:inset 0 -3px 0 rgba(0,0,0,.4),0 4px 10px rgba(16,20,58,.15);transition:all .15s;white-space:nowrap}
.key svg{color:#7dd3fc}
.key.press{transform:translateY(2px) scale(.96);background:linear-gradient(135deg,#2b59ff,#7b2dff);color:#fff;box-shadow:0 0 0 3px rgba(123,45,255,.25),0 0 24px rgba(123,45,255,.5)}
.key.press svg{color:#fff}

/* the team note */
.tnote{border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px rgba(16,20,58,.12),0 30px 70px rgba(16,20,58,.14);overflow:hidden;display:flex;flex-direction:column;height:350px}
.tnbar{display:flex;align-items:center;gap:10px;height:44px;padding:0 12px;background:#f6f5f3;border-bottom:1px solid var(--line)}
.tnbar b{font-size:13px}
.writers{margin-left:auto;display:flex;align-items:center}
.wav{width:24px;height:24px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font:800 9px var(--f);margin-left:-6px;box-shadow:0 0 0 2px #f6f5f3}
.writers em{font-style:normal;font:700 11.5px var(--f);color:var(--slate);margin-left:8px}
.tnbody{flex:1;min-height:0;overflow:hidden;padding:12px 16px;font:13.5px/1.6 "Segoe UI",system-ui,sans-serif;color:#1d1d1f;display:flex;flex-direction:column;justify-content:flex-end}
.tl3{position:relative;display:flex;align-items:center;gap:8px;padding:2px 0 2px 10px;border-left:3px solid var(--c);margin:2px 0;white-space:nowrap}
.tl3 .who{font:800 10px var(--f);color:#fff;background:var(--c);padding:1px 6px;border-radius:5px;flex:none}
.tl3 .tx{overflow:hidden;text-overflow:ellipsis}
.tl3 .dn2{font:800 11px var(--f);color:#0b7a47;background:rgba(18,183,106,.14);padding:0 6px;border-radius:5px;flex:none}
.tl3 .cb2{width:14px;height:14px;border-radius:4px;box-shadow:inset 0 0 0 1.5px #b9bdcc;flex:none;display:grid;place-items:center;font-size:9.5px;font-weight:900;color:#fff}
.tl3.ticked .cb2{background:var(--green);box-shadow:none}
.tl3.ticked .cb2::after{content:"✓"}
.tl3.ticked .tx{color:#8d8d96;text-decoration:line-through}
.tl3.new{animation:linein .5s ease-out}
.tl3 .cur{display:inline-block;position:relative;width:2px;height:15px;background:var(--c);vertical-align:-3px;margin-left:1px}
.tl3 .cur::before{content:attr(data-n);position:absolute;bottom:15px;left:-1px;font:800 9px var(--f);color:#fff;background:var(--c);padding:0 4px;border-radius:4px 4px 4px 0;white-space:nowrap}
.cmt{display:flex;align-items:center;gap:6px;align-self:flex-start;margin:0 0 3px 22px;padding:3px 9px;border-radius:var(--r);background:#f0fbf8;box-shadow:0 0 0 1px rgba(14,147,132,.35);font:600 11.5px var(--f);color:#39405e;white-space:nowrap;animation:linein .4s ease-out}
.cmt b{color:#0e9384;flex:none}

/* webhooks */
.hooks{border-radius:var(--r);background:#0f1222;box-shadow:0 0 0 1px rgba(16,20,58,.2),0 16px 40px rgba(16,20,58,.16);overflow:hidden;flex:none;height:219px;display:flex;flex-direction:column}
.hkh{display:flex;align-items:center;gap:10px;height:40px;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.06);white-space:nowrap}
.hkh b{font-size:13px;color:#fff}
.hkh code{margin-left:auto;font:600 11.5px var(--mono);color:#7dd3fc}
.hkl{flex:1;min-height:0;padding:6px 14px;display:flex;flex-direction:column;gap:2px;overflow:hidden}
.hk{display:flex;align-items:center;gap:10px;height:28px;font:600 12px var(--mono);color:#b9bcd6;white-space:nowrap;animation:feedin .5s cubic-bezier(.2,.8,.2,1)}
.hk time{color:#6b6f92;width:62px;flex:none}
.hk .ev{color:#c4a1ff;flex:1;overflow:hidden;text-overflow:ellipsis}
.hk .ok{color:#0b3d24;background:#5cf2a6;padding:1px 6px;border-radius:5px;font-weight:800}
.hk .ms{color:#8f93b8;width:52px;text-align:right}

.apfoot{display:flex;align-items:center;gap:18px;margin-top:28px}
.apf{display:inline-flex;align-items:center;gap:7px;font:700 13.5px var(--f);color:var(--ink);white-space:nowrap}
.apf i{width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 20%,transparent)}
.apsp{flex:1}

@media (max-width:1180px){.aphead{grid-template-columns:1fr;gap:12px}.apgrid{grid-template-columns:1fr}}
@media (max-width:760px){.apisec h2{font-size:32px}.keys{grid-template-columns:repeat(3,1fr)}.csrc{font-size:11px}.hk .ms{display:none}.apsp{display:none}.apfoot .btn{width:100%}}

/* ================= section 9: free, and Premium ================= */
.plansec{position:relative;overflow:hidden;background:var(--night);color:#e7e8f5;padding:88px 0 88px}
.plg{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none}
.plg.p1{width:700px;height:420px;left:-180px;top:-140px;background:rgba(18,183,106,.22)}
.plg.p2{width:640px;height:400px;right:-160px;bottom:-160px;background:rgba(123,45,255,.3)}
.plansec .wrap{position:relative;z-index:1}
.plhead{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:48px;align-items:end;margin-bottom:38px}
.plansec .kicker{display:inline-flex;align-items:center;gap:9px;color:#b9bcd6}
.kfree{background:var(--green);color:#fff;font:800 11px var(--f);letter-spacing:.06em;padding:3px 8px;border-radius:6px}
.plansec h2{color:#fff;font-size:44px;line-height:1.06;font-weight:800;letter-spacing:-.035em;max-width:none}
.plansec h2 .g{background:none;color:#a78bfa}
.plansec .lede{margin:0;color:#b9bcd6;font-size:17px}

.plgrid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.95fr);gap:20px;align-items:stretch}
/* free: bright, bigger */
.pfree{position:relative;border-radius:var(--r);background:#fff;color:var(--ink);padding:28px;box-shadow:0 0 0 2px rgba(18,183,106,.55),0 0 60px rgba(18,183,106,.25),0 40px 90px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:22px;justify-content:space-between}
.pfh{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.plbl{display:inline-block;font:800 12px var(--f);letter-spacing:.1em;text-transform:uppercase;color:#0b7a47;background:rgba(18,183,106,.12);padding:4px 10px;border-radius:6px}
.plbl.prem{color:#fff;background:var(--grad)}
.pprice{display:flex;align-items:baseline;gap:10px;margin:10px 0 4px}
.pprice b{font:800 64px/1 var(--f);letter-spacing:-.05em}
.pfree .pprice b{background:none;color:#12b76a}
.pprice span{font:700 17px var(--f);color:var(--slate)}
.psub{font-size:14.5px;color:var(--slate)}
.pcols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding-top:20px;border-top:1px solid var(--line)}
.pcol{display:flex;flex-direction:column;gap:9px;min-width:0}
.pcol b{display:flex;align-items:center;gap:7px;font-size:14px;margin-bottom:2px}
.pcol b svg{color:var(--green)}
.pcol span{position:relative;padding-left:22px;font-size:13.5px;color:#39405e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcol span::before{content:"✓";position:absolute;left:0;top:1px;width:15px;height:15px;border-radius:50%;background:rgba(18,183,106,.14);color:#0b7a47;font-size:9.5px;font-weight:900;display:grid;place-items:center}
.pcol span.in{animation:tickin .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes tickin{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.pstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.pstats div{padding:12px 14px;border-radius:var(--r);background:var(--mist);display:flex;flex-direction:column;gap:2px;min-width:0}
.pstats b{font:800 22px/1.1 var(--f);letter-spacing:-.03em;background:none;color:#12b76a;white-space:nowrap}
.pstats span{font-size:12px;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pkeep{display:flex;align-items:center;gap:9px;padding:12px 14px;border-radius:var(--r);background:#f4fbf7;box-shadow:inset 0 0 0 1px rgba(18,183,106,.25);font:700 13.5px var(--f);color:#1d4b35}
.pkeep svg{color:var(--green);flex:none}

/* premium: dark glass */
.pprem{position:relative;border-radius:var(--r);padding:28px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 40px 90px rgba(0,0,0,.4);display:flex;flex-direction:column;gap:16px}
.pprem::before{content:"";position:absolute;inset:0;border-radius:var(--r);padding:1px;background:linear-gradient(135deg,rgba(123,45,255,.8),rgba(43,89,255,.2) 40%,rgba(240,171,252,.6));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.pprem .pprice b{color:#fff}
.pprem .pprice span,.pprem .psub{color:#9ea2c6}
.pperiod{display:inline-flex;gap:4px;padding:4px;border-radius:var(--r);background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);margin-top:12px}
.pperiod button{border:0;background:none;color:#c9cbe6;font:700 13.5px var(--f);padding:7px 14px;border-radius:var(--r);cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.pperiod button.on{background:#fff;color:var(--ink)}
.pperiod em{font-style:normal;font-size:11.5px;font-weight:700;color:#0b7a4b;background:#e3f8ee;border-radius:var(--r);padding:1px 7px}
.pgroups{display:flex;flex-direction:column;gap:8px}
.pg{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:var(--r);background:rgba(255,255,255,.04);transition:background .25s}
.pg:hover,.pg.glow{background:rgba(255,255,255,.08)}
.pgi{flex:none;width:34px;height:34px;border-radius:var(--r);display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2));box-shadow:0 8px 18px rgba(0,0,0,.3)}
.pg div{min-width:0}
.pg b{display:block;font-size:14px;color:#fff}
.pg div span{display:block;font-size:12.5px;color:#9ea2c6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btn.prem2{margin-top:4px;justify-content:center;background:#7b2dff;color:#fff;box-shadow:0 12px 30px rgba(123,45,255,.4)}
.btn.prem2 svg{margin-left:6px}
.pfine{text-align:center;font-size:12px;color:#8f93b8}

@media (max-width:1180px){.plhead{grid-template-columns:1fr;gap:12px}.plgrid{grid-template-columns:minmax(0,1fr)}.pfree,.pprem{min-width:0}}
@media (max-width:760px){.pstats{grid-template-columns:1fr 1fr}.plansec h2{font-size:32px}.pfh{flex-direction:column;align-items:flex-start}.pfh .btn{width:100%}.pcols{grid-template-columns:1fr}.pprice b{font-size:52px}.pfree,.pprem{padding:20px}}

/* ================= section 10: questions, open a note, the closing band ================= */
.qsec{background:#fff;padding:88px 0 80px;position:relative}
.qhead{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:48px;align-items:end;margin-bottom:34px}
.qsec h2{font-size:44px;line-height:1.06;font-weight:800;letter-spacing:-.035em;max-width:none}
.qsec h2 .g{background:none;color:var(--blue)}
.qsec .lede{margin:0;font-size:17px}
.qgrid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px;align-items:start}
.qlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.qa2{display:flex;gap:14px;padding:18px;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line),0 10px 24px rgba(16,20,58,.05);transition:box-shadow .2s,transform .2s}
.qa2:hover{box-shadow:0 0 0 1px rgba(43,89,255,.3),0 16px 32px rgba(16,20,58,.08);transform:translateY(-2px)}
.qi{flex:none;width:36px;height:36px;border-radius:var(--r);display:grid;place-items:center;color:#fff;background:var(--c);font:800 12px var(--f);box-shadow:0 8px 16px rgba(16,20,58,.12)}
.qa2 b{display:block;font-size:15.5px;margin-bottom:5px}
.qa2 p{margin:0;font-size:14px;line-height:1.55;color:var(--slate)}
.qa2 a{color:var(--blue);font-weight:700;text-decoration:none}
.qa2 a:hover{text-decoration:underline}

.openbox2{position:sticky;top:96px;border-radius:var(--r);background:var(--night);color:#e7e8f5;padding:22px;box-shadow:0 30px 70px rgba(16,20,58,.25);overflow:hidden}
.openbox2::before{content:"";position:absolute;right:-80px;top:-80px;width:260px;height:220px;border-radius:50%;background:radial-gradient(closest-side,rgba(123,45,255,.45),transparent);pointer-events:none}
.obh{position:relative;display:flex;align-items:center;gap:12px;margin-bottom:18px}
.obi{width:42px;height:42px;border-radius:var(--r);display:grid;place-items:center;color:#fff;background:var(--grad);box-shadow:0 10px 22px rgba(60,60,255,.4)}
.obh b{display:block;font-size:18px;color:#fff}
.obh span{font-size:13px;color:#9ea2c6}
.openbox2 .openform{position:relative;display:flex;flex-direction:column;gap:10px}
.openbox2 .field{display:flex;align-items:center;gap:8px;height:50px;padding:0 14px;border-radius:var(--r);background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.openbox2 .field:focus-within{box-shadow:inset 0 0 0 2px #7b8cff}
.openbox2 .pre{font:700 13px var(--mono);color:#8f93b8}
.openbox2 input{flex:1;min-width:0;border:0;background:none;outline:0;font:700 15px var(--mono);color:#fff}
.openbox2 input::placeholder{color:#6b6f92}
.obtn{justify-content:center;width:100%}
.openbox2 .formerr{margin:0;font-size:12.5px;color:#ff8fa3}
.obnotes{position:relative;display:flex;flex-direction:column;gap:7px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08)}
.obnotes span{display:flex;align-items:center;gap:8px;font-size:13px;color:#b9bcd6}
.obnotes svg{color:#5cf2a6;flex:none}

/* closing band */
.closer{position:relative;overflow:hidden;background:var(--night);padding:96px 0}
.clg{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none}
.clg.c1{width:760px;height:420px;left:50%;top:-160px;margin-left:-560px;background:rgba(43,89,255,.35)}
.clg.c2{width:680px;height:400px;left:50%;bottom:-200px;margin-left:-60px;background:rgba(123,45,255,.35)}
.closer .wrap{position:relative;z-index:1}
.clbox{display:flex;flex-direction:column;align-items:center;text-align:center}
.clmark{width:76px;height:76px;border-radius:var(--r);display:grid;place-items:center;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 0 50px rgba(91,108,255,.5);margin-bottom:22px}
.closer h2{color:#fff;font-size:56px;line-height:1.02;font-weight:800;letter-spacing:-.045em;max-width:none}
.closer h2 .g{background:none;color:#8ea2ff}
.closer p{margin:16px 0 0;font-size:17px;color:#b9bcd6}
.clacts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px}
.clouts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:30px}
.clouts span{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:var(--r);background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);font:700 13px var(--f);color:#9ea2c6;transition:all .3s}
.clouts span.on{color:#fff;background:rgba(123,140,255,.18);box-shadow:inset 0 0 0 1px rgba(142,162,255,.5),0 0 22px rgba(91,108,255,.35)}

@media (max-width:1180px){.qhead{grid-template-columns:1fr;gap:12px}.qgrid{grid-template-columns:1fr}.openbox2{position:relative;top:auto}}
@media (max-width:760px){.qsec h2{font-size:32px}.qlist{grid-template-columns:1fr}.closer h2{font-size:38px}.clacts .btn{width:100%}}

/* ================= note pages: notesocket.com/{code} (approved preview: passcode, the note, no note) ================= */
body[data-page="note"]{background:var(--mist)}
.chip.ncode{background:var(--mist);color:var(--ink);font-family:var(--mono)}
.lockcard .chip.ncode{background:#eef0f7}
.crumbs .chip.ncode{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.nstate{display:none}
body[data-view="lock"] .nstate[data-state="lock"],body[data-view="wrong"] .nstate[data-state="lock"],body[data-view="locked"] .nstate[data-state="lock"],
body[data-view="note"] .nstate[data-state="note"],body[data-view="missing"] .nstate[data-state="missing"],body[data-view="loading"] .nstate[data-state="loading"]{display:block}

/* passcode screen */
.lockpage{min-height:calc(100vh - 69px);padding:72px 0 96px;position:relative;overflow:hidden}
.lockpage::before{content:"";position:absolute;left:50%;top:-160px;transform:translateX(-50%);width:900px;height:520px;background:radial-gradient(closest-side,rgba(123,45,255,.14),transparent);pointer-events:none}
.lockcard{position:relative;max-width:480px;margin:0 auto;background:#fff;border-radius:var(--r);box-shadow:0 0 0 1px var(--line),0 24px 60px rgba(16,20,58,.12);padding:36px 34px 0;text-align:center}
.lockicon{width:64px;height:64px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;background:var(--grad);color:#fff;box-shadow:0 12px 28px rgba(60,60,255,.3)}
.lockicon.grey{background:#e4e6ef;color:var(--slate);box-shadow:none}
.lockcard h1{font-size:30px;line-height:1.15;font-weight:800;letter-spacing:-.03em;margin:14px 0 8px}
.lockcard .sub{margin:0 auto 22px;color:var(--slate);font-size:15px;max-width:380px}
.passform{text-align:left}
.passform .field{height:52px}
.passform .field input{font-size:18px;letter-spacing:.12em}
.passform .show{border:0;background:none;font:700 13px var(--f);color:var(--blue);cursor:pointer;padding:6px 4px}
.remember{display:flex;align-items:center;gap:9px;margin:14px 2px 18px;font-size:14px;color:var(--slate);cursor:pointer}
.remember input{width:16px;height:16px;accent-color:var(--blue)}
.btn.wide{width:100%}
.nmsg{min-height:22px;margin:12px 2px 0;font-size:13.5px;font-weight:600;color:#b4232a;text-align:center}
.field.bad{box-shadow:inset 0 0 0 2px var(--red),0 0 0 4px rgba(229,72,77,.12)}
.field.off{opacity:.55}
.btn[disabled]{opacity:.5;cursor:not-allowed;filter:none;box-shadow:none}
.lockfoot{margin:22px -34px 0;padding:18px 34px;border-top:1px solid var(--line);background:#fafbfd;border-radius:0 0 var(--r) var(--r);display:flex;align-items:center;gap:14px;text-align:left}
.lockfoot div{flex:1;min-width:0}
.lockfoot b{display:block;font-size:14px}
.lockfoot span{display:block;font-size:13px;color:var(--slate)}
.nloading{min-height:calc(100vh - 69px);place-items:center;color:var(--slate);font-weight:600}
body[data-view="loading"] .nstate.nloading{display:grid}

/* the note */
.notepage{padding:30px 0 80px}
.nbar{display:flex;align-items:flex-end;gap:20px;margin-bottom:20px}
.ntitle{flex:1;min-width:0}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.ntitle h1{font-size:36px;line-height:1.1;font-weight:800;letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nacts{display:flex;gap:10px;flex:none}
.pulse-dot{width:7px;height:7px;border-radius:50%;background:#12b76a;box-shadow:0 0 0 0 rgba(18,183,106,.6);animation:ping 1.6s infinite}
.chip.sync.flash{background:rgba(18,183,106,.24)}
.ngrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start}
.paper{background:#fff;border-radius:var(--r);box-shadow:0 0 0 1px var(--line),0 14px 34px rgba(16,20,58,.07);overflow:hidden}
.ptabs{height:46px;display:flex;align-items:flex-end;gap:2px;padding:0 12px;background:#f6f5f3;border-bottom:1px solid var(--line);overflow-x:auto;overflow-y:hidden}
.ntab{height:36px;padding:0 16px;border:0;background:none;border-radius:var(--r) var(--r) 0 0;font:600 13.5px var(--f);color:var(--slate);cursor:pointer;white-space:nowrap;flex:none}
.ntab:hover{color:var(--ink);background:rgba(0,0,0,.035)}
.ntab.on{background:#fff;color:var(--ink);font-weight:700;box-shadow:0 0 0 1px var(--line);margin-bottom:-1px;height:37px}
.ptabs .taddr{align-self:center;margin-left:auto;padding-left:12px;font:500 12px var(--mono);color:var(--mute);white-space:nowrap}
.pbody{padding:30px 40px 40px;min-height:520px;font-family:"Segoe UI",system-ui,sans-serif;font-size:14.5px;line-height:1.6;color:#1d1d1f;overflow-wrap:anywhere}
.pbody p{margin:0;white-space:pre-wrap;tab-size:4}
.pbody hr{border:0;border-top:1px solid #d4d2ce;margin:14px 0}
.pbody .new{animation:landed 2.4s ease-out}
/* a label box: its colour bar across the top, the name after a tag, a faint wash inside the border */
.lbox{margin:14px 0;border-radius:var(--r);box-shadow:inset 0 0 0 1.5px var(--lc);background:color-mix(in srgb,var(--lc) 4%,#fff);overflow:hidden}
.lbox .lbar{height:28px;display:flex;align-items:center;gap:7px;padding:0 15px;background:var(--lc);color:#fff;font:600 12.5px "Segoe UI",system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lbox .lbar svg{flex:none}
.lbox .lin{padding:9px 15px 11px}
.nside{display:flex;flex-direction:column;gap:14px}
.ncard{background:#fff;border-radius:var(--r);box-shadow:0 0 0 1px var(--line);padding:18px}
.ctitle{font-size:13px;font-weight:700;color:var(--mute);margin-bottom:10px}
.nfacts{display:grid;gap:8px}
.nfacts div{display:flex;justify-content:space-between;gap:12px;font-size:14px;white-space:nowrap}
.nfacts span{color:var(--slate)}
.nfacts b{overflow:hidden;text-overflow:ellipsis}
.live-note{margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--slate)}
.nlog{display:flex;flex-direction:column;gap:2px;height:190px;overflow:hidden}
.nlog .day{font-size:12px;font-weight:700;color:var(--mute);margin:6px 0 2px}
.nlog .day:first-child{margin-top:0}
.nev{display:flex;gap:10px;font-size:13.5px;padding:5px 0;white-space:nowrap}
.nev time{font:600 12px var(--mono);color:var(--blue);width:40px;flex:none;padding-top:2px}
.nev span{overflow:hidden;text-overflow:ellipsis;color:var(--slate)}
.nev b{color:var(--ink);font-weight:700}
.nev.new{animation:landed 2.4s ease-out;border-radius:var(--r)}
.upsell{display:flex;flex-direction:column;gap:6px;background:linear-gradient(160deg,#f1f3ff,#fff)}
.upsell b{font-size:15.5px}
.upsell span{font-size:13.5px;color:var(--slate);margin-bottom:8px}
.ntoast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:90;padding:11px 16px;border-radius:var(--r);background:var(--ink);color:#fff;font-size:14px;font-weight:600;box-shadow:0 14px 34px rgba(16,20,58,.35);white-space:nowrap}

@media (max-width:1100px){.ngrid{grid-template-columns:1fr}.nside{display:grid;grid-template-columns:1fr 1fr}.upsell{grid-column:span 2}}
@media (max-width:760px){
  .nbar{flex-direction:column;align-items:stretch}
  .nacts{flex-wrap:wrap}.nacts .btn{flex:1}
  .ntitle h1{font-size:28px}
  .pbody{padding:22px 20px 28px;min-height:420px}
  .ptabs .taddr{display:none}
  .nside{grid-template-columns:1fr}.upsell{grid-column:auto}
  .lockcard{padding:28px 20px 0}.lockfoot{margin:22px -20px 0;padding:16px 20px;flex-direction:column;align-items:stretch}
  .ntoast{left:16px;right:16px;transform:none;white-space:normal;text-align:center}
}

/* checklists on a note's page (as the app draws them: a progress line over each list, round ticks) */
.pbody .ncl{margin:6px 0 8px}
.pbody .nprog{display:flex;align-items:center;gap:10px;height:22px;margin-bottom:2px}
.pbody .ntrack{flex:1;height:6px;border-radius:3px;background:#ecebe8;overflow:hidden}
.pbody .ntrack i{display:block;height:100%;border-radius:3px;background:#12b76a}
.pbody .nprog b{font:600 11.5px "Segoe UI",system-ui,sans-serif;color:#0b7a4b;white-space:nowrap}
.pbody p.nit{display:flex;align-items:flex-start;gap:9px;white-space:pre-wrap}
.pbody p.nit .ntx{flex:1;min-width:0}
.pbody .nck{width:17px;height:17px;margin-top:3px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 1.6px #b9b8b4;display:grid;place-items:center}
.pbody .nck svg{opacity:0}
.pbody p.nit.done .nck{background:#12b76a;box-shadow:none}
.pbody p.nit.done .nck svg{opacity:1}
/* tables in a note: light rules, a shaded header row, numbers on the right */
.pbody .ntwrap{overflow-x:auto;margin:10px 0 12px}
.pbody .ntable{border-collapse:collapse;width:100%;overflow-wrap:normal}
.pbody .ntable th,.pbody .ntable td{border:1px solid #dcdbd7;padding:5px 9px;text-align:left;vertical-align:top;min-width:48px}
.pbody .ntable th{background:#f4f3f0;font-weight:700}
.pbody .ntable .num,.pbody .ntable .num p{text-align:right !important;font-variant-numeric:tabular-nums}
.pbody .ntable p{margin:0}
@media (max-width:640px){.pbody .ntable th,.pbody .ntable td{padding:4px 6px}}
/* timers and counters in a note: chips that tick */
.pbody .tm,.pbody .ct{display:inline-flex;align-items:center;gap:6px;height:1.65em;padding:0 .6em 0 .45em;border-radius:8px;font-weight:700;font-variant-numeric:tabular-nums;vertical-align:-.1em;line-height:1;white-space:nowrap;position:relative}
.pbody .tm .ring{width:1.05em;height:1.05em;flex:none}
.pbody .tm .ring circle{fill:none;stroke-width:2.4}
.pbody .tm .ring .bg{stroke:currentColor;opacity:.22}
.pbody .tm .ring .fg{stroke:currentColor;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset .9s linear}
.pbody .tm.ready{background:#f2f2f4;color:#55555e}
.pbody .tm.run{background:#fff1e5;color:#c4520a}
.pbody .tm.late{background:#fde8e8;color:#b4232a}
.pbody .tm.up{background:#b4232a;color:#fff;padding:0 .7em;animation:nsup 1.2s ease-in-out infinite}
.pbody .tm.paused{box-shadow:inset 0 0 0 1.5px #f5b27a}
.pbody .tm.watch{background:#e7ecfe;color:#3b63f5}
.pbody .tm.watch.paused{box-shadow:inset 0 0 0 1.5px #b8c6fb}
@keyframes nsup{50%{box-shadow:0 0 0 5px rgba(180,35,42,.18)}}
.pbody .ct{background:#e3f8ee;color:#0b7a4b;padding:0 .6em;overflow:hidden}
.pbody .ct small{font-size:.82em;font-weight:600;opacity:.8;margin-left:.25em}
.pbody .ct i{position:absolute;left:0;bottom:0;height:3px;background:#f79009;border-radius:0 3px 3px 0}
.pbody .ct.goal{padding-bottom:2px}
/* status words in a note: a coloured pill for Done:, Blocked:, Next: and the rest */
.pbody .sw{display:inline-flex;align-items:center;gap:5px;height:1.5em;padding:0 .55em 0 .5em;margin-right:.15em;border-radius:8px;font-weight:700;font-size:.9em;vertical-align:.05em;line-height:1;white-space:nowrap}
.pbody .sw i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.pbody .sw.done{background:#e3f8ee;color:#0b7a47}.pbody .sw.doing{background:#e0f2fe;color:#0369a1}.pbody .sw.next{background:#e7ecfe;color:#1f45d6}.pbody .sw.waiting{background:#fff1e5;color:#b54708}
.pbody .sw.blocked{background:#fde8e8;color:#b4232a}.pbody .sw.urgent{background:#b4232a;color:#fff}.pbody .sw.idea{background:#f4ecfe;color:#6d28d9}.pbody .sw.question{background:#fef7c3;color:#854d0e}
/* live blocks in a note: weather, rates, scores, countdowns, time, prices */
.pbody .lv{display:inline-flex;align-items:center;gap:6px;height:1.65em;padding:0 .65em 0 .5em;border-radius:8px;font-variant-numeric:tabular-nums;vertical-align:-.1em;line-height:1;white-space:nowrap;position:relative}
.pbody .lv b{font-weight:700;font-size:1em;letter-spacing:normal;line-height:1}
.pbody .lv small{font-size:.82em;font-weight:600;opacity:.8}
.pbody .lv small.up{color:#0b7a47;opacity:1}.pbody .lv small.dn{color:#b4232a;opacity:1}
.pbody .lv .li{width:1.05em;height:1.05em;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pbody .lv .ld{width:7px;height:7px;border-radius:50%;background:#e5484d;flex:none;animation:nsld 1.4s ease-in-out infinite}
@keyframes nsld{50%{box-shadow:0 0 0 5px rgba(229,72,77,0)}0%{box-shadow:0 0 0 0 rgba(229,72,77,.35)}}
.pbody .lv.lv-weather{background:#e0f2fe;color:#075985}.pbody .lv.lv-rate{background:#e7ecfe;color:#1f45d6}.pbody .lv.lv-score{background:#e3f8ee;color:#0b7a47}
.pbody .lv.lv-countdown{background:#fff1e5;color:#c4520a}.pbody .lv.lv-time{background:#f4ecfe;color:#6d28d9}.pbody .lv.lv-price{background:#fef7c3;color:#854d0e}
/* slides: while the app presents, the note's page shows the slide it's on and turns with it */
.pbody .fstage{border-radius:var(--r);overflow:hidden;background:#171a36;container-type:inline-size;box-shadow:0 14px 40px rgba(18,21,58,.25)}
.pbody .fslide{aspect-ratio:16/9;display:flex;flex-direction:column;justify-content:center;padding:6% 8%;position:relative;color:#fff;font-family:"Segoe UI",system-ui,sans-serif;background:radial-gradient(90cqw 50cqw at 15% 10%,#2b3a8f 0%,transparent 60%),radial-gradient(70cqw 50cqw at 90% 100%,#5b2a8f 0%,transparent 60%),#12153a}
.pbody .fslide h2{margin:0 0 .5em;font-size:6.2cqw;font-weight:800;letter-spacing:-.02em;line-height:1.1;overflow-wrap:anywhere}
.pbody .fslide ul{margin:0;padding:0;list-style:none;display:grid;gap:.55em;font-size:3.2cqw;line-height:1.35;color:rgba(255,255,255,.88)}
.pbody .fslide li{display:flex;gap:.6em;align-items:baseline}
.pbody .fslide li::before{content:"";width:.45em;height:.45em;border-radius:50%;background:#7aa2ff;flex:none;transform:translateY(-.1em)}
.pbody .fslide .num{position:absolute;right:4%;bottom:5%;font-size:2.2cqw;font-weight:700;color:rgba(255,255,255,.5)}
.pbody .fslide.go{animation:fsin .45s cubic-bezier(.2,.8,.2,1)}
@keyframes fsin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pbody .fsdots{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:10px}
.pbody .fsdots i{width:22px;height:4px;border-radius:2px;background:rgba(255,255,255,.2)}
.pbody .fsdots i.on{background:#7aa2ff}
.pbody .fol{display:flex;align-items:center;gap:8px;min-height:38px;margin:12px 0 0;padding:4px 6px 4px 14px;border-radius:var(--r);background:#e3f8ee;color:#0b7a4b;font:700 13px "Segoe UI",system-ui,sans-serif}
.pbody .fol:first-child{margin:0 0 16px}
.pbody .fol i{width:7px;height:7px;border-radius:50%;background:#12b76a;flex:none;animation:fpulse 1.6s ease-in-out infinite}
@keyframes fpulse{50%{opacity:.35}}
.pbody .fol span{flex:1;min-width:0}
.pbody .fol button{border:0;border-radius:8px;height:30px;padding:0 12px;background:#fff;color:#0b7a4b;font:700 12.5px "Segoe UI",system-ui,sans-serif;cursor:pointer;box-shadow:0 0 0 1px rgba(11,122,75,.25)}
.pbody .fol button:hover{background:#f3fcf7}
@media (max-width:640px){.pbody .fslide{aspect-ratio:4/5;padding:14% 10%}.pbody .fslide h2{font-size:9cqw}.pbody .fslide ul{font-size:5.4cqw}.pbody .fslide .num{font-size:3.8cqw}}
/* sharing: a shared note's page */
body[data-view="unshared"] .nstate[data-state="unshared"]{display:block}
.chip.pubchip{background:#e3f8ee;color:#0b7a4b}
.momentbar{display:flex;align-items:center;gap:10px;margin:-6px 0 16px;padding:8px 8px 8px 14px;border-radius:var(--r);background:#fff4e5;color:#8a4a06;font-size:14px;font-weight:600}
.momentbar span{flex:1;min-width:0}
.btn.sm{height:32px;padding:0 12px;font-size:13px}
.btn.grn{background:var(--green);color:#fff}
.btn.grn:hover{filter:brightness(1.06)}
.followcard .fsub{margin:-4px 0 10px;font-size:13.5px;color:var(--slate)}
.frow{display:flex;gap:8px}
.frow input{flex:1;min-width:0;height:40px;border:0;border-radius:var(--r);padding:0 12px;font:500 14px var(--f);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);background:#fff;outline:none}
.frow input:focus{box-shadow:inset 0 0 0 2px var(--blue)}
.fmsg{min-height:20px;margin:8px 2px 0;font-size:13px;font-weight:600}
.fmsg.ok{color:#0b7a4b}.fmsg.bad{color:#b4232a}
.fmore{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;padding-top:10px;border-top:1px solid var(--line);font-size:13px;color:var(--slate);white-space:nowrap}
.fmore .rss{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;border-radius:var(--r);background:#fff4e5;color:#b54708;font-weight:700;text-decoration:none}
.nupd{display:flex;flex-direction:column}
.nupd .nu{display:grid;grid-template-columns:52px 1fr;gap:8px;padding:7px 0;border-top:1px solid var(--line);font-size:13.5px}
.nupd .nu:first-child{border-top:0;padding-top:0}
.nupd time{color:var(--mute);font-variant-numeric:tabular-nums;white-space:nowrap}
.nupd .none{margin:0;font-size:13.5px;color:var(--slate)}
.linkbtn{border:0;background:none;padding:0;font:700 13px var(--f);color:var(--blue);cursor:pointer}
.lockicon.green{background:var(--green);box-shadow:0 12px 28px rgba(18,183,106,.3)}
.msgpage .lockcard{padding-bottom:34px}
.msgpage form{margin:0}
/* the embed: the note alone, inside someone else's page */
body.embed{margin:0;background:transparent;min-height:0}
.embw{background:#fff;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(16,20,58,.12);overflow:hidden}
.embh{display:flex;align-items:center;gap:10px;padding:12px 16px 4px}
.embh b{flex:1;min-width:0;font-size:16px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.embh .upd{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:var(--r);background:#e3f8ee;color:#0b7a4b;font-size:11.5px;font-weight:700;white-space:nowrap}
.embh .upd i{width:6px;height:6px;border-radius:50%;background:var(--green)}
body.embed .ptabs{padding:4px 10px 0}
body.embed .pbody{padding:8px 16px 12px;min-height:0;font-size:14px}
body.embed .pbody .gone{color:var(--slate);margin:6px 0}
.embf{display:flex;justify-content:flex-end;padding:7px 14px;border-top:1px solid rgba(16,20,58,.08);font-size:11px}
.embf a{color:var(--mute);text-decoration:none;font-weight:600}
.embf a:hover{color:var(--blue)}
body.embed.dark .embw{background:#171a2e;box-shadow:inset 0 0 0 1px #2a2e48}
body.embed.dark .embh b,body.embed.dark .pbody{color:#e8eaf6}
body.embed.dark .embh .upd{background:rgba(18,183,106,.16);color:#6ce9a6}
body.embed.dark .embf{border-color:#2a2e48}
body.embed.dark .embf a{color:#8a90b5}
body.embed.dark .pbody .ntable th,body.embed.dark .pbody .ntable td{border-color:#2f3452}
body.embed.dark .pbody .ntable thead th{background:#20243e}
body.embed.dark .pbody .lbox{background:#1d2138}
body.embed.dark .ptabs{background:transparent}
/* sign in (/sign-in and its states) */
.sipage{position:relative;overflow:hidden;padding:56px 0 96px;background:linear-gradient(180deg,#f7f8ff,#fff 60%)}
.sipage::before{content:"";position:absolute;left:18%;top:-220px;width:900px;height:600px;background:radial-gradient(closest-side,rgba(123,45,255,.13),transparent);pointer-events:none}
.sigrid{position:relative;display:grid;grid-template-columns:minmax(0,480px) minmax(0,1fr);gap:48px;align-items:start}
.sicard{background:#fff;border-radius:var(--r);box-shadow:0 0 0 1px var(--line),0 24px 60px rgba(16,20,58,.12);padding:34px 34px 0;min-height:700px;display:flex;flex-direction:column}
.sikick{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:var(--r);background:#eef1ff;color:var(--blue);font-size:12.5px;font-weight:800;letter-spacing:.02em;align-self:flex-start}
.sicard h1{margin:14px 0 6px;font-size:32px;line-height:1.12;font-weight:800;letter-spacing:-.03em}
.sisub{margin:0 0 24px;color:var(--slate);font-size:15px}
.sierr{margin:-8px 0 18px;padding:10px 14px;border-radius:var(--r);background:#fdecec;color:#b4232a;font-size:14px;font-weight:600}
.sigoogle{height:52px;width:100%;border-radius:var(--r);background:#fff;box-shadow:inset 0 0 0 1.5px #d6d9e6;display:flex;align-items:center;justify-content:center;gap:12px;font-weight:700;font-size:15.5px;color:var(--ink);text-decoration:none}
.sigoogle:hover{background:#fafbff;box-shadow:inset 0 0 0 1.5px #b9bfd6}
.sior{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--mute);font-size:13px;font-weight:600}
.sior::before,.sior::after{content:"";flex:1;height:1px;background:var(--line)}
.siform{margin:0}
.sifield{display:flex;align-items:center;gap:10px;height:52px;padding:0 14px;border-radius:var(--r);background:#fff;box-shadow:inset 0 0 0 1.5px #d6d9e6}
.sifield:focus-within{box-shadow:inset 0 0 0 2px var(--blue),0 0 0 4px rgba(43,89,255,.12)}
.sifield input{flex:1;min-width:0;border:0;outline:0;font:500 16px var(--f);color:var(--ink);background:none}
.sifield svg{color:var(--mute);flex:none}
.sihint{margin:10px 2px 12px;font-size:13px;color:var(--slate);min-height:20px}
.sifine{margin:18px 0 0;font-size:12.5px;color:var(--mute);line-height:1.5}
.sifine a{color:var(--slate)}
.sifoot{margin:auto -34px 0;padding:18px 34px;border-top:1px solid var(--line);background:#fafbfd;border-radius:0 0 var(--r) var(--r);display:flex;align-items:center;gap:14px;font-size:13.5px;color:var(--slate)}
.sicard>*:nth-last-child(1).sifoot{margin-top:auto}
.sifoot b{color:var(--ink)}
.sifree{flex:none;height:24px;padding:0 9px;border-radius:var(--r);background:var(--green);color:#fff;font-size:11.5px;font-weight:800;display:grid;place-items:center;letter-spacing:.03em}
.sipc{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r);background:var(--mist);margin:0 0 22px}
.sipc .ic{width:42px;height:42px;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line);display:grid;place-items:center;flex:none;color:var(--blue)}
.sipc b{display:block;font-size:15px}
.sipc span{font-size:13px;color:var(--slate)}
.sicode{margin-left:auto;font:700 18px var(--mono);letter-spacing:.08em;color:var(--ink) !important;background:#fff;border-radius:var(--r);padding:6px 12px;box-shadow:0 0 0 1px var(--line);white-space:nowrap}
.sibig{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;margin:8px 0 8px;color:#fff}
.sibig.blue{background:var(--blue);box-shadow:0 14px 30px rgba(60,60,255,.3)}
.sibig.green{background:var(--green);box-shadow:0 14px 30px rgba(18,183,106,.3)}
.sibig.grey{background:#e4e6ef;color:var(--slate)}
.simailto{display:flex;align-items:center;gap:10px;height:48px;padding:0 14px;border-radius:var(--r);background:var(--mist);font-weight:700;margin:0 0 16px;white-space:nowrap;overflow:hidden}
.simailto span{color:var(--slate);font-weight:500}
.sirow2{display:flex;gap:10px}
.sirow2 .btn{flex:1}
.simatch{display:flex;align-items:center;gap:16px;padding:16px;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1.5px #d6d9e6;margin:0 0 14px}
.simatch .num{font:700 34px/1 var(--mono);letter-spacing:.06em;color:var(--ink);background:var(--mist);border-radius:var(--r);padding:12px 16px;flex:none;min-width:96px;text-align:center}
.simatch b{display:block;font-size:14.5px;line-height:1.35}
.simatch span{display:block;font-size:13px;color:var(--slate);line-height:1.45}
.sifrom{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r);background:var(--mist);margin:0 0 16px}
.sifrom .ic{width:38px;height:38px;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line);display:grid;place-items:center;flex:none;color:var(--blue)}
.sifrom>div{min-width:0}
.sifrom b{display:block;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sifrom span{display:block;font-size:12.5px;color:var(--slate);white-space:nowrap}
.silbl{margin:0 0 8px;font-size:13px;font-weight:700;color:var(--slate)}
.sipick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 12px}
.sipick button{height:72px;border:0;border-radius:var(--r);background:#fff;box-shadow:inset 0 0 0 1.5px #d6d9e6;font:700 28px var(--mono);letter-spacing:.06em;color:var(--ink);cursor:pointer;transition:box-shadow .15s,background .15s}
.sipick button:hover{box-shadow:inset 0 0 0 2px var(--blue);background:#f7f8ff}
.siline{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:14px;color:var(--slate);margin:0 0 10px}
.siline svg{margin-top:3px}
.siline .sidot{color:var(--slate)}
.siline b{color:var(--ink)}
.sisteps{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.sisteps li{display:grid;grid-template-columns:26px 1fr;gap:10px;font-size:14px;color:var(--slate)}
.sisteps li i{width:26px;height:26px;border-radius:50%;background:#eef1ff;color:var(--blue);font-style:normal;font-weight:800;font-size:12.5px;display:grid;place-items:center}
.sisteps li b{color:var(--ink)}
.siside h2{margin:6px 0 8px;font-size:40px;line-height:1.08;font-weight:800;letter-spacing:-.035em}
.siside h2 .g{background:none;color:var(--blue)}
.siside .lede{margin:0 0 26px;color:var(--slate);font-size:17px;max-width:620px}
.sifeats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px}
.sifeat{display:flex;gap:12px;padding:16px;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line)}
.sifeat .ti{width:38px;height:38px;border-radius:var(--r);display:grid;place-items:center;color:#fff;flex:none;background:linear-gradient(135deg,var(--c1),var(--c2))}
.sifeat b{display:block;font-size:15px}
.sifeat span{display:block;font-size:13.5px;color:var(--slate);line-height:1.45}
.sinote{margin:14px 0 0;font-size:13.5px;color:var(--mute)}
@media (max-width:1100px){.sigrid{grid-template-columns:1fr;gap:34px}.sicard{min-height:0}}
@media (max-width:640px){.sipage{padding:28px 0 72px}.sicard{padding:26px 20px 0}.sifoot{margin:24px -20px 0;padding:16px 20px}.sicard h1{font-size:27px}.siside h2{font-size:30px}.sifeats{grid-template-columns:1fr}.sipc{flex-wrap:wrap}.sicode{margin-left:0}.sirow2{flex-direction:column}}
/* account (/account and its pages: the approved design) */
.ashell{display:grid;grid-template-columns:230px minmax(0,1fr);gap:28px;padding:28px 32px 90px;background:transparent}
body[data-page="account"]{background:#f7f8fc}
.aside{position:sticky;top:96px;align-self:start;display:flex;flex-direction:column;gap:4px}
.ame{display:flex;align-items:center;gap:12px;padding:6px 6px 16px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.ame>div{min-width:0}
.aav{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#f79009,#dd2590);color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px;flex:none}
.aav.sm{width:28px;height:28px;font-size:11px}
.ame b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ame>div>span{display:block;font-size:12.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aside a{height:40px;display:flex;align-items:center;gap:10px;padding:0 12px;border-radius:var(--r);color:var(--slate);font-weight:600;font-size:14.5px;white-space:nowrap;text-decoration:none}
.aside a:hover{background:#fff;color:var(--ink)}
.aside a.on{background:#fff;color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.aside a svg{flex:none}
.aside .bd{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r);background:var(--blue);color:#fff;font-size:11.5px;font-weight:800;display:grid;place-items:center}
.aside .bd.amber{background:#f79009}
.aside .ok{margin-left:auto;width:16px;height:16px;border-radius:50%;background:#dcf5e8;color:#0b7a4b;display:grid;place-items:center}
.aside .out{margin-top:10px;color:var(--mute)}
.amain{min-width:0}
.amnav{display:none}
.atitle{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.atitle h1{margin:0;font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aplan{height:26px;padding:0 10px;border-radius:var(--r);font-size:12px;font-weight:800;letter-spacing:.03em;display:inline-grid;place-items:center;flex:none}
.aplan.prem{background:var(--grad);color:#fff}.aplan.free{background:#dcf5e8;color:#0b7a4b}
.aacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-bottom:18px}
.aact{--c:#2b59ff;position:relative;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line),0 10px 26px rgba(16,20,58,.05);padding:18px 18px 16px;display:flex;flex-direction:column;gap:6px;min-height:176px;overflow:hidden;min-width:0}
.aact::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c)}
.aact.green{--c:#12b76a}.aact.amber{--c:#f79009}.aact.name{--c:#7b2dff}
.aact .k{font-size:12px;font-weight:800;letter-spacing:.03em;color:var(--c)}
.aact b{font-size:18px;line-height:1.3;letter-spacing:-.01em}
.aact p{margin:0;font-size:13.5px;color:var(--slate)}
.aact .go{margin-top:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.aact .go form{margin:0}
.aact.hero{background:linear-gradient(135deg,#1b2366,#3a1a78);color:#fff;box-shadow:0 18px 40px rgba(43,40,140,.3)}
.aact.hero::before{display:none}
.aact.hero .k{color:#b9c4ff}.aact.hero p{color:rgba(255,255,255,.75)}
.aact.hero .btn.pri{background:#fff;color:var(--ink);box-shadow:none}
.aname{display:flex;align-items:center;gap:6px;height:36px;padding:0 3px 0 10px;border-radius:var(--r);box-shadow:inset 0 0 0 1.5px #d6d9e6;background:#fff;flex:1;min-width:0}
.aname:focus-within{box-shadow:inset 0 0 0 2px var(--blue)}
.aname .pre{color:var(--mute);font-weight:700}
.aname input{flex:1;min-width:0;border:0;outline:0;font:600 14px var(--f);color:var(--ink);background:none}
.anamemsg{width:100%;font-size:12.5px;color:var(--mute);min-height:18px}
.anamemsg.ok{color:#0b7a4b}.anamemsg.bad{color:#b4232a}
.afigs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
.afig{border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line);padding:16px 18px;min-height:112px;min-width:0}
.afig small{display:block;font-size:12px;font-weight:800;letter-spacing:.03em;color:var(--mute)}
.afig b{display:block;font-size:28px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.25}
.afig .up{color:#0b7a4b;font-size:13px}.afig .down{color:#b4232a;font-size:13px}
.abar{display:flex;height:6px;border-radius:3px;overflow:hidden;background:#eef0f6;margin:8px 0 7px}
.abk{display:flex;gap:9px;overflow:hidden;font-size:12px;color:var(--slate);white-space:nowrap}
.abk i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px}
.atwo{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:18px;align-items:start}
.apanel{padding:0;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line);min-width:0}
.aph{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
.aph h2{margin:0;font-size:16px;font-weight:800;white-space:nowrap}
.aph span{font-size:13px;color:var(--mute);white-space:nowrap}
.aph .sp{flex:1}
.atbl{overflow-x:auto}
.atbl table{width:100%;border-collapse:collapse}
.atbl.short th:nth-child(5),.atbl.short td:nth-child(5){display:none}
.anone{font-size:12.5px;color:var(--mute)}
.atbl th{font-size:11.5px;font-weight:800;letter-spacing:.03em;color:var(--mute);text-align:left;padding:10px 8px;white-space:nowrap}
.atbl td{padding:12px 8px;border-top:1px solid var(--line);font-size:13.5px;white-space:nowrap;vertical-align:middle}
.atbl .num{text-align:right;font-variant-numeric:tabular-nums}
.asubj{display:flex;align-items:center;gap:12px;min-width:0}
.asubj .ic{width:34px;height:34px;border-radius:var(--r);display:grid;place-items:center;flex:none;color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2));font-weight:800;font-size:13px}
.asubj b{display:block;font-size:15px;max-width:190px;overflow:hidden;text-overflow:ellipsis}
.asubj code{font:600 12px var(--mono);color:var(--mute)}
.aspark{display:inline-flex;align-items:flex-end;gap:2px;height:22px;vertical-align:middle;margin-right:8px}
.aspark i{width:4px;border-radius:1px;background:#c7d1fb}
.aspark i:last-child{background:var(--blue)}
.awhere{display:flex;gap:4px}
.awhere i{height:22px;padding:0 7px;border-radius:var(--r);font-style:normal;font-size:11.5px;font-weight:700;display:grid;place-items:center}
.w-site{background:#e7ecfe;color:#1f45d6}.w-qr{background:#fff1e5;color:#c4520a}.w-feed{background:#e3f8ee;color:#0b7a4b}
.ara{display:flex;gap:6px;justify-content:flex-end}
.ara .btn{width:64px}
.amore{display:block;padding:12px 18px;border-top:1px solid var(--line);font-size:13.5px;font-weight:700;color:var(--blue);text-decoration:none}
.aempty{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:26px 22px}
.aempty b{font-size:17px}.aempty span{color:var(--slate);font-size:14px;max-width:560px}
.anone{margin:0;padding:16px 18px;color:var(--slate);font-size:14px}
.alog{padding:6px 18px 14px}
.aday{font-size:12px;font-weight:800;letter-spacing:.03em;color:var(--mute);margin:12px 0 4px}
.aev{display:grid;grid-template-columns:46px 26px minmax(0,1fr);gap:8px;align-items:center;min-height:38px;font-size:13.5px}
.aev time{color:var(--mute);font-variant-numeric:tabular-nums}
.aev .dt{width:26px;height:26px;border-radius:var(--r);display:grid;place-items:center}
.aev span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aev.bad span:last-child{color:#b4232a}
.apcs{margin-top:18px}
.apcrow{display:grid;grid-template-columns:34px minmax(0,1fr) 170px 90px;gap:12px;align-items:center;padding:12px 18px;border-top:1px solid var(--line);font-size:13.5px}
.aph+.apcrow{border-top:0}
.apcrow form{margin:0}
.apcrow .pic{width:34px;height:34px;border-radius:var(--r);background:#eef1ff;color:var(--blue);display:grid;place-items:center}
.apcrow .pic.old{background:#fff1e5;color:#c4520a}
.apcrow b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apcrow .dim{display:block;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apcrow .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);margin-right:6px}
.apcrow .dot.off{background:#c8ccd9}
.apcrow .btn{width:90px}
.afollow{display:grid;gap:16px}
.afrow{display:flex;justify-content:space-between;gap:12px;padding:10px 18px;border-top:1px solid var(--line);font-size:14px}
.afrow span{color:var(--mute);white-space:nowrap}
.amodal{position:fixed;inset:0;z-index:120;background:rgba(16,20,58,.45);display:grid;place-items:center;padding:16px}
.amodal[hidden]{display:none}
.abox{width:100%;max-width:480px;background:#fff;border-radius:var(--r);box-shadow:0 30px 80px rgba(16,20,58,.35);padding:24px}
.abox h3{margin:0 0 6px;font-size:20px;font-weight:800;letter-spacing:-.02em}
.abox p{margin:0 0 14px;color:var(--slate);font-size:14px}
.abox input{width:100%;height:46px;border:0;border-radius:var(--r);padding:0 14px;font:500 15px var(--f);box-shadow:inset 0 0 0 1.5px #d6d9e6;outline:none}
.abox input:focus{box-shadow:inset 0 0 0 2px var(--green)}
.amsg{min-height:22px;margin:8px 2px 12px;font-size:13.5px;font-weight:600;color:var(--mute)}
.amsg.ok{color:#0b7a4b}.amsg.bad{color:#b4232a}
.abtns{display:flex;justify-content:flex-end;gap:8px}
@media (max-width:1200px){.aacts{grid-template-columns:1fr 1fr}.afigs{grid-template-columns:1fr 1fr}.atwo{grid-template-columns:1fr}}
@media (max-width:900px){.ashell{grid-template-columns:1fr;padding:20px 16px 72px}.aside{display:none}
  .amnav{display:block;margin-bottom:16px;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line)}
  .amnav summary{display:flex;align-items:center;gap:10px;height:46px;padding:0 14px;font-weight:700;cursor:pointer;list-style:none}
  .amnav summary::-webkit-details-marker{display:none}
  .amnav summary svg{margin-left:auto}
  .amnav div{display:flex;flex-direction:column;padding:4px 8px 8px;border-top:1px solid var(--line)}
  .amnav a{height:40px;display:flex;align-items:center;padding:0 10px;border-radius:var(--r);color:var(--slate);font-weight:600;text-decoration:none}
  .amnav a.on{background:var(--mist);color:var(--ink)}}
@media (max-width:640px){.aacts{grid-template-columns:1fr}.afigs{grid-template-columns:1fr 1fr;gap:10px}.afig{padding:14px}.afig b{font-size:22px}.abk span:nth-child(3){display:none}
  .aph>span{display:none}.atitle h1{font-size:24px}
  .atbl table,.atbl thead,.atbl tbody,.atbl tr,.atbl td{display:block}.atbl thead{display:none}
  .atbl tr{padding:12px 14px;border-top:1px solid var(--line)}.atbl td{border:0;padding:3px 0;text-align:left !important}
  .atbl td[data-l]{display:flex;align-items:center}.atbl td[data-l]::before{content:attr(data-l);width:92px;flex:none;color:var(--mute);font-size:12px;font-weight:700}
  .ara{justify-content:flex-start;margin-top:6px}.apcrow{grid-template-columns:34px minmax(0,1fr) 90px}.apcrow .hide{display:none}}

/* ---------- profile pages: notesocket.com/@username (the approved preview) */
body[data-page="profile"],body[data-page="404"]{background:#f7f8fc}
.pfwrap{max-width:1180px}
.pfwrap a,.pfmodal a{text-decoration:none}
.pfmine{margin-top:22px;border-radius:var(--r);background:#eef1ff;box-shadow:inset 0 0 0 1px #d5dcff;padding:10px 12px 10px 16px;display:flex;align-items:center;gap:12px;font-size:14px;color:#1f3bb3}
.pfmine b{color:var(--ink)}.pfmine svg{flex:none}.pfmine .sp{flex:1}
.pfhead{position:relative;padding:0;margin-top:22px;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line),0 18px 44px rgba(16,20,58,.06);overflow:hidden}
.pfhead .band{height:118px;background:radial-gradient(120% 140% at 0% 0%,#3a58ff 0%,#5a31e6 45%,#1b2366 100%)}
.pfhead .band::after{content:"";display:block;height:100%;background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px);background-size:16px 16px}
.pbody2{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:22px;align-items:start;padding:0 28px 24px;margin-top:-44px}
.pfhead .pav{width:104px;height:104px;border-radius:50%;color:#fff;display:grid;place-items:center;font-weight:800;font-size:36px;letter-spacing:-.02em;box-shadow:0 0 0 5px #fff,0 12px 30px rgba(16,20,58,.2)}
.pfhead .pwho{min-width:0;padding-top:58px}
.pfhead h1{margin:0;font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pfhead .handle{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:4px;color:var(--slate);font-size:14.5px}
.pfhead .handle code{font:600 13.5px var(--mono);color:var(--ink);background:var(--mist);padding:3px 8px;border-radius:var(--r)}
.pfhead .copy{border:0;background:none;color:var(--blue);font:700 13px var(--f);padding:0;cursor:pointer}
.pfhead .bio{margin:10px 0 0;max-width:620px;color:var(--slate);font-size:15px;line-height:1.55}
.pfhead .pfacts{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;font-size:13.5px;color:var(--mute)}
.pfhead .pfacts b{color:var(--ink);font-weight:800}
.pfhead .pgo{display:flex;flex-direction:column;gap:8px;padding-top:60px;min-width:220px}
.pfhead .pgo .row{display:flex;gap:8px}.pfhead .pgo .row .btn{flex:1}
.pfhead .pgo small{font-size:12px;color:var(--mute);text-align:center}
.pfmain{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:22px;padding:22px 0 110px;align-items:start}
.pfwrap .sech{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.pfwrap .sech h2{margin:0;font-size:18px;font-weight:800;letter-spacing:-.01em}
.pfwrap .sech>span{font-size:13px;color:var(--mute)}
.pfwrap .sech .sp{flex:1}
.pfwrap .sort{display:flex;gap:2px;padding:3px;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line)}
.pfwrap .sort a{height:28px;padding:0 10px;border-radius:var(--r);display:grid;place-items:center;color:var(--slate);font-size:12.5px;font-weight:700;white-space:nowrap}
.pfwrap .sort a.on{background:var(--mist);color:var(--ink)}
.pfcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.pfcard{display:flex;flex-direction:column;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line),0 8px 22px rgba(16,20,58,.04);overflow:hidden;transition:box-shadow .15s,transform .15s;color:var(--ink)}
.pfcard:hover{box-shadow:0 0 0 1px rgba(43,89,255,.35),0 14px 30px rgba(16,20,58,.08);transform:translateY(-1px)}
.pfcard .ctop{display:flex;align-items:center;gap:12px;padding:16px 16px 10px}
.pfcard .ic{width:36px;height:36px;border-radius:var(--r);display:grid;place-items:center;flex:none;color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2));font-weight:800;font-size:13px}
.pfcard .ctop div{min-width:0;flex:1}
.pfcard .ctop b{display:block;font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pfcard .ctop small{display:block;font-size:12.5px;color:var(--mute)}
.pfcard .snap{margin:0 16px;padding:12px 14px;border-radius:var(--r);background:var(--mist);font-size:13px;line-height:1.55;color:#2c3150;height:122px;overflow:hidden;position:relative;overflow-wrap:anywhere}
.pfcard .snap::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34px;background:linear-gradient(rgba(245,246,251,0),var(--mist))}
.pfcard .snap .h{font-weight:800;color:var(--ink)}
.pfcard .snap .dim{color:var(--mute)}
.pfcard .pfupd{display:flex;align-items:flex-start;gap:8px;margin:12px 16px 0;font-size:13px;color:var(--slate);min-width:0}
.pfcard .pfupd svg{flex:none;margin-top:4px;color:var(--violet)}
.pfcard .pfupd span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pfcard .pfupd b{color:var(--ink);font-weight:700}
.pfcard .cfoot{display:flex;align-items:center;gap:12px;margin-top:auto;padding:12px 16px 14px;font-size:12.5px;color:var(--mute)}
.pfcard .cfoot span{display:inline-flex;align-items:center;gap:5px}
.pfcard .cfoot .go{margin-left:auto;color:var(--blue);font-weight:800;font-size:13px}
.pfempty{grid-column:1/-1;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line);padding:44px 24px;text-align:center}
.pfempty .ei{width:52px;height:52px;border-radius:var(--r);margin:0 auto 14px;display:grid;place-items:center;background:#eef1ff;color:var(--blue)}
.pfempty b{display:block;font-size:17px}
.pfempty span{display:block;color:var(--slate);font-size:14px;margin:4px auto 0;max-width:460px}
.pfside .box{border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line);margin-bottom:16px}
.pfside .bh{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--line)}
.pfside .bh h3{margin:0;font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pfside .bh span{font-size:12.5px;color:var(--mute);white-space:nowrap}
.pfside .pftl{padding:6px 16px 12px}
.pfside .tli{display:grid;grid-template-columns:14px minmax(0,1fr);gap:10px;padding:9px 0;position:relative}
.pfside .tli::before{content:"";position:absolute;left:6px;top:24px;bottom:-9px;width:2px;background:#eceef6}
.pfside .tli:last-child::before{display:none}
.pfside .tli i{width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 3px var(--violet);margin-top:3px}
.pfside .tli p{margin:0;font-size:13.5px;line-height:1.45;overflow-wrap:anywhere}
.pfside .tli small{display:block;font-size:12px;color:var(--mute);margin-top:2px}
.pfside .tli small a{color:var(--blue);font-weight:700}
.pfside .fbox{padding:16px}
.pfside .fbox>p{margin:0 0 12px;font-size:13.5px;color:var(--slate);line-height:1.5}
.pfwrap .fform,.pfmodal .fform{display:flex;gap:6px;padding:4px;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line)}
.pfwrap .fform input[type=email],.pfmodal .fform input[type=email]{flex:1;min-width:0;border:0;outline:0;padding:0 10px;height:36px;background:none;font:14px var(--f);color:var(--ink)}
.pfwrap .fform:focus-within,.pfmodal .fform:focus-within{box-shadow:0 0 0 2px var(--blue)}
.pfside .fways{display:flex;gap:6px 14px;flex-wrap:wrap;margin-top:6px;font-size:12.5px;color:var(--mute)}
.pfside .fways a{color:var(--slate);font-weight:700;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.pfside .fok{display:none;align-items:flex-start;gap:10px;padding:12px;border-radius:var(--r);background:#e8f8ef;color:#0b6b43;font-size:13.5px;line-height:1.5}
.pfside .fok svg{flex:none;margin-top:1px}
.pfside .fbox.sent .fform,.pfside .fbox.sent .fways,.pfside .fbox.sent>p,.pfside .fbox.sent .fmsg{display:none}
.pfside .fbox.sent .fok{display:flex}
.pfside .made{padding:14px 16px;display:flex;align-items:center;gap:12px;font-size:13px;color:var(--slate);line-height:1.5}
.pfside .made svg{flex:none}
.pfside .made a{color:var(--blue);font-weight:700}
.pfmodal{position:fixed;inset:0;z-index:80;background:rgba(16,20,58,.45);backdrop-filter:blur(3px);display:grid;place-items:center;padding:16px}
.pfmodal[hidden]{display:none}
.pfmodal .mbox{width:100%;max-width:440px;border-radius:var(--r);background:#fff;box-shadow:0 30px 80px rgba(16,20,58,.35);padding:24px}
.pfmodal h3{margin:0 0 4px;font-size:20px;letter-spacing:-.02em}
.pfmodal .mbox>p{margin:0 0 16px;color:var(--slate);font-size:14px}
.pfmodal form{margin:0}
.pfmodal .mopt{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;padding:12px;border-radius:var(--r);box-shadow:0 0 0 1px var(--line);margin-bottom:8px;font-size:13.5px;cursor:pointer;line-height:1.45}
.pfmodal .mopt.on{box-shadow:0 0 0 2px var(--blue);background:#f6f8ff}
.pfmodal .mopt b{display:block;font-size:14px}
.pfmodal .mopt span{color:var(--slate)}
.pfmodal .mopt input{margin:3px 0 0}
.pfmodal .fform{margin-top:14px}
.pfmodal .mfine{font-size:12px;color:var(--mute);margin-top:6px;line-height:1.5}
.pfmodal .mfoot{display:flex;justify-content:flex-end;margin-top:12px}
.pfgone{padding:90px 0 140px;text-align:center}
.pfgone .code{display:inline-block;font:700 15px var(--mono);background:#fff;box-shadow:0 0 0 1px var(--line);padding:8px 14px;border-radius:var(--r);margin-bottom:22px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pfgone h1{margin:0 0 8px;font-size:34px;letter-spacing:-.03em;line-height:1.2}
.pfgone p{margin:0 auto 24px;max-width:480px;color:var(--slate)}
.pfgone .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.nbyline{text-decoration:none;color:var(--blue);font-weight:700}
@media (max-width:1000px){.pfmain{grid-template-columns:1fr}.pfside{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}.pfside .box{margin:0}}
@media (max-width:900px){.pbody2{grid-template-columns:auto minmax(0,1fr)}.pfhead .pgo{grid-column:1/-1;min-width:0;padding-top:0}}
@media (max-width:640px){.pfhead .band{height:86px}.pbody2{grid-template-columns:1fr;gap:12px;padding:0 18px 20px;margin-top:-40px}.pfhead .pav{width:80px;height:80px;font-size:28px}
  .pfhead .pwho{padding-top:0}.pfhead h1{font-size:24px;white-space:normal}.pfcards{grid-template-columns:1fr}.pfside{grid-template-columns:1fr}.pfwrap .sech{flex-wrap:wrap}
  .pfmine{flex-wrap:wrap}.pfmine .sp{display:none}.pfgone h1{font-size:26px}}

/* ---------- /account/page: the name, about line and address of notesocket.com/@name */
.apform{padding:16px 18px 18px;display:flex;flex-direction:column;gap:14px}
.apform label{display:flex;flex-direction:column;gap:6px}
.apform label>span{font-size:12px;font-weight:800;letter-spacing:.03em;color:var(--mute);text-transform:uppercase}
.apform label>input{height:40px;border:0;border-radius:var(--r);padding:0 12px;font:600 14px var(--f);color:var(--ink);box-shadow:inset 0 0 0 1.5px #d6d9e6;outline:none;background:#fff}
.apform label>input:focus{box-shadow:inset 0 0 0 2px var(--blue)}
.apform em{font-style:normal;font-size:12.5px;color:var(--mute);min-height:18px}
.apform .aname.wide{flex:none;height:40px}
.apform .abtns{align-items:center}.apform .abtns .amsg{margin:0 auto 0 0;min-height:0}
.apinfo{padding:6px 18px 14px}
.apinfo p{margin:10px 0;font-size:13.5px;color:var(--slate);line-height:1.5}
.apinfo b{display:block;color:var(--ink);font-size:14px}
.aside .ame a{display:inline;height:auto;padding:0;border-radius:0;background:none;box-shadow:none;font:inherit;color:inherit;text-decoration:none}.aside .ame a:hover{color:var(--blue);background:none}
.fby a{color:var(--blue);font-weight:700;text-decoration:none}.fby{margin-top:8px}

/* ---------- /account/billing (the approved preview) */
.aact.red{--c:#e5484d}
.aact .bbig{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.15}
.aact .bbig small{font-size:14px;font-weight:700;color:var(--mute);letter-spacing:0}
.aact.hero .bbig small{color:rgba(255,255,255,.7)}
.aact .btn[disabled]{opacity:.5;cursor:not-allowed}
.blist{margin:4px 0 0;padding:0;list-style:none;font-size:13.5px;color:var(--slate)}
.blist li{display:flex;gap:8px;align-items:center;padding:2px 0}
.blist li svg{flex:none;color:#12b76a}
.bcard{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700}
.bcard .brand{height:24px;padding:0 7px;border-radius:var(--r);background:#1a1f71;color:#fff;font:800 11px var(--f);letter-spacing:.06em;display:grid;place-items:center}
.btn.bdanger{background:#fff;color:#b4232a;box-shadow:inset 0 0 0 1px #f3c7c9}
.btn.bdanger:hover{background:#fdecec}
.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
.bcmp{width:100%;border-collapse:collapse}
.bcmp th{font-size:11.5px;font-weight:800;letter-spacing:.03em;color:var(--mute);text-align:left;padding:10px 12px;white-space:nowrap}
.bcmp td{padding:12px;border-top:1px solid var(--line);vertical-align:middle}
.bcmp .f{width:84px;text-align:center}
.bfeat{display:flex;align-items:center;gap:12px}
.bfeat .ic{width:34px;height:34px;border-radius:var(--r);display:grid;place-items:center;flex:none;background:var(--bg);color:var(--c)}
.bfeat b{display:block;font-size:14.5px}
.bfeat span{display:block;font-size:13px;color:var(--slate);line-height:1.45}
.byes,.bno{width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center}
.byes{background:#dcf5e8;color:#0b7a4b}.bno{background:#f0f1f6;color:#b6bacb}
.bfoot{display:flex;align-items:center;gap:12px;padding:14px 18px;border-top:1px solid var(--line)}
.bfoot span{flex:1;font-size:13.5px;color:var(--slate)}.bfoot b{color:var(--ink)}
.binv .ara .btn{width:82px}
.bst{height:22px;padding:0 8px;border-radius:var(--r);font-size:11.5px;font-weight:800;display:inline-grid;place-items:center}
.bst.paid{background:#dcf5e8;color:#0b7a4b}.bst.fail{background:#fdecec;color:#b4232a}
.bstop{display:flex;align-items:center;gap:14px;padding:16px 18px;border-top:1px solid var(--line)}
.bstop div{flex:1;min-width:0}
.bstop b{display:block;font-size:15px}
.bstop span{font-size:13.5px;color:var(--slate)}
.bfacts{padding:6px 18px 14px;border-top:1px solid var(--line)}
.bfact{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;padding:10px 0;border-top:1px solid var(--line);font-size:13.5px;color:var(--slate);line-height:1.5}
.bfact:first-child{border-top:0}
.bfact b{display:block;color:var(--ink);font-size:14px}
.bfact .ic{width:30px;height:30px;border-radius:var(--r);display:grid;place-items:center;background:#eef1ff;color:var(--blue)}
.bfact a{color:var(--blue);font-weight:700;text-decoration:none}
.bmodal .abox{max-width:460px}
.bmk{font-size:12px;font-weight:800;letter-spacing:.03em;color:var(--violet)}
.bmk.red{color:#b4232a}
.bmodal h3{margin-top:4px}
.bsum{border-radius:var(--r);background:var(--mist);padding:6px 14px;margin-bottom:14px}
.bplans{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.bplan{position:relative;text-align:left;border:0;background:#fff;border-radius:var(--r);box-shadow:inset 0 0 0 1.5px rgba(16,20,58,.12);padding:10px 12px;cursor:pointer;font:inherit;color:var(--ink)}
.bplan.on{box-shadow:inset 0 0 0 2px var(--blue);background:#f6f8ff}
.bplan:disabled{cursor:default;opacity:.55}
.bplan span{display:block;font-size:12.5px;color:var(--slate);font-weight:600}
.bplan b{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
.bplan em{position:absolute;right:8px;top:8px;font-style:normal;font-size:11px;font-weight:700;color:#0b7a4b;background:#e3f8ee;border-radius:var(--r);padding:1px 7px}
.bplan em.soon{color:var(--slate);background:var(--mist)}
.bsum div{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:14px}
.bsum div:first-child{border-top:0}
.bsum span{color:var(--slate)}
.bsum b{font-variant-numeric:tabular-nums;white-space:nowrap}
.bsum .tot b{font-size:17px}
.bstops{margin:0 0 14px;padding:0;list-style:none}
.bstops li{display:flex;gap:10px;align-items:flex-start;padding:5px 0;font-size:13.5px;color:var(--slate)}
.bstops li svg{flex:none;margin-top:3px}
.bagree{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;padding:12px;border-radius:var(--r);box-shadow:0 0 0 1px var(--line);font-size:13.5px;color:var(--slate);cursor:pointer;line-height:1.5}
.bagree:has(input:checked){box-shadow:0 0 0 2px var(--blue);background:#f6f8ff}
.abox .bagree input{width:16px;height:16px;margin:2px 0 0;padding:0;box-shadow:none;border-radius:0;accent-color:#2b59ff}
.bagree a{color:var(--blue);font-weight:700}
.bmodal .amsg{margin:10px 2px 10px}
@media (max-width:640px){.bcmp .f{width:52px}.bfeat .ic{display:none}.bstop,.bfoot{flex-wrap:wrap}.bmodal .abtns{flex-direction:column-reverse}.bmodal .abtns .btn{width:100%}}

/* ---------- /pricing */
.prhero{position:relative;overflow:hidden;padding:64px 0 72px;background:#fff}
.prglow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none}
.prglow.g1{width:640px;height:420px;right:-120px;top:-160px;background:rgba(123,45,255,.16)}
.prglow.g2{width:520px;height:360px;left:-200px;bottom:-200px;background:rgba(43,89,255,.12)}
.prhero .wrap{position:relative;z-index:1}
.prtop{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center}
.prhero h1{font-size:58px;line-height:1.02;font-weight:800;letter-spacing:-.045em;margin:6px 0 0}
.prhero h1 .g,.prhead h2 .g,.prstop h2 .g{background:none;color:var(--blue)}
.prhero .lede{font-size:18px;margin-top:18px}
.prhero .btn.sec .meta{border-left-color:var(--line)}
.prbill{border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line),0 30px 70px rgba(16,20,58,.12);padding:22px}
.prbh{display:flex;align-items:center;justify-content:space-between;font-weight:800;font-size:15px;margin-bottom:8px}
.prbadge{height:22px;padding:0 8px;border-radius:var(--r);background:var(--mist);color:var(--slate);font-size:11px;letter-spacing:.06em;display:grid;place-items:center}
.prbl{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--line);font-size:14px}
.prbl span{display:flex;align-items:center;gap:9px;color:var(--slate);min-width:0}
.prbl span svg{flex:none;color:var(--blue)}
.prbl b{font-variant-numeric:tabular-nums;color:#0b7a4b}
.prbl.hot{margin:4px -10px 0;padding:12px 10px;border-radius:var(--r);border-top:0;background:linear-gradient(135deg,#1b2366,#3a1a78);color:#fff}
.prbl.hot span{color:rgba(255,255,255,.85)}.prbl.hot span svg{color:#ffd60a}.prbl.hot b{color:#fff}
.prbt{display:flex;align-items:baseline;justify-content:space-between;padding:16px 0 12px;border-bottom:1px dashed var(--line)}
.prbt span{font-weight:700;color:var(--slate);font-size:14px}
.prbt b{font-size:34px;font-weight:800;letter-spacing:-.03em}
.prbt small{font-size:14px;color:var(--mute);font-weight:700;letter-spacing:0}
.prbf{display:flex;flex-wrap:wrap;gap:6px 16px;padding-top:12px;font-size:13px;font-weight:600;color:var(--slate)}
.prbf span{display:inline-flex;align-items:center;gap:6px}.prbf svg{color:#12b76a}
.prplans{padding:72px 0}
.prhead{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:48px;align-items:end;margin-bottom:32px}
.prhead h2{font-size:44px;line-height:1.06;font-weight:800;letter-spacing:-.035em;max-width:none;margin:0}
.prhead .lede{margin:0;font-size:17px}
.prcmpsec{padding:88px 0;background:#f7f8fc}
.prcmp{border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line),0 18px 44px rgba(16,20,58,.06);overflow:hidden}
.prcmp table{width:100%;border-collapse:collapse}
.prcmp th{font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--mute);text-align:left;padding:16px 22px;text-transform:uppercase;background:#fff}
.prcmp th small{display:block;font-size:11.5px;color:var(--violet);letter-spacing:0;text-transform:none}
.prcmp td{padding:14px 22px;border-top:1px solid var(--line);vertical-align:middle}
.prcmp td b{display:block;font-size:15px}
.prcmp td span{display:block;font-size:13.5px;color:var(--slate)}
.prcmp .f{width:130px;text-align:center}
.prcmp .f.pm{background:rgba(123,45,255,.04)}
.prcmp th.f.pm{color:var(--violet);background:#faf7ff}
.prcmp tr.prg td{background:#fbfbfe;padding:12px 22px}
.prcmp tr.prg td span{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;letter-spacing:.04em;color:var(--ink);text-transform:uppercase}
.prcmp tr.prg svg{color:var(--blue)}
.pryes{width:24px;height:24px;border-radius:50%;background:#dcf5e8;color:#0b7a4b;display:inline-grid !important;place-items:center}
.prno{width:12px;height:2px;border-radius:2px;background:#d3d6e2;display:inline-block !important;vertical-align:middle}
.prcmpf{display:flex;align-items:center;gap:16px;padding:18px 22px;border-top:1px solid var(--line);background:#fbfbfe}
.prcmpf span{flex:1;font-size:14.5px;color:var(--slate)}.prcmpf b{color:var(--ink)}
.pruses{padding:88px 0;background:#fff}
.pugrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.pu{border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line),0 14px 34px rgba(16,20,58,.06);padding:16px;display:flex;flex-direction:column;gap:6px}
.pu>b{font-size:17px;margin-top:8px}
.pu>p{margin:0;font-size:14px;color:var(--slate);line-height:1.55}
.puv{border-radius:var(--r);padding:14px;background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,255,255,.9)),linear-gradient(135deg,var(--c1),var(--c2));box-shadow:inset 0 0 0 1px var(--line);font-size:13px}
.puv.dark{background:linear-gradient(135deg,#141833,#2a1650);color:#fff;box-shadow:none}
.puv>b{display:block;font-size:15px;margin:8px 0 6px}
.pulive{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:var(--r);background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff;font-size:11px;font-weight:800;letter-spacing:.04em}
.pulive i{width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 6px #fff}
.purow{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-top:1px solid rgba(16,20,58,.08)}
.puv.dark .purow{border-top-color:rgba(255,255,255,.12)}
.purow span{color:var(--mute);white-space:nowrap}.puv.dark .purow span{color:rgba(255,255,255,.6)}
.purow em{font-style:normal;font-weight:700;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.putag{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--violet);padding-top:8px}
.prhow{padding:88px 0;background:#f7f8fc}
.prsteps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;counter-reset:s}
.prs{position:relative;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line);padding:20px}
.prs:not(:last-child)::after{content:"";position:absolute;right:-12px;top:34px;width:8px;height:8px;border-top:2px solid #c7cce0;border-right:2px solid #c7cce0;transform:rotate(45deg)}
.prsn{width:34px;height:34px;border-radius:var(--r);background:var(--grad);color:#fff;font-weight:800;display:grid;place-items:center;margin-bottom:12px}
.prs b{display:block;font-size:16px}
.prs p{margin:4px 0 0;font-size:14px;color:var(--slate);line-height:1.55}
.prfacts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:16px}
.prfacts>div{display:flex;gap:10px;align-items:flex-start;padding:14px 16px;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line);font-size:13.5px;color:var(--slate)}
.prfacts svg{flex:none;color:var(--blue);margin-top:2px}
.prfacts b{display:block;color:var(--ink);font-size:14px}
.prstop{padding:88px 0;background:#fff}
.prstopbox{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.8fr) minmax(0,.8fr);gap:16px;align-items:stretch}
.prstop h2{font-size:40px;line-height:1.08;font-weight:800;letter-spacing:-.035em;margin:0}
.prstop .lede{font-size:16.5px}
.prsc{border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:8px;font-size:14.5px}
.prsc b{display:flex;align-items:center;gap:8px;font-size:15.5px;margin-bottom:4px}
.prsc span{padding:6px 0;border-top:1px solid rgba(16,20,58,.07)}
.prsc.keep{background:#effaf4;box-shadow:inset 0 0 0 1px #c9eed9}.prsc.keep b{color:#0b7a4b}
.prsc.pause{background:#fff7ed;box-shadow:inset 0 0 0 1px #fde0bf}.prsc.pause b{color:#c4520a}
.prq{background:#f7f8fc}
.prql{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1100px){.prtop,.prhead{grid-template-columns:1fr;gap:24px}.pugrid,.prsteps,.prfacts{grid-template-columns:1fr 1fr}.prs::after{display:none}.prstopbox{grid-template-columns:1fr 1fr}.prsl{grid-column:1/-1}.prql{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.prhero{padding:40px 0 48px}.prhero h1{font-size:38px}.prhead h2,.prstop h2{font-size:30px}.pugrid,.prsteps,.prfacts,.prstopbox,.prql{grid-template-columns:1fr}
  .prcmp th,.prcmp td{padding:12px 12px}.prcmp .f{width:64px}.prcmp td span{font-size:12.5px}.prcmpf{flex-wrap:wrap}.prcmpf .btn{width:100%}
  .prcmpsec,.pruses,.prhow,.prstop{padding:56px 0}.prbl span{font-size:13px}}

/* ---- lives and videos (/account/lives) */
.aside .bd.red{background:#e5484d}
.alives .asubj b{max-width:280px;font-size:15.5px}
.lthumb{width:74px;height:42px;border-radius:var(--r);flex:none;position:relative;overflow:hidden;background:linear-gradient(160deg,#1b1f3a,#2a1f5a)}
.lthumb i{position:absolute;left:8px;right:14px;height:3px;border-radius:2px;background:rgba(255,255,255,.35)}
.lthumb i:nth-child(1){top:9px;right:30px;background:rgba(255,255,255,.8)}.lthumb i:nth-child(2){top:17px}.lthumb i:nth-child(3){top:24px;right:22px}.lthumb i:nth-child(4){top:31px;right:36px}
.lthumb em{position:absolute;right:4px;bottom:4px;font:700 9.5px var(--mono);font-style:normal;color:#fff;background:rgba(0,0,0,.55);padding:0 4px;border-radius:4px}
.lchip{height:22px;padding:0 8px;border-radius:var(--r);font-size:11.5px;font-weight:800;letter-spacing:.03em;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.lchip.live{background:#e5484d;color:#fff}.lchip.live i{width:6px;height:6px;border-radius:50%;background:#fff}
.lchip.soon{background:#fff3e0;color:#b54708}
.lchip.rep{background:#eef1ff;color:#1f45d6}
.lara .btn.pri{width:80px}.lara .btn.sec{width:72px}
@media (max-width:640px){.alives table,.alives thead,.alives tbody,.alives tr,.alives td{display:block}.alives thead{display:none}
  .alives tr{padding:12px 14px;border-top:1px solid var(--line)}.alives tr[hidden]{display:none}.alives td{border:0;padding:3px 0;text-align:left}.alives td.num{text-align:left}
  .alives td[data-l]{display:flex;align-items:center;min-height:24px}.alives td[data-l]::before{content:attr(data-l);display:inline-block;width:92px;flex:none;color:var(--mute);font-size:12px;font-weight:700}
  .lara{justify-content:flex-start;margin-top:8px}.lara .btn.pri,.lara .btn.sec{flex:1;width:auto}}

/* ---------- /live-notes: the live directory (dark hero with the numbers, then rows) */
.lnhero{position:relative;overflow:hidden;background:var(--night);color:#e7e8f5;padding:72px 0 40px}
.lnhero .wrap{position:relative;z-index:1}
.lntop{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:end}
.lnhero .kicker{color:var(--live)}
.lnhero h1{font-size:60px;line-height:1.02;font-weight:800;letter-spacing:-.045em;margin:6px 0 0;color:#fff}
.lnhero h1 .g{background:none;color:#ffe066}
.lnhero .lede{margin:0;color:#b9bcd6;font-size:17px}
.lncta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.lnstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:44px}
.lnst{padding:18px 20px;border-radius:var(--r);background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);min-width:0}
.lnst .lnsl{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.04em;color:#9ea2c6;text-transform:uppercase}
.lnst b{display:block;font-size:38px;font-weight:800;letter-spacing:-.035em;color:#fff;line-height:1.1;margin-top:6px}
.lnst em{display:block;font-style:normal;font-size:13px;color:#b9bcd6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lnpulse{width:8px;height:8px;border-radius:50%;background:#e5484d;box-shadow:0 0 0 4px rgba(229,72,77,.25);animation:blinkdot 1.2s infinite}

.lnsec{padding:64px 0 56px;background:#fff}
.lnsec.alt{background:var(--mist)}
.lnhead{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}
.lnhead h2{display:flex;align-items:center;gap:14px;font-size:32px;letter-spacing:-.03em;margin:0}
.lnnote{font-size:13.5px;color:var(--mute);white-space:nowrap}
.lnbadge{height:28px;display:inline-flex;align-items:center;gap:7px;padding:0 11px;border-radius:var(--r);font:800 11.5px var(--f);letter-spacing:.08em;background:rgba(43,89,255,.1);color:var(--blue)}
.lnbadge.on{background:rgba(229,72,77,.12);color:#c9262b}
.lnbadge.on i{width:7px;height:7px;border-radius:50%;background:#e5484d;animation:blinkdot 1.2s infinite}
.lnbadge.rp{background:rgba(18,183,106,.12);color:#0b7a47}

.lncols,.lnrow{display:grid;align-items:center;gap:18px;padding:0 18px}
.lc-live .lnrow,.lncols.lc-live{grid-template-columns:40px minmax(0,1.3fr) minmax(0,1.2fr) 96px 104px 104px 124px}
.lc-soon .lnrow,.lncols.lc-soon{grid-template-columns:40px minmax(0,1.3fr) minmax(0,1fr) 96px 130px 124px 140px}
.lc-rep .lnrow,.lncols.lc-rep{grid-template-columns:40px minmax(0,1.6fr) 104px 104px 104px 130px 124px}
.lncols{height:30px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.lnlist{display:flex;flex-direction:column;gap:8px}
.lnrow{min-height:76px;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line),0 8px 20px rgba(16,20,58,.04);text-decoration:none;color:var(--ink);transition:box-shadow .2s,transform .2s}
a.lnrow:hover,.lnrow:hover{box-shadow:0 0 0 1px rgba(43,89,255,.35),0 14px 30px rgba(16,20,58,.09);transform:translateY(-1px)}
.lnrow[hidden]{display:none}
.lnav{width:40px;height:40px;border-radius:var(--r);display:grid;place-items:center;font:800 13px var(--f);color:#fff;background:linear-gradient(135deg,hsl(var(--h),78%,52%),hsl(calc(var(--h) + 30),72%,42%))}
.lnt{min-width:0;display:flex;flex-direction:column}
.lnt b{font-size:17.5px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lnt a{text-decoration:none;min-width:0}
.lnwho{font-size:13px;font-weight:600;color:var(--slate);text-decoration:none;width:max-content;max-width:100%}
.lnwho:hover{color:var(--blue)}
.lnnow{min-width:0;display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:#39405e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lnnow i{flex:none;font:800 10.5px var(--f);letter-spacing:.08em;font-style:normal;padding:3px 7px;border-radius:var(--r);background:#ffd60a;color:#1a1400}
.lnwhen b{font-size:14px;font-weight:700;white-space:nowrap}
.lnkind{height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r);font:800 10.5px var(--f);letter-spacing:.08em;width:88px}
.lnkind.lv{background:rgba(229,72,77,.12);color:#c9262b}
.lnkind.pm{background:rgba(123,45,255,.12);color:#6a1fe0}
.lnkind.sn{background:rgba(43,89,255,.1);color:var(--blue)}
.lnnum{display:flex;flex-direction:column;min-width:0}
.lnnum b{font:700 16px var(--mono);letter-spacing:-.02em;white-space:nowrap}
.lnnum em{font-style:normal;font-size:12px;color:var(--mute);white-space:nowrap}
.lnbtn,.lnbtn2{width:100%}
.lnempty{display:flex;align-items:center;gap:18px;padding:22px 24px;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line)}
.lnsec.alt .lnempty{background:#fff}
.lnei{flex:none;width:48px;height:48px;border-radius:var(--r);display:grid;place-items:center;color:#fff;background:var(--grad)}
.lnempty div{flex:1;min-width:0}
.lnempty b{display:block;font-size:17px}
.lnempty span{font-size:14.5px;color:var(--slate)}
.lnall{margin:18px auto 0;display:flex}

.lnhow{background:var(--mist);padding:88px 0}
.lnhow .prhead h2 .g,.lnget .prhead h2 .g{background:none;color:var(--blue)}
.lnsteps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.lnstep{padding:22px;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line),0 12px 28px rgba(16,20,58,.05);display:flex;flex-direction:column}
.lnsn{width:32px;height:32px;border-radius:var(--r);display:grid;place-items:center;background:var(--grad);color:#fff;font-weight:800;font-size:14px;margin-bottom:12px}
.lnstep b{font-size:17px}
.lnstep p{margin:4px 0 16px;font-size:14.5px;color:var(--slate)}
.lnvis{margin-top:auto;height:64px;border-radius:var(--r);background:var(--mist);display:flex;align-items:center;padding:0 14px}
.lnbar{flex:1;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--slate)}
.lnbar i{flex:1}
.lngo{height:32px;display:inline-flex;align-items:center;gap:8px;padding:0 12px;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line);color:var(--ink);font-weight:700}
.lnlink{flex:1;display:flex;align-items:center;gap:8px;height:38px;padding:0 6px 0 12px;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line);min-width:0}
.lnlink code{flex:1;font:600 13px var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lnlink span{height:28px;display:grid;place-items:center;padding:0 10px;border-radius:var(--r);background:var(--grad);color:#fff;font-size:12px;font-weight:700}
.lntype{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14.5px;white-space:nowrap}
.lnpill{font:800 10.5px var(--f);letter-spacing:.08em;padding:4px 8px;border-radius:var(--r);background:#ffd60a;color:#1a1400}
.lncaret{width:2px;height:18px;background:var(--blue);animation:blinkdot 1s infinite}

.lnget{background:#fff;padding:88px 0}
.lngrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.lnf{padding:20px;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line),0 10px 24px rgba(16,20,58,.05)}
.lnfi{width:38px;height:38px;border-radius:var(--r);display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2));margin-bottom:12px}
.lnf b{display:block;font-size:16px}
.lnf p{margin:4px 0 0;font-size:14px;color:var(--slate)}

.lnafter{position:relative;overflow:hidden;background:var(--night);color:#e7e8f5;padding:88px 0}
.lnafter .wrap{position:relative;z-index:1}
.lnafter .kicker{color:var(--live)}
.lnafter h2{color:#fff;font-size:44px;line-height:1.06;font-weight:800;letter-spacing:-.035em;max-width:none;margin:0}
.lnafter h2 .g{background:none;color:#ffe066}
.lnafter .lede{margin:0;color:#b9bcd6;font-size:17px}
.lnthree{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.lnc{display:flex;flex-direction:column;padding:22px;border-radius:var(--r);background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);text-decoration:none;color:#e7e8f5;transition:background .2s}
.lnc:hover{background:rgba(255,255,255,.09)}
.lnci{width:42px;height:42px;border-radius:var(--r);display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2));margin-bottom:14px}
.lnc b{font-size:18px;color:#fff}
.lnc p{margin:6px 0 16px;font-size:14.5px;color:#b9bcd6}
.lncl{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14px;color:#ffe066}

@media (max-width:1180px){
  .lc-live .lnrow,.lncols.lc-live{grid-template-columns:40px minmax(0,1.4fr) minmax(0,1fr) 88px 96px 116px}
  .lc-live .lnrow>:nth-child(6),.lncols.lc-live>:nth-child(6){display:none}
  .lc-soon .lnrow,.lncols.lc-soon{grid-template-columns:40px minmax(0,1.4fr) minmax(0,1fr) 88px 116px 132px}
  .lc-soon .lnrow>:nth-child(6),.lncols.lc-soon>:nth-child(6){display:none}
  .lc-rep .lnrow,.lncols.lc-rep{grid-template-columns:40px minmax(0,1.6fr) 96px 96px 116px 116px}
  .lc-rep .lnrow>:nth-child(5),.lncols.lc-rep>:nth-child(5){display:none}
}
@media (max-width:1100px){.lntop{grid-template-columns:1fr;gap:18px}.lnstats{grid-template-columns:repeat(2,minmax(0,1fr))}.lnsteps,.lngrid,.lnthree{grid-template-columns:1fr 1fr}}
@media (max-width:760px){
  .lnhero{padding:44px 0 28px}.lnhero h1{font-size:38px}
  .lnst b{font-size:28px}
  .lnhead{flex-direction:column;align-items:flex-start;gap:6px}.lnhead h2{font-size:26px}
  .lncols{display:none}
  .lnrow,.lc-live .lnrow,.lc-soon .lnrow,.lc-rep .lnrow{grid-template-columns:40px minmax(0,1fr) 96px;gap:12px;padding:12px 14px}
  .lnrow>*{display:none}
  .lnrow>.lnav,.lnrow>.lnt,.lnrow>.lnbtn{display:flex}
  .lnrow>.lnav{display:grid}
  .lnsteps,.lngrid,.lnthree{grid-template-columns:1fr}
  .lnafter h2{font-size:32px}
  .lnempty{flex-wrap:wrap}.lnempty .btn{width:100%}
}

/* ---------- /download */
.dlhero h1 .g{background:none;color:var(--blue)}
.dlchips{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px}
.dlchips span{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--slate);white-space:nowrap}
.dlchips svg{color:var(--green)}
.dlfile{border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line),0 30px 70px rgba(16,20,58,.12);padding:22px}
.dlfh{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.dlfh div{flex:1;min-width:0}
.dlfh b{display:block;font-size:17px}
.dlfh div span{font-size:13px;color:var(--mute)}
.dlexe{width:48px;height:48px;border-radius:var(--r);display:grid;place-items:center;background:var(--mist);box-shadow:inset 0 0 0 1px var(--line);flex:none}
.dlexe.sm{width:34px;height:34px}
.dlfr{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line);font-size:14px;min-width:0}
.dlfr>span{width:78px;flex:none;color:var(--slate)}
.dlfr b{flex:1;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dlsha code{flex:1;min-width:0;font:600 12px var(--mono);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
.dlcopy{flex:none;height:28px;padding:0 10px;border:0;border-radius:var(--r);background:var(--mist);font:700 12px var(--f);color:var(--ink);cursor:pointer}
.dlcopy:hover{background:#e9ecff}
.dlgo{width:100%;margin-top:14px}

.dlsteps{background:var(--mist);padding:88px 0}
.dlsteps .prhead h2 .g,.dlneeds .prhead h2 .g,.dlwhere .prhead h2 .g,.dlnew h2 .g,.dlopenw h2 .g{background:none;color:var(--blue)}
.dlgrid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.dls{padding:22px;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line),0 12px 28px rgba(16,20,58,.05);display:flex;flex-direction:column}
.dls>b{font-size:17px}
.dls p{margin:4px 0 16px;font-size:14.5px;color:var(--slate)}
.dlv{margin-top:auto;height:150px;border-radius:var(--r);background:var(--mist);display:flex;align-items:center;justify-content:center;padding:14px}
.dlbar{width:100%;display:flex;align-items:center;gap:10px;padding:12px;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line),0 10px 22px rgba(16,20,58,.08)}
.dlbar div{flex:1;min-width:0}
.dlbar b{display:block;font-size:13.5px}
.dlbar div span{font-size:12px;color:var(--mute)}
.dlopen{font-size:12.5px;font-weight:700;color:var(--blue);white-space:nowrap}
.dlss{background:#1d4f91}
.ssbox{width:100%;color:#fff;font-size:12px;line-height:1.45}
.ssbox b{display:block;font-size:15px;font-weight:600;margin-bottom:4px}
.ssbox span{display:block;color:#d6e2f5}
.ssmore{display:inline-block;margin-top:6px;color:#fff;font-weight:700;outline:2px solid #ffd60a;outline-offset:2px;border-radius:2px;text-decoration:underline}
.ssbtns{display:flex;justify-content:flex-end;gap:6px;margin-top:10px}
.ssbtns span{height:26px;display:grid;place-items:center;padding:0 12px;font-size:12px;border:1px solid rgba(255,255,255,.6)}
.ssbtns .ssrun{background:#fff;color:#1d4f91;font-weight:700;outline:2px solid #ffd60a;outline-offset:2px}
.dlapp{width:100%;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line),0 10px 22px rgba(16,20,58,.08);overflow:hidden}
.dlab{height:28px;display:flex;align-items:center;gap:6px;padding:0 10px;background:var(--mist);font-size:12px;font-weight:600;color:var(--slate)}
.dlab i{width:9px;height:9px;border-radius:50%}
.dlab span{margin-left:6px}
.dlad{display:flex;align-items:center;gap:2px;padding:14px;font-weight:700;font-size:15px;min-height:70px}

.dlnew{background:#fff;padding:88px 0}
.dlnewgrid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start}
.dlnew h2{font-size:44px;line-height:1.06;font-weight:800;letter-spacing:-.035em;margin:0}
.dlnew .lede{font-size:17px;margin:14px 0 22px}
.dllog{display:flex;flex-direction:column;gap:12px}
.dlrel{padding:20px 22px;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line)}
.dlrel.on{box-shadow:0 0 0 1px rgba(43,89,255,.3),0 18px 40px rgba(43,89,255,.1)}
.dlrh{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.dlrh b{font:700 18px var(--mono)}
.dlrd{margin-left:auto;font-size:13px;color:var(--mute);white-space:nowrap}
.dlri{display:flex;gap:10px;padding:7px 0;font-size:14.5px;color:#39405e;border-top:1px solid var(--line)}
.dlri svg{flex:none;margin-top:4px;color:var(--green)}

.dlneeds{background:var(--mist);padding:88px 0}
.dlneeds .lnf{background:#fff}
.dlwhere{background:#fff;padding:88px 0}
.dlw3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.dlw{padding:22px;border-radius:var(--r);box-shadow:0 0 0 1px var(--line),0 10px 24px rgba(16,20,58,.05);display:flex;flex-direction:column}
.dlw .dlsdbtn{margin-top:14px;align-self:flex-start}
.dlw .lnfi{margin-bottom:12px}
.dlw b{font-size:16.5px}
.dlw p{margin:4px 0 14px;font-size:14px;color:var(--slate)}
.dlpaths{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.dlpaths code{font:600 12.5px var(--mono);padding:8px 10px;border-radius:var(--r);background:var(--mist);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dlsm{margin-top:auto;font-size:13px;color:var(--mute)}

.dlopenw{background:var(--mist);padding:88px 0}
.dlowgrid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.dlopenw h2{font-size:40px;line-height:1.08;font-weight:800;letter-spacing:-.035em;margin:0}
.dlopenw .lede{font-size:17px}
.dlol{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.dlol div{display:flex;align-items:center;gap:12px;font-size:15px}
.dlol .lnsn{margin:0;flex:none}
.dlpick{border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line),0 30px 70px rgba(16,20,58,.12);padding:18px}
.dlph b{display:block;font-size:15px;margin-bottom:10px}
.dlpi{display:flex;align-items:center;gap:12px;height:48px;padding:0 10px;border-radius:var(--r);font-size:14.5px;font-weight:600}
.dlpi.on{background:rgba(43,89,255,.08);box-shadow:inset 0 0 0 1px rgba(43,89,255,.35)}
.dlpi em{margin-left:auto;font-style:normal;font-size:12px;color:var(--blue);font-weight:700}
.dlpx{width:34px;height:34px;border-radius:var(--r);display:grid;place-items:center;background:var(--c);color:#fff;font-weight:800;font-size:13px}
.dlpb{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.dlpb span{height:34px;display:grid;place-items:center;padding:0 16px;border-radius:var(--r);font-size:13px;font-weight:700}
.dlpo{box-shadow:inset 0 0 0 1px var(--line)}
.dlpa{background:var(--grad);color:#fff}
.qa2 code{font:600 12.5px var(--mono);background:var(--mist);padding:1px 5px;border-radius:6px}

@media (max-width:1100px){.dlgrid3,.dlw3{grid-template-columns:1fr 1fr}.dlnewgrid,.dlowgrid{grid-template-columns:1fr;gap:28px}}
@media (max-width:760px){.dlgrid3,.dlw3{grid-template-columns:1fr}.dlnew h2,.dlopenw h2{font-size:30px}.dlfr>span{width:64px}}
.lnt a{display:block;min-width:0;overflow:hidden}
.lnt a b{display:block}
.lnstep,.dls,.dlw,.lnf,.lnc{min-width:0}
.lnvis{overflow:hidden}
.lntype{min-width:0;overflow:hidden}
@media (max-width:760px){.lnst{padding:14px 16px}.lnst em{font-size:12.5px}}
@media (max-width:760px){
  .lnrow,.lc-live .lnrow,.lc-soon .lnrow,.lc-rep .lnrow{grid-template-columns:40px minmax(0,1fr) 48px}
  .lnrow .lbt{display:none}
  .lnrow>.lnbtn{width:48px;height:44px;padding:0}
}
a.ti,a.tlabel{text-decoration:none}
a.ti:hover b{text-decoration:underline}
.aph .asp{flex:1}
.alsw{height:30px;display:inline-flex;align-items:center;gap:9px;padding:0 12px 0 8px;border:0;border-radius:var(--r);background:var(--mist);font:700 13px var(--f);color:var(--slate);cursor:pointer;white-space:nowrap}
.alsw i{width:30px;height:18px;border-radius:9px;background:#c9ccdb;position:relative;transition:background .15s}
.alsw i::after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left .15s}
.alsw.on{color:var(--ink)}
.alsw.on i{background:var(--green)}
.alsw.on i::after{left:14px}
.alsw:disabled{opacity:.55;cursor:default}

/* ---------- Account > Your page: Your brand (Premium), with its preview */
.bpanel{margin-top:18px;--b:#2b59ff;--bd:#1b3aa8;--bi:#fff}
.aph .bprem{color:#fff;flex:none}
.bprem{height:22px;display:inline-flex;align-items:center;padding:0 8px;border-radius:var(--r);background:var(--grad);color:#fff;font:800 10.5px var(--f);letter-spacing:.06em}
.bgrid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:0}
.bform{padding:18px;border-right:1px solid var(--line);min-width:0}
.bfr{display:grid;grid-template-columns:130px minmax(0,1fr);gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.bl{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.binfo{width:15px;height:15px;border-radius:50%;display:inline-grid;place-items:center;background:var(--mist);color:var(--slate);font:700 10px var(--f);font-style:normal;text-transform:none;cursor:help}
.bsws{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.bsw{width:30px;height:30px;border-radius:var(--r);border:0;background:var(--c);cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.bsw.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--c)}
.bhex{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 10px;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line);margin-left:4px}
.bhex span{width:16px;height:16px;border-radius:5px}
.bhex input{width:74px;border:0;outline:0;font:600 13px var(--mono);color:var(--ink);background:none}
.blogo{display:flex;align-items:center;gap:12px;min-width:0}
.blogoimg,.bplogo{width:44px;height:44px;border-radius:var(--r);display:grid;place-items:center;background:var(--b);color:var(--bi);font:800 15px var(--f);flex:none}
.blogot{flex:1;min-width:0}
.blogot b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blogot span{display:block;font-size:12.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blogo .btn{flex:none}
.binput{height:40px;width:100%;padding:0 12px;border:0;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line);font:600 14.5px var(--f);color:var(--ink)}
.btog{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14px}
.bsw2{width:36px;height:21px;border-radius:11px;background:#c9ccdb;position:relative;flex:none;transition:background .15s}
.bsw2 i{position:absolute;left:2px;top:2px;width:17px;height:17px;border-radius:50%;background:#fff;transition:left .15s}
.bsw2.on{background:var(--green)}
.bsw2.on i{left:17px}
.bwhere{display:flex;flex-wrap:wrap;gap:6px}
.bwhere span{height:26px;display:inline-flex;align-items:center;padding:0 9px;border-radius:var(--r);background:var(--mist);font-size:12.5px;font-weight:600;color:var(--slate);white-space:nowrap}
.bform .abtns{padding-top:16px}
.bprev{padding:18px;background:var(--mist);min-width:0}
.bptabs{display:flex;gap:4px;margin-bottom:12px}
.bptabs button{height:32px;padding:0 12px;border:0;border-radius:var(--r);background:none;font:700 13px var(--f);color:var(--slate);cursor:pointer}
.bptabs button.on{background:#fff;color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.bpframe{height:360px;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line),0 18px 40px rgba(16,20,58,.08);overflow:hidden;position:relative}
.bpv{display:none;height:100%;flex-direction:column}
.bpv.on{display:flex}
.bph{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.bph b{display:block;font-size:14.5px}
.bph small{font-size:11.5px;color:var(--mute)}
.bplogo{width:34px;height:34px;font-size:12px}
.bplogo.sm{width:30px;height:30px;font-size:11px;background:#fff;color:var(--b)}
.bsp{flex:1}
.bplive{height:24px;display:inline-flex;align-items:center;gap:6px;padding:0 9px;border-radius:var(--r);background:var(--b);color:var(--bi);font:800 11px var(--f);letter-spacing:.06em}
.bplive i{width:6px;height:6px;border-radius:50%;background:currentColor}
.bpw{font-size:12px;color:var(--mute);white-space:nowrap}
.bpnow{margin:12px 14px 0;padding:12px 14px;border-radius:var(--r);background:linear-gradient(135deg,var(--bd),var(--b));color:#fff;display:flex;gap:10px;align-items:center}
.bpnow span{font:800 10.5px var(--f);letter-spacing:.08em;opacity:.8}
.bpnow b{font-size:15px}
.bpbody{padding:12px 14px;flex:1}
.bpbody>b{display:block;font-size:15px;margin-bottom:6px}
.bprow{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.bprow em{font-style:normal;font-weight:800;color:var(--b)}
.bpask{display:flex;align-items:center;gap:8px;margin-top:12px;padding:6px 6px 6px 10px;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line);font-size:12.5px;color:var(--mute)}
.bpask span{flex:1}
.bpbtn{height:28px;display:inline-grid;place-items:center;padding:0 12px;border-radius:var(--r);background:var(--b);color:var(--bi);font:700 12.5px var(--f);font-style:normal}
.bpcred{padding:8px 14px;border-top:1px solid var(--line);font-size:11.5px;color:var(--mute);text-align:center}
.bpcred[hidden]{display:none}
.bpov{background:linear-gradient(160deg,#1c0a3a,#4a1d7a 60%,#0e0524);align-items:flex-end;justify-content:flex-end}
.bpscene{padding:18px}
.bpcard{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--r);background:linear-gradient(135deg,var(--b),var(--bd));color:#fff;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.bpcard small{display:block;font:800 10px var(--f);letter-spacing:.08em;opacity:.8}
.bpcard b{font-size:15px}
.bpnote{margin-top:12px;font-size:12.5px;color:var(--slate)}
@media (max-width:1100px){.bgrid{grid-template-columns:1fr}.bform{border-right:0;border-bottom:1px solid var(--line)}}
@media (max-width:640px){.bfr{grid-template-columns:1fr;gap:8px}}
.bpanel .amsg.bad{color:#b4232a}
.blogo input[type=file]{display:none}
.block{padding:22px 18px;display:flex;align-items:center;gap:16px}
.block div{flex:1;min-width:0}
.block b{display:block;font-size:15px}
.block span{font-size:14px;color:var(--slate)}
.bplogo img,.blogoimg img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.bplogo,.blogoimg{overflow:hidden}
.blogo .btn{cursor:pointer}
.pav.img{background:#fff !important;overflow:hidden}
.pav.img img{width:100%;height:100%;object-fit:cover;display:block}
.pfwrap .btn.pri{background:var(--bgrad,var(--blue));color:var(--bink,#fff)}

/* Account > Stream overlay (pages/account-overlay.php): the link, the looks, the widgets, and a preview over a sample game */

.ovlink{margin-bottom:16px}
.ovlrow{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:20px;align-items:center;padding:18px}
.ovlt b{display:block;font-size:16px;font-weight:800}
.ovlt span{display:block;margin-top:4px;font-size:13.5px;color:var(--slate);line-height:1.5}
.ovfield{display:flex;align-items:center;gap:8px;height:46px;padding:0 6px 0 12px;border-radius:var(--r);background:var(--mist);box-shadow:inset 0 0 0 1px var(--line);min-width:0}
.ovfield svg{color:var(--green);flex:none}
.ovfield code{flex:1;min-width:0;font:700 12.5px var(--mono);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ovfield .btn{flex:none;min-width:64px;justify-content:center}
.ovhow{display:flex;align-items:center;gap:12px;padding:12px 18px;border-top:1px solid var(--line);font-size:13px;color:var(--slate);white-space:nowrap;background:#fcfbfa;border-radius:0 0 var(--r) var(--r)}
.ovhow span{display:inline-flex;align-items:center;gap:8px}
.ovhow b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11.5px;color:#fff;background:linear-gradient(135deg,#dd2590,#7b2dff);flex:none}
.ovhow i{flex:1;min-width:12px;height:2px;border-radius:1px;background:linear-gradient(90deg,#f0c6e2,#d9c8ff)}
.ovhow kbd{font:700 11px var(--mono);padding:1px 5px;border-radius:5px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.ovgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.ovset .aph,.ovprev .aph{min-height:24px}
.ovh2{border-top:1px solid var(--line)}
.ovthemes{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px 18px 10px}
.ovthemes button{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:8px;row-gap:8px;align-items:center;text-align:left;padding:8px 8px 10px;border:0;border-radius:var(--r);background:#fff;box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;font:inherit;color:var(--ink);transition:box-shadow .2s,background .2s}
.ovthemes button:hover{background:#fbfbfd}
.ovthemes button.on{box-shadow:inset 0 0 0 2px #dd2590;background:#fdf2fa}
.ovthemes b{font-size:14px;font-weight:800;padding-left:2px}
.ovthemes small{font-size:12px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
.ovmini{grid-column:1/3;position:relative;width:100%;height:58px;border-radius:var(--r);overflow:hidden;background:linear-gradient(#2a0d55,#6a1b6e 55%,#1a0838 56%)}
.ovmini i{position:absolute;top:7px;width:26%;height:16px;border-radius:4px}
.ovmini i:first-child{left:7px}.ovmini i:nth-child(2){right:7px}
.ovmini em{position:absolute;left:7px;right:7px;bottom:7px;height:11px;border-radius:4px}
.m-glass i{background:rgba(255,255,255,.28);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}.m-glass em{background:linear-gradient(90deg,#2b59ff,#7b2dff)}
.m-night i{background:#0b0d18;box-shadow:inset 0 0 0 1px rgba(255,214,10,.6)}.m-night em{background:#0b0d18;box-shadow:inset 0 -2px 0 #ffd60a}
.m-chalk i{background:#1f3a2e;box-shadow:inset 0 0 0 1.5px #7a5a30}.m-chalk em{background:#1f3a2e;box-shadow:inset 0 0 0 1.5px #7a5a30}
.m-term i{background:#000;box-shadow:inset 0 0 0 1px #33ff99}.m-term em{background:#000;box-shadow:inset 0 0 0 1px #33ff99}
.ovold{padding:0 18px 16px;font-size:12.5px;color:var(--mute)}
.ovws{padding:4px 0}
.ovw{display:grid;grid-template-columns:34px minmax(0,1fr) 44px;gap:12px;align-items:center;padding:11px 18px}
.ovw+.ovw{border-top:1px solid var(--line)}
.ovwi{width:34px;height:34px;border-radius:var(--r);display:grid;place-items:center;color:var(--c);background:color-mix(in srgb,var(--c) 12%,#fff)}
.ovw b{display:block;font-size:14px;font-weight:800}
.ovw div span{display:block;font-size:12.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ovw:not(.on) b,.ovw:not(.on) .ovwi{opacity:.5}
.ovsw{width:40px;height:24px;border:0;border-radius:12px;background:#d6d6db;position:relative;cursor:pointer;padding:0;transition:background .2s}
.ovsw i{position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s}
.ovw.on .ovsw{background:var(--green)}.ovw.on .ovsw i{transform:translateX(16px)}
.ovsizes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:14px 18px 18px}
.ovsizes button{height:38px;border:0;border-radius:var(--r);background:#fff;box-shadow:inset 0 0 0 1px var(--line);font:700 13px var(--f);color:var(--slate);cursor:pointer}
.ovsizes button.on{box-shadow:inset 0 0 0 2px #dd2590;color:var(--ink);background:#fdf2fa}
.ovprev{overflow:hidden;margin-bottom:16px}
.ovlivechip{display:inline-flex;align-items:center;gap:6px;background:#e5484d;color:#fff !important;font:800 11px var(--f) !important;letter-spacing:.06em;padding:3px 8px;border-radius:6px}
.ovlivechip i{width:6px;height:6px;border-radius:50%;background:#fff;animation:blinkdot 1.2s infinite}
.ovstagewrap{padding:14px;background:#0e0b1d}
.ovfit{position:relative;overflow:hidden;border-radius:var(--r)}
.ovfit .canvas{position:absolute;left:0;top:0;width:960px;transform-origin:0 0}
.canvas[data-size="small"] .w{zoom:.85}.canvas[data-size="large"] .w{zoom:1.15}
.ovsrc{padding:6px 18px 18px;border-top:1px solid var(--line);padding-top:14px}
.ovsrch{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
.ovnote{border-radius:var(--r);box-shadow:0 0 0 1px var(--line);padding:10px 14px;font:13.5px/1.6 "Segoe UI",system-ui,sans-serif;color:#1d1d1f;background:#fff}
.ovnote p{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ovnote .nnow{color:#3b63f5;font-weight:600}
.ovnote .nnow span.caret2::after{content:"";display:inline-block;width:2px;height:14px;background:#1d1d1f;vertical-align:-2px;margin-left:1px;animation:blink 1s steps(1) infinite}
.ovnote .nh{font-weight:700;margin-top:4px}
.ovnote .nck{display:flex;align-items:center;gap:8px}
.ovnote .nck i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #b9bdcc;flex:none;display:grid;place-items:center;font-style:normal;font-size:9px;font-weight:900;color:#fff;transition:all .25s}
.ovnote .nck.done{color:#8d8d96;text-decoration:line-through}
.ovnote .nck.done i{background:var(--green);box-shadow:none}.ovnote .nck.done i::after{content:"✓"}
.ovnote .ntm{margin-top:4px}
.tmchip{display:inline-flex;align-items:center;gap:5px;padding:1px 8px;border-radius:6px;background:#fff4e5;color:#b54708;font:700 12px var(--mono)}
.tmpb{font:600 12px var(--mono);color:var(--mute)}
.ovnote .ntb{color:#7b2dff;font:600 12px var(--mono);margin-top:4px}
@media (max-width:1180px){.ovgrid{grid-template-columns:1fr}.ovlrow{grid-template-columns:1fr}.ovhow{flex-wrap:wrap}.ovhow i{display:none}}
@media (max-width:640px){.ovthemes small{display:none}.ovstagewrap{padding:8px}
  .ovfield code{font-size:11.5px}.ovfield #ovopen{display:none}}
.ovneed{background:#fff}.ovneed>span{flex:1;min-width:0;font-size:13px;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ovfield a.dis{pointer-events:none;opacity:.5}

/* Account > API (pages/account-api.php) */

.atitle .asp{flex:1}
.agrid2{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:16px;margin-top:16px}
.akeys td{vertical-align:middle}
.kname b{display:block;font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kname code{font:600 12px var(--mono);color:var(--mute)}
.kname{display:flex;align-items:center;gap:12px;min-width:0}
.kname .kic{width:34px;height:34px;border-radius:var(--r);display:grid;place-items:center;flex:none;color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2));font:800 12px var(--f)}
.akeys tr.off .kname b,.akeys tr.off td{color:var(--mute)}
.akeys tr.off .kic{filter:grayscale(1);opacity:.5}
.kspark{display:inline-flex;align-items:flex-end;gap:2px;height:22px}
.kspark i{width:6px;border-radius:2px;background:#2b59ff;opacity:.75}
.akeys tr.off .kspark i{background:#b9bdcc}
.kacts{display:flex;gap:6px;justify-content:flex-end}
.kacts .btn{min-width:78px;justify-content:center}
.kpill{display:inline-flex;align-items:center;gap:5px;font:800 11px var(--f);letter-spacing:.04em;color:#8a8fa6;background:var(--mist);padding:3px 8px;border-radius:6px;white-space:nowrap}
.knewrow{display:flex;gap:8px;padding:14px 18px;border-bottom:1px solid var(--line);background:#fcfbfa}
.knewrow input{flex:1;min-width:0;height:40px}
.knewrow[hidden]{display:none}
.kfresh{background:#f4fbf7}
.kfresh .kname code{color:#0b7a4b}
.kchart{display:flex;align-items:flex-end;gap:4px;height:236px;padding:18px 18px 6px}
.kchart .kd{flex:1;display:flex;flex-direction:column-reverse;gap:1px;height:100%;justify-content:flex-start;min-width:0}
.kchart .ok{background:#12b76a;border-radius:3px 3px 0 0}
.kchart .bad{background:#e5484d;border-radius:3px 3px 0 0}
.kchart .kd:hover .ok{background:#0e9384}
.kaxis{display:flex;justify-content:space-between;padding:0 18px 14px;font:600 11.5px var(--mono);color:var(--mute)}
.kbars{padding:12px 18px 16px}
.kbar{display:grid;grid-template-columns:minmax(0,1fr) 54px;gap:10px;align-items:center;padding:7px 0}
.kbar div{min-width:0}
.kbar code{display:flex;align-items:center;gap:8px;font:600 12.5px var(--mono);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kbar .tr{display:block;height:6px;border-radius:3px;background:var(--mist);margin-top:6px;overflow:hidden}
.kbar .tr i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#2b59ff,#7b2dff)}
.kbar b{text-align:right;font:800 13px var(--mono)}
.klog{padding:4px 0}
.kday{padding:12px 18px 6px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.kl{display:grid;grid-template-columns:70px 190px 44px 230px minmax(0,1fr) 64px;gap:12px;align-items:center;padding:9px 18px;border-top:1px solid var(--line);font-size:13.5px}
.kl time{font:600 12.5px var(--mono);color:var(--mute)}
.kl .kkey{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:none;letter-spacing:0;font-size:13.5px;color:var(--ink)}
.kl code{font:600 12.5px var(--mono);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kl .ks{font:800 11.5px var(--mono);padding:2px 7px;border-radius:5px;justify-self:start;white-space:nowrap}
.kl .ks.ok{background:#e3f8ee;color:#0b7a4b}.kl .ks.bad{background:#fdecec;color:#b4232a}
.kl .ms{font:600 12.5px var(--mono);color:var(--mute);text-align:right}
.kl.bad{background:#fffafa}
.kl.bad .kwhy{color:#b4232a}
.kl .kwhy{font-size:12.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kl.new{animation:rowin .8s ease-out}
.kmore{display:block;width:100%;height:42px;border:0;border-top:1px solid var(--line);background:none;font:700 13px var(--f);color:var(--blue);cursor:pointer;border-radius:0 0 var(--r) var(--r)}
.vb2{display:inline-block;width:44px;text-align:center;font:800 9.5px var(--mono);padding:2px 0;border-radius:5px;flex:none}
.vb2.get{background:#e7f0ff;color:#1f45d6}.vb2.post{background:#e3f8ee;color:#0b7a4b}.vb2.patch{background:#fff1e0;color:#b54708}.vb2.put{background:#e5f6fd;color:#0369a1}
@media (max-width:1180px){.agrid2{grid-template-columns:1fr}.kl{grid-template-columns:60px 130px 44px minmax(0,1fr) 56px}.kl .kwhy{display:none}}
@media (max-width:640px){.kl{grid-template-columns:52px minmax(0,1fr) 48px}.kl .kkey,.kl .ms,.kl .kwhy{display:none}.akeys thead{display:none}.kacts .btn{min-width:0}.knewrow{flex-wrap:wrap}.knewrow input{flex-basis:100%}}
.kacts .btn:disabled{opacity:.6}

/* the API docs (pages/api.php) */

.nav a.on{color:var(--ink)}
.apihero{padding-bottom:56px}
.kprem{background:var(--grad);color:#fff;font:800 11px var(--f);letter-spacing:.06em;padding:3px 8px;border-radius:6px;margin-right:8px}
.apicta{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}
.apiglance{border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line),0 30px 70px rgba(16,20,58,.12);padding:6px 20px 18px}
.agrow{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.agrow span{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.agrow code{font:700 13px var(--mono);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agstats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:16px 0}
.agstats div{border-radius:var(--r);background:var(--mist);padding:12px 14px}
.agstats b{display:block;font-size:24px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.agstats span{font-size:12.5px;color:var(--mute);white-space:nowrap}
.agnote{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;color:var(--slate);line-height:1.5}
.agnote svg{color:var(--green);flex:none;margin-top:2px}
.apime{position:sticky;top:68px;z-index:20;background:#0f1222;color:#dcdde8}
.apime .wrap{display:flex;align-items:center;gap:14px;height:52px;white-space:nowrap}
.apimed{display:inline-flex;align-items:center;gap:7px;font:800 11.5px var(--f);letter-spacing:.06em;text-transform:uppercase;color:#5cf2a6}
.apimed i{width:7px;height:7px;border-radius:50%;background:#5cf2a6;box-shadow:0 0 0 3px rgba(92,242,166,.2)}
.apimet{font-size:13.5px;color:#b9bcd6;overflow:hidden;text-overflow:ellipsis;min-width:0}
.apimet b{color:#fff}
.apisp{flex:1}
.apikey{display:inline-flex;align-items:center;gap:8px;font:700 12px var(--f);color:#8f93b8;min-width:0}
.apikey input,.apinote{height:34px;width:240px;border:0;border-radius:var(--r);background:#1c2240;color:#fff;font:700 13px var(--mono);padding:0 11px;outline:none;min-width:0}
.apinote{width:96px}
.apikey input:focus,.apinote:focus{box-shadow:0 0 0 2px #4f7bff}
.apib{height:34px;padding:0 12px;border:0;border-radius:var(--r);background:#1c2240;color:#dcdde8;font:700 12.5px var(--f);cursor:pointer;display:inline-flex;align-items:center;text-decoration:none;white-space:nowrap}
.apib:hover{background:#262d52;color:#fff}
.apib.pri{background:#2b59ff;color:#fff}
.apib[hidden]{display:none}
#kstate{color:#8f93b8}#kstate i{background:#5b6178;box-shadow:none}
#kstate.on{color:#5cf2a6}#kstate.on i{background:#5cf2a6;box-shadow:0 0 0 3px rgba(92,242,166,.2)}
#kstate span{font-family:var(--mono);text-transform:none;letter-spacing:0}
.crun.off{text-decoration:none}
.apisel{display:inline-flex;align-items:center;gap:8px;font:700 12px var(--f);color:#8f93b8}
.apisel select{height:34px;border:0;border-radius:var(--r);background:#1c2240;color:#fff;font:700 13px var(--f);padding:0 30px 0 11px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5 5 6.5 8 3.5' fill='none' stroke='%238f93b8' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;cursor:pointer}
.adocs{display:grid;grid-template-columns:220px minmax(0,1fr);gap:40px;padding-top:40px;padding-bottom:80px;align-items:start}
.adnav{position:sticky;top:140px;display:flex;flex-direction:column;gap:2px}
.adng{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin:18px 0 6px 10px}
.adng:first-child{margin-top:0}
.adnav a{display:flex;align-items:center;gap:9px;height:36px;padding:0 10px;border-radius:var(--r);font-size:14px;font-weight:700;color:var(--slate);text-decoration:none;white-space:nowrap}
.adnav a:hover{background:var(--mist);color:var(--ink)}
.adnav a.on{background:#fff;color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.vb2{width:44px;text-align:center;font:800 9.5px var(--mono);padding:2px 0;border-radius:5px;flex:none}
.vb2.get{background:#e7f0ff;color:#1f45d6}.vb2.post{background:#e3f8ee;color:#0b7a4b}.vb2.patch{background:#fff1e0;color:#b54708}.vb2.put{background:#e5f6fd;color:#0369a1}
.adsec{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;padding:34px 0;border-top:1px solid var(--line);scroll-margin-top:140px;max-width:860px}
.adsec:first-child{border-top:0;padding-top:0}
.adsec.one{grid-template-columns:minmax(0,1fr)}
.adsec>*,.adocs>*{min-width:0}
.adtxt code{overflow-wrap:anywhere}
.adtxt h2{font-size:26px;font-weight:800;letter-spacing:-.025em;margin:0 0 10px}
.adtxt p{font-size:15px;line-height:1.65;color:var(--slate);margin:0 0 12px}
.adtxt code{font:600 13px var(--mono);background:var(--mist);padding:1px 6px;border-radius:5px;color:var(--ink)}
.adpath{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:10px 12px;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line);font:700 13.5px var(--mono);white-space:nowrap;overflow:hidden}
.adpath .vb2{width:52px;font-size:10.5px;padding:3px 0}
.adparams{border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line);overflow:hidden;margin-top:16px}
.adparams .ph{padding:10px 14px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);background:#fcfbfa;border-bottom:1px solid var(--line)}
.adp{display:grid;grid-template-columns:130px minmax(0,1fr);gap:12px;padding:11px 14px;border-top:1px solid var(--line)}
.adp:nth-child(2){border-top:0}
.adp b{font:700 13px var(--mono);color:var(--ink);white-space:nowrap}
.adp b small{display:block;font:600 11px var(--f);color:var(--mute);margin-top:2px}
.adp span{font-size:13.5px;color:var(--slate);line-height:1.5}
.adcall{background:linear-gradient(135deg,#f3f0ff,#eef4ff);border-radius:var(--r);padding:14px 16px;font-size:14px;color:#3b2a7a;line-height:1.55;margin-top:14px}
.adtbl{width:100%;border-collapse:collapse;border-radius:var(--r);overflow:hidden;box-shadow:0 0 0 1px var(--line);background:#fff;font-size:14px}
.adtbl th{text-align:left;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);background:#fcfbfa;padding:10px 14px;border-bottom:1px solid var(--line)}
.adtbl td{padding:10px 14px;border-top:1px solid var(--line);color:var(--slate);white-space:nowrap}
.adtbl td:first-child{font:800 13px var(--mono);color:var(--ink)}
.adtbl td code{font:600 12.5px var(--mono);color:var(--ink)}
.adcode{position:static}
.adcode .code{box-shadow:0 0 0 1px rgba(16,20,58,.2),0 20px 50px rgba(16,20,58,.16)}
.adcode .csrc{height:auto;min-height:0;max-height:none;overflow:auto;white-space:pre}
.adcode .cres{height:auto;min-height:44px;flex-wrap:nowrap}
.adcode .cres pre{margin:0;font:600 12px/1.55 var(--mono);color:#b9bcd6;white-space:pre;overflow:hidden;flex:1;min-width:0}
.adres{border-top:1px solid rgba(255,255,255,.06);background:#0c0f1d;padding:10px 16px 12px}
.adresh{display:flex;align-items:center;gap:10px;margin-bottom:6px;white-space:nowrap}
.adres pre{margin:0;font:600 12px/1.6 var(--mono);color:#b9bcd6;white-space:pre;overflow-x:auto}
.st4{font:800 11.5px var(--mono);color:#4a0d10;background:#ffb4b6;padding:3px 8px;border-radius:6px}
.crun.busy{opacity:.7}
.cres .cms,.adresh .cms{font:700 11.5px var(--mono);color:#8f93b8}
.adresh .lbl{font:800 11px var(--f);letter-spacing:.06em;text-transform:uppercase;color:#6b6f92;margin-right:auto}

@media (max-width:900px){.adocs{grid-template-columns:1fr;gap:0}.adnav{display:none}.adcode .csrc{font-size:11.5px}
  .apimet{display:none}.apime .wrap{gap:8px}.apisel span{display:none}.apisel select{max-width:150px}.apikey span{display:none}.apikey input{width:150px}.apime{top:0;position:relative}.prtop{grid-template-columns:1fr}}
@media (max-width:640px){.apimed{display:none}.agrow{grid-template-columns:1fr;gap:4px}.agstats{grid-template-columns:1fr 1fr 1fr}.agstats b{font-size:19px}.agstats span{white-space:normal}.adp{grid-template-columns:1fr;gap:4px}.adtbl td:last-child{white-space:normal}}
.adres.flash{animation:resin .6s ease-out}
.crun.off{background:#2a2f4a;color:#8f93b8;cursor:default}

/* ---- Account > Webhooks (pages/account-webhooks.php) */
.wacts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.wact{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line);min-width:0}
.wact.bad{box-shadow:0 0 0 1px rgba(229,72,77,.35);background:linear-gradient(90deg,#fff5f5,#fff)}
.wact.warn{box-shadow:0 0 0 1px rgba(247,144,9,.35);background:linear-gradient(90deg,#fffaf0,#fff)}
.wai{width:38px;height:38px;border-radius:var(--r);display:grid;place-items:center;flex:none;font:800 15px var(--f);color:#fff}
.wact.bad .wai{background:#e5484d}.wact.warn .wai{background:#f79009;font-size:12px;letter-spacing:-.05em}
.wact div{flex:1;min-width:0}
.wact b{display:block;font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wact div span{display:block;font-size:13px;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wact .btn{flex:none;min-width:96px;justify-content:center}
.wact.done{opacity:.55}
.wform{padding:14px 18px;border-bottom:1px solid var(--line);background:#fcfbfa}
.wform[hidden]{display:none}
.wfr{display:grid;grid-template-columns:90px minmax(0,1fr);gap:12px;align-items:center;padding:6px 0}
.wl{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.wfr .binput{height:40px;width:100%}
.wevs{display:flex;flex-wrap:wrap;gap:6px}
.wevs label{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 11px;border-radius:var(--r);background:#fff;box-shadow:inset 0 0 0 1px var(--line);font:700 12.5px var(--mono);color:var(--slate);cursor:pointer;white-space:nowrap}
.wevs label.on{box-shadow:inset 0 0 0 1px rgba(123,45,255,.45);background:#f6f0ff;color:#5b21b6}
.wevs input{display:none}
.wbtns{display:flex;gap:8px}
.wends td{vertical-align:middle}
.wurl{display:flex;align-items:center;gap:12px;min-width:0}
.wfav{width:34px;height:34px;border-radius:var(--r);display:grid;place-items:center;flex:none;color:#fff;font:800 13px var(--f);background:linear-gradient(135deg,var(--c1),var(--c2))}
.wurl b{display:block;font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.wurl code{display:block;font:600 12px var(--f);color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.wscope{font-size:13.5px;white-space:nowrap}
.wchip{font:700 10.5px var(--mono);padding:2px 6px;border-radius:5px;background:#f6f0ff;color:#5b21b6;white-space:nowrap}
.wlast{display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:13px;color:var(--slate)}
.wst{font:800 11.5px var(--mono);padding:2px 7px;border-radius:5px}
.wst.ok{background:#e3f8ee;color:#0b7a4b}.wst.bad{background:#fdecec;color:#b4232a}.wst.wait{background:#fff1e0;color:#b54708}
.w7{display:flex;align-items:center;gap:8px;white-space:nowrap;font:700 12.5px var(--mono)}
.w7 .tr{width:48px;height:6px;border-radius:3px;background:#fdecec;overflow:hidden}
.w7 .tr i{display:block;height:100%;background:#12b76a}
.wends tr.paused td{color:var(--mute)}
.wends tr.paused .wfav{filter:grayscale(1);opacity:.6}
.wacts2{display:flex;gap:6px;justify-content:flex-end}
.wacts2 .btn{min-width:74px;justify-content:center}
.wgrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:16px;margin-top:16px;align-items:start}
.wseg{display:flex;gap:2px;padding:3px;border-radius:var(--r);background:var(--mist)}
.wseg button{height:28px;padding:0 11px;border:0;border-radius:8px;background:none;font:700 12.5px var(--f);color:var(--slate);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.wseg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(16,20,58,.12)}
.wseg em{font-style:normal;font:800 10.5px var(--mono);background:#fdecec;color:#b4232a;padding:1px 5px;border-radius:5px}
.wl1{display:grid;grid-template-columns:64px 118px minmax(0,1fr) 50px 58px 30px;gap:12px;align-items:center;padding:10px 18px;border-top:1px solid var(--line);font-size:13.5px;cursor:pointer}
.wl1:hover{background:#fbfbfd}
.wl1.on{background:#f3f0ff;box-shadow:inset 3px 0 0 #7b2dff}
.wl1.bad{background:#fffafa}.wl1.bad.on{background:#fdf0f0;box-shadow:inset 3px 0 0 #e5484d}
.wl1 time{font:600 12.5px var(--mono);color:var(--mute)}
.wl1 .wev{font:700 12px var(--mono);color:#5b21b6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wl1 .wto{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wl1 .wto b{font-weight:700}
.wl1 .wto span{color:var(--mute)}
.wl1 .ms{font:600 12.5px var(--mono);color:var(--mute);text-align:right}
.wl1 .wtry{font:700 11px var(--mono);color:var(--mute);text-align:right}
.wl1.new{animation:rowin .8s ease-out}
.wdet{position:sticky;top:84px;min-height:560px}
.wdh{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
.wdh h2{margin:0;font-size:16px;font-weight:800;font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wdh .asp{flex:1}
.wdrow{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;padding:9px 18px;border-bottom:1px solid var(--line);font-size:13.5px}
.wdrow span{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);padding-top:2px}
.wdrow code{font:600 12.5px var(--mono);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wtries{display:flex;flex-direction:column;gap:4px}
.wtries div{display:flex;align-items:center;gap:8px;font:600 12.5px var(--mono);color:var(--slate);white-space:nowrap}
.wdpre{margin:0;padding:14px 18px;background:#0f1222;color:#dcdde8;font:500 12px/1.6 var(--mono);white-space:pre;overflow:hidden;max-height:260px}
.wdpre .k{color:#c4a1ff}.wdpre .s{color:#86efac}.wdpre .n{color:#fdba74}
.wdlbl{padding:12px 18px 8px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);display:flex;align-items:center;gap:8px}
.wdlbl .asp{flex:1}
.wdlbl button{border:0;background:none;padding:0;font:700 12px var(--f);color:var(--blue);cursor:pointer;text-transform:none;letter-spacing:0}
.wdacts{display:flex;gap:8px;padding:14px 18px}
@media (max-width:1180px){.wgrid{grid-template-columns:1fr}.wdet{position:static;min-height:0}.wacts{grid-template-columns:1fr}}
@media (max-width:640px){.wl1{grid-template-columns:52px minmax(0,1fr) 48px}.wl1 .wto,.wl1 .ms{display:none}.wends thead{display:none}.wfr{grid-template-columns:1fr;gap:4px}.wurl b,.wurl code{max-width:190px}.wact .btn{min-width:0}}
.wjar{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:20px;align-items:center;margin-top:16px;padding:20px 22px;border-radius:var(--r);background:linear-gradient(120deg,#fff8e6,#fff 55%,#fdf6ff);box-shadow:0 0 0 1px rgba(233,162,59,.35)}
.wjl{display:flex;gap:16px;align-items:center;min-width:0}
.wjlogo{width:56px;height:56px;flex:none;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px rgba(233,162,59,.35),0 8px 20px rgba(233,162,59,.18);padding:4px}
.wjlogo.sm{width:20px;height:20px;padding:0;box-shadow:none;background:none;border-radius:0}
.wjk{font-size:11px;font-weight:800;letter-spacing:.08em;color:#b77712}
.wjl b{display:block;font-size:18px;font-weight:800;letter-spacing:-.01em;margin:2px 0 3px}
.wjl span{display:block;font-size:13.5px;color:var(--slate);line-height:1.5}
.wjr{display:flex;flex-direction:column;gap:8px;min-width:0;align-items:stretch}
.wjf .btn{width:100%;justify-content:center}
.wjfree{font-size:12.5px;color:var(--mute);text-align:center}
.wjhintf{margin:0}
.wjhint{border:0;background:none;padding:0;cursor:pointer;font-family:var(--f)}
.wjdbg form{margin:0;flex:none}.wjdbg button{border:0;background:none;padding:0;font:800 12.5px var(--f);color:#b77712;cursor:pointer;white-space:nowrap}
.wurlf{display:flex;flex-direction:column;gap:6px;min-width:0}
.wjhint{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:#b77712;text-decoration:none;align-self:flex-start}
.wjhint:hover{text-decoration:underline}
.wjdbg{display:flex;align-items:center;gap:10px;margin:0 18px 16px;padding:10px 12px;border-radius:var(--r);background:#fff8e6;box-shadow:0 0 0 1px rgba(233,162,59,.35);font-size:12.5px;color:var(--slate)}
.wjdbg span{flex:1;min-width:0}
@media (max-width:1180px){.wjar{grid-template-columns:1fr}}
@media (max-width:640px){.wjl{align-items:flex-start}.wjlogo{width:44px;height:44px}}
.wmsg{align-self:center;font-size:13px;font-weight:700;color:#b4232a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.wbtns{align-items:center;min-width:0}
.wdnone{padding:28px 18px;font-size:13.5px;color:var(--mute)}
.wl1.none{grid-template-columns:1fr;cursor:default;color:var(--mute)}
.wl1.none:hover{background:none}
img.wjlogo{display:block}
.wjdbg .wjhint{font:800 12.5px var(--f);color:#b77712}

.adsteps{margin:4px 0 16px;padding-left:20px;font-size:15px;line-height:1.65;color:var(--slate)}
.adsteps li{margin-bottom:6px}
.adjar{margin:0}
.adjar .btn{display:inline-flex;align-items:center;gap:8px}
.adjar img{display:block;background:#fff;border-radius:5px}
.wst{white-space:nowrap}
.atitle:has(> .asp) h1{flex-shrink:0}
@media (max-width:640px){.wl1 .wtry{display:none}.atitle:has(> .asp) .btn{display:none}}

/* ---- Account > Writers (pages/account-writers.php) */
.tav{--c:#2b59ff;width:30px;height:30px;border-radius:50%;display:inline-grid;place-items:center;flex:none;font:800 11px var(--f);color:#fff;background:var(--c);position:relative;box-shadow:0 0 0 2px #fff}
.tav.lg{width:36px;height:36px;font-size:12.5px}
.tav i{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:#12b76a;box-shadow:0 0 0 2px #fff}
.wseg{display:flex;gap:2px;padding:3px;border-radius:var(--r);background:var(--mist)}
.wseg button{height:28px;padding:0 11px;border:0;border-radius:8px;background:none;font:700 12.5px var(--f);color:var(--slate);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.wseg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(16,20,58,.12)}
.wseg em{font-style:normal;font:800 10.5px var(--mono);background:#fff1e0;color:#b54708;padding:1px 5px;border-radius:5px}
.ttag{font:800 10.5px var(--mono);padding:2px 7px;border-radius:5px;background:var(--mist);color:var(--slate)}
.ttag.live{background:#e3f8ee;color:#0b7a4b}.ttag.tcm{background:#fff1e0;color:#b54708}.ttag.ok{background:#eef1ff;color:#2b3fb8}
.wact.vio{box-shadow:0 0 0 1px rgba(123,45,255,.3);background:linear-gradient(90deg,#f6f0ff,#fff)}
.tform{padding:14px 18px;border-bottom:1px solid var(--line);background:#fcfbfa}
.tfr{display:grid;grid-template-columns:90px minmax(0,1fr);gap:12px;align-items:center;padding:6px 0}
.tfr .binput{height:40px;width:100%;max-width:520px}
.tnotes{display:flex;flex-wrap:wrap;gap:6px}
.tnotes label{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px 0 8px;border-radius:var(--r);background:#fff;box-shadow:inset 0 0 0 1px var(--line);font:700 13px var(--f);color:var(--slate);cursor:pointer;white-space:nowrap}
.tnotes label.on{box-shadow:inset 0 0 0 1.5px #2b59ff;color:var(--ink);background:#f3f6ff}
.tnotes i{width:18px;height:18px;border-radius:5px;flex:none}
.tnotes input{display:none}
.tcols{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tcols button{width:28px;height:28px;border-radius:50%;border:0;background:var(--c);cursor:pointer;box-shadow:0 0 0 2px #fff,0 0 0 3px transparent}
.tcols button.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--c)}
.tcolh{font-size:12.5px;color:var(--mute);margin-left:6px}
.tfine{font-size:12.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.twho{display:flex;align-items:center;gap:12px;min-width:0}
.twho b{display:block;font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.twho code{display:block;font:600 12px var(--f);color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.twr td{vertical-align:middle}
.tchips{display:flex;gap:4px;flex-wrap:nowrap;overflow:hidden;max-width:260px}
.tchip{font:700 12px var(--f);padding:3px 8px;border-radius:6px;background:var(--mist);color:var(--slate);white-space:nowrap}
.tlast{display:flex;align-items:center;gap:7px;white-space:nowrap;font-size:13px;color:var(--slate)}
.tlast .dot{width:8px;height:8px;border-radius:50%;background:#12b76a;box-shadow:0 0 0 3px rgba(18,183,106,.18)}
.tspark{display:inline-flex;align-items:flex-end;gap:2px;height:22px;vertical-align:middle;margin-right:8px}
.tspark i{width:5px;border-radius:2px;background:var(--c);opacity:.85}
.tn{font:700 12.5px var(--mono);color:var(--slate)}
.tst{font:800 11px var(--mono);padding:2px 7px;border-radius:5px;background:#f6f0ff;color:#5b21b6}
.tacts{display:flex;gap:6px;justify-content:flex-end}
.tacts .btn{min-width:84px;justify-content:center}
.twr tr.inv td{color:var(--mute)}
.twr tr.fresh td{animation:rowin .8s ease-out}
.tl1{display:grid;grid-template-columns:52px 30px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 18px;border-top:1px solid var(--line);font-size:14px}
.tl1 time{font:600 12.5px var(--mono);color:var(--mute)}
.tl1 .tw{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--slate)}
.tl1 .tw b{color:var(--ink);font-weight:700}
.wact.vio{box-shadow:0 0 0 1px rgba(123,45,255,.3);background:linear-gradient(90deg,#f6f0ff,#fff)}
.wact.warn .wai{background:#f79009}.wact.vio .wai{background:#7b2dff}
.tfine.bad{color:#b4232a;font-weight:700}
.tl1.none{grid-template-columns:1fr}
.tl1 .tw b{font-weight:700}
.twr .tacts .btn,.tacts .btn{min-width:84px;justify-content:center}
#tshared .twho b{max-width:360px}
@media (max-width:640px){.twr thead{display:none}.tfr{grid-template-columns:1fr;gap:4px}.tfine{white-space:normal}.tl1{grid-template-columns:44px 30px minmax(0,1fr)}.tl1 .ttag{display:none}.tcolh{flex-basis:100%;margin:0}}


/* /refunds and /status */
.rfsteps{list-style:none;margin:6px 0 18px;padding:0;display:flex;flex-direction:column;gap:10px}
.rfsteps li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start;padding:14px 16px;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line)}
.rfsteps li>span{width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px}
.rfsteps b{display:block;font-size:15px;margin-top:6px}
.rfsteps p{margin:4px 0 0;font-size:14.5px;color:var(--slate)}
.rfform{margin:8px 0 18px}
.rfwait{padding:20px;border-radius:var(--r);background:var(--mist);display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.rfwait b{font-size:16px}.rfwait p{margin:0;font-size:14.5px;color:var(--slate)}
.rfcharge{font-size:14px;color:var(--mute);border-top:1px solid var(--line);padding-top:16px;margin-top:24px}
.statuspage{padding:48px 0 80px}
.sph{font-size:40px;letter-spacing:-.03em;margin:6px 0 6px}
.sple{margin:0 0 26px}
/* preview 168: the trial's days, as a bar */
.btrial{height:6px;border-radius:99px;background:#fdf0dc;margin:8px 0 2px;overflow:hidden}
.btrial i{display:block;height:100%;border-radius:99px;background:#d97706}

/* ================= writing in a note on its page (preview 171, assets/noteedit.js) ================= */
.bkey{font:600 11px var(--mono);background:rgba(255,255,255,.2);border-radius:6px;padding:1px 6px;margin-left:2px}
.btn.grn{background:var(--green);color:#fff;box-shadow:0 8px 20px rgba(18,183,106,.28)}
.chip.priv.canedit{background:rgba(43,89,255,.1);color:#1f43d6;box-shadow:none}
.chip.priv.canedit.editing{background:rgba(255,214,10,.2);color:#7a5c00}
.paper.editing{box-shadow:0 0 0 2px var(--blue),0 18px 44px rgba(43,89,255,.16)}
.ebar{display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid var(--line);background:#fbfbfd;min-height:52px}
.ebar[hidden]{display:none}
.ebtn{height:34px;min-width:34px;padding:0 10px;border-radius:var(--r);border:0;background:none;color:var(--slate);display:inline-flex;align-items:center;justify-content:center;gap:7px;font:700 13px var(--f);cursor:pointer;white-space:nowrap}
.ebtn:hover{background:var(--mist);color:var(--ink)}
.ebox{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1.6px currentColor}
.esep{width:1px;height:20px;background:var(--line);margin:0 4px}
.estate{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--slate);white-space:nowrap}
.estate .edot{width:7px;height:7px;border-radius:50%;background:var(--green)}
.estate.es-saving .edot{background:#d97706;animation:eblink 1s infinite}
.estate.es-retry .edot,.estate.es-off .edot{background:#d97706}
.estate.es-retry,.estate.es-off{color:#92400e}
@keyframes eblink{50%{opacity:.35}}
.pedit{outline:none;line-height:1.75;caret-color:var(--blue)}
.pedit[hidden]{display:none}
.pedit p.el{margin:0;white-space:pre-wrap;position:relative;min-height:1.75em}
.pedit p.el.h{font-size:20px;font-weight:700;margin-bottom:6px}
.pedit p.el.b{font-weight:700}
.pedit p.el.it{font-style:italic}
.pedit p.el[data-box]{padding-left:26px}
.pedit p.el[data-box]::before{content:"";position:absolute;left:0;top:.42em;width:17px;height:17px;border-radius:50%;box-shadow:inset 0 0 0 1.6px #b9b8b4;cursor:pointer}
.pedit p.el[data-box="1"]{color:#8d8c88;text-decoration:line-through}
.pedit p.el[data-box="1"]::before{background:#12b76a;box-shadow:none}
.pedit p.el[data-box="1"]::after{content:"";position:absolute;left:5px;top:calc(.42em + 5px);width:7px;height:4px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg)}
.pedit p.el.theirs{background:rgba(18,183,106,.08);border-radius:4px;box-shadow:-14px 0 0 -11px var(--green)}
.pedit p.el.theirs::selection{background:rgba(43,89,255,.2)}
.pedit p.el.theirs[data-by]:not([data-box])::after{content:attr(data-by);position:absolute;right:-6px;top:2px;font:700 10.5px var(--f);color:#fff;background:var(--green);border-radius:5px;padding:1px 7px;white-space:nowrap;text-decoration:none}
.pedit p.el.landed{animation:elanded 2.6s ease-out}
@keyframes elanded{0%{background:rgba(18,183,106,.28)}100%{background:rgba(18,183,106,.08)}}
.etable{margin:12px 0;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line);background:#fafafa;padding:8px 10px;user-select:none;overflow-x:auto}
.etable table{border-collapse:collapse;font-size:13.5px}
.etable td{border:1px solid #e3e2df;padding:4px 10px;white-space:nowrap}
.etable .enote{display:block;margin-top:6px;font:600 11.5px var(--f);color:var(--mute)}
.ewrite{display:flex;flex-direction:column;gap:8px}
.ewrite b{font-size:15.5px}
.ewrite p{margin:0;font-size:13.5px;color:var(--slate)}
.ewrite .btn{margin-top:4px}
.ehere{display:flex;flex-direction:column;gap:10px}
.ewho{display:flex;align-items:center;gap:10px}
.ewho .eav{width:30px;height:30px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:800;flex:none}
.ewho div{flex:1;min-width:0}
.ewho b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ewho div span{display:block;font-size:12.5px;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ewho em{font-style:normal;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:6px;background:var(--mist);color:var(--slate);white-space:nowrap}
.ewho em.typing{background:rgba(18,183,106,.12);color:#0b7a47}
.ekeys{display:grid;gap:7px;font-size:13px;color:var(--slate)}
.ekeys div{display:flex;justify-content:space-between;gap:10px}
.ekeys kbd{font:600 11.5px var(--mono);background:var(--mist);border-radius:6px;padding:2px 7px;color:var(--ink);box-shadow:inset 0 -1px 0 var(--line);white-space:nowrap}
.ntoast[hidden]{display:none}
@media (max-width:760px){.ebtn .t{display:none}.pedit p.el.theirs[data-by]::after{display:none}}
.editing .nside > .ncard:not(#ehere):not(#ekeys){display:none}

/* ================= your own domain (preview 172), Account > Your page ================= */
.dpanel{margin-top:18px}
.dacts{margin-top:18px}
.btn.dvio{background:#6d28d9;color:#fff;box-shadow:0 8px 20px rgba(109,40,217,.28)}
.dbody{padding:16px 18px 18px}
.domlab{font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--mute);margin-bottom:8px}
.dfield{display:flex;align-items:center;height:52px;border-radius:var(--r);box-shadow:inset 0 0 0 1.5px #d6d9e6;background:#fff;overflow:hidden;margin:0}
.dfield:focus-within{box-shadow:inset 0 0 0 1.5px var(--blue),0 0 0 4px rgba(43,89,255,.1)}
.dfield input{border:0;outline:0;background:transparent;height:100%;font:600 16px var(--mono);color:var(--ink);padding:0 4px 0 14px;width:110px;min-width:0}
.dfield input.dom{flex:1;width:auto;padding-left:4px}
.dfield .ddot{font:600 16px var(--mono);color:var(--mute)}
.dfield .btn{margin:0 6px 0 auto}
.dhint{font-size:13px;color:var(--slate);margin:0}
.duses{display:grid;gap:6px;margin-top:14px}
.duses div{border-radius:var(--r);background:var(--mist);padding:9px 14px;display:flex;justify-content:space-between;gap:12px;min-width:0}
.duses code{font:600 12.5px var(--mono);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.duses span{font-size:12.5px;color:var(--slate);white-space:nowrap}
.dchip{height:24px;display:inline-flex;align-items:center;gap:7px;padding:0 10px;border-radius:var(--r);font-size:12px;font-weight:800}
.dchip.live{background:rgba(18,183,106,.12);color:#0b7a47}.dchip.live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green)}
.daddr{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.daddr a{font:700 18px var(--mono);color:var(--ink);text-decoration:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dsteps{display:flex;flex-direction:column;gap:12px}
.dstep{display:flex;gap:12px;align-items:flex-start}
.dstep i{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:800;margin-top:1px}
.dstep i.ok{background:#12b76a;color:#fff}.dstep i.wait{background:#fff3dc;color:#b45309;box-shadow:inset 0 0 0 1.5px #f5b14a}.dstep i.todo{background:var(--mist);color:var(--mute)}
.dstep b{display:block;font-size:14.5px}.dstep span{display:block;font-size:13px;color:var(--slate)}
.drec{width:100%;border-collapse:separate;border-spacing:0}
.drec th{font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--mute);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
.drec td{padding:12px 10px;border-bottom:1px solid var(--line);font:600 14px var(--mono);white-space:nowrap}
.drec td.dcp{text-align:right}
.dtip{font-size:13px;color:var(--slate);background:#fbfbfd;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line);padding:12px 14px;margin-top:14px}
.dlink{border:0;background:none;padding:0;font:700 13px var(--f);color:#b45309;cursor:pointer}
.dbtns{margin-top:14px;align-items:center}
.dbtns .amsg{flex:1;margin:0}
@media (max-width:760px){.dpanel .aph span:not(.dchip){display:none}.drec thead{display:none}.drec,.drec tbody,.drec tr,.drec td{display:block;width:100%}.drec td{border:0;padding:4px 0;white-space:normal;word-break:break-all}.drec td.dcp{text-align:left;padding-top:8px}.dfield input{width:70px}.duses span{display:none}}
.dmsg{margin:6px 2px 6px;min-height:20px}
.dfield input:first-child{field-sizing:content;min-width:3ch;width:auto;max-width:180px;padding-right:2px}

/* ---------- students and teams (preview 174, approved): the band on /pricing, the boxes in Billing, Account > Team */
/* ---------- students and teams band */
.stsec{background:var(--mist);padding:84px 0}
.sthead{max-width:760px;margin-bottom:34px}
.stk{display:inline-block;font:800 12px var(--f);letter-spacing:.1em;color:var(--violet);margin-bottom:10px}
.sthead h2{margin:0 0 10px;font:800 40px/1.12 var(--f);letter-spacing:-.035em}
.sthead p{margin:0;color:var(--slate);font-size:17px}
.stgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.stcard{background:#fff;border-radius:var(--r);padding:28px;box-shadow:0 0 0 1px var(--line),0 24px 60px rgba(16,20,58,.08);display:flex;flex-direction:column;gap:20px;position:relative;overflow:hidden}
.stcard::before{content:"";position:absolute;left:0;right:0;top:0;height:4px}
.stcard.stu::before{background:#06b6d4}.stcard.team::before{background:var(--violet)}
.stlbl{display:inline-block;font:800 12px var(--f);letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:6px}
.stlbl.s{color:#0e7490;background:rgba(6,182,212,.12)}.stlbl.t{color:#6d28d9;background:rgba(123,45,255,.1)}
.stprice{display:flex;align-items:baseline;gap:10px;margin:12px 0 4px;flex-wrap:wrap}
.stprice b{font:800 54px/1 var(--f);letter-spacing:-.05em}
.stu .stprice b{color:#0e7490}.team .stprice b{color:var(--violet)}
.stprice span{color:var(--slate);font-weight:600}
.stprice em{font-style:normal;font:800 11.5px var(--f);letter-spacing:.04em;text-transform:uppercase;padding:4px 9px;border-radius:6px;background:#fff4d6;color:#8a5a00;margin-left:auto;white-space:nowrap}
.stsub{color:var(--slate);font-size:15px}
.stlist{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.stlist li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px}
.stlist i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;margin-top:1px}
.stu .stlist i{background:rgba(6,182,212,.14)}.team .stlist i{background:rgba(123,45,255,.12)}
.stlist i::after{content:"";width:8px;height:8px;border-radius:50%}
.stu .stlist i::after{background:#06b6d4}.team .stlist i::after{background:var(--violet)}
.stlist b{display:block;font-size:15px}
.stlist span{display:block;color:var(--slate);font-size:14px;line-height:1.5}
.stschools{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px;color:var(--mute)}
.stschools span{margin-right:4px;font-weight:600}
.stschools b{font:600 12.5px var(--mono);color:var(--ink);background:var(--mist);padding:3px 8px;border-radius:6px;white-space:nowrap}
.btn.stgo{margin-top:auto;justify-content:center;height:52px;font-size:15.5px;color:#fff;width:100%}
.btn.stgo svg{margin-left:6px}
.btn.stgo.s{background:#0891b2;box-shadow:0 12px 30px rgba(6,182,212,.3)}
.btn.stgo.t{background:var(--violet);box-shadow:0 12px 30px rgba(123,45,255,.3)}
.stcalc{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;background:#f7f4ff;border-radius:var(--r);padding:16px 18px}
.stcl span,.stcr span{display:block;font:800 11.5px var(--f);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.stcr{text-align:right}
.stcr b{display:block;font:800 30px/1 var(--f);letter-spacing:-.03em;font-variant-numeric:tabular-nums;min-width:7ch}
.stcr em{display:block;font-style:normal;font-size:13px;color:#0b7a4b;font-weight:600;margin-top:4px;min-height:20px}
.stepper{display:inline-flex;align-items:center;background:#fff;border-radius:var(--r);box-shadow:0 0 0 1px var(--line)}
.stepper button{width:40px;height:40px;border:0;background:none;font:700 20px var(--f);color:var(--ink);cursor:pointer}
.stepper button:disabled{color:#c9cbd8;cursor:default}
.stepper b{min-width:44px;text-align:center;font:800 18px var(--f);font-variant-numeric:tabular-nums}

/* ---------- modals */
.ststeps{display:flex;gap:6px;margin-bottom:14px}
.ststeps i{flex:1;height:4px;border-radius:4px;background:var(--mist)}
.ststeps i.on{background:#06b6d4}
.stwait{display:flex;align-items:center;gap:10px;padding:14px;border-radius:var(--r);background:var(--mist);font-size:14px;color:var(--slate);margin-bottom:16px}
.stwait i{width:14px;height:14px;border-radius:50%;border:2px solid #06b6d4;border-right-color:transparent;animation:stspin 1s linear infinite}
@keyframes stspin{to{transform:rotate(360deg)}}
.tmrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end;margin-bottom:14px}
.tmrow span{display:block;font:800 11.5px var(--f);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.abox .tmname input{margin:0}


.stumodal .abox input[type=email]{margin-bottom:0}
.tmseats .stepper{height:46px}
.tmrow .tmname input{margin:0}
.tmdiff{align-self:center;font-size:14px;font-weight:700;color:var(--slate)}
.tmhead{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.tmhead .tmname2{display:block;font-size:20px;font-weight:800;letter-spacing:-.02em}
.tmhead span{display:block;color:var(--slate);font-size:14px}
.tmacts{display:flex;gap:8px}
.tmbox .aph{flex-wrap:wrap}
.tminv{display:flex;gap:8px}
.tminv .binput{width:300px;height:38px}
.tmmsg{margin:6px 18px 0;min-height:18px;font-size:13px}
.tmr{display:grid;grid-template-columns:40px minmax(0,1fr) 110px 100px 112px;gap:14px;align-items:center;padding:12px 18px;border-bottom:1px solid var(--line)}
.tmr:last-child{border-bottom:0}
.tav2{width:40px;height:40px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font:800 14px var(--f)}
.tav2.tw0{background:var(--mist);color:var(--mute)}
.tmw{min-width:0}
.tmw b{display:block;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tmw span{display:block;font-size:13.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tmst{justify-self:start;font:800 11.5px var(--f);letter-spacing:.04em;text-transform:uppercase;padding:4px 9px;border-radius:6px;white-space:nowrap}
.tmst.own{background:rgba(43,89,255,.1);color:#2b59ff}.tmst.on{background:rgba(123,45,255,.1);color:#6d28d9}.tmst.wait{background:#fff4d6;color:#8a5a00}
.tseen{font-size:13.5px;color:var(--slate)}
.tbtn{justify-self:end}
.tmx{border:0;background:var(--mist);color:var(--ink);font:700 13px var(--f);height:34px;width:108px;border-radius:var(--r);cursor:pointer}
.tmx:hover{background:#e9ebf5}.tmx:disabled{opacity:.5;cursor:default}
.tmr.tmfresh{animation:tmin .9s ease}
@keyframes tmin{from{background:#f3edff}to{background:#fff}}
.tmfoot{padding:14px 18px;font-size:13.5px;color:var(--mute);border-top:1px solid var(--line)}
.tmsel{width:100%;height:46px;margin-bottom:4px}
@media (max-width:980px){.stgrid{grid-template-columns:1fr}}
@media (max-width:640px){
  .stsec{padding:56px 0}.sthead h2{font-size:30px}.stcard{padding:20px}.stprice b{font-size:44px}.stprice em{margin-left:0}
  .stcalc{grid-template-columns:1fr}.stcr{text-align:left}
  .tmr{grid-template-columns:40px minmax(0,1fr) 108px;row-gap:6px}.tseen{display:none}.tmst{grid-column:2}.tbtn{grid-column:3;grid-row:1}
  .tminv{width:100%}.tminv .binput{flex:1;width:auto;min-width:0}
  .tmacts{width:100%}.tmacts .btn{flex:1;justify-content:center}
  .tmrow{grid-template-columns:1fr}
}

/* ---------- /download: see it (four screens) and how it compares (zip 188) */
.dlsee{padding:88px 0 40px}
.dlseetabs{display:flex;gap:8px;margin:0 0 18px;flex-wrap:wrap}
.dlseetabs button{display:inline-flex;align-items:center;gap:8px;border:0;background:var(--mist);color:var(--slate);font:600 14px var(--f);padding:10px 16px;border-radius:var(--r);cursor:pointer;white-space:nowrap}
.dlseetabs button:hover{color:var(--ink)}
.dlseetabs button.on{background:var(--ink);color:#fff}
.dlshot{border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line),0 30px 70px rgba(16,20,58,.14);overflow:hidden}
.dlsbar{height:42px;background:#f6f5f3;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;padding:0 14px;font-size:13px}
.dlsbar>i{width:12px;height:12px;border-radius:50%}
.dlst{font-weight:700;margin-left:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dlsy{margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:#0e7a78;background:#e3f6f6;border-radius:var(--r);padding:3px 10px;font-weight:600;white-space:nowrap}
.dlsbody{display:flex;min-height:430px}
.dlsrail{width:52px;flex:none;background:#fafaf9;border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:12px}
.dlsrail b{width:34px;height:34px;border-radius:var(--r);display:grid;place-items:center;color:var(--slate);position:relative}
.dlsrail b.on{background:#e8edff;color:var(--blue)}
.dlsrail em{position:absolute;right:-4px;top:-4px;min-width:16px;height:16px;border-radius:var(--r);background:var(--violet);color:#fff;font:800 10px/16px var(--f);font-style:normal;text-align:center}
.dlpanes{flex:1;min-width:0;display:grid}
.dlpane{grid-area:1/1;min-width:0;padding:26px 30px;visibility:hidden}
.dlpane.on{visibility:visible}
.dlpane:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.dlhi{font-size:22px;font-weight:700;margin-bottom:14px}
.dlfw{background:#14162a;color:#fff;border-radius:var(--r);padding:16px 18px;position:relative;overflow:hidden}
.dlfw::after{content:"";position:absolute;right:-60px;top:-90px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(123,45,255,.45),transparent 70%)}
.dlfw>*{position:relative;z-index:1}
.dlfwt{display:flex;align-items:center;gap:4px;white-space:nowrap;font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--live)}
.dlfwt span{margin-right:auto}
.dlfwt i{width:22px;height:5px;border-radius:var(--r);background:rgba(255,255,255,.14)}
.dlfwt i.dfd{background:var(--green)}.dlfwt i.dfn{background:var(--live)}
.dlfwg{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px;margin-top:10px}
.dlfwg b{font-size:18px}
.dlfwg p{margin:4px 0 12px;font-size:13.5px;color:#c7c9de}
.dlfwg ol{margin:0;list-style:none;padding:8px 12px;background:rgba(255,255,255,.06);border-radius:var(--r);font-size:13px;color:#c7c9de}
.dlfwg li{padding:3px 0 3px 22px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dlfwg li.dfd{color:#8d8fa8;text-decoration:line-through}
.dlfwg li.dfn{color:#fff;font-weight:700}
.dlb{display:inline-block;font-size:12.5px;font-weight:700;border-radius:var(--r);padding:7px 12px;margin:0 6px 6px 0;white-space:nowrap}
.dlb.dlbw{background:#fff;color:var(--ink)}.dlb.dlbg{background:rgba(255,255,255,.12);color:#fff}
.dlcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.dlcards div{border-radius:var(--r);box-shadow:0 0 0 1px var(--line);padding:10px 12px}
.dlcards b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dlcards span{font-size:12px;color:var(--mute)}
.dldoc{max-width:640px;font-size:15px;line-height:1.75}
.dldoc h4{margin:0 0 10px;font-size:20px}
.dldoc p{margin:0 0 12px}
.dllv{display:inline-block;border-radius:var(--r);padding:1px 9px;font-size:13.5px;font-weight:700;white-space:nowrap}
.dllv.dllvs{background:#e7f8ef;color:#0b7a4b}.dllv.dllvw{background:#e6f1fd;color:#1d5fa8}.dllv.dllvr{background:#fff4dc;color:#8a5a00}
.dllu{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 14px;max-width:520px}
.dllu div{border-radius:var(--r);box-shadow:0 0 0 1px var(--line);padding:10px 12px;font-size:12.5px}
.dllu b{display:block;margin-bottom:4px;font-size:13px}
.dllu span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--slate)}
.dllu em{font-style:normal;color:#0b7a4b;font-weight:700}
.dldoc mark{border-radius:var(--r);padding:1px 3px}
.dlpane[data-pane="pairs"]{display:flex;gap:26px;align-items:flex-start}
.dlpane[data-pane="pairs"] .dldoc{flex:1;min-width:0}
.dlpick2{width:250px;flex:none;border-radius:var(--r);box-shadow:0 0 0 1px var(--line),0 14px 30px rgba(16,20,58,.1);padding:14px;align-self:flex-start}
.dlpick2>b{display:block;font-size:14px;margin-bottom:8px}
.dlpick2>span{display:block;font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--mute);text-transform:uppercase;margin:6px 0}
.dlsw{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.dlsw i{font-style:normal;height:32px;border-radius:var(--r);display:grid;place-items:center;font-size:12px;font-weight:700}
.dlph2{display:flex;gap:30px;align-items:flex-start;justify-content:center;height:100%}
.dlqr{width:250px;border-radius:var(--r);box-shadow:0 0 0 1px var(--line),0 14px 30px rgba(16,20,58,.1);padding:16px;text-align:center}
.dlqr b{display:block;font-size:15px}
.dlqr span{display:block;font-size:12.5px;color:var(--mute)}
.dlqrc{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;width:150px;margin:14px auto}
.dlqrc i{aspect-ratio:1;background:#eef0f7;border-radius:var(--r)}.dlqrc i.dqk{background:var(--ink)}
.dlqr code{display:block;font:700 13px var(--mono);margin-bottom:2px}
.dlmob{width:220px;height:350px;border-radius:28px;box-shadow:0 0 0 8px #10143a,0 20px 40px rgba(16,20,58,.25);padding:18px 16px;font-size:13px;overflow:hidden;margin:8px 0}
.dlmt{font-size:11px;color:var(--mute);background:var(--mist);border-radius:var(--r);padding:5px 9px;margin-bottom:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dlmob b{display:block;font-size:15px;margin-bottom:6px}
.dlmob p{margin:0 0 8px;color:var(--slate)}
.dlmob .dlnew2{color:var(--ink);background:#eef7ff;border-radius:var(--r);padding:2px 4px}
.dlmob .dlb.dlbw{background:var(--blue);color:#fff}
.dlcmp{padding:88px 0;background:var(--mist)}
.dlct{border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line);overflow:hidden}
.dlcr{display:grid;grid-template-columns:minmax(0,1.25fr) repeat(6,minmax(0,1fr));border-top:1px solid var(--line)}
.dlcr:first-child{border-top:0}
.dlcr>*{padding:13px 14px;font-size:13.5px;line-height:1.45}
.dlcr>b{font-weight:700}
.dlcr>span{color:var(--slate)}
.dlcr>span.us{background:#eef2ff;color:var(--ink);font-weight:600}
.dlch>span{font-weight:800;color:var(--ink);font-size:14px}
.dlch>span.us{background:var(--blue);color:#fff}
.dlcn{margin:14px 0 0;font-size:13px;color:var(--mute)}
@media (max-width:980px){
  .dlfwg,.dlcards{grid-template-columns:1fr}
  .dlpane[data-pane="pairs"]{flex-direction:column}
  .dlph2{flex-direction:column;align-items:center}
  .dlch{display:none}
  .dlcr{grid-template-columns:1fr 1fr;padding:6px 0}
  .dlcr>b{grid-column:1/-1;padding-bottom:4px}
  .dlcr>span{padding:6px 14px}
  .dlcr>span::before{content:attr(data-p);display:block;font-size:11px;font-weight:800;letter-spacing:.04em;color:var(--mute);text-transform:uppercase}
  .dlcr>span.us::before{color:var(--blue)}
}
@media (max-width:640px){.dlfwt i{display:none}.dlsrail{display:none}.dlpane{padding:20px 16px}.dlseetabs button{flex:1 1 calc(50% - 8px);justify-content:center}}
.dlfwg li::before{content:"";position:absolute;left:0;top:50%;width:13px;height:13px;margin-top:-7px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
.dlfwg li.dfd::before{background:#12b76a;box-shadow:none}
.dlfwg li.dfn::before{background:#ffd60a;box-shadow:none}
.dlfake{font-size:12px;color:var(--mute);margin-top:-6px}