.tmn-story-intro {
    --tmn-intro-runway: 48px;
    --tmn-intro-drawing-room: clamp(160px, 24vh, 240px);
    --tmn-intro-header: var(--tmn-story-header);
    --tmn-intro-usable: calc(var(--tmn-story-viewport) - var(--tmn-intro-header));
    --tmn-intro-travel: clamp(1740px, 310vh, 2700px);
    position: relative;
    overflow-anchor: none;
}
@supports (height: 100svh) {
    .tmn-story-intro { --tmn-intro-travel: clamp(1740px, 310svh, 2700px); }
}
.tmn-story-intro-pin {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-rows: auto auto auto minmax(110px, 1fr);
    justify-items: center;
    min-height: var(--tmn-intro-usable);
    overflow: hidden;
    padding: clamp(18px, 5vh, 54px) clamp(14px, 4vw, 52px) clamp(14px, 3.2vh, 32px);
    color: #f4edf4;
    background: radial-gradient(ellipse at 62% 53%, #24202a, #141518 67%);
}
.tmn-story-intro[data-tmn-intro-live] {
    height: calc(var(--tmn-intro-usable) + var(--tmn-intro-travel) * .803 + var(--tmn-intro-drawing-room) + var(--tmn-intro-runway));
}
.tmn-story-intro[data-tmn-intro-live] + .tmn-story-track {
    position: relative;
    z-index: 1;
    margin-block-start: calc(-1 * var(--tmn-intro-overlap, calc(var(--tmn-story-viewport) - var(--tmn-story-header))));
    opacity: var(--tmn-intro-timeline-opacity, 0);
}
.tmn-story-intro[data-tmn-intro-live] + .tmn-story-track:not([data-tmn-intro-timeline-visible]) { visibility: hidden; }
[data-tmn-intro-live][data-tmn-intro-ended] .tmn-story-intro-pin { visibility: hidden; }
[data-tmn-intro-live] .tmn-story-intro-pin {
    position: sticky;
    z-index: 2;
    opacity: var(--tmn-intro-scene-opacity, 1);
    top: var(--tmn-intro-header);
    height: var(--tmn-intro-usable);
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-columns: minmax(0, 1fr);
    background: radial-gradient(ellipse at 62% 53%, rgba(52, 40, 60, var(--tmn-intro-light, .36)), transparent 67%), #141518;
}
.tmn-intro-playback {
    display: none;
    position: fixed;
    z-index: 4;
    inset: calc(var(--tmn-intro-header) + clamp(9px, 2.2vh, 22px)) clamp(8px, 3.4vw, 54px) auto auto;
    min-width: 44px;
    min-height: 44px;
    padding: 3px 4px 2px;
    border: 0;
    background: transparent;
    color: #f1eaf0;
    font: inherit;
    font-size: .59rem;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
    visibility: hidden;
    opacity: 0;
    transition: opacity .22s ease, visibility .22s ease;
}
[data-tmn-intro-live] .tmn-intro-playback {
    display: grid;
    justify-items: center;
    gap: 4px;
}
[data-tmn-intro-live][data-tmn-intro-control-visible] .tmn-intro-playback {
    opacity: 1;
    visibility: visible;
}
.tmn-intro-playback-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid #f3edf045;
    border-radius: 50%;
    background: #1b1b23c4;
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    transition: transform .24s ease, background-color .24s ease, border-color .24s ease;
}
.tmn-intro-playback-pause,
.tmn-intro-playback[data-tmn-intro-playing] .tmn-intro-playback-forward { display: none; }
.tmn-intro-playback[data-tmn-intro-playing] .tmn-intro-playback-pause { display: inline; }
.tmn-intro-playback:is(:hover, :focus-visible) .tmn-intro-playback-icon {
    transform: scale(1.05);
    border-color: #f3edf07a;
    background: #35333ded;
}
.tmn-intro-playback:focus-visible { outline: 2px solid #eee4ef; outline-offset: 2px; border-radius: 12px; }
@media (max-width: 600px) {
    .tmn-intro-playback { font-size: .55rem; }
    .tmn-intro-playback-icon { width: 36px; height: 36px; }
    .tmn-intro-heading { transition: translate .22s ease; }
    [data-tmn-intro-live][data-tmn-intro-control-visible] .tmn-intro-heading { translate: 0 50px; }
}
.tmn-intro-heading, .tmn-intro-dialogue { text-align: center; }
.tmn-intro-heading { z-index: 1; }
.tmn-intro-index {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 11px;
    font-size: .66rem;
    font-weight: 500;
    letter-spacing: .23em;
    text-transform: uppercase;
    color: #b8a9bf;
}
.tmn-intro-index span { width: 15px; height: 1px; background: #ab89b7; }
.tmn-intro-heading h1 {
    max-width: 23ch;
    margin: 0;
    font-size: clamp(1.65rem, 4.2vw, 4.45rem);
    font-weight: 650;
    line-height: 1.07;
    letter-spacing: -.065em;
    text-wrap: balance;
}
.tmn-intro-art {
    display: grid;
    width: min(100%, 980px);
    align-self: stretch;
    min-height: 0;
    place-items: center;
    pointer-events: none;
}
.tmn-intro-art svg { width: 100%; height: 100%; max-height: 550px; overflow: visible; }
.tmn-intro-dialogue {
    display: grid;
    justify-items: center;
    align-items: center;
    gap: 9px;
    margin: 16px 0 0;
    z-index: 1;
}
.tmn-intro-dialogue p, .tmn-intro-notes p { margin: 0; }
.tmn-intro-notes {
    display: grid;
    justify-items: center;
    gap: 8px;
    margin: 10px 0 0;
    z-index: 1;
}
[data-tmn-intro-live] .tmn-intro-static-logo,
.tmn-intro-aside, .tmn-intro-idle-cue, .tmn-intro-footer, .tmn-intro-continue { display: none; }
.tmn-intro-aside, .tmn-intro-idle-cue, .tmn-intro-continue {
    margin: 0;
    color: #cdbdd2;
    font-size: .72rem;
    letter-spacing: .045em;
}
[data-tmn-intro-live] .tmn-intro-aside,
[data-tmn-intro-live] .tmn-intro-idle-cue { display: block; position: absolute; z-index: 1; }
.tmn-intro-aside { inset: clamp(38px, 9vh, 92px) auto auto clamp(38px, 19vw, 350px); }
.tmn-intro-idle-cue {
    top: var(--tmn-intro-idle-y, 44%);
    left: var(--tmn-intro-idle-x, 50%);
    translate: -50% -100%;
    padding: 3px 7px;
    border: 1px solid #665a6c;
    border-radius: 12px;
    background: #221e28;
    color: #f1eaf1;
    font-size: .6rem;
    white-space: nowrap;
}
.tmn-intro-access-skip {
    position: absolute;
    inset: 12px auto auto 16px;
    z-index: 4;
    padding: 8px 12px;
    border-radius: 8px;
    background: #292331;
    color: #f4edf4;
    font-size: .8rem;
}
.tmn-intro-access-skip:not(:focus) { clip-path: inset(50%); }
.tmn-intro-continue span { margin-inline-start: 4px; color: #ddbadf; }
.tmn-intro-thought {
    position: relative;
    border: 1px solid #625468;
    border-radius: 19px 19px 19px 5px;
    padding: 6.5px 11.5px;
    background: #231f29;
    color: #efe5f1;
    font-size: clamp(.68rem, 1.19vw, .87rem);
    line-height: 1.35;
}
.tmn-intro-discovery { color: #eed3ed; }
[data-tmn-intro-live] :is(.tmn-intro-dialogue, .tmn-intro-notes) {
    position: absolute;
    top: var(--tmn-intro-note-y);
    left: var(--tmn-intro-note-edge);
    width: min(calc(var(--tmn-intro-note-edge) - 18px), 332px);
    margin: 0;
    justify-items: end;
    text-align: start;
    translate: -100%;
}
[data-tmn-intro-live] .tmn-intro-dialogue {
    --tmn-intro-note-y: 43%;
    --tmn-intro-note-edge: 55%;
}
[data-tmn-intro-live] .tmn-intro-notes {
    --tmn-intro-note-y: 38%;
    --tmn-intro-note-edge: 46%;
}
[data-tmn-intro-live] :is(.tmn-intro-dialogue, .tmn-intro-notes, .tmn-intro-footer) p { grid-area: 1 / 1; }
[data-tmn-intro-live] :is(.tmn-intro-heading, .tmn-intro-aside, .tmn-intro-idle-cue, .tmn-intro-dialogue p, .tmn-intro-notes p, .tmn-intro-footer p, .tmn-intro-continue) {
    transform: translateY(calc(8px * (1 - var(--tmn-intro-reveal, 1))));
    opacity: var(--tmn-intro-reveal, 1);
}
[data-tmn-intro-live] [aria-hidden="true"]:is(.tmn-intro-aside, .tmn-intro-idle-cue, .tmn-intro-dialogue p, .tmn-intro-notes p, .tmn-intro-footer p, .tmn-intro-continue) { visibility: hidden; }
[data-tmn-intro-live] .tmn-intro-footer { display: grid; justify-items: center; align-items: end; min-height: 57px; z-index: 2; }
.tmn-intro-cue {
    display: grid;
    justify-items: center;
    gap: 6px;
    margin: 0;
    font-weight: 600;
    font-size: .81rem;
    letter-spacing: .12em;
}
.tmn-intro-cue svg { width: 24px; height: 24px; color: #d8b6e2; animation: tmn-intro-arrow 2.4s ease-in-out 2; }
.tmn-intro-ready-note { color: #f2d9f1; }
.tmn-intro-thanks {
    grid-column: 1 / -1;
    z-index: 1;
    margin: 0;
    padding: 0 0 12px;
    color: #f2e9e3;
    font-size: max(.5rem, min(clamp(.6125rem, .798vw, .74375rem), clamp(.441rem, 1.071vw, .966rem)));
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: .025em;
}
[data-tmn-intro-live] .tmn-intro-thanks {
    position: absolute;
    inset: var(--tmn-thanks-y, 60%) auto auto var(--tmn-thanks-x, 65%);
    width: min(43ch, calc(var(--tmn-thanks-x, 65%) - 24px));
    translate: -100% 0;
    text-align: start;
    opacity: var(--tmn-intro-reveal, 0);
    padding: 0;
    pointer-events: none;
}
@media (max-width: 600px) {
    [data-tmn-intro-live] .tmn-intro-thanks { width: min(43ch, calc(var(--tmn-thanks-x, 65%) - 18px)); }
}
[data-tmn-intro-live] .tmn-intro-continue {
    display: block;
    position: absolute;
    z-index: 2;
    inset: auto auto clamp(42px, 8.1vh, 88px) 42.5%;
    translate: -50%;
    color: #f1eaf1;
    font-size: .62rem;
    white-space: nowrap;
}
.tmn-intro-continue span { display: inline-block; animation: tmn-intro-arrow 2.4s ease-in-out infinite; }
.tmn-intro-starfield { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.tmn-story-night-sky {
    bottom: auto;
    height: calc(var(--tmn-story-viewport) - var(--tmn-story-header));
    max-height: 100%;
    -webkit-mask-image: linear-gradient(#000 10%, #000c 21%, #0006 31%, transparent 40%);
    mask-image: linear-gradient(#000 10%, #000c 21%, #0006 31%, transparent 40%);
}
.tmn-intro-star {
    --tmn-star-low: .23;
    --tmn-star-high: .78;
    position: absolute;
    inset: var(--tmn-star-y) auto auto var(--tmn-star-x);
    width: var(--tmn-star-size);
    aspect-ratio: 1;
    border-radius: 50%;
    background: #eee2fa;
    opacity: var(--tmn-star-low);
}
.tmn-intro-star-far { --tmn-star-low: .15; --tmn-star-high: .38; filter: blur(.55px); }
.tmn-intro-star-near {
    --tmn-star-low: .38;
    --tmn-star-high: .96;
    background: #f8e9ff;
    clip-path: polygon(50% 0, 59% 41%, 100% 50%, 59% 59%, 50% 100%, 41% 59%, 0 50%, 41% 41%);
}
[data-tmn-intro-live] [data-tmn-intro-twinkle] {
    animation: tmn-intro-twinkle var(--tmn-star-period) ease-in-out var(--tmn-star-delay) infinite;
}
@media (prefers-reduced-motion: no-preference) {
    .tmn-story-night-sky [data-tmn-intro-twinkle] {
        animation: tmn-intro-twinkle var(--tmn-star-period) ease-in-out var(--tmn-star-delay) infinite;
    }
}
[data-tmn-intro-live] .tmn-intro-moon-halo { animation: tmn-intro-moon-breathe 9s ease-in-out infinite; }
[data-tmn-intro-live]:not([data-tmn-intro-visible]) :is(.tmn-intro-star, .tmn-intro-moon-halo, .tmn-intro-continue span),
:is([data-tmn-intro-hidden], [data-tmn-intro-ended]) :is(.tmn-intro-star, .tmn-intro-moon-halo, .tmn-intro-continue span) { animation-play-state: paused; }
.tmn-intro-meteor {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--tmn-meteor-tail, 34px);
    height: 1px;
    opacity: 0;
    transform-origin: right center;
    background: linear-gradient(90deg, transparent, #cbb9df88 70%, #fff0e4);
}
.tmn-intro-meteor::after {
    content: "";
    position: absolute;
    right: -1px;
    top: -1px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #fcece4;
}
@keyframes tmn-intro-twinkle {
    0%, 100% { opacity: var(--tmn-star-low); transform: scale(.86); }
    26%, 38% { opacity: var(--tmn-star-high); transform: scale(1.18); }
    71% { opacity: var(--tmn-star-low); transform: scale(.92); }
    87% { opacity: calc(var(--tmn-star-high) * .75); transform: scale(1.06); }
}
@keyframes tmn-intro-moon-breathe {
    0%, 100% { opacity: .68; }
    50% { opacity: 1; }
}
@media (max-width: 600px) {
    .tmn-intro-star[data-tmn-intro-wide-star] { display: none; }
}
.tmn-intro-ink {
    --tmn-intro-drawn: 0;
    --tmn-intro-fill: clamp(0, calc((var(--tmn-intro-drawn) - .72) / .28), 1);
    stroke: #4c3c48;
    stroke-width: 3;
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-opacity: min(1, calc(var(--tmn-intro-drawn) * 12), calc(1 - var(--tmn-intro-fill)));
    fill: var(--tmn-intro-ink);
    fill-opacity: var(--tmn-intro-fill);
    fill-rule: evenodd;
}
@media (max-width: 600px) {
    .tmn-intro-ink { stroke-width: 5; }
}
@keyframes tmn-intro-arrow { 50% { transform: translateY(4px); } }
@media (max-width: 600px) {
    .tmn-intro-art { width: min(110%, 530px); }
    [data-tmn-intro-live] .tmn-intro-dialogue { --tmn-intro-note-edge: 59%; }
    [data-tmn-intro-live] .tmn-intro-notes { --tmn-intro-note-edge: 53%; }
    .tmn-intro-thought { padding: 5.5px 8px; }
    .tmn-intro-apples use { scale: 1.14; }
    [data-tmn-intro-apple-impact] { stroke-width: 1.65; }
}
@media (max-height: 600px) {
    .tmn-story-intro-pin { padding-block: 14px; }
    .tmn-intro-heading h1 { font-size: clamp(1.55rem, 3.9vw, 2.9rem); }
    .tmn-intro-index { margin-bottom: 6px; }
}
@media (prefers-reduced-motion: reduce) {
    .tmn-intro-cue svg, .tmn-intro-star, .tmn-intro-continue span { animation: none; }
    .tmn-intro-playback, .tmn-intro-playback-icon { transition: none; }
}

/* Let the first chapter's light emerge from the same dark surface as the intro. */
.tmn-story-intro + .tmn-story-track .tmn-story-light:first-child {
    --tmn-intro-seam: linear-gradient(transparent 4.5%, #000 19%);
    -webkit-mask-image: var(--tmn-intro-seam);
    mask-image: var(--tmn-intro-seam);
}
@media (max-width: 600px) {
    [data-tmn-intro-figure] { stroke-width: 2.45; }
}

.tmn-story-page .tmn-header[data-tmn-story-night] {
    --tmn-white: #25262d;
    --tmn-bg: #34343e;
    --tmn-ink: #f2edf4;
    --tmn-line: #cbb7d536;
    --tmn-story-glass: rgb(17 18 24 / .78);
    --tmn-story-menu-icon: #d3c9d9;
    --tmn-story-brand-white: .5;
    --tmn-story-brand-color: 0;
    color: var(--tmn-ink);
}
.tmn-story-page .tmn-header[data-tmn-story-night]::before {
    background: var(--tmn-story-glass);
    box-shadow: inset 0 1px #ffffff12;
    transition: background-color .3s ease, box-shadow .3s ease;
}
.tmn-story-page .tmn-header .tmn-brand { position: relative; }
.tmn-story-page .tmn-header .tmn-brand img {
    opacity: var(--tmn-story-brand-color, 1);
    transition: opacity .3s ease;
}
.tmn-story-page .tmn-header .tmn-brand::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    -webkit-mask: var(--tmn-story-brand-mask) center / contain no-repeat;
    mask: var(--tmn-story-brand-mask) center / contain no-repeat;
    opacity: var(--tmn-story-brand-white, 0);
    transition: opacity .3s ease;
    pointer-events: none;
}
.tmn-story-page .tmn-header[data-tmn-story-night] .tmn-brand:focus-visible::before { opacity: .95; }
.tmn-story-page .tmn-header[data-tmn-story-night] .tmn-service-menu-icon {
    color: var(--tmn-story-menu-icon);
}
.tmn-story-page .tmn-header[data-tmn-story-night] .tmn-menu-toggle {
    background: var(--tmn-bg);
    color: var(--tmn-ink);
    border-color: var(--tmn-line);
}
.tmn-story-page .tmn-header[data-tmn-story-night] .tmn-submenu { background: var(--tmn-white); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .tmn-story-page .tmn-header[data-tmn-story-night] {
        --tmn-story-glass: rgb(17 18 24 / .65);
    }
    .tmn-story-page .tmn-header[data-tmn-story-night]::before {
        backdrop-filter: blur(17px) saturate(115%);
        -webkit-backdrop-filter: blur(17px) saturate(115%);
    }
}
@media (hover: hover) and (pointer: fine) {
    .tmn-story-page .tmn-header[data-tmn-story-night]:hover {
        --tmn-white: inherit;
        --tmn-bg: inherit;
        --tmn-ink: inherit;
        --tmn-line: inherit;
        --tmn-story-glass: rgb(255 255 255 / .86);
        --tmn-story-menu-icon: #5f605a;
        --tmn-story-brand-white: 0;
        --tmn-story-brand-color: 1;
    }
    .tmn-story-page .tmn-header[data-tmn-story-night]:hover .tmn-brand:focus-visible::before { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    [data-tmn-intro-live] .tmn-intro-moon-halo,
    [data-tmn-intro-live] [data-tmn-intro-twinkle] { animation: none; }
    .tmn-story-page .tmn-header[data-tmn-story-night]::before,
    .tmn-story-page .tmn-header .tmn-brand::before,
    .tmn-story-page .tmn-header .tmn-brand img { transition: none; }
}
