:root { --bg: #0b0d10; --fg: #e6e8eb; --muted: #9aa0a6; --border: #1f2937; --accent: #60a5fa; --card-bg: #11151a; --code-bg: #11151a; --badge-bg: #60a5fa; --badge-fg: #0b0d10; --lighter-blue-black: #04293C; --light-blue-black: #053D58; /* Midpoint blend of #000000 and #053D58 (the gradient's two colors). Used as the html/body solid background so iOS Safari's Liquid Glass toolbars — which only sample solid `background-color`, never gradients or pseudo-elements — tint to a color the gradient edges fade into. The gradient is shaped to start and end at this same blend color so there's no visible seam where the gradient meets the toolbar tint. */ --gradient-blend: #021E2C; --bright-green: #16F59C; color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; color: var(--fg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* Solid blend color on the root so iOS Safari samples it for both the top URL bar and bottom toolbar tint. The fixed gradient below starts and ends at this same color, so the gradient edges melt seamlessly into the tinted Safari chrome. */ html { background: var(--gradient-blend); } body { min-height: 100vh; background: transparent; position: relative; } /* Fixed gradient backdrop + noise overlay. Implemented as a real
with the noise as an inner absolutely-positioned child rather than two `position: fixed` pseudo-elements. Reason: on iOS Safari, two separately-fixed elements end up in different compositor layers — one with `mix-blend-mode` gets promoted and stays anchored during overscroll/rubber-band, the other doesn't, so the gradient drifts up while the noise stays put. Putting the noise inside the fixed wrapper means they move (or don't move) together as one compositor layer. Two radial gradients give an organic, diagonal flow (black blob in the upper-left, light-blue-black blob in the lower-right). The whole layer is masked with a vertical fade so it goes to fully transparent at the top and bottom edges, letting the solid `var(--gradient-blend)` on show through cleanly at those edges. Safari's translucent toolbars then sample that solid blend color and tint to match, with no visible seam between the gradient and the toolbar tint. */ .backdrop { position: fixed; inset: 0; pointer-events: none; z-index: -1; background: /* Soft organic blobs layered ON TOP of the original diagonal linear gradient to break up the straight banding and give a more fluid feel, while preserving the underlying black -> light-blue-black diagonal sweep. */ radial-gradient(ellipse 90% 70% at 20% 25%, rgba(0,0,0,0.7) 0%, transparent 70%), radial-gradient(ellipse 95% 75% at 80% 80%, rgba(5,61,88,0.7) 0%, transparent 70%), linear-gradient(to bottom right, #000000, var(--light-blue-black)); -webkit-mask-image: linear-gradient( to bottom, transparent 0%, #000 15%, #000 85%, transparent 100% ); mask-image: linear-gradient( to bottom, transparent 0%, #000 15%, #000 85%, transparent 100% ); } .backdrop::after { /* Noise overlay rendered as a child of the fixed backdrop so it shares the wrapper's compositor layer and stays anchored with the gradient instead of drifting independently on overscroll. */ content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; background-image: var(--noise-image); } /* Noise image used by .backdrop::after. Default is SVG fractal noise (smooth/Perlin); /assets/noise.js overrides --noise-image with a per-pixel Gaussian-noise PNG to match the Metal shader used in the app. */ :root { --noise-image: url("data:image/svg+xml;utf8,"); } body > *:not(.backdrop) { position: relative; z-index: 1; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } .container { max-width: 760px; margin: 0 auto; padding: 48px 24px 24px; min-height: 100vh; display: flex; flex-direction: column; position: relative; } .container:has(.version-header) { padding-top: 24px; } .container > .site-footer { margin-top: auto; } .site-header { margin-bottom: 20px; padding-bottom: 15px; border-bottom: none; position: relative; --version-capsule-height: 46px; } .site-header::after { content: ""; position: absolute; left: calc(var(--version-capsule-height) / 4); right: calc(var(--version-capsule-height) / 4); bottom: 0; height: 3px; border-radius: 999px; background: #ffffff; } .site-header h1 { margin: 0 0 4px; font-size: 28px; letter-spacing: -0.01em; } .site-header .logo { display: block; height: auto; width: 40vw; max-width: 200px; margin: 0 calc(var(--version-capsule-height) / 4); } .site-header .subtitle { margin: 0; color: var(--muted); font-size: 15px; } .version-header { display: flex; flex-direction: column; gap: 8px; } .version-header .header-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; } .version-header .logo { margin: 0; } .version-header::after { left: 0; right: 0; } .version-header h1 { margin: 0; font-size: 36px; line-height: 0.8; } .logo-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; } .logo-stack .back-link { margin: 0; align-self: flex-start; } .logo-stack .logo { margin: 0; align-self: flex-start; width: 40vw; max-width: 200px; } .title-block { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; line-height: 1; } .title-block h1 { margin: 0; line-height: 0.8; } .build-label { font-size: 15px; font-weight: 600; color: #fff; letter-spacing: 0.02em; line-height: 1; } .back-link { font-size: 14px; font-weight: 600; line-height: 0.8; color: #fff; text-decoration: none; display: inline-flex; align-self: flex-start; align-items: center; padding: 8px 16px; margin-bottom: 15px; border-radius: 999px; transition: filter 0.15s ease, transform 0.05s ease; /* Bento style — lighterBlueBlack */ --bento-color: var(--lighter-blue-black); background-image: linear-gradient( to bottom, color-mix(in srgb, var(--bento-color) 88%, #000 12%), var(--bento-color) ); background-color: var(--bento-color); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), inset 0 6px 12px rgba(255, 255, 255, 0.2); } .back-link:hover { color: #fff; text-decoration: none; filter: brightness(1.15); } .back-link:active { transform: translateY(1px); } .back-arrow { font-size: 18px; line-height: 0.8; margin-right: 6px; display: inline-block; } .forward-link { /* Same pill style as .back-link */ font-size: 14px; font-weight: 600; line-height: 0.8; color: #fff; text-decoration: none; display: inline-flex; align-self: flex-start; align-items: center; padding: 8px 16px; margin-bottom: 15px; border-radius: 999px; transition: filter 0.15s ease, transform 0.05s ease; --bento-color: #288691; background-image: linear-gradient( to bottom, color-mix(in srgb, var(--bento-color) 88%, #000 12%), var(--bento-color) ); background-color: var(--bento-color); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), inset 0 6px 12px rgba(255, 255, 255, 0.2); } .forward-link:hover { color: #fff; text-decoration: none; filter: brightness(1.15); } .forward-link:active { transform: translateY(1px); } .forward-arrow { font-size: 18px; line-height: 0.8; margin-left: 6px; display: inline-block; } .header-row > .forward-link, .header-row > .back-link { align-self: flex-end; margin-bottom: 0; } /* Bento style — ported from the Swift BentoStyle. Recipe: - linear-gradient from rgba(0,0,0,0.12) blended onto the base color at the top, down to the pure base color at the bottom - inner shadow #1: sharp white top highlight (rgba(255,255,255,0.5), 1px radius, +1px y) - inner shadow #2: softer white inner glow (rgba(255,255,255,0.2), 12px radius, +6px y) CSS uses layered inset box-shadows for the inner-shadow effect. */ .bento { --bento-color: #2563eb; --bento-shadow-opacity: 1; background-image: linear-gradient( to bottom, color-mix(in srgb, var(--bento-color) 88%, #000 12%), var(--bento-color) ); background-color: var(--bento-color); box-shadow: inset 0 1px 1px rgba(255, 255, 255, calc(0.5 * var(--bento-shadow-opacity))), inset 0 6px 12px rgba(255, 255, 255, calc(0.2 * var(--bento-shadow-opacity))); border: none; } .versions { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(var(--min-card-width, 150px), calc((100% - 2 * 10px) / 3)), 1fr)); gap: 10px; --version-capsule-height: 46px; } .version-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: var(--version-capsule-height); padding: 0 22px; border-radius: 20px; color: #fff; text-decoration: none; transition: transform 0.05s ease, filter 0.15s ease; /* Bento base — lighterBlueBlack for non-latest cards */ --bento-color: var(--lighter-blue-black); background-image: linear-gradient( to bottom, color-mix(in srgb, var(--bento-color) 88%, #000 12%), var(--bento-color) ); background-color: var(--bento-color); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), inset 0 6px 12px rgba(255, 255, 255, 0.2); } .version-card:hover { filter: brightness(1.08); text-decoration: none; } .version-card:active { transform: translateY(1px); } .version-card.has-badge { padding-right: 10px; } /* Beta-styled back link (used on a beta build detail page) */ .back-link.beta { --bento-color: #288691; color: #fff; } .back-link.beta:hover { color: #fff; } /* Beta build cards on /beta listing — gray-blue */ .beta-card { --bento-color: #288691; color: #fff; } .beta-card:hover { color: #fff; } .beta-groups { display: flex; flex-direction: column; gap: 24px; } .beta-group { display: flex; flex-direction: column; gap: 10px; } .beta-group-title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--fg); } .version-tag { font-weight: 600; font-size: 16px; font-variant-numeric: tabular-nums; } .badge { font-size: 12px; font-weight: 600; color: #000; border-radius: 10px; display: inline-flex; align-items: center; padding: 0 12px; margin: 10px 0; align-self: stretch; /* Bento style — bright green */ --bento-color: var(--bright-green); background-image: linear-gradient( to bottom, color-mix(in srgb, var(--bento-color) 88%, #000 12%), var(--bento-color) ); background-color: var(--bento-color); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), inset 0 6px 12px rgba(255, 255, 255, 0.2); } .loading, .empty { color: var(--muted); font-size: 15px; } .content { margin-top: 8px; } .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4 { line-height: 1.25; margin: 1.6em 0 0.6em; letter-spacing: -0.01em; } .markdown-body > :first-child { margin-top: 0; } .markdown-body h1 { font-size: 32px; } .markdown-body h2 { font-size: 24px; } .markdown-body h3 { font-size: 19px; } .markdown-body p { margin: 0.8em 0; } .markdown-body ul, .markdown-body ol { padding-left: 1.4em; } .markdown-body li { margin: 0.25em 0; } .markdown-body code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--code-bg); padding: 2px 6px; border-radius: 4px; font-size: 0.9em; } .markdown-body pre { background: var(--code-bg); padding: 14px 16px; border-radius: 8px; overflow-x: auto; border: 1px solid var(--border); } .markdown-body pre code { background: transparent; padding: 0; font-size: 0.88em; } .markdown-body blockquote { margin: 1em 0; padding: 0.4em 1em; border-left: 3px solid var(--border); color: var(--muted); } .markdown-body hr { border: none; border-top: 1px solid #ffffff; margin: 2em 0; } .markdown-body table { width: 100%; border-collapse: collapse; margin: 1em 0; } .markdown-body th, .markdown-body td { padding: 8px 10px; border: 1px solid var(--border); text-align: left; } .site-footer { margin-top: 32px; padding-top: 16px; border-top: none; font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px; } .site-footer .copyright { color: var(--muted); } .site-footer a { color: var(--muted); } .site-footer a:hover { color: var(--muted); text-decoration: underline; }