/* ===== Console.Matrix landing — Matrix-style hyper-modern theme =====
   RULE: do NOT add large blurred radial-gradient halos behind sections.
   The matrix-rain canvas (#rain) sits on the page background and any big
   green/cyan glow painted over a section creates a visible "envelope" or
   "boxed" area around the rain that the user has explicitly rejected.
   If you need atmosphere on a section, use a tiny accent glow on a
   single element (button, badge, icon) — never a section-wide gradient.
   The .safety-glow-* and .game-glow-* rules below remain for archival
   reasons but are force-disabled with display:none. */
:root{
    /* Tells the browser to paint native form controls (the language
       <select>'s dropdown panel, scrollbars, etc.) in dark mode so the
       open list isn't a white box on top of the matrix-rain background. */
    color-scheme:dark;
    --bg:#040706;
    --bg-2:#070d09;
    --ink:#d6ffe1;
    --ink-dim:#7fb592;
    --green:#00ff85;
    --green-2:#00b85b;
    --green-soft:rgba(0,255,133,.12);
    --green-glow:rgba(0,255,133,.45);
    --red:#ff4060;
    --yellow:#ffd166;
    --line:rgba(0,255,133,.22);
    --line-soft:rgba(0,255,133,.10);
    --card:rgba(8,18,12,.66);
    --card-2:rgba(10,22,15,.85);
    --radius:14px;
    --mono:"JetBrains Mono","Cascadia Mono",Consolas,Menlo,monospace;
    --display:"Orbitron","JetBrains Mono",sans-serif;
    /* Matrix rain palette — overridden by light theme below */
    --rain-bg:#040706;
    --rain-fade:rgba(4,7,6,0.16);
    --rain-head:#E8FFE8;
    --rain-a:#00ff85;
    --rain-b:#00b85b;
}

/* ===== Light theme: warm cream, charcoal ink, zero green ===== */
/* Designed as a flat editorial monochrome — Substack/Notion vibe — so
   nothing reads as a faded dark theme. Accents collapse onto the ink
   colour; what was neon green becomes the headline weight and that's it. */
[data-theme="light"]{
    color-scheme:light;
    --bg:#f4ede0;
    --bg-2:#ede4d2;
    --ink:#0d0d0d;
    --ink-dim:#4a4a4a;
    --green:#0d0d0d;
    --green-2:#0d0d0d;
    --green-soft:rgba(0,0,0,.05);
    --green-glow:rgba(0,0,0,.16);
    --red:#9a1a2a;
    --yellow:#7a5200;
    --line:rgba(0,0,0,.18);
    --line-soft:rgba(0,0,0,.09);
    --card:rgba(255,250,240,.78);
    --card-2:rgba(255,250,240,.92);
    /* Matrix rain: dark drops on cream. fade at 0.04 keeps long jet-black
       trails (vs the 0.16 used in dark mode) so the rain reads as bold,
       not as ghosted grey. head/a/b stay near-black for max contrast. */
    --rain-bg:#f4ede0;
    --rain-fade:rgba(244,237,224,0.04);
    --rain-head:#000000;
    --rain-a:#0d0d0d;
    --rain-b:#262626;
}
[data-theme="light"] body{ background:var(--bg); color:var(--ink); }
[data-theme="light"] .scanline{
    background:repeating-linear-gradient(to bottom,
        rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,
        rgba(0,0,0,.07) 3px,rgba(0,0,0,0) 4px);
    mix-blend-mode:multiply;opacity:.4;
}
[data-theme="light"] .vignette{
    background:radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,.08) 75%, rgba(0,0,0,.18) 100%);
}
[data-theme="light"] .topbar{
    background:rgba(239,232,216,.78);
    border-bottom:1px solid var(--line);
}
[data-theme="light"] .brand,
[data-theme="light"] .hero-stats b,
[data-theme="light"] .term-body .g,
[data-theme="light"] .mock-side li.active,
[data-theme="light"] .mock-tele b.g,
[data-theme="light"] .dl-card b,
[data-theme="light"] .foot-prompt .cursor,
[data-theme="light"] .term-body .cur,
[data-theme="light"] .badge-dot,
[data-theme="light"] .section-title .prompt,
[data-theme="light"] .safety-title .prompt,
[data-theme="light"] summary::before,
[data-theme="light"] .scroll-hint span{
    color:#0a0a0a;text-shadow:none;background-color:transparent;border-color:#0a0a0a;
}
[data-theme="light"] .badge-dot{ background:#0a0a0a; box-shadow:none; }
[data-theme="light"] .term-body .cur,
[data-theme="light"] .foot-prompt .cursor{ background:#0a0a0a; box-shadow:none; }
[data-theme="light"] .mock-tele .bar i{ background:#0a0a0a; box-shadow:none; }
[data-theme="light"] .btn-primary{
    background:linear-gradient(180deg,#1a1a1a,#000);
    color:#efe8d8;
    /* Pulsing halo so the «Войти в Матрицу» CTA stays eye-catching on the
     * cream light theme — without the halo it reads as just a black pill
     * lost in the layout. Brand-green outer glow that breathes, dark text
     * stays solid black so the label keeps high contrast. User mandate
     * 2026-05-12: «на белом фоне посвечиваться чтобы заходили». */
    box-shadow:
        0 0 0 1px rgba(10,10,10,.45),
        0 0 24px rgba(0,200,90,.45),
        0 0 50px rgba(0,200,90,.18);
    animation: btn-primary-breathe 2.4s ease-in-out infinite;
    position:relative;
}
[data-theme="light"] .btn-primary:hover{
    animation:none;
    box-shadow:
        0 0 0 1px rgba(10,10,10,.55),
        0 6px 28px rgba(0,200,90,.55),
        0 0 60px rgba(0,200,90,.28);
    transform:translateY(-1px);
}
@keyframes btn-primary-breathe {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(10,10,10,.45),
            0 0 18px rgba(0,200,90,.30),
            0 0 38px rgba(0,200,90,.10);
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(10,10,10,.45),
            0 0 32px rgba(0,200,90,.60),
            0 0 64px rgba(0,200,90,.25);
    }
}
@media (prefers-reduced-motion: reduce) {
    [data-theme="light"] .btn-primary { animation: none; }
}
[data-theme="light"] .btn-ghost{ background:rgba(255,250,240,.55); color:#0a0a0a; }
[data-theme="light"] .ghost{ background:rgba(255,250,240,.55); color:#0a0a0a; }
[data-theme="light"] .ghost:hover,
[data-theme="light"] .btn-ghost:hover,
[data-theme="light"] a:hover,
[data-theme="light"] .nav a:hover,
[data-theme="light"] .card:hover,
[data-theme="light"] .dl-card:hover{ color:#0a0a0a;border-color:#0a0a0a;text-shadow:none;box-shadow:0 6px 22px rgba(0,0,0,.12); }
[data-theme="light"] .term,
[data-theme="light"] .mock-window{
    background:linear-gradient(180deg,#fbf6e8,#f3ecd8);
    box-shadow:0 0 0 1px rgba(0,0,0,.08), 0 18px 40px rgba(0,0,0,.12);
}
[data-theme="light"] .term-bar,
[data-theme="light"] .mock-bar{ background:linear-gradient(180deg,rgba(0,0,0,.05),transparent); }
[data-theme="light"] .term-body{ color:#0a0a0a; }
[data-theme="light"] .term-body .dim{ color:#4a4a4a; }
[data-theme="light"] .term-body .y{ color:#7a5200; }
[data-theme="light"] .msg.ai{ background:rgba(0,0,0,.04); color:#0a0a0a; }
[data-theme="light"] .msg.user{ background:rgba(0,0,0,.06); color:#0a0a0a; }
[data-theme="light"] .mock-side li.active{ background:rgba(0,0,0,.08); }
[data-theme="light"] .ct-field input,
[data-theme="light"] .ct-field textarea{
    background:#fbf6e8; color:#0a0a0a; border:1px solid var(--line);
}
[data-theme="light"] .ct-field input:focus,
[data-theme="light"] .ct-field textarea:focus{
    border-color:#0a0a0a; box-shadow:0 0 0 3px rgba(0,0,0,.10);
}
[data-theme="light"] .ct-field input:-webkit-autofill,
[data-theme="light"] .ct-field textarea:-webkit-autofill{
    -webkit-text-fill-color:#0a0a0a !important;
    -webkit-box-shadow:0 0 0 1000px #fbf6e8 inset !important;
    box-shadow:0 0 0 1000px #fbf6e8 inset !important;
    caret-color:#0a0a0a;
}
[data-theme="light"] ::selection{ background:#0a0a0a; color:#efe8d8; }
[data-theme="light"] .hamburger{ color:#0a0a0a; border-color:var(--line); }
[data-theme="light"] .hamburger span{ background:#0a0a0a; box-shadow:none; }
[data-theme="light"] .nav{ background:rgba(239,232,216,.96); }

/* ===== Light-theme green-text purge =====
   Matrix-green (#00ff85) is unreadable on the cream light background.
   This block flips every public-facing green text/label/icon/border
   to black so all copy stays legible. Components that are themselves
   always-dark (inside .duel-card.duel-dark, .term, .happ titlebar)
   are NOT touched — they keep their own green because their backdrop
   stays dark regardless of the page theme.
   Drop-shadow/text-shadow glows are also killed. */
[data-theme="light"] .easy-kicker,
[data-theme="light"] .simple-kicker,
[data-theme="light"] .simple-age-label,
[data-theme="light"] .simple-age-dash,
[data-theme="light"] .simple-age-num,
[data-theme="light"] .duel-vs span,
[data-theme="light"] .safety-mascot,
[data-theme="light"] .safety-pillar-icon,
[data-theme="light"] .safety-title .prompt,
[data-theme="light"] .shot-cap,
[data-theme="light"] .show-try,
[data-theme="light"] .mock-prompt-sigil,
[data-theme="light"] .mchip,
[data-theme="light"] .dl-os,
[data-theme="light"] .dl-source b a,
[data-theme="light"] .ct-status.ok,
[data-theme="light"] .glitch::before,
[data-theme="light"] .glitch::after,
[data-theme="light"] .card-icon,
[data-theme="light"] .nav::before,
[data-theme="light"] .hero-lead,
[data-theme="light"] .hero-stats span,
[data-theme="light"] summary::before{
    color:#0a0a0a !important;
    border-color:#0a0a0a;
    text-shadow:none !important;
    filter:none;
}
[data-theme="light"] .easy-kicker,
[data-theme="light"] .simple-kicker,
[data-theme="light"] .simple-age-label{
    border-color:#0a0a0a;background:rgba(0,0,0,0.04);box-shadow:none;
}
[data-theme="light"] .card-icon{
    background:linear-gradient(180deg,rgba(0,0,0,0.06),rgba(0,0,0,0.02));
    border-color:rgba(0,0,0,0.18);box-shadow:none;
}
/* Card-secure already overrides .card-icon to amber — preserve that
   amber accent in light mode too (it's on a contrasty cream tile). */
[data-theme="light"] .card-secure .card-icon{
    color:#A06900 !important;
    background:linear-gradient(180deg,rgba(255,174,0,0.18),rgba(255,138,0,0.05));
    border-color:rgba(160,105,0,0.45);
}
[data-theme="light"] .safety-pillar-icon{
    background:linear-gradient(180deg,rgba(0,0,0,0.04),rgba(0,0,0,0.01));
}
[data-theme="light"] .dl-os{
    background:linear-gradient(180deg,rgba(0,0,0,0.05),rgba(0,0,0,0.01));
    border-color:rgba(0,0,0,0.18);
}
/* Brand-coloured download tiles keep their hue in light theme — they
   are not green-on-cream so the readability rule doesn't apply. SVG
   fills are baked, only the surrounding tile bg gets a subtle wash. */
[data-theme="light"] .dl-os--win{
    background:linear-gradient(135deg,rgba(0,164,239,.18),rgba(242,80,34,.08) 55%,rgba(255,185,0,.10));
    border-color:rgba(0,120,180,.45);
    box-shadow:none;
}
[data-theme="light"] .dl-os--mac{
    background:linear-gradient(180deg,rgba(180,185,195,.22),rgba(120,125,135,.06));
    border-color:rgba(120,125,135,.45);
    box-shadow:none;
}
[data-theme="light"] .dl-os--linux{
    background:linear-gradient(180deg,rgba(244,156,0,.22),rgba(255,210,63,.08));
    border-color:rgba(196,120,0,.50);
    box-shadow:none;
}
[data-theme="light"] .dl-os--android{
    background:linear-gradient(180deg,rgba(61,220,132,.22),rgba(0,140,70,.06));
    border-color:rgba(0,140,70,.50);
    box-shadow:none;
}
[data-theme="light"] .dl-os--ios{
    background:linear-gradient(135deg,rgba(255,107,157,.20),rgba(123,97,255,.08));
    border-color:rgba(160,60,140,.45);
    box-shadow:none;
}
[data-theme="light"] .dl-os--portable{
    background:linear-gradient(180deg,rgba(0,176,255,.22),rgba(0,140,200,.06));
    border-color:rgba(0,120,180,.50);
    box-shadow:none;
}
[data-theme="light"] .mchip{
    background:rgba(0,0,0,0.05);border-color:rgba(0,0,0,0.18);
}
[data-theme="light"] .foot-cols a:hover{color:#0a0a0a}
[data-theme="light"] .hamburger{color:#0a0a0a !important}
[data-theme="light"] details[open]{border-color:#0a0a0a}
/* Hero glitch: drop the chromatic-aberration pass entirely on cream
   background — green/cyan aberrations look like printing mistakes. */
[data-theme="light"] .glitch::before,
[data-theme="light"] .glitch::after{
    display:none;
}

/* ===== Theme toggle: layered Unicode symbol (◐ over ●) =====
   Two transparent <span>s stacked at the same coordinates.
   ●  (U+25CF) paints a full grey filled circle (the "right half").
   ◐  (U+25D0) paints only its left half black; right half is transparent
      so the grey ● shows through. Net result: half-black / half-grey
      circle that's a single native font glyph, no rectangle artifact. */
/* Rain toggle — mirrors the BtnRainToggle button in pc/bin/Console.Matrix.App.ps1.
   Glowing katakana ｦ glyph + a small status dot to its right. Dot brightens
   when on, fades when off. Border is intentionally absent so the icon reads
   as a chrome-less status indicator next to the theme circle. */
.rain-toggle{
    width:42px;height:32px;background:transparent;border:none;padding:0;
    cursor:pointer;flex-shrink:0;outline:none;
    position:relative;display:inline-flex;align-items:center;justify-content:center;
    gap:4px;line-height:1;
    transition:transform .12s ease, filter .15s ease;
}
.rain-toggle__glyph{
    /* Halfwidth katakana ｦ (U+FF66). Windows users without CJK fonts saw a
     * white tofu box instead — extend the font-stack with the Japanese
     * fonts shipped by default on every modern Windows / macOS install
     * before falling through to generic sans-serif. */
    font-family:"Segoe UI Symbol","Apple Symbols","Yu Gothic UI","Yu Gothic","Meiryo UI","Meiryo","MS Gothic","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans CJK JP","Noto Sans JP",sans-serif;
    font-size:18px;color:var(--rain-a, #00ff85);
    filter:drop-shadow(0 0 6px var(--green-glow, rgba(0,255,133,.55)));
    transition:opacity .15s ease, filter .15s ease, color .15s ease;
}
.rain-toggle__dot{
    width:7px;height:7px;border-radius:50%;
    background:var(--rain-a, #00ff85);
    box-shadow:0 0 8px var(--green-glow, rgba(0,255,133,.55));
    transition:opacity .15s ease, background .15s ease;
}
.rain-toggle.off .rain-toggle__glyph{ opacity:.35; filter:none; }
.rain-toggle.off .rain-toggle__dot  { opacity:.25; box-shadow:none; background:#666; }
.rain-toggle:hover { transform:scale(1.06); }
.rain-toggle:focus-visible { filter:drop-shadow(0 0 4px var(--green-glow)); }
[data-theme="light"] .rain-toggle__glyph{ color:#0a0a0a; filter:none; }
[data-theme="light"] .rain-toggle__dot  { background:#0a0a0a; box-shadow:none; }
[data-theme="light"] .rain-toggle.off .rain-toggle__glyph{ color:#777; opacity:.55; }
[data-theme="light"] .rain-toggle.off .rain-toggle__dot  { background:#999; }
@media (pointer: coarse){
    .rain-toggle { width:48px;height:40px; }
    .rain-toggle__glyph { font-size:22px; }
    .rain-toggle__dot   { width:8px;height:8px; }
}

.theme-toggle{
    width:32px;height:32px;background:transparent;border:none;padding:0;
    cursor:pointer;flex-shrink:0;outline:none;
    position:relative;display:inline-grid;place-items:center;
    transition:transform .12s ease, filter .15s ease;
    line-height:1;
}
.theme-toggle span{
    position:absolute;inset:0;display:grid;place-items:center;
    /* Geometric-shapes glyphs ● (U+25CF) and ◐ (U+25D0). Symbol fonts cover
     * them on every mainstream OS; broader fallback chain catches stripped
     * Linux installs that ship without "Noto Sans Symbols 2". */
    font-family:"Segoe UI Symbol","Apple Symbols","Noto Sans Symbols 2","DejaVu Sans","Symbola",sans-serif;
    font-size:30px;line-height:1;
}
.theme-toggle .ttg-grey  { color:#A0A0A0; }
.theme-toggle .ttg-black { color:#000000; }
.theme-toggle:hover { transform:scale(1.08); filter:drop-shadow(0 0 6px var(--green-glow)); }
.theme-toggle:focus-visible { filter:drop-shadow(0 0 4px var(--green-glow)); }
[data-theme="light"] .theme-toggle:hover { filter:drop-shadow(0 0 6px rgba(0,0,0,.25)); }
@media (pointer: coarse){
    .theme-toggle { width:40px;height:40px; }
    .theme-toggle span { font-size:36px; }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{
    font-family:var(--mono);
    color:var(--ink);
    background:var(--bg);
    line-height:1.55;
    /* `overflow-x: clip` (vs hidden) cuts horizontal overflow without
     * creating a scroll container, so iOS Safari rubber-banding can't
     * "slide" the page sideways even if a child accidentally exceeds
     * 100vw. Pair with the same rule on <html> below — Safari needs
     * it on the root element too, otherwise the body's clip is shadowed
     * by the html's default visible overflow on the document level. */
    overflow-x:clip;
    min-height:100vh;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;transition:color .15s ease}
a:hover{color:var(--green)}
img{max-width:100%;display:block}
button,select,input{font:inherit;color:inherit}
::selection{background:var(--green);color:#000}

/* ====== Background layers ====== */
#rain{
    position:fixed;inset:0;width:100vw;height:100vh;
    z-index:-3;display:block;background:var(--bg);
    pointer-events:none;
    opacity:.85;
}
[data-theme="light"] #rain{ opacity:.35; }
/* Robust off-state — set by app.js and persisted via localStorage. Hides
 * the canvas regardless of whether startRain() ever succeeded (privacy
 * add-ons sometimes block 2D contexts on hardened browsers). */
:root[data-rain="off"] #rain { display:none !important; }
.scanline{
    position:fixed;inset:0;z-index:-2;pointer-events:none;
    background:repeating-linear-gradient(to bottom,
        rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,
        rgba(0,0,0,.18) 3px,rgba(0,0,0,0) 4px);
    mix-blend-mode:multiply;opacity:.55;
    animation:scan 7s linear infinite;
}
@keyframes scan{0%{background-position:0 0}100%{background-position:0 80px}}
.vignette{
    position:fixed;inset:0;z-index:-1;pointer-events:none;
    background:radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,.55) 75%, rgba(0,0,0,.85) 100%);
}

/* ====== Top bar ====== */
.topbar{
    position:sticky;top:0;z-index:50;
    display:flex;align-items:center;gap:24px;
    padding:14px 28px;
    background:rgba(4,7,6,.55);
    backdrop-filter:blur(12px) saturate(140%);
    -webkit-backdrop-filter:blur(12px) saturate(140%);
    border-bottom:1px solid var(--line);
}
.brand{
    display:flex;align-items:center;gap:10px;
    font-family:var(--display);font-weight:900;letter-spacing:.18em;
    color:var(--green);text-shadow:0 0 12px var(--green-glow);
    font-size:15px;
}
.brand-prompt{color:var(--ink-dim);}
.brand-text{font-size:14px}
.brand .dot{color:var(--green-2)}

.nav{display:flex;gap:26px;margin-left:18px;flex:1}
.nav a{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)}
.nav a:hover{color:var(--green);text-shadow:0 0 10px var(--green-glow)}

.top-actions{display:flex;align-items:center;gap:10px}
.ghost{
    background:transparent;border:1px solid var(--line);color:var(--ink-dim);
    padding:7px 12px;border-radius:8px;cursor:pointer;font-size:12px;letter-spacing:.1em;
}
.ghost:hover{border-color:var(--green);color:var(--green)}
/* Custom language dropdown — replaces native <select> popup whose scrollbar
   and selection highlight Chromium paints in OS chrome (white on Windows
   even with color-scheme:dark). The <select> stays in the DOM for fallback
   if JS fails; .lp-wrap is built by app.js and overlays it. */
.lp-wrap{ position:relative; display:inline-block; }
#langPicker.lp-fallback-hidden{ display:none; }
.lp-trigger{
    background:transparent;border:1px solid var(--line);color:var(--ink-dim);
    padding:7px 26px 7px 12px;border-radius:8px;cursor:pointer;
    font-size:12px;letter-spacing:.1em;
    font-family:inherit;
    background-image:linear-gradient(45deg,transparent 50%,var(--ink-dim) 50%),
                     linear-gradient(135deg,var(--ink-dim) 50%,transparent 50%);
    background-position:calc(100% - 14px) 50%,calc(100% - 9px) 50%;
    background-size:5px 5px,5px 5px;
    background-repeat:no-repeat;
    max-width:140px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lp-trigger:hover,.lp-wrap.open .lp-trigger{ border-color:var(--green);color:var(--green) }
.lp-list{
    display:none;
    position:absolute;top:calc(100% + 6px);right:0;
    min-width:100%;
    max-height:320px;overflow-y:auto;
    background:rgba(4,8,6,.97);
    border:1px solid var(--green);border-radius:8px;
    box-shadow:0 10px 30px rgba(0,0,0,.6), 0 0 14px var(--green-glow);
    padding:4px 0;
    z-index:200;
    scrollbar-color:rgba(0,255,133,.5) rgba(0,0,0,.35);
    scrollbar-width:thin;
}
.lp-wrap.open .lp-list{ display:block }
.lp-list::-webkit-scrollbar{ width:8px }
.lp-list::-webkit-scrollbar-track{ background:rgba(0,0,0,.35) }
.lp-list::-webkit-scrollbar-thumb{ background:rgba(0,255,133,.5);border-radius:4px }
.lp-list::-webkit-scrollbar-thumb:hover{ background:rgba(0,255,133,.75) }
.lp-item{
    padding:7px 14px;
    color:var(--ink);
    font-size:12px;letter-spacing:.06em;
    cursor:pointer;white-space:nowrap;
}
.lp-item:hover{ background:var(--green-soft);color:var(--green) }
.lp-item.active{ background:var(--green-soft);color:var(--green);font-weight:600 }
/* Light-theme trigger. Spelled out as long-form properties (no `background`
   shorthand) so the chevron stays parked in the corner — the shorthand
   resets background-position/size/repeat to defaults, which would tile the
   diagonal-gradient ▾ icon over the whole button. */
[data-theme="light"] .lp-trigger{
    background-color:transparent;
    color:#7fb592;
    border-color:rgba(0,255,133,.35);
    background-image:linear-gradient(45deg,transparent 50%,#7fb592 50%),
                     linear-gradient(135deg,#7fb592 50%,transparent 50%);
    background-position:calc(100% - 14px) 50%,calc(100% - 9px) 50%;
    background-size:5px 5px,5px 5px;
    background-repeat:no-repeat;
}
/* Language picker dropdown is ALWAYS dark — never inherits light-theme palette.
   The mock helper window (.happ) sits behind it with a hard-coded cream bg, so
   a light-cream dropdown was reading as "white" and the option text was washed
   out. Forcing the dark palette keeps the dropdown legible regardless of which
   theme the user picked for the rest of the landing. */
.lp-list,
[data-theme="light"] .lp-list{
    background:#040706 !important;
    border-color:rgba(0,255,133,.55) !important;
    box-shadow:0 10px 30px rgba(0,0,0,.6), 0 0 14px rgba(0,255,133,.35) !important;
    scrollbar-color:rgba(0,255,133,.5) rgba(0,0,0,.35) !important;
}
.lp-list::-webkit-scrollbar-track,
[data-theme="light"] .lp-list::-webkit-scrollbar-track{ background:rgba(0,0,0,.35) !important }
.lp-list::-webkit-scrollbar-thumb,
[data-theme="light"] .lp-list::-webkit-scrollbar-thumb{ background:rgba(0,255,133,.5) !important;border-radius:4px }
.lp-list::-webkit-scrollbar-thumb:hover,
[data-theme="light"] .lp-list::-webkit-scrollbar-thumb:hover{ background:rgba(0,255,133,.75) !important }
.lp-item,
[data-theme="light"] .lp-item{ color:#d6ffe1 !important }
.lp-item:hover,
.lp-item.active,
[data-theme="light"] .lp-item:hover,
[data-theme="light"] .lp-item.active{ background:rgba(0,255,133,.12) !important;color:#00ff85 !important }
[data-theme="light"] .lp-trigger:hover,
[data-theme="light"] .lp-wrap.open .lp-trigger{ border-color:#00ff85;color:#00ff85 }
.btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:9px 16px;border-radius:8px;font-size:13px;letter-spacing:.1em;
    border:1px solid transparent;cursor:pointer;text-transform:uppercase;
    transition:transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn .arrow{transition:transform .12s ease}
.btn:hover .arrow{transform:translateX(3px)}
.btn-primary{
    background:linear-gradient(180deg,#0aff90,#00b85b);
    color:#021008;font-weight:700;
    box-shadow:0 0 22px var(--green-glow), inset 0 0 0 1px rgba(255,255,255,.15);
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 0 32px var(--green-glow)}
/* "WEB" pill stuck onto the "Enter the Matrix" CTA so visitors see it leads
 * to the in-browser app rather than a desktop installer. Sits on the right
 * edge of the button, dark chip on the bright green so it pops without
 * stealing focus from the main label. Hides on the narrow mobile bar
 * (hamburger menu) — tag would overflow the cramped 2-button layout. */
.cta-tag{
    display:inline-flex;align-items:center;justify-content:center;
    margin-inline-start:8px;padding:1px 6px;
    border-radius:3px;
    background:rgba(2,16,8,.85);color:#0aff90;
    font-size:9px;font-weight:800;letter-spacing:.18em;
    line-height:1.4;
    box-shadow:inset 0 0 0 1px rgba(0,255,133,.25);
}
[data-theme="light"] .cta-tag{
    background:#0a0a0a;color:#f5efe2;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.4);
}
@media (max-width:880px){
    .cta-tag{display:none}
}
.btn-ghost{
    border-color:var(--line);color:var(--ink);background:rgba(0,0,0,.4)
}
.btn-ghost:hover{border-color:var(--green);color:var(--green)}
.btn.big{padding:14px 22px;font-size:14px}

@media (max-width:880px){
    .nav{display:none}
    .topbar{padding:12px 16px;gap:12px}
    .brand-text{font-size:13px}
}

/* ====== Sections common ====== */
section{padding:96px 28px;position:relative;max-width:1200px;margin:0 auto}
.section-title{
    font-family:var(--display);font-weight:900;letter-spacing:.14em;
    font-size:clamp(28px,4vw,46px);margin:0 0 8px;color:var(--ink);
    text-shadow:0 0 12px rgba(0,255,133,.25);
}
.section-title .prompt{color:var(--green);margin-right:14px;text-shadow:0 0 12px var(--green-glow)}
.section-lead{margin:0 0 44px;color:var(--ink-dim);font-size:15px;max-width:720px}

/* ====== Hero ====== */
.hero{padding-top:60px;padding-bottom:80px}
.hero-grid{
    display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;
}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr;gap:40px}}

.badge{
    display:inline-flex;align-items:center;gap:8px;
    padding:6px 12px;border:1px solid var(--line);border-radius:999px;
    font-size:11px;letter-spacing:.18em;color:var(--ink-dim);
    background:rgba(0,255,133,.04);
}
.badge-dot{
    width:8px;height:8px;border-radius:50%;background:var(--green);
    box-shadow:0 0 10px var(--green-glow);
    animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

.hero-title{
    font-family:var(--display);font-weight:900;letter-spacing:.06em;
    font-size:clamp(40px,7vw,84px);line-height:.98;margin:18px 0 18px;
    text-transform:uppercase;
}
.hero-sub-title{
    display:block;font-family:var(--mono);font-weight:400;letter-spacing:.06em;
    font-size:clamp(15px,1.6vw,20px);color:var(--ink-dim);text-transform:none;
    margin-top:14px;
}

.hero-lead{font-size:16px;max-width:560px;color:#bce6c8;margin:0 0 28px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:36px}
.hero-stats{
    display:flex;gap:36px;list-style:none;margin:0;padding:0;flex-wrap:wrap;
    border-top:1px dashed var(--line-soft);padding-top:22px;max-width:560px
}
.hero-stats li{display:flex;flex-direction:column}
.hero-stats b{font-family:var(--display);font-size:28px;color:var(--green);text-shadow:0 0 12px var(--green-glow)}
.hero-stats span{font-size:11px;letter-spacing:.18em;color:var(--ink-dim);text-transform:uppercase}

/* Glitch title */
.glitch{position:relative;display:inline-block;color:var(--ink)}
.glitch::before,.glitch::after{
    content:attr(data-text);position:absolute;left:0;top:0;width:100%;height:100%;
    overflow:hidden;clip-path:inset(0 0 0 0);
}
.glitch::before{color:var(--green);transform:translate(-2px,0);mix-blend-mode:screen;animation:gl1 4s infinite linear}
.glitch::after{color:#00d4ff;transform:translate(2px,0);mix-blend-mode:screen;animation:gl2 5s infinite linear}
@keyframes gl1{
    0%,100%{clip-path:inset(0 0 90% 0)}
    20%{clip-path:inset(40% 0 40% 0)}
    40%{clip-path:inset(80% 0 5% 0)}
    60%{clip-path:inset(20% 0 60% 0)}
    80%{clip-path:inset(60% 0 20% 0)}
}
@keyframes gl2{
    0%,100%{clip-path:inset(80% 0 5% 0)}
    25%{clip-path:inset(20% 0 60% 0)}
    50%{clip-path:inset(60% 0 30% 0)}
    75%{clip-path:inset(10% 0 80% 0)}
}

/* Terminal mock */
.hero-terminal{position:relative}
.term{
    position:relative;border:1px solid var(--line);border-radius:var(--radius);
    background:linear-gradient(180deg,rgba(6,12,9,.95),rgba(4,8,6,.95));
    overflow:hidden;box-shadow:
        0 0 0 1px rgba(0,255,133,.10),
        0 30px 80px rgba(0,0,0,.7),
        0 0 100px rgba(0,255,133,.15);
}
.term-bar{
    display:flex;align-items:center;gap:8px;
    padding:10px 14px;border-bottom:1px solid var(--line-soft);
    background:linear-gradient(180deg,rgba(0,255,133,.06),transparent);
}
.term-bar i{width:11px;height:11px;border-radius:50%;display:inline-block}
.term-bar .r{background:#ff5f57}
.term-bar .y{background:#febc2e}
.term-bar .g{background:#28c840}
.term-title{margin-left:auto;color:var(--ink-dim);font-size:12px;letter-spacing:.06em}
.term-body{
    margin:0;padding:18px 22px;font-family:var(--mono);font-size:13px;
    min-height:300px;white-space:pre-wrap;color:#c9ffd9;
}
.term-body .g{color:var(--green);text-shadow:0 0 10px var(--green-glow)}
.term-body .dim{color:var(--ink-dim)}
.term-body .y{color:var(--yellow)}
.term-body .cur{
    display:inline-block;width:9px;height:16px;background:var(--green);vertical-align:-2px;
    margin-left:2px;animation:blink 1s steps(2) infinite;box-shadow:0 0 10px var(--green-glow);
}
@keyframes blink{50%{opacity:0}}

.hero-glow{
    position:absolute;inset:-10% -10% -10% -10%;z-index:-1;
    background:radial-gradient(closest-side, rgba(0,255,133,.18), transparent 70%);
    filter:blur(20px);pointer-events:none;
}

/* Hero app screenshot — looks like a real Console.Matrix window in light
   mode. Always renders in cream regardless of page theme so the screenshot
   stays consistent with the in-app palette (#F4EDE0 / #EDE4D2 / #FBF6E8 /
   ink #0D0D0D — see _PcThemePalettes in App.ps1). */
.hero-app{position:relative}
.happ{
    position:relative;border-radius:10px;overflow:hidden;
    background:#F4EDE0;
    border:1px solid rgba(0,0,0,.18);
    box-shadow:
        0 30px 80px rgba(0,0,0,.55),
        0 0 0 1px rgba(255,255,255,.04),
        0 0 90px rgba(0,255,133,.16);
    color:#0D0D0D;
}

/* OS title bar — dark like the Windows DWM dark-titlebar Console.Matrix
   sets via DwmSetWindowAttribute. */
.happ-titlebar{
    display:flex;align-items:center;gap:8px;
    padding:7px 10px 7px 12px;
    background:#1a1a1a;
    color:#e6e6e6;
    border-bottom:1px solid #000;
}
.happ-tbicon{width:14px;height:14px;display:grid;place-items:center;flex-shrink:0}
.happ-tbicon svg{width:14px;height:14px}
.happ-tbtitle{
    font-family:var(--mono);font-size:12px;letter-spacing:.02em;
    color:#dcdcdc;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.happ-tbctrls{
    margin-left:auto;display:flex;align-items:center;gap:14px;flex-shrink:0;
}
.happ-tbctrls i{
    width:11px;height:1px;background:#9c9c9c;display:inline-block;
    position:relative;
}
.happ-tbctrls i:nth-child(2){width:9px;height:9px;background:transparent;border:1px solid #9c9c9c}
.happ-tbctrls i:nth-child(3){width:11px;height:11px;background:transparent}
.happ-tbctrls i:nth-child(3)::before,
.happ-tbctrls i:nth-child(3)::after{
    content:"";position:absolute;left:0;top:50%;width:14px;height:1px;
    background:#9c9c9c;transform-origin:center;
}
.happ-tbctrls i:nth-child(3)::before{transform:translate(-1px,-1px) rotate(45deg)}
.happ-tbctrls i:nth-child(3)::after{transform:translate(-1px,-1px) rotate(-45deg)}

/* Toolbar row with cream chrome buttons. */
.happ-toolbar{
    display:flex;align-items:center;gap:8px;
    padding:8px 12px;
    background:#F4EDE0;
    border-bottom:1px solid rgba(0,0,0,.12);
    flex-wrap:wrap;
}
.happ-tbdot{
    width:8px;height:8px;border-radius:50%;background:#00b46a;flex-shrink:0;
    box-shadow:0 0 6px rgba(0,180,106,.55);
    animation:pulse 1.6s ease-in-out infinite;
    margin-right:2px;
}
.happ-btn{
    display:inline-flex;align-items:center;gap:5px;
    font-family:var(--mono);font-size:11.5px;letter-spacing:.01em;
    color:#0D0D0D;
    padding:5px 10px;border-radius:7px;
    background:#FBF6E8;
    border:1px solid rgba(0,0,0,.22);
    cursor:default;
    white-space:nowrap;
}
.happ-btn em{font-style:normal;font-size:9px;color:#4a4a4a;margin-left:1px}

/* Two-column body: АГЕНТЫ sidebar + chat pane. */
.happ-main{
    display:grid;grid-template-columns:130px 1fr;
    background:#FBF6E8;
    min-height:340px;
}
.happ-side{
    background:#EDE4D2;
    border-right:1px solid rgba(0,0,0,.12);
    padding:14px 0 14px;
}
.happ-side h4{
    margin:0 14px 10px;font-family:var(--mono);font-weight:700;
    font-size:12px;letter-spacing:.18em;color:#0D0D0D;
}
.happ-side ul{list-style:none;padding:0;margin:0;font-family:var(--mono);font-size:12px}
.happ-side li{
    padding:7px 14px;color:#1a1a1a;cursor:default;
    border-left:3px solid transparent;
}
.happ-side li.active{
    background:#0D0D0D;color:#FBF6E8;
    border-left-color:#00ff85;
    font-weight:600;
}
/* Built-in image generator entry — slightly darker matrix-green so it
   reads as «sibling of Matrix AI» but visibly distinct from cloud
   providers. Lives on console-matrix.space hero + easy mockups. */
.happ-side li.happ-side-image,
.easy-side li.easy-side-image{
    color:#00CC6A;
    font-weight:600;
}
[data-theme="light"] .happ-side li.happ-side-image,
[data-theme="light"] .easy-side li.easy-side-image{
    color:#0a0a0a;
}

/* Chat pane: monospace conversation, file cards, status pill.
   The whole conversation is animated by app.js (`hero-app-demo`): each
   .happ-stage starts hidden and fades/slides in when JS adds .is-on. */
.happ-chat{
    padding:16px 18px 14px;
    display:flex;flex-direction:column;gap:11px;
    min-width:0;
    font-family:var(--mono);
}
.happ-row{font-size:12.5px;line-height:1.55;color:#0D0D0D;overflow-wrap:anywhere}
.happ-row-user{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}
.happ-row-user b{color:#0D0D0D;font-weight:700;flex-shrink:0}
.happ-typed{white-space:pre-wrap;overflow-wrap:anywhere}
.happ-prompt-source{display:none}
.happ-caret{
    display:inline-block;width:7px;height:14px;background:#0D0D0D;
    vertical-align:-2px;margin-left:2px;
    animation:happ-blink 1s steps(2) infinite;
}
@keyframes happ-blink{50%{opacity:0}}

.happ-row-thinking{
    display:flex;align-items:center;gap:8px;color:#4a4a4a;font-size:12px;
}
.happ-spinner{
    width:11px;height:11px;border:2px solid #0D0D0D;border-top-color:transparent;
    border-radius:50%;display:inline-block;flex-shrink:0;
    animation:happ-spin .9s linear infinite;
}
@keyframes happ-spin{to{transform:rotate(360deg)}}
.happ-dots{display:inline-flex;gap:2px;margin-left:1px}
.happ-dots i{
    width:3px;height:3px;border-radius:50%;background:#4a4a4a;
    animation:happ-dot 1.2s ease-in-out infinite;
}
.happ-dots i:nth-child(2){animation-delay:.18s}
.happ-dots i:nth-child(3){animation-delay:.36s}
@keyframes happ-dot{0%,80%,100%{opacity:.25}40%{opacity:1}}

.happ-code{
    margin:0;font-family:var(--mono);font-size:12.5px;line-height:1.65;
    color:#0D0D0D;white-space:pre-wrap;overflow-wrap:anywhere;
}
.happ-code .hh{color:#0D0D0D;font-weight:700}
.happ-code .hd{color:#0D0D0D}
/* Each markdown line fades in independently when its stage is on. */
.happ-line{
    display:inline-block;
    opacity:0;transform:translateX(-4px);
    transition:opacity .25s ease, transform .25s ease;
}
.happ-line.is-on{opacity:1;transform:none}

.happ-files{
    display:flex;flex-direction:column;gap:7px;margin-top:4px;
}
.happ-file{
    display:flex;align-items:center;gap:11px;
    padding:9px 11px;
    background:#F4EDE0;
    border:1px solid rgba(0,0,0,.18);
    border-radius:8px;
    transition:border-color .15s ease, transform .25s ease, box-shadow .25s ease, opacity .35s ease;
    /* Files start hidden; .is-on slides them up + fades in. */
    opacity:0;transform:translateY(8px);
}
.happ-file.is-on{opacity:1;transform:none}
.happ-file:hover{
    border-color:#0D0D0D;
    box-shadow:0 6px 16px rgba(0,0,0,.10);
}
.happ-fico{flex-shrink:0;width:30px;height:30px;display:grid;place-items:center}
.happ-fico svg{width:28px;height:28px}
.happ-fmeta{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;line-height:1.25}
.happ-fmeta b{font-size:12.5px;color:#0D0D0D;font-weight:600;font-family:var(--mono);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.happ-fmeta span{font-size:10.5px;color:#6a6a6a;font-family:var(--mono);letter-spacing:.02em}

.happ-actions{flex-shrink:0;display:flex;align-items:center;gap:5px}
.happ-save,
.happ-open{
    display:inline-flex;align-items:center;gap:5px;
    font-family:var(--display);font-weight:700;letter-spacing:.06em;
    font-size:10px;text-transform:uppercase;
    padding:6px 9px;border-radius:6px;cursor:default;
    transition:transform .12s ease, box-shadow .15s ease, background-color .15s ease;
}
.happ-save{background:#0D0D0D;color:#FBF6E8;border:1px solid #0D0D0D}
.happ-open{background:#FBF6E8;color:#0D0D0D;border:1px solid #0D0D0D}
.happ-save svg,
.happ-open svg{width:12px;height:12px;flex-shrink:0}
.happ-file:hover .happ-save{transform:translateY(-1px);box-shadow:0 5px 12px rgba(0,0,0,.22)}
.happ-file:hover .happ-open{transform:translateY(-1px);box-shadow:0 5px 12px rgba(0,0,0,.10);background:#F4EDE0}

.happ-status{
    display:inline-flex;align-items:center;gap:8px;
    align-self:flex-start;margin-top:6px;
    font-family:var(--mono);font-size:11.5px;color:#0D0D0D;
    padding:4px 11px;border-radius:999px;
    background:#EDE4D2;
    border:1px solid #0D0D0D;
}
.happ-status-dot{
    width:7px;height:7px;border-radius:50%;background:#00b46a;
    box-shadow:0 0 6px rgba(0,180,106,.55);
    animation:pulse 1.6s ease-in-out infinite;flex-shrink:0;
}

/* Stage on/off — drives the whole choreography. JS adds .is-on. The stage
   still occupies layout while invisible so neighbours don't reflow. */
.happ-stage{
    opacity:0;transform:translateY(4px);
    transition:opacity .25s ease, transform .25s ease;
}
.happ-stage.is-on{opacity:1;transform:none}
.happ-stage.is-off{opacity:0;transform:translateY(-2px);
    transition:opacity .2s ease, transform .2s ease}
/* No-JS fallback: show the final state of everything, hide thinking row. */
.happ-chat:not([data-happ-active]) .happ-stage,
.happ-chat:not([data-happ-active]) .happ-line,
.happ-chat:not([data-happ-active]) .happ-file{
    opacity:1;transform:none;
}
.happ-chat:not([data-happ-active]) .happ-row-thinking,
.happ-chat:not([data-happ-active]) .happ-caret{display:none}

@media (prefers-reduced-motion: reduce){
    .happ-caret,
    .happ-spinner,
    .happ-dots i,
    .happ-status-dot,
    .happ-tbdot{animation:none !important}
}

@media (max-width:780px){
    .happ-toolbar{padding:7px 10px;gap:6px}
    .happ-btn{font-size:11px;padding:4px 8px}
    .happ-main{grid-template-columns:108px 1fr;min-height:0}
    .happ-side h4{margin:0 10px 8px;font-size:11px}
    .happ-side li{padding:6px 10px;font-size:11.5px}
    .happ-chat{padding:13px 14px}
}
@media (max-width:560px){
    .happ-main{grid-template-columns:1fr}
    .happ-side{display:none}
    .happ-save span,
    .happ-open span{display:none}
    .happ-save,
    .happ-open{padding:6px 8px}
    .happ-toolbar .happ-btn:nth-child(n+5){display:none}
}

/* Scroll hint */
.scroll-hint{
    position:absolute;left:50%;bottom:8px;transform:translateX(-50%);
    display:flex;flex-direction:column;gap:4px;
}
.scroll-hint span{
    width:14px;height:14px;border-right:1px solid var(--green);border-bottom:1px solid var(--green);
    transform:rotate(45deg);opacity:.4;animation:fall 1.6s infinite;
}
.scroll-hint span:nth-child(2){animation-delay:.2s}
.scroll-hint span:nth-child(3){animation-delay:.4s}
@keyframes fall{0%{opacity:0;transform:rotate(45deg) translate(-6px,-6px)}50%{opacity:1}100%{opacity:0;transform:rotate(45deg) translate(6px,6px)}}

/* ====== Cards ====== */
.cards{
    display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
}
@media (max-width:900px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cards{grid-template-columns:1fr}}

.card{
    position:relative;padding:24px;border-radius:var(--radius);
    background:var(--card);border:1px solid var(--line-soft);
    transition:transform .15s ease, border-color .15s ease, box-shadow .2s ease;
    overflow:hidden;
}
.card::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(135deg, rgba(0,255,133,.08), transparent 40%);
    opacity:0;transition:opacity .2s ease;
}
.card:hover{transform:translateY(-3px);border-color:var(--green);box-shadow:0 12px 40px rgba(0,255,133,.15)}
.card:hover::before{opacity:1}
.card-icon{
    width:44px;height:44px;border-radius:10px;display:grid;place-items:center;
    background:linear-gradient(180deg,rgba(0,255,133,.18),rgba(0,255,133,.04));
    border:1px solid var(--line);color:var(--green);margin-bottom:14px;
    box-shadow:0 0 14px rgba(0,255,133,.18);
}
.card-icon svg{width:22px;height:22px}
.card h3{margin:0 0 6px;font-family:var(--display);letter-spacing:.06em;font-size:18px;color:var(--ink)}
.card p{margin:0;color:var(--ink-dim);font-size:14px}

/* ====== Card · Secure (f2) ======
   Same shape as the rest of the feature cards — just an amber tint on
   the icon tile so the lock signals «security» without being green
   like the others. No special background, no animation, no extra
   chrome. Body of the card uses the standard .card styles. */
.card-secure .card-icon{
    color:#FFAE00;
    background:linear-gradient(180deg,rgba(255,215,0,0.18),rgba(255,138,0,0.04));
    border-color:rgba(255,174,0,0.38);
    box-shadow:0 0 14px rgba(255,174,0,0.22);
}
.card-secure:hover{border-color:#FFAE00;box-shadow:0 12px 40px rgba(255,174,0,0.18)}
.card-secure:hover::before{
    background:linear-gradient(135deg,rgba(255,174,0,0.10),transparent 40%);
    opacity:1;
}

/* ====== Feature cards · per-icon color & motion ======
   Each card gets its own accent so the row reads as a palette instead of
   six green tiles. Same shape/border treatment as .card-secure (amber);
   only the icon tile, hover glow and ::before sheen tint shift. Light
   theme overrides keep the same hue but darker for contrast on cream.

   Motion:
   - Continuous gentle "breathing" on every .card-icon (translate + glow
     pulse), staggered per card via animation-delay so the row feels
     alive without being synchronized.
   - On card hover the icon scales up + brightens, and the inner SVG
     runs a unique micro-animation (gear spins, lock wiggles, monitor
     scanline, parallel lines slide, crosshair locks, brackets snap).
   - prefers-reduced-motion disables every loop & hover transition. */

/* --- 1. f1 monitor — cyan --- */
.card-llm .card-icon{
    color:#00d4ff;
    background:linear-gradient(180deg,rgba(0,212,255,0.20),rgba(0,212,255,0.04));
    border-color:rgba(0,212,255,0.42);
    box-shadow:0 0 14px rgba(0,212,255,0.24);
}
.card-llm:hover{border-color:#00d4ff;box-shadow:0 12px 40px rgba(0,212,255,0.20)}
.card-llm:hover::before{background:linear-gradient(135deg,rgba(0,212,255,0.12),transparent 40%);opacity:1}
[data-theme="light"] .card-llm .card-icon{
    color:#0077a6 !important;
    background:linear-gradient(180deg,rgba(0,119,166,0.16),rgba(0,119,166,0.04));
    border-color:rgba(0,119,166,0.42);
}

/* --- 3. f3 parallel — pink --- */
.card-parallel .card-icon{
    color:#ff4fa1;
    background:linear-gradient(180deg,rgba(255,79,161,0.20),rgba(255,79,161,0.04));
    border-color:rgba(255,79,161,0.42);
    box-shadow:0 0 14px rgba(255,79,161,0.24);
}
.card-parallel:hover{border-color:#ff4fa1;box-shadow:0 12px 40px rgba(255,79,161,0.20)}
.card-parallel:hover::before{background:linear-gradient(135deg,rgba(255,79,161,0.12),transparent 40%);opacity:1}
[data-theme="light"] .card-parallel .card-icon{
    color:#a8327a !important;
    background:linear-gradient(180deg,rgba(168,50,122,0.14),rgba(168,50,122,0.04));
    border-color:rgba(168,50,122,0.45);
}

/* --- 4. f4 platforms — violet --- */
.card-platforms .card-icon{
    color:#a78bfa;
    background:linear-gradient(180deg,rgba(167,139,250,0.22),rgba(167,139,250,0.04));
    border-color:rgba(167,139,250,0.42);
    box-shadow:0 0 14px rgba(167,139,250,0.26);
}
.card-platforms:hover{border-color:#a78bfa;box-shadow:0 12px 40px rgba(167,139,250,0.22)}
.card-platforms:hover::before{background:linear-gradient(135deg,rgba(167,139,250,0.12),transparent 40%);opacity:1}
[data-theme="light"] .card-platforms .card-icon{
    color:#5b3dc4 !important;
    background:linear-gradient(180deg,rgba(91,61,196,0.14),rgba(91,61,196,0.04));
    border-color:rgba(91,61,196,0.42);
}

/* --- 5. f5 aesthetic — lime --- */
.card-aesthetic .card-icon{
    color:#b6ff3a;
    background:linear-gradient(180deg,rgba(182,255,58,0.20),rgba(182,255,58,0.04));
    border-color:rgba(182,255,58,0.42);
    box-shadow:0 0 14px rgba(182,255,58,0.24);
}
.card-aesthetic:hover{border-color:#b6ff3a;box-shadow:0 12px 40px rgba(182,255,58,0.20)}
.card-aesthetic:hover::before{background:linear-gradient(135deg,rgba(182,255,58,0.12),transparent 40%);opacity:1}
[data-theme="light"] .card-aesthetic .card-icon{
    color:#5c8a0f !important;
    background:linear-gradient(180deg,rgba(92,138,15,0.16),rgba(92,138,15,0.04));
    border-color:rgba(92,138,15,0.45);
}

/* --- 6. f6 open source — coral --- */
.card-os .card-icon{
    color:#ff7b5f;
    background:linear-gradient(180deg,rgba(255,123,95,0.20),rgba(255,123,95,0.04));
    border-color:rgba(255,123,95,0.42);
    box-shadow:0 0 14px rgba(255,123,95,0.24);
}
.card-os:hover{border-color:#ff7b5f;box-shadow:0 12px 40px rgba(255,123,95,0.20)}
.card-os:hover::before{background:linear-gradient(135deg,rgba(255,123,95,0.12),transparent 40%);opacity:1}
[data-theme="light"] .card-os .card-icon{
    color:#b33d2a !important;
    background:linear-gradient(180deg,rgba(179,61,42,0.14),rgba(179,61,42,0.04));
    border-color:rgba(179,61,42,0.45);
}

/* --- continuous breathing on icon tiles, staggered per card --- */
.cards .card-icon{
    transition:transform .28s cubic-bezier(.2,.9,.3,1.15),
               filter .25s ease, box-shadow .25s ease;
    animation:card-icon-breathe 3.6s ease-in-out infinite;
    will-change:transform, box-shadow;
}
.cards article:nth-child(1) .card-icon{animation-delay:0s}
.cards article:nth-child(2) .card-icon{animation-delay:.6s}
.cards article:nth-child(3) .card-icon{animation-delay:1.2s}
.cards article:nth-child(4) .card-icon{animation-delay:1.8s}
.cards article:nth-child(5) .card-icon{animation-delay:2.4s}
.cards article:nth-child(6) .card-icon{animation-delay:3.0s}
@keyframes card-icon-breathe{
    0%,100%{transform:translateY(0)}
    50%    {transform:translateY(-3px)}
}

/* --- hover: amplify the tile, then run a per-icon SVG micro-motion --- */
.cards .card:hover .card-icon{
    transform:translateY(-4px) scale(1.06);
    filter:brightness(1.18) saturate(1.15);
}
.cards .card-icon svg{transition:transform .45s cubic-bezier(.2,.9,.3,1.15)}

/* gear spins once on hover */
.card-aesthetic:hover .card-icon svg{animation:card-spin .9s cubic-bezier(.2,.9,.3,1.05)}
@keyframes card-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* lock wiggles */
.card-secure:hover .card-icon svg{animation:card-wiggle .55s ease-in-out}
@keyframes card-wiggle{
    0%,100%{transform:rotate(0)}
    25%{transform:rotate(-7deg)}
    50%{transform:rotate(7deg)}
    75%{transform:rotate(-4deg)}
}

/* monitor: subtle scanline blip via filter+scale */
.card-llm:hover .card-icon svg{animation:card-scan .8s ease-out}
@keyframes card-scan{
    0%   {transform:translateY(0);filter:brightness(1)}
    50%  {transform:translateY(-1px);filter:brightness(1.5) drop-shadow(0 0 6px currentColor)}
    100% {transform:translateY(0);filter:brightness(1)}
}

/* parallel lines stack-slide */
.card-parallel:hover .card-icon svg{animation:card-stack .7s ease-out}
@keyframes card-stack{
    0%  {transform:translateX(-3px);opacity:.4}
    40% {transform:translateX(2px);opacity:1}
    100%{transform:none;opacity:1}
}

/* crosshair: target lock — quick spin then snap */
.card-platforms:hover .card-icon svg{animation:card-target .9s cubic-bezier(.2,.9,.3,1.05)}
@keyframes card-target{
    0%  {transform:rotate(0) scale(.85)}
    60% {transform:rotate(180deg) scale(1.1)}
    100%{transform:rotate(180deg) scale(1)}
}

/* brackets snap apart */
.card-os:hover .card-icon svg{animation:card-snap .55s ease-out}
@keyframes card-snap{
    0%  {transform:scaleX(1)}
    50% {transform:scaleX(1.25)}
    100%{transform:scaleX(1)}
}

@media (prefers-reduced-motion:reduce){
    .cards .card-icon{animation:none}
    .cards .card:hover .card-icon{transform:none;filter:none}
    .cards .card-icon svg,
    .card-aesthetic:hover .card-icon svg,
    .card-secure:hover .card-icon svg,
    .card-llm:hover .card-icon svg,
    .card-parallel:hover .card-icon svg,
    .card-platforms:hover .card-icon svg,
    .card-os:hover .card-icon svg{animation:none;transform:none;filter:none}
}

/* ====== Easy: one-hover connect demo ======
   Cream-palette mock of Console.Matrix (same colors as .happ above) with
   a CSS-only animation: cursor flies to «Подключить», dropdown opens,
   tiny browser slides in over the chat with Claude sign-in, browser
   closes, sidebar highlight jumps to claude-code, prompt+reply stream.
   9-second loop, all timing keyed off `--easy-dur`. The animation pauses
   if the user has prefers-reduced-motion set. */
.easy{position:relative;padding-bottom:48px;text-align:center}
.easy-kicker{
    display:inline-block;
    font-family:var(--display);font-weight:700;letter-spacing:.22em;
    font-size:11px;color:var(--green);text-transform:uppercase;
    padding:5px 13px;border:1px solid var(--green);border-radius:999px;
    box-shadow:0 0 18px rgba(0,255,133,.18);margin-bottom:12px;
}
[data-theme="light"] .easy-kicker{
    color:#0a0a0a;border-color:#0a0a0a;box-shadow:none;
}
.easy .section-title{margin-top:4px}
.easy .section-lead{margin-bottom:32px}

.easy-stage{
    display:grid;grid-template-columns:minmax(0,1fr) 280px;
    gap:30px;align-items:center;
    max-width:1080px;margin:0 auto;text-align:left;
}
@media (max-width:820px){
    .easy-stage{grid-template-columns:1fr;gap:22px}
}

.easy-win{
    /* Loop length. Bumped from 9s to 10s so we can fit a file-card
       slide-in after the AI stream finishes without making any
       single phase feel rushed. */
    --easy-dur:10s;
    position:relative;border-radius:10px;overflow:hidden;
    background:#F4EDE0;
    border:1px solid rgba(0,0,0,.18);
    box-shadow:
        0 30px 80px rgba(0,0,0,.45),
        0 0 0 1px rgba(255,255,255,.04),
        0 0 90px rgba(0,255,133,.16);
    color:#0D0D0D;
    font-family:var(--mono);
    min-height:340px;
}
@media (prefers-reduced-motion:reduce){
    .easy-win{--easy-dur:0s}
    .easy-win *,.easy-win *::before,.easy-win *::after{
        animation:none !important;
    }
    .easy-win .easy-dropdown{opacity:0}
    .easy-win .easy-browser{transform:translateY(-130%)}
    /* Freeze in a sensible «after sign-in» state so reduced-motion
       viewers still see the agent in the sidebar instead of an empty
       collapsed row. */
    .easy-win .easy-side-mistral{
        max-height:32px;opacity:1;padding:7px 14px;
        background:#0D0D0D;color:#FBF6E8;border-left-color:#FA520F;font-weight:600;
    }
    .easy-win .easy-side-matrix{
        background:transparent;color:#1a1a1a;border-left-color:transparent;font-weight:400;
    }
    .easy-win .easy-email{width:auto}
    .easy-win .easy-chat-empty{display:none}
    .easy-win .easy-chat-active{position:relative;inset:auto;opacity:1}
    .easy-win .easy-typing{width:100%;border-right:none}
    .easy-win .easy-stream{opacity:.78}
    .easy-win .easy-files{opacity:1;transform:none}
}

/* Title bar + window controls — copy of .happ-titlebar palette. */
.easy-tbar{
    display:flex;align-items:center;gap:8px;
    padding:7px 10px 7px 12px;
    background:#1a1a1a;color:#e6e6e6;
    border-bottom:1px solid #000;
}
.easy-tbicon{width:14px;height:14px;display:grid;place-items:center;flex-shrink:0}
.easy-tbicon svg{width:14px;height:14px}
.easy-tbtitle{
    font-size:12px;letter-spacing:.02em;color:#dcdcdc;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.easy-tbctrls{margin-left:auto;display:flex;align-items:center;gap:14px;flex-shrink:0}
.easy-tbctrls i{width:11px;height:1px;background:#9c9c9c;display:inline-block;position:relative}
.easy-tbctrls i:nth-child(2){width:9px;height:9px;background:transparent;border:1px solid #9c9c9c}
.easy-tbctrls i:nth-child(3){width:11px;height:11px;background:transparent}
.easy-tbctrls i:nth-child(3)::before,
.easy-tbctrls i:nth-child(3)::after{
    content:"";position:absolute;left:0;top:50%;width:14px;height:1px;
    background:#9c9c9c;transform-origin:center;
}
.easy-tbctrls i:nth-child(3)::before{transform:translate(-1px,-1px) rotate(45deg)}
.easy-tbctrls i:nth-child(3)::after{transform:translate(-1px,-1px) rotate(-45deg)}

/* Toolbar with the «Подключить» button and the dropdown that opens
   below it. Position: relative so the dropdown can absolutely position
   itself against this row. */
.easy-toolbar{
    position:relative;
    display:flex;align-items:center;gap:8px;flex-wrap:wrap;
    padding:8px 12px;
    background:#F4EDE0;
    border-bottom:1px solid rgba(0,0,0,.12);
}
.easy-tbdot{
    width:8px;height:8px;border-radius:50%;background:#00b46a;flex-shrink:0;
    box-shadow:0 0 6px rgba(0,180,106,.55);
    animation:pulse 1.6s ease-in-out infinite;
    margin-right:2px;
}
.easy-btn{
    display:inline-flex;align-items:center;gap:5px;
    font-size:11.5px;letter-spacing:.01em;color:#0D0D0D;
    padding:5px 10px;border-radius:7px;
    background:#FBF6E8;border:1px solid rgba(0,0,0,.22);
    white-space:nowrap;transition:background .15s ease, border-color .15s ease;
}
.easy-btn em{font-style:normal;font-size:9px;color:#4a4a4a;margin-left:1px}
.easy-btn-connect{
    position:relative;
    animation:easyBtnHover var(--easy-dur) ease-in-out infinite;
}
@keyframes easyBtnHover{
    0%,18%{background:#FBF6E8;border-color:rgba(0,0,0,.22)}
    22%,38%{background:#0D0D0D;border-color:#0D0D0D;color:#FBF6E8}
    42%,100%{background:#FBF6E8;border-color:rgba(0,0,0,.22);color:#0D0D0D}
}
.easy-btn-connect span{color:inherit}
.easy-btn-connect em{color:inherit;opacity:.65}

/* Dropdown menu under «Подключить». Opacity+translateY animated, NOT
   display:none — display can't be tweened. */
.easy-dropdown{
    position:absolute;top:calc(100% + 4px);left:46px;
    z-index:5;min-width:140px;
    background:#FBF6E8;border:1px solid rgba(0,0,0,.22);
    border-radius:8px;
    box-shadow:0 10px 24px rgba(0,0,0,.18);
    padding:5px;
    opacity:0;transform:translateY(-6px);pointer-events:none;
    animation:easyDdOpen var(--easy-dur) ease-in-out infinite;
}
@keyframes easyDdOpen{
    0%,20%{opacity:0;transform:translateY(-6px)}
    24%,38%{opacity:1;transform:translateY(0)}
    42%,100%{opacity:0;transform:translateY(-6px)}
}
.easy-dd-item{
    padding:6px 10px;border-radius:5px;
    font-size:11.5px;color:#0D0D0D;
}
.easy-dd-item em{
    font-style:normal;font-size:10px;color:#FA520F;font-weight:700;
    margin-left:4px;
}
.easy-dd-item-mistral{
    animation:easyDdHover var(--easy-dur) ease-in-out infinite;
}
@keyframes easyDdHover{
    0%,30%{background:transparent;color:#0D0D0D}
    33%,38%{background:#0D0D0D;color:#FBF6E8}
    42%,100%{background:transparent;color:#0D0D0D}
}
.easy-dd-item-mistral em{
    animation:easyDdHoverEm var(--easy-dur) ease-in-out infinite;
}
@keyframes easyDdHoverEm{
    0%,30%{color:#FA520F}
    33%,38%{color:#FFD800}
    42%,100%{color:#FA520F}
}

/* Two-column body + chat. */
.easy-main{
    display:grid;grid-template-columns:130px 1fr;
    background:#FBF6E8;min-height:240px;
    position:relative;
}
.easy-side{
    background:#EDE4D2;
    border-right:1px solid rgba(0,0,0,.12);
    padding:14px 0;
}
.easy-side h4{
    margin:0 14px 10px;font-weight:700;
    font-size:12px;letter-spacing:.18em;color:#0D0D0D;
}
.easy-side ul{list-style:none;padding:0;margin:0;font-size:12px}
.easy-side li{
    padding:7px 14px;color:#1a1a1a;
    border-left:3px solid transparent;
}
/* Sidebar transition. Initial state of the loop: only Matrix AI is
   visible AND highlighted. After the browser sign-in completes (~70%):
     • Matrix AI drops its «active» highlight (back to neutral)
     • the mistral row, which started fully collapsed (max-height:0,
       opacity:0, no padding, no border), springs open and gets the
       active highlight — this is the visual payoff of «agent appeared».
   The mistral row stays expanded for the rest of the loop, then resets
   on the next iteration as the loop wraps. */
.easy-side-matrix{
    animation:easySideMatrix var(--easy-dur) ease-in-out infinite;
}
@keyframes easySideMatrix{
    0%,68%{background:#0D0D0D;color:#FBF6E8;border-left-color:#00ff85;font-weight:600}
    74%,100%{background:transparent;color:#1a1a1a;border-left-color:transparent;font-weight:400}
}
.easy-side-mistral{
    overflow:hidden;
    /* hidden defaults — the keyframes drive everything. */
    max-height:0;opacity:0;padding-top:0;padding-bottom:0;
    animation:easySideMistral var(--easy-dur) ease-in-out infinite;
}
@keyframes easySideMistral{
    0%,68%{
        max-height:0;opacity:0;padding-top:0;padding-bottom:0;
        background:transparent;color:#1a1a1a;border-left-color:transparent;font-weight:400;
    }
    74%,100%{
        max-height:32px;opacity:1;padding-top:7px;padding-bottom:7px;
        background:#0D0D0D;color:#FBF6E8;border-left-color:#FA520F;font-weight:600;
    }
}

.easy-chat{
    position:relative;
    padding:18px 20px;
    min-height:0;
}
.easy-chat-empty{
    font-size:12.5px;color:#6a6a6a;font-style:italic;
    animation:easyChatEmpty var(--easy-dur) ease-in-out infinite;
}
@keyframes easyChatEmpty{
    0%,72%{opacity:1}
    76%,100%{opacity:0}
}
.easy-chat-active{
    position:absolute;inset:18px 20px auto 20px;
    display:flex;flex-direction:column;gap:11px;
    opacity:0;
    animation:easyChatActive var(--easy-dur) ease-in-out infinite;
}
@keyframes easyChatActive{
    /* Fades in right as the mistral row finishes sliding into the
       sidebar, so «agent appeared → chat is live» reads as one beat. */
    0%,74%{opacity:0}
    78%,100%{opacity:1}
}
.easy-chat-row{font-size:12.5px;line-height:1.55;color:#0D0D0D}
.easy-chat-user{display:flex;gap:8px;align-items:flex-start}
.easy-chat-user b{color:#0D0D0D;font-weight:700;flex-shrink:0}
.easy-chat-ai{color:#0D0D0D;opacity:.78}
.easy-typing{
    display:inline-block;overflow:hidden;white-space:nowrap;
    border-right:2px solid #0D0D0D;
    width:0;
    animation:easyType var(--easy-dur) steps(28,end) infinite;
}
@keyframes easyType{
    /* Typing slot 78–86%. Pulled earlier than before so the AI
       reply + file card both land before the loop wraps. */
    0%,78%{width:0}
    86%,100%{width:100%}
}
.easy-stream{
    display:inline-block;
    animation:easyFadeIn var(--easy-dur) ease-in-out infinite;
}
@keyframes easyFadeIn{
    0%,86%{opacity:0;transform:translateY(2px)}
    89%,100%{opacity:.78;transform:translateY(0)}
}

/* File card produced by the agent. Slides in after the stream line
   appears so the viewer reads it as «agent answered → file ready
   to download». Stays on screen until the loop resets. */
.easy-files{
    margin-top:8px;
    opacity:0;
    animation:easyFiles var(--easy-dur) ease-in-out infinite;
}
@keyframes easyFiles{
    0%,89%{opacity:0;transform:translateY(8px)}
    94%,100%{opacity:1;transform:translateY(0)}
}
.easy-file{
    display:flex;align-items:center;gap:11px;
    padding:9px 11px;
    background:#F4EDE0;
    border:1px solid rgba(0,0,0,.18);
    border-radius:8px;
}
.easy-fico{flex-shrink:0;width:30px;height:30px;display:grid;place-items:center}
.easy-fico svg{width:28px;height:28px}
.easy-fmeta{
    flex:1;min-width:0;
    display:flex;flex-direction:column;gap:1px;line-height:1.25;
}
.easy-fmeta b{
    font-size:12.5px;color:#0D0D0D;font-weight:600;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.easy-fmeta span{font-size:10.5px;color:#6a6a6a;letter-spacing:.02em}
.easy-fsave{
    flex-shrink:0;display:inline-flex;align-items:center;gap:6px;
    font-family:var(--display);font-weight:700;letter-spacing:.08em;
    font-size:10.5px;text-transform:uppercase;
    padding:7px 11px;border-radius:6px;
    background:#0D0D0D;color:#FBF6E8;border:1px solid #0D0D0D;
}
.easy-fsave svg{width:13px;height:13px;flex-shrink:0}
@media (max-width:560px){
    .easy-fsave span{display:none}
    .easy-fsave{padding:7px 9px}
}

/* Browser overlay. Slides in from above the chat area covering the
   entire main row. Z-index above the sidebar so it visually pops. */
.easy-browser{
    position:absolute;left:0;right:0;top:0;bottom:0;
    z-index:4;
    background:#fff;
    border-top:1px solid rgba(0,0,0,.18);
    display:flex;flex-direction:column;
    transform:translateY(-110%);opacity:0;
    box-shadow:0 16px 40px rgba(0,0,0,.25);
    animation:easyBrowser var(--easy-dur) ease-in-out infinite;
}
@keyframes easyBrowser{
    0%,40%{transform:translateY(-110%);opacity:0}
    44%,68%{transform:translateY(0);opacity:1}
    72%,100%{transform:translateY(-110%);opacity:0}
}
.easy-bbar{
    display:flex;align-items:center;gap:7px;
    padding:8px 12px;background:#ECECEC;
    border-bottom:1px solid rgba(0,0,0,.12);
    font-size:11px;color:#3a3a3a;
}
.easy-bbar i{width:9px;height:9px;border-radius:50%}
.easy-bbar .r{background:#ff5f57}
.easy-bbar .y{background:#febc2e}
.easy-bbar .g{background:#28c840}
.easy-burl{
    margin-left:8px;padding:3px 10px;border-radius:999px;
    background:#fff;border:1px solid rgba(0,0,0,.12);
    font-size:10.5px;letter-spacing:.02em;color:#5a5a5a;
}
.easy-bbody{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:10px;padding:18px;text-align:center;
    background:#FAF9F5;
}
.easy-blogo{display:flex;align-items:center;gap:6px}
.easy-blogo svg{width:22px;height:22px}
.easy-blogo b{
    font-family:var(--display);font-size:18px;color:#FA520F;letter-spacing:.04em;
}
/* Email input: stays empty until the cursor reaches it, then types
   «your@email.com» one char at a time using width+steps(). */
.easy-bfield{
    width:min(220px,80%);padding:7px 10px;
    background:#fff;border:1px solid rgba(0,0,0,.18);border-radius:6px;
    font-size:11px;color:#1a1a1a;text-align:left;
    font-family:var(--mono);
    overflow:hidden;
    min-height:14px;line-height:14px;
}
.easy-email{
    display:inline-block;
    overflow:hidden;white-space:nowrap;
    width:0;max-width:100%;
    border-right:2px solid #FA520F;
    animation:easyEmailType var(--easy-dur) steps(14,end) infinite;
    vertical-align:middle;
}
@keyframes easyEmailType{
    /* Empty until cursor lands on the field. */
    0%,44%{width:0}
    /* Type letter by letter — 14 chars in «your@email.com». */
    56%,66%{width:14ch}
    /* Reset before browser slides out. */
    70%,100%{width:0}
}
.easy-bbtn{
    padding:7px 18px;border-radius:6px;
    background:#FA520F;color:#fff;
    font-family:var(--display);font-weight:700;letter-spacing:.08em;
    font-size:11px;text-transform:uppercase;
    box-shadow:0 4px 14px rgba(250,82,15,.4);
    animation:easyBtnPulse var(--easy-dur) ease-in-out infinite;
}
@keyframes easyBtnPulse{
    /* Click pulse aligned with cursor arrival on the button. */
    0%,62%{transform:scale(1);box-shadow:0 4px 14px rgba(250,82,15,.4)}
    66%,68%{transform:scale(.94);box-shadow:0 2px 8px rgba(250,82,15,.55)}
    70%,100%{transform:scale(1);box-shadow:0 4px 14px rgba(250,82,15,.4)}
}

/* Animated cursor. Path: starts off-right at top, glides to «Подключить»
   button, then jumps onto the browser «Войти» button while the browser
   is on screen, then drifts back. Coordinates are % of the parent
   .easy-win — animating left/top instead of transform: with translate
   the % refers to the cursor itself, not the parent, which is wrong
   for our use case. */
.easy-cursor{
    position:absolute;
    width:18px;height:22px;
    left:88%;top:5%;
    pointer-events:none;z-index:9;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));
    animation:easyCursor var(--easy-dur) cubic-bezier(.4,.0,.2,1) infinite;
}
.easy-cursor svg{width:18px;height:22px;display:block}
@keyframes easyCursor{
    /* Idle top-right. */
    0%   {left:88%;top:5%}
    /* Fly to «Подключить» button (toolbar, far left). */
    18%  {left:9%; top:17%}
    /* Hold while dropdown opens, Mistral row highlights, click. */
    38%  {left:9%; top:17%}
    /* Browser slides in 38–44%; cursor moves down into the email
       input as it lands. */
    46%  {left:48%;top:55%}
    /* Linger on the email field while it types itself in. */
    60%  {left:48%;top:55%}
    /* Hop down to the «Войти» button. */
    66%  {left:50%;top:72%}
    /* Linger for the click pulse + browser slide-out. */
    74%  {left:50%;top:72%}
    /* Drift back toward the rest position. */
    88%  {left:70%;top:35%}
    100% {left:88%;top:5%}
}

/* Side panel with numbered steps. */
.easy-steps{
    list-style:none;margin:0;padding:0;
    display:flex;flex-direction:column;gap:14px;
}
.easy-steps li{
    display:flex;gap:12px;align-items:flex-start;
    padding:14px 16px;border-radius:10px;
    background:var(--card);border:1px solid var(--line-soft);
    color:var(--ink);font-size:14px;line-height:1.45;
    transition:border-color .15s ease, transform .15s ease;
}
.easy-steps li:hover{border-color:var(--green);transform:translateX(2px)}
.easy-steps b{
    font-family:var(--display);font-weight:900;
    color:var(--green);font-size:18px;flex-shrink:0;
    text-shadow:0 0 10px var(--green-glow);
    line-height:1.2;
}
[data-theme="light"] .easy-steps b{color:#0a0a0a;text-shadow:none}

@media (max-width:560px){
    .easy-main{grid-template-columns:108px 1fr}
    .easy-toolbar{padding:7px 10px;gap:6px}
    .easy-toolbar .easy-btn:nth-child(n+5){display:none}
    .easy-btn{font-size:11px;padding:4px 8px}
    .easy-side h4{margin:0 10px 8px;font-size:11px}
    .easy-side li{padding:6px 10px;font-size:11.5px}
    .easy-chat{padding:13px 14px}
    .easy-chat-active{inset:13px 14px auto 14px}
    .easy-dropdown{left:34px;min-width:120px}
}

/* ====== Game: build a working Mario in 5 minutes ======
   Animated chat with Claude — multi-stage typewriter (orchestrated by
   app.js `game-demo`), then a glowing «ИГРАТЬ» CTA that opens the same
   sandboxed CM_GAMES.mario modal used by #showcase. Always renders in
   the cream Console.Matrix palette so the screenshot reads as a real
   in-app interaction regardless of the page's active theme. */
.game{position:relative;padding-bottom:64px;text-align:center}
/* No section-level halos / grid masks — the matrix-rain canvas must read
   through every section cleanly (no big blurred radial gradients rule).
   The window's own green outer box-shadow is enough drama. */

.game-kicker{
    display:inline-block;
    font-family:var(--display);font-weight:700;letter-spacing:.22em;
    font-size:11px;color:var(--green);text-transform:uppercase;
    padding:5px 13px;border:1px solid var(--green);border-radius:999px;
    box-shadow:0 0 18px rgba(0,255,133,.18);margin-bottom:12px;
}
[data-theme="light"] .game-kicker{
    border-color:#0a0a0a;color:#0a0a0a;background:rgba(0,0,0,.05);box-shadow:none;
}
.game .section-title{margin-top:4px}
.game .section-lead{margin-bottom:36px;max-width:780px}

.game-stage{
    max-width:880px;margin:0 auto;padding:0 16px;
    perspective:1400px;
}
.game-win{
    position:relative;border-radius:12px;overflow:hidden;
    background:#F4EDE0;
    border:1px solid rgba(0,0,0,.18);
    /* Tight green outline + drop-shadow only — no oversized halo that would
       wash out the rain canvas behind the section. */
    box-shadow:
        0 30px 60px rgba(0,0,0,.45),
        0 0 0 1px rgba(0,255,133,.20),
        0 0 30px rgba(0,255,133,.18);
    color:#0D0D0D;text-align:left;
    transform:rotateX(2deg);
    transition:transform .4s ease;
}
[data-theme="light"] .game-win{
    box-shadow:
        0 18px 50px rgba(0,0,0,.18),
        0 0 0 1px rgba(0,0,0,.10);
}
.game-win:hover{transform:none}

/* Title bar / toolbar / sidebar share visual contract with .happ-* but
   keep their own classes so the two sections evolve independently. */
.game-tbar{
    display:flex;align-items:center;gap:8px;
    padding:8px 12px;background:#1a1a1a;color:#e6e6e6;
    border-bottom:1px solid #000;
}
.game-tbicon{width:14px;height:14px;display:grid;place-items:center;flex-shrink:0}
.game-tbicon svg{width:14px;height:14px}
.game-tbtitle{font-family:var(--mono);font-size:12px;color:#dcdcdc;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.game-tbctrls{margin-left:auto;display:flex;align-items:center;gap:14px;flex-shrink:0}
.game-tbctrls i{width:11px;height:1px;background:#9c9c9c;display:inline-block;position:relative}
.game-tbctrls i:nth-child(2){width:9px;height:9px;background:transparent;border:1px solid #9c9c9c}
.game-tbctrls i:nth-child(3){width:11px;height:11px;background:transparent}
.game-tbctrls i:nth-child(3)::before,
.game-tbctrls i:nth-child(3)::after{
    content:"";position:absolute;left:0;top:50%;width:14px;height:1px;background:#9c9c9c;
}
.game-tbctrls i:nth-child(3)::before{transform:translate(-1px,-1px) rotate(45deg)}
.game-tbctrls i:nth-child(3)::after{transform:translate(-1px,-1px) rotate(-45deg)}

.game-toolbar{
    display:flex;align-items:center;gap:8px;
    padding:8px 12px;background:#F4EDE0;
    border-bottom:1px solid rgba(0,0,0,.12);flex-wrap:wrap;
}
.game-tbdot{
    width:8px;height:8px;border-radius:50%;background:#00b46a;flex-shrink:0;
    box-shadow:0 0 6px rgba(0,180,106,.55);animation:pulse 1.6s ease-in-out infinite;
    margin-right:2px;
}
.game-btn{
    display:inline-flex;align-items:center;gap:5px;
    font-family:var(--mono);font-size:11.5px;color:#0D0D0D;
    padding:5px 10px;border-radius:7px;
    background:#FBF6E8;border:1px solid rgba(0,0,0,.22);
    cursor:default;white-space:nowrap;
}
.game-btn em{font-style:normal;font-size:9px;color:#4a4a4a;margin-left:1px}

.game-main{
    display:grid;grid-template-columns:140px 1fr;
    background:#FBF6E8;min-height:340px;
}
.game-side{
    background:#EDE4D2;border-right:1px solid rgba(0,0,0,.12);
    padding:14px 0;
}
.game-side h4{
    margin:0 14px 10px;font-family:var(--mono);font-weight:700;
    font-size:12px;letter-spacing:.18em;color:#0D0D0D;
}
.game-side ul{list-style:none;padding:0;margin:0;font-family:var(--mono);font-size:12px}
.game-side li{
    padding:7px 14px;color:#1a1a1a;cursor:default;
    border-left:3px solid transparent;
    position:relative;
}
.game-side li.active{
    background:#0D0D0D;color:#FBF6E8;
    border-left-color:#00ff85;
    font-weight:600;
}
.game-side li.active::after{
    content:"";
    position:absolute;right:14px;top:50%;transform:translateY(-50%);
    width:6px;height:6px;border-radius:50%;background:#00ff85;
    box-shadow:0 0 8px rgba(0,255,133,.7);
    animation:pulse 1.6s ease-in-out infinite;
}

.game-chat{
    padding:18px 22px 18px;
    display:flex;flex-direction:column;gap:11px;
    min-width:0;font-family:var(--mono);
    position:relative;
}
.game-row{font-size:13px;line-height:1.5;color:#0D0D0D;overflow-wrap:anywhere}
.game-row-user{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}
.game-row-user b{color:#0D0D0D;font-weight:700;flex-shrink:0}
.game-row-ai{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}
.game-tag{
    flex-shrink:0;
    font-family:var(--display);font-weight:700;letter-spacing:.16em;font-size:9.5px;
    color:#FBF6E8;background:#0D0D0D;
    padding:3px 7px;border-radius:5px;text-transform:uppercase;
    margin-top:2px;
}
.game-typed{white-space:pre-wrap;overflow-wrap:anywhere}
.game-src{display:none}
.game-caret{
    display:inline-block;width:7px;height:14px;background:#0D0D0D;
    vertical-align:-2px;margin-left:2px;
    animation:happ-blink 1s steps(2) infinite;
}
.game-caret.is-off{display:none}

.game-row-thinking{display:flex;align-items:center;gap:8px;color:#4a4a4a;font-size:12.5px}
.game-spinner{
    width:12px;height:12px;border:2px solid #0D0D0D;border-top-color:transparent;
    border-radius:50%;display:inline-block;flex-shrink:0;
    animation:happ-spin .9s linear infinite;
}
.game-dots{display:inline-flex;gap:2px;margin-left:1px}
.game-dots i{
    width:3px;height:3px;border-radius:50%;background:#4a4a4a;
    animation:happ-dot 1.2s ease-in-out infinite;
}
.game-dots i:nth-child(2){animation-delay:.18s}
.game-dots i:nth-child(3){animation-delay:.36s}

.game-code{
    margin:0;font-family:var(--mono);font-size:12.5px;line-height:1.7;
    color:#0D0D0D;white-space:pre-wrap;overflow-wrap:anywhere;
    background:#F4EDE0;border:1px solid rgba(0,0,0,.12);border-radius:8px;
    padding:10px 13px;flex:1;
}
.game-code .hh{color:#0a8754;font-weight:600}
.game-code .hd{color:#6a6a6a}
.game-line{
    display:inline-block;
    opacity:0;transform:translateX(-4px);
    transition:opacity .25s ease, transform .25s ease;
}
.game-line.is-on{opacity:1;transform:none}

.game-status{
    display:inline-flex;align-items:center;gap:8px;
    align-self:flex-start;margin-top:2px;
    font-family:var(--mono);font-size:11.5px;color:#0D0D0D;
    padding:4px 11px;border-radius:999px;
    background:#EDE4D2;border:1px solid #0D0D0D;
}
.game-status-dot{
    width:7px;height:7px;border-radius:50%;background:#00b46a;
    box-shadow:0 0 6px rgba(0,180,106,.55);
    animation:pulse 1.6s ease-in-out infinite;flex-shrink:0;
}

/* The CTA — large, glowing, pulses to draw the eye to "click here". */
.game-launch{
    display:flex;align-items:center;justify-content:center;gap:12px;
    margin-top:14px;align-self:stretch;
    font-family:var(--display);font-weight:900;letter-spacing:.14em;
    font-size:15px;text-transform:uppercase;
    padding:18px 28px;border-radius:12px;cursor:pointer;
    color:#0D0D0D;background:linear-gradient(180deg,#0aff90,#00d26a);
    border:2px solid #0a8754;
    box-shadow:
        0 12px 32px rgba(0,255,133,.45),
        0 0 0 0 rgba(0,255,133,.6),
        inset 0 1px 0 rgba(255,255,255,.45);
    animation:game-launch-pulse 2.1s ease-in-out infinite;
    transition:transform .15s ease, box-shadow .2s ease;
    position:relative;overflow:hidden;
}
.game-launch::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
    transform:translateX(-120%);
    animation:game-launch-shine 3.2s ease-in-out infinite;
    pointer-events:none;
}
.game-launch:hover{
    transform:translateY(-2px) scale(1.015);
    box-shadow:
        0 18px 44px rgba(0,255,133,.55),
        0 0 0 6px rgba(0,255,133,.22),
        inset 0 1px 0 rgba(255,255,255,.55);
    animation:none;
}
.game-launch:active{transform:translateY(0) scale(.99)}
.game-launch svg{width:22px;height:22px;flex-shrink:0;filter:drop-shadow(0 1px 0 rgba(0,0,0,.18))}
.game-launch-txt{display:inline-block}
.game-launch-meta{
    display:inline-block;font-size:10px;font-weight:700;letter-spacing:.18em;
    color:#0a3a1f;opacity:.7;margin-left:auto;
    font-family:var(--mono);text-transform:uppercase;
}
@keyframes game-launch-pulse{
    0%,100%{box-shadow:
        0 12px 32px rgba(0,255,133,.45),
        0 0 0 0 rgba(0,255,133,.55),
        inset 0 1px 0 rgba(255,255,255,.45);}
    50%{box-shadow:
        0 14px 36px rgba(0,255,133,.55),
        0 0 0 10px rgba(0,255,133,0),
        inset 0 1px 0 rgba(255,255,255,.55);}
}
@keyframes game-launch-shine{
    0%,40%{transform:translateX(-120%)}
    60%,100%{transform:translateX(120%)}
}

/* Stage choreography — JS adds .is-on. While invisible the element still
   reserves layout so neighbours don't reflow when it appears. */
.game-stage-el{
    opacity:0;transform:translateY(6px);
    transition:opacity .28s ease, transform .28s ease;
}
.game-stage-el.is-on{opacity:1;transform:none}
.game-stage-el.is-off{opacity:0;transform:translateY(-2px)}
.game-stage[data-game-active] {} /* marker — applied by JS once running */
.game-stage:not([data-game-active]) .game-stage-el{opacity:1;transform:none}
.game-stage:not([data-game-active]) .game-row-thinking{display:none}
.game-stage:not([data-game-active]) .game-caret{display:none}
/* Launch CTA must always be visible & clickable, even between animation
   cycles — otherwise users tap the section before the typewriter reaches
   the launch step and think the link is dead. */
.game-launch.game-stage-el{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
    .game-launch{animation:none}
    .game-launch::before{animation:none;display:none}
    .game-tbdot,.game-status-dot,.game-spinner,.game-dots i,.game-caret,
    .game-side li.active::after{animation:none !important}
}

@media (max-width:780px){
    .game-toolbar{padding:7px 10px;gap:6px}
    .game-btn{font-size:11px;padding:4px 8px}
    .game-main{grid-template-columns:114px 1fr;min-height:0}
    .game-side h4{margin:0 10px 8px;font-size:11px}
    .game-side li{padding:6px 10px;font-size:11.5px}
    .game-chat{padding:14px 16px;gap:9px}
    .game-launch{font-size:13px;padding:15px 20px;letter-spacing:.1em}
    .game-launch-meta{display:none}
}
@media (max-width:560px){
    .game-main{grid-template-columns:1fr}
    .game-side{display:none}
    .game-toolbar .game-btn:nth-child(n+5){display:none}
    .game-launch svg{width:18px;height:18px}
}

/* ====== Duel: dark vs light side ====== */
/* Both cards always render their respective theme regardless of the page's
   active theme — they use hardcoded colors, not the CSS vars. That way the
   user can compare the two sides at a glance even on a landing page that
   itself happens to be in light mode. */
.duel{padding-bottom:48px}
.duel-update{
    display:inline-flex;align-items:center;gap:10px;
    padding:6px 14px;margin-bottom:16px;
    border:1px solid var(--green);border-radius:999px;
    background:rgba(0,255,133,.08);
    font-size:11px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--green);text-shadow:0 0 10px var(--green-glow);
    max-width:100%;
}
[data-theme="light"] .duel-update{
    border-color:#0a0a0a;color:#0a0a0a;background:rgba(0,0,0,.05);
    text-shadow:none;
}
.duel-update-dot{
    width:8px;height:8px;border-radius:50%;background:var(--green);
    box-shadow:0 0 10px var(--green-glow);
    animation:pulse 1.6s ease-in-out infinite;flex-shrink:0;
}
[data-theme="light"] .duel-update-dot{background:#0a0a0a;box-shadow:none}

.duel-grid{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:22px;align-items:stretch;
    max-width:1080px;margin:0 auto;
}
.duel-grid > *{min-width:0}

.duel-card{
    position:relative;
    border-radius:14px;padding:22px;
    display:flex;flex-direction:column;gap:14px;
    border:1px solid;
    overflow:hidden;
    min-width:0;
}
.duel-card.duel-dark{
    background:linear-gradient(180deg,#070d09,#040706);
    color:#d6ffe1;border-color:rgba(0,255,133,.32);
    box-shadow:0 18px 50px rgba(0,0,0,.55), 0 0 30px rgba(0,255,133,.14);
}
.duel-card.duel-light{
    background:linear-gradient(180deg,#fbf6e8,#f1e9d4);
    color:#0d0d0d;border-color:rgba(0,0,0,.18);
    box-shadow:0 18px 50px rgba(0,0,0,.18);
}

.duel-tag{
    align-self:flex-start;
    font-family:var(--display);font-weight:900;letter-spacing:.22em;
    font-size:11px;padding:5px 11px;border-radius:6px;
    white-space:nowrap;
}
.duel-card.duel-dark .duel-tag{
    background:rgba(0,255,133,.14);color:#00ff85;
    border:1px solid rgba(0,255,133,.32);
    text-shadow:0 0 8px rgba(0,255,133,.45);
}
.duel-card.duel-light .duel-tag{
    background:rgba(0,0,0,.06);color:#0d0d0d;
    border:1px solid rgba(0,0,0,.18);
}

.duel-mock{
    border:1px solid;border-radius:10px;overflow:hidden;
    font-family:var(--mono);font-size:12px;
}
.duel-card.duel-dark .duel-mock{border-color:rgba(0,255,133,.18);background:#06100a}
.duel-card.duel-light .duel-mock{border-color:rgba(0,0,0,.12);background:#fdf9ec}

.duel-bar{
    display:flex;align-items:center;gap:6px;
    padding:8px 11px;border-bottom:1px solid;
}
.duel-card.duel-dark .duel-bar{
    border-bottom-color:rgba(0,255,133,.14);
    background:linear-gradient(180deg,rgba(0,255,133,.06),transparent);
}
.duel-card.duel-light .duel-bar{
    border-bottom-color:rgba(0,0,0,.08);
    background:linear-gradient(180deg,rgba(0,0,0,.04),transparent);
}
.duel-bar i{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.duel-bar .r{background:#ff5f57}.duel-bar .y{background:#febc2e}.duel-bar .g{background:#28c840}
.duel-bar span{
    margin-left:auto;font-size:10px;letter-spacing:.04em;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    min-width:0;
}
.duel-card.duel-dark .duel-bar span{color:#7fb592}
.duel-card.duel-light .duel-bar span{color:#4a4a4a}

.duel-body{
    padding:14px 16px;min-height:118px;
    display:flex;flex-direction:column;gap:6px;
    overflow:hidden;
}
.duel-row{
    overflow-wrap:anywhere;word-break:break-word;
    line-height:1.45;font-size:12px;
}
.duel-row b{font-weight:400}
.duel-card.duel-dark .duel-row b{color:#00ff85;text-shadow:0 0 8px rgba(0,255,133,.4)}
.duel-card.duel-light .duel-row b{color:#0a0a0a;font-weight:700}
.duel-row.dim{opacity:.65;font-style:italic}
.duel-cur{
    display:inline-block;width:7px;height:11px;margin-left:3px;
    vertical-align:-1px;
    animation:blink 1s steps(2) infinite;
}
.duel-card.duel-dark .duel-cur{background:#00ff85;box-shadow:0 0 8px rgba(0,255,133,.6)}
.duel-card.duel-light .duel-cur{background:#0a0a0a}

.duel-card h3{
    margin:6px 0 0;font-family:var(--display);
    letter-spacing:.06em;font-size:18px;line-height:1.25;
    overflow-wrap:break-word;
}
.duel-card p{
    margin:0;font-size:14px;line-height:1.5;opacity:.85;
    overflow-wrap:break-word;
}

.duel-btn{
    align-self:flex-start;margin-top:auto;
    font-family:var(--display);font-weight:700;letter-spacing:.14em;
    font-size:12px;padding:12px 18px;border-radius:8px;cursor:pointer;
    border:1px solid;background:transparent;
    transition:transform .12s ease, box-shadow .15s ease, background-color .15s ease;
    text-transform:uppercase;
    max-width:100%;
}
.duel-card.duel-dark .duel-btn{
    color:#00ff85;border-color:#00ff85;
    box-shadow:0 0 16px rgba(0,255,133,.28);
}
.duel-card.duel-dark .duel-btn:hover{
    background:rgba(0,255,133,.14);transform:translateY(-1px);
    box-shadow:0 0 28px rgba(0,255,133,.45);
}
.duel-card.duel-light .duel-btn{
    color:#0a0a0a;border-color:#0a0a0a;
    background:rgba(255,255,255,.5);
}
.duel-card.duel-light .duel-btn:hover{
    background:#0a0a0a;color:#f4ede0;transform:translateY(-1px);
    box-shadow:0 8px 22px rgba(0,0,0,.22);
}
.duel-card.is-active{outline:2px solid currentColor;outline-offset:3px}

.duel-vs{
    display:flex;align-items:center;justify-content:center;
}
.duel-vs span{
    font-family:var(--display);font-weight:900;letter-spacing:.18em;
    font-size:34px;color:var(--green);
    text-shadow:0 0 22px var(--green-glow);
    padding:12px 6px;
}
[data-theme="light"] .duel-vs span{color:#0a0a0a;text-shadow:none}

@media (max-width:780px){
    .duel-grid{grid-template-columns:1fr;gap:14px}
    .duel-vs{padding:0}
    .duel-vs span{font-size:22px;padding:0}
    .duel-card{padding:18px;gap:12px}
    .duel-card h3{font-size:16px}
    .duel-card p{font-size:13px}
    .duel-body{min-height:96px}
}
@media (max-width:380px){
    .duel-card{padding:16px}
    .duel-update{font-size:10px;letter-spacing:.14em;padding:5px 10px}
    .duel-btn{font-size:11px;padding:11px 14px;letter-spacing:.1em;width:100%;text-align:center;align-self:stretch}
    .duel-tag{font-size:10px;letter-spacing:.16em}
}

/* ====== Simple: never has complex tech been so easy ====== */
/* A short, loud "great simplicity" pitch placed between the hero and the
   dark/light duel. Gradient glow on dark, flat editorial on light. The big
   age range is the punchline — must read instantly even on a 360px phone. */
.simple{
    padding-top:72px;padding-bottom:72px;
    text-align:center;position:relative;overflow:hidden;
}
.simple > *{position:relative;z-index:1}

.simple-kicker{
    display:inline-block;
    font-family:var(--display);font-weight:700;letter-spacing:.28em;
    font-size:11px;padding:7px 16px;border-radius:999px;
    border:1px solid var(--green);color:var(--green);
    background:rgba(0,255,133,.06);
    text-shadow:0 0 12px var(--green-glow);
    margin-bottom:28px;
}
[data-theme="light"] .simple-kicker{
    border-color:#0a0a0a;color:#0a0a0a;background:rgba(0,0,0,.05);
    text-shadow:none;
}

.simple-title{
    font-family:var(--display);font-weight:900;letter-spacing:.02em;
    font-size:clamp(32px,5.4vw,64px);line-height:1.05;
    margin:0 auto 24px;max-width:980px;color:var(--ink);
    text-shadow:0 0 22px rgba(0,255,133,.18);
}
[data-theme="light"] .simple-title{text-shadow:none}
.simple-title-1,.simple-title-2{display:block}
.simple-title-2{display:flex;flex-wrap:wrap;justify-content:center;gap:.32em}
.simple-title-2 em{
    font-style:normal;
    background:linear-gradient(180deg,#0aff90,#00b85b);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    /* text-shadow is inherited from .simple-title; on color:transparent
       glyphs it renders as a ghost halo of invisible letters. Suppress and
       use drop-shadow on the actual painted gradient instead. */
    text-shadow:none;
    filter:drop-shadow(0 0 22px rgba(0,255,133,.4));
}
[data-theme="light"] .simple-title-2 em{
    background:none;color:#0a0a0a;text-shadow:none;
    border-bottom:4px solid #0a0a0a;padding-bottom:1px;
}

.simple-lead{
    margin:0 auto 32px;max-width:760px;
    font-size:clamp(15px,1.6vw,18px);line-height:1.55;color:var(--ink-dim);
}

.simple-pills{
    list-style:none;margin:0 auto 56px;padding:0;
    display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
    max-width:840px;
}
.simple-pills li{
    font-family:var(--mono);font-size:12px;letter-spacing:.04em;
    padding:8px 14px;border-radius:999px;
    border:1px solid var(--line);background:var(--green-soft);color:var(--ink);
}
[data-theme="light"] .simple-pills li{background:rgba(0,0,0,.04)}

.simple-age{
    display:flex;flex-direction:column;align-items:center;gap:10px;
    max-width:880px;margin:0 auto;padding:36px 28px;
    border:1px solid var(--green);border-radius:18px;
    background:linear-gradient(180deg,rgba(0,255,133,.08),rgba(0,255,133,.02));
    box-shadow:0 0 60px rgba(0,255,133,.18), inset 0 0 0 1px rgba(0,255,133,.06);
}
[data-theme="light"] .simple-age{
    border-color:#0a0a0a;background:rgba(255,255,255,.55);
    box-shadow:0 12px 40px rgba(0,0,0,.10);
}
.simple-age-label{
    font-family:var(--display);font-weight:700;letter-spacing:.28em;
    font-size:12px;color:var(--green);text-shadow:0 0 12px var(--green-glow);
}
[data-theme="light"] .simple-age-label{color:#0a0a0a;text-shadow:none}
.simple-age-range{
    display:flex;align-items:baseline;justify-content:center;
    gap:clamp(12px,3vw,28px);
    line-height:.9;margin:6px 0 4px;
    font-family:var(--display);font-weight:900;
}
.simple-age-num{
    font-size:clamp(80px,16vw,180px);
    background:linear-gradient(180deg,#e8ffe8,#0aff90 55%,#00b85b);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    /* drop-shadow on the painted gradient — text-shadow on color:transparent
       glyphs renders as ghost letters (visible halo, invisible body). */
    filter:drop-shadow(0 0 30px rgba(0,255,133,.4));
    letter-spacing:-.02em;
}
[data-theme="light"] .simple-age-num{
    background:none;color:#0a0a0a;filter:none;
}
.simple-age-dash{
    font-size:clamp(56px,10vw,120px);
    color:var(--green);opacity:.85;
    text-shadow:0 0 24px var(--green-glow);
}
[data-theme="light"] .simple-age-dash{color:#0a0a0a;text-shadow:none;opacity:1}
.simple-age-unit{
    font-family:var(--display);font-weight:900;letter-spacing:.34em;
    font-size:clamp(16px,2vw,22px);color:var(--ink);
}
.simple-age-foot{
    margin-top:6px;
    font-family:var(--mono);font-size:13px;color:var(--ink-dim);
    letter-spacing:.02em;
}

@media (max-width:560px){
    .simple{padding:56px 22px}
    .simple-kicker{font-size:10px;letter-spacing:.22em;padding:6px 12px}
    .simple-pills{gap:8px}
    .simple-pills li{font-size:11px;padding:7px 12px}
    .simple-age{padding:26px 18px}
    .simple-age-label{font-size:11px;letter-spacing:.22em}
    .simple-age-foot{font-size:12px}
}

/* ====== Safety: encrypted tunnel + stable IP ====== */
/* Sits between #duel and #features. The mascot is the eye-catch — a smiling
   padlock guardian rendered in currentColor so it tints with the active theme.
   On dark, it gets the neon-green glow; on light, it goes flat black. */
.safety{
    padding-top:72px;padding-bottom:56px;
    text-align:center;position:relative;overflow:hidden;
}
.safety-bg{position:absolute;inset:0;pointer-events:none;z-index:0}
/* Decorative section halos disabled — see RULE in styles.css header. The
   matrix rain canvas behind sections must show through cleanly; large
   blurred radial gradients painted over it create a visible green
   "envelope" around sections and make the rain look boxed-in. Keep the
   .safety-glow-a/-b rules so any hover / future use still has them, but
   never render them at the section background level. */
.safety-glow,.safety-glow-a,.safety-glow-b{display:none !important}
.safety-glow-a{
    width:520px;height:520px;left:-140px;top:-100px;
    background:radial-gradient(circle,rgba(0,255,133,.55),transparent 60%);
}
.safety-glow-b{
    width:460px;height:460px;right:-120px;bottom:-140px;
    background:radial-gradient(circle,rgba(0,212,255,.4),transparent 60%);
}
[data-theme="light"] .safety-glow-a,
[data-theme="light"] .safety-glow-b{display:none}
.safety > *:not(.safety-bg){position:relative;z-index:1}

.safety-kicker{
    display:inline-block;
    font-family:var(--display);font-weight:700;letter-spacing:.28em;
    font-size:11px;padding:7px 16px;border-radius:999px;
    border:1px solid var(--green);color:var(--green);
    background:rgba(0,255,133,.06);
    text-shadow:0 0 12px var(--green-glow);
    margin-bottom:24px;
}
[data-theme="light"] .safety-kicker{
    border-color:#0a0a0a;color:#0a0a0a;background:rgba(0,0,0,.05);
    text-shadow:none;
}
.safety-title{
    font-family:var(--display);font-weight:900;letter-spacing:.02em;
    font-size:clamp(30px,4.6vw,52px);line-height:1.05;
    margin:0 auto 18px;max-width:880px;color:var(--ink);
    text-shadow:0 0 22px rgba(0,255,133,.18);
}
.safety-title .prompt{
    color:var(--green);margin-right:14px;
    text-shadow:0 0 12px var(--green-glow);
}
[data-theme="light"] .safety-title{text-shadow:none}
.safety-lead{
    margin:0 auto 40px;max-width:760px;
    font-size:clamp(15px,1.6vw,18px);line-height:1.55;color:var(--ink-dim);
}

.safety-grid{
    display:grid;grid-template-columns:280px 1fr;gap:48px;align-items:center;
    max-width:1080px;margin:0 auto 36px;padding:0 12px;
    text-align:left;
}
.safety-grid > *{min-width:0}

/* ====== Cyber-vault padlock — amber neon =========================
   Replaces the previous green smiley mascot. Palette is keyed to the
   same amber/gold as `.card-secure` (#FFAE00 / #FF7E00 / #FFE082) so
   the section reads as «security» without the rest of the page's
   green. Composed of: rotating data ring, counter-rotating tick ring,
   pulsing radial halo, hex frame, lock body with scanline + status
   dots, animated shackle (open/close) and orbiting binary stream.
   All CSS-only animations on a single 6s shackle timeline. */
.safety-mascot{
    position:relative;
    display:flex;justify-content:center;align-items:center;
    filter:drop-shadow(0 0 18px rgba(255,174,0,.55))
           drop-shadow(0 0 4px rgba(255,224,130,.35));
    animation:safetyFloat 5.6s ease-in-out infinite;
}
[data-theme="light"] .safety-mascot{filter:drop-shadow(0 6px 12px rgba(0,0,0,.18))}
.safety-mascot svg{position:relative;z-index:1;width:100%;max-width:260px;height:auto}

/* Outer dashed ring rotates clockwise; inner tick ring counter-rotates. */
.sm-ring{transform-box:fill-box;transform-origin:120px 120px;animation:smSpin 18s linear infinite}
.sm-ticks{transform-box:fill-box;transform-origin:120px 120px;animation:smSpinRev 26s linear infinite}

/* Hex frame breathes; inner hex glow pulses on a slower beat. */
.sm-hex{transform-box:fill-box;transform-origin:120px 120px;animation:smHexPulse 4.4s ease-in-out infinite}
.sm-hex-inner{transform-box:fill-box;transform-origin:120px 120px;animation:smHexPulse 4.4s ease-in-out infinite reverse}

/* Pulse halo behind the lock body. */
.sm-pulse{transform-box:fill-box;transform-origin:120px 146px;animation:smPulse 3.2s ease-in-out infinite}

/* Binary stream characters fade in/out staggered to suggest orbit. */
.sm-bit{opacity:0;animation:smBit 3.6s ease-in-out infinite}
.sm-bit-1{animation-delay:0s}
.sm-bit-2{animation-delay:.9s}
.sm-bit-3{animation-delay:1.8s}
.sm-bit-4{animation-delay:2.7s}

/* Scanline sweep inside the inner panel — y goes from top (128) to bottom (190) */
.sm-scan{animation:smScan 3s ease-in-out infinite}

/* Status dot blinks like a live link indicator. */
.sm-dot-blink{animation:smDotBlink 1.2s ease-in-out infinite}

/* Body breathes slightly with the pulse so the whole vault feels alive. */
.sm-body{transform-box:fill-box;transform-origin:120px 161px;animation:smBodyBreath 4s ease-in-out infinite}
.sm-body-inner{transform-box:fill-box;transform-origin:120px 161px;animation:smBodyBreath 4s ease-in-out infinite}

/* SECURE micro-tag fades in just after the lock re-engages. */
.sm-tag{animation:smTag 6s ease-in-out infinite}

/* Shackle: 6s timeline. Stays closed most of the time, briefly pops up
   (UNLOCKED), snaps back with a small rebound (CLICK), holds. */
.sm-shackle{
    transform-box:fill-box;transform-origin:center bottom;
    animation:smShackle 6s cubic-bezier(.5,.05,.5,1) infinite;
}
.sm-keyhole{
    transform-box:fill-box;transform-origin:120px 152px;
    animation:smKeyhole 6s cubic-bezier(.5,.05,.5,1) infinite;
}

@keyframes safetyFloat{
    0%,100%{transform:translateY(0)}
    50%   {transform:translateY(-6px)}
}
@keyframes smSpin{
    from{transform:rotate(0deg)}
    to  {transform:rotate(360deg)}
}
@keyframes smSpinRev{
    from{transform:rotate(0deg)}
    to  {transform:rotate(-360deg)}
}
@keyframes smHexPulse{
    0%,100%{transform:scale(1);    opacity:.85}
    50%   {transform:scale(1.025); opacity:1}
}
@keyframes smPulse{
    0%,100%{transform:scale(.92);opacity:.6}
    50%   {transform:scale(1.10);opacity:1}
}
@keyframes smBit{
    0%,80%,100%{opacity:0;transform:translateY(0)}
    20%,55%   {opacity:.95}
    70%       {opacity:.4;transform:translateY(-3px)}
}
@keyframes smScan{
    0%,100%{transform:translateY(0);  opacity:.0}
    10%   {opacity:.95}
    50%   {transform:translateY(60px);opacity:.95}
    90%   {opacity:.95}
    95%   {opacity:0}
}
@keyframes smDotBlink{
    0%,55%,100%{opacity:1;  transform:scale(1)}
    60%,95%   {opacity:.25; transform:scale(.7)}
}
@keyframes smBodyBreath{
    0%,100%{transform:scale(1)}
    50%   {transform:scale(1.012)}
}
@keyframes smTag{
    0%,82%,100%{opacity:0}
    88%,96%   {opacity:.95}
}
@keyframes smShackle{
    0%,55%,100%{transform:translateY(0)}
    65%       {transform:translateY(-12px)}   /* UNLOCK pop */
    78%       {transform:translateY(-12px)}
    83%       {transform:translateY(0)}
    85%       {transform:translateY(-3px)}    /* CLICK rebound */
    87%       {transform:translateY(0)}
}
@keyframes smKeyhole{
    /* Subtle rotation in sync with the shackle pop, so the lock visibly
       «turns» open then closed. */
    0%,55%,100%{transform:rotate(0deg)}
    65%,78%   {transform:rotate(-90deg)}
    83%       {transform:rotate(0deg)}
}
@media (prefers-reduced-motion:reduce){
    .safety-mascot,
    .sm-ring,.sm-ticks,.sm-hex,.sm-hex-inner,.sm-pulse,
    .sm-bit,.sm-scan,.sm-dot-blink,.sm-body,.sm-body-inner,
    .sm-tag,.sm-shackle,.sm-keyhole{animation:none}
}

.safety-pillars{
    list-style:none;margin:0;padding:0;
    display:grid;grid-template-columns:1fr;gap:14px;
}
.safety-pillar{
    display:grid;
    grid-template-columns:48px 1fr;
    grid-template-rows:auto auto;
    column-gap:16px;row-gap:4px;
    align-items:start;
    padding:18px 20px;border-radius:14px;
    border:1px solid var(--line);background:var(--green-soft);
    transition:transform .12s ease, border-color .15s ease, box-shadow .15s ease;
}
/* Three direct children (icon + h3 + p) — without explicit placement the
   <p> drops into row 2, column 1 (the 48-px icon track) and wraps one
   word per line. Span the icon across both rows and pin h3/p to the
   text column so the description always flows alongside the icon. */
.safety-pillar > .safety-pillar-icon{ grid-row:1 / span 2; align-self:start }
.safety-pillar > h3,
.safety-pillar > p{ grid-column:2; min-width:0 }
.safety-pillar:hover{
    transform:translateY(-2px);border-color:var(--green);
    box-shadow:0 12px 32px rgba(0,255,133,.14);
}
[data-theme="light"] .safety-pillar{background:rgba(0,0,0,.04)}
[data-theme="light"] .safety-pillar:hover{
    border-color:#0a0a0a;box-shadow:0 10px 26px rgba(0,0,0,.10);
}
/* Pillar icons key to the amber/gold mascot palette so all of the
   safety section reads as one fortress, not two — green-on-cream
   chips next to a gold lock looked mismatched. */
.safety-pillar-icon{
    display:flex;align-items:center;justify-content:center;
    width:48px;height:48px;border-radius:12px;
    border:1px solid rgba(255,174,0,.42);color:#FFAE00;
    background:linear-gradient(180deg,rgba(255,215,0,.18),rgba(255,138,0,.04));
    box-shadow:0 0 18px rgba(255,174,0,.22);
}
[data-theme="light"] .safety-pillar-icon{
    border-color:#0a0a0a;color:#0a0a0a;background:rgba(255,255,255,.7);
    box-shadow:none;
}
.safety-pillar-icon svg{width:26px;height:26px;overflow:visible}
.safety-pillar:hover .safety-pillar-icon{
    border-color:#FFAE00;
    box-shadow:0 0 22px rgba(255,174,0,.34);
}

/* Inner pillar SVG accents — slow orbit, bolt flicker, IP-dot blink. */
.sp-orbit{transform-box:fill-box;transform-origin:center;animation:spOrbit 10s linear infinite}
.sp-bolt{transform-box:fill-box;transform-origin:center;animation:spBolt 2.4s ease-in-out infinite}
.sp-blink{animation:spBlink 1.6s ease-in-out infinite}
@keyframes spOrbit{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes spBolt{
    0%,55%,100%{opacity:.85;transform:scale(1)}
    60%,70%   {opacity:.35;transform:scale(.9)}
    65%       {opacity:1;  transform:scale(1.05)}
}
@keyframes spBlink{
    0%,55%,100%{opacity:1}
    60%,95%   {opacity:.18}
}
@media (prefers-reduced-motion:reduce){
    .sp-orbit,.sp-bolt,.sp-blink{animation:none}
}
.safety-pillar h3{
    margin:0 0 6px;
    font-family:var(--display);font-weight:700;letter-spacing:.02em;
    font-size:17px;color:var(--ink);
}
.safety-pillar p{
    margin:0;font-size:14px;line-height:1.5;color:var(--ink-dim);
}

.safety-foot{
    margin:0 auto;max-width:720px;padding:0 20px;
    font-family:var(--mono);font-size:13px;line-height:1.55;
    color:var(--ink-dim);opacity:.85;
}

@media (max-width:880px){
    .safety-grid{grid-template-columns:1fr;gap:28px;text-align:center}
    .safety-mascot svg{max-width:200px}
    .safety-pillar{text-align:left}
}
@media (max-width:560px){
    .safety{padding:56px 22px 48px}
    .safety-kicker{font-size:10px;letter-spacing:.22em;padding:6px 12px}
    .safety-pillar{padding:14px 14px;gap:12px;grid-template-columns:42px 1fr}
    .safety-pillar-icon{width:42px;height:42px;border-radius:10px}
    .safety-pillar-icon svg{width:21px;height:21px}
    .safety-pillar h3{font-size:15px}
    .safety-pillar p{font-size:13px}
    .safety-foot{font-size:12px}
}

/* ====== Showcase ====== */
.show-grid{display:grid;grid-template-columns:1fr;gap:28px;align-items:stretch;max-width:980px;margin:0 auto}
.show-grid > *{min-width:0}

.mock-window{
    border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
    background:linear-gradient(180deg,rgba(6,12,9,.95),rgba(4,8,6,.95));
    box-shadow:0 30px 80px rgba(0,0,0,.7), 0 0 80px rgba(0,255,133,.12);
}
.mock-bar{
    display:flex;align-items:center;gap:8px;padding:10px 14px;
    border-bottom:1px solid var(--line-soft);
    background:linear-gradient(180deg, rgba(0,30,80,.55), rgba(0,8,20,.85));
    color:var(--ink-dim);
}
.mock-bar i{width:11px;height:11px;border-radius:50%;flex-shrink:0}
.mock-bar .r{background:#ff5f57}.mock-bar .y{background:#febc2e}.mock-bar .g{background:#28c840}
.mock-bar-icon{font-size:12px;margin-left:6px;filter:drop-shadow(0 0 6px rgba(0,255,133,.55))}
.mock-bar-title{flex:1;color:#dcdcdc;font-size:12px;font-family:var(--mono);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;letter-spacing:.04em}
.mock-bar-pill{
    display:inline-flex;align-items:center;gap:5px;flex-shrink:0;
    font-family:var(--display);font-weight:700;letter-spacing:.16em;
    font-size:9.5px;color:#ff4d4d;
    padding:3px 8px;border-radius:999px;
    border:1px solid rgba(255,77,77,.55);
    background:rgba(255,77,77,.12);
}
.mock-bar-dot{
    width:6px;height:6px;border-radius:50%;background:#ff4d4d;
    box-shadow:0 0 6px rgba(255,77,77,.7);
    animation:pulse 1.4s ease-in-out infinite;
}
[data-theme="light"] .mock-bar{
    background:linear-gradient(180deg, rgba(0,30,80,.65), rgba(0,8,20,.92));
}
[data-theme="light"] .mock-bar-title,
[data-theme="light"] .mock-bar-icon{color:#dcdcdc}
[data-theme="light"] .mock-bar-pill{
    color:#ff4d4d;border-color:rgba(255,77,77,.55);background:rgba(255,77,77,.18);
}

/* Photo attachment card that slides into the chat after AI streaming.
   Acts like a real "open this image" affordance — hover-glow + click ripple
   so it feels native to the app screenshot. */
.mock-shot-card{
    display:grid;grid-template-columns:96px 1fr auto;gap:10px;align-items:center;
    margin-top:6px;padding:8px;
    background:rgba(0,0,0,.45);
    border:1px solid var(--line);border-radius:10px;
    cursor:pointer;
    text-align:left;
    color:inherit;font-family:var(--mono);
    opacity:0;transform:translateY(8px);
    transition:opacity .35s ease, transform .35s ease, border-color .15s ease, box-shadow .2s ease;
    width:100%;max-width:520px;
}
.mock-shot-card.is-on{opacity:1;transform:none}
.mock-shot-card:hover{
    border-color:var(--green);
    box-shadow:0 8px 24px rgba(0,0,0,.45), 0 0 0 3px rgba(0,255,133,.16);
}
.mock-shot-thumb{
    display:block;width:96px;height:64px;border-radius:6px;overflow:hidden;
    background:#040814;
    box-shadow:inset 0 0 0 1px rgba(0,255,133,.18);
    flex-shrink:0;
}
.mock-shot-thumb svg{display:block;width:100%;height:100%}
.mock-shot-meta{display:flex;flex-direction:column;gap:2px;min-width:0;line-height:1.3}
.mock-shot-meta b{font-size:12.5px;color:var(--ink);font-weight:600;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mock-shot-meta span{font-size:11px;color:var(--ink-dim);letter-spacing:.02em;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mock-shot-cta{
    display:inline-flex;align-items:center;gap:5px;
    font-family:var(--display);font-weight:700;letter-spacing:.1em;
    font-size:10.5px;text-transform:uppercase;
    padding:7px 11px;border-radius:7px;
    background:var(--green);color:#0a0a0a;
    border:1px solid var(--green);
    box-shadow:0 0 14px rgba(0,255,133,.32);
    flex-shrink:0;
}
.mock-shot-cta svg{width:12px;height:12px;flex-shrink:0}
[data-theme="light"] .mock-shot-card{background:rgba(255,255,255,.55);border-color:rgba(0,0,0,.18)}
[data-theme="light"] .mock-shot-card:hover{
    border-color:#0a0a0a;box-shadow:0 6px 18px rgba(0,0,0,.12), 0 0 0 3px rgba(0,0,0,.06);
}
[data-theme="light"] .mock-shot-cta{
    background:#0a0a0a;color:#FBF6E8;border-color:#0a0a0a;box-shadow:none;
}
@media (max-width:560px){
    .mock-shot-card{grid-template-columns:72px 1fr}
    .mock-shot-thumb{width:72px;height:48px}
    .mock-shot-cta{grid-column:1 / -1;justify-content:center;margin-top:2px}
}

.mock-body{
    display:grid;grid-template-columns:160px 1fr 180px;min-height:340px;
}
@media (max-width:680px){
    .mock-body{grid-template-columns:1fr}
    .mock-side,.mock-tele{display:none}
}
.mock-side,.mock-tele{padding:14px;border-right:1px solid var(--line-soft);background:rgba(0,0,0,.25)}
.mock-tele{border-right:none;border-left:1px solid var(--line-soft)}
.mock-side h4,.mock-tele h4{
    margin:0 0 12px;font-family:var(--display);font-size:11px;letter-spacing:.18em;
    color:var(--ink-dim);text-transform:uppercase
}
.mock-side ul{list-style:none;padding:0;margin:0;font-size:13px}
.mock-side li{padding:6px 8px;border-radius:6px;color:var(--ink-dim);cursor:default}
.mock-side li.active{background:var(--green-soft);color:var(--green);text-shadow:0 0 10px var(--green-glow)}
.mock-side li.dim{color:var(--ink-dim);opacity:.6;margin-top:8px;border-top:1px dashed var(--line-soft);padding-top:8px}
.mock-tele div{display:flex;justify-content:space-between;font-size:12px;padding:5px 0;border-bottom:1px dashed var(--line-soft)}
.mock-tele span{color:var(--ink-dim)}
.mock-tele b{color:var(--ink)}
.mock-tele b.g{color:var(--green);text-shadow:0 0 8px var(--green-glow)}
.mock-tele .bar{height:5px;background:rgba(0,255,133,.1);border-radius:3px;margin-top:14px;overflow:hidden}
.mock-tele .bar i{display:block;height:100%;background:linear-gradient(90deg,#00ff85,#00d4ff);box-shadow:0 0 10px var(--green-glow);width:0%}

.mock-chat{padding:16px 18px;display:flex;flex-direction:column;gap:10px;font-size:13px;overflow:hidden}
.msg{padding:8px 12px;border-radius:8px;max-width:90%}
.msg.user{align-self:flex-end;background:rgba(0,255,133,.08);color:var(--green);border:1px solid var(--line)}
.msg.ai{background:rgba(255,255,255,.03);color:#d3ffe1;border:1px solid var(--line-soft);white-space:pre-wrap;min-height:200px}

.show-shot{position:relative;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:rgba(0,0,0,.3);height:100%;display:flex}
.show-shot img{width:100%;height:100%;display:block;object-fit:cover;object-position:top;filter:hue-rotate(-10deg) saturate(1.05)}
@media (max-width:980px){.show-shot{height:auto}.show-shot img{height:auto;object-fit:contain}}
.shot-cap{
    position:absolute;left:14px;bottom:14px;font-size:12px;color:var(--green);
    background:rgba(0,0,0,.7);padding:6px 10px;border:1px solid var(--line);border-radius:6px;
    text-shadow:0 0 8px var(--green-glow)
}

/* ====== Download ====== */
.dl-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
}
@media (max-width:900px){.dl-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.dl-grid{grid-template-columns:1fr}}

.dl-card{
    display:flex;flex-direction:column;align-items:flex-start;gap:8px;
    padding:22px;border-radius:var(--radius);
    background:var(--card-2);border:1px solid var(--line-soft);
    transition:transform .15s ease, border-color .15s ease, box-shadow .2s ease;
    position:relative;overflow:hidden;color:var(--ink);
}
.dl-card::after{
    content:"";position:absolute;inset:0;border-radius:var(--radius);
    background:radial-gradient(circle at top right, rgba(0,255,133,.12), transparent 60%);
    opacity:0;transition:opacity .2s ease;pointer-events:none;
}
.dl-card:hover{transform:translateY(-3px);border-color:var(--green);box-shadow:0 14px 40px rgba(0,255,133,.18)}
.dl-card:hover::after{opacity:1}
.dl-os{
    width:54px;height:54px;border-radius:12px;display:grid;place-items:center;
    background:linear-gradient(180deg,rgba(0,255,133,.16),rgba(0,255,133,.04));
    border:1px solid var(--line);color:var(--green);
    box-shadow:0 0 14px rgba(0,255,133,.22);
}
.dl-os svg{width:30px;height:30px}

/* Per-platform colourful tiles — each download card glows in the brand
   palette of its OS instead of the default green. SVG fills are baked
   into the markup, so colour stays bright in light theme too. */
.dl-os--win{
    background:linear-gradient(135deg,rgba(0,164,239,.22),rgba(242,80,34,.10) 55%,rgba(255,185,0,.12));
    border-color:rgba(0,164,239,.40);
    box-shadow:0 0 18px rgba(0,164,239,.32);
}
.dl-os--mac{
    background:linear-gradient(180deg,rgba(245,245,247,.22),rgba(158,163,173,.06));
    border-color:rgba(220,220,220,.45);
    box-shadow:0 0 18px rgba(220,220,220,.22);
}
.dl-os--linux{
    background:linear-gradient(180deg,rgba(255,210,63,.24),rgba(244,156,0,.06));
    border-color:rgba(255,194,36,.45);
    box-shadow:0 0 18px rgba(255,194,36,.32);
}
.dl-os--android{
    background:linear-gradient(180deg,rgba(61,220,132,.26),rgba(61,220,132,.06));
    border-color:rgba(61,220,132,.45);
    box-shadow:0 0 18px rgba(61,220,132,.34);
}
.dl-os--ios{
    background:linear-gradient(135deg,rgba(255,107,157,.22),rgba(123,97,255,.10));
    border-color:rgba(255,107,157,.40);
    box-shadow:0 0 18px rgba(255,107,157,.28);
}
.dl-os--portable{
    background:linear-gradient(180deg,rgba(0,229,255,.22),rgba(0,176,255,.06));
    border-color:rgba(0,176,255,.45);
    box-shadow:0 0 18px rgba(0,176,255,.32);
}
.dl-card h3{margin:6px 0 0;font-family:var(--display);letter-spacing:.08em;color:var(--ink)}
.dl-card span{color:var(--ink-dim);font-size:12px;letter-spacing:.05em}
.dl-card b{color:var(--green);font-size:13px;letter-spacing:.1em;margin-top:8px;text-shadow:0 0 8px var(--green-glow)}
.dl-source{cursor:default}
.dl-source b a{color:var(--green)}
.dl-foot{margin-top:24px;color:var(--ink-dim);font-size:13px}

/* ====== FAQ ====== */
.faq-list{display:flex;flex-direction:column;gap:10px;max-width:820px}
details{
    border:1px solid var(--line-soft);border-radius:10px;background:var(--card);
    padding:14px 18px;transition:border-color .15s ease;
}
details[open]{border-color:var(--green)}
summary{cursor:pointer;font-family:var(--display);letter-spacing:.06em;font-size:15px;color:var(--ink);list-style:none}
summary::before{content:"▸ ";color:var(--green);transition:transform .15s ease;display:inline-block}
details[open] summary::before{transform:rotate(90deg)}
details p{margin:10px 0 0;color:var(--ink-dim);font-size:14px}

/* ====== Footer ====== */
.foot{
    margin-top:60px;padding:60px 28px 28px;border-top:1px solid var(--line);
    background:linear-gradient(180deg,transparent, rgba(0,255,133,.04));
    max-width:1200px;margin-left:auto;margin-right:auto;
}
.foot-cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:24px;margin-bottom:30px}
@media (max-width:780px){.foot-cols{grid-template-columns:1fr 1fr}}
.foot-cols h5{font-family:var(--display);letter-spacing:.14em;font-size:12px;color:var(--ink-dim);margin:0 0 10px;text-transform:uppercase}
.foot-cols a{display:block;font-size:13px;color:var(--ink);margin-bottom:6px}
.foot-cols a:hover{color:var(--green)}
.foot-cols p{color:var(--ink-dim);font-size:13px;margin:8px 0 0;max-width:340px}
.foot-line{
    display:flex;justify-content:space-between;align-items:center;
    border-top:1px dashed var(--line-soft);padding-top:18px;
    color:var(--ink-dim);font-size:12px;letter-spacing:.06em
}
.foot-prompt .cursor{display:inline-block;width:8px;height:14px;background:var(--green);vertical-align:-2px;animation:blink 1s steps(2) infinite}

/* ===== Responsive tweaks ===== */
@media (max-width:520px){
    section{padding:64px 18px}
    .hero{padding-top:36px}
    .hero-stats{gap:24px}
}

/* ============================================================
   Mobile-first overhaul: viewport quirks, touch, safe-area,
   hamburger nav, hover-only-on-real-hover, reduced motion.
   ============================================================ */

/* iOS / dynamic-toolbar viewport: use dvh where supported */
@supports (height: 100dvh) {
    #rain { height: 100dvh; }
    .scanline, .vignette { height: 100dvh; }
}

/* Safe-area insets for iPhone notch / Dynamic Island / Android cutouts */
.topbar{
    padding-top:max(14px, env(safe-area-inset-top));
    padding-left:max(28px, env(safe-area-inset-left));
    padding-right:max(28px, env(safe-area-inset-right));
}
.foot{
    padding-bottom:max(28px, env(safe-area-inset-bottom));
    padding-left:max(28px, env(safe-area-inset-left));
    padding-right:max(28px, env(safe-area-inset-right));
}
section{
    padding-left:max(28px, env(safe-area-inset-left));
    padding-right:max(28px, env(safe-area-inset-right));
}

/* All hover effects only on devices that truly hover (mouse/trackpad).
   On touch this prevents stuck-hover after tap. */
@media (hover: none) {
    .nav a:hover,.ghost:hover,.btn-ghost:hover,
    .card:hover,.dl-card:hover,
    .topbar a:hover { color:inherit; border-color:inherit; box-shadow:none; transform:none; background-color:inherit }
    .card:hover{transform:none}
    .dl-card:hover{transform:none}
    .btn-primary:hover{transform:none}
    .card:active,.dl-card:active{transform:scale(.99)}
}

/* Touch-target sizing: at least 44×44 logical px on tap surfaces */
@media (pointer: coarse) {
    .btn{min-height:44px}
    .ghost{min-height:40px}
    .nav a{padding:14px 0}
    details summary{padding:6px 0}
    .dl-card{min-height:140px}
}

/* ===== Hamburger button ===== */
.hamburger{
    display:none;
    width:40px;height:40px;border-radius:8px;
    background:transparent;border:1px solid var(--line);color:var(--green);
    align-items:center;justify-content:center;flex-direction:column;gap:5px;
    cursor:pointer;padding:0;
}
.hamburger span{
    display:block;width:18px;height:2px;background:var(--green);border-radius:2px;
    transition:transform .25s ease, opacity .2s ease;
    box-shadow:0 0 6px var(--green-glow);
}
body.menu-open .hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .hamburger span:nth-child(2){opacity:0}
body.menu-open .hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Stop body scroll while overlay nav is open */
body.menu-open{overflow:hidden}

/* ===== Tablet & phone breakpoints ===== */

/* tablet portrait: hide nav, show hamburger */
@media (max-width:880px){
    .topbar{gap:10px;padding:12px 14px}
    .top-actions{gap:6px;margin-left:auto}
    /* Both topbar CTA pills are hidden on mobile — the row already
     * carries brand + rain + theme + lang + hamburger; squeezing in
     * another pill on a 360 px viewport pushes the hamburger off-screen
     * and the user loses the ONLY way to open the nav menu. The entry
     * to /app/ lives in the hero CTA («ВОЙТИ В МАТРИЦУ») and inside
     * the hamburger menu (`.nav-cta-mobile`), both guaranteed visible. */
    .cta-top{display:none}
    .hamburger{display:inline-flex;flex-shrink:0}
    .nav{
        position:fixed;inset:0;z-index:60;
        flex-direction:column;align-items:stretch;justify-content:center;gap:0;
        margin:0;padding:max(72px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
        background:rgba(4,7,6,.95);backdrop-filter:blur(18px) saturate(140%);
        -webkit-backdrop-filter:blur(18px) saturate(140%);
        opacity:0;visibility:hidden;
        transition:opacity .25s ease, visibility 0s .25s;
        border-bottom:1px solid var(--line);
    }
    body.menu-open .nav{opacity:1;visibility:visible;transition:opacity .25s ease}
    .nav a{
        font-size:20px;letter-spacing:.12em;color:var(--ink);
        padding:18px 8px;border-bottom:1px dashed var(--line-soft);
        text-align:center;
    }
    .nav a:last-child{border-bottom:none}
    /* Primary CTA inside the mobile hamburger menu — paints as the green
     * pill (matches the hidden topbar button) so the entry to /app/ reads
     * as the action, not just another section anchor. */
    .nav .nav-cta-mobile{
        margin:24px 0 0;border:1px solid var(--green);border-radius:6px;
        background:rgba(0,255,133,.08);color:var(--green);
        text-shadow:0 0 8px var(--green-glow);
        text-transform:uppercase;letter-spacing:.18em;font-weight:700;
    }
    [data-theme="light"] .nav .nav-cta-mobile{
        border-color:#0a0a0a;color:#0a0a0a;background:rgba(0,0,0,.06);text-shadow:none;
    }
    .nav::before{
        content:"ﾈ console.matrix";
        display:block;font-family:var(--display);letter-spacing:.18em;
        color:var(--green);text-align:center;font-size:13px;
        margin-bottom:24px;text-shadow:0 0 10px var(--green-glow);
    }
}
/* Desktop: this CTA lives in the topbar; hide the duplicate copy that
 * shipped inside the hamburger nav for mobile. */
@media (min-width:881px){
    .nav .nav-cta-mobile{display:none}
}

/* small phones */
@media (max-width:560px){
    .topbar{padding:10px 12px}
    .brand-text{font-size:12px;letter-spacing:.14em}
    .top-actions{gap:6px}
    #langPicker{padding:6px 8px;font-size:11px;max-width:96px}
    .btn-primary{padding:8px 12px;font-size:12px}
    /* Tiny phone (≤560 px): brand + rain + theme + lang + hamburger no
     * longer fits on a 360 px viewport; the hamburger gets pushed off
     * the right edge and the user has no way to open the nav menu. The
     * rain toggle is decorative (rain is on by default; the SPA has its
     * own toggle), so we drop it from the topbar at this width. Theme +
     * lang + hamburger stay — those are the controls users actually
     * reach for on a phone. */
    #rainToggle{display:none}
    section{padding:56px 16px}
    .hero{padding-top:24px;padding-bottom:48px}
    .hero-grid{gap:30px}
    .hero-stats{gap:18px;padding-top:16px}
    .hero-stats b{font-size:22px}
    .hero-cta .btn{flex:1 1 auto;justify-content:center}
    .hero-app{margin:0 -8px}
    .happ-body{padding:14px;min-height:0}

    .section-title{font-size:clamp(24px,7vw,32px)}
    .section-title .prompt{margin-right:10px}
    .section-lead{margin-bottom:30px;font-size:14px}

    .cards{gap:14px}
    .card{padding:18px}
    .card h3{font-size:16px}

    .dl-grid{gap:12px}
    .dl-card{
        padding:16px 18px;
        display:grid;
        grid-template-columns:46px 1fr auto;
        grid-template-rows:auto auto;
        column-gap:14px;row-gap:2px;
        align-items:center;
        position:relative;
        min-height:72px;
    }
    .dl-card .dl-os{grid-row:1 / 3;grid-column:1;width:46px;height:46px;align-self:center}
    .dl-card h3{grid-column:2;grid-row:1;margin:0;font-size:15px;align-self:end}
    .dl-card span{grid-column:2;grid-row:2;font-size:11px;align-self:start}
    .dl-card b{grid-column:3;grid-row:1 / 3;align-self:center;font-size:12px;white-space:nowrap}

    .foot-line{flex-direction:column;gap:10px;text-align:center}
    .foot-cols{gap:18px}
}

/* ultra-narrow (≤360 — old iPhones, foldables shut, etc.) */
@media (max-width:360px){
    .brand-text{display:none}
    .topbar{padding:10px 10px}
    .hero-title{font-size:34px}
    .term{margin:0 -10px}
}

/* ===== Landscape phone — keep hero compact ===== */
@media (max-height:520px) and (orientation: landscape){
    .hero{padding:22px 28px 30px}
    .hero-grid{grid-template-columns:1.1fr 1fr;gap:22px}
    .hero-title{font-size:clamp(28px,5vh,46px);margin:6px 0 10px}
    .hero-lead{font-size:13px;margin-bottom:14px}
    .hero-cta{margin-bottom:10px;gap:8px}
    .hero-stats{padding-top:8px;gap:18px;border-top-style:solid}
    .hero-stats b{font-size:18px}
    .badge{padding:4px 10px;font-size:10px}
    .term-body{min-height:160px;font-size:11px;padding:10px 12px}
    .scroll-hint{display:none}
    section{padding:56px 28px}
    .topbar{padding:8px 14px}
    .brand-text{font-size:11px}
    .scanline{display:none} /* reduce GPU load on landscape phones */
}

/* ===== Showcase: tighter cell on narrow screens ===== */
@media (max-width:680px){
    .show-grid{gap:16px}
    .mock-window{margin:0 -4px}
    .mock-chat{padding:14px;font-size:12px}
    .show-shot img{max-height:64vh;object-fit:cover;object-position:top}
    .shot-cap{font-size:11px;left:10px;bottom:10px;padding:5px 8px}
}

/* between phone & tablet — telemetry panel narrower */
@media (min-width:681px) and (max-width:900px){
    .mock-body{grid-template-columns:140px 1fr 150px}
    .mock-side h4,.mock-tele h4{font-size:10px}
}

/* ===== Reduced motion: respect user preference ===== */
@media (prefers-reduced-motion: reduce){
    *,*::before,*::after{
        animation-duration:.001ms !important;animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
    }
    .glitch::before,.glitch::after{display:none}
    .scanline{display:none}
    .scroll-hint{display:none}
    .badge-dot{animation:none}
    #rain{opacity:.4}
}

/* ===== Allow long compound words to wrap (RU/DE edge cases) ===== */
/* No hyphens:auto — Russian dictionary breaks short titles like
   "Связаться" into "Свя-/заться". Use plain overflow-wrap so we only
   break inside a word as a last resort, without adding a hyphen. */
.hero-title,.section-title,summary{
    overflow-wrap:break-word; hyphens:manual;
}
/* Section labels: keep on one line on desktop (the prompt + word feels
   tighter that way) but allow wrapping on phones, where translations like
   "Часто задаваемые вопросы" or "Возьми красную таблетку" otherwise spill
   past the safe-area padding. The sub-span wraps as a whole; individual
   words stay intact unless they overflow the cell. */
.section-title > span{ white-space:nowrap; }
@media (max-width:640px){
    .section-title > span{ white-space:normal; }
    .section-title{ font-size:clamp(22px,7vw,30px); line-height:1.18; }
    .section-title .prompt{ margin-right:8px; }
}
.card h3,.dl-card h3{ overflow-wrap:break-word;word-break:normal }
.glitch{ max-width:100%; overflow-wrap:break-word; hyphens:manual; }

/* ===== Grid overflow fix: children may otherwise widen tracks ===== */
.hero-grid > *, .show-grid > *, .dl-grid > *, .cards > *,
.foot-cols > *, .mock-body > * {
    min-width:0;
}

/* ===== Tiny screens: tighter title ===== */
@media (max-width:400px){
    .hero-title{font-size:clamp(28px,9vw,38px)}
    .hero-sub-title{font-size:13px;margin-top:10px}
    .hero-lead{font-size:14px}
}
@media (max-width:340px){
    .hero-title{font-size:clamp(24px,9vw,32px);letter-spacing:.04em}
    .hero-stats b{font-size:18px}
    .hero-stats span{font-size:10px}
    .badge{font-size:10px;padding:4px 9px}
}

/* ===== Anti-overflow guard ===== */
html,body{max-width:100vw;overflow-x:hidden}
.term,.mock-window{max-width:100%}
.term-body,.mock-chat{overflow-x:auto;max-width:100%}
img{height:auto}

/* Long unbreakable strings (URLs, model ids like
   `qwen2.5-1.5b-instruct-q4_k_m.gguf`, long emails, RU/DE compounds) used
   to push card / form / footer edges past the viewport on phones. Force
   a soft break inside any prose element. Headings keep their tighter rule
   from the block above so they don't get hyphen-style splits. */
.card p, .dl-card span, details p, details summary,
.ct-field span, .ct-field input, .ct-field textarea,
.foot-cols a, .foot-cols p, .hero-lead, .section-lead,
.shot-cap, .badge, .msg, .term-body,
.duel-card p, .duel-row, .duel-tag, .duel-update,
.card h3, .dl-card h3, .duel-card h3 {
    overflow-wrap:anywhere;
    word-break:break-word;
    min-width:0;
}
/* Section title on tiny screens — anything-anywhere as a last resort, so
   long Russian/German compounds in the localised title can never spill. */
@media (max-width:480px){
    .section-title{ overflow-wrap:anywhere; }
    .hero-title{ overflow-wrap:anywhere; }
}
/* Mailto / long external links in the footer, plus any explicit URL
   inside FAQ answers — let them wrap mid-string on tiny screens. */
.foot-cols a[href^="mailto:"],
.foot-cols a[href^="http"],
details p a {
    overflow-wrap:anywhere;
    word-break:break-all;
}

/* hero-app contains the glow so it doesn't widen ancestors */
.hero-app{position:relative;overflow:hidden;border-radius:14px}

/* ===== Reveal animation (opt-in via .reveal class; safe-by-default) ===== */
.reveal{
    opacity:0;transform:translateY(14px);
    transition:opacity .55s ease, transform .55s ease;
    will-change:opacity, transform;
}
.reveal.is-in{opacity:1;transform:none}
/* Hard fallback: if transition never completes / IO fails / pageshow w/ bfcache, force visible after 2s */
@media (prefers-reduced-motion: reduce){
    .reveal{opacity:1 !important;transform:none !important}
}

/* ===== Contact form ===== */
/* Match the same outer rhythm as #features / #showcase / #download
   (max-width:1200px, padding:96px 28px) so the section title and form
   line up flush-left on wide screens instead of drifting to centre. */
.contact{
    /* inherits section{padding:96px 28px;max-width:1200px;margin:0 auto} */
}
.ct-form{
    display:flex;
    flex-direction:column;
    gap:18px;
    margin-top:20px;
    padding:28px;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--card);
    backdrop-filter:blur(6px);
    box-shadow:0 0 0 1px var(--line-soft) inset, 0 0 60px -20px var(--green-glow);
    /* Keep form readable; flush-left under the section title. */
    max-width:920px;
}
.ct-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}
@media (max-width:640px){
    .ct-row{grid-template-columns:1fr}
}
.ct-field{
    display:flex;
    flex-direction:column;
    gap:6px;
    font-family:'JetBrains Mono','Share Tech Mono',monospace;
}
.ct-field > span{
    color:var(--ink-dim);
    font-size:.82rem;
    letter-spacing:.04em;
    text-transform:uppercase;
}
.ct-field input,
.ct-field textarea{
    background:#040706;
    color:var(--ink);
    border:1px solid var(--line);
    border-radius:8px;
    padding:10px 12px;
    font:inherit;
    outline:none;
    transition:border-color .12s ease, box-shadow .12s ease;
    resize:vertical;
}
.ct-field input:focus,
.ct-field textarea:focus{
    border-color:var(--green);
    box-shadow:0 0 0 3px var(--green-soft);
}
/* === Kill Chrome / Edge / Safari autofill yellow-white background === */
.ct-field input:-webkit-autofill,
.ct-field textarea:-webkit-autofill,
.ct-field input:-webkit-autofill:hover,
.ct-field input:-webkit-autofill:focus,
.ct-field input:-webkit-autofill:active{
    -webkit-text-fill-color:var(--ink) !important;
    -webkit-box-shadow:0 0 0 1000px #040706 inset !important;
    box-shadow:0 0 0 1000px #040706 inset !important;
    caret-color:var(--green);
    transition:background-color 9999s ease-in-out 0s;
}
.ct-msg textarea{
    min-height:120px;
    line-height:1.5;
}
.ct-hp{
    position:absolute;
    left:-9999px;
    width:1px; height:1px;
    opacity:0;
    pointer-events:none;
}
.ct-foot{
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
}
.ct-status{
    color:var(--ink-dim);
    font-family:'JetBrains Mono',monospace;
    font-size:.85rem;
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:1.4em;
}
.ct-status.ok{color:var(--green);text-shadow:0 0 8px var(--green-glow)}
.ct-status.err{color:var(--red)}
/* Spinner used while sending */
.ct-status .spin{
    width:14px;height:14px;border-radius:50%;
    border:2px solid var(--line);border-top-color:var(--green);
    animation:ct-spin .7s linear infinite;
    box-shadow:0 0 6px var(--green-glow);
}
@keyframes ct-spin{to{transform:rotate(360deg)}}
.ct-form.busy button{opacity:.7;pointer-events:none}
.ct-form.busy input,
.ct-form.busy textarea{opacity:.7;pointer-events:none}

/* ===== High-DPI tap-friendly form controls ===== */
select,input,textarea{
    font-size:max(13px, 1em); /* prevents iOS auto-zoom on focus */
}

/* ===== Print: hide effects, light theme ===== */
@media print{
    #rain,.scanline,.vignette,.scroll-hint,.hero-glow,.hamburger,.btn-primary{display:none !important}
    body{background:#fff;color:#111}
    .card,.dl-card,.term,.mock-window{background:#fff;border-color:#ccc;box-shadow:none}
    a{color:#0a7c3a}
}

/* ===== Showcase: interactive prompt + chips, modal popup =====
   The mock window from the existing showcase keeps its dark/green skin,
   but now sprouts a real input row and chips below the chat. Submitting
   triggers a quick "AI typing" animation, then opens the demo modal with
   a sandboxed mini-app rendered in an iframe. */
.show-try{
    max-width:980px;margin:-6px auto 18px;display:flex;justify-content:flex-end;
    gap:14px;align-items:center;color:var(--green);font-family:var(--mono);
    font-size:11px;letter-spacing:.16em;
}
.show-try-tag{
    padding:5px 10px;border:1px dashed var(--line);border-radius:999px;
    background:var(--green-soft);text-shadow:0 0 8px var(--green-glow);
}
[data-theme="light"] .show-try{ color:#0a0a0a; }
[data-theme="light"] .show-try-tag{ background:rgba(0,0,0,.05); border-color:rgba(0,0,0,.25); text-shadow:none; }

.mock-prompt{
    border-top:1px solid var(--line-soft);
    background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.15));
    padding:10px 12px 12px;
}
[data-theme="light"] .mock-prompt{
    background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.02));
}
.mock-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.mchip{
    background:rgba(0,255,133,.06);
    color:var(--green);
    border:1px solid var(--line);
    padding:5px 10px;border-radius:999px;
    font:500 11px/1 var(--mono);letter-spacing:.04em;
    cursor:pointer;
    transition:background .12s ease, transform .12s ease, box-shadow .12s ease;
}
.mchip:hover{ background:var(--green-soft); box-shadow:0 0 12px var(--green-glow); transform:translateY(-1px) }
.mchip:active{ transform:translateY(0) }
[data-theme="light"] .mchip{
    background:rgba(0,0,0,.04); color:#0a0a0a; border-color:rgba(0,0,0,.18);
}
[data-theme="light"] .mchip:hover{ background:rgba(0,0,0,.07); box-shadow:0 4px 14px rgba(0,0,0,.12) }

.mock-input{
    display:flex;align-items:center;gap:8px;
    background:rgba(0,0,0,.45);
    border:1px solid var(--line);border-radius:10px;
    padding:6px 8px 6px 10px;
}
[data-theme="light"] .mock-input{ background:#fbf6e8; border-color:rgba(0,0,0,.18); }
.mock-prompt-sigil{
    color:var(--green);font:700 13px var(--mono);text-shadow:0 0 8px var(--green-glow);
    user-select:none;
}
[data-theme="light"] .mock-prompt-sigil{ color:#0a0a0a; text-shadow:none }
.mock-input input{
    flex:1;min-width:0;
    background:transparent;border:none;outline:none;
    color:var(--ink);font:13px/1.4 var(--mono);
    padding:6px 2px;
}
.mock-input input::placeholder{ color:var(--ink-dim);opacity:.7 }
[data-theme="light"] .mock-input input{ color:#0a0a0a; caret-color:#0a0a0a }
.mock-send{
    flex:0 0 auto;
    width:32px;height:32px;border-radius:8px;
    background:linear-gradient(180deg,#00ff85,#00b85b);
    color:#04140a;border:none;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 0 14px var(--green-glow);
    transition:transform .12s ease, filter .12s ease;
}
.mock-send svg{ width:16px;height:16px }
.mock-send:hover{ transform:translateY(-1px); filter:brightness(1.08) }
.mock-send:active{ transform:translateY(0) }
[data-theme="light"] .mock-send{
    background:linear-gradient(180deg,#1a1a1a,#000); color:#efe8d8; box-shadow:0 0 0 1px rgba(0,0,0,.18);
}

.show-foot{
    max-width:980px;margin:14px auto 0;color:var(--ink-dim);
    font-size:12px;text-align:center;letter-spacing:.02em;
}
[data-theme="light"] .show-foot{ color:#4a4a4a }

/* keep chat bottom-anchored when the bubble grows so the prompt input
   doesn't drift; cap the chat scrollable area on desktop. */
.mock-chat{ max-height:340px;overflow:auto;scrollbar-width:thin }
.mock-chat::-webkit-scrollbar{ width:6px }
.mock-chat::-webkit-scrollbar-thumb{ background:var(--line);border-radius:3px }

/* When the bubble is "thinking" — pulse a caret at the end. */
.msg.ai.typing::after{
    content:"▍";display:inline-block;color:var(--green);
    text-shadow:0 0 6px var(--green-glow);
    animation:cm-blink 1s steps(2) infinite;
}
[data-theme="light"] .msg.ai.typing::after{ color:#0a0a0a;text-shadow:none }
@keyframes cm-blink{ 50%{opacity:0} }

/* Submit-flash: green glow on the user message bubble briefly */
.msg.user.flash{ animation:cm-flash 600ms ease }
@keyframes cm-flash{
    0%   { box-shadow:0 0 0 0 var(--green-glow); }
    40%  { box-shadow:0 0 22px 2px var(--green-glow); }
    100% { box-shadow:0 0 0 0 rgba(0,0,0,0); }
}

/* ===== Modal popup (Mario / Snake / Pong games) ===== */
.cm-modal[hidden]{ display:none !important }
.cm-modal{
    position:fixed;inset:0;z-index:1000;
    display:flex;align-items:center;justify-content:center;
    padding:20px;
    animation:cm-fade .18s ease both;
}
@keyframes cm-fade{ from{opacity:0} to{opacity:1} }
.cm-modal-backdrop{
    position:absolute;inset:0;background:rgba(0,0,0,.78);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
[data-theme="light"] .cm-modal-backdrop{ background:rgba(20,18,12,.55) }
.cm-modal-panel{
    position:relative;z-index:1;
    width:min(900px, 96vw);
    max-height:min(640px, 92vh);
    display:flex;flex-direction:column;
    background:linear-gradient(180deg,rgba(6,12,9,.98),rgba(4,8,6,.98));
    border:1px solid var(--line);border-radius:var(--radius);
    box-shadow:0 30px 80px rgba(0,0,0,.7), 0 0 80px rgba(0,255,133,.18);
    overflow:hidden;
    animation:cm-pop .22s cubic-bezier(.2,.9,.3,1.1) both;
}
@keyframes cm-pop{ from{transform:translateY(8px) scale(.98);opacity:0} to{transform:none;opacity:1} }
[data-theme="light"] .cm-modal-panel{
    background:linear-gradient(180deg,#fbf6e8,#f3ecd8);
    box-shadow:0 0 0 1px rgba(0,0,0,.08), 0 18px 60px rgba(0,0,0,.30);
}
.cm-modal-bar{
    display:flex;align-items:center;gap:8px;padding:10px 14px;
    border-bottom:1px solid var(--line-soft);
    background:linear-gradient(180deg,rgba(0,255,133,.06),transparent);
}
[data-theme="light"] .cm-modal-bar{ background:linear-gradient(180deg,rgba(0,0,0,.05),transparent) }
.cm-modal-bar i{ width:11px;height:11px;border-radius:50% }
.cm-modal-bar i.r{ background:#ff5f57;cursor:pointer }
.cm-modal-bar i.y{ background:#febc2e }
.cm-modal-bar i.g{ background:#28c840 }
.cm-modal-title{
    margin-left:8px;color:var(--ink-dim);font:12px/1 var(--mono);letter-spacing:.04em;
}
[data-theme="light"] .cm-modal-title{ color:#4a4a4a }
.cm-modal-close{
    margin-left:auto;background:transparent;border:1px solid var(--line);
    color:var(--ink);font:18px/1 var(--mono);width:30px;height:26px;
    border-radius:6px;cursor:pointer;
}
.cm-modal-close:hover{ background:var(--green-soft);color:var(--green); }
[data-theme="light"] .cm-modal-close{ color:#0a0a0a;border-color:rgba(0,0,0,.2) }
[data-theme="light"] .cm-modal-close:hover{ background:rgba(0,0,0,.06);color:#0a0a0a }
.cm-modal-body{
    flex:1;min-height:0;display:flex;
    background:#000;
}
[data-theme="light"] .cm-modal-body{ background:#262017 }
.cm-modal-body iframe{
    flex:1;width:100%;height:100%;border:none;display:block;
    min-height:420px;
}

/* Figure mode — image scripts (Elon / SpaceX / Mars) render an inline SVG
   instead of an iframe. Black space backdrop + monospace caption strip. */
.cm-modal.cm-modal-figure-mode .cm-modal-body{
    background:#000;
    padding:0;align-items:stretch;justify-content:stretch;
}
.cm-figure{
    margin:0;flex:1;display:flex;flex-direction:column;
    background:radial-gradient(ellipse at 50% 60%, #0a1530 0%, #040814 50%, #000 100%);
    min-height:420px;
}
.cm-figure svg{
    flex:1;width:100%;height:auto;display:block;
    max-height:calc(100vh - 220px);
    object-fit:contain;
}
.cm-figure figcaption{
    display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
    padding:14px 22px;
    background:linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,.95));
    border-top:1px solid rgba(0,255,133,.28);
    font-family:var(--mono);
}
.cm-figure figcaption b{
    font-size:13px;color:var(--green);font-weight:700;letter-spacing:.04em;
    text-shadow:0 0 10px rgba(0,255,133,.45);
}
.cm-figure figcaption span{
    font-size:12px;color:#9cf7c4;letter-spacing:.06em;
}
[data-theme="light"] .cm-modal.cm-modal-figure-mode .cm-modal-body{ background:#000 }

@media (max-width:680px){
    .show-try{justify-content:center}
    .mock-prompt{padding:8px 8px 10px}
    .mchip{font-size:10px;padding:5px 8px}
    .cm-modal{padding:0}
    .cm-modal-panel{width:100vw;max-height:100vh;height:100dvh;border-radius:0;border:none}
    .cm-modal-body iframe{min-height:60vh}
}

/* ============ OWN-AI section (between #simple and #easy) ============
   Mirrors the .simple section's calm centred layout. Uses the existing
   .section-title / .section-lead patterns so it slots into the page
   rhythm without inventing new visual primitives. */
.own-ai{
    padding:80px 16px 64px;
    text-align:center;
    max-width:1100px;
    margin:0 auto;
}
.own-ai .own-ai-kicker{
    display:inline-block;
    font-family:"JetBrains Mono",monospace;
    font-size:11px;
    letter-spacing:.18em;
    color:rgba(0,255,133,.78);
    margin-bottom:14px;
}
.own-ai .section-title{ margin-bottom:14px; }
.own-ai .section-lead{
    max-width:880px;margin:0 auto;
    font-size:17px;line-height:1.6;color:#cfead8;
}
[data-theme="light"] .own-ai .own-ai-kicker{ color:#0a0a0a; }
[data-theme="light"] .own-ai .section-lead{ color:#0a0a0a; }

/* ============ TAGLINE RIBBON ============ */
.tagline-ribbon {
  padding: 56px 16px;
  text-align: center;
  border-top: 1px solid rgba(0, 255, 133, .14);
  border-bottom: 1px solid rgba(0, 255, 133, .14);
  background:
    linear-gradient(180deg, rgba(0,255,133,.04), transparent 60%),
    rgba(4, 8, 6, .55);
  backdrop-filter: blur(2px);
}
.tagline-ribbon .tagline-line {
  margin: 0 auto;
  max-width: 980px;
  font-family: "Share Tech Mono", "JetBrains Mono", monospace;
  font-size: clamp(20px, 3.6vw, 34px);
  letter-spacing: .02em;
  color: #d6ffe1;
  text-shadow: 0 0 18px rgba(0, 255, 133, .25);
}
.tagline-ribbon .tagline-line::after {
  content: "_";
  margin-left: 6px;
  color: #00ff85;
  animation: tagline-caret 1s steps(2) infinite;
}
@keyframes tagline-caret { 50% { opacity: 0; } }
[data-theme="light"] .tagline-ribbon{
    background:linear-gradient(180deg, rgba(0,0,0,.03), transparent 60%), rgba(255,255,255,.55);
    border-top-color:rgba(0,0,0,.12);
    border-bottom-color:rgba(0,0,0,.12);
}
[data-theme="light"] .tagline-ribbon .tagline-line{ color:#0a0a0a; text-shadow:none; }
[data-theme="light"] .tagline-ribbon .tagline-line::after{ color:#0a0a0a; }

/* ============ IMAGE-PORTAL section ============
   Borrows .happ chrome (titlebar, toolbar, sidebar) from the hero so the
   window frame is consistent. Adds wide max-width, big image stage, and
   a fade-in for the rendered image. */
.portal-section{
    padding:72px 16px 84px;
}
.portal-section .container{
    max-width:1100px;margin:0 auto;
}
.portal-head{ text-align:center; margin-bottom:28px; }
.portal-title{
    font-family:"Orbitron","JetBrains Mono",sans-serif;
    font-weight:800;
    font-size:clamp(26px,4.2vw,42px);
    letter-spacing:.04em;
    color:#d6ffe1;
    margin:0 0 10px;
    text-shadow:0 0 14px rgba(0,255,133,.25);
}
.portal-sub{
    margin:0 auto;
    max-width:720px;
    font-family:"JetBrains Mono",monospace;
    color:#9bdcb0;
    font-size:14px;
    line-height:1.55;
}
[data-theme="light"] .portal-title{ color:#0a0a0a; text-shadow:none; }
[data-theme="light"] .portal-sub{ color:#0a0a0a; }
.happ.portal-app{ max-width:1100px; margin:0 auto; }
.portal-image-wrap{
    margin-top:14px;
    opacity: 0;
    transition: opacity .35s ease;
}
.portal-image-wrap.is-on { opacity: 1; }
.portal-image{
    margin:0 auto;
    border:1px solid rgba(0,255,133,.28);
    border-radius:10px;
    overflow:hidden;
    background:#040706;
    box-shadow:0 14px 40px rgba(0,0,0,.45), 0 0 24px rgba(0,255,133,.10);
    max-width:560px;
    min-height:260px;
    position:relative;
    display:flex;
    align-items:stretch;
    flex-direction:column;
}
.portal-img {
    /* Visible from page load (no opacity:0 — that was masking the
       image entirely until JS added .is-on, and on slow IntersectionObserver
       fires the user saw a black frame for 2-6 s). Real photo data also
       cached locally now via Unsplash CDN, so it lands fast. */
    transition: opacity .35s ease;
    width: 100%;
    height: auto;
    min-height:240px;
    max-height:320px;
    object-fit: cover;
    display:block;
    background:#040706;
}
/* Filled green CTA — user wants the «Войди в Матрицу» heading to read
   as a solid pressable button, not an outline. Dark text on full-green
   background, same accent as .btn-primary.cta-top in the topbar. */
.portal-title-btn{
    display:inline-block;
    padding:14px 28px;
    border:1.5px solid var(--green, #00ff85);
    border-radius:10px;
    background:var(--green, #00ff85);
    color:#0a0a0a;
    text-decoration:none;
    box-shadow:0 0 28px rgba(0,255,133,.45), inset 0 0 0 1px rgba(255,255,255,.10);
    transition: background .15s ease, box-shadow .2s ease, transform .12s ease, filter .15s ease;
}
.portal-title-btn:hover{
    filter:brightness(1.08);
    box-shadow:0 0 40px rgba(0,255,133,.65), inset 0 0 0 1px rgba(255,255,255,.18);
    transform:translateY(-2px);
}
.portal-title-btn:active{ transform: translateY(0); filter:brightness(.96); }
/* Title inside the button uses the SAME dark-on-green colour so it
   contrasts with the solid fill — overrides the dark-theme .portal-title
   colour (.portal-title is #d6ffe1 by default). */
.portal-title-btn h2,
.portal-title-btn .portal-title{
    margin:0;
    color:#0a0a0a;
    text-shadow:none;
    cursor:pointer;
}
[data-theme="light"] .portal-title-btn{
    background:#0a0a0a;
    color:#f5efe2;
    border-color:#0a0a0a;
    box-shadow:0 6px 20px rgba(0,0,0,.18);
}
[data-theme="light"] .portal-title-btn h2,
[data-theme="light"] .portal-title-btn .portal-title{ color:#f5efe2; }
[data-theme="light"] .portal-title-btn:hover{
    filter:brightness(1.15);
    box-shadow:0 10px 28px rgba(0,0,0,.24);
}
@media (max-width: 560px){
    .portal-title-btn{ padding:10px 16px; }
}
.portal-img.is-on { opacity: 1; }
.portal-cap{
    padding:10px 14px;
    font-family:"JetBrains Mono",monospace;
    font-size:12px;
    letter-spacing:.02em;
    color:#9bdcb0;
    background:rgba(0,0,0,.45);
    border-top:1px solid rgba(0,255,133,.18);
}
[data-theme="light"] .portal-cap{
    background:rgba(255,255,255,.85);
    border-top-color:rgba(0,0,0,.12);
    color:#0a0a0a;
}
.happ-row-thinking { opacity: 0; transition: opacity .25s ease; }
.happ-row-thinking.is-on { opacity: 1; }
.portal-cta{ margin-top:22px; text-align:center; }

/* ============ FOOTER LEGAL PILL ============ */
.footer-legal { margin-top: 14px; text-align: center; }
.legal-pill {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid rgba(0, 255, 133, .25);
  border-radius: 999px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: .02em;
  color: #9bdcb0;
  background: rgba(4, 8, 6, .35);
}
.legal-pill code {
  color: #d6ffe1;
  background: transparent;
}
[data-theme="light"] .legal-pill { color: #0a0a0a; border-color: rgba(0,0,0,.18); }
[data-theme="light"] .legal-pill code { color: #0a0a0a; }

/* Stronger glow on the new image-generator card so it reads as the
   headline feature. Uses the existing .card scaffold; only the title
   color and a soft halo are tweaked. Matrix Image accent is a slightly
   darker green than the page baseline so the icon reads "Image" (not
   the generic Matrix glow). */
.card.card-imggen .card-icon{ color:#00CC6A; }
.card.card-imggen{
    box-shadow: 0 10px 28px rgba(0,0,0,.35), 0 0 22px rgba(0,204,106,.14);
}
[data-theme="light"] .card.card-imggen .card-icon{ color:#0a0a0a; }

/* ============ SEARCH / VIDEO / MUSIC DEMO SECTIONS ============
   Three demo sections that piggy-back on the existing .portal-section
   chrome (.happ window + .portal-head title block + .portal-cta button).
   Only the in-window result-area differs:
     • search → 4-card product grid
     • video  → 16:9 frame with fake-player overlay
     • music  → audio-player tile with animated SVG waveform
   No big radial halos (matrix.site light-theme readability rule). All
   green text/accent gets an explicit [data-theme="light"] override. */

/* ------ SEARCH: product cards ------ */
.search-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:12px;
    margin-top:12px;
    /* Skeleton cards in HTML keep the grid the same height before and
       after the first cycle, so the rest of the page does not pop down
       when results land. min-height belt-and-suspenders for browsers
       that ignore the empty skeletons before CSS applies. */
    min-height:240px;
}
.search-card{
    display:flex;
    flex-direction:column;
    border:1px solid rgba(0,255,133,.22);
    border-radius:10px;
    overflow:hidden;
    background:#040706;
    /* No translate / opacity-0 — those animations forced the cards to
       paint twice and caused the apparent «jump» on phones. Visible
       from page load; new text/image just swaps in. */
}
.search-card-img{
    width:100%;
    aspect-ratio:1 / 1;
    object-fit:cover;
    display:block;
    background:#0a0e0c;
}
.search-card-body{
    padding:8px 10px 10px;
    display:flex;
    flex-direction:column;
    gap:3px;
    font-family:"JetBrains Mono",monospace;
}
.search-card-brand{
    font-size:9.5px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:#7fbf94;
}
.search-card-title{
    font-size:12px;
    line-height:1.25;
    color:#d6ffe1;
    min-height:30px;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}
.search-card-price{
    font-size:14px;
    font-weight:700;
    color:#00ff85;
    text-shadow:0 0 8px rgba(0,255,133,.35);
    margin-top:2px;
}
.search-card-stars{
    font-size:11px;
    color:#ffd166;
    letter-spacing:.05em;
}
[data-theme="light"] .search-card{
    background:rgba(255,255,255,.78);
    border-color:rgba(0,0,0,.14);
}
[data-theme="light"] .search-card-brand,
[data-theme="light"] .search-card-title,
[data-theme="light"] .search-card-price{ color:#0a0a0a; text-shadow:none; }
[data-theme="light"] .search-card-stars{ color:#a06900; }
@media (max-width: 880px){
    .search-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 480px){
    .search-grid{ grid-template-columns:repeat(2, 1fr); gap:8px; }
    .search-card-title{ font-size:11px; min-height:26px; }
    .search-card-price{ font-size:13px; }
}

/* ------ VIDEO: real <video> with click-to-play 4-sec clip ------ */
.video-wrap{
    margin-top:14px;
}
.video-frame{
    margin:0 auto;
    border:1px solid rgba(0,255,133,.28);
    border-radius:10px;
    overflow:hidden;
    background:#040706;
    box-shadow:0 14px 40px rgba(0,0,0,.45), 0 0 24px rgba(0,255,133,.10);
    position:relative;
    aspect-ratio:16 / 9;
    width:100%;            /* fill phone width */
    max-width:560px;       /* cap on desktop */
}
.video-frame .portal-cap{
    position:absolute;
    left:0; right:0; top:0;
    background:rgba(0,0,0,.55);
    border-top:none;
    border-bottom:1px solid rgba(0,255,133,.18);
}
.video-el{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    background:#040706;
    /* No opacity:0 — that masked the poster image AND the loaded video
       until the cycler added .is-on, which is exactly the «black screen»
       the user complained about. The <video> element shows its poster
       from page load, then auto-plays the loaded clip. */
}
.video-overlay{
    position:absolute;
    left:0; right:0; bottom:0;
    padding:10px 14px 10px;
    background:linear-gradient(0deg, rgba(0,0,0,.65), rgba(0,0,0,0));
    display:flex;
    align-items:center;
    gap:10px;
    pointer-events:auto;        /* play button must be clickable */
}
.video-play{
    width:34px; height:34px;
    border:1px solid rgba(255,255,255,.65);
    border-radius:50%;
    background:rgba(0,0,0,.45);
    color:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    flex-shrink:0;
    padding:0;
    transition:background .12s, transform .08s;
}
.video-play:hover{ background:rgba(0,0,0,.65); }
.video-play:active{ transform: scale(.94); }
.video-play svg{ width:14px; height:14px; }
.video-play .vp-pause{ display:none; }
.video-play.is-playing .vp-play{ display:none; }
.video-play.is-playing .vp-pause{ display:block; }
.video-track{
    flex:1 1 auto;
    height:3px;
    background:rgba(255,255,255,.25);
    border-radius:2px;
    overflow:hidden;
    min-width:0;
}
.video-track-fill{
    display:block;
    width:0%;
    height:100%;
    background:#00ff85;
    box-shadow:0 0 8px rgba(0,255,133,.6);
}
.video-time{
    font-family:"JetBrains Mono",monospace;
    font-size:11px;
    color:#fff;
    letter-spacing:.04em;
    flex-shrink:0;
}
/* (positioned absolutely earlier in this section) */
[data-theme="light"] .video-frame{ background:#fff; }
[data-theme="light"] .video-overlay{ background:linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,0)); }
@media (max-width: 480px){
    .video-overlay{ padding:6px 10px; gap:6px; }
    .video-play{ width:26px; height:26px; }
    .video-time{ font-size:10px; }
}

/* ------ MUSIC: audio-player tile + animated waveform ------ */
.music-wrap{
    margin-top:14px;
    opacity:0;
    transition:opacity .35s ease;
}
.music-wrap.is-on{ opacity:1; }
.music-card{
    border:1px solid rgba(0,255,133,.28);
    border-radius:10px;
    background:linear-gradient(180deg, #040706, #060b09);
    padding:12px 14px 14px;
    box-shadow:0 14px 40px rgba(0,0,0,.4), 0 0 18px rgba(0,255,133,.10);
}
.music-card-row{
    display:flex;
    align-items:center;
    gap:12px;
}
.music-play{
    width:38px; height:38px;
    border:1px solid rgba(0,255,133,.4);
    border-radius:50%;
    background:rgba(0,255,133,.08);
    color:#00ff85;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    flex-shrink:0;
    padding:0;
    transition: background .12s, transform .08s;
}
.music-play:hover{ background:rgba(0,255,133,.18); }
.music-play:active{ transform: scale(.94); }
.music-play svg{ width:16px; height:16px; }
.music-play .mp-pause{ display:none; }
.music-play.is-playing .mp-play{ display:none; }
.music-play.is-playing .mp-pause{ display:block; }
.music-meta{
    flex:1 1 auto;
    min-width:0;
    font-family:"JetBrains Mono",monospace;
}
.music-title{
    font-size:13px;
    color:#d6ffe1;
    text-shadow:0 0 8px rgba(0,255,133,.2);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.music-sub{
    font-size:11px;
    color:#7fbf94;
    margin-top:2px;
}
.music-time{
    font-family:"JetBrains Mono",monospace;
    font-size:12px;
    color:#9bdcb0;
    flex-shrink:0;
}
.music-wave{
    width:100%;
    height:60px;
    margin-top:12px;
    display:block;
}
.music-wave rect{
    fill:#00ff85;
    opacity:.85;
}
.music-wrap.is-on .music-wave rect{
    animation: music-wave-bounce 1.1s ease-in-out infinite;
}
@keyframes music-wave-bounce{
    0%, 100% { transform: scaleY(.25); }
    50%      { transform: scaleY(1);    }
}
[data-theme="light"] .music-card{
    background:rgba(255,255,255,.78);
    border-color:rgba(0,0,0,.16);
    box-shadow:0 8px 24px rgba(0,0,0,.12);
}
[data-theme="light"] .music-play{
    color:#0a0a0a;
    border-color:rgba(0,0,0,.4);
    background:rgba(0,0,0,.04);
}
[data-theme="light"] .music-title,
[data-theme="light"] .music-sub,
[data-theme="light"] .music-time{ color:#0a0a0a; text-shadow:none; }
[data-theme="light"] .music-wave rect{ fill:#0a0a0a; }
@media (max-width: 480px){
    .music-card-row{ gap:8px; }
    .music-play{ width:32px; height:32px; }
    .music-title{ font-size:12px; }
    .music-sub{ font-size:10px; }
}