/* Habit Otter — production stylesheet. Built from the design-system bundle. */
@font-face {
font-family: 'Golos Text';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/golostext-400-cyrillic-ext.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Golos Text';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/golostext-400-cyrillic.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Golos Text';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/golostext-400-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Golos Text';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/golostext-400-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Golos Text';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/assets/fonts/golostext-400-cyrillic-ext.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Golos Text';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/assets/fonts/golostext-400-cyrillic.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Golos Text';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/assets/fonts/golostext-400-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Golos Text';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/assets/fonts/golostext-400-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Golos Text';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/assets/fonts/golostext-400-cyrillic-ext.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Golos Text';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/assets/fonts/golostext-400-cyrillic.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Golos Text';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/assets/fonts/golostext-400-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Golos Text';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/assets/fonts/golostext-400-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Golos Text';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/assets/fonts/golostext-400-cyrillic-ext.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Golos Text';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/assets/fonts/golostext-400-cyrillic.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Golos Text';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/assets/fonts/golostext-400-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Golos Text';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/assets/fonts/golostext-400-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Press Start 2P';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/pressstart2p-400-cyrillic-ext.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Press Start 2P';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/pressstart2p-400-cyrillic.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Press Start 2P';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/pressstart2p-400-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Press Start 2P';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/pressstart2p-400-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Spline Sans Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/splinesansmono-400-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Spline Sans Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/splinesansmono-400-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Spline Sans Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/assets/fonts/splinesansmono-400-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Spline Sans Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/assets/fonts/splinesansmono-400-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ============================================================
COLORS — Habit Otter
Dark-theme first. The whole brand lives on deep navy, like the
pixel mascot art. Palette extracted from the otter illustration.
============================================================ */
:root {
/* ---- Brand raw palette ---- */
--navy-900: #060C28; /* deepest — contrast layers, footer, shadows */
--navy-800: #0A1238; /* recessed wells, code blocks */
--navy-700: #0D184B; /* PRIMARY background (the mascot's backdrop) */
--navy-600: #15205C; /* raised surface / card on navy */
--navy-500: #202D74; /* hover surface, hairlines on dark */
--navy-400: #36438C; /* muted borders, disabled strokes */
--cream: #EDDCB3; /* otter belly / paper — PRIMARY text on navy */
--cream-200: #F6EED6; /* brightest paper — pixel highlights */
--cream-dim: #C8B98F; /* muted cream — secondary text */
--green-500: #3D9733; /* THE checkmark green — success + primary CTA */
--green-600: #2F7A28; /* pressed / darker */
--green-400: #57B449; /* hover / lighter */
--green-200: #8FD884; /* tints, glows */
--green-bg: #16321A; /* green-tinted surface fill */
--amber-500: #B76D3C; /* pencil amber — SECONDARY accent */
--amber-400: #CE824D; /* amber hover */
--amber-600: #95572C; /* amber pressed */
--brown-500: #945938; /* otter fur — tertiary / illustration tie-in */
--brown-600: #6F4129;
/* ---- Status (built from brand hues) ---- */
--danger-500: #C5482F; /* missed / destructive — warm brick, not pure red */
--danger-400: #DB6149;
--warn-500: #D6A338; /* streak-at-risk / nudge — warm gold */
/* ============================================================
SEMANTIC ALIASES — reach for these in components, not raw hues.
============================================================ */
/* Surfaces */
--bg-app: var(--navy-700);
--bg-deep: var(--navy-900);
--surface-card: var(--navy-600);
--surface-raised:var(--navy-500);
--surface-sunken:var(--navy-800);
--surface-green: var(--green-bg);
/* Text */
--text-strong: var(--cream-200);
--text-body: var(--cream);
--text-muted: var(--cream-dim);
--text-on-green: var(--cream-200);
--text-on-amber: var(--navy-900);
--text-link: var(--green-400);
/* Lines & borders */
--border-pixel: var(--navy-900); /* chunky dark pixel outline */
--border-soft: var(--navy-500); /* subtle hairline divider */
--border-strong: var(--cream); /* cream pixel outline on dark */
/* Actions */
--action-primary: var(--green-500);
--action-primary-hover: var(--green-400);
--action-primary-press: var(--green-600);
--action-secondary: var(--amber-500);
--action-secondary-hover:var(--amber-400);
--action-secondary-press:var(--amber-600);
/* Feedback */
--focus-ring: var(--green-200);
--success: var(--green-500);
--danger: var(--danger-500);
--warning: var(--warn-500);
}
/* ============================================================
TYPOGRAPHY — Habit Otter
Pixel display for headings / buttons / labels.
Clean modern sans for body (readability first).
Pixel-art is an ACCENT, not a costume — never set long body
copy in the pixel font.
============================================================ */
:root {
/* ---- Families ---- */
--font-display: 'Handjet', monospace; /* headings, CTAs, pixel labels (качественная кириллица) */
--font-display-retro: 'Press Start 2P', monospace; /* жёсткий 8-bit альтернативный; кириллица грубая */
--font-body: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif; /* body, paragraphs, UI */
--font-mono: 'Spline Sans Mono', ui-monospace, monospace; /* counts, streak numbers, tiny tags */
/* ---- Type scale (display / pixel) ----
Pixel fonts read big and chunky — start large, tight tracking. */
--fs-display: clamp(40px, 7vw, 72px); /* @kind font */
--fs-h1: clamp(32px, 4.5vw, 48px); /* @kind font */
--fs-h2: clamp(26px, 3.2vw, 34px); /* @kind font */
--fs-h3: 22px; /* @kind font */
--fs-pixel-sm: 15px; /* @kind font */
--fs-pixel-xs: 12px; /* @kind font */
/* ---- Type scale (body / sans) ---- */
--fs-lead: clamp(18px, 2vw, 21px); /* @kind font */
--fs-body: 16px; /* @kind font */
--fs-sm: 14px; /* @kind font */
--fs-xs: 12.5px; /* @kind font */
/* ---- Weights ---- */
--fw-regular: 400; /* @kind other */
--fw-medium: 500; /* @kind other */
--fw-semibold: 600; /* @kind other */
--fw-bold: 700; /* @kind other */
--fw-black: 800; /* @kind other */
/* Handjet в заголовках всегда 600–700: на 400 он слишком тонкий для пиксельного образа. */
/* ---- Line heights ---- */
--lh-tight: 1.05; /* @kind other */
--lh-snug: 1.25; /* @kind other */
--lh-body: 1.6; /* @kind other */
/* ---- Tracking ---- */
--ls-display: 1px; /* @kind other */
--ls-label: 1px; /* @kind other */
--ls-body: 0px; /* @kind other */
}
/* ---- Helper classes (optional; tokens are the source of truth) ---- */
.ho-display {
font-family: var(--font-display);
font-size: var(--fs-display);
line-height: var(--lh-tight);
letter-spacing: var(--ls-display);
color: var(--text-strong);
font-weight: var(--fw-bold);
}
.ho-h2 {
font-family: var(--font-display);
font-size: var(--fs-h2);
line-height: var(--lh-tight);
color: var(--text-strong);
}
.ho-eyebrow {
font-family: var(--font-display);
font-size: var(--fs-pixel-xs);
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--green-400);
}
.ho-body {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--text-body);
}
.ho-lead {
font-family: var(--font-body);
font-size: var(--fs-lead);
line-height: var(--lh-snug);
color: var(--text-body);
}
.ho-mono {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
}
/* ============================================================
SPACING & LAYOUT — Habit Otter
4px base grid. Pixel art snaps to whole pixels — keep spacing
on the grid so chunky borders and shadows align cleanly.
============================================================ */
:root {
/* ---- Spacing scale (4px grid) ---- */
--space-0: 0;
--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;
--space-20: 80px;
--space-24: 96px;
--space-32: 128px;
/* ---- Radii ----
Pixel-art brand: corners are SHARP or stepped, never soft.
Use small radii only on body-text surfaces for comfort. */
--radius-0: 0px; /* default — true pixel edge */
--radius-sm: 2px; /* faint softening */
--radius-md: 4px; /* sans-text cards */
--radius-pill: 999px; /* avatars / dots only */
/* ---- Pixel unit ----
The thickness of one "pixel" in chunky borders & hard shadows.
Scale borders/shadows in multiples of this. */
--px: 3px;
/* ---- Container widths ---- */
--container-narrow: 640px; /* prose / single column */
--container: 1080px; /* default marketing width */
--container-wide: 1280px;
/* ---- Mobile frame (Telegram-first) ---- */
--screen-mobile: 390px;
/* ---- Z-index ladder ---- */
--z-base: 0; /* @kind other */
--z-card: 10; /* @kind other */
--z-sticky: 100; /* @kind other */
--z-overlay: 1000; /* @kind other */
--z-toast: 1100; /* @kind other */
}
/* ============================================================
EFFECTS — Habit Otter
The pixel-art signature lives here: CHUNKY borders + HARD
offset shadows (no blur). Pixel art has no soft glows — light
is blocky. Reserve soft blurred shadows for nothing; use hard
"drop" shadows that look like stacked pixels.
============================================================ */
:root {
/* ---- Pixel borders ----
A solid dark outline = the "sprite outline" around every
interactive chunk. Always whole-pixel multiples. */
--border-1: var(--px) solid var(--border-pixel); /* 3px sprite outline */
--border-2: calc(var(--px) * 2) solid var(--border-pixel);/* 6px heavy outline */
--border-hair: 1px solid var(--border-soft); /* subtle divider */
/* ---- Hard offset shadows (the brand's "lift") ----
No blur. A flat dark slab offset down-right, like a sprite
casting a blocky shadow. Hover lifts it; press drops it. */
--shadow-pixel: calc(var(--px) * 1.5) calc(var(--px) * 1.5) 0 0 var(--navy-900); /* resting */
--shadow-pixel-lg: calc(var(--px) * 2.5) calc(var(--px) * 2.5) 0 0 var(--navy-900); /* hover lift */
--shadow-pixel-sm: var(--px) var(--px) 0 0 var(--navy-900); /* pressed */
/* Green-cast shadow for primary CTAs (check-green slab) */
--shadow-green: calc(var(--px) * 1.5) calc(var(--px) * 1.5) 0 0 var(--green-600);
--shadow-green-sm: var(--px) var(--px) 0 0 var(--green-600);
/* Cream pixel highlight (top-left "lit" edge, optional) */
--shadow-inset-lit: inset 2px 2px 0 0 rgba(246,238,214,0.14);
/* ---- Motion ----
Snappy, stepped, a little bouncy — like sprite animation.
Avoid long lazy eases; keep it crisp and game-y. */
--ease-snap: cubic-bezier(0.2, 0.9, 0.3, 1.2); /* @kind other */
--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */
--dur-fast: 90ms; /* @kind other */
--dur: 150ms; /* @kind other */
--dur-slow: 260ms; /* @kind other */
/* Pixel "steps" for sprite-like motion (use sparingly) */
--steps-blink: steps(2, jump-none); /* @kind other */
/* ---- Focus ---- */
--focus-outline: 0 0 0 var(--px) var(--green-200);
}
/* ============================================================
UTILITY: render images crisp (no smoothing) for pixel art.
Apply to ![]()
of the mascot / pixel icons.
============================================================ */
.ho-pixelated {
image-rendering: pixelated;
image-rendering: crisp-edges;
}
/* ============================================================
BASE — Habit Otter
Light reset + dark-theme defaults so any bare page that links
styles.css starts on-brand (navy bg, cream text).
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--bg-app);
color: var(--text-body);
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
font-family: var(--font-display);
color: var(--text-strong);
line-height: var(--lh-tight);
letter-spacing: var(--ls-display);
margin: 0 0 var(--space-4);
font-weight: var(--fw-bold);
}
p { margin: 0 0 var(--space-4); text-wrap: pretty; }
a {
color: var(--text-link);
text-decoration: none;
}
a:hover { color: var(--green-200); }
::selection {
background: var(--green-500);
color: var(--cream-200);
}
:focus-visible {
outline: none;
box-shadow: var(--focus-outline);
}
img { max-width: 100%; display: block; }
hr {
border: none;
border-top: var(--border-hair);
margin: var(--space-6) 0;
}
code, kbd {
font-family: var(--font-mono);
font-size: 0.9em;
}
/* ==== components/core/Avatar.jsx ==== */
.ho-avatar{
display:inline-block; flex:none; overflow:hidden;
border:var(--px,3px) solid var(--navy-900); border-radius:0;
background:var(--navy-800); image-rendering:pixelated;
}
.ho-avatar img{ width:100%; height:100%; object-fit:cover; display:block; image-rendering:pixelated; }
.ho-avatar--rounded{ border-radius:var(--radius-md,4px); }
.ho-avatar--ring{ box-shadow:0 0 0 2px var(--green-500); }
/* ==== components/core/Badge.jsx ==== */
.ho-badge{
display:inline-flex; align-items:center; gap:5px;
font-family:var(--font-display); font-size:12.5px; font-weight:600; line-height:1; letter-spacing:.8px;
padding:6px 9px; border:2px solid var(--navy-900); border-radius:0;
background:var(--navy-600); color:var(--cream-200); white-space:nowrap;
}
.ho-badge--done{ background:var(--green-500); color:var(--cream-200); }
.ho-badge--amber{ background:var(--amber-500); color:var(--navy-900); }
.ho-badge--danger{ background:var(--danger-500); color:var(--cream-200); }
.ho-badge--warn{ background:var(--warn-500); color:var(--navy-900); }
.ho-badge--outline{ background:transparent; color:var(--cream); border-color:var(--navy-400); }
.ho-badge--soft{ background:var(--surface-green); color:var(--green-200); border-color:var(--green-600); }
/* ==== components/core/Button.jsx ==== */
.ho-btn{
--_bg:var(--green-500); --_fg:var(--cream-200); --_sh:var(--green-600); --_bd:var(--navy-900);
display:inline-flex; align-items:center; justify-content:center; gap:8px;
font-family:var(--font-display); font-weight:600; line-height:1; letter-spacing:.5px;
color:var(--_fg); background:var(--_bg);
border:var(--px,3px) solid var(--_bd); border-radius:0;
box-shadow:calc(var(--px,3px)*1.5) calc(var(--px,3px)*1.5) 0 0 var(--_sh);
cursor:pointer; user-select:none; text-decoration:none; white-space:nowrap;
transition:transform var(--dur,150ms) var(--ease-snap), box-shadow var(--dur,150ms) var(--ease-snap), background var(--dur,150ms);
-webkit-tap-highlight-color:transparent;
}
.ho-btn:hover{ transform:translate(-2px,-2px); box-shadow:calc(var(--px,3px)*2.5) calc(var(--px,3px)*2.5) 0 0 var(--_sh); background:var(--green-400); }
.ho-btn:active{ transform:translate(2px,2px); box-shadow:var(--px,3px) var(--px,3px) 0 0 var(--_sh); background:var(--green-600); }
.ho-btn:focus-visible{ outline:none; box-shadow:calc(var(--px,3px)*1.5) calc(var(--px,3px)*1.5) 0 0 var(--_sh), 0 0 0 var(--px,3px) var(--green-200); }
.ho-btn--sm{ font-size:14px; padding:8px 14px; }
.ho-btn--md{ font-size:16px; padding:12px 20px; }
.ho-btn--lg{ font-size:20px; padding:16px 28px; }
.ho-btn--full{ width:100%; }
.ho-btn--secondary{ --_bg:var(--amber-500); --_fg:var(--navy-900); --_sh:var(--amber-600); }
.ho-btn--secondary:hover{ background:var(--amber-400); }
.ho-btn--secondary:active{ background:var(--amber-600); }
.ho-btn--ghost{ --_bg:transparent; --_fg:var(--cream); --_sh:var(--navy-900); border-color:var(--navy-400); }
.ho-btn--ghost:hover{ background:var(--navy-600); color:var(--cream-200); }
.ho-btn--ghost:active{ background:var(--navy-700); }
.ho-btn[disabled]{ cursor:not-allowed; opacity:.45; transform:none; box-shadow:var(--px,3px) var(--px,3px) 0 0 var(--_sh); }
/* ==== components/core/Card.jsx ==== */
.ho-card{
background:var(--surface-card); color:var(--text-body);
border:var(--px,3px) solid var(--navy-900); border-radius:var(--radius-md,4px);
padding:var(--space-5,20px);
}
.ho-card--flush{ padding:0; }
.ho-card--tight{ padding:var(--space-4,16px); }
.ho-card--lg{ padding:var(--space-8,32px); }
.ho-card--shadow{ box-shadow:calc(var(--px,3px)*1.5) calc(var(--px,3px)*1.5) 0 0 var(--navy-900); }
.ho-card--green{ background:var(--surface-green); border-color:var(--green-600); }
.ho-card--sunken{ background:var(--surface-sunken); }
.ho-card--interactive{ cursor:pointer; transition:transform var(--dur,150ms) var(--ease-snap), box-shadow var(--dur,150ms) var(--ease-snap); }
.ho-card--interactive:hover{ transform:translate(-2px,-2px); box-shadow:calc(var(--px,3px)*2.5) calc(var(--px,3px)*2.5) 0 0 var(--navy-900); }
/* ==== components/forms/HabitCheck.jsx ==== */
.ho-check{
position:relative; display:inline-flex; align-items:center; justify-content:center;
background:var(--navy-700); color:transparent;
border:var(--px,3px) solid var(--navy-900); border-radius:0;
cursor:pointer; flex:none; padding:0;
box-shadow:inset 2px 2px 0 0 rgba(0,0,0,.25);
transition:transform var(--dur,150ms) var(--ease-snap), background var(--dur,150ms), box-shadow var(--dur,150ms);
-webkit-tap-highlight-color:transparent;
}
.ho-check:hover{ border-color:var(--green-600); }
.ho-check:active{ transform:scale(.9); }
.ho-check__mark{ font-family:var(--font-display); line-height:1; transform:scale(0); transition:transform var(--dur,150ms) var(--ease-snap); }
.ho-check[aria-checked="true"]{
background:var(--green-500); color:var(--cream-200);
box-shadow:inset 2px 2px 0 0 rgba(246,238,214,.18), var(--px,3px) var(--px,3px) 0 0 var(--green-600);
}
.ho-check[aria-checked="true"] .ho-check__mark{ transform:scale(1); }
.ho-check[aria-checked="true"]:hover{ background:var(--green-400); }
.ho-check:focus-visible{ outline:none; box-shadow:0 0 0 var(--px,3px) var(--green-200); }
.ho-check[disabled]{ opacity:.4; cursor:not-allowed; }
/* ==== components/forms/Input.jsx ==== */
.ho-field{ display:flex; flex-direction:column; gap:8px; }
.ho-field__label{ font-family:var(--font-display); font-size:12px; letter-spacing:.5px; color:var(--cream-200); }
.ho-field__hint{ font-family:var(--font-body); font-size:12.5px; color:var(--text-muted); }
.ho-field__hint--error{ color:var(--danger-400); }
.ho-input-wrap{ position:relative; display:flex; align-items:center; }
.ho-input-wrap__icon{ position:absolute; left:12px; display:inline-flex; color:var(--cream-dim); pointer-events:none; }
.ho-input{
width:100%; font-family:var(--font-body); font-size:15px; color:var(--cream-200);
background:var(--surface-sunken); border:var(--px,3px) solid var(--navy-900); border-radius:var(--radius-sm,2px);
padding:12px 14px; box-shadow:inset 2px 2px 0 0 rgba(0,0,0,.3);
transition:border-color var(--dur,150ms), box-shadow var(--dur,150ms);
}
.ho-input--with-icon{ padding-left:38px; }
.ho-input::placeholder{ color:var(--text-muted); }
.ho-input:hover{ border-color:var(--navy-400); }
.ho-input:focus{ outline:none; border-color:var(--green-600); box-shadow:inset 2px 2px 0 0 rgba(0,0,0,.3), 0 0 0 var(--px,3px) var(--green-200); }
.ho-input--error{ border-color:var(--danger-500); }
.ho-input:disabled{ opacity:.5; cursor:not-allowed; }
/* ==== components/forms/Switch.jsx ==== */
.ho-switch{
position:relative; display:inline-flex; align-items:center;
width:58px; height:30px; padding:0; flex:none; cursor:pointer;
background:var(--surface-sunken); border:var(--px,3px) solid var(--navy-900); border-radius:0;
box-shadow:inset 2px 2px 0 0 rgba(0,0,0,.3);
transition:background var(--dur,150ms);
-webkit-tap-highlight-color:transparent;
}
.ho-switch__knob{
position:absolute; left:2px; top:50%; transform:translateY(-50%);
width:20px; height:20px; background:var(--cream); border:2px solid var(--navy-900);
transition:left var(--dur,150ms) var(--ease-snap), background var(--dur,150ms);
}
.ho-switch[aria-checked="true"]{ background:var(--green-500); }
.ho-switch[aria-checked="true"] .ho-switch__knob{ left:30px; background:var(--cream-200); }
.ho-switch:focus-visible{ outline:none; box-shadow:0 0 0 var(--px,3px) var(--green-200); }
.ho-switch[disabled]{ opacity:.4; cursor:not-allowed; }
/* ==== components/habit/DayDots.jsx ==== */
.ho-days{ display:inline-flex; gap:6px; }
.ho-days__day{ display:flex; flex-direction:column; align-items:center; gap:5px; }
.ho-days__dot{
width:26px; height:26px; display:flex; align-items:center; justify-content:center;
background:var(--navy-700); border:2px solid var(--navy-900); border-radius:0;
font-family:var(--font-display); font-size:13px; color:transparent; line-height:1;
}
.ho-days__dot--on{ background:var(--navy-500); }
.ho-days__dot--done{ background:var(--green-500); color:var(--cream-200); }
.ho-days__dot--missed{ background:var(--navy-800); border-color:var(--danger-500); }
.ho-days__dot--today{ box-shadow:0 0 0 2px var(--amber-500); }
.ho-days__lbl{ font-family:var(--font-mono); font-size:10px; color:var(--text-muted); }
/* ==== components/habit/HabitCard.jsx ==== */
.ho-habitcard{
display:flex; align-items:center; gap:16px;
background:var(--surface-card); border:var(--px,3px) solid var(--navy-900); border-radius:var(--radius-md,4px);
padding:16px 18px; box-shadow:calc(var(--px,3px)*1.5) calc(var(--px,3px)*1.5) 0 0 var(--navy-900);
transition:background var(--dur,150ms);
}
.ho-habitcard--done{ background:var(--surface-green); border-color:var(--green-600); box-shadow:calc(var(--px,3px)*1.5) calc(var(--px,3px)*1.5) 0 0 var(--green-600); }
.ho-habitcard__body{ flex:1; min-width:0; }
.ho-habitcard__top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ho-habitcard__name{ font-family:var(--font-display); font-size:19px; font-weight:600; color:var(--cream-200); line-height:1.1; letter-spacing:.5px; }
.ho-habitcard__meta{ display:flex; align-items:center; gap:8px; margin-top:10px; font-family:var(--font-body); font-size:12.5px; color:var(--text-muted); }
.ho-habitcard__time{ font-family:var(--font-mono); color:var(--cream-dim); }
/* ==== components/habit/SpeechBubble.jsx ==== */
.ho-bubble{
position:relative; display:inline-block; max-width:280px;
font-family:var(--font-body); font-weight:600; font-size:14px; line-height:1.4;
color:var(--navy-900); background:var(--cream-200);
border:var(--px,3px) solid var(--navy-900); border-radius:0;
padding:10px 13px; box-shadow:var(--px,3px) var(--px,3px) 0 0 var(--navy-900);
}
.ho-bubble b, .ho-bubble strong{ color:var(--green-600); }
.ho-bubble__tail{ position:absolute; width:10px; height:10px; background:var(--cream-200); border:var(--px,3px) solid var(--navy-900); }
/* tail variants */
.ho-bubble--left .ho-bubble__tail{ left:-7px; top:18px; border-right:none; border-top:none; }
.ho-bubble--bottom .ho-bubble__tail{ left:22px; bottom:-7px; border-left:none; border-top:none; }
/* ==== components/habit/StreakBadge.jsx ==== */
.ho-streak{
display:inline-flex; align-items:center; gap:6px;
font-family:var(--font-display); font-size:14.5px; font-weight:600; line-height:1; letter-spacing:.8px;
color:var(--cream-200); background:var(--navy-700);
border:2px solid var(--navy-900); border-radius:0; padding:6px 9px;
}
.ho-streak__n{ color:var(--green-200); }
.ho-streak--at-risk{ border-color:var(--warn-500); }
.ho-streak--at-risk .ho-streak__n{ color:var(--warn-500); }
.ho-streak--broken{ border-color:var(--danger-500); }
.ho-streak--broken .ho-streak__n{ color:var(--danger-400); }
body { margin:0; background:var(--bg-app); overflow-x:hidden; }
html { scroll-behavior:smooth; scroll-padding-top:84px; }
/* Базовые размеры крупных заголовков – переопределяются под каждый пиксельный шрифт */
html { --h1-base: clamp(36px,5.2vw,60px); --h2-base: clamp(28px,3.6vw,40px); }
.page { width:100%; }
.wrap { max-width:1140px; margin:0 auto; padding:0 24px; }
.dotted {
background-image: radial-gradient(var(--navy-500) 1.5px, transparent 1.5px);
background-size: 22px 22px; background-position: -11px -11px;
}
section { position:relative; }
.sec-pad { padding:88px 0; }
.eyebrow { font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--green-400); text-transform:uppercase; letter-spacing:2px; margin:0 0 16px; }
.sec-title { font-family:var(--font-display); font-size:calc(var(--h2-base) * var(--hscale,1)); color:var(--cream-200); line-height:1.08; margin:0 0 16px; }
.sec-sub { font-family:var(--font-body); font-size:17px; line-height:1.6; color:var(--text-muted); max-width:520px; margin:0; }
/* Геометрия заголовков: сжатие + растяжение (регулируется в Tweaks).
Ширина компенсируется обратно масштабу – поэтому переносы строк
считаются по фактической визуальной ширине. */
.hero h1, .sec-title, .final h2, .step h3, .feat h3 {
width: calc(100% / var(--stretchX, 1));
transform: scale(var(--stretchX, 1), var(--squash, 0.9));
transform-origin: 0 50%;
}
/* Та же геометрия для всех остальных элементов на пиксельном шрифте */
.eyebrow, .brand__name, .chat__head .n, .footer__brand .n, .ho-habitcard__name {
transform: scale(var(--stretchX, 1), var(--squash, 1));
transform-origin: 0 50%;
}
.ho-btn > span, .paper-btn > span, .ho-badge, .ho-streak, .step__n {
transform: scale(var(--stretchX, 1), var(--squash, 1));
transform-origin: 50% 50%;
}
.brand__name, .ho-habitcard__name { display: inline-block; }
.paper-btn > span { display: inline-block; }
/* ---- Nav ---- */
.nav { position:sticky; top:0; z-index:100; background:rgba(13,24,75,.82); backdrop-filter:blur(8px); border-bottom:3px solid var(--navy-900); }
.nav__inner { display:flex; align-items:center; justify-content:space-between; height:68px; }
.brand { display:flex; align-items:center; gap:11px; }
.brand__mark { width:38px; height:38px; border:3px solid var(--navy-900); image-rendering:pixelated; object-fit:cover; }
.brand__name { font-family:var(--font-display); font-weight:700; font-size:21px; color:var(--cream-200); letter-spacing:1px; }
.nav__links { display:flex; align-items:center; gap:28px; }
.nav__links a { font-family:var(--font-body); font-weight:500; font-size:15px; color:var(--cream-dim); }
.nav__links a:hover { color:var(--cream-200); }
/* ---- Hero ---- */
.hero { padding:64px 0 80px; }
.hero__grid { display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
.hero h1 { font-family:var(--font-display); font-size:calc(var(--h1-base) * var(--hscale,1)); line-height:1.05; color:var(--cream-200); margin:0 0 22px; letter-spacing:.5px; }
.hero h1 .g { color:var(--green-400); }
.hero__lead { font-family:var(--font-body); font-size:clamp(17px,1.7vw,20px); line-height:1.6; color:var(--text-body); max-width:480px; margin:0 0 28px; }
.hero__cta { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.hero__trust { display:flex; align-items:center; gap:10px; margin-top:24px; font-family:var(--font-body); font-size:14px; color:var(--text-muted); }
.hero__art { position:relative; display:flex; align-items:center; justify-content:center; }
.hero__mascot { width:min(360px,82%); aspect-ratio:1; border:6px solid var(--navy-900); box-shadow:9px 9px 0 0 var(--navy-900); image-rendering:pixelated; object-fit:cover; }
.hero__bubble { position:absolute; top:-2px; right:-4px; }
.hero__chips { position:absolute; bottom:-14px; left:6px; display:flex; gap:10px; }
/* ---- Steps ---- */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:48px; }
.step { background:var(--surface-card); border:3px solid var(--navy-900); box-shadow:5px 5px 0 0 var(--navy-900); padding:26px 24px; }
.step__n { font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--navy-900); background:var(--green-500); border:3px solid var(--navy-900); width:42px; height:42px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.step h3 { font-family:var(--font-display); font-weight:700; font-size:22px; color:var(--cream-200); margin:0 0 10px; letter-spacing:.5px; }
.step p { font-family:var(--font-body); font-size:14.5px; line-height:1.6; color:var(--text-muted); margin:0; }
/* ---- Features ---- */
.features { display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; }
.features--solo { grid-template-columns:1fr; }
.feat-list { display:flex; flex-direction:column; gap:20px; }
.feat { display:flex; gap:16px; align-items:flex-start; }
.feat__ico { width:44px; height:44px; flex:none; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:19px; color:var(--green-200); background:var(--surface-green); border:3px solid var(--green-600); }
.feat h3 { font-family:var(--font-display); font-weight:700; font-size:20px; color:var(--cream-200); margin:0 0 6px; letter-spacing:.5px; }
.feat p { font-family:var(--font-body); font-size:14.5px; line-height:1.55; color:var(--text-muted); margin:0; }
.preview-stack { display:flex; flex-direction:column; gap:14px; }
.preview-hint { font-family:var(--font-body); font-size:13px; color:var(--text-muted); text-align:center; margin:2px 0 0; }
/* ---- Try-it chat demo ---- */
.demo { display:grid; grid-template-columns:1fr auto; gap:48px; align-items:center; }
.chat { width:380px; max-width:100%; background:var(--surface-sunken); border:3px solid var(--navy-900); box-shadow:6px 6px 0 0 var(--navy-900); padding:18px; }
.chat__head { display:flex; align-items:center; gap:10px; padding-bottom:14px; border-bottom:1px solid var(--border-soft); margin-bottom:14px; }
.chat__head img { width:32px; height:32px; border:2px solid var(--navy-900); image-rendering:pixelated; object-fit:cover; }
.chat__head .n { font-family:var(--font-display); font-weight:600; font-size:16px; color:var(--cream-200); letter-spacing:.5px; }
.chat__head .s { font-family:var(--font-body); font-size:11.5px; color:var(--green-400); }
.chat__feed { display:flex; flex-direction:column; gap:10px; min-height:180px; }
.msg { max-width:85%; font-family:var(--font-body); font-size:14px; line-height:1.45; padding:10px 13px; border:3px solid var(--navy-900); }
.msg--bot { align-self:flex-start; background:var(--cream-200); color:var(--navy-900); font-weight:500; }
.msg--bot b { color:var(--green-600); }
.msg--me { align-self:flex-end; background:var(--green-500); color:var(--cream-200); font-weight:600; box-shadow:3px 3px 0 0 var(--green-600); }
.chat__kbd { display:flex; gap:10px; margin-top:14px; }
.chat__reset { margin-top:12px; font-family:var(--font-mono); font-size:11.5px; color:var(--text-muted); background:none; border:none; cursor:pointer; padding:0; }
.chat__reset:hover { color:var(--cream); }
/* ---- Final CTA ---- */
.final { background:var(--green-500); border-top:6px solid var(--navy-900); border-bottom:6px solid var(--navy-900); }
.final__inner { display:flex; align-items:center; justify-content:space-between; gap:32px; padding:56px 0; }
.final h2 { font-family:var(--font-display); font-size:calc(var(--h2-base) * var(--hscale,1)); color:var(--cream-200); line-height:1.1; margin:0 0 12px; }
.final p { font-family:var(--font-body); font-size:17px; color:#0c2b10; margin:0; font-weight:500; }
.final__art { width:140px; height:140px; flex:none; border:5px solid var(--navy-900); image-rendering:pixelated; box-shadow:7px 7px 0 0 var(--navy-900); object-fit:cover; }
.paper-btn { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:700; font-size:21px; letter-spacing:.5px; color:var(--navy-900); background:var(--cream-200); border:3px solid var(--navy-900); padding:16px 26px; box-shadow:5px 5px 0 0 var(--navy-900); transition:transform 150ms var(--ease-snap), box-shadow 150ms var(--ease-snap); }
.paper-btn:hover { transform:translate(-2px,-2px); box-shadow:7px 7px 0 0 var(--navy-900); color:var(--navy-900); }
.paper-btn:active { transform:translate(2px,2px); box-shadow:3px 3px 0 0 var(--navy-900); }
/* ---- Footer ---- */
.footer { background:var(--navy-900); padding:40px 0; }
.footer__inner { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.footer__brand { display:flex; align-items:center; gap:12px; }
.footer__brand img { width:42px; height:42px; border:3px solid var(--navy-700); image-rendering:pixelated; object-fit:cover; }
.footer__brand .n { font-family:var(--font-display); font-weight:600; font-size:18px; color:var(--cream-200); letter-spacing:.5px; }
.footer__brand .s { font-family:var(--font-body); font-size:13px; color:var(--text-muted); margin-top:2px; }
.footer__links { display:flex; gap:24px; }
.footer__links a { font-family:var(--font-body); font-size:14px; color:var(--cream-dim); }
.footer__copy { font-family:var(--font-mono); font-size:11.5px; color:var(--navy-400); }
@media (max-width:860px){
.hero__grid{ grid-template-columns:1fr; gap:36px; }
.hero__art{ order:-1; }
.steps{ grid-template-columns:1fr; }
.features{ grid-template-columns:1fr; gap:36px; }
.demo{ grid-template-columns:1fr; }
.chat{ margin:0 auto; }
.nav__links{ display:none; }
.final__inner{ flex-direction:column; text-align:center; }
.final__art{ display:none; }
}
/* ---- Pixel display font: Press Start 2P (chosen variant) ---- */
html[data-px-font="ps2p"] :is(h1,h2,h3,.eyebrow,.brand__name,.step__n,.chat__head .n,.footer__brand .n,.paper-btn,.ho-btn,.ho-badge,.ho-habitcard__name,.ho-streak) { font-weight:400; }
html[data-px-font="ps2p"] :is(h1,h2,h3,.eyebrow,.brand__name,.step__n,.chat__head .n,.footer__brand .n,.paper-btn,.ho-btn,.ho-badge,.ho-habitcard__name,.ho-streak),
html[data-px-font="ps2p"] body { --font-display:'Press Start 2P', monospace; }
html[data-px-font="ps2p"] { --h1-base: clamp(22px,2.8vw,34px); --h2-base: clamp(16px,2vw,24px); }
html[data-px-font="ps2p"] .hero h1 { line-height:1.35; }
html[data-px-font="ps2p"] .sec-title, html[data-px-font="ps2p"] .final h2 { line-height:1.4; }
html[data-px-font="ps2p"] .eyebrow { font-size:10px; letter-spacing:1px; }
html[data-px-font="ps2p"] .brand__name { font-size:13px; }
html[data-px-font="ps2p"] .step h3 { font-size:13px; line-height:1.5; }
html[data-px-font="ps2p"] .step__n { font-size:11px; }
html[data-px-font="ps2p"] .feat h3 { font-size:12px; line-height:1.5; }
html[data-px-font="ps2p"] .chat__head .n { font-size:11px; }
html[data-px-font="ps2p"] .footer__brand .n { font-size:11px; }
html[data-px-font="ps2p"] .paper-btn { font-size:13px; }
html[data-px-font="ps2p"] .ho-btn--sm { font-size:10px; }
html[data-px-font="ps2p"] .ho-btn--md { font-size:12px; }
html[data-px-font="ps2p"] .ho-btn--lg { font-size:13px; }
html[data-px-font="ps2p"] .ho-badge { font-size:8.5px; }
html[data-px-font="ps2p"] .ho-habitcard__name { font-size:12px; }
html[data-px-font="ps2p"] .ho-streak { font-size:9px; }
/* ---- Heading geometry (design-tool defaults) ---- */
:root { --squash:1; --stretchX:.83; --hscale:.92; }
/* ---- Production-only additions ---- */
.skip-link { position:absolute; left:-9999px; top:0; z-index:1000; background:var(--green-500); color:var(--cream-200);
font-family:var(--font-body); font-weight:600; padding:12px 18px; border:3px solid var(--navy-900); }
.skip-link:focus { left:12px; top:12px; }
.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.nav__links a, .footer__links a { text-decoration:none; }
.hero__mascot, .final__art, .brand__mark, .footer__brand img, .chat__head img { background:var(--navy-700); }
.faq { display:grid; gap:14px; margin-top:36px; max-width:760px; }
.faq__item { background:var(--surface-card); border:3px solid var(--navy-900); box-shadow:5px 5px 0 0 var(--navy-900); }
.faq__item summary { font-family:var(--font-display); font-size:15px; color:var(--cream-200); cursor:pointer;
padding:18px 22px; list-style:none; letter-spacing:.5px; line-height:1.5; }
.faq__item summary::-webkit-details-marker { display:none; }
.faq__item summary::after { content:'+'; float:right; color:var(--green-400); }
.faq__item[open] summary::after { content:'–'; }
.faq__item p { font-family:var(--font-body); font-size:14.5px; line-height:1.6; color:var(--text-muted);
margin:0; padding:0 22px 20px; }
.legal { max-width:760px; }
.legal h2 { font-size:22px; margin-top:36px; }
.legal p, .legal li { font-family:var(--font-body); font-size:15px; line-height:1.65; color:var(--text-body); }
.legal a { color:var(--green-400); }
@media (prefers-reduced-motion: reduce) {
* { animation-duration:.01ms !important; transition-duration:.01ms !important; }
html { scroll-behavior:auto; }
}
/* must not become the flex/grid item — the sized ![]()
inside is. */
picture { display: contents; }
/* width/height attributes set a presentational height — let aspect-ratio win. */
.hero__mascot { height: auto; }
/* The heading stretch trick widens boxes past 100% — keep that off the scroll axis. */
html { overflow-x: clip; }
/* Pixel type is wide: at phone widths the brand and the nav CTA fight for room. */
@media (max-width: 600px) {
.nav__inner { gap: 10px; }
html[data-px-font="ps2p"] .brand__name { font-size: 10px; }
html[data-px-font="ps2p"] .ho-btn--sm { font-size: 8.5px; }
.ho-btn--sm { padding: 9px 11px; gap: 6px; }
.brand__mark { width: 32px; height: 32px; }
.hero { padding-top: 40px; }
}
.cta-short { display: none; }
@media (max-width: 600px) {
.cta-long { display: none; }
.cta-short { display: inline-block; }
}