. */ .phone-shot { display: block; } .phone-shot > img, .phone-shot.placeholder { display: block; width: 100%; height: auto; aspect-ratio: 600 / 1304; border: 3px solid #0b0d0e; border-radius: 13% / 6%; background: var(--surface); box-shadow: 0 18px 40px rgb(0 0 0 / 0.22); } .phone-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 13rem)); justify-content: center; gap: 2rem; margin: 2.5rem 0; } .phone-row figure { margin: 0; } .phone-row figcaption { margin-top: 0.75rem; text-align: center; color: var(--muted); font-size: 0.9375rem; } /* Terminal:

with an optional .bar and a pre.tty. The screen scales to the window width. Each shot sets --cols in its shots.css. The font-size math counts 0.61em per character: mono fonts are about 0.6em wide (SF Mono and Menlo 0.602em), and the small spare keeps the widest line inside the window. */ .term-window { --cols: 110; margin: 0; overflow: hidden; container-type: inline-size; border: 1px solid var(--ink-line); border-radius: 10px; background: var(--ink-bg); box-shadow: 0 18px 50px rgb(0 0 0 / 0.25); } .term-window .bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--ink-surface); border-bottom: 1px solid var(--ink-line); color: var(--ink-muted); font-family: var(--mono); font-size: 0.75rem; } .term-window .bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-line); } .term-window .bar span { margin-left: 0.5rem; } .tty { margin: 0; padding: 2cqw; overflow: hidden; white-space: pre; color: var(--ink-text); font-family: var(--mono); font-size: calc(96cqw / (var(--cols) * 0.61)); line-height: 1.15; } /* One character cell. Braille and other glyphs the mono font lacks come from a fallback font with another width; this box keeps them one cell (1ch) wide. */ .tty .c { display: inline-block; width: 1ch; overflow: hidden; vertical-align: top; font-weight: inherit; text-align: center; } /* 110 x 32 cells at 0.6em x 1.15em. */ .tty.placeholder { aspect-ratio: 66 / 36.8; background: var(--ink-surface); } .hero .term-window { margin: 2.5rem 0 0; } /* ---------- App page ---------- */ .app-hero { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; align-items: center; padding: 2.5rem 0 1rem; } .app-hero .phone-shot { max-width: 15rem; justify-self: center; } @media (max-width: 40rem) { .app-hero { grid-template-columns: 1fr; } .app-hero .phone-shot { max-width: 13rem; } } .store-badge { display: inline-block; padding: 0.65rem 1rem; border-radius: 10px; background: var(--heading); color: var(--bg); font-size: 0.9375rem; font-weight: 600; } /* ---------- Content blocks ---------- */ .groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1.5rem; margin: 2.5rem 0; padding: 1.5rem 0 0; border-top: 1px solid var(--line); } .groups h2 { margin: 0 0 0.25rem; font-size: 1.0625rem; } .groups p { color: var(--muted); font-size: 0.9375rem; margin: 0; } .note { background: var(--surface); border-radius: 14px; padding: 1.25rem 1.25rem 0.25rem; margin: 2rem 0; } code, kbd { font-family: var(--mono); font-size: 0.875em; } code { background: var(--surface); border-radius: 5px; padding: 0.1em 0.35em; } kbd { border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 0.05em 0.4em; } pre.cmd { margin: 1.5rem 0; padding: 1rem 1.25rem; overflow-x: auto; background: var(--surface); border-left: 3px solid var(--accent); border-radius: 10px; line-height: 1.55; } pre.cmd code { background: none; padding: 0; font-size: 0.875rem; }