/* THE TYPE IS SERVED BY THIS NODE (CEO, 23 Sep 2026: "address the delay that is throughout this
   website"). It used to come from fonts.googleapis.com — a render-blocking stylesheet on a third
   party, then the font itself from a second third party, then a reflow as the type swapped in. Two
   files now, same-origin, 30 KB for all four weights, because Figtree is a variable font. */
@font-face{font-family:Figtree;font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/figtree-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Figtree;font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/figtree-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Ask 3.0 — the painter's stylesheet. Tokens, the interaction standard, the composer form.
   Paint only: nothing here decides anything. */
:root,.ask{
  --sans:"Google Sans Flex","Google Sans","Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,Menlo,SFMono-Regular,monospace;
  --page:#f6f7f9; --card:#fff; --border:#e3e6ea; --border2:#d2d7de; --text:#1f1f1f; --text2:#5e6470; --text3:#8a919c;
  --gbg:#F0F4F9; --gbg2:#E9EEF6; --hover:#e6e8eb; --press:#c9ccd2;
  --blue:#2589ff; --blue-soft:#eaf3ff; --green:#1e8e3e; --amber:#b26a00; --red:#c5221f;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]),.ask:not([data-theme="light"]){
  --page:#0f1116; --card:#171a21; --border:#262b36; --border2:#333a48; --text:#e8eaee; --text2:#a7adb9; --text3:#7d8493;
  --gbg:#1e222b; --gbg2:#262b36; --hover:#2a303c; --press:#3a4252; --blue-soft:#17263a;
}}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--page);color:var(--text);font:14.5px/1.5 var(--sans)}
.ask{position:relative;height:100%;display:grid;grid-template-rows:auto 1fr auto;background:var(--card);overflow:hidden}
/* the interaction standard: hover = light-grey rounded fill · press = darker · release = light · leave = gone */
.ib{width:34px;height:34px;border:0;background:transparent;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--text2);cursor:pointer;padding:0;font:inherit;transition:background-color .15s ease,color .15s ease,transform .08s ease}
.ib:active,.chip:active,.send:active,.pill:active,.dlink:active{transform:scale(.93)}
.ib:hover{background:var(--hover)}.ib:active{background:var(--press)}
.ib:disabled{opacity:.35;cursor:default}.ib:disabled:hover{background:transparent}
.ib svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;background:var(--gbg);color:var(--text);font-size:12.5px;border:0;font-family:inherit;cursor:default;transition:background-color .15s ease,transform .08s ease}
.chip:hover{background:var(--hover)}.chip:active{background:var(--press)}
.chip.mini{height:26px;font-size:12px;padding:0 10px}
/* rail + header */
.rail{position:absolute;left:0;top:0;bottom:0;width:46px;display:flex;flex-direction:column;align-items:center;padding:10px 0 12px;gap:4px;border-right:1px solid var(--border);background:var(--card);z-index:4}
.rail .bottom{margin-top:auto}
/* the drawer's tab rides on its right edge (so it is always there); the canvas tab on the right edge, lower */
.ltab{position:absolute;right:-12px;top:118px;width:12px;height:56px;border:1px solid var(--border);border-left:0;border-radius:0 8px 8px 0;background:var(--gbg2);display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--text3);cursor:grab;z-index:2;touch-action:none;user-select:none;transition:background-color .15s ease}.ltab:hover{background:var(--hover)}.drawer.dragging .ltab{cursor:grabbing}
.rtab{position:absolute;right:0;top:236px;width:12px;height:56px;border:1px solid var(--border);border-right:0;border-radius:8px 0 0 8px;background:var(--gbg2);display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--text3);cursor:pointer;z-index:5;user-select:none;transition:background-color .15s ease,right .38s cubic-bezier(.22,1,.36,1)}.rtab:hover{background:var(--hover)}
.ask.with-canvas>.rtab{right:calc(100% - var(--split))}
.ask>.head,.ask>.thread,.ask>.composer{margin-left:46px}
.head{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border)}
.brand{font-weight:700;font-size:15px;letter-spacing:-.01em;margin-right:4px;cursor:default;border-radius:8px;padding:2px 8px;margin-left:-8px}
.brand:hover{background:var(--hover)}.brand:active{background:var(--press)}
.brand small{font:500 10.5px var(--mono);color:var(--text3);vertical-align:1px;margin-left:4px}
.spacer{flex:1}
/* the drawer */
.drawer{--w:300px;position:absolute;left:46px;top:0;bottom:0;width:var(--w);background:var(--card);border-right:1px solid var(--border);box-shadow:none;padding:12px;display:flex;flex-direction:column;z-index:3;transform:translateX(calc(-1 * var(--w)));transition:transform .38s cubic-bezier(.22,1,.36,1),box-shadow .38s ease;will-change:transform}
.drawer.open{transform:translateX(0);box-shadow:10px 0 30px rgba(0,0,0,.08)}
.drawer.dragging{transition:none;box-shadow:10px 0 30px rgba(0,0,0,.08)}
.drawer>*:not(.ltab){opacity:0;transition:opacity .2s ease}.drawer.open>*:not(.ltab),.drawer.dragging>*:not(.ltab){opacity:1}
@media (prefers-reduced-motion:reduce){.drawer{transition:none}}
.drawer .list{flex:1;overflow:auto;margin-top:8px}
.drawer .row{padding:8px 10px;border-radius:9px;font-size:13.5px;cursor:pointer}
.drawer .row:hover{background:var(--hover)}.drawer .row.on{background:var(--gbg)}
.drawer .row small{display:block;color:var(--text3);font-size:11.5px}
/* thread */
.thread{overflow:auto;padding:22px 26px;display:flex;flex-direction:column;gap:18px}
.thread.center{justify-content:center;align-items:center;text-align:center}
.greet{font-size:30px;letter-spacing:-.02em;font-weight:500}
.me{align-self:flex-end;max-width:70%;background:var(--gbg2);border-radius:20px 20px 6px 20px;padding:11px 16px;white-space:pre-wrap;overflow-wrap:anywhere}
.ai{align-self:flex-start;max-width:82%;font-size:14.5px;min-width:200px}
.ai .who{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text3);margin-bottom:6px}
.ai .glyph{width:18px;height:18px;border-radius:5px;background:var(--glyph,url(/icons/ask_transparent_icon.png)) center/contain no-repeat}
.ai .body p{margin:6px 0}.ai .body ul,.ai .body ol{margin:6px 0 6px 18px;padding:0}
.ai .body code{font:12.5px var(--mono);background:var(--gbg);border-radius:5px;padding:1px 5px}
.ai .body pre{background:var(--gbg);border-radius:10px;padding:10px 12px;overflow:auto;font:12.5px/1.5 var(--mono)}
.ai .body pre code{background:transparent;padding:0}
.ai .body table{border-collapse:collapse;font-size:13px;margin:8px 0}.ai .body th,.ai .body td{padding:5px 10px;border-bottom:1px solid var(--border);text-align:left}.ai .body th{background:var(--gbg)}
.ai .foot{font-size:11.5px;color:var(--text3);margin-top:6px}
.ai .err{color:var(--red);font-size:13px}
/* the processing row: the dots animate (CEO 21 Sep); a web hand shows a turning globe */
.proc{display:flex;align-items:center;gap:10px;font-size:14px;margin-top:2px}
.proc .pd{color:var(--blue);font-weight:700;letter-spacing:2px;text-shadow:0 0 1px #fff,0 0 5px rgba(37,137,255,.35)}
.proc .pd i{display:inline-block;font-style:normal;animation:askdots 1.2s infinite ease-in-out}
.proc .pd i:nth-child(2){animation-delay:.15s}.proc .pd i:nth-child(3){animation-delay:.3s}
@keyframes askdots{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}
.proc .globe{width:16px;height:16px;color:var(--blue);animation:askglobe 2.4s linear infinite}
.proc .globe svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}
@keyframes askglobe{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.proc .pd i,.proc .globe{animation:none}}
.proc .mod{font:12px var(--mono);color:var(--text2);background:var(--gbg);border-radius:6px;padding:1px 7px}
.proc .meta{font:11.5px var(--mono);color:var(--text3)}
.proc .stop{margin-left:4px;font-size:11.5px;color:var(--text3)}
.steps{margin:6px 0 0 22px;font:11.5px/1.7 var(--mono);color:var(--text2)}
/* composer */
.composer{padding:10px 20px 14px}
.box{background:var(--gbg);border-radius:28px;display:flex;align-items:flex-end;gap:4px;padding:6px 8px 6px 10px;min-height:52px}
/* bottom-aligned for a grown composer, nudged to the line's centre for a short one (measured) */
.box>.ib,.box .voice .ib{margin-bottom:3px}
/* the height is set a whole row at a time by grow(); max-height follows MAX_ROWS (10 rows) */
.box textarea{flex:1;border:0;background:transparent;resize:none;font:15px/21px var(--sans);color:var(--text);padding:9px 6px;min-height:39px;max-height:228px;outline:none;transition:height .09s ease}
.box textarea::placeholder{color:transparent}
.voice{display:inline-flex;gap:0;margin:0 2px 2px}
/* a node with no voice draws no voice buttons — and `hidden` alone cannot say that against a class
   that sets display, so it is said here (found 22 Sep: the buttons stayed on a voiceless node and a
   hold on the mic asked a route that answers 404). */
.voice[hidden]{display:none}
.voice .ib{width:32px;height:32px}
.send{width:36px;height:36px;border-radius:50%;background:var(--gbg2);color:var(--text3);display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;margin-bottom:2px;font:inherit;transition:background-color .15s ease,color .15s ease,transform .08s ease}
.send.ready{background:var(--blue);color:#fff}.send.busy{background:var(--blue);color:#fff}
.send svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.send:hover{background:var(--hover)}.send.ready:hover,.send.busy:hover{background:var(--blue);filter:brightness(.94)}
.hint{font-size:11px;color:var(--text3);text-align:center;margin-top:8px}
.note{font-size:12.5px;color:var(--text2);text-align:center;margin-top:8px}
.psec .note{text-align:left;margin-top:0}
/* ── Phase 1 ── */
.brand{border:0;background:transparent;font-family:inherit;color:inherit;cursor:pointer}
.chip.mini[hidden]{display:none}
.lockchip{width:30px;padding:0;justify-content:center;cursor:pointer}.lockchip svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8}
/* menus */
/* a menu is bounded by the surface on BOTH axes: the width is fixed before it is placed and the
   height is capped to the room there is, so a long held menu scrolls inside itself rather than
   running off the bottom (CEO, 22 Sep 2026, on the right margin — the same fault vertically). */
/* A row the person made carries a pencil and an x, under the cursor only — visible affordances on
   every row would turn a menu into a control panel. */
.mrow{position:relative}
.mown{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:none;gap:2px}
.mrow:hover .mown,.mrow:focus-within .mown{display:flex}
.mrow:has(.mown):hover .mk,.mrow:has(.mown):focus-within .mk{opacity:0}
.mown button{width:24px;height:24px;border-radius:7px;opacity:.6}
.mown button:hover{opacity:1;background:var(--gbg2)}
.rcode{font:600 18px/1.5 var(--mono);letter-spacing:.14em;padding:10px 14px;margin:8px 0;border-radius:10px;background:var(--gbg2);user-select:all;word-break:break-all}
.pfind{margin:2px 0 8px;font-size:13px}
.prow{position:relative}
.rown{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:none}
.prow:hover .rown,.prow:focus-within .rown{display:flex}
.plong.over{outline:2px dashed var(--accent);outline-offset:2px}
/* the slash is drawn, not a second glyph to keep in step — and it is the glyph's own colour,
   because red on this surface means a check that failed. */
.voice .muted{position:relative;opacity:.55}
.voice .muted::after{content:"";position:absolute;left:50%;top:50%;width:20px;height:1.6px;background:currentColor;transform:translate(-50%,-50%) rotate(-45deg);border-radius:1px}
/* the panel beside the menu: minimal, framed, scrolls, and ends in a choice */
.vsheet{position:absolute;z-index:24;width:min(300px,calc(100% - 32px));max-height:min(420px,70vh);display:flex;flex-direction:column;gap:6px;background:var(--card);border:1px solid var(--border2);border-radius:12px;box-shadow:0 14px 44px rgba(0,0,0,.16);padding:8px}
.vlist{overflow:auto;overscroll-behavior:contain;max-height:240px}
.vctl{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:4px 2px}
.vlab{font-size:12px;color:var(--text3);margin-right:2px}
.vctl .pill{padding:3px 10px;font-size:12px}
.vctl .pill.on{background:var(--gbg2);color:var(--text)}
/* Get Ask: a page, with a way back at the top left where every page keeps one. */
.getapp{position:absolute;inset:0;z-index:26;background:var(--bg);overflow:auto;display:flex;flex-direction:column}
.gahead{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border)}
.gabody{max-width:680px;width:100%;margin:0 auto;padding:28px 20px 60px;display:flex;flex-direction:column;gap:14px}
.galead{color:var(--text2);font-size:14.5px;line-height:1.6;margin-bottom:6px}
.gacard{display:flex;align-items:center;gap:16px;padding:18px;border:1px solid var(--border);border-radius:16px;background:var(--card)}
.gamark{width:56px;height:56px;border-radius:14px;overflow:hidden;flex:0 0 auto}
.gamark img{width:100%;height:100%;display:block}
.gatext{flex:1;min-width:0}
.ganame{font:600 15.5px var(--sans);color:var(--text)}
.gadesc{color:var(--text3);font-size:13px;line-height:1.5;margin-top:3px}
.gaact{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:0 0 auto}
.gaact .pill{text-decoration:none;white-space:nowrap}
.gaqr img{width:84px;height:84px;border-radius:8px;display:block}
@media (max-width:560px){.gacard{flex-direction:column;align-items:flex-start}.gaact{align-items:flex-start}}
.pedit{width:100%;display:flex;flex-direction:column;gap:6px;margin-top:8px}
/* a binding sits in a box you can press; green means free, red names what already has it */
.krow{display:flex;align-items:center;gap:10px}
.krow>span:first-child{flex:1;min-width:0}
.krow b{font-weight:600;font-size:13.5px;display:block}
.krow small{color:var(--text3);font-size:11.5px;display:block;margin-top:1px}
.kbox{min-width:104px;padding:6px 12px;border:1px solid var(--border2);border-radius:9px;background:var(--card);font:500 12.5px var(--mono);color:var(--text);white-space:nowrap}
.kbox:hover:not(.fixed){border-color:var(--accent)}
.kbox.fixed{opacity:.5;font-style:normal}
.kbox.listening{border-color:var(--accent);color:var(--text3);font-style:italic}
.kstate{display:flex;align-items:center;gap:5px;min-width:112px;font-size:11.5px;color:var(--text3)}
.kok{color:#1a9e57;font-weight:700}
.kbad{color:#c8322b;font-weight:700}
.kretry{border:0;background:none;color:var(--text3);font-size:13px;padding:0 2px}
.kretry:hover{color:var(--text)}
.lhslot{border:1px solid var(--border);border-radius:14px;padding:14px;margin:10px 0;display:flex;flex-direction:column;gap:8px}
.lhhead b{font-weight:600;font-size:14px;display:block}
.lhhead small{color:var(--text3);font-size:11.5px}
.lhdrop{border:1.5px dashed var(--border2);border-radius:11px;padding:18px 14px;text-align:center;color:var(--text3);font-size:13px;cursor:default}
.lhdrop:hover,.lhdrop.over{border-color:var(--accent);color:var(--text2)}
.lhdrop.has{border-style:solid;color:var(--text);font:500 13px var(--mono)}
.lhdrop.busy{opacity:.6}
/* a mode's mark, drawn apart from its name so it can be sized. AFP's is half again as big (CEO,
   23 Sep 2026) — the atom has more inside it than a bolt or a bulb and reads smaller at the same
   point size. */
.mico{font-style:normal;display:inline-block;margin-right:7px;line-height:1;vertical-align:-1px}
.mico.big{font-size:1.5em;vertical-align:-3px;margin-right:6px}
.picon{max-width:66px;text-align:center;font-size:17px}
.menu{position:absolute;z-index:20;min-width:220px;max-width:380px;background:var(--card);border:1px solid var(--border2);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.14);padding:6px;font-size:13.5px;overflow:auto;overscroll-behavior:contain}
.mtitle{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--text3);padding:6px 10px 4px}
.mcap{font-size:12px;line-height:1.4;color:var(--text2);padding:0 10px 7px;max-width:330px}
.msep{height:1px;background:var(--border);margin:6px 4px}
.mrow{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:0;background:transparent;border-radius:8px;padding:7px 10px;font:inherit;color:var(--text);cursor:pointer;transition:background-color .12s ease}.mrow .ml{flex:1}.mrow .mk{margin-left:auto}
.mrow.dis{opacity:.45;cursor:default}.mrow.dis:hover{background:transparent}
.mrow:hover{background:var(--hover)}.mrow:active{background:var(--press)}
.mrow .mk{width:16px;height:16px;display:inline-flex;color:var(--blue)}.mrow .mk svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mrow .ml small{display:block;color:var(--text3);font-size:11.5px}
/* the person's line: a pen on hover; an edit in place */
.me{position:relative;display:flex;gap:6px;align-items:flex-start}
.me .txt{white-space:pre-wrap;overflow-wrap:anywhere}
.me .edit{position:absolute;left:-38px;top:4px;width:30px;height:30px;opacity:0;transition:opacity .12s}
.me:hover .edit{opacity:1}
.editbox{align-self:flex-end;width:70%;background:var(--gbg2);border-radius:20px;padding:10px 12px}
.editbox textarea{width:100%;border:0;background:transparent;font:inherit;color:var(--text);resize:vertical;outline:none;min-height:40px}
.editrow{display:flex;justify-content:flex-end;gap:6px;margin-top:6px}
.pill{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 14px;border-radius:999px;border:0;background:var(--blue);color:#fff;font:500 13px var(--sans);cursor:pointer;text-decoration:none}
.pill:hover{filter:brightness(.95)}.pill:active{filter:brightness(.88)}
.pill.ghost{background:var(--gbg);color:var(--text)}.pill.ghost:hover{background:var(--hover)}.pill.ghost:active{background:var(--press)}
.pill.big{height:38px;padding:0 20px;font-size:14px;margin-top:10px}
.pill:disabled{opacity:.4;cursor:default}
.pill svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* superseded turns step back; they stay in the record */
.me.old,.ai.old{opacity:.45;max-height:64px;overflow:hidden;position:relative;mask-image:linear-gradient(#000 40%,transparent);-webkit-mask-image:linear-gradient(#000 40%,transparent);cursor:pointer}
.me.old:hover,.ai.old:hover{opacity:.7}
/* the verdict row */
.verdict{margin-top:6px;font-size:12px;color:var(--text2)}
.vrow{display:flex;align-items:center;gap:8px}
.vdot{width:9px;height:9px;border-radius:50%;background:var(--text3);box-shadow:0 0 0 2px var(--card)}
.vdot.verified{background:var(--green)}.vdot.supported{background:var(--blue)}.vdot.unstable{background:var(--amber)}.vdot.unsupported{background:var(--text3)}.vdot.contradicted{background:var(--red)}
.vdot.none{background:transparent;border:1.5px solid var(--border2)}.vdot.unchecked{background:transparent;border:1.5px dashed var(--text3)}
.cchip,.nchip{height:20px;padding:0 8px;border-radius:999px;border:0;background:var(--gbg);color:var(--text2);font:600 11px var(--sans);cursor:pointer}
.cchip:hover,.nchip:hover{background:var(--hover)}.cchip:active,.nchip:active{background:var(--press)}
.verdict .meta{font:11px var(--mono);color:var(--text3)}
.correction{margin-top:4px;color:var(--red);font-size:12.5px}
.statline{margin-top:4px;font:12px var(--mono);color:var(--text2);background:var(--gbg);border-radius:8px;padding:5px 9px}
.vlist{margin-top:4px;font-size:12px;line-height:1.7}.vlist code{font:11px var(--mono);background:var(--gbg);border-radius:4px;padding:0 4px}.vlist small{color:var(--text3)}
/* the ⋯ row under an answer */
.acts{display:flex;gap:2px;margin-top:2px;opacity:0;transition:opacity .12s}.ai:hover .acts{opacity:1}.acts .ib{width:28px;height:28px}.acts .ib svg{width:16px;height:16px}
/* blocks */
.blocks:empty{display:none}.blocks{margin-top:8px;display:flex;flex-direction:column;gap:8px}
.bcard{display:flex;align-items:center;gap:12px;border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:var(--card)}
.btitle{flex:1;font-weight:600;font-size:13.5px}.btitle small{display:block;font:11.5px var(--mono);color:var(--text3);font-weight:400}
.bdesc{font-size:12.5px;color:var(--text2);margin-top:4px}
.bcard table{font-size:12.5px}.bcard th{text-align:left;color:var(--text3);font-weight:500;padding:2px 10px 2px 0}.bcard td{padding:2px 0}
.block.image img{max-width:100%;border-radius:12px;border:1px solid var(--border)}
.block.interactive .q{font-weight:500;margin-bottom:6px}.opts{display:flex;flex-wrap:wrap;gap:6px}
.visual{border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:var(--card)}
.vtitle{font-weight:600;font-size:13px;margin-bottom:6px}
.visual svg.chart{width:100%;height:auto;max-height:260px}.visual svg.pie{width:180px;height:180px}
.visual .tk{font:10.5px var(--mono);fill:var(--text3)}.visual .grid{stroke:var(--border);stroke-width:1}
.legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;font-size:12px;color:var(--text2)}.lg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.visual table{border-collapse:collapse;font-size:12.5px}.visual th,.visual td{padding:4px 10px;border-bottom:1px solid var(--border);text-align:left}
/* the canvas (right) */
.ask.with-canvas>.head,.ask.with-canvas>.thread,.ask.with-canvas>.composer{margin-right:46%}
.canvas{position:absolute;right:0;top:0;bottom:0;width:46%;background:var(--card);border-left:1px solid var(--border);display:flex;flex-direction:column;z-index:4;transform:translateX(100%);transition:transform .38s cubic-bezier(.22,1,.36,1);will-change:transform}
.canvas.open{transform:translateX(0)}
.canvas>*{opacity:0;transition:opacity .2s ease}.canvas.open>*{opacity:1}
@media (prefers-reduced-motion:reduce){.canvas{transition:none}}
.chead{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--border)}
.ctitle{font-weight:600}.cver{border:0;background:var(--gbg);border-radius:999px;padding:4px 10px;font:12.5px var(--sans);color:var(--text)}
.cbody{flex:1;overflow:auto;background:var(--page)}.cbody iframe{width:100%;height:100%;border:0;background:#fff}
.cmd{padding:20px 24px;max-width:720px}.csrc{margin:0;padding:16px;font:12px/1.5 var(--mono);white-space:pre-wrap}
/* the settings pane (right) */
/* THE QUICK SETTINGS PANE OPENS OUT OF THE GEAR, IN THE DRAWER'S OWN COLUMN (CEO, 22 Sep 2026:
   "should open up here instead with a beautiful transition"). The gear lives at the foot of the
   rail, so its panel rises from there and takes the column beside it — it no longer appears
   against the far edge, a hand's width from the button that opened it. It covers the chats drawer
   while it is up (z-index above it) and carries the drawer's width, so a column the CEO widened
   stays the width he set. Not display:none — a panel that is never laid out cannot animate. */
.pane{position:absolute;left:46px;top:0;bottom:0;width:max(300px,var(--w,300px));background:var(--card);border-right:1px solid var(--border);box-shadow:10px 0 30px rgba(0,0,0,.10);display:flex;flex-direction:column;z-index:6;overflow:auto;transform-origin:0 100%;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(14px) scale(.985);transition:opacity .24s ease,transform .38s cubic-bezier(.22,1,.36,1),visibility 0s linear .38s}
.pane.open{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .2s ease,transform .38s cubic-bezier(.22,1,.36,1),visibility 0s}
@media (prefers-reduced-motion:reduce){.pane,.pane.open{transition:opacity .01s linear,visibility 0s}}
.phead{display:flex;align-items:center;padding:10px 12px 10px 16px;border-bottom:1px solid var(--border)}
.ptitle{font-weight:700;font-size:15px}
.psec{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.ptitle2{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--text3)}
.prow{display:flex;align-items:center;gap:8px;width:100%;font-size:13.5px}.prow>span{flex:1}.prow small{display:block;color:var(--text3);font-size:11.5px}
.popt{display:flex;align-items:center;gap:6px;font-size:13.5px}.popt select{border:0;background:var(--gbg);border-radius:999px;padding:4px 10px;font:12.5px var(--sans);color:var(--text)}
/* the lock screen */
/* a black page over EVERYTHING the window shows — the SOP drawer included — with the unlock card in the middle
   (the card is unlock.widget.js's own; CEO, 24 Sep 2026) */
/* THE LOCK AND THE SIGN-IN PAGE (CEO, 7 Oct 2026, after eight tries at the dim: "We will skip the dimmed background"): a
   full-screen background image, no dim, no blur, the login card docked on the right. The image is one of three (Viking, neurons,
   cyborg) picked once per day by the page from today's date. The three JPEGs sit beside the painter and are served at /signin-bg/*.
   The old dim+blur of 6 Oct is retired. */
.lockscreen{position:fixed;inset:0;background:#000 center/cover no-repeat;display:flex;align-items:center;justify-content:flex-end;padding:0 min(10vw, 180px);z-index:100000}
.lockscreen[hidden]{display:none}
.ask.locked > :not(.lockscreen){pointer-events:none;user-select:none}
.lockhost{display:flex;flex-direction:column;align-items:center;gap:12px;color:#fff}
/* THE SIGN-IN PAGE (CEO, 7 Oct 2026): a full-screen background image (one of three, rotates once per day — set by signin.html
   from today's date), the login card on the right. No dim, no blur. The dim of 6 Oct is retired. */
.lockpage{position:fixed;inset:0;background:#000 center/cover no-repeat;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:16px;overflow:auto}
.lockpage .authcard{background:#fff;border-radius:44px;padding:28px}
.lockpage .locknotes{max-width:340px;text-align:center}
.lockpage .locknotes .note{color:rgba(255,255,255,.72);margin:4px 0}
.lockpage .locknotes .note.small{color:rgba(255,255,255,.55)}
.lockpage .locknotes a{color:#fff}
/* the sign-in page is the lock screen's twin: .ask.auth made it a grid of two rows over the whole height, so the card sat in
   the top half and the notes in the bottom one (CEO, 25 Sep 2026: "??????" between them). A flex column, centred, wins here */
/* THE RIGHT COLUMN (CEO, 7 Oct 2026: "The login box will appear in the right column"): the card hugs the right side of the
   window with a comfortable margin. The dark background is behind every surface the card can land on — a browser's native page
   colour under the image, the Mac app's own window — so the card's text stays on white. */
.ask.auth.lockpage{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;padding:0 min(10vw, 180px);gap:0}
.ask.auth.lockpage .lockhost{width:300px;max-width:calc(100vw - 32px)}
/* THE SIGN-IN CARD IS LIQUID GLASS (CEO, 12 Oct 2026) — the glass itself is the card's own look (unlock.widget.js `glass`: one
   copy, the lock's card wears it too); here only this page's own foot, which the card does not know, turns to read on the picture. */
.ask.auth.lockpage .unlockcard .authfoot,.ask.auth.lockpage .unlockcard .authfoot p{color:#D5DEEC}
.ask.auth.lockpage .unlockcard .authfoot a{color:#fff}
/* THE SCREENS BETWEEN — the invitation, the way back in, a release (CEO, 12 Oct 2026: "two or three more screens that appear
   between the initial sign-in pop-up and the passkey … my hope and understanding is that you made those also liquid glass").
   Since the day's picture came (7 Oct) these pages had no card at all: dark words straight on the picture, at the top of
   the window. Each is now the sign-in card's glass, in the sign-in card's place (docked right, centred top to bottom), the
   same 26 px of margin on every side, white words, a well for the field and a drop of tinted glass for the button. */
:is(.ask.auth[data-page="invite"],.ask.auth[data-page="recover"],.ask.auth[data-page="release"]){position:fixed;inset:0;background:#000 center/cover no-repeat;display:flex;flex-direction:row;align-items:center;justify-content:flex-end;padding:0 min(10vw, 180px);overflow:auto;min-height:0}
:is(.ask.auth[data-page="invite"],.ask.auth[data-page="recover"],.ask.auth[data-page="release"]) .authcard{position:relative;z-index:0;box-sizing:border-box;width:300px;max-width:calc(100vw - 32px);padding:26px;border-radius:44px;text-align:center;color:#fff;
  box-shadow:0 22px 60px rgba(0,0,0,.42),0 3px 10px rgba(0,0,0,.28);text-shadow:0 1px 2px rgba(0,0,0,.55)}
:is(.ask.auth[data-page="invite"],.ask.auth[data-page="recover"],.ask.auth[data-page="release"]) .authcard::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-2;pointer-events:none;
  background:radial-gradient(90% 60% at 0% 0%,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 40%);
  -webkit-backdrop-filter:saturate(150%) brightness(1.04);backdrop-filter:saturate(150%) brightness(1.04);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),inset 1.6px 1.6px .7px -.6px rgba(255,255,255,.95),inset -1.4px -1.4px .7px -.6px rgba(255,255,255,.55),inset 0 0 10px 0 rgba(255,255,255,.05)}
:is(.ask.auth[data-page="invite"],.ask.auth[data-page="recover"],.ask.auth[data-page="release"]) .authcard::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;padding:8px;
  -webkit-backdrop-filter:blur(4px) saturate(115%) brightness(1.28);backdrop-filter:blur(4px) saturate(115%) brightness(1.28);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
:is(.ask.auth[data-page="invite"],.ask.auth[data-page="recover"],.ask.auth[data-page="release"]) .authicon{width:52px;height:52px;margin:0 0 10px;display:inline-block}
:is(.ask.auth[data-page="invite"],.ask.auth[data-page="recover"],.ask.auth[data-page="release"]) .authcard h1{color:#fff;font-size:19px;letter-spacing:-.01em;margin:0 0 6px}
:is(.ask.auth[data-page="invite"],.ask.auth[data-page="recover"],.ask.auth[data-page="release"]) .authcard .note{color:#D5DEEC;margin:0 0 10px;font-size:13.5px;line-height:1.45}
:is(.ask.auth[data-page="invite"],.ask.auth[data-page="recover"],.ask.auth[data-page="release"]) .authcard .note:empty{display:none}
:is(.ask.auth[data-page="invite"],.ask.auth[data-page="recover"],.ask.auth[data-page="release"]) .authcard .note.small{font-size:12px;margin:12px 0 0;color:#C3CEDF}
.ask.auth[data-page="recover"] .authcard{padding-bottom:24px}
:is(.ask.auth[data-page="invite"],.ask.auth[data-page="recover"],.ask.auth[data-page="release"]) .authcard a:not(.pill){color:#fff}
:is(.ask.auth[data-page="invite"],.ask.auth[data-page="recover"],.ask.auth[data-page="release"]) .authcard .lockerr{color:#FFB4AB}
:is(.ask.auth[data-page="invite"],.ask.auth[data-page="recover"],.ask.auth[data-page="release"]) .authcard .lockerr:empty{display:none}
:is(.ask.auth[data-page="invite"],.ask.auth[data-page="recover"],.ask.auth[data-page="release"]) .authcard .codein{box-sizing:border-box;margin:0 0 10px;color:#fff;background:rgba(0,0,0,.20);border:0;border-radius:16px;
  box-shadow:inset 0 1.5px 3px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.16),0 1px 0 rgba(255,255,255,.10);text-shadow:none}
:is(.ask.auth[data-page="invite"],.ask.auth[data-page="recover"],.ask.auth[data-page="release"]) .authcard .codein::placeholder{color:rgba(255,255,255,.55)}
:is(.ask.auth[data-page="invite"],.ask.auth[data-page="recover"],.ask.auth[data-page="release"]) .authcard .codein:focus{outline:none;box-shadow:inset 0 1.5px 3px rgba(0,0,0,.45),inset 0 0 0 1px rgba(170,210,255,.7),0 0 0 4px rgba(120,175,255,.16)}
:is(.ask.auth[data-page="invite"],.ask.auth[data-page="recover"],.ask.auth[data-page="release"]) .authcard .pill.big{margin:0;border:0;border-radius:999px;color:#fff;text-shadow:0 1px 1px rgba(0,20,60,.45);
  background:linear-gradient(180deg,rgba(150,195,255,.34),rgba(70,130,235,.20));-webkit-backdrop-filter:saturate(180%);backdrop-filter:saturate(180%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.20),inset 1.2px 1.4px .6px -.5px rgba(255,255,255,.9),inset -1px -1.2px .6px -.5px rgba(255,255,255,.4),inset 0 -8px 12px -8px rgba(255,255,255,.28),0 6px 16px rgba(0,0,0,.30)}
:is(.ask.auth[data-page="invite"],.ask.auth[data-page="recover"],.ask.auth[data-page="release"]) .authcard .pill.big + .pill.big{margin-top:8px}
:is(.ask.auth[data-page="invite"],.ask.auth[data-page="recover"],.ask.auth[data-page="release"]) .authcard .pill.big.ghost{background:rgba(255,255,255,.05);color:#dbe7fa;text-shadow:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 1px 1.2px .6px -.5px rgba(255,255,255,.6)}
@media (max-width:900px){:is(.ask.auth[data-page="invite"],.ask.auth[data-page="recover"],.ask.auth[data-page="release"]){justify-content:center;padding:16px}}
.lockpage .authfoot{max-width:none;text-align:center;color:rgba(255,255,255,.62);font-size:12.5px;line-height:1.5}.lockpage .authfoot p{margin:0 0 3px}.lockpage .authfoot a{color:#fff}
/* on a narrow window (a phone, a very narrow desktop): the card is centred, not pinned right, and the gutter shrinks */
@media (max-width: 700px) {
  .lockscreen,.ask.auth.lockpage{justify-content:center;padding:16px}
}
/* inside the card the help is the card's own text — dark on white (the white above is for the black page, where the foot
   lands only if the card cannot be drawn); 25 Sep: it was white on white in the card, found in the walk's screenshot */
.unlockcard .uc-foot .authfoot{max-width:none;color:inherit}.unlockcard .uc-foot .authfoot a{color:#1c1c1e}
.locktitle{font-size:22px;font-weight:600;letter-spacing:-.01em}
.lockerr{color:var(--red);font-size:12.5px;margin-top:8px;min-height:18px}
/* the drawer rows */
.dtop{display:flex;align-items:center;gap:6px}
.dsearch{flex:1;border:0;background:var(--gbg);border-radius:18px;padding:8px 12px;font:13px var(--sans);color:var(--text);outline:none}
.drawer .row{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:6px}
.drawer .row .rtitle{grid-column:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drawer .row small{grid-column:1}
.drawer .row .rmore{grid-column:2;grid-row:1/3;width:28px;height:28px;opacity:0}.drawer .row:hover .rmore{opacity:1}
@media (max-width:900px){.ask.with-canvas>.head,.ask.with-canvas>.thread,.ask.with-canvas>.composer{margin-right:0}.canvas{width:100%;left:46px}.pane{width:calc(100% - 46px)}}
/* ── HIG pass (22 Sep 2026): keyboard focus is visible; dialogs are in place, never the browser's ── */
.ib:focus-visible,.chip:focus-visible,.pill:focus-visible,.mrow:focus-visible,.send:focus-visible,.brand:focus-visible,.cchip:focus-visible,.nchip:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.box:focus-within{box-shadow:0 0 0 2px var(--blue-soft)}
.pill.danger{background:var(--red);color:#fff}
.confirm{display:flex;align-items:center;gap:8px;padding:6px 10px;font-size:13px;background:var(--gbg);border-radius:9px}.confirm span{flex:1}
.rname{width:100%;border:0;background:var(--gbg);border-radius:9px;padding:8px 10px;font:13.5px var(--sans);color:var(--text);outline:2px solid var(--blue)}
.addrow{display:flex;gap:6px;align-items:center;width:100%}
/* THE BUTTON KEEPS ITS SIZE, THE FIELD GIVES WAY (CEO, 24 Sep 2026: "Cutting the corner, please fix"): a text field has a
   built-in minimum width, so `flex:1` alone would not shrink it — the pill was squeezed, wrapped "Add passkey" onto two
   lines inside 30px and ran past the drawer. B39 in rec_0924.mjs measures every button in every settings panel. */
.addrow .pname{min-width:0}.addrow .pill{flex:none;white-space:nowrap}
.pname{flex:1;border:0;background:var(--gbg);border-radius:999px;padding:7px 12px;font:13px var(--sans);color:var(--text);outline:none}.pname:focus{box-shadow:0 0 0 2px var(--blue-soft)}
.perr{color:var(--red);font-size:12.5px;min-height:0}
/* ── Phase 1b: cards · chips · typeahead · voice · the split · help · the document canvas ── */
.card{border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:var(--card);font-size:13.5px;max-width:640px}
.card .ch{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}.card .ct{font-weight:600}.card .cs{font-size:11.5px;color:var(--text3)}.card .cs2{font-size:11px;color:var(--text3);margin-top:2px}.card .cq{font-weight:400;color:var(--text2)}
.card .cf{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
.card .rc{font-size:11.5px;color:var(--text3);margin-top:8px}.card .rc b{color:var(--text2)}
.card .who2{font-size:11.5px;color:var(--text3);margin:-2px 0 6px}
.card .err{color:var(--red);font-size:12.5px}.card .ok{color:var(--green);font-size:13px}.card .hint{font-size:11px;color:var(--text3);margin-left:6px}
.card .warn{background:#fdf3e2;color:#8a5a16;border-radius:8px;padding:6px 9px;font-size:12.5px;margin:6px 0}.card .warn.inline{display:inline;margin:0;padding:1px 6px}
.card .pg{display:grid;grid-template-columns:96px 1fr;gap:5px 10px;align-items:center;margin:6px 0}.card .pg label{font-size:11.5px;color:var(--text3);text-align:right}
.card .fw{display:flex;flex-direction:column;gap:2px}.card .fw input,.card .fw select,.card .cin,.card textarea{width:100%;border:1px solid var(--border2);border-radius:8px;padding:6px 8px;font:13px var(--sans);color:var(--text);background:var(--card)}.card .fw input.empty{border-style:dashed}
.card .cin{margin:0 0 6px}.card textarea{min-height:80px;resize:vertical}
.card .ovr{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;background:var(--gbg);border-radius:8px;padding:8px}.card .ovr input{margin-top:3px}
.card .mt{border:1px solid var(--border);border-radius:8px;padding:6px 8px;margin:6px 0;font-size:12px}.card .mt.clean{opacity:.75}.card .hd2{font-weight:600}.card .wy,.card .scope{color:var(--text3);font-size:11.5px}
.card .mc{display:flex;gap:8px;padding:4px 0;border-top:1px solid var(--border)}.card .mc .tier{font:600 10px var(--mono);text-transform:uppercase;color:var(--amber)}.card .mc .nm{font-weight:600}.card .mc .meta{color:var(--text3);font-size:11.5px}.card .fl{color:var(--text3);font-size:11px}.card .fl.test{color:var(--amber)}
.card .opts{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.card .mrow{display:flex;gap:8px;padding:7px 4px;border-top:1px solid var(--border);cursor:pointer;align-items:baseline;border-radius:6px}.card .mrow:hover{background:var(--gbg)}
.card .mfrom{flex:0 0 30%;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card .msub{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card .msub small{color:var(--text3)}.card .mwhen{flex:0 0 auto;color:var(--text3);font-size:11px}.card .dotu{color:var(--blue)}
.card .mtext{white-space:pre-wrap;max-height:340px;overflow:auto;margin:6px 0}.card .mtext.small{font-size:12px;max-height:180px}.card .matt{margin-top:6px;padding:6px 8px;background:var(--gbg);border-radius:6px}
.card .reply{margin-top:8px;border-top:1px solid var(--border);padding-top:8px}.card .tsug{margin-top:8px;background:var(--blue-soft);border-radius:8px;padding:7px 9px}
.card .frow{display:flex;gap:8px;padding:7px 4px;border-top:1px solid var(--border);align-items:baseline;cursor:pointer;border-radius:6px}.card .frow:hover{background:var(--gbg)}.card .frow.dim{opacity:.5;cursor:default}.card .frow.up{color:var(--text2)}.card .fname{flex:1;overflow:hidden;text-overflow:ellipsis}
.card .prow2{padding:7px 4px;border-top:1px solid var(--border)}.card .pname{display:flex;gap:8px;align-items:baseline}.card .pname b{flex:1}
.card .brow{display:flex;gap:8px;padding:4px;border-top:1px solid var(--border)}.card .bwhen{flex:0 0 64px}.card .bsec{font-size:11px;color:var(--text3);margin:6px 4px 2px}
.card .slots{border:1px solid var(--border);border-radius:8px;overflow:hidden;margin:4px 0}.card .slot{display:flex;align-items:center;gap:8px;padding:5px 8px;border-top:1px solid var(--border);font-size:12.5px;cursor:pointer}.card .slot:first-child{border-top:0}.card .slot.off{opacity:.55}.card .slot input{margin:0}
.card .free{color:var(--green);font-size:12.5px;margin:6px 0}.card .clash{color:var(--amber);font-size:12.5px;margin:6px 0}.card .alt{display:inline-block;background:var(--gbg);border-radius:999px;padding:1px 8px;margin:2px 4px 0 0;font-size:12px}
.card .cpre{font:11.5px var(--mono);white-space:pre-wrap;max-height:200px;overflow:auto}
.card.caps .crow{display:flex;gap:6px;align-items:center;padding:6px 0;border-top:1px solid var(--border)}.card.caps .crow.hdr{border:0;font-size:11px;color:var(--text3)}.card.caps .cl{flex:1}.card.caps .cc{width:48px;text-align:center}.card.caps .cc.p0{color:var(--blue)}
.tgl{width:34px;height:20px;border-radius:11px;border:1px solid var(--border2);background:transparent;position:relative;cursor:pointer;padding:0}.tgl span{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--text3);transition:left .12s}.tgl.on{background:var(--green);border-color:var(--green)}.tgl.on span{left:16px;background:#fff}
.card .b{font-size:13.5px}
/* the composer: chips, the typeahead ghost, the level meter */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px 8px}.chips[hidden]{display:none}
.chipf{display:inline-flex;align-items:center;gap:6px;background:var(--gbg);border-radius:999px;padding:3px 10px;font-size:12.5px}.chx{border:0;background:transparent;cursor:pointer;color:var(--text3);font-size:14px;line-height:1;padding:0 2px}.chx:hover{color:var(--text)}
.tawrap{flex:1;position:relative;display:flex}.tawrap textarea{width:100%}.tahint{position:absolute;inset:0;padding:9px 6px;font:15px/21px var(--sans);color:var(--text3);white-space:pre-wrap;pointer-events:none;overflow:hidden}
.voice .ib.on{color:var(--blue);background:var(--blue-soft)}
.vu{--lvl:0;width:6px;height:22px;border-radius:3px;background:linear-gradient(to top,var(--blue) calc(var(--lvl) * 100%),var(--gbg2) 0);margin:0 4px 6px 0;align-self:center}.vu[hidden]{display:none}
.hint.err{color:var(--red)}
.sugs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}.sug{font-weight:400}
.ask.dragging .box{box-shadow:0 0 0 2px var(--blue)}
/* the split */
.ask{--split:50%}
.ask.with-canvas>.head,.ask.with-canvas>.thread,.ask.with-canvas>.composer{margin-right:calc(100% - var(--split))}
.canvas{width:calc(100% - var(--split))}
.splitter{display:none;position:absolute;top:0;bottom:0;left:var(--split);width:8px;margin-left:-4px;cursor:col-resize;z-index:6}
.ask.with-canvas .splitter{display:block}.splitter:hover{background:var(--blue-soft)}
/* help */
.helpov{position:absolute;inset:0;z-index:40;background:rgba(10,16,26,.45);overflow:auto}
.helpcard{max-width:560px;margin:6vh auto 0;background:var(--card);color:var(--text);border:1px solid var(--border2);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.35);padding:18px 20px;max-height:84vh;overflow:auto;font-size:13.5px}
.hhd{display:flex;align-items:baseline;gap:8px}.htabs{display:flex;gap:6px;margin:12px 0 4px;flex-wrap:wrap}
.hsec{margin-top:12px}.htitle{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);margin-bottom:5px}.hrow{display:flex;gap:10px;padding:2px 0;align-items:baseline}.hrow code{flex:0 0 auto;min-width:96px;font-size:12px;color:var(--blue)}.hk{flex:0 0 auto;min-width:96px}.hlead{color:var(--text2);margin-top:6px}
.habout .hkick{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#b98a2e;font-weight:600;margin-bottom:8px}.habout .hhead{font-family:Georgia,'Times New Roman',serif;font-size:26px;line-height:1.1;letter-spacing:-.01em;margin-bottom:10px}.habout .hhead i{color:#b98a2e}.habout hr{border:0;height:1px;background:linear-gradient(90deg,#c9a24b,transparent);opacity:.5;margin:14px 0}.habout p{line-height:1.55}
.hnotice{margin-top:8px;border-left:3px solid var(--red);background:rgba(197,34,31,.06);border-radius:0 10px 10px 0;padding:13px 16px;font-size:13px;line-height:1.5}.hkick2{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:5px}.hfoot{margin-top:10px;font-family:Georgia,serif;font-style:italic;font-size:12.5px;color:var(--text3)}
/* the document canvas */
.cvtitle{font-weight:600;outline:none;border-radius:6px;padding:2px 6px;min-width:80px}.cvtitle:focus{background:var(--gbg)}
.cvst{font:11.5px var(--mono);color:var(--text3)}
.cvb{height:26px;padding:0 10px;border-radius:999px;border:0;background:var(--gbg);color:var(--text);font:12px var(--sans);cursor:pointer}.cvb:hover{background:var(--hover)}.cvb:active{background:var(--press)}.cvb.off{color:var(--red)}
.cbody .page{max-width:760px;margin:24px auto;background:#fff;color:#111;box-shadow:0 8px 30px rgba(0,0,0,.12);padding:56px 64px;min-height:600px}
.cvbody{outline:none;font:15px/1.6 Georgia,'Times New Roman',serif}.cvbody p{margin:0 0 12px}.cvbody h1,.cvbody h2,.cvbody h3{font-family:var(--sans)}.cvlhbox .lh{margin-bottom:24px}
.cvmenu{position:absolute;z-index:7;min-width:240px;background:var(--card);border:1px solid var(--border2);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.14);padding:6px;font-size:13px}
.cvmenu .mh{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--text3);padding:6px 10px 4px}.cvmenu .mi{padding:7px 10px;border-radius:8px;cursor:pointer;display:flex;justify-content:space-between;gap:8px}.cvmenu .mi:hover{background:var(--hover)}.cvmenu .mi small{color:var(--text3)}.cvmenu .mi.center{justify-content:center;font-weight:600}.cvmenu hr{border:0;height:1px;background:var(--border);margin:6px 4px}
.cvmenu .ml2{display:flex;flex-direction:column;gap:2px;padding:4px 10px;font-size:11px;color:var(--text3)}.cvmenu .ml2 input,.cvmenu .ml2 select{border:1px solid var(--border2);border-radius:8px;padding:5px 8px;font:13px var(--sans);color:var(--text);background:var(--card)}
.cvmenu .warn{background:#fdf3e2;color:#8a5a16;border-radius:8px;padding:6px 9px;font-size:12px;margin:4px 6px}
@media (max-width:900px){.ask.with-canvas>.head,.ask.with-canvas>.thread,.ask.with-canvas>.composer{margin-right:0}.canvas{width:100%;left:46px}.splitter{display:none!important}.ask.with-canvas>.rtab{display:none}}
.loginlink{color:var(--blue);font-weight:600;margin-left:6px}
.vdot.quick{animation:askpulse 1.2s ease-in-out infinite}@keyframes askpulse{50%{opacity:.35}}@media (prefers-reduced-motion:reduce){.vdot.quick{animation:none}}
/* the passkey door's pages */
.ask.auth{display:grid;place-items:center;min-height:100vh}
.authcard{max-width:380px;text-align:center;padding:24px}
.authicon{width:64px;height:64px;border-radius:22%;margin-bottom:8px}
.authcard h1{font-size:24px;letter-spacing:-.02em;margin:6px 0 10px}
.authcard .note.small{font-size:11.5px;margin-top:18px}
.codein{display:block;width:100%;border:1px solid var(--border2);border-radius:12px;padding:10px 12px;font:18px var(--sans);text-align:center;letter-spacing:.2em;margin:10px 0;color:var(--text);background:var(--card)}
.authcard .pill.big{width:100%;justify-content:center;margin-top:6px}
.invform{display:flex;flex-direction:column;gap:6px;width:100%}.invout{font-size:12.5px;width:100%}.invlink{display:block;font:11.5px var(--mono);background:var(--gbg);border-radius:8px;padding:6px 8px;margin:6px 0;word-break:break-all;user-select:all}.invcode{font-size:14px}.invlist{width:100%;display:flex;flex-direction:column;gap:4px}

/* the drawer's foot: the apps and the founder-level invite (greyed until the node opens it) */
.dfoot{border-top:1px solid var(--border);padding-top:8px;margin-top:6px}
.dlink{border:0;background:transparent;color:var(--blue);font:13px var(--sans);cursor:pointer;padding:6px 8px;border-radius:8px;transition:background-color .15s ease,transform .08s ease}.dlink:hover{background:var(--hover)}
.dnote{font-size:11.5px;color:var(--text3);padding:0 8px 6px}
.dinv{display:block;border:0;background:transparent;font:11px var(--sans);color:var(--text3);padding:4px 8px;border-radius:8px;cursor:pointer;transition:background-color .15s ease}.dinv:hover{background:var(--hover)}.dinv:disabled{opacity:.5;cursor:default}.dinv:disabled:hover{background:transparent}
/* the canvas with nothing on it, and the terminal's sentence */
.cempty{padding:28px 24px;color:var(--text3);font-size:13.5px;max-width:520px}
/* text as context */
.slip{margin:0 8px 8px;background:var(--gbg);border-radius:14px;padding:8px}.slip textarea{width:100%;border:0;background:transparent;font:13.5px/1.4 var(--sans);color:var(--text);resize:vertical;outline:none}.tcrow{display:flex;gap:6px;justify-content:flex-end}
/* the whole settings */
.sfull{position:absolute;inset:0;background:var(--card);z-index:6;display:flex;flex-direction:column}.sfull[hidden]{display:none}
.sfhead{display:flex;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border)}
.sfbody{display:flex;flex:1;min-height:0}
.sfnav{width:220px;border-right:1px solid var(--border);padding:12px 8px;display:flex;flex-direction:column;gap:2px;overflow:auto}
.sfitem{text-align:left;border:0;background:transparent;font:13.5px var(--sans);color:var(--text);padding:8px 12px;border-radius:9px;cursor:pointer;transition:background-color .15s ease}.sfitem:hover{background:var(--hover)}.sfitem.on{background:var(--gbg)}
.sfmain{flex:1;overflow:auto;padding:16px 28px 40px}.sfmain h2{font-size:18px;margin:4px 0 12px;font-weight:600}.sfmain .psec{max-width:640px}
.note.later{color:var(--text3)}.popt.dim{color:var(--text3)}
.sfmain kbd{display:inline-block;min-width:54px;font:12px var(--mono);background:var(--gbg);border-radius:6px;padding:2px 6px;margin-right:10px;text-align:center}
.allset{margin:12px 16px 20px;align-self:flex-start}
@media (max-width:700px){.sfnav{width:150px}}
/* the line under the chatbox and the Phase 2 panes */
.cfoot{display:flex;align-items:baseline;justify-content:center;gap:10px;margin-top:8px}
.cfoot .hint{margin-top:0}
/* the line under the chatbox takes no room while it has nothing to say — it only ever speaks for an error now (CEO, 27 Sep 2026:
   "Dead space under chatbox. please remove"; the listening and hands-free lines were "redundant text") */
.cfoot:has(> .hint:empty){display:none}
.plong{width:100%;border:1px solid var(--border2);border-radius:10px;padding:8px 10px;font:13.5px/1.5 var(--sans);color:var(--text);background:var(--card);resize:vertical;outline:none;margin-bottom:8px}
.plong:focus{border-color:var(--blue)}
.sfmain .addrow{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px}
.sfmain .prow kbd{min-width:auto}

/* THE RESIZERS (CEO, 22 Sep 2026): a drag selects nothing, anywhere, and the width it sets is the width
   that stays. The class is on the surface AND on the host document, so a portal's own text is safe too. */
.ltab,.splitter{touch-action:none}
.ask.dragging,.ask.dragging *{user-select:none;-webkit-user-select:none;cursor:col-resize!important}
.ask.dragging iframe{pointer-events:none}
.ask.dragging .drawer{transition:none}

/* the terminal in the canvas: a corner that answers a hand going for it, and nothing when it is not
   (CEO, 22 Sep 2026 — very few people use a terminal, so it does not take a permanent seat) */
/* the glyph sits on the header's OWN horizontal axis, just left of the header's controls (CEO,
   22 Sep: "omg please center same horiz axis"). top/right are measured from the row by placeTerm()
   in painter.js, because a document's header carries ↓, v and the letterhead button in that space
   and a fixed corner would sit on top of them. And the strip NEVER takes a click it was not given:
   pointer-events stay off until the pointer is in it — the first version swallowed the save button. */
.termzone{position:absolute;top:10px;right:12px;width:104px;height:34px;z-index:5;pointer-events:none;display:flex;align-items:center;justify-content:flex-end}
.termzone .ib{opacity:0;pointer-events:none;transition:opacity .16s ease,background-color .15s ease}
.canvas.termnear .termzone .ib,.canvas.termon .termzone .ib,.termzone .ib:focus-visible{opacity:1;pointer-events:auto}
.canvas.termon .termzone .ib{color:var(--blue)}
/* a time that was taken while the card sat there: struck out, and it cannot be ticked again */
.card .slot.taken{opacity:.5}.card .slot.taken span{text-decoration:line-through}

/* THE ABOUT BOX (CEO, 22 Sep 2026) — minimalistic, beside "Ask", gone on Esc or a click outside. */
.about{position:absolute;z-index:22;width:min(420px,calc(100% - 32px));background:var(--card);border:1px solid var(--border2);border-radius:14px;box-shadow:0 16px 48px rgba(0,0,0,.16);padding:16px 18px;overflow:auto;overscroll-behavior:contain;font-size:13px;line-height:1.55;color:var(--text2)}
.about{padding-right:38px}
.about .ax{position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:8px;opacity:.55}
.about .ax:hover{opacity:1;background:var(--gbg2)}
.about .ahead{font:600 14px var(--sans);color:var(--text);margin-bottom:10px}
.about .ahead small{display:block;font:400 11.5px var(--mono);color:var(--text3);margin-top:2px}
.about p{margin:0 0 10px}
.about p:last-child{margin-bottom:0;color:var(--text3);font-size:12.5px}
.pill.ghost.danger{color:var(--red);background:var(--gbg)}
.pill.ghost.danger:hover{background:var(--hover)}

/* a camera or screen frame, previewed before it is taken — never recorded, one still and gone */
.slip.capture video{width:100%;max-height:260px;border-radius:10px;background:#000;display:block}

/* a translation, beside what was actually said and visibly smaller than it (CEO, 22 Sep 2026):
   the composer's type is 15px, so this is 11px — a difference nobody has to be told about. */
.xlate{padding:2px 14px 0;font:11px/1.45 var(--sans);color:var(--text3);opacity:.9}

/* THE TERMINAL (CEO, 22 Sep 2026): a prompt, a path, and a caret sitting in it. */
.term{padding:14px 16px;font:12.5px/1.6 var(--mono);color:var(--text)}
.term .tline{display:flex;gap:6px;align-items:baseline}
.term .tprompt{color:var(--text3);white-space:nowrap}
.term .tin{flex:1;outline:none;min-height:1.6em;caret-color:var(--blue)}
.term .tin:empty::after{content:'';display:inline-block;width:7px;height:1.05em;background:var(--text);vertical-align:-2px;animation:tcaret 1.05s steps(1) infinite}
@keyframes tcaret{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.term .tin:empty::after{animation:none}}
.term .tout{white-space:pre-wrap;color:var(--text3);margin-bottom:8px}
.term .tnote{margin-top:14px;font:11.5px/1.5 var(--sans);color:var(--text3);max-width:520px}

/* THE WATERMARK EDITOR (§10.7). The preview is the page, at the shape of the paper, big enough to
   judge a mark by — which is what "60-70 % of the screen" asks for on a settings panel that is
   itself a column. The controls sit beside it on a wide panel and above it on a narrow one. */
.wmed{margin-top:18px;border-top:1px solid var(--border);padding-top:14px}
.wmtabs{display:flex;gap:6px;margin:8px 0 12px}
.wmtab{border:0;background:var(--gbg);color:var(--text2);border-radius:999px;padding:6px 14px;font:500 13px var(--sans);cursor:pointer}
.wmtab.on{background:var(--blue);color:#fff}
.wmsplit{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.wmbody{flex:1 1 240px;min-width:230px;display:flex;flex-direction:column;gap:9px}
.wmkind{display:flex;gap:6px}
.wmrow{display:flex;align-items:center;gap:10px;font-size:13px}
.wml{color:var(--text3);min-width:74px;font-size:12px;letter-spacing:.02em;text-transform:uppercase}
.wmrow .pname,.wmrow select{flex:1}
.wmrow input[type=color]{width:44px;height:26px;border:1px solid var(--border);border-radius:6px;background:transparent;padding:1px;cursor:pointer}
.wmslide{flex:1;display:flex;align-items:center;gap:8px}
.wmslide input[type=range]{flex:1;accent-color:var(--blue)}
.wmv{min-width:46px;text-align:right;color:var(--text2);font:12px var(--mono)}
.wmprev{flex:0 0 320px;position:relative}
.wmpage{position:relative;width:320px;height:414px;background:#fff;border:1px solid var(--border);border-radius:4px;box-shadow:0 6px 20px rgba(0,0,0,.09);overflow:hidden}
.wmpaper{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}
.wmnote{position:absolute;inset:14px;color:var(--text3);font-size:12px;line-height:1.5}
.wmmark{position:absolute;left:50%;top:50%;font-weight:700;white-space:nowrap;pointer-events:none;letter-spacing:.02em}
.wmmark img{max-width:200px;max-height:200px;display:block}
.wmswitch{display:flex;align-items:center;gap:6px;margin-top:14px;flex-wrap:wrap}

/* the providers (Frontier APIs): a card each, their own key page, one pasted key, a state */
.pvcard{border:1px solid var(--border);border-radius:12px;padding:11px 13px;margin:8px 0;display:flex;flex-direction:column;gap:9px}
.pvcard.on{border-color:var(--blue-soft);background:var(--gbg)}
.pvhead{display:flex;align-items:baseline;gap:9px}
.pvhead b{font-size:14px}.pvhead small{color:var(--text3);font-size:12px;flex:1}
.pvstate{font:600 11px var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--text3)}
.pvcard.on .pvstate{color:var(--blue)}
.pvmask{font:12px var(--mono);color:var(--text2);align-self:center;margin-right:auto}
.pvconnect{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.pvconnect .addrow{width:100%}
/* A7 · devices and windows — the workspace Settings and the /devices page share these */
.plabel{font:600 11.5px var(--sans);text-transform:uppercase;letter-spacing:.06em;color:var(--text3);margin:14px 0 6px}
.pchip{display:inline-block;font:600 10.5px var(--sans);background:var(--blue-soft);color:var(--blue);border-radius:999px;padding:1px 8px;margin-left:6px}
.pwins{width:100%;margin-top:6px}.pwins .prow{padding:4px 0}
.devcard{max-width:640px;text-align:left}.devcard h1,.devcard .authicon{text-align:center;display:block;margin-left:auto;margin-right:auto}
.devrow{padding:9px 0;border-top:1px solid var(--border);gap:8px}.devrow .pill{height:28px}
.devfoot{margin:16px 0 4px;text-align:center}.devevents .note{margin:2px 0}
.devadd[hidden]{display:none}.devadd{display:flex;gap:8px;align-items:center;margin:10px 0 2px}.devadd .codein{flex:1;margin:0}

/* ════ 24 Sep 2026 (.rec) — the walkthrough's surfaces ════ */
/* the chosen typeface reaches everything on the surface (appearance.ts; the node's stylesheet /fonts.css) */
.ask{font-family:var(--sans)}
.ask button,.ask input,.ask textarea,.ask select{font-family:inherit}

/* unlock.widget — grey · red · the red fill · green (the Apple system colours, as his screens are Apple's) */
/* the unlock card's look lives in unlock.widget.js (one copy for every surface that uses it) */

/* the header's Save agent */
.chip.saveagent svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* the disc alone, beside the lock, seen only while the pointer (or the keyboard) is on it — as the canvas terminal (26 Sep 2026) */
.chip.saveagent{width:30px;padding:0;justify-content:center;opacity:0;transition:opacity .16s ease}
.chip.saveagent:hover,.chip.saveagent:focus-visible{opacity:1}
.chip.saveagent[hidden]{display:none}

/* the three voice buttons — lit is blue (on), grey is off; speaking pulses */
.voice .ib.on{color:var(--blue);background:var(--blue-soft)}
.voice .ib.speaking{animation:spkpulse 1.2s ease-in-out infinite}
/* the conversation's state on the waveform (STS.ai; CEO, 28 Sep 2026): green listening · amber thinking · red speaking.
   The mic and the speaker keep their blue. */
.voice .ib[data-v="loop"].on.listening{color:var(--green);background:color-mix(in srgb,var(--green) 15%,transparent)}
.voice .ib[data-v="loop"].on.thinking{color:var(--amber);background:color-mix(in srgb,var(--amber) 15%,transparent)}
.voice .ib[data-v="loop"].on.speaking{color:var(--red);background:color-mix(in srgb,var(--red) 15%,transparent)}
@keyframes spkpulse{50%{box-shadow:0 0 0 4px var(--blue-soft)}}

/* a menu with more behind a row, and a control inside a menu */
.menu.sub{z-index:21}
.mchev{display:inline-flex;width:14px;height:14px;margin-left:2px}.mchev svg{width:14px;height:14px;stroke:var(--text3);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mctl{display:flex;flex-direction:column;gap:4px;padding:6px 10px;font-size:12.5px}
.mctl .ml small{margin-left:6px;color:var(--text3)}
.mctl input[type=range]{width:100%}

/* New model — the secret and its eye */
.slip.newmodel{display:flex;flex-direction:column;gap:6px}
.secrow{display:flex;align-items:center;gap:4px}.secrow .pname{flex:1}
.eyebtn{width:30px;height:30px}

/* chips: the kind first, and a chip that has not been read yet is quieter */
.chipf .ck{font-weight:600;color:var(--text2);margin-right:2px}
.chipf.waiting{border:1px dashed var(--border2);background:transparent}

/* settings — the name, the marks, the typeface, the sandbox levels */
.youname{font:600 15px var(--sans);color:var(--text)}
.markrow{display:flex;gap:12px;flex-wrap:wrap}
.markopt{display:flex;flex-direction:column;align-items:center;gap:6px;border:2px solid transparent;border-radius:14px;background:var(--gbg);padding:10px 14px;cursor:pointer;font:12.5px var(--sans);color:var(--text)}
.markopt img{width:44px;height:44px;object-fit:contain}
.markopt.on{border-color:var(--blue);background:var(--blue-soft)}
.typeface{max-width:360px;border-radius:10px}
.typeprev{margin:8px 0;padding:10px 12px;border-radius:10px;background:var(--gbg);font-size:16px;outline:none;cursor:text;transition:font-family .1s;border:1px solid transparent}.typeprev:focus{border-color:var(--blue)}
.sblevel{align-items:flex-start}.sblevel span{display:flex;flex-direction:column}.sblevel small{color:var(--text3);font-size:12px}
.sbnever{font-weight:500;color:var(--text)}

/* skills: one line each */
.skrow{display:grid;grid-template-columns:auto minmax(80px,auto) 1fr minmax(120px,1fr) auto;gap:10px;align-items:center}
.skdate{color:var(--text3);font-size:12px;white-space:nowrap}
.skname{white-space:nowrap}
.skphrase{color:var(--text2);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.skcomment{border:0;background:transparent;border-bottom:1px dashed var(--border2);font:12.5px var(--sans);color:var(--text);padding:3px 2px;outline:none;min-width:0}
.skcomment:focus{border-bottom-color:var(--blue)}
.skrow [data-remove],.cxrow [data-remove],.agrow [data-remove]{opacity:0;transition:opacity .12s}
.skrow:hover [data-remove],.cxrow:hover [data-remove],.agrow:hover [data-remove],.skrow:focus-within [data-remove],.cxrow:focus-within [data-remove],.agrow:focus-within [data-remove]{opacity:1}
/* 25 Sep 2026: this once made EVERY span of the row a column — the tile sat above the name, "Web" above its chip. The row is a
   grid (below); only the name-and-address stack is a column (.cxwho>span:last-child) */
.cxrow small{color:var(--text3)}
/* item 8: what the organisation's policy holds back is shown, not hidden — dimmed, with the owner's sentence */
.cxrow.blocked b{color:var(--text3)}.cxrow small.cxblocked{color:var(--amber,#b26a00)}
.sblevel.off,.popt.off{opacity:.55}.note.sbceiling{color:var(--text2)}

/* agents: the library and the Save agent dialog */
.aglib{display:flex;flex-direction:column;gap:8px;border:1px solid var(--border);border-radius:14px;padding:10px;margin:6px 0 10px}
.agrow{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px}
.agrow:hover{background:var(--gbg)}
.agname{display:flex;align-items:center;gap:8px;font-weight:600}
.agico svg{width:16px;height:16px;stroke:var(--text3);fill:none;stroke-width:1.8}
.agline{color:var(--text3);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agmodel{background:var(--blue-soft);color:var(--blue);border-radius:999px;padding:2px 10px;font-size:12px;white-space:nowrap}
.agcounts{display:flex;gap:10px;color:var(--text2);font-size:12px}
.agdlgwrap{position:absolute;inset:0;z-index:40;background:rgba(10,14,22,.45);display:flex;align-items:center;justify-content:center;padding:20px}
.agdlg{width:min(640px,100%);max-height:calc(100% - 40px);display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border2);border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.3)}
.agdhead{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border)}
.agdbody{padding:14px 18px;overflow:auto;display:flex;flex-direction:column;gap:8px;flex:1 1 auto;min-height:0}
/* nothing in the body is squeezed to fit (CEO, 15 Oct 2026: "the whole field is cutting badly. The text box is messed up") — the body scrolls instead */
.agdbody>*{flex:none}.agdhead,.agdfoot{flex:none}
.agdbody textarea.plong{min-height:132px;max-height:50vh;margin-bottom:0}
.aglabel{font-weight:600;font-size:13px;margin-top:4px}
.agdbody .pname{border-radius:10px}.agdbody .plong{width:100%;border-radius:10px}
.agsec{display:flex;align-items:center;justify-content:space-between;font:600 11px var(--sans);letter-spacing:.06em;color:var(--text3);margin-top:8px}
.agsec .ib{width:28px;height:28px}.agsec .ib svg{width:15px;height:15px}
.agchips{display:flex;gap:6px;flex-wrap:wrap}
.agchip{border:1px solid var(--border2);border-radius:8px;padding:4px 10px;font-size:13px}
.agpick{display:flex;flex-direction:column;gap:4px;padding:6px 8px;border-radius:10px;background:var(--gbg);margin-top:6px}
.agcaps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.agcap{display:flex;flex-direction:column;gap:6px;border:1px solid var(--border);border-radius:12px;padding:10px 12px;cursor:pointer}
.agcap small{color:var(--text3);font-size:12px;line-height:1.4}
.agcap.dis{opacity:.6;cursor:default}
.agcapt{display:flex;align-items:center;justify-content:space-between;gap:8px}
.toggle{appearance:none;width:36px;height:22px;border-radius:999px;background:var(--border2);position:relative;cursor:pointer;flex:0 0 auto;transition:background .15s ease}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s ease}
.toggle:checked{background:var(--blue)}.toggle:checked::after{left:17px}
.toggle:disabled{cursor:default}
.agdfoot{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid var(--border)}
@media (max-width:620px){.agcaps{grid-template-columns:1fr}.skrow{grid-template-columns:1fr auto}}

/* GET THE APP — a page of its own: blank, wide, one round back button of about two centimetres */
.getapp{position:absolute;inset:0;z-index:35;background:var(--card);overflow:auto;display:block}
/* sticky inside the page, never fixed to the window: in another portal's panel the page is the panel, not the window */
.gaback{position:sticky;top:18px;margin:18px 0 -94px 18px;width:76px;height:76px;border-radius:50%;border:1px solid var(--border2);background:var(--card);box-shadow:0 6px 20px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;transition:transform .12s ease,background-color .15s ease}
.gaback:hover{background:var(--gbg)}.gaback:active{transform:scale(.94)}
.gaback svg{width:36px;height:36px;stroke:var(--text);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.gahero{max-width:760px;margin:0 auto;padding:40px 24px 28px;text-align:center}
.gahero .gamark{width:84px;height:84px;margin:0 auto 18px;border-radius:24px;background:#0b1f3a;display:flex;align-items:center;justify-content:center}
.gahero .gamark img{width:62px;height:62px}
.gahero h1{font:600 clamp(28px,4vw,44px)/1.1 var(--sans);letter-spacing:-.02em;margin:0 0 12px;color:var(--text)}
.gahero p{font-size:17px;color:var(--text2);margin:0}
.gagrid{max-width:1080px;margin:0 auto;padding:18px 24px 80px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.gagrid .gacard{display:flex;flex-direction:column;align-items:stretch;gap:14px;padding:0 0 22px;border:1px solid var(--border);border-radius:24px;background:var(--card);overflow:hidden;transition:transform .15s ease,box-shadow .15s ease}
.gagrid .gacard:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.08)}
.gaart{height:170px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#e8f0fe,#f3e8fd)}
.gacard-iphone .gaart{background:linear-gradient(135deg,#e6f4ea,#e8f0fe)}
.gacard-watch .gaart{background:linear-gradient(135deg,#fef7e0,#fce8e6)}
.gaart svg{width:190px;height:130px}
.gaart .dv-body{fill:#0b1f3a}.gaart .dv-screen{fill:#1f3a64}.gaart .dv-band{fill:#c8a02c}
.gagrid .gatext{padding:0 22px}
.gagrid .ganame{font:600 20px var(--sans);letter-spacing:-.01em}
.gagrid .gadesc{font-size:14px;line-height:1.55;color:var(--text2);margin-top:6px}
.gagrid .gaact{padding:0 22px;align-items:flex-start;margin-top:auto}
.gasoon{font-size:12.5px;line-height:1.5;color:var(--text3);background:var(--gbg);border-radius:12px;padding:10px 12px}
.pill.big{height:40px;padding:0 20px;font-size:14px}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .gaart{filter:brightness(.55) saturate(.8)} }
.ask[data-theme="dark"] .gaart{filter:brightness(.55) saturate(.8)}
@media (max-width:900px){.gagrid{grid-template-columns:1fr}.gahero{padding-top:108px}}
/* THE OUTPUT STYLE PANEL (CEO .rec, 25 Sep 2026: "a slider will open up with all of its pre-filled options, and you
   can update it or cancel") — it slides in from the right over the chat, and back out when it is done */
.styleedit{position:absolute;top:12px;right:12px;bottom:12px;width:min(440px,calc(100% - 24px));z-index:60;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border2);border-radius:18px;box-shadow:0 24px 70px rgba(0,0,0,.22);animation:style-slide .24s cubic-bezier(.2,.8,.2,1)}
.styleedit.closing{animation:style-slide-out .16s ease-in forwards}
@keyframes style-slide{from{transform:translateX(28px);opacity:0}to{transform:none;opacity:1}}
@keyframes style-slide-out{to{transform:translateX(28px);opacity:0}}
@media (prefers-reduced-motion:reduce){.styleedit,.styleedit.closing{animation-duration:1ms}}
.styleedit .sehead{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 6px 18px}
.styleedit .sebody{flex:1;overflow:auto;padding:4px 18px 8px;display:flex;flex-direction:column;gap:6px}
.styleedit .selbl{font-size:12px;color:var(--text2);margin-top:8px}
.styleedit .pname{flex:none;width:100%;box-sizing:border-box;border:1px solid var(--border);border-radius:10px;background:var(--gbg);padding:9px 11px;font:14px/1.45 var(--sans);color:var(--text);outline:none}
.styleedit .pname:focus{border-color:var(--blue)}
/* the fields keep their own height (.pname grows in a row, and this body is a column); the long text takes the room left */
.styleedit textarea.pname{resize:vertical;min-height:150px}.styleedit textarea.pname:last-of-type{flex:1 0 auto}
.styleedit .semine{margin-top:10px}
.styleedit .sefoot{display:flex;gap:8px;justify-content:flex-end;padding:10px 14px 14px;border-top:1px solid var(--border)}
@media (max-width:600px){.styleedit{top:auto;left:8px;right:8px;bottom:8px;width:auto;max-height:86%}}

/* strict mode sits under the sandbox level it belongs to (25 Sep 2026) */
.popt.sbstrict{margin-left:26px}
/* a switch with a name and a line under it (strict mode, the two memory switches): the line sits under the name */
.popt.sbstrict,.popt.memopt{align-items:flex-start;margin-top:6px}.popt.sbstrict span,.popt.memopt span{display:flex;flex-direction:column;gap:1px}
.popt.sbstrict small,.popt.memopt small{color:var(--text3);font-size:12px;line-height:1.4}.popt.sbstrict input,.popt.memopt input{margin-top:3px}
.note.memwhere{margin:8px 0 4px;color:var(--text2)}.memlist{margin-top:6px}.memlist .prow{align-items:flex-start}
/* DOCUMENT TILES (CEO .rec, 25 Sep 2026: "small tiles … a small minimalistic picture of the document per se", after
   Grok's; hover for its card). The old chip classes stay on the element, so everything that finds a chip still does. */
.chips{gap:10px;margin:2px 0 8px 10px;align-items:flex-end}
.chipf.ftile{position:relative;display:inline-flex;flex-direction:column;gap:0;padding:0;background:none;border:0;border-radius:10px;font-size:0;outline:none;cursor:default}
.ftile .fface{position:relative;display:block;width:62px;height:78px;border-radius:9px;background:#fff;border:1px solid var(--border);box-shadow:0 1px 2px rgba(0,0,0,.06);overflow:hidden;transition:transform .14s ease,box-shadow .14s ease}
.ftile:hover .fface,.ftile:focus .fface{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.12)}
.ftile.multi .fface{box-shadow:3px -3px 0 -1px #fff,3px -3px 0 0 var(--border2),6px -6px 0 -2px #fff,6px -6px 0 -1px var(--border)}
.ftile.multi:hover .fface{box-shadow:3px -3px 0 -1px #fff,3px -3px 0 0 var(--border2),6px -6px 0 -2px #fff,6px -6px 0 -1px var(--border),0 8px 18px rgba(0,0,0,.12)}
.ftile.waiting .fface{border-style:dashed}
.ftile .fthumb{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.ftile .fdoc{display:flex;flex-direction:column;gap:5px;padding:11px 9px}
.ftile .fdoc i{display:block;height:3px;border-radius:2px;background:#e4e7ec}
.ftile .fdoc i:nth-child(1){width:62%;background:#d3d8df}.ftile .fdoc i:nth-child(3){width:86%}.ftile .fdoc i:nth-child(5){width:70%}.ftile .fdoc i:nth-child(6){width:44%}
.ftile .fsnip{display:block;padding:6px 6px 0;font:6.4px/1.3 var(--sans);color:#5e6470;height:100%;overflow:hidden;word-break:break-word}
.ftile .fbadge{position:absolute;left:5px;bottom:5px;padding:2px 4px;border-radius:4px;font:700 8px/1.1 var(--sans);letter-spacing:.3px;color:#fff;background:#6e7580}
.ftile[data-badge="PDF"] .fbadge{background:#e0553d}
.ftile[data-badge="DOC"] .fbadge,.ftile[data-badge="DOCX"] .fbadge,.ftile[data-badge="PAGE"] .fbadge,.ftile[data-badge="RTF"] .fbadge{background:#2b6fd6}
.ftile[data-badge="XLS"] .fbadge,.ftile[data-badge="XLSX"] .fbadge,.ftile[data-badge="CSV"] .fbadge{background:#1e8e3e}
.ftile[data-badge="PPT"] .fbadge,.ftile[data-badge="PPTX"] .fbadge,.ftile[data-badge="KEY"] .fbadge{background:#d9731a}
.ftile.pic[data-kind="Image"] .fbadge{display:none}
.ftile .fname{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ftile .chx{position:absolute;top:-7px;right:-7px;width:19px;height:19px;padding:0;border:0;border-radius:50%;background:var(--text);color:var(--card);font:600 12px/19px var(--sans);text-align:center;cursor:pointer;opacity:0;transition:opacity .12s}
.ftile:hover .chx,.ftile:focus-within .chx{opacity:1}
.me{flex-wrap:wrap}
.me .ftiles{flex-basis:100%;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:8px}
.fcard{position:absolute;z-index:70;min-width:220px;max-width:300px;padding:10px 12px;background:var(--card);border:1px solid var(--border2);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.16);font-size:12.5px;color:var(--text);pointer-events:none;animation:fcard-in .12s ease-out}
@keyframes fcard-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.fcard .fct{font-weight:600;margin-bottom:6px;overflow-wrap:anywhere}
.fcard dl{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:0}
.fcard dt{color:var(--text3)}.fcard dd{margin:0}
.fcard .fcn{margin-top:8px;color:var(--text3);font-size:11.5px;line-height:1.35}
/* CONNECTORS AND SKILLS (item 9, 25 Sep 2026) — between Grok's and Claude's: Yours / Discover, a search, the one dark
   button; what you have as a table; the catalogue as a two-column list by category with the brand's mark */
.sfmain .psec:has(.cxhead){max-width:960px}
.cxhead{display:flex;align-items:center;gap:10px;margin:2px 0 12px;flex-wrap:wrap}
.cxhead .pfind{flex:1;min-width:160px;margin:0;border-radius:999px;padding:7px 14px}
.seg{display:inline-flex;background:var(--gbg);border-radius:999px;padding:3px}
.segb{border:0;background:transparent;border-radius:999px;padding:6px 14px;font:500 13px var(--sans);color:var(--text2);cursor:pointer}
.segb.on{background:var(--card);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.pill.dark{background:var(--text);color:var(--card)}.pill.dark:hover{opacity:.88}.pill.dark:disabled{opacity:.45;cursor:default}
.lgtile{flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:var(--card);border:1px solid var(--border);overflow:hidden}
.lgtile img{width:22px;height:22px;object-fit:contain}
.lgtile.lginit{border:0;color:#fff;font:600 15px var(--sans);background:hsl(var(--h,210) 38% 46%)}
.cxth{display:grid;grid-template-columns:minmax(0,1fr) 150px 110px auto;gap:12px;padding:6px 4px;font-size:12px;color:var(--text3);border-bottom:1px solid var(--border)}
.cxrow{display:grid;grid-template-columns:minmax(0,1fr) 150px 110px auto;gap:12px;align-items:center;padding:10px 4px;border-bottom:1px solid var(--border)}
.cxwho{display:flex;align-items:center;gap:12px;min-width:0}.cxwho>span:last-child{display:flex;flex-direction:column;min-width:0}
.cxwho small{color:var(--text3);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cxtype{font-size:13px;color:var(--text2)}.chipk{font-style:normal;font-size:11px;background:var(--gbg);border-radius:6px;padding:2px 6px;margin-left:6px;color:var(--text2)}
.cxstate{font-size:13px;color:var(--text2)}.cxstate.ok{color:var(--green);font-weight:600}
.cxacts{display:flex;gap:6px;align-items:center}
.cxsec{margin:18px 0 6px}.cxsect{font-weight:600;font-size:14px;margin:0 0 6px 2px}
.cxgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 18px}
.cxcard{display:flex;align-items:center;gap:12px;text-align:left;border:0;background:transparent;border-radius:12px;padding:10px 8px;cursor:pointer;font:inherit;color:inherit}
.cxcard:hover{background:var(--gbg)}.cxcard.blocked{opacity:.6}
.cxct{flex:1;display:flex;flex-direction:column;min-width:0}.cxct b{font-weight:500;font-size:14px}.cxct small{color:var(--text3);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cxadd2{height:28px;padding:0 12px;font-size:12.5px;pointer-events:none}
.cxsheet .sehead{gap:10px}.cxsheet .sehead .cxwho{flex:1}
.cxdoes{font-size:14px;color:var(--text2);margin:4px 0 10px;line-height:1.45}
.cxabout{border:1px solid var(--border);border-radius:14px;padding:6px 12px 10px}
.cxai{display:flex;gap:10px;align-items:flex-start;padding:8px 0}.cxai i{flex:none;width:18px;height:18px;color:var(--text2);margin-top:1px}.cxai i svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.cxai span{display:flex;flex-direction:column;gap:2px}.cxai b{font-weight:500;font-size:13.5px}.cxai small{color:var(--text3);font-size:12.5px;line-height:1.4}
.cxaddr{font-size:12px;color:var(--text3);margin-top:8px;overflow-wrap:anywhere}.cxfine{font-size:12px;color:var(--text3);margin-top:12px}
.skrow{grid-template-columns:auto auto minmax(0,1fr) minmax(110px,.7fr) auto auto auto}
.skrow .sktext{display:flex;flex-direction:column;min-width:0}.skrow .skphrase{color:var(--text3);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.skmdl{margin-top:18px}
.skpanel textarea.skdesc{min-height:64px}
@media (max-width:700px){.cxgrid{grid-template-columns:1fr}.cxth{display:none}.cxrow{grid-template-columns:minmax(0,1fr) auto}.cxrow .cxtype,.cxrow .cxstate{display:none}.skrow{grid-template-columns:auto minmax(0,1fr) auto auto}.skrow .skdate,.skrow .skcomment{display:none}}

/* A ROW A SEARCH HIDES IS GONE (25 Sep 2026: the searches set [hidden], and every row's own display rule — flex, grid —
   beat the browser's, so the list never shrank on screen while the attribute said it had) */
.sfmain [hidden],.sfull [hidden]{display:none !important}
.cxsheet .note{text-align:left}
/* THE MAC APP'S HOSTS (25 Sep 2026) — the same panel in the app's windows. In the bar there is only the composer, on a
   transparent window the host rounds and shadows; in mini Ask a small header (close · new chat · the full Ask), the chat,
   and the composer — Gemini's size, our look. The window's size, place and animation are the host's. */
html:has(.ask[data-host="mini"]),html:has(.ask[data-host="mini"]) body{background:transparent !important}
.ask[data-host="mini"]{display:flex;flex-direction:column;background:transparent}
.ask[data-host="mini"] .rail,.ask[data-host="mini"] .drawer,.ask[data-host="mini"] .rtab,.ask[data-host="mini"] .head,.ask[data-host="mini"] .cfoot,
.ask[data-host="mini"] .canvas,.ask[data-host="mini"] .splitter,.ask[data-host="mini"] .ltab{display:none !important}
/* MINI ASK, EDGE TO EDGE (CEO, 25 Sep 2026, at the Mac app's mini beside Gemini's: "make chatbox WHITE (like google)", "cut left and
   right margins down to 5mm (we need as much real estate as we can)", "extend chatbox all the way out (almost 1cm of missed
   space)"). The missed centimetre was the side rail's 46 px, kept after mini hides the rail. The text runs 5 mm from each edge
   (20 px), an answer uses the whole width, and the chatbox is white with a hairline and a soft shadow, as Google draws it. */
.ask[data-host="mini"]>.thread,.ask[data-host="mini"]>.composer,.ask[data-host="mini"]>.head{margin-left:0}
.ask[data-host="mini"] .composer{padding:6px 8px 8px}
.ask[data-host="mini"] .box{background:var(--card);border:1px solid var(--border2);box-shadow:0 2px 10px rgba(0,0,0,.08)}
.ask[data-host="mini"][data-mstate="mini"] .thread .ai{max-width:100%}
.ask[data-host="mini"][data-mstate="mini"] .thread .me{max-width:88%}
.ask[data-host="mini"][data-mstate="bar"] .mhead,.ask[data-host="mini"][data-mstate="bar"] .thread{display:none}
.ask[data-host="mini"][data-mstate="bar"] .composer{flex:1;display:flex;flex-direction:column;justify-content:flex-end}
/* a menu's room (painter.js openMenu, 30 Sep 2026): the window grew clear space above the bar, or below it near the top of the
   screen — the bar stays where it was on the screen, so it keeps to the edge it sits on */
.ask[data-host="mini"][data-mstate="bar"][data-room="down"] .composer{justify-content:flex-start}
.ask[data-host="mini"][data-mstate="mini"]{background:var(--card);border-radius:22px}
.ask[data-host="mini"] .mhead{display:flex;align-items:center;gap:6px;padding:10px 10px 2px}
.ask[data-host="mini"] .mhead .ib{width:34px;height:34px;border-radius:50%;background:var(--gbg)}
.ask[data-host="mini"][data-mstate="mini"] .thread{flex:1;min-height:0;padding:10px 20px}
.ask[data-host="mini"][data-mstate="mini"] .thread .greet{font-size:20px}
.ask[data-host="mini"] .barfull{display:none}
.ask[data-host="mini"][data-mstate="bar"] .voice:hover .barfull,.ask[data-host="mini"][data-mstate="bar"] .barfull:focus-visible{display:inline-flex}
/* the full window in the app keeps everything; only the lock page differs (the host signs the Mac in) */
.ask[data-host] .lockscreen .pill.big{margin-top:14px}

/* SKILLS: a list to select from, and the skill itself beside it (CEO, 25 Sep 2026: "you cant even select one … view") */
.skbody{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px;align-items:start}
.skbody .skrow{grid-template-columns:auto auto minmax(0,1fr) auto auto auto;cursor:pointer;border-radius:12px;padding:8px 8px}
.skbody .skrow .skdate{font-size:11.5px}.skbody .skrow .skcomment{grid-column:3/-1;grid-row:2;font-size:12px}
.skbody .skrow:hover{background:var(--gbg)}
.skbody .skrow.on{background:var(--gbg);box-shadow:inset 3px 0 0 var(--blue)}
.skdetail{position:sticky;top:8px;border:1px solid var(--border);border-radius:16px;padding:16px 18px;background:var(--card);min-height:220px}
.skdhead{display:flex;gap:12px;align-items:flex-start}.skdt{display:flex;flex-direction:column;gap:3px;min-width:0}
.skdname{font-size:17px;letter-spacing:-.01em}.skddesc{color:var(--text2);font-size:13.5px;line-height:1.45}
.skdacts{display:flex;gap:8px;margin:14px 0 10px;flex-wrap:wrap}
.pill.ghost.danger{color:#c62828}
.skdhow{font-size:12.5px;color:var(--text2);margin-bottom:6px}.skdhow code{font:12.5px ui-monospace,Menlo,monospace;background:var(--gbg);border-radius:6px;padding:2px 7px;color:var(--text)}
.skdins{white-space:pre-wrap;font-size:13.5px;line-height:1.55;background:var(--gbg);border-radius:12px;padding:12px 14px;max-height:360px;overflow:auto;margin-top:4px}
.skdfacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;margin-top:14px}
.skdf{display:flex;flex-direction:column;gap:1px;font-size:11.5px;color:var(--text3);text-transform:uppercase;letter-spacing:.03em}
.skdf b{font-size:13px;color:var(--text);font-weight:600;text-transform:none;letter-spacing:0}
.skdnote{font-size:13px;color:var(--text2);margin-top:2px}
.skundo{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--gbg);border-radius:12px;padding:8px 10px;margin-bottom:12px;font-size:13px}
.skmd{margin-top:16px}.skmd summary{cursor:pointer;color:var(--text2);font-size:13px}.skmd[open] summary{margin-bottom:8px}
.skbody .cxcard.on{outline:2px solid var(--blue);outline-offset:-2px}
@media (max-width:900px){.skbody{grid-template-columns:1fr}.skdetail{position:static}}

/* 25 Sep 2026 (the Connectors page, "more info from their site"): the maker's own words, a link to its site, the server's own
   account of itself and what it offers; a row of yours opens its sheet */
.cxsite:empty{display:none}.cxsite{display:flex;flex-direction:column;gap:6px;margin:10px 0 4px}
.cxquote{margin:0;padding:10px 12px;border-left:3px solid var(--border2);background:var(--gbg);border-radius:0 10px 10px 0;font-size:13.5px;line-height:1.5;color:var(--text)}
.cxvisit{align-self:flex-start;font-size:13px;font-weight:600;color:inherit;text-decoration:underline;text-underline-offset:2px}
.cxsrv:empty{display:none}.cxsrv{display:flex;flex-direction:column;gap:6px;margin:8px 0}.cxsrvt{font-size:12.5px;color:var(--text2)}
.cxtools summary{cursor:pointer;font-weight:600;font-size:13px;margin:4px 0}.cxtool{display:flex;flex-direction:column;gap:1px;padding:5px 0;border-top:1px solid var(--border)}
.cxtool code{font:12.5px var(--mono)}.cxtool small{color:var(--text2);line-height:1.4}
.cxrow.cxopen{cursor:pointer}.cxrow.cxopen:hover{background:var(--hover)}.cxrow.cxopen:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.cxmark{margin:4px 0 0;padding:6px 10px;border-radius:10px;background:var(--gbg);color:var(--text2);font-size:12px;line-height:1.45}
.cxmark::before{content:"⤴ ";color:var(--text3)}

/* THE DOCUMENTS HANG FROM THE LINE THEY RODE WITH (CEO, 25 Sep 2026: "Chips to hang 70% OUTSIDE the text box after enter hit, 15deg
   tilt"). The row sits on the bubble's bottom edge, 70% of it below; the bubble keeps room for the 30% inside so no word is
   covered, and the thread keeps room for the 70% below. Each tile carries its own tilt (--tilt, set where it is drawn). */
.me.hangs{padding-bottom:36px;margin-bottom:62px}
/* ONE ROW, NEVER WRAPPED, anchored to the bubble's right edge so it grows left into the thread's free space and never off the
   window (25 Sep: five tiles on "what do these say?" wrapped into three rows, covered the question and ran off the right edge) */
.me .ftiles.hang{position:absolute;right:16px;left:auto;bottom:0;transform:translateY(70%);display:flex;flex-wrap:nowrap;justify-content:flex-start;width:max-content;align-items:flex-end;gap:0;margin:0;z-index:1}
.me .ftiles.hang .ftile{margin-right:-14px}
.me .ftiles.hang .ftile .fface{transform:rotate(var(--tilt,9deg));transform-origin:50% 60%;box-shadow:0 6px 18px rgba(0,0,0,.14)}
.me .ftiles.hang .ftile:hover .fface,.me .ftiles.hang .ftile:focus .fface{transform:rotate(var(--tilt,9deg)) translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.18)}

/* THE iPHONE HOST (Ask 4.0, CEO 27 Sep 2026): the web screen without the left band — ☰ and the pen in the header, no lock (the
   phone locks itself) and no Save-agent disc (it is under +) — with hold to talk and Ask · Assistant, in the mode's colour */
.ask[data-host="iphone"] .rail,.ask[data-host="iphone"] .lockchip,.ask[data-host="iphone"] .saveagent,.ask[data-host="iphone"] .brand{display:none !important}
.ask[data-host="iphone"]>.thread,.ask[data-host="iphone"]>.composer,.ask[data-host="iphone"]>.head{margin-left:0}
.ask[data-host="iphone"] .drawer,.ask[data-host="iphone"] .pane,.ask[data-host="iphone"] .canvas{left:0}
.ask[data-host="iphone"]{--pacc:#C8950A}
.ask[data-host="iphone"][data-pmode="assistant"]{--pacc:#1E9E5E}
.ask[data-host="iphone"]>.head{gap:6px;padding:8px 10px}
.ask[data-host="iphone"] .composer{padding-bottom:6px}
.ask[data-host="iphone"] .pmenu,.ask[data-host="iphone"] .pnew{flex:none}
.pmodebar{display:flex;justify-content:center;align-items:center;gap:2px;padding:6px 0 0}
/* the phone's rows, fixed: the header, Ask · Assistant, the thread (it takes the height), the docked circle, the composer — an
   element added to the page must never become the row that stretches */
.ask[data-host="iphone"]{grid-template-rows:auto auto minmax(0,1fr) auto auto}
.ask[data-host="iphone"]>.head{grid-row:1}.ask[data-host="iphone"]>.pmodebar{grid-row:2}.ask[data-host="iphone"]>.thread{grid-row:3}
.ask[data-host="iphone"]>.porbwrap{grid-row:4}.ask[data-host="iphone"]>.composer{grid-row:5}
.pmodeb{border:0;background:transparent;color:var(--text3);font:12.5px var(--sans);padding:4px 14px;border-radius:14px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pmodeb.on{color:var(--text);background:var(--hover);font-weight:600;box-shadow:inset 0 -2px 0 var(--pacc)}
.porbwrap{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 0 6px}
.porb{width:84px;height:84px;border-radius:50%;border:2px solid var(--pacc);background:transparent;color:var(--pacc);display:grid;place-items:center;padding:0;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;transition:transform .12s ease,background-color .12s ease,color .12s ease}
.porb svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.porb[data-hold="recording"]{background:var(--pacc);color:#fff;transform:scale(1.08)}
.porb[data-hold="taken"]{transform:scale(.96)}
.porbwrap.dock{padding:4px 0 0}
.porbwrap.dock .porb{width:52px;height:52px}
.porbwrap.dock .porb svg{width:22px;height:22px}
.porbnote{font:12px var(--sans);color:var(--text3);min-height:15px;text-align:center;max-width:300px}
.me.held{opacity:.55}
/* Settings on the phone: one column, the section alone under its own name — the app's own list is the way between sections */
.ask[data-host="iphone"] .sfnav{display:none}
.ask[data-host="iphone"] .sfmain{padding:14px 14px 40px;overflow-x:hidden;min-width:0}
.ask[data-host="iphone"] .sfmain .psec{max-width:100%}
.ask[data-host="iphone"] .sfmain *{max-width:100%;overflow-wrap:anywhere}
/* no zoom on the phone when a field is tapped: iOS enlarges the page for text under 16 px (Ask 4.0's walk, 27 Sep 2026 — the
   header slid half under the status bar); the chatbox's hint line follows the chatbox */
.ask[data-host="iphone"] .box textarea,.ask[data-host="iphone"] .tahint{font-size:16px;line-height:22px}
.ask[data-host="iphone"] input:not([type=checkbox]):not([type=radio]):not([type=range]),.ask[data-host="iphone"] select,.ask[data-host="iphone"] textarea{font-size:16px}
/* + › Skills and + › Plugins (28 Sep 2026): a skill's line under its name stays one line in a list beside the menu; the whole
   line is in the row's title. On a narrow screen the next menu lies over this one and starts with its way back. */
.menu.sub .ml small{max-width:34ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu .mback{font-weight:600;color:var(--text2)}
/* RECORD A SKILL: the bar above the question box — a dot that is lit while it listens, the time, the steps as they are said */
.slip.recorder{display:flex;flex-direction:column;gap:6px}
.slip.recorder [hidden]{display:none!important}
.slip.recorder .rechint{text-align:left;margin:0}
.rechead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rechead .spacer{flex:1}
.recdot{width:10px;height:10px;border-radius:50%;background:var(--text3);flex:none;box-shadow:0 0 0 calc(var(--lvl,0) * 6px) color-mix(in srgb,var(--red) 25%,transparent);transition:box-shadow .08s linear}
.recdot.on{background:var(--red)}
.slip.recorder.paused .recdot{background:var(--text3)}
.recclock{font-variant-numeric:tabular-nums;color:var(--text3);font-size:12.5px}
.recvideo{width:72px;height:44px;object-fit:cover;border-radius:6px;background:#000}
.rechint.err{color:var(--red)}
.slip.recorder .reclive{min-height:22px;color:var(--text2);font-style:italic;resize:none}
.recsteps{margin:0;padding:0 0 0 22px;display:flex;flex-direction:column;gap:6px;max-height:40vh;overflow:auto}
.recstep{display:flex;align-items:flex-start;gap:8px}
.recstep::marker{color:var(--text3);font-variant-numeric:tabular-nums}
.recstep .recshot{width:120px;border-radius:6px;border:1px solid var(--border);flex:none}
.recstep .recword{flex:1;min-height:22px;resize:none;overflow:hidden}
.recstep.pending .recword{color:var(--text3)}
.slip.recorder .recadd{width:100%}
.recreview{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--border);padding-top:8px}
.recconfirm{align-items:center;justify-content:flex-start}
/* PLUGINS: what a plugin adds, one line each, before it is added */
.plskills{display:flex;flex-direction:column;gap:10px;margin:6px 0 4px}
.plskill{display:flex;flex-direction:column;gap:2px;font-size:13px;line-height:1.35}
.plskill code{font-size:12px;color:var(--text);overflow-wrap:anywhere}
/* its line, two lines of it; the whole of it on hover (the row's title) */
.plskill span{color:var(--text2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.skdacts:has(.note){align-items:center}.skdacts .note{margin:0}
.plundo{margin-top:4px}
@media (max-width:640px){.recstep .recshot{width:84px}}
/* FROZEN (CEO, 29 Sep 2026: "Love the layout … You can freeze them into place") — change neither without the CEO.
   SOURCE TAGS AND THE ANSWER'S TAG (CEO, 29 Sep 2026): a link in an answer is a small tag with the site's name, and what the checker
   found and how the answer was made sit behind one tag under it — the dot and its word in sight. A press opens a small box beside the
   tag; it goes when the pointer leaves it, on a press elsewhere, on Esc or when the chat scrolls. */
.srctag{display:inline-flex;align-items:center;height:18px;max-width:22ch;padding:0 7px;margin:0 0 0 2px;border:0;border-radius:999px;background:var(--gbg);color:var(--text2);font:500 11.5px var(--sans);vertical-align:1px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srctag:hover,.srctag.open{background:var(--hover);color:var(--text)}
.anstag{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 6px 0 7px;margin-left:-7px;border:0;border-radius:999px;background:transparent;color:var(--text2);font:500 12px var(--sans);cursor:pointer}
.anstag:hover,.anstag.open{background:var(--gbg)}
.anstag .achev{display:inline-flex;opacity:.5}
.anstag .achev svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.anstag .ainfo{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;border:1.3px solid var(--text3);font:700 9px/1 var(--sans);color:var(--text3)}
.ai[data-made] .foot,.ai[data-made] .steps{display:none}
.popbox{position:absolute;z-index:30;max-width:min(440px,calc(100% - 16px));background:var(--card);border:1px solid var(--border2);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.16);padding:10px 12px;font-size:12.5px;line-height:1.45;color:var(--text)}
.popbox .srct{font-weight:600;margin-bottom:4px}
.popbox .srcurl,.popbox .apc a{color:var(--blue);text-decoration:none;word-break:break-all}
.popbox .srcurl:hover,.popbox .apc a:hover{text-decoration:underline}
.popbox .aph{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.popbox .aph .meta{margin-left:auto;font:11px var(--mono);color:var(--text3)}
.popbox .apl{margin:10px 0 3px;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--text3)}
.popbox .apc{display:flex;align-items:baseline;gap:6px;margin:2px 0}
.popbox .apc small{color:var(--text3);flex:none}
.popbox .apv{color:var(--text3);width:10px;flex:none}
.popbox .apv.ok{color:var(--green)}
.popbox .apn{color:var(--text2);margin:2px 0}
.popbox .aps,.popbox .apr{font:11.5px/1.6 var(--mono);color:var(--text2)}
/* THE MAC APP'S TITLE ROW (CEO, 29 Sep 2026: "proper design language"): the header IS the transparent title bar — 32 pt, the traffic
   lights centred 16 pt down and ending 69 pt in — so the pen, Ask and the chips sit on the lights' line, after them, and everything
   that stood at the top of the window begins under the row. */
.ask[data-host="app"]>.head{margin-left:0;height:33px;min-height:33px;box-sizing:border-box;padding:0 10px 0 80px;gap:6px}
/* 30 Sep 2026: the pen is the rail's again (right under the lights); the right corner holds the way down to mini Ask */
.ask[data-host="app"] .head .tomini{width:26px;height:26px;border-radius:7px;flex:none;margin-left:2px}
.ask[data-host="app"] .head .tomini svg{width:16px;height:16px}
.ask[data-host="app"] .head .brand{font-size:13px;padding:0 6px;margin-left:0;margin-right:2px}
.ask[data-host="app"] .head .chip{height:22px;font-size:12px;padding:0 9px}
.ask[data-host="app"] .rail,.ask[data-host="app"] .drawer,.ask[data-host="app"] .canvas,.ask[data-host="app"] .pane,.ask[data-host="app"] .sfull{top:33px}
/* the answer box's last line: seconds from the Enter press to everything on screen (CEO, 29 Sep 2026) */
.popbox .aptotal{font:600 13px var(--sans);color:var(--text)}
/* SCHEDULED TASKS (30 Sep 2026): a task's page, the repeat in the dialog, the next run on its row (painter.js openAgentPage) */
.agline.on{color:var(--blue)}
.agname[data-open]{cursor:pointer}.agname[data-open]:hover{text-decoration:underline;text-underline-offset:3px}
.agrepeat{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:2px 0 6px}
.agrepeat select,.agrepeat input[type=time]{font:inherit;font-size:13px;padding:5px 8px;border:1px solid var(--border2);border-radius:8px;background:var(--card);color:var(--text)}
.agdlg.agpage{width:min(880px,calc(100vw - 32px));max-height:calc(100vh - 64px);overflow:auto}
.agphead{display:flex;align-items:center;gap:6px}.agphead .ptitle{flex:1;font-size:20px;font-weight:650}
.agphead .agrun{margin-left:6px}
.agstate{display:flex;align-items:center;gap:10px;padding:6px 18px 14px;border-bottom:1px solid var(--border)}
.agchipstate{font-size:12px;padding:2px 9px;border-radius:999px;background:var(--gbg2);color:var(--text2)}
.agchipstate.on{background:rgba(30,142,62,.14);color:var(--green)}
.agcols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:28px;padding:14px 18px 18px}
.aghist,.agside{display:flex;flex-direction:column;gap:2px;min-width:0}
.agrunrow{display:flex;align-items:center;gap:0;width:100%;text-align:left;border:0;border-bottom:1px solid var(--border);background:none;padding:11px 4px;font:inherit;font-size:14px;color:var(--text);cursor:pointer}
.agrunrow:hover{background:var(--hover)}.agrunrow:disabled{cursor:default}
.agrunrow .agtrig{color:var(--text3);margin-left:.35em}
.agrunrow .agdot{margin-left:auto;width:8px;height:8px;border-radius:50%;background:var(--blue);flex:none}
.agrunrow[data-state="failed"] .agdot{background:var(--red)}.agrunrow[data-state="skipped"] .agdot{background:var(--amber)}
.agrunrow[data-state="stopped"] .agdot{background:var(--text3)}.agrunrow[data-state="running"] .agdot{background:var(--amber);animation:agpulse 1.2s ease-in-out infinite}
@keyframes agpulse{50%{opacity:.35}}
.aginstr{white-space:pre-wrap;font-size:14px;line-height:1.5;color:var(--text);margin-bottom:10px}
.agrep{font-size:14px;color:var(--text);margin-bottom:10px}
@media (max-width:640px){.agcols{grid-template-columns:minmax(0,1fr)}.agphead .ptitle{font-size:17px}}

/* WHERE THE ASK WINDOW OPENS (CEO, 12 Oct 2026): a row of small screens, one chosen — each choice a card with the screen, the
   part of it the window takes, and its name; the chosen one ringed in the accent */
.wplace{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;width:100%;margin-top:4px}
.wpopt{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 10px 12px;border-radius:14px;background:var(--gbg);cursor:pointer;
  box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .18s ease,background .18s ease,transform .18s ease}
.wpopt:hover{background:var(--gbg2)}
.wpopt:active{transform:scale(.985)}
.wpopt input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.wpopt:has(input:checked){background:var(--blue-soft);box-shadow:inset 0 0 0 2px var(--blue)}
.wpopt:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
.wpscreen{position:relative;display:block;width:100%;max-width:132px;aspect-ratio:16/10;border-radius:8px;background:linear-gradient(160deg,#dfe6f1,#c9d3e2);
  box-shadow:0 0 0 1px rgba(0,0,0,.14),0 6px 14px -8px rgba(0,0,0,.35);overflow:hidden}
.ask[data-theme="dark"] .wpscreen{background:linear-gradient(160deg,#39404d,#262b36);box-shadow:0 0 0 1px rgba(255,255,255,.14),0 6px 14px -8px rgba(0,0,0,.6)}
.wpbar{position:absolute;left:0;right:0;top:0;height:7%;background:rgba(255,255,255,.55)}
.ask[data-theme="dark"] .wpbar{background:rgba(255,255,255,.12)}
.wpwin{position:absolute;box-sizing:border-box;border:2px solid transparent;background:var(--blue) padding-box;border-radius:5px;opacity:.9;transition:opacity .18s ease}
.wpwin.wpfree{left:26%;top:24%;width:46%;height:50%;background:transparent;border:1.5px dashed var(--text3);opacity:1}
.wpopt:not(:has(input:checked)) .wpwin:not(.wpfree){background:var(--text3) padding-box;opacity:.55}
.wpwords{display:flex;flex-direction:column;align-items:center;gap:1px;text-align:center}
.wpwords b{font-size:13px;font-weight:600;color:var(--text)}
.wpwords small{font-size:11.5px;color:var(--text3);line-height:1.3}
.note.wpanswer{color:var(--text2)}
@media (max-width:560px){.wplace{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.wpopt,.wpwin{transition:none}}
@media (prefers-color-scheme: dark){ .ask:not([data-theme="light"]) .wpscreen{background:linear-gradient(160deg,#39404d,#262b36);box-shadow:0 0 0 1px rgba(255,255,255,.14),0 6px 14px -8px rgba(0,0,0,.6)}
  .ask:not([data-theme="light"]) .wpbar{background:rgba(255,255,255,.12)} }