/* Tarn — a quiet desktop by the lake. */

:root {
  --bg: #f2f2ef;
  --ink: #161616;
  --muted: #6f6f6a;
  --faint: #9b9b95;
  --win: #ffffff;
  --line: rgba(0, 0, 0, 0.09);
  --bar: rgba(242, 242, 239, 0.74);
  --accent: #1b7384;
  --btn-bg: #161616;
  --btn-ink: #fafaf8;
  --shadow: 0 34px 70px -28px rgba(18, 32, 34, 0.32), 0 12px 26px -14px rgba(18, 32, 34, 0.2);
  --px-k: #1c5862; --px-o: #2d7c89; --px-h: #5aa6b2; --px-w: #e8f7f9; --px-s: #23656f;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0f1011;
  --ink: #ecece9;
  --muted: #9a9c98;
  --faint: #6c6e6b;
  --win: #1b1c1e;
  --line: rgba(255, 255, 255, 0.09);
  --bar: rgba(15, 16, 17, 0.72);
  --accent: #5cc8d6;
  --btn-bg: #ecece9;
  --btn-ink: #121212;
  --shadow: 0 34px 70px -24px rgba(0, 0, 0, 0.7), 0 12px 26px -14px rgba(0, 0, 0, 0.6);
  --px-k: #3b8994; --px-o: #6bb8c3; --px-h: #9ad3dc; --px-w: #f4fdff; --px-s: #4f9eab;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --bg: #0f1011;
      --ink: #ecece9;
    --muted: #9a9c98;
    --faint: #6c6e6b;
    --win: #1b1c1e;
    --line: rgba(255, 255, 255, 0.09);
    --bar: rgba(15, 16, 17, 0.72);
    --accent: #5cc8d6;
    --btn-bg: #ecece9;
    --btn-ink: #121212;
    --shadow: 0 34px 70px -24px rgba(0, 0, 0, 0.7), 0 12px 26px -14px rgba(0, 0, 0, 0.6);
    --px-k: #3b8994; --px-o: #6bb8c3; --px-h: #9ad3dc; --px-w: #f4fdff; --px-s: #4f9eab;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  position: relative;
  margin: 0;
  background-color: var(--bg);
  color: var(--ink);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* Menu bar */

.menubar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
  padding: 0 18px;
  font-size: 13.5px;
  background: var(--bar);
  -webkit-backdrop-filter: saturate(1.5) blur(16px);
  backdrop-filter: saturate(1.5) blur(16px);
  border-bottom: 1px solid var(--line);
}

.menu-left, .menu-right { display: flex; align-items: center; }
.menu-left { gap: 20px; }
.menu-left a { color: var(--muted); text-decoration: none; }
.menu-left a:hover { color: var(--ink); }
.menu-left .brand { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-weight: 600; }
.mark { width: 19px; height: 19px; }

.menu-right { gap: 15px; color: var(--muted); }
.status { display: inline-flex; align-items: center; color: var(--muted); }
.status svg { width: 16px; height: 16px; }
.theme { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; }
.theme:hover { color: var(--ink); }
.clock { font-variant-numeric: tabular-nums; min-width: 4.6em; text-align: right; }
.menu-download { color: var(--accent); font-weight: 500; text-decoration: none; }
.menu-download:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Hero */

.hero {
  position: relative;
  isolation: isolate;
  max-width: 1180px;
  margin: 0 auto;
  padding: 118px 24px var(--land);
  text-align: center;
  --land: clamp(300px, 30vw, 420px);
}

/* The wallpaper: a pixel tarn lit by the visitor's own clock (scene.js). It starts under the
   translucent menu bar and runs down behind the app window, which floats on the lake. script.js
   sizes it to whole pixels. */
.scene {
  position: absolute;
  z-index: -1;
  top: -36px;
  left: calc(50% - 50vw);
  width: 100vw;
  height: calc(100% + 36px);
  image-rendering: pixelated;
  pointer-events: none;
}

/* Below the lake's surface, deep water runs to the bottom of the page (scene.js, renderDeep). */
.deep {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  image-rendering: pixelated;
  pointer-events: none;
}
[data-lake] { --px-k: #3b8994; --px-o: #6bb8c3; --px-h: #9ad3dc; --px-w: #f4fdff; --px-s: #4f9eab; }
[data-lake] .fits p, [data-lake] .water, [data-lake] .foot { color: rgba(241, 239, 232, 0.8); }
[data-lake] .foot a { color: rgba(241, 239, 232, 0.92); }
[data-lake] .foot a:hover { color: #fff; }
[data-lake] .chips li { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); color: #f4f2ec; }
[data-lake] .chips span { color: rgba(241, 239, 232, 0.66); }

/* Text sits on the sky, so its colour follows the scene: ink on a bright dawn or day sky, warm
   white on dusk, night and on every sky in dark mode. */
.hero[data-phase] { --scene-ink: #111317; --scene-muted: #1f2630; --scene-faint: #2b333e; --scene-btn: #111317; --scene-btn-ink: #fafaf8; }
.hero[data-phase="dusk"], .hero[data-phase="night"], .hero[data-phase][data-dark] {
  --scene-ink: #f7f4ee; --scene-muted: rgba(247, 244, 238, 0.86); --scene-faint: rgba(247, 244, 238, 0.7);
  --scene-btn: #f7f4ee; --scene-btn-ink: #111317;
}
.hero[data-phase] h1 { color: var(--scene-ink); }
.hero[data-phase] .sub { color: var(--scene-muted); }
.hero[data-phase] .req { color: var(--scene-faint); }
.hero[data-phase] .btn { background: var(--scene-btn); color: var(--scene-btn-ink); }

h1 {
  margin: 0 auto 18px;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-weight: 400;
  font-size: clamp(44px, 6.6vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.022em;
}

.sub { margin: 0 0 32px; font-size: 19px; color: var(--muted); }

.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.45);
}
.btn:hover { transform: translateY(-1px); }
.btn[aria-disabled="true"] { opacity: 0.55; cursor: default; transform: none; }

.req { margin: 14px 0 0; font-size: 13px; color: var(--faint); }

/* A disk image sitting on the desktop. */
.desk-file {
  position: absolute;
  top: 318px;
  right: 4%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 108px;
  text-decoration: none;
}
.desk-file img { width: 72px; height: 72px; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.2)); transition: transform 0.15s ease; }
.desk-file span {
  padding: 1px 7px;
  border-radius: 5px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  background: color-mix(in srgb, var(--win) 78%, transparent);
}
.desk-file:hover img { transform: translateY(-2px); }
.desk-file:hover span { background: var(--accent); color: #fff; }

/* The desktop with the app on it */

.desk {
  position: relative;
  isolation: isolate;
  max-width: 1180px;
  margin: calc(-1 * var(--float)) auto 0;
  padding: 0 24px;
  --float: 110px;
}

.win {
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--win);
  box-shadow: var(--shadow);
}

.win.main { max-width: 1040px; margin: 0 auto; aspect-ratio: 16 / 10; }

.clip-video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--win); }

.clips {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 34px 40px;
  max-width: 980px;
  margin: -44px auto 0;
}

.clip { transform: rotate(var(--r, 0deg)) translateY(var(--y, 0)); transition: transform 0.25s ease; }
.clip:nth-child(1) { --r: -1.4deg; --y: 0px; }
.clip:nth-child(2) { --r: 1.1deg; --y: 26px; }
.clip:nth-child(3) { --r: 0.8deg; --y: -6px; }
.clip:nth-child(4) { --r: -1deg; --y: 20px; }
.clip:hover { transform: rotate(0deg) translateY(-4px); }
.clip .clip-video { aspect-ratio: 16 / 10; height: auto; }

.titlebar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  font-size: 11.5px;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.titlebar i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }
.titlebar i:nth-child(2) { background: #febc2e; }
.titlebar i:nth-child(3) { background: #28c840; }
.titlebar span { flex: 1; margin-right: 33px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Below the desk */

.fits { margin: 104px auto 0; padding: 0 24px; text-align: center; }
.fits p { margin: 0 0 14px; font-size: 15px; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.chips li {
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--win);
  font-size: 14.5px;
  font-weight: 500;
}
.chips span { margin-right: 7px; font-weight: 400; color: var(--muted); }

.water {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 720px;
  margin: 54px auto 0;
  padding: 0 24px;
  font-size: 14.5px;
  color: var(--muted);
}
.water .px-drop { flex: none; width: 16px; height: 22px; }
.px-k { fill: var(--px-k); } .px-o { fill: var(--px-o); } .px-h { fill: var(--px-h); } .px-w { fill: var(--px-w); } .px-s { fill: var(--px-s); }
.water p { margin: 0; }

.foot { margin: 112px auto 0; padding: 0 24px 52px; text-align: center; font-size: 13px; color: var(--faint); }
.foot p { margin: 4px 0; }
.foot a { margin: 0 5px; color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Privacy page */

.page { max-width: 640px; margin: 84px auto 0; padding: 0 24px; line-height: 1.65; }
.page h1 { font-size: clamp(38px, 5vw, 52px); margin-bottom: 8px; }
.page h2 { margin: 36px 0 8px; font-size: 18px; font-weight: 600; }
.page p, .page li { color: var(--muted); }
.page strong { color: var(--ink); font-weight: 500; }
.page a { color: var(--accent); }

@media (max-width: 1100px) {
  .desk-file { display: none; }
}

@media (max-width: 900px) {
  .hero { padding-top: 84px; }
  .clips { margin-top: 26px; gap: 16px; }
  .clip, .clip:hover { transform: none; }
  .fits { margin-top: 72px; }
}

@media (max-width: 600px) {
  .hero { --land: 250px; }
  .desk { --float: 70px; }
  .menu-left a:not(.brand), .clock { display: none; }
  .sub { font-size: 17px; }
  .win.main { border-radius: 10px; }
  .clips { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}