/* ============================================================
ConsoleQuest: phosphor terminal design system (rebranded from worldsim2)
themes: arcane (default), blue, green, amber, red, dos, haunted
effects: glow, scanlines, drift, bloom, curve, cursor, chroma, static
============================================================ */
:root {
--glow:
0 0 0.8px var(--fg),
0 0 3.1px var(--fg),
0 0 6.8px rgb(var(--fg-rgb) / 0.34),
0 0 11.5px rgb(var(--fg-rgb) / 0.19);
--glow-warn:
0 0 0.8px var(--warn),
0 0 3.1px var(--warn),
0 0 6.8px rgb(var(--pulse) / 0.34),
0 0 11.5px rgb(var(--pulse) / 0.19);
--box-glow:
0 0 7px rgb(var(--fg-rgb) / 0.12),
0 0 17px rgb(var(--fg-rgb) / 0.06);
--bloom:
0 0 17px rgb(var(--fg-rgb) / 0.15),
0 0 40px rgb(var(--fg-rgb) / 0.08),
0 0 72px rgb(var(--fg-rgb) / 0.035);
--scanline-h: 3.43px;
--subpixel-w: 4.57px;
--step-1: 0.8125em;
--step-2: 0.9375em;
--step-3: 1.125em;
--step-4: 1.5em;
--step-5: 2.4em;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--ease-quart: cubic-bezier(0.25, 1, 0.5, 1);
--ease-quint: cubic-bezier(0.22, 1, 0.36, 1);
--ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-out-quart: var(--ease-quart);
--ease-out-quint: var(--ease-quint);
--ease-out-expo: var(--ease-expo);
--t-fast: 100ms;
--t-base: 220ms;
--t-slow: 320ms;
--hdr-h: 40px;
--ftr-h: 36px;
--theme-cue-text: "SEAL";
--loader-frame-0: "+..+..";
--loader-frame-1: ".+..+.";
--loader-frame-2: "..+..+";
--loader-frame-3: "*..+..";
--loader-frame-4: ".*..+.";
--loader-frame-5: "..*..+";
}
/* -------- THEMES -------- */
:root {
--fg-rgb: 230 210 137;
--fg: rgb(230 210 137);
--fg-dim: rgb(167 141 79);
--fg-soft: rgb(230 210 137 / 0.6);
--fg-muted: rgb(230 210 137 / 0.32);
--line: rgb(230 210 137 / 0.5);
--line-strong: rgb(230 210 137 / 0.8);
--bg: rgb(15 8 18);
--bg-deep: rgb(6 3 8);
--bg-vignette-center: rgb(44 24 52);
--panel: rgb(44 24 52 / 0.94);
--black: rgb(7 3 9);
--warn: rgb(117 226 188);
--warn-soft: rgb(117 226 188 / 0.6);
--warn-line: rgb(117 226 188 / 0.6);
--pulse: 117 226 188;
}
[data-theme="blue"] {
--fg-rgb: 125 200 255;
--fg: rgb(125 200 255);
--fg-dim: rgb(86 153 207);
--fg-soft: rgb(125 200 255 / 0.6);
--fg-muted: rgb(125 200 255 / 0.34);
--line: rgb(125 200 255 / 0.52);
--line-strong: rgb(125 200 255 / 0.82);
--bg: rgb(5 10 20);
--bg-deep: rgb(1 4 9);
--bg-vignette-center: rgb(15 34 63);
--panel: rgb(15 34 63 / 0.94);
--black: rgb(1 5 11);
--warn: rgb(229 158 93);
--warn-soft: rgb(229 158 93 / 0.6);
--warn-line: rgb(229 158 93 / 0.6);
--pulse: 229 158 93;
}
[data-theme="green"] {
--fg-rgb: 189 247 121;
--fg: rgb(189 247 121);
--fg-dim: rgb(139 185 78);
--fg-soft: rgb(189 247 121 / 0.6);
--fg-muted: rgb(189 247 121 / 0.34);
--line: rgb(189 247 121 / 0.52);
--line-strong: rgb(189 247 121 / 0.82);
--bg: rgb(7 15 6);
--bg-deep: rgb(2 7 3);
--bg-vignette-center: rgb(31 49 22);
--panel: rgb(31 49 22 / 0.94);
--black: rgb(2 7 3);
--warn: rgb(216 144 94);
--warn-soft: rgb(216 144 94 / 0.6);
--warn-line: rgb(216 144 94 / 0.6);
--pulse: 216 144 94;
}
[data-theme="amber"] {
--fg-rgb: 255 180 94;
--fg: rgb(255 180 94);
--fg-dim: rgb(204 134 60);
--fg-soft: rgb(255 180 94 / 0.6);
--fg-muted: rgb(255 180 94 / 0.34);
--line: rgb(255 180 94 / 0.52);
--line-strong: rgb(255 180 94 / 0.82);
--bg: rgb(22 11 2);
--bg-deep: rgb(9 4 0);
--bg-vignette-center: rgb(74 38 8);
--panel: rgb(74 38 8 / 0.94);
--black: rgb(10 4 0);
--warn: rgb(120 225 184);
--warn-soft: rgb(120 225 184 / 0.6);
--warn-line: rgb(120 225 184 / 0.6);
--pulse: 120 225 184;
}
[data-theme="red"] {
--fg-rgb: 255 139 121;
--fg: rgb(255 139 121);
--fg-dim: rgb(204 92 82);
--fg-soft: rgb(255 139 121 / 0.6);
--fg-muted: rgb(255 139 121 / 0.34);
--line: rgb(255 139 121 / 0.52);
--line-strong: rgb(255 139 121 / 0.82);
--bg: rgb(22 6 8);
--bg-deep: rgb(9 2 3);
--bg-vignette-center: rgb(78 18 18);
--panel: rgb(78 18 18 / 0.94);
--black: rgb(10 2 3);
--warn: rgb(174 220 252);
--warn-soft: rgb(174 220 252 / 0.6);
--warn-line: rgb(174 220 252 / 0.6);
--pulse: 174 220 252;
}
[data-theme="dos"] {
--fg-rgb: 190 198 214;
--fg: rgb(190 198 214);
--fg-dim: rgb(123 134 154);
--fg-soft: rgb(190 198 214 / 0.58);
--fg-muted: rgb(190 198 214 / 0.32);
--line: rgb(190 198 214 / 0.46);
--line-strong: rgb(190 198 214 / 0.76);
--bg: rgb(4 5 8);
--bg-deep: rgb(1 2 4);
--bg-vignette-center: rgb(18 21 29);
--panel: rgb(18 21 29 / 0.94);
--black: rgb(2 3 5);
--warn: rgb(216 195 106);
--warn-soft: rgb(216 195 106 / 0.6);
--warn-line: rgb(216 195 106 / 0.6);
--pulse: 111 178 255;
}
[data-theme="haunted"] {
--fg-rgb: 166 239 194;
--fg: rgb(166 239 194);
--fg-dim: rgb(105 169 132);
--fg-soft: rgb(166 239 194 / 0.58);
--fg-muted: rgb(166 239 194 / 0.3);
--line: rgb(166 239 194 / 0.48);
--line-strong: rgb(166 239 194 / 0.78);
--bg: rgb(3 11 8);
--bg-deep: rgb(1 5 4);
--bg-vignette-center: rgb(17 40 31);
--panel: rgb(17 40 31 / 0.94);
--black: rgb(1 6 4);
--warn: rgb(205 166 111);
--warn-soft: rgb(205 166 111 / 0.6);
--warn-line: rgb(205 166 111 / 0.6);
--pulse: 205 166 111;
}
[data-theme="arcane"] {
--fg-rgb: 230 210 137;
--fg: rgb(230 210 137);
--fg-dim: rgb(167 141 79);
--fg-soft: rgb(230 210 137 / 0.6);
--fg-muted: rgb(230 210 137 / 0.32);
--line: rgb(230 210 137 / 0.5);
--line-strong: rgb(230 210 137 / 0.8);
--bg: rgb(15 8 18);
--bg-deep: rgb(6 3 8);
--bg-vignette-center: rgb(44 24 52);
--panel: rgb(44 24 52 / 0.94);
--black: rgb(7 3 9);
--warn: rgb(117 226 188);
--warn-soft: rgb(117 226 188 / 0.6);
--warn-line: rgb(117 226 188 / 0.6);
--pulse: 117 226 188;
}
[data-theme="dos"] {
--scanline-h: 4px;
--subpixel-w: 6px;
}
[data-theme="haunted"] {
--scanline-h: 3.12px;
--subpixel-w: 5.2px;
}
[data-theme="arcane"] {
--scanline-h: 3.2px;
--subpixel-w: 4.8px;
}
/* ============================================================
PER-TUBE PHOSPHOR PHYSICS
Each real display glows, blooms, and persists differently. These override
the :root --glow / --bloom / --box-glow stacks per theme so the SAME glow
and bloom effect toggles render the authentic character of each tube:
amber/green long-persistence phosphor blooms warm and wide; a VFD/LED alarm
panel and DOS VGA text are crisp with little halo; the haunted tube bleeds
and ghosts. Arcane keeps the :root reference stack.
============================================================ */
/* DOS VGA mono: crisp, almost no halo (sharp pixels on a decent monitor). */
[data-theme="dos"] {
--glow: 0 0 0.6px var(--fg), 0 0 1.7px rgb(var(--fg-rgb) / 0.5);
--bloom: 0 0 9px rgb(var(--fg-rgb) / 0.06), 0 0 20px rgb(var(--fg-rgb) / 0.025);
--box-glow: 0 0 4px rgb(var(--fg-rgb) / 0.05);
}
/* VFD crimson alarm: bright, tight segments, low halo, high contrast. */
[data-theme="red"] {
--glow: 0 0 0.7px var(--fg), 0 0 2.6px var(--fg), 0 0 6px rgb(var(--fg-rgb) / 0.34);
--bloom: 0 0 14px rgb(var(--fg-rgb) / 0.12), 0 0 32px rgb(var(--fg-rgb) / 0.06);
}
/* Hercules/Wyse blue business terminal: clean, modest halo. */
[data-theme="blue"] {
--glow: 0 0 0.8px var(--fg), 0 0 3px var(--fg), 0 0 6.5px rgb(var(--fg-rgb) / 0.32), 0 0 11px rgb(var(--fg-rgb) / 0.16);
}
/* P1 green: medium-persistence phosphor, slightly wider warm bloom. */
[data-theme="green"] {
--glow: 0 0 0.8px var(--fg), 0 0 3.4px var(--fg), 0 0 8px rgb(var(--fg-rgb) / 0.38), 0 0 15px rgb(var(--fg-rgb) / 0.22);
--bloom: 0 0 19px rgb(var(--fg-rgb) / 0.17), 0 0 44px rgb(var(--fg-rgb) / 0.09), 0 0 80px rgb(var(--fg-rgb) / 0.04);
}
/* P3 amber: long-persistence, blooms warm and wide. */
[data-theme="amber"] {
--glow: 0 0 0.8px var(--fg), 0 0 3.8px var(--fg), 0 0 9px rgb(var(--fg-rgb) / 0.4), 0 0 19px rgb(var(--fg-rgb) / 0.24);
--bloom: 0 0 20px rgb(var(--fg-rgb) / 0.2), 0 0 48px rgb(var(--fg-rgb) / 0.11), 0 0 90px rgb(var(--fg-rgb) / 0.05);
}
/* Haunted CRT: aged tube that bleeds and ghosts, soft wide bloom. */
[data-theme="haunted"] {
--glow: 0 0 1px var(--fg), 0 0 4px var(--fg), 0 0 10px rgb(var(--fg-rgb) / 0.36), 0 0 21px rgb(var(--fg-rgb) / 0.2);
--bloom: 0 0 22px rgb(var(--fg-rgb) / 0.18), 0 0 54px rgb(var(--fg-rgb) / 0.1), 0 0 98px rgb(var(--fg-rgb) / 0.05);
}
/* -------- RESET / GLOBAL -------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body, #app {
width: 100%;
height: 100%;
margin: 0;
}
::selection {
background: var(--fg);
color: var(--black);
text-shadow: none;
}
body {
background-color: var(--bg);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: repeat;
background-attachment: fixed;
background-size: 180px 180px;
color: var(--fg);
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 16px;
line-height: 1.3;
letter-spacing: 0;
overflow: hidden;
font-variant-ligatures: none;
font-variant-numeric: tabular-nums;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
transition: background-color var(--t-slow) var(--ease-quart), color var(--t-slow) var(--ease-quart);
}
@media (min-width: 1100px) {
body { font-size: 17px; }
}
button, textarea, input, select {
font: inherit;
color: inherit;
}
button {
font-weight: 700;
letter-spacing: 0.02em;
cursor: pointer;
border: 0;
background: transparent;
color: var(--fg);
padding: 0;
transition:
transform var(--t-fast) var(--ease-quart),
background-color var(--t-fast) linear,
color var(--t-fast) linear,
border-color var(--t-fast) linear;
}
button:focus-visible {
outline: 1px solid var(--fg);
outline-offset: 2px;
}
button:active:not(:disabled) {
transform: translateY(1px);
}
button:disabled {
opacity: 0.45;
cursor: default;
}
/* -------- APP SHELL: grid header / main / footer -------- */
.app {
position: relative;
display: grid;
grid-template-rows: var(--hdr-h) 1fr var(--ftr-h);
background: radial-gradient(ellipse 60% 60% at 50% 50%, var(--bg-vignette-center) 0%, var(--bg) 100%);
isolation: isolate;
animation: crt-warmup 0.7s var(--ease-quart) both;
transition:
background var(--t-slow) var(--ease-quart),
border-radius var(--t-slow) var(--ease-quart),
box-shadow var(--t-slow) var(--ease-quart);
overflow: hidden;
}
[data-theme="blue"] .app {
background:
linear-gradient(90deg, rgb(var(--fg-rgb) / 0.018) 0 1px, transparent 1px 8ch),
radial-gradient(ellipse 62% 60% at 50% 50%, var(--bg-vignette-center) 0%, var(--bg) 76%, var(--bg-deep) 100%);
}
[data-theme="green"] .app {
background:
radial-gradient(ellipse 46% 52% at 50% 48%, rgb(var(--fg-rgb) / 0.045) 0%, transparent 64%),
radial-gradient(ellipse 62% 60% at 50% 50%, var(--bg-vignette-center) 0%, var(--bg) 76%, var(--bg-deep) 100%);
}
[data-theme="amber"] .app {
background:
linear-gradient(0deg, rgb(var(--pulse) / 0.018) 0 1px, transparent 1px 1.15em),
radial-gradient(ellipse 70% 58% at 52% 48%, var(--bg-vignette-center) 0%, var(--bg) 74%, var(--bg-deep) 100%);
}
[data-theme="red"] .app {
background:
repeating-linear-gradient(90deg, transparent 0 5ch, rgb(var(--fg-rgb) / 0.018) 5ch 5.1ch, transparent 5.2ch 10ch),
radial-gradient(ellipse 66% 58% at 50% 48%, var(--bg-vignette-center) 0%, var(--bg) 76%, var(--bg-deep) 100%);
}
[data-theme="dos"] .app {
background:
radial-gradient(ellipse 68% 60% at 50% 48%, var(--bg-vignette-center) 0%, var(--bg) 76%, var(--bg-deep) 100%);
}
[data-theme="haunted"] .app {
background:
radial-gradient(ellipse 70% 62% at 50% 48%, rgb(var(--fg-rgb) / 0.045) 0%, transparent 58%),
radial-gradient(ellipse 65% 58% at 50% 50%, var(--bg-vignette-center) 0%, var(--bg) 74%, var(--bg-deep) 100%);
}
[data-theme="arcane"] .app {
background:
repeating-linear-gradient(45deg, transparent 0 38px, rgb(var(--fg-rgb) / 0.012) 39px 40px, transparent 41px 80px),
radial-gradient(ellipse 64% 58% at 50% 48%, var(--bg-vignette-center) 0%, var(--bg) 76%, var(--bg-deep) 100%);
}
@keyframes crt-warmup {
0% { filter: brightness(0) contrast(0.4) saturate(0.2); }
35% { filter: brightness(0.35) contrast(0.7) saturate(0.6); }
100% { filter: brightness(1) contrast(1) saturate(1); }
}
.app.theme-switching {
animation: theme-switch 360ms var(--ease-quart);
}
@keyframes theme-switch {
0% { filter: brightness(1) contrast(1); }
18% { filter: brightness(0.25) contrast(0.6) saturate(0.4); }
42% { filter: brightness(0.5) contrast(0.8); }
100% { filter: brightness(1) contrast(1); }
}
.app .boot-beam {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 9;
background: linear-gradient(rgb(var(--fg-rgb) / 0) calc(50% - 1px), rgb(var(--fg-rgb) / 0.9), rgb(var(--fg-rgb) / 0) calc(50% + 1px));
animation: boot-beam 0.7s var(--ease-expo) forwards;
transform-origin: 50% 50%;
will-change: transform, opacity;
}
@keyframes boot-beam {
0% { transform: scaleY(0); opacity: 0; }
10% { transform: scaleY(0.005); opacity: 1; }
30% { transform: scaleY(0.02); opacity: 1; }
70% { transform: scaleY(1); opacity: 0.45; }
100% { transform: scaleY(1); opacity: 0; }
}
.power-on-overlay {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 12;
mix-blend-mode: screen;
opacity: 0;
overflow: hidden;
background:
radial-gradient(ellipse at 50% 50%, rgb(var(--fg-rgb) / 0.24) 0%, transparent 18%),
var(--black);
will-change: opacity, filter;
}
.power-on-phosphor,
.power-on-raster,
.power-on-glass {
position: absolute;
inset: 0;
pointer-events: none;
}
.power-on-phosphor {
opacity: 0;
background:
radial-gradient(ellipse 52% 14% at 50% 50%, rgb(var(--fg-rgb) / 0.98) 0%, rgb(var(--fg-rgb) / 0.46) 26%, transparent 62%),
linear-gradient(to bottom, transparent calc(50% - 2px), rgb(var(--fg-rgb) / 0.88), transparent calc(50% + 2px)),
linear-gradient(to right, transparent calc(50% - 1px), rgb(var(--fg-rgb) / 0.96), transparent calc(50% + 1px));
transform-origin: 50% 50%;
will-change: transform, opacity, filter;
}
.power-on-raster {
opacity: 0;
background-image:
repeating-linear-gradient(to bottom, rgb(var(--fg-rgb) / 0.32) 0 1px, transparent 1px 4px),
repeating-linear-gradient(91deg, transparent 0 8px, rgb(var(--fg-rgb) / 0.18) 9px 10px, transparent 11px 19px),
radial-gradient(circle at 18% 22%, rgb(var(--fg-rgb) / 0.35), transparent 1px),
radial-gradient(circle at 74% 61%, rgb(var(--fg-rgb) / 0.3), transparent 1px);
background-size: 100% 7px, 31px 100%, 37px 31px, 53px 47px;
mix-blend-mode: screen;
will-change: opacity, transform, background-position, filter;
}
.power-on-glass {
opacity: 0;
background:
radial-gradient(ellipse 72% 52% at 50% 48%, rgb(var(--fg-rgb) / 0.34), transparent 54%),
radial-gradient(ellipse 95% 75% at 50% 50%, transparent 48%, color-mix(in srgb, var(--black) 62%, transparent) 100%);
will-change: opacity, filter;
}
.app.power-on-sequence {
animation: crt-screen-ignition 2450ms linear both;
}
@keyframes crt-screen-ignition {
0% { filter: brightness(0) contrast(0.58) saturate(0.28); }
4% { filter: brightness(0.08) contrast(1.4) saturate(0.55); }
8% { filter: brightness(1.9) contrast(2.1) saturate(0.4); }
13% { filter: brightness(0.18) contrast(1.65) saturate(0.74); }
20% { filter: brightness(0.72) contrast(1.38) saturate(1.08); }
32% { filter: brightness(1.28) contrast(1.18) saturate(1.16); }
44% { filter: brightness(0.86) contrast(1.32) saturate(1.02); }
58% { filter: brightness(1.08) contrast(1.08) saturate(1.04); }
76% { filter: brightness(0.96) contrast(1.04) saturate(1); }
100% { filter: brightness(1) contrast(1) saturate(1); }
}
.app.power-on-sequence .power-on-overlay {
animation: crt-overlay-acquire 2450ms linear forwards;
opacity: 1;
}
@keyframes crt-overlay-acquire {
0% { opacity: 1; filter: brightness(0.35) contrast(1.4); }
4% { opacity: 1; filter: brightness(2.8) contrast(2.3); }
9% { opacity: 0.96; filter: brightness(4.2) contrast(2.8) blur(0.2px); }
18% { opacity: 0.74; filter: brightness(1.9) contrast(1.8); }
34% { opacity: 0.42; filter: brightness(1.24) contrast(1.46); }
54% { opacity: 0.24; filter: brightness(1.08) contrast(1.2); }
76% { opacity: 0.12; filter: brightness(1.02) contrast(1.08); }
100% { opacity: 0; filter: brightness(1) contrast(1); }
}
.app.power-on-sequence .power-on-phosphor {
animation: crt-phosphor-ignite 1780ms linear forwards;
}
@keyframes crt-phosphor-ignite {
0% { opacity: 0; transform: scaleX(0.012) scaleY(0.002); filter: blur(0) brightness(0.8); }
3% { opacity: 1; transform: scaleX(0.018) scaleY(0.004); filter: blur(0.2px) brightness(3.8); }
7% { opacity: 1; transform: scaleX(0.82) scaleY(0.008); filter: blur(0.35px) brightness(4.8); }
11% { opacity: 0.92; transform: scaleX(1) scaleY(0.026); filter: blur(0.5px) brightness(3.2); }
18% { opacity: 0.76; transform: scaleX(1.015) scaleY(0.88); filter: blur(0.9px) brightness(1.6); }
24% { opacity: 0.52; transform: scaleX(0.992) scaleY(1.02); filter: blur(0.55px) brightness(1.25); }
34% { opacity: 0.38; transform: scaleX(1.004) scaleY(0.98); filter: blur(0.35px) brightness(1.05); }
62% { opacity: 0.18; transform: scaleX(1) scaleY(1); filter: blur(0.22px) brightness(1); }
100% { opacity: 0; transform: scaleX(1) scaleY(1); filter: blur(0.18px) brightness(1); }
}
.app.power-on-sequence .power-on-raster {
animation: crt-raster-acquire 2320ms steps(9, end) forwards;
}
@keyframes crt-raster-acquire {
0% { opacity: 0; transform: translateY(-3%); background-position: 0 -18px, 0 0, 0 0, 0 0; filter: brightness(0.8) contrast(1.2); }
13% { opacity: 0.86; transform: translateY(1.8%); background-position: 0 19px, 7px 0, 11px 7px, 19px 13px; filter: brightness(2) contrast(2.2); }
18% { opacity: 0.22; transform: translateY(-0.8%); background-position: 0 36px, 17px 0, 22px 19px, 31px 29px; filter: brightness(1.2) contrast(1.6); }
28% { opacity: 0.58; transform: translateY(0.9%); background-position: 0 54px, 29px 0, 33px 21px, 43px 37px; filter: brightness(1.45) contrast(1.9); }
44% { opacity: 0.28; transform: translateY(-0.25%); background-position: 0 72px, 41px 0, 46px 32px, 57px 43px; filter: brightness(1.12) contrast(1.45); }
64% { opacity: 0.16; transform: translateY(0); background-position: 0 90px, 53px 0, 58px 41px, 67px 59px; filter: brightness(1.05) contrast(1.2); }
100% { opacity: 0; transform: translateY(0); background-position: 0 126px, 69px 0, 71px 58px, 83px 71px; filter: brightness(1) contrast(1); }
}
.app.power-on-sequence .power-on-glass {
animation: crt-glass-afterglow 2450ms var(--ease-out-quart) forwards;
}
@keyframes crt-glass-afterglow {
0% { opacity: 0; filter: blur(0); }
9% { opacity: 0.78; filter: blur(5px); }
28% { opacity: 0.46; filter: blur(3px); }
66% { opacity: 0.2; filter: blur(1.2px); }
100% { opacity: 0; filter: blur(0); }
}
.app.power-on-sequence .crt-main {
animation: crt-content-lock 2450ms linear both;
}
@keyframes crt-content-lock {
0% { opacity: 0.08; transform: translateX(0) scale(0.998); filter: blur(4px) brightness(0.4) contrast(1.9); }
12% { opacity: 0.28; transform: translateX(1.2px) scale(1.002); filter: blur(3px) brightness(0.76) contrast(1.65); }
24% { opacity: 0.58; transform: translateX(-0.8px) scale(0.999); filter: blur(1.7px) brightness(0.92) contrast(1.28); }
40% { opacity: 0.82; transform: translateX(0.5px) scale(1.001); filter: blur(0.8px) brightness(1.04) contrast(1.16); }
62% { opacity: 1; transform: translateX(0) scale(1); filter: blur(0.18px) brightness(0.98) contrast(1.08); }
100% { opacity: 1; transform: translateX(0) scale(1); filter: blur(0) brightness(1) contrast(1); }
}
@media (prefers-reduced-motion: reduce) {
.app.power-on-sequence,
.app.power-on-sequence .power-on-overlay,
.app.power-on-sequence .crt-main,
.app.power-on-sequence .power-on-phosphor,
.app.power-on-sequence .power-on-raster,
.app.power-on-sequence .power-on-glass {
animation: none !important;
transition: filter 180ms linear, opacity 180ms linear !important;
}
.power-on-overlay {
display: none;
}
}
/* -------- EFFECT LAYERS (scoped to .app) -------- */
.app::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 5;
background-image:
linear-gradient(rgb(0 0 0 / 0) 50%, rgb(0 0 0 / 0.22) 0),
linear-gradient(90deg, rgb(255 0 0 / 0.055), rgb(0 255 0 / 0.03), rgb(0 0 255 / 0.055));
background-size: 100% var(--scanline-h), var(--subpixel-w) 100%;
background-repeat: repeat, repeat;
background-position: 0 0, 0 0;
opacity: 0;
transition: opacity var(--t-slow) var(--ease-quart);
will-change: opacity;
transform: translateZ(0);
contain: paint;
}
.app.fx-scanlines::after { opacity: 1; }
.app.fx-drift::after {
background-image:
linear-gradient(rgb(0 0 0 / 0) 50%, rgb(0 0 0 / 0.22) 0),
linear-gradient(90deg, rgb(255 0 0 / 0.055), rgb(0 255 0 / 0.03), rgb(0 0 255 / 0.055)),
linear-gradient(rgb(var(--fg-rgb) / 0) 47%, rgb(var(--fg-rgb) / 0.065) 50%, rgb(var(--fg-rgb) / 0) 53%);
background-size: 100% var(--scanline-h), var(--subpixel-w) 100%, 100% 200%;
background-repeat: repeat, repeat, no-repeat;
background-position: 0 0, 0 0, 0 -50%;
animation: scanline-drift 14s linear infinite;
will-change: background-position;
}
.app.fx-drift:not(.fx-scanlines)::after { opacity: 1; }
@keyframes scanline-drift {
0% { background-position: 0 0, 0 0, 0 -50%; }
100% { background-position: 0 0, 0 0, 0 150%; }
}
.app::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 6;
box-shadow: none;
transform: translateZ(0);
}
.app:has(.loader.active)::before {
animation: claude-pulse 2s linear infinite;
}
@keyframes claude-pulse {
0%, 100% {
box-shadow:
inset 0 0 10px rgb(var(--pulse) / 0.5),
inset 0 0 20px rgb(var(--pulse) / 0.3),
inset 0 0 30px rgb(var(--pulse) / 0.1);
}
50% {
box-shadow:
inset 0 0 15px rgb(var(--pulse) / 0.7),
inset 0 0 25px rgb(var(--pulse) / 0.5),
inset 0 0 35px rgb(var(--pulse) / 0.2);
}
}
.app.fx-curve {
border-radius: 22px;
/* Layered tube glass: a soft near-edge darkening, a deep corner vignette,
a crisp black bezel line, a faint phosphor rim, and a tight corner
occlusion that sells the curvature of the glass toward the edges. */
box-shadow:
inset 0 0 60px rgb(0 0 0 / 0.30),
inset 0 0 160px rgb(0 0 0 / 0.52),
inset 0 0 0 1px rgb(0 0 0 / 0.66),
inset 0 0 0 3px rgb(var(--fg-rgb) / 0.05),
inset 0 0 26px 8px rgb(0 0 0 / 0.42);
}
.fx-layer {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 7;
}
/* WebGL "CRT MAX" tube-glass overlay (effect key: crt). Additive light only,
composited over the whole tube via screen blend so it never greys the text.
The crt-shader.js engine appends this canvas and toggles its display. */
.fx-crt-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 8;
display: none;
mix-blend-mode: screen;
}
.app.fx-curve .fx-crt-canvas {
border-radius: 22px;
overflow: hidden;
}
.fx-layer::before,
.fx-layer::after {
content: "";
position: absolute;
pointer-events: none;
}
.fx-layer::before {
inset: -10%;
background-image: url("data:image/svg+xml;utf8,");
background-size: 240px 240px;
opacity: 0;
transition: opacity var(--t-slow) var(--ease-quart);
will-change: transform, opacity;
mix-blend-mode: overlay;
}
.fx-layer::after {
inset: 0;
opacity: 0;
transition: opacity var(--t-slow) var(--ease-quart);
mix-blend-mode: screen;
}
[data-theme="blue"] .fx-layer::after {
opacity: 0.12;
background:
linear-gradient(90deg, transparent 0 7ch, rgb(var(--fg-rgb) / 0.045) 7ch 7.12ch, transparent 7.25ch),
linear-gradient(180deg, transparent 0 23px, rgb(var(--fg-rgb) / 0.025) 24px, transparent 25px);
background-size: 14ch 100%, 100% 49px;
}
[data-theme="green"] .fx-layer::after {
opacity: 0.14;
background:
radial-gradient(circle at 50% 50%, rgb(var(--fg-rgb) / 0.055), transparent 1px),
linear-gradient(90deg, transparent, rgb(var(--fg-rgb) / 0.024), transparent);
background-size: 17px 17px, 100% 100%;
}
[data-theme="amber"] .fx-layer::after {
opacity: 0.16;
background:
radial-gradient(circle at 18% 22%, rgb(var(--pulse) / 0.11), transparent 1px),
radial-gradient(circle at 86% 66%, rgb(var(--fg-rgb) / 0.09), transparent 1px),
linear-gradient(90deg, rgb(var(--fg-rgb) / 0.035), transparent 26ch);
background-size: 97px 79px, 131px 113px, 100% 100%;
}
[data-theme="red"] .fx-layer::after {
opacity: 0.13;
background:
linear-gradient(90deg, transparent 0 3ch, rgb(var(--fg-rgb) / 0.052) 3ch 3.08ch, transparent 3.18ch 6ch),
linear-gradient(0deg, rgb(var(--pulse) / 0.024), transparent 30%);
background-size: 6ch 100%, 100% 100%;
}
[data-theme="dos"] .fx-layer::after {
opacity: 0.18;
background:
linear-gradient(90deg, rgb(var(--fg-rgb) / 0.08) 0 1px, transparent 1px 9ch),
linear-gradient(rgb(var(--fg-rgb) / 0.04) 0 1px, transparent 1px 1.3em);
background-size: 9ch 100%, 100% 1.3em;
}
[data-theme="haunted"] .fx-layer::after {
opacity: 0.2;
background:
radial-gradient(circle at 9% 16%, rgb(var(--fg-rgb) / 0.13), transparent 1px),
radial-gradient(circle at 71% 34%, rgb(var(--fg-rgb) / 0.1), transparent 1px),
radial-gradient(circle at 36% 83%, rgb(var(--fg-rgb) / 0.12), transparent 1px),
linear-gradient(96deg, transparent 0 47%, rgb(var(--fg-rgb) / 0.035) 48%, transparent 49% 100%);
background-size: 73px 61px, 109px 97px, 139px 113px, 100% 100%;
}
[data-theme="arcane"] .fx-layer::after {
opacity: 0.16;
background:
radial-gradient(circle at 50% 50%, transparent 0 22%, rgb(var(--fg-rgb) / 0.028) 22.2% 22.55%, transparent 22.8%),
radial-gradient(circle at 50% 50%, transparent 0 34%, rgb(var(--pulse) / 0.024) 34.2% 34.5%, transparent 34.8%),
linear-gradient(30deg, transparent 0 49.85%, rgb(var(--fg-rgb) / 0.018) 50%, transparent 50.15%),
linear-gradient(150deg, transparent 0 49.85%, rgb(var(--fg-rgb) / 0.018) 50%, transparent 50.15%);
}
.app.fx-static .fx-layer::before {
opacity: 0.13;
animation: tv-static 0.12s steps(4) infinite;
}
@keyframes tv-static {
0% { transform: translate(0, 0); }
25% { transform: translate(-1.2%, 1.5%); }
50% { transform: translate(1.5%, -1%); }
75% { transform: translate(-1.6%, -1.4%); }
100% { transform: translate(0, 0); }
}
/* -------- CRT HEADER -------- */
.crt-header {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: auto auto 1fr;
gap: var(--space-8);
align-items: center;
padding: 0 var(--space-6);
border-bottom: 1px solid var(--fg-muted);
font-size: var(--step-1);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 700;
}
.crt-header::after {
content: var(--theme-cue-text);
position: absolute;
right: var(--space-6);
bottom: -0.72em;
color: var(--fg-muted);
background: var(--bg);
padding: 0 0.55ch;
font-size: 0.76em;
line-height: 1;
letter-spacing: 0.08em;
pointer-events: none;
}
[data-theme="amber"] .crt-header::after,
[data-theme="red"] .crt-header::after {
color: var(--warn);
}
[data-theme="haunted"] .crt-header::after {
opacity: 0.72;
filter: blur(0.15px);
}
[data-theme="arcane"] .crt-header::after {
color: var(--warn);
content: "[" var(--theme-cue-text) "]";
}
.hdr-brand {
display: flex;
align-items: center;
gap: var(--space-2);
}
.hdr-marker {
color: var(--fg);
font-size: 0.78em;
line-height: 1;
letter-spacing: 0;
transform: translateY(-0.05em);
animation: marker-breath 4.2s linear infinite;
}
@keyframes marker-breath {
0%, 100% { opacity: 1; }
50% { opacity: 0.55; }
}
.hdr-wordmark {
font-weight: 900;
letter-spacing: 0.12em;
color: var(--fg);
}
.hdr-sep {
color: var(--fg-muted);
font-weight: 400;
}
.hdr-suffix {
color: var(--fg);
font-weight: 900;
}
.hdr-account {
max-width: min(32ch, 32vw);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--fg-dim);
font-weight: 400;
letter-spacing: 0.04em;
text-transform: none;
margin-left: var(--space-3);
font-size: 0.9em;
}
.hdr-tabs {
display: flex;
gap: 0;
min-width: 0;
max-width: 100%;
overflow: hidden;
}
.hdr-tab {
height: 100%;
padding: 0 var(--space-4);
font-weight: 700;
letter-spacing: 0.12em;
color: var(--fg-dim);
border-left: 1px solid var(--fg-muted);
border-right: 1px solid var(--fg-muted);
margin-right: -1px;
background: transparent;
transition: color var(--t-fast) linear, background var(--t-fast) linear;
}
.hdr-tab:hover { color: var(--fg); }
.hdr-tab[aria-selected="true"],
.hdr-tab.active {
color: var(--black);
background: var(--fg);
}
.hdr-meta {
margin-left: auto;
display: flex;
gap: var(--space-4);
align-items: center;
color: var(--fg-dim);
}
.hdr-meta-item {
display: inline-flex;
align-items: baseline;
gap: var(--space-2);
}
/* Telemetry reads as a status bar: theme │ model. */
.hdr-meta-item:not(:last-child)::after {
content: "\2502";
margin-left: var(--space-4);
color: var(--fg-muted);
font-weight: 400;
opacity: 0.55;
}
.hdr-meta-item em {
font-style: normal;
color: var(--fg-muted);
font-weight: 400;
font-size: 0.85em;
}
.hdr-meta-item strong {
font-weight: 700;
color: var(--fg);
letter-spacing: 0.04em;
}
/* -------- MAIN AREA -------- */
.crt-main {
position: relative;
overflow: hidden;
min-height: 0;
z-index: 1;
}
.console-view,
.client-view {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
min-width: 0;
padding: var(--space-4) var(--space-5) var(--space-3); /* slightly tighter to maximize preview area */
gap: var(--space-2);
animation: view-enter var(--t-slow) var(--ease-quart) both;
overflow: hidden; /* extra safety against any child causing document scroll */
}
@keyframes view-enter {
0% { opacity: 0; transform: translateY(6px); }
100% { opacity: 1; transform: translateY(0); }
}
.terminal {
flex: 1;
overflow: auto;
padding-right: var(--space-4);
white-space: pre-wrap;
overflow-wrap: anywhere;
contain: strict;
scrollbar-color: var(--line-strong) transparent;
scrollbar-width: thin;
}
.terminal::-webkit-scrollbar { width: 10px; }
.terminal::-webkit-scrollbar-track { background: transparent; }
.terminal::-webkit-scrollbar-thumb {
background: var(--line-strong);
border: 2px solid transparent;
background-clip: padding-box;
}
.terminal::-webkit-scrollbar-thumb:hover {
background: var(--fg);
background-clip: padding-box;
}
/* Shared phosphor scrollbar for every other scroll surface so none falls back
to the chunky OS default (matches the terminal treatment above). */
.options-form,
.or-combobox-panel {
scrollbar-color: var(--line-strong) transparent;
scrollbar-width: thin;
}
.options-form::-webkit-scrollbar,
.or-combobox-panel::-webkit-scrollbar { width: 10px; }
.options-form::-webkit-scrollbar-track,
.or-combobox-panel::-webkit-scrollbar-track { background: transparent; }
.options-form::-webkit-scrollbar-thumb,
.or-combobox-panel::-webkit-scrollbar-thumb {
background: var(--line-strong);
border: 2px solid transparent;
background-clip: padding-box;
}
.options-form::-webkit-scrollbar-thumb:hover,
.or-combobox-panel::-webkit-scrollbar-thumb:hover {
background: var(--fg);
background-clip: padding-box;
}
.terminal-line {
line-height: 1.3;
min-height: 1.3em;
animation: crt-line-write 420ms var(--ease-out-quart) both;
}
.terminal-line.separator {
border-top: 1px solid var(--line);
width: min(560px, 80vw);
margin: var(--space-2) 0;
animation: none;
}
/* Echoed operator command, shell-history style: dim prompt, bright command. */
.terminal-line.command {
margin-top: var(--space-1);
}
.terminal-line.command .tl-prompt {
color: var(--fg-dim);
font-weight: 700;
white-space: pre;
}
.terminal-line.command .tl-cmd {
color: var(--fg);
font-weight: 700;
}
.app.fx-glow .terminal-line.command .tl-cmd {
text-shadow: var(--glow);
}
.terminal-line.error,
.terminal-line.warn {
color: var(--warn);
border: 1px solid var(--warn-line);
padding: var(--space-1) var(--space-3);
margin: var(--space-1) 0;
}
.app.fx-glow .terminal-line.error,
.app.fx-glow .terminal-line.warn {
text-shadow: var(--glow-warn);
}
@keyframes crt-line-write {
/* More realistic retro CRT/terminal "beam writing" a line.
Feels like an old phosphor terminal printing output rather than a modern wiggle.
Quick opacity ramp + subtle horizontal "stretch from left" as the beam paints,
plus a tiny vertical settle. Almost no skew, very low amplitude jitter only at start. */
0% {
opacity: 0.15;
filter: blur(1.5px) brightness(1.4);
transform: translateY(0.5px) scaleX(0.2);
}
18% {
opacity: 0.65;
filter: blur(0.6px) brightness(1.15);
transform: translateY(0.2px) scaleX(0.55);
}
38% {
opacity: 0.92;
filter: blur(0.2px) brightness(1.05);
transform: translateY(0.05px) scaleX(0.92);
}
62% {
opacity: 1;
filter: blur(0) brightness(1);
transform: translateY(0) scaleX(1);
}
100% {
opacity: 1;
filter: none;
transform: none;
}
}
/* -------- BOOT SCREEN CONTENT (banner / status / sim menu) -------- */
/* On the boot screen the command prompt is not usable yet (a simulation is
chosen with the number keys or by clicking a row), so reclaim its strip and
let the menu column own the full console height. */
.console-view:has(.boot-screen) .command-form,
.console-view:has(.boot-screen) .stream-meter {
display: none;
}
.boot-screen {
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 0;
min-height: 100%;
padding: clamp(var(--space-3), 2.4vh, var(--space-6)) clamp(var(--space-4), 5vw, var(--space-8)) var(--space-4);
position: relative;
width: 100%;
margin: 0 auto;
}
.boot-screen::before {
content: "";
position: absolute;
inset: -8px 0 auto;
height: 1px;
pointer-events: none;
opacity: 0;
background: linear-gradient(90deg, transparent, var(--fg-muted), transparent);
}
[data-theme="haunted"] .boot-screen::before,
[data-theme="arcane"] .boot-screen::before {
opacity: 1;
}
/* Lock the height of the logo area so swapping between different CONSOLEQUEST
ASCII variants never causes layout shift or pushes content below it. */
/* Stretchy container to hold the logo */
.boot-hero {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
margin-bottom: 0;
}
/* The ASCII logo is fixed-width (59 cols at its widest). Drive its font-size
so the art always fills the column without overflowing on narrow screens.
.logo-container stays the positioned ancestor for the matrix-dissolve canvas. */
.boot-screen .logo-container {
font-size: clamp(0.44rem, 2.1vw, 0.96rem);
height: 14em;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
width: 100%;
}
/* The banner text sits below the matrix canvas during the dissolve effect */
.boot-screen .logo-container .banner {
position: relative;
z-index: 1;
flex-shrink: 0;
transform-origin: center center;
transform: scale(1);
width: auto;
max-width: 100%;
margin: 0 auto;
text-align: center;
}
.boot-log {
margin: 0;
font-size: 11px;
line-height: 1.28;
color: rgb(var(--fg-rgb) / 0.74);
white-space: pre;
letter-spacing: 0.03em;
min-height: 2.56em;
max-height: 2.56em;
max-width: 100%;
overflow: hidden;
text-transform: uppercase;
contain: paint;
text-align: center;
}
.boot-log:empty {
min-height: 0;
max-height: 0;
margin: 0;
}
.boot-log:empty {
display: none;
min-height: 0;
}
.boot-log-line {
position: relative;
min-height: 1.28em;
opacity: 0;
filter: blur(1.2px) brightness(0.7);
animation: boot-log-burn-in 260ms linear forwards;
}
.boot-log-line.is-warn {
color: var(--warn);
}
[data-theme="haunted"] .boot-log-line.is-warn {
color: color-mix(in srgb, var(--warn) 78%, var(--fg));
}
[data-theme="arcane"] .boot-log-line.is-warn {
color: var(--warn);
text-shadow: var(--glow-warn);
}
.boot-log-beam {
position: absolute;
inset: 0 auto 0 0;
width: 24%;
pointer-events: none;
mix-blend-mode: screen;
background: linear-gradient(
to right,
transparent,
rgb(var(--fg-rgb) / 0.12) 12%,
rgb(var(--fg-rgb) / 0.96) 54%,
rgb(var(--fg-rgb) / 0.2) 86%,
transparent
);
transform: translateX(-120%);
animation: boot-log-write-beam 310ms linear forwards;
}
@keyframes boot-log-burn-in {
0% { opacity: 0.04; filter: blur(1.6px) brightness(0.5); }
38% { opacity: 1; filter: blur(0.2px) brightness(1.35); }
100% { opacity: 0.92; filter: blur(0) brightness(1); }
}
@keyframes boot-log-write-beam {
0% { transform: translateX(-120%); opacity: 0; }
12% { opacity: 1; }
82% { opacity: 0.76; }
100% { transform: translateX(430%); opacity: 0; }
}
.app.power-on-sequence .boot-screen {
animation: crt-initial-drift 2120ms linear forwards;
}
@keyframes crt-initial-drift {
0% { transform: translateX(0) skewX(0deg); }
7% { transform: translateX(1.6px) skewX(0.08deg); }
12% { transform: translateX(-1px) skewX(-0.06deg); }
18% { transform: translateX(0.8px) skewX(0.04deg); }
25% { transform: translateX(-0.7px) skewX(-0.035deg); }
34% { transform: translateX(0.5px) skewX(0.02deg); }
50% { transform: translateX(-0.25px) skewX(-0.012deg); }
100% { transform: translateX(0) skewX(0deg); }
}
/* The advanced code dissolve matrix rain canvas.
Positioned to cover the entire logo area, creating the "surrounding animated matrix of code"
that the user described. Uses phosphor colors and CRT-friendly blending. Hidden until a transition. */
.boot-screen .logo-matrix-dissolve {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
pointer-events: none;
z-index: 2;
mix-blend-mode: screen;
transition: opacity 120ms linear;
}
/* When active during dissolve, it becomes visible and the effect runs via JS.
Higher opacity + screen blend makes the matrix rain the dominant "code dissolve" visual
instead of a subtle background. */
.boot-screen .logo-matrix-dissolve.active {
opacity: 0.96; /* make the matrix rain very dominant so the dissolve is impossible to miss */
}
/* Staged reveal across the boot screen: banner first, strapline second,
then the system / sim grid. Each child carries data-stage; CSS turns that
into an animation-delay so the boot lands like a CRT booting. The cascade
inside .sim-menu-list is layered on top via per-item --i delays. */
.boot-screen [data-stage] {
animation: boot-stage 0.7s var(--ease-quint) both;
animation-delay: calc(var(--stage, 0) * 180ms);
}
.boot-screen [data-stage="1"] { --stage: 0; }
.boot-screen [data-stage="2"] { --stage: 1; }
.boot-screen [data-stage="3"] { --stage: 2; }
@keyframes boot-stage {
0% { opacity: 0; transform: translateY(8px); filter: blur(4px) brightness(0.4); }
60% { opacity: 1; transform: translateY(0); filter: blur(0) brightness(1); }
100% { opacity: 1; filter: blur(0); }
}
.banner {
margin: 0;
letter-spacing: 0.015em;
font-size: 1em;
font-weight: 700;
line-height: 1.12;
white-space: pre;
transition: filter 120ms linear;
padding-top: 0.2em;
}
/* Beautiful CLI/terminal glitch transitions for the animated ConsoleQuest logo */
.banner.glitching {
filter: contrast(1.2) saturate(1.55) brightness(1.12) hue-rotate(2deg);
animation: banner-glitch-jitter 70ms infinite linear;
text-shadow:
0 0 2px var(--fg),
0 0 6px var(--fg),
1px 0 0 rgb(255 80 120 / 0.35),
-1px 0 0 rgb(80 200 255 / 0.35);
}
@keyframes banner-glitch-jitter {
0% { transform: translate(0, 0) scale(1); }
20% { transform: translate(-0.6px, 0.3px) scale(1.002); }
40% { transform: translate(0.7px, -0.4px) scale(0.998); }
60% { transform: translate(-0.4px, 0.5px) scale(1.001); }
80% { transform: translate(0.5px, -0.3px) scale(0.999); }
100% { transform: translate(0, 0) scale(1); }
}
/* Extra phosphor pop on the big ConsoleQuest art during heavy glitch phases */
.boot-screen .banner.glitching {
letter-spacing: 0.5px;
}
/* Subtle "warm tube" breathing idle animation on the ConsoleQuest logo when not glitching (delight layer, very low intensity, fits CRT "aging" character) */
.boot-screen .banner:not(.glitching) {
animation: banner-breath 4.2s var(--ease-out-quart) infinite;
}
@keyframes banner-breath {
0%, 100% { opacity: 1; filter: brightness(1); }
50% { opacity: 0.985; filter: brightness(0.985); }
}
/* When reduced motion, kill the breath and any heavy transitions on banner */
@media (prefers-reduced-motion: reduce) {
.boot-screen .banner {
animation: none !important;
transition: opacity 200ms linear, transform 200ms linear !important;
}
}
.boot-strapline {
margin: 0;
font-size: var(--step-1);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg-dim);
transition: opacity 280ms var(--ease-quart), filter 280ms var(--ease-quart);
min-height: 1.3em;
text-align: center;
}
[data-theme="dos"] .boot-strapline {
letter-spacing: 0.08em;
}
[data-theme="haunted"] .boot-strapline {
color: color-mix(in srgb, var(--fg-dim) 78%, var(--warn));
}
[data-theme="arcane"] .boot-strapline {
color: color-mix(in srgb, var(--fg-dim) 72%, var(--warn));
}
.boot-strapline em {
font-style: normal;
color: var(--fg);
}
/* Strapline phrase rotation. JS toggles .swapping to fade out, swaps text,
removes the class to fade back in. Brief blur emphasizes the analog feel. */
.boot-strapline.swapping {
opacity: 0.2;
filter: blur(2px);
}
/* Single centered terminal column. Horizontally centered, vertically
top-aligned so the boot reads top-down like a real console. Width is a
readable measure that the ASCII logo, the sim menu, and the signal readout
all share. */
.boot-column {
width: min(100%, 680px);
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: stretch;
gap: clamp(var(--space-4), 2.4vh, var(--space-6));
min-width: 0;
}
/* Secondary readout under the menu: system signal + operator access. */
.boot-aux {
display: flex;
flex-direction: column;
gap: var(--space-4);
min-width: 0;
}
.sys-status {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-1);
width: 100%;
align-content: start;
}
.sys-status-title {
margin: 0;
font-size: 11px;
font-weight: 900;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--fg);
display: flex;
align-items: baseline;
gap: var(--space-3);
}
.sys-status-title::after {
content: "";
flex: 1;
height: 1px;
background: var(--fg-muted);
align-self: center;
}
[data-theme="dos"] .sys-status-title::before {
content: "C:";
color: var(--fg-dim);
font-weight: 700;
letter-spacing: 0;
}
[data-theme="haunted"] .sys-status-title::before {
content: "[?]";
color: var(--fg-dim);
font-weight: 700;
letter-spacing: 0;
}
[data-theme="arcane"] .sys-status-title::before {
content: "[+]";
color: var(--warn);
font-weight: 700;
letter-spacing: 0;
}
.sys-status-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3px clamp(var(--space-5), 4vw, var(--space-8));
font-size: 11px;
margin: 0;
}
/* Classic CLI readout row: key, dotted leader, value (key ......... value). */
.sig-row {
display: flex;
align-items: baseline;
gap: 0.6ch;
min-width: 0;
}
.sig-lead {
flex: 1 1 auto;
align-self: center;
height: 0;
border-bottom: 1px dotted var(--fg-muted);
opacity: 0.55;
min-width: 1.5ch;
transform: translateY(0.08em);
}
.sys-status-key {
flex: 0 0 auto;
color: var(--fg-dim);
letter-spacing: 0.04em;
}
.sys-status-val {
flex: 0 1 auto;
color: var(--fg);
font-weight: 700;
letter-spacing: 0.02em;
min-width: 0;
max-width: 64%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: right;
}
.sys-status-val .sys-ok {
color: var(--fg-dim);
font-weight: 400;
margin-left: var(--space-2);
}
.sys-status-note {
margin: var(--space-2) 0 0;
padding-top: var(--space-2);
border-top: 1px solid var(--fg-muted);
color: var(--fg-dim);
font-size: var(--step-1);
letter-spacing: 0.04em;
line-height: 1.35;
}
/* numbered sim menu */
.sim-menu {
display: flex;
flex-direction: column;
gap: 0;
min-width: 0;
border: 1px solid var(--fg-muted);
background: rgb(var(--fg-rgb) / 0.015);
position: relative;
}
/* Distilled: one prompt header (live label + blinking cursor) and the
selection hint. The old decorative dots, "N modes" count, and the separate
bottom footer were redundant with the rows and the global crt-footer. */
.sim-menu-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-3);
padding: 7px var(--space-4);
border-bottom: 1px solid var(--fg-muted);
background: rgb(var(--fg-rgb) / 0.04);
}
.sim-menu-title {
margin: 0;
font-size: 11px;
font-weight: 900;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--fg);
}
.sim-menu-hint {
margin: 0;
color: var(--fg-muted);
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
}
.sim-menu-list {
display: flex;
flex-direction: column;
gap: 0;
border: none;
position: relative;
overflow: hidden;
background: transparent;
}
[data-theme="haunted"] .sim-menu-list::before,
[data-theme="arcane"] .sim-menu-list::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(90deg, rgb(var(--fg-rgb) / 0.02), transparent 18ch);
}
[data-theme="arcane"] .sim-menu-list::after {
content: none;
position: absolute;
right: var(--space-3);
top: var(--space-2);
color: var(--warn);
opacity: 0.62;
font-weight: 700;
pointer-events: none;
}
.sim-item {
position: relative;
display: grid;
grid-template-columns: 4ch 4ch 1fr;
grid-template-rows: auto auto;
gap: 2px var(--space-3);
align-items: center;
min-height: 44px;
padding: var(--space-2) var(--space-4) var(--space-2) var(--space-6);
border: 0;
border-bottom: 1px solid rgb(var(--fg-rgb) / 0.08);
background: transparent;
color: inherit;
text-align: left;
font: inherit;
cursor: pointer;
transition: background-color var(--t-fast) linear, color var(--t-fast) linear, filter var(--t-fast) linear;
animation: sim-reveal 0.45s var(--ease-quint) both;
animation-delay: calc(540ms + var(--i, 0) * 70ms);
}
.sim-item-primary {
background: rgb(var(--fg-rgb) / 0.04);
}
.sim-item-special {
position: relative;
grid-template-rows: auto auto auto auto;
background:
linear-gradient(90deg, rgb(var(--pulse) / 0.05), transparent 64%);
}
.sim-item-special::after {
content: none;
}
/* Selection caret. Lives in the row's left gutter (absolute, so it never
joins the grid and the per-theme DOS column override stays intact). It is
the single selection indicator for the menu: appears on hover/focus only. */
.sim-item::before {
content: ">";
position: absolute;
left: var(--space-3);
top: 50%;
color: var(--fg);
font-weight: 700;
pointer-events: none;
opacity: 0;
transform: translate(-4px, -50%);
transition:
opacity var(--t-fast) linear,
transform var(--t-base) var(--ease-quart);
}
.sim-item:hover:not(:disabled)::before,
.sim-item:focus-visible::before {
opacity: 1;
transform: translate(0, -50%);
}
[data-theme="blue"] .sim-item:hover:not(:disabled),
[data-theme="blue"] .sim-item:focus-visible {
background:
linear-gradient(90deg, rgb(var(--fg-rgb) / 0.12), rgb(var(--fg-rgb) / 0.045) 42%, transparent),
repeating-linear-gradient(90deg, transparent 0 8ch, rgb(var(--fg-rgb) / 0.028) 8ch 8.1ch, transparent 8.2ch);
}
[data-theme="green"] .sim-item:hover:not(:disabled),
[data-theme="green"] .sim-item:focus-visible {
background:
linear-gradient(90deg, rgb(var(--fg-rgb) / 0.12), transparent 52%),
radial-gradient(circle at 2ch 50%, rgb(var(--fg-rgb) / 0.12), transparent 1.3ch);
}
[data-theme="amber"] .sim-item:hover:not(:disabled),
[data-theme="amber"] .sim-item:focus-visible {
background:
linear-gradient(90deg, rgb(var(--fg-rgb) / 0.11), rgb(var(--pulse) / 0.045) 44%, transparent);
}
[data-theme="red"] .sim-item:hover:not(:disabled),
[data-theme="red"] .sim-item:focus-visible {
background:
linear-gradient(90deg, rgb(var(--fg-rgb) / 0.12), rgb(var(--pulse) / 0.04) 46%, transparent);
}
/* DOS once used a 4-column 8.3-style row (name and description side by side),
which only worked in the old wide right-hand menu. In the centered single
column it cramps the description into a wrapping sliver, so DOS now shares
the base stacked layout (name over description) like every other tube. */
[data-theme="dos"] .sim-item {
grid-template-columns: 4ch 4ch 1fr;
}
[data-theme="haunted"] .sim-item:hover:not(:disabled),
[data-theme="haunted"] .sim-item:focus-visible {
background:
linear-gradient(90deg, rgb(var(--fg-rgb) / 0.12), rgb(var(--fg-rgb) / 0.04) 44%, transparent);
}
[data-theme="arcane"] .sim-item:hover:not(:disabled),
[data-theme="arcane"] .sim-item:focus-visible {
background:
radial-gradient(circle at 2ch 50%, rgb(var(--pulse) / 0.12), transparent 2.7ch),
linear-gradient(90deg, rgb(var(--pulse) / 0.11), rgb(var(--fg-rgb) / 0.06) 46%, transparent);
}
.sim-item:last-child {
border-bottom: 0;
}
.sim-item:hover:not(:disabled),
.sim-item:focus-visible {
outline: none;
background: rgb(var(--fg-rgb) / 0.06);
}
.sim-item:hover:not(:disabled) .sim-glyph,
.sim-item:focus-visible .sim-glyph {
color: var(--fg);
opacity: 1;
}
.sim-item:hover:not(:disabled) .sim-num,
.sim-item:focus-visible .sim-num {
color: var(--fg);
}
.sim-item:hover:not(:disabled) .sim-desc,
.sim-item:focus-visible .sim-desc {
color: var(--fg);
}
.sim-item:hover:not(:disabled) .sim-note,
.sim-item:focus-visible .sim-note {
opacity: 1;
}
.sim-item:focus-visible {
box-shadow: inset 0 0 0 1px var(--fg);
}
.sim-item:disabled {
opacity: 0.4;
cursor: default;
}
.sim-glyph {
color: var(--fg-muted);
font-weight: 400;
letter-spacing: 0;
font-variant-numeric: tabular-nums;
grid-row: 1 / span 2;
grid-column: 1;
transition: color var(--t-fast) linear;
opacity: 0.7;
}
.sim-num {
color: var(--fg-dim);
font-weight: 400;
letter-spacing: 0.02em;
grid-row: 1 / span 2;
grid-column: 2;
font-size: 0.92em;
}
.sim-name {
color: var(--fg);
font-weight: 700;
font-size: 1em;
letter-spacing: 0.04em;
grid-row: 1;
grid-column: 3;
text-transform: uppercase;
}
.sim-badge {
color: var(--warn);
font-size: 0.68em;
font-style: normal;
font-weight: 900;
letter-spacing: 0.11em;
margin-left: var(--space-2);
text-transform: uppercase;
vertical-align: 0.08em;
}
.sim-desc {
color: var(--fg-muted);
font-weight: 400;
font-size: 0.85em;
letter-spacing: 0.01em;
grid-row: 2;
grid-column: 3;
line-height: 1.3;
}
/* Sample-prompt hint. The row height is reserved at rest so hover/focus does
not shift the menu while still teaching the vocabulary of each mode. */
.sim-sample {
grid-row: 2;
grid-column: 3 / span 2;
color: var(--fg-muted);
font-size: 0.88em;
letter-spacing: 0;
opacity: 0.54;
max-height: 1.35em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
transition:
opacity var(--t-fast) linear,
color var(--t-fast) linear;
}
.sim-note {
grid-row: 3;
grid-column: 3 / span 2;
color: var(--warn);
font-size: 0.8em;
letter-spacing: 0.04em;
text-transform: uppercase;
opacity: 0.92;
}
.sim-item-special .sim-name {
grid-column: 3 / span 2;
white-space: normal;
overflow-wrap: anywhere;
line-height: 1.15;
}
.sim-item-special .sim-desc {
grid-row: 2;
grid-column: 3 / span 2;
}
.sim-item-special .sim-sample {
grid-row: 3;
grid-column: 3 / span 2;
}
.sim-item-special .sim-note {
grid-row: 4;
grid-column: 3 / span 2;
}
.sim-item:hover:not(:disabled) .sim-sample,
.sim-item:focus-visible .sim-sample {
opacity: 1;
color: var(--fg-dim);
}
/* The live prompt cursor, now trailing the header title. One ambient motion
accent for the "awaiting selection" feel. */
.sim-menu-cursor {
color: var(--fg);
font-weight: 400;
margin-left: 0.15ch;
animation: prompt-blink 1.1s step-end infinite;
}
@keyframes prompt-blink {
0%, 100% { opacity: 0.9; }
50% { opacity: 0; }
}
[data-theme="arcane"] .sim-menu-cursor {
color: var(--warn);
}
/* -------- BOOT AUTH PANEL (sign in / sign up / guest) -------- */
.boot-auth-panel {
margin-top: var(--space-2);
padding: var(--space-2) 0;
position: relative;
animation: sim-reveal 0.5s var(--ease-quint) both;
animation-delay: 1200ms;
white-space: normal;
}
.boot-auth-panel::before {
content: none;
}
.boot-auth-signed-in {
padding: var(--space-3) var(--space-5);
}
.auth-panel-header {
margin-bottom: var(--space-4);
}
.auth-panel-title {
margin: 0;
font-size: var(--step-1);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--fg-dim);
}
.auth-panel-hint {
margin: var(--space-1) 0 0;
color: var(--fg-muted);
font-size: var(--step-1);
letter-spacing: 0.02em;
}
.auth-form-container {
display: flex;
flex-direction: column;
gap: var(--space-4);
align-items: stretch;
}
.auth-form {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.auth-input-group {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.auth-label {
font-size: var(--step-1);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg-dim);
}
.auth-input {
background: rgb(var(--fg-rgb) / 0.04);
border: 1px solid var(--line-strong);
color: var(--fg);
font: inherit;
font-size: var(--step-1);
padding: var(--space-2) var(--space-3);
letter-spacing: 0.02em;
transition: border-color var(--t-fast) linear, background var(--t-fast) linear;
}
.auth-input:focus-visible {
outline: none;
border-color: var(--line-strong);
background: rgb(var(--fg-rgb) / 0.08);
box-shadow: 0 0 0 3px rgb(var(--fg-rgb) / 0.12);
}
.auth-input::placeholder {
color: var(--fg-muted);
opacity: 0.6;
}
.auth-actions {
display: flex;
gap: var(--space-3);
margin-top: var(--space-1);
}
.auth-btn {
background: transparent;
border: 1px solid var(--line-strong);
color: var(--fg);
font: inherit;
font-size: var(--step-1);
font-weight: 700;
letter-spacing: 0.06em;
padding: var(--space-2) var(--space-4);
cursor: pointer;
transition: background var(--t-fast) linear, border-color var(--t-fast) linear, color var(--t-fast) linear;
white-space: nowrap;
}
.auth-btn:hover:not(:disabled) {
background: rgb(var(--fg-rgb) / 0.12);
border-color: var(--fg);
}
.auth-btn:focus-visible {
outline: none;
box-shadow: inset 0 0 0 1px var(--fg);
}
.auth-btn:active:not(:disabled) {
background: rgb(var(--fg-rgb) / 0.18);
}
.auth-btn:disabled {
opacity: 0.5;
cursor: default;
}
.auth-btn-primary {
background: rgb(var(--fg-rgb) / 0.1);
border-color: var(--fg-dim);
}
.auth-btn-primary:hover:not(:disabled) {
background: rgb(var(--fg-rgb) / 0.16);
}
.auth-link,
.auth-link-btn {
background: none;
border: none;
color: var(--fg-dim);
font: inherit;
font-size: inherit;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 0.18em;
padding: 0;
letter-spacing: 0.02em;
transition: color var(--t-fast) linear;
}
.auth-link:hover,
.auth-link-btn:hover {
color: var(--fg);
}
.auth-link:focus-visible,
.auth-link-btn:focus-visible {
outline: none;
box-shadow: 0 1px 0 var(--fg);
}
/* Inline auth feedback. CRT-native leading markers, never a side-stripe border
(see DESIGN.md, which reserves the warn-line stripe for terminal lines). */
.auth-error,
.auth-success {
font-size: var(--step-1);
font-weight: 600;
letter-spacing: 0.02em;
padding: var(--space-1) 0;
overflow: hidden;
text-overflow: ellipsis;
overflow-wrap: break-word;
max-height: 4em;
}
.auth-error {
color: var(--warn);
}
.auth-error::before {
content: "! ";
font-weight: 800;
}
.auth-success {
color: var(--fg);
}
.auth-success::before {
content: ":: ";
color: var(--fg-dim);
}
/* Auth status row (signed in state) */
.auth-status-row {
display: flex;
align-items: center;
gap: var(--space-3);
font-size: var(--step-1);
}
.auth-status-indicator {
color: var(--fg);
font-size: 0.65em;
animation: auth-pulse 2.4s var(--ease-quart) infinite;
}
@keyframes auth-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.auth-status-label {
color: var(--fg-dim);
letter-spacing: 0.06em;
text-transform: uppercase;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.auth-status-label strong {
color: var(--fg);
font-weight: 800;
}
.auth-signout-btn {
background: none;
border: none;
color: var(--fg-muted);
font: inherit;
font-size: inherit;
cursor: pointer;
letter-spacing: 0.04em;
padding: var(--space-1) var(--space-2);
margin-left: auto;
transition: color var(--t-fast) linear;
}
.auth-signout-btn:hover {
color: var(--warn);
}
.auth-signout-btn:focus-visible {
outline: none;
box-shadow: inset 0 0 0 1px var(--fg);
}
/* Responsive: stack the auth action buttons on narrow viewports. */
@media (max-width: 900px) {
.auth-actions {
flex-direction: column;
}
.auth-btn {
width: 100%;
text-align: center;
}
}
.sim-item:hover:not(:disabled) .sim-glyph,
.sim-item:focus-visible .sim-glyph {
color: var(--fg);
}
[data-theme="dos"] .sim-item:hover:not(:disabled) .sim-glyph,
[data-theme="dos"] .sim-item:focus-visible .sim-glyph {
color: var(--black);
background: var(--fg);
text-shadow: none;
}
[data-theme="haunted"] .sim-item:hover:not(:disabled) .sim-glyph,
[data-theme="haunted"] .sim-item:focus-visible .sim-glyph {
color: color-mix(in srgb, var(--fg) 72%, var(--warn));
transform: translateX(-0.18ch);
}
[data-theme="arcane"] .sim-item:hover:not(:disabled) .sim-glyph,
[data-theme="arcane"] .sim-item:focus-visible .sim-glyph {
color: var(--warn);
transform: translateY(-0.05em);
}
@keyframes sim-reveal {
0% { opacity: 0; transform: translateY(6px); filter: blur(3px); }
100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
/* legacy button-line + sim-buttons for buttons() helper */
.button-line {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
align-items: center;
margin: var(--space-2) 0 var(--space-3);
}
.terminal-button {
min-height: 30px;
padding: 0 var(--space-3);
font-weight: 700;
letter-spacing: 0.02em;
border: 1px solid var(--line);
background: transparent;
color: var(--fg);
}
.terminal-button:hover:not(:disabled) {
background: var(--fg);
color: var(--black);
animation: glitch 0.18s steps(2) 1;
}
.terminal-button:focus-visible {
outline: 1px solid var(--fg);
outline-offset: 2px;
}
@keyframes glitch {
0% { transform: translateX(-1px); }
50% { transform: translateX(2px); }
100% { transform: translateX(0); }
}
/* -------- COMMAND FORM -------- */
.command-form {
display: flex;
align-items: flex-start;
gap: var(--space-2);
padding: var(--space-3) 0 0;
position: relative;
z-index: 2;
border-top: 1px solid var(--fg-muted);
transition: border-color var(--t-fast) var(--ease-quart);
}
.prompt-row {
display: flex;
flex: 1;
min-width: 0;
align-items: flex-start;
position: relative;
}
#promptLabel {
flex: 0 0 auto;
min-height: 1.3em;
white-space: nowrap;
font-weight: 700;
}
#commandInput {
flex: 1;
min-width: 0;
color: var(--fg);
background: transparent;
border: 0;
border-bottom: 1px solid transparent;
outline: none;
resize: none;
min-height: 1.3em;
max-height: 36vh;
padding: 0 0 0 1ch;
caret-color: var(--fg);
transition: border-color var(--t-fast) var(--ease-quart);
}
#commandInput:focus-visible {
border-bottom-color: var(--line-strong);
box-shadow: 0 1px 0 rgb(var(--fg-rgb) / 0.2);
}
.loader {
width: 11ch;
min-height: 1.3em;
color: var(--fg-dim);
}
.loader.active::before {
content: var(--loader-frame-0);
animation: loadbar 720ms steps(1) infinite;
letter-spacing: 0.04em;
}
[data-theme="dos"] .loader { width: 4ch; }
[data-theme="haunted"] .loader { color: color-mix(in srgb, var(--fg-dim) 72%, var(--warn)); }
[data-theme="arcane"] .loader { color: var(--warn); }
@keyframes loadbar {
0% { content: var(--loader-frame-0); }
16% { content: var(--loader-frame-1); }
32% { content: var(--loader-frame-2); }
48% { content: var(--loader-frame-3); }
64% { content: var(--loader-frame-4); }
80% { content: var(--loader-frame-5); }
}
/* fx-cursor: blinking ▮ trailing the prompt label when input is idle */
.app.fx-cursor #promptLabel:not(:empty)::after {
content: " ▮";
color: var(--fg);
animation: cursor-blink 1s steps(2) infinite;
pointer-events: none;
margin-left: -0.25ch;
}
.app.fx-cursor .prompt-row:focus-within #promptLabel::after {
content: "";
animation: none;
}
@keyframes cursor-blink {
0%, 50% { opacity: 1; }
50.01%, 100% { opacity: 0; }
}
/* -------- CRT FOOTER -------- */
.crt-footer {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr auto;
gap: var(--space-6);
align-items: center;
padding: 0 var(--space-6);
border-top: 1px solid var(--fg-muted);
font-size: var(--step-1);
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 700;
color: var(--fg-muted);
user-select: none;
}
.ftr-hints {
display: flex;
gap: var(--space-3);
align-items: center;
}
.ftr-hint {
display: inline-flex;
align-items: baseline;
gap: var(--space-2);
color: var(--fg-dim);
}
/* Status-line dividers between keybind groups (tmux / mc style bar). */
.ftr-hint:not(:last-child)::after {
content: "\2502";
margin-left: var(--space-3);
color: var(--fg-muted);
font-weight: 400;
opacity: 0.6;
}
.crt-footer kbd {
font: inherit;
color: var(--fg-dim);
border: 1px solid var(--fg-muted);
padding: 0 var(--space-1);
letter-spacing: 0;
font-weight: 700;
}
.ftr-actions {
display: flex;
gap: var(--space-5);
align-items: center;
}
.ftr-btn {
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg-dim);
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
transition: color var(--t-fast) linear;
}
.ftr-btn:hover { color: var(--fg); }
.ftr-btn:focus-visible {
outline: 1px solid var(--fg);
outline-offset: 2px;
}
/* -------- GLOW + BLOOM -------- */
.app.fx-glow .terminal,
.app.fx-glow .banner,
.app.fx-glow #promptLabel,
.app.fx-glow #commandInput,
.app.fx-glow .hdr-wordmark,
.app.fx-glow .hdr-suffix,
.app.fx-glow .hdr-meta strong,
.app.fx-glow .crt-footer strong,
.app.fx-glow .sys-status-val,
.app.fx-glow .sys-status-title,
.app.fx-glow .sim-menu-title,
.app.fx-glow .sim-name,
.app.fx-glow .sim-num,
.app.fx-glow .terminal-button,
.app.fx-glow .ftr-btn:hover,
.app.fx-glow .options-dialog {
text-shadow: var(--glow);
}
.app.fx-glow .hdr-tab[aria-selected="true"],
.app.fx-glow .hdr-tab.active {
text-shadow: none;
}
.app.fx-bloom .crt-header,
.app.fx-bloom .crt-footer,
.app.fx-bloom .options-dialog {
box-shadow: var(--bloom);
}
.app.fx-bloom .sim-menu-list,
.app.fx-bloom .terminal-button:not(:disabled) {
box-shadow: var(--box-glow);
}
/* -------- CHROMA FRINGE (hero text only) -------- */
.app.fx-chroma .banner,
.app.fx-chroma .hdr-wordmark {
text-shadow:
-0.9px 0 0 rgb(255 0 80 / 0.36),
0.9px 0 0 rgb(0 220 255 / 0.36),
var(--glow);
}
/* -------- CLIENT VIEW -------- */
.client-toolbar {
display: grid;
grid-template-columns: auto auto minmax(0, 1fr) auto auto auto;
gap: var(--space-2);
align-items: center;
min-width: 0;
}
.client-title {
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
font-size: var(--step-1);
white-space: nowrap;
}
.client-nav {
display: inline-flex;
flex-wrap: wrap;
gap: 1px;
border: 1px solid var(--line);
background: rgb(var(--fg-rgb) / 0.04);
width: max-content;
min-width: 0;
}
.client-nav button {
width: 32px;
height: 32px;
padding: 0;
border: 0;
border-right: 1px solid rgb(var(--fg-rgb) / 0.28);
background: transparent;
color: var(--fg);
font: 900 16px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
display: grid;
place-items: center;
}
.client-nav button:last-child {
border-right: 0;
}
.client-nav button:hover:not(:disabled),
.client-nav button:focus-visible {
background: var(--fg);
color: var(--black);
outline: none;
}
.client-nav button:disabled {
color: var(--fg-muted);
opacity: 0.45;
cursor: not-allowed;
}
/* Read the seven-button strip as two clusters: navigation
(back/forward/reload/home) then page actions (improve/save/share). Home
drops its trailing divider and the actions cluster starts after a single
gap, so the eye parses 4 + 3 instead of one undifferentiated row. */
#clientHome {
border-right: 0;
}
#clientImprove {
margin-inline-start: var(--space-3);
}
#clientAddress {
min-width: 0;
color: var(--fg);
background: rgb(var(--fg-rgb) / 0.08);
border: 1px solid var(--line);
height: 36px;
padding: 0 var(--space-3);
transition: border-color var(--t-fast) var(--ease-quart);
}
#clientAddress:focus-visible {
outline: none;
border-color: var(--line-strong);
box-shadow: 0 0 0 3px rgb(var(--fg-rgb) / 0.12);
}
#clientGo {
height: 36px;
min-width: 54px;
padding: 0 var(--space-3);
border: 1px solid var(--line);
background: transparent;
font-weight: 900;
letter-spacing: 0.1em;
}
#clientGo:hover {
background: var(--fg);
color: var(--black);
}
#clientGo:focus-visible {
outline: 1px solid var(--fg);
outline-offset: 2px;
}
.client-content {
flex: 1;
min-height: 0;
overflow: hidden; /* critical: prevents the iframe content from ever affecting document scroll */
position: relative;
/* gives the simulated website as much vertical real estate as possible */
}
.client-frame {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 1px solid var(--line);
background: rgb(var(--fg-rgb) / 0.04);
display: block;
}
.client-engine {
color: var(--fg-dim);
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
border: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.app.fx-glow .client-engine {
text-shadow: var(--glow);
}
.client-live-toggle {
height: 36px;
display: inline-grid;
grid-template-columns: auto auto;
align-items: center;
gap: var(--space-2);
padding: 0 var(--space-2);
border: 1px solid var(--line);
color: var(--fg-dim);
background: rgb(var(--fg-rgb) / 0.035);
font-size: 0.74em;
font-weight: 900;
letter-spacing: 0.1em;
user-select: none;
}
.client-live-toggle input {
width: 13px;
height: 13px;
margin: 0;
accent-color: var(--fg);
}
.client-live-toggle:focus-within,
.client-live-toggle:hover {
color: var(--fg);
border-color: var(--line-strong);
background: rgb(var(--fg-rgb) / 0.08);
}
.client-statusbar {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
gap: var(--space-3);
align-items: center;
min-height: 24px;
padding: var(--space-1) var(--space-3);
border-top: 1px solid rgb(var(--fg-rgb) / 0.18);
border-bottom: 1px solid var(--line);
color: var(--fg-dim);
background: rgb(var(--fg-rgb) / 0.025);
font-size: 0.66em;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.client-statusbar span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.client-statusbar strong {
color: var(--fg);
font-weight: 900;
}
.client-statusbar .client-notice {
color: var(--warn);
}
.client-examples {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
padding: var(--space-1) var(--space-3);
font-size: 0.68em;
letter-spacing: 0.04em;
color: var(--fg-dim);
border-bottom: 1px solid var(--line);
background: rgb(var(--fg-rgb) / 0.03);
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
min-height: 32px; /* compact but usable */
}
.client-examples:empty {
display: none;
}
/* When the user has loaded a site in the Client, we can compact the examples bar to give maximum vertical real estate to the website preview (layout + polish for immersion). */
.client-view.compact-examples .client-examples {
display: none;
}
.client-examples .ex-label {
color: var(--fg-dim);
padding-right: var(--space-1);
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.12em;
}
.client-examples button {
flex: 0 0 auto;
height: 20px;
padding: 0 var(--space-2);
font-size: 0.95em;
letter-spacing: 0.02em;
border: 1px solid var(--line);
background: transparent;
color: var(--fg);
max-width: min(34ch, 28vw);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.client-examples button.is-hot::before {
content: "♦ ";
color: var(--warn);
}
.client-examples button.is-saved::before {
content: "▣ ";
color: var(--fg);
}
.client-nav button.is-saved {
color: var(--warn);
border-color: var(--line-strong);
text-shadow: var(--glow);
}
.latent-loading-banner {
font-size: 11px;
line-height: 1.02;
letter-spacing: 0.5px;
color: var(--fg);
text-shadow: var(--glow);
white-space: pre;
text-align: center;
padding: var(--space-2) 0;
user-select: none;
filter: contrast(1.1) saturate(1.2);
}
/* Extend the warm-tube breath and glitch to the latent loading banner (same system as ConsoleQuest logo) */
.latent-loading-banner.banner:not(.glitching) {
animation: banner-breath 4.2s var(--ease-out-quart) infinite;
}
.latent-loading-banner.glitching {
filter: contrast(1.2) saturate(1.55) brightness(1.12) hue-rotate(2deg);
animation: banner-glitch-jitter 70ms infinite linear;
text-shadow:
0 0 2px var(--fg),
0 0 6px var(--fg),
1px 0 0 rgb(255 80 120 / 0.35),
-1px 0 0 rgb(80 200 255 / 0.35);
}
/* Reduced motion: disable breath/glitch jitter on the latent banner too */
@media (prefers-reduced-motion: reduce) {
.latent-loading-banner {
animation: none !important;
transition: opacity 160ms linear, filter 160ms linear !important;
}
}
.client-examples button:hover {
background: var(--fg);
color: var(--black);
border-color: var(--fg);
}
.client-examples button:focus-visible {
outline: 1px solid var(--fg);
outline-offset: 2px;
}
.client-examples .recent-sep {
color: var(--fg-muted);
padding: 0 var(--space-1);
}
.client-advanced {
grid-column: 1 / -1;
min-width: 0;
}
.client-advanced summary {
min-height: 32px;
display: flex;
align-items: center;
color: var(--fg);
cursor: pointer;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.client-advanced summary:hover,
.client-advanced summary:focus-visible {
color: var(--black);
background: var(--fg);
outline: none;
}
.client-advanced-grid {
margin-top: var(--space-2);
}
.client-advanced-section {
padding-top: 0;
}
/* Delight micro-interactions for the Web Sim chrome (transmit, punch, tune-in, manifest pulse).
All motion is phosphor/analog in character, low-intensity, and fully disabled under prefers-reduced-motion. */
.client-toolbar.transmitting {
position: relative;
}
.client-toolbar.transmitting::after {
content: "";
position: absolute;
inset: -1px;
background: linear-gradient(
90deg,
transparent 0%,
rgb(var(--fg-rgb) / 0.18) 20%,
rgb(var(--fg-rgb) / 0.32) 50%,
rgb(var(--fg-rgb) / 0.18) 80%,
transparent 100%
);
background-size: 220% 100%;
animation: client-transmit-sweep 380ms var(--ease-out-quart, linear) forwards;
pointer-events: none;
mix-blend-mode: screen;
}
@keyframes client-transmit-sweep {
0% { background-position: 220% 0; }
100% { background-position: -120% 0; }
}
.client-examples button.punch {
transform: scale(0.92);
filter: brightness(1.45) saturate(1.1);
transition: transform 80ms linear, filter 80ms linear;
}
.client-frame.tune-in {
animation: client-tune-in 620ms var(--ease-out-quart, ease) forwards;
}
@keyframes client-tune-in {
0% { filter: contrast(1.6) brightness(1.25) saturate(0.6); }
18% { filter: contrast(1.15) brightness(1.08) saturate(0.85); }
42% { filter: contrast(0.95) brightness(0.92) saturate(1.15); }
68% { filter: contrast(1.05) brightness(1.02) saturate(0.95); }
100% { filter: none; }
}
.client-engine.manifested {
color: var(--fg);
text-shadow: var(--glow);
}
/* Reduced-motion safety for all new Web Sim delights */
@media (prefers-reduced-motion: reduce) {
.client-toolbar.transmitting::after,
.client-examples button.punch,
.client-frame.tune-in,
.client-engine.manifested {
animation: none !important;
transition: none !important;
transform: none !important;
filter: none !important;
}
}
/* -------- OPTIONS DIALOG: flat terminal readout -------- */
.options-dialog {
color: var(--fg);
background: var(--bg-deep);
border: 1px solid var(--line-strong);
width: min(860px, calc(100vw - 32px));
max-height: min(86vh, 820px);
padding: 0;
animation: dialog-enter 0.32s var(--ease-quint) both;
}
@keyframes dialog-enter {
0% { opacity: 0; transform: translateY(8px) scale(0.97); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
.options-dialog::backdrop {
background: rgb(0 0 0 / 0.7);
backdrop-filter: blur(2px);
animation: backdrop-enter 0.32s var(--ease-quart) both;
}
@keyframes backdrop-enter {
0% { opacity: 0; }
100% { opacity: 1; }
}
.options-form {
display: flex;
flex-direction: column;
max-height: min(86vh, 820px);
overflow-y: auto;
scrollbar-color: var(--line-strong) transparent;
}
.options-header {
position: sticky;
top: 0;
z-index: 3;
display: flex;
flex: 0 0 auto;
align-items: baseline;
justify-content: space-between;
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--fg-muted);
background: var(--bg-deep);
gap: var(--space-4);
flex-wrap: wrap;
}
.options-header h2 {
margin: 0;
font-size: var(--step-2);
font-weight: 900;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.options-subtitle {
font-weight: 400;
letter-spacing: 0.08em;
color: var(--fg-dim);
text-transform: none;
}
.options-close {
background: transparent;
border: 0;
color: var(--fg-dim);
font: inherit;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0;
cursor: pointer;
transition: color var(--t-fast) linear;
}
.options-close:hover { color: var(--fg); }
.options-close:focus-visible {
outline: 1px solid var(--fg);
outline-offset: 2px;
}
.options-tabs {
position: sticky;
top: 57px;
z-index: 2;
display: flex;
flex: 0 0 auto; /* never let the scrolling form column shrink the tab strip */
flex-wrap: nowrap;
gap: 0;
padding: var(--space-2) var(--space-5);
border-bottom: 1px solid var(--fg-muted);
background: color-mix(in srgb, var(--bg-deep) 92%, var(--fg) 8%);
/* A terminal tab strip stays on one line and scrolls sideways on narrow
screens instead of wrapping into a ragged grid. */
overflow-x: auto;
scrollbar-width: none;
overscroll-behavior-x: contain;
}
.options-tabs::-webkit-scrollbar {
display: none;
}
.options-tab {
flex: 0 0 auto;
min-height: 34px;
padding: 0 var(--space-3);
background: transparent;
border: 0;
border-right: 1px solid var(--fg-muted);
color: var(--fg-dim);
font: inherit;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: lowercase;
white-space: nowrap;
cursor: pointer;
}
.options-tab:first-child {
border-left: 1px solid var(--fg-muted);
}
.options-tab:hover,
.options-tab:focus-visible {
color: var(--fg);
background: rgb(var(--fg-rgb) / 0.08);
outline: none;
}
.options-tab[aria-selected="true"] {
color: var(--fg);
background: rgb(var(--fg-rgb) / 0.13);
box-shadow: inset 0 -2px 0 var(--fg);
}
.options-panel[hidden] {
display: none;
}
.options-section {
padding: var(--space-5);
border-bottom: 1px solid var(--fg-muted);
}
.options-section:last-child {
border-bottom: 0;
}
.options-section-title {
margin: 0 0 var(--space-4);
color: var(--fg-dim);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: lowercase;
font-size: var(--step-2);
white-space: pre;
cursor: pointer;
user-select: none;
}
.options-section-title::after {
content: " [v]";
color: var(--fg-dim);
font-weight: 400;
letter-spacing: 0;
}
.options-section.collapsed .options-section-title::after {
content: " [>]";
}
.options-section.collapsed > :not(.options-section-title) {
display: none;
}
.options-section.collapsed .options-section-title {
margin-bottom: 0;
}
.theme-list,
.effect-list {
display: flex;
flex-direction: column;
gap: 0;
}
.theme-row,
.effect-row {
display: grid;
align-items: center;
gap: 0 var(--space-3);
padding: var(--space-3) var(--space-4);
border: 0;
background: transparent;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
transition:
background-color var(--t-fast) linear,
border-color var(--t-fast) linear,
box-shadow var(--t-fast) linear,
color var(--t-fast) linear,
transform var(--t-fast) var(--ease-quart);
}
.theme-row {
grid-template-columns: 4ch 2ch 14ch 1fr;
}
.effect-row {
grid-template-columns: 4ch 18ch 1fr;
}
.theme-row:hover,
.effect-row:hover {
background: rgb(var(--fg-rgb) / 0.09);
box-shadow: inset 0 0 0 1px rgb(var(--fg-rgb) / 0.12);
transform: translateX(1px);
}
.theme-row:focus-visible,
.effect-row:focus-visible,
.effect-row:focus-within {
outline: none;
background: rgb(var(--fg-rgb) / 0.14);
box-shadow: inset 0 0 0 1px rgb(var(--fg-rgb) / 0.22);
}
/* Active/checked rows get a persistent subtle tint for tactile feedback (respects flat CRT, no chips) */
.effect-row:has(input:checked) {
background: rgb(var(--fg-rgb) / 0.05);
}
.effect-row:has(input:checked):hover {
background: rgb(var(--fg-rgb) / 0.11);
}
.theme-marker,
.effect-marker {
color: var(--fg-dim);
font-weight: 700;
transition: color var(--t-fast) linear;
font-variant-numeric: tabular-nums;
}
.theme-row[aria-checked="true"] .theme-marker,
.effect-row:has(input:checked) .effect-marker {
color: var(--fg);
}
.theme-row[aria-checked="true"] {
background:
radial-gradient(circle at 5ch 50%, rgb(var(--pulse) / 0.09), transparent 3.4ch),
linear-gradient(90deg, rgb(var(--fg-rgb) / 0.13), rgb(var(--fg-rgb) / 0.05) 48%, transparent);
box-shadow: inset 0 0 0 1px rgb(var(--fg-rgb) / 0.18);
}
.theme-row[aria-checked="true"] .theme-name {
color: var(--fg);
text-shadow: var(--glow);
}
.theme-row[aria-checked="true"] .theme-desc {
color: color-mix(in srgb, var(--fg-dim) 75%, var(--fg));
}
.theme-swatch {
display: inline-block;
width: 1ch;
text-align: center;
font-weight: 900;
font-size: 1.1em;
line-height: 1;
transition:
color var(--t-base) linear,
filter var(--t-base) linear,
transform var(--t-fast) var(--ease-quart);
text-shadow:
0 0 0.8px currentColor,
0 0 5px currentColor;
}
.theme-row:hover .theme-swatch,
.theme-row:focus-visible .theme-swatch {
filter: brightness(1.18) saturate(1.08);
transform: translateY(-0.04em);
}
.theme-row[aria-checked="true"] .theme-swatch {
animation: theme-swatch-lock 1.8s steps(2) infinite;
}
@keyframes theme-swatch-lock {
0%, 100% { opacity: 1; filter: brightness(1); }
50% { opacity: 0.72; filter: brightness(1.18); }
}
.theme-swatch--blue { color: rgb(125 200 255); }
.theme-swatch--green { color: rgb(189 247 121); }
.theme-swatch--amber { color: rgb(255 180 94); }
.theme-swatch--red { color: rgb(255 139 121); }
.theme-swatch--dos { color: rgb(190 198 214); }
.theme-swatch--haunted { color: rgb(166 239 194); }
.theme-swatch--arcane { color: rgb(230 210 137); }
.theme-name,
.effect-name {
font-weight: 700;
letter-spacing: 0.04em;
color: var(--fg);
transition: color var(--t-fast) linear, text-shadow var(--t-fast) linear;
}
.theme-desc,
.effect-desc {
color: var(--fg-dim);
font-size: 0.92em;
transition: color var(--t-fast) linear;
}
.effect-row input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
overflow: hidden;
clip-path: inset(50%);
}
.option-toggle {
display: grid;
grid-template-columns: 4ch 1fr;
align-items: center;
gap: 0 var(--space-2);
min-height: 36px;
padding: var(--space-2) var(--space-3);
background: rgb(var(--fg-rgb) / 0.05);
border: 1px solid var(--line);
color: var(--fg-dim);
cursor: pointer;
}
.option-toggle:hover,
.option-toggle:focus-within {
background: rgb(var(--fg-rgb) / 0.1);
border-color: var(--line-strong);
}
.option-toggle input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
overflow: hidden;
clip-path: inset(50%);
}
.option-toggle-marker {
color: var(--fg-dim);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.option-toggle:has(input:checked) {
color: var(--fg);
background: rgb(var(--fg-rgb) / 0.08);
}
.option-toggle:has(input:checked) .option-toggle-marker {
color: var(--fg);
}
.model-row {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-4);
align-items: center;
}
.model-label {
color: var(--fg-dim);
letter-spacing: 0.06em;
}
.model-select {
width: 100%;
padding: var(--space-2) var(--space-3);
background: var(--bg);
color: var(--fg);
border: 1px solid var(--line);
}
/* Drop the native chevron and draw a phosphor one with two gradients (theme
colored via --fg-dim). Scoped to