/* ============ Tokens ============ */
:root{
  --r:14px;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:40px;--s8:56px;
  /* Round 2 type scale: about 90% of round 1 (11/13/14/18/26/40), large headlines about 88%. Nothing a person reads goes under 12px. */
  --t1:12px;--t2:12px;--t3:12.6px;--t4:16.2px;--t5:22.9px;--t6:35.2px;--t7:49.3px;
  /* Round 2 white space: about 15% more between sections (40 to 46px) and between groups (24 to 28px, 32 to 37px) */
  --sec:46px;--grp:28px;--grp2:37px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-sheet:cubic-bezier(.32,.72,0,1);
  --ease-in:cubic-bezier(.4,0,1,1);
  --geist:"Geist","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --geist-mono:"Geist Mono","SF Mono",ui-monospace,Menlo,Consolas,monospace;
  --dm:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --danger:#e5484d;
}
html[data-mode=dark]{
  color-scheme:dark;
  --bg:#000;--bg2:#0b0b0c;--sf1:#141415;--sf2:#1d1d1f;--sf3:#2a2a2d;--sheet:#0f0f10;
  --line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.15);
  --fg:#f4f4f3;--fg2:#9c9ca1;--fg3:#5f5f65;
  --scrim:rgba(0,0,0,.6);--shadow:0 30px 80px rgba(0,0,0,.65);
  --stage:#0d0d0e;--glass:rgba(0,0,0,.72);--seg-hl:#2a2a2d;
  --chrome1:#18181a;--chrome2:#222225;
}
html[data-mode=light]{
  color-scheme:light;
  --bg:#fff;--bg2:#f8f8f7;--sf1:#f3f3f2;--sf2:#eaeae8;--sf3:#dcdcda;--sheet:#fff;
  --line:rgba(0,0,0,.08);--line2:rgba(0,0,0,.15);
  --fg:#0b0b0b;--fg2:#66666b;--fg3:#a4a4a9;
  --scrim:rgba(0,0,0,.28);--shadow:0 30px 80px rgba(0,0,0,.18);
  --stage:#e6e6e4;--glass:rgba(255,255,255,.78);--seg-hl:#fff;
  --chrome1:#dcdcdb;--chrome2:#f2f2f1;
}
/* The real Mythox palette, same as the website: Monochrome, Green (default), Blue, Gold, Pink.
   One variable, --accent, holds the active colour; every accent use reads from it.
   Tints and lines are mixed from it. Text on an accent fill uses the dark ink.
   In light theme, accent text and thin lines use a darker mix so they stay readable; fills keep the exact hex.
   Monochrome: the accent is the text colour itself (near-white in dark, near-black in light), and text on it flips to match. */
@property --accent{syntax:'<color>';inherits:true;initial-value:transparent}
:root{--p-mono-d:#f4f4f3;--p-mono-l:#0b0b0b;--p-green:#B7F35C;--p-blue:#83CFFF;--p-gold:#D4B45C;--p-pink:#F58BC4}
html{--accent:var(--p-green);transition:--accent .38s cubic-bezier(.22,1,.36,1)}
html[data-palette=green]{--accent:var(--p-green)}
html[data-palette=blue]{--accent:var(--p-blue)}
html[data-palette=gold]{--accent:var(--p-gold)}
html[data-palette=pink]{--accent:var(--p-pink)}
html[data-motion=reduced]{transition:none}
html{--on-ac:#0b0b0b;--ac-ink:var(--accent);--ac-soft:color-mix(in srgb,var(--accent) 14%,transparent);--ac-line:color-mix(in srgb,var(--accent) 45%,transparent)}
html[data-mode=light]{--ac-ink:color-mix(in oklab,var(--accent) 55%,black);--ac-soft:color-mix(in srgb,var(--accent) 24%,transparent);--ac-line:color-mix(in srgb,color-mix(in oklab,var(--accent) 55%,black) 55%,transparent)}
html[data-palette=mono][data-mode=dark]{--accent:var(--p-mono-d);--on-ac:#0b0b0b}
html[data-palette=mono][data-mode=light]{--accent:var(--p-mono-l);--on-ac:#fff;--ac-ink:var(--p-mono-l);--ac-soft:color-mix(in srgb,var(--p-mono-l) 10%,transparent);--ac-line:color-mix(in srgb,var(--p-mono-l) 30%,transparent)}

/* ============ Base ============ */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--stage);color:var(--fg);font-family:var(--geist);font-size:var(--t2);line-height:1.45;-webkit-font-smoothing:antialiased;overflow:hidden;transition:background-color .4s}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit;-webkit-tap-highlight-color:transparent}
input,textarea,select{font:inherit;color:inherit;background:none;border:0;outline:0}
:focus-visible{outline:2px solid var(--ac-ink);outline-offset:2px}
::selection{background:var(--accent);color:var(--on-ac)}
svg.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mark{width:22px;height:22px;flex:none}
/* The Mythox trident (round 3): one inline SVG shape in the accent colour. Its three tips are cut on the slant of the "//" mark.
   .appicon is the same mark on an accent tile (tab icon, splash, sign-in screens); text on accent rules apply, so Monochrome flips too. */
.tri{position:relative;display:inline-grid;place-items:center;color:var(--ac-ink)}
.tri svg{width:100%;height:100%;display:block;fill:currentColor}
.appicon{display:inline-grid;place-items:center;flex:none;border-radius:23%;background:var(--accent);color:var(--on-ac);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 8%,transparent)}
.appicon svg{width:74%;height:74%;display:block;fill:currentColor}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
html[data-motion=reduced] *,html[data-motion=reduced] *::before,html[data-motion=reduced] *::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;transition-delay:0s!important}

/* ============ Stage ============ */
.stbar{position:fixed;inset:0 0 auto 0;height:64px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--s5);z-index:10}
.st-brand{display:flex;align-items:center;gap:var(--s2);font-weight:600;font-size:var(--t3);letter-spacing:-.01em}
.st-brand small{color:var(--fg3);font-weight:400;font-size:var(--t2);margin-left:var(--s1)}
.st-right{justify-self:end;display:flex;align-items:center;gap:var(--s4)}
.st-sw{display:flex;gap:var(--s2);align-items:center}
.seg{position:relative;display:inline-flex;background:var(--sf1);border-radius:var(--r);padding:var(--s1)}
html[data-mode=light] .seg{background:var(--sf2)}
.seg button{position:relative;z-index:1;height:32px;padding:0 var(--s4);font-size:var(--t2);font-weight:500;color:var(--fg2);border-radius:var(--r);transition:color .25s;white-space:nowrap}
.seg button.on{color:var(--fg)}
.seg-hl{position:absolute;top:var(--s1);left:0;height:32px;border-radius:var(--r);background:var(--seg-hl);box-shadow:0 1px 2px rgba(0,0,0,.12),0 0 0 1px var(--line);transition:transform .5s var(--ease),width .5s var(--ease)}
.sw{width:20px;height:20px;border-radius:50%;position:relative;flex:none;transition:transform .2s var(--ease)}
.sw::after{content:"";position:absolute;inset:-4px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--fg);opacity:0;transform:scale(.7);transition:opacity .3s,transform .4s var(--ease)}
.sw.on::after{opacity:1;transform:none}
.sw:active{transform:scale(.88)}
.sw[data-sw=mono]{background:linear-gradient(135deg,var(--p-mono-d) 50%,var(--p-mono-l) 50%);box-shadow:inset 0 0 0 1px var(--line2)}.sw[data-sw=green]{background:var(--p-green)}.sw[data-sw=blue]{background:var(--p-blue)}.sw[data-sw=gold]{background:var(--p-gold)}.sw[data-sw=pink]{background:var(--p-pink)}
.st-mode{width:36px;height:36px;border-radius:var(--r);display:grid;place-items:center;color:var(--fg2);transition:background-color .2s,color .2s,transform .15s var(--ease)}
.st-mode:hover{background:var(--sf1);color:var(--fg)}
.st-mode:active{transform:scale(.92)}
.stage{position:fixed;inset:64px 0 0 0;overflow:hidden;transition:background .5s}
.stage[data-p=mac]{background:radial-gradient(900px 600px at 18% 8%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%),radial-gradient(900px 700px at 92% 100%,color-mix(in srgb,var(--fg) 10%,transparent),transparent 70%),var(--stage)}
.device{position:absolute;left:50%;top:50%;transform-origin:center center}

/* iPhone frame */
.iphone{width:100%;height:100%;border-radius:68px;background:#0c0c0d;padding:12px;position:relative;box-shadow:inset 0 0 0 1px #48484c,inset 0 0 0 4px #0c0c0d,inset 0 0 0 5px #2a2a2d,0 60px 120px -30px rgba(0,0,0,.55),0 30px 60px -30px rgba(0,0,0,.5)}
.iphone .hw{position:absolute;width:4px;background:#1f1f22;border-radius:2px}
.iphone .hw.a{left:-3px;top:180px;height:32px}.iphone .hw.b{left:-3px;top:236px;height:62px}.iphone .hw.c{left:-3px;top:310px;height:62px}.iphone .hw.d{right:-3px;top:262px;height:98px}
.iphone-screen{position:relative;width:390px;height:844px;border-radius:56px;overflow:hidden;background:var(--bg);isolation:isolate}
.island{position:absolute;top:11px;left:50%;width:124px;height:36px;margin-left:-62px;background:#000;border-radius:20px;z-index:400;pointer-events:none}

/* Mac window */
.macwin{width:100%;height:100%;border-radius:var(--r);overflow:hidden;position:relative;box-shadow:0 0 0 1px var(--line2),0 50px 120px -30px rgba(0,0,0,.6),0 20px 40px -20px rgba(0,0,0,.4)}

/* Browser */
.browser{width:100%;height:100%;border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;background:var(--chrome1);box-shadow:0 0 0 1px var(--line2),0 50px 120px -30px rgba(0,0,0,.5)}
.b-tabs{height:42px;display:flex;align-items:flex-end;padding:0 var(--s3);gap:var(--s2);flex:none}
.b-dots{display:flex;gap:var(--s2);align-self:center;margin:0 var(--s3) 0 var(--s1)}
.b-dots i{width:12px;height:12px;border-radius:50%;background:var(--fg3);opacity:.5}
.b-tab{height:34px;min-width:220px;display:flex;align-items:center;gap:var(--s2);padding:0 var(--s3);border-radius:var(--r) var(--r) 0 0;background:var(--chrome2);font-size:var(--t1);color:var(--fg)}
.b-tab .mark{width:14px;height:14px}
.b-tab span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b-tab .i{width:14px;height:14px;color:var(--fg3)}
.b-new{width:28px;height:28px;align-self:center;display:grid;place-items:center;color:var(--fg3);border-radius:var(--r)}
.b-new .i{width:16px;height:16px}
.b-bar{height:46px;display:flex;align-items:center;gap:var(--s1);padding:0 var(--s3);background:var(--chrome2);border-bottom:1px solid var(--line);flex:none}
.b-btn{width:32px;height:32px;display:grid;place-items:center;border-radius:var(--r);color:var(--fg2);transition:background-color .2s,transform .15s var(--ease)}
.b-btn:hover{background:var(--line)}
.b-btn:disabled{opacity:.35;cursor:default}
.b-btn:active:not(:disabled){transform:scale(.9)}
.b-btn .i{width:18px;height:18px}
.b-url{flex:1;height:32px;margin:0 var(--s2);border-radius:var(--r);background:var(--chrome1);display:flex;align-items:center;gap:var(--s2);padding:0 var(--s3);color:var(--fg2);font-size:var(--t2);min-width:0}
.b-url .i{width:14px;height:14px}
.b-url b{font-weight:400;color:var(--fg)}
.b-url em{font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b-view{position:relative;flex:1;min-height:0}

/* ============ App shell ============ */
.app{position:absolute;inset:0;overflow:hidden;background:var(--bg);color:var(--fg);font-family:var(--geist);font-size:var(--t3);line-height:1.45;--num:var(--geist-mono)}
.app.phone{font-family:var(--dm);--num:var(--dm);--topH:98px;--botH:83px;--padX:24px;--t3:13.5px;--t4:17.1px;--t5:24.6px;--t6:37px}
.app.desk{display:grid;grid-template-columns:240px minmax(0,1fr);--topH:56px;--botH:0px;--padX:40px}
.app.mac{background:transparent}
.app.desk .main{position:relative;min-width:0;background:var(--bg);overflow:hidden}
.views{position:absolute;inset:0;overflow:hidden}
.stack{position:absolute;inset:0;transform-origin:50% 0;overflow:hidden;background:var(--bg)}

/* Sidebar */
.side{position:relative;display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line);background:color-mix(in srgb,var(--bg2) 82%,transparent);backdrop-filter:blur(14px) saturate(1.25);-webkit-backdrop-filter:blur(14px) saturate(1.25);padding:var(--s3) var(--s3) var(--s3)}
.app.mac .side{background:color-mix(in srgb,var(--bg2) 70%,transparent);backdrop-filter:blur(40px) saturate(1.6);-webkit-backdrop-filter:blur(40px) saturate(1.6)}
.side-top{height:36px;display:flex;align-items:center;gap:var(--s4);padding:0 var(--s2);flex:none}
.lights{display:flex;gap:var(--s2)}
.lights i{width:12px;height:12px;border-radius:50%;background:#ff5f57;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.2)}
.lights i:nth-child(2){background:#febc2e}.lights i:nth-child(3){background:#28c840}
.brand{display:flex;align-items:center;gap:var(--s2);font-weight:600;font-size:var(--t3);letter-spacing:-.01em}
.app.mac .side-top{gap:var(--s3)}
.side-search{display:flex;align-items:center;gap:var(--s2);height:36px;padding:0 var(--s3);margin:var(--s3) 0 var(--s2);border-radius:var(--r);background:var(--sf1);color:var(--fg2);font-size:var(--t2);flex:none;transition:background-color .2s,transform .15s var(--ease)}
.app.mac .side-search{background:var(--line)}
.side-search:hover{background:var(--sf2)}
.side-search:active{transform:scale(.98)}
.side-search .i{width:16px;height:16px}
.side-search kbd{margin-left:auto;font-family:var(--geist-mono);font-size:var(--t1);color:var(--fg3)}
.nav{position:relative;flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;margin:0 calc(-1 * var(--s3));padding:0 var(--s3) var(--s3);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(to bottom,transparent 0,#000 12px,#000 calc(100% - 24px),transparent)}
.nav-g{padding:var(--s1) 0 var(--s2)}
.nav-l{font-size:var(--t1);color:var(--fg3);padding:var(--s2) var(--s3) var(--s1);font-weight:500}
.nav-g.sep{border-top:1px solid var(--line);margin-top:var(--s2);padding-top:var(--s2)}
.nav-i{position:relative;z-index:1;display:flex;align-items:center;gap:var(--s3);width:100%;height:30px;padding:0 var(--s3);border-radius:var(--r);color:var(--fg2);font-size:var(--t2);font-weight:500;transition:color .2s,transform .15s var(--ease)}
.nav-i:hover{color:var(--fg)}
.nav-i:active{transform:scale(.98)}
.nav-i.on{color:var(--fg)}
.nav-i .i{width:18px;height:18px}
.nav-hl{position:absolute;left:var(--s3);right:var(--s3);top:0;height:30px;border-radius:var(--r);background:var(--sf2);pointer-events:none;z-index:0;opacity:0}
.app.mac .nav-hl{background:var(--line2)}
.nav-hl.ready{transition:transform .5s var(--ease),opacity .2s}
.nav-b{margin-left:auto;min-width:20px;height:20px;padding:0 var(--s1);border-radius:var(--r);background:var(--accent);color:var(--on-ac);font-size:var(--t1);font-weight:600;display:grid;place-items:center;font-family:var(--num)}
.nav-dot{margin-left:auto;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.side-me{display:flex;align-items:center;gap:var(--s3);padding:var(--s2);border-radius:var(--r);margin-top:var(--s2);flex:none;transition:background-color .2s}
.side-me:hover{background:var(--sf1)}
.side-me .av{width:32px;height:32px;font-size:var(--t1)}
.side-me .row-t{font-size:var(--t2)}
.side-me .row-s{font-size:var(--t1)}

/* Phone chrome */
.sbar{position:absolute;top:0;left:0;right:0;height:54px;display:flex;align-items:center;justify-content:space-between;padding:4px 30px 0 48px;z-index:390;font-weight:600;font-size:var(--t3);pointer-events:none;font-family:var(--dm);color:var(--fg)}
.sbar .ico{display:flex;gap:6px;align-items:center}
.sbar svg{height:12px;fill:currentColor}
.tabbar{position:absolute;left:0;right:0;bottom:0;height:83px;display:flex;padding:0 var(--s3) 30px;background:var(--glass);backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6);border-top:1px solid var(--line);z-index:20}
.tab-i{flex:1;display:grid;place-items:center;color:var(--fg3);position:relative;transition:color .25s}
.tab-i .i{width:26px;height:26px;stroke-width:1.5;transition:transform .35s var(--ease)}
.tab-i.on{color:var(--fg)}
.tab-i:active .i{transform:scale(.86)}
.tab-i::after{content:"";position:absolute;bottom:4px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--accent);opacity:0;transform:scale(0);transition:opacity .3s,transform .4s var(--ease)}
.tab-i.on::after{opacity:1;transform:none}
.hind{position:absolute;bottom:8px;left:50%;width:134px;height:5px;margin-left:-67px;border-radius:var(--r);background:var(--fg);z-index:395;pointer-events:none}

/* ============ Screens ============ */
.screen{position:absolute;inset:0;background:var(--bg);container-type:inline-size;overflow:hidden}
.screen.leaving{pointer-events:none}
.top{position:absolute;inset:0 0 auto 0;z-index:6;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:var(--topH);padding:0 var(--s4);border-bottom:1px solid transparent;transition:background-color .3s,border-color .3s}
.phone .top{padding:54px var(--s3) 0}
.screen.scrolled .top,.top.solid{background:var(--glass);backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);border-bottom-color:var(--line)}
.top-l{justify-self:start;display:flex;align-items:center;min-width:0}
.top-r{justify-self:end;display:flex;align-items:center;gap:var(--s1)}
.top-title{font-size:var(--t3);font-weight:600;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .4s var(--ease);white-space:nowrap}
.screen.scrolled .top-title,.top-title.show{opacity:1;transform:none}
.back{display:flex;align-items:center;gap:var(--s1);height:36px;padding:0 var(--s2) 0 var(--s1);border-radius:var(--r);color:var(--fg);font-size:var(--t3);font-weight:500;max-width:160px;transition:background-color .2s,transform .15s var(--ease)}
.back span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.back:hover{background:var(--sf1)}
.back:active{transform:scale(.96)}
.back .i{width:22px;height:22px}
.scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;padding-top:var(--topH);padding-bottom:calc(var(--botH) + var(--s7));overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--sf3) transparent}
.phone .scroll{scrollbar-width:none}
.content{max-width:960px;margin:0 auto;padding:0 var(--padX)}
.content.narrow{max-width:760px}
.content.wide{max-width:1180px}
@container (max-width:620px){.desk .content{padding:0 var(--s5)}}
.head{padding:var(--s2) 0 var(--grp)}
.desk .head{padding-top:var(--s4)}
.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4)}
.h1{font-size:var(--t5);font-weight:600;letter-spacing:-.03em;line-height:1.12}
.sub{color:var(--fg2);margin-top:var(--s2);font-size:var(--t3)}
.sec{margin-top:var(--sec)}
.sec.first{margin-top:0}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s2)}
.h2{font-size:var(--t4);font-weight:600;letter-spacing:-.02em;line-height:1.3}
.lbl{font-size:var(--t2);color:var(--fg2);font-weight:500}
.cap{font-size:var(--t1);color:var(--fg3);font-weight:500}
.link{color:var(--fg2);font-size:var(--t2);font-weight:500;transition:color .2s}
.link:hover{color:var(--fg)}
.muted{color:var(--fg2)}.faint{color:var(--fg3)}
.num{font-family:var(--num);font-variant-numeric:tabular-nums}
.ac{color:var(--ac-ink)}
.mt1{margin-top:var(--s1)}.mt2{margin-top:var(--s2)}.mt3{margin-top:var(--s3)}.mt4{margin-top:var(--s4)}.mt5{margin-top:var(--grp)}.mt6{margin-top:var(--grp2)}.mt7{margin-top:var(--sec)}
.hr{height:1px;background:var(--line);margin:var(--s5) 0}
.t2{font-size:var(--t2)}.t1{font-size:var(--t1)}.t4{font-size:var(--t4)}
.flex{display:flex;align-items:center;gap:var(--s3)}
.flex.wrap{flex-wrap:wrap}
.grow{flex:1;min-width:0}
.between{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}

/* Lists & rows */
.list{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:var(--s4);width:100%;padding:var(--s3) 0;text-align:left;border-top:1px solid var(--line);min-height:54px;position:relative}
.list>.row:first-child,.list>:first-child .row{border-top:0}
.list.lined>.row:first-child{border-top:1px solid var(--line)}
button.row{transition:opacity .15s}
button.row:active{opacity:.55}
.row-m{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--s1)}
.row-t{font-size:var(--t3);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-t.wrap{white-space:normal}
.row-s{font-size:var(--t2);color:var(--fg2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-r{display:flex;flex-direction:column;align-items:flex-end;gap:var(--s1);text-align:right;flex:none}
.row-v{font-family:var(--num);font-size:var(--t3);font-variant-numeric:tabular-nums;white-space:nowrap}
.chev{width:16px!important;height:16px!important;color:var(--fg3);transition:transform .3s var(--ease),color .2s}
button.row:hover .chev{transform:translateX(3px);color:var(--fg2)}
.lead{width:36px;height:36px;border-radius:var(--r);background:var(--sf1);display:grid;place-items:center;flex:none;color:var(--fg)}
.lead .i{width:20px;height:20px}
.lead.ac{background:var(--ac-soft);color:var(--ac-ink)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);height:48px;padding:0 var(--s5);border-radius:var(--r);font-size:var(--t3);font-weight:600;white-space:nowrap;transition:transform .16s var(--ease),background-color .2s,opacity .2s,color .2s,box-shadow .2s;user-select:none;position:relative}
.desk .btn{height:36px;font-size:var(--t2);padding:0 var(--s4)}
.btn .i{width:18px;height:18px}
.btn.pri{background:var(--accent);color:var(--on-ac)}
.btn.pri:hover{opacity:.9}
.btn.soft{background:var(--sf1)}
.btn.soft:hover{background:var(--sf2)}
.btn.line{box-shadow:inset 0 0 0 1px var(--line2)}
.btn.line:hover{background:var(--sf1)}
.btn.sm,.desk .btn.sm{height:32px;padding:0 var(--s3);font-size:var(--t2)}
.btn.block{width:100%}
.btn.danger{color:var(--danger)}
.btn.danger.pri{background:var(--danger);color:#fff}
.btn:active:not(:disabled),.iconbtn:active,.chip:active,.tile:active,.rg:active{transform:scale(.96)}
.btn:disabled{opacity:.3;cursor:default}
.btn.busy{color:transparent!important;pointer-events:none}
.btn.busy::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid var(--on-ac);border-right-color:transparent;animation:spin .7s linear infinite}
.btn.soft.busy::after,.btn.line.busy::after{border-color:var(--fg);border-right-color:transparent}
@keyframes spin{to{transform:rotate(360deg)}}
.iconbtn{width:36px;height:36px;display:grid;place-items:center;border-radius:var(--r);color:var(--fg);transition:background-color .2s,transform .16s var(--ease);flex:none}
.iconbtn:hover{background:var(--sf1)}
.iconbtn.on{color:var(--ac-ink)}
.btns{display:flex;gap:var(--s2);flex-wrap:wrap}

/* Chips, tabs, segmented */
.chips{display:flex;gap:var(--s2);flex-wrap:wrap}
.chips.x{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--padX));padding:var(--s1) var(--padX)}
.chip{height:32px;padding:0 var(--s3);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line2);font-size:var(--t2);font-weight:500;white-space:nowrap;display:inline-flex;align-items:center;gap:var(--s2);transition:background-color .2s,color .2s,box-shadow .2s,transform .16s var(--ease);flex:none}
.chip:hover{background:var(--sf1)}
.chip.on{background:var(--fg);color:var(--bg);box-shadow:none}
.chip .i{width:16px;height:16px}
.tabs{position:relative;display:flex;gap:var(--s5);border-bottom:1px solid var(--line);margin-bottom:var(--grp);overflow-x:auto;scrollbar-width:none}
.tab{height:40px;font-size:var(--t2);font-weight:500;color:var(--fg2);white-space:nowrap;transition:color .2s;flex:none}
.tab:hover{color:var(--fg)}
.tab.on{color:var(--fg)}
.tabs-hl{position:absolute;bottom:0;left:0;height:2px;background:var(--fg);transition:transform .5s var(--ease),width .5s var(--ease)}
.app .seg{width:100%;display:flex}
.app .seg button{flex:1}
.app .seg.auto{width:auto;display:inline-flex}
.app .seg.auto button{flex:none}

/* Inputs */
.field{display:flex;flex-direction:column;gap:var(--s2);margin-bottom:var(--s5)}
.inp{height:42px;padding:0 var(--s4);border-radius:var(--r);background:var(--sf1);font-size:var(--t3);width:100%;transition:box-shadow .2s,background-color .2s}
.inp:focus{box-shadow:inset 0 0 0 1.5px var(--fg3);background:var(--bg)}
textarea.inp{height:auto;min-height:112px;padding:var(--s3) var(--s4);resize:none;line-height:1.5;display:block}
.inp::placeholder{color:var(--fg3)}
.inline-add{display:flex;align-items:center;gap:var(--s3);border-top:1px solid var(--line);padding:var(--s3) 0;color:var(--fg3)}
.inline-add input{flex:1;height:40px;font-size:var(--t3);color:var(--fg)}
.inline-add input::placeholder{color:var(--fg3)}
.inline-add .i{width:20px;height:20px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer;--p:50%}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:var(--r);background:linear-gradient(var(--accent),var(--accent)) 0/var(--p) 100% no-repeat,var(--sf2)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--fg);margin-top:-9px;box-shadow:0 1px 4px rgba(0,0,0,.35);transition:transform .2s var(--ease)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.18)}
.tg{position:relative;width:46px;height:28px;border-radius:var(--r);background:var(--sf3);transition:background-color .3s;flex:none}
.tg::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .4s var(--ease),background-color .3s}
.tg.on{background:var(--accent)}
.tg.on::after{transform:translateX(18px);background:var(--on-ac)}
.ck{width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--fg3);display:grid;place-items:center;flex:none;transition:background-color .3s var(--ease),box-shadow .3s}
.ck svg{width:14px;height:14px;fill:none;stroke:var(--on-ac);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .35s var(--ease) .06s}
.ck:hover{box-shadow:inset 0 0 0 1.5px var(--fg2)}
.ck.on{background:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}
.ck.on svg{stroke-dashoffset:0}
.ck.pop{animation:pop .45s var(--ease)}
.ck.sm{width:22px;height:22px}
.ck.sm svg{width:12px;height:12px}
@keyframes pop{0%{transform:scale(1)}35%{transform:scale(.8)}100%{transform:scale(1)}}
.strike{background:linear-gradient(currentColor,currentColor) 0 55%/0 1.5px no-repeat;transition:background-size .45s var(--ease),color .3s}
.done .strike{background-size:100% 1.5px;color:var(--fg3)}
.done .row-s{color:var(--fg3)}

/* Bits */
.pbar{height:6px;border-radius:var(--r);background:var(--sf2);overflow:hidden;position:relative}
.pbar>i{position:absolute;inset:0 auto 0 0;background:var(--accent);border-radius:var(--r);transition:width .9s var(--ease)}
.pbar.thin{height:4px}
.pbar.over>i{background:var(--fg)}
.segs{display:flex;gap:var(--s1)}
.segs i{flex:1;height:6px;border-radius:var(--r);background:var(--sf2);position:relative;overflow:hidden}
.segs i::after{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.segs i.on::after{transform:none}
.pill{display:inline-flex;align-items:center;gap:var(--s2);height:24px;padding:0 var(--s2);border-radius:var(--r);font-size:var(--t1);font-weight:500;box-shadow:inset 0 0 0 1px var(--line2);color:var(--fg2);white-space:nowrap;flex:none}
.pill.ac{color:var(--ac-ink);box-shadow:inset 0 0 0 1px var(--ac-line)}
.pill.solid{background:var(--accent);color:var(--on-ac);box-shadow:none}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.pill .dot.live{animation:blinkdot 1.4s ease-in-out infinite}
@keyframes blinkdot{50%{opacity:.25}}
.av{width:40px;height:40px;border-radius:50%;background:var(--sf2);display:grid;place-items:center;font-size:var(--t2);font-weight:600;flex:none;color:var(--fg);letter-spacing:.02em}
.av.lg{width:72px;height:72px;font-size:var(--t4)}
.av.sm{width:28px;height:28px;font-size:var(--t1)}
.tile{background:var(--sf1);border-radius:var(--r);padding:var(--s4);text-align:left;transition:background-color .2s,transform .16s var(--ease);display:flex;flex-direction:column;gap:var(--s2);min-width:0}
button.tile:hover{background:var(--sf2)}
.grid2,.grid3,.grid4{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
.grid1{display:grid;gap:14px}
@container (min-width:700px){.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.stat .v{font-size:var(--t4);font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:var(--s1);white-space:nowrap}
.card{border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line2);padding:var(--s5)}
.card.fill{background:var(--sf1);box-shadow:none}
.empty{text-align:center;padding:var(--s7) var(--s5);color:var(--fg2);display:flex;flex-direction:column;align-items:center;gap:var(--s3)}
.empty .lead{width:56px;height:56px}
.note{font-size:var(--t2);color:var(--fg2);display:flex;gap:var(--s2);align-items:flex-start}
.note .i{width:16px;height:16px;margin-top:2px}
.kbd{font-family:var(--num);font-size:var(--t1);padding:var(--s1) var(--s2);border-radius:var(--r);background:var(--sf1);color:var(--fg2)}

/* Big number & ticker */
.bignum{font-size:var(--t6);font-weight:600;letter-spacing:-.04em;line-height:1.1;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;white-space:nowrap}
.bignum.md{font-size:var(--t5)}
.tk{display:inline-flex;align-items:baseline}
.dg{display:inline-block;height:1.1em;overflow:hidden}
.dc{display:flex;flex-direction:column;transition:transform .9s var(--ease)}
.dc span{height:1.1em;line-height:1.1;display:block;text-align:center}
.tk.fast .dc{transition-duration:.22s}
.ds{display:inline-block;line-height:1.1}
.delta{display:flex;align-items:center;gap:var(--s2);font-size:var(--t3);font-weight:500;color:var(--ac-ink);margin-top:var(--s2);font-variant-numeric:tabular-nums;flex-wrap:wrap}
.delta .muted{font-weight:400}
.delta .i{width:16px;height:16px;stroke-width:2.2}
.delta.down{color:var(--fg)}

/* Charts */
.chart{position:relative;height:220px;touch-action:pan-y;cursor:crosshair;user-select:none;margin-top:var(--s6)}
.phone .chart{margin-left:calc(-1 * var(--padX));margin-right:calc(-1 * var(--padX))}
.chart svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.chart .ln{fill:none;stroke:var(--accent);stroke-width:2.25;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.chart .pv{fill:none;stroke:var(--fg3);stroke-width:1.5;stroke-dasharray:1 5;vector-effect:non-scaling-stroke;stroke-linecap:round}
.chart .draw{clip-path:inset(-10px 100% -10px 0);animation:draw 1.3s var(--ease) .15s forwards}
@keyframes draw{to{clip-path:inset(-10px 0 -10px 0)}}
.chart .fade{opacity:0;animation:fadein .6s ease .9s forwards}
@keyframes fadein{to{opacity:1}}
.scrub{position:absolute;top:-8px;bottom:-8px;width:1px;background:var(--line2);opacity:0;transition:opacity .2s;pointer-events:none}
.sdot{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--accent);margin:-6px 0 0 -6px;opacity:0;transition:opacity .2s;box-shadow:0 0 0 3px var(--bg);pointer-events:none}
.slabel{position:absolute;top:-30px;transform:translateX(-50%);font-size:var(--t1);color:var(--fg2);font-family:var(--num);white-space:nowrap;opacity:0;transition:opacity .2s;pointer-events:none}
.chart.scrubbing .scrub,.chart.scrubbing .sdot,.chart.scrubbing .slabel{opacity:1}
.live{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--accent);transition:opacity .2s;pointer-events:none}
.live::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--accent);animation:ping 2.2s var(--ease) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.5}100%{transform:scale(3.4);opacity:0}}
.chart.scrubbing .live{opacity:0}
.ranges{display:flex;gap:var(--s1);margin-top:var(--s5);padding-bottom:var(--s4);border-bottom:1px solid var(--line)}
.rg{height:32px;padding:0 var(--s3);border-radius:var(--r);font-size:var(--t2);font-weight:600;color:var(--fg2);transition:color .2s,background-color .25s,transform .16s var(--ease)}
.rg:hover{color:var(--fg)}
.rg.on{color:var(--ac-ink);background:var(--ac-soft)}
.bars{display:flex;align-items:flex-end;gap:var(--s4);height:160px;padding-top:var(--s5)}
.bars .bw{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--s2);height:100%}
.bars .bp{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:var(--s1)}
.bars .b{width:clamp(10px,22%,28px);border-radius:var(--r) var(--r) 0 0;background:var(--accent);transform-origin:bottom;animation:grow .9s var(--ease) both}
.bars .b.o{background:var(--sf3)}
.bars[data-bars]{cursor:crosshair;touch-action:pan-y;user-select:none;position:relative}
.bars .bw{position:relative;transition:opacity .2s}
.bars.scrubbing .bw{opacity:.4}.bars.scrubbing .bw.hot{opacity:1}
.bars .bw.hot::before{content:"";position:absolute;top:-8px;bottom:22px;left:50%;width:1px;background:var(--line2)}
.bread{font-size:var(--t2);color:var(--fg2);font-variant-numeric:tabular-nums}
.bread b{font-weight:600;color:var(--fg)}
@keyframes grow{from{transform:scaleY(0)}}
.legend{display:flex;gap:var(--s4);font-size:var(--t2);color:var(--fg2)}
.legend i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:var(--s2)}
.legend i.o{background:var(--sf3)}
.share{height:4px;border-radius:var(--r);background:var(--sf2);margin-top:var(--s2);position:relative;overflow:hidden}
.share i{position:absolute;inset:0 auto 0 0;background:var(--fg);border-radius:var(--r)}

/* Home layout */
.hgrid{display:grid;gap:var(--sec);grid-template-columns:minmax(0,1fr)}
@container (min-width:880px){.hgrid{grid-template-columns:minmax(0,1fr) 340px;grid-template-areas:"hero side" "from side";column-gap:var(--s8);row-gap:var(--sec)}.hg-hero{grid-area:hero}.hg-side{grid-area:side}.hg-from{grid-area:from}}
.hero{padding-top:var(--s2)}
.desk .hero{padding-top:var(--s5)}
.cols{display:grid;gap:var(--sec);grid-template-columns:minmax(0,1fr)}
@container (min-width:880px){.cols{grid-template-columns:minmax(0,1fr) 320px;column-gap:var(--s8);align-items:start}}

/* Ask card */
.ask{border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line2);padding:var(--s4);background:var(--bg);overflow:hidden;position:relative}
.ask-in{display:flex;flex-direction:column;gap:var(--s4)}
.ask-top{display:flex;gap:var(--s3);align-items:flex-start}
.ask-t{font-size:var(--t3);font-weight:600;letter-spacing:-.01em;line-height:1.35}
.ask-s{font-size:var(--t2);color:var(--fg2);margin-top:var(--s1)}
.ask-b{display:flex;gap:var(--s2);justify-content:flex-end}
.ask-b .btn{min-width:80px}
.ask.closed{padding:var(--s3) var(--s4);box-shadow:inset 0 0 0 1px var(--line)}
.ask-done{display:flex;align-items:center;gap:var(--s3);font-size:var(--t2);color:var(--fg2)}
.ask-done .ck{width:22px;height:22px}
.ask-done .ck svg{width:12px;height:12px}
.ask-done .x{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--fg3);color:var(--fg3)}
.ask-done .x .i{width:12px;height:12px;stroke-width:2.4}
.ask-tag{font-size:var(--t1);color:var(--fg3);font-weight:500;display:flex;align-items:center;gap:var(--s2)}

/* Midas */
.orb{width:28px;height:28px;border-radius:50%;position:relative;display:grid;place-items:center;flex:none}
.orb::before{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--fg)}
.orb::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent);transition:transform .4s var(--ease)}
.orb.think::after{animation:breathe 1.1s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.7);opacity:.6}}
.orb.lg{width:56px;height:56px}
.orb.lg::before{box-shadow:inset 0 0 0 2px var(--fg)}
.orb.lg::after{width:18px;height:18px}
.thread{max-width:760px;margin:0 auto;padding:0 var(--padX);display:flex;flex-direction:column;gap:var(--s6)}
.hello{padding:var(--s6) 0 0;display:flex;flex-direction:column;gap:var(--s4)}
.phone .hello{padding-top:var(--s2)}
.msg{display:flex;gap:var(--s3);align-items:flex-start}
.msg.me{justify-content:flex-end}
.phone .msg.ai{flex-direction:column;gap:var(--s3)}
.phone .msg.ai .orb{width:22px;height:22px}
.phone .msg.ai .orb::after{width:7px;height:7px}
.bubble{max-width:82%;background:var(--sf1);padding:var(--s3) var(--s4);border-radius:var(--r);font-size:var(--t3);white-space:pre-wrap;word-wrap:break-word}
.ai-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--s4);font-size:var(--t3);padding-top:2px}
.ai-b ul{list-style:none;display:flex;flex-direction:column;gap:var(--s2)}
.ai-b li{display:flex;gap:var(--s3)}
.ai-b li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--fg3);margin-top:.62em;flex:none}
.ai-card{border-radius:var(--r);background:var(--sf1);padding:var(--s4)}
.ai-card .btn.soft{background:var(--bg)}
/* A table in an answer: the Books compact table's look (.tbl), inside the answer card; a wide one scrolls sideways */
.ai-tbl{overflow-x:auto;scrollbar-width:thin}
.ai-tbl table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--t2)}
.ai-tbl th{font-size:var(--t1);font-weight:500;color:var(--fg3);text-align:left;padding:0 var(--s3);height:30px;background:var(--bg);white-space:nowrap}
.ai-tbl th:first-child{border-radius:10px 0 0 10px}.ai-tbl th:last-child{border-radius:0 10px 10px 0}
.ai-tbl td{padding:var(--s2) var(--s3);border-top:1px solid var(--line);vertical-align:top;overflow-wrap:break-word}
.ai-tbl tbody tr:first-child td{border-top:0}
.typing{display:flex;gap:var(--s1);align-items:center;height:28px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--fg3);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,60%,100%{opacity:.25;transform:none}30%{opacity:1;transform:translateY(-2px)}}
.w{animation:wIn .45s var(--ease) both}
@keyframes wIn{from{opacity:0}}
.has-cmp .scroll{padding-bottom:calc(var(--botH) + 200px)}
.cmp-wrap{position:absolute;left:0;right:0;bottom:var(--botH);padding:var(--s7) var(--padX) var(--s4);background:linear-gradient(to top,var(--bg) 72%,transparent);z-index:5}
.phone .cmp-wrap{padding-bottom:var(--s3)}
.suggest{max-width:712px;margin:0 auto var(--s3);display:flex;gap:var(--s2);overflow-x:auto;scrollbar-width:none}
.phone .suggest{margin:0 calc(-1 * var(--padX)) var(--s3);padding:0 var(--padX)}
.suggest .chip{background:var(--bg)}
.suggest .chip:hover{background:var(--sf1)}
.cmp{max-width:712px;margin:0 auto;display:flex;align-items:flex-end;gap:var(--s2);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line2);background:var(--sheet);padding:var(--s2) var(--s2) var(--s2) var(--s4);transition:box-shadow .25s}
.cmp:focus-within{box-shadow:inset 0 0 0 1px var(--fg3),0 10px 30px -10px rgba(0,0,0,.3)}
.cmp textarea{flex:1;resize:none;height:36px;max-height:140px;padding:var(--s1) 0;font-size:var(--t3);line-height:1.5}
.cmp textarea::placeholder{color:var(--fg3)}
.send{width:36px;height:36px;border-radius:var(--r);background:var(--accent);color:var(--on-ac);display:grid;place-items:center;transition:opacity .25s,transform .25s var(--ease);flex:none}
.send .i{width:18px;height:18px;stroke-width:2.2}
.send:disabled{opacity:.2;cursor:default}
.send:active:not(:disabled){transform:scale(.88)}
.fine{text-align:center;font-size:var(--t1);color:var(--fg3);margin-top:var(--s2)}
.phone .fine{display:none}
.knows{display:none;position:absolute;top:var(--topH);right:0;bottom:0;width:320px;border-left:1px solid var(--line);padding:var(--s5);overflow-y:auto}
@container (min-width:1060px){.midas .scroll,.midas .cmp-wrap{right:320px}.knows{display:block}}

/* Today */
.prog{display:flex;flex-direction:column;gap:var(--s4)}
.tgroup{margin-top:var(--grp2)}
.tgroup .cap{margin-bottom:var(--s1)}
.task .row-v{color:var(--fg2);font-size:var(--t2)}

/* Sheets */
.layer{position:absolute;inset:0;pointer-events:none;z-index:300}
.sw-wrap{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;pointer-events:auto}
.desk .sw-wrap{align-items:center}
.desk .sw-wrap.pal{align-items:flex-start;padding-top:10vh}
.scrim{position:absolute;inset:0;background:var(--scrim)}
.sheet{position:relative;width:100%;max-height:calc(100% - 60px);background:var(--sheet);border-radius:var(--r) var(--r) 0 0;display:flex;flex-direction:column;box-shadow:var(--shadow);overflow:hidden;will-change:transform}
html[data-mode=dark] .sheet{box-shadow:var(--shadow),inset 0 1px 0 var(--line2)}
.phone .sheet{padding-bottom:30px}
.phone .sheet.tall{height:calc(100% - 60px)}
.desk .sheet{width:min(540px,calc(100% - 64px));max-height:min(780px,calc(100% - 80px));border-radius:var(--r);box-shadow:var(--shadow),0 0 0 1px var(--line2)}
.desk .sheet.wide{width:min(860px,calc(100% - 64px))}
.desk .sheet.tall{height:min(780px,calc(100% - 80px))}
.grab{width:40px;height:5px;border-radius:var(--r);background:var(--line2);margin:var(--s2) auto 0;flex:none}
.desk .grab{display:none}
.sh-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s4) var(--s5) var(--s3);flex:none}
.desk .sh-h{padding-top:var(--s5)}
.sh-t{font-size:var(--t4);font-weight:600;letter-spacing:-.02em;line-height:1.3}
.sh-b{flex:1;min-height:0;overflow-y:auto;padding:var(--s2) var(--s5) var(--s5);overscroll-behavior:contain;scrollbar-width:thin}
.sh-f{padding:var(--s3) var(--s5) var(--s5);display:flex;gap:var(--s2);flex:none}
.sh-f .btn{flex:1}
.phone .sh-f{padding-bottom:var(--s3)}
.pal .sh-b{padding:var(--s2)}
.pal-in{display:flex;align-items:center;gap:var(--s3);height:60px;padding:0 var(--s5);border-bottom:1px solid var(--line);flex:none;color:var(--fg2)}
.pal-in input{flex:1;font-size:var(--t3);color:var(--fg);height:100%}
.pal-i{display:flex;align-items:center;gap:var(--s3);height:44px;padding:0 var(--s3);border-radius:var(--r);width:100%;font-size:var(--t2);color:var(--fg2)}
.pal-i .i{width:18px;height:18px}
.pal-i.sel{background:var(--sf1);color:var(--fg)}
.pal-i small{margin-left:auto;font-size:var(--t1);color:var(--fg3)}

/* Toast */
.toasts{position:absolute;left:0;right:0;bottom:var(--s5);display:flex;justify-content:center;pointer-events:none;z-index:350}
.phone .toasts{bottom:99px}
.toast{pointer-events:auto;display:flex;align-items:center;gap:var(--s4);padding:0 var(--s4);min-height:48px;max-width:calc(100% - 32px);border-radius:var(--r);background:var(--fg);color:var(--bg);font-size:var(--t2);font-weight:500;box-shadow:0 20px 40px -12px rgba(0,0,0,.45)}
.toast .ck{width:20px;height:20px;background:var(--bg);box-shadow:none}
.toast .ck svg{width:11px;height:11px;stroke:var(--fg);stroke-dashoffset:0}
.toast button{height:32px;padding:0 var(--s3);margin-right:calc(-1 * var(--s2));border-radius:var(--r);font-weight:600;color:var(--bg);opacity:.65;transition:opacity .2s}
.toast button:hover{opacity:1}

/* Splash */
.splash{position:absolute;inset:0;z-index:500;background:var(--bg);display:grid;place-items:center;pointer-events:none}
.splash .mark{width:56px;height:56px}

/* Menu (phone) */
.mrow{display:flex;align-items:center;gap:var(--s4);width:100%;height:56px;text-align:left;transition:opacity .15s}
.mrow:active{opacity:.55}
.mrow .lead{width:36px;height:36px}
.mrow .lead .i{width:18px;height:18px}
.mrow .mname{flex:1;font-size:var(--t3);font-weight:500}
.mgroup{margin-top:var(--grp)}
.mgroup .cap{margin-bottom:var(--s1)}
.search{display:flex;align-items:center;gap:var(--s2);height:44px;padding:0 var(--s4);border-radius:var(--r);background:var(--sf1);color:var(--fg3)}
.search input{flex:1;height:100%;font-size:var(--t3);color:var(--fg)}
.search input::placeholder{color:var(--fg3)}
.search .i{width:18px;height:18px}

/* Builder */
.bprompt{border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line2);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s4);transition:box-shadow .25s;background:var(--bg)}
.bprompt:focus-within{box-shadow:inset 0 0 0 1px var(--fg3)}
.bprompt textarea{resize:none;font-size:var(--t4);line-height:1.4;min-height:84px;letter-spacing:-.01em}
.bprompt textarea::placeholder{color:var(--fg3)}
.thumb{width:56px;height:40px;border-radius:var(--r);background:var(--sf1);flex:none;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.thumb i{position:absolute;left:8px;right:20px;height:4px;border-radius:var(--r);background:var(--fg3)}
.thumb i:nth-child(1){top:9px;right:14px;background:var(--fg2)}
.thumb i:nth-child(2){top:17px}
.thumb i:nth-child(3){top:26px;width:16px;height:6px;background:var(--accent)}
.planlist{counter-reset:pl}
.plan-i{display:flex;gap:var(--s4);padding:var(--s4) 0;border-top:1px solid var(--line);align-items:flex-start}
.plan-i:first-child{border-top:0}
.plan-n{width:28px;height:28px;border-radius:50%;background:var(--sf1);display:grid;place-items:center;font-size:var(--t2);font-weight:600;flex:none;font-family:var(--num)}
.sk-line{height:14px;border-radius:var(--r);background:linear-gradient(90deg,var(--sf1) 0,var(--sf2) 40%,var(--sf1) 80%) 0 0/200% 100%;animation:shimmer 1.3s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}
.split{position:absolute;top:var(--topH);left:0;right:0;bottom:var(--botH);display:grid;grid-template-columns:380px minmax(0,1fr);border-top:1px solid var(--line)}
.pane-chat{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line);position:relative}
.pane-build{display:flex;flex-direction:column;min-height:0;background:var(--bg2);position:relative}
.pane-chat .pc-scroll{flex:1;overflow-y:auto;padding:var(--s5);display:flex;flex-direction:column;gap:var(--s4);scrollbar-width:thin}
.pane-chat .cmp{margin:0 var(--s4) var(--s4);max-width:none}
.phone .split{grid-template-columns:minmax(0,1fr);top:calc(var(--topH) + 52px);border-top:0}
.phone .split .pane-chat{border-right:0}
.phone .split[data-pane=build] .pane-chat,.phone .split[data-pane=chat] .pane-build{display:none}
.panesw{position:absolute;top:var(--topH);left:var(--padX);right:var(--padX);z-index:5;padding-top:var(--s1)}
.bmsg{font-size:var(--t2);display:flex;gap:var(--s3);align-items:flex-start}
.bmsg .orb{width:22px;height:22px}
.bmsg .orb::after{width:7px;height:7px}
.bmsg.me{justify-content:flex-end}
.bmsg.me .bubble{font-size:var(--t2);padding:var(--s2) var(--s3)}
.bstat{display:flex;align-items:center;gap:var(--s4);padding:var(--s4) var(--s5);border-bottom:1px solid var(--line);flex:none}
.bstat .pbar{flex:1}
.bstat .num{font-size:var(--t2);min-width:40px;text-align:right}
.btools{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s3) var(--s5);flex:none}
.pv-wrap{flex:1;min-height:0;overflow:auto;padding:0 var(--s5) var(--s5);display:flex;justify-content:center;align-items:flex-start}
.phone .pv-wrap{padding:0 var(--s4) var(--s4)}
.pv{width:100%;max-width:900px;background:#fff;color:#111;border-radius:var(--r);overflow:hidden;box-shadow:0 0 0 1px var(--line2),0 30px 60px -30px rgba(0,0,0,.5);transition:max-width .6s var(--ease);font-family:var(--geist);flex:none}
.pv.dark{background:#0d0d0d;color:#f2f2f2}
.pv.mob{max-width:360px}
.pv-bar{height:32px;background:#f0f0ef;display:flex;align-items:center;gap:var(--s2);padding:0 var(--s3);font-size:var(--t1);color:#888}
.pv.dark .pv-bar{background:#1a1a1a}
.pv-bar i{width:8px;height:8px;border-radius:50%;background:#d5d5d3}
.pv.dark .pv-bar i{background:#333}
.pv-bar span{margin-left:var(--s3)}
.pv-blk{position:relative}
.pv-blk::before{content:"";position:absolute;inset:var(--s3);border-radius:var(--r);background:linear-gradient(90deg,#ececeb 0,#f6f6f5 40%,#ececeb 80%) 0 0/200% 100%;animation:shimmer 1.3s linear infinite;transition:opacity .5s;z-index:1}
.pv.dark .pv-blk::before{background:linear-gradient(90deg,#1b1b1b 0,#262626 40%,#1b1b1b 80%) 0 0/200% 100%}
.pv-blk>*{opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.pv-blk.on::before{opacity:0}
.pv-blk.on>*{opacity:1;transform:none}
.pv-nav{display:flex;align-items:center;justify-content:space-between;padding:var(--s4) var(--s6);font-size:var(--t2);font-weight:600}
.pv-nav span{display:flex;gap:var(--s5);font-weight:400;opacity:.6}
.pv-hero{padding:var(--s8) var(--s6) var(--s7);text-align:center}
.pv-hero h3{font-size:var(--t6);line-height:1.02;letter-spacing:-.045em;font-weight:700}
.pv.mob .pv-hero h3{font-size:var(--t5)}
.pv-hero p{font-size:var(--t3);opacity:.6;margin:var(--s4) auto 0;max-width:420px}
.pv-form{display:flex;gap:var(--s2);justify-content:center;margin-top:var(--s5);flex-wrap:wrap}
.pv-form i{display:block;width:220px;height:44px;border-radius:var(--r);box-shadow:inset 0 0 0 1px rgba(127,127,127,.35)}
.pv{--pvac:#111;--pvon:#fff}
.pv.dark{--pvac:#f2f2f2;--pvon:#111}
html:not([data-palette=mono]) .pv{--pvac:var(--accent);--pvon:var(--on-ac)}
.pv-form b{display:grid;place-items:center;height:44px;padding:0 var(--s5);border-radius:var(--r);background:var(--pvac);color:var(--pvon);font-size:var(--t2)}
.pv-img{margin:0 var(--s6);height:200px;border-radius:var(--r);background:radial-gradient(120% 90% at 70% 10%,#3b3f5a 0,#121420 55%,#05060a 100%);position:relative;overflow:hidden}
.pv-img::after{content:"";position:absolute;inset:0;background:radial-gradient(2px 2px at 20% 30%,#fff,transparent),radial-gradient(1.5px 1.5px at 60% 20%,#fff,transparent),radial-gradient(1px 1px at 80% 45%,#fff,transparent),radial-gradient(1.5px 1.5px at 35% 60%,#fff,transparent),radial-gradient(1px 1px at 90% 15%,#fff,transparent)}
.pv-img.warm{background:radial-gradient(120% 90% at 30% 10%,#f2c48d 0,#b8653a 50%,#3a1d14 100%)}
.pv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);padding:var(--s6)}
.pv.mob .pv-grid{grid-template-columns:1fr}
.pv-card{border-radius:var(--r);padding:var(--s4);box-shadow:inset 0 0 0 1px rgba(127,127,127,.25);font-size:var(--t2)}
.pv-card b{display:block;font-size:var(--t3);margin-bottom:var(--s1)}
.pv-card span{opacity:.6}
.pv-sec{padding:var(--s5) var(--s6) var(--s6);font-size:var(--t2)}
.pv-sec h4{font-size:var(--t4);letter-spacing:-.02em;margin-bottom:var(--s2)}
.pv-sec p{opacity:.65;max-width:520px}
.pv-foot{padding:var(--s5) var(--s6);font-size:var(--t1);opacity:.5;display:flex;justify-content:space-between;border-top:1px solid rgba(127,127,127,.2)}
.pv-app{display:grid;grid-template-columns:140px 1fr;min-height:340px}
.pv.mob .pv-app{grid-template-columns:1fr}
.pv-app aside{background:rgba(127,127,127,.08);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2);font-size:var(--t1)}
.pv.mob .pv-app aside{display:none}
.pv-app aside b{font-size:var(--t2);margin-bottom:var(--s2)}
.pv-app main{padding:var(--s5)}
.pv-table{margin-top:var(--s4);font-size:var(--t1)}
.pv-table div{display:grid;grid-template-columns:1.4fr 1fr .8fr;padding:var(--s2) 0;border-top:1px solid rgba(127,127,127,.2)}
.pv-steps{display:flex;gap:var(--s2);padding:0 var(--s6) var(--s5);flex-wrap:wrap}
.pv-steps span{font-size:var(--t1);padding:var(--s1) var(--s3);border-radius:var(--r);box-shadow:inset 0 0 0 1px rgba(127,127,127,.3)}
.pv-flash{animation:flash 1s var(--ease)}
@keyframes flash{0%{box-shadow:0 0 0 1px var(--line2)}30%{box-shadow:0 0 0 3px var(--accent)}100%{box-shadow:0 0 0 1px var(--line2)}}
.blog{font-family:var(--num);font-size:var(--t1);color:var(--fg2);padding:var(--s3) var(--s5);border-top:1px solid var(--line);display:flex;flex-direction:column;gap:var(--s1);max-height:112px;overflow:hidden;flex:none}
.blog div{display:flex;gap:var(--s2);animation:wIn .4s var(--ease) both}
.blog b{font-weight:400;color:var(--fg3);min-width:44px}
.deliver{margin:var(--s4) var(--s5) 0;border-radius:var(--r);background:var(--sheet);box-shadow:inset 0 0 0 1px var(--ac-line);padding:var(--s4);display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;flex:none}
.deliver .grow{min-width:180px}

/* Studio */
.tool .lead{background:var(--bg);width:40px;height:40px}
.tool b{font-size:var(--t3);font-weight:600;margin-top:var(--s2)}
.tool span{font-size:var(--t2);color:var(--fg2);line-height:1.35}
.ring{width:40px;height:40px;flex:none;position:relative}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:3}
.ring .bg{stroke:var(--sf2)}
.ring .fg{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset .3s linear}
.ring span{position:absolute;inset:0;display:grid;place-items:center;font-size:var(--t1);font-family:var(--num)}
.mthumb{width:48px;height:48px;border-radius:var(--r);flex:none;position:relative;overflow:hidden;background:var(--sf2)}
.drop{border-radius:var(--r);border:1.5px dashed var(--line2);background:var(--bg);height:132px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s2);color:var(--fg2);width:100%;transition:background-color .2s,border-color .2s;position:relative;overflow:hidden;font-size:var(--t2)}
.drop:hover{background-color:var(--sf1)}
.drop.has{background:var(--sf1);border-color:transparent;text-align:left;color:var(--fg);flex-direction:row;justify-content:flex-start;padding:0 var(--s4);gap:var(--s4);height:80px}
.ph{aspect-ratio:1;border-radius:var(--r);position:relative;overflow:hidden;background:radial-gradient(120% 90% at 50% 20%,#fbf8f4,#ddd6cb)}
.ph.marble{background:linear-gradient(105deg,transparent 40%,rgba(120,120,120,.09) 42%,transparent 47%),linear-gradient(162deg,transparent 62%,rgba(120,120,120,.07) 64%,transparent 68%),radial-gradient(120% 90% at 50% 20%,#f4f4f2,#cfcfcc)}
.ph.out{background:linear-gradient(#bcd3e6 0,#e9dcc6 55%,#8c9a6a 55.5%,#5e6b45 100%)}
.ph.moody{background:radial-gradient(60% 50% at 50% 35%,#4a4642,#151413 70%,#0a0a0a)}
.ph .box{position:absolute;left:50%;bottom:20%;width:36%;height:44%;transform:translateX(-50%);background:linear-gradient(90deg,#161616 0,#2d2d2d 55%,#121212);border-radius:var(--r);display:flex;flex-direction:column;justify-content:flex-end;padding:10%;color:#f4efe6;font-size:var(--t1);font-weight:600;letter-spacing:.08em;box-shadow:0 18px 20px -12px rgba(0,0,0,.55)}
.ph .box small{font-weight:400;opacity:.6;letter-spacing:.02em}
.ph .sh{position:absolute;left:50%;bottom:16%;width:52%;height:8%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(0,0,0,.35),transparent);}
.ph.moody .box{background:linear-gradient(90deg,#e9e2d6,#fbf7f0 55%,#d8d0c2);color:#1a1a1a}
.ph.mini .box{font-size:0;padding:0}
.vid{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:#0b0b0b;color:#fff;width:100%}
.vid.tall{aspect-ratio:9/16;width:min(100%,300px);margin:0 auto}
.vid .scene{position:absolute;inset:-12%;background:radial-gradient(70% 60% at 70% 20%,#f3b27a,transparent 60%),linear-gradient(#2a2d4a,#8a5b62 55%,#1b1a22 56%,#0d0d12);animation:kb 9s ease-in-out infinite alternate;animation-play-state:paused}
.vid .scene.sea{background:radial-gradient(30% 20% at 50% 48%,#ffd9a8,transparent 70%),linear-gradient(#4b5d8a 0,#e3a589 48%,#22324d 49%,#0e1626 100%)}
.vid .scene.city{background:radial-gradient(1.5px 1.5px at 20% 70%,#ffd27a,transparent),radial-gradient(2px 2px at 40% 62%,#fff1c2,transparent),radial-gradient(1.5px 1.5px at 66% 75%,#ffd27a,transparent),radial-gradient(2px 2px at 82% 66%,#fff,transparent),linear-gradient(#0b1030,#2b2350 50%,#0a0a12 51%)}
.vid.playing .scene{animation-play-state:running}
@keyframes kb{from{transform:scale(1) translate(0,0)}to{transform:scale(1.12) translate(-3%,2%)}}
.vid .person{position:absolute;left:50%;bottom:0;width:46%;height:72%;transform:translateX(-50%)}
.vid .person .hd{position:absolute;left:50%;top:0;width:44%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:linear-gradient(#d9b394,#b88b6d)}
.vid .person .bd{position:absolute;left:0;right:0;bottom:0;height:52%;border-radius:50% 50% 0 0/40% 40% 0 0;background:linear-gradient(#2c2f3a,#1b1d24)}
.vid .person .mo{position:absolute;left:50%;top:28%;width:12%;height:2.5%;margin-left:-6%;border-radius:var(--r);background:#5a2e2a;transform-origin:center}
.vid.playing .person .mo{animation:talk .28s ease-in-out infinite alternate}
@keyframes talk{to{transform:scaleY(3.2)}}
.vid .ctrl{position:absolute;inset:auto 0 0 0;padding:var(--s3);display:flex;align-items:center;gap:var(--s3);background:linear-gradient(transparent,rgba(0,0,0,.65));z-index:2}
.vid .ctrl button{width:32px;height:32px;display:grid;place-items:center;border-radius:var(--r);color:#fff}
.vid .ctrl .i{width:18px;height:18px}
.vid .prog{flex:1;height:3px;background:rgba(255,255,255,.3);border-radius:var(--r);position:relative;overflow:hidden}
.vid .prog i{position:absolute;inset:0 auto 0 0;width:0;background:#fff}
.vid .tc{font-family:var(--num);font-size:var(--t1);opacity:.8}
.vid .capt{position:absolute;left:8%;right:8%;bottom:22%;text-align:center;font-weight:700;font-size:var(--t4);line-height:1.25;text-shadow:0 2px 10px rgba(0,0,0,.6);z-index:1}
.vid .capt span{transition:color .15s}
.vid .capt span.hot{color:var(--accent)}
html[data-palette=mono] .vid .capt span.hot{color:#0b0b0b;background:#f4f4f3;border-radius:4px;box-shadow:0 0 0 2px #f4f4f3}
.vid .bigplay{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:rgba(255,255,255,.92);color:#000;display:grid;place-items:center;transition:opacity .3s,transform .3s var(--ease);z-index:2}
.vid .bigplay .i{width:22px;height:22px;fill:#000;stroke:none;margin-left:3px}
.vid.playing .bigplay{opacity:0;transform:scale(.8);pointer-events:none}
.thumbcard{aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;position:relative;background:linear-gradient(135deg,#1a1a1a,#3a2d22);display:flex;align-items:flex-end;padding:var(--s4);color:#fff}
.thumbcard b{font-size:var(--t5);line-height:1;letter-spacing:-.03em;font-weight:800;text-transform:uppercase;max-width:70%;text-shadow:0 3px 12px rgba(0,0,0,.5)}
.thumbcard::after{content:"";position:absolute;right:-10%;top:10%;width:55%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 40%,#c7a17a,#5a3d28 70%,transparent 71%)}
.wave{display:flex;align-items:center;gap:var(--s1);height:72px}
.wave i{flex:1;border-radius:var(--r);background:var(--fg3);min-height:3px;transition:background-color .15s}
.wave i.p{background:var(--accent)}
.recdot{width:12px;height:12px;border-radius:50%;background:var(--danger);animation:blinkdot 1s infinite}

/* Ideas */
.idea .score{font-family:var(--num);font-size:var(--t4);font-weight:600;min-width:44px;text-align:right;font-variant-numeric:tabular-nums}
.idea .rank{width:24px;font-family:var(--num);font-size:var(--t2);color:var(--fg3);flex:none}
.minibars{display:flex;gap:var(--s1);align-items:flex-end;height:20px}
.minibars i{width:4px;border-radius:var(--r);background:var(--fg3)}
.idea.next .rank{color:var(--ac-ink)}
.idea.glow{animation:glow 1.6s var(--ease)}
@keyframes glow{0%,100%{background:transparent}30%{background:var(--ac-soft)}}
.sc-row{margin-bottom:var(--s5)}
.sc-row .between{margin-bottom:var(--s1)}

/* Projects / systems / routines */
.pcard{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s5);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line2);text-align:left;transition:background-color .2s,transform .16s var(--ease);width:100%}
.pcard:hover{background:var(--sf1)}
.pcard:active{transform:scale(.985)}
.sub-wrap{overflow:hidden}
.subs{padding:0 0 var(--s3) calc(26px + var(--s4))}
.subs .row{min-height:44px;padding:var(--s2) 0;border-top:0;gap:var(--s3)}
.subs .row-t{font-size:var(--t2)}
.exp{width:28px;height:28px;display:grid;place-items:center;border-radius:var(--r);color:var(--fg3);transition:transform .4s var(--ease),background-color .2s}
.exp:hover{background:var(--sf1)}
.exp.open{transform:rotate(90deg)}
.exp .i{width:16px;height:16px}
.blocker{border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line2);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3);margin-bottom:var(--s3)}
.notes{width:100%;min-height:260px;font-size:var(--t3);line-height:1.6;resize:none}
.saved{font-size:var(--t1);color:var(--fg3);transition:opacity .4s}
.week{display:flex;gap:var(--s2)}
.week i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:var(--t1);font-style:normal;color:var(--fg3);box-shadow:inset 0 0 0 1px var(--line2)}
.week i.y{background:var(--fg);color:var(--bg);box-shadow:none}
.week i.t{box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--fg)}
.player{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s4);padding:var(--s5) 0}
.player .h1{max-width:420px}
.bigring{width:200px;height:200px;position:relative}
.bigring svg{width:100%;height:100%;transform:rotate(-90deg)}
.bigring circle{fill:none;stroke-width:4}
.bigring .bg{stroke:var(--sf2)}
.bigring .fg{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset 1s linear}
.bigring span{position:absolute;inset:0;display:grid;place-items:center;font-size:var(--t5);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* Journal */
.jentry{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s5) 0;border-top:1px solid var(--line);text-align:left;width:100%;transition:opacity .15s}
.jentry:active{opacity:.55}
.jentry:first-child{border-top:0}
.jentry p{color:var(--fg2);font-size:var(--t3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tags{display:flex;gap:var(--s2);flex-wrap:wrap}
.tags.anim .pill{animation:tagin .5s var(--ease) both}
@keyframes tagin{from{opacity:0;transform:translateY(4px) scale(.9)}}
.moods{display:flex;gap:var(--s2)}
.mood{flex:1;height:44px;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line2);display:grid;place-items:center;transition:background-color .2s,color .2s,transform .16s var(--ease);font-size:var(--t2)}
.mood.on{background:var(--fg);color:var(--bg);box-shadow:none}
.mood:active{transform:scale(.94)}
.mdots{display:flex;gap:var(--s1)}
.mdots i{width:6px;height:6px;border-radius:50%;background:var(--sf3)}
.mdots i.on{background:var(--fg2)}
.editor{width:100%;min-height:280px;font-size:var(--t3);line-height:1.65;resize:none}
.editor-t{width:100%;font-size:var(--t4);font-weight:600;letter-spacing:-.02em;height:40px}

/* Reviews */
.qstage{position:relative;min-height:220px}
.qcard{display:flex;flex-direction:column;gap:var(--s5)}
.qnum{font-size:var(--t2);color:var(--fg2)}
.qtext{font-size:var(--t5);font-weight:600;letter-spacing:-.03em;line-height:1.15}
.rate{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s2)}
.rate button{height:56px;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line2);font-size:var(--t4);font-weight:600;font-family:var(--num);transition:background-color .2s,color .2s,transform .16s var(--ease)}
.rate button.on{background:var(--accent);color:var(--on-ac);box-shadow:none}
.rate button:active{transform:scale(.94)}
.facts{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);font-size:var(--t2);color:var(--fg2)}
.facts b{color:var(--fg);font-weight:600}

/* Life score */
.radar{width:100%;max-width:360px;aspect-ratio:1;margin:0 auto;display:block;overflow:visible}
.radar .grid{fill:none;stroke:var(--line2);stroke-width:1}
.radar .shape{fill:var(--ac-soft);stroke:var(--accent);stroke-width:2;stroke-linejoin:round}
.radar .pt{fill:var(--accent);pointer-events:none;transition:r .2s}
.pt-hit{fill:transparent;cursor:default}
.pt-g:hover .pt{r:6}
.dial .pt-g:hover .dt{r:6}
.dial .dt{pointer-events:none;transition:r .2s}
.radar text{fill:var(--fg2);font-size:var(--t2);font-family:inherit;font-weight:500}
.radar text.v{fill:var(--fg);font-weight:600}

/* Goals map */
.gmap{position:relative;overflow:auto;margin:0 calc(-1 * var(--padX));padding:0 var(--padX) var(--s5);scrollbar-width:thin;cursor:grab}
.gmap.dragging{cursor:grabbing}
.gmap-in{position:relative}
.gmap svg{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.gmap path{fill:none;stroke:var(--line2);stroke-width:1.5;transition:stroke .35s,opacity .35s}
.gmap path.hot{stroke:var(--accent);stroke-width:2}
.gnode{position:absolute;width:184px;min-height:68px;padding:var(--s3);border-radius:var(--r);background:var(--bg);box-shadow:inset 0 0 0 1px var(--line2);text-align:left;font-size:var(--t2);line-height:1.35;transition:opacity .35s,box-shadow .35s,transform .2s var(--ease),background-color .2s;display:flex;flex-direction:column;gap:var(--s2)}
.gnode:hover{background:var(--sf1)}
.gnode:active{transform:scale(.97)}
.gnode.hot{box-shadow:inset 0 0 0 1.5px var(--accent)}
.gnode.done .gt{color:var(--fg3);text-decoration:line-through}
.gmap.focus .gnode:not(.hot){opacity:.32}
.gmap.focus path:not(.hot){opacity:.25}
.gcol{position:absolute;top:0;font-size:var(--t1);color:var(--fg3);font-weight:500;white-space:nowrap}
.gnode .pbar{height:3px}
.gnode.new{animation:nodein .6s var(--ease) both}
@keyframes nodein{from{opacity:0;transform:translateX(-12px) scale(.96)}}
.glist .row{min-height:56px}

/* Connections */
.logo{width:40px;height:40px;border-radius:var(--r);display:grid;place-items:center;font-weight:700;font-size:var(--t3);flex:none;background:var(--fg);color:var(--bg)}
.logo.l2{background:var(--sf2);color:var(--fg)}
.logo.l3{background:transparent;box-shadow:inset 0 0 0 1.5px var(--fg);color:var(--fg)}
.keybox{font-family:var(--geist-mono);font-size:var(--t2);padding:var(--s3) var(--s4);border-radius:var(--r);background:var(--sf1);display:flex;align-items:center;justify-content:space-between;gap:var(--s3);word-break:break-all}
.connecting{display:flex;flex-direction:column;align-items:center;gap:var(--s4);padding:var(--s6) 0;text-align:center}
.linkanim{display:flex;align-items:center;gap:var(--s3)}
.linkanim .dots{display:flex;gap:var(--s1)}
.linkanim .dots i{width:5px;height:5px;border-radius:50%;background:var(--fg3);animation:blink 1.2s infinite}
.linkanim .dots i:nth-child(2){animation-delay:.15s}.linkanim .dots i:nth-child(3){animation-delay:.3s}
.linkanim.ok .dots i{background:var(--accent);animation:none}

/* Settings */
.set-row{display:flex;align-items:center;gap:var(--s4);padding:var(--s4) 0;border-top:1px solid var(--line);width:100%;text-align:left}
.list>.set-row:first-child{border-top:0}
.swatches{display:flex;gap:var(--s4);flex-wrap:wrap}
.swatch{display:flex;flex-direction:column;align-items:center;gap:var(--s2);font-size:var(--t2);color:var(--fg2);transition:color .2s}
.swatch .sw{width:44px;height:44px}
.swatch .sw::after{inset:-5px;box-shadow:inset 0 0 0 2px var(--fg)}
.swatch.on{color:var(--fg)}
.lookprev{border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line2);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s4)}
.plan{border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line2);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3);transition:box-shadow .3s}
.plan.on{box-shadow:inset 0 0 0 1.5px var(--accent)}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:var(--s1);font-size:var(--t2);color:var(--fg2)}
.plan li{display:flex;gap:var(--s2)}
.plan li .i{width:16px;height:16px;color:var(--fg);margin-top:2px}
.price{font-size:var(--t2);color:var(--fg2);font-style:italic}
.pr{font:inherit;color:inherit}
.hold{position:relative;overflow:hidden;background:color-mix(in srgb,var(--danger) 12%,transparent);color:var(--danger);user-select:none;touch-action:none}
.hold::before{content:"";position:absolute;inset:0;background:var(--danger);opacity:.22;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.hold.holding::before{transform:scaleX(1);transition:transform 1.6s linear}
.hold span{position:relative}
.mthumb .i{width:20px;height:20px}
.phone .chart.flat,.chart.flat{margin:0}
.ptask .subs .row{border-top:0}
.knows .list .row{min-height:56px}
.pv-wrap .pv{flex:none}

/* ============ Final design additions ============ */
/* Skip link */
.skip{position:fixed;left:16px;top:-60px;z-index:900;height:40px;padding:0 var(--s4);display:flex;align-items:center;border-radius:var(--r);background:var(--fg);color:var(--bg);font-size:var(--t2);font-weight:600;text-decoration:none;transition:top .2s var(--ease)}
.skip:focus{top:12px}
/* Smooth scrolling */
.scroll,.sh-b,.mz-thread,.pc-scroll{scroll-behavior:smooth}
html[data-motion=reduced] .scroll,html[data-motion=reduced] .sh-b,html[data-motion=reduced] .mz-thread,html[data-motion=reduced] .pc-scroll{scroll-behavior:auto}
/* The quiet // mark before section labels */
.sec-h>.h2::before,.kick::before,.nav-l::before{content:"//";font-family:var(--geist-mono);color:var(--ac-ink);opacity:.55;font-weight:500;margin-right:.45em;letter-spacing:-.06em}
.sec-h>.h2::before{font-size:.62em;vertical-align:.14em;color:var(--fg3);opacity:1}
.kick{font-size:var(--t1);color:var(--fg3);font-weight:500;letter-spacing:.01em}
/* Hover: cards rise softly */
.pcard,button.tile,.scard,.proj{transition:background-color .2s,transform .35s var(--ease),box-shadow .35s var(--ease)}
.pcard:hover,button.tile:hover,.proj:hover{transform:translateY(-2px);box-shadow:0 16px 32px -20px rgba(0,0,0,.5)}
html[data-mode=dark] .pcard:hover,html[data-mode=dark] button.tile:hover,html[data-mode=dark] .proj:hover{box-shadow:0 16px 32px -18px rgba(0,0,0,.9),inset 0 0 0 1px var(--line2)}
html[data-motion=reduced] .pcard:hover,html[data-motion=reduced] button.tile:hover,html[data-motion=reduced] .proj:hover,html[data-motion=reduced] .scard:hover .sart,html[data-motion=reduced] .srow:hover{transform:none}
/* Help dots */
.idot{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line2);font-size:10px;font-weight:600;color:var(--fg3);font-family:var(--geist);font-style:normal;vertical-align:1px;margin-left:var(--s1);transition:color .2s,box-shadow .2s;flex:none;line-height:1}
.idot:hover{color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg3)}
/* Hide amounts */
.amt{transition:filter .3s var(--ease)}
html.hide-amt .amt{filter:blur(7px);user-select:none}
/* Top bar round buttons */
.tbar{display:flex;align-items:center;gap:2px;margin-left:var(--s2);padding-left:var(--s2);border-left:1px solid var(--line)}
.tb{position:relative;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--fg2);transition:background-color .2s,color .2s,transform .2s var(--ease);flex:none}
.tb .i{width:17px;height:17px}
.tb:hover{background:var(--sf1);color:var(--fg);transform:translateY(-1px)}
.tb:active{transform:scale(.92)}
.tb.on{color:var(--ac-ink)}
.tb b{font-size:var(--t2);font-weight:600;font-family:var(--geist)}
.tb .bdot{position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--bg)}
.tb .swc{width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--line2)}
html[data-palette=mono] .tb .swc{background:linear-gradient(135deg,var(--p-mono-d) 50%,var(--p-mono-l) 50%)}
.top-r .iconbtn{width:32px;height:32px}
.top-r .iconbtn .i{width:18px;height:18px}
.qrow{display:flex;justify-content:space-between;gap:var(--s1)}
.qrow .tb{width:38px;height:38px;background:var(--sf1)}
/* Popovers and menus */
.pop{position:absolute;z-index:330;min-width:240px;max-width:340px;background:var(--sheet);border-radius:var(--r);box-shadow:var(--shadow),0 0 0 1px var(--line2);padding:var(--s2);pointer-events:auto;font-size:var(--t2)}
.pop-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s2)}
.pop-t{font-size:var(--t3);font-weight:600;letter-spacing:-.01em}
.pop .row{min-height:44px;padding:var(--s2);border-radius:var(--r);border-top:0}
.pop button.row:hover{background:var(--sf1)}
.pop .row .lead{width:30px;height:30px}
.pop .row .lead .i{width:16px;height:16px}
.pop-b{padding:0 var(--s2) var(--s2)}
.pop-f{padding:var(--s2);display:flex;gap:var(--s2)}
.pop-f .btn{flex:1 1 auto;min-height:32px}
.menu-i{display:flex;align-items:center;gap:var(--s3);width:100%;height:36px;padding:0 var(--s2);border-radius:var(--r);font-size:var(--t2);color:var(--fg);text-align:left;transition:background-color .15s}
.menu-i:hover,.menu-i:focus-visible{background:var(--sf1)}
.menu-i .i{width:16px;height:16px;color:var(--fg2)}
.menu-i small{margin-left:auto;font-size:var(--t1);color:var(--fg3)}
.menu-i.danger,.menu-i.danger .i{color:var(--danger)}
.menu-sep{height:1px;background:var(--line);margin:var(--s1) var(--s2)}
.menu-l{font-size:var(--t1);color:var(--fg3);padding:var(--s2) var(--s2) var(--s1);font-weight:500}
.sheet .menu-i{height:48px;font-size:var(--t3)}
/* Menu foot */
.side-foot{flex:none;border-top:1px solid var(--line);padding-top:var(--s2);margin-top:var(--s1);display:flex;flex-direction:column;gap:var(--s2)}
.sf-row{display:flex;align-items:center;gap:2px}
.sf-b{position:relative;height:32px;min-width:32px;padding:0 var(--s2);border-radius:var(--r);display:flex;align-items:center;justify-content:center;gap:var(--s1);color:var(--fg2);font-size:var(--t1);font-weight:500;transition:background-color .2s,color .2s}
.sf-b:hover{background:var(--sf1);color:var(--fg)}
.sf-b .i{width:17px;height:17px}
.sf-n{min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--accent);color:var(--on-ac);font-size:var(--t1);line-height:1;font-weight:600;font-style:normal;display:grid;place-items:center;font-family:var(--num)}
.sf-dot{position:absolute;top:7px;right:7px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.sf-ring{width:18px;height:18px}
.sf-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.sf-ring circle{fill:none;stroke-width:3}
.sf-ring .bg{stroke:var(--sf3)}.sf-ring .fg{stroke:var(--accent)}
.upd{color:var(--ac-ink)}
.upd .i{animation:updPulse 2.4s ease-in-out infinite}
@keyframes updPulse{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(2px);opacity:.55}}
.upd-l{position:absolute;bottom:calc(100% + 6px);right:0;transform:translateY(4px);white-space:nowrap;background:var(--fg);color:var(--bg);font-size:var(--t1);font-weight:500;padding:var(--s1) var(--s2);border-radius:8px;opacity:0;pointer-events:none;transition:opacity .2s,transform .25s var(--ease)}
.upd:hover .upd-l,.upd:focus-visible .upd-l{opacity:1;transform:none}
.sf-cred{padding:0 var(--s2)}
.sf-cred .row-s{font-size:var(--t1)}
.cbar{height:3px;border-radius:2px;background:var(--sf2);overflow:hidden;margin:var(--s1) 0}
.cbar i{display:block;height:100%;background:var(--accent);border-radius:2px;transition:width .4s var(--ease);animation:cbarIn 1.1s var(--ease) both}
@keyframes cbarIn{from{width:0}}
.side-me{margin-top:0;gap:var(--s1)}
.side-me .me-b{display:flex;align-items:center;gap:var(--s3);flex:1;min-width:0;text-align:left}
.av{position:relative}
.saved{position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--bg2)}
.iconbtn.sm{width:30px;height:30px}
.iconbtn.sm .i{width:16px;height:16px}
.nav-tag{margin-left:auto;font-size:var(--t1);line-height:16px;font-weight:600;letter-spacing:.03em;padding:0 5px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--line2);color:var(--fg3)}
.nav-i .nav-tag+i{margin-left:var(--s1)}
/* Round Midas button */
.fab{position:absolute;right:var(--s5);bottom:var(--s5);z-index:40;width:48px;height:48px;border-radius:50%;background:var(--sheet);box-shadow:0 12px 30px -10px rgba(0,0,0,.45),0 0 0 1px var(--line2);display:grid;place-items:center;font-family:var(--geist-mono);font-weight:600;font-size:16px;letter-spacing:-.08em;color:var(--ac-ink);transition:transform .3s var(--ease),opacity .25s,box-shadow .3s}
.fab:hover{transform:translateY(-2px);box-shadow:0 16px 36px -10px rgba(0,0,0,.5),0 0 0 1px var(--fg3)}
.phone .fab{bottom:calc(var(--botH) + var(--s4));right:var(--s4);width:46px;height:46px}
.on-midas .fab,.gate-on .fab,.no-fab .fab{opacity:0;pointer-events:none;transform:scale(.8)}
.fchat{position:absolute;right:var(--s5);bottom:84px;width:360px;height:min(500px,calc(100% - 120px));z-index:325;background:var(--sheet);border-radius:var(--r);box-shadow:var(--shadow),0 0 0 1px var(--line2);display:flex;flex-direction:column;pointer-events:auto;overflow:hidden}
.fchat .pc-scroll,.sheet .pc-scroll{flex:1;min-height:0;overflow-y:auto;padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3)}
.fchat .cmp,.sheet .fcmp{margin:0 var(--s3) var(--s2);max-width:none}
.fchat-f{display:flex;justify-content:space-between;align-items:center;padding:0 var(--s4) var(--s3);font-size:var(--t1);color:var(--fg3)}
.fchat-f button{color:var(--fg2);font-weight:500}
/* A long page name ("About Command Center ...") ends in "…" so the header buttons, the close X last, always stay in view */
.fchat .sh-h>.flex:first-child,.fchat .sh-h>.flex:first-child>div{min-width:0}
.fchat .sh-h>.flex:last-child{flex:none}
.cb{width:32px;height:32px;border-radius:var(--r);display:grid;place-items:center;color:var(--fg2);flex:none;transition:background-color .2s,color .2s}
.cb:hover{background:var(--sf1);color:var(--fg)}
.cb .i{width:18px;height:18px}
.cb.on{color:var(--danger)}
/* Midas page */
.mz{position:absolute;top:var(--topH);left:0;right:0;bottom:var(--botH);display:grid;grid-template-columns:minmax(0,1fr)}
@container (min-width:1000px){.mz{grid-template-columns:minmax(0,1fr) 280px}}
.mz-main{display:flex;flex-direction:column;min-height:0;min-width:0}
.mz-thread{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--sf3) transparent;overscroll-behavior:contain}
.mz-in{max-width:760px;margin:0 auto;padding:var(--s2) var(--padX) var(--s3);display:flex;flex-direction:column;gap:18px}
.mz-intro{display:grid;grid-template-columns:auto 1fr;column-gap:var(--s4);row-gap:var(--s1);align-items:center;padding-top:var(--s1)}
.mz-intro .orb.lg{width:44px;height:44px;grid-row:span 2;align-self:start;margin-top:4px}
.phone .mz-intro{grid-template-columns:1fr}
.phone .mz-intro .orb.lg{grid-row:auto;margin:0 0 var(--s1)}
.mz-intro .orb.lg::after{width:14px;height:14px}
.mz-intro .h1{font-size:var(--t5)}
.mz-intro .h1 span{display:block;color:var(--fg3);font-weight:500}
/* Opening view: only the trident, one greeting line and the message box */
.mz.fresh{grid-template-columns:minmax(0,1fr)!important}
.mz.fresh .mz-thread{display:flex;flex-direction:column;justify-content:center}
.mz.fresh .mz-in{width:100%;padding-bottom:var(--s7)}
.mz.fresh .mz-intro{grid-template-columns:1fr;justify-items:center;text-align:center;row-gap:var(--s4)}
.mz.fresh .mz-intro .mark.lg{width:56px;height:56px;grid-row:auto;margin:0}
.mz-intro .mark.lg{width:40px;height:40px;grid-row:span 2;align-self:start;margin-top:2px}
.phone .mz-intro .mark.lg{grid-row:auto;margin:0 0 var(--s1)}
.mz.fresh .mz-cmp{padding-bottom:var(--s6)}
.mk{width:22px;height:22px;border-radius:6px;background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);color:#0b0b0b;display:inline-grid;place-items:center;flex:none}
.mk svg{width:15px;height:15px;display:block;overflow:visible}
.mk.sm{width:18px;height:18px;border-radius:5px}.mk.sm svg{width:12px;height:12px}
.mk.lg{width:28px;height:28px;border-radius:8px}.mk.lg svg{width:19px;height:19px}
.mgrp-h{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s5);padding-bottom:var(--s1);font-size:var(--t2);font-weight:600}
.mgrp-h .cap{margin-left:auto}
.mrow2{min-height:54px;padding:var(--s2) 0;gap:var(--s2)}
.mrow2-b{flex:1;min-width:0;display:flex;align-items:center;gap:var(--s3);text-align:left;border-radius:10px}
.mrow2-b .row-m{gap:2px}
.mrow2.sel .row-t{color:var(--fg)}
.reason-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);width:100%;flex-wrap:wrap}
.sh-f .reason-row .btn{flex:none}
.mdl b{font-weight:600;color:var(--fg)}
.mz-intro p{color:var(--fg2);font-size:var(--t2)}
.mz-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.mz-cards .tile{padding:var(--s2) var(--s3);flex-direction:row;align-items:center;gap:var(--s3);min-height:52px}
.mz-cards .tile b{font-size:var(--t2);font-weight:600;display:block}
.mz-cards .tile small{font-size:var(--t1);color:var(--fg2);display:block}
.mz-cards .lead{width:32px;height:32px;background:var(--bg)}
.mz-cards .lead .i{width:17px;height:17px}
.phone .mz-cards{gap:var(--s2)}
.phone .mz-cards .tile{flex-direction:column;align-items:flex-start;padding:var(--s3);gap:var(--s2)}
.phone .mz-cards .tile small{display:none}
.guide{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s2) var(--s2) var(--s3);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line2);font-size:var(--t2)}
.guide .grow b{font-weight:600}
.guide .row-s{font-size:var(--t1);white-space:normal}
.phone .guide{flex-wrap:wrap;row-gap:var(--s2)}
.phone .guide .grow{flex:1 1 calc(100% - 50px)}
.mz-cmp{flex:none;padding:var(--s2) var(--padX) var(--s3);background:var(--bg)}
.mz-cmp .suggest{max-width:712px;margin-bottom:var(--s2)}
.ctx{display:flex;gap:var(--s1);flex-wrap:wrap;max-width:712px;margin:0 auto var(--s2)}
.ctx:empty{display:none}
.ctx .pill button{display:grid;place-items:center;margin-right:-4px}
.ctx .pill .i{width:12px;height:12px}
.mdl{height:32px;padding:0 var(--s2);border-radius:var(--r);font-size:var(--t2);font-weight:500;color:var(--fg2);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;flex:none;transition:background-color .2s}
.mdl:hover{background:var(--sf1);color:var(--fg)}
.mdl .i{width:14px;height:14px}
.bprompt .mdl,.own-mdl,.field .mdl{box-shadow:inset 0 0 0 1px var(--line2)}
.cmp{align-items:center}
.mz-fine{max-width:712px;margin:var(--s2) auto 0;display:flex;justify-content:space-between;gap:var(--s3);font-size:var(--t1);color:var(--fg3)}
.mz-fine button{color:var(--fg2);font-weight:500}
.mz-fine button:hover{color:var(--fg)}
.phone .mz-fine{display:none}
.mz-rail{display:none;border-left:1px solid var(--line);padding:var(--s4) var(--s5);overflow-y:auto;scrollbar-width:none}
@container (min-width:1000px){.mz-rail{display:flex;flex-direction:column;gap:var(--s4)}}
.mz-rail .rail-sec{padding-top:var(--s4);border-top:1px solid var(--line)}
.mz-rail .rail-money{font-size:var(--t5);font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-top:var(--s1)}
.mz-rail .delta{font-size:var(--t1);margin-top:var(--s1)}
.mz-rail .delta .i{width:13px;height:13px}
.spark{width:100%;height:44px;display:block;margin-top:var(--s2);overflow:visible}
.spark path{fill:none;stroke:var(--accent);stroke-width:1.8;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.rail-task{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s1) 0;font-size:var(--t2);width:100%;text-align:left;border-radius:8px}
.rail-task:hover{color:var(--fg)}
.rail-task .num{font-size:var(--t1);color:var(--fg3);width:38px;flex:none;padding-top:1px}
.rail-task small{display:block;color:var(--fg3);font-size:var(--t1)}
.msg.ai{position:relative}
.msg-tools{position:absolute;top:-6px;right:0;display:flex;gap:var(--s1);opacity:0;transition:opacity .2s}
.msg.ai:hover .msg-tools,.msg-tools:focus-within{opacity:1}
.phone .msg-tools{position:static;opacity:1;margin-top:calc(-1 * var(--s2))}
.msg-tools .iconbtn{width:28px;height:28px;color:var(--fg3)}
.msg-tools .iconbtn:hover{color:var(--fg)}
.msg-tools .iconbtn .i{width:15px;height:15px}
.ai-b{font-size:var(--t3);gap:var(--s3)}
.ai-b ul{gap:var(--s1)}
.phone .mz-in{padding-top:var(--s1)}
.phone .mz-cmp{padding-bottom:var(--s2)}
/* Phone composer: the message on its own row, tools and the model picker below */
.phone .mz-cmp .cmp{flex-wrap:wrap;row-gap:2px;padding:var(--s2) var(--s2) var(--s2) var(--s2)}
.phone .mz-cmp .cmp textarea{flex:1 1 100%;order:-1;padding:var(--s1) var(--s2)}
.phone .mz-cmp .cmp .mdl{margin-left:auto}
.phone .mz.fresh .mz-intro .h1{font-size:var(--t4)}
.phone .vquiet .faint{display:none}
/* Ask first list */
.askl{display:flex;flex-direction:column;gap:2px;margin-top:var(--s1)}
.askl-i{display:flex;align-items:center;gap:var(--s3);padding:var(--s2);border-radius:var(--r);text-align:left;transition:background-color .15s}
.askl-i:hover{background:var(--sf1)}
.askl-i .row-t{font-size:var(--t2)}
.askl-i .row-s{font-size:var(--t1)}
/* Today */
.td{display:grid;gap:var(--grp2);grid-template-columns:minmax(0,1fr)}
@container (min-width:880px){.td{grid-template-columns:minmax(0,1fr) 280px}}
.strip-row{display:flex;align-items:center;gap:var(--s3)}
.strip{display:flex;align-items:center;gap:var(--s1);flex:1;min-width:0}
.strip .dn{flex:1;min-width:38px;height:50px;border-radius:var(--r);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:var(--fg2);font-size:var(--t1);transition:background-color .2s,color .2s,transform .16s var(--ease)}
.strip .dn b{font-family:var(--num);font-size:var(--t3);font-weight:500;color:var(--fg)}
.strip .dn:hover{background:var(--sf1)}
.strip .dn.on{background:var(--fg);color:var(--bg)}
.strip .dn.on b{color:var(--bg)}
.strip .dn.today:not(.on) b{color:var(--ac-ink)}
.strip .dn:active{transform:scale(.95)}
.strip .wk{width:26px;height:50px;border-radius:var(--r);display:grid;place-items:center;color:var(--fg3);flex:none}
.strip .wk:hover{background:var(--sf1);color:var(--fg)}
.strip .wk .i{width:16px;height:16px}
.focus{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s2) var(--s2) var(--s4);border-radius:var(--r);background:var(--sf1)}
.focus .row-t{font-size:var(--t2);white-space:normal}
.trow{display:flex;align-items:center;gap:var(--s3);min-height:40px;padding:2px 0;border-top:1px solid var(--line)}
.trow:first-child{border-top:0}
.trow .tm{width:50px;flex:none;font-family:var(--num);font-size:var(--t1);color:var(--fg3);text-align:left;height:26px;border-radius:8px;padding:0 var(--s1);transition:background-color .2s,color .2s}
.trow .tm:hover{background:var(--sf1);color:var(--fg)}
.trow .tb-m{flex:1;min-width:0;text-align:left;display:flex;align-items:baseline;gap:var(--s2)}
.trow .row-t{font-size:var(--t2)}
.trow .row-s{font-size:var(--t1)}
.trow .ck{width:22px;height:22px}
.trow .ck svg{width:12px;height:12px}
.trow.done .tm{opacity:.5}
.trow .more{width:28px;height:28px;color:var(--fg3);opacity:0;transition:opacity .2s}
.trow:hover .more,.trow .more:focus-visible{opacity:1}
.pace .bignum{font-size:var(--t6)}
.tep{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
.tep>*{display:flex;flex-direction:column;gap:2px;min-width:0}
.tep b{font-size:var(--t3);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.tep>*>span{font-size:var(--t1);color:var(--fg3)}
.wkgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--s2)}
.wkcol{border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line);padding:var(--s3);min-height:200px;display:flex;flex-direction:column;gap:var(--s2);text-align:left;font-size:var(--t1);transition:background-color .2s}
.wkcol:hover{background:var(--sf1)}
.wkcol.on{box-shadow:inset 0 0 0 1.5px var(--ac-line);background:var(--ac-soft)}
.wkcol span{color:var(--fg2);line-height:1.35}
.mogrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--s1)}
.mogrid .cap{text-align:center;padding-bottom:var(--s1)}
.moday{height:58px;border-radius:var(--r);padding:var(--s2);text-align:left;font-size:var(--t1);color:var(--fg2);display:flex;flex-direction:column;justify-content:space-between;transition:background-color .2s;box-shadow:inset 0 0 0 1px var(--line)}
.moday:hover{background:var(--sf1)}
.moday.on{background:var(--fg);color:var(--bg);box-shadow:none}
.moday.out{opacity:.3;box-shadow:none}
.moday i{display:flex;gap:2px}
.moday i b{width:5px;height:5px;border-radius:50%;background:var(--accent)}
/* Projects */
.pgrid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.proj{display:flex;flex-direction:column;text-align:left;padding:var(--s5);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line2);aspect-ratio:1/1;min-height:220px;background:var(--bg);width:100%}
.proj:hover{background:var(--sf1)}
.proj .pc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s2)}
.proj .pc-t{font-size:var(--t4);font-weight:600;letter-spacing:-.02em;line-height:1.25;margin-top:auto}
.proj .pc-d{font-size:var(--t2);color:var(--fg2);margin-top:var(--s1);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.proj .pbar{margin-top:var(--s4);height:4px}
.proj .pc-f{display:flex;justify-content:space-between;margin-top:var(--s3);font-family:var(--geist-mono);font-size:var(--t1);letter-spacing:.03em;color:var(--fg3);text-transform:uppercase}
.proj .pc-f b{font-weight:500;color:var(--fg2);transition:color .2s}
.proj:hover .pc-f b{color:var(--fg)}
.pill.up{text-transform:uppercase;letter-spacing:.04em;font-size:var(--t1)}
/* Two-column page with a side panel */
.twocol{display:grid;gap:var(--grp2);grid-template-columns:minmax(0,1fr)}
@container (min-width:860px){.twocol{grid-template-columns:minmax(0,1fr) 300px;align-items:start}}
.spot{border-radius:var(--r);background:var(--sf1);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3)}
.spot .h2{font-size:var(--t4);line-height:1.3}
.spot .muted{font-size:var(--t2)}
.srow{display:flex;align-items:center;gap:var(--s4);width:100%;padding:var(--s4);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line2);text-align:left;margin-bottom:var(--s2);transition:background-color .2s,transform .35s var(--ease),box-shadow .35s var(--ease)}
.srow:hover{background:var(--sf1);transform:translateY(-1px)}
.srow.paused .row-t,.srow.paused .row-s{opacity:.55}
/* Studio cards (from the first Astra run, redrawn) */
.sbanner{display:flex;align-items:center;gap:var(--s4);padding:var(--s4) var(--s5);border-radius:var(--r);background:var(--sf1);margin-bottom:var(--s5)}
.sbanner .grow b{display:block;font-size:var(--t3);font-weight:600}
.sbanner .grow span{font-size:var(--t2);color:var(--fg2)}
.phone .sbanner{flex-wrap:wrap}
.sgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grp) var(--s4)}
.phone .sgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s3)}
.scard{text-align:left;min-width:0;display:flex;flex-direction:column}
.sart{height:136px;position:relative;background:var(--sf1);border-radius:var(--r);overflow:hidden;display:grid;place-items:center;margin-bottom:var(--s3);transition:transform .45s var(--ease),box-shadow .45s var(--ease),background-color .3s}
.phone .sart{height:108px}
.scard:hover .sart{transform:translateY(-5px);box-shadow:0 22px 40px -22px rgba(0,0,0,.55),0 0 0 1px var(--line2)}
html[data-mode=dark] .scard:hover .sart{box-shadow:0 22px 40px -18px rgba(0,0,0,.95),0 0 0 1px var(--line2)}
.scard b{font-size:var(--t3);font-weight:600}
.scard span.d{font-size:var(--t1);color:var(--fg2);margin-top:2px}
.sart svg{width:62%;height:70%;color:var(--accent);overflow:visible}
.art-bottle{height:84px;width:42px;background:var(--fg);border-radius:12px;position:relative;box-shadow:18px 18px 16px rgba(0,0,0,.12);transform:rotate(-12deg);display:grid;place-items:center;color:var(--bg);font-size:7px;letter-spacing:.2em;transition:transform .6s var(--ease)}
.art-bottle::before{content:"";position:absolute;top:-14px;width:24px;height:15px;left:9px;background:var(--fg2);border-radius:5px 5px 0 0}
.art-bottle::after{content:"LUMA";border:1px solid currentColor;padding:9px 3px}
.art-word{font-size:28px;line-height:1.02;letter-spacing:-.06em;font-weight:600;color:var(--fg);text-align:left;transition:transform .6s var(--ease)}
.art-word em{font-style:normal;color:var(--ac-ink)}
.art-cap{font-size:16px;font-weight:600;padding:var(--s2) var(--s3);background:var(--accent);color:var(--on-ac);border-radius:var(--r);transform:rotate(-5deg);transition:transform .6s var(--ease)}
.art-frame{width:64px;height:100px;border:1.5px solid var(--fg3);border-radius:var(--r);display:grid;place-items:center;color:var(--fg);position:relative;transition:transform .6s var(--ease)}
.art-frame.wide{width:118px;height:74px}
.art-frame .i{width:24px;height:24px}
.art-frame::after{content:"";position:absolute;left:10px;right:10px;bottom:9px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--accent) 35%,var(--sf3) 35%)}
.sart .wv rect,.lip{transform-box:fill-box;transform-origin:center}
.sart .face{transition:transform .6s var(--ease)}
/* Hover: the artwork moves */
.scard:hover .wv rect{animation:wvPulse .9s ease-in-out infinite alternate}
.scard:hover .wv rect:nth-child(3n){animation-delay:.15s}
.scard:hover .wv rect:nth-child(3n+1){animation-delay:.3s}
@keyframes wvPulse{from{transform:scaleY(1)}to{transform:scaleY(.35)}}
.scard:hover .art-bottle{transform:rotate(-4deg) translateY(-4px)}
.scard:hover .art-word{transform:translateX(4px) rotate(-2deg)}
.scard:hover .art-cap{transform:rotate(0) scale(1.04)}
.scard:hover .art-frame{transform:scale(1.06)}
.scard:hover .art-frame::after{animation:frameRun 1.6s linear infinite}
@keyframes frameRun{from{background:linear-gradient(90deg,var(--accent) 10%,var(--sf3) 10%)}to{background:linear-gradient(90deg,var(--accent) 95%,var(--sf3) 95%)}}
.scard:hover .face{animation:faceTalk 1.2s ease-in-out infinite}
@keyframes faceTalk{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.scard:hover .lip{animation:lipMove .28s ease-in-out infinite alternate}
@keyframes lipMove{to{transform:scaleY(2.2)}}
.more-tools{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--line)}
.more-tools .chip{height:28px;font-size:var(--t1);color:var(--fg2)}
/* Studio work area: three panels */
.s3{position:absolute;top:var(--topH);left:0;right:0;bottom:var(--botH);display:grid;grid-template-columns:210px minmax(0,1fr) 330px;border-top:1px solid var(--line)}
.s3>div{min-height:0;overflow-y:auto;scrollbar-width:thin}
.s3-l{border-right:1px solid var(--line);padding:var(--s4) var(--s3)}
.s3-c{padding:var(--s5) var(--s6)}
.s3-r{border-left:1px solid var(--line);background:var(--bg2);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3)}
.s3-r .pc-scroll{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:var(--s3);padding:0}
.phone .s3{grid-template-columns:minmax(0,1fr);top:calc(var(--topH) + 52px);border-top:0}
.phone .s3>div{display:none}
.phone .s3[data-pane=l] .s3-l,.phone .s3[data-pane=c] .s3-c,.phone .s3[data-pane=r] .s3-r{display:flex;flex-direction:column;border:0}
.phone .s3-c,.phone .s3-l,.phone .s3-r{padding:var(--s4) var(--padX) calc(var(--botH) + var(--s5))}
.sproj{display:flex;align-items:center;gap:var(--s2);width:100%;height:34px;padding:0 var(--s2);border-radius:var(--r);font-size:var(--t2);color:var(--fg2);text-align:left}
.sproj:hover{background:var(--sf1);color:var(--fg)}
.sproj.on{background:var(--sf2);color:var(--fg)}
.sproj .i{width:16px;height:16px}
.costline{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border-radius:var(--r);background:var(--sf1);font-size:var(--t2)}
.costline em{font-style:normal;color:var(--fg2)}
.tick{display:flex;gap:var(--s3);align-items:flex-start;font-size:var(--t2);text-align:left;padding:var(--s2) 0;width:100%}
.tick .ck{width:20px;height:20px;margin-top:1px}
.tick .ck svg{width:11px;height:11px}
/* Books compact table (from the second Astra run, redrawn) */
.btx{display:grid;gap:var(--grp);grid-template-columns:minmax(0,1fr)}
@container (min-width:900px){.btx{grid-template-columns:minmax(0,1fr) 300px;align-items:start}}
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--t2);table-layout:fixed}
.tbl th{font-size:var(--t1);font-weight:500;color:var(--fg3);text-align:left;padding:0 var(--s3);height:30px;background:var(--sf1)}
.tbl th:first-child{border-radius:10px 0 0 10px}.tbl th:last-child{border-radius:0 10px 10px 0;text-align:right}
.tbl td{padding:0 var(--s3);height:35px;border-top:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbl tbody tr:first-child td{border-top:0}
.tbl td:last-child{text-align:right;font-family:var(--num);font-variant-numeric:tabular-nums}
.tbl tbody tr{transition:background-color .15s;cursor:pointer}
.tbl tbody tr:hover td{background:var(--sf1)}
.tbl .tag{font-size:var(--t1);color:var(--fg3);margin-left:var(--s1)}
.tbl .num{font-family:var(--num)}
.csel{height:26px;border-radius:8px;padding:0 22px 0 var(--s2);font-size:12px;background:var(--sf1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 6px center/12px;-webkit-appearance:none;appearance:none;max-width:100%;cursor:pointer;color:var(--fg)}
.csel:hover{background-color:var(--sf2)}
.tbar2{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3);flex-wrap:wrap}
.tbar2 .search{height:34px;flex:1;min-width:150px}
.tbar2 .chip{height:30px}
.feedbox{border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line2);padding:var(--s3) var(--s4);display:flex;flex-direction:column;gap:var(--s1)}
.fitem{padding:var(--s2) 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:var(--s1)}
.fitem.first{border-top:0}
.fitem .num{font-size:12px}
.fitem .row-t{font-size:var(--t2)}
.facts2{display:flex;gap:var(--s1);flex-wrap:wrap}
.xs{height:24px!important;padding:0 var(--s2)!important;font-size:var(--t1)!important;border-radius:8px!important}
.pager{display:flex;align-items:center;justify-content:space-between;margin-top:var(--s2);font-size:var(--t1);color:var(--fg3)}
/* Fit-to-screen pages */
.fit .scroll{padding-bottom:var(--s4)}
.fit .head{padding-bottom:var(--s3)}
/* Vision line: one calm line at the top of each section */
.vline{display:flex;align-items:center;gap:var(--s3);width:100%;min-height:32px;padding:var(--s1) var(--s3);margin:var(--s2) 0 var(--s1);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line);font-size:var(--t2);color:var(--fg2);text-align:left;transition:background-color .2s,box-shadow .2s}
.vline:hover{background:var(--sf1);box-shadow:inset 0 0 0 1px var(--line2)}
.vline .vl-k{flex:none;color:var(--ac-ink);font-weight:600}
.vline .vl-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--fg)}
.vline .vl-s{flex:none;max-width:42%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vline .chev{flex:none}
.phone .vline .vl-s{display:none}
.vquiet{font-size:var(--t2);color:var(--fg2);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s}
.vquiet:hover{color:var(--fg)}
.mz-intro .vquiet{grid-column:2}
.mz.fresh .mz-intro .vquiet,.phone .mz-intro .vquiet{grid-column:auto}
.vplan{display:grid;gap:var(--grp);grid-template-columns:minmax(0,1fr)}
@container (min-width:760px){.vplan{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ge-step{max-width:720px}
.ge-choice{display:grid;gap:14px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.ge-choice .pcard{min-height:150px;justify-content:flex-start}
.phone .ge-choice{grid-template-columns:minmax(0,1fr)}
.tip{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s2) var(--s2) var(--s3);border-radius:var(--r);background:var(--ac-soft);font-size:var(--t2);color:var(--fg);margin-top:var(--s2)}
.tip .btn{flex:none}
.dataline{display:flex;gap:var(--s2);align-items:flex-start;font-size:var(--t2);color:var(--fg2);padding:var(--s3);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line2)}
.dataline .i{width:16px;height:16px;flex:none;margin-top:1px}
.datablock{margin:var(--s3) var(--s5) 0;padding:var(--s4);border-radius:var(--r);background:var(--sheet);box-shadow:inset 0 0 0 1px var(--line2);flex:none}
.pv-bar.pv-mac i{opacity:1}
.pv-app.pv-iphone{grid-template-columns:1fr}.pv-app.pv-iphone aside{display:none}
.tiers{display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr))}
.phone .tiers{grid-template-columns:minmax(0,1fr)}
.tier{border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line2);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s1)}
.tier.on{box-shadow:inset 0 0 0 1.5px var(--ac-line);background:var(--ac-soft)}
.tier-p{font-size:var(--t5);font-weight:600;letter-spacing:-.02em}
.aff-stats{grid-template-columns:repeat(6,minmax(0,1fr))}
.phone .aff-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.demo-tg{display:inline-flex;align-items:center;gap:2px;height:28px;padding:0 2px 0 var(--s2);border-radius:8px;box-shadow:inset 0 0 0 1px var(--line2);border:1px dashed transparent;font-size:var(--t1);color:var(--fg3)}
.demo-tg span{margin-right:var(--s1)}
.demo-tg button{height:22px;padding:0 var(--s2);border-radius:6px;color:var(--fg2);font-weight:500}
.demo-tg button.on{background:var(--fg);color:var(--bg)}
.steps{display:flex;gap:var(--s2);flex-wrap:wrap;font-size:var(--t2);color:var(--fg3)}
.steps span{display:inline-flex;align-items:center;gap:var(--s1)}
.steps i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:var(--t1);box-shadow:inset 0 0 0 1px var(--line2)}
.steps i svg{width:11px;height:11px;fill:none;stroke:var(--on-ac);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.steps .on{color:var(--fg)}.steps .on i{box-shadow:inset 0 0 0 1.5px var(--ac-ink)}
.steps .done{color:var(--fg2)}.steps .done i{background:var(--accent);box-shadow:none}
.sm-top{padding:0 var(--s5) var(--s2);display:flex;flex-direction:column;gap:var(--s2);flex:none;border-bottom:1px solid var(--line)}
.sm-top .tabs{margin-bottom:0;border-bottom:0}
.sm-top .cap{padding-bottom:var(--s1)}
.smrow{min-height:56px;padding:var(--s2) 0;gap:var(--s3)}
.smrow.sel .row-t{color:var(--fg)}
.smgrp-h{width:100%;text-align:left;border-radius:8px;padding:var(--s1) 0}
.smgrp-h .i{width:16px;height:16px;color:var(--fg3);transition:transform .3s var(--ease)}
.smgrp-h .i.shut{transform:rotate(-90deg)}
.smgrp-h .cap{margin-left:auto}
.pic{position:relative;display:block;overflow:hidden;background:linear-gradient(135deg,color-mix(in oklab,var(--accent) 34%,var(--sf2)) 0%,var(--sf1) 72%)}
.pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;color:transparent;font-size:0}
.pic.ph{border-radius:var(--r)}
.pic.thumb{width:56px;height:40px}
.pic.tc-pic,.pic.scene-pic,.pic.pv-pic,.pic.mt-pic{position:absolute;inset:0;aspect-ratio:auto!important;border-radius:inherit}
.thumbcard::after{z-index:1}.thumbcard b{position:relative;z-index:2}
.thumbcard:has(.tc-pic img)::after{display:none}
.pv-img::after{z-index:2}.pv-img:has(.pv-pic img)::after{display:none}
.pic.empty-pic{width:160px;border-radius:var(--r)}
.av{background:linear-gradient(135deg,color-mix(in oklab,var(--accent) 30%,var(--sf2)),var(--sf2));overflow:visible}
.av-img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover;color:transparent;font-size:0}
.fit .vline{margin:0 0 var(--s1);min-height:28px;padding-top:2px;padding-bottom:2px}
.desk .fit .head{padding-top:var(--s1)}
.fit .scroll{padding-bottom:var(--s2)}
.fit .mini-stats>button{padding-top:6px;padding-bottom:6px}
.fit .bprompt{padding:var(--s3) var(--s4)}
.fit .tabs{margin-bottom:var(--s5)}
.bp-model{gap:var(--s2);align-items:center}
.bp-model [data-tipslot]{flex:1;min-width:0}
.bp-model .tip{flex:1;min-width:0;margin-top:0;padding-top:4px;padding-bottom:4px}
.bp-model .tip .grow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Life score dial */
.dial{position:relative;width:min(280px,100%);aspect-ratio:1;margin:0 auto;display:grid;place-items:center}
.dial svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dial .trk{fill:none;stroke:var(--line2);stroke-width:1}
.dial .arc{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;transition:stroke-dasharray .9s var(--ease)}
.dial .dt{fill:var(--accent)}
.dial-c{text-align:center}
.dial-c .bignum{justify-content:center;font-size:var(--t7)}
.dial-c .cap{letter-spacing:.08em;font-family:var(--geist-mono)}
/* Connect page */
.prompt-box{font-family:var(--geist-mono);font-size:12px;line-height:1.6;padding:var(--s4);border-radius:var(--r);background:var(--sf1);white-space:pre-wrap;color:var(--fg)}
/* Getting in screens */
.gate{position:absolute;inset:0;z-index:460;background:var(--bg);display:grid;place-items:center;overflow-y:auto;padding:var(--s6) var(--s5)}
.phone .gate{padding:70px var(--s5) var(--s6);place-items:start center}
.gate-in{width:min(380px,100%);display:flex;flex-direction:column;gap:var(--s3)}
.gate-in.wide{width:min(600px,100%)}
.gate .mark.big{width:36px;height:36px}
.gate .h1{font-size:var(--t5)}
.gate .or{display:flex;align-items:center;gap:var(--s3);color:var(--fg3);font-size:var(--t1)}
.gate .or::before,.gate .or::after{content:"";height:1px;flex:1;background:var(--line)}
.gate .legal{font-size:var(--t1);color:var(--fg3);text-align:center}
.gate .legal button{color:var(--fg2);text-decoration:underline}
.gate .field{margin-bottom:var(--s2)}
.codebox{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s2)}
.codebox input{height:52px;border-radius:var(--r);background:var(--sf1);text-align:center;font-size:var(--t4);font-family:var(--num);width:100%}
.spin{width:26px;height:26px;border-radius:50%;border:2px solid var(--sf3);border-top-color:var(--fg);animation:spin .8s linear infinite}
.gate-x{position:absolute;top:var(--s4);right:var(--s4);z-index:2}
.phone .gate-x{top:56px}
.tour-dots{display:flex;gap:var(--s1);justify-content:center}
.tour-dots i{width:6px;height:6px;border-radius:50%;background:var(--sf3);transition:width .3s var(--ease),background-color .3s}
.tour-dots i.on{width:18px;border-radius:3px;background:var(--fg)}
.bcard{width:min(420px,100%);border-radius:var(--r);box-shadow:var(--shadow),0 0 0 1px var(--line2);background:var(--sheet);padding:var(--s6);display:flex;flex-direction:column;gap:var(--s3);text-align:center;align-items:center}
.coach{position:absolute;z-index:340;width:300px;background:var(--fg);color:var(--bg);border-radius:var(--r);padding:var(--s4);box-shadow:var(--shadow);pointer-events:auto;display:flex;flex-direction:column;gap:var(--s3);font-size:var(--t2)}
.coach .cap{color:color-mix(in srgb,var(--bg) 60%,transparent)}
.coach .btn.soft{background:color-mix(in srgb,var(--bg) 14%,transparent);color:var(--bg)}
.coach .btn.pri{background:var(--bg);color:var(--fg)}
.coach .cx{position:absolute;top:var(--s2);right:var(--s2);color:var(--bg);opacity:.7;width:28px;height:28px}
.coach .cx:hover{background:transparent;opacity:1}
/* Stage: Getting in picker */
.st-mid{display:flex;align-items:center;gap:var(--s2)}
.gi-b{height:40px;padding:0 var(--s3);border-radius:var(--r);background:var(--sf1);color:var(--fg2);font-size:var(--t2);font-weight:500;display:flex;align-items:center;gap:var(--s2);transition:color .2s,background-color .2s}
html[data-mode=light] .gi-b{background:var(--sf2)}
.gi-b:hover,.gi-b[aria-expanded=true]{color:var(--fg)}
.gi-b .i{width:14px;height:14px}
.gi-menu{position:fixed;top:58px;z-index:1000;width:270px;max-height:calc(100vh - 80px);overflow-y:auto;background:var(--sheet);border-radius:var(--r);box-shadow:var(--shadow),0 0 0 1px var(--line2);padding:var(--s2);color:var(--fg);font-size:var(--t2)}
.gi-menu[hidden]{display:none}
.gi-plans{display:flex;gap:var(--s1);padding:0 var(--s2) var(--s2)}
.gi-plans button{flex:1;height:28px;border-radius:8px;font-size:var(--t1);font-weight:500;color:var(--fg2);box-shadow:inset 0 0 0 1px var(--line2)}
.gi-plans button.on{background:var(--fg);color:var(--bg);box-shadow:none}
/* Unlock panel */
.unlock{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s3);padding:var(--s7) var(--s5);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line2);max-width:520px;margin:var(--s5) auto}
/* Misc */
.seg.sm button{height:28px;font-size:var(--t1);padding:0 var(--s3)}
.seg.sm .seg-hl{height:28px}
.stat .lbl{display:flex;align-items:center}
.list.tight .row{min-height:44px;padding:var(--s2) 0}
.ring2{width:84px;height:84px;position:relative;flex:none}
.ring2 svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring2 circle{fill:none;stroke-width:6}
.ring2 .bg{stroke:var(--sf2)}.ring2 .fg{stroke:var(--accent);stroke-linecap:round}
.ring2 span{position:absolute;inset:0;display:grid;place-items:center;font-weight:600;font-size:var(--t3);font-variant-numeric:tabular-nums}
.ach{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.ach .tile{align-items:flex-start}
.ach .tile.off{opacity:.45}
.phone .ach{grid-template-columns:minmax(0,1fr)}
.badge-max{font-size:var(--t1);font-weight:600;letter-spacing:.04em;height:22px;padding:0 var(--s2);border-radius:8px;display:inline-flex;align-items:center;box-shadow:inset 0 0 0 1px var(--ac-line);color:var(--ac-ink);vertical-align:.3em;margin-left:var(--s2)}
.tag2{display:inline-flex;align-items:center;height:22px;padding:0 var(--s2);border-radius:8px;font-size:var(--t1);font-weight:600;letter-spacing:.02em;background:var(--sf1);color:var(--fg2);white-space:nowrap}
.tag2.ac{background:var(--ac-soft);color:var(--ac-ink)}
.mini-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
.mini-stats>*{display:flex;flex-direction:column;gap:2px;text-align:left}
.mini-stats b{font-size:var(--t4);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.mini-stats>*>span{font-size:var(--t1);color:var(--fg3)}
.phone .mini-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.phone .td,.phone .twocol,.phone .btx{grid-template-columns:minmax(0,1fr)}
.phone .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.phone .proj{padding:var(--s4);min-height:0}
.phone .proj .pc-t{font-size:var(--t3)}
.phone .proj .pc-d{display:none}
.phone .strip .dn{min-width:0}
.phone .strip .wk{display:none}
.phone .wkgrid{grid-template-columns:minmax(0,1fr)}
.phone .wkcol{min-height:0}
.phone .tbl{font-size:12px}
.phone .tbl .hide-ph{display:none}
.gi-note{font-size:var(--t1);color:var(--fg3);padding:var(--s1) var(--s2) var(--s2)}
.bpane-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s3) var(--s5);border-bottom:1px solid var(--line);flex:none}
.desk .bbuild .panesw{display:none}
@container (max-width:900px){.desk .bbuild .panesw{display:block}.desk .bbuild .split{grid-template-columns:minmax(0,1fr);top:calc(var(--topH) + 52px)}.desk .bbuild .split[data-pane=build] .pane-chat,.desk .bbuild .split[data-pane=chat] .pane-build{display:none}.desk .bbuild .pane-chat{border-right:0}.desk .bbuild .bpane-h{display:none}}
.phone .bpane-h{display:none}
.mini-stats>button{border-radius:var(--r);padding:var(--s2) var(--s3);background:var(--sf1);transition:background-color .2s}
.mini-stats>button:hover{background:var(--sf2)}
.bstat .xs{flex:none}
.btools .seg.sm{width:auto}
.phone .head-row{flex-direction:column;align-items:flex-start;gap:var(--s3)}
.phone .head-row>div:last-child{flex-wrap:wrap}
.phone .trow .tb-m{flex-direction:column;align-items:flex-start;gap:0}
.phone .trow .more{opacity:1}
.phone .tbar2 .chip{display:none}
.phone .tbar2 .chip.on{display:inline-flex}
/* ============ Round 3 ============ */
/* Stage bar: account switch, Pictures guide. On narrower screens the brand line drops its small text so the middle fits. */
#acct button{padding:0 var(--s3)}
.gi-n{min-width:20px;height:18px;padding:0 5px;border-radius:9px;background:var(--line2);color:var(--fg);font-size:var(--t1);font-weight:600;display:inline-grid;place-items:center;font-variant-numeric:tabular-nums}
@media (max-width:1400px){.st-brand small{display:none}}
@media (max-width:1180px){#picBtn .i,#giBtn .i{display:none}.st-mid{gap:var(--s1)}}
.pic-panel{position:fixed;top:58px;z-index:1000;width:min(640px,calc(100vw - 32px));max-height:calc(100vh - 80px);overflow-y:auto;background:var(--sheet);border-radius:var(--r);box-shadow:var(--shadow),0 0 0 1px var(--line2);padding:var(--s4);color:var(--fg);font-size:var(--t2)}
.pic-panel[hidden]{display:none}
.pp-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3)}
.pp-h b{font-size:var(--t3);font-weight:600}
.pp-g{margin-top:var(--s4)}
.pp-g .menu-l{padding:0 0 var(--s2)}
.pp-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2)}
.pp-i{display:flex;flex-direction:column;gap:6px;padding:6px;border-radius:var(--r);text-align:left;transition:background-color .15s,transform .15s var(--ease)}
.pp-i:hover,.pp-i:focus-visible{background:var(--sf1)}
.pp-i:active{transform:scale(.97)}
.pp-i .pp-t{aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:var(--sf1)}
.pp-i .pp-t img{width:100%;height:100%;object-fit:cover;display:block}
.pp-i b{font-size:var(--t1);font-weight:600;color:var(--fg);line-height:1.3}
.pp-i span{font-size:var(--t1);color:var(--fg3);line-height:1.3}
/* Owner group in the main menu: only on the owner's account */
.nav-tag.own{color:var(--ac-ink);box-shadow:inset 0 0 0 1px var(--ac-line)}
/* Model picker: Midas picks (the automatic choice) and the one model that is coming soon */
.mk.mk-auto{background:var(--sf2);box-shadow:inset 0 0 0 1px var(--line2)}
.mk.mk-auto .orb{width:15px;height:15px}.mk.mk-auto .orb::before{box-shadow:inset 0 0 0 1.5px var(--fg)}.mk.mk-auto .orb::after{width:5px;height:5px}
.mk.sm.mk-auto .orb{width:12px;height:12px}.mk.sm.mk-auto .orb::after{width:4px;height:4px}
.mk.lg.mk-auto .orb{width:19px;height:19px}.mk.lg.mk-auto .orb::after{width:7px;height:7px}
.mrow2.soon .mrow2-b{cursor:default}
.mrow2.soon .mk,.mrow2.soon .row-m{opacity:.55}
.mauto{margin-top:var(--s3);border-radius:var(--r);background:var(--sf1);padding:0 var(--s2)}
.mauto .row{border-top:0}
.b-tab .appicon{flex:none;width:14px!important;height:14px!important;border-radius:4px}
.tipwhen{margin-top:var(--s3);display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.tipwhen .pill{flex:none}
/* "Show me": the picture it points to gets a calm accent ring for a moment */
.spot-ring{position:absolute;z-index:999;pointer-events:none;box-shadow:0 0 0 2px var(--accent),0 0 0 7px color-mix(in srgb,var(--accent) 28%,transparent);animation:spotRing 1.2s var(--ease) 3}
@keyframes spotRing{0%,100%{box-shadow:0 0 0 2px var(--accent),0 0 0 7px color-mix(in srgb,var(--accent) 28%,transparent)}50%{box-shadow:0 0 0 2px var(--accent),0 0 0 13px color-mix(in srgb,var(--accent) 0%,transparent)}}
.own-b{margin-left:auto;height:26px;padding:0 var(--s2) 0 6px;border-radius:var(--r);display:inline-flex;align-items:center;gap:5px;color:var(--ac-ink);box-shadow:inset 0 0 0 1px var(--ac-line);font-size:var(--t1);font-weight:600;transition:background-color .2s,transform .15s var(--ease)}
.own-b:hover{background:var(--ac-soft)}
.own-b:active{transform:scale(.96)}
.own-b .i{width:15px;height:15px}
.nav-i>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.nav-tag{white-space:nowrap;flex:none}
.phone .gate[data-k=splash]{place-items:center}
/* ============ Round 4 ============ */
/* Every page scrolls to its very bottom. The last line always clears the phone tab bar and the round Midas button. */
.desk .scroll,.desk .fit .scroll{padding-bottom:84px}
.phone .scroll,.phone .fit .scroll{padding-bottom:calc(var(--botH) + 86px)}
.phone .s3-c,.phone .s3-l,.phone .s3-r{padding-bottom:calc(var(--botH) + var(--s6))}
.hl-box{border-radius:var(--r);background:var(--sf1);padding:var(--s4)}
.sheet .hl-box,.pop .hl-box{background:var(--sf1)}
/* Phone: system cards and the review buttons wrap instead of running off the screen */
.phone .srow{flex-wrap:wrap;row-gap:var(--s2)}
.phone .srow .row-m{flex:1 1 calc(100% - 60px)}
.phone .srow .row-m+.pill{margin-left:52px}
.phone .rv-help span{display:none}
.phone .rv-help{padding:0 var(--s3)}
/* The logo: the trident and the word Mythox are one control that opens Midas */
.brand{height:32px;padding:0 var(--s2) 0 var(--s1);margin-left:calc(-1 * var(--s1));border-radius:var(--r);color:var(--fg);flex:none;transition:background-color .2s,transform .15s var(--ease)}
.brand:hover{background:var(--sf1)}
.app.mac .brand:hover{background:var(--line)}
.brand:active{transform:scale(.97)}
.brand:hover .mark{transform:rotate(-6deg)}
.brand .mark{transition:transform .35s var(--ease)}
.mbrand{display:flex;align-items:center;gap:var(--s2);height:40px;margin:0 0 var(--s3) calc(-1 * var(--s2));padding:0 var(--s2);border-radius:var(--r);font-weight:600;font-size:var(--t3);transition:background-color .2s}
.mbrand:active{background:var(--sf1)}
.mbrand .mark{width:24px;height:24px}
.mbrand .faint{margin-left:auto;font-weight:500;font-size:var(--t2)}
.mz-mark{display:grid;place-items:center;border-radius:14px;padding:4px;margin:-4px;transition:background-color .2s,transform .2s var(--ease)}
.mz-mark:hover{background:var(--sf1)}
.mz-mark:active{transform:scale(.95)}
.mz-intro .mz-mark{grid-row:span 2;align-self:start}
.mz.fresh .mz-intro .mz-mark,.phone .mz-intro .mz-mark{grid-row:auto}
.mz-intro .mz-mark .mark.lg{margin:0}
/* Preview bar: "View as: Member / Owner (your account)" */
.viewas{display:flex;align-items:center;gap:var(--s2);padding-left:var(--s3);border-radius:var(--r);background:var(--sf1);transition:box-shadow .3s}
html[data-mode=light] .viewas{background:var(--sf2)}
.viewas>span{font-size:var(--t2);font-weight:600;color:var(--fg);white-space:nowrap}
.viewas .seg{background:transparent;padding:var(--s1) var(--s1) var(--s1) 0}
.viewas.owner{box-shadow:inset 0 0 0 1.5px var(--ac-line)}
#acct button{display:inline-flex;align-items:center;gap:5px}
#acct button .i{width:14px;height:14px}
#acct button.on .i{color:var(--ac-ink)}
@media (max-width:1320px){#picBtn .pp-word{display:none}}
@media (max-width:1180px){.st-brand>span.stb-word{display:none}.st-mid{gap:var(--s1)}#giBtn{padding:0 var(--s2)}}
@media (max-width:1020px){.stbar{grid-template-columns:auto 1fr;height:104px;row-gap:0;align-content:center;padding-top:var(--s1);padding-bottom:var(--s1)}.st-mid{grid-row:2;grid-column:1 / -1;justify-content:center}.stage{top:104px}.gi-menu,.pic-panel{top:98px}}
@media (max-width:640px){.st-mid{overflow-x:auto;justify-content:flex-start;scrollbar-width:none}.viewas>span{display:none}}
/* Owner menu: a group at the top of the main menu, only on the owner's account */
.nav-g.own{margin:0 0 var(--s2);padding:0 0 var(--s2);border-bottom:1px solid var(--line)}
.nav.owned{-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 24px),transparent)}
.nav>.own-l{position:sticky;top:0;z-index:2;margin-bottom:2px;background:color-mix(in srgb,var(--bg2) 97%,transparent);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.app.mac .nav>.own-l{background:color-mix(in srgb,var(--bg2) 93%,transparent)}
.gi-b,.st-mid .seg,.viewas{flex:none;white-space:nowrap}
.own-l{display:flex;align-items:center;gap:var(--s2);width:100%;height:30px;padding:0 var(--s3);border-radius:var(--r);color:var(--ac-ink);font-size:var(--t1);font-weight:600;letter-spacing:.02em;transition:background-color .2s}
.own-l:hover{background:var(--sf1)!important}
.app.mac .own-l:hover{background:var(--line)}
.own-l .i{width:15px;height:15px}
.own-l>span:not(.nav-tag){white-space:nowrap;flex:none}
@media (max-width:1580px){.st-brand small{display:none}}
.own-l .chv{margin-left:var(--s1);color:var(--fg3);transition:transform .3s var(--ease)}
.own-l[aria-expanded=false] .chv{transform:rotate(-90deg)}
.own-l .nav-tag{margin-left:auto}
.nav-g.own.shut .nav-i{display:none}
.own-ico{width:28px;height:26px;padding:0;justify-content:center;margin-left:auto}
.own-ico span{display:none}
.mgroup.own .cap{color:var(--ac-ink)}
/* Owner screens */
.otabs{margin-bottom:var(--grp)}
.ostat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
.phone .ostat{grid-template-columns:repeat(2,minmax(0,1fr))}
.ostat>*{border-radius:var(--r);background:var(--sf1);padding:var(--s3) var(--s4);display:flex;flex-direction:column;gap:2px;text-align:left;min-width:0}
button.ostat-b{transition:background-color .2s}
button.ostat-b:hover{background:var(--sf2)}
.ostat b{font-size:var(--t4);font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.ostat>*>span{font-size:var(--t1);color:var(--fg3)}
.ostat>*>em{font-style:normal;font-size:var(--t1);color:var(--ac-ink)}
.fnl{display:flex;flex-direction:column;gap:var(--s2)}
.fnl-r{display:grid;grid-template-columns:150px minmax(0,1fr) 92px;align-items:center;gap:var(--s3);font-size:var(--t2)}
.phone .fnl-r{grid-template-columns:96px minmax(0,1fr) 70px}
.fnl-r .bar{height:26px;border-radius:8px;background:var(--sf1);position:relative;overflow:hidden}
.fnl-r .bar i{position:absolute;inset:0 auto 0 0;background:var(--accent);border-radius:8px;opacity:.85}
.fnl-r .bar.leak i{background:var(--fg2)}
.fnl-r .num{text-align:right}
.fnl-c{font-size:var(--t1);color:var(--fg3);padding-left:162px}
.phone .fnl-c{padding-left:108px}
.fnl-c.leak{color:var(--ac-ink);font-weight:600}
.omap{width:100%;max-width:820px;height:auto;display:block}
.omap rect{fill:var(--sf1);stroke:var(--line2)}
.omap rect.hot{fill:color-mix(in srgb,var(--accent) 18%,var(--bg));stroke:var(--ac-line)}
.omap text{fill:var(--fg);font-size:12px;font-family:inherit}
.omap text.s{fill:var(--fg3);font-size:11px}
.omap path{fill:none;stroke:var(--line2);stroke-width:1.5}
.omap path.hot{stroke:var(--accent);stroke-width:2}
.omap g[data-act]{cursor:pointer}
.omap g[data-act]:hover rect{stroke:var(--fg3)}
.panic{border-radius:var(--r);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--danger) 45%,transparent);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3)}
.calm{color:var(--ac-ink)}
.tbl-wrap{overflow-x:auto;scrollbar-width:thin;margin:0 calc(-1 * var(--s1));padding:0 var(--s1)}
.tbl-wrap .tbl{min-width:560px}
.phone .tbl-wrap .tbl{min-width:520px}
.olist .row{min-height:52px}
.flag{color:var(--ac-ink)}
.chatline{display:flex;flex-direction:column;gap:var(--s1);padding:var(--s3);border-radius:var(--r);background:var(--sf1);font-size:var(--t2)}
.chatline.me{background:var(--ac-soft)}
/* Buy on the website: the hand-off sheet */
.handoff{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s3);padding:var(--s4) 0 var(--s2)}
.handoff .linkanim .lead{width:44px;height:44px}
.buyrow{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.unlimited{font-size:var(--t1);font-weight:600;color:var(--ac-ink)}
/* Builder: the "What do you want to build?" box, rearranged into a calm, even layout */
.bbox{gap:var(--s3)}
.btypes{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s2)}
.btypes .chip{justify-content:center;width:100%;min-width:0;padding:0 var(--s2);overflow:hidden;text-overflow:ellipsis}
@container (max-width:820px){.btypes{grid-template-columns:repeat(3,minmax(0,1fr))}}
.phone .btypes{grid-template-columns:repeat(3,minmax(0,1fr))}
.bbox [data-tipslot] .tip{margin-top:0}
.bbox [data-tipslot]:empty{display:none}
.bbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line)}
.bbar .bb-l{display:flex;align-items:center;gap:var(--s2);min-width:0;flex-wrap:wrap}
.phone .bbar{flex-wrap:wrap}
.phone .bbar>.btn.pri{flex:1 1 100%}
.btry{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s3);overflow-x:auto;scrollbar-width:none;white-space:nowrap;margin-left:calc(-1 * var(--s1));padding:2px var(--s1)}
.btry .chip{height:28px;font-size:var(--t1);color:var(--fg2)}
.btry .chip:hover{color:var(--fg)}
.bfoot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;column-gap:var(--s5);row-gap:var(--s1);margin-top:var(--s3)}
.bfoot .btry{margin-top:0;flex:0 1 auto;min-width:0}
.bcost{flex:none}
.phone .bcost{flex:1 1 100%}
.phone .gate .gate-in>.btns{flex-direction:column-reverse;align-items:stretch;width:100%}
.phone .gate .gate-in>.btns .btn{width:100%}
/* Ideas: product type, the orb map and the build-to-sell plan */
.ideabox{display:flex;flex-direction:row;align-items:center;gap:var(--s2);flex-wrap:wrap}
.ideabox input{flex:1 1 200px;min-width:0}
.phone .ideabox .seg{order:3;flex:1 1 100%}
.orbmap{position:relative;width:100%;aspect-ratio:16/10;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line2);overflow:hidden;background:radial-gradient(80% 80% at 100% 0,var(--ac-soft),transparent 70%)}
.phone .orbmap{aspect-ratio:4/5}
.orbmap .ax{position:absolute;font-size:var(--t1);color:var(--fg3)}
.orb-i{position:absolute;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;text-align:center;background:var(--sf2);box-shadow:inset 0 0 0 1px var(--line2);font-size:var(--t1);font-weight:600;line-height:1.2;padding:6px;transition:transform .3s var(--ease),background-color .2s}
.orb-i:hover{transform:translate(-50%,-50%) scale(1.06);background:var(--sf3)}
.orb-i.top{background:var(--accent);color:var(--on-ac);box-shadow:none}
.orb-i small{display:block;font-weight:500;opacity:.75}
.bts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2)}
.phone .bts{grid-template-columns:repeat(2,minmax(0,1fr))}
.bts>div{border-radius:10px;background:var(--bg);padding:var(--s2) var(--s3);font-size:var(--t1);display:flex;flex-direction:column;gap:2px}
.bts b{font-size:var(--t2);font-weight:600}
/* Journal: your topics and the connections in each entry */
.topics{display:flex;gap:var(--s2);align-items:center}
.conn-r{display:flex;align-items:center;gap:var(--s3);width:100%;padding:var(--s2) 0;border-top:1px solid var(--line);text-align:left}
.conn-r:first-child{border-top:0}
.conn-r .lead{width:30px;height:30px}
.conn-r .lead .i{width:16px;height:16px}
.conn-x{color:var(--fg3)}
.conn-r .row-s{white-space:normal}
/* Goals: Progress tab */
.gprog-h{display:flex;align-items:flex-end;gap:var(--s6);flex-wrap:wrap}
.gprog-h .row-s{white-space:normal}
.phone .gspan .seg button{padding:0 var(--s1);font-size:var(--t1)}
.gspan{overflow-x:auto;scrollbar-width:none}
.gspan .seg{min-width:520px}
.phone .gspan .seg{min-width:0}
/* Systems: test and improve trackers, charts, the theory map, Offer Builder and the 12-week plan */
.gen{border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line2);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2)}
.gen.run{box-shadow:inset 0 0 0 1.5px var(--ac-line)}
.var-r{display:grid;grid-template-columns:28px minmax(0,1fr) 120px 52px;align-items:center;gap:var(--s3);font-size:var(--t2);min-height:34px}
.phone .var-r{grid-template-columns:24px minmax(0,1fr) 60px 44px}
.var-r .k{width:24px;height:24px;border-radius:7px;background:var(--sf1);display:grid;place-items:center;font-weight:600;font-size:var(--t1)}
.var-r.win .k{background:var(--accent);color:var(--on-ac)}
.var-r .num{text-align:right}
.lev-r{display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr) 70px;align-items:center;gap:var(--s3);font-size:var(--t2);min-height:30px}
.phone .lev-r{grid-template-columns:minmax(0,110px) minmax(0,1fr) 56px}
.lev-r .num{text-align:right}
.wk12{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.phone .wk12{grid-template-columns:minmax(0,1fr)}
.wk12 .card{padding:var(--s4)}
.wk-r{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s2) 0;border-top:1px solid var(--line);font-size:var(--t2)}
.wk-r:first-of-type{border-top:0}
.wk-r .num{width:44px;flex:none;color:var(--fg3);font-size:var(--t1);padding-top:2px}
.wk-r.now .num{color:var(--ac-ink);font-weight:600}
.offer-prev{border-radius:var(--r);background:var(--sf1);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s2)}
.offer-prev .h2{line-height:1.25}
/* Momentum: score breakdown and the three axes */
.mradar{width:100%;max-width:300px;aspect-ratio:1;display:block;margin:0 auto;overflow:visible}
.mradar .grid{fill:none;stroke:var(--line2)}
.mradar .shape{fill:var(--ac-soft);stroke:var(--accent);stroke-width:2;stroke-linejoin:round}
.mradar text{fill:var(--fg2);font-size:12px}
.mradar circle{fill:var(--accent)}
.axes{display:flex;flex-direction:column;gap:var(--s4)}
/* Settings: two-factor methods */
.mtiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.phone .mtiles{grid-template-columns:minmax(0,1fr)}
.mtiles .card{display:flex;flex-direction:column;gap:var(--s3)}