/* * 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:#878A92; --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:#6F7178; --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;border-radius:50%;background:radial-gradient(closest-side at 50% 57%,var(--bot-shade,rgba(0,0,0,.5)) 78%,transparent 100%)} :root[data-zt="light"]{--bot-shade: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} .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:color-mix(in srgb,var(--who,var(--zug)) 72%,var(--ink))} .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:color-mix(in srgb,var(--zug) 72%,var(--ink));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;--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)}50%{transform:scale(1.05)}} @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} /* The consent screen a connected app sends the person to: what it may do, as a list, and the sentence about what it never can. */ .auth__scopes{margin:0 0 14px;padding:0;list-style:none;display:grid;gap:6px;font-size:14px;color:var(--a-ink)} .auth__scopes li{padding-left:18px;position:relative} .auth__scopes li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;background:var(--a-ink2)} .auth__never{margin:0 0 18px;font-size:13px;line-height:1.45;color:var(--a-ink2)} .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)} /* a password and the eye that shows it: the field keeps its full width, the eye sits inside its right end */ .pw{position:relative;display:block;min-width:0} .pw>input{width:100%;padding-right:46px} .pw:has(>.auth__input){margin:0 0 10px}.pw>.auth__input{margin:0} .pw__eye{position:absolute;top:50%;right:6px;width:34px;height:34px;margin-top:-17px;display:grid;place-items:center;border:0;border-radius:50%;background:none;color:inherit;opacity:.55;cursor:pointer;transition:opacity .18s,background .18s} .pw__eye:hover,.pw__eye:focus-visible{opacity:1;background:rgba(127,127,127,.16);outline:none} .pw__eye svg{width:18px;height:18px;display:block} .pw__eye .eye__off{opacity:1;transition:opacity .15s} .pw__eye.is-on .eye__off{opacity:0} .auth__error.is-good{color:#22C55E} .auth__link--quiet{display:block;margin:6px auto 0;opacity:.72;font-size:12.5px} .auth__link--quiet:hover{opacity:1} .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} } /* waiting on the server or on a passkey: the button stays lit, three dots breathe in turn, the fields step back. Inside the auth block on purpose: the site copies this block on every build, so both doors wait the same way. */ .auth__cta.is-waiting,button.is-waiting{opacity:1;display:inline-flex;align-items:center;justify-content:center;gap:10px} .auth__wait{display:inline-flex;align-items:center;gap:4px} .auth__wait i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.3;animation:auth-wait 1.5s ease-in-out infinite} .auth__wait i:nth-child(2){animation-delay:.2s}.auth__wait i:nth-child(3){animation-delay:.4s} @keyframes auth-wait{0%,100%{opacity:.25;transform:scale(.8)}45%{opacity:1;transform:scale(1.15)}} form.is-waiting input{opacity:.55;pointer-events:none;transition:opacity .4s} @media (prefers-reduced-motion:reduce){.auth__wait i{animation:none;opacity:.7}} @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:color-mix(in srgb,var(--ac) 72%,var(--ink))} .tag--hot{background:color-mix(in srgb,var(--zug) 14%,transparent);color:color-mix(in srgb,var(--zug) 72%,var(--ink))} .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 */ /* the mark's shadow is a gradient behind the ball, never a filter: Safari draws a filtered, animated SVG inside a visible square */ /* 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,.set__hit:focus-visible{background:color-mix(in srgb,var(--ink) 6%,transparent);outline:none} .is-found{animation:set-found 2.4s ease-out} @keyframes set-found{0%,35%{box-shadow:inset 0 0 0 1.5px var(--c-saentis);background-color:color-mix(in srgb,var(--c-saentis) 9%,transparent)}100%{box-shadow:inset 0 0 0 1.5px transparent;background-color:transparent}} :root[data-motion="reduced"] .is-found{animation-duration:.01s} .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;justify-content:center;gap:6px;height:34px;width:34px;padding:0;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__hooks{margin-top:28px;display:flex;flex-direction:column;gap:12px} .pg__hookslead{max-width:68ch;margin:0} .pg__hookurl{overflow-wrap:anywhere;font-weight:600} .pg__hookacts{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end} .pg__hooks .srow.is-off .srow__k{opacity:.55} .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} /* The ball is drawn here, in the page, not taken from the sprite: the sprite arrives after the script, and the opening is the first thing shown. It rolls in the way a lit ball does: the ball travels and its face turns, while the light on it and the shadow under it stay where the light is. */ .intro__mark{position:relative;display:block;width:84px;height:84px;animation:intro-roll 1.5s cubic-bezier(.16,1,.3,1) both} .intro__mark::after{content:"";position:absolute;left:14%;right:14%;bottom:-3%;height:12%;border-radius:50%;background:radial-gradient(closest-side,var(--bot-shade,rgba(0,0,0,.5)),transparent);z-index:-1} .intro__ball{display:block;width:100%;height:100%;overflow:visible} .intro__rim{fill:none;stroke:transparent;stroke-width:1} :root[data-zt="light"] .intro__rim{stroke:rgba(9,11,16,.14)} .intro__eyes{transform-box:view-box;transform-origin:32px 32px;animation:intro-face 1.5s cubic-bezier(.16,1,.3,1) both} @keyframes intro-roll{0%{transform:translateX(-38vw) scale(.86);opacity:0}35%{opacity:1}100%{transform:none;opacity:1}} @keyframes intro-face{from{transform:rotate(-360deg)}to{transform:none}} .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{width:64px;height:64px}.intro__wm .wm-svg{height:23px}.intro__lock{gap:14px}} /* ═══════════════════════ an agent thinking: an orb of its colour, and a line that says what it is doing ═══════════════════════ */ .think{display:inline-flex;align-items:center;gap:12px;min-height:34px;padding:2px 0;background:none;border:0} /* A — the orb: a small body of light in the agent's colour. Its outline breathes between two blobs, a bright lobe turns inside it, and a ring of its colour swells and fades around it. No filter: gradients and transforms only. */ .think__orb{position:relative;flex:none;width:28px;height:28px;border-radius:46% 54% 57% 43%/52% 45% 55% 48%; background:radial-gradient(circle at 32% 28%,#fff 0,color-mix(in srgb,var(--ac,var(--c-dom)) 35%,#fff) 16%,var(--ac,var(--c-dom)) 52%,color-mix(in srgb,var(--ac,var(--c-dom)) 55%,#000) 100%); box-shadow:0 0 0 0 color-mix(in srgb,var(--ac,var(--c-dom)) 45%,transparent),inset 0 -3px 6px color-mix(in srgb,#000 22%,transparent); animation:think-morph 3.4s ease-in-out infinite,think-aura 2.2s ease-out infinite;transition:transform .38s cubic-bezier(.6,0,.3,1),opacity .3s} .think__orb i{position:absolute;inset:0;border-radius:inherit;overflow:hidden} .think__orb i:first-child{background:conic-gradient(from 0deg at 50% 50%,transparent 0 55%,color-mix(in srgb,#fff 70%,transparent) 72%,transparent 88%);mix-blend-mode:screen;opacity:.75;animation:think-turn 2.6s linear infinite} .think__orb i:last-child{inset:18%;border-radius:50%;background:radial-gradient(circle at 40% 35%,color-mix(in srgb,#fff 85%,transparent) 0,transparent 60%);animation:think-drift 3.1s ease-in-out infinite} .think.is-done .think__orb{transform:scale(0);opacity:0} .think.is-done .think__line{opacity:0;transform:translateX(-6px)} /* C — the line: what the agent is doing, with a light passing through the letters */ .think__line{font-size:14.5px;line-height:1.3;font-weight:500;letter-spacing:-.01em;color:transparent; background:linear-gradient(100deg,var(--muted) 0 38%,var(--ink) 50%,var(--muted) 62% 100%);background-size:220% 100%; -webkit-background-clip:text;background-clip:text;animation:think-shimmer 2.4s linear infinite;transition:opacity .22s,transform .3s} .think__line.is-swap{opacity:0;transform:translateY(3px)} .grp__msgs.is-arriving>.msg{animation:think-arrive .5s cubic-bezier(.22,1,.36,1) both} .grp__msgs.is-arriving>.msg:nth-child(2){animation-delay:.08s} @keyframes think-morph{0%,100%{border-radius:46% 54% 57% 43%/52% 45% 55% 48%;transform:rotate(0) scale(1)}33%{border-radius:58% 42% 45% 55%/44% 57% 43% 56%;transform:rotate(6deg) scale(1.05)}66%{border-radius:43% 57% 52% 48%/58% 44% 56% 42%;transform:rotate(-5deg) scale(.97)}} @keyframes think-aura{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ac,var(--c-dom)) 45%,transparent),inset 0 -3px 6px color-mix(in srgb,#000 22%,transparent)}100%{box-shadow:0 0 0 12px transparent,inset 0 -3px 6px color-mix(in srgb,#000 22%,transparent)}} @keyframes think-turn{to{transform:rotate(360deg)}} @keyframes think-drift{0%,100%{transform:translate(-8%,-6%)}50%{transform:translate(12%,10%)}} @keyframes think-shimmer{from{background-position:120% 0}to{background-position:-100% 0}} @keyframes think-arrive{from{opacity:0;transform:translateY(6px) scale(.985)}to{opacity:1;transform:none}} :root[data-motion="reduced"] .think__orb,:root[data-motion="reduced"] .think__orb i,:root[data-motion="reduced"] .think__line{animation:none} :root[data-motion="reduced"] .think__line{color:var(--muted);background:none} @media (prefers-reduced-motion:reduce){.think__orb,.think__orb i{animation:none}.think__line{animation:none;color:var(--muted);background:none}} /* 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%} /* ?vv=1: the browser's own numbers, on the screen, for a screenshot. Never shown otherwise. */ .vvdiag{position:fixed;left:8px;right:8px;top:38%;z-index:999;margin:0;padding:10px 12px;border-radius:12px;background:rgba(218,41,28,.94);color:#fff;font:600 11px/1.5 ui-monospace,Menlo,monospace;white-space:pre-wrap;pointer-events:none} .vvdiag__probe{position:fixed;left:-9px;top:0;width:1px;height:100dvh;min-height:100svh;max-height:100lvh;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);box-sizing:content-box;visibility:hidden;pointer-events:none} /* ═══════════════════════ touch: no field is set smaller than 16px ═══════════════════════ Below 16px iOS zooms the page in when a field takes the focus, by just enough to make it 16. That small zoom shifted the whole Console and stood the keyboard handling down. At 16px there is nothing to zoom. */ @media (pointer:coarse){ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea,select{font-size:16px!important} } /* ═══════════════════════ agents passing work: one colour per sender, set once ═══════════════════════ */ [data-ac="CHIEF_OF_STAFF"]{--ac:var(--c-dom)}[data-ac="LEDGER"]{--ac:var(--c-saentis)}[data-ac="SCOUT"]{--ac:var(--c-eiger)}[data-ac="REGISTRAR"]{--ac:var(--c-pilatus)}[data-ac="SENTINEL"]{--ac:var(--c-titlis)}[data-ac="FORGE"]{--ac:var(--c-gotthard)}[data-ac="CHORUS"]{--ac:var(--c-zermatt)}[data-ac="MARKETING"]{--ac:var(--c-matterhorn)} [data-ac="BERNINA"],[data-ac="YOU"]{--ac:color-mix(in srgb,var(--ink) 55%,transparent)} [data-ac]{--ac-soft:color-mix(in srgb,var(--ac,var(--ink)) 16%,transparent)} /* 1 — inside a Run: two marks facing each other, a beam crossing once, and what was passed */ .hand{margin:4px 0 6px;padding:14px 16px 12px;border:1px solid var(--line);border-radius:18px;background:var(--glass-2);max-width:420px} .hand__row{display:flex;align-items:center;gap:10px} .hand__a .bot,.hand__b .bot{width:34px;height:34px;--b-look-anim:none} .hand__a .bot{--b-dx:3.2px}.hand__b .bot{--b-dx:-3.2px;animation:hand-nod .5s cubic-bezier(.34,1.5,.5,1) 1.05s both} .hand__wire{position:relative;flex:1;height:2px;border-radius:2px;background:color-mix(in srgb,var(--ink) 12%,transparent);overflow:hidden} .hand__beam{position:absolute;top:0;left:0;width:34%;height:100%;border-radius:2px;background:linear-gradient(90deg,transparent,var(--ac,var(--ink)),transparent);transform:translateX(-110%);animation:hand-beam 1.15s cubic-bezier(.5,0,.2,1) .15s 2 both} .hand__cap{margin:10px 0 0;font-size:13.5px;line-height:1.45;color:var(--muted)} .hand__cap b{color:var(--ink);font-weight:600} @keyframes hand-beam{to{transform:translateX(320%)}} @keyframes hand-nod{0%{transform:none}45%{transform:translateY(-4px) scale(1.06)}100%{transform:none}} /* 2 — over the message box: who is working this minute */ .relay{display:flex;align-items:center;gap:10px;width:fit-content;max-width:min(100%,820px);margin:0 auto 8px;padding:6px 12px 6px 8px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--bg) 88%,var(--ink) 12%);color:var(--ink);font-size:13px;line-height:1.2;text-decoration:none;pointer-events:auto;animation:relay-in .45s cubic-bezier(.34,1.3,.5,1) both} .relay__faces{display:flex;align-items:center;flex:none} .relay__face{position:relative;display:block;border-radius:50%} .relay__face .bot{width:24px;height:24px;background:none} .relay__face.is-working::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1.5px solid var(--ac,var(--ink));opacity:0;animation:relay-pulse 1.8s ease-out infinite} .relay__face.is-waiting{opacity:.85} .relay__link{display:block;width:12px;height:1.5px;margin:0 2px;border-radius:2px;background:color-mix(in srgb,var(--ink) 22%,transparent)} .relay__text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .relay__text b{font-weight:600}.relay__text span{color:var(--muted)} .relay__go{flex:none;width:14px;height:14px;color:var(--muted)} body.is-plain .relay{display:none} @keyframes relay-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} @keyframes relay-pulse{0%{opacity:.9;transform:scale(.86)}100%{opacity:0;transform:scale(1.35)}} /* 3 — the staff page: the relay, as the site shows it. A row of chips; the one whose turn it is opens into a pill. */ .rl-stage{position:relative;margin:0 0 22px;padding:64px 18px 22px;border:1px solid var(--line);border-radius:22px;background:var(--surface,var(--glass-2));text-align:center;overflow:hidden;isolation:isolate} .rl-stage::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 55% at 50% 50%,color-mix(in srgb,var(--ac,var(--c-dom)) 13%,transparent),transparent 70%);pointer-events:none;transition:background .8s} .rl-run,.rl-clock{position:absolute;top:18px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint,var(--muted))} .rl-run{left:20px;display:inline-flex;align-items:center;gap:8px;max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rl-run::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:#13D1A3} .rl-clock{right:20px;font-variant-numeric:tabular-nums} .rl-row{--size:52px;position:relative;display:flex;justify-content:center;align-items:center;list-style:none;margin:0;padding:0;min-height:calc(var(--size) + 10px)} .rl-chip{position:relative;display:flex;align-items:center;height:calc(var(--size) + 10px);padding:5px;border-radius:999px;background:transparent;transition:background 1s ease-in-out,box-shadow 1s ease-in-out} .rl-chip + .rl-chip{margin-left:-2px} .rl-chip .bot{width:var(--size);height:var(--size);background:none;--b-look-anim:none} .rl-chip .b-look{transition:transform 1.1s ease-in-out} .rl-chip--ink{--ac:var(--ink)} .rl-chip.is-open{z-index:5;background:color-mix(in srgb,var(--ac,var(--ink)) 14%,var(--bg));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ac,var(--ink)) 45%,transparent),0 14px 34px -16px rgba(0,0,0,.35)} .rl-spread{display:grid;grid-template-columns:0px;transition:grid-template-columns 1s cubic-bezier(.45,0,.15,1)} .rl-spread>div{overflow:hidden;min-width:0} .rl-label{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;padding:0 16px 0 12px;font-size:14px;font-weight:500;line-height:1;color:color-mix(in srgb,var(--ac,var(--ink)) 78%,var(--ink));transition:color .6s} .rl-dots{display:inline-flex;gap:3px}.rl-dots i{width:5px;height:5px;border-radius:50%;background:var(--ac,var(--ink));animation:rl-dot 1.8s ease-in-out infinite} .rl-dots i:nth-child(2){animation-delay:.3s}.rl-dots i:nth-child(3){animation-delay:.6s} .rl-chip:not(.is-open) .rl-dots i{animation:none} @keyframes rl-dot{0%,100%{opacity:.25}50%{opacity:1}} .rl-t{transition:opacity .45s ease-in-out}.rl-chip.is-swapping .rl-t{opacity:0} .rl-tick{display:none;width:14px;height:14px;flex:none} .rl-chip.is-settled .rl-dots{display:none}.rl-chip.is-settled .rl-tick{display:inline-block}.rl-chip.is-settled .rl-label{color:var(--ink)} .rl-shield{display:grid;place-items:center;width:var(--size);height:var(--size);border-radius:50%;background:color-mix(in srgb,var(--ink) 7%,transparent);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink)} .rl-shield svg{width:52%;height:52%} .rl-you{display:grid;place-items:center;width:var(--size);height:var(--size);border-radius:50%;background:var(--ink);color:var(--bg);font-size:13px;font-weight:600;letter-spacing:.02em} .rl-chip--you.is-open{background:var(--ink);box-shadow:0 16px 40px -14px rgba(0,0,0,.6)} .rl-chip--you.is-open .rl-label{color:var(--bg)}.rl-chip--you.is-open .rl-dots i{background:var(--bg)} .rl-cap{margin:34px auto 0;max-width:620px;min-height:3em;font-size:15px;line-height:1.5;color:var(--muted);transition:opacity .4s ease-in-out} .rl-cap b{color:var(--ink);font-weight:600}.rl-cap.is-fading{opacity:0} .rl-acts{display:flex;justify-content:center;gap:8px;min-height:32px;margin-top:10px} .rl-foot{margin:14px 0 0;font-size:13px;color:var(--faint,var(--muted))} @media (max-width:640px){.rl-stage{padding:56px 10px 18px}.rl-row{--size:40px}.rl-label{font-size:12.5px;gap:7px;padding:0 12px 0 8px}.rl-cap{font-size:14px;margin-top:26px}} :root[data-motion="reduced"] .hand__beam,:root[data-motion="reduced"] .relay__face.is-working::after,:root[data-motion="reduced"] .rl-dots i{animation:none} @media (prefers-reduced-motion:reduce){.hand__beam,.hand__b .bot,.relay__face.is-working::after,.rl-dots i{animation:none}} /* ═══════════════════════ Settings: what this is, and which release ═══════════════════════ */ .set__about{position:relative;display:grid;justify-items:center;gap:0;margin:34px 0 10px;padding:30px 0 4px;text-align:center} .set__about::before{content:"";position:absolute;top:0;left:50%;width:min(320px,70%);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--line) 30%,var(--line) 70%,transparent)} /* the lockup as the site's header has it: the mark, then the wordmark beside it */ .set__about-k{display:inline-flex;align-items:center;gap:10px;color:var(--ink)} .set__about-k .bot{width:30px;height:30px;flex:none;--b-look-anim:mark-glance} .set__about-k .auth__wm{color:inherit} .set__about-k .wm-svg{height:14px;width:auto;display:block} .set__about-v{display:block;margin-top:14px;font-style:normal;font-size:10.5px;letter-spacing:.14em;color:color-mix(in srgb,var(--muted) 80%,transparent)} /* the strip over the message box takes room of its own: the thread ends above it, never under it */ body.has-relay:not(.is-plain) .main{padding-bottom:178px} html.is-typing body.has-relay:not(.is-plain) .main{padding-bottom:164px} body.has-relay:not(.is-plain) .todown{bottom:calc(var(--safe-b) + 176px)} /* ═══════════════════════ Stripe's embedded forms: they bring their own height; give them a quiet seat ═══════════════════════ */ #checkout,.pm__frame{min-height:120px;border-radius:var(--r-m);overflow:hidden;background:#fff} .pm__frame{margin:6px 18px 18px} #checkout:empty,.pm__frame:empty{min-height:0;background:none} .co__wait{display:flex;align-items:center;justify-content:center;gap:10px;min-height:120px;margin:0;color:#3F4653;font-size:14px} #tax-line.is-bad{color:var(--c-dom)} /* ═══════════════════════ Billing, as a summary; the plans, as their own sheet ═══════════════════════ Settings → Billing says what you are on, how you pay and what you have paid. "Adjust plan" opens the plans: one title, who the plan is for, and a card per plan that reads top to bottom — sign, name, price, the one button, then what is in it. */ .bsum{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:2px 0 22px} .bsum__glyph{width:64px;height:64px;flex:none;color:var(--ink)} .bsum__k{flex:1 1 240px;min-width:0} .bsum__name{margin:0 0 4px;font-size:19px;font-weight:600;letter-spacing:-.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .bsum__line{margin:0 0 3px;font-size:15px;color:var(--ink)} .bsum__sub{margin:0;font-size:13.5px;line-height:1.5;color:var(--muted)} .bsum__go{flex:none} .inv th{font-weight:600;color:var(--ink);text-align:left} .bill--sheet{max-width:1060px;margin:0 auto} .bill__back{display:inline-flex;align-items:center;gap:4px;margin:0 0 6px;font-size:13px;color:var(--muted);text-decoration:none} .bill__back svg{width:16px;height:16px}.bill__back:hover{color:var(--ink)} .up__title{margin:4px 0 18px;text-align:center;font-size:clamp(26px,4.2vw,36px);line-height:1.1;font-weight:600;letter-spacing:-.03em} .up__tabs{display:flex;width:fit-content;max-width:100%;margin:0 auto 22px} .up__note{text-align:center;max-width:720px;margin-left:auto;margin-right:auto} .bill--sheet .plans{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:stretch;margin:0 auto 18px} @media (min-width:760px){.bill--sheet .plans--2,.bill--sheet .plans--3{grid-template-columns:repeat(2,minmax(0,1fr))}.bill--sheet .plans--1{max-width:520px}} @media (min-width:1100px){.bill--sheet .plans--3{grid-template-columns:repeat(3,minmax(0,1fr))}} .bill--sheet .plan{padding:26px 26px 24px;border-radius:22px;background:var(--glass-2);border:1px solid var(--line)} .bill--sheet .plan--current{border-color:color-mix(in srgb,var(--ink) 34%,var(--line))} .plan__top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;min-height:64px;margin-bottom:14px} .plan__glyph{width:60px;height:60px;flex:none;color:var(--ink)} .seg--xs{padding:3px}.seg--xs .seg__b{padding:6px 11px;font-size:12px} .seg--xs .plan__save{font-family:inherit;font-size:12px;letter-spacing:0;color:var(--c-saentis);opacity:1;margin-left:2px} .bill--sheet .plan__name{font-size:24px;font-weight:600;letter-spacing:-.025em} .plan__tag{margin:2px 0 18px;font-size:15px;color:var(--muted)} .plan__priceline{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:0 0 18px;min-height:52px} .bill--sheet .plan__price{margin:0;font-size:40px;line-height:1;font-weight:600;letter-spacing:-.04em} .plan__unit{display:grid;gap:1px;padding-bottom:3px;font-size:12.5px;line-height:1.35;color:var(--muted)} .bill--sheet .plan__sub{margin:0;font-size:12.5px} .bill--sheet .plan__act .btn,.bill--sheet .plan__act .chip{width:100%;justify-content:center;min-height:46px;border-radius:12px;font-size:15px} .bill--sheet .plan__act .btn{background:var(--ink);color:var(--bg);border-color:transparent} .bill--sheet .plan__act .btn:not(.btn--go){background:color-mix(in srgb,var(--ink) 9%,transparent);color:var(--ink)} .bill--sheet .plan__act .chip{display:flex;align-items:center} .plan__fine{margin:10px 0 0;text-align:center;font-size:12.5px;color:var(--muted)} .plan__rule{height:1px;margin:22px -26px 20px;background:var(--line)} .plan__inc{margin:0 0 10px;font-size:14.5px;color:var(--ink)} .bill--sheet .plan__feats{padding:0;gap:9px;font-size:14.5px;color:var(--muted)} .bill--sheet .plan__feats li{display:flex;gap:10px;align-items:baseline} .bill--sheet .plan__feats li::before{content:"";flex:none;width:14px;height:9px;margin:0;border-left:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:translateY(-3px) rotate(-45deg) scale(.8)} /* ═══════════════════════ the payment being confirmed: an orb turning, then a ring that closes into a tick ═══════════════════════ */ #checkout.is-paying{background:none;min-height:0} .pay{display:grid;justify-items:center;gap:10px;padding:34px 18px 30px;text-align:center;border:1px solid var(--line);border-radius:var(--r-m);background:var(--glass-2)} .pay__orb{position:relative;width:64px;height:64px;margin-bottom:8px;border-radius:46% 54% 57% 43%/52% 45% 55% 48%; background:radial-gradient(circle at 32% 28%,#fff 0,color-mix(in srgb,var(--c-saentis) 35%,#fff) 16%,var(--c-saentis) 52%,color-mix(in srgb,var(--c-saentis) 55%,#000) 100%); animation:think-morph 3.4s ease-in-out infinite,pay-aura 2.2s ease-out infinite} .pay__orb i{position:absolute;inset:0;border-radius:inherit;overflow:hidden} .pay__orb i:first-child{background:conic-gradient(from 0deg at 50% 50%,transparent 0 55%,color-mix(in srgb,#fff 70%,transparent) 72%,transparent 88%);mix-blend-mode:screen;opacity:.75;animation:think-turn 2.6s linear infinite} .pay__orb i:last-child{inset:-10px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--c-saentis) 55%,transparent);border-top-color:transparent;border-left-color:transparent;overflow:visible;animation:think-turn 1.6s cubic-bezier(.6,.1,.3,.9) infinite} .pay__t{font-size:19px;font-weight:600;letter-spacing:-.02em} .pay__s{max-width:420px;font-size:14px;line-height:1.5;color:var(--muted);min-height:3em} .pay__go{margin-top:6px;min-width:160px} .pay__tick{width:68px;height:68px;margin-bottom:6px;fill:none;stroke:#13D1A3;stroke-width:3;stroke-linecap:round;stroke-linejoin:round} .pay__tick circle{stroke-dasharray:170;stroke-dashoffset:170;transform-origin:50% 50%;transform:rotate(-90deg);animation:pay-ring .7s cubic-bezier(.6,0,.3,1) forwards} .pay__tick path{stroke-dasharray:48;stroke-dashoffset:48;animation:pay-check .45s cubic-bezier(.3,1.4,.5,1) .6s forwards} .pay__tick--wait{stroke:var(--c-titlis)} .pay--done .pay__t{animation:think-arrive .5s cubic-bezier(.22,1,.36,1) .5s both} .pay--done .pay__s,.pay--done .pay__go{animation:think-arrive .5s cubic-bezier(.22,1,.36,1) .7s both} @keyframes pay-aura{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c-saentis) 40%,transparent)}100%{box-shadow:0 0 0 22px transparent}} @keyframes pay-ring{to{stroke-dashoffset:0}} @keyframes pay-check{to{stroke-dashoffset:0}} :root[data-motion="reduced"] .pay__orb,:root[data-motion="reduced"] .pay__orb i{animation:none} :root[data-motion="reduced"] .pay__tick circle,:root[data-motion="reduced"] .pay__tick path{animation:none;stroke-dashoffset:0} @media (prefers-reduced-motion:reduce){.pay__orb,.pay__orb i{animation:none}.pay__tick circle,.pay__tick path{animation:none;stroke-dashoffset:0}} /* the notes above the plans are notes, not a card: the dark theme's card rule is more specific, so this names more */ .bill.bill--sheet section.bill__now{margin:0 0 16px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;display:grid;gap:8px} .bill.bill--sheet section.bill__now::before,.bill.bill--sheet section.bill__now::after{content:none} .bill.bill--sheet section.bill__now .stance{margin:0} .bill--sheet .bill__now:empty{display:none} /* ═══════════════════════ Upgrade: a window of its own, over Settings ═══════════════════════ */ .upg{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:upg-veil .25s ease both} .upg__card{display:flex;flex-direction:column;width:min(1240px,100%);height:min(920px,100%);border:1px solid var(--line);border-radius:18px;background:var(--bg);overflow:hidden;box-shadow:0 40px 120px -30px rgba(0,0,0,.7);animation:upg-in .4s cubic-bezier(.22,1,.36,1) both} .upg__bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px 14px 22px;border-bottom:1px solid var(--line)} .upg__bar b{font-size:16px;font-weight:600;letter-spacing:-.01em} .upg__bar .modal__x{position:static;margin:0;border:0;background:none;width:36px;height:36px} .upg__body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:30px 26px 40px} .upg .bill__back{display:none} .upg .up__title{margin-top:6px} @keyframes upg-veil{from{opacity:0}to{opacity:1}} @keyframes upg-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}} @media (max-width:760px){.upg{padding:0}.upg__card{width:100%;height:100%;border:0;border-radius:0}.upg__bar{padding-top:calc(var(--safe-t) + 12px)}.upg__body{padding:22px 16px calc(var(--safe-b) + 28px)}} @media (pointer:coarse){.upg{position:absolute;top:var(--vv-top,0px);bottom:auto;height:var(--vv-h,100dvh)}} :root[data-motion="reduced"] .upg,:root[data-motion="reduced"] .upg__card{animation:none} /* ═══════════════════════ the plan signs, alive ═══════════════════════ A small scene in three dimensions. The mark sits at the centre, facing you. Each orbit is a plane tipped away from you (--rx) and turned a little (--ry); a carrier turns in that plane, and the agent on its rim is turned back by exactly as much, so it stays a round sphere facing you while it travels. Because the scene keeps its depth, an agent on the far half of its orbit passes behind the mark, and on the near half in front of it. */ .psign{--pg:var(--bg);position:relative;display:block;flex:none;width:76px;height:76px;color:var(--ink)} .psg{display:block;width:100%;height:100%;overflow:visible} .psg__far{fill:var(--pg)}.psg__far--1{opacity:.26}.psg__far--2{opacity:.5} .psg__ground{fill:#000;opacity:.4} .psg__ring{fill:none;stroke:currentColor;stroke-width:.9;opacity:.2}.psg__ring--front{opacity:.5} .plan__top .psign{margin:6px 0 4px 6px} .bsum .psign{margin:8px 14px 8px 10px} /* ═══════════════════════ checkout is a step of its own ═══════════════════════ Choosing a plan replaces the plans with the checkout, at the top of the same window, instead of opening it far below them where nobody looks. "Back to plans" undoes it. */ .bill--sheet.is-checkout .plans,.bill--sheet.is-checkout .up__tabs,.bill--sheet.is-checkout .up__note,.bill--sheet.is-checkout .up__title,.bill--sheet.is-checkout .bill__back{display:none} .bill--sheet.is-checkout .co{margin:0 auto;max-width:980px;animation:think-arrive .45s cubic-bezier(.22,1,.36,1) both} .bill--sheet .co__top .btn{display:inline-flex;align-items:center;gap:4px} /* a plan change with no checkout: only the outcome is shown, not the steps or the summary beside it */ .bill--sheet.is-outcome .co__steps,.bill--sheet.is-outcome .co__sum,.bill--sheet.is-outcome .co__rev,.bill--sheet.is-outcome #checkout-close{display:none} .bill--sheet.is-outcome .co__grid{display:block} .bill--sheet.is-outcome .co{max-width:620px} /* ═══════════════════════ frozen for non-payment: said across the top, with the one way out ═══════════════════════ */ .frozen{display:flex;align-items:center;gap:10px;flex:none;padding:10px 16px;background:color-mix(in srgb,var(--c-dom) 16%,var(--bg));border-bottom:1px solid color-mix(in srgb,var(--c-dom) 40%,transparent);color:var(--ink);font-size:13.5px;line-height:1.4;text-decoration:none} .frozen svg{flex:none;width:18px;height:18px;color:var(--c-dom)} .frozen span{flex:1;min-width:0}.frozen b{font-weight:600} .frozen i{flex:none;font-style:normal;font-weight:600;padding:6px 12px;border-radius:999px;background:var(--ink);color:var(--bg);font-size:12.5px;white-space:nowrap} @media (max-width:560px){.frozen{flex-wrap:wrap}.frozen i{margin-left:28px}} body.is-frozen .composer__box{opacity:.55} body.is-frozen .composer__send,body.is-frozen .composer__plus,body.is-frozen .composer__mic,body.is-frozen .composer__to{pointer-events:none} .stance--bad{border-color:color-mix(in srgb,var(--c-dom) 45%,transparent);background:color-mix(in srgb,var(--c-dom) 10%,transparent)} .stance--bad .stance__i{color:var(--c-dom)} /* nothing is working while frozen, so nothing says it is */ body.is-frozen .relay{display:none} /* the current plan's card: "Current plan" while the switch above it matches how you pay, the offer to change when it does not */ .bill--sheet[data-shown-interval="month"] [data-for-interval="year"],.bill--sheet[data-shown-interval="year"] [data-for-interval="month"]{display:none!important} .bsum__acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:none} .bsum__year{color:var(--c-saentis)} .bsum__iv{font-size:10px;letter-spacing:.08em} .bsum__price{margin:0 0 4px;font-size:14.5px;color:var(--ink)}.bsum__price b{font-weight:600}.bsum__price span{color:var(--muted)} /* ═══════════════════════ the sidebar's width is yours: drag its edge ═══════════════════════ Desktop only. The width is one custom property on the root; without it the stylesheet's own widths apply, so a browser that has never dragged anything sees exactly what it saw before. Double-click puts it back. */ .side{position:relative} .side__grip{display:none} @media (min-width:900px) and (pointer:fine){ :root[data-side-w] .app{grid-template-columns:var(--side-w) 1fr} .side__grip{display:block;position:absolute;top:0;right:-4px;bottom:0;width:9px;z-index:20;cursor:col-resize;touch-action:none} .side__grip::after{content:"";position:absolute;top:0;bottom:0;left:4px;width:1px;background:transparent;transition:background .2s,box-shadow .2s} .side__grip:hover::after,.side__grip:focus-visible::after,html.is-resizing .side__grip::after{background:var(--c-saentis);box-shadow:0 0 0 1px color-mix(in srgb,var(--c-saentis) 45%,transparent)} .side__grip:focus-visible{outline:none} html.is-resizing,html.is-resizing *{cursor:col-resize!important;user-select:none!important;-webkit-user-select:none!important} html.is-resizing .app{transition:none} } /* ═══════════════════════ the sidebar's edge: a sign to hold, a word on what it does, and a way to put the sidebar away ═══════════════════════ */ .side__nub,.side__tip{display:none} @media (min-width:900px) and (pointer:fine){ /* the sign: a small pill on the edge with two lines on it */ .side__nub{display:block;position:absolute;left:50%;top:50%;width:6px;height:38px;margin:-19px 0 0 -3px;border-radius:4px;background:color-mix(in srgb,var(--ink) 16%,var(--bg));box-shadow:0 0 0 1px var(--line);transition:background .2s,height .3s cubic-bezier(.34,1.4,.5,1),margin .3s cubic-bezier(.34,1.4,.5,1)} .side__nub::before,.side__nub::after{content:"";position:absolute;top:11px;bottom:11px;width:1px;background:color-mix(in srgb,var(--ink) 55%,transparent)} .side__nub::before{left:1.5px}.side__nub::after{right:1.5px} /* the sign comes with the cursor: nothing on the edge until the pointer (or the focus) is on it, and then it sits where the pointer is */ .side__nub{opacity:0;top:var(--grip-y,50%);transition:opacity .18s,background .2s,height .3s cubic-bezier(.34,1.4,.5,1),margin .3s cubic-bezier(.34,1.4,.5,1)} .side__tip{top:var(--grip-y,50%)} .side__grip:hover .side__nub,.side__grip:focus-visible .side__nub,html.is-resizing .side__nub,:root[data-side-hidden] .side__nub{opacity:1} :root[data-side-hidden] .side__grip:not(:hover) .side__nub{top:50%} .side__grip:hover .side__nub,.side__grip:focus-visible .side__nub,html.is-resizing .side__nub{height:52px;margin-top:-26px;background:var(--c-saentis);box-shadow:none} .side__grip:hover .side__nub::before,.side__grip:hover .side__nub::after,html.is-resizing .side__nub::before,html.is-resizing .side__nub::after{background:#fff} /* the word: beside the sign, only while the cursor or the focus is on the edge, and never while dragging */ .side__tip{display:block;position:absolute;left:18px;top:50%;transform:translateY(-50%) translateX(-4px);padding:8px 11px;border-radius:10px;border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 92%,var(--ink) 8%);box-shadow:0 10px 30px -12px rgba(0,0,0,.6);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .18s .25s,transform .25s .25s} .side__tip b{display:block;font-size:12.5px;font-weight:600;color:var(--ink)} .side__tip em{display:block;margin-top:2px;font-style:normal;font-size:11.5px;color:var(--muted)} .side__grip:hover .side__tip,.side__grip:focus-visible .side__tip{opacity:1;transform:translateY(-50%)} html.is-resizing .side__tip{opacity:0!important;transition:none} .side__tip-off{display:none} /* put away: the sidebar gives its room to the conversation, and its edge stays at the window's edge as the way back */ :root[data-side-hidden] .app{grid-template-columns:0 1fr} :root[data-side-hidden] .side{overflow:visible;border-right:0;min-width:0} :root[data-side-hidden] .side>:not(.side__grip){display:none} :root[data-side-hidden] .side__grip{right:-13px;width:13px;cursor:pointer} :root[data-side-hidden] .side__grip::after{display:none} :root[data-side-hidden] .side__nub{left:3px;margin-left:0;width:7px;height:52px;margin-top:-26px;border-radius:0 5px 5px 0} :root[data-side-hidden] .side__tip-on{display:none} :root[data-side-hidden] .side__tip-off{display:block} } :root[data-motion="reduced"] .side__nub,:root[data-motion="reduced"] .side__tip{transition:none} /* inviting a person: name, address, role and the button on one line where there is room, stacked where there is not */ .invite__row{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;width:100%} @media (min-width:720px){.invite__row{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) auto auto;align-items:center}} .invite__role{width:auto;min-width:104px} #invite-note.is-bad{color:var(--c-dom)} /* an invoice, opened under its row */ .inv__no{display:block;margin-top:2px;font-size:11px;color:var(--muted)} .inv__view{background:none;border:0;padding:0;font:inherit;cursor:pointer} .inv tr.inv__doc td{padding:0 18px 16px} .invd{display:grid;gap:14px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-m);background:color-mix(in srgb,var(--ink) 3%,transparent);font-size:13px} .invd__top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 14px}.invd__top b{font-size:14.5px;font-weight:600}.invd__top span{color:var(--muted);font-size:12.5px} .invd__ps{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px} .invd__p{display:grid;gap:2px;min-width:0}.invd__p b{font-weight:600}.invd__p span{color:var(--muted);overflow-wrap:anywhere} .invd__l{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:3px} .invd__lines{display:grid;gap:7px;padding-top:12px;border-top:1px solid var(--line-2)} .invd__row{display:flex;justify-content:space-between;gap:14px}.invd__row span:first-child{min-width:0;overflow-wrap:anywhere} .invd__row--sum{padding-top:9px;border-top:1px solid var(--line-2);color:var(--muted)}.invd__row--total{font-weight:600;font-size:14px} .invd__note{margin:0;color:var(--muted);font-size:12px} /* the sidebar's search, beyond the sidebar: pages, settings and older Runs */ .side__more{display:grid;gap:1px;margin-top:4px} .side__hit{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 6px;padding:8px 10px;border-radius:10px;color:var(--ink);min-width:0} .side__hit:hover,.side__hit:focus-visible{background:color-mix(in srgb,var(--ink) 6%,transparent);outline:none} .side__hit b{min-width:0;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .side__hit span{flex:none;font-size:11px;color:var(--muted)} .side__row:focus-visible{outline:none;background:color-mix(in srgb,var(--ink) 7%,transparent)} /* the sidebar put away on a desktop: its icon stands at the top left, as the way back */ @media (min-width:900px) and (pointer:fine){ :root[data-side-hidden] .top__back{display:grid} :root[data-side-hidden] .top__back:hover{background:color-mix(in srgb,var(--ink) 8%,var(--raised))} } /* Settings → Account: whether the address is confirmed, and the link again */ .set__confirm{display:flex;flex-wrap:wrap;align-items:center;gap:8px} .srow__form .pw{flex:1 1 180px} /* the plan someone came for, from the pricing page */ .plan.is-wanted{box-shadow:0 0 0 1.5px var(--ink),0 18px 50px -24px color-mix(in srgb,var(--ink) 40%,transparent)} /* confirmed: a green tick and the word, no pill */ .okmark{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:#16A34A;white-space:nowrap} :root:not([data-zt="light"]) .okmark{color:#34D399} .okmark svg{width:18px;height:18px;flex:none;display:block} .okmark circle{fill:currentColor} .okmark path{fill:none;stroke:#fff;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round} :root:not([data-zt="light"]) .okmark path{stroke:#04130C} /* it sits on the line with the field and Save when there is room */ .srow--stack .srow__form:has(+.set__confirm .okmark){display:inline-flex;vertical-align:middle} .srow--stack .set__confirm:has(.okmark){display:inline-flex;vertical-align:middle;margin-left:10px} /* Settings → Routines: a new routine is who, what and when */ .rt{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 12px;padding:16px 18px} .rt__f{display:grid;gap:5px;min-width:0;font-size:12px;color:var(--muted)} .rt__f[hidden]{display:none} .rt__f--wide{grid-column:1/-1} .rt__f .set__in{width:100%;box-sizing:border-box} .rt__what{resize:vertical;min-height:58px;padding-top:10px;padding-bottom:10px;line-height:1.45;font:inherit;font-size:14px} .rt__go{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:12px} @media (max-width:720px){.rt{grid-template-columns:repeat(2,minmax(0,1fr))}} .set__in--sm{height:34px;padding:0 10px;font-size:13px;width:auto;min-width:104px} /* Settings → Companies: the view across them */ .rt__f--two{grid-column:span 2} .cons__wrap{overflow-x:auto} .cons{width:100%;border-collapse:collapse;font-size:13px;min-width:620px} .cons th{text-align:left;font-weight:500;color:var(--muted);font-size:11.5px;padding:10px 14px;border-bottom:1px solid var(--line-2);white-space:nowrap} .cons td{padding:12px 14px;border-bottom:1px solid var(--line-2);vertical-align:top} .cons td b{display:block;font-weight:500} .cons td span{display:block;margin-top:2px;font-size:11.5px;color:var(--muted);font-family:var(--sans,inherit)} .cons tr:last-child td{border-bottom:0} .cons__total td{background:color-mix(in srgb,var(--ink) 4%,transparent);font-weight:600} @media (max-width:720px){.rt__f--two{grid-column:1/-1}} .set__code{display:block;padding:10px 12px;border-radius:10px;border:1px dashed var(--line);font-size:12.5px;overflow-wrap:anywhere;user-select:all;color:var(--ink)} /* a document an agent prepared: a page to read, on paper white in both themes, because that is what it will be as a PDF */ .doc{margin:6px 0 2px;padding:26px 28px 18px;border-radius:16px;background:#fff;color:#14151a;border:1px solid var(--line);box-shadow:0 18px 50px -30px rgba(0,0,0,.55);max-width:720px;font-size:14.5px;line-height:1.62} .doc__head{padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid #e6e7eb} .doc__by{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#6b6f7a} .doc__title{margin:8px 0 0;font-size:24px;line-height:1.2;letter-spacing:-.025em;font-weight:600;color:#0b0c10} .doc__body h2{margin:22px 0 8px;font-size:18px;letter-spacing:-.015em;font-weight:600}.doc__body h3{margin:18px 0 6px;font-size:15.5px;font-weight:600}.doc__body h4{margin:14px 0 4px;font-size:14px;font-weight:600} .doc__body p{margin:0 0 11px}.doc__body ul,.doc__body ol{margin:0 0 12px;padding-left:22px}.doc__body li{margin:3px 0}.doc__body b{font-weight:600} .doc__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:18px;padding-top:12px;border-top:1px solid #e6e7eb;font-size:12px;color:#6b6f7a} .doc__foot .btn{color:#fff;background:#0b0c10;border-color:#0b0c10} .doc__acts{display:flex;flex-wrap:wrap;gap:8px} .doc__foot .btn.doc__word{color:#0b0c10;background:transparent;border-color:#c9cbd2} .msg--links{font-size:12.5px;color:var(--muted)} @media print{ html.is-printing-doc body *{visibility:hidden!important} html.is-printing-doc #doc-page,html.is-printing-doc #doc-page *{visibility:visible!important} html.is-printing-doc #doc-page{position:absolute;left:0;top:0;width:100%;max-width:none;margin:0;padding:0;border:0;box-shadow:none;border-radius:0;font-size:11.5pt} html.is-printing-doc .doc__pdf{display:none!important} html.is-printing-doc,html.is-printing-doc body,html.is-printing-doc .app,html.is-printing-doc .pane,html.is-printing-doc .main{position:static!important;height:auto!important;overflow:visible!important;background:#fff!important} } /* the marketplace: stars, reputation, reviews */ .stars{display:inline-block;width:82px;height:16px;flex:none;vertical-align:middle}.stars svg{display:block;width:100%;height:100%} .stars--sm{width:66px;height:13px} .stars__off{fill:color-mix(in srgb,var(--ink) 14%,transparent)}.stars__on{fill:var(--ink)} .mk__rep{display:flex;flex-wrap:wrap;align-items:center;gap:6px 9px;margin:2px 0 10px;font-size:12px;color:var(--muted)} .mk__score{font-size:12.5px;font-weight:600;color:var(--ink)}.mk__count{white-space:nowrap} .rep{padding:2px 8px 1px;border-radius:99px;border:1px solid var(--line);font-family:var(--mono,ui-monospace,monospace);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);white-space:nowrap} /* the badges are the Console's own pills, in ink: the highest is the filled one, as the primary button is */ .rep--TOP_RATED{background:var(--ink);border-color:var(--ink);color:var(--bg)}.rep--TRUSTED{border-color:color-mix(in srgb,var(--ink) 55%,transparent)}.rep--RISING{color:var(--muted)} .rv{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-2);display:grid;gap:14px}.rv[hidden]{display:none} .rv__sum{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center} .rv__big{display:grid;justify-items:start;gap:4px}.rv__big b{font-size:30px;line-height:1;font-weight:600;letter-spacing:-.03em}.rv__big span{font-size:11.5px;color:var(--muted)} .rv__bars{display:grid;gap:4px;min-width:0}.rv__bar{display:grid;grid-template-columns:10px 1fr 22px;gap:8px;align-items:center;font-size:11px;color:var(--muted)} .rv__bar i{display:block;height:5px;border-radius:3px;background:color-mix(in srgb,var(--ink) 9%,transparent);overflow:hidden}.rv__bar i b{display:block;height:100%;width:0;border-radius:3px;background:var(--ink);transition:width .5s cubic-bezier(.2,.7,.2,1)} .rv__form{display:grid;gap:9px}.rv__pick{display:flex;align-items:center;gap:2px} .rv__star{width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:8px;background:none;cursor:pointer;padding:0} .rv__star svg{width:22px;height:22px;display:block;fill:color-mix(in srgb,var(--ink) 18%,transparent);transition:fill .12s,transform .12s} .rv__star.is-on svg{fill:var(--ink)}.rv__star:hover svg{transform:scale(1.12)}.rv__star:focus-visible{outline:2px solid var(--c-saentis);outline-offset:1px} .rv__said{margin-left:8px;font-size:11.5px;color:var(--muted)} .rv__text{width:100%;box-sizing:border-box;resize:vertical;min-height:54px;padding-top:9px;padding-bottom:9px;font:inherit;font-size:13.5px;line-height:1.45} .rv__go{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.rv__why{margin:0} .rv__list{display:grid;gap:12px} .rv__item{display:grid;gap:6px;padding:12px 14px;border-radius:12px;border:1px solid var(--line-2);background:color-mix(in srgb,var(--ink) 2.5%,transparent)} .rv__item header{display:flex;flex-wrap:wrap;align-items:center;gap:4px 9px;font-size:12px;color:var(--muted)}.rv__item header b{color:var(--ink);font-weight:600;font-size:13px} .rv__item p{margin:0;font-size:13.5px;line-height:1.5;overflow-wrap:anywhere} .rv__acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:18px} .rv__link{appearance:none;border:0;background:none;padding:0;font:inherit;font-size:11.5px;color:var(--faint);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)} .rv__link:hover,.rv__link:focus-visible{color:var(--ink)} .rv__flag{font-size:11.5px;color:var(--muted)} .rv__reasons{display:flex;flex-wrap:wrap;gap:6px}.rv__reasons[hidden]{display:none} .rv__reasons .chip{cursor:pointer;background:none;color:var(--ink)}.rv__reasons .chip:hover{border-color:var(--ink)}.rv__reasons .chip:disabled{opacity:.5;cursor:default} .rv__held{font-size:12.5px;color:var(--muted);padding:8px 10px;border-radius:9px;border:1px dashed var(--line)} .rv__cm{margin-left:14px;padding:8px 0 0 12px;border-left:2px solid var(--line);font-size:12px;color:var(--muted)}.rv__cm b{color:var(--ink);font-weight:600;margin-right:6px}.rv__cm p{margin-top:3px;font-size:13px;color:var(--ink)} .rv__cm--seller{border-left-color:var(--c-saentis)} .rv__reply{display:flex;gap:8px;margin-top:4px}.rv__reply .set__in{flex:1;min-width:0;height:34px;font-size:13px} @media (max-width:560px){.rv__sum{grid-template-columns:1fr}} /* the card's foot holds a price and up to three buttons: on a narrow card they go to a second line instead of pushing the price off it */ .mk__foot{flex-wrap:wrap;row-gap:8px} .mk__foot .mk__price{flex:1 0 auto} /* verified: Zuger's own. The seal is ink and the tick is the ground, so it holds in both themes */ .byz{display:inline-flex;align-items:center;gap:4px;white-space:nowrap} .vfd{width:15px;height:15px;flex:none;display:block} .vfd__seal{fill:var(--ink);stroke:none} .vfd--company .vfd__seal{fill:#E5B443} .vfd--person .vfd__seal{fill:#1D9BF0} .vfd--person .vfd__tick{fill:#fff;stroke:none} .vfd--company .vfd__tick{fill:#2B1D02;stroke:none} .mkc__by{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap} .mkc__by .vfd{width:14px;height:14px} .rv__item .byz{display:inline-flex;align-items:center;gap:5px} .vfd__tick{fill:none;stroke:var(--bg);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} /* packs: several agents and skills as one listing */ .tag--pack{border-color:color-mix(in srgb,var(--ink) 45%,transparent);color:var(--ink)} /* a pack shows the faces of what it holds, overlapping; the featured card's larger tile must not stretch them */ .mk .mk__tile.mk__tile--pack{display:flex;align-items:center;width:auto;height:44px} .mk .mk__tile.mk__tile--pack .bot{width:34px;height:34px;flex:none}.mk .mk__tile.mk__tile--pack .bot+.bot{margin-left:-13px} .mk__pack{margin:0 0 10px;padding:11px 12px;border-radius:12px;border:1px solid var(--line-2);background:color-mix(in srgb,var(--ink) 2.5%,transparent)} .mk__packh{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:7px} .mk__pack ul{list-style:none;margin:0;padding:0;display:grid;gap:5px} .mk__pack li{display:flex;align-items:center;gap:8px;font-size:13px;min-width:0}.mk__pack li .tag{flex:none} .mk__save{margin:9px 0 0;font-size:12px;color:var(--muted)} .mk__via{margin:0 0 8px} .mkt__picks{display:grid;gap:6px} .mkt__pick{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;border:1px solid var(--line-2);cursor:pointer;font-size:13.5px} .mkt__pick:has(input:checked){border-color:var(--ink);background:color-mix(in srgb,var(--ink) 4%,transparent)} .mkt__pick small{color:var(--muted);font-size:11.5px;white-space:nowrap} .mkt__pick input{width:16px;height:16px;accent-color:var(--ink)} /* approved, and yours to carry out */ .todos{display:grid;gap:8px;max-width:760px} .todo{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--surface)} .todo__tick{width:22px;height:22px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--ink) 30%,transparent);display:grid;place-items:center;color:var(--bg)} .todo.is-done .todo__tick{background:var(--ink);border-color:var(--ink)}.todo__tick svg{width:14px;height:14px;display:block} .todo__k{min-width:0;display:grid;gap:2px}.todo__k b{font-size:14px;font-weight:600}.todo__k span{font-size:13px;color:var(--muted);overflow-wrap:anywhere}.todo__k small{font-size:10.5px;color:var(--faint)} .todo.is-done .todo__k b{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--ink) 40%,transparent);color:var(--muted)} /* ── Settings on a desktop: a window with its list down the left ───────────────────────────────────────────── Search on top of the list, the tabs in groups with their signs, the page on the right and the × over it. On a phone none of this applies: the same links stay a row of pills, and the groups and signs are put away. */ .set__grp,.set__ico{display:none} .set__tab>span{display:contents} @media (min-width:900px){ .modal__card{max-width:1120px;height:min(800px,100%)} .modal__card .set{position:relative;grid-template-columns:268px minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);grid-template-areas:"top body" "res body" "nav body"} .modal__card .set__top{position:static;grid-area:top;padding:18px 14px 6px;border-bottom:0;border-right:1px solid var(--line-2);background:color-mix(in srgb,var(--ink) 2.5%,transparent)} .modal__card .set__top .set__title{display:none} .modal__card .set__top .set__search{max-width:none;height:38px} .modal__card .set__top .modal__x{position:absolute;top:16px;right:18px;z-index:4} .modal__card .set__results{grid-area:res;margin:6px 14px 0;max-height:240px} .modal__card .set__nav{grid-area:nav;align-self:stretch;padding:4px 14px 18px;gap:1px;overflow-y:auto;border-right:1px solid var(--line-2);background:color-mix(in srgb,var(--ink) 2.5%,transparent);scrollbar-width:thin} .modal__card .set__nav .set__grp{display:block;padding:16px 10px 6px;font-size:12px;color:var(--faint);letter-spacing:.01em} .modal__card .set__nav .set__tab{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:9px;font-size:14px} .modal__card .set__nav .set__tab.is-on{color:var(--ink);background:color-mix(in srgb,var(--ink) 9%,transparent);font-weight:500} .modal__card .set__ico{display:block;flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.85} .modal__card .set__body{grid-area:body;padding:30px 72px 32px 34px} } /* ── The account menu's second list, and the windows that open over the app ────────────────────────────────── */ .menu--sub{position:fixed;z-index:70;left:0;top:0;right:auto;bottom:auto;width:264px;padding:8px;border-radius:16px;animation-name:menu-up} .menu--sub .menu__r{padding:8px 10px;font-size:14px} .menu__ext{width:16px;height:16px;flex:none;color:var(--faint)} .menu__chev{flex:none;font-style:normal;font-size:17px;line-height:1;color:var(--faint)} .menu__r--more[aria-expanded="true"]{background:color-mix(in srgb,var(--ink) 6%,transparent)} .pop{position:fixed;inset:0;z-index:65;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:upg-veil .22s ease both} .pop[hidden]{display:none} .pop__card{display:flex;flex-direction:column;width:min(780px,100%);max-height:min(860px,100%);border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden;box-shadow:0 40px 120px -30px rgba(0,0,0,.7);animation:upg-in .36s cubic-bezier(.22,1,.36,1) both} .pop__card[data-size="slim"]{width:min(460px,100%)} .pop__bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px 12px 20px;border-bottom:1px solid var(--line-2)} .pop__bar b{font-size:16px;font-weight:600;letter-spacing:-.01em} .pop__bar .modal__x{width:34px;height:34px;margin:0;border:0;background:none} .pop__bar .modal__x:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)} .pop__body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:22px 24px 28px} :root[data-motion="reduced"] .pop,:root[data-motion="reduced"] .pop__card{animation:none} .wn{display:grid;gap:34px} .wn__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px} .wn__head h3{font-size:17px;font-weight:600;letter-spacing:-.015em} .wn__v{flex:none;padding:4px 9px;border-radius:7px;font-size:12px;color:var(--muted);background:color-mix(in srgb,var(--ink) 7%,transparent)} .wn__kind{margin:16px 0 8px;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)} .wn__list{display:grid;gap:10px;margin:0;padding-left:20px;color:var(--ink-2,var(--muted));font-size:14.5px;line-height:1.55} .wn__list li::marker{color:var(--faint)} .wn__list b{color:var(--ink);font-weight:600} .hp{display:grid;gap:12px} .hp__h{margin:26px 0 14px;font-size:28px;line-height:1.12;font-weight:600;letter-spacing:-.03em} .hp__card{display:flex;align-items:center;gap:14px;width:100%;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:none;color:var(--ink);font:inherit;text-align:left;text-decoration:none} .hp__go{justify-content:space-between;cursor:pointer;transition:background .2s} .hp__go:hover,.hp__row:hover{background:color-mix(in srgb,var(--ink) 5%,transparent)} .hp__go b{font-size:15px;font-weight:600}.hp__go i{font-style:normal;color:var(--muted)} .hp__status div{display:grid;gap:2px;min-width:0}.hp__status b{font-size:15px;font-weight:600}.hp__status span{font-size:13px;color:var(--muted)} .hp__dot{flex:none;width:26px;height:26px}.hp__dot svg{display:block;width:100%;height:100%} .hp__dot circle{fill:var(--muted)}.hp__dot path{fill:none;stroke:var(--bg);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .hp__status--ok .hp__dot circle{fill:var(--ok,#2fbf71)} .hp__status--warn .hp__dot circle{fill:var(--zug)} .hp__list{display:grid;gap:0;padding:6px} .hp__row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;border-radius:9px;color:var(--ink-2,var(--muted));font-size:14.5px;text-decoration:none} .hp__row i{font-style:normal;color:var(--faint)} .keys{display:grid} .keys__row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 2px;border-bottom:1px solid var(--line-2);font-size:14.5px} .keys__row:last-child{border-bottom:0} .keys__k{display:flex;gap:5px;flex:none} .keys__k kbd{min-width:26px;padding:3px 7px;border:1px solid var(--line);border-radius:7px;font-family:var(--sans);font-size:12.5px;text-align:center;color:var(--muted);background:color-mix(in srgb,var(--ink) 4%,transparent)} /* The plan signs are small flat glyphs now: the size of a line of text, top left of the card, in the text colour. */ .psign{width:30px;height:30px} .plan__top .psign{margin:4px 0 4px 2px} .bsum .psign{margin:6px 14px 6px 6px} /* Help is a panel in the bottom right corner, over the page and not instead of it: no veil, and the page stays live. */ .pop[data-kind="help"]{align-items:flex-end;justify-content:flex-end;padding:0 20px 20px 0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none;animation:none} .pop[data-kind="help"] .pop__card{pointer-events:auto;width:min(400px,calc(100vw - 40px));max-height:min(720px,calc(100dvh - 40px));border-radius:22px;box-shadow:0 30px 80px -20px rgba(0,0,0,.75),0 0 0 1px var(--line);transform-origin:100% 100%} .pop[data-kind="help"] .pop__bar{position:absolute;top:8px;right:8px;z-index:2;padding:0;border:0} .pop[data-kind="help"] .pop__bar b{display:none} .pop[data-kind="help"] .pop__card{position:relative} .pop[data-kind="help"] .hp__h{margin-top:34px} .pop__card[data-size="wide"]{width:min(980px,100%)} .pop__card[data-size="wide"] .pop__body{padding:8px 26px 30px} /* Settings, compact: the size of a preferences window, not of a page. Denser list, smaller type, tighter rows. */ @media (min-width:900px){ .modal__card{max-width:960px;height:min(700px,calc(100% - 48px));border-radius:16px} .modal__card .set{grid-template-columns:212px minmax(0,1fr)} .modal__card .set__top{padding:14px 10px 4px} .modal__card .set__top .set__search{height:32px;border-radius:8px;padding:0 10px} .modal__card .set__top .set__search input{font-size:13px} .modal__card .set__top .modal__x{top:12px;right:12px;width:30px;height:30px;border:0;background:none} .modal__card .set__top .modal__x:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)} .modal__card .set__results{margin:4px 10px 0} .modal__card .set__nav{padding:2px 10px 14px;gap:0} .modal__card .set__nav .set__grp{padding:14px 8px 5px;font-size:11.5px} .modal__card .set__nav .set__tab{gap:9px;padding:6px 8px;border-radius:7px;font-size:13.5px} .modal__card .set__ico{width:16px;height:16px} .modal__card .set__body{padding:22px 52px 26px 26px;gap:20px} .modal__card .set__h{font-size:14.5px} .modal__card .set__card{border-radius:12px} .modal__card .srow{padding-top:10px;padding-bottom:10px} .modal__card .srow__k b{font-size:13.5px}.modal__card .srow__k span{font-size:12.5px} } /* The account menu, compact and its own size: it does not stretch to the sidebar, and where the sidebar is narrower it simply crosses the border. Bottom left, just above the account row. On a phone it keeps the sidebar's width. */ @media (min-width:900px){ .menu--me{left:8px;right:auto;bottom:calc(100% - 4px);width:280px;padding:6px;border-radius:12px;z-index:80} .menu--me .menu__who{margin:6px 8px 6px;font-size:12.5px} .menu--me .menu__r,.menu--sub .menu__r{gap:9px;min-height:32px;padding:5px 8px;border-radius:7px;font-size:13.5px} .menu--me .menu__ic{width:16px;height:16px} .menu--me .menu__hr,.menu--sub .menu__hr{margin:4px 8px} .menu--me .menu__r--two{min-height:0;padding-top:6px;padding-bottom:6px} .menu--me .menu__r--two span,.menu--me .menu__r--two small{font-size:12px} .menu--me .menu__kbd,.menu--sub .menu__kbd{font-size:11.5px} .menu--sub{width:240px;padding:6px;border-radius:12px} .menu__ext{width:14px;height:14px} } /* ── The plans window, compact: a window you read at a glance, not a page you scroll. Scoped to .upg so Billing keeps its own measure. ── */ @media (min-width:900px){ .upg__card{width:min(1060px,100%);height:auto;max-height:min(820px,100%);border-radius:16px} .upg__bar{padding:10px 12px 10px 20px} .upg__bar b{font-size:14.5px} .upg__bar .modal__x{width:32px;height:32px;border:0;background:none} .upg__bar .modal__x:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)} .upg__body{padding:22px 24px 26px} .upg .up__title{margin:2px 0 14px;font-size:25px;letter-spacing:-.025em} .upg .up__tabs{margin-bottom:16px} .upg .up__tabs .seg__b{padding:6px 13px;font-size:12.5px} .upg .bill__now{margin-bottom:12px} .upg .stance{padding:9px 12px;font-size:12.5px;border-radius:10px} .upg .bill--sheet .plans{gap:12px;margin-bottom:12px} .upg .bill--sheet .plan{padding:18px 18px 18px;border-radius:16px} .upg .plan__top{min-height:30px;margin-bottom:12px;align-items:center} .upg .plan__top .psign{width:24px;height:24px;margin:0} .upg .seg--xs .seg__b{padding:4px 9px;font-size:11.5px} .upg .seg--xs .plan__save{font-size:11.5px} .upg .bill--sheet .plan__name{font-size:18px;letter-spacing:-.02em} .upg .plan__tag{margin:1px 0 12px;font-size:13px} .upg .plan__priceline{gap:9px;margin-bottom:12px;min-height:36px} .upg .bill--sheet .plan__price{font-size:30px} .upg .plan__unit{font-size:11.5px;padding-bottom:2px} .upg .bill--sheet .plan__act .btn,.upg .bill--sheet .plan__act .chip{min-height:38px;border-radius:10px;font-size:13.5px} .upg .plan__fine{margin-top:8px;font-size:11.5px} .upg .plan__rule{margin:14px -18px 13px;background:var(--line-2)} .upg .plan__inc{margin-bottom:8px;font-size:12.5px;color:var(--muted)} .upg .bill--sheet .plan__feats{gap:6px;font-size:13px;align-content:start} .upg .bill--sheet .plan__feats li{gap:8px} .upg .bill--sheet .plan__feats li::before{width:11px;height:7px;border-width:1.4px} } /* ── Apps: a wide window of cards, each a short list of things to install or set up. ── */ .pop__card[data-size="xl"]{width:min(1100px,100%);max-height:min(860px,100%)} .pop__card[data-size="xl"] .pop__body{padding:30px 34px 38px} .ap{display:grid;gap:18px;max-width:940px;margin:0 auto} .ap__h{margin:6px 0 16px;text-align:center;font-size:clamp(24px,3vw,32px);line-height:1.12;font-weight:600;letter-spacing:-.03em;text-wrap:balance} .ap__two{display:grid;gap:18px} @media (min-width:820px){.ap__two{grid-template-columns:1fr 1fr}} .ap__card{display:grid;gap:4px;padding:26px 28px 14px;border:1px solid var(--line);border-radius:22px;background:radial-gradient(120% 90% at 0% 100%,color-mix(in srgb,var(--zug) 7%,transparent),transparent 60%),var(--glass-2,transparent)} .ap__card--wide{grid-template-columns:minmax(0,1fr);align-items:start} @media (min-width:820px){.ap__card--wide{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:36px}} .ap__card h3{font-size:17px;font-weight:600;letter-spacing:-.015em} .ap__card>div>p,.ap__lead{margin:6px 0 10px;font-size:14px;line-height:1.5;color:var(--muted);max-width:52ch} .ap__row{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line-2)} .ap__row:first-of-type{border-top:0} .ap__row svg.ap__ic{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;color:var(--ink)} .ap__row b{flex:1;min-width:0;font-size:14.5px;font-weight:500} .ap__row .chip{flex:none} .ap__btn{flex:none;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border:0;border-radius:9px;background:color-mix(in srgb,var(--ink) 9%,transparent);color:var(--ink);font:inherit;font-size:13.5px;cursor:pointer;text-decoration:none;transition:background .2s} .ap__btn:hover{background:color-mix(in srgb,var(--ink) 15%,transparent)} .ap__btn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .ap__how{margin:0 0 12px;padding:12px 14px 12px 32px;border-radius:12px;background:color-mix(in srgb,var(--ink) 4%,transparent);font-size:13px;line-height:1.55;color:var(--muted)} .ap__how[hidden]{display:none} .ap__side{display:none} @media (min-width:820px){.ap__side{display:grid;place-items:center;align-self:stretch;padding:8px 0 16px}} .ap__side .pg__device{margin:0} /* ── Billing in Settings: flat and quiet. A header, how you pay, what you were sent. No boxes, no chips; hairlines only. ── */ .bl{display:grid;gap:34px} .bl__head{display:flex;align-items:flex-start;gap:18px} .bl__head .psign{width:44px;height:44px;margin:2px 0 0;flex:none} .bl__k{flex:1;min-width:0;display:grid;gap:3px} .bl__name{font-size:16px;font-weight:600;letter-spacing:-.01em;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .bl__line{margin:0;font-size:14px;color:var(--ink)} .bl__sub{margin:0;font-size:13.5px;color:var(--muted);line-height:1.5} .bl__link{appearance:none;border:0;background:none;padding:0;font:inherit;color:var(--ink);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)} .bl__link:hover{text-decoration-color:currentColor} .bl__acts{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;flex:none;align-self:center} .bl__btn{flex:none;height:34px;padding:0 13px;border:0;border-radius:9px;background:color-mix(in srgb,var(--ink) 9%,transparent);color:var(--ink);font:inherit;font-size:13.5px;cursor:pointer;transition:background .2s} .bl__btn:hover{background:color-mix(in srgb,var(--ink) 15%,transparent)} .bl__btn:disabled{opacity:.5;cursor:default} .bl .stance{margin:-16px 0;padding:0;border:0;background:none;font-size:13px} .bl .stance--bad{padding:10px 12px;border:1px solid color-mix(in srgb,var(--zug) 40%,transparent);border-radius:10px} .bl__note .link{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)} .bl__sec{display:grid;gap:14px;min-width:0} .bl__h{font-size:15px;font-weight:600;letter-spacing:-.01em} .bl__row{display:flex;align-items:center;gap:12px} .bl__rk{flex:1;min-width:0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:14px} .bl__rk b{font-weight:400}.bl__rk span{font-size:13px;color:var(--muted)} .bl__card{flex:none;display:grid;place-items:center;width:34px;height:23px;border-radius:5px;background:color-mix(in srgb,var(--ink) 12%,transparent);color:var(--ink);font-size:8.5px;font-weight:800;font-style:italic;letter-spacing:.02em} .bl__card--visa{background:#1A1F71;color:#fff} .bl__card--amex{background:#2E77BC;color:#fff;font-style:normal;font-size:7.5px} .bl__card--mastercard{grid-auto-flow:column;gap:0;background:#16171c} .bl__card--mastercard i{width:12px;height:12px;border-radius:50%;background:#EB001B}.bl__card--mastercard i+i{margin-left:-5px;background:#F79E1B;opacity:.9} .bl__card b{width:16px;height:2px;border-radius:1px;background:currentColor;opacity:.6} .bl__inv{width:100%;border-collapse:collapse;font-size:14px} .bl__inv th{padding:0 12px 10px 0;text-align:left;font-size:13.5px;font-weight:500;color:var(--ink)} .bl__inv td{padding:9px 12px 9px 0;border-top:1px solid var(--line-2);color:var(--ink-2,var(--ink));vertical-align:baseline} .bl__inv tbody tr:first-child td{border-top:0} .bl__inv td:last-child,.bl__inv th:last-child{padding-right:0} .bl__no{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums} .bl__rc{font-size:12px;color:var(--muted)} .bl__view{appearance:none;border:0;background:none;padding:0;font:inherit;color:var(--ink);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--muted)} .bl__view:hover{text-decoration-color:currentColor} .bl__inv tr.inv__doc td{padding:4px 0 18px;border-top:0} .bl__note,.bl__empty{margin:0;font-size:12.5px;line-height:1.55;color:var(--muted)} .bl__empty{font-size:13.5px} @media (max-width:640px){.bl__head{flex-wrap:wrap}.bl__acts{width:100%;justify-content:flex-start}.bl__inv th:nth-child(2),.bl__inv td.bl__no{display:none}} /* ── Settings, the size of a preferences window and flat inside: headings, then rows parted by hairlines. No boxes. ── */ @media (min-width:900px){ .modal{padding:0} .modal__card{max-width:min(1120px,calc(100% - 120px));height:min(880px,calc(100% - 72px))} .modal__card .set__body{padding:34px 64px 40px 40px;gap:40px} } .modal__card .set__sec{display:grid;gap:6px;min-width:0} .modal__card .set__h{margin:0 0 4px;font-size:15.5px;font-weight:600;letter-spacing:-.01em} :root:root .modal__card .set__card{border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;-webkit-backdrop-filter:none;backdrop-filter:none} .modal__card .set__card.pg__pad{padding:0} .modal__card .srow{padding:14px 0;border-bottom:1px solid var(--line-2);background:none} .modal__card .set__card>.srow:last-child,.modal__card .set__card>form.srow:last-child{border-bottom:0} .modal__card .srow__k b{font-weight:500} .modal__card .srow__k span{color:var(--muted);line-height:1.5} .modal__card .set__note{margin:4px 0 0;font-size:12.5px;color:var(--muted)} .modal__card .set__empty{padding:6px 0;font-size:13.5px;color:var(--muted)} /* A field in Settings on a desktop: what it is on the left, the input on the right, on one line. On a phone it stacks. */ @media (min-width:900px){ .modal__card .srow--field{flex-direction:row;align-items:center;gap:24px} .modal__card .srow--field .srow__k{flex:1;min-width:0} .modal__card .srow--field .srow__v{flex:none;width:min(400px,52%);max-width:none;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:6px} .modal__card .srow--field .srow__form{max-width:none;width:auto;align-self:stretch} .modal__card .srow--field .srow__form .set__in{flex:1 1 auto;min-width:0;max-width:none} .modal__card .srow--field .set__confirm,.modal__card .srow--field .set__confirm:has(.okmark){display:flex;margin:0;justify-content:flex-end} .modal__card .srow--field .srow__form:has(+.set__confirm .okmark){display:flex} .modal__card .srow--field .set__hint{text-align:right} .modal__card .srow--field .set__hint:empty{display:none} } .modal__card .set__card .rt,.modal__card .set__card.rt{padding-left:0;padding-right:0} /* Usage in Settings: what it is and when it resets on the left, a thin bar in the middle, the numbers on the right. */ .modal__card .use__bar{height:5px} .modal__card .use__fill{background:var(--ink)} @media (min-width:900px){ .modal__card .srow--stack:has(>.use){display:grid;grid-template-columns:minmax(0,32%) minmax(0,1fr);align-items:center;column-gap:28px} .modal__card .srow--stack:has(>.use) .use{gap:16px} .modal__card .use__n{min-width:74px;text-align:right} } /* Connected tools in Settings: a list, not a wall of tiles. The tool, whose account it is, how it stands, what you can do. */ .modal__card .tools__top{margin-bottom:10px} .modal__card .tools__cat{margin:22px 0 2px;font-family:var(--sans);font-size:12px;letter-spacing:.01em;text-transform:capitalize;color:var(--faint)} .modal__card .tools__grid{display:block} :root:root .modal__card .tool{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:13px 0;border:0;border-bottom:1px solid var(--line-2);border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none} .modal__card .tool__logo{width:30px;height:30px;border-radius:8px;font-size:12px} .modal__card .tool__t b{font-size:14px;font-weight:500} .modal__card .tool__t span{font-size:12px;color:var(--muted)} .modal__card .tool__sub{font-size:13px} .modal__card .tool__foot{min-height:0} .modal__card .tool__foot .btn{min-height:32px;padding:0 12px;border-radius:9px;font-size:13px} @media (min-width:900px){ :root:root .modal__card .tool{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto;align-items:center;column-gap:20px} .modal__card .tool__note{grid-column:1/-1} } /* Links inside Settings are quiet: ink, underlined, never red. */ .modal__card .set__body a.link,.modal__card .set__body .link{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)} .modal__card .set__body a.link:hover{text-decoration-color:currentColor} /* ── The marketplace as a shelf: a heading, search, a row of pills, and quiet cards of one size. A card says what it is, what it does and what it costs; the rest waits in the window it opens. ── */ .mkt--shelf{max-width:1080px;display:grid;gap:16px} .mkt__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:10px 2px 0} .mkt--shelf .mkt__h{margin:0 0 8px;font-size:clamp(24px,3.2vw,34px);line-height:1.1;font-weight:600;letter-spacing:-.03em;text-wrap:balance} .mkt--shelf .mkt__sub{max-width:68ch;font-size:14px;color:var(--muted)} .mkt__n{white-space:nowrap;color:var(--faint)}.mkt__n b{font-weight:500;font-variant-numeric:tabular-nums} .mkt__head>div{flex:1;min-width:0} :root:root .mkt__sellbtn{flex:none;width:auto;min-width:0;height:38px;padding:0 16px;border:0;border-radius:999px;background:color-mix(in srgb,var(--ink) 10%,transparent);color:var(--ink);font-size:13.5px} .mkt__sellbtn:hover{background:color-mix(in srgb,var(--ink) 16%,transparent)} .mkt--shelf .mkt__search{flex:none;height:42px;border-radius:999px;padding:0 16px} .mkf{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin:0 -2px;padding:0 2px} .mkf::-webkit-scrollbar{display:none} .mkf__b{flex:none;height:34px;padding:0 14px;border:0;border-radius:999px;background:none;color:var(--muted);font:inherit;font-size:13.5px;cursor:pointer;transition:background .2s,color .2s} .mkf__b:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent)} .mkf__b.is-on{background:var(--ink);color:var(--bg);font-weight:500} .mkt--shelf #mk-grid{display:grid;gap:12px} .mkt--shelf .mkt__feat{grid-template-columns:1fr;gap:12px;margin:0} .mkt--shelf .mkt__grid{grid-template-columns:1fr;gap:12px} @media (min-width:640px){.mkt--shelf .mkt__feat,.mkt--shelf .mkt__grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:1080px){.mkt--shelf .mkt__grid{grid-template-columns:repeat(3,minmax(0,1fr))}} :root:root .mkc{appearance:none;display:flex;flex-direction:column;align-items:stretch;gap:3px;min-height:188px;padding:18px 18px 16px;border:0;border-radius:20px;background:color-mix(in srgb,var(--ink) 6%,var(--bg));color:var(--ink);font:inherit;text-align:left;cursor:pointer;box-shadow:none;transition:background .25s,transform .35s cubic-bezier(.22,1,.36,1)} :root:root .mkc:hover{background:color-mix(in srgb,var(--ink) 10%,var(--bg));transform:translateY(-2px)} .mkc:focus-visible{outline:2px solid var(--ink);outline-offset:2px} .mkc[hidden]{display:none} .mkc__top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px} .mkc__ball{display:flex;align-items:center} .mkc__ball .bot{width:36px;height:36px} .mkc__ball--pack .bot{width:30px;height:30px}.mkc__ball--pack .bot+.bot{margin-left:-10px} .mkc__eyebrow{font-size:12px;color:var(--faint)} .mkc__n{font-size:16px;font-weight:600;letter-spacing:-.015em;line-height:1.25} .mkc__by{font-size:12.5px;color:var(--faint)} .mkc__d{flex:1;margin-top:6px;font-size:13.5px;line-height:1.5;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .mkc__f{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;font-size:13.5px} .mkc__p{font-weight:500;font-variant-numeric:tabular-nums} .mkc__st{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--muted)} .mkc__st svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .mkc__st .mkc__star{fill:currentColor;stroke:none} .mkc__st--on{color:var(--ink)} .mkc__st--wait{color:var(--zug)} .mkc--feat{min-height:170px;padding:22px 22px 20px} .mkc--feat .mkc__n{font-size:19px} :root[data-motion="reduced"] .mkc{transition:none}:root[data-motion="reduced"] .mkc:hover{transform:none} /* A listing in its window: the card that used to sit on the shelf, without a frame of its own. */ :root:root .pop .mk--detail{display:grid;gap:14px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;-webkit-backdrop-filter:none;backdrop-filter:none} .pop .mk--detail .mk__glow,.pop .mk--detail::after{display:none} .pop .mk--detail .mk__head{align-items:center} .pop .mk--detail .mk__t b{font-size:19px} .pop .mk--detail .mk__blurb{font-size:14.5px;line-height:1.6;color:var(--muted);-webkit-line-clamp:unset;display:block} .pop .mk--detail .mk__foot{flex-wrap:wrap;gap:8px;padding-top:14px;border-top:1px solid var(--line-2)} .pop .mk--detail .mk__price{margin-right:auto;font-size:19px} .pop__card[data-size="wide"] .mkt__desk{margin:0} :root:root .pop .mkt__form.set__card{border:0;background:none;box-shadow:none;border-radius:0} .pop .mkt__form .srow{padding-left:0;padding-right:0} :root:root .pop .mk--detail .mk__facts{display:grid;gap:6px;margin:0;padding:0;list-style:none;font-size:13.5px;color:var(--muted)} .pop .mk--detail .mk__facts li{display:flex;align-items:center;gap:9px;padding:0;border:0;background:none;border-radius:0} .pop .mk--detail .mk__facts li::before{content:"";flex:none;width:11px;height:6px;border-left:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:translateY(-2px) rotate(-45deg)} /* The Store's search: a clear button in the field, results in order of how well they match, and an empty state that says what was looked for and whether a filter is what is hiding it. */ .mkt--shelf .mkt__search{position:relative} .mkt__clear{flex:none;display:grid;place-items:center;width:26px;height:26px;margin-right:-6px;border:0;border-radius:50%;background:color-mix(in srgb,var(--ink) 10%,transparent);color:var(--ink);cursor:pointer} .mkt__clear[hidden]{display:none}.mkt__clear svg{width:12px;height:12px} .mkt__clear:hover{background:color-mix(in srgb,var(--ink) 18%,transparent)} .mkt--shelf .mkt__feat[hidden],.mkt--shelf .mkt__grid[hidden]{display:none} .mkt__none{display:grid;justify-items:center;gap:12px;padding:34px 12px;text-align:center;color:var(--muted);font-size:14px} .mkt__none[hidden]{display:none}.mkt__none p{margin:0;max-width:52ch} /* The Zuger Store's lockup in the top bar: the sign in its tile, then the name in the wordmark's letters. */ .top__title--store{display:flex;align-items:center;line-height:0} .stlock{display:block;height:13px;width:auto;color:var(--ink);overflow:visible} .stlock__s{opacity:.62} .status[hidden]{display:none} @media (min-width:900px){.stlock{height:14px}} /* A sidebar row with a name and no second line sits centred on its tile; the Store's name there is its lockup. */ .side__row--bare .side__body{align-self:center} .side__row--bare .side__line{min-height:0} .side__name .stlock{height:12px;display:block} /* ── The payment method window. Three of its boxes are empty on purpose: Stripe draws the card fields inside them. It sits over Settings the way a sheet does: Settings is dimmed behind it, and stays sharp. ── */ .pop[data-kind="card"],.pop[data-kind="cancel"]{background:rgba(0,0,0,.4);-webkit-backdrop-filter:none;backdrop-filter:none} :root[data-zt="light"] .pop[data-kind="card"],:root[data-zt="light"] .pop[data-kind="cancel"]{background:rgba(0,0,0,.32)} .pop[data-kind="card"] .pop__card{width:min(448px,100%);border-radius:18px;box-shadow:0 24px 70px -20px rgba(0,0,0,.55)} .pop[data-kind="card"] .pop__bar{border-bottom:0;padding:22px 26px 2px} .pop[data-kind="card"] .pop__bar b{font-size:17px;font-weight:600;letter-spacing:-.01em} .pop[data-kind="card"] #pop-close{display:none} .pop[data-kind="card"] .pop__body{padding:12px 26px 24px} .pmw{display:flex;flex-direction:column;gap:12px} .pmw__f{display:flex;flex-direction:column;gap:6px;min-width:0} .pmw__f>span:first-child{font-size:13.5px;font-weight:500;color:var(--ink)} .pmw .set__in{height:36px;border-radius:9px;font-size:14px} .pmw__two{display:grid;grid-template-columns:1fr 1fr;gap:12px} .pmw__sel{position:relative;display:block} .pmw__sel select{appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer} .pmw__sel::after{content:"";position:absolute;right:14px;top:50%;width:6px;height:6px;margin-top:-5px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(45deg);pointer-events:none} .pmw__el{display:flex;align-items:center} .pmw__el>*{flex:1;min-width:0} .pmw__el.is-focus{border-color:var(--muted)} .pmw__el.is-bad{border-color:var(--zug)} .pmw__check{display:flex;align-items:center;gap:10px;margin:2px 0;font-size:14px;color:var(--ink-2);cursor:pointer} .pmw__check input{width:17px;height:17px;margin:0;accent-color:var(--ink)} .pmw__tax{display:flex;flex-direction:column;gap:6px;margin-top:4px} .pmw__h{font-size:13.5px;font-weight:600} .pmw__hint{margin:0 0 4px;font-size:13px;line-height:1.45;color:var(--muted)} .pmw__note{margin:0;font-size:13px;color:var(--muted)} .pmw__note.is-bad{color:var(--zug)} .pmw__foot{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:6px} .pmw__foot .btn{flex:none;width:auto;min-width:0;height:36px;padding:0 14px;border-radius:9px;font-size:14px} .pmw__by{flex:1;font-size:11.5px;line-height:1.4;color:var(--faint)} .pmw input[readonly]{color:var(--muted)} @media (max-width:520px){.pmw__foot{flex-wrap:wrap}.pmw__by{flex-basis:100%}.pmw__foot .btn{flex:1}} /* ── Cancelling a plan: the row that closes Billing, and the window that asks. One red, on both buttons. ── */ :root{--stop:#C8443D} .bl__row--plain .bl__rk b{font-weight:400} .bl__btn.bl__btn--stop,.btn.cnl__stop{background:var(--stop);color:#fff;border-color:transparent;font-weight:500} .bl__btn.bl__btn--stop:hover,.btn.cnl__stop:hover{background:color-mix(in srgb,var(--stop) 88%,#000)} .btn.cnl__stop:disabled{opacity:.6} .pop[data-kind="cancel"] .pop__card{width:min(520px,100%);border-radius:18px;box-shadow:0 24px 70px -20px rgba(0,0,0,.55)} .pop[data-kind="cancel"] .pop__bar{position:absolute;top:14px;right:14px;z-index:2;padding:0;border:0} .pop[data-kind="cancel"] .pop__bar b{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} .pop[data-kind="cancel"] .pop__card{position:relative} .pop[data-kind="cancel"] .pop__body{padding:28px 28px 26px} .cnl{display:flex;flex-direction:column;gap:12px} .cnl__sign{position:relative;align-self:flex-start;display:inline-flex;color:var(--ink)} .cnl__sign .psign{width:44px;height:44px} .cnl__sign .psg{width:100%;height:100%} .cnl__sign i{position:absolute;right:-9px;top:-7px;width:20px;height:20px;border-radius:50%;background:var(--surface);border:1.5px solid var(--ink)} .cnl__sign i::before,.cnl__sign i::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:1.5px;margin:-.75px 0 0 -4.5px;background:var(--ink);transform:rotate(45deg)} .cnl__sign i::after{transform:rotate(-45deg)} .cnl__t{margin:6px 0 0;font-size:26px;font-weight:600;letter-spacing:-.025em} .cnl__p{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-2)} .cnl__link{padding:0;border:0;background:none;color:var(--ink);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer} .cnl__h{margin:8px 0 0;font-size:14.5px;font-weight:600} .cnl__list{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none} .cnl__list li{display:flex;align-items:center;gap:14px} .cnl__ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;border:1px solid var(--line-2);background:color-mix(in srgb,var(--ink) 4%,transparent);color:var(--ink-2)} .cnl__ic svg{width:21px;height:21px} .cnl__list b{display:block;font-size:14.5px;font-weight:600} .cnl__list span{font-size:13.5px;line-height:1.45;color:var(--muted)} .cnl__note{margin:0;font-size:13px;color:var(--stop)} .cnl__foot{display:flex;justify-content:flex-end;gap:8px;margin-top:14px} .cnl__foot .btn{flex:none;width:auto;height:38px;padding:0 16px;border-radius:10px;font-size:14px} @media (max-width:520px){.cnl__foot{flex-direction:column-reverse}.cnl__foot .btn{width:100%}} /* Usage: a limit the plan does not have has no bar, only the count; a full bar is the one place the accent shows. */ .use.use--open{grid-template-columns:1fr;justify-items:end} .use__fill.is-full,.modal__card .use__fill.is-full{background:var(--zug)} /* The plans window says "Test mode" the way Billing does: a flask and a line, no box round it. */ .upg .stance:not(.stance--bad):not(.stance--ok){padding:0;border:0;background:none;box-shadow:none;border-radius:0;justify-content:center} /* Stripe's own form (card, Apple Pay, Google Pay, Revolut Pay) sits in one box and sizes itself. */ .pmw__pay{min-height:150px} .bl__card--revolut_pay{background:#191C1F;color:#fff;font-weight:700;font-size:13px;display:grid;place-items:center} /* ── The list pages of Settings: Connections, Skills, Memory. A title with what adds to it, two tabs, rows and cards. ── */ .sp{display:flex;flex-direction:column;gap:14px} .sp__head{display:flex;align-items:center;gap:16px;min-height:40px} .sp__t{margin:0;font-size:24px;font-weight:600;letter-spacing:-.025em;flex:none} .sp__head .sp__q{flex:1;max-width:520px;margin-left:auto} .sp__add{flex:none;margin-left:auto;width:auto;height:36px;padding:0 16px;border-radius:10px;font-size:14px;text-decoration:none;display:inline-flex;align-items:center} .sp__head .sp__q+.sp__add{margin-left:0} .sp__q{display:flex;align-items:center;gap:9px;height:38px;padding:0 12px;border:1px solid var(--in-line);border-radius:10px;background:var(--in-bg);color:var(--muted)} .sp__q svg{width:17px;height:17px;flex:none} .sp__q input{flex:1;min-width:0;border:0;outline:0;background:none;color:var(--ink);font:inherit;font-size:14px} .sp__q input::placeholder{color:var(--faint)} .sp__q:focus-within{border-color:var(--muted)} .sp__bar{display:flex;gap:10px} .sp__bar .sp__q{flex:1} .sp__tabs{display:flex;gap:4px} .sp__tab{height:34px;padding:0 12px;border:0;border-radius:9px;background:none;color:var(--muted);font:inherit;font-size:14.5px;font-weight:500;cursor:pointer} .sp__tab:hover{color:var(--ink)} .sp__tab.is-on{background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink)} .sp__pane{display:flex;flex-direction:column;gap:12px} .sp__pane[hidden]{display:none} .sp__lead{margin:-4px 0 0;max-width:68ch;font-size:14px;line-height:1.5;color:var(--muted)} .sp__h{margin:6px 0 0;font-size:14.5px;font-weight:600} .sp__h i{font-style:normal;font-weight:400;color:var(--faint)} .sp__h--gap{margin-top:18px} .sp__banner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 22px;border-radius:16px;background:color-mix(in srgb,var(--ink) 5%,transparent)} .sp__banner b{font-size:15.5px;font-weight:600} .sp__banner p{margin:6px 0 0;max-width:62ch;font-size:14px;line-height:1.5;color:var(--muted)} .sp__banner-a{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px} .sp__banner-a:empty{display:none} .sp__banner-a .btn{width:auto;height:34px;padding:0 14px;border-radius:9px;font-size:13.5px;text-decoration:none;display:inline-flex;align-items:center} .sp__plane{flex:none;width:56px;height:56px;margin-right:18px;color:var(--ink)} .sp__list{display:flex;flex-direction:column} .sp__row{display:flex;align-items:center;gap:14px;padding:13px 2px;border-bottom:1px solid var(--line-2)} .sp__row:last-child{border-bottom:0} .sp__logo{flex:none;width:40px;height:40px;border-radius:11px} .sp__logo--ink{display:grid;place-items:center;border:1px solid var(--line-2);background:color-mix(in srgb,var(--ink) 4%,transparent);color:var(--ink-2)} .sp__logo--ink svg{width:22px;height:22px} .sp__logo--ink .bot{width:24px;height:24px} .sp__k{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .sp__k b{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sp__k span{font-size:13.5px;line-height:1.4;color:var(--muted)} .sp__row .sp__k span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sp__k i{font-style:normal;font-size:12.5px;color:var(--faint);margin-top:2px} .sp__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .sp__grid[hidden],.sp__list[hidden],.sp__table[hidden]{display:none} .sp__card{display:flex;align-items:center;gap:14px;min-height:84px;padding:14px 16px;border:1px solid var(--line-2);border-radius:14px;color:inherit;text-decoration:none;transition:border-color .2s,background .2s} .sp__card[hidden],.sp__row[hidden],.sp__tr[hidden]{display:none} .sp__card:hover{border-color:color-mix(in srgb,var(--ink) 22%,transparent)} .sp__card .sp__k span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .sp__plus{flex:none;display:grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid var(--line-2);border-radius:9px;background:none;color:var(--ink);cursor:pointer;transition:background .2s} .sp__plus svg{width:17px;height:17px} .sp__plus:hover,.sp__card--link:hover .sp__plus{background:color-mix(in srgb,var(--ink) 8%,transparent)} .sp__plus:disabled{opacity:.5;font-size:0} .sp__cats{display:flex;flex-wrap:wrap;gap:8px} .sp__cat{height:38px;padding:0 14px;border:1px solid var(--line-2);border-radius:10px;background:none;color:var(--ink);font:inherit;font-size:14px;font-weight:500;cursor:pointer} .sp__cat i{font-style:normal;font-weight:400;color:var(--faint);margin-left:4px} .sp__cat:hover{border-color:color-mix(in srgb,var(--ink) 22%,transparent)} .sp__cat.is-on{background:var(--ink);color:var(--bg);border-color:transparent} .sp__cat.is-on i{color:inherit;opacity:.6} .sp__none,.sp__foot{margin:4px 0 0;font-size:13px;line-height:1.5;color:var(--faint)} .sp__table{display:flex;flex-direction:column;border-top:1px solid var(--line-2)} .sp__tr{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:18px;padding:12px 2px;border-bottom:1px solid var(--line-2)} .sp__td{font-size:14px;line-height:1.45;color:var(--ink-2)} .sp__when{font-size:13px;color:var(--faint);white-space:nowrap} .sp__say{position:sticky;bottom:0;display:flex;align-items:center;gap:8px;margin-top:10px;padding:6px 6px 6px 16px;border:1px solid var(--in-line);border-radius:16px;background:var(--surface);box-shadow:0 10px 30px -18px rgba(0,0,0,.5)} .sp__say:focus-within{border-color:var(--muted)} .sp__say-in{flex:1;min-width:0;height:36px;border:0;outline:0;background:none;color:var(--ink);font:inherit;font-size:14.5px} .sp__say-in::placeholder{color:var(--faint)} .sp__say-go{flex:none;display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:50%;background:color-mix(in srgb,var(--ink) 10%,transparent);color:var(--ink);cursor:pointer} .sp__say-go svg{width:17px;height:17px} .sp__say:focus-within .sp__say-go{background:var(--ink);color:var(--bg)} .sp .tool__note{margin:4px 0 0} @media (max-width:760px){.sp__grid{grid-template-columns:1fr}.sp__head{flex-wrap:wrap}.sp__head .sp__q{order:3;flex-basis:100%;max-width:none}.sp__plane{display:none}.sp__row{flex-wrap:wrap}.sp__row .sp__k{flex-basis:calc(100% - 60px)}.sp__tr{grid-template-columns:minmax(0,1fr) auto}.sp__when{display:none}} /* A long one-line description must be cut, not push the page wider than its window. */ .sp,.sp__pane,.sp__list,.sp__row,.sp__grid,.sp__card,.sp__table{min-width:0;max-width:100%} .sp__row>.chip,.sp__row>.bl__btn,.sp__card>.chip{flex:none} /* The six digits of a sign-in code, and the second way in under the first. */ .auth__input--code{text-align:center;font-family:var(--mono,ui-monospace,monospace);font-size:22px;letter-spacing:.42em;padding-left:.42em} .auth__alt+.auth__alt{margin-top:8px} /* Account: the tick sits before the address, on its line. What it means is said when it is pointed at or focused. */ .emark{position:relative;flex:none;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;outline:0;cursor:default} .emark svg{width:18px;height:18px;display:block} .emark--ok{color:#16A34A} :root:not([data-zt="light"]) .emark--ok{color:#34D399} .emark--ok circle{fill:currentColor} .emark--ok path{fill:none;stroke:var(--bg);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .emark--no{color:var(--faint)} .emark--no circle{fill:none;stroke:currentColor;stroke-width:1.6} .emark--no path{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round} .emark::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,4px);padding:5px 9px;border-radius:8px;background:var(--ink);color:var(--bg);font-size:12px;font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;z-index:5} .emark:hover::after,.emark:focus-visible::after{opacity:1;transform:translate(-50%,0)} .emark:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--ink) 35%,transparent)} .srow__form .emark{align-self:center} /* Two quiet links under the sign-in code, side by side. */ .auth__links{display:flex;flex-wrap:wrap;gap:4px 18px;margin:12px 0 0} .auth__links .auth__link{margin:0} /* The address, kept in the password form for password managers only: there to be read, never seen. */ .auth__user{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);opacity:0;pointer-events:none} /* The first-hour card on Today: five steps with a tick each, the undone ones with their button. */ .fh .card__head{align-items:center} .fh__hide{margin-left:auto;background:none;border:0;color:var(--muted);font-size:13px;cursor:pointer;padding:2px 6px;border-radius:8px} .fh__hide:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 8%,transparent)} .fh__list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px} .fh__step{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center} .fh__tick{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;color:transparent} .fh__tick svg{width:16px;height:16px;fill:currentColor} .fh__step.is-done .fh__tick{background:var(--ink);border-color:var(--ink);color:var(--bg)} .fh__k{display:grid;gap:2px;min-width:0} .fh__k b{font-size:14px;font-weight:600} .fh__k span{font-size:13px;color:var(--muted);line-height:1.4} .fh__step.is-done .fh__k b{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--line)} .fh__a{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end} @media (max-width:640px){.fh__step{grid-template-columns:22px 1fr}.fh__a{grid-column:2;justify-content:flex-start}} /* Dom's offer of a first brief: the buttons under the sentence */ .offer{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px} /* The compact menu: one line per row, an icon, a chevron where a row opens to the side. */ .menu--compact{min-width:250px;padding:6px} .menu--compact .menu__i{flex-direction:row;align-items:center;gap:10px;padding:8px 10px;white-space:nowrap} .menu--compact .menu__i b{font-size:14px;font-weight:500;flex:1} .menu__ic{width:18px;height:18px;flex:none;color:var(--muted)} .menu__chev{width:16px;height:16px;flex:none;color:var(--faint);margin-left:6px} .menu__has{position:relative} .menu__has > .menu__i[aria-expanded="true"],.menu__has:hover > .menu__i{background:color-mix(in srgb,var(--ink) 6%,transparent)} .menu__sub{display:none;position:absolute;left:calc(100% + 4px);bottom:-6px;top:auto;right:auto;min-width:240px;animation:none} .menu__has.is-open > .menu__sub{display:block} @media (hover:hover){.menu__has:hover > .menu__sub{display:block}} .menu__sep{height:1px;background:var(--line-2);margin:5px 6px} .menu__list{display:grid;gap:1px} .menu__list .menu__i{cursor:default} .menu__list .menu__i:hover{background:none} .menu__none{display:block;padding:8px 10px;font-size:12.5px;color:var(--faint)} .menu__dot{width:8px;height:8px;border-radius:50%;background:var(--ink);flex:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 14%,transparent)} .menu__dot--off{background:var(--faint);box-shadow:none} .menu__list .menu__i b{font-weight:400} .menu__list .menu__i span{font-size:12px;color:var(--faint);margin-left:auto} @media (max-width:640px){ .menu__sub{position:static;display:none;min-width:0;border:0;box-shadow:none;padding:2px 0 2px 12px;background:none;border-left:1px solid var(--line-2);margin:2px 0 4px 18px;border-radius:0} .menu__has:hover > .menu__sub{display:none} .menu__has.is-open > .menu__sub{display:block} } .sp__acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end} /* The usage popover over the composer's ring: a bar per limit, the plan, and the way to the detail. */ .composer__runs{border:0;background:none;font:inherit;cursor:pointer} .menu--usage{left:48px;right:auto;bottom:calc(100% + 8px);min-width:320px;max-width:calc(100vw - 32px);padding:10px 12px 6px} .um__row{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:baseline;padding:7px 4px} .um__row b{font-size:13.5px;font-weight:500;color:var(--ink)} .um__row span{font-size:12.5px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums} .um__bar{grid-column:1 / -1;height:4px;border-radius:2px;background:color-mix(in srgb,var(--ink) 10%,transparent);overflow:hidden;margin-top:4px} .um__bar i{display:block;height:100%;border-radius:2px;background:var(--ink);width:0;transition:width .6s cubic-bezier(.22,.68,.32,1)} .um__row[data-level="low"] .um__bar i{background:var(--c-titlis)} .um__row[data-level="out"] .um__bar i{background:var(--zug)} .um__sep{height:1px;background:var(--line-2);margin:4px 0} .um__link{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 4px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:13.5px} .um__link:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)} .um__link span{color:var(--muted);font-size:12.5px} .um__link svg{width:14px;height:14px;color:var(--faint)} @media (max-width:640px){.menu--usage{left:10px;right:10px;min-width:0}} /* The keyboard: a menu item that has focus looks like one under the pointer; the ring is the accent, as everywhere. */ .menu__i:focus-visible{outline:none;background:color-mix(in srgb,var(--ink) 8%,transparent);box-shadow:inset 0 0 0 1.5px var(--zug)} .set__tab:focus-visible,.sp__tab:focus-visible,.bl__btn:focus-visible{outline:2px solid var(--zug);outline-offset:2px} /* Choose your language: a grid, each language in itself over its English name, a tick on the one in use. */ .lp{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:6px 10px;padding:4px 0} .lp__b{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:12px 14px;border:0;border-radius:12px;background:none;color:var(--ink);font:inherit;text-align:start;cursor:pointer} .lp__b:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)} .lp__b.is-on{background:color-mix(in srgb,var(--ink) 9%,transparent)} .lp__b:focus-visible{outline:2px solid var(--ink);outline-offset:2px} .lp__t{display:flex;flex-direction:column;gap:2px;min-width:0} .lp__n{font-size:15px;font-weight:600;line-height:1.3;white-space:nowrap} .lp__e{font-size:13px;color:var(--muted);line-height:1.3;white-space:nowrap} .lp__tick{flex:none;width:18px;height:18px;margin-top:3px;color:var(--link)} .lang-open{display:inline-flex;align-items:center;gap:6px} .lang-open svg{width:14px;height:14px} /* The door's language switch: under the card, quiet, the same window as Settings. */ .auth__lang{display:flex;align-items:center;gap:7px;margin:18px auto 0;padding:8px 12px;border:0;border-radius:9999px;background:none;color:var(--a-ink2);font:inherit;font-size:13px;cursor:pointer} .auth__lang svg{width:16px;height:16px} .auth__lang:hover{color:var(--a-ink);background:rgba(255,255,255,.08)} .auth__lang:focus-visible{outline:2px solid var(--a-ink);outline-offset:2px} /* Pinned on top of the sidebar: the Zuger Store. It stays put while the list below scrolls. */ .side__pins{display:flex;flex-direction:column;gap:2px;padding:0 10px 8px;margin-bottom:4px;border-bottom:1px solid var(--line-2)} .side__pins .side__row{padding-block:6px} .side__pins .stlock{height:11px;width:auto} .side__pins .tile--sys svg{width:18px;height:18px} /* The Zuger Store opens as a window, sized and framed like Settings. */ .sheet{display:flex;flex-direction:column;width:100%;height:100%;min-height:0} .sheet__top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px 12px;border-bottom:1px solid var(--line-2)} .sheet__title{display:flex;align-items:center;gap:10px;margin:0;font-size:18px;font-weight:600;letter-spacing:-.01em} .sheet__title .stlock{height:16px;width:auto} .sheet__body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:8px 18px calc(var(--safe-b, 0px) + 24px)} .sheet__wait{margin:40px auto;text-align:center;color:var(--muted)} @media (min-width:900px){ .sheet__top{padding:18px 24px 14px} .sheet__body{padding:12px 28px 32px} } /* Bernina's window says whose it is with the shield before the name. */ #pop-title:has(.pop__sign){display:flex;align-items:center;gap:9px} .pop__sign{display:inline-flex;width:22px;height:22px;flex:none} .pop__sign svg{width:100%;height:100%} /* Connectors on the Store shelf: the tool's own mark, and Connect in the foot where a price would be. */ .mkc--tool{cursor:default;text-align:left} .mkc--tool .mkc__logo{width:40px;height:40px;border-radius:12px;font-size:15px} .mkc--tool .mkc__f{justify-content:flex-start} .mkc--tool .tool__note{margin:0;font-size:12.5px;color:var(--muted)} /* Choosing a bank: a search and a list, each row the bank's initial and its name. */ .bankp{display:flex;flex-direction:column;gap:12px} .bankp__q input{width:100%} .bankp__list{display:flex;flex-direction:column;gap:2px;max-height:min(420px,55vh);overflow-y:auto} .bankp__row{display:flex;align-items:center;gap:12px;padding:8px 10px;border:0;border-radius:12px;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer} .bankp__row:hover,.bankp__row:focus-visible{background:color-mix(in srgb,var(--ink) 6%,transparent)} .bankp__row[hidden]{display:none} .bankp__row .tool__logo{width:32px;height:32px;border-radius:10px;font-size:13px} /* No model on this deployment yet: a quiet line, not an alarm. Everything else works. */ .keyless{display:flex;align-items:center;gap:10px;flex:none;padding:9px 16px;background:color-mix(in srgb,var(--ink) 5%,var(--bg));border-bottom:1px solid var(--line-2);font-size:13px;line-height:1.45;color:var(--muted)} .keyless[hidden]{display:none} .keyless svg{flex:none;width:17px;height:17px} .keyless span{flex:1;min-width:0}.keyless b{font-weight:600;color:var(--ink)} /* Zuger support (Privacy): the ticket gets its own line; the length and Allow sit under it. */ #support-form{flex-wrap:wrap} #support-ticket{flex:1 1 100%;min-width:0} #support-hours{flex:1 1 auto} /* Confirm it's you (reauth pop) */ .ra{display:flex;flex-direction:column;gap:14px} .ra__lead{margin:0;color:var(--ink-2)} .ra__go{width:100%;justify-content:center} .ra__or{display:flex;align-items:center;gap:10px;margin:0;color:var(--muted);font-size:13px} .ra__or::before,.ra__or::after{content:"";flex:1;height:1px;background:var(--line)} .ra__form{display:flex;flex-direction:column;gap:10px} .ra__form .pw,.ra__form .btn{width:100%} .ra__form .btn{justify-content:center} /* Held by Bernina: why, and what is held, before Release or Discard */ .held__why{margin:10px 0 0;font-size:14px}.held__why b{display:block;margin-bottom:4px} .held__why ul{margin:0;padding-left:18px;color:var(--ink-2)} .held__what{margin:10px 0 0;border-radius:12px;background:var(--surface-2,rgba(127,127,140,.08));padding:10px 12px} .held__what summary{cursor:pointer;font-weight:500} .held__doc{margin:8px 0 0;font-size:14px} .held__text{margin-top:8px;font-size:14px;line-height:1.55;max-height:260px;overflow:auto;overflow-wrap:anywhere} /* A question a Run asked: its options as small pills over the answer line, and a quiet footer. */ .checkin{display:grid;gap:10px} .checkin__opts{display:flex;flex-wrap:wrap;gap:8px} .checkin .sp__say{position:static;margin-top:0;box-shadow:none} .checkin__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin:0} .checkin__note:empty{display:none} /* ── the door page: console.zuger.ai signed out ─────────────────────────────── platform.claude.com's layout in Zuger's language: a bar with the lockup and the site's pages, the screen's heading centred over one bordered card, the eight agents under the sign-in, a quiet footer, all over a faint dot grid. After the block the site copies (it ends at the 721px query above), so the site's login popup is untouched. The card's fields and buttons keep their auth__ classes and are only re-dressed here, inside .dp. */ :root{--dp-dot:rgba(255,255,255,.1);--dp-card:#0F0F0F;--dp-field:rgba(255,255,255,.045);--dp-shadow:0 30px 90px rgba(0,0,0,.45)} :root[data-zt="light"]{--dp-dot:rgba(10,10,10,.09);--dp-card:#FFFFFF;--dp-field:#F4F4F5;--dp-shadow:0 24px 60px rgba(9,11,16,.08)} .dp{ --a-ink:var(--ink);--a-ink2:var(--muted);--a-faint:var(--faint);--a-line:var(--line);--a-accent:var(--zug);--a-pill:var(--surface-2); min-height:100dvh;display:flex;flex-direction:column;color:var(--ink);font-family:var(--sans);letter-spacing:-.011em; position:relative;isolation:isolate;background-color:var(--bg) } /* The sky: the dot grid, drawn on a canvas (app.js) so its dots can twinkle. Behind everything, and never in the way. */ .dp__sky{position:fixed;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none} .dp a{color:inherit} .dp__bar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:24px;height:68px;padding:0 max(16px,3.2vw);padding-top:var(--safe-t)} .dp__brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none} .dp__mark{width:28px;height:28px;--b-eye:var(--zug)} .dp__brand .auth__wm .wm-svg{height:14px} .dp__word{font-size:18px;font-weight:600;letter-spacing:-.02em;color:var(--ink-2);padding-left:10px;border-left:1px solid color-mix(in srgb,var(--muted) 45%,transparent);line-height:18px} .dp__nav{display:flex;align-items:center;gap:28px;font-size:14px} .dp__nav a{color:var(--ink-2);text-decoration:none;transition:color .15s} .dp__nav a:hover{color:var(--ink)} .dp__nav .dp__sales{height:34px;display:inline-flex;align-items:center;padding:0 14px;border-radius:var(--pill);background:var(--btn-bg);border:1px solid var(--line);color:var(--ink)} .dp__nav .dp__sales:hover{border-color:var(--muted)} .dp__menu{display:none;position:relative} .dp__menu summary{list-style:none;display:grid;gap:6px;justify-items:end;width:44px;height:44px;align-content:center;cursor:pointer;border-radius:12px} .dp__menu summary::-webkit-details-marker{display:none} .dp__menu summary i{display:block;height:1.5px;background:var(--ink-2);border-radius:2px;width:26px} .dp__menu summary i:nth-child(2){width:18px}.dp__menu summary i:nth-child(3){width:22px} .dp__sheet{position:absolute;right:0;top:52px;min-width:220px;padding:8px;display:grid;background:var(--dp-card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--dp-shadow)} .dp__sheet a{display:flex;align-items:center;height:44px;padding:0 12px;border-radius:12px;text-decoration:none;font-size:15px;color:var(--ink-2)} .dp__sheet a:hover{background:var(--btn-bg);color:var(--ink)} .dp__main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 16px 36px;text-align:center} .dp__h{margin:0;font-size:clamp(34px,4.6vw,50px);font-weight:700;letter-spacing:-.04em;line-height:1.04;color:var(--ink);text-wrap:balance} .dp__h em{font-style:normal;color:var(--zug)} .dp__sub{margin:14px auto 28px;max-width:440px;font-size:16px;line-height:1.45;color:var(--muted);text-wrap:balance;overflow-wrap:anywhere} .dp__card{width:min(420px,100%);box-sizing:border-box;padding:24px;text-align:left;background:var(--dp-card);border:1px solid var(--line);border-radius:24px;box-shadow:var(--dp-shadow)} /* the fields and buttons, re-dressed for a card on the page rather than the popup's dark sheet */ .dp .auth__input{height:44px;margin:0 0 10px;background:var(--dp-field);border:1px solid var(--line);color:var(--ink)} .dp .auth__input::placeholder{color:var(--faint)} .dp .auth__input:focus{background:var(--dp-field);border-color:var(--muted);box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 10%,transparent)} .dp .pw:has(>.auth__input){margin:0 0 10px} .dp .auth__cta{margin:4px 0 0;background:var(--ink);color:var(--bg)} .dp .auth__cta:focus-visible,.dp .auth__alt:focus-visible{outline:2px solid var(--zug);outline-offset:2px} .dp .auth__alt{flex-direction:row;gap:10px;width:100%;height:44px;border-radius:var(--pill);background:var(--btn-bg);border:1px solid var(--line);font-size:15px;font-weight:500;color:var(--ink);transition:border-color .15s,background .15s} .dp .auth__alt:hover{border-color:var(--muted)} .dp .auth__alt svg{width:18px;height:18px;padding:0;border-radius:0;background:none} .dp .auth__alt:hover svg{background:none} .dp .auth__or{margin:16px 0} .dp .auth__or span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .dp .auth__terms{margin:16px 0 0;color:var(--muted)} .dp .auth__terms a,.dp .auth__link{color:var(--zug)} .dp .auth__foot{margin:16px 0 0;padding-top:16px;border-top:1px solid var(--line-2);font-size:13px;color:var(--muted)} .dp .auth__foot a{display:inline;height:auto;margin:0;padding:0;border-radius:0;background:none;font-size:13px;font-weight:600;color:var(--ink)} .dp .auth__foot a:hover{background:none;text-decoration:underline;text-underline-offset:3px} .dp .auth__sub,.dp .auth__note,.dp .auth__never{color:var(--muted)} .dp .auth__progress i{background:var(--line)} .dp .auth__progress i.is-on{background:var(--ink)} /* the agents under the sign-in: the reference's row of logos, with the Console's own marks */ .dp__crew{padding:4px 16px 36px;text-align:center} .dp__crew-h{margin:0 0 18px;font-size:13px;color:var(--muted)} .dp__crew-row{margin:0 auto;padding:0;list-style:none;max-width:1120px;display:flex;flex-wrap:wrap;justify-content:center;gap:18px 30px} .dp__crew-row li{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:9px;align-items:center;text-align:left} .dp__crew-row .bot{grid-row:1/3;width:28px;height:28px} .dp__crew-row b{font-size:14px;font-weight:600;color:var(--ink);line-height:1.2} .dp__crew-row span{font-size:12px;color:var(--muted);line-height:1.2} .dp__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 22px;padding:16px 16px calc(16px + var(--safe-b));border-top:1px solid var(--line-2);font-size:13px;color:var(--muted)} .dp__foot a{text-decoration:none}.dp__foot a:hover{color:var(--ink)} .dp__lang{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer} .dp__lang:hover{color:var(--ink)} .dp__lang svg{width:16px;height:16px} @media (max-width:760px){ .dp__nav{display:none} .dp__menu{display:block} .dp__main{justify-content:flex-start;padding-top:32px} .dp__card{padding:20px;border-radius:22px} .dp__crew-row{gap:14px 22px} } @media (max-width:420px){.dp__word{font-size:16px}.dp__crew-row span{display:none}.dp__crew-row li{grid-template-rows:auto}.dp__crew-row .bot{grid-row:auto}}