Spaces:
Running
Running
| /* LANDING — Foundry chassis. docs/SITE_REDESIGN.md. | |
| No figure is written here. Anything numeric on this page is rendered from | |
| model-registry.ts at runtime or it is absent, so adding a model updates the | |
| page by itself and a stale number cannot be committed. */ | |
| *, *::before, *::after { box-sizing: border-box; } | |
| body { | |
| margin: 0; | |
| background: var(--bg); | |
| color: var(--text); | |
| font-family: var(--body); | |
| font-size: var(--step-0); | |
| line-height: 1.65; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| a { color: var(--accent); text-decoration: none; } | |
| a:hover { color: var(--accent-hi); } | |
| :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--rad-s); } | |
| .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } | |
| /* ── eyebrow ───────────────────────────────────────────────────────── */ | |
| .eyebrow { | |
| display: inline-flex; align-items: center; gap: 8px; | |
| font-family: var(--mono); font-size: var(--step--1); | |
| letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); | |
| } | |
| .pulse { | |
| width: 7px; height: 7px; border-radius: 50%; background: var(--accent); | |
| box-shadow: 0 0 0 0 var(--accent-dim); animation: pulse 2.4s ease-out infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 #f0a86066; } | |
| 70% { box-shadow: 0 0 0 9px #f0a86000; } | |
| 100% { box-shadow: 0 0 0 0 #f0a86000; } | |
| } | |
| @media (prefers-reduced-motion: reduce) { .pulse { animation: none; } } | |
| /* ── nav ───────────────────────────────────────────────────────────── */ | |
| .nav { | |
| position: sticky; top: 0; z-index: 40; | |
| background: color-mix(in srgb, var(--bg) 88%, transparent); | |
| backdrop-filter: blur(10px); | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .nav-in { display: flex; align-items: center; gap: 28px; height: 60px; } | |
| .nav-logo { | |
| font-family: var(--mono); font-weight: 500; color: var(--text); | |
| letter-spacing: -0.02em; margin-right: auto; | |
| } | |
| .nav-logo span { color: var(--accent); } | |
| .nav a:not(.nav-logo):not(.nav-cta) { color: var(--muted); font-size: var(--step--1); } | |
| .nav a:not(.nav-logo):not(.nav-cta):hover { color: var(--text); } | |
| .nav-cta { | |
| font-size: var(--step--1); padding: 7px 15px; border-radius: var(--rad-s); | |
| border: 1px solid var(--accent); color: var(--accent); | |
| } | |
| .nav-cta:hover { background: var(--accent); color: var(--bg); } | |
| .nav-links { display: flex; gap: 22px; align-items: center; } | |
| /* On phones the nav used to collapse to ONLY "Open chat" — the single action | |
| that costs gigabytes — while Docs and everything explanatory vanished. Docs | |
| stays; the heavyweight links are the ones that can go. */ | |
| @media (max-width: 720px) { .nav-links a:not(.nav-cta):not([href="docs.html"]) { display: none; } } | |
| /* ── hero ──────────────────────────────────────────────────────────── */ | |
| .hero { padding: 84px 0 64px; } | |
| .hero h1 { | |
| font-family: var(--display); | |
| font-size: var(--step-3); | |
| font-weight: 400; | |
| line-height: 1.08; | |
| letter-spacing: -0.02em; | |
| margin: 20px 0 0; | |
| text-wrap: balance; | |
| } | |
| .hero h1 em { font-style: italic; color: var(--accent); } | |
| .hero p { | |
| color: var(--muted); max-width: 62ch; margin: 20px 0 0; font-size: var(--step-1); | |
| line-height: 1.6; | |
| } | |
| .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; } | |
| .btn { | |
| font-family: var(--body); font-size: var(--step-0); | |
| padding: 11px 20px; border-radius: var(--rad-s); border: 1px solid var(--border-hi); | |
| color: var(--text); background: transparent; cursor: pointer; | |
| } | |
| .btn:hover { border-color: var(--accent); color: var(--accent); } | |
| .btn-primary { background: var(--accent); border-color: var(--accent); color: #1a1206; font-weight: 500; } | |
| .btn-primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); color: #1a1206; } | |
| /* ── kernel window ─────────────────────────────────────────────────── */ | |
| .kw { | |
| margin-top: 44px; border: 1px solid var(--border); border-radius: var(--rad); | |
| background: var(--surface); overflow: hidden; | |
| } | |
| .kw-bar { | |
| display: flex; align-items: center; gap: 10px; | |
| padding: 0 14px; height: 40px; border-bottom: 1px solid var(--border); | |
| background: var(--surface-2); | |
| } | |
| .kw-dots { display: flex; gap: 6px; margin-right: 6px; } | |
| .kw-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--border-hi); } | |
| .kw-tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; } | |
| .kw-tabs::-webkit-scrollbar { display: none; } | |
| .kw-tab { | |
| font-family: var(--mono); font-size: var(--step--1); color: var(--dim); | |
| background: none; border: 0; padding: 6px 11px; border-radius: var(--rad-s); | |
| cursor: pointer; white-space: nowrap; | |
| } | |
| .kw-tab:hover { color: var(--muted); } | |
| .kw-tab[aria-selected="true"] { color: var(--accent); background: var(--accent-dim); } | |
| .kw-body { overflow-x: auto; } | |
| .kw-body pre { | |
| margin: 0; padding: 20px 22px; | |
| font-family: var(--mono); font-size: var(--step--1); line-height: 1.7; | |
| color: var(--muted); | |
| } | |
| .kw-body pre[hidden] { display: none; } | |
| .kw-foot { | |
| display: flex; justify-content: space-between; align-items: center; gap: 12px; | |
| padding: 10px 16px; border-top: 1px solid var(--border); | |
| font-family: var(--mono); font-size: var(--step--1); color: var(--dim); | |
| flex-wrap: wrap; | |
| } | |
| /* WGSL syntax — one hue family, so the code reads as material rather than | |
| as a rainbow. Comments recede; the accent is spent on identifiers. */ | |
| .t-key { color: #c58bff; } | |
| .t-fn { color: var(--accent-hi); } | |
| .t-num { color: var(--ok); } | |
| .t-str { color: #9fd3ff; } | |
| .t-com { color: var(--dim); font-style: italic; } | |
| .t-attr { color: #7e8aa0; } | |
| .t-type { color: #8fd0ff; } | |
| /* ── capability band ───────────────────────────────────────────────── */ | |
| .band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); | |
| border: 1px solid var(--border); border-radius: var(--rad); overflow: hidden; } | |
| @media (max-width: 840px) { .band { grid-template-columns: repeat(2, 1fr); } } | |
| @media (max-width: 480px) { .band { grid-template-columns: 1fr; } } | |
| .band a { background: var(--surface); padding: 22px; display: block; color: inherit; } | |
| .band a:hover { background: var(--surface-2); } | |
| .band h3 { | |
| font-family: var(--mono); font-size: var(--step--1); text-transform: uppercase; | |
| letter-spacing: 0.08em; color: var(--accent); margin: 0 0 8px; font-weight: 500; | |
| } | |
| .band p { margin: 0; color: var(--muted); font-size: var(--step--1); line-height: 1.6; } | |
| /* ── sections ──────────────────────────────────────────────────────── */ | |
| section { padding: 72px 0; } | |
| .sec-head { margin-bottom: 32px; } | |
| .sec-head h2 { | |
| font-family: var(--display); font-weight: 400; font-size: var(--step-2); | |
| margin: 12px 0 0; letter-spacing: -0.01em; | |
| } | |
| .sec-head p { color: var(--muted); margin: 12px 0 0; max-width: 66ch; } | |
| /* ── model browser ─────────────────────────────────────────────────── */ | |
| /* The container IS the keyboard interface — index.html tells the reader the | |
| arrow keys move between models, and this is the element that must be | |
| focused for that to work. Removing its ring left no way to tell. */ | |
| #model-browser:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } | |
| .mb-stage { display: flex; align-items: center; gap: 8px; } | |
| .mb-arrow { | |
| flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; | |
| background: var(--surface); border: 1px solid var(--border); color: var(--muted); | |
| font-size: 22px; line-height: 1; cursor: pointer; font-family: var(--body); | |
| } | |
| .mb-arrow:hover { border-color: var(--accent); color: var(--accent); } | |
| .mb-slide { | |
| flex: 1 1 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; | |
| align-items: center; min-height: 380px; | |
| border: 1px solid var(--border); border-radius: var(--rad); | |
| background: linear-gradient(180deg, var(--surface-2), var(--surface)); | |
| padding: 28px 32px; | |
| } | |
| @media (max-width: 780px) { | |
| .mb-slide { grid-template-columns: 1fr; text-align: center; min-height: 0; } | |
| .mb-stats { justify-items: center; } | |
| .mb-variants, .mb-info { justify-content: center; align-items: center; } | |
| } | |
| .mb-art { position: relative; padding-bottom: 66px; } | |
| .mb-mascot { display: block; width: 100%; height: 320px; position: relative; z-index: 1; } | |
| @media (max-width: 780px) { .mb-mascot { height: 220px; } } | |
| /* The pedestal: a class-coloured light pool under the figure — the character | |
| stands ON something, which is most of what makes a select screen read as a | |
| stage rather than a card. */ | |
| .mb-pedestal { | |
| position: absolute; left: 50%; bottom: 46px; transform: translateX(-50%); | |
| width: 78%; height: 64px; border-radius: 50%; | |
| background: radial-gradient(ellipse at center, | |
| color-mix(in srgb, var(--cs-accent, var(--accent)) 34%, transparent) 0%, | |
| color-mix(in srgb, var(--cs-accent, var(--accent)) 10%, transparent) 55%, | |
| transparent 72%); | |
| filter: blur(2px); | |
| } | |
| /* Nameplate under the stage, class-coloured keyline. */ | |
| .mb-plate { | |
| position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); | |
| text-align: center; padding: 8px 22px 10px; min-width: 60%; | |
| border: 1px solid color-mix(in srgb, var(--cs-accent, var(--accent)) 45%, var(--border)); | |
| border-radius: 10px; | |
| background: color-mix(in srgb, var(--cs-accent, var(--accent)) 7%, var(--surface)); | |
| } | |
| .mb-panel { | |
| border: 1px solid var(--border); border-radius: 12px; | |
| background: linear-gradient(180deg, var(--surface-2), transparent); | |
| padding: 16px 18px 14px; | |
| } | |
| .mb-row-label { | |
| font-family: var(--mono); font-size: var(--step--1); color: var(--dim); | |
| text-transform: uppercase; letter-spacing: 0.09em; margin: 10px 0 6px; | |
| } | |
| .mb-row-label:first-child { margin-top: 0; } | |
| .mb-info { display: flex; flex-direction: column; gap: 14px; } | |
| .mb-name { font-family: var(--display); font-size: var(--step-2); line-height: 1.1; } | |
| .mb-params { font-family: var(--mono); font-size: var(--step--1); color: var(--dim); margin-top: 2px; } | |
| .mb-variants { display: flex; gap: 6px; flex-wrap: wrap; } | |
| /* Memory builds — the character screen's loadout row. Same pill grammar as | |
| the quantisation picker: a build is a choice about THIS character, and the | |
| selected one re-poses the figure (leaner, streamed experts drifting out). */ | |
| .mb-modes { display: flex; gap: 6px; flex-wrap: wrap; } | |
| .mb-variant { | |
| font-family: var(--mono); font-size: var(--step--1); cursor: pointer; | |
| padding: 5px 12px; border-radius: 99px; | |
| border: 1px solid var(--border-hi); background: transparent; color: var(--muted); | |
| } | |
| .mb-variant:hover { color: var(--text); border-color: var(--accent); } | |
| .mb-variant[aria-selected="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); } | |
| .mb-stats { display: grid; grid-template-columns: repeat(3, auto); gap: 22px; margin: 14px 0 4px; justify-content: start; } | |
| @media (max-width: 780px) { .mb-stats { justify-content: center; } } | |
| /* At 390px the three-column stats row set a ~204px min-content floor which, | |
| plus slide padding and the two 42px arrows, needed ~368px of a 342px | |
| viewport — the body scrolled sideways. Flex-wrap has no min-content floor: | |
| each stat drops to the next line instead of pushing the page. min-width: 0 | |
| on the grid/flex items is what lets the slide actually shrink. */ | |
| @media (max-width: 480px) { | |
| .mb-stats { display: flex; flex-wrap: wrap; gap: 10px 20px; } | |
| .mb-slide { min-width: 0; padding: 20px 18px; } | |
| .mb-art, .mb-info { min-width: 0; } | |
| .mb-arrow { width: 34px; height: 34px; font-size: 18px; } | |
| } | |
| .mb-stats dt { | |
| font-family: var(--mono); font-size: var(--step--1); color: var(--dim); | |
| text-transform: uppercase; letter-spacing: 0.07em; | |
| } | |
| .mb-stats dd { margin: 4px 0 0; font-family: var(--mono); font-size: var(--step-0); color: var(--text); } | |
| .mb-hw { color: var(--dim); font-size: var(--step--1); } | |
| .mb-cached { color: var(--ok); font-size: var(--step--1); margin: 14px 0 0; } | |
| .mb-ram { color: var(--warn); font-size: var(--step--1); margin: 14px 0 0; } | |
| .mb-cta { | |
| align-self: stretch; text-align: center; font-size: var(--step-0); | |
| padding: 0.85rem 1.2rem; | |
| background: var(--cs-accent, var(--accent)); | |
| border-color: var(--cs-accent, var(--accent)); | |
| } | |
| .mb-cta:hover { filter: brightness(1.12); } | |
| @media (max-width: 780px) { .mb-cta { align-self: center; } } | |
| /* The roster rail — party lineup instead of dots. Each slot carries the | |
| character's own snapshotted face (--thumb, painted async); cached models | |
| were snapshotted lit, which is the visual for "unlocked". */ | |
| .mb-dots { display: flex; gap: 10px; justify-content: center; margin-top: 22px; flex-wrap: wrap; } | |
| .mb-dot { | |
| width: 64px; height: 76px; padding: 0 0 4px; cursor: pointer; | |
| border: 1px solid var(--border-hi); border-radius: 10px; | |
| background: | |
| var(--thumb, radial-gradient(circle at 50% 40%, var(--border-hi) 0%, transparent 60%)) | |
| center 2px / 58px 58px no-repeat, | |
| var(--surface); | |
| display: flex; align-items: flex-end; justify-content: center; | |
| transition: border-color 0.15s, transform 0.15s; | |
| } | |
| .mb-dot:hover { border-color: var(--muted); transform: translateY(-2px); } | |
| .mb-dot[aria-selected="true"] { | |
| border-color: var(--cs-accent, var(--accent)); | |
| box-shadow: 0 0 0 1px var(--cs-accent, var(--accent)), | |
| 0 6px 18px color-mix(in srgb, var(--cs-accent, var(--accent)) 25%, transparent); | |
| } | |
| .mb-dot-name { | |
| font-family: var(--mono); font-size: 9px; color: var(--dim); | |
| max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; | |
| } | |
| .mb-dot[aria-selected="true"] .mb-dot-name { color: var(--text); } | |
| @media (max-width: 480px) { .mb-dot { width: 52px; height: 64px; } .mb-dot-name { font-size: 8px; } } | |
| .note { color: var(--muted); font-size: var(--step--1); margin-top: 16px; } | |
| /* ── kernel wall ───────────────────────────────────────────────────── */ | |
| /* Five columns so the ten tiles fill exactly two rows — auto-fill left a | |
| half-empty third row that read as a rendering fault. */ | |
| .wall { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; | |
| background: var(--border); border: 1px solid var(--border); border-radius: var(--rad); | |
| overflow: hidden; } | |
| @media (max-width: 900px) { .wall { grid-template-columns: repeat(3, 1fr); } } | |
| @media (max-width: 560px) { .wall { grid-template-columns: repeat(2, 1fr); } } | |
| .wall a { | |
| background: var(--surface); padding: 16px 14px; color: var(--muted); | |
| font-family: var(--mono); font-size: var(--step--1); display: block; | |
| } | |
| .wall a:hover { background: var(--surface-2); color: var(--accent); } | |
| .wall b { display: block; color: var(--text); font-weight: 500; margin-bottom: 4px; } | |
| .wall a:hover b { color: var(--accent); } | |
| .wall span { color: var(--dim); } | |
| /* ── proof strip ───────────────────────────────────────────────────── */ | |
| .proof { | |
| border: 1px solid var(--border); border-left: 2px solid var(--accent); | |
| border-radius: var(--rad); background: var(--surface); padding: 26px 28px; | |
| } | |
| .proof h2 { font-family: var(--display); font-weight: 400; font-size: var(--step-1); margin: 0; } | |
| .proof p { color: var(--muted); margin: 10px 0 0; max-width: 70ch; } | |
| /* ── footer ────────────────────────────────────────────────────────── */ | |
| footer { border-top: 1px solid var(--border); padding: 56px 0 72px; } | |
| .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; } | |
| @media (max-width: 780px) { .foot-grid { grid-template-columns: 1fr; gap: 28px; } } | |
| footer h4 { | |
| font-family: var(--mono); font-size: var(--step--1); text-transform: uppercase; | |
| letter-spacing: 0.08em; color: var(--dim); margin: 0 0 12px; font-weight: 500; | |
| } | |
| footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } | |
| footer li a { color: var(--muted); font-size: var(--step--1); } | |
| footer li a:hover { color: var(--accent); } | |
| .foot-about { color: var(--muted); font-size: var(--step--1); max-width: 44ch; } | |
| .foot-bottom { | |
| margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--border); | |
| display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; | |
| font-family: var(--mono); font-size: var(--step--1); color: var(--dim); | |
| } | |
| /* ══ THE GAME ENTRANCE ═════════════════════════════════════════════════════ | |
| #models is the site: a full-viewport character select. The chrome is the | |
| circuit-rune asset set in /entrance (bg painting, pedestal ring, corner | |
| brackets, divider) — monochrome SVGs applied through CSS masks so every | |
| ornament tints to the class accent of the model on stage. Data unchanged: | |
| every value is the registry row. */ | |
| #models { padding: 0; } | |
| #models .cs-root { | |
| position: relative; | |
| min-height: 100dvh; | |
| display: grid; | |
| grid-template-columns: minmax(270px, 350px) 1fr minmax(250px, 320px); | |
| grid-template-rows: auto 1fr auto auto; | |
| grid-template-areas: | |
| 'plate plate roster' | |
| 'sheet stage roster' | |
| 'enter enter roster' | |
| 'note note note'; | |
| gap: 10px 24px; | |
| padding: calc(var(--nav-h, 64px) + 14px) 30px 24px; | |
| background: | |
| radial-gradient(ellipse at 50% 92%, | |
| color-mix(in srgb, var(--cs-accent, var(--accent)) 13%, transparent) 0%, | |
| transparent 52%), | |
| url('/entrance/bg.svg') center / cover no-repeat, | |
| var(--bg); | |
| overflow: hidden; | |
| } | |
| /* Atmosphere: two fog bands drifting opposite ways, and a dust field. All | |
| accent-neutral; the accent lives in the radial wash above. */ | |
| .cs-fog { position: absolute; inset: 0; pointer-events: none; z-index: 0; } | |
| .cs-fog i { | |
| position: absolute; width: 90vw; height: 34vh; border-radius: 50%; | |
| background: radial-gradient(ellipse at center, #18223a55 0%, transparent 65%); | |
| filter: blur(30px); | |
| } | |
| .cs-fog i:nth-child(1) { left: -20vw; bottom: 4vh; animation: fogA 46s ease-in-out infinite alternate; } | |
| .cs-fog i:nth-child(2) { right: -25vw; bottom: 12vh; animation: fogB 58s ease-in-out infinite alternate; } | |
| @keyframes fogA { from { transform: translateX(0); } to { transform: translateX(9vw); } } | |
| @keyframes fogB { from { transform: translateX(0); } to { transform: translateX(-11vw); } } | |
| .cs-dust { | |
| position: absolute; inset: -10% 0 0 0; pointer-events: none; z-index: 0; opacity: 0.5; | |
| background-image: | |
| radial-gradient(1.2px 1.2px at 12% 30%, #cfe0ff88 50%, transparent 51%), | |
| radial-gradient(1px 1px at 34% 68%, #cfe0ff66 50%, transparent 51%), | |
| radial-gradient(1.4px 1.4px at 58% 22%, #cfe0ff77 50%, transparent 51%), | |
| radial-gradient(1px 1px at 71% 55%, #cfe0ff55 50%, transparent 51%), | |
| radial-gradient(1.2px 1.2px at 86% 34%, #cfe0ff77 50%, transparent 51%), | |
| radial-gradient(1px 1px at 45% 84%, #cfe0ff44 50%, transparent 51%); | |
| background-size: 900px 700px; | |
| animation: dust 90s linear infinite; | |
| } | |
| @keyframes dust { from { background-position: 0 0; } to { background-position: -900px 350px; } } | |
| /* Nameplate: display face over an ornamental divider. */ | |
| #models .mb-plate { | |
| grid-area: plate; position: relative; z-index: 1; justify-self: center; | |
| text-align: center; margin-top: 4px; padding: 0 26px 14px; | |
| border: 0; background: none; | |
| } | |
| #models .mb-name { | |
| font-family: var(--display); font-size: clamp(1.9rem, 3.6vw, 2.9rem); | |
| line-height: 1.05; text-shadow: 0 2px 24px #000c; | |
| } | |
| #models .mb-params { | |
| font-family: var(--mono); font-size: var(--step--1); letter-spacing: 0.14em; | |
| text-transform: uppercase; margin-top: 6px; | |
| color: color-mix(in srgb, var(--cs-accent, var(--accent)) 75%, var(--text)); | |
| } | |
| #models .mb-plate::after { | |
| content: ''; display: block; height: 16px; margin: 10px auto 0; width: min(360px, 80%); | |
| background: color-mix(in srgb, var(--cs-accent, var(--accent)) 80%, #fff); | |
| -webkit-mask: url('/entrance/divider.svg') center / contain no-repeat; | |
| mask: url('/entrance/divider.svg') center / contain no-repeat; | |
| } | |
| /* The stage. */ | |
| #models .mb-stage { grid-area: stage; display: flex; align-items: stretch; gap: 4px; min-height: 0; position: relative; z-index: 1; } | |
| #models .mb-art { flex: 1; padding: 0; display: flex; align-items: center; justify-content: center; position: relative; } | |
| #models .mb-mascot { height: min(54dvh, 500px); max-width: 100%; position: relative; z-index: 2; } | |
| #models .mb-pedestal { | |
| position: absolute; left: 50%; bottom: 2%; transform: translateX(-50%); | |
| width: min(560px, 86%); height: 150px; border-radius: 0; filter: none; | |
| background: radial-gradient(ellipse at center, | |
| color-mix(in srgb, var(--cs-accent, var(--accent)) 30%, transparent) 0%, | |
| color-mix(in srgb, var(--cs-accent, var(--accent)) 8%, transparent) 52%, | |
| transparent 70%); | |
| } | |
| #models .mb-pedestal::after { | |
| content: ''; position: absolute; inset: 0; | |
| background: color-mix(in srgb, var(--cs-accent, var(--accent)) 85%, #fff); | |
| -webkit-mask: url('/entrance/ring.svg') center bottom / 100% auto no-repeat; | |
| mask: url('/entrance/ring.svg') center bottom / 100% auto no-repeat; | |
| animation: ringPulse 5s ease-in-out infinite; | |
| } | |
| @keyframes ringPulse { 0%, 100% { opacity: 0.85; } 50% { opacity: 0.5; } } | |
| #models .mb-arrow { | |
| align-self: center; width: 52px; height: 76px; border-radius: 12px; | |
| background: transparent; border: 1px solid transparent; font-size: 34px; | |
| color: var(--dim); z-index: 2; | |
| } | |
| #models .mb-arrow:hover { color: var(--cs-accent, var(--accent)); border-color: var(--border); background: #0b101cbb; } | |
| /* The sheet: glass plate with rune corners. */ | |
| #models .mb-info { grid-area: sheet; align-self: center; z-index: 1; } | |
| #models .mb-panel { | |
| position: relative; border: 1px solid color-mix(in srgb, var(--cs-accent, var(--accent)) 22%, var(--border)); | |
| border-radius: 4px; padding: 20px 20px 16px; | |
| background: linear-gradient(180deg, #0c1220ee, #090e18e6); | |
| box-shadow: inset 0 1px 0 #ffffff0a, 0 18px 50px #0009; | |
| backdrop-filter: blur(4px); | |
| } | |
| #models .mb-panel::before, #models .mb-panel::after { | |
| content: ''; position: absolute; width: 40px; height: 40px; | |
| background: color-mix(in srgb, var(--cs-accent, var(--accent)) 85%, #fff); | |
| -webkit-mask: url('/entrance/corner.svg') 0 0 / contain no-repeat; | |
| mask: url('/entrance/corner.svg') 0 0 / contain no-repeat; | |
| } | |
| #models .mb-panel::before { top: -5px; left: -5px; } | |
| #models .mb-panel::after { bottom: -5px; right: -5px; transform: rotate(180deg); } | |
| #models .mb-row-label { | |
| font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; | |
| color: color-mix(in srgb, var(--cs-accent, var(--accent)) 55%, var(--dim)); | |
| text-transform: uppercase; margin: 14px 0 7px; | |
| } | |
| #models .mb-row-label:first-child { margin-top: 0; } | |
| #models .mb-stats { display: block; margin: 12px 0 2px; } | |
| #models .mb-stats > div { | |
| display: flex; justify-content: space-between; align-items: baseline; | |
| padding: 6px 2px; border-bottom: 1px solid #ffffff0d; | |
| } | |
| #models .mb-stats dt { | |
| font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; color: var(--dim); | |
| } | |
| #models .mb-stats dd { | |
| margin: 0; font-family: var(--mono); font-size: var(--step-0); | |
| color: color-mix(in srgb, var(--cs-accent, var(--accent)) 45%, var(--text)); | |
| } | |
| #models .mb-variant { | |
| border-radius: 3px; border-color: #ffffff1c; background: #ffffff07; | |
| } | |
| #models .mb-variant[aria-selected="true"] { | |
| border-color: var(--cs-accent, var(--accent)); | |
| background: color-mix(in srgb, var(--cs-accent, var(--accent)) 18%, transparent); | |
| color: color-mix(in srgb, var(--cs-accent, var(--accent)) 70%, #fff); | |
| } | |
| #models .mb-cached { color: var(--ok); font-size: var(--step--1); margin: 10px 0 0; } | |
| #models .mb-ram { font-size: var(--step--1); margin: 8px 0 0; } | |
| /* Roster rail. */ | |
| #models .cs-roster-head { | |
| grid-area: roster; align-self: start; z-index: 1; | |
| font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.18em; | |
| text-transform: uppercase; color: var(--dim); | |
| padding: 2px 0 0 16px; height: 20px; | |
| } | |
| #models .mb-roster { | |
| grid-area: roster; z-index: 1; margin: 26px 0 0; padding: 0 4px 4px 14px; | |
| display: flex; flex-direction: column; gap: 8px; justify-content: flex-start; | |
| overflow-y: auto; border-left: 1px solid #ffffff12; | |
| scrollbar-width: thin; scrollbar-color: var(--border-hi) transparent; | |
| } | |
| #models .mb-dot { | |
| width: 100%; height: auto; min-height: 64px; padding: 7px 10px; | |
| display: flex; flex-direction: row; align-items: center; gap: 11px; | |
| text-align: left; border-radius: 4px; cursor: pointer; | |
| border: 1px solid #ffffff14; | |
| background: linear-gradient(180deg, #ffffff08, transparent 60%), #0a0f1acc; | |
| transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; | |
| position: relative; | |
| } | |
| #models .mb-dot:hover { border-color: var(--muted); transform: translateX(-2px); } | |
| #models .mb-dot[aria-selected="true"] { | |
| border-color: var(--cs-accent, var(--accent)); | |
| box-shadow: inset 0 0 0 1px var(--cs-accent, var(--accent)), | |
| 0 0 22px color-mix(in srgb, var(--cs-accent, var(--accent)) 30%, transparent); | |
| } | |
| #models .mb-dot[data-cached]::after { | |
| content: 'READY'; position: absolute; top: 5px; right: 7px; | |
| font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.12em; | |
| color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 55%, transparent); | |
| border-radius: 3px; padding: 1px 4px; | |
| } | |
| .mb-dot-face { | |
| flex: 0 0 46px; height: 46px; border-radius: 4px; | |
| background: var(--thumb, radial-gradient(circle at 50% 40%, var(--border-hi) 0%, transparent 60%)) | |
| center / cover no-repeat, #0d1322; | |
| border: 1px solid #ffffff10; | |
| } | |
| .mb-dot-text { display: flex; flex-direction: column; min-width: 0; gap: 1px; } | |
| .mb-dot-text b { font-size: 0.8rem; font-weight: 600; color: var(--text); | |
| white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } | |
| .mb-dot-text i { font-style: normal; font-family: var(--mono); font-size: 0.6rem; | |
| color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } | |
| /* ENTER. */ | |
| #models .cs-enter { grid-area: enter; display: flex; justify-content: center; padding: 4px 0 2px; z-index: 1; } | |
| #models .cs-enter .mb-cta { | |
| min-width: 340px; text-align: center; letter-spacing: 0.14em; text-transform: uppercase; | |
| font-weight: 700; font-size: var(--step-0); padding: 0.95rem 1.4rem; | |
| border-radius: 4px; position: relative; overflow: hidden; | |
| color: #0b0d10; | |
| background: linear-gradient(180deg, | |
| color-mix(in srgb, var(--cs-accent, var(--accent)) 80%, #fff) 0%, | |
| var(--cs-accent, var(--accent)) 55%, | |
| color-mix(in srgb, var(--cs-accent, var(--accent)) 70%, #000) 100%); | |
| border: 1px solid color-mix(in srgb, var(--cs-accent, var(--accent)) 60%, #fff); | |
| box-shadow: 0 10px 34px color-mix(in srgb, var(--cs-accent, var(--accent)) 40%, transparent), | |
| inset 0 1px 0 #ffffff66; | |
| } | |
| #models .cs-enter .mb-cta:hover { filter: brightness(1.1); } | |
| #models .cs-enter .mb-cta::after { | |
| content: ''; position: absolute; top: 0; bottom: 0; width: 40%; | |
| left: -60%; transform: skewX(-20deg); | |
| background: linear-gradient(90deg, transparent, #ffffff55, transparent); | |
| transition: left 0.5s ease; | |
| } | |
| #models .cs-enter .mb-cta:hover::after { left: 130%; } | |
| #models .cs-note { grid-area: note; text-align: center; z-index: 1; } | |
| /* The logo opening. */ | |
| .cs-splash { | |
| position: absolute; inset: 0; z-index: 30; | |
| display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; | |
| background: radial-gradient(ellipse at 50% 42%, #0d1424 0%, var(--bg) 70%); | |
| animation: csSplashOut 2.6s ease forwards; | |
| } | |
| .cs-emblem { | |
| width: 84px; height: 84px; color: var(--accent); | |
| animation: csEmblem 1.4s cubic-bezier(0.16, 1, 0.3, 1) both; | |
| } | |
| .cs-logo { | |
| font-family: var(--display); font-size: clamp(3rem, 9vw, 6.5rem); color: var(--text); | |
| animation: csLogoIn 1.6s cubic-bezier(0.16, 1, 0.3, 1) both; | |
| } | |
| .cs-logo b { color: var(--accent); } | |
| .cs-sub { | |
| font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.22em; | |
| text-transform: uppercase; color: var(--dim); | |
| animation: csSub 1s ease 0.7s both; | |
| } | |
| @keyframes csEmblem { | |
| 0% { opacity: 0; transform: rotate(-90deg) scale(0.6); } | |
| 100% { opacity: 1; transform: rotate(0deg) scale(1); } | |
| } | |
| @keyframes csLogoIn { | |
| 0% { opacity: 0; transform: scale(1.22); letter-spacing: 0.16em; filter: blur(12px); } | |
| 55% { opacity: 1; filter: blur(0); } | |
| 100% { opacity: 1; transform: scale(1); letter-spacing: 0.01em; } | |
| } | |
| @keyframes csSub { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } | |
| @keyframes csSplashOut { 0%, 78% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } } | |
| @media (prefers-reduced-motion: reduce) { | |
| .cs-fog i, .cs-dust, #models .mb-pedestal::after { animation: none; } | |
| } | |
| /* Phones: stage first, roster as a strip, sheet, enter. */ | |
| @media (max-width: 900px) { | |
| #models .cs-root { | |
| grid-template-columns: 1fr; | |
| grid-template-areas: 'plate' 'stage' 'roster' 'sheet' 'enter' 'note'; | |
| padding: calc(var(--nav-h, 64px) + 8px) 14px 18px; | |
| gap: 8px; | |
| } | |
| #models .mb-mascot { height: min(36dvh, 300px); } | |
| #models .cs-roster-head { display: none; } | |
| #models .mb-roster { | |
| flex-direction: row; overflow-x: auto; overflow-y: hidden; margin-top: 0; | |
| border-left: 0; border-top: 1px solid #ffffff12; padding: 10px 2px 4px; | |
| } | |
| #models .mb-dot { width: auto; min-width: 168px; flex: 0 0 auto; } | |
| #models .cs-enter .mb-cta { min-width: 0; width: 100%; } | |
| } | |
| /* ══ ROUND TWO: depth, transitions, identity ═══════════════════════════════ */ | |
| /* The floor reflection — Chromium's box-reflect, which is the browser class | |
| the engine requires anyway. Elsewhere it simply does not draw. */ | |
| #models .mb-mascot { | |
| -webkit-box-reflect: below -6px linear-gradient(transparent 62%, rgba(255,255,255,0.10)); | |
| } | |
| /* Selection transition. go() re-arms .cs-in, so switching characters flashes | |
| the pedestal and walks the plate and sheet back in — selection FEELS like | |
| selection. Names are transform/opacity only; nothing relayouts. */ | |
| #models .mb-art.cs-in .mb-pedestal::after { animation: ringFlash 0.7s ease-out, ringPulse 5s ease-in-out 0.7s infinite; } | |
| @keyframes ringFlash { | |
| 0% { opacity: 1; transform: scale(0.92); filter: brightness(2.2); } | |
| 100% { opacity: 0.85; transform: scale(1); filter: brightness(1); } | |
| } | |
| #models .mb-art.cs-in .mb-mascot { animation: charIn 0.5s cubic-bezier(0.2, 1.4, 0.4, 1); } | |
| @keyframes charIn { | |
| 0% { opacity: 0; transform: translateY(14px) scale(0.965); } | |
| 100% { opacity: 1; transform: translateY(0) scale(1); } | |
| } | |
| #models .mb-plate.cs-in .mb-name { animation: plateIn 0.45s ease both; } | |
| #models .mb-plate.cs-in .mb-params { animation: plateIn 0.45s ease 0.08s both; } | |
| @keyframes plateIn { | |
| 0% { opacity: 0; transform: translateY(-8px); letter-spacing: 0.08em; } | |
| 100% { opacity: 1; transform: translateY(0); } | |
| } | |
| #models .mb-panel.cs-in > * { animation: rowIn 0.4s ease both; } | |
| #models .mb-panel.cs-in > *:nth-child(2) { animation-delay: 0.05s; } | |
| #models .mb-panel.cs-in > *:nth-child(3) { animation-delay: 0.10s; } | |
| #models .mb-panel.cs-in > *:nth-child(4) { animation-delay: 0.15s; } | |
| #models .mb-panel.cs-in > *:nth-child(5) { animation-delay: 0.20s; } | |
| #models .mb-panel.cs-in > *:nth-child(n+6) { animation-delay: 0.25s; } | |
| @keyframes rowIn { | |
| 0% { opacity: 0; transform: translateX(-10px); } | |
| 100% { opacity: 1; transform: translateX(0); } | |
| } | |
| /* Class sigil beside the class line. */ | |
| #models .mb-params { display: inline-flex; align-items: center; gap: 8px; justify-content: center; } | |
| .mb-sigil { display: inline-flex; width: 16px; height: 16px; } | |
| .mb-sigil svg { width: 100%; height: 100%; } | |
| /* Realm corners: tiny mono statements, both literally true. */ | |
| .cs-corner { | |
| position: absolute; bottom: 10px; z-index: 1; | |
| font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.14em; | |
| text-transform: uppercase; color: color-mix(in srgb, var(--dim) 70%, transparent); | |
| pointer-events: none; | |
| } | |
| .cs-corner-l { left: 16px; } | |
| .cs-corner-r { right: 16px; } | |
| /* READY glint: a light pass over the tag every few seconds — unlocked should | |
| glimmer. Masked to the tag only. */ | |
| #models .mb-dot[data-cached]::after { overflow: hidden; } | |
| #models .mb-dot[data-cached] { isolation: isolate; } | |
| #models .mb-dot[data-cached]::before { | |
| content: ''; position: absolute; top: 3px; right: 5px; width: 44px; height: 14px; | |
| background: linear-gradient(110deg, transparent 30%, #ffffff2e 50%, transparent 70%) no-repeat; | |
| background-size: 200% 100%; | |
| animation: readyGlint 4.5s ease-in-out infinite; | |
| pointer-events: none; z-index: 1; | |
| } | |
| @keyframes readyGlint { | |
| 0%, 72% { background-position: 180% 0; } | |
| 92%, 100% { background-position: -80% 0; } | |
| } | |
| /* Enter: charge on hover, visible keyboard focus. */ | |
| #models .cs-enter .mb-cta { transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease; } | |
| #models .cs-enter .mb-cta:hover { | |
| transform: translateY(-1px) scale(1.015); | |
| box-shadow: 0 14px 44px color-mix(in srgb, var(--cs-accent, var(--accent)) 55%, transparent), | |
| inset 0 1px 0 #ffffff77; | |
| } | |
| #models .cs-enter .mb-cta:focus-visible { | |
| outline: 2px solid #fff; outline-offset: 3px; | |
| } | |
| /* Parallax layers move on transform — give them will-change and keep the | |
| fog's own drift composed with the pointer offset via nesting (the <i> | |
| children animate, the container translates). */ | |
| .cs-fog, .cs-dust, #models .mb-art { will-change: transform; transition: transform 0.3s ease-out; } | |
| @media (prefers-reduced-motion: reduce) { | |
| #models .mb-art.cs-in .mb-mascot, | |
| #models .mb-plate.cs-in .mb-name, #models .mb-plate.cs-in .mb-params, | |
| #models .mb-panel.cs-in > *, #models .mb-dot[data-cached]::before { animation: none; } | |
| } | |
| /* ══ ROUNDS 3-6: the aura, the juice, the frame ════════════════════════════ */ | |
| /* The aura: motes of the class light rising off the pedestal, their pace set | |
| by the model's measured rate (--cs-tempo — the same number the mascot's | |
| idle clock reads). A fast little model boils; a 35B smoulders. */ | |
| .cs-aura { position: absolute; left: 50%; bottom: 8%; width: min(480px, 70%); height: 60%; | |
| transform: translateX(-50%); pointer-events: none; z-index: 1; } | |
| .cs-aura i { | |
| position: absolute; bottom: 0; width: 4px; height: 4px; border-radius: 50%; | |
| background: color-mix(in srgb, var(--cs-accent, var(--accent)) 85%, #fff); | |
| opacity: 0; | |
| animation: mote calc(5.2s / var(--cs-tempo, 1)) ease-in infinite; | |
| } | |
| .cs-aura i:nth-child(1) { left: 6%; animation-delay: 0.0s; } | |
| .cs-aura i:nth-child(2) { left: 16%; animation-delay: 1.1s; width: 3px; height: 3px; } | |
| .cs-aura i:nth-child(3) { left: 27%; animation-delay: 2.3s; } | |
| .cs-aura i:nth-child(4) { left: 38%; animation-delay: 0.6s; width: 5px; height: 5px; } | |
| .cs-aura i:nth-child(5) { left: 50%; animation-delay: 1.7s; width: 3px; height: 3px; } | |
| .cs-aura i:nth-child(6) { left: 61%; animation-delay: 2.9s; } | |
| .cs-aura i:nth-child(7) { left: 70%; animation-delay: 0.3s; } | |
| .cs-aura i:nth-child(8) { left: 80%; animation-delay: 1.9s; width: 3px; height: 3px; } | |
| .cs-aura i:nth-child(9) { left: 89%; animation-delay: 2.6s; } | |
| .cs-aura i:nth-child(10) { left: 95%; animation-delay: 1.3s; width: 5px; height: 5px; } | |
| @keyframes mote { | |
| 0% { opacity: 0; transform: translateY(0) scale(1); } | |
| 12% { opacity: 0.9; } | |
| 100% { opacity: 0; transform: translateY(-46vh) scale(0.4); } | |
| } | |
| /* ARMED: a cached character's circle runs a rotating highlight — the same | |
| OPFS truth as the READY tag, drawn as ceremony. Conic light clipped by the | |
| very ring mask. */ | |
| #models .mb-art[data-armed] .mb-pedestal::before { | |
| content: ''; position: absolute; inset: 0; | |
| background: conic-gradient(from 0deg, | |
| transparent 0deg, transparent 290deg, | |
| color-mix(in srgb, var(--cs-accent, var(--accent)) 90%, #fff) 330deg, | |
| transparent 360deg); | |
| -webkit-mask: url('/entrance/ring.svg') center bottom / 100% auto no-repeat; | |
| mask: url('/entrance/ring.svg') center bottom / 100% auto no-repeat; | |
| animation: armedSpin 6s linear infinite; | |
| } | |
| @keyframes armedSpin { to { transform: rotate(360deg); } } | |
| /* Lore under the nameplate: computed from the spec, styled as inscription. */ | |
| .cs-lore { | |
| margin-top: 8px; font-size: 0.8rem; font-style: italic; | |
| color: color-mix(in srgb, var(--text) 62%, transparent); | |
| letter-spacing: 0.02em; | |
| } | |
| /* Juice: chips stamp when chosen, roster cards press, ENTER presses. */ | |
| #models .mb-variant[aria-selected="true"] { animation: stamp 0.22s ease; } | |
| @keyframes stamp { 0% { transform: scale(1.08); } 100% { transform: scale(1); } } | |
| #models .mb-dot:active { transform: translateX(-2px) scale(0.98); } | |
| #models .cs-enter .mb-cta:active { transform: translateY(1px) scale(0.995); box-shadow: 0 6px 20px color-mix(in srgb, var(--cs-accent, var(--accent)) 35%, transparent); } | |
| /* The cinematic frame: a breath of dark at the top and bottom edges, so the | |
| scene reads composed rather than cropped. */ | |
| #models .cs-root::before, #models .cs-root::after { | |
| content: ''; position: absolute; left: 0; right: 0; height: 90px; | |
| pointer-events: none; z-index: 2; | |
| } | |
| #models .cs-root::before { top: 0; background: linear-gradient(180deg, #05070dcc, transparent); } | |
| #models .cs-root::after { bottom: 0; background: linear-gradient(0deg, #05070d99, transparent); } | |
| /* Screen-reader announcer. */ | |
| .cs-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } | |
| @media (prefers-reduced-motion: reduce) { | |
| .cs-aura i, #models .mb-art[data-armed] .mb-pedestal::before, | |
| #models .mb-variant[aria-selected="true"] { animation: none; } | |
| .cs-aura i { opacity: 0.35; transform: translateY(-8vh); } | |
| } | |
| /* ══ ROUND 7: THE ENVIRONMENT ══════════════════════════════════════════════ | |
| The realm gains architecture. Silhouette layers between backdrop and | |
| stage, each on its own parallax rate: obelisk skyline far, rune columns | |
| near, the character floating between them under an aerial ring. */ | |
| .cs-spires { | |
| position: absolute; left: -3%; right: -3%; bottom: 0; height: 42vh; | |
| background: url('/entrance/spires.svg') bottom center / cover no-repeat; | |
| opacity: 0.85; pointer-events: none; z-index: 0; | |
| } | |
| .cs-col { | |
| position: absolute; bottom: -2vh; width: min(240px, 16vw); height: 92vh; | |
| background: url('/entrance/column.svg') bottom / contain no-repeat; | |
| pointer-events: none; z-index: 1; opacity: 0.9; | |
| } | |
| .cs-col-l { left: max(6px, 2vw); } | |
| .cs-col-r { right: max(6px, 2vw); transform: scaleX(-1); } | |
| /* The aerial ring: a great slow wheel behind the character, in the class | |
| light at whisper opacity. The armed floor ring is ceremony; this is | |
| architecture. */ | |
| .cs-backring { | |
| position: absolute; left: 50%; top: 46%; width: min(64dvh, 620px); aspect-ratio: 1; | |
| translate: -50% -50%; | |
| background: color-mix(in srgb, var(--cs-accent, var(--accent)) 70%, #fff); | |
| -webkit-mask: url('/entrance/backring.svg') center / contain no-repeat; | |
| mask: url('/entrance/backring.svg') center / contain no-repeat; | |
| opacity: 0.14; z-index: 0; | |
| animation: backringSpin 80s linear infinite; | |
| } | |
| @keyframes backringSpin { to { rotate: 360deg; } } | |
| /* Nameplate banner wings behind the name. */ | |
| #models .mb-plate { padding-top: 10px; } | |
| .cs-banner { | |
| position: absolute; left: 50%; top: 16px; transform: translateX(-50%); | |
| width: min(640px, 92vw); height: 80px; pointer-events: none; | |
| background: color-mix(in srgb, var(--cs-accent, var(--accent)) 65%, #fff); | |
| -webkit-mask: url('/entrance/banner.svg') center / contain no-repeat; | |
| mask: url('/entrance/banner.svg') center / contain no-repeat; | |
| opacity: 0.5; z-index: -1; | |
| } | |
| /* Portrait frames on the roster faces. */ | |
| .mb-dot-face { position: relative; } | |
| .mb-dot-face::after { | |
| content: ''; position: absolute; inset: -3px; | |
| background: color-mix(in srgb, var(--cs-accent, var(--accent)) 55%, #9fb4d8); | |
| -webkit-mask: url('/entrance/pframe.svg') center / contain no-repeat; | |
| mask: url('/entrance/pframe.svg') center / contain no-repeat; | |
| opacity: 0.35; transition: opacity 0.15s; | |
| } | |
| #models .mb-dot[aria-selected="true"] .mb-dot-face::after, | |
| #models .mb-dot:hover .mb-dot-face::after { opacity: 0.9; } | |
| /* The cinematic edges upgraded: the dark breath now carries the rune border | |
| strip along its inner line. */ | |
| #models .cs-root::before { | |
| background: | |
| linear-gradient(180deg, #05070dcc, transparent), | |
| linear-gradient(180deg, transparent 76px, transparent 76px); | |
| } | |
| #models .cs-root > .cs-edge-t, #models .cs-root > .cs-edge-b { display: none; } | |
| #models .cs-root::after { | |
| background: linear-gradient(0deg, #05070d99, transparent); | |
| } | |
| .cs-borderline-t, .cs-borderline-b { | |
| position: absolute; left: 8%; right: 8%; height: 12px; z-index: 2; pointer-events: none; | |
| background: color-mix(in srgb, var(--cs-accent, var(--accent)) 40%, #6c7f9f); | |
| -webkit-mask: url('/entrance/border.svg') center / auto 100% repeat-x; | |
| mask: url('/entrance/border.svg') center / auto 100% repeat-x; | |
| opacity: 0.4; | |
| } | |
| .cs-borderline-t { top: calc(var(--nav-h, 64px) + 2px); } | |
| .cs-borderline-b { bottom: 8px; } | |
| /* The splash's ring burst: the aerial ring blooming open behind the emblem. */ | |
| .cs-splash { position: absolute; } | |
| .cs-splash-ring { | |
| position: absolute; width: 420px; aspect-ratio: 1; | |
| background: var(--accent); | |
| -webkit-mask: url('/entrance/backring.svg') center / contain no-repeat; | |
| mask: url('/entrance/backring.svg') center / contain no-repeat; | |
| animation: splashRing 2.2s cubic-bezier(0.16, 1, 0.3, 1) both; | |
| opacity: 0.22; | |
| } | |
| @keyframes splashRing { | |
| 0% { transform: scale(0.4) rotate(-40deg); opacity: 0; } | |
| 40% { opacity: 0.3; } | |
| 100% { transform: scale(1.05) rotate(8deg); opacity: 0.18; } | |
| } | |
| /* The realm's cursor: a small trace-diamond. Entrance only. */ | |
| #models .cs-root, #models .cs-root a, #models .cs-root button { | |
| cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22"><path d="M11 1 L21 11 L11 21 L1 11 Z" fill="none" stroke="white" stroke-width="2"/><path d="M11 7 L15 11 L11 15 L7 11 Z" fill="white"/></svg>') 11 11, auto; | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .cs-backring, .cs-splash-ring { animation: none; } | |
| } | |
| @media (max-width: 900px) { | |
| .cs-col { display: none; } | |
| .cs-spires { height: 26vh; opacity: 0.6; } | |
| .cs-backring { width: min(78vw, 380px); top: 40%; } | |
| .cs-banner { height: 56px; opacity: 0.4; } | |
| .cs-borderline-t, .cs-borderline-b { display: none; } | |
| } | |
| /* ══ ROUND 8: THE ALIGNMENT PASS ═══════════════════════════════════════════ | |
| One rhythm: an 8px gutter system, a hard max-width so ultrawide screens | |
| frame the scene instead of stretching it, the sheet and roster hung from | |
| the same top line, and the enter slab locked to the stage's centre line. */ | |
| #models .cs-root { | |
| --cs-gutter: 24px; | |
| max-width: 1720px; margin: 0 auto; | |
| grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) minmax(260px, 310px); | |
| gap: 8px var(--cs-gutter); | |
| padding: calc(var(--nav-h, 64px) + 12px) max(28px, 4vw) 22px; | |
| } | |
| /* Sheet and roster share a top line: both start where the stage starts. */ | |
| #models .mb-info { align-self: start; padding-top: 34px; } | |
| #models .cs-roster-head { padding-top: 8px; height: 26px; } | |
| #models .mb-roster { margin-top: 34px; } | |
| /* The plate is the one centred element; give it a fixed rhythm below. */ | |
| #models .mb-plate { margin: 2px 0 0; padding-bottom: 6px; } | |
| /* Enter hangs centred under the stage column only, not the whole row — | |
| optically aligned with the character above it. */ | |
| #models .cs-enter { grid-column: 2; justify-self: center; } | |
| #models .cs-corner-l { left: max(28px, 4vw); } | |
| #models .cs-corner-r { right: max(28px, 4vw); } | |
| /* Border strips share the content inset. */ | |
| .cs-borderline-t, .cs-borderline-b { left: max(28px, 4vw); right: max(28px, 4vw); } | |
| /* Stat rows: value column right-aligned on a shared edge, tabular digits. */ | |
| #models .mb-stats dd { font-variant-numeric: tabular-nums; text-align: right; } | |
| #models .mb-stats dt { padding-right: 12px; } | |
| /* Chips wrap on the same 8px rhythm. */ | |
| #models .mb-variants, #models .mb-modes { gap: 8px; } | |
| @media (max-width: 900px) { | |
| #models .cs-enter { grid-column: 1; justify-self: stretch; } | |
| #models .mb-info { padding-top: 0; } | |
| #models .mb-roster { margin-top: 0; } | |
| } | |
| /* ══ ROUND 15: THE PARTY READS AS CLASSES ══ */ | |
| #models .mb-dot { padding-right: 26px; } | |
| .mb-dot-sigil { | |
| position: absolute; right: 7px; bottom: 6px; width: 13px; height: 13px; opacity: 0.75; | |
| } | |
| .mb-dot-sigil svg { width: 100%; height: 100%; } | |
| /* ══ ROUND 17: THE SPLASH YIELDS ══ */ | |
| .cs-splash { cursor: pointer; } | |
| /* ══ ROUND 9: ATTENTION ══ */ | |
| #models .mb-art { transition: rotate 0.4s ease, transform 0.3s ease-out; perspective: 900px; } | |
| /* ══ ROUND 11: THE SELECTION WIPE ══ A sheet of the class light crossing the | |
| stage on every selection — the cut between characters reads as a cut. */ | |
| .cs-wipe { | |
| position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; | |
| background: linear-gradient(100deg, transparent 30%, | |
| color-mix(in srgb, var(--cs-accent, var(--accent)) 26%, transparent) 50%, | |
| transparent 70%); | |
| transform: translateX(-100%); | |
| } | |
| .cs-wipe.cs-go { animation: csWipe 0.55s ease-out; } | |
| @keyframes csWipe { | |
| 0% { opacity: 1; transform: translateX(-100%); } | |
| 100% { opacity: 1; transform: translateX(100%); } | |
| } | |
| /* ══ ROUND 16: THE ENGAGE ══ Clicking ENTER flashes the realm in the class | |
| light and falls to black before the chat page takes over — an exit that | |
| answers the entrance. Reduced motion (and modified clicks) skip it. */ | |
| .cs-engage { | |
| position: absolute; inset: 0; z-index: 40; pointer-events: none; opacity: 0; | |
| background: | |
| radial-gradient(ellipse at 50% 60%, | |
| color-mix(in srgb, var(--cs-accent, var(--accent)) 45%, transparent) 0%, transparent 60%), | |
| #05070d; | |
| } | |
| .cs-engage.cs-go { animation: csEngage 0.34s ease-in forwards; } | |
| @keyframes csEngage { | |
| 0% { opacity: 0; } | |
| 45% { opacity: 0.65; } | |
| 100% { opacity: 1; } | |
| } | |
| @media (prefers-reduced-motion: reduce) { .cs-wipe.cs-go, .cs-engage.cs-go { animation: none; } } | |
| /* ══ ROUND 10: STAT ICONOGRAPHY + HONEST BARS ══ Icons name the stat; the | |
| bars are within-character fractions only (context: shipped ceiling over | |
| the checkpoint's own max; memory: the build's residency) — never a | |
| cross-model ranking. */ | |
| .mb-stat-ico { display: inline-flex; width: 12px; height: 12px; margin-right: 7px; | |
| vertical-align: -1px; color: color-mix(in srgb, var(--cs-accent, var(--accent)) 60%, var(--dim)); } | |
| .mb-stat-ico svg { width: 100%; height: 100%; } | |
| .mb-bar { display: block; height: 3px; margin-top: 5px; border-radius: 2px; | |
| background: #ffffff12; overflow: hidden; } | |
| .mb-bar i { display: block; height: 100%; border-radius: 2px; | |
| background: linear-gradient(90deg, | |
| color-mix(in srgb, var(--cs-accent, var(--accent)) 55%, transparent), | |
| var(--cs-accent, var(--accent))); | |
| transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1); } | |
| #models .mb-stats dd { min-width: 128px; } | |
| /* ══ ROUND 13: THE LOADOUT GAUGE ══ Filled diamonds for what the build | |
| keeps, hollow for what it streams — ordinal, not a measurement. */ | |
| .mb-gauge { font-size: 0.6rem; letter-spacing: 0.08em; margin-right: 7px; | |
| color: color-mix(in srgb, var(--cs-accent, var(--accent)) 70%, var(--dim)); } | |
| /* ══ ROUND 12: IDLE LIFE ══ Left alone, the realm breathes: the stage sways | |
| a few pixels on a long period and the aura thickens slightly. Any input | |
| snaps the camera back to the hand. */ | |
| #models .cs-root.cs-idle .mb-art { animation: idleSway 14s ease-in-out infinite; } | |
| @keyframes idleSway { | |
| 0%, 100% { transform: translate(0, 0); } | |
| 25% { transform: translate(6px, -3px); } | |
| 75% { transform: translate(-6px, 2px); } | |
| } | |
| #models .cs-root.cs-idle .cs-aura i { animation-duration: calc(3.8s / var(--cs-tempo, 1)); } | |
| /* ══ ROUND 14: REALM WEATHER ══ A falling trace crosses the high sky every | |
| ~16 s — thin, fast, gone. And the fog drinks a hint of the class light, so | |
| the weather itself changes when the character does. */ | |
| .cs-comet { | |
| position: absolute; top: 12%; left: -8%; width: 130px; height: 2px; | |
| background: linear-gradient(90deg, transparent, #cfe0ffbb 60%, #fff); | |
| border-radius: 2px; opacity: 0; pointer-events: none; z-index: 0; | |
| transform: rotate(9deg); | |
| animation: comet 16s linear infinite; | |
| animation-delay: 5s; | |
| } | |
| @keyframes comet { | |
| 0%, 93% { opacity: 0; left: -8%; top: 12%; } | |
| 94% { opacity: 0.9; } | |
| 100% { opacity: 0; left: 108%; top: 26%; } | |
| } | |
| .cs-fog i { | |
| background: radial-gradient(ellipse at center, | |
| color-mix(in srgb, var(--cs-accent, var(--accent)) 12%, #18223a) 0%, transparent 65%); | |
| opacity: 0.36; | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .cs-comet, #models .cs-root.cs-idle .mb-art { animation: none; } | |
| } | |
| /* ══ CHAT MODE ══ ENTER pressed: the roster and the sheet step aside, the | |
| conversation takes the right column, and the character stays on stage — | |
| summoning heartbeat while the weights land, faster heartbeat while it | |
| thinks, one bounce per real token while it speaks. Requires chat-ui.css | |
| (linked by index.html) for the message bubbles and the composer; below is | |
| only the panel chrome and the stagecraft. */ | |
| #models .cs-root.cs-chatting { | |
| /* The nav is sticky IN FLOW (60px + border), so a flat 100dvh hangs the | |
| composer 61px below the fold. In chat mode the composer is the primary | |
| control — the chamber must end above it. The tightened padding-top gives | |
| the reclaimed room to the conversation. */ | |
| height: calc(100dvh - 61px); | |
| min-height: 0; | |
| padding-top: 22px; | |
| grid-template-columns: 1fr minmax(420px, 600px); | |
| grid-template-rows: auto 1fr auto; | |
| grid-template-areas: | |
| 'plate chat' | |
| 'stage chat' | |
| 'note chat'; | |
| } | |
| /* #models-prefixed: the base rules carry the #models id, and a bare class | |
| pair loses that specificity fight — the roster stayed visible and its | |
| orphaned grid-area spawned implicit tracks that crushed the real columns | |
| (caught by the first browser pass). */ | |
| #models .cs-chatting .mb-info, #models .cs-chatting .mb-roster, | |
| #models .cs-chatting .cs-roster-head, #models .cs-chatting .cs-enter, | |
| #models .cs-chatting .mb-arrow, #models .cs-chatting .cs-corner-r { display: none; } | |
| /* The engage flash no longer hands off to another page — it lifts to reveal | |
| the chamber. Starts opaque (the .cs-go fade ran under it), holds long | |
| enough to cover the swap, then clears. */ | |
| #models .cs-root.cs-chatting .cs-engage.cs-go { animation: csEngageReveal 0.9s ease forwards; } | |
| @keyframes csEngageReveal { | |
| 0%, 30% { opacity: 1; } | |
| 100% { opacity: 0; visibility: hidden; } | |
| } | |
| /* The panel: the sheet's glass and rune corners, grown into an instrument. */ | |
| #models .cs-chat { | |
| /* min-width 0: grid items default to min-content width, and the nowrap | |
| composer-hint line was wider than a phone — the panel overflowed the | |
| viewport instead of shrinking into its column. */ | |
| grid-area: chat; z-index: 2; min-height: 0; min-width: 0; position: relative; | |
| /* It is a <section>, and the page's generic section rule pads 72px into | |
| the panel — zero it; the head/composer carry their own spacing. */ | |
| padding: 0; | |
| display: flex; flex-direction: column; | |
| border: 1px solid color-mix(in srgb, var(--cs-accent, var(--accent)) 22%, var(--border)); | |
| border-radius: 4px; | |
| background: linear-gradient(180deg, #0c1220ee, #090e18e6); | |
| box-shadow: inset 0 1px 0 #ffffff0a, 0 18px 50px #0009; | |
| backdrop-filter: blur(4px); | |
| animation: csChatIn 0.5s cubic-bezier(0.2, 1, 0.3, 1) 0.1s both; | |
| } | |
| @keyframes csChatIn { | |
| from { opacity: 0; transform: translateX(26px); } | |
| to { opacity: 1; transform: translateX(0); } | |
| } | |
| #models .cs-chat::before, #models .cs-chat::after { | |
| content: ''; position: absolute; width: 40px; height: 40px; z-index: 3; pointer-events: none; | |
| background: color-mix(in srgb, var(--cs-accent, var(--accent)) 85%, #fff); | |
| -webkit-mask: url('/entrance/corner.svg') 0 0 / contain no-repeat; | |
| mask: url('/entrance/corner.svg') 0 0 / contain no-repeat; | |
| } | |
| #models .cs-chat::before { top: -5px; left: -5px; } | |
| #models .cs-chat::after { bottom: -5px; right: -5px; transform: rotate(180deg); } | |
| /* Panel header: sigil, name, build, live badge, tools. */ | |
| .cs-chat-head { | |
| display: flex; align-items: center; gap: 10px; | |
| padding: 12px 14px; border-bottom: 1px solid #ffffff0f; | |
| } | |
| .cs-chat-sigil { flex: none; width: 22px; height: 22px; | |
| color: var(--cs-accent, var(--accent)); } | |
| .cs-chat-sigil svg { width: 100%; height: 100%; } | |
| .cs-chat-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; margin-right: auto; } | |
| .cs-chat-id b { font-family: var(--display); font-weight: 600; font-size: 1.02rem; | |
| line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } | |
| .cs-chat-id i { font-style: normal; font-family: var(--mono); font-size: 0.58rem; | |
| letter-spacing: 0.12em; text-transform: uppercase; | |
| color: color-mix(in srgb, var(--cs-accent, var(--accent)) 70%, var(--text)); | |
| white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } | |
| .cs-chat-tool { | |
| flex: none; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; | |
| text-transform: uppercase; color: var(--dim); text-decoration: none; | |
| padding: 5px 9px; border: 1px solid #ffffff1c; border-radius: 3px; background: #ffffff07; | |
| cursor: pointer; transition: color 0.15s, border-color 0.15s; | |
| } | |
| .cs-chat-tool:hover { color: var(--text); border-color: var(--muted); } | |
| .cs-chat-tool:disabled { opacity: 0.4; cursor: not-allowed; } | |
| /* Live badge — written by loading-ui.ts (Summoning → % → Ready). */ | |
| .cs-chat .badge { | |
| flex: none; display: inline-flex; align-items: center; gap: 6px; | |
| font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; | |
| padding: 4px 9px; border: 1px solid #ffffff1c; border-radius: 999px; color: var(--dim); | |
| font-variant-numeric: tabular-nums; white-space: nowrap; | |
| } | |
| .cs-chat .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); } | |
| .cs-chat .badge.loading { color: #fbbf24; border-color: #fbbf2440; } | |
| .cs-chat .badge.loading .dot { background: #fbbf24; animation: csBadgePulse 1.4s infinite; } | |
| .cs-chat .badge.ready { color: var(--cs-accent, var(--accent)); | |
| border-color: color-mix(in srgb, var(--cs-accent, var(--accent)) 40%, transparent); } | |
| .cs-chat .badge.ready .dot { background: var(--cs-accent, var(--accent)); } | |
| .cs-chat .badge.error { color: var(--err); border-color: color-mix(in srgb, var(--err) 45%, transparent); } | |
| .cs-chat .badge.error .dot { background: var(--err); } | |
| @keyframes csBadgePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } | |
| /* The rite card: download + compile progress, then it folds away. */ | |
| .cs-boot { padding: 16px 16px 14px; border-bottom: 1px solid #ffffff0f; } | |
| .cs-boot.cs-done { display: none; } | |
| .cs-boot-title { font-family: var(--display); font-size: 1.05rem; margin-bottom: 2px; } | |
| .cs-boot-status { font-size: 0.78rem; color: var(--text-dim, #a9b3c6); min-height: 1.2em; margin-bottom: 10px; } | |
| .cs-boot-track { height: 4px; border-radius: 2px; background: #ffffff12; overflow: hidden; } | |
| .cs-boot-track i { | |
| display: block; height: 100%; width: 0; border-radius: 2px; | |
| background: linear-gradient(90deg, | |
| color-mix(in srgb, var(--cs-accent, var(--accent)) 55%, transparent), | |
| var(--cs-accent, var(--accent))); | |
| transition: width 0.25s ease; | |
| } | |
| .cs-boot-detail { margin-top: 7px; font-family: var(--mono); font-size: 0.64rem; | |
| color: var(--dim); font-variant-numeric: tabular-nums; } | |
| .cs-boot-note { margin-top: 7px; font-size: 0.72rem; color: var(--warn, #d9a441); } | |
| .cs-boot-log { margin-top: 9px; } | |
| .cs-boot-log summary { | |
| font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; | |
| color: var(--dim); cursor: pointer; user-select: none; | |
| } | |
| .cs-boot-log summary:hover { color: var(--text-dim, #a9b3c6); } | |
| .cs-boot-log pre { | |
| margin-top: 6px; max-height: 130px; overflow-y: auto; | |
| padding: 8px 10px; border: 1px solid #ffffff0f; border-radius: 3px; background: #070b13; | |
| font-family: var(--mono); font-size: 0.62rem; line-height: 1.5; color: var(--text-dim, #a9b3c6); | |
| white-space: pre-wrap; | |
| } | |
| .cs-boot-error { display: none; margin-top: 10px; padding: 9px 11px; | |
| border: 1px solid color-mix(in srgb, var(--err) 40%, transparent); border-radius: 3px; | |
| background: color-mix(in srgb, var(--err) 9%, transparent); | |
| font-size: 0.76rem; line-height: 1.5; color: color-mix(in srgb, var(--err) 60%, #fff); } | |
| .cs-boot-error.visible { display: block; } | |
| /* Conversation column: bubbles ride the panel glass, not their own ground. */ | |
| .cs-chat .chat-main { flex: 1; min-height: 0; } | |
| .cs-chat .welcome.cs-wait, .cs-chat .welcome.hidden { display: none; } | |
| .cs-chat .welcome { padding: 1.4rem 0.2rem 1rem; } | |
| .cs-welcome-title { font-family: var(--display); font-size: 1.3rem; margin-bottom: 6px; } | |
| .cs-welcome-lore { font-size: 0.8rem; font-style: italic; line-height: 1.55; | |
| color: color-mix(in srgb, var(--text) 62%, transparent); margin-bottom: 14px; } | |
| .cs-sug-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } | |
| .cs-chat .suggest { | |
| text-align: left; font-size: 0.76rem; line-height: 1.4; color: var(--text-dim, #a9b3c6); | |
| padding: 10px 12px; border: 1px solid #ffffff14; border-radius: 3px; background: #ffffff06; | |
| cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; | |
| } | |
| .cs-chat .suggest:hover { | |
| color: var(--text); background: color-mix(in srgb, var(--cs-accent, var(--accent)) 8%, transparent); | |
| border-color: color-mix(in srgb, var(--cs-accent, var(--accent)) 45%, transparent); | |
| } | |
| /* Composer, re-cut to the entrance's edge language (chat-ui.css carries the | |
| mechanics; only the chrome changes here). */ | |
| .cs-chat .composer-wrap { background: transparent; border-top: 1px solid #ffffff0f; padding: 11px 13px 10px; } | |
| .cs-chat .composer { background: #0a101ccc; border-radius: 3px; | |
| border-color: color-mix(in srgb, var(--cs-accent, var(--accent)) 26%, var(--border)); } | |
| .cs-chat .composer:focus-within { background: #0c1322; border-color: var(--cs-accent, var(--accent)); } | |
| .cs-chat .composer-btn { border-radius: 3px; } | |
| .cs-chat .composer-hint { | |
| display: flex; justify-content: space-between; gap: 4px 10px; flex-wrap: wrap; text-align: left; | |
| font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.06em; color: var(--dim); | |
| max-width: none; | |
| } | |
| .cs-chat-stats { font-variant-numeric: tabular-nums; white-space: nowrap; } | |
| /* ── Stagecraft: what the realm does while the model works ──────────────── */ | |
| /* Summoning: the circle beats slowly and the ring runs the armed sweep — the | |
| character is being drawn through. */ | |
| #models .cs-summoning .mb-pedestal::after { animation: ringPulse 1.5s ease-in-out infinite; } | |
| #models .cs-summoning .mb-pedestal::before { | |
| content: ''; position: absolute; inset: 0; | |
| background: conic-gradient(from 0deg, | |
| transparent 0deg, transparent 290deg, | |
| color-mix(in srgb, var(--cs-accent, var(--accent)) 90%, #fff) 330deg, | |
| transparent 360deg); | |
| -webkit-mask: url('/entrance/ring.svg') center bottom / 100% auto no-repeat; | |
| mask: url('/entrance/ring.svg') center bottom / 100% auto no-repeat; | |
| animation: armedSpin 2.6s linear infinite; | |
| } | |
| /* Thinking: prefill — the ring tightens to a fast shallow breath. */ | |
| #models .cs-thinking .mb-pedestal::after { animation: ringPulse 0.9s ease-in-out infinite; } | |
| #models .cs-thinking .mb-pedestal { filter: brightness(1.18); } | |
| /* Generating: the floor burns steady and bright; the bounce on stage is the | |
| token stream itself (mascot.pulse per emitted token). */ | |
| #models .cs-generating .mb-pedestal { filter: brightness(1.3); } | |
| #models .cs-generating .mb-pedestal::after { animation: none; opacity: 1; } | |
| #models .mb-pedestal { transition: filter 0.4s ease; } | |
| /* Phones: the character folds to a small familiar above the conversation. */ | |
| @media (max-width: 900px) { | |
| #models .cs-root.cs-chatting { | |
| grid-template-columns: 1fr; | |
| grid-template-rows: auto auto 1fr; | |
| grid-template-areas: 'plate' 'stage' 'chat'; | |
| } | |
| #models .cs-chatting .mb-mascot { height: 110px; -webkit-box-reflect: none; } | |
| #models .cs-chatting .mb-pedestal { height: 60px; } | |
| #models .cs-chatting .cs-lore { display: none; } | |
| #models .cs-chatting .mb-plate { padding-bottom: 4px; } | |
| #models .cs-chatting .mb-name { font-size: 1.3rem; } | |
| .cs-sug-grid { grid-template-columns: 1fr; } | |
| .cs-chat-tool#new-chat-btn { display: none; } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| #models .cs-chat, #models .cs-root.cs-chatting .cs-engage.cs-go { animation: none; } | |
| #models .cs-summoning .mb-pedestal::before { animation: none; } | |
| } | |
| /* ══ DOWNLOADED = READY ══ The READY tag gains a fill so it reads at roster | |
| distance, and a variant chip that is already on this device carries a dot — | |
| both from the same OPFS probe as everything else. */ | |
| #models .mb-dot[data-cached]::after { | |
| background: color-mix(in srgb, var(--ok) 16%, transparent); | |
| } | |
| #models .mb-variant[data-cached]::after { | |
| content: '●'; margin-left: 7px; font-size: 0.5rem; vertical-align: 2px; | |
| color: var(--ok); | |
| } | |
| /* ══ GAME ROUND: abilities, saves, listening, the token stream ═════════════ */ | |
| /* Abilities: the spec's mechanics as passives — rune bullet, name, clause. */ | |
| #models .mb-abilities { list-style: none; margin: 12px 0 0; padding: 0; | |
| display: flex; flex-direction: column; gap: 6px; } | |
| #models .mb-abilities li { display: flex; align-items: baseline; gap: 8px; | |
| font-size: 0.74rem; line-height: 1.4; } | |
| #models .mb-abilities li::before { content: '◆'; flex: none; font-size: 0.5rem; | |
| color: color-mix(in srgb, var(--cs-accent, var(--accent)) 80%, #fff); } | |
| #models .mb-abilities b { flex: none; font-weight: 600; letter-spacing: 0.02em; | |
| color: color-mix(in srgb, var(--cs-accent, var(--accent)) 55%, var(--text)); } | |
| #models .mb-abilities span { color: var(--dim); } | |
| /* Save slot: a stored conversation marks its character — roster glyph + | |
| sheet line. Presence only, never a count. */ | |
| #models .mb-dot[data-save] .mb-dot-text b::after { | |
| content: ' ◈'; font-size: 0.7em; vertical-align: 1px; | |
| color: #cfe0ffaa; | |
| } | |
| #models .mb-save { font-size: var(--step--1); margin: 10px 0 0; | |
| color: color-mix(in srgb, var(--cs-accent, var(--accent)) 60%, var(--text)); } | |
| /* LISTENING: keys are landing — the character turns toward the panel. The | |
| ears perk through the mascot's hover state; this is the body language. */ | |
| #models .cs-chatting.cs-listening .mb-art { rotate: y 9deg; } | |
| #models .mb-art { transition: transform 0.3s ease-out, rotate 0.45s ease; } | |
| /* THE TOKEN STREAM: while the model speaks, glyphs fly from the character's | |
| mouth into the conversation. Visible ONLY under cs-generating — the stream | |
| exists exactly when tokens do. */ | |
| .cs-stream { display: none; } | |
| #models .cs-chatting.cs-generating .cs-stream { display: block; | |
| position: absolute; left: 26%; right: 0; top: 0; bottom: 0; | |
| pointer-events: none; z-index: 2; } | |
| .cs-stream i { | |
| position: absolute; left: 0; top: 44%; | |
| font-style: normal; font-size: 11px; | |
| color: color-mix(in srgb, var(--cs-accent, var(--accent)) 85%, #fff); | |
| text-shadow: 0 0 6px color-mix(in srgb, var(--cs-accent, var(--accent)) 60%, transparent); | |
| opacity: 0; | |
| animation: tokFly 1.15s linear infinite; | |
| } | |
| .cs-stream i:nth-child(2) { animation-delay: 0.19s; font-size: 8px; top: 45.5%; } | |
| .cs-stream i:nth-child(3) { animation-delay: 0.38s; top: 43%; } | |
| .cs-stream i:nth-child(4) { animation-delay: 0.57s; font-size: 8px; top: 46%; } | |
| .cs-stream i:nth-child(5) { animation-delay: 0.76s; top: 44.5%; } | |
| .cs-stream i:nth-child(6) { animation-delay: 0.95s; font-size: 9px; top: 43.5%; } | |
| @keyframes tokFly { | |
| 0% { transform: translateX(0) translateY(0); opacity: 0; } | |
| 12% { opacity: 0.9; } | |
| 55% { transform: translateX(22vw) translateY(-1.2vh); opacity: 0.85; } | |
| 92% { opacity: 0.5; } | |
| 100% { transform: translateX(38vw) translateY(-0.6vh); opacity: 0; } | |
| } | |
| /* SUMMON FAILURE: the circle goes cold. The rite card carries the flavour | |
| line; the diagnostic stays in the error panel. */ | |
| #models .cs-boot-failed .mb-pedestal { filter: grayscale(0.7) brightness(0.55); } | |
| #models .cs-boot-failed .mb-pedestal::after { animation: none; opacity: 0.3; } | |
| #models .cs-boot-failed .mb-pedestal::before { display: none; } | |
| @media (max-width: 900px) { | |
| /* The stream's geometry assumes stage-left/panel-right; stacked phones | |
| have neither, and the abilities pad the sheet. */ | |
| .cs-stream { display: none ; } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .cs-stream { display: none ; } | |
| #models .cs-chatting.cs-listening .mb-art { rotate: none; } | |
| } | |
| /* ══ EXTENDED ROUND: sleep, the constellation, the deeds rail ══════════════ */ | |
| /* ASLEEP (50 s idle): the ring cools and slows with the character — the | |
| sleepy face itself is the mascot's mood, this is the room's light. */ | |
| #models .cs-asleep .mb-pedestal { filter: brightness(0.7) saturate(0.8); } | |
| #models .cs-asleep .mb-pedestal::after { animation-duration: 10s; } | |
| #models .cs-asleep .cs-fog i { opacity: 0.2; } | |
| /* THE CONSTELLATION: the lane's sigil, huge and faint, behind the stage. | |
| Masked accent — it recolours with the character and drifts on parallax. */ | |
| .cs-sigilbg { | |
| position: absolute; z-index: 0; pointer-events: none; | |
| left: 50%; top: 50%; | |
| width: min(74vh, 58vw); height: min(74vh, 58vw); | |
| margin: calc(min(74vh, 58vw) / -2) 0 0 calc(min(74vh, 58vw) / -2); | |
| background: color-mix(in srgb, var(--cs-accent, var(--accent)) 80%, #fff); | |
| opacity: 0.05; | |
| -webkit-mask-size: contain; mask-size: contain; | |
| -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; | |
| -webkit-mask-position: center; mask-position: center; | |
| } | |
| #models .cs-chatting .cs-sigilbg { left: 27%; } | |
| /* THE DEEDS RAIL: things that happened on this device. Unearned = a dim rune | |
| with the trigger in its tooltip (a quest list, not decoration); earned = | |
| lit, named. No counts anywhere. */ | |
| #models .cs-deeds { | |
| grid-area: note; z-index: 1; justify-self: center; | |
| display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; | |
| padding: 2px 0; | |
| } | |
| .cs-deed { | |
| font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.12em; | |
| text-transform: uppercase; color: color-mix(in srgb, var(--dim) 55%, transparent); | |
| cursor: default; | |
| } | |
| .cs-deed i { font-style: normal; display: none; margin-left: 5px; } | |
| .cs-deed[data-on] { | |
| color: color-mix(in srgb, var(--cs-accent, var(--accent)) 75%, #fff); | |
| text-shadow: 0 0 8px color-mix(in srgb, var(--cs-accent, var(--accent)) 45%, transparent); | |
| } | |
| .cs-deed[data-on] i { display: inline; } | |
| @media (max-width: 900px) { #models .cs-deeds { display: none; } } | |
| /* ══ THE ROOM ══ Hosting from inside the game: the strip in the panel, and | |
| one small mascot per connected guest flanking the character. */ | |
| .cs-room { padding: 12px 14px; border-bottom: 1px solid #ffffff0f; } | |
| .cs-room-consent p { font-size: 0.76rem; line-height: 1.55; color: var(--text-dim, #a9b3c6); | |
| margin: 0 0 10px; } | |
| .cs-room-linkrow { display: flex; gap: 6px; align-items: center; } | |
| .cs-room-linkrow input { | |
| flex: 1; min-width: 0; padding: 6px 9px; font-family: var(--mono); font-size: 0.66rem; | |
| color: var(--text); background: #0a101ccc; border-radius: 3px; | |
| border: 1px solid color-mix(in srgb, var(--cs-accent, var(--accent)) 30%, var(--border)); | |
| } | |
| .cs-room-members { margin-top: 8px; font-family: var(--mono); font-size: 0.62rem; | |
| letter-spacing: 0.08em; color: var(--dim); } | |
| .cs-room-log { list-style: none; margin: 8px 0 0; padding: 0; display: flex; | |
| flex-direction: column; gap: 4px; } | |
| .cs-room-log li { display: flex; gap: 8px; align-items: baseline; font-size: 0.7rem; | |
| color: var(--text-dim, #a9b3c6); overflow: hidden; white-space: nowrap; } | |
| .cs-room-log b { font-family: var(--mono); font-size: 0.6rem; font-weight: 400; | |
| color: color-mix(in srgb, var(--cs-accent, var(--accent)) 70%, var(--text)); flex: none; } | |
| .cs-room-log span { overflow: hidden; text-overflow: ellipsis; } | |
| .cs-room-log i { font-style: normal; font-family: var(--mono); font-size: 0.6rem; | |
| color: var(--dim); margin-left: auto; flex: none; } | |
| .cs-tool-live { border-color: var(--cs-accent, var(--accent)) ; | |
| color: color-mix(in srgb, var(--cs-accent, var(--accent)) 80%, #fff) ; } | |
| /* Guests on stage: small familiars on the ring's edge. */ | |
| .cs-guest-mascot { position: absolute; width: 90px; height: 90px; z-index: 1; | |
| pointer-events: none; animation: guestIn 0.5s ease both; } | |
| .cs-guest-0 { left: 8%; bottom: 10%; } | |
| .cs-guest-1 { right: 8%; bottom: 10%; } | |
| .cs-guest-2 { left: 2%; bottom: 34%; } | |
| .cs-guest-3 { right: 2%; bottom: 34%; } | |
| .cs-guest-4 { left: 16%; bottom: 0; } | |
| .cs-guest-5 { right: 16%; bottom: 0; } | |
| @keyframes guestIn { from { opacity: 0; transform: translateY(10px) scale(0.8); } | |
| to { opacity: 1; transform: none; } } | |
| @media (max-width: 900px) { .cs-guest-mascot { display: none; } } | |
| /* The room path under ENTER: quiet sibling, same class light. */ | |
| #models .cs-enter { flex-direction: column; align-items: center; gap: 8px; } | |
| #models .mb-cta-room { | |
| font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em; | |
| text-transform: uppercase; text-decoration: none; cursor: pointer; | |
| color: color-mix(in srgb, var(--cs-accent, var(--accent)) 65%, var(--dim)); | |
| padding: 4px 10px; border: 1px solid transparent; border-radius: 3px; | |
| transition: color 0.15s, border-color 0.15s; | |
| } | |
| #models .mb-cta-room:hover { | |
| color: color-mix(in srgb, var(--cs-accent, var(--accent)) 85%, #fff); | |
| border-color: color-mix(in srgb, var(--cs-accent, var(--accent)) 40%, transparent); | |
| } | |
| /* ══ LENS ROUND 2026-08-17 FIXES ═══════════════════════════════════════════ */ | |
| /* The cinematic bottom fade must not wash the chat panel's composer — the | |
| panel IS the bottom of the screen in chat mode. */ | |
| #models .cs-root.cs-chatting::after { display: none; } | |
| @media (prefers-reduced-motion: reduce) { | |
| /* The mood states re-armed the ring pulse that the base reduce block had | |
| disabled; and guests should simply appear. */ | |
| #models .cs-summoning .mb-pedestal::after, | |
| #models .cs-thinking .mb-pedestal::after { animation: none; } | |
| .cs-guest-mascot { animation: none; } | |
| } | |