/* Mission Control — three directions. All solid colors, light only. */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- tokens per direction ---------- */
[data-dir="a"]{ /* Evergreen refined */
 --ground:#F6F5F0; --surface:#FFFFFF; --sunk:#EEF1EA; --line:#E1E5DC; --line2:#CBD3C6;
 --ink:#17221D; --ink2:#3B4A43; --mute:#5E6B64;
 --accent:#2D6A4F; --accentInk:#FFFFFF; --accentSoft:#E3EEE6; --accentText:#245A42;
 --deep:#1E3A32; --glow:#B7893A; --glowSoft:#F5ECDA; --warn:#9A4A12; --warnSoft:#F8E9DC;
 --display:'Bricolage Grotesque',sans-serif; --body:'Instrument Sans',sans-serif;
 --r1:10px; --r2:16px; --r3:22px; --pill:999px;
}
[data-dir="b"]{ /* Avior S light */
 --ground:#F5F6FB; --surface:#FFFFFF; --sunk:#F7F7FC; --line:#E8E6F4; --line2:#D6D2EE;
 --ink:#0E1022; --ink2:#2B2E45; --mute:#5D6178;
 --accent:#5B46E5; --accentInk:#FFFFFF; --accentSoft:#EEEDFF; --accentText:#4A36D0;
 --deep:#5B46E5; --glow:#E8590C; --glowSoft:#FFF0E6; --warn:#B4400A; --warnSoft:#FFF0E6;
 --display:'Varela Round',sans-serif; --body:'Inter',sans-serif;
 --r1:12px; --r2:18px; --r3:24px; --pill:999px;
}
[data-dir="c"]{ /* Quiet futuristic */
 --ground:#F2F4F7; --surface:#FFFFFF; --sunk:#F6F7F9; --line:#DFE3EA; --line2:#C5CCD8;
 --ink:#0E1B33; --ink2:#33405A; --mute:#58637A;
 --accent:#0E1B33; --accentInk:#FFFFFF; --accentSoft:#E6EAF2; --accentText:#0E1B33;
 --deep:#0E1B33; --glow:#F2541B; --glowSoft:#FDEBE3; --warn:#B8410F; --warnSoft:#FDEBE3;
 --display:'Geist',sans-serif; --body:'Geist',sans-serif;
 --r1:8px; --r2:12px; --r3:16px; --pill:8px;
}

body{background:var(--ground);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);margin:0;color:var(--ink)}
h1{font-size:42px;line-height:1.08;font-weight:700;letter-spacing:-.02em}
[data-dir="b"] h1{font-weight:400;letter-spacing:-.01em}
[data-dir="c"] h1{font-size:36px;font-weight:600;letter-spacing:-.03em}
h2{font-size:19px;font-weight:650;letter-spacing:-.01em}
[data-dir="b"] h2{font-weight:400;font-size:20px}
[data-dir="c"] h2{font-size:16px;font-weight:600}
p{margin:0}
a{color:var(--accentText)}
.mute{color:var(--mute)}
.small{font-size:13px}
.num{font-variant-numeric:tabular-nums}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border-radius:var(--pill);border:1px solid var(--accent);background:var(--accent);color:var(--accentInk);font-weight:600;font-size:14px;text-decoration:none;white-space:nowrap}
.btn:hover{filter:brightness(1.06)}
.btn.quiet{background:var(--surface);color:var(--ink);border-color:var(--line2)}
.btn.quiet:hover{background:var(--sunk);filter:none}
.btn.sm{height:34px;padding:0 14px;font-size:13px}
.btn.link{background:transparent;border-color:transparent;color:var(--accentText);padding:0 6px}
.iconbtn{width:40px;height:40px;border-radius:var(--pill);border:1px solid var(--line);background:var(--surface);display:inline-flex;align-items:center;justify-content:center;position:relative;flex:none}
[data-dir="c"] .iconbtn{border-radius:var(--r1)}
.iconbtn .pip{position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:99px;background:var(--glow);border:2px solid var(--surface)}

/* ---------- shells ---------- */
.app{min-height:100vh;display:flex}
.content{flex:1;min-width:0;padding:28px 40px 72px;display:flex;flex-direction:column;gap:28px;max-width:1280px}
.side{width:248px;flex:none;position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;gap:22px;padding:24px 16px}
[data-dir="a"] .side{background:var(--sunk);border-right:1px solid var(--line)}
[data-dir="b"] .side{background:var(--surface);border-right:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);padding:0 6px}
.brand .mark{width:34px;height:34px;border-radius:10px;background:var(--deep);display:flex;align-items:center;justify-content:center;flex:none}
[data-dir="b"] .brand .mark{border-radius:99px}
.brand b{display:block;font-family:var(--display);font-size:16px;font-weight:700;line-height:1.1}
[data-dir="b"] .brand b{font-weight:400;font-size:17px}
.brand small{display:block;font-size:12px;color:var(--mute)}
[data-dir="b"] .brand small{color:var(--glow);font-weight:600}
.wsbtn{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 12px;border-radius:var(--r2);border:1px solid var(--line);background:var(--surface)}
.wsbtn .tx{flex:1;min-width:0}.wsbtn .tx b{display:block;font-size:13px}.wsbtn .tx span{display:block;font-size:12px;color:var(--mute)}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a,.nav button{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:var(--r1);border:0;background:transparent;color:var(--ink2);text-decoration:none;font-size:14px;font-weight:500;width:100%;text-align:left}
.nav a:hover,.nav button:hover{background:var(--surface)}
[data-dir="b"] .nav a:hover,[data-dir="b"] .nav button:hover{background:var(--sunk)}
.nav a.on{background:var(--deep);color:#FFFFFF}
[data-dir="b"] .nav a.on{background:var(--accentSoft);color:var(--accentText);font-weight:600}
.nav .lbl{flex:1}
.count{font-size:12px;font-weight:600;min-width:22px;height:22px;padding:0 7px;border-radius:99px;display:inline-flex;align-items:center;justify-content:center;background:var(--surface);color:var(--ink2);border:1px solid var(--line)}
.nav a.on .count{background:var(--surface);color:var(--ink);border-color:var(--surface)}
.count.hot{background:var(--glow);color:#FFFFFF;border-color:var(--glow)}
.live{width:8px;height:8px;border-radius:99px;background:var(--glow);flex:none}
.live.pulse{animation:pulse 2s ease-in-out infinite}
.side .foot{margin-top:auto;display:flex;flex-direction:column;gap:12px}
.allow{padding:12px 14px;border-radius:var(--r2);background:var(--surface);border:1px solid var(--line)}
.allow .row{display:flex;justify-content:space-between;gap:8px;font-size:13px}
.meter{height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:8px}
.meter i{display:block;height:100%;background:var(--accent)}
.who{display:flex;align-items:center;gap:10px;padding:4px 6px}
.who .tx b{display:block;font-size:13px}.who .tx span{display:block;font-size:12px;color:var(--mute)}

/* top bar (direction c) */
.app.top{flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}
.topbar .in{max-width:1280px;margin:0 auto;padding:12px 40px;display:flex;align-items:center;gap:24px}
.topbar .links{display:flex;gap:2px;flex:1}
.topbar .links a,.topbar .links button{padding:8px 12px;border-radius:var(--r1);border:0;background:transparent;text-decoration:none;color:var(--ink2);font-size:14px;font-weight:500;display:inline-flex;align-items:center;gap:8px}
.topbar .links a:hover,.topbar .links button:hover{background:var(--sunk)}
.topbar .links a.on{background:var(--ink);color:#FFFFFF}
.app.top .content{margin:0 auto;width:100%}

/* avatars */
.av{width:34px;height:34px;border-radius:99px;display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:12px;flex:none}
[data-dir="c"] .av{border-radius:9px}
.av-mc{background:#F1D3BC;color:#653515}.av-ab{background:#F3D6DE;color:#6E2139}.av-dr{background:#D3E3F3;color:#173E66}.av-np{background:#DCE9D4;color:#28501B}.av-lp{background:#E6DCF4;color:#46236B}.av-je{background:#F4E6B8;color:#5A4300}.av-sr{background:#D2ECEC;color:#134A4A}.av-eh{background:#2D6A4F;color:#FFFFFF}
.av-a{background:var(--deep);color:#FFFFFF;font-family:var(--display)}

/* ---------- ask bar ---------- */
.ask{display:flex;align-items:center;gap:10px;height:52px;padding:0 6px 0 16px;background:var(--surface);border:1px solid var(--line2);border-radius:var(--pill);flex:1 1 380px;min-width:0}
[data-dir="c"] .ask{border-radius:var(--r2);height:44px}
.ask input{flex:1;min-width:0;border:0;outline:none;background:transparent;font-size:15px}
.ask:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accentSoft)}
.ask .send{height:40px;width:40px;padding:0;border-radius:var(--pill)}
[data-dir="c"] .ask .send{height:32px;width:32px;border-radius:var(--r1)}

/* ---------- surfaces ---------- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r3);padding:22px 24px;display:flex;flex-direction:column;gap:14px;min-width:0}
[data-dir="c"] .panel{padding:20px}
.panel-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.rows{display:flex;flex-direction:column}
.r{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.r:first-child{border-top:0;padding-top:4px}
.r .tx{flex:1;min-width:0}
.r .tx b{display:block;font-size:15px;font-weight:600}
.r .tx span{display:block;font-size:13px;color:var(--mute)}
.r .acts{display:flex;gap:8px;flex:none}
.tag{font-size:12px;font-weight:600;color:var(--ink2);padding:3px 10px;border-radius:99px;background:var(--sunk);border:1px solid var(--line);white-space:nowrap}
[data-dir="c"] .tag{border-radius:6px}
.state{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:var(--ink2);white-space:nowrap}
.state i{width:7px;height:7px;border-radius:99px;background:var(--line2)}
.state.go i{background:var(--accent)}
.state.hot i{background:var(--glow)}
.state.ok i{background:#2F855A}
.empty{padding:26px;border:1px dashed var(--line2);border-radius:var(--r2);text-align:center;color:var(--mute)}
.grid{display:grid;gap:20px}
.g2{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
.g2e{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* page heads */
.ph{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.ph h1{font-size:34px}
.ph p{margin-top:6px;color:var(--mute);max-width:60ch}
.greet p{margin-top:8px;color:var(--mute);font-size:16px}

/* ---------- A: presence band ---------- */
.band{display:flex;flex-wrap:wrap;align-items:center;gap:18px 24px;padding:20px 24px;border-radius:var(--r3);background:var(--surface);border:1px solid var(--line)}
.band .who2{display:flex;align-items:center;gap:14px;flex:1 1 420px;min-width:0}
.band .halo{position:relative;width:48px;height:48px;flex:none}
.band .halo .av{width:48px;height:48px;font-size:18px}
.band .halo::after{content:"";position:absolute;inset:-5px;border-radius:99px;border:2px solid var(--glow);animation:ring 2.4s ease-out infinite}
.band b{font-family:var(--display);font-size:18px;font-weight:650;display:block}
.band .sub{font-size:14px;color:var(--mute)}
.steps{display:flex;gap:6px;margin-top:10px;max-width:360px}
.steps i{flex:1;height:4px;border-radius:99px;background:var(--line)}
.steps i.d{background:var(--accent)}
.steps i.n{background:var(--glow)}
.figures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--surface);border:1px solid var(--line);border-radius:var(--r3)}
.fig{padding:18px 22px;border-left:1px solid var(--line);text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:2px}
.fig:first-child{border-left:0}
.fig:hover{background:var(--sunk)}
.fig .v{font-family:var(--display);font-size:30px;font-weight:650;letter-spacing:-.02em}
[data-dir="b"] .fig .v{font-weight:400}
.fig .k{font-size:13px;color:var(--mute)}
.mini-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;text-align:center;font-size:13px}
.mini-cal .h{font-size:11px;color:var(--mute);padding-bottom:4px}
.mini-cal span{padding:7px 0;border-radius:8px}
.mini-cal .t{background:var(--deep);color:#FFFFFF;font-weight:600}
.mini-cal .e{position:relative;font-weight:600}
.mini-cal .e::after{content:"";position:absolute;left:50%;bottom:2px;width:4px;height:4px;margin-left:-2px;border-radius:99px;background:var(--glow)}
.stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.stage{display:flex;flex-direction:column;gap:10px}
.stage h3{font-family:var(--body);font-size:13px;font-weight:600;color:var(--mute);display:flex;justify-content:space-between}
.deal{background:var(--sunk);border:1px solid var(--line);border-radius:var(--r2);padding:14px;display:flex;flex-direction:column;gap:4px}
.deal b{font-size:14px}.deal span{font-size:13px;color:var(--mute)}
.deal .v{font-weight:600;color:var(--ink);font-size:14px}

/* ---------- B: call card ---------- */
.call{background:var(--accent);color:#FFFFFF;border-radius:var(--r3);padding:26px;display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.call .top{display:flex;align-items:center;gap:14px}
.call .top .av{width:52px;height:52px;background:#FFFFFF;color:var(--accent);font-size:22px}
.call .top .tx b{display:block;font-family:var(--display);font-size:22px;font-weight:400}
.call .top .tx span{display:block;font-size:14px;color:#DCD7FF}
.call .timer{margin-left:auto;font-size:14px;font-weight:600;background:#4A36D0;padding:6px 12px;border-radius:99px;font-variant-numeric:tabular-nums}
.wave{display:flex;align-items:center;gap:4px;height:56px}
.wave i{width:4px;border-radius:3px;background:#FFFFFF;animation:wave 1.2s ease-in-out infinite}
.call .now{background:#4A36D0;border-radius:var(--r2);padding:14px 16px;font-size:15px;line-height:1.45}
.call .now small{display:block;color:#DCD7FF;font-size:13px;margin-bottom:2px}
.call .acts{display:flex;gap:10px;flex-wrap:wrap}
.call .btn{background:#FFFFFF;color:var(--accent);border-color:#FFFFFF}
.call .btn.dim{background:#4A36D0;color:#FFFFFF;border-color:#6D5BEA}
.note-card{background:#FFF7E8;border:1px solid #F0DAA8;border-radius:var(--r2);padding:12px 14px;font-size:14px;color:#5B3E00}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r3);padding:18px 20px;display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink)}
.tile:hover{border-color:var(--line2)}
.tile .ic{width:44px;height:44px;border-radius:14px;background:var(--accentSoft);color:var(--accentText);display:flex;align-items:center;justify-content:center;flex:none}
.tile .v{font-family:var(--display);font-size:26px;line-height:1.1}
.tile .k{font-size:13px;color:var(--mute)}

/* ---------- C: flight path ---------- */
.path{background:var(--surface);border:1px solid var(--line);border-radius:var(--r3);padding:22px 24px 26px;display:flex;flex-direction:column;gap:22px}
.path-h{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px}
.track{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0}
.track::before{content:"";position:absolute;left:8px;right:8px;top:9px;height:2px;background:var(--line)}
.track .fill{position:absolute;left:8px;top:9px;height:2px;background:var(--ink);transition:width .6s ease}
.wp{position:relative;display:flex;flex-direction:column;gap:10px;padding-right:12px}
.wp .dot{width:20px;height:20px;border-radius:99px;background:var(--surface);border:2px solid var(--line2);display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.wp.d .dot{background:var(--ink);border-color:var(--ink)}
.wp.n .dot{border-color:var(--glow);background:var(--glow)}
.wp.n .dot::after{content:"";position:absolute;inset:-7px;border-radius:99px;border:2px solid var(--glow);animation:ring 2.4s ease-out infinite}
.wp b{font-size:14px;font-weight:600;line-height:1.3}
.wp span{font-size:12px;color:var(--mute)}
.wp.q b{color:var(--mute);font-weight:500}
.wp.split{border-left:1px dashed var(--line2);padding-left:14px;margin-left:-2px}
.stack{display:flex;height:12px;border-radius:6px;overflow:hidden;gap:2px}
.stack i{display:block;height:100%}
.legend{display:flex;flex-direction:column;gap:10px}
.legend .l{display:flex;align-items:center;gap:10px;font-size:14px}
.legend .l i{width:10px;height:10px;border-radius:3px;flex:none}
.legend .l .tx{flex:1}
.legend .l .num{font-weight:600}

/* ---------- Avery page ---------- */
.ws2{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px;align-items:start}
.chat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r3);display:flex;flex-direction:column;min-height:620px}
.chat .hd{padding:16px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.msgs{flex:1;padding:22px;display:flex;flex-direction:column;gap:14px;overflow-y:auto;max-height:520px}
.m{max-width:82%;padding:11px 15px;font-size:14px;line-height:1.55;border-radius:18px}
.m.u{align-self:flex-end;background:var(--deep);color:#FFFFFF;border-bottom-right-radius:6px}
.m.a{align-self:flex-start;background:var(--sunk);border:1px solid var(--line);border-bottom-left-radius:6px}
.draft{align-self:flex-start;max-width:92%;border:1px solid var(--line2);border-radius:var(--r2);overflow:hidden;background:var(--surface)}
.draft .dh{display:flex;justify-content:space-between;gap:10px;padding:10px 14px;background:var(--sunk);font-size:13px;font-weight:600;border-bottom:1px solid var(--line)}
.draft .db{padding:14px;font-size:14px;line-height:1.6}
.draft .df{display:flex;gap:8px;padding:0 14px 14px}
.typing{align-self:flex-start;display:flex;gap:4px;padding:13px 15px;background:var(--sunk);border:1px solid var(--line);border-radius:18px}
.typing i{width:7px;height:7px;border-radius:99px;background:var(--mute);animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
.sugg{display:flex;flex-wrap:wrap;gap:8px;padding:0 22px 12px}
.sugg button{font-size:13px;padding:7px 12px;border-radius:var(--pill);border:1px solid var(--line);background:var(--surface)}
.sugg button:hover{background:var(--sunk)}
.compose{padding:0 22px 22px}
.screen{border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;background:var(--surface)}
.screen .chrome{display:flex;align-items:center;gap:6px;padding:9px 12px;background:var(--sunk);border-bottom:1px solid var(--line)}
.screen .chrome i{width:9px;height:9px;border-radius:99px;background:var(--line2)}
.screen .chrome span{margin-left:8px;font-size:12px;color:var(--mute)}
.week{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:14px;height:190px}
.week span{border:1px solid var(--line);border-radius:10px;background:var(--sunk);padding:8px;font-size:12px;color:var(--mute);display:flex;flex-direction:column;justify-content:space-between}
.week span.hit{border:2px solid var(--glow);background:var(--glowSoft);color:var(--ink);font-weight:600}
.cursor{width:14px;height:14px;transform:rotate(-20deg);animation:drift 4s ease-in-out infinite}
.checklist{display:flex;flex-direction:column;gap:12px}
.ck{display:flex;align-items:center;gap:12px;font-size:14px}
.ck .b{width:22px;height:22px;border-radius:99px;border:2px solid var(--line2);display:flex;align-items:center;justify-content:center;flex:none}
.ck.d .b{background:var(--accent);border-color:var(--accent)}
.ck.n .b{border-color:var(--glow)}
.ck.n .b::after{content:"";width:8px;height:8px;border-radius:99px;background:var(--glow);animation:pulse 1.8s infinite}
.ck.q{color:var(--mute)}

/* inbox */
.inbox{display:grid;grid-template-columns:300px minmax(0,1fr);gap:20px;align-items:start}
.thr{display:flex;align-items:center;gap:12px;width:100%;padding:12px;border:0;border-radius:var(--r2);background:transparent;text-align:left}
.thr:hover{background:var(--sunk)}
.thr.on{background:var(--accentSoft)}
.thr .tx{flex:1;min-width:0}.thr b{display:block;font-size:14px}.thr span{display:block;font-size:13px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bubble{background:var(--sunk);border:1px solid var(--line);border-radius:var(--r2);padding:16px;font-size:15px;line-height:1.6}
.suggest{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:16px;border-radius:var(--r2);background:var(--accentSoft)}
.suggest .tx{flex:1 1 220px}

/* kanban */
.kan{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:start}
.kcol{display:flex;flex-direction:column;gap:12px}
.kcol h3{font-family:var(--body);font-size:14px;font-weight:600;display:flex;justify-content:space-between;align-items:center;padding:0 4px}
.kcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);padding:16px;display:flex;flex-direction:column;gap:8px}
.kcard .hd{display:flex;align-items:center;gap:10px}
.kcard select{margin-top:4px;border:1px solid var(--line2);border-radius:var(--r1);background:var(--sunk);padding:7px 9px;font-size:13px}

/* table */
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-size:13px;font-weight:600;color:var(--mute);padding:10px 12px;border-bottom:1px solid var(--line)}
.tbl td{padding:15px 12px;border-bottom:1px solid var(--line)}
.tbl tr:last-child td{border-bottom:0}

/* modal + toast */
.ov{position:fixed;inset:0;background:#DDE0E6;display:flex;align-items:center;justify-content:center;padding:20px;z-index:60}
[data-dir="a"] .ov{background:#DCE2D8}[data-dir="b"] .ov{background:#DEDCF0}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:var(--r3);width:min(720px,100%);max-height:86vh;overflow:auto;padding:26px;display:flex;flex-direction:column;gap:18px;animation:rise .2s ease}
.tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tool{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r2);text-decoration:none;color:var(--ink)}
.tool:hover{background:var(--sunk);border-color:var(--line2)}
.tool b{font-size:14px}.tool span{font-size:13px;color:var(--mute)}
.toast{position:fixed;left:50%;top:20px;transform:translateX(-50%);background:var(--ink);color:#FFFFFF;padding:11px 18px;border-radius:var(--pill);font-size:14px;font-weight:500;z-index:80;animation:rise .2s ease}
.sw{width:42px;height:24px;border-radius:99px;border:0;background:var(--line2);position:relative;flex:none}
.sw.on{background:var(--accent)}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:99px;background:#FFFFFF;transition:left .2s}
.sw.on::after{left:21px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;font-weight:600;color:var(--ink2)}
.field input{height:42px;border:1px solid var(--line2);border-radius:var(--r1);padding:0 12px;background:var(--surface);outline:none}
.field input:focus{border-color:var(--accent)}

/* design switcher (review only) */
.review{position:fixed;right:18px;bottom:18px;z-index:50;display:flex;align-items:center;gap:6px;padding:6px 6px 6px 14px;background:#FFFFFF;border:1px solid #D7DAE2;border-radius:99px;box-shadow:0 10px 30px #D9DCE4;font-family:Inter,system-ui,sans-serif;font-size:13px;color:#111827}
.review a{display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 12px;border-radius:99px;text-decoration:none;color:#111827;background:#F1F2F5;font-weight:600}
.review a.cur{background:#111827;color:#FFFFFF}
.mobnav{display:none}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes ring{0%{transform:scale(.85);opacity:1}100%{transform:scale(1.25);opacity:0}}
@keyframes wave{0%,100%{height:10px}50%{height:46px}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes rise{from{transform:translate(var(--tx,0),6px);opacity:0}to{transform:translate(var(--tx,0),0);opacity:1}}
.toast{--tx:-50%}
@keyframes drift{0%,100%{transform:translate(0,0) rotate(-20deg)}50%{transform:translate(40px,18px) rotate(-20deg)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media (max-width:1080px){
 .g2,.ws2{grid-template-columns:1fr}
 .g3{grid-template-columns:1fr 1fr}
 .track{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:24px}
 .track::before,.track .fill{display:none}
 .wp.split{border-left:0;padding-left:0}
}
@media (max-width:760px){
 .side,.topbar .links{display:none}
 .content{padding:20px 16px 150px;gap:22px}
 .topbar .in{padding:12px 16px}
 h1{font-size:32px}
 .g2e,.g3,.kan,.inbox,.tools,.stages,.tiles{grid-template-columns:1fr}
 .figures{grid-template-columns:1fr 1fr}
 .fig:nth-child(3){border-left:0}
 .fig:nth-child(n+3){border-top:1px solid var(--line)}
 .track{grid-template-columns:1fr 1fr}
 .r{flex-wrap:wrap}
 .r .acts{width:100%}
 .r .acts .btn{flex:1}
 .mobnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--surface);border-top:1px solid var(--line);padding:6px 4px 16px;justify-content:space-around}
 .mobnav a,.mobnav button{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:600;color:var(--mute);text-decoration:none;border:0;background:transparent;padding:6px 10px;border-radius:12px;min-width:56px}
 .mobnav a.on{color:var(--accentText);background:var(--accentSoft)}
 .review{left:12px;right:12px;bottom:86px;justify-content:center;font-size:12px}
 .review>span{display:none}
 .review a{padding:0 9px}
}

/* ---------- D: Bloom (rich, colorful, light) ---------- */
[data-dir="d"]{
 --ground:#F6F5FB; --surface:#FFFFFF; --sunk:#F5F3FB; --line:#E9E6F3; --line2:#D8D3EA;
 --ink:#17142B; --ink2:#36324F; --mute:#5F5B76;
 --accent:#6C3BFF; --accentInk:#FFFFFF; --accentSoft:#EFE9FF; --accentText:#5A2BE8;
 --deep:#6C3BFF; --glow:#FF6B4A; --glowSoft:#FFE8E1; --warn:#B5461C; --warnSoft:#FFE3D3;
 --display:'Plus Jakarta Sans',sans-serif; --body:'Plus Jakarta Sans',sans-serif;
 --r1:12px; --r2:18px; --r3:26px; --pill:999px;
}
[data-dir="d"]{--g1:#5B2EF0;--g2:#8E54FF;--g3:#FF7A59;--stageInk:#FFFFFF;--stageSub:#F1EBFF;--stageShadow:#DCD0FF;--blob1:#9A66FF;--blob2:#7A45FF;--chipShadow:#6A3BE0;--orb1:#EADFFF;--orb2:#A57BFF;--orb3:#6431F0;--orb4:#3B13B8;--orbShadow:#4A1CC9;--orbitLine:#C9B3FF;--floatShadow:#5326D8}
[data-dir="d"] h1{font-weight:800;letter-spacing:-.03em}
[data-dir="d"] h2{font-weight:750}
[data-dir="d"] .side{background:var(--surface);border-right:1px solid var(--line)}
[data-dir="d"] .nav a.on{background:var(--accent);color:#FFFFFF;box-shadow:0 8px 18px #D9CCFF}
[data-dir="d"] .brand .mark{border-radius:12px;background:linear-gradient(135deg,#6C3BFF,#FF6B4A)}
[data-dir="d"] .panel{box-shadow:0 1px 0 #ECE9F5,0 14px 30px #EEEBF7;border-color:#ECE9F5}
[data-dir="d"] .btn{box-shadow:0 6px 14px #DCCFFF}
[data-dir="d"] .btn.quiet{box-shadow:none}
.av.face{background:transparent!important;overflow:hidden;padding:0}
.av.face svg{width:100%;height:100%;display:block}

.stage{position:relative;overflow:hidden;border-radius:30px;background:linear-gradient(120deg,var(--g1) 0%,var(--g2) 46%,var(--g3) 100%);color:var(--stageInk);padding:34px 36px;min-height:330px;display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:24px;align-items:center;box-shadow:0 24px 50px var(--stageShadow)}
.stage::before{content:"";position:absolute;right:-120px;top:-140px;width:420px;height:420px;border-radius:999px;background:var(--blob1)}
.stage::after{content:"";position:absolute;left:38%;bottom:-180px;width:360px;height:360px;border-radius:999px;background:var(--blob2)}
.stage>*{position:relative;z-index:1}
.stage h1{color:var(--stageInk);font-size:46px}
.stage .lead{font-size:17px;color:var(--stageSub);margin-top:10px;max-width:46ch}
.stage .chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.stage .chip{display:inline-flex;align-items:center;gap:8px;background:#FFFFFF;color:var(--ink);border-radius:999px;padding:8px 14px;font-size:14px;font-weight:600;text-decoration:none;box-shadow:0 8px 18px var(--chipShadow)}
.stage .chip .dot{width:8px;height:8px;border-radius:99px;background:var(--g3);animation:pulse 2s infinite}
.stage .askw{margin-top:24px;max-width:560px}
.stage .ask{border-color:#FFFFFF;box-shadow:0 14px 30px var(--chipShadow)}
.scene{position:relative;height:300px}
.orb{position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:999px;background:radial-gradient(circle at 34% 28%,#FFFFFF 0%,var(--orb1) 14%,var(--orb2) 42%,var(--orb3) 72%,var(--orb4) 100%);box-shadow:0 30px 50px var(--orbShadow),inset -12px -16px 30px var(--orb4);animation:bob 5s ease-in-out infinite}
.orb b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:44px;font-weight:800;color:#FFFFFF;text-shadow:0 4px 10px var(--orb4)}
.orbit{position:absolute;left:50%;top:50%;width:250px;height:250px;margin:-125px 0 0 -125px;border-radius:999px;border:2px dashed var(--orbitLine);animation:spin 22s linear infinite}
.orbit::after{content:"";position:absolute;top:-7px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:99px;background:#FFD166;box-shadow:0 0 0 4px #FFFFFF}
.float{position:absolute;background:#FFFFFF;color:#17142B;border-radius:16px;padding:11px 13px;font-size:13px;line-height:1.35;box-shadow:0 18px 34px var(--floatShadow);display:flex;gap:10px;align-items:center;max-width:210px;animation:bob 6s ease-in-out infinite}
.float .fi{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none}
.float b{display:block;font-size:13px}
.float span{color:#5F5B76}
.f1{left:0;top:18px;transform:rotate(-4deg)}
.f2{right:0;top:96px;transform:rotate(3deg);animation-delay:-2s}
.f3{left:22px;bottom:6px;transform:rotate(2deg);animation-delay:-4s}
.colortiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ct{border-radius:22px;padding:20px;display:flex;flex-direction:column;gap:10px;text-decoration:none;min-height:150px;position:relative;overflow:hidden}
.ct .ico{width:44px;height:44px;border-radius:14px;background:#FFFFFF;display:flex;align-items:center;justify-content:center}
.ct .v{font-size:34px;font-weight:800;letter-spacing:-.03em;font-family:var(--display);margin-top:auto}
.ct .k{font-size:14px;font-weight:600}
.ct::after{content:"";position:absolute;right:-30px;bottom:-30px;width:110px;height:110px;border-radius:999px}
.ct.mint::after{background:#C4EEDA}.ct.peach::after{background:#FFD5BF}.ct.sky::after{background:#C9DEFF}.ct.lilac::after{background:#DDD0FF}
.ct>*{position:relative;z-index:1}
.ct.mint{background:#D9F6E8;color:#0E6B43}.ct.peach{background:#FFE5D6;color:#A23F12}.ct.sky{background:#DDEBFF;color:#1B4FB8}.ct.lilac{background:#ECE4FF;color:#5326D8}
.ct.mint .v,.ct.peach .v,.ct.sky .v,.ct.lilac .v{color:#17142B}
.team{display:flex;flex-wrap:wrap;gap:14px}
.mate{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:999px;background:var(--sunk);border:1px solid var(--line)}
.mate .av{width:38px;height:38px}
.mate b{display:block;font-size:14px}.mate span{display:block;font-size:12px;color:var(--mute)}
.mate .on{width:9px;height:9px;border-radius:99px;background:#22C55E;margin-left:4px}
.apcard{display:flex;align-items:center;gap:14px;padding:14px;border-radius:18px;border:1px solid var(--line);background:var(--surface)}
.apcard .av{width:44px;height:44px}
.apcard .tx{flex:1;min-width:0}.apcard .tx b{display:block;font-size:15px}.apcard .tx span{display:block;font-size:13px;color:var(--mute)}
.kind{font-size:12px;font-weight:700;padding:4px 10px;border-radius:99px}
.k-msg{background:#DDEBFF;color:#1B4FB8}.k-buy{background:#FFE5D6;color:#A23F12}.k-sch{background:#D9F6E8;color:#0E6B43}
.pipebars{display:flex;flex-direction:column;gap:14px}
.pb{display:grid;grid-template-columns:110px minmax(0,1fr) 84px;gap:12px;align-items:center;font-size:14px}
.pb .bar{height:14px;border-radius:99px;background:var(--sunk);overflow:hidden}
.pb .bar i{display:block;height:100%;border-radius:99px}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:1080px){.stage{grid-template-columns:minmax(0,1fr)!important}.scene{height:280px}.colortiles{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.stage{padding:24px}.stage .ask{flex-basis:auto}.ct{min-height:0}.stage h1{font-size:34px}.colortiles{grid-template-columns:1fr 1fr}.scene{display:none}}

/* ---------- X: the 20 theme-driven premium designs ---------- */
[data-dir="x"] h1{font-weight:800;letter-spacing:-.03em}
[data-dir="x"] h2{font-weight:700}
[data-dir="x"] .side{background:var(--surface);border-right:1px solid var(--line)}
[data-dir="x"] .nav a.on{background:var(--accent);color:var(--accentInk);box-shadow:0 8px 18px var(--stageShadow)}
[data-dir="x"] .nav a.on .count{background:var(--surface);color:var(--ink)}
[data-dir="x"] .brand .mark{background:linear-gradient(135deg,var(--g1),var(--g3));border-radius:var(--markR)}
[data-dir="x"] .panel{box-shadow:0 1px 0 var(--line),0 16px 34px var(--softShadow);border-color:var(--line)}
[data-dir="x"] .btn{box-shadow:0 6px 14px var(--stageShadow)}
[data-dir="x"] .btn.quiet,[data-dir="x"] .btn.link{box-shadow:none}
[data-dir="x"] .topbar .links a.on{background:var(--accent);color:var(--accentInk)}
[data-dir="x"] .thr.on{background:var(--accentSoft)}
.panel,.ct,.apcard,.tile,.kcard,.deal,.mate,.tool{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.ct:hover,.kcard:hover,.tool:hover{transform:translateY(-3px);box-shadow:0 18px 34px var(--softShadow,#E6E3F0)}
.apcard:hover{border-color:var(--line2);box-shadow:0 10px 24px var(--softShadow,#E6E3F0)}
.btn:active{transform:translateY(1px)}
#main{animation:enter .35s ease both}
@keyframes enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* duotone icon tiles */
.ico{position:relative}
.ico svg{position:relative;z-index:1}
.ico::before{content:"";position:absolute;width:16px;height:16px;border-radius:6px;right:7px;bottom:7px;background:var(--tint,#EEE)}

/* rail layout */
.rail{width:84px;flex:none;position:sticky;top:0;height:100vh;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:18px;padding:22px 0}
.rail .nav{align-items:center;gap:6px}
.rail .nav a,.rail .nav button{width:52px;height:52px;padding:0;justify-content:center;border-radius:16px;position:relative}
.rail .nav .lbl{display:none}
.rail .nav .count,.rail .nav .live{position:absolute;top:4px;right:4px;min-width:18px;height:18px;font-size:10px;padding:0 4px}
.rail .nav .live{width:9px;height:9px;min-width:0;padding:0}
.rail .nav a.on{background:var(--accent);color:var(--accentInk)}
.rail .tip{position:absolute;left:62px;top:50%;transform:translateY(-50%);background:var(--ink);color:#FFFFFF;font-size:12px;font-weight:600;padding:5px 9px;border-radius:8px;white-space:nowrap;display:none;z-index:5}
.rail .nav a:hover .tip,.rail .nav button:hover .tip{display:block}
.railhead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.railhead b{font-family:var(--display);font-size:17px}
.railhead small{display:block;color:var(--mute);font-size:12px}

/* dock layout */
.app.dockl{flex-direction:column}
.dockhead{max-width:1280px;width:100%;margin:0 auto;padding:22px 40px 0;display:flex;align-items:center;justify-content:space-between}
.app.dockl .content{margin:0 auto;width:100%;padding-bottom:130px}
.dock{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:45;display:flex;gap:6px;padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:26px;box-shadow:0 20px 44px var(--softShadow)}
.dock a,.dock button{width:54px;height:54px;border-radius:18px;border:0;background:transparent;display:flex;align-items:center;justify-content:center;color:var(--ink2);position:relative;text-decoration:none}
.dock a:hover,.dock button:hover{background:var(--sunk);transform:translateY(-4px)}
.dock a{transition:transform .18s ease,background .18s ease}
.dock a.on{background:var(--accent);color:var(--accentInk)}
.dock .count{position:absolute;top:3px;right:3px;min-width:18px;height:18px;font-size:10px;padding:0 4px}
.dock .tip{position:absolute;bottom:62px;left:50%;transform:translateX(-50%);background:var(--ink);color:#FFFFFF;font-size:12px;font-weight:600;padding:5px 9px;border-radius:8px;white-space:nowrap;display:none}
.dock a:hover .tip,.dock button:hover .tip{display:block}
.app.dockl .review{bottom:100px}

/* hero visual variants */
.vis-radar{position:absolute;left:50%;top:50%;width:230px;height:230px;margin:-115px 0 0 -115px;border-radius:999px;background:var(--radarBg);box-shadow:0 30px 50px var(--orbShadow);overflow:hidden}
.vis-radar i{position:absolute;border-radius:999px;border:1.5px solid var(--radarLine)}
.vis-radar .sweep{position:absolute;inset:0;border-radius:999px;background:conic-gradient(var(--radarHot) 0deg,var(--radarWarm) 30deg,var(--radarBg) 70deg,var(--radarBg) 360deg);animation:spin 4s linear infinite}
.vis-radar .core{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:99px;background:#FFFFFF;color:var(--orb3);font-weight:800;font-size:20px;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px var(--orbShadow)}
.vis-radar .blip{position:absolute;width:10px;height:10px;border-radius:99px;background:#FFFFFF;box-shadow:0 0 0 4px var(--radarWarm);animation:pulse 2s infinite}
.vis-wave{position:absolute;left:50%;top:50%;width:250px;height:190px;margin:-95px 0 0 -125px;border-radius:30px;background:var(--orb3);box-shadow:0 30px 50px var(--orbShadow),inset 0 -12px 24px var(--orb4);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.vis-wave .bars{display:flex;align-items:center;gap:4px;height:90px}
.vis-wave .bars i{width:5px;border-radius:3px;background:#FFFFFF;animation:wave 1.2s ease-in-out infinite}
.vis-wave span{font-size:12px;font-weight:700;color:#FFFFFF;letter-spacing:.02em}
.vis-term{position:absolute;left:50%;top:50%;width:260px;margin:-100px 0 0 -130px;border-radius:18px;background:#FFFFFF;box-shadow:0 30px 50px var(--orbShadow);overflow:hidden;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px}
.vis-term .bar{display:flex;gap:6px;padding:10px 12px;background:var(--sunk);border-bottom:1px solid var(--line)}
.vis-term .bar i{width:9px;height:9px;border-radius:99px;background:var(--line2)}
.vis-term .body{padding:14px;display:flex;flex-direction:column;gap:7px;color:var(--ink2)}
.vis-term .ok{color:var(--accentText)}
.vis-term .cur{display:inline-block;width:8px;height:14px;background:var(--accent);vertical-align:middle;margin-left:3px;animation:blink 1s infinite}
.sat{position:absolute;left:50%;top:50%;width:250px;height:250px;margin:-125px 0 0 -125px;animation:spin 16s linear infinite}
.sat span{position:absolute;width:38px;height:38px;border-radius:99px;overflow:hidden;box-shadow:0 0 0 4px #FFFFFF,0 10px 20px var(--orbShadow)}
.sat span svg{width:100%;height:100%;display:block;animation:spin 16s linear infinite reverse}

/* light-hero themes */
[data-hero="light"] .stage .chip{border:1px solid var(--line)}
[data-hero="light"] .float{border:1px solid var(--line)}
@media (max-width:760px){.dock{left:12px;right:12px;transform:none;justify-content:space-around;bottom:12px;border-radius:22px}.dock a,.dock button{width:46px;height:46px}.app.dockl .review{bottom:86px}.dockhead{padding:16px 16px 0}.rail{display:none}}
[data-dir="x"] .ct.lilac{background:var(--accentSoft);color:var(--accentText)}
[data-dir="x"] .ct.lilac::after{background:var(--line)}
[data-dir="x"] .ct.lilac .ico{--tint:var(--line2)!important}
[data-hero="light"] .brand .mark{background:var(--accent)!important}
.scene.alt .f2{top:auto;bottom:-14px;right:-30px}
.scene.alt .f3{left:-30px;bottom:-14px;top:auto}
.scene.alt .f1{left:-30px;top:-6px}

/* ---------- live mission flow ---------- */
.flow{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r3);padding:22px 24px 26px;box-shadow:0 1px 0 var(--line),0 16px 34px var(--softShadow,#ECE9F5);overflow:hidden}
.flow-h{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:18px}
.flow-h p{color:var(--mute);font-size:14px;margin-top:4px}
.eta-big{display:flex;align-items:center;gap:12px;padding:8px 14px 8px 8px;border-radius:999px;background:var(--accentSoft);color:var(--accentText);font-weight:700}
.eta-big .clock{font-variant-numeric:tabular-nums;font-size:20px;letter-spacing:-.01em}
.eta-big small{display:block;font-size:12px;font-weight:600;color:var(--ink2)}
.fgrid{position:relative;display:grid;grid-template-columns:1fr 1fr 1.25fr 1fr;align-items:center;gap:56px;min-height:300px}
.fcol{display:flex;flex-direction:column;gap:16px;position:relative;z-index:2}
.fnode{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:12px 14px;display:flex;align-items:center;gap:12px;box-shadow:0 10px 24px var(--softShadow,#ECE9F5)}
.fnode .tx{flex:1;min-width:0}.fnode b{display:block;font-size:14px}.fnode span{display:block;font-size:12px;color:var(--mute)}
.fnode.hub{flex-direction:column;text-align:center;padding:18px 14px;border-width:2px;border-color:var(--accent)}
.hub .horb{width:64px;height:64px;border-radius:999px;background:radial-gradient(circle at 34% 28%,#FFFFFF 0%,var(--orb1,#EADFFF) 14%,var(--orb2,#A57BFF) 42%,var(--orb3,#6431F0) 72%,var(--orb4,#3B13B8) 100%);box-shadow:0 12px 24px var(--orbShadow,#4A1CC9);display:flex;align-items:center;justify-content:center;color:#FFFFFF;font-weight:800;font-size:24px;position:relative}
.hub .horb::after{content:"";position:absolute;inset:-8px;border-radius:999px;border:2px solid var(--accent);animation:ring 2.2s ease-out infinite}
.botic{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none}
.ring{position:relative;width:46px;height:46px;flex:none}
.ring svg{width:46px;height:46px;transform:rotate(-90deg)}
.ring .t{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.fnode.done{border-color:#22C55E}
.fnode.done .t{color:#15803D}
.flines{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:visible}
.flines .base{fill:none;stroke:var(--line2);stroke-width:2}
.flines .run{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-dasharray:8 10;animation:dash 1.1s linear infinite}
.flines .run.slow{animation-duration:2.4s;stroke:var(--line2)}
@keyframes dash{to{stroke-dashoffset:-36}}
.flegend{display:flex;flex-wrap:wrap;gap:18px;margin-top:18px;font-size:13px;color:var(--mute)}
.flegend span{display:inline-flex;align-items:center;gap:8px}
.flegend i{display:inline-block;width:22px;height:0;border-top:2.5px dashed var(--accent)}
@media (max-width:1080px){.fgrid{grid-template-columns:1fr 1fr;gap:20px}.flines{display:none}}
@media (max-width:760px){.fgrid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.flines .run{animation:none}}
/* technical hero for the 20 */
[data-dir="x"] .stage{border-radius:var(--r3);background-color:var(--g1)}
[data-dir="x"] .stage::before{right:0;top:0;width:58%;height:100%;border-radius:0;background-image:repeating-linear-gradient(0deg,var(--gridLine) 0 1px,transparent 1px 28px),repeating-linear-gradient(90deg,var(--gridLine) 0 1px,transparent 1px 28px)}
[data-dir="x"] .stage::after{left:auto;right:4%;top:50%;bottom:auto;width:420px;height:420px;margin-top:-210px;background:repeating-radial-gradient(circle,transparent 0 54px,var(--gridLine) 54px 55.5px);border:1.5px solid var(--gridLine)}
[data-dir="x"] .stage{background:linear-gradient(120deg,var(--g1) 0%,var(--g2) 55%,var(--g3) 100%)}
[data-dir="x"] .ct{border-radius:var(--r3)}

/* ---------- Avery "speaking" AI orb (Meta-AI style ring) ---------- */
.aiorb{--s:150px;--c1:#3B82F6;--c2:#00C2FF;--c3:#A855F7;--c4:#EC4899;position:relative;width:var(--s);height:var(--s);flex:none;isolation:isolate}
.aiorb .glow,.aiorb .halo{position:absolute;inset:0;border-radius:999px;background:conic-gradient(from 0deg,var(--c1),var(--c2),var(--c3),var(--c4),var(--c1));animation:aispin 4s linear infinite}
.aiorb .glow{inset:-6%;filter:blur(calc(var(--s)*.14));animation:aispin 4s linear infinite,aitalk 2.6s ease-in-out infinite}
.aiorb .halo{-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--s)*.085),#000 calc(100% - var(--s)*.08));mask:radial-gradient(farthest-side,transparent calc(100% - var(--s)*.085),#000 calc(100% - var(--s)*.08));animation:aispin 4s linear infinite,aitalk 2.6s ease-in-out infinite}
.aiorb .core{position:absolute;inset:9%;border-radius:999px;background:#FFFFFF;overflow:hidden;box-shadow:inset 0 0 calc(var(--s)*.08) #FFFFFF}
.aiorb .core i{position:absolute;width:70%;height:70%;border-radius:999px;filter:blur(calc(var(--s)*.09))}
.aiorb .core i:nth-child(1){left:-8%;top:-6%;background:var(--c2);animation:aiblob1 5.5s ease-in-out infinite}
.aiorb .core i:nth-child(2){right:-10%;bottom:-8%;background:var(--c4);animation:aiblob2 6.5s ease-in-out infinite}
.aiorb .core i:nth-child(3){left:15%;bottom:-20%;background:var(--c3);animation:aiblob1 7s ease-in-out infinite reverse}
.aiorb .core b{position:absolute;inset:26%;border-radius:999px;background:#FFFFFF;filter:blur(calc(var(--s)*.06));animation:aitalk 1.3s ease-in-out infinite}
.aiorb.idle .glow,.aiorb.idle .halo,.aiorb.idle .core b{animation-play-state:paused}
.aiorb.sm{--s:34px}.aiorb.sm .glow{display:none}
.aiorb.sm .core i{filter:blur(4px)}
@keyframes aispin{to{transform:rotate(360deg)}}
@keyframes aitalk{0%,100%{scale:1}18%{scale:1.05}32%{scale:.98}48%{scale:1.07}64%{scale:1}80%{scale:1.04}}
@keyframes aiblob1{0%,100%{translate:0 0}33%{translate:18% 22%}66%{translate:-6% 30%}}
@keyframes aiblob2{0%,100%{translate:0 0}40%{translate:-24% -18%}70%{translate:-8% -30%}}
.scene .aiorb.hero{position:absolute;left:50%;top:50%;margin:calc(var(--s)/-2) 0 0 calc(var(--s)/-2);--s:170px}
.av.face .aiorb.sm{--s:100%;width:100%;height:100%}
.av.face .aiorb.sm .core{inset:12%}
.hub .aiorb{--s:76px}
.hub .aiorb .glow{filter:blur(10px)}
.speakline{display:flex;align-items:center;gap:3px;height:22px;justify-content:center;margin-top:6px}
.speakline i{width:3px;border-radius:2px;background:var(--accent);animation:wave 1.1s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.aiorb *{animation:none!important}}