@font-face { font-family: "Schibsted Grotesk"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/schibsted-grotesk-400.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/schibsted-grotesk-500.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/schibsted-grotesk-600.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/schibsted-grotesk-700.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/ibm-plex-mono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/ibm-plex-mono-500.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --bg: #F5F4F0; --ink: #22252A; --body: #3A3F47; --muted: #4A4F57; --rule: #D9D8D2;
  --oc-band: #E9EDF2; --oc-accent: #3D5F8F; --oc-soft: #A6B6CC; --oc-body: #343A44; --oc-muted: #4A5566; --oc-note: #4A5566;
  --sw-band: #F4E9E2; --sw-accent: #B9432A; --sw-soft: #D9A994; --sw-body: #3E3430; --sw-muted: #5A4A44; --sw-note: #766660;
  --ex-band: #ECE7F0; --ex-accent: #6B4A7D; --ex-soft: #B3A0BF; --ex-body: #3A3340; --ex-muted: #554B5B; --ex-note: #6F6574;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --sans: "Schibsted Grotesk", system-ui, sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1B1E23; --ink: #ECE9E4; --body: #C4C8CE; --muted: #A8ADB5; --rule: #343941;
  --oc-band: #1A2230; --oc-accent: #8FB0E0; --oc-soft: #4E6584; --oc-body: #C9CFD8; --oc-muted: #9AA6B8; --oc-note: #9AA6B8;
  --sw-band: #2A1F1B; --sw-accent: #F08A6C; --sw-soft: #6E4536; --sw-body: #D8CCC7; --sw-muted: #BBA49B; --sw-note: #A08D85;
  --ex-band: #241D2B; --ex-accent: #C3A6DA; --ex-soft: #6C5880; --ex-body: #D3CCD9; --ex-muted: #ABA0B5; --ex-note: #8F849B;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 18px; line-height: 1.6; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.tnum { font-variant-numeric: tabular-nums; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }
.mono { font-family: var(--mono); }

.inner { --gutter: 24px; max-width: calc(1120px - 48px + 2 * var(--gutter)); margin: 0 auto; padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
.split { display: flex; flex-wrap: wrap; gap: 32px 80px; }
.split > .left { flex: 1 1 340px; }
.split > .right { flex: 999 1 440px; min-width: 0; max-width: 600px; }

.site-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 28px; padding-top: 32px; }
.site-header .name { font-weight: 600; }
.site-header nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; font-size: 15px; }
.theme-toggle { width: 32px; height: 32px; margin-left: -6px; border-radius: 50%; border: 1px solid var(--rule); background: none; color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: block; }
:root[data-theme="dark"] .theme-toggle .moon { display: none; }

@media (min-width: 908px) {
  .era-title { position: sticky; top: 40px; align-self: flex-start; }
}

.hero { padding: 128px 0; max-width: 820px; }
.hero h1 { margin: 0 0 28px; font-size: clamp(48px, 7vw, 88px); line-height: 1; font-weight: 700; letter-spacing: -0.03em; }
.hero p { margin: 0; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.45; color: var(--body); }
.hero p + p { margin-top: 16px; }

.lang { white-space: nowrap; }
.lang .ha { display: inline-block; }
.lang-oc { font-family: var(--mono); color: var(--oc-accent); }
.lang-oc .b-l, .lang-oc .b-r { color: var(--oc-soft); }
.lang-sw { font-weight: 700; color: var(--sw-accent); }
.lang-sw .dot { font-family: var(--mono); font-weight: 500; color: var(--sw-soft); }
.band-sw .era-name .soft { font-family: var(--mono); font-weight: 500; }
.lang-ex { color: var(--ex-accent); }
.lang-ex .pipe { font-family: var(--mono); color: var(--ex-soft); }

.lang-oc .b-l, .lang-oc .b-r { transition: opacity .45s cubic-bezier(.2,.9,.2,1) .5s, transform .45s cubic-bezier(.2,.9,.2,1) .5s; }
.lang-oc .name { transition: opacity .4s ease-out .35s; }
.lang-sw .dot { transition: opacity .35s cubic-bezier(.3,.7,.2,1) .95s, transform .35s cubic-bezier(.3,.7,.2,1) .95s; }
.lang-sw .word { transition: opacity .3s cubic-bezier(.1,.9,.2,1) 1.15s, transform .3s cubic-bezier(.1,.9,.2,1) 1.15s; }
.lang-ex .pipe { transition: opacity .4s cubic-bezier(.3,.7,.2,1) 1.65s, transform .4s cubic-bezier(.3,.7,.2,1) 1.65s; }
.lang-ex .push { transition: opacity .4s cubic-bezier(.3,.7,.2,1) 1.85s, transform .4s cubic-bezier(.3,.7,.2,1) 1.85s; }

html.js .hero:not(.in) .lang .ha { opacity: 0; }
html.js .hero:not(.in) .lang-oc .b-l { transform: translateX(-0.5em); }
html.js .hero:not(.in) .lang-oc .b-r { transform: translateX(0.5em); }
html.js .hero:not(.in) .lang-sw .dot { transform: translateX(-0.8em); }
html.js .hero:not(.in) .lang-sw .word { transform: translateX(-0.6em); }
html.js .hero:not(.in) .lang-ex .pipe { transform: translateX(-0.9em); }
html.js .hero:not(.in) .lang-ex .push { transform: translateX(-0.35em); }

@media (prefers-reduced-motion: reduce) {
  .lang .ha { transition: none !important; transform: none !important; }
}

.band { padding: 112px 0; }
.band-oc { background: var(--oc-band); --accent: var(--oc-accent); --soft: var(--oc-soft); --era-body: var(--oc-body); --era-muted: var(--oc-muted); }
.band-sw { background: var(--sw-band); --accent: var(--sw-accent); --soft: var(--sw-soft); --era-body: var(--sw-body); --era-muted: var(--sw-muted); }
.band-ex { background: var(--ex-band); --accent: var(--ex-accent); --soft: var(--ex-soft); --era-body: var(--ex-body); --era-muted: var(--ex-muted); }
.era-name { font-size: clamp(44px, 6.4vw, 88px); line-height: 1; color: var(--accent); }
.band-oc .era-name { font-family: var(--mono); letter-spacing: -0.02em; }
.band-sw .era-name { font-weight: 700; letter-spacing: -0.03em; }
.band-ex .era-name { font-weight: 500; letter-spacing: -0.02em; }
.era-name .soft { color: var(--soft); }
.band-ex .era-name .soft { font-family: var(--mono); }
.years { margin-top: 16px; font-size: 15px; color: var(--era-muted); }
.band h2 { margin: 0 0 14px; font-size: 28px; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
.band h3 { margin: 0 0 10px; font-size: 20px; line-height: 1.3; font-weight: 600; }
.band .right > p { margin: 0 0 40px; color: var(--era-body); }
.band .sub { margin-top: 72px; }
.band .sub > p { margin: 0 0 32px; color: var(--era-body); }
.showcase { margin: 0; }

.showcase { display: flex; flex-wrap: wrap; gap: 32px 40px; align-items: center; }
.showcase > svg { flex: 0 1 300px; width: 100%; max-width: 300px; height: auto; aspect-ratio: 1; overflow: visible; }
.showcase ul { flex: 1 1 240px; min-width: 0; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.showcase li button { width: 100%; text-align: left; background: none; border: 0; padding: 8px 0; font: inherit; color: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.showcase .item-name { font-size: 18px; font-weight: 600; color: var(--item-ink, var(--ink)); }
.showcase .mark { font-family: var(--mono); font-weight: 500; color: transparent; transition: color .3s ease; }
.showcase button[aria-pressed="true"] .mark { color: var(--accent); }
.showcase .item-note { font-size: 15px; color: var(--note); transition: color .3s ease; }
.showcase button[aria-pressed="true"] .item-note { color: var(--note-on, var(--note)); }

.pulse-head { animation: pulse-head var(--pulse, 3.2s) linear infinite; }
.pulse-tail { animation: pulse-tail var(--pulse, 3.2s) linear infinite; }
@keyframes pulse-head { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes pulse-tail { from { stroke-dashoffset: 114; } to { stroke-dashoffset: 14; } }

@media (prefers-reduced-motion: reduce) {
  .pulse-head, .pulse-tail, .moving { display: none; }
  .showcase * { transition: none !important; }
}

.band-oc { --oc-faint: #C3CFDD; --oc-line: #D3DCE6; --oc-screen: #F7F9FB; --oc-screen2: #FBFCFD; --oc-glyph: #FFFFFF; --note: var(--oc-note); }
:root[data-theme="dark"] .band-oc { --oc-faint: #3A4A61; --oc-line: #2C3A4E; --oc-screen: #1F2938; --oc-screen2: #222D3D; --oc-glyph: #1A2230; }
.showcase-oc .mark { font-weight: 400; }

.oc-scale { transform-origin: 150px 150px; transform: scale(.78); transition: transform .45s cubic-bezier(.6,0,.25,1.3) .12s; }
.oc-frame { x: 80px; y: 2px; width: 140px; height: 296px; rx: 24px;
  transition: x .45s cubic-bezier(.6,0,.25,1.3) .12s, y .45s cubic-bezier(.6,0,.25,1.3) .12s, width .45s cubic-bezier(.6,0,.25,1.3) .12s, height .45s cubic-bezier(.6,0,.25,1.3) .12s, rx .45s cubic-bezier(.6,0,.25,1.3) .12s; }
.showcase-oc[data-sel="mac"] .oc-scale { transform: none; }
.showcase-oc[data-sel="more"] .oc-scale { transform: scale(.95); }
.showcase-oc[data-sel="mac"] .oc-frame { x: 10px; y: 50px; width: 280px; height: 200px; rx: 10px; }
.showcase-oc[data-sel="more"] .oc-frame { x: 115px; y: 70px; width: 70px; height: 140px; rx: 12px; }
.oc-deco { opacity: 0; transition: opacity .25s ease; }
.oc-deco.on { opacity: 1; transition-delay: .38s; }
.oc-contents { transition: opacity .25s ease; }
.showcase-oc.fading .oc-contents { opacity: 0; }
.oc-content:not(.on) { display: none; }
.oc-content.on { animation: oc-in .4s ease var(--in, .15s) both; }
.showcase-oc.morph .oc-content.on { --in: .45s; }
.oc-draw { stroke-dasharray: 120; stroke-dashoffset: 120; }
.oc-content.on .oc-draw { animation: oc-draw .5s ease-out var(--d) forwards; }
.oc-appear { opacity: 0; }
.oc-content.on .oc-appear { animation: oc-in .4s ease var(--d) forwards; }
.oc-pop { opacity: 0; }
.oc-content.on .oc-pop { animation: oc-pop .3s cubic-bezier(.2,.9,.3,1.2) var(--d) forwards; }
.oc-pulse { transform-origin: 150px 140px; opacity: 0; }
.oc-content.on .oc-pulse { animation: oc-pulse .9s ease-out 1.6s forwards; }
.oc-content.on .oc-ring { animation: oc-ring 1.2s ease .6s forwards; }
.oc-content.on .oc-unlock { animation: oc-unlock 1.2s cubic-bezier(.3,.7,.2,1) .6s forwards; }
.oc-light { fill-opacity: 0; }
.oc-content.on .oc-light { animation: oc-light .3s ease var(--d) forwards; }
.oc-grow { transform-origin: 112px 240px; transform: scaleX(0); }
.oc-bar { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); }
.oc-content.on .oc-bar { animation: oc-bar .45s cubic-bezier(.2,.9,.3,1.1) var(--d) forwards, oc-sway 2.6s ease-in-out calc(var(--d) + .6s + var(--t, 0s)) infinite alternate; }
.oc-content.on .oc-tile { animation: oc-pop .3s cubic-bezier(.2,.9,.3,1.2) var(--d) forwards, oc-tap 3.2s ease-in-out calc(var(--d) + 1s + var(--t, 0s)) infinite; }
.oc-scan { opacity: 0; fill-opacity: .16; }
.oc-content.on .oc-scan { animation: oc-scan 5s ease-in-out 1.8s infinite; }
.oc-content.on .oc-grow { animation: oc-grow 1s ease-out 2.9s forwards; }
@keyframes oc-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes oc-draw { from { stroke-dashoffset: 120; } to { stroke-dashoffset: 0; } }
@keyframes oc-pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes oc-unlock { 0%, 40% { transform: none; } 100% { transform: translateY(-5px); } }
@keyframes oc-ring { 0%, 40% { stroke: var(--oc-soft); } 100% { stroke: var(--oc-accent); } }
@keyframes oc-pulse { from { opacity: .6; transform: scale(1); } to { opacity: 0; transform: scale(1.5); } }
@keyframes oc-light { 0% { fill-opacity: 0; } 100% { fill-opacity: .85; } }
@keyframes oc-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes oc-bar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes oc-sway { from { transform: scaleY(1); } to { transform: scaleY(.7); } }
@keyframes oc-tap { 0%, 84%, 100% { transform: none; } 90% { transform: scale(.82); } }
@keyframes oc-scan { 0% { opacity: 0; transform: none; } 6%, 18% { opacity: 1; transform: none; } 24%, 36% { opacity: 1; transform: translateY(14px); } 42%, 54% { opacity: 1; transform: translateY(28px); } 60%, 72% { opacity: 1; transform: translateY(42px); } 78%, 90% { opacity: 1; transform: translateY(56px); } 100% { opacity: 0; transform: translateY(56px); } }
@media (prefers-reduced-motion: reduce) {
  .oc-scale, .oc-frame, .oc-deco, .oc-contents { transition: none !important; }
  .oc-content.on, .oc-anim { animation: none !important; opacity: 1; }
  .oc-draw { stroke-dashoffset: 0; }
  .oc-pop, .oc-grow, .oc-bar { transform: none; }
  .oc-ring { stroke: var(--oc-accent); }
  .oc-light { fill-opacity: .85; }
}

.band-sw { --note: var(--sw-note); --note-on: #5A4A44; --cbg: #F4E9E2; --line: #E2CDC2; --back: #A88070; --stroke: #C9A598; --fill: #FBF4F0; --hifill: #F7E5DC; }
:root[data-theme="dark"] .band-sw { --item-ink: #EDE3DE; --note-on: #C4B2AA; --cbg: #2A1F1B; --line: #4D3A33; --back: #C9A08F; --stroke: #6E5048; --fill: #33251F; --hifill: #3D2B24; }

.showcase .st { stroke: var(--stroke); }
.showcase :is(.st, .fl, .fa) { transition: stroke .4s ease, fill .4s ease, opacity .4s ease; }
.showcase .st.on { stroke: var(--accent); }
.showcase .fl { fill: var(--fill); }
.showcase .fl.on { fill: var(--hifill); }
.showcase .fa { fill: var(--stroke); }
.showcase .fa.on { fill: var(--accent); }
.showcase .glow { opacity: 0; transition: opacity .4s ease; }
.showcase .glow.on { opacity: 1; }
.showcase .grp { transition: opacity .45s ease; }
.showcase .grp.dim { opacity: .35; }
.showcase .grp-sel:not(.on) { opacity: var(--off, .45); }

.band-ex { --note: var(--ex-note); --note-on: #554B5B; --cbg: #ECE7F0; --line: #D5CCDB; --stroke: #B3A0BF; --fill: #F6F2F9; --hifill: #EEE7F3; --f1: #B0896A; --f2: #6F937B; --f3: #7F89B8; }
:root[data-theme="dark"] .band-ex { --item-ink: #D9D1E2; --note-on: #ABA0B5; --cbg: #241D2B; --line: #463D52; --stroke: #5E5169; --fill: #2A2433; --hifill: #33293E; --f1: #C49B7C; --f2: #86AD92; --f3: #99A3D2; }
.showcase-ex .eg { transition: opacity .45s ease; }
.showcase-ex[data-sel="registration"] :is(.eg-mid, .eg-out, .eg-cache) { opacity: .3; }
.showcase-ex[data-sel="ingest"] :is(.eg-out, .eg-cache) { opacity: .3; }
.showcase-ex[data-sel="translate"] .eg-in { opacity: .3; }
.showcase-ex[data-sel="translate"] .eg-cache { opacity: .6; }
.showcase-ex[data-sel="cache"] :is(.eg-in, .eg-out) { opacity: .3; }
.showcase-ex[data-sel="cache"] .eg-mid { opacity: .5; }

.closing { padding-top: 112px; padding-bottom: 64px; }
.closing > section { padding-bottom: 112px; }
.closing > section > h2 { margin: 0; font-size: 36px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 36px 40px; }
.card { display: flex; flex-direction: column; gap: 4px; }
.card .tag { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.card .tag-sw { color: var(--sw-accent); }
.card .tag-oc { color: var(--oc-accent); }
.card .tag-ex { color: var(--ex-accent); }
.card h3 { margin: 0; font-size: 18px; line-height: 1.35; font-weight: 600; }
.card p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.facts { margin: 0; border-top: 1px solid var(--rule); }
.facts > div { display: flex; flex-wrap: wrap; gap: 4px 24px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.facts dt { flex: 0 0 140px; font-family: var(--mono); font-size: 13px; line-height: 1.9; color: var(--muted); }
.facts dd { flex: 1 1 260px; margin: 0; font-size: 16px; line-height: 1.6; color: var(--body); }
.facts dd span { display: block; }
.site-footer { border-top: 1px solid var(--rule); padding-top: 24px; display: flex; flex-wrap: wrap; gap: 12px 28px; font-size: 15px; }

@media (max-width: 560px) {
  .inner { --gutter: 28px; }
  .showcase { gap: 24px 40px; }
  .showcase > svg { max-width: 240px; margin-inline: auto; }
}

a.lang { text-decoration: none; }
a.lang:hover .ha { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media (max-width: 907px) {
  .split > .right { max-width: 820px; }
}

.mini-header { position: fixed; top: 0; left: 0; right: 0; z-index: 10; padding-top: env(safe-area-inset-top);
  background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule); opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease; }
.mini-header.show { opacity: 1; transform: none; pointer-events: auto; }
.mini-header .inner { display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; height: 52px; }
.mini-header .name { font-weight: 600; font-size: 15px; text-decoration: none; }
.mini-header nav { display: flex; align-items: center; gap: 8px 22px; font-size: 14px; }
.mini-header .theme-toggle { width: 28px; height: 28px; margin-left: -4px; }
.era-title { transition: top .25s ease; }
@media (min-width: 908px) {
  html.header-on .era-title { top: 76px; }
}
@media (max-width: 560px) {
  .mini-header nav a[href="#eras"] { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mini-header, .era-title { transition: none; }
}

html:not(.js) .theme-toggle { display: none; }