/* GENERATED by build/build.php from build/styles/*.css — do not edit. */

/* Design tokens, theme overrides, reset and document base. */

:root {
    --bg-0: #07060d;
    --bg-1: #0c0a1a;
    --ink: #e7e3f4;
    --ink-dim: #a39fb8;
    --ink-faint: #6f6a86;
    --line: rgba(255, 255, 255, 0.09);
    --line-strong: rgba(255, 255, 255, 0.16);
    --glass: rgba(255, 255, 255, 0.045);
    --glass-2: rgba(255, 255, 255, 0.06);
    --violet: #a78bfa;
    --cyan: #5eead4;
    --pink: #f0abfc;
    --amber: #fcd34d;
    --green: #86efac;

    /* editor surface + syntax tokens (overridden per theme) */
    --editor-bg: rgba(7, 6, 13, 0.55);
    --t-comment: #6f6a86;
    --t-key: #5eead4;
    --t-marker: #f0abfc;
    --t-punct: #8b87a3;
    --t-string: #86efac;
    --t-mstring: #b9f6ca;
    --t-num: #fcd34d;
    --t-bool: #c4b5fd;
    --t-null: #f9a8d4;
    --t-section: #a78bfa;

    /* brand mark (the {ktav: lang} coin) — recolours per theme */
    --icon-bg: #0e0c1c;
    --icon-stroke: rgba(167, 139, 250, 0.5);
    --icon-accent: #6ea8ff;

    --shadow-card: 0 24px 60px -24px rgba(0, 0, 0, 0.7);

    --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ── Light theme ───────────────────────────────────────────────────── */
html[data-theme="light"] {
    --bg-0: #eef0f7;
    --bg-1: #f7f7fc;
    --ink: #1a1730;
    --ink-dim: #4f4a66;
    --ink-faint: #837e98;
    --line: rgba(20, 16, 45, 0.10);
    --line-strong: rgba(20, 16, 45, 0.16);
    --glass: rgba(255, 255, 255, 0.55);
    --glass-2: rgba(255, 255, 255, 0.7);
    --violet: #7c3aed;
    --cyan: #0e7490;
    --pink: #c026d3;
    --amber: #b45309;
    --green: #15803d;

    --editor-bg: rgba(255, 255, 255, 0.66);
    --t-comment: #8a86a0;
    --t-key: #0e7490;
    --t-marker: #c026d3;
    --t-punct: #6b6880;
    --t-string: #15803d;
    --t-mstring: #047857;
    --t-num: #b45309;
    --t-bool: #6d28d9;
    --t-null: #be185d;
    --t-section: #7c3aed;

    --icon-bg: #fbfafd;
    --icon-stroke: #cbcaf5;
    --icon-accent: #2f88ff;

    --shadow-card: 0 24px 60px -28px rgba(60, 40, 120, 0.35);
    color-scheme: light;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--sans);
    color: var(--ink);
    background: var(--bg-0);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    transition: background-color 0.35s ease, color 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
    .bg-mesh { animation: none; }
    .fade-in { animation: none; }
}

/* Animated mesh-gradient backdrop + fine grain overlay. */

.bg-mesh {
    position: fixed;
    inset: -20vh -20vw;
    z-index: -2;
    background:
        radial-gradient(40vw 40vw at 12% 18%, rgba(124, 58, 237, 0.40), transparent 60%),
        radial-gradient(38vw 38vw at 86% 12%, rgba(14, 165, 233, 0.30), transparent 60%),
        radial-gradient(46vw 46vw at 78% 88%, rgba(236, 72, 153, 0.26), transparent 60%),
        radial-gradient(40vw 40vw at 20% 92%, rgba(45, 212, 191, 0.22), transparent 60%),
        linear-gradient(160deg, var(--bg-1), var(--bg-0));
    filter: saturate(125%);
    animation: drift 26s ease-in-out infinite alternate;
    transition: opacity 0.4s ease;
}
html[data-theme="light"] .bg-mesh {
    background:
        radial-gradient(40vw 40vw at 12% 18%, rgba(124, 58, 237, 0.20), transparent 60%),
        radial-gradient(38vw 38vw at 86% 12%, rgba(14, 165, 233, 0.16), transparent 60%),
        radial-gradient(46vw 46vw at 78% 88%, rgba(236, 72, 153, 0.14), transparent 60%),
        radial-gradient(40vw 40vw at 20% 92%, rgba(45, 212, 191, 0.14), transparent 60%),
        linear-gradient(160deg, var(--bg-1), var(--bg-0));
}
html[data-theme="light"] .bg-grain { opacity: 0.025; }
@keyframes drift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(2%, -1.5%, 0) scale(1.06); }
    100% { transform: translate3d(-2%, 1.5%, 0) scale(1.03); }
}
/* fine grain overlay to kill banding and add texture */
.bg-grain {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Reusable UI: glass surfaces, buttons, selects, nav controls, brand mark. */

.glass {
    background: var(--glass);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid var(--line);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.08) inset,
        var(--shadow-card);
}
html[data-theme="light"] .glass {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, var(--shadow-card);
}
.glass-soft {
    background: var(--glass);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid var(--line);
}

.gradient-text {
    background: linear-gradient(100deg, var(--ink) 8%, var(--violet) 45%, var(--cyan) 85%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.glow-violet { box-shadow: 0 0 0 1px var(--line-strong), 0 20px 70px -20px rgba(124, 58, 237, 0.6); }

/* primary / ghost buttons */
.btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.7rem 1.15rem; border-radius: 14px;
    font-weight: 600; font-size: 0.92rem; cursor: pointer;
    border: 1px solid transparent; transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
    user-select: none; text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
    color: #150c2b;
    background: linear-gradient(100deg, var(--violet), var(--cyan));
    box-shadow: 0 10px 30px -10px rgba(124, 58, 237, 0.7);
}
.btn-primary:hover { box-shadow: 0 14px 40px -10px rgba(124, 58, 237, 0.9); }
.btn-ghost {
    color: var(--ink); background: var(--glass-2);
    border-color: var(--line-strong);
    backdrop-filter: blur(10px);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.1); }

/* small pill select */
.pill {
    appearance: none; -webkit-appearance: none;
    background: var(--glass-2); color: var(--ink);
    border: 1px solid var(--line-strong); border-radius: 11px;
    padding: 0.42rem 2rem 0.42rem 0.8rem; font: 600 0.85rem var(--sans);
    cursor: pointer; outline: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23a39fb8' stroke-width='2'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.7rem center;
}
.pill:focus { border-color: var(--violet); }

.icon-btn {
    display: inline-grid; place-items: center;
    width: 38px; height: 38px; border-radius: 12px;
    background: var(--glass-2); border: 1px solid var(--line-strong);
    color: var(--ink-dim); cursor: pointer; transition: all 0.18s ease;
}
.icon-btn:hover { color: var(--ink); background: var(--glass-2); }

/* non-interactive flow arrow between the two editors (source → output) */
.flow-arrow { color: var(--ink-faint); flex: none; }

/* big theme toggle, centred in the nav */
.theme-toggle {
    display: inline-grid; place-items: center;
    width: 48px; height: 48px; border-radius: 50%;
    cursor: pointer; color: var(--ink);
    background: var(--glass-2);
    border: 1px solid var(--line-strong);
    box-shadow: 0 8px 26px -10px rgba(124, 58, 237, 0.5), 0 1px 0 rgba(255,255,255,0.1) inset;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.2s ease, color 0.2s ease;
}
.theme-toggle:hover { transform: translateY(-1px) scale(1.06); box-shadow: 0 12px 34px -10px rgba(124, 58, 237, 0.75); }
.theme-toggle:active { transform: scale(0.96); }
.theme-toggle svg { grid-area: 1 / 1; transition: transform 0.4s cubic-bezier(.4,1.6,.4,1), opacity 0.3s ease; }
/* show the icon for the theme you'll switch TO */
.theme-toggle .i-sun  { color: var(--amber); }
html[data-theme="dark"]  .theme-toggle .i-sun  { opacity: 0; transform: rotate(-90deg) scale(0.4); }
html[data-theme="dark"]  .theme-toggle .i-moon { opacity: 1; transform: none; }
html[data-theme="light"] .theme-toggle .i-sun  { opacity: 1; transform: none; }
html[data-theme="light"] .theme-toggle .i-moon { opacity: 0; transform: rotate(90deg) scale(0.4); }

/* nav actions: inline row on desktop, glass dropdown on mobile */
.nav-menu { display: flex; align-items: center; gap: 0.6rem; }
.nav-toggle {
    display: none; place-items: center;
    width: 42px; height: 42px; border-radius: 12px;
    background: var(--glass-2); border: 1px solid var(--line-strong);
    color: var(--ink); cursor: pointer;
    transition: background 0.18s ease, transform 0.15s ease;
}
.nav-toggle:hover { background: rgba(255, 255, 255, 0.08); }
.nav-toggle:active { transform: translateY(1px); }
.nav-toggle svg { grid-area: 1 / 1; transition: opacity 0.2s ease, transform 0.25s ease; }
.nav-toggle .i-x { opacity: 0; transform: rotate(-90deg) scale(0.6); }
.nav-toggle[aria-expanded="true"] .i-bars { opacity: 0; transform: rotate(90deg) scale(0.6); }
.nav-toggle[aria-expanded="true"] .i-x { opacity: 1; transform: none; }

@media (max-width: 639px) {
    .nav-toggle { display: inline-grid; }
    .nav-menu {
        position: absolute; top: calc(100% + 10px); right: 0;
        flex-direction: column; align-items: stretch; gap: 0.6rem;
        min-width: 210px; padding: 0.9rem; border-radius: 16px;
        background: var(--glass);
        backdrop-filter: blur(20px) saturate(150%);
        -webkit-backdrop-filter: blur(20px) saturate(150%);
        border: 1px solid var(--line); box-shadow: var(--shadow-card);
        transform-origin: top right;
        opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.97);
        transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
        z-index: 60;
    }
    .nav-menu.open { opacity: 1; visibility: visible; transform: none; }
    .nav-menu .lang-switch { align-self: center; }
    .nav-menu .btn { justify-content: center; width: 100%; }
}

/* language switcher */
.lang-switch {
    display: inline-flex; gap: 2px; padding: 3px;
    background: var(--glass-2); border: 1px solid var(--line-strong);
    border-radius: 12px;
}
.lang-btn {
    display: inline-grid; place-items: center;
    padding: 4px; border-radius: 8px; cursor: pointer;
    background: transparent; border: 1px solid transparent;
    opacity: 0.55; transition: opacity 0.18s ease, background 0.18s ease, transform 0.15s ease;
}
.lang-btn:hover { opacity: 1; transform: translateY(-1px); }
.lang-btn.lang-active { opacity: 1; background: rgba(167, 139, 250, 0.18); border-color: rgba(167, 139, 250, 0.45); }
.flag { display: block; width: 22px; height: 15px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18); }

/* brand mark — the {ktav: lang} coin, recoloured via --icon-* per theme */
.ktav-mark { display: block; flex: none; filter: drop-shadow(0 16px 38px rgba(124, 58, 237, 0.38)); }
.ktav-mark .brace, .ktav-mark .lang { fill: var(--violet); }
.ktav-mark .word { fill: var(--ink); }
.ktav-mark .colon { fill: var(--icon-accent); }
.ktav-mark .coin { fill: var(--icon-bg); stroke: var(--icon-stroke); }

.eyebrow {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.32rem 0.8rem; border-radius: 99px;
    background: var(--glass-2); border: 1px solid var(--line-strong);
    font: 600 0.74rem var(--sans); letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ink-dim);
}
.dot { width: 7px; height: 7px; border-radius: 99px; background: var(--green); box-shadow: 0 0 10px var(--green); }
.kbd { font: 600 0.7rem var(--mono); padding: 0.1rem 0.4rem; border-radius: 6px; background: var(--glass-2); border: 1px solid var(--line-strong); color: var(--ink-dim); }

/* hero quick-jump clusters: language logos → #bindings, IDE logos → #editors */
.jump {
    display: inline-flex; align-items: center; gap: 0.6rem;
    padding: 0.4rem 0.7rem; border-radius: 12px; text-decoration: none;
    border: 1px solid transparent; transition: background 0.15s ease, border-color 0.15s ease;
}
.jump:hover { background: var(--glass-2); border-color: var(--line-strong); }
.jump-label { font: 600 0.68rem var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
.jump-icons { display: inline-flex; align-items: center; gap: 0.5rem; }
.jump .lang-icon { width: 21px; height: 21px; color: var(--ink-dim); transition: color 0.15s ease, transform 0.15s ease; }
.jump:hover .lang-icon { color: var(--ink); }
.jump:hover .lang-icon:hover { transform: translateY(-2px); color: var(--violet); }

.fade-in { animation: fade 0.7s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Highlighted editor: transparent textarea stacked over a coloured <pre>. */

.editor {
    position: relative;
    min-height: 30rem;
    height: 100%;
    /* Fixed footprint: never let editor content (a long line) widen the box.
       The grid column carries `min-w-0`; here we pin the editor to its column
       and let CodeMirror scroll horizontally inside (`.cm-scroller`). */
    width: 100%;
    min-width: 0;
    max-width: 100%;
    border-radius: 16px;
    overflow: hidden;
    background: var(--editor-bg);
    border: 1px solid var(--line);
}
.editor-hl, .editor-input {
    position: absolute; inset: 0; margin: 0;
    padding: 1rem 1.1rem;
    font-family: var(--mono);
    font-size: 13px; line-height: 1.62;
    letter-spacing: 0.1px;
    tab-size: 2; -moz-tab-size: 2;
    white-space: pre; word-wrap: normal;
    border: 0; outline: none;
}
.editor-hl {
    z-index: 1; overflow: hidden; pointer-events: none;
    color: var(--ink);
}
.editor-hl code { font: inherit; white-space: inherit; }
.editor-input {
    z-index: 2; overflow: auto; resize: none;
    background: transparent; color: transparent;
    caret-color: var(--pink);
}
.editor-input::placeholder { color: var(--ink-faint); }
.editor-input::selection { background: rgba(167, 139, 250, 0.32); }
/* the output editor is read-only: selectable & copyable, but not typed into */
.editor-input[readonly] { caret-color: transparent; cursor: default; }
.editor:focus-within { border-color: rgba(167, 139, 250, 0.5); box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.12); }

/* thin scrollbars */
.editor-input::-webkit-scrollbar { width: 9px; height: 9px; }
.editor-input::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 99px; }
.editor-input::-webkit-scrollbar-track { background: transparent; }
html[data-theme="light"] .editor-input::-webkit-scrollbar-thumb { background: rgba(20, 16, 45, 0.18); }

@media (max-width: 860px) {
    .editor { min-height: 22rem; }
}

/* Syntax-highlight token colours (shared by all five formats). */

.tok-comment { color: var(--t-comment); font-style: italic; }
.tok-key     { color: var(--t-key); }
.tok-marker  { color: var(--t-marker); font-weight: 600; }
.tok-punct   { color: var(--t-punct); }
.tok-string  { color: var(--t-string); }
.tok-mstring { color: var(--t-mstring); }
.tok-num     { color: var(--t-num); }
.tok-bool    { color: var(--t-bool); font-weight: 600; }
.tok-null    { color: var(--t-null); font-weight: 600; }
.tok-section { color: var(--t-section); font-weight: 700; }

/* "Get it in your language" — the seven-binding install list. */

.binding-list { list-style: none; margin: 0; padding: 0.4rem; }
.binding-row {
    display: flex; flex-direction: column; gap: 0.6rem;
    padding: 0.85rem 0.9rem; border-radius: 14px;
    transition: background 0.18s ease;
}
.binding-row + .binding-row { border-top: 1px solid var(--line); }
.binding-row:hover { background: rgba(255, 255, 255, 0.03); }
html[data-theme="light"] .binding-row:hover { background: rgba(20, 16, 45, 0.03); }
.binding-row.is-ref { background: rgba(124, 58, 237, 0.07); }

.binding-head { display: flex; align-items: center; gap: 0.65rem; }
.lang-icon { width: 24px; height: 24px; flex: none; color: var(--ink); }
.binding-name { font-weight: 700; color: var(--ink); text-decoration: none; white-space: nowrap; }
.binding-name:hover { color: var(--violet); }
.binding-note {
    padding: 0.1rem 0.45rem; border-radius: 999px;
    font: 600 0.6rem var(--sans); letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--ink-faint); background: var(--glass-2); border: 1px solid var(--line-strong);
}
.binding-ref {
    margin-left: auto; padding: 0.12rem 0.45rem; border-radius: 999px;
    font: 700 0.6rem var(--sans); letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--violet); background: rgba(167, 139, 250, 0.16); border: 1px solid rgba(167, 139, 250, 0.32);
}
.cmd {
    display: block; width: 100%;
    font: 500 0.82rem var(--mono); color: var(--ink-dim);
    background: var(--editor-bg); border: 1px solid var(--line);
    border-radius: 10px; padding: 0.5rem 0.7rem; cursor: pointer;
    white-space: normal; word-break: break-word;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.cmd:hover { color: var(--ink); border-color: var(--line-strong); }
.cmd .prompt { color: var(--ink-faint); user-select: none; }
.cmd.copied { color: var(--green); border-color: rgba(134, 239, 172, 0.5); }
.cmd.copied::after { content: " ✓ copied"; color: var(--green); font-size: 0.72rem; }

/* roomy two-column rows once there's width: name | command */
@media (min-width: 640px) {
    .binding-row { flex-direction: row; align-items: center; gap: 1.1rem; }
    .binding-head { width: 16rem; flex: none; flex-wrap: nowrap; }
    .binding-note, .binding-ref { flex: none; }
    .cmd { flex: 1; }
}

/* Converter status line + the feature-comparison table. */

.status { font: 500 0.82rem var(--sans); min-height: 1.4rem; }
.status-ok   { color: var(--green); }
.status-warn { color: var(--amber); }
.status-err  { color: #fca5a5; }
.warn-list { margin: 0.35rem 0 0; padding-left: 1.1rem; color: var(--amber); font-size: 0.78rem; line-height: 1.5; }

.cmp { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.9rem; }
.cmp th, .cmp td { padding: 0.85rem 1rem; text-align: center; border-bottom: 1px solid var(--line); }
.cmp th:first-child, .cmp td:first-child { text-align: left; color: var(--ink); font-weight: 500; }
.cmp thead th { font-weight: 700; color: var(--ink-dim); font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; }
.cmp thead th.col-ktav { color: var(--violet); }
.cmp tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
.cmp td.col-ktav { background: rgba(124, 58, 237, 0.08); }
.cmp thead th.col-ktav, .cmp tbody td.col-ktav { border-left: 1px solid rgba(167, 139, 250, 0.25); border-right: 1px solid rgba(167, 139, 250, 0.25); }
.mark-yes { color: var(--green); font-weight: 700; }
.mark-no  { color: #f87171; opacity: 0.8; }
.mark-part { color: var(--amber); font-weight: 700; }
.cmp .cell { display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; }
.cmp .note { display: block; font-size: 0.68rem; color: var(--ink-faint); font-weight: 400; margin-top: 0.15rem; }

/* Mobile: hide the per-cell notes so all 6 columns (incl. the key Ktav
   column) fit comfortably without a sideways scroll or ugly mid-word
   breaks. The ✓/~/✕ marks carry the comparison; the legend below explains
   them. Full notes return on wider screens. */
@media (max-width: 639px) {
    .cmp { font-size: 0.82rem; }
    .cmp th, .cmp td { padding: 0.6rem 0.3rem; }
    .cmp th:first-child, .cmp td:first-child { padding-left: 0.5rem; padding-right: 0.4rem; line-height: 1.3; }
    .cmp thead th { font-size: 0.66rem; letter-spacing: 0; }
    .cmp .note { display: none; }
}

/* "Why ktav?" Q&A cards. */

.why-item {
    border-radius: 18px;
    padding: 1.4rem 1.5rem;
    transition: transform 0.18s ease, border-color 0.18s ease;
}
.why-item:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.why-q {
    font-size: 1.12rem; font-weight: 700; color: var(--ink);
    margin: 0 0 0.6rem; line-height: 1.3;
    display: flex; gap: 0.55rem;
}
.why-q::before { content: "?"; color: var(--violet); font-weight: 800; }
.why-a { margin: 0; color: var(--ink-dim); font-size: 0.95rem; line-height: 1.65; }