/* ======================================================================= CEO * os.asgt.sa — the autonomous OS: CORE · WORLD · BRIEF. * * Built from the mockup Yawar approved on 29 Sep 2026 ("This is just perfect * build it"): https://claude.ai/artifact/MkYSt6oFUUCW1CGSDV6VfE * * EVERY COLOUR, SIZE, RADIUS AND SHADOW IS AN --asgt-* TOKEN. The mockup was * drawn with literal hex because an artboard cannot load this stylesheet; each * literal was a dark-surface token, so the mapping is exact. Translucency is * color-mix() over a token, never an rgba() literal. No .asgt-* class is * redefined and no bare element is styled. * * EVERY RULE IS SCOPED UNDER .os-ceo, deliberately. asgt-ui.v2.css is linked * LAST in index.html and styles a, p, h1-h4 and strong; at equal specificity it * won, so links, headings and paragraphs here rendered as the system's defaults * instead of as written. Scoping lifts every rule to (0,2,0). Found by * adversarial review, 29 Sep 2026. * * THE OVERLAY PINS ITS OWN SURFACE. os-ceo.js sets data-surface="dark" on the * root, so when the shell's moves to crisp — which os/CLAUDE.md plans — * this screen keeps the look he approved. * ========================================================================= */ .os-ceo { position: fixed; inset: 0; z-index: 60; overflow: hidden; background-color: var(--asgt-canvas); background-image: radial-gradient( ellipse 52% 62% at 50% 54%, color-mix(in srgb, var(--asgt-accent) 13%, transparent), transparent 70%); color: var(--asgt-text); font-family: var(--asgt-font-ui); } .os-ceo .os-ceo__grid { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient( color-mix(in srgb, var(--asgt-text) 4.5%, transparent) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse 48% 52% at 50% 54%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 48% 52% at 50% 54%, #000 30%, transparent 100%); } /* The repainted region. The frame around it — mode switch, ask bar, status line — is built once and never rebuilt, so focus, the half-typed question and the cursor inside it survive every poll. */ .os-ceo .os-ceo__body { position: absolute; inset: 0; } /* -- Shared materials ------------------------------------------------------ */ .os-ceo .os-ceo__glass { background: color-mix(in srgb, var(--asgt-surface) 62%, transparent); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid color-mix(in srgb, var(--asgt-text) 8%, transparent); box-shadow: var(--asgt-shadow-pop); } .os-ceo .os-ceo__eyebrow { margin: 0; font-family: var(--asgt-font-data); font-size: var(--asgt-t-2xs); letter-spacing: .2em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--asgt-text-muted); } /* The accent is identity only — the CEO's own name. A STATE is never magenta. */ .os-ceo .os-ceo__eyebrow--accent { color: var(--asgt-accent-on-tint); } .os-ceo .os-ceo__eyebrow--waiting { color: var(--asgt-low); } .os-ceo .os-ceo__eyebrow--stopped { color: var(--asgt-out); } .os-ceo .os-ceo__eyebrow--thinking { color: var(--asgt-info); } .os-ceo .os-ceo__eyebrow--faint { color: var(--asgt-text-faint); } .os-ceo .os-ceo__mono { font-family: var(--asgt-font-data); font-variant-numeric: tabular-nums; } .os-ceo .os-ceo__dot { display: inline-block; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--asgt-accent); flex: none; } .os-ceo .os-ceo__dot--stopped { background: var(--asgt-out); } .os-ceo .os-ceo__dot--thinking { background: var(--asgt-info); } .os-ceo .os-ceo__dot--unknown { background: var(--asgt-text-faint); } .os-ceo .os-ceo__dot--stale { background: var(--asgt-text-faint); } .os-ceo .os-ceo__sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* -- The shell: mode switch ------------------------------------------------ */ .os-ceo .os-ceo__modes { position: absolute; inset-inline-start: var(--asgt-s-10); inset-block-start: var(--asgt-s-8); z-index: 5; block-size: 44px; box-sizing: border-box; display: flex; align-items: center; gap: var(--asgt-s-1); padding: var(--asgt-s-1); border-radius: var(--asgt-r-pill); } /* The ASGT mark, and the door back to the classic view. */ .os-ceo .os-ceo__mark { position: relative; flex: none; inline-size: 28px; block-size: 28px; border-radius: 50%; background: conic-gradient(from 200deg, var(--asgt-accent), var(--asgt-info), var(--asgt-low), var(--asgt-accent)); display: block; } .os-ceo .os-ceo__mark > span { position: absolute; inset: 1.5px; border-radius: 50%; background: var(--asgt-well); display: flex; align-items: center; justify-content: center; font-family: var(--asgt-font-data); font-size: var(--asgt-t-xs); color: var(--asgt-text); } .os-ceo .os-ceo__mode { block-size: 36px; padding-inline: 18px; border-radius: var(--asgt-r-pill); display: flex; align-items: center; font-size: var(--asgt-t-sm); font-weight: 600; color: var(--asgt-text-muted); text-decoration: none; transition: color .2s; } .os-ceo .os-ceo__mode:hover { color: var(--asgt-text); } .os-ceo .os-ceo__mode[aria-current="page"] { background: var(--asgt-accent-tint); color: var(--asgt-accent-on-tint); } /* The system's global focus ring is a rectangle with an 8px radius. Restated here so round controls stay round and pills stay pills when focused. */ .os-ceo .os-ceo__mark:focus-visible, .os-ceo .os-ceo__round:focus-visible { outline: 2px solid var(--asgt-accent); outline-offset: 2px; border-radius: 50%; } .os-ceo .os-ceo__mode:focus-visible { outline: 2px solid var(--asgt-accent); outline-offset: 1px; border-radius: var(--asgt-r-pill); } /* -- The shell: ask bar ---------------------------------------------------- */ /* Centred with logical insets and auto margins, not translateX(-50%): a physical transform on a logical inset moves the bar off-screen under dir="rtl", and ASGT serves Arabic. */ .os-ceo .os-ceo__ask { position: absolute; inset-inline: 0; inset-block-end: var(--asgt-s-8); margin-inline: auto; margin-block: 0; z-index: 5; inline-size: min(600px, calc(100% - 2 * var(--asgt-s-6))); block-size: 56px; box-sizing: border-box; display: flex; align-items: center; gap: var(--asgt-s-3); padding-inline: var(--asgt-s-5) var(--asgt-s-2); border-radius: var(--asgt-r-pill); } /* The pill's own ring is the focus indicator; the input's rectangle is not. */ .os-ceo .os-ceo__ask:focus-within { border-color: color-mix(in srgb, var(--asgt-accent) 55%, transparent); } .os-ceo .os-ceo__input { flex: 1; min-inline-size: 0; block-size: 40px; border: 0; outline: none; background: transparent; font-family: var(--asgt-font-ui); /* 16px or iOS Safari zooms the page on focus. */ font-size: var(--asgt-t-touch); color: var(--asgt-text); } .os-ceo .os-ceo__input:focus-visible { outline: none; } .os-ceo .os-ceo__input::placeholder { color: var(--asgt-text-faint); } .os-ceo .os-ceo__input:disabled { cursor: not-allowed; } .os-ceo .os-ceo__round { flex: none; inline-size: 40px; block-size: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; font-family: inherit; } /* Voice is not built. The button stays focusable (aria-disabled, not disabled) so keyboard and touch users can reach it and be told why. */ .os-ceo .os-ceo__mic { border: 1px solid color-mix(in srgb, var(--asgt-text) 10%, transparent); background: transparent; color: var(--asgt-text-muted); } .os-ceo .os-ceo__mic[aria-disabled="true"] { opacity: .5; cursor: not-allowed; } .os-ceo .os-ceo__send { border: 0; background: var(--asgt-accent); /* White, not --asgt-text: #F2EDF4 on this magenta measures 4.1:1, under the 4.5:1 floor; white measures 4.8:1. */ color: var(--asgt-accent-ink); box-shadow: var(--asgt-shadow-accent); transition: background .2s; } .os-ceo .os-ceo__send:hover { background: var(--asgt-accent-hover); } .os-ceo .os-ceo__send:disabled { opacity: .5; cursor: not-allowed; } /* One line above the ask bar that says what just happened — a refused send, a stopped CEO, voice not built. Persistent, so role="alert" is announced once and not rebuilt away. */ .os-ceo .os-ceo__status { position: absolute; inset-inline: 0; inset-block-end: calc(var(--asgt-s-8) + 56px + var(--asgt-s-3)); z-index: 5; margin: 0 auto; inline-size: min(600px, calc(100% - 2 * var(--asgt-s-6))); text-align: center; font-size: var(--asgt-t-sm); color: var(--asgt-text-muted); min-block-size: 1.3em; } .os-ceo .os-ceo__status--error { color: var(--asgt-out); } /* -- The orb: the CEO itself ----------------------------------------------- */ /* Sizes are classes, not an inline custom property: an inline value beats the media query below, so the phone size never applied and the 272px halo scrolled the home screen sideways on a phone. */ .os-ceo .os-ceo__orb { position: relative; inline-size: 272px; block-size: 272px; flex: none; } .os-ceo .os-ceo__orb--head { inline-size: 104px; block-size: 104px; } .os-ceo .os-ceo__orb--load { inline-size: 160px; block-size: 160px; } .os-ceo .os-ceo__orb-body { position: absolute; inset: 0; animation: os-ceo-breathe 4s ease-in-out infinite; } .os-ceo .os-ceo__orb--busy .os-ceo__orb-body { animation-duration: 1.4s; } .os-ceo .os-ceo__orb--stopped .os-ceo__orb-body { animation: none; filter: grayscale(.8); opacity: .55; } .os-ceo .os-ceo__orb-halo { position: absolute; inset: -48%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--asgt-accent) 30%, transparent) 0%, color-mix(in srgb, var(--asgt-accent) 10%, transparent) 38%, transparent 68%); } .os-ceo .os-ceo__orb-bloom, .os-ceo .os-ceo__orb-ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 210deg, var(--asgt-accent), var(--asgt-accent-hover), var(--asgt-info), var(--asgt-low), var(--asgt-accent)); } .os-ceo .os-ceo__orb-bloom { filter: blur(16px); opacity: .5; } .os-ceo .os-ceo__orb-ring { -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); } .os-ceo .os-ceo__orb-core { position: absolute; inset: 3.3%; border-radius: 50%; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--asgt-accent-hover) 62%, transparent) 0%, color-mix(in srgb, var(--asgt-accent) 34%, transparent) 22%, color-mix(in srgb, var(--asgt-accent) 10%, transparent) 48%, var(--asgt-well) 76%, var(--asgt-canvas) 100%); } .os-ceo .os-ceo__orb-line { position: absolute; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--asgt-text) 7%, transparent); } .os-ceo .os-ceo__orb-line--1 { inset: 14.7%; } .os-ceo .os-ceo__orb-line--2 { inset: 28.7%; border-color: color-mix(in srgb, var(--asgt-text) 5%, transparent); } @keyframes os-ceo-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } } /* -- Entrance: played on the FIRST paint of a mode only -------------------- */ @keyframes os-ceo-rise { from { opacity: 0; transform: translateY(16px); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } } .os-ceo .os-ceo__rise { animation: os-ceo-rise .9s cubic-bezier(.16, 1, .3, 1) both; } .os-ceo .os-ceo__rise-1 { animation-delay: .10s; } .os-ceo .os-ceo__rise-2 { animation-delay: .25s; } .os-ceo .os-ceo__rise-3 { animation-delay: .40s; } .os-ceo .os-ceo__rise-4 { animation-delay: .55s; } /* Text that came from a person or a model can hold a long URL or token. */ .os-ceo .os-ceo__wrap { overflow-wrap: anywhere; } /* ========================================================================= * CORE · HOME * ========================================================================= */ .os-ceo .os-ceo__home { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: center; justify-items: center; column-gap: var(--asgt-s-12); /* Room between the headline and the row beneath it. The right-hand column is taller than the orb and rose until its card touched the headline — 1px apart, measured on his screen at 1470x745. */ row-gap: var(--asgt-s-8); padding: 104px var(--asgt-s-10) 150px; box-sizing: border-box; overflow-y: auto; overflow-x: clip; } /* Width in px, not ch: 22ch resolved against the 15px body size, ~180px, and the CEO's sentence wrapped to ten lines at 30px. */ .os-ceo .os-ceo__headline { grid-column: 1 / -1; text-align: center; inline-size: 100%; max-inline-size: 960px; } .os-ceo .os-ceo__headline h1 { margin: var(--asgt-s-5) 0 0; line-height: 1.08; font-weight: 600; letter-spacing: -0.03em; color: var(--asgt-text); text-wrap: balance; overflow-wrap: anywhere; } /* Headline size follows its length, so the CEO's words are never cut to fit. */ .os-ceo .os-ceo__h--l { font-size: var(--asgt-t-3xl); } .os-ceo .os-ceo__h--m { font-size: var(--asgt-t-2xl); } .os-ceo .os-ceo__h--s { font-size: var(--asgt-t-xl); } .os-ceo .os-ceo__eyebrow-row { display: inline-flex; align-items: center; gap: 10px; } .os-ceo .os-ceo__side { display: flex; flex-direction: column; gap: var(--asgt-s-6); inline-size: 100%; max-inline-size: 264px; } .os-ceo .os-ceo__side--start { justify-self: end; } .os-ceo .os-ceo__side--end { justify-self: start; } .os-ceo .os-ceo__card { box-sizing: border-box; padding: 22px var(--asgt-s-6); border-radius: var(--asgt-r-xl); } /* The waiting state is marked by the amber eyebrow and figure, and by an amber top edge — a border, not a hand-built shadow, which the house rules forbid. */ .os-ceo .os-ceo__card--waiting { border-block-start-color: color-mix(in srgb, var(--asgt-low) 55%, transparent); } .os-ceo .os-ceo__figure-row { display: flex; align-items: baseline; gap: var(--asgt-s-3); margin-block-start: 14px; } .os-ceo .os-ceo__big { font-family: var(--asgt-font-data); font-variant-numeric: tabular-nums; font-size: var(--asgt-t-2xl); line-height: 1; font-weight: 500; color: var(--asgt-text); } .os-ceo .os-ceo__big--waiting { color: var(--asgt-low); } .os-ceo .os-ceo__big-unit { font-family: var(--asgt-font-data); font-size: var(--asgt-t-md); color: var(--asgt-text-muted); margin-inline-end: var(--asgt-s-2); } .os-ceo .os-ceo__card-label { font-size: var(--asgt-t-md); font-weight: 600; color: var(--asgt-text); } .os-ceo .os-ceo__card-line { margin: 10px 0 0; font-size: var(--asgt-t-sm); line-height: 1.45; color: var(--asgt-text-muted); } .os-ceo .os-ceo__card-line--strong { color: var(--asgt-text); } .os-ceo .os-ceo__link { display: inline-flex; align-items: center; gap: 6px; margin-block-start: var(--asgt-s-4); font-size: var(--asgt-t-sm); font-weight: 600; color: var(--asgt-accent-on-tint); text-decoration: none; } .os-ceo .os-ceo__link:hover { color: var(--asgt-accent-hover); } .os-ceo .os-ceo__pill { display: inline-flex; align-items: center; gap: var(--asgt-s-2); margin-block-start: 14px; padding: var(--asgt-s-1) 10px; border-radius: var(--asgt-r-pill); font-size: var(--asgt-t-sm); font-weight: 600; background: var(--asgt-chip-bg); color: var(--asgt-chip-fg); } .os-ceo .os-ceo__pulse-dots { display: flex; flex-wrap: wrap; gap: 5px; margin-block-start: 14px; } .os-ceo .os-ceo__pulse-dot { inline-size: 6px; block-size: 6px; border-radius: 50%; } .os-ceo .os-ceo__pulse-dot--ready { background: var(--asgt-stock); } .os-ceo .os-ceo__pulse-dot--paused { background: var(--asgt-text-faint); } .os-ceo .os-ceo__pulse-dot--failing { background: var(--asgt-out); } @media (max-width: 1100px) { .os-ceo .os-ceo__home { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; align-content: start; padding-block-start: 96px; } .os-ceo .os-ceo__side, .os-ceo .os-ceo__side--start, .os-ceo .os-ceo__side--end { justify-self: center; max-inline-size: 420px; } .os-ceo .os-ceo__orb-slot { order: -1; } .os-ceo .os-ceo__headline { order: -2; } .os-ceo .os-ceo__orb--home { inline-size: 200px; block-size: 200px; } } @media (max-width: 480px) { .os-ceo .os-ceo__modes { inset-inline-start: var(--asgt-s-4); } .os-ceo .os-ceo__orb--home { inline-size: 150px; block-size: 150px; } .os-ceo .os-ceo__home { padding-inline: var(--asgt-s-4); } } /* ========================================================================= * CORE · CONVERSATION * ========================================================================= */ .os-ceo .os-ceo__talk { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding-block: 56px 150px; padding-inline: var(--asgt-s-6); box-sizing: border-box; overflow-y: auto; overflow-x: clip; } .os-ceo .os-ceo__talk-head { display: flex; flex-direction: column; align-items: center; gap: 18px; flex: none; } .os-ceo .os-ceo__column { inline-size: 100%; max-inline-size: 720px; margin-block-start: var(--asgt-s-10); display: flex; flex-direction: column; gap: var(--asgt-s-10); } .os-ceo .os-ceo__turn { display: flex; flex-direction: column; } /* A question sits in a well — it is input, not a finding. */ .os-ceo .os-ceo__q { align-self: flex-end; max-inline-size: 520px; box-sizing: border-box; padding: var(--asgt-s-4) 22px; border-radius: var(--asgt-r-lg); background: var(--asgt-well); border: 1px solid var(--asgt-border); } .os-ceo .os-ceo__q p { margin: var(--asgt-s-2) 0 0; font-size: var(--asgt-t-md); line-height: 1.4; color: var(--asgt-text); overflow-wrap: anywhere; } .os-ceo .os-ceo__answer { margin-block-start: var(--asgt-s-10); } .os-ceo .os-ceo__a-lead { margin: var(--asgt-s-4) 0 0; font-size: var(--asgt-t-2xl); line-height: 1.12; font-weight: 600; letter-spacing: -0.025em; color: var(--asgt-text); text-wrap: balance; overflow-wrap: anywhere; } .os-ceo .os-ceo__a-body p { margin: 14px 0 0; font-size: var(--asgt-t-md); line-height: 1.5; color: var(--asgt-text-muted); text-wrap: pretty; overflow-wrap: anywhere; } .os-ceo .os-ceo__a-body strong { color: var(--asgt-text); font-weight: 600; } /* Earlier turns are quieter by TYPE, not by opacity: opacity .55 put the muted text under the 4.5:1 floor this file cites. */ .os-ceo .os-ceo__turn--old .os-ceo__a-lead { font-size: var(--asgt-t-lg); color: var(--asgt-text-muted); } .os-ceo .os-ceo__turn--old .os-ceo__q p { color: var(--asgt-text-muted); } .os-ceo .os-ceo__did { margin: var(--asgt-s-3) 0 0; font-size: var(--asgt-t-sm); color: var(--asgt-text-muted); } .os-ceo .os-ceo__prov { margin: var(--asgt-s-4) 0 0; font-family: var(--asgt-font-data); font-size: var(--asgt-t-sm); font-variant-numeric: tabular-nums; color: var(--asgt-text-faint); } .os-ceo .os-ceo__thinking { margin: var(--asgt-s-3) 0 0; font-size: var(--asgt-t-xl); font-weight: 600; letter-spacing: -0.02em; color: var(--asgt-text-muted); } .os-ceo .os-ceo__failed { color: var(--asgt-out); } /* ========================================================================= * A MODE THAT IS NOT BUILT YET — said plainly, never dressed up as finished. * ========================================================================= */ .os-ceo .os-ceo__unbuilt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 128px var(--asgt-s-6) 150px; box-sizing: border-box; } .os-ceo .os-ceo__unbuilt-inner { max-inline-size: 30rem; text-align: center; } .os-ceo .os-ceo__unbuilt h1 { margin: var(--asgt-s-4) 0 0; font-size: var(--asgt-t-xl); font-weight: 600; letter-spacing: -0.02em; color: var(--asgt-text); } .os-ceo .os-ceo__unbuilt p { margin: var(--asgt-s-3) 0 0; font-size: var(--asgt-t-base); line-height: 1.55; color: var(--asgt-text-muted); } @media (prefers-reduced-motion: reduce) { .os-ceo .os-ceo__rise, .os-ceo .os-ceo__orb-body { animation: none; } .os-ceo .os-ceo__mode, .os-ceo .os-ceo__send { transition: none; } }