/* Pakratt, round 2: what both web pages share. Tokens live in theme.css. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; scroll-padding-top: 72px; background: var(--pk-bg); color: var(--pk-text); font: 400 16px/1.55 var(--pk-font-sans); }
/* Nothing may widen the page on phones (iOS scrolls sideways unless the root clips too). */
html, body { overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .18 0 0 0 0 .13 0 0 0 0 .09 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); }
svg { display: block; max-width: 100%; }
img { max-width: 100%; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; text-align: inherit; }
a { color: inherit; -webkit-tap-highlight-color: transparent; }
p, h1, h2, h3, h4, h5, ul, ol, dl, dd, figure, blockquote, pre { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--pk-accent) 45%, transparent); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(1180px, 100% - 48px); margin-inline: auto; }
@media (max-width: 560px) { .wrap { width: calc(100% - 32px); } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tnum { font-variant-numeric: tabular-nums; }
em, .serif { font-family: var(--pk-font-serif); font-style: italic; font-weight: 400; letter-spacing: -.005em; }
h1 em, h2 em, h3 em { font-size: 1.1em; line-height: .9; color: var(--pk-accent); }
code, pre, kbd { font-family: var(--pk-font-mono); }

/* Sprint bar: the only chrome that isn't Pakratt's own. */
.sprint { position: relative; z-index: 60; background: #2e2118; color: #f3e8d8; font: 500 13px/1 var(--pk-font-sans); }
.sprint .wrap { display: flex; align-items: center; gap: 14px; height: 38px; }
.sprint a { text-decoration: none; opacity: .72; white-space: nowrap; }
.sprint a:hover, .sprint a[aria-current] { opacity: 1; }
.sprint a[aria-current] { font-weight: 600; }
.sprint .sp-r { margin-left: auto; display: flex; gap: 16px; }
.sprint .tag { opacity: .55; white-space: nowrap; }
@media (max-width: 560px) { .sprint .tag { display: none; } .sprint .sp-r { gap: 12px; } .sprint .wrap { gap: 10px; } .sprint .hide-s { display: none; } }

/* The wordmark, outlined. */
.wm { display: block; height: 1em; width: auto; overflow: visible; color: currentColor; }
.wm path { fill: currentColor; }
.lockup { display: inline-flex; align-items: center; gap: .32em; text-decoration: none; color: var(--pk-text); }
.lockup .rat { width: 1.55em; flex: none; }
.lockup .wm { height: .84em; margin-top: .06em; }

/* Web buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 48px; padding: 0 22px; border-radius: 99px; font-weight: 600; font-size: 15.5px; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; transition: transform .2s var(--pk-ease-settle), box-shadow .2s, background .2s; }
.btn svg { width: 16px; height: 18px; flex: none; }
.btn.primary { background: var(--pk-accent); color: var(--pk-on-accent); box-shadow: var(--pk-shadow-button); }
.btn.primary:hover { background: var(--pk-accent-pressed); transform: translateY(-1px); }
.btn.primary:active { transform: translateY(1px) scale(.98); }
.btn.ghost { box-shadow: inset 0 0 0 1.5px var(--pk-line-strong); color: var(--pk-text); background: color-mix(in srgb, var(--pk-card) 60%, transparent); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--pk-text); }
.btn.sm { height: 38px; padding: 0 16px; font-size: 14px; }
/* App Store placeholder: the real badge goes here at launch. */
.store { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px 0 16px; border-radius: 13px; background: #000; color: #fff; text-decoration: none; transition: transform .2s var(--pk-ease-settle); box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .6); }
.store:hover { transform: translateY(-1px); }
/* On walnut the black badge needs a hairline to keep its edge. */
[data-theme="dark"] .store { box-shadow: 0 0 0 1px rgba(243, 232, 216, .16), 0 10px 22px -12px rgba(0, 0, 0, .6); }
@media (prefers-color-scheme: dark) { [data-theme="system"] .store { box-shadow: 0 0 0 1px rgba(243, 232, 216, .16), 0 10px 22px -12px rgba(0, 0, 0, .6); } }
.store svg { width: 22px; height: 26px; flex: none; }
.store span { display: flex; flex-direction: column; line-height: 1.05; font-family: -apple-system, system-ui, sans-serif; }
.store small { font-size: 11px; font-weight: 500; opacity: .85; letter-spacing: .01em; }
.store b { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.store.sm { height: 40px; padding: 0 14px 0 12px; border-radius: 10px; gap: 8px; }
.store.sm svg { width: 17px; height: 20px; }
.store.sm b { font-size: 15.5px; } .store.sm small { font-size: 9px; }

/* Cards */
.card { background: var(--pk-card); border-radius: 20px; box-shadow: 0 0 0 1px var(--pk-line), 0 1px 0 rgba(46, 33, 24, .03), 0 18px 40px -28px rgba(46, 33, 24, .4); }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--pk-text-2); display: inline-flex; align-items: center; gap: 8px; }
.eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--pk-accent); }
.muted { color: var(--pk-text-2); }

/* Tooltip and toast */
.tip { position: fixed; z-index: 80; pointer-events: none; opacity: 0; transform: translate(-50%, calc(-100% - 10px)) scale(.96); transition: opacity .15s, transform .2s cubic-bezier(.2, 1.3, .4, 1); max-width: 240px; background: var(--pk-text); color: var(--pk-bg); padding: 9px 13px; border-radius: 12px; font-size: 13px; line-height: 1.35; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5); }
.tip.on { opacity: 1; transform: translate(-50%, calc(-100% - 14px)); }
.tip b { display: block; font-weight: 600; } .tip span { opacity: .78; }
.toast { position: fixed; z-index: 90; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); transform: translate(-50%, 30px); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .4s cubic-bezier(.2, 1.4, .4, 1), opacity .2s, visibility 0s linear .4s; white-space: nowrap; max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis; background: var(--pk-text); color: var(--pk-bg); padding: 12px 20px; border-radius: 99px; font-weight: 600; font-size: 14.5px; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .45); }
.toast.on { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition: transform .4s cubic-bezier(.2, 1.4, .4, 1), opacity .2s, visibility 0s; }

/* Reveal on scroll */
.rv { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .7s var(--pk-ease-settle); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* Code and copy */
.code { position: relative; border-radius: 16px; background: #1c1410; color: #e9dcc8; box-shadow: 0 0 0 1px rgba(255, 255, 255, .05); overflow: hidden; }
.code pre { padding: 18px 20px; overflow: auto; font-size: 12.5px; line-height: 1.6; max-height: 420px; tab-size: 2; scrollbar-width: thin; }
.code .hd { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 18px; border-bottom: 1px solid rgba(255, 255, 255, .08); font: 600 13px/1 var(--pk-font-sans); color: #c8b49c; }
.code .hd b { color: #f3e8d8; font-weight: 600; }
.copy { margin-left: auto; height: 30px; padding: 0 12px; border-radius: 99px; background: rgba(255, 255, 255, .08); color: #f3e8d8; font: 600 12.5px/1 var(--pk-font-sans); display: inline-flex; align-items: center; gap: 6px; transition: background .2s; }
.copy:hover { background: rgba(255, 255, 255, .16); }
.copy svg { width: 13px; height: 13px; }
.copy.done { background: #557035; }
.code .k { color: #e8845a; } .code .s { color: #c2d79e; } .code .c { color: #8a7867; } .code .v { color: #f0b54e; }

/* Round 3: footer and pause helper, shared by both pages. */
.foot { border-top: 1px solid var(--pk-line); padding: 40px 0 30px; }
.foot-in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px 40px; align-items: end; }
.foot-mark { font-size: 30px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14.5px; font-weight: 500; align-self: center; }
.foot-links a { text-decoration: none; color: var(--pk-text); opacity: .82; }
.foot-links a:hover { opacity: 1; }
.made { font-size: 13.5px; color: var(--pk-text-2); }
.foot-base { grid-column: 1 / 3; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.foot-rat { grid-row: 1 / span 2; grid-column: 3; width: 120px; }
@media (max-width: 760px) { .foot-in { grid-template-columns: minmax(0, 1fr) 96px; } .foot-links { grid-column: 1; } .foot-base { grid-column: 1 / -1; } .foot-rat { grid-row: 1 / span 2; grid-column: 2; width: 96px; } }
/* Theme: System, Light, Dark. A real radio group drawn as a small segmented pill. */
.theme-pick { display: inline-flex; gap: 2px; margin: 0; padding: 3px; min-inline-size: 0; border: 0; border-radius: 99px; background: var(--pk-bg-2); box-shadow: inset 0 0 0 1px var(--pk-line); }
.theme-pick label { position: relative; display: block; cursor: pointer; }
.theme-pick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.theme-pick span { display: block; padding: 4px 11px; border-radius: 99px; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--pk-text-2); transition: background .2s, color .2s, box-shadow .2s; }
.theme-pick label:hover span { color: var(--pk-text); }
.theme-pick input:checked + span { background: var(--pk-card); color: var(--pk-text); box-shadow: 0 0 0 1px var(--pk-line-strong), 0 1px 2px rgba(46, 33, 24, .08); }
.theme-pick input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--pk-accent) 45%, transparent); outline-offset: 2px; }
.idle *, .idle *::before, .idle *::after { animation-play-state: paused !important; }
@media (max-width: 400px) { .sprint .hide-xs { display: none; } }