/* Coinscal website. Every color that differs between the appearances is a token written once as light-dark();
   the page follows the system unless the visitor picked the other appearance (html[data-theme]). */

:root {
    color-scheme: light;
    --dark: 0;

    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "PingFang SC", "PingFang TC", "Segoe UI", Roboto, Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

    --brand: #5546f5;
    --background: light-dark(#ffffff, #0f0e17);
    --background-tinted: light-dark(#f6f5fb, #15131f);
    --surface: light-dark(#ffffff, #1c1a28);
    --text: light-dark(#1d1d1f, #f4f3f8);
    --text-secondary: light-dark(#66656f, #a6a4b4);
    --separator: light-dark(rgba(20, 16, 60, 0.1), rgba(255, 255, 255, 0.11));
    --fill: light-dark(rgba(20, 16, 60, 0.05), rgba(255, 255, 255, 0.07));
    --fill-strong: light-dark(rgba(20, 16, 60, 0.09), rgba(255, 255, 255, 0.12));
    --accent: light-dark(#4b3cf0, #9b91ff);
    --button: #5546f5;
    --button-hover: #4637e6;
    --up: #2cbd84;
    --down: #f6465d;

    --content: 1120px;
    --gutter: 24px;
    --header-height: 52px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --dark: 1;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --dark: 1;
}

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--background);
    color: var(--text);
    font: 16px/1.55 var(--font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}

/* A visitor whose language isn't English sees the page once its messages are in, not English first.
   If they never arrive, the English shows anyway after a moment. */
.i18n-pending main,
.i18n-pending .site-footer,
.i18n-pending .site-header {
    visibility: hidden;
    animation: reveal 0s 1.2s forwards;
}

@keyframes reveal {
    to {
        visibility: visible;
    }
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

a[aria-disabled="true"] {
    opacity: 0.45;
    pointer-events: none;
}

button,
select {
    margin: 0;
    color: inherit;
    font: inherit;
}

button {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

img,
svg {
    display: block;
}

[hidden] {
    display: none !important;
}

.symbols {
    position: absolute;
}

.skip-link {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 30;
    padding: 8px 14px;
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 0 0 1px var(--separator);
    font-size: 14px;
    transform: translateY(-200%);
}

.skip-link:focus {
    transform: none;
}

.container {
    width: 100%;
    max-width: calc(var(--content) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* MARK: Buttons */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 22px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color 0.15s, transform 0.15s;
}

.button:hover {
    text-decoration: none;
}

.button:active {
    transform: scale(0.98);
}

.button-primary {
    background: var(--button);
    color: #fff;
    box-shadow: 0 6px 18px rgba(85, 70, 245, 0.28);
}

.button-primary:hover {
    background: var(--button-hover);
}

.button-plain {
    background: var(--fill);
    color: var(--text);
}

.button-plain:hover {
    background: var(--fill-strong);
}

/* MARK: Header (pages other than the landing page) and brand */

.site-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-right: 10px;
    color: var(--text);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.site-brand:hover {
    text-decoration: none;
}

.site-brand img {
    border-radius: 6px;
}

.site-nav {
    display: flex;
    gap: 2px;
    margin-right: auto;
}

.site-nav a {
    padding: 5px 10px;
    border-radius: 7px;
    color: var(--text-secondary);
    font-size: 14px;
}

.site-nav a:hover {
    background: var(--fill);
    color: var(--text);
    text-decoration: none;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    height: var(--header-height);
    border-bottom: 1px solid var(--separator);
    background: light-dark(rgba(255, 255, 255, 0.8), rgba(15, 14, 23, 0.78));
    -webkit-backdrop-filter: saturate(1.8) blur(20px);
    backdrop-filter: saturate(1.8) blur(20px);
}

.site-header .container {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 100%;
}

/* The appearance button: the sun in the light appearance, the moon in the dark one. */
.appearance {
    display: grid;
    place-items: center;
}

.appearance svg {
    grid-area: 1 / 1;
    width: 16px;
    height: 16px;
    transition: opacity 0.3s, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.appearance-sun {
    opacity: calc(1 - var(--dark));
    transform: rotate(calc(var(--dark) * 90deg));
}

.appearance-moon {
    opacity: var(--dark);
    transform: rotate(calc((var(--dark) - 1) * 90deg));
}

/* MARK: Hero */

.hero {
    --menubar-text: light-dark(rgba(0, 0, 0, 0.85), #ffffff);
    --menubar-text-inverse: light-dark(#ffffff, #17123f);
    --menubar-link: light-dark(rgba(0, 0, 0, 0.62), rgba(255, 255, 255, 0.8));
    --menubar-hover: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.14));
    --menubar-open: light-dark(rgba(0, 0, 0, 0.11), rgba(220, 214, 255, 0.2));
    --menubar-ring: light-dark(rgba(40, 24, 140, 0.45), rgba(255, 255, 255, 0.55));
    --hero-text: light-dark(#17123f, #ffffff);
    --hero-text-secondary: light-dark(rgba(23, 18, 63, 0.76), rgba(255, 255, 255, 0.78));
    --hero-glass: light-dark(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.12));
    --hero-glass-hover: light-dark(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.2));
    --hero-glass-edge: light-dark(rgba(23, 18, 63, 0.12), rgba(255, 255, 255, 0.16));

    position: relative;
    z-index: 1;
    color: var(--hero-text);
}

.hero :focus-visible {
    outline-color: var(--hero-text);
}

/* The wallpaper: a dawn sky over a price chart's ridges by day, the same chart under a night sky in the dark. */
.sky {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background:
        radial-gradient(60% 55% at 88% -5%, light-dark(rgba(255, 244, 250, 0.95), rgba(120, 90, 255, 0.35)), transparent 70%),
        linear-gradient(
            180deg,
            light-dark(#a99fff, #0b0824) 0%,
            light-dark(#c7c0ff, #15104a) 38%,
            light-dark(#e9e5ff, #221a68) 70%,
            light-dark(#ffffff, #0f0e17) 100%
        );
    transition: background 0.6s;
}

.glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    transform: translate3d(calc(var(--pointer-x, 0) * var(--drift)), calc(var(--pointer-y, 0) * var(--drift)), 0);
    transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.glow-a {
    --drift: -30px;
    top: 8%;
    left: -8%;
    width: 46%;
    height: 60%;
    background: light-dark(rgba(255, 168, 214, 0.55), rgba(85, 70, 245, 0.45));
}

.glow-b {
    --drift: 24px;
    top: 30%;
    right: 4%;
    width: 38%;
    height: 50%;
    background: light-dark(rgba(140, 200, 255, 0.5), rgba(170, 60, 220, 0.28));
}

.ridge {
    position: absolute;
    right: -2%;
    bottom: 0;
    left: -2%;
    width: 104%;
    height: 46%;
    transform: translate3d(calc(var(--pointer-x, 0) * var(--drift)), 0, 0);
    transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ridge path {
    transition: fill 0.6s;
}

.ridge-far {
    --drift: -6px;
    height: 58%;
}

.ridge-far path {
    fill: light-dark(rgba(255, 255, 255, 0.34), rgba(110, 96, 255, 0.16));
}

.ridge-mid {
    --drift: -12px;
    height: 46%;
}

.ridge-mid path {
    fill: light-dark(rgba(255, 255, 255, 0.55), rgba(85, 70, 245, 0.2));
}

.ridge-near {
    --drift: -20px;
    height: 34%;
}

.ridge-near path {
    fill: var(--background);
}

.hero-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: calc(var(--content) + 2 * var(--gutter));
    min-height: max(660px, calc(var(--panel-space, 0px) + 150px));
    margin-inline: auto;
    padding-inline: var(--gutter);
    padding-bottom: 72px;
}

/* MARK: Menu bar */

.menubar {
    position: relative;
    z-index: 5;
    display: flex;
    flex: none;
    align-items: center;
    gap: 6px;
    height: var(--header-height);
    color: var(--menubar-text);
}

.menubar .site-brand {
    color: inherit;
}

.menubar .site-nav a {
    color: var(--menubar-link);
}

.menubar .site-nav a:hover {
    background: var(--menubar-hover);
    color: var(--menubar-text);
}

/* The Mac's menu bar extras and the panel hanging from them, drawn larger than life on wide screens. */
.menubar-extras {
    display: flex;
    flex: none;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    font-size: 13px;
    line-height: 16px;
    -webkit-font-smoothing: auto;
    transform: scale(var(--scale, 1));
    transform-origin: right center;
}

@media (min-width: 1200px) {
    .hero {
        --scale: 1.16;
    }
}

.menubar-extra {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 30px;
    height: 24px;
    padding: 0 5px;
    border-radius: 8px;
}

button.menubar-extra {
    transition: background-color 0.15s;
}

button.menubar-extra:hover,
.menubar-input[aria-expanded="true"] {
    background: var(--menubar-hover);
}

.menubar-app {
    position: relative;
}

/* The Coinscal item: the app's menu bar icon, or "BTC 67,234" in the styles of MenuBarViewModel. */
.menubar-coinscal {
    display: flex;
    gap: 0;
    padding: 0 6px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.hero[data-panel-state="open"] .menubar-coinscal,
.menubar-coinscal:hover {
    background: var(--menubar-open);
}

.item-icon {
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: url("/img/menubar.svg") center / contain no-repeat;
    mask: url("/img/menubar.svg") center / contain no-repeat;
}

.item-label {
    padding: 1px 0;
    border-radius: 4px;
}

.menubar-coinscal:not([data-mode="icon"]) .item-icon,
.menubar-coinscal[data-mode="icon"] .item-label {
    display: none;
}

.menubar-coinscal[data-mode="tint"] .item-label {
    color: var(--item-color);
}

.menubar-coinscal[data-mode="fill"] .item-label,
.menubar-coinscal[data-mode="inverse"] .item-label {
    padding: 1px 5px;
}

.menubar-coinscal[data-mode="fill"] .item-label {
    background: var(--item-color);
    color: #fff;
}

.menubar-coinscal[data-mode="inverse"] .item-label {
    background: var(--menubar-text);
    color: var(--menubar-text-inverse);
}

/* With the panel put away, the item shows where it went. */
.hero[data-panel-state="closed"] .menubar-coinscal::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 1px var(--menubar-ring);
    animation: beckon 1.8s ease-out infinite;
}

@keyframes beckon {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(1.35, 1.6);
    }
}

/* The input menu's glyph: letters cut out of a rounded box, as macOS draws it. */
.input-glyph {
    display: grid;
    place-items: center;
    min-width: 22px;
    height: 16px;
    padding: 0 3px;
    border-radius: 4px;
    background: var(--menubar-text);
    color: var(--menubar-text-inverse);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.menubar-lang {
    position: relative;
}

.menubar-wifi .wifi-off,
.menubar-wifi[data-state="offline"] .wifi-on {
    display: none;
}

.menubar-wifi[data-state="offline"] .wifi-off {
    display: block;
}

.menubar-appearance {
    width: 30px;
}

.menubar-clock {
    display: flex;
    gap: 7px;
    padding-left: 4px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* A macOS menu: the language list. */
.mac-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    min-width: 168px;
    padding: 5px;
    border-radius: 11px;
    background: light-dark(rgba(246, 245, 252, 0.86), rgba(40, 36, 64, 0.88));
    -webkit-backdrop-filter: blur(30px) saturate(1.6);
    backdrop-filter: blur(30px) saturate(1.6);
    box-shadow:
        0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.9)),
        inset 0 1px 0 light-dark(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.14)),
        0 12px 32px rgba(10, 6, 40, 0.28);
    color: light-dark(rgba(0, 0, 0, 0.88), #fff);
    font-size: 13px;
    animation: menu-in 0.12s ease-out;
}

@keyframes menu-in {
    from {
        opacity: 0;
        transform: translateY(-3px);
    }
}

.mac-menu button {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px 0 22px;
    border-radius: 6px;
    text-align: left;
    white-space: nowrap;
    position: relative;
}

.mac-menu button[aria-checked="true"]::before {
    content: "";
    position: absolute;
    left: 7px;
    width: 10px;
    height: 10px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.2 5.4l2.4 2.4 5.2-5.6' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.2 5.4l2.4 2.4 5.2-5.6' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mac-menu button:hover,
.mac-menu button:focus-visible {
    outline: none;
    background: var(--brand);
    color: #fff;
}

/* MARK: Panel */

.panel-slot {
    --shift: 0px;
    position: absolute;
    top: calc(100% + 6px);
    left: -2px;
    width: 320px;
    transform: translateX(calc(-1 * var(--shift)));
}

/* Colors after the app's SwiftUI: .ultraThinMaterial with a hairline edge, primary and secondary text. */
.panel {
    --pn-text: light-dark(rgba(0, 0, 0, 0.88), rgba(255, 255, 255, 0.94));
    --pn-secondary: light-dark(rgba(60, 60, 67, 0.62), rgba(235, 235, 245, 0.58));
    --pn-fill: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.08));
    --pn-fill-strong: light-dark(rgba(0, 0, 0, 0.09), rgba(255, 255, 255, 0.14));
    --pn-pill: light-dark(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.1));
    --pn-separator: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.08));
    --pn-control: light-dark(#ffffff, rgba(255, 255, 255, 0.12));
    --pn-switch-off: light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.18));
    --pn-accent: light-dark(#5546f5, #7c70ff);

    position: relative;
    overflow: hidden;
    width: 320px;
    border-radius: 12px;
    background: light-dark(rgba(248, 247, 255, 0.72), rgba(36, 31, 72, 0.72));
    -webkit-backdrop-filter: blur(28px) saturate(1.7);
    backdrop-filter: blur(28px) saturate(1.7);
    box-shadow:
        0 0 0 1px light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.1)),
        inset 0 1px 0 light-dark(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.12)),
        0 8px 14px rgba(0, 0, 0, 0.1),
        0 24px 60px light-dark(rgba(50, 30, 150, 0.22), rgba(0, 0, 10, 0.5));
    color: var(--pn-text);
    font-size: 13px;
    line-height: 16px;
    text-align: left;
    -webkit-font-smoothing: auto;
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
    transform-origin: 20px -10px;
    transition: opacity 0.16s ease-out, transform 0.16s ease-out, visibility 0s;
}

.hero[data-panel-state="closed"] .panel,
.hero[data-panel-state="closed"] .panel-hint {
    visibility: hidden;
    opacity: 0;
    transform: scale(0.97);
    transition: opacity 0.14s ease-in, transform 0.14s ease-in, visibility 0s 0.14s;
}

.panel-hint {
    margin: 12px 4px 0;
    color: var(--hero-text-secondary);
    font-size: 12.5px;
    line-height: 1.45;
    transition: opacity 0.16s;
}

.pn-header {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 38px;
    padding: 0 16px;
}

.panel:not([data-view="list"]) .pn-header {
    padding-left: 8px;
}

.pn-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pn-back {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    color: var(--pn-secondary);
}

.pn-back:hover {
    background: var(--pn-fill);
    color: var(--pn-text);
}

.pn-glyph {
    width: 18px;
    height: 18px;
}

.pn-back .pn-glyph {
    width: 16px;
    height: 16px;
}

/* ProgressView().controlSize(.small).scaleEffect(0.72) */
.pn-spinner {
    width: 12px;
    height: 12px;
    border: 1.6px solid var(--pn-fill-strong);
    border-top-color: var(--pn-secondary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.pn-body {
    overflow-y: auto;
    scrollbar-width: none;
    transition: height 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.pn-body::-webkit-scrollbar {
    display: none;
}

.pn-row {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 16px;
}

.pn-logo {
    flex: none;
    border-radius: 50%;
}

.pn-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pn-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.pn-name {
    overflow: hidden;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pn-price {
    font-family: var(--mono);
    font-weight: 600;
    white-space: nowrap;
}

.pn-price.is-missing {
    color: var(--pn-secondary);
}

/* A short glow when a price changes, so the demo reads as live. */
.pn-price.is-ticking {
    animation: tick 0.7s ease-out;
}

@keyframes tick {
    from {
        text-shadow: 0 0 10px currentColor;
    }
}

.pn-symbol,
.pn-change {
    color: var(--pn-secondary);
    font-size: 11px;
    line-height: 13px;
}

.pn-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 100%;
    color: var(--pn-secondary);
}

.pn-empty p {
    margin: 0;
}

.pn-empty-glyph {
    width: 40px;
    height: 40px;
}

.pn-prominent {
    padding: 4px 12px;
    border-radius: 6px;
    background: var(--pn-accent);
    color: #fff;
    font-size: 13px;
}

.pn-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 52px;
    padding: 0 16px;
}

.pn-icon {
    display: flex;
    align-items: center;
    width: 36px;
    height: 32px;
    color: var(--pn-secondary);
    transition: color 0.12s;
}

.pn-icon:last-child {
    justify-content: flex-end;
}

.pn-icon:hover,
.pn-icon[aria-pressed="true"] {
    color: var(--pn-text);
}

.pn-pill {
    padding: 6px 14px;
    border-radius: 8px;
    background: var(--pn-pill);
    box-shadow: 0 0 0 0.5px var(--pn-separator);
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
    white-space: nowrap;
    transition: background-color 0.12s;
}

.pn-pill:hover {
    background: var(--pn-fill-strong);
}

.pn-pill[aria-pressed="true"] {
    background: var(--pn-accent);
    color: #fff;
}

/* The demo's settings: rows like a grouped Form in the app's Settings window. */
.pn-settings {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 12px 8px;
}

.pn-setting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 40px;
    padding: 0 6px;
    border-bottom: 1px solid var(--pn-separator);
}

.pn-setting:last-child {
    border-bottom: 0;
}

.pn-setting-label {
    min-width: 0;
    white-space: nowrap;
}

.pn-select {
    max-width: 168px;
    height: 22px;
    padding: 0 22px 0 8px;
    border: 0;
    border-radius: 6px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M1.5 4.5L4 2l2.5 2.5M1.5 7.5L4 10l2.5-2.5' fill='none' stroke='%23888' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 7px center / 7px 11px no-repeat,
        var(--pn-control);
    box-shadow: 0 0 0 0.5px var(--pn-separator), 0 1px 1.5px rgba(0, 0, 0, 0.08);
    color: var(--pn-text);
    font-size: 12.5px;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.pn-switch {
    position: relative;
    flex: none;
    width: 32px;
    height: 18px;
    margin: 0;
    border-radius: 999px;
    background: var(--pn-switch-off);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: background-color 0.18s;
}

.pn-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.pn-switch:checked {
    background: var(--pn-accent);
}

.pn-switch:checked::after {
    transform: translateX(14px);
}

.pn-watchlist {
    padding: 2px 0 8px;
}

.pn-pick {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 12px 0 16px;
}

.pn-pick-text {
    display: flex;
    flex: 1;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.pn-pick-toggle {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    color: var(--pn-secondary);
}

.pn-pick-toggle:hover {
    background: var(--pn-fill);
    color: var(--pn-text);
}

.pn-pick-toggle[aria-pressed="true"] {
    color: var(--pn-accent);
}

.pn-note {
    margin: 6px 16px 0;
    color: var(--pn-secondary);
    font-size: 11px;
}

/* MARK: Hero copy */

.hero-copy {
    position: relative;
    max-width: 520px;
    padding-top: 108px;
}

.hero h1 {
    margin: 0;
    font-size: clamp(38px, 5.2vw, 58px);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

/* Tight tracking suits Latin display type, not Chinese. */
:lang(zh) .hero h1,
:lang(zh) .section h2 {
    letter-spacing: 0;
}

/* Break Chinese headlines at punctuation, not in the middle of a word. */
:lang(zh) .hero h1 {
    word-break: keep-all;
}

.hero-lead {
    margin: 20px 0 0;
    color: var(--hero-text-secondary);
    font-size: 19px;
    line-height: 1.5;
    text-wrap: pretty;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.button-glass {
    background: var(--hero-glass);
    box-shadow: inset 0 0 0 1px var(--hero-glass-edge);
    color: var(--hero-text);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.button-glass:hover {
    background: var(--hero-glass-hover);
}

.hero-note {
    margin: 18px 0 0;
    color: var(--hero-text-secondary);
    font-size: 14px;
}

/* MARK: Sections */

.section {
    padding-block: 96px;
}

.section-tinted {
    background: var(--background-tinted);
}

.section h2 {
    margin: 0;
    font-size: clamp(30px, 3.6vw, 40px);
    line-height: 1.12;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

.section-lead {
    max-width: 620px;
    margin: 14px 0 0;
    color: var(--text-secondary);
    font-size: 18px;
    text-wrap: pretty;
}

.features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 48px;
}

.feature {
    padding: 22px 22px 24px;
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 0 0 1px var(--separator);
}

.feature h3 {
    margin: 18px 0 6px;
    font-size: 17px;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.feature p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.5;
}

.feature-tile {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 11px;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.feature-tile svg {
    width: 24px;
    height: 24px;
}

.tile-violet { background: linear-gradient(180deg, #7a6dff, #5546f5); }
.tile-orange { background: linear-gradient(180deg, #ffad42, #f5820f); }
.tile-indigo { background: linear-gradient(180deg, #8c7bff, #6a4fe8); }
.tile-teal { background: linear-gradient(180deg, #3fcbd8, #1aa3b5); }

.features-more {
    margin: 36px 0 0;
    color: var(--text-secondary);
    font-size: 14px;
    text-align: center;
}

/* Privacy and open source: one centered statement and four short points. */
.trust .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.trust .section-lead {
    margin-inline: auto;
}

.trust-badge {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 22px;
    border-radius: 18px;
    background: linear-gradient(180deg, #7a6dff, #5546f5);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 10px 24px rgba(85, 70, 245, 0.3);
}

.trust-badge svg {
    width: 34px;
    height: 34px;
}

.trust-points {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    width: 100%;
    margin: 48px 0 0;
    padding: 0;
    list-style: none;
}

.trust-point {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 20px;
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 0 0 1px var(--separator);
}

.trust-point svg {
    width: 30px;
    height: 30px;
    color: var(--accent);
}

.trust-point h3 {
    margin: 14px 0 6px;
    font-size: 17px;
    letter-spacing: -0.01em;
}

.trust-point p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.5;
}

.install {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.install img {
    margin-bottom: 18px;
    filter: drop-shadow(0 10px 20px rgba(40, 30, 140, 0.18));
}

.install .section-lead {
    margin-inline: auto;
}

.install .hero-actions {
    justify-content: center;
}

/* MARK: Footer */

.site-footer {
    border-top: 1px solid var(--separator);
    color: var(--text-secondary);
    font-size: 13px;
}

.site-footer .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;
    padding-block: 28px;
}

.site-footer p {
    margin: 0 auto 0 0;
}

.site-footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
}

.site-footer a {
    color: var(--text-secondary);
}

.site-footer a:hover {
    color: var(--text);
}

/* MARK: Text pages */

.page {
    max-width: 720px;
    padding-block: 64px 96px;
}

.page h1 {
    margin: 0;
    font-size: 40px;
    letter-spacing: -0.025em;
}

.page .updated {
    margin: 8px 0 40px;
    color: var(--text-secondary);
    font-size: 14px;
}

.page h2 {
    margin: 36px 0 10px;
    font-size: 21px;
}

.page p {
    margin: 0;
    color: var(--text-secondary);
}

.page .back {
    display: inline-block;
    margin-top: 48px;
}

.site-header .header-tools {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.site-header .header-tools .menubar-extra {
    height: 30px;
    border-radius: 8px;
    color: var(--text-secondary);
    --menubar-text: var(--text-secondary);
    --menubar-text-inverse: var(--background);
    --menubar-hover: var(--fill);
}

/* MARK: Narrow layouts */

@media (max-width: 1000px) {
    .features {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* The panel no longer fits beside the copy: the copy moves down by the panel's height. */
@media (max-width: 960px) {
    .hero-inner {
        min-height: 0;
        padding-bottom: 96px;
    }

    .hero-copy {
        max-width: 640px;
        padding-top: calc(var(--panel-space, 0px) + 56px);
        transition: padding-top 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .trust-points {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 760px) {
    .menubar .site-nav {
        display: none;
    }

    .clock-date {
        display: none;
    }
}

@media (max-width: 560px) {
    :root {
        --gutter: 16px;
    }

    .features,
    .trust-points {
        grid-template-columns: 1fr;
    }

    .section {
        padding-block: 72px;
    }

    .menubar .site-brand span {
        display: none;
    }

    .menubar-extras {
        gap: 0;
    }

    .hero-lead {
        font-size: 17px;
    }
}

@media (max-width: 360px) {
    .menubar-appearance {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

.mac-menu-end {
    right: 0;
    left: auto;
}