/* * The console. * * Same palette as the marketing site — sampled from Grok Bot — and the same * `data-zt` theme attribute, deliberately not `data-theme`, which preview * panes stamp on and would fight the toggle. * * Mobile first, and mobile-only in its assumptions: a founder reads this on a * phone between other things. The one layout change above 720px is that the * bottom tab bar becomes a side rail, because a thumb-height tab bar on a * desktop is a phone app someone forgot to finish. */ :root{ --bg:#0A0A0A; --bg-2:#0F0F0F; --surface:#1A1A1A; --surface-2:#202020; --line:#1F2228; --line-2:rgba(255,255,255,.075); --ink:#FFFFFF; --ink-2:#D5D9E2; --muted:#9598A1; --faint:#6C6F77; --zug:#DA291C; --iris:#B6B3F9; --cyan:#4AD8EC; --amber:#DA291C; --rose:#FF99A8; --moss:#3BC9B0; --slate:#A8ADB8; --grad:#DA291C; --c-dom:#DA291C; --c-saentis:#3B82F6; --c-eiger:#22C55E; --c-pilatus:#A78BFA; --c-titlis:#F59E0B; --c-gotthard:#F97316; --c-zermatt:#EC4899; --c-matterhorn:#06B6D4; /* Surfaces that differ per theme are tokens, never theme-scoped rules on the same class. `:root[data-zt=light] .btn` out-specifies `.btn--go`, so the primary button silently rendered white-on-white in light mode. A token cannot lose that argument. */ --btn-bg:rgba(255,255,255,.06); --raised:rgba(255,255,255,.05); /* The console surfaces from the marketing site, verbatim: a panel is a gradient over blur, not a flat fill. It is what makes the thing read as Grok's console rather than as a settings screen. */ --glass:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.028)); --glass-2:rgba(255,255,255,.045); --glass-3:rgba(255,255,255,.035); --rail-bg:rgba(0,0,0,.18); --stance-bg:var(--surface-2); --r-s:12px; --r-m:18px; --r-l:26px; --pill:999px; --sans:"Schibsted Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif; --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --ease:cubic-bezier(.22,.68,.32,1); --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px); --tabs-h:calc(58px + var(--safe-b)); } :root[data-zt="light"]{ --bg:#FFFFFF; --bg-2:#F4F4F5; --surface:#FFFFFF; --surface-2:#F7F7F8; --line:rgba(10,10,10,.13); --line-2:rgba(10,10,10,.07); --ink:#0A0A0A; --ink-2:#26282D; --muted:#6B6D73; --faint:#8A8C93; --btn-bg:rgba(9,11,16,.03); --raised:rgba(9,11,16,.03); --glass:var(--surface); --glass-2:var(--surface); --glass-3:var(--bg-2); --rail-bg:var(--bg-2); --stance-bg:var(--bg-2); --c-dom:#DA291C; --c-saentis:#1D4ED8; --c-eiger:#15803D; --c-pilatus:#6D28D9; --c-titlis:#B45309; --c-gotthard:#C2410C; --c-zermatt:#BE185D; --c-matterhorn:#0E7490; } /* `hidden` must win over every display rule below. Without this a `display:flex` on the same element silently overrides the attribute, and the chrome shows on the sign-in screen. */ [hidden]{display:none!important} *{box-sizing:border-box} html,body{margin:0;padding:0} body{ background:var(--bg);color:var(--ink);font-family:var(--sans); font-size:16px;line-height:1.5;letter-spacing:-.011em; -webkit-font-smoothing:antialiased; padding-bottom:var(--tabs-h); overscroll-behavior-y:none; } a{color:inherit;text-decoration:none} button{font:inherit;color:inherit} .mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.05em} .skip{position:absolute;left:-9999px} .skip:focus{left:8px;top:8px;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:var(--r-s);z-index:99} :focus-visible{outline:2px solid var(--zug);outline-offset:2px;border-radius:8px} /* The sprite is markup, not a picture: it holds the every points at, and must take up no space. */ #sprite{position:absolute;width:0;height:0;overflow:hidden} /* ── the mark ─────────────────────────────────────────────────────────────── */ .bot{width:44px;height:44px;display:block;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))} :root[data-zt="light"] .bot{filter:drop-shadow(0 4px 10px rgba(9,11,16,.2))} .bot--boot{width:76px;height:76px} .bot--sm{width:30px;height:30px} .bot--mid{width:44px;height:44px;margin-inline:auto} /* * Per-agent and per-category tints. * * Custom properties inherit into the shadow tree, which is the only way * to colour one instance of a shared differently from another. As * classes rather than inline styles, because the CSP forbids inline styles — * so an injected style attribute cannot paint anything either. */ /* One colour per agent, the same seven as the site: Dom carries the brand red; Säntis glacier blue, Eiger green, Pilatus violet, Titlis amber, Gotthard copper, Zermatt rose. Approval categories borrow the agent that usually raises them. */ .bot[data-tint="CHIEF_OF_STAFF"]{--b-eye:var(--c-dom)} .bot[data-tint="LEDGER"],.bot[data-tint="MONEY_OUT"]{--b-eye:var(--c-saentis)} .bot[data-tint="SCOUT"],.bot[data-tint="CUSTOMER_FACING"]{--b-eye:var(--c-eiger)} .bot[data-tint="REGISTRAR"],.bot[data-tint="FILING"]{--b-eye:var(--c-pilatus)} .bot[data-tint="SENTINEL"],.bot[data-tint="CONTRACT"]{--b-eye:var(--c-titlis)} .bot[data-tint="FORGE"],.bot[data-tint="DATA_WRITE"]{--b-eye:var(--c-gotthard)} .bot[data-tint="CHORUS"],.bot[data-tint="SCHEDULING"]{--b-eye:var(--c-zermatt)} .bot[data-tint="MARKETING"]{--b-eye:var(--c-matterhorn)} .bot[data-tint="INTERNAL_NOTE"]{--b-eye:var(--muted)} /* Staggered, so a list of agents does not blink in unison. */ .bot[data-delay="1"]{--b-delay:.4s} .bot[data-delay="2"]{--b-delay:.9s} .bot[data-delay="3"]{--b-delay:1.5s} .bot[data-delay="4"]{--b-delay:2.2s} .b-eye{transform-box:fill-box;transform-origin:center;animation:blink 7s var(--b-delay,0s) infinite} .b-ant{transform-box:fill-box;transform-origin:50% 92%;animation:ant 6.4s var(--b-delay,0s) infinite} @keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}} @keyframes ant{0%,88%,100%{transform:rotate(0)}92%{transform:rotate(-7deg)}96%{transform:rotate(6deg)}} @media (prefers-reduced-motion:reduce){ .b-eye,.b-ant,.bot--boot{animation:none!important} *{animation-duration:.001ms!important;transition-duration:.001ms!important} } /* ── the messenger ─────────────────────────────────────────────────────────── A list of conversations on the left, one conversation on the right, as a desktop messenger draws it: a 262px sidebar with a search field, grouped rows (tile · name · role tag · time / preview), the person at the bottom; a pane with a header (stacked tiles, name, live pip, clock), the thread as bubbles grouped by sender under the sender's own colour, and a composer. On a phone the list and the thread are two screens. */ .app{display:grid;grid-template-columns:1fr;height:100dvh;overflow:hidden} .door{min-height:100dvh} .side{display:flex;flex-direction:column;min-height:0;background:var(--bg-2);border-right:1px solid var(--line-2)} .side__top{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--safe-t) + 14px) 16px 8px} .side__lamps{display:flex;gap:7px} .lamp{width:12px;height:12px;border-radius:50%} .lamp--r{background:#FF5F57}.lamp--y{background:#FEBC2E}.lamp--g{background:#28C840} .side__new{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;color:var(--muted);font-size:20px;line-height:1} .side__new:hover{background:var(--raised);color:var(--ink)} .side__search{display:flex;align-items:center;gap:8px;margin:4px 12px 10px;padding:0 10px;height:32px; border-radius:9px;background:var(--raised);border:1px solid var(--line-2);color:var(--faint)} .side__search svg{width:15px;height:15px;flex:none} .side__search input{flex:1;min-width:0;background:none;border:0;color:var(--ink);font:inherit;font-size:13.5px;outline:none} .side__search input::placeholder{color:var(--faint)} .side__list{flex:1;min-height:0;overflow-y:auto;padding:0 8px 12px} .side__head{margin:12px 8px 6px;font-size:10px;letter-spacing:.08em;color:var(--faint);text-transform:none} .side__empty{margin:2px 8px 8px;font-size:12.5px;color:var(--faint)} .side__row{position:relative;display:flex;align-items:center;gap:12px;padding:7px 10px;border-radius:10px;color:var(--ink);transition:background .15s} .side__row:hover{background:var(--raised)} .side__row.is-on{background:var(--surface-2)} .side__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px} .side__line{display:flex;align-items:center;gap:6px;min-width:0} .side__name{font-size:13.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .side__time{margin-left:auto;flex:none;font-size:10.5px;color:var(--faint)} .side__preview{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .side__dot{position:absolute;right:10px;bottom:12px;width:7px;height:7px;border-radius:50%;background:var(--zug)} .side__row--plain{gap:10px;color:var(--ink-2)} .side__ic{width:18px;height:18px;flex:none} .side__foot{padding:8px;border-top:1px solid var(--line-2)} .side__me{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none; background:var(--zug);color:#fff;font-size:12px;font-weight:800} .side__row--me .side__name{font-size:13px} /* The role tag: "Product", "Support" in the messenger; the agent's remit here. */ .tag{flex:none;font-size:9.5px;font-weight:600;letter-spacing:.01em;padding:2px 6px;border-radius:5px; background:var(--raised);border:1px solid var(--line-2);color:var(--muted);white-space:nowrap} /* The tile: the mark on a rounded square, as a contact picture. */ /* The tile: the mark itself, bare and big. No plate behind it. */ .tile{flex:none;width:42px;height:42px;display:grid;place-items:center} .tile .bot{width:42px;height:42px;filter:drop-shadow(0 3px 8px rgba(0,0,0,.4))} :root[data-zt="light"] .tile .bot{filter:drop-shadow(0 3px 8px rgba(9,11,16,.18))} .tile--xs{width:32px;height:32px} .tile--xs .bot{width:32px;height:32px} /* A group's picture: up to three marks clustered on one tile, as a messenger draws a group chat. */ .stack{flex:none;width:42px;height:42px;display:grid;grid-template-columns:1fr 1fr;place-items:center;gap:1px} .stack .tile{width:auto;height:auto} .stack .tile:nth-child(3){grid-column:1/-1} .stack .tile .bot{width:17px;height:17px;filter:none} .top__avatars .stack{width:32px;height:32px} .top__avatars .stack .tile .bot{width:13px;height:13px} .tile .bot[data-tint="APPROVALS"]{--b-eye:var(--zug)} /* ── the pane ─────────────────────────────────────────────────────────────── */ .pane{display:flex;flex-direction:column;min-height:0;min-width:0;background:var(--bg)} .top{ position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;flex:none; padding:calc(var(--safe-t) + 12px) 16px 12px; background:color-mix(in srgb,var(--bg) 82%,transparent); backdrop-filter:blur(24px);border-bottom:1px solid var(--line-2); } .top__avatars{display:flex;flex:none} .top__title{margin:0;font-size:15px;font-weight:600;letter-spacing:-.015em;min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .status{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px; letter-spacing:.1em;text-transform:uppercase;color:var(--moss)} .status i{width:6px;height:6px;border-radius:50%;background:var(--moss); box-shadow:0 0 0 0 color-mix(in srgb,var(--moss) 55%,transparent);animation:pulse 2.4s infinite} @keyframes pulse{70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}} .top__clock{margin-left:0;font-family:var(--mono);font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums} .top__back,.top__theme{ width:34px;height:34px;flex:none;display:grid;place-items:center;cursor:pointer; border:1px solid var(--line);border-radius:var(--pill);background:var(--raised);transition:background .18s } .theme__fill{opacity:0} :root[data-zt="dark"] .theme__fill{opacity:1} .main{flex:1;min-height:0;overflow-y:auto;padding:14px 16px 18px;overscroll-behavior:contain} /* The composer: a rounded field with + and a mic, as the messenger has. */ .composer{flex:none;display:flex;align-items:center;gap:10px;margin:0;padding:10px 14px calc(var(--safe-b) + 12px); border-top:1px solid var(--line-2);background:var(--bg)} .composer__plus,.composer__mic{width:30px;height:30px;display:grid;place-items:center;border-radius:50%; background:var(--raised);color:var(--muted);font-size:18px;flex:none} .composer__mic svg{width:16px;height:16px} .composer__in{flex:1;min-width:0;height:40px;padding:0 16px;border-radius:20px;border:1px solid var(--line); background:var(--surface);color:var(--ink);font:inherit;font-size:14px} .composer__in::placeholder{color:var(--faint)} .composer__in:disabled{opacity:.9} /* ── bubbles ──────────────────────────────────────────────────────────────── */ .day{margin:14px 0 10px;text-align:center;font-size:10.5px;color:var(--faint);letter-spacing:.02em} .sysline{margin:12px 0;text-align:center;font-size:11.5px;color:var(--faint)} .grp{margin:0 0 12px} .grp__who{display:block;margin:0 0 4px 36px;font-size:11.5px;font-weight:600;color:var(--who,var(--zug))} .grp__row{display:flex;align-items:flex-end;gap:8px} .grp__tile{margin-bottom:2px} .grp__msgs{display:flex;flex-direction:column;gap:6px;min-width:0;max-width:min(640px,88%)} .grp--you .grp__row{justify-content:flex-end} .msg{display:block;padding:10px 14px;border-radius:16px;background:var(--surface);border:1px solid var(--line-2); font-size:14.5px;line-height:1.45;color:var(--ink);word-wrap:break-word} .grp--you .msg{background:var(--surface-2)} .msg b{font-weight:600} .msg__meta{display:block;margin-top:2px;font-size:12px;color:var(--muted)} .msg__text{display:block;margin-top:6px;color:var(--ink-2)} .msg__step{display:block} .msg__step--gated::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--zug);margin-right:8px;vertical-align:1px} .msg--link{cursor:pointer;transition:background .15s} .msg--link:hover{background:var(--surface-2)} .msg--link .chip{margin-top:8px} .msg--card{padding:0;background:none;border:0;max-width:none} .msg--card .card{margin:0} .stance--in{margin:0;background:none;border:0;padding:0} /* ── plan & billing ──────────────────────────────────────────────────────── */ .plan__toggle{display:inline-flex;gap:3px;padding:3px;border:1px solid var(--line);border-radius:var(--pill);background:var(--raised);margin:0 0 12px} .plan__tg{border:0;background:none;cursor:pointer;border-radius:var(--pill);padding:7px 14px;font-size:13px;color:var(--muted);transition:background .2s,color .2s} .plan__tg.is-on{background:var(--ink);color:var(--bg)} .plan__save{font-family:var(--mono);font-size:9px;letter-spacing:.06em;margin-left:4px;opacity:.8} .plans{display:grid;grid-template-columns:1fr;gap:12px} .plan{position:relative;display:flex;flex-direction:column;margin:0} .plan--current{border-color:var(--muted)} .plan--hi{box-shadow:0 14px 40px -20px rgba(218,41,28,.5)} .plan__flag{position:absolute;top:-10px;left:16px;font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:var(--pill);background:var(--zug);color:#fff} .plan__name{font-size:17px;font-weight:700;letter-spacing:-.02em} .plan__price{font-size:30px;font-weight:700;letter-spacing:-.04em;margin:4px 0 0;font-variant-numeric:tabular-nums} .plan__per{font-size:13px;color:var(--muted);font-weight:500;margin-left:3px} .plan__sub{font-size:12.5px;color:var(--muted);margin:2px 0 12px} .plan__feats{list-style:none;margin:0;padding:0 0 14px;display:grid;gap:7px;font-size:13.5px;color:var(--ink-2);flex:1} .plan__feats li::before{content:"✓";color:var(--zug);margin-right:8px;font-weight:700} .plan__act .btn{width:100%} .plan__note{margin:10px 0 0;font-size:13px;color:var(--muted)} .plan__note--err{color:var(--rose)} .checkout{margin-top:14px;padding:15px 17px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--glass-2)} .checkout #checkout{min-height:420px;border-radius:12px;overflow:hidden;background:#fff} .link{color:var(--zug);font-weight:600} .tile .bot[data-tint="BILLING"]{--b-eye:var(--zug)} @media (min-width:900px){.plans{grid-template-columns:repeat(2,1fr)}} @media (min-width:1280px){.plans{grid-template-columns:repeat(4,1fr)}} /* ── the marketplace ─────────────────────────────────────────────────────── */ .mk .card__head .tag{margin-left:auto} .mk__row{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:12px;min-height:30px} .mk__note{margin:10px 0 0;font-size:13px;color:var(--muted)} .mk__fields{display:grid;gap:8px;margin:12px 0} .mk__in{width:100%;padding:11px 13px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font:inherit;font-size:14px} .mk__in:focus{outline:none;border-color:var(--muted)} .mk__in::placeholder{color:var(--faint)} .tile .bot[data-tint="MARKET"],.tile .bot[data-tint="ACTIVITY"]{--b-eye:var(--zug)} /* ── cards, chips and buttons (inside bubbles and on settings) ─────────────── */ .boot{min-height:60vh;display:grid;place-content:center;justify-items:center;gap:14px} .boot__note{color:var(--faint);font-size:11px;text-transform:uppercase;letter-spacing:.14em} .empty{text-align:center;padding:46px 20px;color:var(--muted)} .empty h2{margin:14px 0 6px;font-size:17px;color:var(--ink);font-weight:600} .empty p{margin:0;font-size:14.5px;max-width:34ch;margin-inline:auto} .err{border:1px solid rgba(255,153,168,.3);background:rgba(255,153,168,.07); border-radius:var(--r-m);padding:14px 16px;color:var(--rose);font-size:14.5px} .err--after{margin-top:12px} .card{ background:var(--glass-2);border:1px solid var(--line);border-radius:var(--r-m); padding:15px 17px;margin-bottom:12px;backdrop-filter:blur(10px) } :root[data-zt="light"] .card{box-shadow:0 1px 2px rgba(9,11,16,.05)} .card__head{display:flex;align-items:center;gap:10px;margin-bottom:10px} .card__t{font-weight:600;font-size:15.5px;letter-spacing:-.015em;flex:1;min-width:0} .card__sub{color:var(--ink-2);font-size:14.5px;margin:0;line-height:1.5} /* The line the whole product is about. */ .stance{ display:flex;gap:9px;align-items:flex-start; border:1px solid var(--line-2);border-radius:var(--r-s); background:var(--stance-bg);padding:11px 13px;margin-top:12px;font-size:13.5px;line-height:1.45 } .stance b{color:var(--ink);font-weight:600} .stance span{color:var(--muted)} .stance__i{flex:none;width:16px;height:16px;margin-top:2px;color:var(--zug)} .chip{ display:inline-flex;align-items:center;gap:5px;flex:none; font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase; border:1px solid var(--line);border-radius:var(--pill);padding:5px 9px;color:var(--muted) } .chip--prepared{color:var(--ink);border-color:var(--line)} .chip--waiting{color:var(--zug);border-color:rgba(218,41,28,.34);background:rgba(218,41,28,.09)} .chip--done{color:var(--muted);border-color:var(--line)} .chip--off{color:var(--faint)} .chip--live{color:var(--ink);border-color:var(--line)} .kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px;margin:12px 0 0} .kv dt{color:var(--muted)} .kv dd{margin:0;text-align:right;font-family:var(--mono);font-size:13px} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:12px 18px;border-radius:var(--pill);border:1px solid var(--line); background:var(--btn-bg);cursor:pointer;font-size:15px;font-weight:500; transition:transform .12s var(--ease),background .18s;width:100% } .btn:active{transform:scale(.985)} .btn:disabled{opacity:.5;cursor:not-allowed} .btn--go{--btn-bg:var(--ink);color:var(--bg);border-color:transparent;font-weight:600} .btn--no{--btn-bg:transparent;color:var(--rose);border-color:rgba(255,153,168,.34)} .btn__row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px} .btn--tiny{width:auto;flex:none;padding:7px 13px;font-size:13px} .btn__row--3{grid-template-columns:1fr 1fr 1fr} /* Audit-ready findings: severity chips by token, evidence as a quiet list. */ .chip--info{color:var(--muted);border-color:var(--line)} .chip--review{color:var(--ink);border-color:var(--line)} .chip--urgent{color:var(--zug);border-color:rgba(218,41,28,.34);background:rgba(218,41,28,.09)} .finding__ev{margin:10px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px} .finding__ev li{font-size:11px;color:var(--muted);border:1px solid var(--line-2);border-radius:var(--pill);padding:3px 8px} .btn--inline{width:auto;margin:0 0 8px 36px;padding:8px 14px;font-size:13px} .list{list-style:none;margin:0;padding:0} .row{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line-2)} .row:last-child{border-bottom:0} .row__main{flex:1;min-width:0} .row__t{font-size:15px;font-weight:500;letter-spacing:-.01em} .row__s{font-size:13px;color:var(--muted);margin-top:1px} .row__s--wrap{white-space:normal} /* Phone: the list is one screen and the thread is another. */ @media (max-width:899px){ .app{grid-template-columns:100%} .pane{display:none} body.is-thread .side{display:none} body.is-thread .pane{display:flex} } /* ── auth: the Revolut door ─────────────────────────────────────────────── Measured from business.revolut.com/signin and /signup on desktop, iPad and phone: a near-black page (#020408) with a faint cool glow top-left; a 352px column, left-aligned; the wordmark small at the top (centred on a phone); a 24px/700 title, a 15px muted line; a 48px field, radius 12, white at 14%, no border; a 44px white pill "Continue" at 15px/500; "or continue with" between hairlines, then round 44px icon buttons with 12px labels; "Don't have an account?" at 12px over a 44px pill in #191C1F. Here the door is a popup, not a page: the column sits in a 400px card over a blurred backdrop above a phone, and fills the screen on one. Dark in both themes, as Revolut's is. The only edit to the recipe is the palette: Swiss red where Revolut has blue. */ .auth{ position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center; padding:0;background:#020408; --a-bg:#020408;--a-ink:#FFFFFF;--a-ink2:rgba(255,255,255,.7);--a-faint:rgba(255,255,255,.5); --a-line:rgba(255,255,255,.14);--a-field:rgba(255,255,255,.14);--a-field-on:rgba(255,255,255,.2); --a-accent:#DA291C;--a-pill:#191C1F; color:var(--a-ink);font-family:var(--sans);letter-spacing:-.011em } /* the glow is painted into the background, not blurred over it: a blurred layer bleeds square past a rounded corner */ .auth{background:#020408 radial-gradient(70% 55% at 8% 0%,rgba(88,104,140,.26),transparent 70%) no-repeat} .auth__card{position:relative;width:100%;max-width:400px;padding:56px 24px 28px;overflow:visible;max-height:100dvh;overflow-y:auto} .auth__in{position:relative;max-width:352px;margin:0 auto} .auth__blob{display:none} .auth__close{ position:absolute;top:16px;right:16px;z-index:10;width:36px;height:36px; display:flex;align-items:center;justify-content:center;cursor:pointer; background:rgba(255,255,255,.1);border:0;border-radius:99px; font-size:14px;color:var(--a-ink);transition:transform .15s,background .15s } .auth__close:hover{background:rgba(255,255,255,.18);transform:scale(1.05)} .auth__brand{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 36px} .auth__mark{width:40px;height:40px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.55));--b-eye:var(--a-accent);--b-look-anim:mark-glance; animation:auth-breathe 6s ease-in-out infinite} .auth__wm{display:inline-flex;align-items:center;color:var(--a-ink)} .auth__wm .wm-svg{height:15px;width:auto;display:block;color:currentColor} .b-look{transform:translate(var(--b-dx,0px),var(--b-dy,0px));transition:transform .28s cubic-bezier(.2,.7,.2,1);animation:var(--b-look-anim,none) 9s ease-in-out infinite} @keyframes mark-glance{0%,18%{transform:translate(0,0)}22%,32%{transform:translate(2.6px,-1px)}36%,48%{transform:translate(-2.4px,.6px)}52%,60%{transform:translate(.6px,2.2px)}64%,100%{transform:translate(0,0)}} @keyframes auth-breathe{0%,100%{transform:scale(1);filter:drop-shadow(0 4px 10px rgba(0,0,0,.55))}50%{transform:scale(1.05);filter:drop-shadow(0 6px 12px rgba(0,0,0,.5)) drop-shadow(0 0 16px rgba(218,41,28,.35))}} @media (prefers-reduced-motion:reduce){.auth__mark{animation:none}.b-look{animation:none;transition:none}} .auth__progress{display:flex;gap:6px;margin:0 0 16px} .auth__progress i{flex:1;height:3px;border-radius:99px;background:rgba(255,255,255,.14)} .auth__progress i.is-on{background:#fff} .auth__h{margin:0 0 6px;font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--a-ink);text-align:left} .auth__sub{margin:0 0 16px;font-size:15px;font-weight:400;line-height:1.4;color:var(--a-ink2);text-align:left} .auth__form{display:block} .auth__input{ display:block;width:100%;height:48px;margin:0 0 10px;padding:0 12px;box-sizing:border-box; font:inherit;font-size:15px;color:var(--a-ink); background:var(--a-field);border:0;border-radius:12px; transition:background .15s,box-shadow .15s } .auth__input::placeholder{color:var(--a-ink2)} .auth__input:focus{outline:none;background:var(--a-field-on);box-shadow:0 0 0 1px rgba(255,255,255,.3)} .auth__cta{ display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px; margin:6px 0 0;border:0;border-radius:9999px;cursor:pointer; background:#fff;color:#000;font:inherit;font-size:15px;font-weight:500; transition:transform .12s var(--ease),opacity .15s } .auth__cta:hover{transform:translateY(-1px)} .auth__cta:active{transform:none} .auth__cta:disabled{opacity:.4;cursor:wait;transform:none} .auth__link{display:block;margin:12px 0 0;width:max-content;font-size:15px;font-weight:400; color:var(--a-accent);text-decoration:none;cursor:pointer;background:none;border:0;font-family:inherit} .auth__link:hover{text-decoration:underline;text-underline-offset:3px} .auth__or{display:flex;align-items:center;gap:12px;margin:22px 0 18px} .auth__or i{flex:1;height:1px;background:var(--a-line)} .auth__or span{font-size:15px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--a-ink)} /* the passkey, as Revolut's "continue with": a round icon with its label under */ .auth__alt{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:auto;height:auto; margin:0 auto;padding:0;border:0;cursor:pointer;background:none;color:var(--a-ink); font:inherit;font-size:12px;font-weight:500;transition:transform .12s var(--ease) } .auth__alt svg{width:44px;height:44px;padding:12px;box-sizing:border-box;border-radius:50%;background:var(--a-pill);transition:background .15s} .auth__alt:hover svg{background:#25292E} .auth__alt:disabled{opacity:.6;cursor:wait} .auth__foot{margin:22px 0 0;text-align:center;font-size:12px;font-weight:400;color:var(--a-ink2)} .auth__foot a{display:flex;align-items:center;justify-content:center;height:44px;margin-top:10px;border-radius:9999px; background:var(--a-pill);color:var(--a-ink);font-size:15px;font-weight:500;text-decoration:none;transition:background .15s} .auth__foot a:hover{background:#25292E} .auth__terms{margin:18px 0 0;text-align:center;font-size:12px;font-weight:400;color:var(--a-ink2);line-height:1.45} .auth__terms a{color:var(--a-accent);text-decoration:none} .auth__terms a:hover{text-decoration:underline} .auth__note{margin:12px 0 0;font-size:14px;line-height:1.5;color:var(--a-ink2)} .auth__error{margin:10px 0 0;font-size:13px;line-height:1.4;color:#FF7B72;font-weight:500} /* Above a phone: a card over the blurred page, the lockup left with the text. */ @media (min-width:720px){ .auth{background:rgba(0,0,0,.6);backdrop-filter:blur(8px)} .auth__card{ max-width:400px;padding:28px 24px 26px;overflow:hidden;border-radius:24px; background:var(--a-bg);border:1px solid rgba(255,255,255,.08); box-shadow:0 30px 80px rgba(0,0,0,.6);max-height:calc(100dvh - 48px) } .auth__card{background:var(--a-bg) radial-gradient(75% 60% at 6% -4%,rgba(88,104,140,.28),transparent 70%) no-repeat} .auth__brand{justify-content:flex-start;margin-bottom:28px} .auth__close{top:14px;right:14px;width:32px;height:32px} } @media (min-width:721px){ /* Above a phone the door floats over a blurred backdrop (the auth block above), and from 900px the list and the thread sit side by side. */ } @media (min-width:900px){ .app{grid-template-columns:262px 1fr} .top__back{display:none} .main{padding:18px 26px 22px} .composer{padding:12px 22px 16px} } /* The sender's name in the thread, in the sender's colour. */ .grp[data-who="CHIEF_OF_STAFF"]{--who:var(--c-dom)} .grp[data-who="LEDGER"]{--who:var(--c-saentis)} .grp[data-who="SCOUT"]{--who:var(--c-eiger)} .grp[data-who="REGISTRAR"]{--who:var(--c-pilatus)} .grp[data-who="SENTINEL"]{--who:var(--c-titlis)} .grp[data-who="FORGE"]{--who:var(--c-gotthard)} .grp[data-who="CHORUS"]{--who:var(--c-zermatt)} .grp[data-who="MARKETING"]{--who:var(--c-matterhorn)} /* ── the stone: the site's hero material in the app. A black ground; every surface a slab — the hero's gradient, a lit top-left edge, a deep shadow; a laser on an approval card's top edge while it waits. Dark theme only. ── */ :root:not([data-zt="light"]) body,:root:not([data-zt="light"]) .pane,:root:not([data-zt="light"]) .main{background:#000} :root:not([data-zt="light"]) .side{background:color-mix(in srgb,#0F0F0F 70%,#1A1A1A);border-right-color:rgba(255,255,255,.06)} :root:not([data-zt="light"]) .top{background:rgba(0,0,0,.7);border-bottom-color:rgba(255,255,255,.06)} :root:not([data-zt="light"]) .msg,:root:not([data-zt="light"]) .card,:root:not([data-zt="light"]) .plan,:root:not([data-zt="light"]) .checkout,:root:not([data-zt="light"]) .mk,:root:not([data-zt="light"]) .set__card,:root:not([data-zt="light"]) .bill__now,:root:not([data-zt="light"]) .co{ background:linear-gradient(160deg,#1E1F26,#101116 55%,#08090C);border:0;backdrop-filter:none; box-shadow:inset 1px 1px 0 rgba(255,255,255,.14),inset -1px -1px 0 rgba(255,255,255,.03),0 24px 48px -28px rgba(0,0,0,.9)} :root:not([data-zt="light"]) .grp--you .msg{background:#fff;color:#000;box-shadow:none} :root:not([data-zt="light"]) .msg--card{background:none;box-shadow:none} :root:not([data-zt="light"]) .card{position:relative;overflow:hidden} :root:not([data-zt="light"]) .card::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;pointer-events:none; background:linear-gradient(90deg,transparent 0 38%,rgba(218,41,28,.35) 44%,#DA291C 48%,#fff 50%,#DA291C 52%,rgba(218,41,28,.35) 56%,transparent 62% 100%); background-size:260% 100%;background-repeat:no-repeat;filter:drop-shadow(0 0 6px rgba(218,41,28,.9));animation:app-beam 3.2s cubic-bezier(.45,0,.55,1) infinite} @keyframes app-beam{0%{background-position:130% 0}100%{background-position:-130% 0}} :root:not([data-zt="light"]) .plan--hi,:root:not([data-zt="light"]) .plan--current{box-shadow:inset 1px 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.14),0 0 40px rgba(218,41,28,.16),0 24px 48px -28px rgba(0,0,0,.9)} :root:not([data-zt="light"]) .btn--go{background:#fff;color:#000;border-radius:9999px} :root:not([data-zt="light"]) .btn{border-radius:9999px} @media (prefers-reduced-motion:reduce){.card::after{animation:none!important;opacity:0}} /* A7: what the invoice needs, before the payment frame. */ .tax { display: grid; gap: 10px; margin: 8px 0 12px; max-width: 420px; } .tax__f { display: grid; gap: 4px; font-size: 13px; } .tax__f small { opacity: .7; font-weight: 400; } .tax__f input { font: inherit; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line, rgba(127,127,127,.35)); background: transparent; color: inherit; } /* B4: Bernina in the app — the run strip, the counters, the security card. */ .bstrip{display:grid;grid-template-columns:auto 1fr 1fr 1fr;gap:8px;align-items:stretch;margin:8px 0 14px;padding:10px 12px;border-radius:12px;background:var(--card,rgba(127,127,127,.08));border:1px solid var(--line,rgba(127,127,127,.25))} .bstrip__hd{display:flex;flex-direction:column;justify-content:center;gap:2px;padding-right:10px;border-right:1px solid var(--line,rgba(127,127,127,.25));font-size:11px;letter-spacing:.08em} .bstrip__mode{font-size:11px;opacity:.6;text-transform:lowercase} .bstrip__c{display:flex;flex-direction:column;gap:2px;min-width:0} .bstrip__k{font-size:10px;letter-spacing:.08em;opacity:.6} .bstrip__d{font-weight:600;font-size:13px} .bstrip__r{font-size:11px;opacity:.65;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bstrip__c--pass .bstrip__d{color:#3aa76d} .bstrip__c--redact .bstrip__d{color:#d29a2e} .bstrip__c--escalate .bstrip__d{color:#d29a2e} .bstrip__c--block .bstrip__d{color:#d9534f} .bstrip__c--none{opacity:.5} @media(max-width:560px){.bstrip{grid-template-columns:1fr 1fr}.bstrip__hd{grid-column:1/-1;border-right:0;border-bottom:1px solid var(--line,rgba(127,127,127,.25));padding:0 0 6px}} .gcount{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 0 8px} @media(max-width:560px){.gcount{grid-template-columns:1fr 1fr}} .gcount__i{display:flex;flex-direction:column;gap:2px;padding:12px;border-radius:10px;background:var(--card,rgba(127,127,127,.08))} .gcount__i b{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums} .gcount__i span{font-size:12px;opacity:.7} .list--plain{margin:4px 0 8px} .row--tight{padding:6px 0} /* Bernina's sign: the shield, inline, sized by the text it sits in. */ .bsign{width:1.05em;height:1.05em;flex:none;vertical-align:-.16em;margin-right:.3em;color:currentColor} .bname{white-space:nowrap} /* ── Bernina, always on: the badge in the bar ───────────────────────────── The shield in a small orb, a light sweeping round it the way a scan does, the name and its state. It breathes on its own; when a Run is being checked the sweep quickens; a block flashes it. It links to Trust. */ .guard{margin-left:auto;display:inline-flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border-radius:999px;background:color-mix(in srgb,var(--ink) 5%,transparent);border:1px solid var(--line-2);color:var(--ink);text-decoration:none;flex:none;transition:background .4s ease,border-color .4s ease} .guard:hover{background:color-mix(in srgb,var(--ink) 9%,transparent);border-color:color-mix(in srgb,var(--ink) 22%,transparent)} .guard__orb{position:relative;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--surface);isolation:isolate} .guard__orb::before{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);animation:guard-breathe 4.8s ease-in-out infinite} .guard__sweep{position:absolute;inset:-1px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 70%,color-mix(in srgb,var(--moss) 85%,transparent) 92%,transparent 100%);-webkit-mask:radial-gradient(circle,transparent 10px,#000 11px);mask:radial-gradient(circle,transparent 10px,#000 11px);animation:guard-sweep 6s linear infinite;opacity:.9} .guard__shield{width:13px;height:13px;color:var(--ink);position:relative;z-index:1} .guard__t{display:inline-flex;align-items:baseline;gap:6px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)} .guard__s{font-weight:600;color:var(--moss);letter-spacing:.08em} .guard[data-state="observe"] .guard__s{color:var(--rose)} .guard[data-state="off"] .guard__s{color:var(--faint)} .guard[data-state="off"] .guard__sweep{animation-play-state:paused;opacity:.3} .guard.is-checking .guard__sweep{animation-duration:1.6s} .guard.is-block .guard__orb::before{animation:guard-flash .9s ease-out 2} @keyframes guard-breathe{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.35);opacity:0}} @keyframes guard-sweep{to{transform:rotate(360deg)}} @keyframes guard-flash{0%{box-shadow:0 0 0 0 rgba(218,41,28,.6)}100%{box-shadow:0 0 0 10px rgba(218,41,28,0)}} @media (max-width:899px){.guard__t{display:none}.guard{padding:3px;gap:0}} @media (prefers-reduced-motion:reduce){.guard__orb::before,.guard__sweep{animation:none}} /* the set-password form in settings sits under the account buttons */ .auth__form--settings{margin-top:12px} /* ═══════════════════════ THE CONSOLE, REDRAWN — as the site's mock draws it ═══════════════════════ The sidebar: a monogram for the company, quiet system tiles, each agent under its own colour, the open row marked by a bar in that colour, tags in the colour, unread as a glowing bead, Bernina and the person in the foot. The pane: the thread, and a liquid-glass composer floating over it. Settings as Grok Bot lays them out. Tokens carry the theme; a modifier never fights a theme block. */ :root{--ac:var(--ink);--glass-fill:linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.04));--glass-line:rgba(255,255,255,.14); --glass-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.25),0 18px 40px -18px rgba(0,0,0,.7),0 2px 8px rgba(0,0,0,.25); --tile-sys:rgba(255,255,255,.07);--seg-bg:rgba(255,255,255,.06);--seg-on:#fff;--seg-on-ink:#000;--in-bg:rgba(255,255,255,.06);--in-line:rgba(255,255,255,.12)} :root[data-zt="light"]{--glass-fill:linear-gradient(135deg,rgba(255,255,255,.78),rgba(255,255,255,.55));--glass-line:rgba(10,10,10,.1); --glass-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(10,10,10,.05),0 18px 40px -20px rgba(10,10,20,.35),0 2px 8px rgba(10,10,20,.08); --tile-sys:rgba(10,10,10,.06);--seg-bg:rgba(10,10,10,.05);--seg-on:#0A0A0A;--seg-on-ink:#fff;--in-bg:rgba(10,10,10,.04);--in-line:rgba(10,10,10,.12)} /* the sidebar */ .side{background:color-mix(in srgb,var(--bg-2) 70%,var(--surface))} .side__search{height:32px;border-radius:10px;background:color-mix(in srgb,var(--ink) 6%,transparent);border:0;margin:4px 10px 6px;padding:0 10px 0 11px} .side__kbd{margin-left:auto;font-size:9px;letter-spacing:.06em;color:var(--faint);padding:2px 5px;border-radius:5px;border:1px solid var(--line-2)} .side__list{padding:0 10px 12px} .side__head{display:flex;align-items:center;justify-content:space-between;margin:14px 10px 6px;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)} .side__head span{opacity:.75;letter-spacing:.04em} .side__row{gap:10px;padding:8px 10px;border-radius:12px;border:1px solid transparent;transition:background .25s,border-color .25s} .side__row:hover{background:color-mix(in srgb,var(--ink) 5%,transparent)} .side__row.is-on{background:color-mix(in srgb,var(--ac) 10%,transparent);border-color:color-mix(in srgb,var(--ac) 28%,transparent);box-shadow:none} .side__row.is-on::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--ac)} .side__row.is-on .side__preview{color:var(--ink-2)} .side__name{font-size:12.5px} .side__preview{font-size:11.5px} .side__time{font-size:9.5px} .side__row[data-tint="CHIEF_OF_STAFF"]{--ac:var(--c-dom)} .side__row[data-tint="LEDGER"]{--ac:var(--c-saentis)} .side__row[data-tint="SCOUT"]{--ac:var(--c-eiger)} .side__row[data-tint="REGISTRAR"]{--ac:var(--c-pilatus)} .side__row[data-tint="SENTINEL"]{--ac:var(--c-titlis)} .side__row[data-tint="FORGE"]{--ac:var(--c-gotthard)} .side__row[data-tint="CHORUS"]{--ac:var(--c-zermatt)} .side__row[data-tint="MARKETING"]{--ac:var(--c-matterhorn)} .side__row[data-tint="APPROVALS"],.side__row[data-tint="COMPANY"]{--ac:var(--zug)} .tile{width:36px;height:36px;border-radius:12px} .tile .bot{width:34px;height:34px} .tile--co{background:var(--ink);color:var(--bg);font-size:14px;font-weight:600;letter-spacing:0} .tile--sys{background:var(--tile-sys);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)} .tile--sys svg{width:17px;height:17px} .tag{font-size:8.5px;padding:2px 6px;border-radius:999px;border:0;background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--muted)} .tag--ac{background:color-mix(in srgb,var(--ac) 16%,transparent);color:var(--ac)} .tag--hot{background:color-mix(in srgb,var(--zug) 14%,transparent);color:var(--zug)} .tag--on{background:rgba(19,209,163,.14);color:#13D1A3;text-transform:uppercase;letter-spacing:.08em} .tag[data-tint="CHIEF_OF_STAFF"]{--ac:var(--c-dom)}.tag[data-tint="LEDGER"]{--ac:var(--c-saentis)}.tag[data-tint="SCOUT"]{--ac:var(--c-eiger)}.tag[data-tint="REGISTRAR"]{--ac:var(--c-pilatus)}.tag[data-tint="SENTINEL"]{--ac:var(--c-titlis)}.tag[data-tint="FORGE"]{--ac:var(--c-gotthard)}.tag[data-tint="CHORUS"]{--ac:var(--c-zermatt)}.tag[data-tint="MARKETING"]{--ac:var(--c-matterhorn)} .side__dot{width:9px;height:9px;right:10px;bottom:12px;background:radial-gradient(circle at 35% 35%,#FF6B5E,var(--zug) 60%);box-shadow:0 0 0 2px var(--bg-2),0 0 10px rgba(218,41,28,.7);animation:side-dot 2.6s ease-in-out infinite} @keyframes side-dot{0%,100%{box-shadow:0 0 0 2px var(--bg-2),0 0 8px rgba(218,41,28,.55)}50%{box-shadow:0 0 0 2px var(--bg-2),0 0 14px rgba(218,41,28,.95)}} /* the foot: Bernina's row, then the person with a gear */ .side__foot{padding:10px 10px calc(var(--safe-b) + 10px)} .side__guard{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:color-mix(in srgb,var(--ink) 4%,transparent);border:1px solid var(--line-2);margin-bottom:4px;color:var(--ink)} .side__guard:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)} .side__guard[data-state="observe"] .tag--on{background:rgba(255,153,168,.14);color:var(--rose)} .side__guard[data-state="off"] .tag--on{background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--faint)} .guardorb{position:relative;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);flex:none;isolation:isolate} .guardorb::before{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);animation:guard-breathe 4.8s ease-in-out infinite} .guardorb__sweep{position:absolute;inset:-1px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 70%,rgba(19,209,163,.85) 92%,transparent 100%);-webkit-mask:radial-gradient(circle,transparent 15px,#000 16px);mask:radial-gradient(circle,transparent 15px,#000 16px);animation:guard-sweep 6s linear infinite} .guardorb__shield{width:16px;height:16px;color:var(--ink);position:relative;z-index:1} .side__row--me{position:relative;padding-right:44px;margin:0} .side__me{width:36px;height:36px;border-radius:12px;font-size:14px} .side__gear{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--ink) 6%,transparent);border:1px solid var(--line-2);color:var(--muted);transition:transform 1.2s cubic-bezier(.34,1.3,.5,1),color .3s,background .3s} .side__gear svg{width:15px;height:15px} .side__row--me:hover .side__gear{transform:translateY(-50%) rotate(90deg);color:var(--ink);background:color-mix(in srgb,var(--ink) 10%,transparent)} @media (prefers-reduced-motion:reduce){.side__dot,.guardorb::before,.guardorb__sweep{animation:none}.side__gear{transition:none}} /* the pane: the composer floats as liquid glass over the thread */ .pane{position:relative} .top .tile{width:30px;height:30px;border-radius:9px}.top .tile .bot{width:28px;height:28px} .main{padding-bottom:96px} .composer{position:absolute;left:0;right:0;bottom:0;display:block;padding:0 14px calc(var(--safe-b) + 12px);border-top:0;background:none;pointer-events:none;z-index:15} .composer::before{content:"";position:absolute;left:0;right:0;bottom:0;height:110px;background:linear-gradient(transparent,var(--bg));pointer-events:none;z-index:-1} .composer__glass{display:flex;align-items:center;gap:10px;width:100%;max-width:820px;margin:0 auto;padding:8px 8px 8px 10px;border-radius:999px;pointer-events:auto; background:var(--glass-fill);-webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow)} .composer__in{height:34px;padding:0 6px;border:0;background:transparent;color:var(--ink);font-size:14px;box-shadow:none} .composer__in:disabled{opacity:1;color:var(--muted)} .composer__plus,.composer__mic{width:32px;height:32px;background:color-mix(in srgb,var(--ink) 9%,transparent);color:var(--ink);box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 18%,transparent)} .composer__mic{background:var(--ink);color:var(--bg)} @media (min-width:900px){.composer{padding:0 22px 16px}.main{padding-bottom:104px}} /* shared controls: a segmented switch, an input, a small button */ .seg{display:inline-flex;gap:3px;padding:3px;border-radius:999px;background:var(--seg-bg);border:1px solid var(--line-2)} .seg__b{border:0;background:none;cursor:pointer;border-radius:999px;padding:7px 13px;font-size:13px;color:var(--muted);transition:background .25s,color .25s;white-space:nowrap} .seg__b.is-on{background:var(--seg-on);color:var(--seg-on-ink);font-weight:600} .set__in{width:100%;height:40px;padding:0 12px;border-radius:10px;border:1px solid var(--in-line);background:var(--in-bg);color:var(--ink);font:inherit;font-size:14px} .set__in:focus{outline:none;border-color:var(--muted)} .set__in::placeholder{color:var(--faint)} textarea.set__in{height:auto;padding:10px 12px;resize:vertical} select.set__in{appearance:none;-webkit-appearance:none} .btn--sm{width:auto;flex:none;padding:8px 14px;font-size:13px} a.btn{text-decoration:none} /* settings, as Grok Bot lays them out: sections on the left, panels of rows on the right */ .set{display:grid;grid-template-columns:1fr;gap:16px;max-width:1040px;margin:0 auto} .set__nav{display:flex;gap:4px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none;position:sticky;top:0;z-index:5} .set__nav::-webkit-scrollbar{display:none} .set__tab{flex:none;padding:8px 13px;border-radius:999px;font-size:13.5px;color:var(--muted);transition:background .2s,color .2s} .set__tab:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 5%,transparent)} .set__tab.is-on{color:var(--ink);background:color-mix(in srgb,var(--ink) 8%,transparent);font-weight:600} .set__body{display:grid;gap:26px;min-width:0} .set__sec{scroll-margin-top:16px} .set__h{margin:0 0 10px;font-size:17px;font-weight:600;letter-spacing:-.02em} .set__eyebrow{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin:0 0 6px} .set__card{border:1px solid var(--line);border-radius:var(--r-m);background:var(--glass-2);overflow:hidden} .set__note,.set__hint{margin:8px 2px 0;font-size:12.5px;color:var(--faint);line-height:1.45} .set__empty{margin:0;padding:16px 18px;font-size:14px;color:var(--muted)} .srow{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;border-bottom:1px solid var(--line-2)} .srow:last-child{border-bottom:0} .srow__k{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .srow__k b{font-size:14.5px;font-weight:500;letter-spacing:-.01em;color:var(--ink)} .srow__k span{font-size:12.5px;color:var(--muted);line-height:1.4} .srow__v{flex:none;display:flex;align-items:center;gap:10px;justify-content:flex-end;max-width:60%} .srow__val{font-size:13.5px;color:var(--ink-2)} .srow--stack{flex-direction:column;align-items:stretch} .srow--stack .srow__v{max-width:none;justify-content:flex-start;flex-wrap:wrap} .srow--note{display:block}.srow--note .stance{margin:0} .srow__form{display:flex;gap:8px;width:100%;max-width:440px} .srow__form .set__in{flex:1} .set__hosts{display:flex;flex-wrap:wrap;gap:6px} .set__hosts code{font-size:11.5px;padding:4px 9px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink-2)} @media (min-width:900px){.set{grid-template-columns:184px 1fr;gap:28px;align-items:start}.set__nav{flex-direction:column;gap:2px;overflow:visible;top:0;padding:0}.set__tab{padding:8px 12px;border-radius:10px}} @media (max-width:720px){.srow{flex-direction:column;align-items:stretch}.srow__v{max-width:none;justify-content:flex-start;flex-wrap:wrap}} /* plan & billing: the plan now as a hero, the cards as the site's, a sheet in the card, and the checkout in steps */ .bill{max-width:1040px;margin:0 auto} .bill__now{padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--glass-2);margin:0 0 22px} .bill__hero{display:flex;align-items:flex-start;justify-content:space-between;gap:16px} .bill__name{margin:0;font-size:26px;font-weight:700;letter-spacing:-.03em} .bill__sub{margin:4px 0 0;font-size:13.5px;color:var(--muted);max-width:56ch} .bill__hero-v{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:none} .bill__price{font-size:22px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums} .bill__now .stance{margin-top:14px} .stance--ok .stance__i{color:#13D1A3} .bill__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;flex-wrap:wrap} .bill__head .set__h{margin:0} .plans{gap:14px} .plan{border:1px solid var(--line);border-radius:var(--r-m);background:var(--glass-2);padding:18px 18px 16px;position:relative} .plan--hi{border-color:color-mix(in srgb,var(--zug) 40%,var(--line))} .plan__sheet{margin-top:12px;padding:12px 14px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line-2);font-size:13px;color:var(--muted)} .plan__sheet b{display:block;color:var(--ink);font-weight:600;margin-bottom:4px} .plan__sheet p{margin:0 0 10px} .plan__sheet-row{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap} .co{margin-top:22px;padding:18px 20px 20px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--glass-2)} .co__top{display:flex;align-items:center;justify-content:space-between;gap:12px} .co__top .set__h{margin:0} .co__steps{display:flex;gap:6px;list-style:none;margin:14px 0 18px;padding:0} .co__step{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:999px;font-size:12.5px;color:var(--faint);background:color-mix(in srgb,var(--ink) 4%,transparent)} .co__step i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:600;background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--muted)} .co__step.is-on{color:var(--ink);background:color-mix(in srgb,var(--ink) 8%,transparent)} .co__step.is-on i{background:var(--ink);color:var(--bg)} .co__step.is-done{color:var(--muted)} .co__step.is-done i{background:rgba(19,209,163,.16);color:#13D1A3} .co__grid{display:grid;grid-template-columns:1fr;gap:18px} .co__form{display:grid;gap:12px;max-width:520px} .co__f{display:grid;gap:5px;font-size:13px;color:var(--ink-2)} .co__f small{color:var(--faint);font-weight:400;margin-left:6px} .co__two{display:grid;grid-template-columns:120px 1fr;gap:10px} .co__frame{min-height:0;border-radius:14px;overflow:hidden} .co__frame:not(:empty){min-height:420px;background:#fff;margin-top:12px} .co__rev{display:flex;align-items:center;gap:8px;margin-top:14px} .co__rev svg{width:15px;height:15px;color:var(--zug);flex:none} .co__sum{padding:16px 18px;border-radius:var(--r-m);background:var(--surface-2);border:1px solid var(--line-2);align-self:start} .co__line{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line-2);font-size:13.5px;color:var(--muted)} .co__line b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums;text-align:right} .co__line--total{border-bottom:0;padding-top:12px;font-size:15px} .co__line--total b{font-weight:700} @media (min-width:900px){.co__grid{grid-template-columns:1fr 280px}} /* the marketplace: a search, filters, a grid of listings, a sell form with its preview */ .mkt{max-width:1040px;margin:0 auto} .mkt__top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 8px} .mkt__search{flex:1;min-width:220px;display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-radius:12px;background:var(--in-bg);border:1px solid var(--in-line);color:var(--faint)} .mkt__search svg{width:16px;height:16px;flex:none} .mkt__search input{flex:1;min-width:0;background:none;border:0;color:var(--ink);font:inherit;font-size:14px;outline:none} .mkt__count{margin:0 2px 14px} .mkt__grid{display:grid;grid-template-columns:1fr;gap:12px} @media (min-width:720px){.mkt__grid{grid-template-columns:repeat(2,1fr)}} @media (min-width:1180px){.mkt__grid{grid-template-columns:repeat(3,1fr)}} .mk{display:flex;flex-direction:column;gap:10px;padding:16px 16px 14px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--glass-2);margin:0} .mk__head{display:flex;align-items:center;gap:10px} .mk__t{flex:1;min-width:0;display:flex;flex-direction:column} .mk__t b{font-size:15px;font-weight:600;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mk__by{font-size:12px;color:var(--faint)} .mk__blurb{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.45;flex:1} .mk__foot{display:flex;align-items:center;gap:10px;justify-content:flex-end;min-height:32px} .mk__price{margin-right:auto;font-weight:600;font-variant-numeric:tabular-nums} .mk--preview{opacity:.92} .mkt__sell{display:grid;grid-template-columns:1fr;gap:16px} @media (min-width:900px){.mkt__sell{grid-template-columns:1fr 320px;align-items:start}} .mkt__form .btn{margin:14px 18px 16px;width:calc(100% - 36px)} .mkt__form .auth__error{margin:0 18px} .mkt__eur{display:flex;align-items:center;gap:8px;max-width:200px} .mkt__eur span{color:var(--muted)} .mkt__preview{position:sticky;top:0} /* pages, not threads: settings, billing, the marketplace, trust have no composer */ body.is-plain .composer{display:none} body.is-plain .main{padding-bottom:28px} /* ═══════════════════════ THE CONSOLE — the lockup, the menus, the settings sheet, the tools, the composer that works, the marks in motion ═══════════════════════ */ /* the lockup at the top of the sidebar */ .side__top{padding:calc(var(--safe-t) + 12px) 12px 6px;position:relative} .side__brand{display:flex;align-items:center;gap:9px;color:var(--ink);min-width:0} .side__brand .bot--brand{width:30px;height:30px;--b-look-anim:mark-glance} .side__wm{display:inline-flex;color:var(--ink)} .side__wm .wm-svg{height:13px;width:auto;display:block} .side__new{width:30px;height:30px;border-radius:50%;border:1px solid var(--line-2);background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink);font-size:20px;line-height:1;cursor:pointer;transition:transform .5s cubic-bezier(.34,1.3,.5,1),background .2s} .side__new:hover,.side__new[aria-expanded="true"]{background:color-mix(in srgb,var(--ink) 12%,transparent);transform:rotate(90deg)} /* the menus: a card that drops from the + and rises from the person */ .menu{position:absolute;z-index:30;right:10px;top:calc(100% - 2px);min-width:250px;padding:6px;border-radius:14px;background:var(--surface);border:1px solid var(--line);box-shadow:0 24px 48px -20px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.2);animation:menu-in .18s var(--ease)} .menu--up{top:auto;bottom:calc(100% + 6px);left:10px;right:10px} @keyframes menu-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} .menu--up{animation-name:menu-up}@keyframes menu-up{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} .menu__i{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;padding:9px 10px;border:0;border-radius:9px;background:none;color:var(--ink);text-align:left;cursor:pointer;font:inherit} .menu__i:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)} .menu__i b{font-size:13.5px;font-weight:500} .menu__i span{font-size:12px;color:var(--muted)} .menu__i--out{color:var(--rose)} .menu__who{margin:6px 10px 6px;font-size:11px;color:var(--faint)} .side__foot{position:relative} .toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(8px);z-index:60;max-width:min(520px,calc(100% - 32px));padding:12px 16px;border-radius:14px;background:var(--ink);color:var(--bg);font-size:13.5px;line-height:1.4;box-shadow:0 20px 40px -16px rgba(0,0,0,.6);opacity:0;transition:opacity .25s,transform .25s} .toast.is-on{opacity:1;transform:translateX(-50%)} /* the settings sheet: Claude's shape — a card over the app, tabs down the left on a desktop, a row on a phone */ .modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} .modal__card{width:100%;height:100%;overflow:hidden;background:var(--bg);display:flex} .modal__card .set{display:grid;grid-template-rows:auto auto 1fr;grid-template-columns:1fr;width:100%;max-width:none;height:100%;gap:0} .set__top{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--safe-t) + 14px) 18px 10px} .set__title{font-size:17px;font-weight:600;letter-spacing:-.02em} .modal__x{width:32px;height:32px;border-radius:50%;border:0;background:color-mix(in srgb,var(--ink) 7%,transparent);color:var(--ink);cursor:pointer;font-size:13px} .modal__card .set__nav{position:static;padding:0 12px 8px;gap:2px;border-bottom:1px solid var(--line-2)} .modal__card .set__body{overflow-y:auto;padding:16px 18px calc(var(--safe-b) + 24px);gap:22px;align-content:start} .set__lead{margin:0 0 4px;font-size:14px;color:var(--ink-2);line-height:1.5;max-width:62ch} .set__eyebrow-in{margin-left:8px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:400} .avatar{width:38px;height:38px;border-radius:50%;background:var(--zug);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:800} .seg__b svg{width:16px;height:16px;display:block} .tool__x{margin-left:6px;border:0;background:none;color:var(--faint);cursor:pointer;font-size:10px} .tool__x:hover{color:var(--rose)} @media (min-width:900px){ .modal{padding:24px} .modal__card{max-width:1060px;height:min(760px,100%);border-radius:22px;border:1px solid var(--line);box-shadow:0 40px 90px -30px rgba(0,0,0,.8)} .modal__card .set{grid-template-columns:220px 1fr;grid-template-rows:auto 1fr;grid-template-areas:"top top" "nav body"} .set__top{grid-area:top;padding:18px 20px 12px;border-bottom:1px solid var(--line-2)} .modal__card .set__nav{grid-area:nav;flex-direction:column;padding:12px 10px;border-bottom:0;border-right:1px solid var(--line-2);overflow:visible} .modal__card .set__nav .set__tab{padding:9px 12px;border-radius:10px} .modal__card .set__body{grid-area:body;padding:22px 26px 28px} } body.is-modal{overflow:hidden} /* billing in the sheet: the plan as Claude's, with the mark for an icon */ .bill__hero--set{align-items:center;gap:16px;padding:6px 2px 18px} .bill__icon{width:56px;height:56px;flex:none;display:grid;place-items:center} .bill__icon .bot{width:52px;height:52px} .inv{width:100%;border-collapse:collapse;font-size:13.5px} .inv th{text-align:left;font-weight:500;color:var(--muted);padding:10px 18px;border-bottom:1px solid var(--line-2);font-size:12px} .inv td{padding:12px 18px;border-bottom:1px solid var(--line-2)} .inv tr:last-child td{border-bottom:0} /* usage bars */ .use{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;width:100%} .use__bar{display:block;height:6px;border-radius:99px;background:color-mix(in srgb,var(--ink) 10%,transparent);overflow:hidden} .use__fill{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--c-saentis),#7DB0FF);transition:width .9s cubic-bezier(.22,.68,.32,1)} .use__n{font-size:12.5px;color:var(--ink-2)} .use__pct{font-size:12.5px;color:var(--muted);min-width:64px;text-align:right} /* connected tools */ .tools{max-width:1040px;margin:0 auto} .tools__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 6px} .tools__top .set__h{margin:0 0 4px} .tools__cat{margin:18px 2px 8px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)} .tools__grid{display:grid;grid-template-columns:1fr;gap:10px} @media (min-width:720px){.tools__grid{grid-template-columns:repeat(2,1fr)}} @media (min-width:1180px){.tools__grid{grid-template-columns:repeat(3,1fr)}} .tool{display:flex;flex-direction:column;gap:8px;padding:14px 14px 12px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--glass-2)} .tool__head{display:flex;align-items:center;gap:10px} .tool__logo{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-size:14px;font-weight:700;letter-spacing:0;background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink);flex:none} .tool__logo--xero{background:#13B5EA;color:#fff}.tool__logo--stripe{background:#635BFF;color:#fff}.tool__logo--gmail,.tool__logo--google{background:#fff;color:#EA4335;box-shadow:inset 0 0 0 1px var(--line-2)}.tool__logo--notion{background:#000;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}.tool__logo--hubspot{background:#FF7A59;color:#fff}.tool__logo--slack{background:#4A154B;color:#fff}.tool__logo--github{background:#24292F;color:#fff}.tool__logo--linear{background:#5E6AD2;color:#fff}.tool__logo--revolut{background:#000;color:#fff}.tool__logo--wise{background:#9FE870;color:#163300}.tool__logo--bank{background:var(--c-saentis);color:#fff} .tool__t{display:flex;flex-direction:column;min-width:0} .tool__t b{font-size:14.5px;font-weight:600;letter-spacing:-.015em} .tool__t span{font-size:11.5px;color:var(--faint);text-transform:capitalize} .tool__sub{margin:0;font-size:12.5px;color:var(--muted);line-height:1.4;flex:1} .tool__foot{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;min-height:32px} .tool__note,.tools__note{margin:0;font-size:12.5px;color:var(--muted);line-height:1.4} .tool__note.is-bad,.tools__note.is-bad{color:var(--rose)} /* the composer works: the mic becomes a send arrow when there is text; typing dots for the reply */ .composer__mic{cursor:pointer;border:0;padding:0;display:grid;place-items:center} .composer__mic svg{width:16px;height:16px} .composer__send-i{display:none} .composer.has-text .composer__send-i{display:block} .composer.has-text .composer__mic-i{display:none} .composer.has-text .composer__mic{background:var(--zug);color:#fff} .typing{display:inline-flex;gap:4px;align-items:center;padding:12px 14px;border-radius:16px;background:var(--surface);border:1px solid var(--line-2)} .typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:typing 1.2s ease-in-out infinite} .typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s} @keyframes typing{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}} /* the marks in motion: every tile's eyes glance about on their own clock; the bar's tile breathes */ .tile .bot,.side__brand .bot{--b-look-anim:mark-glance} .side__row:nth-child(3n+1) .tile .bot{--b-delay:-2.2s}.side__row:nth-child(3n+2) .tile .bot{--b-delay:-5.1s}.side__row:nth-child(3n) .tile .bot{--b-delay:-7.4s} .grp__tile .bot{--b-delay:-3.3s} .top .tile .bot{animation:tile-breathe 5.2s ease-in-out infinite} @keyframes tile-breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-1px) scale(1.04)}} .side__row:hover .tile .bot{transform:rotate(-6deg) scale(1.06);transition:transform .5s cubic-bezier(.34,1.3,.5,1)} .side__row .tile .bot{transition:transform .5s cubic-bezier(.34,1.3,.5,1)} /* reduced motion, chosen in Preferences or by the device */ :root[data-motion="reduced"] *{animation:none!important;transition:none!important} @media (prefers-reduced-motion:reduce){.typing i,.top .tile .bot{animation:none}} /* the person's row is a button now: same width and font as the rows around it */ button.side__row{width:100%;font:inherit;text-align:left;cursor:pointer;background:none} /* ═══════════════════════ the composer as Claude's box; the roster; the sheet scrolls; the lockup as the site's ═══════════════════════ */ .side__wm .wm-svg{height:14px;overflow:visible} .wm-l{transform-box:fill-box;transform-origin:center} /* the sheet: the body scrolls inside the grid row */ .modal__card .set__body{min-height:0} .modal__card .set{min-height:0} /* the composer: a rounded box, the text on top, the controls in a row beneath */ .composer__glass{display:none} .composer__box{width:100%;max-width:820px;margin:0 auto;padding:12px 12px 10px;border-radius:22px;pointer-events:auto;position:relative; background:var(--glass-fill);-webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow)} .composer__box:focus-within{border-color:color-mix(in srgb,var(--ink) 26%,transparent)} textarea.composer__in{display:block;width:100%;min-height:26px;max-height:180px;padding:2px 4px 8px;border:0;background:transparent;color:var(--ink);font:inherit;font-size:15.5px;line-height:1.45;resize:none;outline:none;box-shadow:none;height:auto} textarea.composer__in::placeholder{color:var(--faint)} .composer__row{display:flex;align-items:center;gap:6px;position:relative} .composer__spacer{flex:1} .composer__plus,.composer__mic,.composer__send{width:34px;height:34px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;background:transparent;color:var(--ink);font-size:22px;line-height:1;box-shadow:none;transition:background .2s,transform .5s cubic-bezier(.34,1.3,.5,1)} .composer__plus:hover,.composer__mic:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)} .composer__plus[aria-expanded="true"]{transform:rotate(45deg);background:color-mix(in srgb,var(--ink) 10%,transparent)} .composer__mic svg{width:17px;height:17px} .composer__mic.is-live{background:var(--zug);color:#fff;animation:mic-pulse 1.2s ease-in-out infinite} @keyframes mic-pulse{0%,100%{box-shadow:0 0 0 0 rgba(218,41,28,.45)}50%{box-shadow:0 0 0 8px rgba(218,41,28,0)}} .composer__to{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 10px 0 6px;border-radius:999px;border:1px solid var(--line-2);background:color-mix(in srgb,var(--ink) 5%,transparent);color:var(--ink);font:inherit;font-size:13px;font-weight:500;cursor:pointer} .composer__to svg{width:14px;height:14px;color:var(--muted)} .composer__to-tile{width:22px;height:22px;display:grid;place-items:center} .composer__to-tile .bot{width:22px;height:22px;filter:none} .composer__send{background:var(--ink);color:var(--bg);width:34px;height:34px;opacity:.45} .composer__send svg{width:16px;height:16px} .composer.has-text .composer__send{opacity:1;background:var(--zug);color:#fff} .menu--composer{left:0;right:auto;bottom:calc(100% + 8px);min-width:280px} .menu--to{right:44px;left:auto;bottom:calc(100% + 8px);min-width:220px;max-height:320px;overflow-y:auto} .menu--to .menu__i{flex-direction:row;align-items:center;gap:10px} .menu--to .menu__i .bot{width:26px;height:26px;filter:none;flex:none} .menu--to .menu__i b{font-size:13.5px} .menu--to .menu__i span{margin-left:auto;font-size:11px} .menu--to .menu__i.is-on{background:color-mix(in srgb,var(--ink) 8%,transparent)} .main{padding-bottom:132px} @media (min-width:900px){.main{padding-bottom:140px}} @media (max-width:899px){.composer{padding:0 10px calc(var(--safe-b) + 10px)}.composer__to span:not(.composer__to-tile){max-width:74px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}} /* the roster: the site's agents, as cards */ .roster{max-width:1040px;margin:0 auto} .roster__top{margin:0 0 14px} .roster__top .set__h{margin:0 0 4px} .roster__grid{display:grid;grid-template-columns:1fr;gap:12px} @media (min-width:640px){.roster__grid{grid-template-columns:repeat(2,1fr)}} @media (min-width:1100px){.roster__grid{grid-template-columns:repeat(4,1fr)}} .ag{display:flex;flex-direction:column;gap:6px;padding:18px 16px 14px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--glass-2);color:var(--ink);transition:transform .5s cubic-bezier(.34,1.3,.5,1),border-color .3s} .ag:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--ac) 40%,var(--line))} .ag--on{border-color:color-mix(in srgb,var(--ac) 28%,var(--line))} .ag__tile{width:64px;height:64px;display:grid;place-items:center;margin:0 0 6px} .ag__tile .bot{width:60px;height:60px;--b-look-anim:mark-glance} .ag:nth-child(2n) .ag__tile .bot{--b-delay:-4s}.ag:nth-child(3n) .ag__tile .bot{--b-delay:-6.5s} .ag__kicker{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ac)} .ag__name{font-size:18px;font-weight:700;letter-spacing:-.02em} .ag__line{margin:0;font-size:13.5px;color:var(--muted);line-height:1.45;flex:1} .ag__foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px} .ag__dot{width:6px;height:6px;border-radius:50%;background:var(--moss);box-shadow:0 0 0 0 color-mix(in srgb,var(--moss) 55%,transparent);animation:pulse 2.4s infinite} .ag[data-tint="CHIEF_OF_STAFF"]{--ac:var(--c-dom)}.ag[data-tint="LEDGER"]{--ac:var(--c-saentis)}.ag[data-tint="SCOUT"]{--ac:var(--c-eiger)}.ag[data-tint="REGISTRAR"]{--ac:var(--c-pilatus)}.ag[data-tint="SENTINEL"]{--ac:var(--c-titlis)}.ag[data-tint="FORGE"]{--ac:var(--c-gotthard)}.ag[data-tint="CHORUS"]{--ac:var(--c-zermatt)}.ag[data-tint="MARKETING"]{--ac:var(--c-matterhorn)} /* the sheet card is a flex box: the settings grid must be allowed to shrink so its body scrolls */ .modal__card .set{flex:1 1 auto;min-height:0;height:auto} .roster__stance{margin:14px 0 6px} /* in the sheet the body must stretch to its row, not to its content, or it never scrolls */ .modal__card .set{align-items:stretch} .modal__card .set__body{align-self:stretch} /* ═══════════════════════ the lockup as the site's; full screen; Bernina's sign; search; the storefront ═══════════════════════ */ /* full screen, on every device: the app owns the viewport, and nothing pads the body */ body{padding-bottom:0} .app{position:fixed;inset:0;height:auto;width:100%} /* the lockup: the site's sizes, the site's breathing — a 46px mark, a 17px wordmark, 12px between */ .side__top{padding:calc(var(--safe-t) + 14px) 14px 8px} .side__brand{gap:12px} .side__brand .bot--brand{width:46px;height:46px;animation:mark-breathe-soft 9s ease-in-out infinite;transform-origin:center} .side__wm .wm-svg{height:17px} @keyframes mark-breathe-soft{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}} /* the mark paints in both themes: a white sphere needs its rim and a shadow on a light ground */ :root[data-zt="light"] .bot{filter:drop-shadow(0 3px 8px rgba(9,11,16,.28)) drop-shadow(0 0 1px rgba(9,11,16,.35))} /* no shadow under the input */ .composer::before{display:none} .composer__box{box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 16%,transparent)} :root[data-zt="light"] .composer__box{box-shadow:inset 0 1px 0 #fff} /* Bernina's sign, top right on every page: a glass pill, the shield in an orb with a sweep round it, the state beside it */ .guard{gap:9px;padding:4px 12px 4px 4px;background:var(--glass-fill);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 18%,transparent)} .guard__orb{width:28px;height:28px;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--moss) 26%,var(--surface)),var(--surface) 70%)} .guard__sweep{-webkit-mask:radial-gradient(circle,transparent 12px,#000 13px);mask:radial-gradient(circle,transparent 12px,#000 13px)} .guard__shield{width:14px;height:14px} .guard__t{font-size:10.5px;letter-spacing:.12em} .guard__s{display:inline-flex;align-items:center;gap:5px} .guard__s::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor} .guard[data-state="off"] .guard__orb{background:var(--surface)} .guard[data-state="off"] .guard__s{color:var(--muted)} .guard[data-state="off"] .guard__s::before{box-shadow:none} @media (max-width:899px){.guard{padding:3px;gap:0}.guard__orb{width:30px;height:30px}} /* the sidebar's search folds what does not match */ .side__search:focus-within{background:color-mix(in srgb,var(--ink) 9%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 22%,transparent)} /* settings search */ .set__top{gap:12px} .set__search{flex:1;max-width:340px;display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:10px;background:var(--in-bg);border:1px solid var(--in-line);color:var(--faint)} .set__search svg{width:15px;height:15px;flex:none} .set__search input{flex:1;min-width:0;background:none;border:0;color:var(--ink);font:inherit;font-size:13.5px;outline:none} .set__results{grid-column:1/-1;margin:0 14px;padding:6px;border:1px solid var(--line);border-radius:14px;background:var(--surface);display:grid;gap:2px;max-height:280px;overflow-y:auto} .set__hit{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 10px;border-radius:9px;color:var(--ink)} .set__hit:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)} .set__hit b{font-size:13.5px;font-weight:500}.set__hit span{font-size:12px;color:var(--muted)} .modal__card .set{grid-template-rows:auto auto auto 1fr} @media (min-width:900px){.modal__card .set{grid-template-rows:auto auto 1fr;grid-template-areas:"top top" "res res" "nav body"}.set__results{grid-area:res;margin:10px 20px 0}} /* the marketplace: a storefront */ .mkt__hero{position:relative;overflow:hidden;isolation:isolate;padding:28px 24px 24px;margin:0 0 18px;border-radius:var(--r-l);border:1px solid var(--line);background:linear-gradient(160deg,color-mix(in srgb,var(--c-saentis) 12%,var(--surface)),var(--surface) 55%,color-mix(in srgb,var(--zug) 9%,var(--surface)))} .mkt__aurora{position:absolute;inset:-40% -10% auto auto;width:70%;height:160%;z-index:-1;background:conic-gradient(from 210deg at 60% 40%,transparent 0 40%,color-mix(in srgb,var(--c-pilatus) 45%,transparent) 55%,color-mix(in srgb,var(--c-matterhorn) 40%,transparent) 70%,transparent 85%);filter:blur(46px);opacity:.55;animation:mkt-aurora 16s ease-in-out infinite alternate} @keyframes mkt-aurora{from{transform:translate3d(0,0,0) rotate(0)}to{transform:translate3d(-6%,4%,0) rotate(14deg)}} .mkt__h{margin:2px 0 8px;font-size:clamp(26px,4.2vw,40px);line-height:1.04;font-weight:700;letter-spacing:-.035em} .mkt__sub{margin:0;max-width:54ch;font-size:14.5px;color:var(--ink-2);line-height:1.5} .mkt__stats{display:flex;gap:26px;margin:18px 0 0} .mkt__stats div{display:flex;flex-direction:column} .mkt__stats b{font-size:24px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums} .mkt__stats span{font-size:12px;color:var(--muted)} .mkt__marks{position:absolute;right:22px;bottom:18px;display:flex} .mkt__mark{width:52px;height:52px;margin-left:-14px;animation:mkt-bob 5s ease-in-out infinite} .mkt__mark .bot{width:52px;height:52px;--b-look-anim:mark-glance} .mkt__mark:nth-child(2){animation-delay:-1s}.mkt__mark:nth-child(3){animation-delay:-2s}.mkt__mark:nth-child(4){animation-delay:-3s}.mkt__mark:nth-child(5){animation-delay:-4s} .mkt__mark:nth-child(2) .bot{--b-delay:-2s}.mkt__mark:nth-child(3) .bot{--b-delay:-4s}.mkt__mark:nth-child(4) .bot{--b-delay:-6s} @keyframes mkt-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} @media (max-width:720px){.mkt__marks{position:static;margin:18px 0 0 14px}.mkt__hero{padding:22px 18px 20px}} .mkt__feat{display:grid;grid-template-columns:1fr;gap:12px;margin:0 0 6px} @media (min-width:900px){.mkt__feat{grid-template-columns:1fr 1fr}} .mk{position:relative;overflow:hidden;isolation:isolate;gap:12px;padding:18px 18px 16px;transition:transform .5s cubic-bezier(.34,1.3,.5,1),border-color .3s} .mk:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--ac) 45%,var(--line))} .mk[data-tint="CHIEF_OF_STAFF"]{--ac:var(--c-dom)}.mk[data-tint="LEDGER"]{--ac:var(--c-saentis)}.mk[data-tint="SCOUT"]{--ac:var(--c-eiger)}.mk[data-tint="REGISTRAR"]{--ac:var(--c-pilatus)}.mk[data-tint="SENTINEL"]{--ac:var(--c-titlis)}.mk[data-tint="FORGE"]{--ac:var(--c-gotthard)}.mk[data-tint="CHORUS"]{--ac:var(--c-zermatt)}.mk[data-tint="MARKETING"]{--ac:var(--c-matterhorn)} .mk__glow{position:absolute;z-index:-1;right:-30%;top:-60%;width:80%;height:160%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--ac) 30%,transparent),transparent 65%);opacity:.0;transition:opacity .5s} .mk:hover .mk__glow,.mk--big .mk__glow{opacity:.55} .mk__tile{width:44px;height:44px;display:grid;place-items:center;flex:none} .mk__tile .bot{width:42px;height:42px;--b-look-anim:mark-glance} .mk--big{padding:22px 22px 18px} .mk--big .mk__tile{width:60px;height:60px}.mk--big .mk__tile .bot{width:58px;height:58px} .mk--big .mk__t b{font-size:19px} .mk--big .mk__blurb{font-size:14.5px} .mk__facts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px} .mk__facts li{font-size:11px;color:var(--muted);padding:3px 9px;border-radius:999px;border:1px solid var(--line-2)} .mk:not(.mk--big) .mk__facts{display:none} .mk__price{font-size:17px;letter-spacing:-.02em} .mk__per{font-size:12px;color:var(--muted);font-weight:500;margin-left:2px} .mkt__desk{margin-top:30px} @media (prefers-reduced-motion:reduce){.mkt__aurora,.mkt__mark,.side__brand .bot--brand{animation:none}} /* ═══════════════════════ the + centred; the foot with the address; the bar's tile; the Runs ring ═══════════════════════ */ .side__new,.composer__plus{display:grid;place-items:center;padding:0;font-size:0;line-height:0} .side__new svg{width:16px;height:16px;display:block} .composer__plus svg{width:18px;height:18px;display:block} .side__top{display:flex;align-items:center;justify-content:space-between;gap:10px} .side__new{width:36px;height:36px;flex:none} .side__row--me .side__body{gap:0} .side__preview--mail{font-size:11px;color:var(--muted)} .side__preview--plan{font-size:10.5px;color:var(--faint);letter-spacing:.02em} /* the bar: one tile, never over the title */ .top__avatars{width:30px;height:30px;flex:none;display:grid;place-items:center;overflow:hidden} .top .tile--xs{width:30px;height:30px;border-radius:9px;font-size:12px} .top .tile--sys svg{width:15px;height:15px} .top__title{flex:0 1 auto} /* the Runs used, as a ring and two numbers */ .composer__runs{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 8px 0 4px;border-radius:999px;color:var(--muted);font-size:11px;text-decoration:none} .composer__runs:hover{background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink)} .composer__runs svg{width:18px;height:18px} .composer__ring-bg{stroke:color-mix(in srgb,var(--ink) 12%,transparent)} .composer__ring{stroke:var(--moss);transition:stroke-dasharray .9s cubic-bezier(.22,.68,.32,1)} .composer__runs[data-level="low"] .composer__ring{stroke:var(--c-titlis)} .composer__runs[data-level="out"] .composer__ring{stroke:var(--zug)} .composer__runs[data-level="out"]{color:var(--zug)} /* ═══════════════════════ the theme button's three states; the billing figures roll ═══════════════════════ */ .top__theme .theme__i{width:17px;height:17px;display:none} .top__theme[data-choice="system"] .theme__i--system,.top__theme[data-choice="light"] .theme__i--light,.top__theme[data-choice="dark"] .theme__i--dark{display:block;animation:theme-in .45s cubic-bezier(.34,1.3,.5,1)} @keyframes theme-in{from{opacity:0;transform:rotate(-60deg) scale(.6)}to{opacity:1;transform:none}} .bill-roll{position:relative;display:inline-block;clip-path:inset(-4px 0);vertical-align:baseline;line-height:inherit} .bill-roll__out,.bill-roll__in{display:inline-block;white-space:nowrap;line-height:inherit;vertical-align:baseline} .bill-roll__out{position:absolute;left:0;top:0;animation:bill-out .5s cubic-bezier(.4,0,.2,1) both} .bill-roll__in{animation:bill-in .6s cubic-bezier(.34,1.3,.5,1) both} @keyframes bill-out{to{opacity:0;transform:translateY(-70%);filter:blur(3px)}} @keyframes bill-in{from{opacity:0;transform:translateY(70%);filter:blur(3px)}to{opacity:1;transform:none;filter:none}} .bill-fade{animation:bill-fade .45s ease} @keyframes bill-fade{from{opacity:0}to{opacity:1}} .seg.is-bounce .seg__b.is-on{animation:seg-bounce .5s cubic-bezier(.34,1.56,.64,1)} @keyframes seg-bounce{0%{transform:scale(.92)}60%{transform:scale(1.05)}100%{transform:none}} .plan__price,.bill__price{font-variant-numeric:tabular-nums} @media (prefers-reduced-motion:reduce){.bill-roll__out,.bill-roll__in,.bill-fade,.seg.is-bounce .seg__b.is-on{animation:none!important}.bill-roll__out{display:none}} /* ═══════════════════════ the account menu and the person's row, in Claude's layout ═══════════════════════ */ .menu--me{padding:8px;min-width:0;border-radius:16px} .menu--me .menu__who{margin:6px 10px 8px;font-family:var(--sans);font-size:13px;letter-spacing:0;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .menu__r{display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;border:0;border-radius:9px;background:none;color:var(--ink);font:inherit;font-size:14.5px;text-align:left;cursor:pointer;text-decoration:none} .menu__r:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)} .menu__r b{font-weight:400;flex:1;min-width:0} .menu__ic{width:18px;height:18px;flex:none;color:var(--ink-2)} .menu__ext{width:16px;height:16px;flex:none;color:var(--muted)} .menu__kbd{font-family:var(--sans);font-size:12px;color:var(--faint);letter-spacing:.04em} .menu__hr{border:0;height:1px;margin:6px 10px;background:var(--line-2)} .menu__two{flex:1;min-width:0;display:flex;flex-direction:column} .menu__two b{flex:none} .menu__two span{font-size:12.5px;color:var(--muted)} .side__row--me{padding:8px 10px;padding-right:10px;border-radius:12px;background:color-mix(in srgb,var(--ink) 5%,transparent)} .side__row--me:hover,.side__row--me[aria-expanded="true"]{background:color-mix(in srgb,var(--ink) 9%,transparent)} .side__me{width:30px;height:30px;border-radius:50%;font-size:11px;font-weight:600;background:color-mix(in srgb,var(--ink) 12%,transparent);color:var(--ink)} .side__meline{display:flex;align-items:baseline;gap:5px;min-width:0} .side__meline .side__name{font-size:13.5px;font-weight:500} .side__plan{flex:none;font-size:12.5px;color:var(--muted)} .side__chev{width:16px;height:16px;flex:none;color:var(--muted);transition:transform .3s} .side__row--me[aria-expanded="true"] .side__chev{transform:rotate(180deg)} .side__gear{display:none} /* a page that is loading keeps what it shows, a touch quieter; no placeholder mark */ .main.is-loading{opacity:.6;transition:opacity .2s} .main{transition:opacity .2s} /* ═══════════════════════ between pages: the lockup on a veil, soft in and soft out; the page rises into place ═══════════════════════ */ .veil{position:absolute;inset:0;z-index:14;display:grid;place-items:center;pointer-events:none;opacity:0;visibility:hidden; background:color-mix(in srgb,var(--bg) 78%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); transition:opacity .45s cubic-bezier(.4,0,.2,1),visibility 0s linear .45s} .pane.is-veiled .veil{opacity:1;visibility:visible;transition:opacity .55s cubic-bezier(.4,0,.2,1),visibility 0s} .veil__lock{display:flex;align-items:center;gap:14px;color:var(--ink);transform:translateY(6px) scale(.97);opacity:0;transition:transform .7s cubic-bezier(.22,.68,.32,1),opacity .6s ease} .pane.is-veiled .veil__lock{transform:none;opacity:1} .veil__mark{width:54px;height:54px;--b-look-anim:mark-glance;animation:veil-breathe 3.2s ease-in-out infinite} .veil__wm .wm-svg{height:20px;width:auto;display:block;overflow:visible} .veil .wm-l{opacity:.35;animation:veil-letter 2.4s ease-in-out infinite} .veil .wm-l:nth-child(2){animation-delay:.14s}.veil .wm-l:nth-child(3){animation-delay:.28s}.veil .wm-l:nth-child(4){animation-delay:.42s}.veil .wm-l:nth-child(5){animation-delay:.56s} @keyframes veil-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}} @keyframes veil-letter{0%,100%{opacity:.35}45%{opacity:1}} .main.is-loading{opacity:.35;transition:opacity .4s ease} .main.is-in{animation:page-in .55s cubic-bezier(.22,.68,.32,1)} @keyframes page-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.veil,.veil__lock{transition:none}.veil__mark,.veil .wm-l,.main.is-in{animation:none}.veil .wm-l{opacity:1}} /* a wider list on a desktop, so names and previews are not cut short */ @media (min-width:900px){.app{grid-template-columns:312px 1fr}} @media (min-width:1400px){.app{grid-template-columns:340px 1fr}} .menu--to{min-width:270px} .menu--to .menu__i span{white-space:nowrap} .menu__i--more{border-top:1px solid var(--line-2);margin-top:4px;padding-top:11px;border-radius:0 0 9px 9px} .menu--to .menu__i--more{flex-direction:row;align-items:center;justify-content:space-between} /* ═══════════════════════ BERNINA — the guardian's page: a living shield, a Run crossing three gates, figures that count ═══════════════════════ A shield, never a face: Bernina is a layer, not an agent. Green when it enforces, rose when it only observes, quiet when it stands by. */ .bn{--bn:#13D1A3;max-width:1040px;margin:0 auto} .bn[data-state="observe"]{--bn:var(--rose)} .bn[data-state="off"]{--bn:var(--muted)} .bn__hero{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:1fr;gap:22px;align-items:center;padding:30px 24px;margin:0 0 16px;border-radius:var(--r-l);border:1px solid var(--line); background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--bn) 13%,var(--surface)),var(--surface) 58%)} .bn__aurora{position:absolute;z-index:-1;inset:-30% auto auto -10%;width:70%;height:150%;background:conic-gradient(from 120deg at 40% 50%,transparent 0 35%,color-mix(in srgb,var(--bn) 50%,transparent) 52%,color-mix(in srgb,var(--c-saentis) 40%,transparent) 68%,transparent 84%);filter:blur(54px);opacity:.5;animation:bn-aurora 18s ease-in-out infinite alternate} @keyframes bn-aurora{from{transform:rotate(0) translate3d(0,0,0)}to{transform:rotate(18deg) translate3d(6%,-4%,0)}} .bn__shield{position:relative;width:168px;height:168px;display:grid;place-items:center;margin:0 auto;flex:none} .bn__ring{position:absolute;border-radius:50%;border:1px solid color-mix(in srgb,var(--bn) 45%,transparent)} .bn__ring--1{inset:26px;animation:bn-pulse 4.2s ease-out infinite} .bn__ring--2{inset:26px;animation:bn-pulse 4.2s ease-out 1.4s infinite} .bn__ring--3{inset:26px;animation:bn-pulse 4.2s ease-out 2.8s infinite} @keyframes bn-pulse{0%{transform:scale(1);opacity:.85}100%{transform:scale(1.62);opacity:0}} .bn__sweep{position:absolute;inset:14px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 62%,color-mix(in srgb,var(--bn) 90%,transparent) 92%,transparent 100%);-webkit-mask:radial-gradient(circle,transparent 55px,#000 56px,#000 68px,transparent 69px);mask:radial-gradient(circle,transparent 55px,#000 56px,#000 68px,transparent 69px);animation:bn-sweep 5s linear infinite} @keyframes bn-sweep{to{transform:rotate(360deg)}} .bn__core{position:relative;width:104px;height:104px;border-radius:50%;display:grid;place-items:center;color:var(--ink); background:radial-gradient(circle at 34% 28%,color-mix(in srgb,var(--bn) 34%,var(--surface-2)),var(--surface-2) 72%); box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 26%,transparent),0 18px 44px -14px color-mix(in srgb,var(--bn) 60%,transparent),0 0 0 1px color-mix(in srgb,var(--bn) 30%,transparent);animation:bn-breathe 5.4s ease-in-out infinite} .bn__core svg{width:48px;height:48px} @keyframes bn-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}} .bn__spark{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--bn);box-shadow:0 0 10px var(--bn);top:50%;left:50%;margin:-2.5px;animation:bn-orbit 7s linear infinite} .bn__spark--2{animation-duration:9.5s;animation-delay:-3s;opacity:.7}.bn__spark--3{animation-duration:12s;animation-delay:-6s;opacity:.5} @keyframes bn-orbit{from{transform:rotate(0) translateX(76px)}to{transform:rotate(360deg) translateX(76px)}} .bn[data-state="off"] .bn__sweep,.bn[data-state="off"] .bn__spark,.bn[data-state="off"] .bn__ring{animation-play-state:paused;opacity:.25} .bn__pill{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 10px;border-radius:999px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--bn);background:color-mix(in srgb,var(--bn) 12%,transparent);border:1px solid color-mix(in srgb,var(--bn) 30%,transparent)} .bn__pill i{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor;animation:pulse 2.4s infinite} .bn__h{margin:12px 0 10px;font-size:clamp(24px,3.6vw,38px);line-height:1.06;font-weight:700;letter-spacing:-.035em} .bn__sub{margin:0;max-width:58ch;font-size:14.5px;line-height:1.55;color:var(--ink-2)} .bn__meta{margin:14px 0 0;font-size:10.5px;letter-spacing:.06em;color:var(--faint)} @media (min-width:820px){.bn__hero{grid-template-columns:auto 1fr;gap:34px;padding:38px 36px}.bn__shield{margin:0}} /* the figures */ .bn__stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 16px} @media (min-width:820px){.bn__stats{grid-template-columns:repeat(4,1fr)}} .bn__stat{display:flex;flex-direction:column;gap:2px;padding:16px 18px;border-radius:var(--r-m);border:1px solid var(--line);background:var(--glass-2);transition:transform .5s cubic-bezier(.34,1.3,.5,1),border-color .3s} .bn__stat:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--bn) 40%,var(--line))} .bn__stat b{font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1.1} .bn__stat span{font-size:13.5px;color:var(--ink)} .bn__stat i{font-style:normal;font-size:12px;color:var(--faint)} .bn__wait{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;margin:0 0 16px;border-radius:var(--r-m);background:color-mix(in srgb,var(--zug) 9%,transparent);border:1px solid color-mix(in srgb,var(--zug) 30%,transparent);color:var(--ink);font-size:14px} .bn__wait b{font-weight:600;flex:1}.bn__wait span:last-child{color:var(--zug);font-weight:600} .bn__wait-dot{width:8px;height:8px;border-radius:50%;background:var(--zug);box-shadow:0 0 10px rgba(218,41,28,.8)} /* the flow: a Run crossing three gates */ .bn__flow{margin:26px 0 18px} .bn__track{position:relative;height:22px;margin:4px 8% 10px;display:flex;justify-content:space-between;align-items:center} .bn__track::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--bn) 45%,transparent) 12%,color-mix(in srgb,var(--bn) 45%,transparent) 88%,transparent)} .bn__beam{position:absolute;top:50%;left:0;width:22%;height:2px;margin-top:-1px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--bn),#fff,var(--bn),transparent);filter:drop-shadow(0 0 6px var(--bn));animation:bn-beam 4.6s cubic-bezier(.45,0,.55,1) infinite} @keyframes bn-beam{0%{left:-22%;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:100%;opacity:0}} .bn__node{position:relative;z-index:1;width:12px;height:12px;border-radius:50%;background:var(--surface);border:2px solid var(--bn);box-shadow:0 0 0 4px color-mix(in srgb,var(--bn) 14%,transparent);animation:bn-node 4.6s ease-in-out infinite} .bn__node:nth-child(3){animation-delay:1.5s}.bn__node:nth-child(4){animation-delay:3s} @keyframes bn-node{0%,18%,100%{transform:scale(1)}9%{transform:scale(1.5);background:var(--bn)}} .bn__gates{display:grid;grid-template-columns:1fr;gap:12px} @media (min-width:820px){.bn__gates{grid-template-columns:repeat(3,1fr)}} @media (max-width:819px){.bn__track{display:none}} .bn__gate{padding:18px 18px 16px;border-radius:var(--r-m);border:1px solid var(--line);background:var(--glass-2);transition:transform .5s cubic-bezier(.34,1.3,.5,1),border-color .3s} .bn__gate:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--bn) 42%,var(--line))} .bn__gate-k{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--bn)} .bn__gate h3{margin:6px 0 6px;font-size:17px;font-weight:700;letter-spacing:-.02em} .bn__gate p{margin:0 0 10px;font-size:13.5px;color:var(--muted);line-height:1.5} .bn__gate ul{list-style:none;margin:0;padding:0;display:grid;gap:6px} .bn__gate li{position:relative;padding-left:16px;font-size:13px;color:var(--ink-2)} .bn__gate li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:color-mix(in srgb,var(--bn) 70%,transparent)} /* verdicts and reach */ .bn__two{display:grid;grid-template-columns:1fr;gap:12px;margin:0 0 8px} @media (min-width:820px){.bn__two{grid-template-columns:1fr 1fr}} .bn__panel{padding:18px;border-radius:var(--r-m);border:1px solid var(--line);background:var(--glass-2)} .bn__panel .set__h{margin:0 0 10px} .bn__verdicts{display:grid;gap:8px} .bn__v{display:grid;grid-template-columns:74px 1fr;gap:10px;align-items:baseline;padding:9px 12px;border-radius:12px;background:color-mix(in srgb,var(--vc) 8%,transparent);border:1px solid color-mix(in srgb,var(--vc) 22%,transparent)} .bn__v b{color:var(--vc);font-size:13.5px;font-weight:600} .bn__v span{font-size:13px;color:var(--ink-2)} .bn__v--pass{--vc:#13D1A3}.bn__v--redact{--vc:var(--c-titlis)}.bn__v--hold{--vc:var(--c-saentis)}.bn__v--block{--vc:var(--zug)} .bn__hosts{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 12px} .bn__hosts code{font-size:11.5px;padding:5px 10px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink-2);background:color-mix(in srgb,var(--ink) 3%,transparent)} .bn__lock{display:flex;align-items:center;gap:8px;margin:0;font-size:12.5px;color:var(--faint)} .bn__lock span{width:16px;height:16px;flex:none;color:var(--bn)}.bn__lock svg{width:16px;height:16px;display:block} @media (prefers-reduced-motion:reduce){.bn__aurora,.bn__ring,.bn__sweep,.bn__core,.bn__spark,.bn__beam,.bn__node,.bn__pill i{animation:none}.bn__beam{display:none}} /* the list, a touch narrower on a desktop */ @media (min-width:900px){.app{grid-template-columns:288px 1fr}} @media (min-width:1400px){.app{grid-template-columns:312px 1fr}} /* phone and tablet: top left, two quiet icons — the conversations, and Settings */ .top__set{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:var(--pill);border:1px solid var(--line);background:var(--raised);color:var(--ink);transition:background .18s,transform .6s cubic-bezier(.34,1.3,.5,1)} .top__set:hover{background:color-mix(in srgb,var(--ink) 9%,transparent);transform:rotate(60deg)} .top__back,.top__set{color:var(--ink)} @media (min-width:900px){.top__set{display:none}} @media (max-width:899px){.top{gap:8px;padding-left:12px;padding-right:12px}.top__clock{display:none}} /* before the script runs: someone who has been in before sees the shell, never a bare screen */ html.is-seen #app[hidden]{display:grid!important} html.is-seen #door{display:none!important} html{background:var(--bg)} /* a narrower list */ @media (min-width:900px){.app{grid-template-columns:260px 1fr}} @media (min-width:1400px){.app{grid-template-columns:280px 1fr}} @media (min-width:900px){.side__brand .bot--brand{width:40px;height:40px}.side__wm .wm-svg{height:15px}} /* while typing on a phone: the page itself never scrolls, only the thread does */ html.is-typing,html.is-typing body{overflow:hidden;height:100%;overscroll-behavior:none} html,body{overscroll-behavior:none} /* the plans inside Settings: the same cards, fitted to the sheet */ .modal__card .bill{max-width:none} .modal__card .plans{grid-template-columns:1fr} @media (min-width:720px){.modal__card .plans{grid-template-columns:1fr 1fr}} .modal__card .bill__now{margin-bottom:16px} /* ═══════════════════════ the pages behind the account menu: help, the app, the changelog, developers ═══════════════════════ */ .pg{max-width:1040px;margin:0 auto} .pg__hero{position:relative;overflow:hidden;isolation:isolate;padding:30px 26px 26px;margin:0 0 18px;border-radius:var(--r-l);border:1px solid var(--line);background:linear-gradient(160deg,color-mix(in srgb,var(--c-saentis) 11%,var(--surface)),var(--surface) 60%)} .pg__aurora{position:absolute;z-index:-1;inset:-40% -10% auto auto;width:65%;height:170%;background:conic-gradient(from 200deg at 60% 40%,transparent 0 42%,color-mix(in srgb,var(--c-pilatus) 42%,transparent) 56%,color-mix(in srgb,var(--c-matterhorn) 38%,transparent) 70%,transparent 86%);filter:blur(50px);opacity:.5;animation:mkt-aurora 18s ease-in-out infinite alternate} .pg__h{margin:2px 0 8px;font-size:clamp(26px,4vw,40px);line-height:1.05;font-weight:700;letter-spacing:-.035em} .pg__sub{margin:0;max-width:60ch;font-size:14.5px;line-height:1.55;color:var(--ink-2)} .pg__sec{margin:26px 0 10px} .pg__cards{display:grid;grid-template-columns:1fr;gap:12px} @media (min-width:820px){.pg__cards{grid-template-columns:repeat(3,1fr)}} .pg__card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:18px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--glass-2);color:var(--ink);text-align:left;font:inherit;cursor:pointer;text-decoration:none;transition:transform .5s cubic-bezier(.34,1.3,.5,1),border-color .3s} .pg__card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--ink) 26%,var(--line))} .pg__card b{font-size:15.5px;font-weight:600;letter-spacing:-.015em} .pg__card span:last-child{font-size:13px;color:var(--muted);line-height:1.45} .pg__ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--ink) 7%,transparent);margin-bottom:4px} .pg__ic svg{width:18px;height:18px} .pg__faq{border:1px solid var(--line);border-radius:var(--r-m);background:var(--glass-2);overflow:hidden} .pg__q{border-bottom:1px solid var(--line-2)}.pg__q:last-child{border-bottom:0} .pg__q summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;cursor:pointer;font-size:14.5px;font-weight:500} .pg__q summary::-webkit-details-marker{display:none} .pg__q summary i{position:relative;width:12px;height:12px;flex:none} .pg__q summary i::before,.pg__q summary i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.6px;margin-top:-.8px;border-radius:2px;background:var(--muted);transition:transform .35s cubic-bezier(.34,1.3,.5,1)} .pg__q summary i::after{transform:rotate(90deg)} .pg__q[open] summary i::after{transform:rotate(0)} .pg__q p{margin:0;padding:0 18px 16px;font-size:13.5px;line-height:1.55;color:var(--muted);max-width:70ch;animation:page-in .4s cubic-bezier(.22,.68,.32,1)} .pg__two{display:grid;grid-template-columns:1fr;gap:14px} @media (min-width:900px){.pg__two{grid-template-columns:1.4fr 1fr}.pg__two--wide{grid-template-columns:1fr 1fr}} .pg__pad{padding:18px} .pg__row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 12px}.pg__row .set__h{margin:0} .pg__steps{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:10px} .pg__steps li{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.45;color:var(--ink-2)} .pg__steps i{width:24px;height:24px;flex:none;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11px;background:var(--ink);color:var(--bg)} .pg__phone{text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px} .pg__device{position:relative;width:120px;height:150px;margin:4px 0 10px;border-radius:26px 26px 0 0;border:1px solid var(--line);border-bottom:0;background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 6%,transparent),transparent);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;-webkit-mask:linear-gradient(#000 60%,transparent);mask:linear-gradient(#000 60%,transparent)} .pg__notch{position:absolute;top:9px;width:38px;height:9px;border-radius:9px;background:color-mix(in srgb,var(--ink) 16%,transparent)} .pg__app{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;background:#0A0A0A;box-shadow:0 10px 24px -10px rgba(0,0,0,.6);animation:mkt-bob 5s ease-in-out infinite} .pg__app .bot{width:40px;height:40px;filter:none;--b-look-anim:mark-glance} .pg__appname{font-size:10.5px;color:var(--muted)} .pg__log{list-style:none;margin:0;padding:0;position:relative} .pg__log::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1px;background:var(--line)} .pg__rel{position:relative;display:grid;grid-template-columns:1fr;gap:6px;padding:0 0 24px 26px} .pg__rel::before{content:"";position:absolute;left:0;top:5px;width:11px;height:11px;border-radius:50%;background:var(--surface);border:2px solid var(--zug)} .pg__rel:first-child::before{background:var(--zug);box-shadow:0 0 0 4px color-mix(in srgb,var(--zug) 18%,transparent)} .pg__date{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)} .pg__relbody{padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--glass-2)} .pg__relbody h3{margin:0 0 8px;font-size:17px;font-weight:700;letter-spacing:-.02em} .pg__relbody ul{margin:0;padding:0;list-style:none;display:grid;gap:7px} .pg__relbody li{position:relative;padding-left:16px;font-size:13.5px;line-height:1.5;color:var(--ink-2)} .pg__relbody li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:color-mix(in srgb,var(--ink) 30%,transparent)} @media (min-width:820px){.pg__rel{grid-template-columns:120px 1fr;gap:16px}.pg__date{padding-top:4px}} .pg__fresh{display:grid;gap:8px;padding:16px 18px;margin:0 0 16px;border-radius:var(--r-m);background:color-mix(in srgb,#13D1A3 9%,transparent);border:1px solid color-mix(in srgb,#13D1A3 34%,transparent)} .pg__fresh b{font-size:14.5px} .pg__token{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .pg__token code{flex:1;min-width:0;padding:10px 12px;border-radius:10px;background:var(--surface);border:1px solid var(--line-2);font-size:12px;word-break:break-all} .pg__keyform{display:grid;gap:12px;margin-top:12px}.pg__keyform .set__h{margin:0} .pg__scopes{display:grid;grid-template-columns:1fr;gap:4px} @media (min-width:560px){.pg__scopes{grid-template-columns:1fr 1fr}} .pg__scope{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:9px;font-size:13px;cursor:pointer} .pg__scope:hover{background:color-mix(in srgb,var(--ink) 5%,transparent)} .pg__scope input{accent-color:var(--zug);width:15px;height:15px;flex:none} .pg__scope span{flex:1}.pg__scope code{font-size:10px;color:var(--faint)} .pg__code{margin:0 0 12px;border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;background:#0B0C10;color:#E7E9EE} .pg__codebar{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.08);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5)} .pg__copy{border:0;background:rgba(255,255,255,.08);color:#fff;border-radius:999px;padding:4px 10px;font:inherit;font-size:10px;letter-spacing:.06em;cursor:pointer} .pg__code pre{margin:0;padding:14px;font-size:12px;line-height:1.6;overflow-x:auto;white-space:pre} /* the person's row: a quiet focus ring, not an alarm */ .side__row--me:focus-visible,.side__new:focus-visible{outline:2px solid color-mix(in srgb,var(--ink) 40%,transparent);outline-offset:2px} .side__row--me:focus:not(:focus-visible){outline:0} /* a passkey in the list: what it is, where and when it was made, and an id */ .pk{align-items:flex-start} .pk__ic{width:34px;height:34px;flex:none;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--ink) 7%,transparent)} .pk__ic svg{width:17px;height:17px} .pk__id{font-size:10.5px!important;letter-spacing:.06em;color:var(--faint)!important} /* Bernina: the light leaves the first dot, reaches the second, then the third */ .bn__track{margin:6px 16.66% 12px} .bn__rail{position:absolute;left:6px;right:6px;top:50%;height:0} .bn__beam{left:0;width:64px;margin-left:-32px;animation:bn-travel 5.4s cubic-bezier(.6,0,.35,1) infinite} @keyframes bn-travel{0%{left:0;opacity:0;transform:scaleX(.2)}6%{opacity:1;transform:scaleX(.2)}12%{left:0;transform:scaleX(1)}44%{left:50%;transform:scaleX(1)}50%{left:50%;transform:scaleX(.2)}56%{left:50%;transform:scaleX(1)}88%{left:100%;transform:scaleX(1)}94%{left:100%;opacity:1;transform:scaleX(.2)}100%{left:100%;opacity:0;transform:scaleX(.2)}} .bn__node{animation:bn-hit 5.4s ease-in-out infinite} .bn__node:nth-child(2){animation-delay:0s}.bn__node:nth-child(3){animation-delay:2.55s}.bn__node:nth-child(4){animation-delay:4.9s} @keyframes bn-hit{0%,14%,100%{transform:scale(1);background:var(--surface)}4%{transform:scale(1.55);background:var(--bn);box-shadow:0 0 0 6px color-mix(in srgb,var(--bn) 22%,transparent),0 0 16px var(--bn)}} @media (prefers-reduced-motion:reduce){.bn__beam{display:none}.bn__node{animation:none}} /* phone and tablet: the page is pinned; only the thread scrolls, keyboard or not */ @media (max-width:1100px){html,body{position:fixed;inset:0;width:100%;height:100%;overflow:hidden}} /* the passkey's own sign */ .pk__ic svg{width:19px;height:19px} .btn--pk{gap:7px}.btn--pk svg{width:16px;height:16px;flex:none} /* the keyboard is up: the bar is pinned to the visible top whatever the browser did to the page, and the thread starts under it */ /* (the bar needs no pinning of its own: the app is sized to what is visible, and the bar is its top edge) */ /* the usage bars fill once; a repaint shows them already full */ .use__fill.is-still{transition:none} /* the payment method, as a card */ .pm{align-items:center} .pm__card{position:relative;width:46px;height:32px;flex:none;border-radius:7px;background:linear-gradient(135deg,#1F2430,#0B0D12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)} .pm__card i{position:absolute;left:7px;right:7px;height:3px;border-radius:2px;background:rgba(255,255,255,.35)} .pm__card i:first-child{top:9px;right:22px;background:#DA291C}.pm__card i:last-child{bottom:8px} .pm__note{margin:8px 18px 14px} /* ═══════════════════════ phone and tablet: the app ends where the screen does, not behind the browser's toolbar ═══════════════════════ */ .app{bottom:auto;height:100vh;height:100dvh} @supports (-webkit-touch-callout:none){.app{height:-webkit-fill-available;height:100dvh}} .modal{height:100dvh;bottom:auto} .side__foot{padding-bottom:calc(var(--safe-b) + 12px)} .composer{padding-bottom:calc(var(--safe-b) + 12px)} /* ═══════════════════════ the opening: the mark rolls in from the left; the letters come out from behind it ═══════════════════════ */ .intro{position:fixed;inset:0;z-index:100;display:none;place-items:center;background:var(--bg);color:var(--ink)} html.is-intro .intro{display:grid} html.is-intro-in .intro{animation:intro-in .5s cubic-bezier(.4,0,.2,1) both} @keyframes intro-in{from{opacity:0}to{opacity:1}} html.is-intro-out .intro{opacity:0;transition:opacity 1.2s cubic-bezier(.4,0,.2,1);pointer-events:none} html.is-intro-out .intro__lock{transform:scale(1.05);transition:transform 1.2s cubic-bezier(.4,0,.2,1)} /* the Console arrives from underneath as the opening leaves */ html.is-intro .app{opacity:0;transform:scale(.985)} html.is-intro-out .app{opacity:1;transform:none;transition:opacity 1.1s cubic-bezier(.4,0,.2,1) .15s,transform 1.3s cubic-bezier(.22,1,.36,1) .15s} .intro__lock{display:flex;align-items:center;gap:18px} .intro__mark{display:block;width:84px;height:84px;animation:intro-roll 1.5s cubic-bezier(.16,1,.3,1) both} .intro__mark .bot{width:84px;height:84px;--b-look-anim:mark-glance} @keyframes intro-roll{0%{transform:translateX(-38vw) rotate(-360deg) scale(.86);opacity:0}35%{opacity:1}100%{transform:none;opacity:1}} .intro__wm .wm-svg{height:30px;width:auto;display:block;overflow:visible} .intro .wm-l{opacity:0;transform:translateX(-36px) scale(.7);animation:intro-letter .9s cubic-bezier(.22,1,.36,1) both} .intro .wm-l:nth-child(1){animation-delay:.9s}.intro .wm-l:nth-child(2){animation-delay:.98s}.intro .wm-l:nth-child(3){animation-delay:1.06s}.intro .wm-l:nth-child(4){animation-delay:1.14s}.intro .wm-l:nth-child(5){animation-delay:1.22s} @keyframes intro-letter{from{opacity:0;transform:translateX(-36px) scale(.7)}to{opacity:1;transform:none}} @media (max-width:560px){.intro__mark,.intro__mark .bot{width:64px;height:64px}.intro__wm .wm-svg{height:23px}.intro__lock{gap:14px}} /* ═══════════════════════ an agent thinking: three white dots in orbit ═══════════════════════ Three dots on a small circle, a third of a turn apart, turning together with a surge and a glide. Each is a solid white dot, nothing around it, that grows to full size and shrinks back to a point, a third of a cycle after the last — so one is always full, one small, one between. White on a dark ground; the ink's own colour on a light one, where white would vanish. No bubble. */ .think{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background:none;border:0;--dot:#fff} :root[data-zt="light"] .think{--dot:var(--ink)} .think__halo{display:none} .think__dots{position:relative;display:block;width:24px;height:24px;animation:think-orbit 1.9s cubic-bezier(.65,0,.25,1) infinite} .think__dots i{position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px;border-radius:50%; background:none;box-shadow:none; transform:rotate(var(--a)) translateY(-7.5px)} .think__dots i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--dot);box-shadow:0 0 7px color-mix(in srgb,var(--dot) 55%,transparent);animation:think-core 1.5s ease-in-out infinite;animation-delay:inherit} .think__dots i:nth-child(1){--a:0deg;animation-delay:0s} .think__dots i:nth-child(2){--a:120deg;animation-delay:-.5s} .think__dots i:nth-child(3){--a:240deg;animation-delay:-1s} @keyframes think-orbit{0%{transform:rotate(0)}100%{transform:rotate(720deg)}} @keyframes think-core{0%,100%{transform:scale(.22);opacity:.75}50%{transform:scale(1);opacity:1}} @media (prefers-reduced-motion:reduce){.think__dots,.think__dots i::after{animation:none}.think__dots i::after{transform:scale(.6)}} /* with the keyboard up there is no home-indicator gap to leave under the composer */ html.is-typing .composer{padding-bottom:8px} html.is-typing .main{padding-bottom:118px} /* ═══════════════════════ nothing moves that was not asked to ═══════════════════════ On a touch device the app starts at the small viewport height, which does not change as the browser's toolbar slides, and the script then gives it one settled height. The page never scrolls, never bounces. */ @media (pointer:coarse){ .app{height:100svh} html,body{position:fixed;inset:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;touch-action:pan-x pan-y} .main,.side__list,.modal__card .set__body{overscroll-behavior:contain;-webkit-overflow-scrolling:touch} } /* a page arriving fades; it does not travel — on a small screen a rising page reads as a jolt */ @media (max-width:1100px){@keyframes page-in{from{opacity:0}to{opacity:1}}} /* ═══════════════════════ touch devices: the stylesheet sizes the app, and the browser moves it ═══════════════════════ 100dvh follows the browser's own toolbar on the compositor. No script touches the height at rest. */ @media (pointer:coarse){ .app{top:0;bottom:auto;height:100dvh} .modal{height:100dvh} } /* opened from the Home Screen there is no browser chrome: the whole screen, under the status bar too */ @media (display-mode:standalone){ .app,.modal{height:100vh;height:100dvh} .side__top,.top{padding-top:calc(env(safe-area-inset-top,0px) + 12px)} } /* the two blurred surfaces are promoted once, so scrolling beneath them does not repaint them frame by frame */ .top,.composer__box{transform:translateZ(0);backface-visibility:hidden} .main{will-change:scroll-position} /* ═══════════════════════ the guide, and the switches in Notifications ═══════════════════════ */ .guide__nav{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 16px} @media (min-width:820px){.guide__nav{grid-template-columns:repeat(4,1fr)}} .guide__jump{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--glass-2);color:var(--ink);font:inherit;font-size:13.5px;font-weight:600;letter-spacing:-.01em;text-align:left;cursor:pointer;transition:border-color .3s,transform .5s cubic-bezier(.34,1.3,.5,1)} .guide__jump:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--ink) 26%,var(--line))} .guide__jump i{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:color-mix(in srgb,var(--ink) 10%,transparent);font-size:11px;font-style:normal} .guide__ch{margin-bottom:14px;scroll-margin-top:14px;outline:none} .guide__h{margin:0 0 4px;font-size:19px;font-weight:600;letter-spacing:-.02em} .guide__sub{margin:0 0 16px} .guide__note{margin:0 0 14px} .guide__links{display:flex;flex-wrap:wrap;gap:8px} .guide__banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding:14px 18px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--glass-2);color:var(--ink);text-decoration:none} .guide__banner b{font-size:14.5px;font-weight:600}.guide__banner span{flex:1 1 220px;font-size:13px;color:var(--muted)}.guide__banner i{font-style:normal;color:var(--muted)} .sw{position:relative;flex:none;width:42px;height:26px;padding:0;border:0;border-radius:13px;background:color-mix(in srgb,var(--ink) 16%,transparent);cursor:pointer;transition:background .3s} .sw i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .35s cubic-bezier(.34,1.4,.5,1)} .sw.is-on{background:var(--c-saentis)}.sw.is-on i{transform:translateX(16px)} .sw:disabled{opacity:.4;cursor:not-allowed} .sw:focus-visible{outline:2px solid var(--ink);outline-offset:2px} /* the settings sheet never grows wider than its screen: the column takes the width it is given, not its widest row */ @media (max-width:899px){.modal__card .set{grid-template-columns:minmax(0,1fr);min-width:0;width:100%}} .set__top{min-width:0}.set__top .set__search,.set__top input{min-width:0} /* ═══════════════════════ down to the latest: a round arrow above the message box ═══════════════════════ */ .todown{position:absolute;left:50%;bottom:calc(var(--safe-b) + 132px);z-index:16;display:grid;place-items:center;width:38px;height:38px;margin-left:-19px;padding:0;border:1px solid var(--line);border-radius:50%;background:color-mix(in srgb,var(--bg) 86%,var(--ink) 14%);color:var(--ink);box-shadow:0 6px 20px rgba(0,0,0,.28);cursor:pointer;animation:todown-in .35s cubic-bezier(.34,1.4,.5,1) both;transition:transform .3s cubic-bezier(.34,1.4,.5,1),border-color .3s} .todown svg{width:18px;height:18px} .todown:hover{transform:translateY(2px);border-color:color-mix(in srgb,var(--ink) 28%,var(--line))} .todown:focus-visible{outline:2px solid var(--ink);outline-offset:2px} body.is-plain .todown{bottom:calc(var(--safe-b) + 22px)} html.is-typing .todown{bottom:126px} @keyframes todown-in{from{opacity:0;transform:translateY(8px) scale(.8)}to{opacity:1;transform:none}} :root[data-motion="reduced"] .todown{animation:none} /* ═══════════════════════ phone and tablet: the page itself can never scroll ═══════════════════════ iOS leaves a fixed layer displaced after the keyboard closes or a tab comes back. So on touch the shell is not fixed at all: the document is exactly one screen tall, cannot scroll, and the shell sits in it in normal flow. There is then nothing for Safari to leave out of place. */ @media (pointer:coarse){ html,body{position:relative;width:100%;height:100dvh;min-height:0;overflow:hidden;padding:0;overscroll-behavior:none} .app{position:relative;inset:auto;top:0;left:0;width:100%;height:100dvh} .top,.side__top{padding-top:calc(var(--safe-t) + 12px)} } /* ═══════════════════════ the close sign on Settings: upper right, always in reach ═══════════════════════ */ .set__top{position:relative} .modal__x{display:grid;place-items:center;flex:none;width:38px;height:38px;margin-left:auto;padding:0;border:1px solid var(--line);background:color-mix(in srgb,var(--ink) 8%,transparent);transition:background .25s,transform .4s cubic-bezier(.34,1.4,.5,1)} .modal__x svg{width:16px;height:16px} .modal__x:hover{background:color-mix(in srgb,var(--ink) 16%,transparent);transform:rotate(90deg)} .modal__x:focus-visible{outline:2px solid var(--ink);outline-offset:2px} @media (min-width:900px){.modal__card .set__top .modal__x{position:absolute;top:14px;right:16px}.modal__card .set__top{padding-right:68px}} /* ═══════════════════════ touch: nothing but the lists may scroll ═══════════════════════ iOS scrolls any box it can, hidden overflow included, to bring a focused field into view, and leaves it there when the keyboard goes: the top bar ends up cut and the thread shows under the message box. `clip` is overflow that cannot be scrolled by anyone, script and Safari included. */ @media (pointer:coarse){ .app,.pane,.side{overflow:hidden;overflow:clip} .modal{position:absolute;inset:0;height:100dvh} .modal__card{overflow:hidden;overflow:clip} } /* under the message box the thread is covered, down to the edge of the screen */ .composer::after{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(var(--safe-b) + 34px);background:linear-gradient(to top,var(--bg) 55%,transparent);z-index:-1;pointer-events:none} /* ═══════════════════════ touch: the Console is laid where the screen is ═══════════════════════ app.js writes --vv-top and --vv-h only when the visible area is not the whole page: a keyboard is up, or iOS has left the view lower than the page's top after one. Without them this is plain 100dvh. */ @media (pointer:coarse){ .app{top:var(--vv-top,0px);height:var(--vv-h,100dvh)} .modal{top:var(--vv-top,0px);bottom:auto;height:var(--vv-h,100dvh)} } /* the close sign sits in the sheet's upper right corner at every width, whatever the row beside it does */ .modal__card .set__top{padding-right:66px} .modal__card .set__top .modal__x{position:absolute;top:calc(var(--safe-t) + 10px);right:14px;margin:0;z-index:3} @media (min-width:900px){.modal__card .set__top .modal__x{top:14px;right:16px}} /* grid children take the width they are given: a long line of code scrolls in its own box and never widens the page */ .pg__two{grid-template-columns:minmax(0,1fr)} @media (min-width:900px){.pg__two{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}.pg__two--wide{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}} .pg,.main>*{min-width:0} .pg section,.pg__two>*,.pg__code,.pg__code pre{min-width:0;max-width:100%}