/* castaliaos.com — retro theme layer on top of iVOLT 1.0. Three "eras" reskin the whole site through the data-cs-era attribute on : dos text mode, 16 VGA colours, amber on blue, CP437 double-line windows 92 early-nineties desktop: teal ground, grey bevelled windows, navy title bars 98 late-nineties desktop: blue ground, warm grey windows, gradient title bars Every iVOLT token the site relies on is overridden per era; everything prefixed cs- is ours. */ /* ---------- Fonts (OFL, self-hosted) ---------- */ @font-face { font-family: "Press Start 2P"; src: url("/fonts/PressStart2P-Regular.woff2") format("woff2"); font-display: swap; } @font-face { font-family: "VT323"; src: url("/fonts/VT323-Regular.woff2") format("woff2"); font-display: swap; } @font-face { font-family: "Silkscreen"; src: url("/fonts/Silkscreen-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Silkscreen"; src: url("/fonts/Silkscreen-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; } @font-face { font-family: "Inter"; src: url("/fonts/Inter-variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; } @layer castalia { /* ---------- Shared knobs ---------- */ :root { --cs-font-pixel: "Press Start 2P", "Silkscreen", monospace; --cs-font-term: "VT323", "Courier New", monospace; --cs-font-bitmap: "Silkscreen", "Press Start 2P", monospace; --cs-font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --cs-vga-black: #000000; --cs-vga-blue: #0000AA; --cs-vga-green: #00AA00; --cs-vga-cyan: #00AAAA; --cs-vga-red: #AA0000; --cs-vga-magenta: #AA00AA; --cs-vga-brown: #AA5500; --cs-vga-lgray: #AAAAAA; --cs-vga-dgray: #555555; --cs-vga-lblue: #5555FF; --cs-vga-lgreen: #55FF55; --cs-vga-lcyan: #55FFFF; --cs-vga-lred: #FF5555; --cs-vga-lmagenta: #FF55FF; --cs-vga-yellow: #FFFF55; --cs-vga-white: #FFFFFF; --cs-px: 2px; --iv-radius-sm: 0; --iv-radius-md: 0; --iv-radius-lg: 0; --iv-radius-full: 0; --iv-blur-sm: 0; --iv-blur-md: 0; --iv-blur-lg: 0; --iv-texture-grain-opacity: 0; --iv-motion-fast: 80ms; --iv-motion-base: 140ms; --iv-motion-slow: 260ms; --iv-ease-out: steps(4, end); --iv-focus-width: 2px; --iv-focus-offset: 2px; } /* ---------- Era: DOS (default) ---------- */ :root, :root[data-cs-era="dos"] { color-scheme: dark; --cs-bg: #000033; --cs-field: var(--cs-vga-blue); --cs-panel: var(--cs-vga-lgray); --cs-panel-text: var(--cs-vga-black); --cs-ink: var(--cs-vga-lgray); --cs-ink-strong: var(--cs-vga-white); --cs-accent: var(--cs-vga-yellow); --cs-accent-2: var(--cs-vga-lcyan); --cs-line: var(--cs-vga-lgray); --cs-shadow: rgba(0, 0, 0, .65); --cs-title-bg: var(--cs-vga-lgray); --cs-title-fg: var(--cs-vga-blue); --cs-font-display: var(--cs-font-pixel); --cs-font-body: var(--cs-font-term); --cs-body-size: 1.3rem; --cs-body-leading: 1.2; --iv-color-bg: var(--cs-bg); --iv-color-surface: #000044; --iv-color-surface-raised: var(--cs-vga-blue); --iv-color-text: var(--cs-vga-lgray); --iv-color-text-muted: #8f8fb0; --iv-color-border: var(--cs-vga-dgray); --iv-color-border-strong: var(--cs-vga-lgray); --iv-color-primary: var(--cs-vga-yellow); --iv-color-on-primary: var(--cs-vga-blue); --iv-color-primary-hover: var(--cs-vga-white); --iv-color-primary-active: #d8d840; --iv-color-primary-subtle: #1a1a66; --iv-color-primary-border: var(--cs-vga-yellow); --iv-color-accent: var(--cs-vga-lcyan); --iv-color-on-accent: var(--cs-vga-black); --iv-color-info: var(--cs-vga-lcyan); --iv-color-success: var(--cs-vga-lgreen); --iv-color-warning: var(--cs-vga-yellow); --iv-color-danger: var(--cs-vga-lred); --iv-color-focus: var(--cs-vga-yellow); --iv-color-hover-surface: #000066; --iv-color-overlay: rgba(0, 0, 20, .82); --iv-glass-bg: var(--cs-vga-blue); --iv-glass-bg-strong: var(--cs-vga-blue); --iv-glass-border: var(--cs-vga-lgray); --iv-glass-highlight: transparent; --iv-shadow-1: 4px 4px 0 var(--cs-shadow); --iv-shadow-2: 6px 6px 0 var(--cs-shadow); --iv-shadow-3: 10px 10px 0 var(--cs-shadow); --iv-shadow-ambient: none; --iv-glow-primary: none; --iv-glow-secondary: none; --iv-gradient-brand: linear-gradient(90deg, var(--cs-vga-yellow), var(--cs-vga-lcyan)); --iv-gradient-primary: var(--cs-vga-yellow); --iv-font-sans: var(--cs-font-term); --iv-font-mono: var(--cs-font-term); --iv-focus-halo: none; } /* ---------- Era: 92 ---------- */ :root[data-cs-era="92"] { color-scheme: light; --cs-bg: #008080; --cs-field: #008080; --cs-panel: #C0C0C0; --cs-panel-text: #000000; --cs-ink: #000000; --cs-ink-strong: #000000; --cs-accent: #000080; --cs-accent-2: #800000; --cs-line: #000000; --cs-shadow: rgba(0, 0, 0, .55); --cs-title-bg: #000080; --cs-title-fg: #FFFFFF; --cs-font-display: var(--cs-font-bitmap); --cs-font-body: var(--cs-font-ui); --cs-body-size: 1rem; --cs-body-leading: 1.5; --iv-color-bg: var(--cs-bg); --iv-color-surface: #C0C0C0; --iv-color-surface-raised: #DFDFDF; --iv-color-text: #000000; --iv-color-text-muted: #3a3a3a; --iv-color-border: #808080; --iv-color-border-strong: #000000; --iv-color-primary: #000080; --iv-color-on-primary: #FFFFFF; --iv-color-primary-hover: #0000AA; --iv-color-primary-active: #000060; --iv-color-primary-subtle: #d7d7ea; --iv-color-primary-border: #000080; --iv-color-accent: #800000; --iv-color-on-accent: #FFFFFF; --iv-color-info: #000080; --iv-color-success: #006400; --iv-color-warning: #7a4a00; --iv-color-danger: #a00000; --iv-color-focus: #000000; --iv-color-hover-surface: #d4d4d4; --iv-color-overlay: rgba(0, 64, 64, .8); --iv-glass-bg: #C0C0C0; --iv-glass-bg-strong: #C0C0C0; --iv-glass-border: #808080; --iv-glass-highlight: #fff; --iv-shadow-1: 2px 2px 0 var(--cs-shadow); --iv-shadow-2: 3px 3px 0 var(--cs-shadow); --iv-shadow-3: 5px 5px 0 var(--cs-shadow); --iv-shadow-ambient: none; --iv-glow-primary: none; --iv-glow-secondary: none; --iv-gradient-brand: linear-gradient(90deg, #000080, #008080); --iv-gradient-primary: #000080; --iv-font-sans: var(--cs-font-ui); --iv-font-mono: "JetBrains Mono", "Courier New", monospace; --iv-focus-halo: none; } /* ---------- Era: 98 ---------- */ :root[data-cs-era="98"] { color-scheme: light; --cs-bg: #3A6EA5; --cs-field: #3A6EA5; --cs-panel: #D4D0C8; --cs-panel-text: #000000; --cs-ink: #000000; --cs-ink-strong: #000000; --cs-accent: #0A246A; --cs-accent-2: #A6CAF0; --cs-line: #404040; --cs-shadow: rgba(0, 0, 0, .45); --cs-title-bg: linear-gradient(90deg, #0A246A, #A6CAF0); --cs-title-fg: #FFFFFF; --cs-font-display: var(--cs-font-ui); --cs-font-body: var(--cs-font-ui); --cs-body-size: 1rem; --cs-body-leading: 1.55; --iv-color-bg: var(--cs-bg); --iv-color-surface: #D4D0C8; --iv-color-surface-raised: #ECE9E1; --iv-color-text: #000000; --iv-color-text-muted: #3d3d3d; --iv-color-border: #808080; --iv-color-border-strong: #404040; --iv-color-primary: #0A246A; --iv-color-on-primary: #FFFFFF; --iv-color-primary-hover: #163a8f; --iv-color-primary-active: #071a4d; --iv-color-primary-subtle: #dbe3f3; --iv-color-primary-border: #0A246A; --iv-color-accent: #2E5CC8; --iv-color-on-accent: #FFFFFF; --iv-color-info: #0A246A; --iv-color-success: #0f6b1f; --iv-color-warning: #7a4a00; --iv-color-danger: #a00000; --iv-color-focus: #000000; --iv-color-hover-surface: #e4e1da; --iv-color-overlay: rgba(10, 36, 106, .78); --iv-glass-bg: #D4D0C8; --iv-glass-bg-strong: #D4D0C8; --iv-glass-border: #808080; --iv-glass-highlight: #fff; --iv-shadow-1: 2px 2px 0 var(--cs-shadow); --iv-shadow-2: 3px 3px 0 var(--cs-shadow); --iv-shadow-3: 6px 6px 0 var(--cs-shadow); --iv-shadow-ambient: none; --iv-glow-primary: none; --iv-glow-secondary: none; --iv-gradient-brand: linear-gradient(90deg, #0A246A, #A6CAF0); --iv-gradient-primary: #0A246A; --iv-font-sans: var(--cs-font-ui); --iv-font-mono: "JetBrains Mono", "Courier New", monospace; --iv-focus-halo: none; } /* ---------- Base ---------- */ html { scrollbar-gutter: stable; } .cs-body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; background: var(--cs-bg); color: var(--iv-color-text); font-family: var(--cs-font-body); font-size: var(--cs-body-size); line-height: var(--cs-body-leading); -webkit-font-smoothing: auto; } :root[data-cs-era="dos"] .cs-body { font-smooth: never; } .cs-main { flex: 1 0 auto; } .iv-root h1, .iv-root h2, .iv-root h3, .iv-root h4 { font-family: var(--cs-font-display); letter-spacing: 0; text-wrap: balance; } :root[data-cs-era="dos"].iv-root :is(h1, h2, h3, h4) { color: var(--cs-ink-strong); line-height: 1.35; } :root[data-cs-era="dos"].iv-root h1 { font-size: clamp(1.4rem, 1rem + 2.6vw, 2.6rem); } :root[data-cs-era="dos"].iv-root h2 { font-size: clamp(1.1rem, .8rem + 1.3vw, 1.75rem); } :root[data-cs-era="dos"].iv-root h3 { font-size: 1rem; } :root[data-cs-era="dos"].iv-root h4 { font-size: .8rem; } :root[data-cs-era="92"].iv-root :is(h1, h2, h3, h4) { font-family: var(--cs-font-bitmap); font-weight: 700; line-height: 1.25; } :root[data-cs-era="92"].iv-root h1 { font-size: clamp(1.6rem, 1rem + 3vw, 3rem); } :root[data-cs-era="92"].iv-root h2 { font-size: clamp(1.2rem, .9rem + 1.6vw, 2rem); } :root[data-cs-era="92"].iv-root h3 { font-size: 1.05rem; } :root[data-cs-era="98"].iv-root :is(h1, h2, h3, h4) { font-weight: 800; letter-spacing: -.02em; line-height: 1.1; } :root[data-cs-era="98"].iv-root h1 { font-size: clamp(2.2rem, 1.2rem + 4vw, 4.2rem); } :root[data-cs-era="98"].iv-root h2 { font-size: clamp(1.5rem, 1rem + 2vw, 2.4rem); } :root[data-cs-era="98"].iv-root h3 { font-size: 1.2rem; } .iv-root a { color: var(--cs-accent); text-decoration-thickness: var(--cs-px); text-underline-offset: 3px; } :root[data-cs-era="dos"].iv-root a:hover { color: var(--cs-ink-strong); background: var(--cs-vga-blue); text-decoration: none; } ::selection { background: var(--cs-accent); color: var(--cs-bg); } :root[data-cs-era="dos"] ::selection { background: var(--cs-vga-lgray); color: var(--cs-vga-blue); } .iv-root :focus-visible { outline: var(--cs-px) dotted var(--iv-color-focus); outline-offset: 2px; box-shadow: none; } :root[data-cs-era="dos"].iv-root :focus-visible { outline-style: solid; } .cs-skip:focus { position: fixed; inset: .5rem auto auto .5rem; width: auto; height: auto; clip: auto; clip-path: none; padding: .5rem 1rem; background: var(--cs-accent); color: var(--cs-bg); z-index: 1000; font-family: var(--cs-font-pixel); font-size: .75rem; } code, kbd, pre, .cs-mono { font-family: var(--cs-font-term); font-size: 1.05em; } :root:not([data-cs-era="dos"]) :is(code, kbd, pre, .cs-mono) { font-family: var(--iv-font-mono); font-size: .92em; } .cs-kbd { display: inline-block; padding: 0 .4em; border: var(--cs-px) solid var(--cs-line); border-bottom-width: 4px; background: var(--cs-panel); color: var(--cs-panel-text); line-height: 1.4; } /* Wrappers */ .cs-wrap { width: min(100% - 2rem, 76rem); margin-inline: auto; } .cs-wrap--narrow { width: min(100% - 2rem, 52rem); } .cs-section { padding-block: clamp(3rem, 6vw, 6rem); } .cs-section--tight { padding-block: clamp(2rem, 4vw, 3.5rem); } .cs-section__head { display: grid; gap: .75rem; max-width: 60ch; margin-bottom: clamp(1.5rem, 3vw, 3rem); } .cs-kicker { font-family: var(--cs-font-bitmap); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cs-accent); margin: 0; } :root[data-cs-era="dos"] .cs-kicker { font-family: var(--cs-font-term); font-size: 1.1rem; letter-spacing: .1em; } :root[data-cs-era="dos"] .cs-kicker::before { content: "> "; } .cs-lead { font-size: 1.15em; max-width: 60ch; color: var(--iv-color-text); margin: 0; } .cs-muted { color: var(--iv-color-text-muted); } .cs-grid { display: grid; gap: clamp(1rem, 2vw, 1.75rem); } .cs-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); } .cs-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); } .cs-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); } .cs-pixel { image-rendering: pixelated; image-rendering: crisp-edges; } .cs-img { display: block; width: 100%; height: auto; } /* ---------- Navbar ---------- */ .cs-navbar { --iv-navbar-height: 3.5rem; background: var(--cs-panel); color: var(--cs-panel-text); border-bottom: var(--cs-px) solid var(--cs-line); backdrop-filter: none; box-shadow: none; } :root[data-cs-era="92"] .cs-navbar, :root[data-cs-era="98"] .cs-navbar { box-shadow: inset 0 var(--cs-px) 0 #fff, inset 0 -1px 0 #808080; border-bottom-color: #000; } :root[data-cs-era="dos"] .cs-navbar { --iv-navbar-height: 3rem; border-bottom: none; background: var(--cs-vga-lgray); color: var(--cs-vga-black); } .cs-navbar .iv-navbar__link { color: var(--cs-panel-text); font-family: var(--cs-font-body); font-size: 1em; } :root[data-cs-era="dos"] .cs-navbar .iv-navbar__link { font-size: 1.25rem; padding-block: 0; } .cs-navbar .iv-navbar__link:hover, .cs-navbar .iv-navbar__link[aria-current="page"] { color: var(--cs-panel-text); } :root[data-cs-era="dos"] .cs-navbar .iv-navbar__link:hover, :root[data-cs-era="dos"] .cs-navbar .iv-navbar__link[aria-current="page"] { background: var(--cs-vga-blue); color: var(--cs-vga-white); text-decoration: none; } :root[data-cs-era="dos"] .cs-navbar .iv-navbar__link::after { display: none; } .cs-navlinks__num { display: inline-block; margin-right: .35em; color: var(--cs-accent-2); font-family: var(--cs-font-term); } :root:not([data-cs-era="dos"]) .cs-navlinks__num { display: none; } :root[data-cs-era="dos"] .cs-navbar .iv-navbar__link:is(:hover, [aria-current="page"]) .cs-navlinks__num { color: var(--cs-vga-yellow); } .cs-brand { color: var(--cs-panel-text); gap: .6rem; text-decoration: none; } .cs-brand__mark { flex: none; color: var(--cs-panel-text); } :root[data-cs-era="dos"] .cs-brand__mark { color: var(--cs-vga-blue); --cs-bg: var(--cs-vga-lgray); } .cs-brand__name { font-family: var(--cs-font-pixel); font-size: .85rem; letter-spacing: 0; } .cs-brand__name b { color: var(--cs-accent); font-weight: inherit; } :root[data-cs-era="dos"] .cs-brand__name b { color: var(--cs-vga-blue); } :root[data-cs-era="98"] .cs-brand__name { font-family: var(--cs-font-ui); font-weight: 800; font-size: 1.1rem; letter-spacing: -.02em; } .cs-navbar__actions { gap: .75rem; align-items: center; } .cs-navbar .iv-navbar__toggle { color: var(--cs-panel-text); } .cs-navbar .iv-navbar__burger, .cs-navbar .iv-navbar__burger::before, .cs-navbar .iv-navbar__burger::after { background: currentColor; } @media (max-width: 63.99rem) { .cs-navbar .iv-navbar__panel { background: var(--cs-panel); border-top: var(--cs-px) solid var(--cs-line); } .cs-navbar__actions { padding: .75rem 0 .25rem; flex-wrap: wrap; } } /* Era switch */ .cs-era-switch { display: inline-flex; align-items: center; gap: 0; border: var(--cs-px) solid var(--cs-line); background: var(--cs-panel); padding: 2px; } .cs-era-switch__label { font-family: var(--cs-font-bitmap); font-size: .6rem; letter-spacing: .1em; padding: 0 .5rem; color: var(--iv-color-text-muted); } .cs-era-switch__btn { appearance: none; border: 0; background: transparent; color: var(--cs-panel-text); font-family: var(--cs-font-pixel); font-size: .6rem; padding: .45rem .55rem; cursor: pointer; line-height: 1; } .cs-era-switch__btn:hover { background: var(--iv-color-hover-surface); } .cs-era-switch__btn[aria-pressed="true"] { background: var(--cs-accent); color: var(--cs-panel); } :root[data-cs-era="dos"] .cs-era-switch { background: var(--cs-vga-lgray); border-color: var(--cs-vga-black); } :root[data-cs-era="dos"] .cs-era-switch__btn[aria-pressed="true"] { background: var(--cs-vga-blue); color: var(--cs-vga-yellow); } :root[data-cs-era="98"] .cs-era-switch { box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080; border-color: #404040; } :root[data-cs-era="92"] .cs-era-switch { box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080; } :root[data-cs-era-locked] .cs-era-switch { display: none; } /* ---------- Buttons ---------- */ .iv-root .iv-button { border-radius: 0; font-family: var(--cs-font-body); font-weight: 600; transition: none; } :root[data-cs-era="dos"].iv-root .iv-button { font-size: 1.2rem; font-weight: 400; padding-block: .35rem; border: var(--cs-px) solid currentColor; box-shadow: 4px 4px 0 var(--cs-shadow); } :root[data-cs-era="dos"].iv-root .iv-button:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--cs-shadow); } :root[data-cs-era="dos"].iv-root .iv-button--primary { background: var(--cs-vga-yellow); color: var(--cs-vga-blue); border-color: var(--cs-vga-yellow); } :root[data-cs-era="dos"].iv-root .iv-button--primary:hover { background: var(--cs-vga-white); border-color: var(--cs-vga-white); color: var(--cs-vga-blue); } :root[data-cs-era="dos"].iv-root .iv-button--secondary { background: var(--cs-vga-blue); color: var(--cs-vga-white); border-color: var(--cs-vga-lgray); } :root[data-cs-era="dos"].iv-root .iv-button--secondary:hover { background: var(--cs-vga-lblue); } :root[data-cs-era="dos"].iv-root .iv-button--ghost { box-shadow: none; border-color: transparent; color: var(--cs-vga-lgray); } :root[data-cs-era="dos"].iv-root .iv-button--ghost:hover { background: var(--cs-vga-blue); color: var(--cs-vga-white); } :root[data-cs-era="dos"] .cs-navbar .iv-button { box-shadow: none; } :root:is([data-cs-era="92"], [data-cs-era="98"]).iv-root .iv-button { background: var(--cs-panel); color: var(--cs-panel-text); border: 1px solid #000; box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080, inset 2px 2px 0 var(--cs-panel), inset -2px -2px 0 #404040; padding: .55rem 1.1rem; } :root:is([data-cs-era="92"], [data-cs-era="98"]).iv-root .iv-button:hover { background: var(--iv-color-surface-raised); } :root:is([data-cs-era="92"], [data-cs-era="98"]).iv-root .iv-button:active { box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #fff, inset 2px 2px 0 #808080; } :root:is([data-cs-era="92"], [data-cs-era="98"]).iv-root .iv-button--primary { outline: 1px solid #000; outline-offset: -3px; font-weight: 700; } :root:is([data-cs-era="92"], [data-cs-era="98"]).iv-root .iv-button--ghost { border-color: transparent; box-shadow: none; background: transparent; } :root:is([data-cs-era="92"], [data-cs-era="98"]).iv-root .iv-button--ghost:hover { text-decoration: underline; background: transparent; } :root:is([data-cs-era="92"], [data-cs-era="98"]).iv-root .iv-button--lg { padding: .8rem 1.6rem; font-size: 1.05rem; } /* ---------- Windows ---------- */ .cs-window { position: relative; background: var(--cs-panel); color: var(--cs-panel-text); box-shadow: var(--iv-shadow-2); display: flex; flex-direction: column; min-width: 0; } .cs-window__bar { display: flex; align-items: center; gap: .5rem; padding: .3rem .5rem; background: var(--cs-title-bg); color: var(--cs-title-fg); font-family: var(--cs-font-body); font-weight: 700; font-size: .9rem; line-height: 1.2; user-select: none; } .cs-window__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cs-window__icon { flex: none; width: 16px; height: 16px; display: inline-grid; place-items: center; } .cs-window__controls { display: inline-flex; gap: 2px; } .cs-window__ctl { width: 16px; height: 14px; display: inline-grid; place-items: center; font-size: 9px; line-height: 1; background: var(--cs-panel); color: var(--cs-panel-text); border: 1px solid #000; box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080; font-family: "Silkscreen", monospace; } .cs-window__body { padding: clamp(1rem, 2vw, 1.5rem); flex: 1; } .cs-window__body img { max-width: 100%; height: auto; } .cs-window__body > :first-child { margin-top: 0; } .cs-window__body > :last-child { margin-bottom: 0; } .cs-window__status { display: flex; gap: 1rem; padding: .25rem .5rem; border-top: 1px solid var(--iv-color-border); font-size: .8rem; color: var(--iv-color-text-muted); font-family: var(--cs-font-body); } .cs-window__status span { padding-inline: .5rem; box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff; } .cs-window--flush .cs-window__body { padding: 0; } .cs-window--fill { height: 100%; } /* 92 chrome */ :root[data-cs-era="92"] .cs-window, .cs-window[data-cs-era="92"] { --cs-panel: #C0C0C0; --cs-panel-text: #000; --cs-title-bg: #000080; --cs-title-fg: #fff; border: 1px solid #000; box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080, inset 2px 2px 0 #dfdfdf, inset -2px -2px 0 #404040, var(--iv-shadow-2); padding: 3px; } :root[data-cs-era="92"] .cs-window__bar, .cs-window[data-cs-era="92"] .cs-window__bar { margin: 0; font-family: var(--cs-font-ui); } /* 98 chrome */ :root[data-cs-era="98"] .cs-window, .cs-window[data-cs-era="98"] { --cs-panel: #D4D0C8; --cs-panel-text: #000; --cs-title-bg: linear-gradient(90deg, #0A246A, #A6CAF0); --cs-title-fg: #fff; border: 1px solid #000; box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080, inset 2px 2px 0 #ece9e1, inset -2px -2px 0 #404040, var(--iv-shadow-2); padding: 3px; } :root[data-cs-era="98"] .cs-window__bar, .cs-window[data-cs-era="98"] .cs-window__bar { font-family: var(--cs-font-ui); } /* DOS chrome: Turbo-Vision style double-line frame */ :root[data-cs-era="dos"] .cs-window, .cs-window[data-cs-era="dos"] { --cs-panel: var(--cs-vga-blue); --cs-panel-text: var(--cs-vga-white); --cs-title-bg: var(--cs-vga-blue); --cs-title-fg: var(--cs-vga-yellow); border: 4px double var(--cs-vga-lgray); box-shadow: 8px 8px 0 rgba(0, 0, 0, .55); } :root[data-cs-era="dos"] .cs-window__bar, .cs-window[data-cs-era="dos"] .cs-window__bar { justify-content: center; font-family: var(--cs-font-term); font-size: 1.25rem; font-weight: 400; padding-block: .1rem; margin-top: -.9rem; background: transparent; } :root[data-cs-era="dos"] .cs-window__title, .cs-window[data-cs-era="dos"] .cs-window__title { flex: none; background: var(--cs-vga-blue); padding-inline: .5rem; color: var(--cs-vga-yellow); } :root[data-cs-era="dos"] .cs-window__title::before, .cs-window[data-cs-era="dos"] .cs-window__title::before { content: "[ "; color: var(--cs-vga-lgray); } :root[data-cs-era="dos"] .cs-window__title::after, .cs-window[data-cs-era="dos"] .cs-window__title::after { content: " ]"; color: var(--cs-vga-lgray); } :root[data-cs-era="dos"] .cs-window__controls, :root[data-cs-era="dos"] .cs-window__icon, .cs-window[data-cs-era="dos"] :is(.cs-window__controls, .cs-window__icon) { display: none; } :root[data-cs-era="dos"] .cs-window__status, .cs-window[data-cs-era="dos"] .cs-window__status { border-top: 1px solid var(--cs-vga-lgray); color: var(--cs-vga-lgray); } :root[data-cs-era="dos"] .cs-window__status span, .cs-window[data-cs-era="dos"] .cs-window__status span { box-shadow: none; } :root[data-cs-era="dos"] .cs-window__status span::before, .cs-window[data-cs-era="dos"] .cs-window__status span::before { content: "■ "; color: var(--cs-vga-yellow); } .cs-window[data-cs-era="dos"] { color-scheme: dark; --iv-color-text: var(--cs-vga-white); --iv-color-text-muted: var(--cs-vga-lgray); --cs-accent: var(--cs-vga-yellow); color: var(--cs-vga-white); } .cs-window[data-cs-era="dos"] a { color: var(--cs-vga-yellow); } .cs-window[data-cs-era="92"], .cs-window[data-cs-era="98"] { color-scheme: light; --iv-color-text: #000; --iv-color-text-muted: #3a3a3a; --cs-accent: #000080; color: #000; } .cs-window[data-cs-era="98"] { --cs-accent: #0A246A; } .cs-window[data-cs-era="92"] a, .cs-window[data-cs-era="98"] a { color: var(--cs-accent); } .cs-window[data-cs-era="dos"] .cs-window__bar { display: flex; } .cs-window[data-cs-era="92"] .cs-window__bar, .cs-window[data-cs-era="98"] .cs-window__bar { justify-content: flex-start; margin-top: 0; } .cs-window[data-cs-era="92"] .cs-window__ctl, .cs-window[data-cs-era="98"] .cs-window__ctl { display: inline-grid; } /* Menu bar under a title bar */ .cs-menubar { display: flex; gap: 0; padding: 0 .25rem; font-size: .85rem; border-bottom: 1px solid var(--iv-color-border); background: var(--cs-panel); color: var(--cs-panel-text); flex-wrap: wrap; } .cs-menubar span { padding: .25rem .6rem; } .cs-menubar span u { text-decoration: underline; text-underline-offset: 2px; } :root[data-cs-era="dos"] .cs-menubar, .cs-window[data-cs-era="dos"] .cs-menubar { background: var(--cs-vga-lgray); color: var(--cs-vga-black); border: 0; font-family: var(--cs-font-term); font-size: 1.15rem; } :root[data-cs-era="dos"] .cs-menubar span u, .cs-window[data-cs-era="dos"] .cs-menubar span u { color: var(--cs-vga-red); text-decoration: none; } /* ---------- CRT monitor ---------- */ .cs-crt { --cs-crt-bezel: #1c1a17; --cs-crt-bezel-2: #2b2823; position: relative; padding: clamp(.9rem, 2.4vw, 1.8rem); background: linear-gradient(160deg, var(--cs-crt-bezel-2), var(--cs-crt-bezel)); border-radius: 14px / 18px; box-shadow: inset 0 0 0 2px #0a0908, inset 0 2px 0 3px rgba(255, 255, 255, .06), 0 20px 40px -10px rgba(0, 0, 0, .6); } .cs-crt__screen { position: relative; overflow: hidden; background: #000; border-radius: 6px / 10px; box-shadow: inset 0 0 40px rgba(0, 0, 0, .9); aspect-ratio: var(--cs-crt-ratio, 4 / 3); } .cs-crt__screen > img, .cs-crt__screen > picture > img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; image-rendering: crisp-edges; } .cs-crt__screen::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, .18) 2px 3px); mix-blend-mode: multiply; } .cs-crt__screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(255, 255, 255, .06), rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .35) 100%); } .cs-crt__chin { display: flex; align-items: center; justify-content: space-between; margin-top: .8rem; padding: 0 .25rem; color: #8f877a; font-family: var(--cs-font-bitmap); font-size: .55rem; letter-spacing: .14em; text-transform: uppercase; } .cs-crt__led { display: inline-block; width: 7px; height: 7px; background: #43ff6a; box-shadow: 0 0 6px #43ff6a; border-radius: 50%; } .cs-crt--flat .cs-crt__screen::before, .cs-crt--flat .cs-crt__screen::after { display: none; } .cs-crt figcaption { margin-top: .75rem; } /* ---------- Hero (home) ---------- */ .cs-hero { position: relative; overflow: hidden; padding-block: clamp(3rem, 8vw, 7rem) clamp(2.5rem, 6vw, 5rem); background: var(--cs-field); color: var(--cs-vga-white); isolation: isolate; } :root[data-cs-era="dos"] .cs-hero { background: var(--cs-vga-blue); } :root[data-cs-era="92"] .cs-hero { color: #fff; } :root[data-cs-era="98"] .cs-hero { background: linear-gradient(180deg, #245EDC 0%, #3A6EA5 55%, #6fa4d6 100%); } .cs-hero__inner { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center; grid-template-columns: 1fr; } @media (min-width: 64rem) { .cs-hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } } .cs-hero__kicker { font-family: var(--cs-font-term); font-size: 1.25rem; margin: 0 0 1rem; color: var(--cs-vga-lcyan); } :root:not([data-cs-era="dos"]) .cs-hero__kicker { font-family: var(--cs-font-bitmap); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: #fff; } .cs-hero__title { font-family: var(--cs-font-pixel); font-size: clamp(1.6rem, 1rem + 3.4vw, 3.4rem); line-height: 1.25; margin: 0 0 1.25rem; color: var(--cs-vga-yellow); text-shadow: 4px 4px 0 rgba(0, 0, 0, .35); } :root[data-cs-era="92"] .cs-hero__title { font-family: var(--cs-font-bitmap); color: #fff; text-shadow: 3px 3px 0 #000; } :root[data-cs-era="98"] .cs-hero__title { font-family: var(--cs-font-ui); font-weight: 800; letter-spacing: -.03em; line-height: 1; font-size: clamp(2.6rem, 1.4rem + 5vw, 5.4rem); color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .35); } .cs-hero__title em { font-style: normal; color: var(--cs-vga-white); } :root[data-cs-era="98"] .cs-hero__title em, :root[data-cs-era="92"] .cs-hero__title em { color: #FFD966; } .cs-hero__lead { font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); max-width: 52ch; margin: 0 0 1.75rem; color: var(--cs-vga-white); } :root[data-cs-era="dos"] .cs-hero__lead { color: var(--cs-vga-lgray); font-size: clamp(1.3rem, 1rem + .8vw, 1.7rem); } .cs-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; margin-bottom: 1.75rem; } .cs-hero__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-family: var(--cs-font-term); font-size: 1.15rem; color: var(--cs-vga-lgray); } :root:not([data-cs-era="dos"]) .cs-hero__facts { font-family: var(--cs-font-body); font-size: .95rem; color: #fff; } .cs-hero__facts strong { color: var(--cs-vga-yellow); font-weight: 400; } :root:not([data-cs-era="dos"]) .cs-hero__facts strong { color: #FFD966; font-weight: 700; } .cs-hero__stars { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(1.5px 1.5px at 8% 20%, #fff 100%, transparent), radial-gradient(1.5px 1.5px at 22% 70%, #fff 100%, transparent), radial-gradient(2px 2px at 38% 30%, #fff 100%, transparent), radial-gradient(1.5px 1.5px at 55% 85%, #fff 100%, transparent), radial-gradient(1.5px 1.5px at 66% 12%, #fff 100%, transparent), radial-gradient(2px 2px at 78% 58%, #fff 100%, transparent), radial-gradient(1.5px 1.5px at 90% 28%, #fff 100%, transparent), radial-gradient(1.5px 1.5px at 96% 80%, #fff 100%, transparent), radial-gradient(1.5px 1.5px at 44% 6%, #fff 100%, transparent), radial-gradient(1.5px 1.5px at 12% 92%, #fff 100%, transparent); opacity: .7; } :root:not([data-cs-era="dos"]) .cs-hero__stars { display: none; } .cs-hero__clouds { position: absolute; inset: 0; z-index: -1; pointer-events: none; display: none; } :root[data-cs-era="98"] .cs-hero__clouds { display: block; background-image: radial-gradient(ellipse 12rem 3.5rem at 15% 22%, rgba(255, 255, 255, .55), transparent 70%), radial-gradient(ellipse 18rem 4.5rem at 70% 14%, rgba(255, 255, 255, .5), transparent 70%), radial-gradient(ellipse 10rem 3rem at 88% 40%, rgba(255, 255, 255, .4), transparent 70%); } .cs-hero__art { position: relative; } .cs-hero__art .cs-crt { transform: rotate(-1deg); } @media (prefers-reduced-motion: no-preference) { .cs-hero__art .cs-crt { animation: cs-float 9s ease-in-out infinite; } } @keyframes cs-float { 0%, 100% { transform: rotate(-1deg) translateY(0); } 50% { transform: rotate(-1deg) translateY(-8px); } } /* Typewriter cursor */ .cs-cursor::after { content: "▌"; display: inline-block; margin-left: .1em; color: currentColor; animation: cs-blink 1s steps(1, end) infinite; } @keyframes cs-blink { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .cs-cursor::after { animation: none; } } /* ---------- Boot sequence overlay ---------- */ .cs-boot { position: fixed; inset: 0; z-index: 2000; background: #000; color: #AAAAAA; font-family: var(--cs-font-term); font-size: clamp(1rem, .8rem + .8vw, 1.5rem); line-height: 1.25; padding: clamp(1rem, 4vw, 3rem); display: none; overflow: hidden; } .cs-boot[data-cs-active] { display: block; } .cs-boot__lines { margin: 0; white-space: pre-wrap; } .cs-boot__lines b { color: #FFFFFF; font-weight: 400; } .cs-boot__lines i { color: #55FF55; font-style: normal; } .cs-boot__lines em { color: #FFFF55; font-style: normal; } .cs-boot__skip { position: absolute; right: 1rem; bottom: 1rem; background: transparent; border: 2px solid #AAAAAA; color: #AAAAAA; font: inherit; padding: .25rem .75rem; cursor: pointer; } .cs-boot__skip:hover, .cs-boot__skip:focus-visible { background: #AAAAAA; color: #000; } .cs-boot::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, .22) 2px 3px); } /* ---------- Product windows on the home ---------- */ .cs-suite { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); align-items: stretch; } .cs-product { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; } .cs-product .cs-window__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; align-content: start; min-width: 0; } .cs-product__shot { display: block; width: 100%; max-width: 100%; min-width: 0; height: auto; aspect-ratio: 8 / 5; object-fit: cover; object-position: top left; background: #000; border: 1px solid var(--iv-color-border); } .cs-product__year { font-family: var(--cs-font-pixel); font-size: .65rem; opacity: .85; } .cs-product__name { margin: 0; font-size: 1.2rem; } .cs-product__tag { margin: 0; } .cs-product__meta { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; font-size: .85em; } .cs-product__meta li { border: 1px solid currentColor; padding: .05rem .45rem; opacity: .9; } .cs-product__cta { margin-top: .5rem; display: flex; gap: .5rem; flex-wrap: wrap; } /* ---------- Spec sheet ---------- */ .cs-spec { width: 100%; border-collapse: collapse; font-size: .95em; } .cs-spec th, .cs-spec td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--iv-color-border); vertical-align: top; } .cs-spec th { width: 32%; font-weight: 600; color: var(--iv-color-text-muted); font-family: var(--cs-font-body); } :root[data-cs-era="dos"] .cs-spec th, .cs-window[data-cs-era="dos"] .cs-spec th { color: var(--cs-vga-lcyan); } :root[data-cs-era="dos"] .cs-spec th, :root[data-cs-era="dos"] .cs-spec td { border-bottom: 1px dotted var(--cs-vga-lgray); } /* ---------- Status badges (honest claims) ---------- */ .cs-status { display: inline-flex; align-items: center; gap: .4em; font-family: var(--cs-font-bitmap); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; padding: .25rem .5rem; border: 1px solid currentColor; line-height: 1; vertical-align: middle; white-space: nowrap; } :root[data-cs-era="dos"] .cs-status { font-family: var(--cs-font-term); font-size: 1rem; letter-spacing: .05em; } .cs-status::before { content: ""; width: .6em; height: .6em; background: currentColor; } .cs-status--shipped { color: var(--iv-color-success); } .cs-status--partial { color: var(--iv-color-warning); } .cs-status--planned { color: var(--iv-color-text-muted); } .cs-status--planned::before { background: transparent; border: 1px solid currentColor; } :root[data-cs-era="dos"] .cs-status--shipped, .cs-window[data-cs-era="dos"] .cs-status--shipped { color: var(--cs-vga-lgreen); } :root[data-cs-era="dos"] .cs-status--partial, .cs-window[data-cs-era="dos"] .cs-status--partial { color: var(--cs-vga-yellow); } :root[data-cs-era="dos"] .cs-status--planned, .cs-window[data-cs-era="dos"] .cs-status--planned { color: var(--cs-vga-lgray); } /* Feature list */ .cs-features { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; } .cs-features li { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; padding: .6rem .75rem; border: 1px solid var(--iv-color-border); background: var(--iv-color-surface-raised); } :root[data-cs-era="dos"] .cs-features li { background: transparent; border: 1px solid var(--cs-vga-dgray); } .cs-features li > .cs-status { margin-top: .2em; } .cs-features strong { display: block; } .cs-features small { display: block; color: var(--iv-color-text-muted); } /* Legend */ .cs-legend { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; margin: 0; padding: .6rem .75rem; border: 1px dashed var(--iv-color-border); font-size: .9em; } .cs-legend .cs-status { flex: none; } /* ---------- Segmented progress (roadmap) ---------- */ .cs-progress { display: block; height: 18px; border: 1px solid var(--cs-line); padding: 2px; background: var(--cs-panel); box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff; } .cs-progress > span { display: block; height: 100%; width: var(--cs-value, 0%); background: repeating-linear-gradient(90deg, var(--cs-accent) 0 10px, transparent 10px 12px); } :root[data-cs-era="dos"] .cs-progress { background: var(--cs-vga-blue); box-shadow: none; border-color: var(--cs-vga-lgray); } :root[data-cs-era="dos"] .cs-progress > span { background: repeating-linear-gradient(90deg, var(--cs-vga-yellow) 0 10px, transparent 10px 12px); } :root[data-cs-era="98"] .cs-progress > span { background: repeating-linear-gradient(90deg, #0A246A 0 10px, transparent 10px 12px); } /* ---------- Timeline (iVOLT) tweaks ---------- */ .iv-root .iv-timeline { --iv-timeline-line: var(--iv-color-border-strong); --iv-timeline-marker: var(--cs-accent); } .iv-root .iv-timeline__time { font-family: var(--cs-font-bitmap); font-size: .65rem; color: var(--cs-accent); letter-spacing: .08em; } :root[data-cs-era="dos"].iv-root .iv-timeline__time { font-family: var(--cs-font-term); font-size: 1.1rem; } .iv-root .iv-timeline__title { font-size: 1rem; } /* ---------- Gallery (iVOLT lightbox) ---------- */ .cs-gallery.iv-gallery { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); } .cs-gallery .iv-gallery__item { display: block; border: var(--cs-px) solid var(--cs-line); background: #000; padding: 0; aspect-ratio: 4 / 3; overflow: hidden; box-shadow: var(--iv-shadow-1); } .cs-gallery .iv-gallery__img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; image-rendering: crisp-edges; display: block; background: #000; } .cs-gallery .iv-gallery__item:hover { box-shadow: var(--iv-shadow-2); transform: translate(-1px, -1px); } .cs-gallery figure { margin: 0; } .cs-gallery figcaption { font-size: .85em; color: var(--iv-color-text-muted); margin-top: .35rem; } .iv-root .iv-lightbox__img { image-rendering: pixelated; image-rendering: crisp-edges; } /* ---------- Tabs (iVOLT) ---------- */ .iv-root .iv-tabs__tab { font-family: var(--cs-font-body); border-radius: 0; } :root:is([data-cs-era="92"], [data-cs-era="98"]).iv-root .iv-tabs__list { border-bottom: 1px solid #808080; gap: 2px; } :root:is([data-cs-era="92"], [data-cs-era="98"]).iv-root .iv-tabs__tab { background: var(--cs-panel); border: 1px solid #808080; border-bottom: 0; box-shadow: inset 1px 1px 0 #fff; padding: .4rem 1rem; color: #000; } :root:is([data-cs-era="92"], [data-cs-era="98"]).iv-root .iv-tabs__tab[aria-selected="true"] { background: var(--iv-color-surface-raised); margin-bottom: -1px; padding-bottom: calc(.4rem + 1px); } :root:is([data-cs-era="92"], [data-cs-era="98"]).iv-root .iv-tabs__panel { background: var(--iv-color-surface-raised); border: 1px solid #808080; border-top: 0; padding: 1rem; } :root[data-cs-era="dos"].iv-root .iv-tabs__tab { font-size: 1.15rem; padding: .2rem .8rem; color: var(--cs-vga-lgray); } :root[data-cs-era="dos"].iv-root .iv-tabs__tab[aria-selected="true"] { background: var(--cs-vga-lgray); color: var(--cs-vga-blue); } /* ---------- Cards, alerts, badges ---------- */ .iv-root .iv-card { border-radius: 0; background: var(--iv-color-surface-raised); border: 1px solid var(--iv-color-border-strong); box-shadow: var(--iv-shadow-1); } .iv-root .iv-alert { border-radius: 0; font-family: var(--cs-font-body); } .iv-root .iv-badge { border-radius: 0; font-family: var(--cs-font-bitmap); font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; } :root[data-cs-era="dos"].iv-root .iv-badge { font-family: var(--cs-font-term); font-size: 1rem; letter-spacing: .04em; } /* ---------- Terminal block ---------- */ .cs-term { background: #000; color: #AAAAAA; font-family: var(--cs-font-term); font-size: 1.2rem; line-height: 1.25; padding: 1rem 1.25rem; border: var(--cs-px) solid var(--cs-vga-lgray); overflow-x: auto; margin: 0; white-space: pre-wrap; box-shadow: var(--iv-shadow-2); } .cs-term b { color: #fff; font-weight: 400; } .cs-term i { color: #55FF55; font-style: normal; } .cs-term em { color: #FFFF55; font-style: normal; } .cs-term--blue { background: var(--cs-vga-blue); color: var(--cs-vga-lgray); } .cs-term--blue b { color: var(--cs-vga-white); } .cs-term--blue em { color: var(--cs-vga-yellow); } .cs-term--shell { position: relative; } .cs-term__log { margin: 0; white-space: pre-wrap; max-height: 16rem; overflow-y: auto; } .cs-term__row { display: flex; gap: .4rem; align-items: baseline; margin-top: .25rem; } .cs-term__prompt { color: #fff; } .cs-term__input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: #FFFF55; font: inherit; caret-color: #FFFF55; padding: 0; } .cs-term__input::placeholder { color: #555; } .cs-term__hint { margin: .5rem 0 0; color: #555; font-size: 1rem; } /* ---------- Compare table ---------- */ .cs-compare { overflow-x: auto; } .cs-compare table { width: 100%; border-collapse: collapse; min-width: 44rem; font-size: .95em; } .cs-compare th, .cs-compare td { padding: .55rem .75rem; text-align: left; border: 1px solid var(--iv-color-border); vertical-align: top; } .cs-compare thead th { background: var(--iv-color-surface-raised); font-family: var(--cs-font-body); } .cs-compare thead th[data-cs-era] { color: #fff; } .cs-compare thead th[data-cs-era="dos"] { background: var(--cs-vga-blue); color: var(--cs-vga-yellow); } .cs-compare thead th[data-cs-era="92"] { background: #000080; } .cs-compare thead th[data-cs-era="98"] { background: linear-gradient(90deg, #0A246A, #2E5CC8); } .cs-compare tbody th { font-weight: 600; color: var(--iv-color-text-muted); white-space: nowrap; } :root[data-cs-era="dos"] .cs-compare :is(th, td) { border-color: var(--cs-vga-dgray); } :root[data-cs-era="dos"] .cs-compare thead th { background: #000044; } /* ---------- Download block ---------- */ .cs-download { display: grid; gap: 1rem; } .cs-download__file { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; align-items: center; padding: .75rem 1rem; border: var(--cs-px) solid var(--cs-line); background: var(--iv-color-surface-raised); } :root[data-cs-era="dos"] .cs-download__file { background: #000044; border-color: var(--cs-vga-lgray); } .cs-download__icon { grid-row: span 3; width: 40px; height: 44px; display: grid; place-items: center; } .cs-download__name { font-weight: 700; word-break: break-all; } .cs-download__meta { color: var(--iv-color-text-muted); font-size: .9em; } .cs-download__hash { font-family: var(--iv-font-mono); font-size: .8em; word-break: break-all; color: var(--iv-color-text-muted); } :root[data-cs-era="dos"] .cs-download__hash { font-family: var(--cs-font-term); font-size: 1rem; } /* ---------- Steps ---------- */ .cs-steps { counter-reset: step; list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; } .cs-steps li { counter-increment: step; display: grid; grid-template-columns: 2.5rem 1fr; gap: .75rem; align-items: start; } .cs-steps li::before { content: counter(step, decimal-leading-zero); font-family: var(--cs-font-pixel); font-size: .8rem; color: var(--cs-accent); padding-top: .2rem; } .cs-steps code { background: var(--iv-color-surface-raised); padding: 0 .3em; border: 1px solid var(--iv-color-border); } :root[data-cs-era="dos"] .cs-steps code { background: #000; color: var(--cs-vga-lgreen); border-color: var(--cs-vga-dgray); } /* ---------- Palette swatches ---------- */ .cs-palette { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; margin: 0; padding: 3px; list-style: none; border: var(--cs-px) solid var(--cs-line); background: var(--cs-panel); } .cs-palette li { aspect-ratio: 1; position: relative; } .cs-palette li span { position: absolute; inset: auto 0 0 0; font-family: var(--cs-font-bitmap); font-size: .5rem; padding: 2px; background: rgba(0, 0, 0, .55); color: #fff; text-align: center; } /* ---------- Quote ---------- */ .cs-quote { margin: 0; padding: 1.25rem 1.5rem; border-left: 6px solid var(--cs-accent); background: var(--iv-color-surface-raised); font-size: 1.15em; } :root[data-cs-era="dos"] .cs-quote { background: transparent; border-left: 4px double var(--cs-vga-lgray); color: var(--cs-vga-white); } .cs-quote cite { display: block; margin-top: .5rem; font-style: normal; font-size: .85em; color: var(--iv-color-text-muted); } /* ---------- Big text-mode wordmark (DOS page) ---------- */ .cs-ansi { font-family: var(--cs-font-pixel); color: var(--cs-vga-yellow); font-size: clamp(1.2rem, .6rem + 3vw, 3rem); line-height: 1.2; letter-spacing: .02em; text-shadow: 6px 6px 0 rgba(0, 0, 0, .35); margin: 0; } /* ---------- Stats (iVOLT) ---------- */ .iv-root .iv-stat__value { font-family: var(--cs-font-pixel); font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem); color: var(--cs-accent); } :root[data-cs-era="dos"].iv-root .iv-stat__value { color: var(--cs-vga-yellow); } .iv-root .iv-stat__label { font-family: var(--cs-font-bitmap); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; } :root[data-cs-era="dos"].iv-root .iv-stat__label { font-family: var(--cs-font-term); font-size: 1.05rem; } .iv-root .iv-stat { border-radius: 0; border: 1px solid var(--iv-color-border); background: var(--iv-color-surface-raised); padding: 1rem; } :root[data-cs-era="dos"].iv-root .iv-stat { background: transparent; border-color: var(--cs-vga-dgray); } /* ---------- Footer / taskbar ---------- */ .cs-footer { margin-top: auto; } .cs-taskbar { display: flex; align-items: center; gap: .4rem; padding: 3px 4px; background: var(--cs-panel); color: var(--cs-panel-text); border-top: var(--cs-px) solid #fff; box-shadow: inset 0 1px 0 #dfdfdf; font-family: var(--cs-font-body); font-size: .85rem; overflow-x: auto; } :root[data-cs-era="dos"] .cs-taskbar { background: var(--cs-vga-lgray); color: var(--cs-vga-black); border-top: 0; box-shadow: none; font-family: var(--cs-font-term); font-size: 1.15rem; } .cs-taskbar__start { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; font-weight: 700; color: inherit; text-decoration: none; border: 1px solid #000; box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080, inset 2px 2px 0 var(--cs-panel), inset -2px -2px 0 #404040; background: var(--cs-panel); white-space: nowrap; } .cs-taskbar__start:hover { text-decoration: none; background: var(--iv-color-surface-raised); } :root[data-cs-era="dos"] .cs-taskbar__start { box-shadow: none; border: 0; background: var(--cs-vga-blue); color: var(--cs-vga-yellow); } .cs-taskbar__start svg { --cs-bg: var(--cs-panel); } .cs-taskbar__sep { width: 2px; align-self: stretch; margin-block: 2px; background: #808080; box-shadow: 1px 0 0 #fff; flex: none; } :root[data-cs-era="dos"] .cs-taskbar__sep { background: var(--cs-vga-dgray); box-shadow: none; } .cs-taskbar__tasks { display: flex; gap: 3px; flex: 1; min-width: 0; } .cs-taskbar__task { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; color: inherit; text-decoration: none; border: 1px solid #000; box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080; background: var(--cs-panel); white-space: nowrap; } .cs-taskbar__task:hover { text-decoration: none; background: var(--iv-color-surface-raised); } .cs-taskbar__task[aria-current="page"] { box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff; background: repeating-conic-gradient(#fff 0 25%, var(--cs-panel) 0 50%) 0 0 / 4px 4px; font-weight: 700; } :root[data-cs-era="dos"] .cs-taskbar__task { border: 0; box-shadow: none; background: transparent; } :root[data-cs-era="dos"] .cs-taskbar__task:hover, :root[data-cs-era="dos"] .cs-taskbar__task[aria-current="page"] { background: var(--cs-vga-blue); color: var(--cs-vga-white); } .cs-taskbar__icon { width: 12px; height: 12px; flex: none; } .cs-taskbar__icon--dos { background: #0000AA; box-shadow: inset 0 0 0 2px #FFFF55; } .cs-taskbar__icon--92 { background: #008080; box-shadow: inset 0 0 0 2px #C0C0C0; } .cs-taskbar__icon--98 { background: linear-gradient(90deg, #0A246A, #A6CAF0); box-shadow: inset 0 0 0 2px #D4D0C8; } .cs-taskbar__icon--press { background: #fff; box-shadow: inset 0 0 0 2px #808080; } .cs-taskbar__icon--about { background: #FFD966; box-shadow: inset 0 0 0 2px #7a4a00; } .cs-taskbar__tray { margin-left: auto; display: inline-flex; align-items: center; gap: .6rem; padding: .3rem .6rem; box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff; white-space: nowrap; } :root[data-cs-era="dos"] .cs-taskbar__tray { box-shadow: none; } .cs-taskbar__clock { font-variant-numeric: tabular-nums; } .cs-footer__body { background: var(--iv-color-surface); color: var(--iv-color-text); border-top: 1px solid var(--iv-color-border); } :root[data-cs-era="dos"] .cs-footer__body { background: #000022; } .cs-footer__cols { width: min(100% - 2rem, 76rem); margin-inline: auto; padding-block: clamp(2rem, 4vw, 3.5rem) 1.5rem; display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); } .cs-footer__col--brand { grid-column: span 2; max-width: 40rem; } @media (max-width: 40rem) { .cs-footer__col--brand { grid-column: span 1; } } .cs-footer__wordmark { font-family: var(--cs-font-pixel); font-size: 1rem; margin: 0 0 .75rem; } .cs-footer__wordmark b { color: var(--cs-accent); font-weight: inherit; } .cs-footer__heading { font-family: var(--cs-font-bitmap); font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cs-accent); margin: 0 0 .75rem; } :root[data-cs-era="dos"] .cs-footer__heading { font-family: var(--cs-font-term); font-size: 1.1rem; } .cs-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; } .cs-footer__list a { color: var(--iv-color-text); } .cs-footer__small { font-size: .9em; color: var(--iv-color-text-muted); } .cs-footer__legal { width: min(100% - 2rem, 76rem); margin-inline: auto; padding-block: 1rem 2rem; border-top: 1px solid var(--iv-color-border); font-size: .85em; color: var(--iv-color-text-muted); } .cs-footer__legal p { margin: .5rem 0; max-width: 90ch; } .cs-footer__legal a { color: inherit; } /* ---------- 404 / blue screen ---------- */ .cs-bsod { min-height: 70vh; display: grid; place-items: center; background: var(--cs-vga-blue); color: var(--cs-vga-lgray); font-family: var(--cs-font-term); font-size: clamp(1.1rem, 1rem + .6vw, 1.5rem); padding: 2rem 1rem; } .cs-bsod__inner { max-width: 70ch; } .cs-bsod__title { display: inline-block; background: var(--cs-vga-lgray); color: var(--cs-vga-blue); padding: 0 .5rem; font-family: var(--cs-font-term); font-size: 1.4rem; margin: 0 0 1.5rem; } .cs-bsod a { color: var(--cs-vga-yellow); } .cs-bsod pre { margin: 0; font: inherit; white-space: pre-wrap; } /* ---------- Reveal on scroll (iVOLT) ---------- */ .cs-reveal { opacity: 1; } @media (prefers-reduced-motion: no-preference) { .cs-reveal { opacity: 0; transform: translateY(12px); transition: opacity 320ms steps(6, end), transform 320ms steps(6, end); } .cs-reveal[data-cs-shown] { opacity: 1; transform: none; } } /* ---------- Print & forced colours ---------- */ @media print { .cs-navbar, .cs-taskbar, .cs-boot, .cs-era-switch, .iv-scroll-progress { display: none; } } @media (forced-colors: active) { .cs-window, .cs-crt, .cs-status, .cs-taskbar__task { border: 1px solid CanvasText; } } /* ---------- Hero shot follows the chosen look ---------- */ .cs-hero__shot { display: none; } :root[data-cs-era="dos"] .cs-hero__shot--dos, :root[data-cs-era="92"] .cs-hero__shot--92, :root[data-cs-era="98"] .cs-hero__shot--98 { display: block; } :root:not([data-cs-era]) .cs-hero__shot--dos { display: block; } /* ---------- Contrast on the coloured desktops (92, 98) ---------- Text that sits directly on the teal or blue ground is white; anything inside a window or a light panel returns to black. Links on the ground take a pale accent that passes AA against both grounds. */ :root[data-cs-era="92"] { --cs-bg: #006A6A; --iv-color-bg: #006A6A; --iv-color-text: #FFFFFF; --iv-color-text-muted: #D8ECEC; --cs-link: #FFFFE0; --cs-ground-text: #FFFFFF; } :root[data-cs-era="98"] { --iv-color-text: #FFFFFF; --iv-color-text-muted: #DCE6F5; --cs-link: #FFF0B3; --cs-ground-text: #FFFFFF; } :root[data-cs-era="dos"] { --cs-link: var(--cs-vga-yellow); } .iv-root a { color: var(--cs-link, var(--cs-accent)); } .cs-kicker { color: var(--cs-link, var(--cs-accent)); } :root:is([data-cs-era="92"], [data-cs-era="98"]).iv-root :is(h1, h2, h3, h4) { color: var(--iv-color-text); } :root[data-cs-era="92"].iv-root :is(h1, h2) { text-shadow: 2px 2px 0 rgba(0, 0, 0, .55); } :root[data-cs-era="98"].iv-root :is(h1, h2) { text-shadow: 0 1px 0 rgba(0, 0, 0, .35); } :root:is([data-cs-era="92"], [data-cs-era="98"]) .cs-hero__kicker { color: var(--cs-link); } :root:is([data-cs-era="92"], [data-cs-era="98"]) .cs-hero__facts strong { color: var(--cs-link); } :root:is([data-cs-era="92"], [data-cs-era="98"]) .cs-status--shipped { color: #B8FFB8; } :root:is([data-cs-era="92"], [data-cs-era="98"]) .cs-status--partial { color: #FFE9A0; } :root:is([data-cs-era="92"], [data-cs-era="98"]) .cs-status--planned { color: #E6E6E6; } :root:is([data-cs-era="92"], [data-cs-era="98"]) .cs-legend { background: var(--iv-color-surface-raised); border-style: solid; } :root:is([data-cs-era="92"], [data-cs-era="98"]) .cs-spec :is(th, td) { border-bottom-color: rgba(255, 255, 255, .35); } :root:is([data-cs-era="92"], [data-cs-era="98"]) .cs-steps code { color: #000; } /* Light contexts: windows, panels, list rows, footer body */ :root:is([data-cs-era="92"], [data-cs-era="98"]) :is(.cs-window, .cs-features li, .cs-download__file, .cs-quote, .iv-stat, .iv-card, .cs-legend, .iv-alert, .iv-tabs__panel, .cs-footer__body, .cs-navbar) { --iv-color-text: #000000; --iv-color-text-muted: #3a3a3a; --cs-link: var(--cs-accent); --cs-ground-text: #000000; color: var(--iv-color-text); } :root:is([data-cs-era="92"], [data-cs-era="98"]) :is(.cs-window, .cs-features li, .cs-download__file, .cs-quote, .iv-stat, .iv-card, .cs-legend, .iv-alert, .iv-tabs__panel, .cs-footer__body) :is(h1, h2, h3, h4) { text-shadow: none; color: #000; } :root:is([data-cs-era="92"], [data-cs-era="98"]) :is(.cs-window, .cs-features li, .cs-download__file, .cs-quote, .iv-stat, .iv-card, .cs-legend, .iv-alert, .cs-footer__body) .cs-status--shipped { color: var(--iv-color-success); } :root:is([data-cs-era="92"], [data-cs-era="98"]) :is(.cs-window, .cs-features li, .cs-download__file, .cs-quote, .iv-stat, .iv-card, .cs-legend, .iv-alert, .cs-footer__body) .cs-status--partial { color: var(--iv-color-warning); } :root:is([data-cs-era="92"], [data-cs-era="98"]) :is(.cs-window, .cs-features li, .cs-download__file, .cs-quote, .iv-stat, .iv-card, .cs-legend, .iv-alert, .cs-footer__body) .cs-status--planned { color: var(--iv-color-text-muted); } :root:is([data-cs-era="92"], [data-cs-era="98"]) .cs-spec :is(th, td) { border-bottom-color: var(--iv-color-border); } :root:is([data-cs-era="92"], [data-cs-era="98"]) .cs-window .cs-spec th { color: #3a3a3a; } :root:is([data-cs-era="92"], [data-cs-era="98"]) .cs-features li, :root:is([data-cs-era="92"], [data-cs-era="98"]) .cs-download__file, :root:is([data-cs-era="92"], [data-cs-era="98"]) .cs-quote, :root:is([data-cs-era="92"], [data-cs-era="98"]) .iv-stat { border: 1px solid #000; box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080, var(--iv-shadow-1); } :root:is([data-cs-era="92"], [data-cs-era="98"]) .cs-features small { color: #3a3a3a; } /* Timeline rail and text on the ground */ :root:is([data-cs-era="92"], [data-cs-era="98"]).iv-root .iv-timeline { --iv-timeline-line: rgba(255, 255, 255, .6); --iv-timeline-marker: var(--cs-link); color: var(--iv-color-text); } :root:is([data-cs-era="92"], [data-cs-era="98"]).iv-root .iv-timeline__time { color: var(--cs-link); } :root:is([data-cs-era="92"], [data-cs-era="98"]).iv-root .iv-timeline__title { color: #fff; text-shadow: none; } :root:is([data-cs-era="92"], [data-cs-era="98"]) .cs-progress { border-color: #000; } /* Boot overlay: the 
 must not pick up the framework's code-block surface */
.cs-boot__lines { background: transparent; border: 0; padding: 0; color: inherit; font: inherit; overflow: visible; box-shadow: none; }
/* Sections directly on the DOS ground keep amber links but the 404 keeps its own */
.cs-bsod a { color: var(--cs-vga-yellow); }

/* ---------- Late fixes from the visual review ---------- */
.cs-crt__screen > .cs-hero__shot { display: none; }
:root[data-cs-era="dos"] .cs-crt__screen > .cs-hero__shot--dos, :root:not([data-cs-era]) .cs-crt__screen > .cs-hero__shot--dos { display: block; }
:root[data-cs-era="92"] .cs-crt__screen > .cs-hero__shot--92 { display: block; }
:root[data-cs-era="98"] .cs-crt__screen > .cs-hero__shot--98 { display: block; }
:root:is([data-cs-era="92"], [data-cs-era="98"]).iv-root .iv-button--secondary { background: var(--cs-panel); color: #000; }
:root:is([data-cs-era="92"], [data-cs-era="98"]).iv-root .iv-button--secondary:hover { background: var(--iv-color-surface-raised); color: #000; }
:root:is([data-cs-era="92"], [data-cs-era="98"]).iv-root .iv-button--primary { background: var(--cs-accent); color: #fff; box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .45), inset -1px -1px 0 rgba(0, 0, 0, .5); }
:root:is([data-cs-era="92"], [data-cs-era="98"]).iv-root .iv-button--primary:hover { background: var(--iv-color-primary-hover); color: #fff; }
:root:is([data-cs-era="92"], [data-cs-era="98"]).iv-root .iv-button--primary:active { box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .5), inset -1px -1px 0 rgba(255, 255, 255, .3); }
:root:is([data-cs-era="92"], [data-cs-era="98"]).iv-root code:not(pre code) { color: #000; background: var(--iv-color-surface-raised); }
:root[data-cs-era="dos"].iv-root .iv-timeline__item .iv-timeline__time { font-family: var(--cs-font-term); font-size: 1.15rem; letter-spacing: .06em; }
:root:not([data-cs-era="dos"]).iv-root .iv-timeline__item .iv-timeline__time { font-family: var(--cs-font-bitmap); font-size: .7rem; }

}

/* ---------- Windows that declare their own era ----------
   Unlayered on purpose: a window with data-cs-era keeps its chrome and text colours
   whatever look the page is in (the product cards on the home, the press kit). */
.cs-window[data-cs-era] { color-scheme: light; }
.cs-window[data-cs-era="dos"] { color-scheme: dark; --cs-panel: #0000AA; --cs-panel-text: #FFFFFF; --cs-title-bg: #0000AA; --cs-title-fg: #FFFF55; --cs-accent: #FFFF55; --cs-link: #FFFF55; --iv-color-text: #FFFFFF; --iv-color-text-muted: #AAAAAA; --iv-color-border: #5555FF; background: #0000AA; color: #FFFFFF; border: 4px double #AAAAAA; box-shadow: 8px 8px 0 rgba(0, 0, 0, .55); padding: 0; }
.cs-window[data-cs-era="dos"] .cs-window__bar { display: flex; justify-content: center; background: transparent; color: #FFFF55; font-family: var(--cs-font-term); font-size: 1.25rem; font-weight: 400; padding: .1rem .5rem; margin-top: -.9rem; }
.cs-window[data-cs-era="dos"] .cs-window__title { flex: none; background: #0000AA; padding-inline: .5rem; color: #FFFF55; overflow: visible; }
.cs-window[data-cs-era="dos"] .cs-window__title::before { content: "[ "; color: #AAAAAA; }
.cs-window[data-cs-era="dos"] .cs-window__title::after { content: " ]"; color: #AAAAAA; }
.cs-window[data-cs-era="dos"] :is(.cs-window__controls, .cs-window__icon) { display: none; }
.cs-window[data-cs-era="dos"] .cs-window__status { border-top: 1px solid #AAAAAA; color: #AAAAAA; }
.cs-window[data-cs-era="dos"] .cs-window__status span { box-shadow: none; }
.cs-window[data-cs-era="dos"] .cs-window__status span::before { content: "■ "; color: #FFFF55; }
.cs-window[data-cs-era="dos"] .cs-menubar { background: #AAAAAA; color: #000; border: 0; }
.cs-window[data-cs-era="dos"] .cs-spec th { color: #55FFFF; }
.cs-window[data-cs-era="dos"] :is(.cs-spec th, .cs-spec td) { border-bottom: 1px dotted #AAAAAA; }
.cs-window[data-cs-era="dos"] :is(a, .cs-kicker) { color: #FFFF55; }
.cs-window[data-cs-era="dos"] .cs-status--shipped { color: #55FF55; }
.cs-window[data-cs-era="dos"] .cs-status--partial { color: #FFFF55; }
.cs-window[data-cs-era="dos"] .cs-status--planned { color: #AAAAAA; }
.cs-window[data-cs-era="dos"] :is(h1, h2, h3, h4) { color: #FFFFFF; text-shadow: none; }
.cs-window[data-cs-era="dos"] .cs-product__meta li { border-color: #AAAAAA; color: #FFFFFF; opacity: 1; }
.cs-window[data-cs-era="dos"] .iv-button { border-radius: 0; box-shadow: 4px 4px 0 rgba(0, 0, 0, .55); border: 2px solid currentColor; outline: 0; }
.cs-window[data-cs-era="dos"] .iv-button--primary { background: #FFFF55; color: #0000AA; border-color: #FFFF55; }
.cs-window[data-cs-era="dos"] .iv-button--primary:hover { background: #FFFFFF; border-color: #FFFFFF; color: #0000AA; }
.cs-window[data-cs-era="dos"] .iv-button--secondary { background: #0000AA; color: #FFFFFF; border-color: #AAAAAA; }
.cs-window[data-cs-era="dos"] code { background: #000; color: #55FF55; }

.cs-window[data-cs-era="92"], .cs-window[data-cs-era="98"] { --cs-panel-text: #000000; --iv-color-text: #000000; --iv-color-text-muted: #3a3a3a; --iv-color-border: #808080; --iv-color-surface-raised: #ECECEC; color: #000000; border: 1px solid #000; padding: 3px; }
.cs-window[data-cs-era="92"] { --cs-panel: #C0C0C0; --cs-title-bg: #000080; --cs-title-fg: #FFFFFF; --cs-accent: #000080; --cs-link: #000080; --iv-color-surface-raised: #DFDFDF; background: #C0C0C0; box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080, inset 2px 2px 0 #dfdfdf, inset -2px -2px 0 #404040, 3px 3px 0 rgba(0, 0, 0, .55); }
.cs-window[data-cs-era="98"] { --cs-panel: #D4D0C8; --cs-title-bg: linear-gradient(90deg, #0A246A, #A6CAF0); --cs-title-fg: #FFFFFF; --cs-accent: #0A246A; --cs-link: #0A246A; --iv-color-surface-raised: #ECE9E1; background: #D4D0C8; box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080, inset 2px 2px 0 #ece9e1, inset -2px -2px 0 #404040, 3px 3px 0 rgba(0, 0, 0, .45); }
.cs-window[data-cs-era="92"] .cs-window__bar, .cs-window[data-cs-era="98"] .cs-window__bar { display: flex; justify-content: flex-start; margin-top: 0; padding: .3rem .5rem; background: var(--cs-title-bg); color: var(--cs-title-fg); font-family: var(--cs-font-ui); font-size: .9rem; font-weight: 700; }
.cs-window[data-cs-era="92"] .cs-window__title, .cs-window[data-cs-era="98"] .cs-window__title { flex: 1; background: transparent; padding: 0; color: inherit; }
.cs-window[data-cs-era="92"] .cs-window__title::before, .cs-window[data-cs-era="98"] .cs-window__title::before, .cs-window[data-cs-era="92"] .cs-window__title::after, .cs-window[data-cs-era="98"] .cs-window__title::after { content: none; }
.cs-window[data-cs-era="92"] .cs-window__controls, .cs-window[data-cs-era="98"] .cs-window__controls { display: inline-flex; }
.cs-window[data-cs-era="92"] .cs-window__icon, .cs-window[data-cs-era="98"] .cs-window__icon { display: inline-grid; }
.cs-window[data-cs-era="92"] .cs-window__ctl, .cs-window[data-cs-era="98"] .cs-window__ctl { display: inline-grid; background: var(--cs-panel); color: #000; }
.cs-window[data-cs-era="92"] .cs-window__status, .cs-window[data-cs-era="98"] .cs-window__status { border-top: 1px solid #808080; color: #3a3a3a; }
.cs-window[data-cs-era="92"] .cs-window__status span, .cs-window[data-cs-era="98"] .cs-window__status span { box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff; }
.cs-window[data-cs-era="92"] .cs-window__status span::before, .cs-window[data-cs-era="98"] .cs-window__status span::before { content: none; }
.cs-window[data-cs-era="92"] .cs-menubar, .cs-window[data-cs-era="98"] .cs-menubar { background: var(--cs-panel); color: #000; border-bottom: 1px solid #808080; font-family: var(--cs-font-ui); font-size: .85rem; }
.cs-window[data-cs-era="92"] .cs-spec th, .cs-window[data-cs-era="98"] .cs-spec th { color: #3a3a3a; }
.cs-window[data-cs-era="92"] :is(.cs-spec th, .cs-spec td), .cs-window[data-cs-era="98"] :is(.cs-spec th, .cs-spec td) { border-bottom: 1px solid #808080; }
.cs-window[data-cs-era="92"] :is(a, .cs-kicker), .cs-window[data-cs-era="98"] :is(a, .cs-kicker) { color: var(--cs-link); }
.cs-window[data-cs-era="92"] a:hover, .cs-window[data-cs-era="98"] a:hover { background: transparent; color: var(--cs-link); text-decoration: underline; }
.cs-window[data-cs-era="92"] .cs-status--shipped, .cs-window[data-cs-era="98"] .cs-status--shipped { color: #006400; }
.cs-window[data-cs-era="92"] .cs-status--partial, .cs-window[data-cs-era="98"] .cs-status--partial { color: #7a4a00; }
.cs-window[data-cs-era="92"] .cs-status--planned, .cs-window[data-cs-era="98"] .cs-status--planned { color: #3a3a3a; }
.cs-window[data-cs-era="92"] :is(h1, h2, h3, h4), .cs-window[data-cs-era="98"] :is(h1, h2, h3, h4) { color: #000; text-shadow: none; }
.cs-window[data-cs-era="92"] .cs-product__meta li, .cs-window[data-cs-era="98"] .cs-product__meta li { border-color: #000; color: #000; opacity: 1; }
.cs-window[data-cs-era="92"] .iv-button, .cs-window[data-cs-era="98"] .iv-button { border-radius: 0; background: var(--cs-panel); color: #000; border: 1px solid #000; box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080, inset 2px 2px 0 var(--cs-panel), inset -2px -2px 0 #404040; padding: .45rem 1rem; font-weight: 600; }
.cs-window[data-cs-era="92"] .iv-button--primary, .cs-window[data-cs-era="98"] .iv-button--primary { background: var(--cs-accent); color: #fff; box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .45), inset -1px -1px 0 rgba(0, 0, 0, .5); }
.cs-window[data-cs-era="92"] .iv-button--primary:hover, .cs-window[data-cs-era="98"] .iv-button--primary:hover { background: #0000AA; color: #fff; }
.cs-window[data-cs-era="92"] .iv-button:active, .cs-window[data-cs-era="98"] .iv-button:active { transform: none; box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #fff; }
.cs-window[data-cs-era="92"] code, .cs-window[data-cs-era="98"] code { background: var(--iv-color-surface-raised); color: #000; }
.cs-window[data-cs-era="92"] .cs-footer__list a, .cs-window[data-cs-era="98"] .cs-footer__list a { color: var(--cs-link); }