/* PLUTO v2 — the cockpit's look, PLUTO's life. Tokens and parts follow Portal
   OS cockpit/app/app.css so the two read as one family. Nine colour templates;
   glass cards; motion that the "Small animations" switch and the OS's reduce-
   motion setting turn off. A theme never changes what a status colour means. */

:root, :root[data-theme="nightshade"] {
  --bg:#060409; --b1:#2b1440; --b2:#120a1c; --b3:#4a2a63; --tx:#FBF6EA; --mu:#b9b0c4; --ln:rgba(230,220,255,.08);
  --gl:rgba(20,12,30,.52); --gh:rgba(230,220,255,.14); --gb:rgba(220,200,255,.13); --so:#FBF6EA; --st:#060409; --ac:#C2CCE5; --hi:rgba(240,235,255,.08); --pop:#140c1e;
}
:root[data-theme="crimson-night"] { --bg:#0b0508; --b1:#6e1420; --b2:#2a0f2e; --b3:#a8323a; --tx:#f7eeec; --mu:#cdb3b8; --ln:rgba(255,220,225,.08); --gl:rgba(32,10,20,.5); --gh:rgba(255,215,220,.16); --gb:rgba(255,200,210,.14); --so:#f7eeec; --st:#12060a; --ac:#ff8a6a; --hi:rgba(255,235,238,.08); --pop:#1a0a12; }
:root[data-theme="crimson"] { --bg:#120606; --b1:#8f1a1c; --b2:#3d0a0c; --b3:#c2362a; --tx:#f7eeec; --mu:#d2b0ab; --ln:rgba(255,230,225,.09); --gl:rgba(46,11,13,.46); --gh:rgba(255,215,208,.22); --gb:rgba(255,190,180,.16); --so:#f7eeec; --st:#170808; --ac:#ff7a59; --hi:rgba(255,235,230,.09); --pop:#240c0c; }
:root[data-theme="ember"] { --bg:#0c0704; --b1:#381904; --b2:#1c0d04; --b3:#B15722; --tx:#FBF6EA; --mu:#d1bfa8; --ln:rgba(255,235,210,.08); --gl:rgba(30,16,6,.5); --gh:rgba(255,230,200,.15); --gb:rgba(247,216,161,.14); --so:#FBF6EA; --st:#0c0704; --ac:#F7D8A1; --hi:rgba(255,240,220,.08); --pop:#1e1108; }
:root[data-theme="rosewood"] { --bg:#0d080b; --b1:#4a2433; --b2:#1d1018; --b3:#7B687E; --tx:#FBF6EA; --mu:#cbb8c1; --ln:rgba(255,225,230,.08); --gl:rgba(30,16,24,.5); --gh:rgba(255,220,225,.15); --gb:rgba(241,157,155,.16); --so:#FBF6EA; --st:#0d080b; --ac:#F19D9B; --hi:rgba(255,238,240,.08); --pop:#1e1018; }
:root[data-theme="dusk"] { --bg:#0b0d08; --b1:#5a2410; --b2:#1f2812; --b3:#3d2c14; --tx:#f1ece2; --mu:#bdb5a5; --ln:rgba(241,236,226,.08); --gl:rgba(20,23,13,.48); --gh:rgba(255,226,190,.2); --gb:rgba(255,226,190,.14); --so:#f1ece2; --st:#171a10; --ac:#f08a3c; --hi:rgba(255,240,220,.08); --pop:#171a10; }
:root[data-theme="tide"] { --bg:#0b1630; --b1:#3b7fd0; --b2:#b87a9c; --b3:#1c2f63; --tx:#f1f5fc; --mu:#c6d1e6; --ln:rgba(225,235,255,.10); --gl:rgba(16,28,60,.50); --gh:rgba(255,255,255,.26); --gb:rgba(220,232,255,.20); --so:#f1f5fc; --st:#0b1630; --ac:#8fe3ff; --hi:rgba(235,242,255,.1); --pop:#13234a; }
:root[data-theme="onyx"] { --bg:#0a0b0b; --b1:#2c322f; --b2:#171a19; --b3:#454d49; --tx:#f2f3f0; --mu:#a9aea9; --ln:rgba(255,255,255,.07); --gl:rgba(30,33,32,.52); --gh:rgba(255,255,255,.12); --gb:rgba(255,255,255,.09); --so:#f2f3f0; --st:#0a0b0b; --ac:#e4f03c; --hi:rgba(255,255,255,.08); --pop:#1a1d1c; }
:root[data-theme="fog"] { --bg:#b9bdba; --b1:#eef0ec; --b2:#8ea69b; --b3:#c6ced8; --tx:#121413; --mu:#4c534f; --ln:rgba(18,20,19,.08); --gl:rgba(244,246,243,.52); --gh:rgba(255,255,255,.85); --gb:rgba(255,255,255,.62); --so:#131514; --st:#eef0ec; --ac:#5c6b0f; --hi:rgba(18,20,19,.07); --pop:#eef0ec; color-scheme:light; }
:root { --ok:#8fd6a8; --warn:#ffb057; --bad:#ff7b7b; --r:14px; --font:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif; color-scheme:dark; }
:root[data-theme="fog"] { --ok:#2f7a4c; --warn:#a85d00; --bad:#b3261e; }

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--tx);font-family:var(--font);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased;transition:background-color .7s ease,color .7s ease;overflow:hidden;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--tx) 35%,transparent)}
a:hover{opacity:.85}
a.nolink{text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button[disabled]{cursor:not-allowed}
textarea::placeholder,input::placeholder{color:inherit;opacity:.5}
table{border-collapse:collapse;width:100%}
code{font-family:'DM Mono',ui-monospace,monospace;font-size:.92em;background:var(--hi);padding:1px 5px;border-radius:5px}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#root{height:100%}

/* ── motion ─────────────────────────────────────────────────────────────── */
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes slidein{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
@keyframes slideup{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes breathe{0%,100%{opacity:.35;transform:scale(.78)}50%{opacity:1;transform:scale(1)}}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes toastin{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes fill{from{width:0}}
@keyframes grow{from{transform:scaleY(0)}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes drift1{to{transform:translate(-8%,10%) scale(1.15)}}
@keyframes drift2{to{transform:translate(10%,-8%) scale(.9)}}
.rise{animation:rise .38s cubic-bezier(.2,.7,.2,1) both}
.fadein{animation:fadein .6s ease both}
.stagger>*{animation:rise .4s ease both}
.stagger>*:nth-child(2){animation-delay:45ms}.stagger>*:nth-child(3){animation-delay:90ms}.stagger>*:nth-child(4){animation-delay:135ms}
.stagger>*:nth-child(5){animation-delay:180ms}.stagger>*:nth-child(6){animation-delay:225ms}.stagger>*:nth-child(n+7){animation-delay:270ms}
.slide>*{animation:slidein .45s cubic-bezier(.2,.7,.2,1) both}
.slide>*:nth-child(2){animation-delay:90ms}.slide>*:nth-child(n+3){animation-delay:180ms}
.tap{transition:transform .12s ease,filter .2s ease,background-color .25s ease,border-color .25s ease,opacity .2s}
.tap:hover{filter:brightness(1.1)}
.tap:active{transform:scale(.97)}
html[data-anim="off"] *,html[data-anim="off"] *::before,html[data-anim="off"] *::after{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ── the living background ─────────────────────────────────────────────── */
.scene{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:radial-gradient(70% 60% at 70% 0%,var(--b1),transparent 70%),radial-gradient(60% 70% at 0% 100%,var(--b2),transparent 70%),var(--bg)}
.scene::before,.scene::after{content:"";position:absolute;border-radius:50%;filter:blur(60px);opacity:.55}
.scene::before{left:45%;top:-20%;width:70%;height:75%;background:radial-gradient(closest-side,var(--b1),transparent);animation:drift1 64s ease-in-out infinite alternate}
.scene::after{left:-15%;top:45%;width:60%;height:75%;background:radial-gradient(closest-side,var(--b3),transparent);animation:drift2 80s ease-in-out infinite alternate;opacity:.35}
.scenehost{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease}
.scene.ready .scenehost{opacity:1}
.scenehost canvas{width:100%!important;height:100%!important}
/* The scene is atmosphere: tinted to the theme and dimmed under the glass. */
.scenedim{position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 58%,transparent),color-mix(in srgb,var(--bg) 72%,transparent));mix-blend-mode:normal}
.scene.ready .scenehost{filter:saturate(.85)}

/* ── shell ──────────────────────────────────────────────────────────────── */
.shell{position:relative;z-index:1;display:flex;height:100vh;height:100dvh}
.nav{flex:0 0 228px;display:flex;flex-direction:column;gap:12px;padding:18px 12px 16px;border-right:1px solid var(--ln);background:var(--gl);-webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%);overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;padding:2px 8px 2px}
.brand b{font-size:15px;letter-spacing:.16em}
.brand span{font-family:'DM Mono',ui-monospace,monospace;font-size:10.5px;color:var(--mu)}
.ask-k{display:flex;align-items:center;gap:8px;border:1px solid var(--gb);background:var(--hi);border-radius:999px;padding:7px 12px;color:var(--mu);font-size:12.5px;width:100%}
.ask-k kbd{margin-left:auto;font-family:'DM Mono',monospace;font-size:10.5px;opacity:.8}
.navgroup{display:flex;flex-direction:column;gap:1px}
.navlabel{padding:6px 10px 3px;font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--mu);opacity:.75}
.navitem{display:flex;align-items:center;justify-content:space-between;gap:8px;border-radius:10px;padding:7px 10px;font-size:13.5px;font-weight:500;color:var(--mu);text-decoration:none}
.navitem>span:first-child{display:flex;align-items:center;gap:10px}
.navitem:hover{background:var(--hi)}
.navitem[aria-current="page"]{color:var(--tx);background:var(--hi);font-weight:600;box-shadow:inset 2px 0 0 var(--ac)}
.badge{min-width:19px;height:19px;border-radius:10px;background:var(--ac);color:var(--st);font-size:10.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.navfoot{margin-top:auto;padding-top:10px;border-top:1px solid var(--ln);display:flex;flex-direction:column;gap:1px}
.main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 22px;border-bottom:1px solid var(--ln);min-height:52px}
.crumb{font-weight:600;font-size:13px;letter-spacing:.02em;color:var(--mu);min-width:0}
.brandmini{display:inline-flex;align-items:center;gap:7px;text-decoration:none;letter-spacing:.16em;font-size:14px}
.presence-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--gb);border-radius:999px;padding:5px 11px;font-size:12px;color:var(--mu);text-decoration:none;background:transparent}
.mainrow{flex:1 1 auto;min-height:0;display:flex;overflow:hidden}
.page{container-type:inline-size;flex:1 1 auto;min-width:0;padding:24px 28px 48px;overflow-y:auto;animation:rise .38s cubic-bezier(.2,.7,.2,1) both}
.pagegap{gap:18px;max-width:1180px;margin:0 auto}
.side{flex:0 0 296px;padding:20px 16px 40px;border-left:1px solid var(--ln);display:flex;flex-direction:column;gap:14px;overflow-y:auto}
.talkcard{display:flex;align-items:center;gap:12px;border:1px solid var(--gb);color:var(--tx)}
.phone-only{display:none!important}
.desk-only{display:inline-flex}
.editbanner{display:flex;align-items:center;gap:8px;padding:7px 22px;font-size:12.5px;background:color-mix(in srgb,var(--ac) 14%,var(--bg));border-bottom:1px solid color-mix(in srgb,var(--ac) 35%,transparent)}
.scrim{position:fixed;inset:0;z-index:11;background:rgba(0,0,0,.45);animation:fadein .2s ease both}
.dock{display:none}

/* ── type and parts ─────────────────────────────────────────────────────── */
.h1{margin:0;font-size:24px;font-weight:600;letter-spacing:-.02em}
.h2{font-size:16px;font-weight:600;letter-spacing:-.01em}
.label{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--mu)}
.label .sub,.label .muted{text-transform:none;letter-spacing:0;font-weight:500}
.muted{color:var(--mu)}
.small{font-size:12.5px}.tiny{font-size:11.5px}
.serif{font-family:'Newsreader',Georgia,serif;font-weight:300}
.mono{font-family:'DM Mono',ui-monospace,monospace}
.strike{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--mu) 60%,transparent)}
.ellip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.nowrap{white-space:nowrap}
.okt{color:var(--ok)}.neg{color:var(--bad)}.act{color:var(--ac)}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.between{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.col{display:flex;flex-direction:column;gap:10px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.card{position:relative;background:var(--gl);-webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%);border:1px solid var(--gb);border-radius:var(--r);box-shadow:inset 0 1px 0 var(--gh),0 18px 40px -22px rgba(0,0,0,.55);color:var(--tx)}
section.card,div.card.pad{display:flex;flex-direction:column;gap:12px}
.pad{padding:16px}.padl{padding:22px 24px}
.cardhead{min-height:20px}
.stat{display:flex;flex-direction:column;gap:7px;padding:15px 16px;text-align:left}
button.stat{font:inherit}
.stat b{font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.stat b.unknown{font-size:14px;font-weight:500;color:var(--mu);letter-spacing:0;line-height:1.9}
.fresh{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--mu)}
.chip{font-size:12px;color:var(--mu);border:1px solid var(--gb);border-radius:999px;padding:6px 11px;white-space:nowrap;background:transparent;display:inline-flex;align-items:center;gap:6px}
.chip.on{background:var(--so);color:var(--st);border-color:transparent;font-weight:600}
.chip.on .muted{color:inherit;opacity:.6}
.chipt{font-size:10px;font-weight:600;letter-spacing:.04em;color:var(--ac);border:1px solid color-mix(in srgb,var(--ac) 35%,transparent);border-radius:999px;padding:1px 7px;white-space:nowrap}
.pill{font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap;--c:var(--mu);color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent);border:1px solid color-mix(in srgb,var(--c) 25%,transparent)}
.pill.ok{--c:var(--ok)}.pill.warn{--c:var(--warn)}.pill.bad{--c:var(--bad)}.pill.ac{--c:var(--ac)}
.dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;display:inline-block;background:var(--mu)}
.dot.ok{background:var(--ok)}.dot.warn{background:var(--warn)}.dot.bad{background:var(--bad)}.dot.ac{background:var(--ac)}
.dot.breathe{animation:breathe 2.2s ease-in-out infinite}
.btn{background:var(--so);color:var(--st);border:0;border-radius:999px;padding:10px 18px;font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:7px;justify-content:center;text-decoration:none;white-space:nowrap}
.btn.s{padding:8px 14px;font-size:13px}
.btn.xs{padding:5px 11px;font-size:12px}
.btn.ghost{background:transparent;color:var(--tx);border:1px solid var(--gb);font-weight:500}
.btn[disabled]{opacity:.45;transform:none}
.round{width:36px;height:36px;flex:0 0 auto;border-radius:50%;border:1px solid var(--gb);background:transparent;display:inline-flex;align-items:center;justify-content:center;color:var(--tx);text-decoration:none}
.round.solid{border:0;background:var(--so);color:var(--st)}
.round.live{animation:breathe 1.6s ease-in-out infinite}
.iconbtn{border:0;background:transparent;color:var(--mu);border-radius:8px;padding:4px;display:inline-flex}
.iconbtn:hover{background:var(--hi);color:var(--tx)}
.linkbtn{border:0;background:none;padding:0;color:var(--ac);font-size:12.5px;text-decoration:underline;text-underline-offset:3px}
.linkbtn.muted{color:var(--mu)}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{border-radius:999px;padding:8px 14px;font-size:13px;border:1px solid var(--gb);background:transparent;font-weight:500}
.tab[aria-selected="true"]{background:var(--so);color:var(--st);border-color:transparent;font-weight:600}
.seg{display:inline-flex;border:1px solid var(--gb);border-radius:999px;padding:2px;gap:2px;flex:0 0 auto}
.seg button{border:0;background:transparent;border-radius:999px;padding:5px 11px;font-size:12px;color:var(--mu);font-weight:500}
.seg button[aria-pressed="true"]{background:var(--so);color:var(--st);font-weight:600}
.toggle{width:40px;height:22px;border-radius:999px;padding:3px;display:flex;border:0;background:var(--gb);justify-content:flex-start;transition:background .25s;flex:0 0 auto}
.toggle[aria-checked="true"]{background:var(--ac);justify-content:flex-end}
.toggle i{width:16px;height:16px;border-radius:50%;background:var(--st)}
.bar{height:5px;border-radius:3px;background:var(--hi);overflow:hidden;display:block;flex:1 1 auto}
.bar>span{display:block;height:100%;border-radius:inherit;background:var(--ac);animation:fill .9s cubic-bezier(.2,.7,.2,1) both}
.field{background:var(--hi);border:1px solid var(--ln);border-radius:10px;padding:9px 11px;font-size:13.5px;line-height:1.45;outline:none;min-width:0;width:100%}
.field:focus{border-color:color-mix(in srgb,var(--ac) 55%,transparent)}
.row>.field{width:auto}
textarea.field{resize:vertical}
select.field{appearance:auto}
.field.mini{padding:5px 8px;font-size:12px;width:auto;border-radius:999px}
.numin{display:inline-flex;align-items:center;gap:6px;background:var(--hi);border:1px solid var(--ln);border-radius:10px;padding:0 10px 0 0}
.numin input{width:var(--w,90px);background:transparent;border:0;outline:none;padding:8px 0 8px 10px;font-size:13.5px;text-align:right}
.numin .unit{font-size:11.5px;color:var(--mu)}
.list>*+*{border-top:1px solid var(--ln)}
.li{display:flex;gap:12px;align-items:center;padding:10px 16px;font-size:13.5px}
.empty{padding:14px 16px;font-size:13.5px;color:var(--mu)}
.card.empty{display:block}
.note{font-size:12.5px;color:var(--mu);line-height:1.55}
.warnbox{border:1px solid color-mix(in srgb,var(--warn) 40%,transparent);background:color-mix(in srgb,var(--warn) 8%,transparent);border-radius:11px;padding:10px 12px;font-size:13px}
.warnbox.soft{border-color:var(--gb);background:var(--hi)}
.ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px;font-size:13px}
.picked{border-color:color-mix(in srgb,var(--ac) 55%,transparent)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ac) 35%,transparent),0 18px 40px -22px rgba(0,0,0,.55)}
.src{font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;border-radius:5px;padding:1px 5px;background:var(--hi);color:var(--mu)}
.src.entered{color:var(--ok)}.src.unconfirmed{color:var(--warn)}
.tbl{font-size:13px}
.tbl th{text-align:left;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mu);padding:9px 16px;border-bottom:1px solid var(--ln)}
.tbl td{padding:9px 16px;border-bottom:1px solid var(--ln);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl .n{text-align:right;font-variant-numeric:tabular-nums}
.tblwrap{overflow-x:auto}
.md p{margin:0 0 10px}.md p:last-child{margin-bottom:0}
.md ul,.md ol{margin:0 0 10px;padding-left:20px}.md li{margin:2px 0}
.md h4{margin:12px 0 6px;font-size:14px}
.md a{color:var(--ac)}

/* ── Pluto's presence ──────────────────────────────────────────────────── */
.orbwrap{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto}
.orb{position:relative;display:inline-block;width:var(--o);height:var(--o);border-radius:50%;flex:0 0 auto;
  background:radial-gradient(circle at 35% 30%,#fff 0%,var(--ac) 42%,var(--b3) 100%);box-shadow:0 0 calc(var(--o)*.6) color-mix(in srgb,var(--ac) 35%,transparent);transition:filter .4s,opacity .4s}
.orb i{position:absolute;inset:-35%;border-radius:50%;pointer-events:none}
.orb.idle{animation:orbidle 4.2s ease-in-out infinite}
@keyframes orbidle{0%,100%{transform:scale(.92);box-shadow:0 0 calc(var(--o)*.4) color-mix(in srgb,var(--ac) 25%,transparent)}50%{transform:scale(1);box-shadow:0 0 calc(var(--o)*.9) color-mix(in srgb,var(--ac) 45%,transparent)}}
/* Thinking: the colours turn. */
.orb.think{background:conic-gradient(from 0deg,#C2CCE5,#a78bfa,#5fd4ff,#f7d8a1,#ff8a6a,#C2CCE5);animation:orbspin 1.6s linear infinite,orbhue 3.2s linear infinite}
@keyframes orbspin{to{transform:rotate(360deg)}}
@keyframes orbhue{0%{filter:hue-rotate(0) saturate(1.2)}100%{filter:hue-rotate(360deg) saturate(1.2)}}
/* Listening: rings ripple out. */
.orb.listen{background:radial-gradient(circle at 35% 30%,#fff,#5fd4ff 45%,#1c4f8a)}
.orb.listen i{border:2px solid #5fd4ff;animation:ripple 1.5s ease-out infinite}
@keyframes ripple{from{opacity:.8;transform:scale(.55)}to{opacity:0;transform:scale(1.35)}}
/* Speaking or typing: a pulse with every word. */
.orb.speak{background:radial-gradient(circle at 35% 30%,#fff,#ffd08a 45%,var(--ac))}
.orbwrap.beat .orb{animation:orbbeat .38s cubic-bezier(.2,.8,.2,1)}
@keyframes orbbeat{0%{transform:scale(1)}35%{transform:scale(1.32);box-shadow:0 0 calc(var(--o)*1.4) color-mix(in srgb,#ffd08a 70%,transparent)}100%{transform:scale(1)}}
.orb.sleep{filter:grayscale(.7) brightness(.55);animation:orbidle 7s ease-in-out infinite}
.orblabel{white-space:nowrap}

/* the halo — Pluto himself */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes haloBreathe{0%,100%{transform:scale(.94);opacity:.6}50%{transform:scale(1.04);opacity:.9}}
@keyframes haloBeat{0%{transform:scale(1)}35%{transform:scale(1.17)}100%{transform:scale(1)}}
@keyframes glowBeat{0%{transform:scale(1);opacity:.7}35%{transform:scale(1.28);opacity:1}100%{transform:scale(1);opacity:.7}}
@keyframes haloRipple{from{opacity:.9;transform:scale(.55)}to{opacity:0;transform:scale(1.55)}}
.halo{position:relative;width:var(--f);height:var(--f);flex:0 0 auto;border:0;background:none;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;transition:filter .6s}
.halo-beat{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.halo-glow{position:absolute;inset:-26%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--ac) 50%,transparent),transparent 72%);filter:blur(6px);opacity:.75;animation:haloBreathe 4.6s ease-in-out infinite;transition:background .6s}
.halo-core{position:relative;width:44%;height:44%;border-radius:50%;background:radial-gradient(circle at 34% 30%,#fff 0%,color-mix(in srgb,var(--ac) 75%,white) 22%,var(--ac) 50%,var(--b3) 100%);box-shadow:0 0 calc(var(--f)*.2) color-mix(in srgb,var(--ac) 60%,transparent),inset 0 0 calc(var(--f)*.07) rgba(255,255,255,.35);transition:background .6s}
.halo-shine{position:absolute;left:20%;top:14%;width:32%;height:22%;border-radius:50%;background:rgba(255,255,255,.75);filter:blur(2.5px)}
.halo-ring{position:absolute;inset:6%;border-radius:50%;border:1px solid color-mix(in srgb,var(--ac) 32%,transparent);pointer-events:none;transition:border-color .6s}
.halo-ring.r2{inset:17%;opacity:.7}
.halo-ring.r3{inset:-5%;opacity:.3}
.halo.idle .halo-ring.r1{border-top-color:color-mix(in srgb,var(--ac) 90%,white);animation:spin 9s linear infinite}
.halo.idle .halo-ring.r2{border-bottom-color:color-mix(in srgb,var(--ac) 80%,white);animation:spin 14s linear infinite reverse}
/* thinking: the colours turn */
.halo.think .halo-core{background:conic-gradient(from 0deg,#C2CCE5,#a78bfa,#5fd4ff,#f7d8a1,#ff8a6a,#C2CCE5);animation:spin 1.8s linear infinite,orbhue 3.2s linear infinite}
.halo.think .halo-glow{background:conic-gradient(from 0deg,rgba(167,139,250,.6),rgba(95,212,255,.55),rgba(247,216,161,.55),rgba(255,138,106,.55),rgba(167,139,250,.6));filter:blur(14px);opacity:.85;animation:spin 3s linear infinite}
.halo.think .halo-ring.r1{border-top-color:#a78bfa;border-right-color:#5fd4ff;animation:spin 1.1s linear infinite}
.halo.think .halo-ring.r2{border-bottom-color:#f7d8a1;border-left-color:#ff8a6a;animation:spin 1.7s linear infinite reverse}
/* listening: light ripples out */
.halo.listen .halo-core{background:radial-gradient(circle at 34% 30%,#fff,#a9ecff 26%,#5fd4ff 55%,#1c4f8a)}
.halo.listen .halo-glow{background:radial-gradient(closest-side,rgba(95,212,255,.55),transparent 72%)}
.halo.listen .halo-ring{border-color:rgba(95,212,255,.75);animation:haloRipple 1.8s ease-out infinite}
.halo.listen .halo-ring.r2{animation-delay:.6s}.halo.listen .halo-ring.r3{animation-delay:1.2s}
/* speaking or typing: warm, and a pulse with every word */
.halo.speak .halo-core{background:radial-gradient(circle at 34% 30%,#fff,#ffe7bd 26%,#ffd08a 52%,var(--ac))}
.halo.speak .halo-glow{background:radial-gradient(closest-side,rgba(255,208,138,.6),transparent 72%)}
.halo.speak .halo-ring.r1{border-color:rgba(255,208,138,.55)}
.halo-beat.beat .halo-core{animation:haloBeat .36s cubic-bezier(.2,.8,.2,1)}
.halo-beat.beat .halo-glow{animation:glowBeat .36s cubic-bezier(.2,.8,.2,1)}
.halo.sleep{filter:saturate(.45) brightness(.62)}
.halo.sleep .halo-glow{animation-duration:8s}
/* the same presence, as light behind the glass */
.presenceglow{position:absolute;inset:0;pointer-events:none}
.pg-beat{position:absolute;left:58%;top:34%;width:min(95vw,1150px);aspect-ratio:1;transform:translate(-50%,-50%)}
.pg-beat i{position:absolute;inset:0;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--ac) 20%,transparent),transparent 70%);opacity:.55;animation:haloBreathe 8s ease-in-out infinite;transition:background 1s,opacity 1s}
.presenceglow.think .pg-beat i{background:conic-gradient(from 0deg,rgba(167,139,250,.24),rgba(95,212,255,.18),rgba(247,216,161,.18),rgba(255,138,106,.18),rgba(167,139,250,.24));filter:blur(70px);opacity:.85;animation:spin 9s linear infinite}
.presenceglow.listen .pg-beat i{background:radial-gradient(closest-side,rgba(95,212,255,.2),transparent 70%)}
.presenceglow.speak .pg-beat i{background:radial-gradient(closest-side,rgba(255,208,138,.2),transparent 70%)}
.pg-beat.beat i{animation:glowBeat .42s cubic-bezier(.2,.8,.2,1)}
.presenceglow.sleep .pg-beat i{opacity:.22}
@media (max-width:900px){.pg-beat{left:50%;top:22%;width:150vw}}

/* ── rings, bars, trend, heat ─────────────────────────────────────────── */
.ring{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.ring svg{position:absolute;inset:0}
.ring-bg{stroke:var(--hi)}
.ring-fg{stroke:var(--ac);transition:stroke-dasharray .9s cubic-bezier(.2,.7,.2,1)}
.ring.ok .ring-fg{stroke:var(--ok)}.ring.warn .ring-fg{stroke:var(--warn)}.ring.none .ring-fg{stroke:transparent}
.ring-over{stroke:color-mix(in srgb,var(--warn) 85%,white)}
.ring-in{position:relative;display:flex;flex-direction:column;align-items:center;line-height:1.1}
.ring-in b{font-size:14px;font-weight:600}
.ringbig{font-size:22px!important}
.rings{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.ringcell{display:flex;flex-direction:column;align-items:center;gap:6px;border:0;background:none;padding:4px;border-radius:12px;color:var(--tx)}
.ringcell:hover{background:var(--hi)}
.bars{position:relative;display:flex;align-items:flex-end;gap:4px;width:100%}
.bar-col{flex:1 1 0;height:100%;display:flex;align-items:flex-end}
.bar-col i{display:block;width:100%;border-radius:4px 4px 2px 2px;background:color-mix(in srgb,var(--ac) 55%,transparent);transform-origin:bottom;animation:grow .7s cubic-bezier(.2,.7,.2,1) both}
.bar-col i.met{background:var(--ac)}
.bar-col i.none{background:var(--hi)}
.bar-col.today i{box-shadow:0 0 0 1px var(--tx)}
.bars-target{position:absolute;left:0;right:0;border-top:1px dashed color-mix(in srgb,var(--tx) 40%,transparent);pointer-events:none}
.trend{width:100%;display:block}
.trend-line{stroke:var(--ac);stroke-width:2.2}
.trend-dot{fill:color-mix(in srgb,var(--tx) 55%,transparent)}
.heat{display:grid;grid-template-columns:repeat(30,minmax(0,1fr));gap:3px;flex:1}
.heat i{aspect-ratio:1;border-radius:3px;background:var(--ac)}
.heat i.none{background:var(--hi);opacity:1!important}
.heatrow{display:grid;grid-template-columns:70px 1fr 44px;align-items:center;gap:10px}

/* ── Today ─────────────────────────────────────────────────────────────── */
.hero{display:flex;align-items:center;gap:18px}
.north{border-color:color-mix(in srgb,var(--ac) 30%,var(--gb))}
.northrow{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center}
.northbar{display:flex;flex-direction:column;gap:6px;min-width:0}
.northbig{font-size:30px;font-weight:600;letter-spacing:-.02em;line-height:1}
.northbig small{font-size:13px;font-weight:500;color:var(--mu);letter-spacing:0}
.northmid{font-size:19px;font-weight:600;letter-spacing:-.01em}
.planstrip{display:flex;flex-direction:column;gap:8px;text-align:left;border:1px solid var(--gb)}
.needcard{padding:12px 16px;gap:14px;flex-wrap:wrap}
.capture{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 16px}
.capture textarea{flex:1 1 auto;background:none;border:0;outline:none;resize:none;font-size:14px;padding:6px 0;min-width:0}
.quote{padding:20px 22px;display:flex;flex-direction:column;gap:10px;text-align:left}
.quote .t{font-size:21px;line-height:1.35}
.habit{display:flex;align-items:center;gap:12px;padding:9px 16px;width:100%;border:0;background:transparent;text-align:left;font-size:13.5px;color:var(--tx)}
.check{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--gb);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;transition:background .25s,border-color .25s}
.habit[aria-checked="true"] .check{background:var(--ok);border-color:var(--ok);color:#0b1a10}
.habit[aria-checked="true"] .hn{color:var(--mu)}
.streak{margin-left:auto;font-family:'DM Mono',monospace;font-size:11px;color:var(--mu)}

/* ── Body ──────────────────────────────────────────────────────────────── */
.macros{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:end}
.macro{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.waterrow{display:flex;align-items:center;gap:18px}
.glass{position:relative;width:64px;height:96px;border:2px solid var(--gb);border-top:0;border-radius:4px 4px 14px 14px;overflow:hidden;background:var(--hi);flex:0 0 auto}
.glass i{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,color-mix(in srgb,#5fd4ff 70%,var(--ac)),color-mix(in srgb,#2b7bd0 80%,var(--b3)));transition:height .8s cubic-bezier(.2,.7,.2,1)}

/* ── Focus ─────────────────────────────────────────────────────────────── */
.focusgrid{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.focuslive{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--ac) 12%,transparent);border:1px solid color-mix(in srgb,var(--ac) 35%,transparent);flex-wrap:wrap}
.focuslive.compact{padding:10px 12px}
.focusclock{font-size:24px;letter-spacing:.02em}
.focuslive.compact .focusclock{font-size:18px}
.studytopic{font-size:22px;line-height:1.3}

/* ── Mind ──────────────────────────────────────────────────────────────── */
.q{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.scale{display:inline-flex;gap:4px}
.scale button{width:32px;height:32px;border-radius:9px;border:1px solid var(--gb);background:transparent;font-size:13px}
.scale button.on{background:var(--so);color:var(--st);border-color:transparent;font-weight:600}
details.more summary{cursor:pointer}
.entry{border:0}
.entry summary{display:flex;align-items:center;gap:10px;padding:10px 0;cursor:pointer;list-style:none}
.entry summary::-webkit-details-marker{display:none}
.entryhead{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.entrybody{padding:0 0 12px;font-size:14px;line-height:1.6}
.entrybody p{margin:0 0 8px}
.thought{padding:12px 14px;border-radius:12px;background:var(--hi);border:1px solid var(--ln);display:flex;flex-direction:column;gap:8px;font-size:14px}
.thought.pinned{border-color:color-mix(in srgb,var(--ac) 45%,transparent)}
.thought.done{opacity:.55}

/* ── Habits ────────────────────────────────────────────────────────────── */
.habitrow{display:flex;gap:14px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--ln)}
.habitrow:last-of-type{border-bottom:0}
.tick{width:38px;height:38px;border-radius:12px;border:1.5px solid var(--gb);background:transparent;display:inline-flex;align-items:center;justify-content:center;color:transparent;flex:0 0 auto}
.tick.sm{width:26px;height:26px;border-radius:8px}
.tick.on{background:var(--ok);border-color:var(--ok);color:#0b1a10}
.dots14{display:flex;gap:4px}
.dots14 i{width:13px;height:13px;border-radius:4px;background:var(--hi);border:1px solid var(--ln)}
.dots14 i.on{background:var(--ok);border-color:transparent}
.dots14 i.today{outline:1px solid var(--tx);outline-offset:1px}
.weekbars{display:flex;gap:8px;height:84px;align-items:flex-end;padding-bottom:16px}
.wk{position:relative;flex:1;height:100%;display:flex;align-items:flex-end;justify-content:center}
.wk .sl{display:block;width:70%;border-radius:4px 4px 2px 2px;background:color-mix(in srgb,var(--ac) 65%,transparent);transform-origin:bottom;animation:grow .7s ease both}
.wk .sl.over{background:var(--bad)}
.wk .lim{position:absolute;left:4%;right:4%;border-top:2px dashed color-mix(in srgb,var(--warn) 70%,transparent)}
.wk small{position:absolute;bottom:-16px;font-size:10px;color:var(--mu)}
.planbox{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;font-size:13px}
.planbox>div{background:var(--hi);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:4px}

/* ── Goals ─────────────────────────────────────────────────────────────── */
.moverow{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--ln)}
.movenum{font-family:'Newsreader',Georgia,serif;font-size:22px;color:var(--ac);width:16px;text-align:center}
.goalnode{margin-left:calc(var(--d) * 22px);border-left:1px solid var(--ln);padding-left:12px}
.goalnode:not([style*="--d:0"]){border-left-color:color-mix(in srgb,var(--ac) 30%,transparent)}
.goalrow{display:flex;align-items:center;gap:12px;padding:10px 0}

/* ── Bets ──────────────────────────────────────────────────────────────── */
.betf{gap:3px;flex:1 1 110px}
.tail{display:flex;flex-direction:column;gap:6px}
.tailrow{display:grid;grid-template-columns:minmax(0,1.3fr) 2fr 70px 40px;align-items:center;gap:10px}
.tailname{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tailbar{height:10px;background:var(--hi);border-radius:5px;overflow:hidden}
.tailbar i{display:block;height:100%;border-radius:5px;background:color-mix(in srgb,var(--ac) 45%,transparent);animation:fill .9s ease both}
.tailbar i.top{background:var(--ac)}
.pattern{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;background:var(--hi);border-radius:12px}
.catrow{display:grid;grid-template-columns:minmax(80px,1fr) 2fr auto;gap:12px;align-items:center}

/* ── Plan, Calendar, Brain, Feeds ──────────────────────────────────────── */
.planhero{display:flex;flex-direction:column;gap:6px}
.d-big{font-size:54px;font-weight:600;letter-spacing:-.03em;line-height:1}
.d-big small{font-size:16px;color:var(--mu);font-weight:500}
.calwrap{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:14px;align-items:start}
.caldow{display:grid;grid-template-columns:repeat(7,1fr);font-size:10.5px;color:var(--mu);letter-spacing:.06em;text-transform:uppercase;padding-bottom:6px}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.calday{min-height:78px;border:1px solid var(--ln);border-radius:10px;background:transparent;padding:5px;display:flex;flex-direction:column;gap:3px;align-items:stretch;text-align:left;overflow:hidden;color:var(--tx)}
.calday.out{opacity:.35}
.calday.today{border-color:color-mix(in srgb,var(--ac) 60%,transparent)}
.calday.sel{background:var(--hi);box-shadow:inset 0 0 0 1px var(--ac)}
.calday .n{font-size:12px;font-weight:600}
.calchip{font-size:10px;border-radius:5px;padding:1px 5px;background:color-mix(in srgb,var(--ac) 18%,transparent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calchip.work{background:color-mix(in srgb,#5fd4ff 20%,transparent)}.calchip.money{background:color-mix(in srgb,var(--ok) 22%,transparent)}
.calchip.body{background:color-mix(in srgb,var(--warn) 22%,transparent)}.calchip.spirit{background:color-mix(in srgb,#a78bfa 25%,transparent)}
.brainwrap{height:min(62vh,560px);overflow:hidden;padding:0}
canvas.brain{width:100%;height:100%;display:block;cursor:grab;touch-action:none}
.layerrow{display:flex;justify-content:space-between;gap:10px;align-items:center;width:100%;border:1px solid var(--ln);background:transparent;border-radius:10px;padding:9px 12px;color:var(--tx)}
.layerdetail{padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.brief summary{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;cursor:pointer;list-style:none}
.brief summary::-webkit-details-marker{display:none}
.briefhl{display:flex;flex-direction:column;font-weight:500}
.briefbody{padding:0 16px 16px;display:flex;flex-direction:column;gap:12px;font-size:14px;line-height:1.6}
.verdict .chip{padding:3px 9px;font-size:11px}
.themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.themecard{display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;border:1px solid var(--gb);border-radius:12px;background:var(--hi);padding:10px 12px;color:var(--tx)}
.swatch{display:flex;width:100%;height:22px;border-radius:7px;overflow:hidden}
.swatch i{flex:1}
.agentcard{border:1px solid var(--gb)}

/* ── Pluto: chat + canvas ─────────────────────────────────────────────── */
.plutopage{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;height:100%;max-width:1500px;margin:0 auto}
.plutopage.withcanvas{grid-template-columns:minmax(0,1fr) minmax(380px,1.1fr)}
.chatcol{min-width:0;min-height:0;gap:12px;max-width:820px;width:100%;margin:0 auto}
.chathead{display:flex;align-items:center;gap:16px}
.thread{display:flex;flex-direction:column;gap:14px;padding:6px 0}
.thread.compact{gap:10px;max-height:52vh;overflow-y:auto}
.thread .me{align-self:flex-end;max-width:82%;background:var(--so);color:var(--st);border-radius:16px 16px 4px 16px;padding:10px 14px;font-size:14px;white-space:pre-wrap;animation:rise .3s ease both}
.thread .him{align-self:flex-start;max-width:92%;font-size:14.5px;line-height:1.6;animation:rise .3s ease both;display:flex;flex-direction:column;gap:6px}
.thread .him.bad{color:var(--bad)}
.himlabel{letter-spacing:.04em}
.shimmer{background:linear-gradient(90deg,var(--mu) 0%,var(--tx) 50%,var(--mu) 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 2.4s linear infinite}
.welcome{padding:18px 4px}
.composer{display:flex;align-items:flex-end;gap:8px;padding:8px 8px 8px 16px;position:sticky;bottom:0}
.composer textarea{flex:1 1 auto;background:none;border:0;outline:none;resize:none;font-size:14.5px;padding:8px 0;min-width:0;max-height:180px}
.askbar{display:flex;align-items:flex-end;gap:8px;padding:6px 6px 6px 14px}
.askbar textarea,.askbar input{flex:1;background:none;border:0;outline:none;resize:none;padding:8px 0;font-size:14px}
.cmdrow{padding:0 2px}
.sessrow{width:100%;border:0;background:none;color:var(--tx)}
.canvas{display:flex;flex-direction:column;gap:10px;min-height:0;padding:14px;border:1px solid var(--gb);border-radius:var(--r);background:var(--gl);-webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px);animation:rise .35s ease both;overflow:hidden;max-height:calc(100dvh - 140px);position:sticky;top:0}
.canvas.closed{padding:14px;align-self:start}
.canvasbar{flex-wrap:nowrap}
.stage{flex:1 1 auto;min-height:340px;background:#fff;border-radius:10px;overflow:auto;display:flex;justify-content:center}
.stage iframe{border:0;height:100%;min-height:340px;background:#fff}
.codeedit{flex:1 1 auto;min-height:340px;width:100%;resize:none;background:var(--hi);border:1px solid var(--ln);border-radius:10px;padding:12px;font-size:12px;line-height:1.5;color:var(--tx);outline:none}

/* ── sheet, command bar, toasts, edit mode ────────────────────────────── */
.overlay{position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px;animation:fadein .2s ease both}
.sheet{width:min(560px,100%);max-height:86dvh;display:flex;flex-direction:column;border-radius:18px;border:1px solid var(--gb);background:var(--pop);box-shadow:0 30px 60px -20px rgba(0,0,0,.7);animation:rise .3s cubic-bezier(.2,.7,.2,1) both}
.sheet.wide{width:min(820px,100%)}
.sheethead{padding:14px 16px 10px;border-bottom:1px solid var(--ln);flex-wrap:nowrap}
.sheetbody{padding:16px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px 8px;border-radius:14px;border:1px solid var(--gb);background:var(--hi);font-size:12.5px;font-weight:500;color:var(--tx)}
.cmd{width:min(620px,100%);border-radius:16px;border:1px solid var(--gb);background:var(--pop);box-shadow:0 24px 50px -20px rgba(0,0,0,.6);overflow:hidden;animation:rise .25s ease both}
.cmdin{padding:14px 16px;border-bottom:1px solid var(--ln);flex-wrap:nowrap}
.cmdin input{flex:1 1 auto;background:none;border:0;outline:none;font-size:16px;min-width:0}
.cmdlist{gap:0;padding:6px;max-height:52vh;overflow-y:auto}
.cmdopt{display:flex;align-items:center;gap:10px;border:0;border-radius:9px;padding:9px 12px;text-align:left;background:transparent;color:var(--tx)}
.cmdopt[aria-selected="true"]{background:var(--hi)}
.toasts{position:fixed;top:14px;right:14px;z-index:40;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:13.5px;animation:toastin .35s ease both;background:var(--pop)}
.toast.bad{border-color:color-mix(in srgb,var(--bad) 50%,transparent)}
.editing .card.editable{outline:1.5px dashed color-mix(in srgb,var(--ac) 55%,transparent);outline-offset:3px}
.editchip{position:absolute;top:-11px;right:12px;z-index:3;display:inline-flex;align-items:center;gap:5px;border:0;border-radius:999px;padding:4px 10px;font-size:11.5px;font-weight:600;background:var(--ac);color:var(--st);box-shadow:0 6px 16px -6px rgba(0,0,0,.6);animation:rise .25s ease both}
.where{display:flex;align-items:center;gap:10px;font-size:12.5px}
.where code{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gate{position:relative;z-index:2;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:20px}

/* ── laptop widths ────────────────────────────────────────────────────── */
@media (max-width:1320px){.side{display:none}}
@container (max-width:760px){.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}.macros{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1100px){.plutopage,.plutopage.withcanvas{grid-template-columns:minmax(0,1fr)}.canvas.closed{display:none}.calwrap{grid-template-columns:1fr}}

/* ── phone ────────────────────────────────────────────────────────────── */
@media (max-width:900px){
  /* The document scrolls on a phone (not the body box): momentum, the collapsing address bar, tap-to-top all work. */
  html,body,#root{height:auto;min-height:100%}
  body{overflow:visible}
  .shell{display:block;height:auto;min-height:100dvh}
  .nav{position:fixed;inset:0 auto 0 0;width:min(280px,84vw);z-index:12;transform:translateX(-102%);transition:transform .3s cubic-bezier(.2,.7,.2,1);background:var(--pop)}
  .nav.open{transform:none}
  .main{overflow:visible;display:block}
  .topbar{position:sticky;top:0;z-index:5;padding:10px 14px;padding-top:max(10px,env(safe-area-inset-top));background:color-mix(in srgb,var(--bg) 70%,transparent);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
  .phone-only{display:inline-flex!important}
  .desk-only{display:none!important}
  .desk-cell{display:none}
  .mainrow{display:block;overflow:visible}
  .page{padding:16px 16px calc(96px + env(safe-area-inset-bottom));overflow:visible;animation:none}
  .pagegap{gap:14px}
  .h1{font-size:22px}
  .grid3,.grid2{grid-template-columns:minmax(0,1fr)}
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .stat{padding:13px 14px}
  .stat b{font-size:22px}
  .rings{grid-template-columns:repeat(5,minmax(0,1fr));gap:2px}
  .rings .ring{width:56px!important;height:56px!important}
  .rings .ring svg{width:56px;height:56px}
  .northrow{grid-template-columns:1fr 1fr;gap:10px}
  .northbar{grid-column:1 / -1;order:3}
  .northbig{font-size:26px}
  .hero{gap:12px}
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .macros{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tailrow{grid-template-columns:minmax(0,1fr) 1.2fr 60px}
  .tailrow>span:last-child{display:none}
  .heatrow{grid-template-columns:54px 1fr 36px;gap:6px}
  .heat{gap:2px}
  .calday{min-height:50px;padding:3px}
  .calchip{display:none}
  .calday.has::after{content:""}
  .plutopage{display:flex;flex-direction:column}
  .chathead .h1{font-size:20px}
  .composer{bottom:calc(74px + env(safe-area-inset-bottom));z-index:4;background:var(--pop)}
  .canvas{max-height:none;position:relative}
  .stage,.stage iframe{min-height:420px}
  .side{display:none}
  .editbanner{padding:7px 14px}
  .overlay.sheetwrap{align-items:flex-end;padding:0}
  .sheet{width:100%;border-radius:20px 20px 0 0;max-height:88dvh;animation:slideup .32s cubic-bezier(.2,.7,.2,1) both;padding-bottom:env(safe-area-inset-bottom)}
  .toasts{left:14px;right:14px;top:calc(60px + env(safe-area-inset-top))}
  .dock{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:10;justify-content:space-around;align-items:center;padding:8px 6px calc(8px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--pop) 88%,transparent);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);border-top:1px solid var(--ln)}
  .dockitem{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;color:var(--mu);text-decoration:none;min-width:58px;padding:4px 0}
  .dockitem[aria-current="page"]{color:var(--tx)}
  .dockplus{width:54px;height:54px;border-radius:50%;border:0;background:var(--so);color:var(--st);display:flex;align-items:center;justify-content:center;margin-top:-22px;box-shadow:0 10px 24px -8px rgba(0,0,0,.6),0 0 0 4px var(--bg)}
}
@media (max-width:420px){.grid4{gap:8px}.stat b{font-size:20px}.tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.tile{padding:12px 4px}}