/* nori-os.com and nori-lang.com — NoriOS's own look on the web: the Kelp palette, Sora and IBM Plex Mono,
   the shapes and the waterline of its desktop, and the light falling through water. */

@font-face { font-family: "Sora"; font-weight: 300; font-style: normal; font-display: swap; src: url(/assets/fonts/Sora-Light.7ad8d5a886.woff2) format("woff2"); }
@font-face { font-family: "Sora"; font-weight: 400; font-style: normal; font-display: swap; src: url(/assets/fonts/Sora-Regular.16cbb8e4e0.woff2) format("woff2"); }
@font-face { font-family: "Sora"; font-weight: 600; font-style: normal; font-display: swap; src: url(/assets/fonts/Sora-SemiBold.5b24d62242.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url(/assets/fonts/IBMPlexMono-Regular.4bb7f39205.woff2) format("woff2"); }

/* Kelp, dark (the default) */
:root {
  color-scheme: dark light;
  --seabed: #050e0a;
  --surface: #0e1d16;
  --surface-2: #13261d;
  --shallows: #1a3226;
  --deep: #08140e;
  --foam: #e3eedf;
  --salt: #8aa290;
  --frond: #9fcf6e;
  --sea-lettuce: #5fc08a;
  --line: rgba(170, 230, 160, .11);
  --link: #9fcf6e;
  --muted: #9bb3a0;
  --on-accent: #062012;
  --glow-1: rgba(95, 192, 138, .22);
  --glow-2: rgba(159, 207, 110, .12);
  --shaft: rgba(190, 240, 200, .045);
  --shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 4px 14px rgba(0, 0, 0, .45);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --sans: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --measure: 46rem;
  --wide: 76rem;
  --code-k: #9fcf6e;
  --code-t: #6fd0c0;
  --code-f: #e6d58c;
  --code-s: #eaa982;
  --code-n: #d6a2e6;
  --code-c: #7f9786;
}

/* Kelp, light */
@media (prefers-color-scheme: light) {
  :root {
    --seabed: #c7dfc9;
    --surface: #f4f9f2;
    --surface-2: #e8f2e5;
    --shallows: #d8e8d3;
    --deep: #cadfc6;
    --foam: #11200f;
    --salt: #58705a;
    --frond: #4d8a2a;
    --sea-lettuce: #2f8a5c;
    --line: rgba(30, 70, 30, .13);
    --link: #386a1d;          /* frond darkened for text: 5:1 or better on every light surface */
    --muted: #466048;         /* salt darkened, likewise */
    --on-accent: #f4f9f2;
    --glow-1: rgba(47, 138, 92, .16);
    --glow-2: rgba(77, 138, 42, .10);
    --shaft: rgba(255, 255, 255, .35);
    --shadow: 0 18px 44px rgba(20, 50, 20, .18), 0 2px 6px rgba(20, 50, 20, .12);
    --code-k: #33681a;
    --code-t: #0b6e63;
    --code-f: #6b5600;
    --code-s: #9a4417;
    --code-n: #7d3591;
    --code-c: #566c58;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--seabed);
  color: var(--foam);
  font: 400 1.0625rem/1.65 var(--sans);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
/* full width, so the glows behind the hero and the download reach the screen's edges and are clipped there: a
   phone lets its reader zoom out to anything wider than the screen, whatever body's overflow says */
main { flex: 1; width: 100%; padding: 1.5rem max(1.25rem, (100% - var(--wide)) / 2 + 1.25rem) 5rem; position: relative; overflow-x: clip; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--sea-lettuce); }
:focus-visible { outline: 2px solid var(--frond); outline-offset: 3px; border-radius: 6px; }

.skip { position: absolute; left: 1rem; top: -4rem; padding: .5rem .9rem; background: var(--frond); color: var(--on-accent); border-radius: 6px; z-index: 10; }
.skip:focus { top: 1rem; }

/* ---- the header ---- */
.top { position: relative; z-index: 2; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--deep) 85%, transparent); backdrop-filter: blur(10px); }
.bar { max-width: var(--wide); margin: 0 auto; padding: .8rem 1.25rem; display: flex; align-items: center; gap: .6rem 1.4rem; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--foam); text-decoration: none; font-size: 1.35rem; margin-right: auto; }
.brand:hover { color: var(--foam); }
.mark { width: 2.1rem; height: 2.1rem; flex: none; }
.mark-bg { fill: var(--shallows); }
.mark-low, .mark-high { fill: none; stroke-width: 2.6; stroke-linecap: round; }
.mark-low { stroke: var(--frond); }
.mark-high { stroke: var(--foam); opacity: .45; }
.w-strong { font-weight: 600; }
.w-light { font-weight: 300; color: var(--link); }

.main-nav { order: 2; }
.main-nav ul { list-style: none; display: flex; gap: .2rem; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.main-nav a { display: block; padding: .45rem .8rem; border-radius: 8px; color: var(--muted); text-decoration: none; white-space: nowrap; font-size: .95rem; transition: background .17s var(--ease), color .17s var(--ease); }
.main-nav a:hover { color: var(--foam); background: var(--surface-2); }
.main-nav a[aria-current] { color: var(--foam); background: var(--shallows); }
.main-nav a[href$="/download/"] { color: var(--on-accent); background: linear-gradient(135deg, var(--frond), var(--sea-lettuce)); font-weight: 600; margin-left: .3rem; }
.main-nav a[href$="/download/"]:hover { filter: brightness(1.08); }

.sites { order: 3; display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px; font-size: .8rem; }
.sites a { padding: .25rem .75rem; border-radius: 999px; color: var(--muted); text-decoration: none; }
.sites a:hover { color: var(--foam); }
.site-nori-os .to-os, .site-nori-lang .to-lang { background: var(--shallows); color: var(--foam); }

/* ---- text ---- */
.content { max-width: var(--measure); margin: 0 auto; }
.home .content, .wide .content { max-width: var(--wide); }
.wide .content > p, .wide .content > ul, .wide .content > ol { max-width: 50rem; }
h1, h2, h3, h4 { line-height: 1.15; margin: 2.2em 0 .6em; scroll-margin-top: 1rem; }
h1 { font-weight: 300; font-size: clamp(2.2rem, 1.3rem + 3.6vw, 4rem); letter-spacing: -.02em; margin-top: 1.5rem; }
h2 { font-weight: 600; font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2rem); letter-spacing: -.01em; }
h3 { font-weight: 600; font-size: 1.15rem; }
p, ul, ol, blockquote, pre, .table, figure { margin: 0 0 1.1rem; }
ul, ol { padding-left: 1.3rem; }
li { margin: .35rem 0; }
li::marker { color: var(--frond); }
strong { font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
code { font-family: var(--mono); font-size: .86em; background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: .05em .35em; overflow-wrap: anywhere; }
pre { background: var(--deep); border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.15rem; overflow-x: auto; line-height: 1.55; font-size: .88rem; }
pre code { background: none; border: 0; padding: 0; font-size: 1em; overflow-wrap: normal; }
/* Nori code, coloured by nori-web: keywords, types, called names, strings, numbers, comments */
.tok-k { color: var(--code-k); }
.tok-t { color: var(--code-t); }
.tok-f { color: var(--code-f); }
.tok-s { color: var(--code-s); }
.tok-n { color: var(--code-n); }
.tok-c { color: var(--code-c); font-style: italic; }
.table { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: .94rem; }
th, td { text-align: left; vertical-align: top; padding: .6rem .9rem; border-bottom: 1px solid var(--line); }
th { background: var(--surface-2); font-weight: 600; }
tr:last-child td { border-bottom: 0; }
h3 img, h2 img { width: 1.6rem; height: 1.6rem; vertical-align: -.35rem; margin-right: .45rem; }

/* ---- pictures and the clip: windows of the desktop, with the waterline across their top ---- */
figure { min-width: 0; }
figure a, figure.video { display: block; position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--deep); margin: 0; }
figure a::before, figure.video::before { content: ""; position: absolute; z-index: 1; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--frond), var(--sea-lettuce)); }
figure img, figure video { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
figcaption { color: var(--muted); font-size: .88rem; margin-top: .6rem; }
.content > p > img { max-width: 100%; height: auto; }

/* ---- buttons: a paragraph of links inside ::: buttons ---- */
.buttons p { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.6rem 0 0; }
.buttons a { display: inline-flex; align-items: center; padding: .8rem 1.4rem; border-radius: 999px; font-weight: 600; text-decoration: none; border: 1px solid var(--line); color: var(--foam); background: var(--surface-2); transition: transform .17s var(--ease), box-shadow .17s var(--ease), filter .17s var(--ease); }
.buttons a:first-child { color: var(--on-accent); background: linear-gradient(135deg, var(--frond), var(--sea-lettuce)); border-color: transparent; box-shadow: 0 10px 30px var(--glow-1); }
.buttons a:hover { transform: translateY(-1px); filter: brightness(1.06); color: var(--foam); }
.buttons a:first-child:hover { color: var(--on-accent); }

/* ---- the hero: light falling through water ---- */
.hero { position: relative; display: grid; gap: 2.5rem; align-items: center; margin: 1.5rem 0 4.5rem; padding: 2rem 0; isolation: isolate; }
.hero::before { content: ""; position: absolute; z-index: -1; inset: -6rem -40vw -4rem; background:
    radial-gradient(40rem 26rem at 72% 45%, var(--glow-1), transparent 70%),
    radial-gradient(30rem 20rem at 15% 20%, var(--glow-2), transparent 70%); }
.hero::after { content: ""; position: absolute; z-index: -1; inset: -6rem -40vw 0; background:
    repeating-linear-gradient(105deg, transparent 0 7rem, var(--shaft) 7rem 9rem, transparent 9rem 15rem);
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 80%); mask-image: linear-gradient(180deg, #000, transparent 80%);
    animation: drift 40s linear infinite alternate; }
@keyframes drift { from { transform: translateX(-4rem); } to { transform: translateX(4rem); } }
.hero h1 { margin-top: 0; }
.lead { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); font-weight: 300; max-width: 40rem; color: var(--foam); }
.lead p { margin-bottom: .8rem; }
@media (min-width: 62rem) { .hero { grid-template-columns: 5fr 7fr; } }

/* ---- the four promises under the hero ---- */
.pillars { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin: 0 0 5rem; }
.pillar { padding: 1.2rem 1.3rem .5rem; border-radius: 14px; background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 40%, transparent)); border: 1px solid var(--line); }
.pillar h3 { margin: 0 0 .5rem; display: flex; align-items: center; }
.pillar p { color: var(--muted); font-size: .96rem; }

/* ---- a picture beside its words, alternating sides ---- */
.showcase { display: grid; gap: 1.5rem 3.5rem; align-items: center; margin: 0 0 5.5rem; }
.showcase .text > :first-child { margin-top: 0; }
.showcase .text p, .showcase .text li { color: var(--muted); }
.showcase .text strong { color: var(--foam); }
.showcase .text h2 { margin-bottom: .8rem; }
@media (min-width: 56rem) {
  .showcase { grid-template-columns: 7fr 5fr; }
  .showcase.flip .shot { order: 2; }
  .showcase.flip { grid-template-columns: 5fr 7fr; }
}

/* ---- cards ---- */
.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin: 1.2rem 0 2.2rem; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1.2rem 1.3rem .5rem; transition: border-color .26s var(--ease), box-shadow .26s var(--ease), transform .26s var(--ease); }
.card:hover { border-color: color-mix(in srgb, var(--frond) 40%, transparent); box-shadow: 0 10px 36px var(--glow-2); transform: translateY(-2px); }
.card h3 { margin: 0 0 .5rem; display: flex; align-items: center; }
.card h3 a { color: var(--foam); text-decoration: none; }
.card h3 a::after { content: " →"; color: var(--frond); }
.card p { color: var(--muted); font-size: .95rem; }
.more { margin: 0 0 4rem; }

/* ---- the call at the end of a page ---- */
.cta { position: relative; text-align: center; margin: 3rem 0 0; padding: 3.5rem 1.5rem; border-radius: 22px; overflow: hidden; border: 1px solid var(--line);
  background: radial-gradient(40rem 18rem at 50% 0%, var(--glow-1), transparent 70%), var(--surface); }
.cta h2 { margin-top: 0; }
.cta p { color: var(--muted); max-width: 34rem; margin-left: auto; margin-right: auto; }
.cta .buttons p { justify-content: center; }

/* ---- the download page ---- */
.download { position: relative; display: grid; gap: 2.5rem; align-items: center; margin: 1rem 0 3.5rem; isolation: isolate; }
.download::before { content: ""; position: absolute; z-index: -1; inset: -6rem -40vw -3rem; background: radial-gradient(36rem 24rem at 70% 50%, var(--glow-1), transparent 70%); }
.download h1 { margin-top: 0; }
.download .small { margin-top: 1.2rem; }
.download .small code { font-size: .75rem; word-break: break-all; }
@media (min-width: 62rem) { .download { grid-template-columns: 6fr 6fr; } }
.steps { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin: 1rem 0 1.5rem; }
.step { padding: 1.2rem 1.3rem .4rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--frond); }
.step h3 { margin: 0 0 .5rem; }
.step p { color: var(--muted); font-size: .96rem; }

/* ---- the roadmap's three columns ---- */
.roadmap { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin: 2rem 0; }
.column { padding: 1.3rem 1.4rem .6rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.column:first-child { border-top: 2px solid var(--frond); }
.column h2 { margin: 0 0 .6rem; font-size: 1.3rem; }
.column li { color: var(--muted); }

.small, .small p { font-size: .88rem; color: var(--muted); }
.note { border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 1rem 1.2rem; margin: 0 0 1.4rem; color: var(--muted); }
.note p:last-child { margin-bottom: 0; }

/* ---- the footer ---- */
.foot { border-top: 1px solid var(--line); background: var(--deep); }
.foot-in { max-width: var(--wide); margin: 0 auto; padding: 2rem 1.25rem 2.6rem; color: var(--muted); font-size: .92rem; display: grid; gap: .4rem; }
.foot-in p { margin: 0; }
.foot-brand { color: var(--foam); }

@media (max-width: 40rem) {
  body { font-size: 1rem; }
  .bar { padding: .7rem 1rem; }
  .main-nav { order: 4; width: 100%; }
  .main-nav ul { flex-wrap: wrap; }
  .brand { font-size: 1.2rem; }
  .showcase, .pillars { margin-bottom: 3.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}