/* GENERATED by scripts/build-catalogue.py from site/assets/css/site.css. Do not edit. */
/* Dark mode is a class here (.theme-dark on <html>) instead of prefers-color-scheme. */




@font-face {
    font-family: "Instrument Sans";
    src: url("../../site/assets/fonts/instrument-sans.e001c72b.woff2") format("woff2");
    font-weight: 400 500;
    font-display: swap;
}
@font-face {
    font-family: "Newsreader";
    src: url("../../site/assets/fonts/newsreader.1e46ca21.woff2") format("woff2");
    font-weight: 400 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Newsreader";
    src: url("../../site/assets/fonts/newsreader-italic.66baf51c.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: optional; 
}

@font-face {
    font-family: "Instrument Sans Fallback";
    src: local("Arial"), local("Helvetica Neue"), local("Roboto");
    size-adjust: 102.83%;
    ascent-override: 94.33%;
    descent-override: 24.31%;
    line-gap-override: 0%;
}
@font-face {
    font-family: "Newsreader Fallback";
    src: local("Georgia"), local("Noto Serif");
    size-adjust: 93.37%;
    ascent-override: 78.72%;
    descent-override: 28.38%;
    line-gap-override: 0%;
}



:root {
    color-scheme: light dark;
    --canvas: #f5f3ef;
    --ink: #141414;
    --ink-2: #5a564f;
    --hair: #e0ddd8;
    --tile: #f5f3ef;
    --accent: #26357a;
    --link: #26357a;
    --on-accent: #f7f6ff;
    --on-accent-link: #aab4f0;
    --band: #26357a;
    --night: #0a0a0b;
    --btn-bg: #26357a;
    --btn-fg: #f7f6ff;
    --btn-hover: #141414;
    --photo: none;
    --mark: #26357a; 

    --font-ui: "Instrument Sans", "Instrument Sans Fallback", system-ui, sans-serif;
    --font-read: "Newsreader", "Newsreader Fallback", Georgia, serif;

    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --t-fast: 150ms;
    --t-base: 250ms;
    --t-slow: 400ms;
}

@media (prefers-contrast: more) {
    :root { --ink-2: var(--ink); --hair: var(--ink); }
}



*, *::before, *::after { box-sizing: border-box; }
html {
    background: var(--canvas);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body {
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 17px;
    line-height: 26px;
    -webkit-font-smoothing: antialiased;
    font-kerning: normal;
}
img { display: block; max-width: 100%; height: auto; filter: var(--photo); }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
strong, b { font-weight: 600; }
::selection { background: var(--accent); color: var(--on-accent); }

a {
    color: var(--link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    transition: color var(--t-fast) linear;
}
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; border-radius: 2px; }

.vh {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.skip {
    position: absolute;
    left: 20px; top: -100px;
    z-index: 10;
    padding: 10px 16px;
    background: var(--ink);
    color: var(--canvas);
    font-size: 15px;
    line-height: 24px;
    text-decoration: none;
}
.skip:focus { top: 20px; color: var(--canvas); outline-color: var(--canvas); }

@media (min-width: 768px) and (max-width: 1023px) { html { scroll-padding-top: 64px; } }


.page { container: page / inline-size; overflow-x: clip; }




.wrap { padding-inline: 20px; }
@container page (min-width: 768px) {
    .wrap { padding-inline: 48px; }
}
@container page (min-width: 1024px) {
    .wrap { padding-inline: max(48px, calc((100cqw - 1060px) / 2)); }
}


.cols { display: block; }
@container page (min-width: 768px) {
    .cols { display: grid; grid-template-columns: 160px minmax(0, 1fr); align-items: start; }
}
@container page (min-width: 1024px) {
    .cols { grid-template-columns: minmax(0, 1fr) minmax(0, 700px); }
}
.cols > :only-child { grid-column: 2; }



.display {
    font-size: 40px;
    line-height: 44px;
    letter-spacing: -0.018em;
    font-weight: 500;
    text-wrap: balance;
}
.lede {
    font-family: var(--font-read);
    font-size: 20px;
    line-height: 30px;
    max-width: 640px;
    text-wrap: pretty;
}
.prose {
    font-family: var(--font-read);
    text-wrap: pretty;
}
.label { font-size: 15px; line-height: 22px; color: var(--ink-2); }
@container page (min-width: 768px) {
    .display { font-size: 56px; line-height: 60px; letter-spacing: -0.02em; }
    .lede { font-size: 22px; line-height: 32px; }
}
@container page (min-width: 1024px) {
    .display { font-size: 72px; line-height: 76px; letter-spacing: -0.022em; }
    .lede { font-size: 24px; line-height: 36px; }
}



.band {
    background: var(--band);
    color: var(--on-accent);
    padding-block: 20px 56px;
}
.band a { color: var(--on-accent); }
.band a:hover { color: var(--on-accent-link); }
.band :focus-visible { outline-color: var(--on-accent); }
.band-back {
    display: inline-block;
    font-size: 15px;
    line-height: 22px;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}
.band-back { position: relative; }
.band-back::after { content: ""; position: absolute; inset: -12px -10px; }
.band-title { margin-top: 72px; }
.band-label { font-size: 15px; line-height: 22px; margin-bottom: 14px; }
.band .lede { margin-top: 20px; }
.band-note { margin-top: 24px; font-size: 15px; line-height: 22px; max-width: 560px; }
@container page (min-width: 768px) {
    .band { padding-block: 28px 80px; }
    .band-title { margin-top: 96px; }
    .band-label { font-size: 17px; line-height: 26px; margin: 0; }
    .band .lede { margin-top: 28px; }
}
@container page (min-width: 1024px) {
    .band { padding-block: 28px 112px; }
    .band-back { padding-bottom: 3px; }
    .band-title { margin-top: 136px; }
    .band-label { font-size: 20px; line-height: 28px; }
    .band .lede { margin-top: 32px; }
}



.btn {
    display: inline-block;
    min-height: 52px;
    padding: 0 28px;
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-size: 17px;
    line-height: 52px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color var(--t-fast) linear, color var(--t-fast) linear;
}
.btn:hover { background: var(--btn-hover); color: var(--btn-fg); }
.band .btn { background: var(--on-accent); color: var(--accent); }
.band .btn:hover { background: #fff; color: var(--accent); }
.btn-row { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.btn-row > a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; font-size: 17px; line-height: 24px; }



.main { padding-top: 48px; }
@container page (min-width: 768px) { .main { padding-top: 72px; } }
@container page (min-width: 1024px) { .main { padding-top: 112px; } }

.intro { font-family: var(--font-read); font-size: 18px; line-height: 30px; max-width: 640px; text-wrap: pretty; }
@container page (min-width: 768px) { .intro { font-size: 20px; line-height: 32px; } }
@container page (min-width: 1024px) { .intro { font-size: 21px; line-height: 34px; } }


.rail { display: none; }
.rail ol { position: relative; }
.rail a {
    display: block;
    color: var(--ink-2);
    text-decoration: none;
    font-size: 16px;
    line-height: 24px;
    border-left: 2px solid var(--hair);
    padding: 7px 0 7px 14px;
    transition: color var(--t-fast) linear;
}
.rail a:hover, .rail a[aria-current] { color: var(--ink); }
.rail-n { font-variant-numeric: tabular-nums; }

.rail-mark {
    position: absolute;
    left: 0; top: 0;
    width: 2px; height: var(--rail-h, 38px);
    background: var(--mark);
    transform: translateY(var(--rail-y, 0));
    transition: transform var(--t-base) var(--ease), height var(--t-base) var(--ease);
}
.rail-mark[hidden] { display: none; }
@container page (min-width: 1024px) {
    .rail { display: block; position: sticky; top: 40px; padding-right: 40px; }
}
@container page (min-width: 768px) and (max-width: 1023px) {
    .rail {
        display: block;
        position: sticky; top: 0; z-index: 2;
        background: var(--canvas);
        border-bottom: 1px solid var(--hair);
        margin-bottom: 48px;
    }
    .rail ol { display: flex; gap: 0; }
    .rail li { flex: 0 0 auto; }
    .rail a { border-left: 0; border-bottom: 2px solid transparent; padding: 10px 16px 8px; line-height: 24px; min-width: 44px; text-align: center; }
    .rail a[aria-current] { border-bottom-color: var(--mark); }
    .rail-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .cols > .rail { grid-column: 1 / -1; }
    .cols > .rail ~ * { grid-column: 2; }
    .rail-mark { display: none; }
}


.rail-crumbs { display: none; }
@container page (min-width: 768px) {
    .rail-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; font-size: 15px; line-height: 22px; }
    .rail-crumbs a { display: inline-flex; align-items: center; padding: 0; border: 0; color: var(--ink); text-decoration: none; }
    .rail-crumbs a:hover { color: var(--link); }
    .rail-crumbs > :not(.rail-crumbs-sep) > span { border-bottom: 1px solid currentColor; padding-bottom: 3px; }
    .rail-crumbs-sep { color: var(--ink-2); }
}
@container page (min-width: 1024px) {
    .rail-crumbs { margin: 0 0 28px 16px; }
    .shelf-side .rail-crumbs { margin-left: 0; }
}

@container page (max-width: 1023px) { .shelf-side .rail-crumbs { display: none; } }
@container page (min-width: 768px) and (max-width: 1023px) {
    .rail { display: flex; align-items: center; }
    .rail-crumbs { flex: 0 0 auto; margin-right: 8px; padding-right: 16px; border-right: 1px solid var(--hair); }
    .rail .rail-crumbs a { min-height: 44px; padding-top: 3px; }

    .rail ol { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
}


.sec { padding-top: 80px; }
.sec-rule { height: 1px; background: var(--ink); transform-origin: 0 50%; }
.sec-n { padding-top: 16px; font-size: 15px; line-height: 22px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sec h2 {
    margin: 6px 0 24px;
    font-size: 34px;
    line-height: 38px;
    letter-spacing: -0.018em;
    font-weight: 500;
    text-wrap: balance;
}
@container page (min-width: 768px) {
    .sec { padding-top: 72px; }
    .sec-n { padding-top: 20px; font-size: 17px; line-height: 26px; }
    .sec h2 { margin: 8px 0 40px; font-size: 34px; line-height: 40px; }
}
@container page (min-width: 1024px) {
    .sec { padding-top: 144px; }
    .sec-n { padding-top: 24px; font-size: 20px; line-height: 28px; }
    .sec h2 { margin: 8px 0 48px; font-size: 56px; line-height: 60px; letter-spacing: -0.02em; }
}


.sec > p:not([class]), .p { font-family: var(--font-read); font-size: 18px; line-height: 30px; margin-bottom: 18px; max-width: 640px; text-wrap: pretty; }
.say { font-family: var(--font-read); font-size: 24px; line-height: 34px; margin-bottom: 20px; max-width: 640px; text-wrap: pretty; }
.sec h3 { margin: 28px 0 10px; font-size: 18px; line-height: 26px; font-weight: 500; letter-spacing: -0.01em; }
.sec h2 + h3, .sec .pair h3 { margin-top: 0; }
@container page (min-width: 768px) {
    .sec > p:not([class]), .p { font-size: 20px; line-height: 32px; margin-bottom: 28px; }
    .say { font-size: 28px; line-height: 38px; margin-bottom: 28px; }
    .sec h3 { margin: 40px 0 12px; font-size: 20px; line-height: 28px; }
}
@container page (min-width: 1024px) {
    .sec > p:not([class]), .p { font-size: 21px; line-height: 34px; margin-bottom: 34px; }
    .say { font-size: 32px; line-height: 44px; margin-bottom: 36px; }
    .sec h3 { margin: 48px 0 14px; font-size: 22px; line-height: 30px; }
}


code { font-family: var(--font-ui); font-size: 0.94em; overflow-wrap: anywhere; }


.rows { border-top: 1px solid var(--ink); }
.rows > div { padding: 16px 0 18px; }
.rows > div + div { border-top: 1px solid var(--hair); }
.rows dt { font-size: 17px; line-height: 26px; font-weight: 500; }
.rows dd { margin-top: 4px; font-family: var(--font-read); font-size: 17px; line-height: 27px; text-wrap: pretty; }
@container page (min-width: 1024px) {
    .rows > div { display: grid; grid-template-columns: 240px 1fr; gap: 20px; padding: 20px 0 22px; }
    .rows dt { font-size: 19px; line-height: 30px; }
    .rows dd { margin: 0; font-size: 19px; line-height: 30px; }
}


.list { border-top: 1px solid var(--ink); }
.list li { font-family: var(--font-read); font-size: 17px; line-height: 27px; padding: 12px 0; text-wrap: pretty; }
.list li + li { border-top: 1px solid var(--hair); }
@container page (min-width: 1024px) {
    .list li { font-size: 19px; line-height: 30px; padding: 14px 0; }
}


.pair { display: grid; gap: 40px; }
@container page (min-width: 1024px) {
    .pair { grid-template-columns: 340px 340px; gap: 20px; }
}


.steps { border-top: 4px solid var(--ink); }
.steps li { display: grid; grid-template-columns: 40px 1fr; align-items: baseline; padding: 18px 0; }
.steps li + li { border-top: 1px solid var(--ink); }
.steps .n { font-size: 15px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.steps .t { font-size: 26px; line-height: 32px; letter-spacing: -0.015em; font-weight: 500; }
@container page (min-width: 1024px) {
    .steps { border-top-width: 5px; }
    .steps li { grid-template-columns: 56px 1fr; padding: 22px 0; }
    .steps .n { font-size: 20px; }
    .steps .t { font-size: 34px; line-height: 40px; }
}
.after { margin-top: 24px; margin-bottom: 0; }
@container page (min-width: 1024px) { .after { margin-top: 32px; } }


.offers { margin-top: 40px; border-top: 4px solid var(--ink); border-bottom: 1px solid var(--ink); }
.offer + .offer { border-top: 1px solid var(--hair); }
.offer { padding: 18px 0 24px; }
.offers .offer-h { margin: 0; display: block; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 20px; font-size: 22px; line-height: 28px; letter-spacing: -0.01em; font-weight: 500; }
.offer-price { display: block; font-size: 16px; line-height: 24px; font-weight: 400; letter-spacing: 0; color: var(--ink-2); }
.offer p { margin-top: 12px; max-width: 600px; font-family: var(--font-read); font-size: 17px; line-height: 27px; text-wrap: pretty; }
.fine { margin-top: 16px; font-size: 15px; line-height: 22px; color: var(--ink-2); }
.after-offers { margin-top: 40px; }
.mail-big { margin-top: 28px; font-size: 22px; line-height: 28px; letter-spacing: -0.01em; overflow-wrap: anywhere; }
@container page (min-width: 1024px) {
    .offers { margin-top: 64px; border-top-width: 5px; }
    .offer { padding: 22px 0 30px; }
    .offer + .offer { border-top-color: var(--ink); }
    .offers .offer-h { display: flex; font-size: 28px; line-height: 34px; }
    .offer-price { font-size: 20px; line-height: 28px; }
    .offer p { margin-top: 14px; font-size: 19px; line-height: 30px; }
    .offer p:first-of-type { margin-top: 16px; }
    .fine { font-size: 16px; line-height: 24px; }
    .after-offers { margin-top: 48px; }
    .mail-big { margin-top: 40px; font-size: 28px; line-height: 34px; }
}


.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin-left: -6px; font-size: 15px; line-height: 22px; }
.crumbs li { display: flex; align-items: center; }
.crumbs li + li::before { content: "/"; content: "/" / ""; margin-right: 6px; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; text-decoration: none; }
.crumbs a > span { border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.band-sub { padding-top: 8px; }
@container page (min-width: 768px) {
    .band-sub { padding-top: 28px; }
    .crumbs ol { gap: 0 14px; margin-left: 0; }
    .crumbs li + li::before { margin-right: 14px; }
    .crumbs a { min-height: 0; padding: 0; }
    .crumbs a > span { padding-bottom: 3px; }
    .band-sub .band-title { margin-top: 96px; }
}
@container page (min-width: 1024px) {
    .band-sub .band-title { margin-top: 136px; }
}


.up-index {
    position: fixed;
    z-index: 20;
    top: max(12px, env(safe-area-inset-top));
    left: 12px;
    display: flex;
    align-items: center;
    height: 44px;
    background: var(--band);
    color: var(--on-accent);
    border: 1px solid var(--canvas);
    font-size: 15px;
    line-height: 22px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 200ms var(--ease), transform 200ms var(--ease), visibility 0s linear 200ms;
}
.up-index a { display: flex; align-items: center; height: 100%; padding: 0 12px; color: inherit; text-decoration: none; }
.up-index a:first-child { padding-left: 18px; }
.up-index a:last-child { padding-right: 18px; }
.up-index-sep { opacity: 0.6; }
.up-index.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.up-index a:hover, .up-index a:focus-visible { color: var(--on-accent-link); }
.up-index a:focus-visible { outline-color: var(--on-accent); outline-offset: -4px; }
@media (min-width: 768px) {
    .up-index { top: 20px; left: 20px; }
    .up-index.with-rail { display: none; }
}
@media (min-width: 1024px) { .up-index { display: none; } }


.band-cover { padding-bottom: calc((100cqw - 40px) / 2 + 40px); }
.cover-row { display: block; }
.cover { display: block; position: relative; z-index: 1; margin-top: -50%; }
.cover img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
@container page (min-width: 768px) {
    .band-cover { padding-bottom: calc((100cqw - 256px) / 2 + 56px); }
    .cover-row { display: grid; }
}
@container page (min-width: 1024px) {
    .band-cover { padding-bottom: 422px; }
}
.main-book { padding-top: 28px; }
.buy-note { margin-top: 16px; font-size: 15px; line-height: 23px; color: var(--ink-2); }
.buy-note a { color: var(--link); }
.buy-note a:hover { color: var(--ink); }
.sec-first { padding-top: 80px; }
.rail-cta { margin-top: 28px; padding-left: 16px; font-size: 16px; line-height: 24px; }
.rail .rail-cta a { display: inline; padding: 0; border: 0; color: var(--link); text-decoration: underline; }
.rail .rail-cta a:hover { color: var(--ink); }
@container page (min-width: 768px) and (max-width: 1023px) { .rail-cta { display: none; } }
@container page (min-width: 1024px) {
    .main-book { padding-top: 40px; }
    .main-book .rail { top: 40px; margin-top: 202px; }
    .buy-note { margin-top: 18px; line-height: 22px; }
    .sec-first { padding-top: 112px; }
}

.pull { margin-top: 36px; font-family: var(--font-read); font-size: 24px; line-height: 34px; max-width: 640px; text-wrap: pretty; }
.say-end { margin-top: 36px; }
@container page (min-width: 1024px) {
    .pull { margin-top: 56px; font-size: 32px; line-height: 44px; }
    .say-end { margin-top: 56px; }
}

.parts { margin-top: 24px; border-top: 4px solid var(--ink); }
.parts li { display: grid; grid-template-columns: 32px 1fr; padding: 16px 0 20px; }
.parts li + li { border-top: 1px solid var(--ink); }
.parts .n { font-size: 15px; line-height: 28px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.parts-t { font-size: 22px; line-height: 28px; letter-spacing: -0.015em; font-weight: 500; }
.parts-d { margin-top: 6px; font-family: var(--font-read); font-size: 17px; line-height: 27px; text-wrap: pretty; }
@container page (min-width: 1024px) {
    .parts { margin-top: 40px; border-top-width: 5px; }
    .parts li { grid-template-columns: 56px 1fr; padding: 22px 0 26px; }
    .parts .n { font-size: 20px; line-height: 40px; }
    .parts-t { font-size: 28px; line-height: 36px; }
    .parts-d { font-size: 19px; line-height: 30px; }
}

.excerpt-src { margin-bottom: 24px; font-family: var(--font-read); font-style: italic; font-size: 16px; line-height: 24px; color: var(--ink-2); }
.excerpt { border-top: 1px solid var(--ink); padding-top: 24px; }
.excerpt p { margin-bottom: 20px; max-width: 640px; font-family: var(--font-read); font-size: 20px; line-height: 32px; text-wrap: pretty; }
.after-excerpt { margin-top: 36px; }
@container page (min-width: 1024px) {
    .excerpt-src { margin-bottom: 32px; font-size: 17px; line-height: 26px; }
    .excerpt { padding-top: 32px; }
    .excerpt p { margin-bottom: 34px; font-size: 24px; line-height: 38px; }
    .after-excerpt { margin-top: 56px; }
}

.praise { border-top: 1px solid var(--ink); }
.praise figure { margin: 0; padding: 22px 0 28px; }
.praise figure + figure { border-top: 1px solid var(--hair); }
.praise blockquote p { max-width: 640px; font-family: var(--font-read); font-size: 18px; line-height: 30px; text-wrap: pretty; }
.praise .praise-lead blockquote p { font-size: 24px; line-height: 34px; }
.praise figcaption { margin-top: 16px; font-size: 16px; line-height: 24px; font-weight: 500; }
.praise figcaption span { display: block; font-size: 15px; line-height: 22px; font-weight: 400; color: var(--ink-2); }
@container page (min-width: 1024px) {
    .praise figure { padding: 28px 0 36px; }
    .praise blockquote p { font-size: 21px; line-height: 34px; }
    .praise .praise-lead blockquote p { font-size: 32px; line-height: 44px; }
    .praise figcaption { margin-top: 20px; font-size: 17px; }
}

.buy-end { padding-top: 96px; }
.buy-end h2 { margin: 20px 0 28px; font-size: 30px; line-height: 36px; letter-spacing: -0.02em; font-weight: 500; text-wrap: balance; }
@container page (min-width: 1024px) {
    .buy-end { padding-top: 176px; }
    .buy-end h2 { margin: 24px 0 40px; font-size: 48px; line-height: 54px; }
}




.screen {
    display: block;
    border-radius: 13% / 6%;
    overflow: hidden;
    background: #e9e6df;
    box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 14%, transparent);
    line-height: 0;
}
.screen img { width: 100%; height: auto; }
.screen-watch { border-radius: 24% / 20%; background: #000; }


.device { display: block; line-height: 0; }
.device img { width: 100%; height: auto; }
.device-wide { margin: 40px 0; }
@container page (min-width: 1024px) { .device-wide { margin: 48px 0; } }


.film { margin: 40px 0; }
.film video { display: block; width: 100%; height: auto; }
.film figcaption { margin-top: 12px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
@container page (min-width: 1024px) { .film { margin: 48px 0; } }


.band-app, .hero-row { --ph: calc((100cqw - 40px - 12px) / 2); }
.band-app { padding-bottom: calc(var(--ph) * 0.97 + 40px); }
.hero-row { display: block; }
.hero-phones { display: flex; align-items: flex-start; gap: 12px; margin-top: calc(var(--ph) * -0.97); position: relative; z-index: 1; color: var(--ink); }
.hero-phones > picture { flex: 0 0 var(--ph); }
.hero-phones > picture + picture { margin-top: 32px; }
@container page (min-width: 768px) {
    .band-app, .hero-row { --ph: min(336px, calc((100cqw - 256px - 28px) / 2)); }
    .band-app { padding-bottom: calc(var(--ph) * 0.97 + 56px); }
    .hero-row { display: grid; }
    .hero-phones { gap: 28px; }
    .hero-phones > picture + picture { margin-top: 64px; }
}
@container page (min-width: 1024px) {
    .band-app, .hero-row { --ph: 336px; }
    .band-app { padding-bottom: 397px; }
}

.hero-mac { align-items: flex-end; }
.hero-mac > picture:first-child { flex: 1 1 0; min-width: 0; }
.hero-mac > picture + picture { flex: 0 0 calc(var(--ph) * 0.62); margin-top: 0; }
.band .btn-row { margin-top: 28px; }
@container page (min-width: 1024px) { .band .btn-row { margin-top: 36px; } }

.sec-n span { margin-left: 0.75em; }

.samples { border-top: 4px solid var(--ink); }
.samples li { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 14px 0 16px; }
.samples li + li { border-top: 1px solid var(--hair); }
.samples-t { font-size: 19px; line-height: 26px; font-weight: 500; }
.samples-d { font-family: var(--font-read); font-size: 17px; line-height: 27px; color: var(--ink-2); }
.samples-m { font-size: 14px; line-height: 22px; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
@container page (min-width: 1024px) {
    .samples { border-top-width: 5px; }
    .samples li { gap: 16px; padding: 18px 0 20px; }
    .samples-t { font-size: 22px; line-height: 30px; }
    .samples-d { font-size: 19px; line-height: 30px; }
    .samples-m { font-size: 15px; }
}

.beats { display: grid; gap: 32px; margin-bottom: 56px; }
.beats li { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: start; color: var(--ink); }
.beats-n { font-size: 15px; line-height: 22px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sec .beats h3 { margin: 6px 0 10px; font-size: 19px; line-height: 26px; }
.beats-d { font-family: var(--font-read); font-size: 17px; line-height: 27px; text-wrap: pretty; }
@container page (min-width: 1024px) {
    .beats { grid-template-columns: repeat(3, 220px); gap: 20px; margin-bottom: 72px; }
    .beats li { display: block; }
    .beats-n { margin-top: 20px; }
    .sec .beats h3 { margin: 6px 0 14px; font-size: 22px; line-height: 30px; }
}

.sec .sub { margin-top: 0; }
.sec .sub-gap { margin-top: 56px; }
@container page (min-width: 1024px) { .sec .sub-gap { margin-top: 72px; } }
.kicker { margin-bottom: 24px; font-size: 16px; line-height: 24px; color: var(--ink-2); }
@container page (min-width: 1024px) { .kicker { font-size: 17px; } }
.pair-note { margin: -6px 0 12px; font-size: 15px; line-height: 22px; color: var(--ink-2); }

.screens { display: flex; gap: 16px; margin: 40px 0; color: var(--ink); }
.screens > picture { flex: 1 1 0; max-width: 165px; }
.screens-3 { gap: 12px; }
.screens-3 > picture { max-width: none; }
@container page (min-width: 768px) {
    .screens { gap: 20px; margin: 48px 0; }
    .screens > picture { flex: 0 0 220px; max-width: 220px; }
    .screens-3 > picture { flex: 1 1 0; }
}
@container page (min-width: 1024px) { .screens-3 > picture { flex: 0 0 220px; } }

.banner { display: block; margin-bottom: 32px; }
.banner img { width: 100%; height: auto; }
.kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; border-top: 1px solid var(--ink); }
.kinds li { padding: 12px 0; font-size: 17px; line-height: 26px; font-weight: 500; border-bottom: 1px solid var(--hair); }
.rows-gap { margin-top: 40px; }
@container page (min-width: 1024px) {
    .banner { margin-bottom: 48px; }
    .kinds li { padding: 14px 0; font-size: 20px; line-height: 30px; }
    .rows-gap { margin-top: 48px; }
}

.watches { display: flex; flex-wrap: wrap; gap: 20px 28px; }
.watches figure { margin: 0; width: 150px; }
.watches figcaption { margin-top: 12px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
@container page (min-width: 1024px) {
    .watches { gap: 14px; }
    .watches figure { width: 336px; }
    .main-app .sec-first { padding-top: 0; }
}

.sign { margin-top: 8px; font-size: 28px; line-height: 36px; font-weight: 500; }
@container page (min-width: 1024px) { .sign { font-size: 32px; line-height: 40px; } }

.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 0;
    min-height: 44px;
    font-size: 19px;
    line-height: 26px;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--ink-2); font-weight: 400; }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--link); }
.faq details p { padding: 0 0 20px; font-family: var(--font-read); font-size: 17px; line-height: 27px; text-wrap: pretty; }
@media (prefers-reduced-motion: no-preference) {
    .faq details[open] p { animation: faq-in 200ms var(--ease); }
    @keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } }
}
@container page (min-width: 1024px) {
    .faq summary { padding: 18px 0; font-size: 22px; line-height: 30px; }
    .faq details p { padding: 0 40px 24px 0; font-size: 19px; line-height: 30px; }
}

.buy-end .p { margin-bottom: 24px; }
.close-links { margin-top: 32px; font-size: 16px; line-height: 28px; }
.close-fine { margin-top: 36px; max-width: 640px; }


.read-util > .p:first-child { margin-top: 0; }
.sec-util { padding-top: 64px; }
.sec-util h2 { font-size: 30px; line-height: 36px; }
.band-meta { font-size: 15px; line-height: 22px; }
@container page (min-width: 1024px) {
    .sec-util { padding-top: 96px; }
    .sec-util h2 { margin: 8px 0 36px; font-size: 40px; line-height: 46px; }
    .band-meta { font-size: 15px; line-height: 22px; }
    .article > p:not([class]), .article .sec > p:not([class]) { max-width: 700px; }
    .sec-util > p:not([class]), .read-util > .p { margin-bottom: 26px; }
    .rail-util a { font-size: 15px; line-height: 22px; padding: 8px 0 8px 14px; }
}


.band-meta time { display: block; }
.band-meta a { display: inline-block; margin-top: 4px; }
.article > p:not([class]) { margin-bottom: 18px; max-width: 640px; font-family: var(--font-read); font-size: 18px; line-height: 30px; text-wrap: pretty; }
.quote { margin: 32px 0; max-width: 640px; }
.quote p { font-family: var(--font-read); font-style: italic; font-size: 24px; line-height: 34px; text-wrap: pretty; }
.fig { margin: 28px 0 36px; }
.fig img { width: 100%; height: auto; }
.bul, .nlist { margin: 0 0 18px; display: grid; gap: 10px; max-width: 640px; }
.bul li, .nlist li { display: grid; grid-template-columns: 22px 1fr; font-family: var(--font-read); font-size: 18px; line-height: 30px; text-wrap: pretty; }
.bul li::before { content: "\2013"; font-family: var(--font-ui); font-size: 15px; color: var(--ink-2); }
.nlist { counter-reset: n; }
.nlist li { counter-increment: n; grid-template-columns: 26px 1fr; }
.nlist li::before { content: counter(n); font-family: var(--font-ui); font-size: 15px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.olist { margin: 0 0 32px; border-top: 1px solid var(--ink); counter-reset: n; max-width: 700px; }
.olist li { counter-increment: n; display: grid; grid-template-columns: 40px 1fr; padding: 12px 0; font-family: var(--font-read); font-size: 18px; line-height: 29px; text-wrap: pretty; }
.olist li + li { border-top: 1px solid var(--hair); }
.olist li::before { content: counter(n, decimal-leading-zero); font-family: var(--font-ui); font-size: 15px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.back-to { margin-top: 64px; font-size: 16px; line-height: 24px; }
@container page (min-width: 1024px) {
    .article > p:not([class]) { margin-bottom: 26px; font-size: 21px; line-height: 34px; }
    .quote { margin: 48px 0; }
    .quote p { font-size: 34px; line-height: 44px; }
    .fig { margin: 40px 0; }
    .bul, .nlist { margin-bottom: 26px; gap: 14px; }
    .bul li, .nlist li { font-size: 21px; line-height: 34px; }
    .nlist li { grid-template-columns: 32px 1fr; }
    .bul li::before, .nlist li::before { line-height: 34px; }
    .olist { margin-bottom: 40px; }
    .olist li { grid-template-columns: 48px 1fr; padding: 14px 0; font-size: 21px; line-height: 32px; }
    .back-to { margin-top: 96px; }
}
.sec-util > p:not([class]) a, .article a { text-decoration-thickness: 1px; }


.t-intro { padding-bottom: 48px; }
.t-row { display: block; border-top: 1px solid var(--ink); padding: 20px 0 32px; color: var(--ink); text-decoration: none; transition: border-color var(--t-fast) linear; }
.t-row:hover { color: var(--ink); border-top-color: var(--mark); }
.t-row:hover .t-n { color: var(--ink); }
.t-n { display: block; font-size: 15px; line-height: 22px; color: var(--ink-2); font-variant-numeric: tabular-nums; transition: color var(--t-fast) linear; }
.t-title { display: block; margin-top: 6px; font-size: 26px; line-height: 32px; letter-spacing: -0.015em; font-weight: 500; text-wrap: balance; }
.t-row:hover .t-title { color: var(--link); }
.t-d { display: block; margin-top: 10px; font-family: var(--font-read); font-size: 18px; line-height: 28px; text-wrap: pretty; }
.t-group { margin-top: 56px; border-top: 4px solid var(--ink); padding: 20px 0 24px; }
.t-group h2 { margin-top: 6px; font-size: 28px; line-height: 34px; letter-spacing: -0.02em; font-weight: 500; }
@container page (min-width: 768px) {
    .t-row, .t-group { display: grid; grid-template-columns: 160px minmax(0, 1fr); }
    .t-n { padding-top: 8px; }
}
@container page (min-width: 1024px) {
    .t-intro { padding-bottom: 72px; }
    .t-row { grid-template-columns: minmax(0, 1fr) minmax(0, 700px); padding: 28px 0 56px; }
    .t-group { margin-top: 96px; grid-template-columns: minmax(0, 1fr) minmax(0, 700px); border-top-width: 5px; padding: 28px 0 36px; }
    .t-group .t-n { padding-top: 12px; }
    .t-intro .intro { max-width: 700px; }
    .t-n { font-size: 20px; line-height: 28px; }
    .t-title { margin-top: 0; font-size: 36px; line-height: 42px; }
    .t-d { margin-top: 16px; font-size: 19px; line-height: 30px; }
    .t-group h2 { margin-top: 0; font-size: 40px; line-height: 46px; }
}


.filters { margin-bottom: 40px; font-size: 15px; line-height: 22px; color: var(--ink-2); }
.filters[hidden] { display: block; visibility: hidden; } 
.filters-count { margin-bottom: 12px; }
.filters-box summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--link); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.filters-box[open] summary { margin-bottom: 4px; }
.filters-h { margin: 20px 0 8px; font-size: 15px; line-height: 22px; font-weight: 400; }
.filters-list { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.filters button {
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--hair);
    background: none;
    color: var(--ink-2);
    font: inherit;
    cursor: pointer;
    transition: color var(--t-fast) linear, border-color var(--t-fast) linear;
}
.filters button:hover { color: var(--ink); border-color: var(--ink-2); }
.filters button[aria-pressed="true"] { color: var(--ink); border-color: var(--mark); box-shadow: inset 0 0 0 1px var(--mark); }
.filters-reset button, .shelf-empty button { min-height: 44px; padding: 0; border: 0; color: var(--link); text-decoration: underline; text-underline-offset: 4px; }
.shelf-empty { margin-top: 40px; font-family: var(--font-read); font-size: 18px; line-height: 30px; }
.shelf-empty button { background: none; font: inherit; cursor: pointer; }
.shelf[hidden] { display: none; }
.books li { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 14px 0 16px; }
.books li + li { border-top: 1px solid var(--hair); }
.books li[hidden] { display: none; }
.book-t { color: var(--ink); text-decoration: none; font-size: 19px; line-height: 26px; }
.book-t:hover { color: var(--link); text-decoration: underline; }
.book-fin { font-size: 14px; line-height: 26px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.book-m { grid-column: 1 / -1; font-family: var(--font-read); font-size: 16px; line-height: 25px; color: var(--ink-2); }
.book-cols { color: var(--ink-2); }
@container page (min-width: 1024px) {
    .shelf-side { position: sticky; top: 40px; padding-right: 40px; }
    .filters { margin: 0; }
    .filters[hidden] { display: none; }
    .filters-box summary { display: none; }
    .filters-list:not(.filters-chips) { flex-direction: column; border-left: 1px solid var(--hair); gap: 0; }
    .filters-list:not(.filters-chips) button { min-height: 0; padding: 4px 0 4px 14px; border: 0; text-align: left; }
    .filters-list:not(.filters-chips) button[aria-pressed="true"] { box-shadow: inset 2px 0 0 var(--mark); }
    .filters-chips button { min-height: 0; padding: 2px 0; margin-right: 10px; border: 0; }
    .filters-chips button[aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--mark); }
    .books li { padding: 20px 0 22px; }
    .book-t { font-size: 21px; line-height: 28px; font-weight: 500; }
    .shelf h2 { font-size: 40px; line-height: 46px; }
    .book-fin { font-size: 15px; line-height: 30px; }
    .book-m { font-size: 18px; line-height: 28px; }
}
.shelf:first-child, .shelf.is-first { padding-top: 0; }


html.night-page { background: var(--night); color-scheme: dark; }
.night { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; background: var(--night); color: var(--on-accent); }
.night a { color: var(--on-accent); }
.night a:hover { color: var(--on-accent-link); }
.night :focus-visible { outline-color: var(--on-accent); }
.rings { position: absolute; left: -115px; top: -60px; width: 620px; height: 620px; pointer-events: none; }
.rings g { transform-origin: 450px 450px; transform: rotate(var(--a, 0deg)); animation: ring var(--d) linear infinite var(--dir); }
@keyframes ring { from { transform: rotate(var(--a, 0deg)); } to { transform: rotate(calc(var(--a, 0deg) + 360deg)); } }
.night-inner { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; min-height: 100svh; padding-block: 20px 40px; }
.night-inner .band-back { align-self: flex-start; }
.night-main { max-width: 620px; padding-top: 420px; }
.night-label { margin-bottom: 14px; font-size: 15px; line-height: 22px; color: var(--on-accent-link); }
.night-text { margin-top: 24px; font-family: var(--font-read); font-size: 18px; line-height: 28px; text-wrap: pretty; }
.night-text a { color: var(--on-accent-link); }
.night-links { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 17px; line-height: 27px; }
.night-links a { display: inline-block; min-height: 44px; padding-top: 8px; }
@container page (min-width: 1024px) {
    .rings { left: auto; right: -260px; top: -100px; width: 1100px; height: 1100px; }
    .night-inner { padding-block: 28px 96px; }
    .night-main { padding-top: 240px; }
    .night-text { margin-top: 32px; font-size: 21px; line-height: 34px; }
}


.closing { padding-top: 96px; }
.closing p { font-size: 30px; line-height: 36px; letter-spacing: -0.02em; font-weight: 500; text-wrap: balance; }
.closing .label { padding-bottom: 12px; font-size: 15px; line-height: 22px; font-weight: 400; letter-spacing: 0; text-wrap: wrap; }
@container page (min-width: 1024px) {
    .closing { padding-top: 176px; }
    .closing .label { font-size: 20px; line-height: 28px; padding-bottom: 16px; }
    .closing p { font-size: 48px; line-height: 54px; }
}




.ending { padding-top: 120px; }
@container page (min-width: 768px) { .ending { padding-top: 160px; } }
@container page (min-width: 1024px) { .ending { padding-top: 200px; } }

.home-head { padding-top: 40px; }
.name-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 17px;
    line-height: 26px;
    padding-bottom: 10px;
}
.name-row a { color: inherit; text-decoration: none; }
.name-role { font-size: 13px; line-height: 20px; color: var(--ink-2); text-align: right; }
.rule-5 { height: 4px; background: var(--ink); }
.home-head .display { margin-top: 28px; max-width: 1060px; }
.home-intro { margin-top: 20px; }
.home-intro .prose { font-size: 18px; line-height: 30px; }
.home-now { font-size: 15px; line-height: 23px; max-width: 520px; text-wrap: pretty; }
.home-now + .prose { margin-top: 18px; }
@container page (min-width: 768px) {
    .home-head { padding-top: 56px; }
    .name-row { font-size: 20px; line-height: 28px; padding-bottom: 14px; }
    .name-role { font-size: 15px; line-height: 22px; }
    .rule-5 { height: 5px; }
    .home-head .display { margin-top: 48px; }
    .home-intro { margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    .home-intro .prose { font-size: 20px; line-height: 32px; }
    .home-now { font-size: 17px; line-height: 26px; }
    .home-now + .prose { margin-top: 24px; }
}
@container page (min-width: 1024px) {
    .home-head { padding-top: 72px; }
    .home-head .display { margin-top: 64px; }
    .home-intro { margin-top: 40px; }
    .home-intro .prose { font-size: 21px; line-height: 34px; }
}


.tiles {
    padding-top: 56px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 44px 20px;
    align-items: end;
}
.tile-wide { grid-column: 1 / -1; }
.tile-link { display: flex; flex-direction: column; height: 100%; color: var(--ink); text-decoration: none; }
.tile-link > .tile-frame { margin-top: auto; } 
.tile-link:hover, .tile-link:focus-visible { color: var(--link); }
.tile-name { display: flex; flex-direction: column; font-size: 16px; line-height: 22px; padding-bottom: 8px; }

.tile-kind { font-size: 13px; line-height: 20px; color: var(--ink-2); }
.tile-frame {
    display: block;
    container: tile / inline-size;
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-top: 4px solid currentColor;
    background: var(--tile);
    transition: border-color var(--t-fast) linear;
}
.tile-wide .tile-frame { aspect-ratio: 350 / 330; }

.mini {
    display: block;
    container: page / inline-size;
    position: absolute;
    top: 0; left: 0;
    width: 390px;
    height: 600px;
    transform-origin: 0 0;
    transform: scale(tan(atan2(100cqw, 390px)));
    background: var(--canvas);
    color: var(--ink);
    pointer-events: none;
}
@container page (min-width: 768px) {
    .tiles { padding-top: 96px; gap: 64px 20px; }
    .tile-name { font-size: 20px; line-height: 28px; padding-bottom: 14px; }
    .tile-kind { font-size: 15px; line-height: 22px; }

    .tile-frame { aspect-ratio: 520 / 360; border-top-width: 5px; }
    .tile-wide .tile-frame { aspect-ratio: 1060 / 440; }
    .mini { width: 1440px; height: 1000px; transform: scale(tan(atan2(100cqw, 1440px))); }
}
@container page (min-width: 1024px) {
    .tiles { padding-top: 144px; }
}


.mini .rail { position: static; }
.mini .rail li > span { display: block; color: var(--ink-2); font-size: 16px; line-height: 24px; border-left: 2px solid var(--hair); padding: 7px 0 7px 14px; }
.mini .rail li:first-child > span { color: var(--ink); border-left-color: var(--mark); }
.mini .rail-mark { display: none; }


.playground { padding-top: 72px; }
.playground h2 { font-size: 17px; line-height: 26px; font-weight: 400; padding-bottom: 12px; }
.playground .prose { margin-bottom: 24px; max-width: 640px; font-size: 17px; line-height: 27px; color: var(--ink-2); }
.pg-list { border-top: 1px solid var(--ink); }
.pg-list a {
    display: block;
    padding: 14px 0;
    font-size: 19px;
    line-height: 28px;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--hair);
}
.pg-list a > span { display: block; transition: transform var(--t-fast) var(--ease); }
.pg-list a:hover { color: var(--link); }
.pg-list a:hover > span { transform: translateX(8px); }
.pg-d { display: block; margin-top: 2px; font-size: 15px; line-height: 22px; color: var(--ink-2); }
@container page (min-width: 768px) {
    .playground { padding-top: 144px; }
    .playground h2 { font-size: 20px; line-height: 28px; padding-bottom: 14px; }
    .playground .prose { margin-bottom: 32px; font-size: 19px; line-height: 30px; }
    .pg-list { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; grid-auto-flow: column; gap: 0 20px; }
    .pg-list a { padding: 16px 0; font-size: 24px; line-height: 30px; }
    .pg-d { font-size: 16px; line-height: 24px; min-height: 48px; }
}


.foot { padding-block: 72px 40px; font-size: 15px; line-height: 26px; }
.foot-rule { display: none; height: 1px; background: var(--ink); }
.foot h2 { font-size: 17px; line-height: 26px; font-weight: 400; padding-bottom: 8px; }
.foot-meta { padding-top: 36px; font-size: 14px; line-height: 22px; color: var(--ink-2); }
.foot-meta strong { display: block; font-weight: 400; }
@container page (min-width: 768px) {
    .foot { padding-block: 120px 72px; }
    .foot-rule { display: block; }
    .foot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-top: 36px; }
    .foot h2 { font-size: 20px; line-height: 28px; padding-bottom: 12px; }
    .foot-meta { padding-top: 0; font-size: 15px; line-height: 26px; }
    .foot-meta strong { font-size: 20px; line-height: 28px; padding-bottom: 12px; color: var(--ink); }
}



@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
    
    ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; }
    
    ::view-transition-group(*) { animation-duration: 360ms; animation-timing-function: var(--ease); }

    
    html.vt-in::view-transition-new(root) { transform-origin: 0 0; animation: vt-grow 360ms var(--ease) both; }
    html.vt-in::view-transition-old(root) { animation: vt-fade 360ms linear both; }
    @keyframes vt-grow { from { transform: translate(var(--vt-x), var(--vt-y)) scale(var(--vt-s)); } }

    
    html.vt-out::view-transition-old(root) { z-index: 1; transform-origin: 0 0; animation: vt-shrink 360ms var(--ease) both; }
    html.vt-out::view-transition-new(root) { animation: none; }
    @keyframes vt-shrink {
        70% { opacity: 1; }
        to { transform: translate(var(--vt-x), var(--vt-y)) scale(var(--vt-s)); opacity: 0; }
    }
    @keyframes vt-fade { to { opacity: 0; } }

    
    ::view-transition-group(vt-row) { overflow: clip; }
    html.vt-row-in::view-transition-old(vt-row) { display: none; }
    html.vt-row-in::view-transition-new(vt-row) { inset: 0 auto auto 0; width: 100%; height: auto; animation: none; }
    html.vt-row-in::view-transition-old(vt-title) { display: none; }
    html.vt-row-in::view-transition-new(vt-title) { animation: none; }
    html.vt-row-in::view-transition-old(root) { animation: vt-fade 160ms linear both; }
    html.vt-row-in::view-transition-new(root) { animation: vt-appear 200ms linear 160ms both; }
    @keyframes vt-appear { from { opacity: 0; } }
    html.vt-row-out::view-transition-old(vt-row) { inset: 0 auto auto 0; width: 100%; height: auto; animation: vt-fade-late 360ms linear both; }
    html.vt-row-out::view-transition-new(vt-row),
    html.vt-row-out::view-transition-new(vt-title) { animation: vt-appear 120ms linear 240ms both; }
    html.vt-row-out::view-transition-old(vt-title) { animation: vt-fade-late 360ms linear both; }
    html.vt-row-out::view-transition-old(root) { animation: vt-fade 160ms linear both; }
    html.vt-row-out::view-transition-new(root) { animation: none; }
    @keyframes vt-fade-late { 65% { opacity: 1; } to { opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}


.agf {
    --agf-stage: #ffffff; --agf-sub: #5a564f; --agf-line: #d6d3cd; --agf-tint: #eceef8;
    --agf-on: #f7f6ff; --agf-on-soft: rgba(247, 246, 255, 0.2); --agf-link: #26357a;
    --agf-block: #e6e4de; --agf-phone: #141414; --agf-scan: rgba(38, 53, 122, 0.12);
    margin: 48px 0 8px;
    font-size: 16px;
    line-height: 1.4;
}

@container page (max-width: 767px) { .agf { font-size: 13px; } }
.agf-stage {
    position: relative;
    overflow: hidden;
    aspect-ratio: 10 / 7;
    min-height: 30em;
    padding: 1.75em 2em;
    background: var(--agf-stage);
    color: var(--ink);
}
@container page (max-width: 767px) { .agf-stage { aspect-ratio: auto; padding: 1.5em 1.25em; } }
.agf-cap { display: flex; justify-content: space-between; align-items: center; gap: 1em; margin-top: 0.5em; font-size: 0.875em; line-height: 1.5; color: var(--ink-2); }
.agf-btn { min-width: 44px; min-height: 44px; padding: 0 0.5em; border: 0; background: none; color: var(--link); font: inherit; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.agf-btn[hidden] { display: none; }
.agf-pill { display: inline-flex; align-items: center; gap: 0.5em; border-radius: 999px; padding: 0.35em 0.9em 0.35em 0.5em; font-weight: 500; }
.agf-pill::before { content: ""; width: 1.25em; height: 1.25em; border-radius: 50%; background: currentColor; }
.agf-pill-a { background: var(--accent); color: var(--agf-on); }
.agf-pill-b { background: var(--agf-tint); }
.agf-pill-b::before { background: var(--agf-link); }


.agf-ex { display: flex; flex-direction: column; gap: 0.7em; height: 100%; }

.agf-ex-head { display: flex; justify-content: space-between; gap: 1em; }
.agf-msg { max-width: 70%; padding: 0.75em 1em; border-radius: 1.25em 1.25em 1.25em 0.4em; background: var(--accent); color: var(--agf-on); align-self: flex-start; text-wrap: pretty; overflow-wrap: anywhere; }
.agf-msg-b { align-self: flex-end; border-radius: 1.25em 1.25em 0.4em 1.25em; background: var(--agf-tint); color: var(--ink); }
.agf-dots { display: flex; gap: 0.4em; padding: 0.5em 0.25em; }
.agf-dots i { width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--agf-link); animation: agf-pulse 1.2s infinite; }
.agf-dots i:nth-child(2) { animation-delay: 0.2s; }
.agf-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes agf-pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }


.agf-me { display: flex; flex-wrap: wrap; gap: 2em 2.5em; align-items: center; justify-content: center; height: 100%; }
.agf-phone { position: relative; flex: none; width: 13em; height: 23em; overflow: hidden; border: 0.55em solid var(--agf-phone); border-radius: 2.4em; background: var(--agf-stage); }
.agf-bar { display: block; height: 0.6em; border-radius: 0.4em; background: var(--agf-block); }
.agf-phone-top { display: flex; justify-content: space-between; margin: 1.4em 1em 0; }
.agf-phone-top .agf-bar { width: 4em; height: 0.65em; }
.agf-phone-top .agf-bar + .agf-bar { width: 1.3em; }
.agf-h { position: relative; margin: 1.6em 1em 0; font-size: 1.55em; line-height: 1.15; font-weight: 500; letter-spacing: -0.02em; }
.agf-box { position: absolute; inset: -0.3em -0.45em; border: 0.15em solid var(--agf-link); border-radius: 0.5em; }
.agf-badge { display: inline-block; flex: none; width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--agf-link); color: var(--agf-stage); font-size: 0.8em; line-height: 1.4em; text-align: center; font-weight: 500; }
.agf-h .agf-badge { position: absolute; right: -0.6em; top: -0.75em; font-size: 0.55em; }
.agf-phone .agf-bar.l1 { margin: 1.4em 1em 0; }
.agf-phone .agf-bar.l2 { width: 68%; margin: 0.5em 1em 0; }
.agf-phone .agf-bar.l3 { height: 2.4em; margin: 1.5em 1em 0; border-radius: 1.2em; }
.agf-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6em; margin: 1.1em 1em 0; }
.agf-cards .agf-bar { height: 4.8em; border-radius: 0.9em; }
.agf-cards .agf-bar + .agf-bar { margin-top: 1em; }
.agf-scan { position: absolute; left: 0; right: 0; top: 0; height: 2.1em; background: var(--agf-scan); border-bottom: 0.12em solid var(--agf-link); opacity: 0; }
.agf-side { display: flex; flex: 1; flex-direction: column; gap: 1em; min-width: 14em; }
.agf-flag { padding: 0.9em 1em; border: 1px solid var(--agf-line); border-radius: 1em; }
.agf-flag-t { display: flex; align-items: center; gap: 0.6em; font-weight: 500; }
.agf-sub { margin-top: 0.2em; color: var(--agf-sub); }
.agf-ticket { padding: 0.9em 1em; border-radius: 1em; background: var(--accent); color: var(--agf-on); }
.agf-ticket-t { display: flex; justify-content: space-between; gap: 0.6em; font-weight: 500; }
.agf-tag { padding: 0 0.8em; border-radius: 999px; background: var(--agf-on); color: var(--accent); font-size: 0.85em; line-height: 1.7em; font-weight: 500; }
.agf-shot { display: block; height: 2.6em; margin-top: 0.7em; border-radius: 0.6em; background: var(--agf-on-soft); }


.agf-le { display: flex; flex-direction: column; gap: 0.7em; height: 100%; }
.agf-le-head { display: flex; justify-content: space-between; align-items: center; gap: 1em; margin-bottom: 0.5em; }
.agf-le-head .agf-chip { padding: 0.3em 0.9em; border-radius: 999px; background: var(--agf-tint); font-weight: 500; }
.agf-le-head .agf-sub { margin: 0; text-align: right; }
.agf-row { display: flex; align-items: center; gap: 0.9em; padding: 0.85em 1em; border: 1px solid var(--agf-line); border-radius: 1em; }
.agf-row-tag { display: grid; place-items: center; flex: none; width: 2.4em; height: 2.4em; border-radius: 50%; background: var(--agf-tint); font-weight: 500; font-size: 0.9em; }
.agf-row-t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.agf-state { position: relative; flex: none; width: 4.8em; height: 1.8em; }
.agf-state span { position: absolute; inset: 0; border-radius: 999px; text-align: center; line-height: 1.8em; transition: opacity 300ms ease-out; }
.agf-open { background: var(--accent); color: var(--agf-on); }
.agf-closed { background: var(--agf-block); }

.agf-row[data-close] .agf-open { opacity: 0; }
.agf-row[data-close] .agf-closed { opacity: 1; }
.agf-note { margin-top: auto; padding: 0.8em 1em; border-radius: 0.9em; background: var(--agf-tint); text-wrap: pretty; }


.agf-app { display: flex; flex-wrap: wrap; gap: 2em 2.5em; align-items: center; justify-content: center; height: 100%; }
.agf-app .agf-phone { width: 14em; height: 26em; }
.agf-scr { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--agf-stage); font-size: 0.8em; }
.agf-scr-page { flex: 1; padding: 2em 1.2em 0; opacity: 0.45; }
.agf-scr-page .agf-bar { margin-top: 0.7em; }
.agf-sheet { padding: 1.1em 1.1em 1.6em; border-radius: 1.4em 1.4em 0 0; background: var(--agf-tint); }
.agf-sheet-t { font-weight: 500; }
.agf-sheet-link { margin-top: 0.6em; padding: 0.6em 0.8em; border-radius: 0.8em; background: var(--agf-stage); }
.agf-apps { display: flex; justify-content: space-between; margin-top: 1em; }
.agf-apps span { display: grid; place-items: center; width: 3.2em; height: 3.2em; border-radius: 0.9em; background: var(--agf-block); font-size: 0.85em; }
.agf-apps .agf-apps-me { background: var(--accent); color: var(--agf-on); font-weight: 500; }
.agf-scr-head { padding: 2.2em 1.1em 0.9em; border-radius: 0 0 1.2em 1.2em; background: var(--agf-phone); color: var(--agf-on); font-family: var(--font-read); font-size: 1.35em; }
.agf-scr-body { flex: 1; padding: 0.9em 0.8em 0; }
.agf-card { display: flex; align-items: center; gap: 0.7em; padding: 0.7em 0.8em; border-radius: 0.9em; background: var(--agf-tint); }
.agf-card + .agf-card, .agf-card + .agf-bar { margin-top: 0.6em; }
.agf-card-i { flex: none; width: 1.8em; height: 1.8em; border-radius: 0.5em; background: var(--agf-stage); }
.agf-card-t { flex: 1; min-width: 0; }
.agf-card-t b { display: block; font-weight: 500; }
.agf-card-t span { display: block; color: var(--agf-sub); font-size: 0.9em; }
.agf-card-n { flex: none; color: var(--agf-sub); font-size: 0.85em; }
.agf-card-dim { opacity: 0.6; }
.agf-ask { margin: 2.2em 0.8em 0; padding: 0.7em 0.9em; border-radius: 0.9em; background: var(--agf-tint); }
.agf-ans { margin: 0.8em 0.8em 0; overflow: hidden; border-radius: 0.9em; border: 1px solid var(--agf-line); }
.agf-ans-h { padding: 0.45em 0.9em; background: var(--agf-phone); color: var(--agf-on); font-size: 0.8em; font-weight: 500; letter-spacing: 0.06em; }
.agf-ans-t { padding: 0.7em 0.9em; }
.agf-ans .agf-card { margin: 0 0.6em; }
.agf-ans-f { padding: 0.6em 0.9em; color: var(--agf-sub); font-size: 0.85em; }
.agf-tabs { display: flex; gap: 0.3em; margin: auto 0.8em 1.2em; padding: 0.3em; border-radius: 1.1em; background: var(--agf-phone); color: var(--agf-on); }
.agf-tabs span { flex: 1; padding: 0.5em 0; border-radius: 0.9em; text-align: center; }
.agf-tabs .agf-tab-on { background: var(--agf-stage); color: var(--ink); }
.agf-steps { display: flex; flex: 1; flex-direction: column; gap: 0.7em; min-width: 14em; }
.agf-step { display: flex; gap: 0.7em; padding: 0.75em 0.9em; border: 1px solid var(--agf-line); border-radius: 1em; transition: border-color 300ms ease-out, opacity 300ms ease-out, transform 300ms ease-out; }
.agf-step .agf-badge { margin-top: 0.1em; }
.agf-step-t { font-weight: 500; }
.agf-on .agf-step.is-now { border-color: var(--agf-link); box-shadow: inset 0 0 0 1px var(--agf-link); }


.agf-bd { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1.5em; align-items: start; height: 100%; }
@container page (max-width: 767px) { .agf-bd { grid-template-columns: minmax(0, 1fr); } }
.agf-doc { padding: 1em; border: 1px solid var(--agf-line); border-radius: 1em; font-size: 0.85em; }
.agf-doc p + p { margin-top: 0.5em; }
.agf-doc .agf-chip { display: inline-block; margin-bottom: 0.7em; padding: 0.2em 0.8em; border-radius: 999px; background: var(--agf-tint); font-weight: 500; }
.agf-pulled { display: flex; flex-wrap: wrap; gap: 0.4em; margin-top: 0.9em; }
.agf-pulled span { padding: 0.2em 0.7em; border-radius: 999px; background: var(--accent); color: var(--agf-on); }
.agf-wf { display: flex; flex-direction: column; gap: 0.6em; padding: 0.8em; border: 1px solid var(--agf-line); border-radius: 1em; }
.agf-wf-top { display: flex; gap: 0.35em; }
.agf-wf-top i { width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--agf-block); }
.agf-blk { padding: 0.7em 0.8em; border-radius: 0.6em; background: var(--agf-block); }
.agf-blk-l { display: block; color: var(--agf-sub); font-size: 0.75em; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.agf-blk-h { display: block; margin-top: 0.2em; font-size: 1.15em; font-weight: 500; line-height: 1.2; }
.agf-blk-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4em; margin-top: 0.4em; font-size: 0.85em; }
.agf-blk-row span { padding: 0.4em 0.5em; border-radius: 0.4em; background: var(--agf-stage); }
.agf-verify { padding: 0 0.5em; border-radius: 999px; background: var(--agf-tint); color: var(--agf-link); font-size: 0.8em; font-weight: 500; }
.agf-cta { display: inline-block; margin-top: 0.4em; padding: 0.35em 1em; border-radius: 999px; background: var(--accent); color: var(--agf-on); font-size: 0.9em; }
.agf-bd .agf-note { grid-column: 1; margin-top: 0; }
.agf-bd .agf-wf { grid-row: span 2; }



.agf [data-s], .agf-scan { transition: opacity 300ms ease-out, transform 300ms ease-out; }
.agf-on [data-s]:not(.is-in) { opacity: 0; transform: translateY(0.4em); }
.agf-on .agf-ticket[data-s]:not(.is-in) { transform: translateX(-0.6em); }
.agf-on[data-step="1"] .agf-scan { opacity: 1; transform: translateY(19em); transition: transform 1.4s ease-out, opacity 300ms ease-out; }
.agf-on .agf-row[data-close]:not(.is-closed) .agf-open { opacity: 1; }
.agf-on .agf-row[data-close]:not(.is-closed) .agf-closed { opacity: 0; }
@media print {
    .agf-on [data-s] { opacity: 1 !important; transform: none !important; }
    .agf-btn { display: none; }
}



@media (forced-colors: active) {
    .up-index { border-color: CanvasText; }
    .agf-stage { border: 1px solid CanvasText; }
    .agf-msg, .agf-ticket, .agf-row, .agf-flag, .agf-note, .agf-pill, .agf-card, .agf-blk, .agf-step { border: 1px solid CanvasText; }
    .agf-on .agf-step.is-now { border-width: 3px; }
    .rule-5, .sec-rule, .foot-rule { background: CanvasText; }
    .band { border-bottom: 1px solid CanvasText; }
    .rail a[aria-current] { border-left-color: Highlight; }
    .rail-mark { forced-color-adjust: none; background: Highlight; }
    .rail a { border-bottom-color: Canvas; }
    .rail a[aria-current] { border-bottom-color: Highlight; }
    .filters button[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
    .btn { border: 1px solid ButtonText; }
}

/* Dark mode as a class (from 2 prefers-color-scheme block(s)) */
.theme-dark { color-scheme: dark; }
.theme-dark {
        --canvas: #121212;
        --ink: #ecebe7;
        --ink-2: #a8a399;
        --hair: #33312e;
        --tile: #1e1e1c;
        --link: #aab4f0;
        --btn-bg: #aab4f0;
        --btn-fg: #121212;
        --btn-hover: #ecebe7;
        --photo: brightness(0.88);
        --mark: #aab4f0;
    }
.theme-dark .agf {
        --agf-stage: #1e1e1c; --agf-sub: #a8a399; --agf-line: #33312e; --agf-tint: #272b45;
        --agf-link: #aab4f0; --agf-block: #33312e; --agf-phone: #0b0b0b; --agf-scan: rgba(170, 180, 240, 0.16);
    }
/* Higher contrast must still win over dark, as it does on the site */
@media (prefers-contrast: more) {
.theme-dark { --ink-2: var(--ink); --hair: var(--ink); }
}
:root:not(.theme-dark) { color-scheme: light; }