/* DCS Reach — dropdown menus, Reach-only sections and the home hero (the publishing calendar). Loaded after site.css. */

/* ---------- dropdown menus ---------- */
.nav{align-items:center}
.nav .dd{position:relative}
.nav .dd>button{height:32px;display:flex;align-items:center;gap:6px;padding:0 12px;border:0;border-radius:10px;background:none;font:500 14px var(--sans);color:var(--ink-2);cursor:pointer}
.nav .dd>button svg{width:10px;height:10px;transition:transform .25s var(--ease)}
.nav .dd>button:hover,.nav .dd.open>button{background:rgba(42,45,50,.06);color:var(--ink)}
.nav .dd.open>button svg{transform:rotate(180deg)}
.nav .dd.cur>button{color:var(--ink);font-weight:600}
.menu{position:absolute;top:calc(100% + 12px);left:50%;z-index:70;display:grid;gap:6px;padding:14px;border-radius:20px;background:var(--paper);border:1px solid var(--line);
  box-shadow:0 40px 80px -36px rgba(30,32,36,.45),0 2px 0 rgba(255,255,255,.6) inset;opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:opacity .22s,transform .3s var(--ease),visibility 0s .3s}
.menu::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.dd.open .menu{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .22s,transform .3s var(--ease)}
.menu.mega{grid-template-columns:repeat(3,minmax(0,220px)) 250px;gap:8px 10px;width:max-content}
.menu.mega{left:-150px;transform:translate(0,8px)}
.dd.open .menu.mega{transform:translate(0,0)}
.menu.list{grid-template-columns:minmax(0,270px) 240px;width:max-content}
.menu .col{display:grid;gap:2px;align-content:start}
.menu .col>b{font:600 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:8px 10px 6px}
.nav .menu a{height:auto;border-radius:13px}
.nav .menu a:hover{background:var(--bg)}
.menu a.mi{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;padding:10px;border-radius:13px;transition:background .2s}
.menu a.mi:hover,.menu a.mi:focus-visible{background:var(--bg)}
.menu a.mi .ti{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--bg);border:1px solid var(--line);color:var(--ink-2)}
.menu a.mi:hover .ti{background:var(--paper)}
.menu a.mi .ti svg{width:17px;height:17px}
.menu a.mi strong{display:block;font-size:14px;font-weight:600;color:var(--ink);line-height:1.3}
.menu a.mi span{display:block;font-size:12.5px;line-height:1.45;color:var(--muted);margin-top:2px}
.nav .menu a.feat,.menu .feat{display:flex;flex-direction:column;justify-content:space-between;gap:16px;padding:18px;border-radius:15px;background:var(--bg);border:1px solid var(--line);position:relative;overflow:hidden}
.menu .feat::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(42,45,50,.12) 1px,transparent 1.5px);background-size:16px 16px;-webkit-mask-image:linear-gradient(200deg,#000,transparent 70%);mask-image:linear-gradient(200deg,#000,transparent 70%)}
.menu .feat>*{position:relative}
.menu .feat small{font:600 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.menu .feat strong{display:block;margin-top:8px;font-size:17px;line-height:1.3;letter-spacing:-.01em}
.menu .feat p{margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--ink-2)}
.menu .feat .more{margin-top:0;font-size:13px;align-self:flex-start}
.menu .mini{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:16px}
.menu .mini u{aspect-ratio:1;border-radius:6px;background:var(--paper);border:1px solid var(--line);box-shadow:0 2px 0 -.5px var(--line-2);display:grid;place-items:center}
.menu .mini u.on{border-color:var(--line-2)}
.menu .mini img{width:60%;height:60%;object-fit:contain}
.menu .flow{display:flex;flex-wrap:wrap;gap:4px;margin-top:12px}
.menu .flow i{font:500 10px var(--mono);font-style:normal;padding:3px 7px;border-radius:99px;border:1px solid var(--line-2);color:var(--ink-2);background:var(--paper)}
.nav>a{height:32px}

/* mobile menu: grouped, collapsible */
.mnav details{border-bottom:1px solid var(--line)}
.mnav summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:13px 4px;font-weight:600;cursor:pointer}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary::after{content:"+";font:400 20px var(--sans);color:var(--muted)}
.mnav details[open] summary::after{content:"–"}
.mnav details a{display:block;padding:9px 4px 9px 16px;border:0;font-weight:500;color:var(--ink-2)}
.mnav details div{padding-bottom:10px}
@media (max-width:1100px){.mnav{max-height:calc(100vh - var(--head));overflow:auto}}

/* ---------- small badges ---------- */
.st{display:inline-flex;align-items:center;gap:6px;font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:99px;border:1px solid var(--line-2);color:var(--ink-2);background:var(--bg);white-space:nowrap}
.st::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink-2)}
.st.soon{border-style:dashed;color:var(--muted)}
.st.soon::before{background:transparent;border:1px solid var(--muted)}
.st.wait::before{background:var(--faint)}

/* ---------- the ten-surface map ---------- */
.desk{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.desk a.all{background:var(--ink);border-color:var(--ink);color:var(--paper);justify-content:space-between}
.desk a.all p{color:inherit;opacity:.7}
.desk a.all .more{color:inherit;margin-top:0}
[data-theme=dark] .desk a.all{background:#E4E6E9;border-color:#E4E6E9;color:#1F2124}
.desk a{position:relative;display:flex;flex-direction:column;min-height:190px;padding:22px;border-radius:20px;background:var(--paper);border:1px solid var(--line);transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.desk a:hover{transform:translateY(-4px);box-shadow:0 30px 60px -36px rgba(30,32,36,.45);border-color:var(--line-2)}
.desk .tile{margin-bottom:18px}
.desk b{font-size:16.5px;letter-spacing:-.01em}
.desk p{margin:6px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.desk .num{position:absolute;top:22px;right:22px}

/* ---------- pipeline (the post's journey) ---------- */
.pipe{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;position:relative}
.pipe::before{content:"";position:absolute;left:28px;width:calc(600% / 7);top:27px;height:2px;background:repeating-linear-gradient(90deg,var(--line-2) 0 8px,transparent 8px 14px)}
.pipe::after{content:"";position:absolute;left:28px;top:27px;height:2px;width:calc(600% / 7);background:var(--ink-2);transform-origin:0 50%;transform:scaleX(0);animation:pipe 7s var(--ease) infinite}
@keyframes pipe{0%{transform:scaleX(0)}70%,100%{transform:scaleX(1);opacity:1}}
.pipe li{position:relative;z-index:1}
.pipe .k{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:var(--paper);border:1px solid var(--line-2);color:var(--ink);margin-bottom:18px;box-shadow:0 6px 0 -1px #B9BDC2}
.pipe .k svg{width:24px;height:24px}
.pipe li:last-child .k{background:var(--ink-2);color:#fff;border-color:var(--ink-2)}
.pipe b{display:block;font-size:16px}
.pipe p{margin:6px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-2)}

/* ---------- product mock panels ---------- */
.mock{background:var(--paper);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 50px 100px -60px rgba(30,32,36,.55)}
.mock .mh{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 20px;background:var(--bg);border-bottom:1px solid var(--line);font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.mock .mh i{font-style:normal;border:1px solid var(--line-2);border-radius:99px;padding:3px 9px}
.mock .mb{padding:20px}
.mock .row{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.mock .row:last-child{border-bottom:0}
.mock .row img{flex:none;width:26px;height:26px;padding:4px;border-radius:8px;background:#fff;border:1px solid #E3E5E8}
.mock .row .grow{flex:1;min-width:0}
.mock .row .grow b{display:block;color:var(--ink);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mock .row .grow small{display:block;font:400 11.5px var(--mono);color:var(--muted);margin-top:2px}
.mock .row .mono{font-size:12px;color:var(--muted)}
.mock .foot{display:flex;align-items:center;gap:10px;padding:14px 20px;background:var(--bg);border-top:1px solid var(--line);font:500 12px var(--mono);color:var(--muted)}
.mock .foot b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ink-2);color:#fff;font:700 11px var(--sans)}
.mock .chk{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ink-2);color:#fff;font:700 11px var(--sans)}
.mock .chk.no{background:transparent;border:1px solid var(--line-2);color:var(--muted)}
.mock .note-c{margin:0;padding:12px 20px 16px;font:400 12px var(--sans);color:var(--muted)}
/* approval card */
.appr .who{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink-2)}
.appr .av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--bg);border:1px solid var(--line-2);font:600 12px var(--sans);color:var(--ink)}
.appr .post{margin:16px 0;padding:16px;border-radius:14px;border:1px solid var(--line);background:var(--bg);font-size:14.5px;line-height:1.55;color:var(--ink)}
.appr .post small{display:flex;align-items:center;gap:8px;margin-bottom:8px;font:500 11px var(--mono);color:var(--muted)}
.appr .post small img{width:16px;height:16px}
.appr .btns{display:flex;gap:8px;flex-wrap:wrap}
.appr .btns span{flex:1;min-width:110px;text-align:center;padding:10px 12px;border-radius:12px;border:1px solid var(--line-2);font:600 13px var(--sans);color:var(--ink-2)}
.appr .btns span.yes{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.appr .rule{display:flex;gap:10px;align-items:center;margin-top:14px;padding:10px 12px;border-radius:12px;border:1px dashed var(--line-2);font:500 12px var(--mono);color:var(--muted)}
/* csv mapping */
.map{width:100%;border-collapse:collapse;font-size:13.5px}
.map th,.map td{text-align:left;padding:11px 20px;border-bottom:1px solid var(--line);color:var(--ink-2)}
.map th{font:600 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:var(--bg)}
.map td code{font:500 12px var(--mono);color:var(--ink)}
.map td .st{font-size:10px}
/* week strip */
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;padding:18px}
.week .d{min-height:150px;border-radius:12px;background:var(--bg);border:1px solid var(--line);box-shadow:0 5px 0 -1px #B9BDC2;padding:8px;display:flex;flex-direction:column;gap:6px}
.week .d>b{font:600 10.5px var(--mono);letter-spacing:.1em;color:var(--muted)}
.week .d.now{border-color:var(--ink-2);box-shadow:0 5px 0 -1px var(--ink-2)}
.week .p{display:flex;align-items:center;gap:6px;padding:6px;border-radius:8px;background:var(--paper);border:1px solid var(--line);font:500 10.5px var(--mono);color:var(--ink-2)}
.week .p img{width:14px;height:14px}
.week .p.dr{border-style:dashed;color:var(--muted)}

/* ---------- live today vs on the way ---------- */
.lists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.lists ul{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px}
.lists li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.5;color:var(--ink-2)}
.lists li i{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:700 11px var(--sans);font-style:normal;margin-top:1px;background:var(--ink-2);color:#fff}
.lists .later li i{background:transparent;border:1px dashed var(--line-2);color:var(--muted)}
.lists .later{background:transparent;border-style:dashed}
.lists .h3 small{display:block;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}

/* channel cards */
.chans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.chan{display:flex;flex-direction:column;gap:14px;padding:22px;border-radius:20px;background:var(--paper);border:1px solid var(--line)}
.chan .top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.chan img,.chan .lt{width:42px;height:42px;padding:8px;border-radius:12px;background:#fff;border:1px solid #E3E5E8;object-fit:contain}
.chan b{font-size:16px}
.chan p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.chan.soon{background:transparent;border-style:dashed}
.chan.soon img{opacity:1}

@media (max-width:1300px){.desk{grid-template-columns:repeat(3,minmax(0,1fr))}.menu.mega{grid-template-columns:repeat(3,minmax(0,200px))}.menu.mega .feat{display:none}}
@media (max-width:1100px){.pipe{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:34px}.pipe::before,.pipe::after{display:none}.chans{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.desk{grid-template-columns:repeat(2,minmax(0,1fr))}.lists{grid-template-columns:minmax(0,1fr)}.week{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:560px){.desk,.chans{grid-template-columns:minmax(0,1fr)}.pipe{grid-template-columns:repeat(2,minmax(0,1fr))}.week{grid-template-columns:repeat(2,minmax(0,1fr))}.week .d{min-height:86px}.map th:nth-child(3),.map td:nth-child(3){display:none}}

/* =========================================================
   Home hero: the publishing calendar
   ========================================================= */
.hero{position:relative;height:calc(100vh - var(--head));min-height:660px;overflow:hidden;background:radial-gradient(ellipse 70% 80% at 72% 40%,#F7F7F8 0%,rgba(247,247,248,0) 70%),linear-gradient(180deg,#F1F2F3 0%,#E6E7E9 100%)}
.stage{position:absolute;inset:0}
.fade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(238,239,240,1) 0%,rgba(238,239,240,.9) 28%,rgba(238,239,240,0) 39%);-webkit-mask-image:linear-gradient(180deg,#000 0,#000 52%,transparent 66%);mask-image:linear-gradient(180deg,#000 0,#000 52%,transparent 66%)}
.copy{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;justify-content:flex-start;max-width:calc(720px + var(--gut));padding-top:clamp(24px,6vh,80px)}
.hero h1{font-size:clamp(44px,4vw,84px)}
.hero h1 em.s{color:var(--ink-2)}
.sky{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.count{position:absolute;z-index:3;right:var(--gut);bottom:62px;text-align:right;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.count b{display:block;font:600 46px/1.1 var(--sans);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.count em{display:block;font-style:normal;font-size:10px;letter-spacing:.08em;text-transform:none;color:var(--faint)}

.iso{position:absolute;left:31%;right:-14%;top:0;bottom:0;perspective:2200px;perspective-origin:60% 30%}
.floor{position:absolute;left:2%;top:19%;scale:.9;width:1000px;height:640px;transform-style:preserve-3d;transform-origin:50% 50%;
  transform:rotateX(calc(56deg + var(--ry,0deg))) rotateZ(calc(-34deg + var(--rz,0deg)));opacity:1;transition:transform 1.6s var(--ease),opacity 1.2s var(--ease)}
.floor.intro{transform:translateZ(-260px) rotateX(68deg) rotateZ(-18deg);opacity:0}
.floor::before{content:"";position:absolute;inset:-50px -60px;border-radius:36px;background:radial-gradient(rgba(42,45,50,.13) 1px,transparent 1.5px) 0 0/22px 22px,linear-gradient(135deg,#FFFFFF 0%,#F3F4F5 100%);border:1px solid #DADCDF;box-shadow:0 14px 0 -4px #D6D8DB,0 70px 90px -40px rgba(30,32,36,.32)}

/* channel wall: every channel stands at the back of the board, big, with its honest status */
.floor::after{content:"";position:absolute;left:250px;right:-30px;top:-300px;height:260px;border-radius:26px;background:linear-gradient(135deg,#FBFBFB,#EEEFF0);border:1px solid #D6D8DB;box-shadow:0 10px 0 -2px #C9CCD0,0 40px 50px -30px rgba(30,32,36,.3)}
.tw>span{display:flex;flex-direction:column;align-items:center;gap:7px}
.tw .tile{position:relative;display:grid;place-items:center;width:74px;height:74px;border-radius:20px;background:linear-gradient(180deg,#FFFFFF,#F2F3F4);border:1px solid #D3D6DA;box-shadow:0 7px 0 -1px #A9ADB2,0 22px 26px -14px rgba(30,32,36,.42);transition:transform .35s var(--ease),box-shadow .35s}
.tw .tile img{width:40px;height:40px;object-fit:contain}
.tw .tile b{position:absolute;right:-9px;top:-9px;min-width:22px;height:22px;padding:0 6px;border-radius:99px;background:var(--ink);color:#F4F4F5;font:700 11px/22px var(--mono);text-align:center;transform:scale(0);transition:transform .3s var(--ease)}
.tw .tile b.on{transform:scale(1)}
.tw em{font:600 9.5px var(--mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);background:rgba(255,255,255,.85);border:1px solid var(--line-2);border-radius:99px;padding:3px 8px}
.tw.live em{background:var(--ink);color:#F4F4F5;border-color:var(--ink)}
.tw.live em::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#F4F4F5;margin-right:6px;vertical-align:1px;animation:pulse 2.4s infinite}
.tw.soon .tile{border-style:dashed;border-color:#A9ADB2}
.tw.soon .tile img{opacity:1}
.tw.soon em{border-style:dashed;background:transparent}
.tw.hit .tile{transform:translateY(-10px);box-shadow:0 0 0 3px rgba(42,45,50,.18),0 7px 0 -1px #6E7278,0 30px 30px -14px rgba(30,32,36,.5)}
.tw .tile{transform-origin:50% 100%}
@keyframes pop{from{opacity:0;transform:translateY(30px) scale(.6)}}
.beam{position:absolute;width:0;height:0;transform-style:preserve-3d;pointer-events:none}
.beam>span{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle,#2A2D32 0 35%,rgba(42,45,50,.25) 36% 60%,transparent 62%)}

/* billboard: anything that should face the camera */
.bill{position:absolute;width:0;height:0;transform-style:preserve-3d;pointer-events:none}
.bill>span{position:absolute;left:0;bottom:0;transform-origin:50% 100%;transform:translateZ(var(--z,0px)) rotateZ(34deg) rotateX(-56deg) translateX(-50%);white-space:nowrap}
.dh>span{font:600 11px var(--mono);letter-spacing:.14em;color:var(--muted)}
.lab>span{font:600 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;background:var(--ink);color:#F4F4F5;padding:6px 10px;border-radius:8px;box-shadow:0 10px 20px -10px rgba(42,45,50,.6)}
.lab>span i{font-style:normal;opacity:.55;margin-right:6px}

/* composer pad */
.pad{position:absolute;left:24px;top:196px;width:180px;height:248px;border-radius:18px;background:linear-gradient(180deg,#FFFFFF,#F4F5F6);border:1px solid #D3D6DA;box-shadow:0 9px 0 -1px #8A8E94,0 26px 30px -16px rgba(30,32,36,.32);transform-style:preserve-3d;padding:18px}
.pad i{display:block;height:9px;border-radius:5px;background:#E6E8EA;margin:0 0 12px}
.pad i:nth-child(1){width:70%;background:#D3D6DA}.pad i:nth-child(2){width:92%}.pad i:nth-child(3){width:84%}.pad i:nth-child(4){width:60%}
.pad i.typing{position:relative;overflow:hidden}
.pad i.typing::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#fff,transparent);animation:shim 1.8s linear infinite}
@keyframes shim{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.pad .ai{position:absolute;left:18px;bottom:16px;font:600 10px var(--mono);letter-spacing:.1em;color:var(--muted)}

/* approval gate: a standing glass wall */
.gate{position:absolute;left:228px;top:170px;width:48px;height:300px;transform-style:preserve-3d}
.gate .post{position:absolute;inset:0;border:1.5px solid var(--ink-2);border-radius:14px;background:rgba(250,250,250,.3)}
.gate .wall{position:absolute;left:24px;top:0;bottom:0;width:110px;transform-origin:0 50%;transform:rotateY(-90deg);border-radius:0 18px 18px 0;
  background:linear-gradient(90deg,rgba(255,255,255,.55),rgba(255,255,255,.18));border:1px solid rgba(70,74,80,.45);border-left:0;overflow:hidden;box-shadow:inset 0 0 40px rgba(255,255,255,.5);transition:background .25s}
.gate .wall::before{content:"";position:absolute;inset:10px;border-radius:0 12px 12px 0;border:1px dashed rgba(70,74,80,.25);border-left:0}
.gate .wall::after{content:"";position:absolute;left:0;right:0;height:70px;top:-70px;background:linear-gradient(180deg,transparent,rgba(42,45,50,.07),transparent);animation:scan 3.2s linear infinite}
@keyframes scan{to{top:100%}}
.gate.hit .wall{background:linear-gradient(90deg,rgba(42,45,50,.22),rgba(255,255,255,.2))}

/* calendar cells */
.cell{position:absolute;width:96px;height:124px;border-radius:12px;background:#FFFFFF;border:1px solid #D6D8DB;box-shadow:inset 0 1px 0 #fff,0 7px 0 -1px #8A8E94,0 20px 24px -18px rgba(30,32,36,.3);transition:background .5s,box-shadow .5s,border-color .5s}
.cell>em{position:absolute;left:9px;top:7px;font:600 10px var(--mono);font-style:normal;color:var(--faint)}
.cell.past{background:#F1F2F3}
.cell.past>em{color:#C3C6CA}
.cell.today{border-color:var(--ink-2);box-shadow:0 0 0 2px rgba(70,74,80,.35),0 7px 0 -1px #464A50,0 24px 30px -16px rgba(30,32,36,.45)}
.cell.today>em{color:var(--ink)}
.cell.today::after{content:"";position:absolute;inset:0;border-radius:12px;background:linear-gradient(180deg,transparent,rgba(42,45,50,.08),transparent) no-repeat;background-size:100% 40%;animation:pulse2 1.6s linear infinite}
@keyframes pulse2{from{background-position:0 -60%}to{background-position:0 160%}}
.today-tag>span{font:600 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;background:var(--ink);color:#F4F4F5;padding:5px 8px;border-radius:7px;box-shadow:0 8px 16px -8px rgba(42,45,50,.6)}
.today-tag{transition:left .9s var(--ease),top .9s var(--ease)}

/* posts */
.pc{position:absolute;width:84px;height:34px;margin:-17px 0 0 -42px;border-radius:9px;background:linear-gradient(180deg,#FFFFFF,#F1F2F3);border:1px solid #CDD0D4;box-shadow:0 5px 0 -1px #9EA2A7,0 14px 18px -10px rgba(30,32,36,.4);
  display:flex;align-items:center;gap:6px;padding:0 7px 0 32px;transform-style:preserve-3d;font:600 10px var(--mono);color:var(--ink-2);transition:left 1.25s cubic-bezier(.5,0,.25,1),top 1.25s cubic-bezier(.5,0,.25,1),opacity .5s}
.pc>img{flex:none;width:16px;height:16px;object-fit:contain}
.pc>s{text-decoration:none;flex:none;margin-left:auto;display:grid;place-items:center;width:15px;height:15px;border-radius:50%;border:1px dashed #A4A8AD;font:700 8px var(--sans);color:transparent;transition:background .3s,color .3s,border .3s}
.pc.draft{border-style:dashed;background:#FAFAFA}
.pc.ok>s{border:0;background:var(--ink-2);color:#fff}
.pc.live{background:linear-gradient(180deg,#2F3237,#26292D);border-color:#26292D;color:#F1F2F3;box-shadow:0 5px 0 -1px #111,0 14px 18px -10px rgba(30,32,36,.5)}
.pc.live>s{background:#fff;color:#26292D}
.pc.gone{opacity:0}
.pc.fly{animation:arc 1.25s cubic-bezier(.5,0,.25,1)}
@keyframes arc{50%{transform:translateZ(46px)}}
.pc .bb{position:absolute;left:12px;top:50%;width:0;height:0;transform-style:preserve-3d;transform:translateZ(4px) rotateZ(34deg) rotateX(-56deg);transition:transform .6s var(--ease)}
.pc .bb span{position:absolute;left:-17px;bottom:2px;width:34px;height:34px;border-radius:11px;background:linear-gradient(180deg,#FFFFFF,#F3F4F5);border:1px solid #D3D6DA;box-shadow:0 4px 0 -1px #B7BBC0,0 14px 18px -10px rgba(30,32,36,.45);display:grid;place-items:center;transform-origin:50% 100%;animation:stand .5s var(--ease) both}
.pc .bb img{width:19px;height:19px;object-fit:contain}
.pc.live .bb{transform:translateZ(40px) rotateZ(34deg) rotateX(-56deg)}
@keyframes stand{from{transform:scaleY(.1) translateY(8px);opacity:0}to{transform:none;opacity:1}}

/* sparkle burst on publish */
.burst{position:absolute;width:0;height:0;transform-style:preserve-3d;pointer-events:none}
.burst .in{position:absolute;left:0;top:0;width:0;height:0;transform:translateZ(46px) rotateZ(34deg) rotateX(-56deg)}
.burst i{position:absolute;left:-1px;top:-1px;width:2px;height:16px;border-radius:2px;background:linear-gradient(180deg,#2A2D32,transparent);transform-origin:1px 1px;transform:rotate(var(--a)) translateY(6px) scaleY(.2);opacity:0;animation:ray .7s var(--ease) forwards}
.burst b{position:absolute;left:-20px;top:-20px;width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(42,45,50,.55);transform:scale(.2);opacity:.9;animation:ring .8s var(--ease) forwards}
.burst em{position:absolute;left:-7px;top:-7px;width:14px;height:14px;font-style:normal;animation:star .9s var(--ease) forwards}
.burst em::before,.burst em::after{content:"";position:absolute;left:6px;top:0;width:2px;height:14px;border-radius:2px;background:#2A2D32}
.burst em::after{transform:rotate(90deg)}
@keyframes ray{30%{opacity:1}to{opacity:0;transform:rotate(var(--a)) translateY(26px) scaleY(1)}}
@keyframes ring{to{transform:scale(1.6);opacity:0}}
@keyframes star{0%{transform:scale(0) rotate(0)}40%{transform:scale(1.2) rotate(45deg)}to{transform:scale(0) rotate(90deg)}}

/* publishing log (2D, beside the board) */
.plog{position:absolute;z-index:3;left:var(--gut);bottom:26px;width:330px;border-radius:16px;background:rgba(250,250,250,.86);border:1px solid var(--line-2);box-shadow:0 30px 60px -34px rgba(30,32,36,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);overflow:hidden}
.plog .lh{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);font:600 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.plog .lh i{font-style:normal;display:inline-flex;align-items:center;gap:6px}
.plog .lh i::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink-2);animation:pulse 2.4s infinite}
.plog ol{list-style:none;margin:0;padding:0;height:148px;overflow:hidden}
.plog li{display:flex;align-items:center;gap:10px;height:37px;padding:0 14px;border-bottom:1px solid var(--line);font:500 11.5px var(--mono);color:var(--ink-2);animation:slide .6s var(--ease) both}
.plog li img{width:16px;height:16px;object-fit:contain}
.plog li span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plog li b{display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:var(--ink-2);color:#fff;font:700 9px var(--sans)}
.plog li em{font-style:normal;color:var(--faint);font-size:10.5px}
@keyframes slide{from{opacity:0;transform:translateY(-37px)}}

.tag{position:absolute;z-index:4;right:var(--gut);bottom:20px;font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-2);border-radius:99px;padding:4px 10px;background:rgba(255,255,255,.6)}

@media (min-width:1101px) and (max-width:1500px){.iso{left:37%}.floor{scale:.76;left:-12%;top:14%}.hero h1{font-size:clamp(44px,4.2vw,62px)}}
@media (min-width:1900px){.iso{left:30%}.floor{scale:1.12;left:10%;top:26%}}
@media (max-height:800px) and (min-width:761px){.plog{display:none}}
@media (max-width:760px){
  .hero{height:auto;min-height:0;padding:48px 0 470px}
  .fade{background:linear-gradient(180deg,rgba(238,239,240,1) 0%,rgba(238,239,240,.95) 55%,rgba(238,239,240,0) 72%)}
  .iso{left:-30%;right:-30%;top:auto;bottom:-40px;height:520px}
  .floor{left:50%;top:0;margin-left:-500px;scale:.52}
  .count,.plog{display:none}
  .copy{padding-top:0}
  .facts{gap:22px;flex-wrap:wrap}
}

/* ---------- dark mode (graphite) for everything above ---------- */
[data-theme=dark] .menu{box-shadow:0 40px 80px -36px rgba(0,0,0,.8)}
[data-theme=dark] .menu .feat::before{filter:invert(1);opacity:.5}
[data-theme=dark] .nav .dd>button:hover,[data-theme=dark] .nav .dd.open>button{background:rgba(255,255,255,.06)}
[data-theme=dark] .pipe .k{box-shadow:0 6px 0 -1px #17191B}
[data-theme=dark] .pipe li:last-child .k,[data-theme=dark] .mock .foot b,[data-theme=dark] .mock .chk:not(.no),[data-theme=dark] .lists li i{background:#C3C7CC;color:#1F2124}
[data-theme=dark] .lists .later li i{background:transparent;color:var(--muted)}
[data-theme=dark] .week .d{box-shadow:0 5px 0 -1px #17191B}
[data-theme=dark] .mock .row img,[data-theme=dark] .chan img,[data-theme=dark] .chan .lt,[data-theme=dark] .week .p img{background:#F4F5F6}
[data-theme=dark] .appr .btns span.yes{background:#E4E6E9;color:#1F2124;border-color:#E4E6E9}
[data-theme=dark] .hero{background:radial-gradient(ellipse 70% 80% at 72% 40%,#2A2D31 0%,rgba(42,45,49,0) 70%),linear-gradient(180deg,#222428 0%,#1B1D20 100%)}
[data-theme=dark] .fade{background:linear-gradient(90deg,rgba(31,33,36,1) 0%,rgba(31,33,36,.9) 28%,rgba(31,33,36,0) 39%)}
[data-theme=dark] .floor::before{background:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1.5px) 0 0/22px 22px,linear-gradient(135deg,#2C2F33 0%,#25282B 100%);border-color:#393D42;box-shadow:0 14px 0 -4px #17191B,0 70px 90px -40px rgba(0,0,0,.6)}
[data-theme=dark] .pad{background:linear-gradient(180deg,#3A3E43,#313539);border-color:#4C5157;box-shadow:0 9px 0 -1px #17191B,0 26px 30px -16px rgba(0,0,0,.6)}
[data-theme=dark] .pad i{background:#474C52}[data-theme=dark] .pad i:nth-child(1){background:#5A5F65}
[data-theme=dark] .pad i.typing::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent)}
[data-theme=dark] .cell{background:#34383C;border-color:#464B51;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 7px 0 -1px #17191B,0 20px 24px -18px rgba(0,0,0,.6)}
[data-theme=dark] .cell.past{background:#2B2E32}
[data-theme=dark] .cell.past>em{color:#4C5157}
[data-theme=dark] .cell.today{border-color:#C3C7CC;box-shadow:0 0 0 2px rgba(195,199,204,.3),0 7px 0 -1px #0F1012}
[data-theme=dark] .cell.today::after{background:linear-gradient(180deg,transparent,rgba(255,255,255,.08),transparent) no-repeat;background-size:100% 40%}
[data-theme=dark] .gate .post{border-color:#9AA0A7;background:rgba(255,255,255,.03)}
[data-theme=dark] .gate .wall{background:linear-gradient(90deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border-color:rgba(200,205,210,.35);box-shadow:inset 0 0 40px rgba(255,255,255,.04)}
[data-theme=dark] .lab>span,[data-theme=dark] .today-tag>span{background:#D9DCE0;color:#1F2124}
[data-theme=dark] .pc{background:linear-gradient(180deg,#3A3E43,#313539);border-color:#4C5157;color:#D9DCE0;box-shadow:0 5px 0 -1px #17191B,0 14px 18px -10px rgba(0,0,0,.6)}
[data-theme=dark] .pc.draft{background:#2F3236}
[data-theme=dark] .pc.ok>s{background:#C3C7CC;color:#1F2124}
[data-theme=dark] .pc.live{background:linear-gradient(180deg,#E4E6E9,#CDD0D4);border-color:#CDD0D4;color:#1F2124}
[data-theme=dark] .pc.live>s{background:#1F2124;color:#fff}
[data-theme=dark] .pc .bb span{background:linear-gradient(180deg,#F4F5F6,#E2E4E7);border-color:#5A5F65;box-shadow:0 4px 0 -1px #17191B,0 14px 18px -10px rgba(0,0,0,.6)}
[data-theme=dark] .burst i{background:linear-gradient(180deg,#D9DCE0,transparent)}
[data-theme=dark] .burst b{border-color:rgba(217,220,224,.6)}
[data-theme=dark] .burst em::before,[data-theme=dark] .burst em::after{background:#D9DCE0}
[data-theme=dark] .plog{background:rgba(40,43,47,.88)}
[data-theme=dark] .plog li b{background:#C3C7CC;color:#1F2124}
[data-theme=dark] .plog li img{background:#F4F5F6;border-radius:4px;padding:1px}
[data-theme=dark] .tag,[data-theme=dark] .st{background:rgba(255,255,255,.04)}
[data-theme=dark] .floor::after{background:linear-gradient(135deg,#2F3236,#272A2D);border-color:#3D4146;box-shadow:0 10px 0 -2px #17191B,0 40px 50px -30px rgba(0,0,0,.6)}
[data-theme=dark] .tw .tile{background:linear-gradient(180deg,#F4F5F6,#E2E4E7);border-color:#5A5F65;box-shadow:0 7px 0 -1px #17191B,0 22px 26px -14px rgba(0,0,0,.6)}
[data-theme=dark] .tw.soon .tile{border-color:#8A8F96}
[data-theme=dark] .tw.soon .tile img{opacity:1}
[data-theme=dark] .tw em{background:rgba(40,43,47,.9)}
[data-theme=dark] .tw.live em,[data-theme=dark] .tw .tile b{background:#D9DCE0;color:#1F2124;border-color:#D9DCE0}
[data-theme=dark] .tw.live em::before{background:#1F2124}
[data-theme=dark] .beam>span{background:radial-gradient(circle,#E4E6E9 0 35%,rgba(228,230,233,.25) 36% 60%,transparent 62%)}

/* =========================================================
   Home: the dashboard window (eleven screens) and the channel orbit
   ========================================================= */
.app{border-radius:24px;background:var(--paper);border:1px solid var(--line-2);box-shadow:0 60px 120px -60px rgba(30,32,36,.55),0 0 0 6px rgba(255,255,255,.5);overflow:hidden;position:relative}
.app-bar{display:flex;align-items:center;gap:7px;padding:13px 18px;background:var(--bg);border-bottom:1px solid var(--line);font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.app-bar>i{width:10px;height:10px;border-radius:50%;background:var(--line-2)}
.app-bar span{margin-left:10px}
.app-bar em{margin-left:auto;font-style:normal;border:1px solid var(--line-2);border-radius:99px;padding:3px 9px}
.app-body{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:470px}
.app-side{display:flex;flex-direction:column;gap:2px;padding:16px 12px;border-right:1px solid var(--line);background:linear-gradient(180deg,var(--bg),transparent)}
.app-side small{font:600 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);padding:14px 10px 6px}
.app-side small:first-child{padding-top:2px}
.app-side button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:10px;background:none;font:500 14px var(--sans);color:var(--ink-2);cursor:pointer;text-align:left;transition:background .25s,color .25s}
.app-side button svg{width:18px;height:18px;flex:none;opacity:.7}
.app-side button:hover{background:rgba(42,45,50,.05);color:var(--ink)}
.app-side button.on{background:var(--ink);color:var(--paper)}
.app-side button.on svg{opacity:1}
.app-main{position:relative;padding:26px 30px}
.scr{display:none}
.scr.on{display:block;animation:scrIn .55s var(--ease) both}
@keyframes scrIn{from{opacity:0;transform:translateY(14px)}}
.scr-h{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:22px}
.scr-h .k{font:600 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.scr-h h3{margin:6px 0 4px;font-size:26px;letter-spacing:-.02em}
.scr-h p{margin:0;max-width:520px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.scr-h .more{flex:none;margin-top:4px}
.scr-v{position:relative}
.app-prog{height:3px;background:var(--line)}
.app-prog i{display:block;height:100%;width:0;background:var(--ink-2)}
@keyframes prog{to{width:100%}}
/* shared bits of the screens */
.scr-v img{width:18px;height:18px;object-fit:contain;flex:none}
.scr.on [style*="--d"]{animation:popIn .5s var(--ease) both;animation-delay:var(--d)}
@keyframes popIn{from{opacity:0;transform:translateY(10px) scale(.97)}}
.v-brief{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;border:1px solid var(--line-2);background:var(--bg);font-size:15px;color:var(--ink)}
.v-brief small{font:600 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.v-brief .type{font:500 14px var(--mono)}
.scr.on .type{display:inline-block;overflow:hidden;white-space:nowrap;border-right:2px solid var(--ink);animation:typing 1.6s steps(47) both,caret .8s step-end infinite;max-width:100%}
@keyframes typing{from{width:0}to{width:48ch}}
@keyframes caret{50%{border-color:transparent}}
.v-drafts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
.v-card{padding:14px;border-radius:14px;border:1px solid var(--line);background:var(--paper);box-shadow:0 6px 0 -1px #C9CCD0}
.v-card small,.v-tabs span,.v-row small{display:flex;align-items:center;gap:8px;font:500 11.5px var(--mono);color:var(--muted)}
.v-card small{margin-bottom:12px}
.v-card i,.v-text i{display:block;height:8px;border-radius:5px;background:var(--line);margin-top:9px;position:relative;overflow:hidden}
.v-card i::after,.v-text i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);animation:shim 1.8s linear infinite}
.v-tabs{display:flex;gap:8px;flex-wrap:wrap}
.v-tabs span{padding:7px 11px;border-radius:10px;border:1px solid var(--line-2);color:var(--ink-2)}
.v-tabs span.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.v-tabs span.on img{background:#fff;border-radius:4px;padding:1px}
.v-text{margin:14px 0;padding:14px 16px 18px;border-radius:14px;border:1px solid var(--line);background:var(--bg)}
.v-checks{display:flex;gap:10px;flex-wrap:wrap}
.v-checks span{display:flex;align-items:center;gap:7px;font:500 12px var(--mono);color:var(--ink-2)}
.v-checks b,.v-ok b{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--ink-2);color:#fff;font:700 9px var(--sans)}
.v-btn{display:inline-block;margin-top:16px;padding:10px 16px;border-radius:12px;background:var(--ink);color:var(--paper);font:600 13px var(--sans)}
.v-map{border:1px solid var(--line);border-radius:14px;overflow:hidden;border-collapse:separate;border-spacing:0}
.v-media{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.v-media span{position:relative;aspect-ratio:16/10;border-radius:14px;border:1px solid var(--line);display:grid;place-items:center}
.v-media .m0{background:linear-gradient(135deg,#E9EAEC,#D3D6DA)}.v-media .m1{background:linear-gradient(135deg,#F3F4F5,#E1E3E6)}.v-media .m2{background:linear-gradient(135deg,#DADCDF,#BFC3C8)}.v-media .m3{background:linear-gradient(135deg,#ECEDEF,#C9CCD0)}
.v-media b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.9);font-size:12px;color:var(--ink)}
.v-media em{position:absolute;left:8px;top:8px;font:600 9.5px var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;background:var(--ink);color:var(--paper);padding:3px 7px;border-radius:99px}
.v-week{padding:0}
.v-week .d{min-height:170px}
.v-rows{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.v-row{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line);font-size:14px}
.v-row:last-child{border-bottom:0}
.v-row>img{width:30px;height:30px;padding:5px;border-radius:9px;background:#fff;border:1px solid #E3E5E8}
.v-row .grow{flex:1;min-width:0}
.v-row .grow b{display:block;font-size:14px;color:var(--ink)}
.v-row .chk{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ink-2);color:#fff;font:700 11px var(--sans)}
.v-row .chk.no{background:transparent;border:1px solid var(--line-2);color:var(--muted)}
.v-bar{width:90px;height:6px;border-radius:9px;background:var(--line);overflow:hidden}
.v-bar i{display:block;height:100%;width:40%;background:var(--ink-2);border-radius:9px;animation:send 1.6s var(--ease) infinite}
@keyframes send{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
.scr.on .v-shake{animation:shake .5s 1s both}
@keyframes shake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.scr .appr .btns span.yes{animation:ping 2s 1.6s infinite}
.v-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.v-stats div{padding:18px;border-radius:16px;border:1px solid var(--line);background:var(--bg)}
.v-stats small{font:500 11px var(--mono);letter-spacing:.06em;color:var(--muted)}
.v-stats b{display:block;margin-top:10px;font:600 40px/1 var(--sans);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.v-ok{display:flex;align-items:center;gap:10px;margin-top:14px;padding:12px 16px;border-radius:14px;border:1px dashed var(--line-2);font:500 12.5px var(--mono);color:var(--muted)}
.v-chart{display:flex;align-items:flex-end;gap:14px;height:220px;padding:16px 18px 0;border:1px solid var(--line);border-radius:14px;background:repeating-linear-gradient(180deg,transparent 0 43px,var(--line) 43px 44px)}
.v-chart span{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;padding-bottom:10px}
.v-chart i{width:100%;max-width:46px;height:var(--h);border-radius:10px 10px 4px 4px;background:linear-gradient(180deg,#5A5F66,#2E3136);transform-origin:50% 100%}
.scr.on .v-chart i{animation:grow .8s var(--ease) both;animation-delay:var(--d)}
.scr.on .v-chart span{animation:none}
@keyframes grow{from{transform:scaleY(0)}}
.v-chart em{font:500 11px var(--mono);font-style:normal;color:var(--muted)}
.v-cap{margin:10px 0 0;font:400 12px var(--sans);color:var(--muted)}

/* channel orbit */
.chsplit{align-items:center}
.legend{display:grid;gap:14px;margin-top:28px}
.chl small{display:block;font:600 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.chl div{display:flex;flex-wrap:wrap;gap:8px}
.chl span{display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 8px;border-radius:99px;background:var(--paper);border:1px solid var(--line);font:500 13.5px var(--sans);color:var(--ink)}
.chl span img{width:20px;height:20px;object-fit:contain}
.chl.live span{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chl.live span img{background:#fff;border-radius:5px;padding:2px}
.chl.soon span{border-style:dashed;border-color:var(--line-2)}
.chl.soon span img{opacity:1}
.orbit{position:relative;width:100%;max-width:620px;aspect-ratio:1;margin:0 auto}
.orbit svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.orbit .rings circle{fill:none;stroke:var(--line-2);stroke-width:1.2;stroke-dasharray:3 7}
.orbit .rings{transform-origin:300px 300px;animation:spin 60s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.orbit .spokes path{stroke:var(--line-2);stroke-width:1.4}
.orbit .spokes path.live{stroke:var(--ink-2);stroke-width:2}
.orbit .spokes path.soon{stroke-dasharray:4 6;opacity:.7}
.orbit .pl{fill:var(--ink-2)}
.hub{position:absolute;left:50%;top:50%;width:132px;height:132px;margin:-66px 0 0 -66px;border-radius:38px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:linear-gradient(180deg,#FFFFFF,#EEF0F1);border:1px solid var(--line-2);box-shadow:0 12px 0 -2px #B9BDC2,0 40px 60px -30px rgba(30,32,36,.5)}
.hub::after{content:"";position:absolute;inset:-14px;border-radius:48px;border:1.5px solid var(--ink-2);opacity:0;animation:hubp 2.6s var(--ease) infinite}
@keyframes hubp{0%{opacity:.5;transform:scale(.9)}100%{opacity:0;transform:scale(1.25)}}
.hub img{width:54px;height:54px}
.hub b{font:700 17px var(--sans);letter-spacing:-.01em;color:var(--ink)}
.hub small{font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.node{position:absolute;width:0;height:0;display:flex;flex-direction:column;align-items:center}
.node span{position:absolute;left:-36px;top:-36px;width:72px;height:72px;border-radius:22px;display:grid;place-items:center;background:linear-gradient(180deg,#FFFFFF,#F2F3F4);border:1px solid var(--line-2);box-shadow:0 8px 0 -1px #B9BDC2,0 26px 34px -18px rgba(30,32,36,.45);animation:bob 5s ease-in-out infinite;animation-delay:var(--d)}
.node span img{width:38px;height:38px;object-fit:contain}
.node b{position:absolute;top:44px;white-space:nowrap;font:600 13px var(--sans);color:var(--ink)}
.node em{position:absolute;top:63px;white-space:nowrap;font:600 9px var(--mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.node.live span{box-shadow:0 0 0 3px var(--ink-2),0 8px 0 -1px #464A50,0 26px 34px -18px rgba(30,32,36,.5)}
.node.live em{color:var(--ink)}
.node.soon span{border-style:dashed;border-color:#A9ADB2}
.node.soon span img{opacity:1}

@keyframes bob{50%{transform:translateY(-7px)}}
.orbit.rv .node span{transform:scale(.4);opacity:0}
.orbit.in .node span{opacity:1;transform:none;transition:transform .7s var(--ease),opacity .7s;transition-delay:var(--d)}

/* pipeline: each step lights as the line reaches it */
.pipe li .k{animation:lit 7s var(--ease) infinite}
.pipe li:nth-child(2) .k{animation-delay:.82s}.pipe li:nth-child(3) .k{animation-delay:1.63s}.pipe li:nth-child(4) .k{animation-delay:2.45s}
.pipe li:nth-child(5) .k{animation-delay:3.27s}.pipe li:nth-child(6) .k{animation-delay:4.08s}.pipe li:nth-child(7) .k{animation-delay:4.9s}
@keyframes lit{0%,16%{transform:none}4%{transform:translateY(-8px);box-shadow:0 0 0 4px rgba(42,45,50,.15),0 14px 0 -1px #8A8E94}}
/* spotlight mocks come alive when they scroll in */
.mock.in .week .p{animation:popIn .5s var(--ease) both}
.mock.in .week .d:nth-child(2) .p{animation-delay:.12s}.mock.in .week .d:nth-child(3) .p{animation-delay:.24s}.mock.in .week .d:nth-child(4) .p{animation-delay:.36s}
.mock.in .week .d:nth-child(5) .p{animation-delay:.48s}.mock.in .week .d:nth-child(6) .p{animation-delay:.6s}.mock.in .week .d:nth-child(7) .p{animation-delay:.72s}
.mock.in .map tr td .st{animation:popIn .45s var(--ease) both}
.mock.in .map tr:nth-child(3) td .st{animation-delay:.2s}.mock.in .map tr:nth-child(4) td .st{animation-delay:.4s}.mock.in .map tr:nth-child(5) td .st{animation-delay:.6s}.mock.in .map tr:nth-child(6) td .st{animation-delay:.8s}.mock.in .map tr:nth-child(7) td .st{animation-delay:1s}
.mock.appr.in .rule{animation:shake .5s 1.1s both}
.mock.appr .btns span.yes{animation:ping 2.2s 1.8s infinite}
.mock.in .row{animation:popIn .5s var(--ease) both}.mock.in .row:nth-child(3){animation-delay:.18s}.mock.in .row:nth-child(4){animation-delay:.36s}

@media (max-width:1100px){.app-body{grid-template-columns:200px minmax(0,1fr)}.v-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){
  .app-body{grid-template-columns:minmax(0,1fr)}
  .app-side{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:10px;scrollbar-width:none}
  .app-side small{display:none}
  .app-side button{width:auto;flex:none;white-space:nowrap}
  .app-main{padding:20px}
  .v-drafts{grid-template-columns:minmax(0,1fr)}.v-media{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v-week{grid-template-columns:repeat(4,minmax(0,1fr))}
  .scr-h{flex-direction:column;gap:10px}
  .orbit{max-width:440px;margin-top:20px}
  .node span{left:-27px;top:-27px;width:54px;height:54px;border-radius:16px}.node span img{width:28px;height:28px}.node b{top:34px;font-size:11.5px}.node em{display:none}
  .hub{width:110px;height:110px;margin:-55px 0 0 -55px;border-radius:30px}.hub img{width:40px;height:40px}.hub small{display:none}
}
@media (max-width:560px){.node b{display:none}.node span{left:-23px;top:-23px;width:46px;height:46px;border-radius:14px}.node span img{width:24px;height:24px}.hub{width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:24px}.hub img{width:32px;height:32px}.hub b{font-size:13px}.v-brief{flex-direction:column;align-items:flex-start}.scr.on .type{white-space:normal;border-right:0;animation:none}.v-week{grid-template-columns:repeat(2,minmax(0,1fr))}.v-row small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v-bar{width:50px}}

[data-theme=dark] .app{box-shadow:0 60px 120px -60px rgba(0,0,0,.8),0 0 0 6px rgba(255,255,255,.03)}
[data-theme=dark] .app-side button:hover{background:rgba(255,255,255,.06)}
[data-theme=dark] .app-side button.on,[data-theme=dark] .v-tabs span.on,[data-theme=dark] .v-btn,[data-theme=dark] .chl.live span{background:#E4E6E9;color:#1F2124;border-color:#E4E6E9}
[data-theme=dark] .v-card{box-shadow:0 6px 0 -1px #17191B}
[data-theme=dark] .v-card i::after,[data-theme=dark] .v-text i::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent)}
[data-theme=dark] .v-checks b,[data-theme=dark] .v-ok b,[data-theme=dark] .v-row .chk:not(.no){background:#C3C7CC;color:#1F2124}
[data-theme=dark] .v-media .m0{background:linear-gradient(135deg,#3A3E43,#2C2F33)}[data-theme=dark] .v-media .m1{background:linear-gradient(135deg,#43474D,#33373B)}[data-theme=dark] .v-media .m2{background:linear-gradient(135deg,#2F3236,#24272A)}[data-theme=dark] .v-media .m3{background:linear-gradient(135deg,#4A4F55,#2E3135)}
[data-theme=dark] .v-media em{background:#E4E6E9;color:#1F2124}
[data-theme=dark] .v-row>img,[data-theme=dark] .chl span img,[data-theme=dark] .v-tabs span img,[data-theme=dark] .v-card small img{background:#F4F5F6;border-radius:5px;padding:2px}
[data-theme=dark] .v-chart i{background:linear-gradient(180deg,#D9DCE0,#9AA0A7)}
[data-theme=dark] .v-bar i,[data-theme=dark] .app-prog i{background:#C3C7CC}
[data-theme=dark] .hub{background:linear-gradient(180deg,#3A3E43,#2C2F33);box-shadow:0 12px 0 -2px #17191B,0 40px 60px -30px rgba(0,0,0,.7)}
[data-theme=dark] .hub img{filter:invert(1)}
[data-theme=dark] .hub::after{border-color:#C3C7CC}
[data-theme=dark] .node span{background:linear-gradient(180deg,#F4F5F6,#E2E4E7);border-color:#5A5F65;box-shadow:0 8px 0 -1px #17191B,0 26px 34px -18px rgba(0,0,0,.6)}
[data-theme=dark] .node.live span{box-shadow:0 0 0 3px #C3C7CC,0 8px 0 -1px #17191B}


[data-theme=dark] .orbit .pl{fill:#C3C7CC}
[data-theme=dark] .orbit .spokes path.live{stroke:#C3C7CC}
[data-theme=dark] .pipe li .k{animation-name:litd}
@keyframes litd{0%,16%{transform:none}4%{transform:translateY(-8px);box-shadow:0 0 0 4px rgba(255,255,255,.12),0 14px 0 -1px #0F1012}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(120,124,130,.4)}70%,100%{box-shadow:0 0 0 12px rgba(120,124,130,0)}}

/* =========================================================
   Inner pages: split hero — words on the left, a live visual on the right
   ========================================================= */
.ph2{padding:clamp(48px,6vw,96px) 0 clamp(48px,5vw,84px)}
.ph-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,4.5vw,80px);align-items:center}
.ph2 h1{font-size:clamp(40px,4.2vw,72px);max-width:none}
.ph2 .lead{max-width:560px;margin:22px 0 30px}
.ph2 .legend{margin:0 0 30px}
.ph-v{position:relative;min-width:0}
.ph-v .orbit{max-width:560px}
.pwin{border-radius:22px;background:var(--paper);border:1px solid var(--line-2);box-shadow:0 60px 110px -56px rgba(30,32,36,.55),0 0 0 6px rgba(255,255,255,.5);overflow:hidden}
.pwin .scr{padding:22px}
/* how a post travels: one post walking through its states */
.jr-post{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.jr-post>img{width:34px;height:34px;padding:6px;border-radius:10px;background:#fff;border:1px solid #E3E5E8}
.jr-post b{display:block;font-size:15px}.jr-post small{font:500 11.5px var(--mono);color:var(--muted)}
.jr-steps{list-style:none;margin:0;padding:14px 20px 18px;display:grid;gap:6px}
.jr-steps li{display:grid;grid-template-columns:150px minmax(0,1fr);align-items:center;gap:14px;padding:9px 12px;border-radius:12px;animation:jr 8.4s infinite;animation-delay:calc(var(--i) * 1s)}
.jr-steps span{font:600 11.5px var(--mono);letter-spacing:.06em;color:var(--muted);padding:5px 9px;border-radius:8px;border:1px solid var(--line-2);justify-self:start}
.jr-steps em{font-style:normal;font-size:13.5px;color:var(--ink-2)}
@keyframes jr{0%,13%{background:var(--bg);box-shadow:inset 0 0 0 1px var(--line-2)}14%,100%{background:transparent;box-shadow:none}}
.jr-steps li:last-child span{background:var(--ink);color:var(--paper);border-color:var(--ink)}
/* status board */
.sb{padding:22px}
.sb-n{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sb-n div{padding:16px;border-radius:14px;border:1px solid var(--line);background:var(--bg)}
.sb-n b{display:block;font:600 38px/1 var(--sans);letter-spacing:-.03em}
.sb-n small{font:500 11px var(--mono);color:var(--muted)}
.sb-l{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.sb-l li{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--ink-2);animation:popIn .5s var(--ease) both;animation-delay:var(--d)}
.sb-l i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--ink-2);color:#fff;font:700 10px var(--sans);font-style:normal}
/* early access email */
.ml{padding:6px 22px 22px}
.ml-r{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--ink)}
.ml-r small{width:64px;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:2px}
.ml-b{padding:14px 0 4px;font-size:14.5px;color:var(--ink-2)}
.ml-b p{margin:0 0 10px}
.ml-c{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.ml-c span{display:inline-flex;align-items:center;gap:7px;padding:6px 11px 6px 8px;border-radius:99px;border:1px solid var(--line);background:var(--paper);font-size:13px;color:var(--ink)}
.ml-c img{width:18px;height:18px}
.ml .v-btn{margin-top:8px}
/* docs */
.dm{display:grid;grid-template-columns:170px minmax(0,1fr);min-height:300px}
.dm nav{display:flex;flex-direction:column;gap:2px;padding:16px 12px;border-right:1px solid var(--line);background:var(--bg)}
.dm nav b{font:600 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding:10px 8px 4px}
.dm nav span{font-size:13px;color:var(--ink-2);padding:5px 8px;border-radius:8px}
.dm nav span.on{background:var(--ink);color:var(--paper)}
.dm-a{padding:22px}
.dm-a h4{margin:0 0 12px;font-size:20px}
.dm-a ol{margin:0;padding-left:20px;display:grid;gap:10px;font-size:14px;color:var(--ink-2)}
.dm-a li{animation:popIn .5s var(--ease) both;animation-delay:var(--d)}
/* help */
.hm{padding:22px;display:flex;flex-direction:column;gap:10px}
.hq,.ha{max-width:82%;padding:12px 15px;border-radius:16px;font-size:14px;line-height:1.5;animation:popIn .5s var(--ease) both;animation-delay:var(--d)}
.hq{align-self:flex-end;background:var(--ink);color:var(--paper);border-bottom-right-radius:4px}
.ha{align-self:flex-start;background:var(--bg);border:1px solid var(--line);color:var(--ink-2);border-bottom-left-radius:4px}
@media (max-width:1000px){.ph-grid{grid-template-columns:minmax(0,1fr)}.ph-v{max-width:640px}}
@media (max-width:560px){.jr-steps li{grid-template-columns:minmax(0,1fr);gap:4px}.dm{grid-template-columns:minmax(0,1fr)}.dm nav{display:none}.sb-n b{font-size:28px}}
[data-theme=dark] .pwin{box-shadow:0 60px 110px -56px rgba(0,0,0,.8),0 0 0 6px rgba(255,255,255,.03)}
[data-theme=dark] .jr-steps li:last-child span,[data-theme=dark] .dm nav span.on,[data-theme=dark] .hq{background:#E4E6E9;color:#1F2124;border-color:#E4E6E9}
[data-theme=dark] .sb-l i{background:#C3C7CC;color:#1F2124}
[data-theme=dark] .jr-post>img,[data-theme=dark] .ml-c img{background:#F4F5F6;border-radius:5px}