/* The pixel font, for the pages that belong to Kibbit's room (the room itself and the
plant's close-up). Pixelify Sans, SIL Open Font License (fonts/PixelifySans-OFL.txt). */
@font-face {
font-family: "Pixelify Sans";
src: url("fonts/PixelifySans.ttf") format("truetype");
font-weight: 400 700;
}
/*
* Kibbit's design system — the one place colors, spacing, corners and type are defined.
* Every page (room, chat, settings, speech bubbles) links this file and uses these
* tokens and components instead of its own values.
*
* Themes: dark by default; switches to the light glass. The app
* picks the theme (Configuración → Kibbit → Apariencia): for the room it can follow how light
* the wallpaper is behind it, for floating panels it follows macOS.
*
* Type has two roles, and the look of kibbit.app on top:
* SF Pro — everything people read (messages, notes, descriptions, most buttons)
* Pixel — what decorates: UPPERCASE labels, titles, the main button, the ▶ of a game menu
* SF Mono — small data and code
* The rest of the site's look lives here too: phosphor glow, corners cut in steps, hard
* shadows that press down, and old-screen switching on. Long reading never goes pixel.
*/
:root {
/* Brand */
--acid: #B6FC14;
--acid-rgb: 182, 252, 20;
--on-acid: #0A0A0A; /* text on acid surfaces */
--amber: #FFB020;
--amber-rgb: 255, 176, 32;
--red: #FF5C5C;
--red-rgb: 255, 92, 92;
--sky: #6CC8FF;
--lamp: #FFE29A; /* the only warm light */
--cap: #5B6CFF; /* nightcap */
--ink: #000000; /* Kibbit's outline and eyes: always black */
--acid-deep: #5C8A00; /* the hard shadow under green things */
/* Type */
--font-sans: "SF Pro Text", -apple-system, system-ui, sans-serif;
--font-display: "SF Pro Display", -apple-system, system-ui, sans-serif;
--font-mono: "SF Mono", ui-monospace, Menlo, monospace;
--font-pixel: "Pixelify Sans", "SF Mono", ui-monospace, monospace;
--text-label: 10px; /* mono uppercase labels */
--text-small: 12px;
--text-body: 13px;
--text-title: 16px;
--text-heading: 20px;
--label-tracking: 1.5px;
/* Spacing */
--s1: 4px;
--s2: 8px;
--s3: 12px;
--s4: 16px;
--s5: 24px;
/* Corners */
--r-card: 18px; /* cards, panels, windows */
--r-field: 10px; /* fields, messages, inner boxes */
--r-small: 6px; /* tiny chips, code */
--r-pill: 999px; /* round buttons, pills */
/* Motion */
--fast: 0.15s ease;
--slow: 0.25s ease;
--step: steps(3); /* pixel things move in steps, like an old game */
--glow: 0 0 14px rgba(var(--acid-rgb), 0.45);
}
/* ---------- Dark glass (default) ---------- */
:root,
[data-theme="dark"] {
--glass-top: rgba(24, 24, 26, 0.58);
--glass-bottom: rgba(6, 6, 8, 0.76);
--surface: rgba(255, 255, 255, 0.05);
--surface-hover: rgba(255, 255, 255, 0.09);
--surface-strong: rgba(255, 255, 255, 0.13);
--inset: rgba(0, 0, 0, 0.35); /* code, wells */
--border: rgba(255, 255, 255, 0.08);
--border-strong: rgba(255, 255, 255, 0.14);
--text: #F4F4F2;
--text-dim: rgba(244, 244, 242, 0.58);
--text-faint: rgba(244, 244, 242, 0.34);
--acid-text: var(--acid); /* acid used as a text color */
--amber-text: var(--amber);
--acid-soft: rgba(var(--acid-rgb), 0.14);
--shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.7);
--scroll: rgba(255, 255, 255, 0.16);
color-scheme: dark;
}
/* ---------- Light glass ---------- */
[data-theme="light"] {
--glass-top: rgba(255, 255, 255, 0.66);
--glass-bottom: rgba(236, 236, 240, 0.80);
--surface: rgba(0, 0, 0, 0.04);
--surface-hover: rgba(0, 0, 0, 0.07);
--surface-strong: rgba(0, 0, 0, 0.10);
--inset: rgba(0, 0, 0, 0.06);
--border: rgba(0, 0, 0, 0.09);
--border-strong: rgba(0, 0, 0, 0.16);
--text: #16161A;
--text-dim: rgba(22, 22, 26, 0.60);
--text-faint: rgba(22, 22, 26, 0.38);
--acid-text: #4A7A00; /* acid is unreadable as text on white; a deep green instead */
--glow: none; /* phosphor doesn't glow on paper */
--amber-text: #A15F00;
--acid-soft: rgba(var(--acid-rgb), 0.28);
--shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.28);
--scroll: rgba(0, 0, 0, 0.18);
color-scheme: light;
}
/* ---------- Components ---------- */
/* Card / panel surface (the app puts a real blur of what's behind it underneath). */
.glass {
background: linear-gradient(155deg, var(--glass-top) 0%, var(--glass-bottom) 100%);
border: 1px solid var(--border);
border-radius: var(--r-card);
color: var(--text);
transition: border-color var(--slow);
}
/* Small uppercase caption (section titles, card titles). */
.label {
font: 500 11px var(--font-pixel);
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--text-dim);
font-variant-ligatures: none;
}
.label.acid { color: var(--acid-text); }
/* Buttons: readable text in SF Pro. */
.btn {
all: unset;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s1);
padding: 6px var(--s3);
border-radius: 4px;
border: 1px solid var(--border-strong);
background: var(--surface);
color: var(--text);
font: 500 var(--text-small) var(--font-sans);
white-space: nowrap;
cursor: pointer;
transition: background var(--fast), border-color var(--fast), transform 0.1s ease;
}
.btn:hover { background: var(--surface-hover); }
.btn:active { transform: translateY(1px); }
/* The main button, as on kibbit.app: a green block with stepped corners on a hard shadow,
in pixel type. It lifts a little when pointed at and presses right down when clicked. */
.btn.primary {
border: 0;
border-radius: 0;
margin: 2px 5px 5px 2px; /* room for the edge and the shadow */
padding: 7px var(--s3) 6px;
background: var(--acid);
color: var(--on-acid);
font: 600 var(--text-small) var(--font-pixel);
letter-spacing: 0.4px;
box-shadow: 0 -2px 0 0 var(--acid), 0 2px 0 0 var(--acid), -2px 0 0 0 var(--acid), 2px 0 0 0 var(--acid), 4px 5px 0 0 var(--acid-deep);
transition: transform 0.08s steps(2), box-shadow 0.08s steps(2);
}
.btn.primary:hover { transform: translate(-1px, -1px); box-shadow: 0 -2px 0 0 var(--acid), 0 2px 0 0 var(--acid), -2px 0 0 0 var(--acid), 2px 0 0 0 var(--acid), 5px 6px 0 0 var(--acid-deep); }
.btn.primary:active { transform: translate(3px, 4px); box-shadow: 0 -2px 0 0 var(--acid), 0 2px 0 0 var(--acid), -2px 0 0 0 var(--acid), 2px 0 0 0 var(--acid), 1px 1px 0 0 var(--acid-deep); }
.btn.quiet { border-color: transparent; background: transparent; color: var(--text-dim); }
.btn.quiet:hover { background: var(--surface-hover); color: var(--text); }
.btn.icon { width: 28px; height: 28px; padding: 0; }
.btn:disabled, .btn.busy { opacity: 0.45; pointer-events: none; }
/* Text fields. */
.field {
box-sizing: border-box;
width: 100%;
padding: var(--s2) var(--s3);
border-radius: 4px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
font: var(--text-body) var(--font-sans);
outline: none;
transition: border-color var(--fast), background var(--fast);
}
.field::placeholder { color: var(--text-faint); }
.field:focus { border-color: rgba(var(--acid-rgb), 0.7); background: var(--surface-hover); box-shadow: 0 0 0 1px rgba(var(--acid-rgb), 0.35), var(--glow); }
/* On/off switch: */
.switch { position: relative; display: inline-block; width: 38px; height: 22px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
/* A pixel toggle: a track with stepped corners and a square knob that slides in steps. */
.switch span {
position: absolute;
inset: 2px;
background: var(--surface-strong);
/* An edge two points out on each side but not at the corners: they come out cut in a step. */
box-shadow: 0 -2px 0 0 var(--surface-strong), 0 2px 0 0 var(--surface-strong), -2px 0 0 0 var(--surface-strong), 2px 0 0 0 var(--surface-strong);
cursor: pointer;
transition: background 0.12s steps(2), box-shadow 0.12s steps(2);
}
.switch span::after {
content: "";
position: absolute;
left: 2px;
top: 2px;
width: 14px;
height: 14px;
background: #FFFFFF;
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.35);
transition: transform 0.15s var(--step), background 0.15s steps(2);
}
.switch input:checked + span { background: var(--acid); box-shadow: 0 -2px 0 0 var(--acid), 0 2px 0 0 var(--acid), -2px 0 0 0 var(--acid), 2px 0 0 0 var(--acid), var(--glow); }
.switch input:checked + span::after { transform: translateX(16px); background: var(--on-acid); }
/* Status pill: PERMITIDO */
.pill {
display: inline-block;
padding: 3px var(--s2) 2px;
border-radius: 2px;
font: 500 var(--text-label) var(--font-pixel);
letter-spacing: 1px;
text-transform: uppercase;
background: var(--surface);
color: var(--text-dim);
}
.pill.ok { background: var(--acid-soft); color: var(--acid-text); }
.pill.warn { background: rgba(var(--amber-rgb), 0.16); color: var(--amber-text); }
.pill.bad { background: rgba(var(--red-rgb), 0.14); color: var(--red); }
/* Keyboard key. */
kbd {
font: 500 11px var(--font-pixel);
padding: 1px 5px 0;
border-radius: 2px;
border: 1px solid var(--border-strong);
border-bottom-width: 3px; /* a key you could press */
color: var(--text-dim);
}
/* Inline code. */
code {
font: 0.9em var(--font-mono);
padding: 1px var(--s1);
border-radius: var(--r-small);
background: var(--inset);
}
/* Thin scrollbars everywhere. */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--acid-rgb), 0.6); }
/* ---------- From kibbit.app ---------- */
/* The ▶ of a game menu: on anything with .pick, it appears beside what's under the pointer,
focused or chosen (.on), and nudges back and forth. */
.pick { position: relative; }
.pick::before {
content: "▶";
position: absolute;
left: 6px;
top: 50%;
translate: 0 -50%;
font-size: 9px;
color: var(--acid-text);
opacity: 0;
pointer-events: none;
}
.pick:hover::before, .pick:focus-visible::before, .pick.on::before { opacity: 1; animation: pick-nudge 0.6s steps(2) infinite; }
@keyframes pick-nudge { 50% { translate: 2px -50%; } }
/* A pixel box around anything: an edge with its corners cut in a step, in --px-c. */
.px-box { border-radius: 0; box-shadow: 0 -2px 0 0 var(--px-c, var(--acid)), 0 2px 0 0 var(--px-c, var(--acid)), -2px 0 0 0 var(--px-c, var(--acid)), 2px 0 0 0 var(--px-c, var(--acid)); }
/* Phosphor: text that glows like an old green screen. */
.glow { color: var(--acid-text); text-shadow: var(--glow); }
/* A blinking block caret, as on the site's terminal. */
.caret { display: inline-block; color: var(--acid-text); animation: caret-blink 1s steps(1) infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }
/* Switching on like an old screen: a bright line that opens up into the picture. */
.crt-on { animation: crt-on 0.32s steps(6) both; }
@keyframes crt-on {
0% { transform: scaleY(0.02); filter: brightness(3); }
40% { transform: scaleY(0.02); filter: brightness(2); }
100% { transform: none; filter: none; }
}
/* The lines of an old screen, over something (::after on it, so it needs no markup). */
.scanlines { position: relative; }
.scanlines::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, 0.18) 2px 3px);
}
/* ---------- A screen inside an old television ----------
Configuración → Kibbit → Ventanas → "Pantalla vieja" (the default). The window becomes a
TV: a plastic case around it, and inside, the screen — dark glass with a glow in the middle,
the corners darker as the tube curves away, faint scanlines, and a power light on the case.
What you read stays in plain type and a warm white, so a long answer is still easy on the
eyes; the green glow is for the decoration. In light mode it's the other old screen, the
pale green of a Game Boy. Whatever wears .tv gets it: the chat, Configuración, the welcome.
"Aumentar contraste" drops the lines and the vignette. */
:root[data-screen="crt"] {
--tv-case: #2A2440;
--tv-case-hi: #3F3760;
--tv-case-lo: #17131F;
--tv-glass: radial-gradient(ellipse at 50% 45%, #10231A 0%, #07110C 60%, #030806 100%);
--tv-lines: rgba(0, 0, 0, 0.16);
--tv-vignette: rgba(0, 0, 0, 0.7);
--tv-bezel: 10px;
--tv-chin: 18px; /* a TV is heavier at the bottom, where its light is */
}
:root[data-screen="crt"][data-theme="light"] {
--tv-case: #CFC9BA;
--tv-case-hi: #EFEADF;
--tv-case-lo: #A8A193;
--tv-glass: radial-gradient(ellipse at 50% 45%, #D2DDB0 0%, #C3CF9E 65%, #AEBB88 100%);
--tv-lines: rgba(40, 60, 20, 0.07);
--tv-vignette: rgba(60, 80, 30, 0.35);
}
/* Inside the glass, the words: a warm phosphor white in the dark, Game Boy ink in the light. */
:root[data-screen="crt"] .tv {
--text: #E8F2DA;
--text-dim: rgba(232, 242, 218, 0.64);
--text-faint: rgba(232, 242, 218, 0.40);
--surface: rgba(182, 252, 20, 0.05);
--surface-hover: rgba(182, 252, 20, 0.09);
--surface-strong: rgba(182, 252, 20, 0.14);
--border: rgba(182, 252, 20, 0.12);
--border-strong: rgba(182, 252, 20, 0.22);
--inset: rgba(0, 0, 0, 0.4);
--menu-base: #0A160F;
}
:root[data-screen="crt"][data-theme="light"] .tv {
--text: #1F2A12;
--text-dim: rgba(31, 42, 18, 0.70);
--text-faint: rgba(31, 42, 18, 0.48);
--surface: rgba(31, 42, 18, 0.06);
--surface-hover: rgba(31, 42, 18, 0.10);
--surface-strong: rgba(31, 42, 18, 0.16);
--border: rgba(31, 42, 18, 0.16);
--border-strong: rgba(31, 42, 18, 0.28);
--inset: rgba(31, 42, 18, 0.08);
--acid-text: #3B5A00;
--menu-base: #CBD6A6;
}
:root[data-screen="crt"] .tv {
/* Each page keeps its own positioning (the chat is fixed to its window). */
color: var(--text);
background: var(--tv-glass);
border: var(--tv-bezel) solid var(--tv-case);
border-bottom-width: var(--tv-chin);
border-radius: 18px;
/* The case: a lit top edge and a shadowed bottom, like moulded plastic. */
box-shadow: 0 0 0 1px var(--tv-case-lo), inset 0 0 0 1px rgba(0, 0, 0, 0.5);
background-clip: padding-box;
}
/* The case's own light and shade, drawn on its border. */
:root[data-screen="crt"] .tv > .tv-case {
position: absolute;
inset: calc(-1 * var(--tv-bezel));
bottom: calc(-1 * var(--tv-chin));
border-radius: 18px;
pointer-events: none;
box-shadow: inset 0 2px 0 var(--tv-case-hi), inset 0 -3px 0 var(--tv-case-lo);
z-index: 50;
}
/* The glass: faint scanlines and darker corners, over everything, never in the way. */
:root[data-screen="crt"] .tv::after {
content: "";
position: absolute;
inset: 0;
z-index: 49;
pointer-events: none;
border-radius: 8px;
background: repeating-linear-gradient(to bottom, transparent 0 2px, var(--tv-lines) 2px 3px);
box-shadow: inset 0 0 50px var(--tv-vignette), inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}
/* The power light, on the case under the glass. */
:root[data-screen="crt"] .tv::before {
content: "";
position: absolute;
right: 16px;
bottom: calc(-1 * var(--tv-chin) + 6px);
width: 6px;
height: 6px;
z-index: 51;
background: var(--acid);
box-shadow: 0 0 6px var(--acid);
pointer-events: none;
}
:root[data-screen="crt"] .tv > .tv-case::after {
content: "";
position: absolute;
left: 16px;
bottom: 6px;
width: 42px;
height: 6px;
background: repeating-linear-gradient(to right, var(--tv-case-lo) 0 3px, transparent 3px 6px);
}
:root[data-screen="crt"][data-contrast="high"] .tv::after { background: none; box-shadow: inset 0 0 0 1px var(--border-strong); }
/* ---------- Keyboard ---------- */
/* Every button here starts with `all: unset`, which throws away the focus ring along with
everything else. Without this, tabbing through Configuración — or approving a command
without touching the mouse — means guessing where you are. :focus-visible shows it for the
keyboard only, so clicking doesn't leave outlines nobody asked for. */
:focus-visible {
outline: 2px solid var(--acid);
outline-offset: 2px;
border-radius: var(--r-small);
}
.btn:focus-visible, .card:focus-visible, .tip:focus-visible, .model:focus-visible,
nav button:focus-visible, .seg button:focus-visible { outline-offset: 1px; }
.field:focus-visible { outline-offset: 0; }
/* The switch hides its checkbox, so the ring goes on the part you can actually see. */
.switch input:focus-visible + span { outline: 2px solid var(--acid); outline-offset: 2px; }
/* ---------- Accessibility ---------- */
/* "Reduce motion": the system query, and the app's own word for it — the pages that animate
in JavaScript are told directly (see kibbitAccess in theme.js). */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
/* "Increase contrast": macOS asks for solid surfaces, firm borders and no faint text. */
:root[data-contrast="high"] {
--glass-top: #141416;
--glass-bottom: #141416;
--surface: rgba(255, 255, 255, 0.10);
--surface-hover: rgba(255, 255, 255, 0.18);
--surface-strong: rgba(255, 255, 255, 0.24);
--border: rgba(255, 255, 255, 0.45);
--border-strong: rgba(255, 255, 255, 0.75);
--text-dim: rgba(244, 244, 242, 0.88);
--text-faint: rgba(244, 244, 242, 0.70);
--bubble-base: #0B0B0D;
}
:root[data-contrast="high"][data-theme="light"] {
--glass-top: #FFFFFF;
--glass-bottom: #FFFFFF;
--surface: rgba(0, 0, 0, 0.06);
--surface-hover: rgba(0, 0, 0, 0.12);
--surface-strong: rgba(0, 0, 0, 0.20);
--border: rgba(0, 0, 0, 0.45);
--border-strong: rgba(0, 0, 0, 0.75);
--text-dim: rgba(22, 22, 26, 0.90);
--text-faint: rgba(22, 22, 26, 0.72);
--bubble-base: #FFFFFF;
}
:root[data-contrast="high"] .btn, :root[data-contrast="high"] .pill { border: 1px solid var(--border-strong); }
/* The studio's wordmark, drawn like its logo: ">_" and "PageDraft Studio" in one colour and
one bold weight, the prompt tucked in close. The gap is a fraction of an em rather than a
space character, because in a monospaced font a space is a full letter wide. */
.pds { display: inline-flex; align-items: baseline; gap: 0.3em; font: 700 1em var(--font-display);
letter-spacing: -0.01em; color: inherit;
/* Room for the green block it lights up in, without moving anything around it. */
padding: 0.12em 0.35em; margin: -0.12em -0.35em; border-radius: 3px;
transition: background var(--fast), color var(--fast); }
/* Pointed at, it lights up like the studio's own site: a block of green, black letters. */
.maker:hover .pds, .maker:focus-visible .pds, .pds[data-url]:hover, .pds[data-url]:focus-visible {
background: var(--acid); color: var(--on-acid);
}
.pds[data-url] { cursor: pointer; outline: none; }
.pds-prompt { font-family: var(--font-mono); font-weight: 800; letter-spacing: -0.08em; }
.pds.big { font-size: var(--text-title); color: var(--text); }
/* "por >_ PageDraft Studio": the signature, quiet, as a link to the studio's site. */
.maker {
all: unset;
display: inline-flex;
align-items: baseline;
gap: 9px; /* 5px of air, plus what the green block borrows */
font: 400 var(--text-small) var(--font-sans);
color: var(--text-dim);
white-space: nowrap;
cursor: pointer;
border-radius: var(--r-small);
transition: color var(--fast);
}
.maker:hover { color: var(--text); }
.maker:focus-visible { outline: none; }