/* AntiTerm's upcoming page: the shared site look (style.css) with a drawn Coralune scene in the hero, an island bay
   after the Coralune cover. The scene's colours are tokens here (--at- shared with the postcard, --ai- the island's):
   a golden late afternoon in light, the night in dark. Fixed colours dim at night through the scene's atDim filter. */

:root {
  --at-sky1: #3E9AD8; --at-sky2: #8FD0EA; --at-sky3: #FFDCA8; --at-glow: #FFB070;
  --at-cloud1: #FFFFFF; --at-cloud2: #FFEBD6;
  --at-far1: #38BA96; --at-farTrunk: #6E3A64; --at-farLeaf: #19AA8B;
  --at-sea1: #7FD8D8; --at-sea2: #22AEC8; --at-sea3: #0A7892; --at-wave: #FFFFFF; --at-glint: #FFFFFF; --at-hull: #3B2468;
  --at-sand1: #FFE4BC; --at-sand2: #FFBC8E; --at-foam: #FFFFFF; --at-shade: #2A1240;
  --at-trunk: #6C3864; --at-trunkLit: #A06F7E; --at-ring: #51284B;
  --at-leaf1: #19AA8B; --at-leaf2: #0C8692; --at-rib: #0E6E66; --at-coco: #7A4A2E;
  --at-lanGlass: #E8F7FA; --at-dusk: #3A2C8A;
  --at-frame: rgba(31, 42, 48, .16);
  --ai-sky1: #6FB2EC; --ai-sky2: #C3C6F4; --ai-sky3: #FFC9BC; --ai-sky4: #FFC27C;
  --ai-cloud: #FFFFFF; --ai-cloud2: #FFEFF3; --ai-bird: #4A3474;
  --ai-hill1: #B7A9EA; --ai-hill2: #5CC09F; --ai-hill3: #36A588; --ai-isle: #A6B0EC;
  --ai-sea1: #A2E0E4; --ai-sea2: #3DB8CF; --ai-sea3: #167EA8; --ai-sheen: #FFE09A; --ai-wave: #FFFFFF; --ai-glint: #FFF2BE;
  --ai-hull: #3B2468; --ai-beam: #FFF4C8;
  --ai-sand1: #FFE3B6; --ai-sand2: #FFB48C; --ai-wet: #F4C29C; --ai-foam: #FFFFFF; --ai-shade: #2A1240;
  --ai-thatch1: #F2BE62; --ai-thatch2: #D8923C; --ai-thatchLine: #A9692A; --ai-bamboo: #DCA75C; --ai-bambooRing: #A8743A;
  --ai-wall: #F3CF92; --ai-wallLine: #DDAA68; --ai-deck: #DFA662; --ai-deckLine: #B07A3E; --ai-deckTop: #F6CC8C; --ai-cable: #6E3A64;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --at-sky1: #0B1240; --at-sky2: #1E2A6C; --at-sky3: #46479A; --at-glow: #FF9A6A;
    --at-cloud1: #6A5AA8; --at-cloud2: #4E4290;
    --at-far1: #22306A; --at-farTrunk: #10142E; --at-farLeaf: #134C58;
    --at-sea1: #34479A; --at-sea2: #1C286C; --at-sea3: #0B1242; --at-wave: #93A8EA; --at-glint: #FFE3A0; --at-hull: #0E1030;
    --at-sand1: #6A64A8; --at-sand2: #45428A; --at-foam: #B0C0F2; --at-shade: #10081A;
    --at-trunk: #1C1638; --at-trunkLit: #3E3668; --at-ring: #0E0C22;
    --at-leaf1: #17645E; --at-leaf2: #0F4852; --at-rib: #0A3436; --at-coco: #2E2030;
    --at-lanGlass: #FFF1C2; --at-dusk: #3A2C8A;
    --at-frame: rgba(255, 255, 255, .14);
    --ai-sky1: #0B1040; --ai-sky2: #221C64; --ai-sky3: #482E80; --ai-sky4: #7A4492;
    --ai-cloud: #5A4A9C; --ai-cloud2: #6C5CAE; --ai-bird: #24123E;
    --ai-hill1: #2C2672; --ai-hill2: #1E3C6C; --ai-hill3: #16305C; --ai-isle: #2E2A72;
    --ai-sea1: #5C3E90; --ai-sea2: #2B2A7A; --ai-sea3: #0F1450; --ai-sheen: #E8B8FF; --ai-wave: #8E9CE8; --ai-glint: #FFE6A8;
    --ai-hull: #120E34; --ai-beam: #FFE58A;
    --ai-sand1: #7E6AB0; --ai-sand2: #56478E; --ai-wet: #6A5AA2; --ai-foam: #B8C4F4; --ai-shade: #10081A;
    --ai-thatch1: #B07E62; --ai-thatch2: #8A5A58; --ai-thatchLine: #5E3A4A; --ai-bamboo: #9A7262; --ai-bambooRing: #64444E;
    --ai-wall: #7A5676; --ai-wallLine: #5E4062; --ai-deck: #7E5868; --ai-deckLine: #5A3A50; --ai-deckTop: #94707E; --ai-cable: #2A1838;
  }
}
:root[data-theme="dark"] {
  --at-sky1: #0B1240; --at-sky2: #1E2A6C; --at-sky3: #46479A; --at-glow: #FF9A6A;
  --at-cloud1: #6A5AA8; --at-cloud2: #4E4290;
  --at-far1: #22306A; --at-farTrunk: #10142E; --at-farLeaf: #134C58;
  --at-sea1: #34479A; --at-sea2: #1C286C; --at-sea3: #0B1242; --at-wave: #93A8EA; --at-glint: #FFE3A0; --at-hull: #0E1030;
  --at-sand1: #6A64A8; --at-sand2: #45428A; --at-foam: #B0C0F2; --at-shade: #10081A;
  --at-trunk: #1C1638; --at-trunkLit: #3E3668; --at-ring: #0E0C22;
  --at-leaf1: #17645E; --at-leaf2: #0F4852; --at-rib: #0A3436; --at-coco: #2E2030;
  --at-lanGlass: #FFF1C2; --at-dusk: #3A2C8A;
  --at-frame: rgba(255, 255, 255, .14);
  --ai-sky1: #0B1040; --ai-sky2: #221C64; --ai-sky3: #482E80; --ai-sky4: #7A4492;
  --ai-cloud: #5A4A9C; --ai-cloud2: #6C5CAE; --ai-bird: #24123E;
  --ai-hill1: #2C2672; --ai-hill2: #1E3C6C; --ai-hill3: #16305C; --ai-isle: #2E2A72;
  --ai-sea1: #5C3E90; --ai-sea2: #2B2A7A; --ai-sea3: #0F1450; --ai-sheen: #E8B8FF; --ai-wave: #8E9CE8; --ai-glint: #FFE6A8;
  --ai-hull: #120E34; --ai-beam: #FFE58A;
  --ai-sand1: #7E6AB0; --ai-sand2: #56478E; --ai-wet: #6A5AA2; --ai-foam: #B8C4F4; --ai-shade: #10081A;
  --ai-thatch1: #B07E62; --ai-thatch2: #8A5A58; --ai-thatchLine: #5E3A4A; --ai-bamboo: #9A7262; --ai-bambooRing: #64444E;
  --ai-wall: #7A5676; --ai-wallLine: #5E4062; --ai-deck: #7E5868; --ai-deckLine: #5A3A50; --ai-deckTop: #94707E; --ai-cable: #2A1838;
}

/* ── The scene ──────────────────────────────────────────────────────── */
.at-stage { position: relative; contain: paint; margin: 36px 0 0; border-radius: 22px; overflow: hidden; aspect-ratio: 1152 / 672;
  box-shadow: 0 0 0 1px var(--at-frame), 0 18px 48px var(--shot-shadow); background: var(--at-sky2); }
.at-scene { display: block; width: 100%; height: 100%; }
.at-scene * { transform-box: view-box; }
.at-night { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .at-dim { filter: url(#atDim); } }
:root[data-theme="dark"] .at-dim { filter: url(#atDim); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .at-night { display: inline; }
  :root:not([data-theme="light"]) .at-day { display: none; }
}
:root[data-theme="dark"] .at-night { display: inline; }
:root[data-theme="dark"] .at-day { display: none; }
@media (max-width: 720px) { .at-stage { aspect-ratio: 5 / 4; border-radius: 16px; margin-top: 24px; } }

.at-stir { animation: at-stir 5s ease-in-out infinite alternate; }
.at-flick { animation: at-flick 3.4s ease-in-out infinite; }
.at-blink { animation: at-blink 5.2s linear infinite; }
.at-tw { animation: at-tw 4s ease-in-out infinite alternate; }
.at-glint { animation: at-glint 3s ease-in-out infinite alternate; }
.at-bob { animation: at-bob 3.4s ease-in-out infinite alternate; }
.at-drift { animation: at-drift 80s ease-in-out infinite alternate; }
.at-wash { animation: at-wash 4.6s ease-in-out infinite alternate; }
.at-flame { animation: at-flame 1.9s ease-in-out infinite alternate; }
.at-twinkle { animation: at-twinkle 6s ease-in-out infinite alternate; }
.at-wag { animation: at-wag .42s ease-in-out infinite alternate; }
@keyframes at-stir { from { transform: rotate(-2.4deg); } to { transform: rotate(2.2deg); } }
@keyframes at-flick { 0%, 50% { transform: rotate(0); } 64% { transform: rotate(12deg); } 76% { transform: rotate(-5deg); } 88%, 100% { transform: rotate(0); } }
@keyframes at-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes at-tw { from { opacity: .25; } to { opacity: 1; } }
@keyframes at-glint { from { opacity: .15; } to { opacity: .95; } }
@keyframes at-bob { from { transform: translateY(-1.6px) rotate(-2.2deg); } to { transform: translateY(1.6px) rotate(2.2deg); } }
@keyframes at-drift { from { transform: translateX(-30px); } to { transform: translateX(40px); } }
@keyframes at-wash { from { transform: translateY(-2px); opacity: .7; } to { transform: translateY(3px); opacity: 1; } }
@keyframes at-flame { from { opacity: .7; } to { opacity: 1; } }
@keyframes at-twinkle { from { opacity: .62; } to { opacity: 1; } }
.at-sweep { animation: at-sweep 14s ease-in-out infinite; }
.at-flash { animation: at-flash 14s linear infinite; }
.at-fire { animation: at-fire 1.4s ease-in-out infinite; }
.at-ember { animation: at-ember 2.7s linear infinite; }
@keyframes at-sweep { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(-1); } }
@keyframes at-flash { 0%, 17%, 33%, 100% { opacity: .3; } 25% { opacity: 1; } }
@keyframes at-fire { 0%, 100% { transform: scale(1, 1) skewX(0); } 35% { transform: scale(.93, 1.1) skewX(-4deg); } 70% { transform: scale(1.05, .92) skewX(3deg); } }
@keyframes at-ember { 0% { transform: translate(0, 6px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(5px, -30px); opacity: 0; } }
@keyframes at-wag { from { transform: rotate(-16deg); } to { transform: rotate(18deg); } }

/* The island: the cursor blinks, the dog breathes in its sleep, steam rises from the mug. */
.at-blink2 { animation: at-blink2 1.1s steps(1, end) infinite; }
.at-breathe { animation: at-breathe 4.2s ease-in-out infinite; }
.at-tail { animation: at-tail 9s ease-in-out infinite; }
.at-steam { animation: at-steam 3.2s ease-in-out infinite; }
@keyframes at-blink2 { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes at-breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.035); } }
@keyframes at-tail { 0%, 70% { transform: rotate(0); } 76% { transform: rotate(-6deg); } 82% { transform: rotate(3deg); } 88%, 100% { transform: rotate(0); } }
@keyframes at-steam { 0% { transform: translateY(2px); opacity: 0; } 30% { opacity: .9; } 100% { transform: translateY(-10px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .at-scene, .at-scene * { animation: none !important; }
}

/* ── The page ───────────────────────────────────────────────────────── */
.at-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.at-hero h1 { margin-top: 8px; max-width: 26ch; }
.at-eyebrow { margin: 56px 0 0; color: var(--muted); font-weight: 600; letter-spacing: .02em; }
.at-note { color: var(--muted); margin: 18px 0 0; font-size: 15px; }
.at-lede { color: var(--muted); font-size: 17.5px; max-width: 62ch; }
.at-hero .facts { margin-top: 28px; }

/* Feature cards: a tinted round symbol, a heading and a few lines; no coloured edges. */
.at-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.at-grid > * { min-width: 0; }
.at-card { background: var(--card); border: 2px solid var(--line); border-radius: 16px; padding: 20px 22px 22px; }
.at-card h3 { margin: 14px 0 6px; font-size: 17px; }
.at-card p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.at-ic { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--fg); }
.at-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.at-ic.sea { background: color-mix(in srgb, var(--sea) 26%, var(--card)); }
.at-ic.coral { background: color-mix(in srgb, var(--coral) 26%, var(--card)); }
.at-ic.sun { background: color-mix(in srgb, var(--sun) 34%, var(--card)); }
.at-ic.leaf { background: color-mix(in srgb, var(--leaf) 26%, var(--card)); }
.sec.highlight .at-card { background: var(--card); }

/* Sections: the words on the left, a drawn terminal and the cards on the right on wide screens. */
.at-head .at-lede { margin-bottom: 0; }
.at-right { min-width: 0; }
@media (min-width: 1000px) {
  .at-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.85fr); column-gap: 48px; align-items: start; }
  .at-split > .at-grid, .at-right > .at-term { margin-top: 0; }
  .at-split .at-head h2 { margin-top: 6px; }
}

/* A drawn terminal: the app's own look, an ivory frame round a near-black screen, pearl, green and amber text.
   The same in both themes, as a terminal keeps its own colours. */
.at-term { margin: 20px 0 0; background: #F7F3EA; border-radius: 18px; padding: 8px; box-shadow: 0 0 0 1px var(--at-frame), 0 14px 36px var(--shot-shadow); }
.at-term-bar { display: flex; align-items: center; gap: 8px; padding: 4px 8px 10px; font: 600 12.5px/1.2 system-ui, sans-serif; color: #56656B; }
.at-term-bar i { width: 10px; height: 10px; border-radius: 50%; background: #E3DACA; }
.at-term-bar .tab { padding: 5px 12px; border-radius: 8px; background: #E9E1D2; color: #1F2A30; }
.at-term-bar .tab:first-of-type { margin-left: 8px; }
.at-term-bar .tab.off { background: transparent; color: #56656B; }
.at-term-bar .mark { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #2EAF6E; margin-left: 6px; vertical-align: 1px; }
.at-screen { margin: 0; background: #0B0B0C; color: #E4E6EA; border-radius: 12px; padding: 16px 18px 18px; overflow-x: auto;
  font: 14px/1.6 "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; white-space: pre; }
.at-screen .g { color: #7FD49A; } .at-screen .a { color: #FFC66D; } .at-screen .b { color: #7EB6FF; }
.at-screen .m { color: #D9A2F0; } .at-screen .d { color: #8A9099; }
.at-screen .sel { background: #26324A; border-radius: 3px; }
.at-screen .hit { color: #FFC66D; font-weight: 700; }
.at-cursor { display: inline-block; width: .6em; height: 1.15em; vertical-align: -0.2em; background: #FFC66D; border-radius: 2px; }
.at-panes { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 3px; background: #2C2E35; border-radius: 12px; overflow: hidden; }
.at-panes .at-screen { border-radius: 0; }
.at-meter { display: inline-block; height: .55em; border-radius: 99px; background: #7FD49A; vertical-align: .05em; }
.at-meter.hot { background: #FFC66D; }
.at-meter.w2 { width: 2.4em; } .at-meter.w3 { width: 3.6em; } .at-meter.w5 { width: 5em; } .at-meter.w6 { width: 6.2em; }
.at-term + .at-grid { margin-top: 20px; }

/* The measured numbers, as on the earlier page. */
.at-numbers { width: 100%; max-width: 820px; border-collapse: collapse; margin: 0; font-size: 15px; }
.at-numbers th, .at-numbers td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.at-numbers th { width: 46%; font-weight: 600; }
.at-numbers td { font-variant-numeric: tabular-nums; }
.at-numbers caption { caption-side: bottom; text-align: left; padding-top: 10px; color: var(--muted); font-size: 13.5px; }
.at-numbers + .at-grid { margin-top: 28px; }
@media (max-width: 860px) {
  .at-numbers th { width: auto; }
  .at-numbers th, .at-numbers td { display: block; border-bottom: 0; padding: 4px 0; }
  .at-numbers tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); }
}

/* Upcoming from Anti Softworks: one tile per product, the page you are on marked, never a coloured edge. */
.at-band { margin-top: 72px; padding: 28px; border-radius: 22px; background: var(--soft); }
.at-band h2 { margin: 6px 0 4px; }
.at-band-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.at-band-row > * { min-width: 0; }
.at-prod { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; background: var(--card); border: 2px solid var(--line);
  border-radius: 16px; color: var(--fg); text-decoration: none; }
a.at-prod:hover { background: color-mix(in srgb, var(--sea) 10%, var(--card)); }
a.at-prod:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.at-prod[aria-current] { border-width: 3px; border-color: var(--accent); padding: 17px 19px; }
.at-prod img { flex: none; border-radius: 12px; }
.at-prod b { display: block; font-size: 17px; margin-bottom: 4px; }
.at-prod span { display: block; color: var(--muted); font-size: 15px; line-height: 1.55; }
.at-prod em { display: inline-block; margin-top: 8px; font-style: normal; font-size: 13.5px; font-weight: 600; color: var(--muted); }

/* The closing card: the dog and the cat on the beach by a laptop with a blinking cursor. */
.at-get { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.at-card-art { border-radius: 20px; overflow: hidden; aspect-ratio: 960 / 400;
  box-shadow: 0 0 0 1px var(--at-frame), 0 14px 36px var(--shot-shadow); background: var(--at-sky2); }
.at-get-text .at-note { margin-top: 0; }
.at-get .button { margin-top: 6px; }

@media (max-width: 860px) {
  .at-grid, .at-band-row, .at-panes { grid-template-columns: minmax(0, 1fr); }
  .at-get { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .at-card-art { aspect-ratio: 4 / 3; }
  .at-band { padding: 20px 16px; }
}
@media (max-width: 720px) {
  .at-eyebrow { margin-top: 32px; }
  .at-screen { font-size: 12.5px; padding: 14px; }
}

/* No second beach behind the drawn one: a soft late-afternoon sky over the page's own colour. */
body { background: linear-gradient(180deg, color-mix(in srgb, var(--sun) 14%, var(--bg)) 0, var(--bg) 720px) no-repeat var(--bg); }

/* Dark: the symbols sit on clean full tints with dark ink; no muddy mixes. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .at-ic { color: #0F1E29; }
  :root:not([data-theme="light"]) .at-ic.sea { background: var(--sea); }
  :root:not([data-theme="light"]) .at-ic.coral { background: var(--coral); }
  :root:not([data-theme="light"]) .at-ic.sun { background: var(--sun); }
  :root:not([data-theme="light"]) .at-ic.leaf { background: var(--leaf); }
  :root:not([data-theme="light"]) .at-term { background: #E9E3D6; }
  :root:not([data-theme="light"]) a.at-prod:hover { background: var(--soft); }
  :root:not([data-theme="light"]) .at-band { background: #132A38; }
  :root:not([data-theme="light"]) body { background: linear-gradient(180deg, #121A46 0, var(--bg) 720px) no-repeat var(--bg); }
}
:root[data-theme="dark"] .at-ic { color: #0F1E29; }
:root[data-theme="dark"] .at-ic.sea { background: var(--sea); }
:root[data-theme="dark"] .at-ic.coral { background: var(--coral); }
:root[data-theme="dark"] .at-ic.sun { background: var(--sun); }
:root[data-theme="dark"] .at-ic.leaf { background: var(--leaf); }
:root[data-theme="dark"] .at-term { background: #E9E3D6; }
:root[data-theme="dark"] a.at-prod:hover { background: var(--soft); }
:root[data-theme="dark"] .at-band { background: #132A38; }
:root[data-theme="dark"] body { background: linear-gradient(180deg, #121A46 0, var(--bg) 720px) no-repeat var(--bg); }

/* SCENE-GEN: written by the scene generator (hero_gen.py, put_scene.py), one class per element setting */
.at-scene .at-h0 { stop-color:#FFD08A;stop-opacity:0.75; }
.at-scene .at-h1 { stop-color:#FFB066;stop-opacity:0.3; }
.at-scene .at-h2 { stop-color:#FFB066;stop-opacity:0; }
.at-scene .at-h3 { stop-color:#FFE7A0;stop-opacity:0.9; }
.at-scene .at-h4 { stop-color:#FFD27A;stop-opacity:0.35; }
.at-scene .at-h5 { stop-color:#FFD27A;stop-opacity:0; }
.at-scene .at-h6 { stop-color:var(--ai-sky1); }
.at-scene .at-h7 { stop-color:var(--ai-sky2); }
.at-scene .at-h8 { stop-color:var(--ai-sky3); }
.at-scene .at-h9 { stop-color:var(--ai-sky4); }
.at-scene .at-h10 { stop-color:#FFF4D6;stop-opacity:0.5; }
.at-scene .at-h11 { stop-color:#E8DCFF;stop-opacity:0.18; }
.at-scene .at-h12 { stop-color:#E8DCFF;stop-opacity:0; }
.at-scene .at-h13 { stop-color:#FFF1C0;stop-opacity:0.9; }
.at-scene .at-h14 { stop-color:#FFE09A;stop-opacity:0.55; }
.at-scene .at-h15 { stop-color:#FFD08A;stop-opacity:0.18; }
.at-scene .at-h16 { stop-color:#FFD08A;stop-opacity:0; }
.at-scene .at-h17 { stop-color:#FFFBE6;stop-opacity:1; }
.at-scene .at-h18 { stop-color:#FFE89A;stop-opacity:1; }
.at-scene .at-h19 { stop-color:#FFCB6A;stop-opacity:1; }
.at-scene .at-h20 { stop-color:#FFB95E;stop-opacity:1; }
.at-scene .at-h21 { stop-color:#FFD7A0;stop-opacity:0; }
.at-scene .at-h22 { stop-color:#FFD49A;stop-opacity:.55; }
.at-scene .at-h23 { stop-color:var(--ai-sea1); }
.at-scene .at-h24 { stop-color:var(--ai-sea2); }
.at-scene .at-h25 { stop-color:var(--ai-sea3); }
.at-scene .at-h26 { stop-color:var(--ai-sheen);stop-opacity:0.8; }
.at-scene .at-h27 { stop-color:var(--ai-sheen);stop-opacity:0; }
.at-scene .at-h28 { stop-color:var(--ai-beam);stop-opacity:.85; }
.at-scene .at-h29 { stop-color:var(--ai-beam);stop-opacity:0; }
.at-scene .at-h30 { stop-color:#FFFBE0;stop-opacity:1; }
.at-scene .at-h31 { stop-color:#FFF0B0;stop-opacity:0.5; }
.at-scene .at-h32 { stop-color:#FFF0B0;stop-opacity:0; }
.at-scene .at-h33 { stop-color:var(--ai-sand1); }
.at-scene .at-h34 { stop-color:var(--ai-sand2); }
.at-scene .at-h35 { stop-color:#C8FFE0;stop-opacity:0.5; }
.at-scene .at-h36 { stop-color:#B8F0FF;stop-opacity:0.18; }
.at-scene .at-h37 { stop-color:#B8F0FF;stop-opacity:0; }
.at-scene .at-h38 { stop-color:#FFE9A0;stop-opacity:0.7; }
.at-scene .at-h39 { stop-color:#FFE9A0;stop-opacity:0; }
.at-scene .at-h40 { stop-color:var(--ai-thatch1); }
.at-scene .at-h41 { stop-color:var(--ai-thatch2); }
.at-scene .at-h42 { stop-color:#FFC070;stop-opacity:0.7; }
.at-scene .at-h43 { stop-color:#FF9A50;stop-opacity:0.25; }
.at-scene .at-h44 { stop-color:#FF9A50;stop-opacity:0; }
.at-scene .at-h45 { stop-color:#FFF6CC;stop-opacity:0.95; }
.at-scene .at-h46 { stop-color:#FFE7A0;stop-opacity:0.45; }
.at-scene .at-h47 { stop-color:#FFE7A0;stop-opacity:0; }
.at-scene .at-h48 { stop-color:#FFC878;stop-opacity:0.9; }
.at-scene .at-h49 { stop-color:#FFA058;stop-opacity:0.4; }
.at-scene .at-h50 { stop-color:#FFA058;stop-opacity:0; }
.at-scene .at-h51 { animation-delay:-2.5s; }
.at-scene .at-h52 { animation-delay:-1s; }
.at-scene .at-h53 { animation-delay:-1.5s; }
.at-scene .at-h54 { animation-delay:-0.75s; }
.at-scene .at-h55 { animation-delay:-2.25s; }
.at-scene .at-h56 { animation-delay:-2s; }
.at-scene .at-h57 { animation-delay:-3.75s; }
.at-scene .at-h58 { animation-delay:-0.5s; }
.at-scene .at-h59 { animation-delay:-1.75s; }
.at-scene .at-h60 { animation-delay:-3.5s; }
.at-scene .at-h61 { animation-delay:-3.25s; }
.at-scene .at-h62 { animation-duration:90s;animation-delay:-10s; }
.at-scene .at-h63 { fill:var(--ai-cloud2); }
.at-scene .at-h64 { fill:var(--ai-cloud); }
.at-scene .at-h65 { animation-duration:110s;animation-delay:-50s; }
.at-scene .at-h66 { animation-duration:100s;animation-delay:-30s; }
.at-scene .at-h67 { animation-duration:80s;animation-delay:-70s; }
.at-scene .at-h68 { stroke:var(--ai-bird); }
.at-scene .at-h69 { fill:var(--ai-hill1); }
.at-scene .at-h70 { fill:var(--ai-isle); }
.at-scene .at-h71 { stroke:var(--at-farTrunk); }
.at-scene .at-h72 { stroke:var(--at-farLeaf); }
.at-scene .at-h73 { fill:var(--ai-hill2); }
.at-scene .at-h74 { fill:var(--ai-hill3); }
.at-scene .at-h75 { fill:var(--ai-wave); }
.at-scene .at-h76 { fill:var(--ai-wave);animation-delay:-5.0s; }
.at-scene .at-h77 { fill:var(--ai-wave);animation-delay:-3.0s; }
.at-scene .at-h78 { fill:var(--ai-wave);animation-delay:-1.0s; }
.at-scene .at-h79 { fill:var(--ai-wave);animation-delay:-3.75s; }
.at-scene .at-h80 { fill:var(--ai-wave);animation-delay:-3.25s; }
.at-scene .at-h81 { fill:var(--ai-wave);animation-delay:-0.25s; }
.at-scene .at-h82 { fill:var(--ai-wave);animation-delay:-5.25s; }
.at-scene .at-h83 { fill:var(--ai-wave);animation-delay:-4.75s; }
.at-scene .at-h84 { fill:var(--ai-wave);animation-delay:-1.25s; }
.at-scene .at-h85 { fill:var(--ai-wave);animation-delay:-2.0s; }
.at-scene .at-h86 { fill:var(--ai-wave);animation-delay:-1.75s; }
.at-scene .at-h87 { fill:var(--ai-wave);animation-delay:-1.5s; }
.at-scene .at-h88 { fill:var(--ai-wave);animation-delay:-0.5s; }
.at-scene .at-h89 { fill:var(--ai-wave);animation-delay:-2.5s; }
.at-scene .at-h90 { fill:var(--ai-wave);animation-delay:-5.75s; }
.at-scene .at-h91 { fill:var(--ai-wave);animation-delay:-0.0s; }
.at-scene .at-h92 { fill:var(--ai-wave);animation-delay:-6.0s; }
.at-scene .at-h93 { fill:var(--ai-wave);animation-delay:-4.0s; }
.at-scene .at-h94 { fill:var(--ai-wave);animation-delay:-2.25s; }
.at-scene .at-h95 { fill:var(--ai-wave);animation-delay:-4.25s; }
.at-scene .at-h96 { fill:var(--ai-wave);animation-delay:-3.5s; }
.at-scene .at-h97 { fill:var(--ai-wave);animation-delay:-0.75s; }
.at-scene .at-h98 { fill:var(--ai-wave);animation-delay:-2.75s; }
.at-scene .at-h99 { fill:var(--ai-wave);animation-delay:-5.5s; }
.at-scene .at-h100 { fill:var(--ai-wave);animation-delay:-4.5s; }
.at-scene .at-h101 { fill:var(--ai-glint);animation-delay:-5.0s; }
.at-scene .at-h102 { fill:var(--ai-glint);animation-delay:-1.75s; }
.at-scene .at-h103 { fill:var(--ai-glint);animation-delay:-1.25s; }
.at-scene .at-h104 { fill:var(--ai-glint);animation-delay:-4.0s; }
.at-scene .at-h105 { fill:var(--ai-glint);animation-delay:-0.75s; }
.at-scene .at-h106 { fill:var(--ai-glint);animation-delay:-5.75s; }
.at-scene .at-h107 { fill:var(--ai-glint);animation-delay:-3.0s; }
.at-scene .at-h108 { fill:var(--ai-glint);animation-delay:-2.75s; }
.at-scene .at-h109 { fill:var(--ai-glint);animation-delay:-3.25s; }
.at-scene .at-h110 { fill:var(--ai-glint);animation-delay:-2.25s; }
.at-scene .at-h111 { fill:var(--ai-glint);animation-delay:-0.5s; }
.at-scene .at-h112 { fill:var(--ai-glint);animation-delay:-1.5s; }
.at-scene .at-h113 { fill:var(--ai-glint);animation-delay:-3.75s; }
.at-scene .at-h114 { fill:var(--ai-glint);animation-delay:-2.5s; }
.at-scene .at-h115 { fill:var(--ai-glint);animation-delay:-2.0s; }
.at-scene .at-h116 { fill:var(--ai-glint);animation-delay:-0.0s; }
.at-scene .at-h117 { transform-origin:712px 295px; }
.at-scene .at-h118 { fill:var(--ai-hull); }
.at-scene .at-h119 { transform-origin:0px 8px;animation-duration:3.60s;animation-delay:-0.50s; }
.at-scene .at-h120 { transform-origin:0px 8px;animation-duration:3.20s;animation-delay:-1.50s; }
.at-scene .at-h121 { transform-origin:0px 8px;animation-duration:3.80s;animation-delay:-2.50s; }
.at-scene .at-h122 { stroke:var(--ai-wet); }
.at-scene .at-h123 { stroke:var(--ai-foam); }
.at-scene .at-h124 { fill:var(--at-shade); }
.at-scene .at-h125 { fill:var(--at-trunk); }
.at-scene .at-h126 { fill:var(--at-trunkLit); }
.at-scene .at-h127 { stroke:var(--at-ring); }
.at-scene .at-h128 { transform-origin:236px 214px;animation-duration:6.05s;animation-delay:-5.55s; }
.at-scene .at-h129 { fill:var(--at-leaf2); }
.at-scene .at-h130 { stroke:var(--at-rib); }
.at-scene .at-h131 { transform-origin:236px 214px;animation-duration:5.88s;animation-delay:-3.52s; }
.at-scene .at-h132 { transform-origin:236px 214px;animation-duration:5.89s;animation-delay:-3.78s; }
.at-scene .at-h133 { fill:var(--at-leaf1); }
.at-scene .at-h134 { transform-origin:236px 214px;animation-duration:4.51s;animation-delay:-1.82s; }
.at-scene .at-h135 { transform-origin:236px 214px;animation-duration:6.87s;animation-delay:-4.16s; }
.at-scene .at-h136 { transform-origin:236px 214px;animation-duration:7.44s;animation-delay:-5.79s; }
.at-scene .at-h137 { transform-origin:236px 214px;animation-duration:6.23s;animation-delay:-0.94s; }
.at-scene .at-h138 { transform-origin:236px 214px;animation-duration:5.94s;animation-delay:-0.36s; }
.at-scene .at-h139 { transform-origin:236px 214px;animation-duration:5.00s;animation-delay:-0.18s; }
.at-scene .at-h140 { fill:var(--at-coco); }
.at-scene .at-h141 { fill:var(--ai-shade); }
.at-scene .at-h142 { fill:var(--ai-bamboo); }
.at-scene .at-h143 { fill:var(--ai-wall); }
.at-scene .at-h144 { fill:var(--ai-wallLine); }
.at-scene .at-h145 { fill:var(--ai-deckTop); }
.at-scene .at-h146 { fill:var(--ai-deck); }
.at-scene .at-h147 { fill:var(--ai-deckLine); }
.at-scene .at-h148 { transform-origin:411px 561px;animation-delay:-0.0s; }
.at-scene .at-h149 { transform-origin:414px 561px;animation-delay:-1.6s; }
.at-scene .at-h150 { transform-origin:12px -3px; }
.at-scene .at-h151 { transform-origin:5.5px -38px;animation-delay:-3.25s; }
.at-scene .at-h152 { fill:var(--at-lanGlass); }
.at-scene .at-h153 { fill:var(--ai-bambooRing); }
.at-scene .at-h154 { stroke:var(--ai-thatchLine); }
.at-scene .at-h155 { stroke:var(--ai-bambooRing); }
.at-scene .at-h156 { fill:var(--ai-thatchLine); }
.at-scene .at-h157 { stroke:var(--ai-cable); }
.at-scene .at-h158 { animation-delay:-0.0s; }
.at-scene .at-h159 { fill:var(--ai-cable); }
.at-scene .at-h160 { animation-delay:-2.0s; }
.at-scene .at-h161 { animation-delay:-2.75s; }
.at-scene .at-h162 { animation-delay:-4.25s; }
.at-scene .at-h163 { animation-delay:-5.0s; }
.at-scene .at-h164 { animation-delay:-5.5s; }
.at-scene .at-h165 { animation-delay:-0.25s; }
.at-scene .at-h166 { animation-delay:-1.0s; }
.at-scene .at-h167 { transform-origin:616px 646px;animation-duration:1.40s; }
.at-scene .at-h168 { transform-origin:616px 646px;animation-duration:0.90s;animation-delay:-0.40s; }
.at-scene .at-h169 { animation-delay:-0.9s; }
.at-scene .at-h170 { animation-delay:-1.8s; }
.at-scene .at-h171 { transform-origin:4px 0px; }
.at-scene .at-h172 { transform-origin:40px -8px; }
.at-scene .at-h173 { transform-origin:636px 470px;animation-duration:7.33s;animation-delay:-5.35s; }
.at-scene .at-h174 { transform-origin:636px 470px;animation-duration:6.15s;animation-delay:-2.54s; }
.at-scene .at-h175 { transform-origin:636px 470px;animation-duration:4.63s;animation-delay:-1.15s; }
.at-scene .at-h176 { transform-origin:636px 470px;animation-duration:4.93s;animation-delay:-2.73s; }
.at-scene .at-h177 { transform-origin:636px 470px;animation-duration:4.48s;animation-delay:-4.26s; }
.at-scene .at-h178 { transform-origin:636px 470px;animation-duration:5.89s;animation-delay:-4.41s; }
.at-scene .at-h179 { transform-origin:636px 470px;animation-duration:4.39s;animation-delay:-4.70s; }
.at-scene .at-h180 { transform-origin:636px 470px;animation-duration:6.37s;animation-delay:-3.73s; }
.at-scene .at-h181 { transform-origin:636px 470px;animation-duration:5.40s;animation-delay:-4.56s; }
.at-scene .at-h182 { transform-origin:22px 418px;animation-duration:4.50s;animation-delay:-3.71s; }
.at-scene .at-h183 { transform-origin:22px 418px;animation-duration:6.95s;animation-delay:-3.09s; }
.at-scene .at-h184 { transform-origin:22px 418px;animation-duration:5.42s;animation-delay:-3.17s; }
.at-scene .at-h185 { transform-origin:22px 418px;animation-duration:6.45s;animation-delay:-3.60s; }
.at-scene .at-h186 { transform-origin:22px 418px;animation-duration:5.45s;animation-delay:-4.42s; }
.at-scene .at-h187 { transform-origin:22px 418px;animation-duration:7.37s;animation-delay:-5.83s; }
.at-scene .at-h188 { transform-origin:22px 418px;animation-duration:4.50s;animation-delay:-0.45s; }
.at-scene .at-h189 { transform-origin:22px 418px;animation-duration:5.39s;animation-delay:-4.23s; }
.at-scene .at-h190 { transform-origin:22px 418px;animation-duration:6.06s;animation-delay:-3.84s; }
.at-scene .at-h191 { stop-color:var(--at-sky1); }
.at-scene .at-h192 { stop-color:var(--at-sky2); }
.at-scene .at-h193 { stop-color:var(--at-sky3); }
.at-scene .at-h194 { stop-color:var(--at-glow);stop-opacity:0.8; }
.at-scene .at-h195 { stop-color:var(--at-glow);stop-opacity:0; }
.at-scene .at-h196 { stop-color:#FFE58A;stop-opacity:0.9; }
.at-scene .at-h197 { stop-color:#FFE58A;stop-opacity:0.25; }
.at-scene .at-h198 { stop-color:#FFE58A;stop-opacity:0; }
.at-scene .at-h199 { stop-color:var(--at-sea1); }
.at-scene .at-h200 { stop-color:var(--at-sea2); }
.at-scene .at-h201 { stop-color:var(--at-sea3); }
.at-scene .at-h202 { stop-color:var(--at-sand1); }
.at-scene .at-h203 { stop-color:var(--at-sand2); }
.at-scene .at-h204 { animation-delay:-1.44s; }
.at-scene .at-h205 { animation-delay:-1.12s; }
.at-scene .at-h206 { animation-delay:-3.74s; }
.at-scene .at-h207 { animation-delay:-1.26s; }
.at-scene .at-h208 { animation-delay:-3.54s; }
.at-scene .at-h209 { animation-delay:-2.20s; }
.at-scene .at-h210 { animation-delay:-1.64s; }
.at-scene .at-h211 { animation-delay:-1.94s; }
.at-scene .at-h212 { animation-delay:-1.89s; }
.at-scene .at-h213 { animation-delay:-2.95s; }
.at-scene .at-h214 { animation-delay:-1.20s; }
.at-scene .at-h215 { animation-delay:-2.57s; }
.at-scene .at-h216 { animation-delay:-1.71s; }
.at-scene .at-h217 { animation-delay:-1.37s; }
.at-scene .at-h218 { animation-delay:-3.24s; }
.at-scene .at-h219 { animation-delay:-1.53s; }
.at-scene .at-h220 { animation-delay:-1.35s; }
.at-scene .at-h221 { animation-delay:-0.50s; }
.at-scene .at-h222 { animation-delay:-0.37s; }
.at-scene .at-h223 { animation-delay:-1.78s; }
.at-scene .at-h224 { animation-delay:-0.51s; }
.at-scene .at-h225 { animation-duration:70s;animation-delay:-5s; }
.at-scene .at-h226 { fill:var(--at-cloud1); }
.at-scene .at-h227 { fill:var(--at-cloud2); }
.at-scene .at-h228 { animation-duration:90s;animation-delay:-30s; }
.at-scene .at-h229 { fill:var(--at-far1); }
.at-scene .at-h230 { fill:var(--at-wave);animation-delay:-4.84s; }
.at-scene .at-h231 { fill:var(--at-wave);animation-delay:-4.64s; }
.at-scene .at-h232 { fill:var(--at-wave);animation-delay:-3.92s; }
.at-scene .at-h233 { fill:var(--at-wave);animation-delay:-0.54s; }
.at-scene .at-h234 { fill:var(--at-wave);animation-delay:-4.47s; }
.at-scene .at-h235 { fill:var(--at-wave);animation-delay:-0.63s; }
.at-scene .at-h236 { fill:var(--at-wave);animation-delay:-4.81s; }
.at-scene .at-h237 { fill:var(--at-wave);animation-delay:-3.82s; }
.at-scene .at-h238 { fill:var(--at-wave);animation-delay:-0.96s; }
.at-scene .at-h239 { fill:var(--at-wave);animation-delay:-2.69s; }
.at-scene .at-h240 { fill:var(--at-wave);animation-delay:-4.20s; }
.at-scene .at-h241 { fill:var(--at-wave);animation-delay:-0.15s; }
.at-scene .at-h242 { fill:var(--at-wave);animation-delay:-0.97s; }
.at-scene .at-h243 { fill:var(--at-wave);animation-delay:-1.14s; }
.at-scene .at-h244 { fill:var(--at-wave);animation-delay:-3.48s; }
.at-scene .at-h245 { fill:var(--at-wave);animation-delay:-0.03s; }
.at-scene .at-h246 { fill:var(--at-wave);animation-delay:-2.48s; }
.at-scene .at-h247 { fill:var(--at-wave);animation-delay:-2.33s; }
.at-scene .at-h248 { fill:var(--at-wave);animation-delay:-3.12s; }
.at-scene .at-h249 { fill:var(--at-wave);animation-delay:-4.55s; }
.at-scene .at-h250 { fill:var(--at-wave);animation-delay:-0.27s; }
.at-scene .at-h251 { fill:var(--at-wave);animation-delay:-3.55s; }
.at-scene .at-h252 { fill:var(--at-wave);animation-delay:-1.57s; }
.at-scene .at-h253 { fill:var(--at-wave);animation-delay:-0.95s; }
.at-scene .at-h254 { fill:var(--at-wave);animation-delay:-1.56s; }
.at-scene .at-h255 { fill:var(--at-wave);animation-delay:-2.21s; }
.at-scene .at-h256 { fill:var(--at-glint);animation-delay:-0.31s; }
.at-scene .at-h257 { fill:var(--at-glint);animation-delay:-1.68s; }
.at-scene .at-h258 { fill:var(--at-glint);animation-delay:-2.24s; }
.at-scene .at-h259 { fill:var(--at-glint);animation-delay:-1.52s; }
.at-scene .at-h260 { fill:var(--at-glint);animation-delay:-1.23s; }
.at-scene .at-h261 { fill:var(--at-glint);animation-delay:-0.35s; }
.at-scene .at-h262 { fill:var(--at-glint);animation-delay:-0.78s; }
.at-scene .at-h263 { fill:var(--at-glint);animation-delay:-1.79s; }
.at-scene .at-h264 { fill:var(--at-glint);animation-delay:-2.95s; }
.at-scene .at-h265 { fill:var(--at-hull); }
.at-scene .at-h266 { transform-origin:0px 4px; }
.at-scene .at-h267 { stroke:var(--at-foam); }
.at-scene .at-h268 { transform-origin:330px 150px;animation-duration:6.65s;animation-delay:-4.77s; }
.at-scene .at-h269 { transform-origin:330px 150px;animation-duration:6.64s;animation-delay:-5.53s; }
.at-scene .at-h270 { transform-origin:330px 150px;animation-duration:5.74s;animation-delay:-5.66s; }
.at-scene .at-h271 { transform-origin:330px 150px;animation-duration:7.17s;animation-delay:-0.68s; }
.at-scene .at-h272 { transform-origin:330px 150px;animation-duration:5.01s;animation-delay:-3.26s; }
.at-scene .at-h273 { transform-origin:330px 150px;animation-duration:4.24s;animation-delay:-1.30s; }
.at-scene .at-h274 { transform-origin:330px 150px;animation-duration:7.22s;animation-delay:-4.59s; }
.at-scene .at-h275 { transform-origin:330px 150px;animation-duration:6.83s;animation-delay:-0.83s; }
.at-scene .at-h276 { transform-origin:330px 150px;animation-duration:4.62s;animation-delay:-0.01s; }
.at-scene .at-h277 { transform-origin:-22px -14px; }
.at-scene .at-h278 { transform-origin:29px -61px; }
.at-scene .at-h279 { transform-origin:10px -4px; }
.at-scene .at-h280 { transform-origin:0px -39px;animation-delay:-2.1s; }
.at-scene .at-h281 { fill:var(--at-dusk);mix-blend-mode:multiply; }
/* /SCENE-GEN */

/* The download list (1.0.0): one card a system, the files a line each; long names wrap rather than run out */
.at-dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 20px 0 0; padding: 0; list-style: none; }
.at-dl li { border: 2px solid var(--line); border-radius: 12px; padding: 16px 20px; background: var(--card); }
.at-dl h3 { margin: 0 0 8px; font-size: 17px; }
.at-dl a { display: block; margin: 6px 0; overflow-wrap: anywhere; }
.at-dl-fine { margin-top: 16px; font-size: 14px; }

/* The scenes strip under the hero (1.0.1): the pictures large, two-thirds and one-third on a wide screen, stacked on a phone */
.at-scenes { padding-top: 8px; }
.at-scene-row { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: auto auto; gap: 16px; margin-top: 20px; }
.at-scene-pic { margin: 0; }
.at-scene-pic:first-child { grid-row: span 2; }
.at-scene-pic video, .at-scene-pic img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 12px; border: 2px solid var(--line); box-shadow: 0 8px 28px rgba(10, 20, 36, .28); background: #05070c; }
/* (the clip plays; the still is for reduced motion, with a line that says these are stills) */
.at-scene-pic .at-scene-img, .at-scene-still { display: none; }
@media (prefers-reduced-motion: reduce) {
  .at-scene-pic .at-scene-vid { display: none; }
  .at-scene-pic .at-scene-img { display: block; }
  .at-scene-still { display: block; font-size: 14px; color: var(--muted); }
}
.at-scene-pic figcaption { margin-top: 8px; font-size: 14px; color: var(--muted); }
@media (max-width: 760px) { .at-scene-row { grid-template-columns: minmax(0, 1fr); } .at-scene-pic:first-child { grid-row: auto; } }