:root {
  --sky: #2f7fd8; --sky-light: #8cc8f4; --cloud: #f7fbff; --gold: #ffe3a3;
  --sunset: #ff9a5a; --rose: #f28bb4; --dusk: #655080; --night: #07050d;
  --ink: #152842; --muted: #526779; --glass: rgba(255,255,255,.74); --glass-strong: rgba(255,255,255,.9);
  --line: rgba(20,55,92,.18); --mono: "JetBrains Mono", monospace; --sans: "Noto Sans SC", system-ui, sans-serif;
  --serif: "Noto Serif SC", Georgia, serif; --display: "Cormorant Garamond", Georgia, serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); font-family: var(--sans); line-height: 1.6; background: linear-gradient(180deg, #8cc8f4 0%, #2f7fd8 28%, #ffb47c 57%, #655080 78%, #07050d 100%); background-attachment: fixed; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: linear-gradient(180deg, rgba(255,255,255,.1), transparent 30%, rgba(18,8,39,.42) 76%, rgba(3,2,9,.85)); opacity: calc(.08 + var(--sky-progress, 0) * .82); }
body.sky-subpage { color: #eef3ff; background: linear-gradient(180deg, #49375d 0%, #13142c 58%, #07050d 100%); }
body.sky-subpage::before { opacity: .55; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
.site-header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.26); backdrop-filter: blur(18px) saturate(130%); }
.sky-subpage .site-header { background: rgba(11,10,28,.48); border-color: rgba(255,255,255,.13); }
.header-inner { width: min(1400px, calc(100% - 64px)); min-height: 72px; margin: auto; display: flex; align-items: center; gap: 34px; }
.brand { display: flex; align-items: baseline; gap: 12px; margin-right: auto; }
.wordmark { font: 700 2.3rem/.8 var(--display); letter-spacing: -.06em; }
.brand-note, .eyebrow { font: 600 .67rem var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.brand-note { color: rgba(16,48,83,.72); }
.sky-subpage .brand-note, .sky-subpage .eyebrow { color: var(--gold); }
.site-nav { display: flex; gap: 26px; color: rgba(16,48,83,.76); font-size: .91rem; }
.site-nav a:hover, .x-link:hover, .site-footer a:hover { color: #fff; }
.x-link { color: #173a63; font: 600 .72rem var(--mono); white-space: nowrap; }
.sky-subpage .site-nav, .sky-subpage .x-link { color: #d6dcf0; }
.hero, .gallery-section { width: min(1400px, calc(100% - 64px)); margin: auto; }
.hero { position: relative; min-height: min(850px, 88vh); display: grid; grid-template-columns: minmax(0, .96fr) minmax(420px, 1.04fr); align-items: center; gap: 60px; padding: 100px 0 150px; isolation: isolate; }
.hero-sky { overflow: visible; }
.sky-canvas { position: fixed; inset: 0; z-index: -3; width: 100%; height: 100%; pointer-events: none; opacity: .95; }
.sky-fallback { position: fixed; inset: 0; z-index: -4; overflow: hidden; pointer-events: none; background: linear-gradient(180deg, #8cc8f4, #2f7fd8 35%, #ff9a5a 65%, #655080 82%, #07050d); }
.sun-glow { position: absolute; width: 32vmin; height: 32vmin; right: 12%; top: 8%; border-radius: 50%; background: radial-gradient(circle, rgba(255,251,207,.96) 0 5%, rgba(255,227,163,.42) 17%, transparent 68%); filter: blur(3px); }
.cloud { position: absolute; width: 42vw; height: 15vw; min-height: 100px; max-height: 220px; border-radius: 50%; background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(222,239,250,.28)); filter: blur(18px); opacity: .82; }
.cloud::after, .cloud::before { content: ""; position: absolute; border-radius: 50%; background: inherit; }
.cloud::before { width: 45%; height: 130%; left: 18%; bottom: -4%; }.cloud::after { width: 52%; height: 150%; right: 8%; bottom: -24%; }
.cloud-a { left: -14%; top: 19%; transform: rotate(-7deg); }.cloud-b { right: -18%; top: 38%; transform: scale(.8) rotate(5deg); opacity: .58; }.cloud-c { left: 14%; bottom: 7%; transform: scale(.68); opacity: .36; }
.sun-disc { position: absolute; right: 18%; top: 16%; width: 9px; height: 9px; border-radius: 50%; background: #fff5c8; box-shadow: 0 0 22px 10px rgba(255,226,162,.65), 0 0 80px 22px rgba(255,194,115,.22); }
.light-beam { position: absolute; width: 45vw; height: 65vh; right: 2%; top: 2%; opacity: .28; background: conic-gradient(from 236deg at 78% 11%, transparent 0 12deg, rgba(255,237,189,.55) 18deg, transparent 28deg 360deg); mix-blend-mode: screen; pointer-events: none; }
.hero-water { position: absolute; z-index: -1; left: 50%; bottom: 0; width: 115vw; height: 21%; transform: translateX(-50%); opacity: .62; background: repeating-linear-gradient(174deg, transparent 0 8px, rgba(255,228,173,.22) 10px, transparent 12px 24px); mask-image: linear-gradient(180deg, transparent, #000 45%, transparent); }
.hero-copy { position: relative; z-index: 2; padding: 34px; border: 1px solid rgba(255,255,255,.42); border-radius: 24px; background: linear-gradient(135deg, rgba(255,255,255,.58), rgba(255,255,255,.17)); box-shadow: 0 28px 90px rgba(17,65,112,.15); backdrop-filter: blur(18px) saturate(120%); }
.hero h1 { margin: 18px 0 20px; font: 800 clamp(2.7rem, 4.5vw, 4.8rem)/1.05 var(--serif); letter-spacing: -.075em; }
.hero h1 em { font-style: normal; color: #fff9ec; text-shadow: 0 3px 28px rgba(255,163,100,.42); }
.hero-lede { color: #224b72; font-size: 1rem; }.hero-actions { display: flex; gap: 12px; margin-top: 34px; }.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid var(--line); border-radius: 999px; padding: 12px 19px; cursor: pointer; transition: transform .25s, background .25s, color .25s, border-color .25s; }.button:hover { transform: translateY(-3px); }.button-primary { color: #173b62; background: var(--glass-strong); border-color: #fff; box-shadow: 0 10px 32px rgba(255,255,255,.24); }.button-primary:hover { background: #fff5d4; }.button-secondary { color: #173b62; background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.72); }.button-secondary:hover { color: #412c4a; background: rgba(255,219,188,.46); border-color: #fff; }
.hero-filmline { display: flex; align-items: center; gap: 10px; margin-top: 30px; color: rgba(21,57,88,.65); font: 600 .58rem var(--mono); letter-spacing: .1em; }.hero-filmline i { display: block; width: 35px; height: 1px; background: currentColor; }.motion-toggle { position: absolute; z-index: 5; right: 0; bottom: 32px; border: 1px solid rgba(255,255,255,.52); border-radius: 999px; padding: 7px 12px; color: #fff; background: rgba(34,67,101,.22); cursor: pointer; font: 600 .65rem var(--mono); }.motion-toggle:hover { background: rgba(255,255,255,.25); }
.featured-collage { position: relative; z-index: 2; height: 460px; }.featured-card { position: absolute; display: block; overflow: hidden; border: 5px solid rgba(255,255,255,.63); border-radius: 4px; background: #dceefa; box-shadow: 0 26px 70px rgba(16,58,96,.26); transition: transform .35s, box-shadow .35s; }.featured-card:hover { transform: translateY(-10px) rotate(0deg) !important; box-shadow: 0 35px 80px rgba(13,37,64,.36); }.featured-card img { display: block; width: 100%; height: 100%; object-fit: cover; }.featured-card:nth-child(1) { width: 48%; height: 65%; left: 5%; top: 13%; transform: rotate(-4deg); }.featured-card:nth-child(2) { width: 40%; height: 54%; right: 4%; top: 1%; transform: rotate(4deg); }.featured-card:nth-child(3) { width: 36%; height: 48%; right: 14%; bottom: 1%; transform: rotate(2deg); }.featured-card:nth-child(4) { width: 31%; height: 40%; left: 0; bottom: 1%; transform: rotate(-7deg); }.featured-card:nth-child(5) { width: 26%; height: 34%; left: 40%; bottom: 0; transform: rotate(5deg); }.featured-label { position: absolute; left: 10px; bottom: 9px; color: #fff; text-shadow: 0 1px 8px #000; font: 600 .58rem var(--mono); }
.gallery-section { position: relative; z-index: 3; padding: 90px 0 120px; }.gallery-section::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 0; width: 100vw; height: 100%; transform: translateX(-50%); background: linear-gradient(180deg, rgba(45,41,63,.35), rgba(12,10,25,.85) 22%, rgba(7,5,13,.98)); backdrop-filter: blur(11px); }.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 24px; }.section-heading h2 { margin: 7px 0 0; color: #fff7e7; font: 700 clamp(2rem, 4vw, 3.8rem)/1 var(--serif); letter-spacing: -.06em; }.section-note { max-width: 300px; color: #d2c6cf; font-size: .85rem; margin: 0; }.gallery-section .eyebrow { color: var(--gold); }.toolbar { position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 0 18px; border-top: 1px solid rgba(255,255,255,.2); border-bottom: 1px solid rgba(255,255,255,.2); }.cats { display: flex; gap: 5px; flex-wrap: wrap; }.cat, .filter-toggle, .sort-wrap, .search-wrap { border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.1); color: #e9dfe6; border-radius: 999px; }.cat { padding: 8px 13px; cursor: pointer; }.cat[aria-selected=true] { color: #593248; background: #ffd2bc; border-color: #ffd2bc; }.cat small { margin-left: 7px; font: 600 .62rem var(--mono); opacity: .75; }.sort-wrap { display: flex; align-items: center; gap: 6px; padding: 7px 11px; color: #d6cad4; font-size: .78rem; }.sort-wrap select { border: 0; color: #fff; background: transparent; outline: 0; cursor: pointer; }.sort-wrap option { color: #222; }.search-wrap { display: flex; align-items: center; gap: 8px; min-width: 250px; max-width: 390px; flex: 1; padding: 0 13px; }.search-icon { color: var(--gold); font-size: 1.25rem; }.search-wrap input, .filter-search input { width: 100%; padding: 10px 0; border: 0; outline: 0; color: #fff; background: transparent; font-size: .84rem; }.search-wrap input::placeholder, .filter-search input::placeholder { color: #b6aab5; }.filter-toggle { padding: 9px 14px; color: #fff; cursor: pointer; }.filter-toggle:hover { border-color: var(--gold); color: var(--gold); }.filter-count { display: inline-grid; place-items: center; min-width: 19px; height: 19px; margin-left: 4px; border-radius: 50%; color: #4a2336; background: var(--gold); font: 600 .65rem var(--mono); }.selected-tags { display: flex; flex-basis: 100%; flex-wrap: wrap; gap: 6px; }.selected-chip, .clear-tags, .chip { padding: 5px 9px; border: 1px solid rgba(255,255,255,.26); border-radius: 999px; color: #eadde6; background: rgba(255,255,255,.08); font-size: .72rem; cursor: pointer; }.selected-chip:hover, .chip.active, .chip:hover { border-color: var(--rose); color: #ffd0df; background: rgba(242,139,180,.16); }.selected-chip span { margin-left: 5px; }.clear-tags { border: 0; color: var(--gold); background: transparent; }.filter-panel { position: absolute; z-index: 15; top: 100%; right: 0; width: min(570px, 100%); padding: 18px; border: 1px solid rgba(255,255,255,.25); border-radius: 14px; background: rgba(22,17,35,.91); box-shadow: 0 25px 70px #0008; backdrop-filter: blur(18px); }.filter-panel-head { display: flex; justify-content: space-between; align-items: start; }.filter-panel-head strong { display: block; color: #fff; }.filter-panel-head span { color: #b9aebb; font-size: .72rem; }.filter-close { border: 0; color: #fff; background: transparent; font-size: 1.4rem; cursor: pointer; }.filter-search { display: flex; gap: 8px; margin: 12px 0; padding: 0 2px; border-bottom: 1px solid rgba(255,255,255,.18); }.tag-group { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.1); }.tag-group h3 { margin: 0 0 8px; color: var(--gold); font-size: .72rem; font-weight: 500; }.tag-options, .tag-more { display: flex; flex-wrap: wrap; gap: 6px; }.tag-more { margin-top: 6px; }.more-toggle { border: 0; color: var(--gold); background: transparent; font-size: .72rem; cursor: pointer; }
.status { margin: 22px 0 13px; color: #c9bbc7; font: 500 .7rem var(--mono); }.grid, .static-grid { columns: 4 220px; column-gap: 16px; }.card, .static-card { display: block; width: 100%; break-inside: avoid; margin: 0 0 16px; color: #fff; text-align: left; }.card { padding: 0; border: 0; background: transparent; cursor: pointer; animation: rise .45s both; }.thumb, .static-card figure { position: relative; overflow: hidden; margin: 0; border: 1px solid rgba(255,227,163,.32); border-radius: 5px; background: #151022; }.thumb img, .thumb video, .static-card img { display: block; width: 100%; height: auto; opacity: 0; transition: opacity .35s, transform .55s, filter .55s; }.static-card img { opacity: 1; }.thumb img.loaded, .thumb video.loaded { opacity: 1; }.card:hover .thumb img, .card:hover .thumb video, .static-card:hover img { transform: scale(1.025); filter: brightness(1.12) saturate(1.08); }.card-caption, .static-card figcaption { padding: 9px 2px 2px; }.card-caption h3, .static-card strong { margin: 0 0 3px; color: #fff7ec; font-size: .92rem; line-height: 1.4; font-weight: 600; }.card-caption p, .static-card small { margin: 0; color: #bcaebb; font: 500 .62rem/1.5 var(--mono); }.static-card strong, .static-card small { display: block; }.static-card small { margin-top: 3px; }.badge { position: absolute; top: 9px; left: 9px; padding: 3px 7px; border-radius: 99px; color: var(--gold); background: #07050dcc; font: 500 .62rem var(--mono); }.load-more-wrap { padding: 26px 0; text-align: center; }.empty { padding: 80px 20px; color: #c9bbc7; text-align: center; column-span: all; }.site-footer { position: relative; z-index: 3; width: min(1400px, calc(100% - 64px)); margin: auto; padding: 34px 0 38px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: end; border-top: 1px solid rgba(255,255,255,.2); color: #c9bbc7; font-size: .78rem; }.site-footer::before { content: ""; position: absolute; inset: -1px -50vw -1px; z-index: -1; background: linear-gradient(180deg, rgba(7,5,13,.75), #07050d); }.site-footer strong { display: block; color: #fff; font: 700 2.1rem/.8 var(--display); }.site-footer div span { display: block; margin-top: 8px; }.site-footer nav { display: flex; gap: 18px; }.site-footer p { margin: 0; color: #978a9e; text-align: right; font: 500 .63rem var(--mono); }.site-footer a { color: var(--gold); }
.modal[hidden] { display: none; }.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; }.modal-backdrop { position: absolute; inset: 0; background: #050309dd; backdrop-filter: blur(8px); }.modal-panel { position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr); width: min(1180px, 100%); max-height: min(850px, calc(100vh - 40px)); overflow: auto; border: 1px solid rgba(255,255,255,.2); border-radius: 14px; background: #171229; box-shadow: 0 30px 100px #000b; }.modal-media { display: grid; place-items: center; min-height: 400px; padding: 26px; background: #090714; }.modal-media img, .modal-media video { max-width: 100%; max-height: calc(100vh - 100px); width: auto; height: auto; object-fit: contain; }.modal-info { overflow: auto; padding: 46px 38px 34px; }.modal-info h2 { margin: 10px 0 18px; color: #fff7e7; font: 700 clamp(1.5rem, 3vw, 2.6rem)/1.2 var(--serif); letter-spacing: -.05em; }.meta { display: grid; gap: 4px; margin-bottom: 13px; padding: 13px 0; border-block: 1px solid rgba(255,255,255,.15); }.meta div { display: flex; justify-content: space-between; gap: 14px; color: #c5b8ca; font-size: .75rem; }.meta b { color: #fff; font-weight: 500; }.m-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 22px; }.prompt-block { padding: 14px; border: 1px solid rgba(255,227,163,.25); border-radius: 9px; background: rgba(7,5,13,.54); }.prompt-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; color: var(--gold); font: 500 .7rem var(--mono); }.copy-btn { padding: 5px 9px; border: 1px solid var(--gold); border-radius: 999px; color: var(--gold); background: transparent; font-size: .65rem; cursor: pointer; }.copy-btn.done { color: #2d1c2a; background: var(--gold); }.prompt-sections { display: grid; gap: 9px; margin-bottom: 12px; }.prompt-section { padding-left: 10px; border-left: 2px solid var(--rose); }.prompt-section h4 { margin: 0 0 3px; color: #ffd0df; font: 600 .64rem var(--mono); }.prompt-section p { margin: 0; color: #f0e7ee; font-size: .78rem; white-space: pre-wrap; }.prompt-block pre { max-height: 290px; overflow: auto; margin: 0; color: #cfc4d8; font: 400 .74rem/1.65 var(--mono); white-space: pre-wrap; }.section { margin-top: 17px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.15); }.section h4 { margin: 0 0 5px; color: var(--gold); font-size: .78rem; }.section .body { color: #bfb1c1; font-size: .78rem; white-space: pre-wrap; }.modal-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }.ghost-btn { padding: 9px 12px; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; color: #fff; background: transparent; cursor: pointer; font-size: .75rem; }.ghost-btn:hover { color: var(--gold); border-color: var(--gold); }.icon-btn { position: absolute; z-index: 2; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; color: #fff; background: #100d1acc; cursor: pointer; font-size: 1.2rem; }.modal-close { top: 14px; right: 16px; }.nav-btn { top: 50%; font-size: 2rem; transform: translateY(-50%); }.nav-prev { left: 13px; }.nav-next { right: 13px; }.toast { position: fixed; z-index: 80; bottom: 26px; left: 50%; padding: 10px 16px; border-radius: 999px; color: #221322; background: var(--gold); font-size: .78rem; opacity: 0; pointer-events: none; transform: translate(-50%, 20px); transition: .2s; }.toast.show { opacity: 1; transform: translate(-50%, 0); }
.static-page, .detail-page, .related { width: min(1400px, calc(100% - 64px)); margin: 0 auto; }.static-page { padding: 92px 0 120px; }.static-page h1 { margin: 15px 0; color: #fff7e7; font: 800 clamp(2.5rem, 6vw, 5.8rem)/1.08 var(--serif); letter-spacing: -.07em; }.static-lede { max-width: 650px; margin: 0 0 38px; color: #d2c6cf; font-size: 1rem; }.detail-page { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); gap: 60px; padding: 75px 0 90px; }.detail-media { position: sticky; top: 100px; align-self: start; }.detail-media img { display: block; max-width: 100%; max-height: calc(100vh - 150px); width: auto; height: auto; margin: auto; border: 1px solid rgba(255,227,163,.3); border-radius: 5px; background: #111022; object-fit: contain; }.detail-index { margin: 10px 0; color: #c9bbc7; text-align: right; font: 500 .68rem var(--mono); }.detail-copy h1 { margin: 14px 0 22px; color: #fff7e7; font: 700 clamp(2rem, 4vw, 4rem)/1.12 var(--serif); letter-spacing: -.06em; }.detail-copy .prompt-block { margin-top: 20px; }.detail-copy .prompt-block pre { max-height: none; }.detail-nav { display: flex; justify-content: space-between; margin-top: 26px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.16); color: var(--gold); font: 500 .72rem var(--mono); }.related { padding: 0 0 110px; }.related h2 { margin: 8px 0 22px; color: #fff7e7; font: 700 2rem var(--serif); letter-spacing: -.05em; }.about-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1050px; }.about-columns > div { padding-top: 15px; border-top: 1px solid rgba(255,255,255,.2); }.about-columns h2 { margin: 0 0 8px; color: #fff7e7; font-size: 1rem; }.about-columns p { margin: 0; color: #c9bbc7; font-size: .87rem; }.about-columns a { color: var(--gold); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } .cloud { transform: none; } }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; gap: 25px; padding-top: 70px; }.featured-collage { height: 350px; max-width: 600px; width: 100%; margin: auto; }.grid, .static-grid { columns: 3 180px; }.modal-panel { grid-template-columns: 1fr; }.modal-media { min-height: 260px; }.modal-info { padding: 35px 24px 28px; }.nav-btn { top: 28%; background: #100d1acc; }.site-footer { grid-template-columns: 1fr 1fr; }.site-footer p { grid-column: 1/-1; text-align: left; }.detail-page { grid-template-columns: 1fr; gap: 28px; }.detail-media { position: static; }.detail-media img { max-width: 100%; max-height: none; }.about-columns { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .header-inner, .hero, .gallery-section, .site-footer, .static-page, .detail-page, .related { width: calc(100% - 34px); }.header-inner { min-height: 62px; gap: 14px; }.brand-note, .site-nav a:nth-child(3), .site-nav a:nth-child(4) { display: none; }.site-nav { gap: 12px; font-size: .8rem; }.x-link { font-size: .62rem; }.hero { min-height: auto; padding: 60px 0 78px; }.hero-copy { padding: 25px 20px; }.hero h1 { font-size: clamp(2.65rem, 13vw, 4rem); }.featured-collage { height: 300px; }.toolbar { align-items: stretch; }.cats { width: 100%; flex-wrap: nowrap; overflow: auto; }.cat { white-space: nowrap; }.sort-wrap { order: 2; }.search-wrap { order: 3; width: 100%; min-width: 0; max-width: none; }.filter-toggle { order: 2; }.grid, .static-grid { columns: 2 135px; column-gap: 10px; }.card, .static-card { margin-bottom: 12px; }.card-caption h3, .static-card strong { font-size: .8rem; }.section-heading { display: block; }.section-note { margin-top: 8px; }.site-footer { grid-template-columns: 1fr; gap: 12px; }.site-footer p { text-align: left; }.modal { padding: 0; }.modal-panel { height: 100%; max-height: 100vh; border: 0; border-radius: 0; }.modal-media { padding: 48px 15px 20px; }.modal-info { padding: 26px 17px; }.modal-close { right: 10px; }.nav-prev { left: 7px; }.nav-next { right: 7px; }.static-page { padding: 65px 0 80px; }.detail-page { padding: 50px 0 70px; }.about-columns { grid-template-columns: 1fr; } }
.intro-screen{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:#060812;color:#fff;text-align:center;transition:opacity .65s ease,visibility .65s}.intro-screen.is-done{opacity:0;visibility:hidden}.intro-screen p{position:absolute;margin:0;transform:translateY(-8px);font:600 clamp(3rem,9vw,8rem)/1 var(--display);letter-spacing:.08em;animation:intro-word 1.4s ease both}.intro-screen span{position:absolute;transform:translateY(62px);font:600 .66rem var(--mono);letter-spacing:.3em;color:var(--gold);animation:intro-word 1.4s .18s ease both}.intro-sun{width:18vmin;height:18vmin;border-radius:50%;background:radial-gradient(circle,#fff8ce 0 8%,#ffb36c 28%,transparent 70%);filter:blur(1px);animation:intro-sun 1.6s ease both}.intro-screen button{position:absolute;right:24px;bottom:24px;padding:8px 12px;border:1px solid #ffffff66;border-radius:999px;color:#fff;background:#ffffff14;cursor:pointer;font:600 .65rem var(--mono)}@keyframes intro-word{from{opacity:0;transform:translateY(8px);filter:blur(8px)}to{opacity:1;transform:translateY(-8px);filter:none}}@keyframes intro-sun{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}@supports (animation-timeline:view()){.card,.static-card{animation:card-reveal linear both;animation-timeline:view();animation-range:entry 0% cover 28%}}@keyframes card-reveal{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.intro-screen{display:none}.card,.static-card{animation:none!important}}

.sky-page .site-footer::after{content:"";position:absolute;right:8%;top:-32px;width:88px;height:1px;background:linear-gradient(90deg,transparent,var(--gold));transform:rotate(-24deg);transform-origin:right;opacity:.7;animation:comet 12s 4s ease-in-out infinite}.sky-subpage .site-footer::after{content:"";position:absolute;right:8%;top:-32px;width:88px;height:1px;background:linear-gradient(90deg,transparent,var(--gold));transform:rotate(-24deg);opacity:.4}@keyframes comet{0%,72%,100%{opacity:0;transform:translate(0,0) rotate(-24deg)}78%{opacity:.85;transform:translate(-30vw,-8vh) rotate(-24deg)}84%{opacity:0;transform:translate(-45vw,-13vh) rotate(-24deg)}}@media(prefers-reduced-motion:reduce){.sky-page .site-footer::after{animation:none;opacity:.5}}