:root {
  /* R3: the spec's cool-paper room is the site's default. */
  --shell: #e3e6ee; --bg: #eff1f6; --surface-1: #fafbfd; --surface-2: #eff2f7; --surface-3: #e3e7f0;
  --border: #d5dae6; --border-strong: #a7b0c4; --text: #1c2230; --muted: #59627a; --faint: #8890a6;
  --ch-b: #2d6be0; --ch-r: #e01838; --ch-g: #12b869; --warn: #b26a00;
  --heading: 'Tilt Warp', sans-serif; --body: Archivo, sans-serif; --mono: 'JetBrains Mono', monospace;
  --ease: cubic-bezier(.22, .61, .36, 1);
}
html[data-theme="dark"] {
  /* R1: the original dark projection booth. */
  --shell: #05060a; --bg: #07090e; --surface-1: #0e1118; --surface-2: #151a24; --surface-3: #1d2330;
  --border: #222939; --border-strong: #333d52; --text: #eef1f7; --muted: #9aa3b6; --faint: #687187;
  --ch-b: #3a7bff; --ch-r: #ff2f4d; --ch-g: #25e88a; --warn: #f5a623;
}
* { box-sizing: border-box; margin: 0; }
html { color-scheme: light; scroll-behavior: smooth; } html[data-theme="dark"] { color-scheme: dark; }
body { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--text); font: 400 15px/1.65 var(--body); -webkit-font-smoothing: antialiased; }
::selection { background: var(--ch-b); color: #fff; }
:focus-visible { outline: 2px solid var(--ch-b); outline-offset: 3px; }
a { color: var(--ch-b); text-underline-offset: .16em; } a:hover { color: #84a9ff; }
.wrap { width: min(100%, 68rem); margin: 0 auto; padding-inline: 1.75rem; }.page { flex: 1; }

/* Identity mark — a PNG per theme (the shell inverts light/dark, so the gate
   frame must invert too); the "Cinefin" wordmark supplies the accessible name. */
.mk-img { display: block; width: auto; }
.mk-nav { height: 33.6px; }
.mk-foot { height: 26.13px; }
.mk-dark { display: none; }
[data-theme="dark"] .mk-light { display: none; }
[data-theme="dark"] .mk-dark { display: block; }

/* A compact equipment-bar rather than a marketing navigation. */
.navbar { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--shell) 90%, transparent); border-bottom: 1px solid var(--border); backdrop-filter: blur(10px); }
nav { min-height: 3.55rem; display: flex; align-items: center; gap: .75rem; } nav .lk { color: var(--text); text-decoration: none; display: flex; align-items: center; gap: .68rem; } nav .lk:hover { color: var(--ch-b); } nav .name, footer .name { font: 400 1.3rem/1 var(--heading); }
nav .links { margin-left: auto; display: flex; align-items: center; gap: .25rem; } nav .links a { padding: .32rem .55rem; color: var(--muted); text-decoration: none; font-size: .82rem; font-weight: 500; } nav .links a:hover { color: var(--text); background: var(--surface-2); }
.theme-toggle { display: grid; place-items: center; margin-left: .25rem; width: 2rem; height: 2rem; padding: 0; cursor: pointer; color: var(--faint); background: transparent; border: 0; }.theme-toggle:hover { color: var(--text); }.theme-icon { width: .9rem; height: .9rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: square; stroke-linejoin: miter; }.theme-toggle .dark-icon { display: none; } html[data-theme="dark"] .theme-toggle .light-icon { display: none; } html[data-theme="dark"] .theme-toggle .dark-icon { display: block; }

/* Landing panel: the content remains the existing home-page structure. */
.hero-bg { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); }
/* The projection-room dust: a dot lattice fading in from top centre, in both grounds. */
.hero-bg::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(color-mix(in srgb, var(--text) 8%, transparent) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(46rem 24rem at 50% 0, #000 25%, transparent 72%); mask-image: radial-gradient(46rem 24rem at 50% 0, #000 25%, transparent 72%); }
.hero-bg > * { position: relative; }.hero { padding-top: clamp(4rem, 8vw, 6.8rem); text-align: center; }.hero h1 { margin: 0 auto; color: var(--text); font: 400 clamp(2.3rem, 5.7vw, 4.8rem)/1.05 var(--heading); letter-spacing: .01em; white-space: nowrap; }.hero h1 .accent { color: var(--ch-b); }
.hero p.sub { max-width: 44rem; margin: 1.45rem auto 0; color: var(--muted); font-size: 1.06rem; }.hero .overline { display: flex; align-items: center; justify-content: center; gap: .85rem; margin: 1.65rem auto 0; color: var(--text); font: 500 .82rem/1.4 var(--body); letter-spacing: .015em; }.hero .overline::before, .hero .overline::after { content: ''; width: clamp(2rem, 9vw, 5.5rem); height: 2px; }.hero .overline::before { background: var(--ch-b); }.hero .overline::after { background: var(--ch-g); }
.cta { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: .7rem; margin: 1.5rem auto 0; }.cta .btn { display: inline-flex; align-items: center; gap: .5rem; padding: .66rem 1.2rem; border: 1px solid transparent; border-radius: 2px; cursor: pointer; text-decoration: none; font: 500 .9rem var(--body); letter-spacing: .01em; transition: background 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease), transform 160ms var(--ease); }.cta .btn svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }.cta .btn-primary { background: var(--ch-b); color: #fff; }.cta .btn-primary:hover { background: #5b90ff; }.cta .btn-primary:active { background: #2868ed; transform: none; }.cta .btn-secondary { background: var(--surface-1); color: var(--text); border-color: var(--border-strong); }.cta .btn-secondary:hover { border-color: var(--ch-b); color: var(--ch-b); }.cta-note { margin-top: .85rem; color: var(--faint); font: .74rem/1.5 var(--mono); }.cta-note a { color: var(--muted); }.cta-note a:hover { color: var(--ch-b); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }.hero-shot { width: min(100%, 67rem); padding-inline: 1.75rem; margin: 3.5rem auto -1px; }.window { overflow: hidden; background: var(--shell); border: 1px solid var(--border-strong); }.window img { display: block; width: 100%; height: auto; }

section { padding-block: 5.5rem; } h2 { color: var(--text); font: 400 clamp(2rem, 4vw, 2.7rem)/1.1 var(--heading); letter-spacing: .01em; text-wrap: balance; }
/* A programme ledger, rather than a wall of marketing cards. */
.feat-sub { margin-top: .55rem; color: var(--muted); font-size: 1.02rem; }
.acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.75rem; margin-top: 2.6rem; align-items: start; }.act { --fc: var(--ch-b); }.act:nth-child(2) { --fc: var(--ch-g); }.act:nth-child(3) { --fc: var(--ch-r); }.act-num { display: block; color: color-mix(in srgb, var(--fc) 38%, transparent); font: 400 3.4rem/.9 var(--heading); letter-spacing: .02em; }.act h3 { margin-top: .4rem; color: var(--text); font: 400 1.5rem/1.05 var(--heading); letter-spacing: .01em; }.act-rule { display: block; width: 2.4rem; height: 3px; margin-top: .95rem; background: var(--fc); }.act-list { list-style: none; margin-top: 1.25rem; display: flex; flex-direction: column; gap: .95rem; }.act-list li { position: relative; padding-left: 1.05rem; color: var(--muted); font-size: .93rem; line-height: 1.55; }.act-list li::before { content: ''; position: absolute; left: 0; top: .5rem; width: 6px; height: 6px; background: var(--fc); }.act-list b { color: var(--text); font-weight: 500; }

section.tinted { position: relative; background: var(--surface-1); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
/* A whisper of the hero's dot texture, so the band feels lit rather than flat. */
section.tinted::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(color-mix(in srgb, var(--text) 7%, transparent) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(60rem 20rem at 50% 0, #000 20%, transparent 75%); mask-image: radial-gradient(60rem 20rem at 50% 0, #000 20%, transparent 75%); }
section.tinted > .wrap { position: relative; }.shots { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2rem; }.shots figure.wide { grid-column: 1 / -1; }.shots figure { min-width: 0; }.shots figure .window { transition: border-color 180ms var(--ease), transform 180ms var(--ease); }.shots figure:hover .window { border-color: var(--ch-b); transform: translateY(-2px); }.shots figcaption { display: flex; gap: .55rem; padding-top: .65rem; color: var(--muted); font-size: .82rem; }.shots figcaption::before { content: '—'; color: var(--ch-b); }
.fader { position: relative; overflow: hidden; }.fader img { animation: kiosk-fade 24s infinite; }.fader img + img { position: absolute; inset: 0; }.fader img:nth-child(1) { position: relative; }.fader img:nth-child(2) { animation-delay: 6s; opacity: 0; }.fader img:nth-child(3) { animation-delay: 12s; opacity: 0; }.fader img:nth-child(4) { animation-delay: 18s; opacity: 0; } @keyframes kiosk-fade { 0% { opacity: 0; z-index: 2; } 4%,25% { opacity: 1; } 29%,100% { opacity: 0; z-index: 1; } }.fader-dots { display: flex; gap: .36rem; margin-left: auto; }.fader-dots i { width: .38rem; height: .38rem; background: var(--border-strong); animation: dot-fade 24s infinite; }.fader-dots i:nth-child(2) { animation-delay: 6s; }.fader-dots i:nth-child(3) { animation-delay: 12s; }.fader-dots i:nth-child(4) { animation-delay: 18s; } @keyframes dot-fade { 0%,29%,100% { background: var(--border-strong); } 4%,25% { background: var(--ch-b); } }

.prose { width: min(100%, 47rem); margin: 0 auto; padding: 4.8rem 1.75rem 6rem; }.prose h1 { color: var(--text); font: 400 clamp(2.6rem, 6vw, 3.6rem)/1.05 var(--heading); }.prose .updated { margin-top: .8rem; color: var(--faint); font: .75rem var(--mono); }.prose h2 { margin-top: 2.8rem; font-size: 1.5rem; }.prose p { margin-top: .85rem; color: var(--muted); }.prose ul { margin: .85rem 0 0 1.2rem; color: var(--muted); }.prose li { margin-top: .35rem; }
.dl { padding-block: clamp(3.2rem, 7vw, 5.5rem) 6rem; }.dl-head { text-align: center; }.dl-head h1 { color: var(--text); font: 400 clamp(2.4rem, 5.4vw, 3.7rem)/1.05 var(--heading); letter-spacing: .01em; }.dl-head h1 .accent { color: var(--ch-b); }.dl-head .sub { max-width: 40rem; margin: 1.2rem auto 0; color: var(--muted); font-size: 1.04rem; }
.dl-split { display: grid; grid-template-columns: 1fr 1fr; gap: 2.25rem; margin-top: 2.75rem; align-items: start; }.dl-split .dl-grid { grid-template-columns: 1fr; gap: .7rem; }
.dl-product { --chan: var(--ch-b); display: flex; flex-direction: column; padding-top: 1.4rem; border-top: 2px solid var(--chan); }.dl-product.alt { --chan: var(--ch-g); }.dl-kicker { color: var(--ch-b); font: 500 .72rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }.dl-product.alt .dl-kicker { color: var(--ch-g); }.dl-product-head h2 { margin-top: .7rem; color: var(--text); font: 400 clamp(1.7rem, 3.4vw, 2.1rem)/1 var(--heading); letter-spacing: .01em; }.dl-product-head .desc { max-width: 44rem; margin-top: .6rem; color: var(--muted); font-size: 1rem; }.dl-channel { margin-top: 1.5rem; border-bottom: 1px solid var(--border); }.dl-tabs { display: flex; gap: 2rem; }.dl-tab { position: relative; display: flex; flex-direction: column; gap: .45rem; padding: .1rem 0 .7rem; background: none; border: 0; cursor: pointer; text-align: left; }.dl-tab-name { color: var(--faint); font: 500 .72rem/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; transition: color 150ms var(--ease); }.dl-tab:hover .dl-tab-name { color: var(--muted); }.dl-tab[aria-selected="true"] .dl-tab-name { color: var(--text); }.dl-tab-ver { color: var(--faint); font: .72rem/1 var(--mono); }.dl-tab-ver b { color: var(--muted); font-weight: 500; }.dl-tab[aria-selected="true"] .dl-tab-ver b { color: var(--chan); }.dl-tab[aria-selected="true"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--chan); }.dl-panels { margin-top: 1.35rem; }.dl-panel { display: none; }.dl-panel.is-active { display: block; }.dl-panels .dl-grid { margin-top: 0; }.dl-note { max-width: 44rem; margin-top: 1.35rem; padding-left: .85rem; border-left: 2px solid var(--chan); color: var(--muted); font-size: .86rem; line-height: 1.55; }.dl-note b { color: var(--text); font-weight: 500; }
.dl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.25rem; margin-top: 1.65rem; }.dl-card { background: var(--surface-1); border: 1px solid var(--border); }.dl-card .dl-head { display: flex; align-items: center; gap: .7rem; padding: .85rem 1.1rem .7rem; }.dl-card .ico { flex: none; width: 1.55rem; height: 1.55rem; }.dl-card .ico-win { color: var(--ch-b); }.dl-card .ico-win path { fill: currentColor; }.dl-card .ico-tux .body { fill: var(--text); }.dl-card .ico-tux .belly, .dl-card .ico-tux .eye { fill: var(--surface-1); }.dl-card .ico-tux .pupil { fill: var(--text); }.dl-card .ico-tux .beak, .dl-card .ico-tux .foot { fill: #f5a623; }.dl-card h3 { margin: 0; color: var(--text); font: 400 1.2rem/1 var(--heading); letter-spacing: .01em; }.dl-card .dl-flag { margin-left: -.2rem; color: var(--warn); font: 500 .64rem/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; }.dl-card .count { margin-left: auto; color: var(--faint); font: .72rem var(--mono); }.dl-card .assets { display: flex; flex-direction: column; gap: .5rem; padding: 0 1.1rem 1.1rem; }
.dl-asset { display: flex; align-items: center; gap: .55rem; padding: .58rem .75rem; color: var(--text); text-decoration: none; background: var(--surface-2); border: 1px solid var(--border-strong); font-size: .85rem; transition: border-color 150ms var(--ease), color 150ms var(--ease), background 150ms var(--ease); }.dl-asset:hover { border-color: var(--ch-b); color: var(--ch-b); background: color-mix(in srgb, var(--ch-b) 7%, var(--surface-2)); }.dl-asset > svg { flex: none; width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }.dl-asset .fname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.dl-asset .variant { flex: none; color: var(--faint); font: .72rem var(--mono); font-style: italic; }.dl-asset .fsize { flex: none; min-width: 3.4rem; text-align: right; color: var(--faint); font: .72rem var(--mono); }
.dl-card .ico-docker { color: #2496ed; }.dl-card .ico-docker path { fill: currentColor; }
.dl-cmd { display: flex; align-items: center; gap: .5rem; padding: .5rem .5rem .5rem .75rem; background: var(--surface-3); border: 1px solid var(--border-strong); }.dl-cmd code { flex: 1; min-width: 0; overflow-x: auto; color: var(--text); font: .8rem var(--mono); white-space: nowrap; }.dl-cmd .copy { flex: none; display: grid; place-items: center; width: 1.85rem; height: 1.85rem; padding: 0; cursor: pointer; color: var(--faint); background: var(--surface-1); border: 1px solid var(--border-strong); transition: color 150ms var(--ease), border-color 150ms var(--ease); }.dl-cmd .copy:hover { color: var(--ch-b); border-color: var(--ch-b); }.dl-cmd .copy.done { color: var(--ch-g); border-color: var(--ch-g); }.dl-cmd .copy svg { width: .95rem; height: .95rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }.dl-docker-note { margin-top: .25rem; color: var(--muted); font-size: .84rem; line-height: 1.55; }.dl-docker-note code { padding: .05rem .3rem; background: var(--surface-3); font: .78rem var(--mono); }
.dl-status { grid-column: 1 / -1; padding: 2.4rem 1.5rem; text-align: center; color: var(--muted); background: var(--surface-1); border: 1px dashed var(--border-strong); }.dl-status .sub { margin-top: .5rem; font-size: .85rem; color: var(--faint); }.dl-start { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; margin-top: 2.75rem; }.dl-start-lead { color: var(--muted); font-size: .95rem; }.btn-ghost { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.1rem; background: var(--surface-1); color: var(--text); text-decoration: none; border: 1px solid var(--border-strong); border-radius: 2px; font: 500 .88rem var(--body); transition: border-color 160ms var(--ease), color 160ms var(--ease), transform 160ms var(--ease); }.btn-ghost:hover { border-color: var(--ch-b); color: var(--ch-b); }.btn-ghost svg { flex: none; width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }.btn-ghost .arrow { transition: transform 160ms var(--ease); }.btn-ghost:hover .arrow { transform: translateX(3px); }
footer { margin-top: auto; padding-block: 1.4rem; background: var(--shell); border-top: 1px solid var(--border); } footer .row { display: flex; align-items: center; gap: .65rem; } footer .mk, footer .name { color: var(--text); } footer .row .links { display: flex; gap: 1rem; margin-left: auto; } footer .row .links a { color: var(--muted); text-decoration: none; font-size: .76rem; } footer .row .links a:hover { color: var(--ch-b); }
.reveal { opacity: 0; transform: translateY(12px); transition: opacity 340ms var(--ease), transform 340ms var(--ease); }.reveal.in { opacity: 1; transform: none; }
@media (max-width: 56rem) { .acts { grid-template-columns: 1fr; gap: 2.5rem; }.shots { grid-template-columns: 1fr; }.dl-split { grid-template-columns: 1fr; gap: 2.75rem; } } @media (max-width: 38rem) { .wrap, .hero-shot { padding-inline: 1rem; } nav .links { gap: 0; } nav .links a { padding-inline: .36rem; font-size: .75rem; }.hero { padding-top: 4rem; }.cta { flex-direction: column; }.cta .btn { justify-content: center; } section { padding-block: 4rem; } footer .row { align-items: flex-start; } footer .row .links { flex-direction: column; gap: .25rem; }.fader-dots { display: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }.reveal { opacity: 1; transform: none; }.fader img:nth-child(1) { opacity: 1; } }