/* ==========================================================================
   KAUTO — the website.

   Ported from the Claude Design source (Kauto Landing Page.dc.html, Kauto
   Download.dc.html). That file expresses layout as inline style attributes and
   hover states as a `style-hover` attribute its runtime understands. Static
   HTML has no such runtime, so everything interactive — hover, the mosaic, the
   model matrix, the counters — is reproduced here and in main.js.

   Layout stays inline in the markup, deliberately: it is how the design was
   authored, it is how the app's own renderer is authored, and rewriting it into
   classes would make the two versions impossible to diff against each other.
   What lives HERE is everything inline styles cannot express — pseudo-classes,
   keyframes, media queries.
   ========================================================================== */

:root {
    --g: #22d96b;
    --g-hi: #2ff079;
    --cyan: #4fd6ff;
    --amber: #ffb347;

    --bg: #040404;
    --panel: #0a0a0a;
    --line: #171717;
    --line-2: #232323;

    --ink: #ffffff;
    --ink-2: #d6d6d6;
    --ink-3: #a8a8a8;
    --ink-4: #8a8a8a;
    --ink-5: #6f6f6f;

    --ui: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    --display: Archivo, Inter, system-ui, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

    /* Mosaic column widths. The design drove these from a props slider; here
       they are fixed at its defaults and narrowed by the media queries below. */
    --kcw: 150px;
    --kcw2: 212px;

    /* Every looping animation reads this, so one media query can stop all of
       them for someone who has asked the OS not to animate things. */
    --kmo: running;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg);
    font-family: var(--ui);
    color: var(--ink-2);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--g); text-decoration: none; }

img { max-width: 100%; }

::selection { background: rgba(34, 217, 107, .28); }

:focus-visible { outline: 2px solid var(--g); outline-offset: 3px; border-radius: 6px; }

/* ---------------------------------------------------------------- keyframes */
/* Verbatim from the design source. */
@keyframes kr { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes kf { from { opacity: 0; } to { opacity: 1; } }
@keyframes ks { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes kp { 0%, 100% { opacity: 1; } 50% { opacity: .28; } }
@keyframes kring { 0% { transform: scale(.9); opacity: .5; } 100% { transform: scale(3); opacity: 0; } }
@keyframes kscan { 0% { transform: translateY(-140%); } 100% { transform: translateY(1500%); } }
@keyframes kblink { 0%, 48% { opacity: 1; } 52%, 100% { opacity: 0; } }
@keyframes kreveal { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes ktile { from { opacity: 0; transform: translateY(26px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes kwire { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes kstar { 0%, 88%, 100% { transform: none; } 92% { transform: scale(1.18) rotate(-8deg); } 96% { transform: scale(1.05) rotate(4deg); } }

/* ------------------------------------------------------------------- hover */
/* The design's `style-hover` attribute, as real CSS. */
.navlink { color: var(--ink-4); transition: color .15s; }
.navlink:hover { color: var(--ink); }

.btn-g { background: var(--g); color: #062e18; transition: background .15s; }
.btn-g:hover { background: var(--g-hi); color: #062e18; }

.card-h { transition: border-color .16s, background .16s; }
.card-h:hover { border-color: #3a3a3a; background: #0d0d0d; }

.row-h { transition: background .16s; }
.row-h:hover { background: #0d0d0d; }

.ghost-h { transition: border-color .16s, background .16s; }
.ghost-h:hover { border-color: #4a4a4a; background: #141414; }

/* The mosaic caption, revealed on hover over its tile. */
.tile .cap { opacity: 0; transition: opacity .18s; }
.tile:hover .cap { opacity: 1; }

/* -------------------------------------------------------------- responsive */
/* The design is a fixed 1440px composition. These are the rules that keep it
   usable below that, which a single-viewport design file cannot express. */
@media (max-width: 1100px) {
    :root { --kcw: 132px; --kcw2: 172px; }
    .pad { padding-left: 32px !important; padding-right: 32px !important; }
    .grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
    .h1 { font-size: 46px !important; }
    .h2 { font-size: 29px !important; }
}

@media (max-width: 760px) {
    :root { --kcw: 108px; --kcw2: 148px; }
    .pad { padding-left: 20px !important; padding-right: 20px !important; }
    .grid-3, .stats { grid-template-columns: 1fr !important; }
    .h1 { font-size: 34px !important; }
    .h2 { font-size: 25px !important; }
    .navlinks { display: none !important; }
    .split { grid-template-columns: 1fr !important; gap: 32px !important; }

    /* The 4-up stat strip becomes a stack; its right borders would then draw
       lines to nowhere. */
    .stats > div { border-right: none !important; border-bottom: 1px solid var(--line); padding: 24px 0 !important; }
    .stats > div:last-child { border-bottom: none; }

    /* The model matrix cannot usefully shrink to one column, so it scrolls
       inside its own box rather than forcing the page sideways. */
    .matrix-wrap { overflow-x: auto; }
    .matrix { min-width: 640px; }
}

/* Someone who has asked their OS to stop animating things means it. The looping
   decorations are switched off through the same variable the design used for
   its motion toggle; the one-shot entrances are collapsed to nothing. */
@media (prefers-reduced-motion: reduce) {
    :root { --kmo: paused; }
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}