/* Day and night. Pages keep their own :root day palette; night overrides it (higher specificity). */
:root { --bubble: #fff; --on-ink: #fff; --band: #0E1B26; --code: #0E1B26; --line2: #D3D0C8;
  --ink-rgb: 14,27,38; --shadow-rgb: 14,27,38; --paper-rgb: 246,245,241; --card-rgb: 255,255,255; }
:root[data-theme="dark"] { color-scheme: dark;
  --paper: #0C151C; --card: #131F28; --ink: #E9EDF0; --ink2: #A3AFB8; --quiet: #6F7C86; --line: #22323E; --line2: #2C3E4B; --tint: rgba(255,90,31,.12);
  --bubble: #1C2B37; --on-ink: #0C151C; --band: #16242F; --code: #070D12;
  --ink-rgb: 233,237,240; --shadow-rgb: 0,0,0; --paper-rgb: 12,21,28; --card-rgb: 19,31,40; }
html.theming, html.theming * { transition: background-color .45s, color .45s, border-color .45s, box-shadow .45s !important; }

/* the switch: day / night, the lit side wears the orange */
.theme { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); cursor: pointer; font: 11px var(--mono); color: var(--quiet); }
.theme span { padding: 4px 9px; border-radius: 999px; transition: background .3s, color .3s; }
.theme span:first-child, :root[data-theme="dark"] .theme span:last-child { background: var(--raft); color: #fff; }
:root[data-theme="dark"] .theme span:first-child { background: none; color: var(--quiet); }

/* Shared raft look: the floating plank title, rope lashings, its reflection, the live badge and the pause button.
   Used by the landing (index.html) and the app (app.html). Pages set their own title size. */
.title { position: relative; flex: none; }
.title h1 { font-weight: 800; line-height: .78; letter-spacing: -.07em; padding: 0 .04em .02em 0; }
.title h1 span { background: repeating-linear-gradient(180deg, var(--ink) 0 .2em, transparent .2em .225em); -webkit-background-clip: text; background-clip: text; color: transparent; }
.title h1 .o { background-image: repeating-linear-gradient(180deg, var(--raft) 0 .2em, transparent .2em .225em); }
.bob { position: relative; transform-origin: 50% 100%; animation: bob 5.5s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-1.4deg); } 50% { transform: translateY(7px) rotate(1.1deg); } }
.rope { position: absolute; top: -3%; bottom: -3%; width: 11px; border-radius: 3px;
  background: repeating-linear-gradient(-58deg, var(--raft) 0 2.5px, transparent 2.5px 5px); opacity: .95; }
.reflect { position: absolute; left: 0; right: 0; top: 100%; transform: translateY(55%) scaleY(-.55); transform-origin: top; opacity: .18; filter: url(#water);
  -webkit-mask-image: linear-gradient(to top, #000, transparent 80%); mask-image: linear-gradient(to top, #000, transparent 80%); pointer-events: none; }

.badge { position: absolute; left: 28px; bottom: 28px; font: 13px var(--sans); color: var(--ink2); display: flex; gap: 10px; align-items: center; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--raft); animation: ping 1.6s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(255,90,31,.6); } 100% { box-shadow: 0 0 0 10px rgba(255,90,31,0); } }
.pause { position: absolute; right: 28px; bottom: 24px; width: 38px; height: 38px; border: 1px solid var(--line); background: var(--paper); font: 13px var(--mono); cursor: pointer; color: var(--ink2); }
.still .bob, .still .dot { animation-play-state: paused !important; }

@media (max-width: 860px) {
  .rope { width: 8px; }
  .badge { left: 20px; bottom: 26px; font-size: 11px; }
  .pause { right: 20px; bottom: 18px; }
}

/* ---------- site header: plank wordmark, tracker links, a raft riding the scroll ---------- */
.site { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background .4s, box-shadow .4s; }
.site.solid { background: rgba(var(--paper-rgb),.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.site nav { display: flex; justify-content: space-between; align-items: center; height: 68px; }
.site .logo { display: flex; gap: 10px; align-items: center; text-decoration: none; }
.site .mark { width: 36px; height: 36px; background: var(--ink); animation: bob 4s ease-in-out infinite;
  -webkit-mask: url(/assets/mark.png) center / contain no-repeat; mask: url(/assets/mark.png) center / contain no-repeat; }
.word { font: 800 32px/1 var(--sans); letter-spacing: -.07em; }
.word span { background: repeating-linear-gradient(180deg, var(--ink) 0 5.5px, transparent 5.5px 7.2px); -webkit-background-clip: text; background-clip: text; color: transparent; }
.word .o { background-image: repeating-linear-gradient(180deg, var(--raft) 0 5.5px, transparent 5.5px 7.2px); }
.site ul { display: flex; gap: 8px; list-style: none; padding: 0; font: 13px var(--mono); }
.site ul a { position: relative; display: block; white-space: nowrap; padding: 7px 12px; text-decoration: none; color: var(--ink2); transition: color .2s; }
/* hover / current section gets the same orange tracker brackets as the rafts */
.site ul a::before { content: ""; position: absolute; inset: 0; opacity: 0; transform: scale(1.15); transition: opacity .2s, transform .25s;
  background:
    linear-gradient(var(--raft), var(--raft)) top left / 7px 1.5px, linear-gradient(var(--raft), var(--raft)) top left / 1.5px 7px,
    linear-gradient(var(--raft), var(--raft)) top right / 7px 1.5px, linear-gradient(var(--raft), var(--raft)) top right / 1.5px 7px,
    linear-gradient(var(--raft), var(--raft)) bottom left / 7px 1.5px, linear-gradient(var(--raft), var(--raft)) bottom left / 1.5px 7px,
    linear-gradient(var(--raft), var(--raft)) bottom right / 7px 1.5px, linear-gradient(var(--raft), var(--raft)) bottom right / 1.5px 7px;
  background-repeat: no-repeat; }
.site ul a:hover, .site ul a.on { color: var(--raft); }
.site ul a:hover::before, .site ul a.on::before { opacity: 1; transform: none; }
.nav-right { display: flex; gap: 10px; align-items: center; }
.buy { font: 13px var(--mono); text-decoration: none; background: var(--raft); color: #fff; padding: 9px 14px; transition: background .2s; }
.buy:hover { background: var(--ink); color: var(--on-ink); }
.burger { display: none; width: 40px; height: 36px; border: 1px solid var(--ink); background: none; cursor: pointer; padding: 9px 9px; flex-direction: column; justify-content: space-between; }
.burger i { display: block; height: 3px; background: var(--ink); border-radius: 1px; transition: transform .25s, opacity .2s; color: var(--on-ink); }
.burger i:nth-child(2) { background: var(--raft); }
.open .burger i:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.open .burger i:nth-child(2) { opacity: 0; }
.open .burger i:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
/* the waterline: a dotted sea along the header's edge, a tiny raft rides it as you scroll */
.waterline { position: relative; height: 6px; opacity: 0; transition: opacity .4s;
  background: radial-gradient(circle, rgba(var(--ink-rgb),.35) 1px, transparent 1.4px) 0 50% / 8px 6px repeat-x; }
.solid .waterline { opacity: 1; }
.rider { position: absolute; bottom: 1px; left: calc(var(--p, 0) * (100% - 22px)); width: 22px; height: 9px; border-radius: 2px;
  background: repeating-linear-gradient(180deg, var(--raft) 0 2px, transparent 2px 3.5px); animation: bob 2.4s ease-in-out infinite; }
.still .site .mark, .still .rider { animation-play-state: paused !important; }
@media (max-width: 1100px) { /* the header links need this much room before they fold into the burger */
  .site ul { display: none; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; gap: 0; padding: 8px 20px 20px;
    background: var(--paper); border-bottom: 1px solid var(--line); font-size: 15px; box-shadow: 0 30px 40px -20px rgba(var(--shadow-rgb),.2); }
  .site.open ul { display: flex; }
  .site.open { background: var(--paper); }
  .site ul a { padding: 14px 12px; }
  .burger { display: flex; }
}

/* phones */
@media (max-width: 860px) {
  input, textarea, select { font-size: 16px !important; } /* iPhones zoom the whole page when a smaller field is tapped */
}
@media (max-width: 560px) {
  /* the header has to fit: the switch shows only the current mode, and one tap still flips it */
  .nav-right { gap: 6px; }
  .buy { padding: 8px 10px; font-size: 12px; white-space: nowrap; }
  .site .theme span { display: none; }
  .site .theme span:first-child { display: block; }
  :root[data-theme="dark"] .site .theme span:first-child { display: none; }
  :root[data-theme="dark"] .site .theme span:last-child { display: block; }
  .site .word { font-size: 28px; }
  .site .word span { background-size: auto; }
  .burger { width: 36px; padding: 8px; }
}