/* dployr.nl: one page, the app's own fonts and colours, light and dark. */

@font-face { font-family: 'Russo One'; font-weight: 400; font-display: swap; src: url('fonts/russo-one-400.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans'; font-weight: 400; font-display: swap; src: url('fonts/noto-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans'; font-weight: 500; font-display: swap; src: url('fonts/noto-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans'; font-weight: 600; font-display: swap; src: url('fonts/noto-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans'; font-weight: 700; font-display: swap; src: url('fonts/noto-sans-700.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400; font-display: swap; src: url('fonts/jetbrains-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 500; font-display: swap; src: url('fonts/jetbrains-mono-500.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 700; font-display: swap; src: url('fonts/jetbrains-mono-700.woff2') format('woff2'); }

:root {
    --bg: #FCF7F8; --dots: #E6DCDE; --chrome: #FFFFFF;
    --line: #E5DCDD; --line-strong: #CFC4C6;
    --ink: #14110F; --ink-soft: #3A3331; --muted: #6B6260;
    --mono: 'JetBrains Mono', Consolas, monospace;
    --display: 'Russo One', 'Segoe UI', sans-serif;
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #14110F; --dots: #2A2523; --chrome: #0F0D0B;
        --line: #332D2A; --line-strong: #4A423E;
        --ink: #FCF7F8; --ink-soft: #DDD5D6; --muted: #A39A98;
    }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0; min-height: 100vh; display: flex; flex-direction: column;
    background-color: var(--bg);
    background-image: radial-gradient(var(--dots) 1px, transparent 1px);
    background-size: 18px 18px;
    color: var(--ink);
    font: 15px/1.5 'Noto Sans', 'Segoe UI', system-ui, sans-serif;
}
a { color: inherit; }
a:hover { opacity: 0.75; }
a:focus-visible, button:focus-visible { outline: 2px solid #1B9AAA; outline-offset: 2px; }
main { flex: 1 0 auto; }
.mono { font-family: var(--mono); font-size: 11px; }
.muted { color: var(--muted); }

/* Header and footer: the app's chrome bar. */
.bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px;
    min-height: 40px; padding: 0 24px;
    background: var(--chrome);
    font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em;
}
header.bar { border-bottom: 1px solid var(--line); }
footer.bar { border-top: 1px solid var(--line); font-size: 11px; justify-content: space-between; }
.bar nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 0 22px; font-weight: 700; }
.bar nav a { text-decoration: none; padding: 11px 0; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.logo-top { fill: var(--ink); stroke: var(--ink); }

/* A mono line above a block, ruled underneath. */
.rule {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 24px;
    padding-bottom: 8px; border-bottom: 1px solid var(--line-strong);
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--muted);
}
.rule b { color: var(--ink); }

.hero { padding: 40px 24px 0; }
h1 {
    margin: 0; padding: 18px 0 10px;
    font-family: var(--display); font-weight: 400;
    font-size: clamp(72px, 10vw, 152px); line-height: 0.86; letter-spacing: -0.01em;
    text-transform: uppercase;
}

.lanes { padding: 0 24px 48px; }
.lanes ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.lanes li {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px;
    padding: 14px 0; border-bottom: 1px dashed var(--line);
}
.env {
    flex: 0 0 190px; display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
}
.lane-text { flex: 1 1 360px; min-width: 0; font-size: clamp(16px, 1.3vw, 19px); font-weight: 500; line-height: 1.3; }

/* Installing: always dark, like a terminal. */
.terminal {
    display: flex; flex-direction: column; gap: 22px;
    padding: 36px 24px 40px;
    background: #0F0D0B; color: #FCF7F8;
    border-block: 1px solid #000;
}
.terminal .rule { color: #A39A98; border-bottom: 0; padding-bottom: 0; }
.terminal h2 { margin: 0; font-size: 11px; font-weight: 700; color: #C6F432; }
.command { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.command code {
    flex: 1 1 520px; min-width: 0;
    font-family: var(--mono); font-size: clamp(18px, 2.2vw, 30px); font-weight: 500; line-height: 1.15;
    overflow-wrap: anywhere;
}
.prompt { color: #C6F432; }
#copy {
    flex: none; min-width: 132px; height: 44px; padding: 0 18px;
    border: 1px solid #4A423E; border-radius: 0; background: transparent; color: #FCF7F8;
    font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 0.08em;
    cursor: pointer;
}
#copy:hover { border-color: #FCF7F8; }
#copy.done { background: #C6F432; border-color: #C6F432; color: #0F0D0B; }
.log {
    list-style: none; margin: 0; padding: 18px 0 0;
    border-top: 1px dashed #332D2A;
    display: flex; flex-direction: column; gap: 5px;
    font-family: var(--mono); font-size: 13px; color: #DDD5D6;
}
.log li { display: flex; gap: 16px; }
.log .n { flex: none; width: 24px; color: #6B6260; }
.log b { font-weight: inherit; }
.log .ok { color: #C6F432; }
.log .done { color: #5CC8D4; }

.release { display: flex; flex-direction: column; gap: 24px; padding: 48px 24px 56px; }
.release-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 40px; }
.release-head > div:first-child { display: flex; flex-direction: column; gap: 4px; margin-right: auto; }
.release h2 { margin: 0; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--muted); }
.version { font-family: var(--display); font-size: clamp(56px, 6vw, 88px); line-height: 0.9; font-variant-numeric: tabular-nums; }
.buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.btn {
    display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px;
    border: 1px solid var(--line-strong); text-decoration: none;
    font-family: var(--mono); font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em;
}
.btn.solid { border-color: var(--ink); background: var(--ink); color: var(--bg); }
dl { margin: 0; border-top: 1px solid var(--line-strong); }
dl > div { display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 12px 0; border-bottom: 1px dashed var(--line); }
dt { flex: 0 0 190px; padding-top: 2px; font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; }
dd { flex: 1 1 360px; min-width: 0; margin: 0; color: var(--ink-soft); }
dd a { text-underline-offset: 3px; }

@media (max-width: 560px) {
    .bar, .hero, .lanes, .terminal, .release { padding-left: 16px; padding-right: 16px; }
    .bar nav { margin-left: 0; }
    .lane-n { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}