/* Comet Cabin — deep space. Starfield is drawn by space.js on #sky; nebulas drift in CSS.
   Game pages override --acc / --deep / --soft. */
:root {
  --void: #05040d; --space: #0b0a1f; --glass: rgba(20, 18, 48, .55);
  --edge: rgba(170, 160, 255, .22); --text: #eef0ff; --mute: #a7a9d6;
  --c1: #7c5cff; --c2: #22d3ee; --c3: #ff4fd8; --c4: #ffd166;
  --acc: #7c5cff; --deep: #2a1a6e; --soft: #22d3ee;
  --grad: linear-gradient(100deg, var(--c2), var(--c1) 40%, var(--c3) 75%, var(--c4));
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --r: 22px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; color: var(--text); font: 17px/1.65 var(--sans); overflow-x: hidden;
  background: radial-gradient(120% 80% at 50% -10%, #1a1350 0%, var(--space) 45%, var(--void) 100%) fixed var(--void);
}
#sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.nebula { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.nebula i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; animation: drift 38s ease-in-out infinite alternate; }
.nebula i:nth-child(1) { width: 55vmax; height: 55vmax; left: -15vmax; top: -10vmax; background: radial-gradient(circle, #6d3bff 0, transparent 65%); }
.nebula i:nth-child(2) { width: 50vmax; height: 50vmax; right: -18vmax; top: 20vh; background: radial-gradient(circle, #ff3fb4 0, transparent 62%); opacity: .32; animation-duration: 46s; animation-delay: -12s; }
.nebula i:nth-child(3) { width: 45vmax; height: 45vmax; left: 20vw; bottom: -25vmax; background: radial-gradient(circle, #13c8e8 0, transparent 60%); opacity: .3; animation-duration: 52s; animation-delay: -20s; }
@keyframes drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(6vw, 4vh) scale(1.12); } 100% { transform: translate(-4vw, 8vh) scale(.95); } }

a { color: #9fe8ff; text-underline-offset: 3px; }
a:hover { color: #fff; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { line-height: 1.05; letter-spacing: -.035em; margin: 0 0 .5em; font-weight: 800; }
h1 { font-size: clamp(2.6rem, 8.5vw, 5.6rem); }
h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); }
h3 { font-size: 1.2rem; letter-spacing: -.015em; }
p { margin: 0 0 1em; }
.mute { color: var(--mute); }
.wrap { max-width: 1140px; margin: 0 auto; padding: 0 16px; position: relative; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 8px; background: #fff; color: #000; padding: 8px 12px; z-index: 9; border-radius: 8px; }
.grad { background: var(--grad); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 6s linear infinite; }
@keyframes shimmer { to { background-position: -220% 0; } }
.glass { background: var(--glass); border: 1px solid var(--edge); border-radius: var(--r); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 20px 60px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06); }
.tag { display: inline-block; font: 700 .7rem/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; padding: 6px 9px; border-radius: 999px; border: 1px solid var(--edge); background: rgba(255,255,255,.05); white-space: nowrap; color: var(--mute); }
.tag.hot { color: #1a1300; background: var(--c4); border-color: transparent; box-shadow: 0 0 18px rgba(255,209,102,.5); }
.tag.ok { color: #00241a; background: #3ef0a8; border-color: transparent; box-shadow: 0 0 18px rgba(62,240,168,.5); }

/* reveal */
.rv { opacity: 0; transform: translateY(40px) scale(.96); filter: blur(4px); transition: opacity .6s cubic-bezier(.2,.7,.2,1) var(--d, 0ms), transform .7s cubic-bezier(.2,.7,.2,1) var(--d, 0ms), filter .5s var(--d, 0ms); }
.rv.in { opacity: 1; transform: none; filter: none; }

/* header */
.top { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 0; flex-wrap: wrap; position: relative; z-index: 3; }
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); font: 800 1.2rem var(--sans); letter-spacing: -.03em; }
.logo:hover { color: #fff; }
.logo-mark { position: relative; width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0, #b9a6ff 18%, #6d3bff 55%, #2a0f7a 100%); box-shadow: 0 0 22px rgba(124,92,255,.8); }
.logo-mark::after { content: ""; position: absolute; left: -8px; right: -8px; top: 12px; height: 8px; border-radius: 50%; border: 2px solid rgba(159,232,255,.85); transform: rotate(-18deg); }
.top nav { display: flex; gap: 4px; flex-wrap: wrap; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid var(--edge); backdrop-filter: blur(10px); }
.top nav a { color: var(--mute); font: 600 .85rem var(--sans); text-decoration: none; padding: 7px 13px; border-radius: 999px; transition: color .2s, background .2s; }
.top nav a:hover { color: #fff; }
.top nav a[aria-current="page"] { color: #fff; background: linear-gradient(120deg, rgba(124,92,255,.55), rgba(34,211,238,.35)); }
.crumbs { font: .82rem var(--mono); color: var(--mute); }
.crumbs a { color: var(--mute); text-decoration: none; }
.crumbs a:hover { color: #fff; }

/* buttons */
.btn { position: relative; display: inline-flex; align-items: center; gap: 10px; font: 700 1rem var(--sans); text-decoration: none; color: #fff; padding: 14px 22px; border-radius: 999px; border: 0; cursor: pointer;
  background: linear-gradient(120deg, var(--c1), var(--c3)); box-shadow: 0 10px 30px -8px rgba(124,92,255,.8), inset 0 1px 0 rgba(255,255,255,.3); transition: transform .25s cubic-bezier(.3,1.6,.5,1), box-shadow .25s; }
.btn:hover { color: #fff; transform: translateY(-3px) scale(1.04); box-shadow: 0 16px 40px -8px rgba(255,79,216,.8), inset 0 1px 0 rgba(255,255,255,.3); }
.btn:active { transform: scale(.97); }
.btn.alt { background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px var(--edge); }
.btn.off { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--edge); color: var(--mute); cursor: default; }
.btn.off:hover { transform: none; }
.btn svg { width: 18px; height: 18px; }

/* hero */
.intro { display: grid; grid-template-columns: 1.15fr 1fr; gap: 30px; align-items: center; min-height: min(78vh, 720px); padding: 20px 0 40px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 700 .78rem var(--mono); color: #9fe8ff; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 18px; padding: 7px 12px; border-radius: 999px; background: rgba(34,211,238,.08); border: 1px solid rgba(34,211,238,.25); }
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3ef0a8; box-shadow: 0 0 10px #3ef0a8; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(.5); opacity: .5; } }
.intro h1 { text-shadow: 0 0 40px rgba(124,92,255,.35); }
.intro .lead { font-size: 1.18rem; color: var(--mute); max-width: 44ch; }
.intro .cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* orbit system */
.orbit { position: relative; width: min(520px, 100%); aspect-ratio: 1; justify-self: center; }
.orbit .sun { position: absolute; inset: 34%; border-radius: 50%; animation: bob 6s ease-in-out infinite;
  background: radial-gradient(circle at 32% 28%, #fff 0, #ffd1f6 10%, #b26bff 38%, #5a24d6 66%, #1d0b5c 100%);
  box-shadow: 0 0 60px 10px rgba(178,107,255,.55), 0 0 160px 40px rgba(124,92,255,.35), inset -18px -24px 50px rgba(10,0,40,.7); }
.orbit .sun::after { content: ""; position: absolute; inset: -22% -40%; border-radius: 50%; border: 3px solid rgba(159,232,255,.5); transform: rotate(-20deg) scaleY(.28); box-shadow: 0 0 20px rgba(34,211,238,.4); }
.orbit .ring { position: absolute; border-radius: 50%; border: 1px dashed rgba(170,160,255,.25); animation: spin var(--t) linear infinite; }
.orbit .r1 { inset: 16%; --t: 26s; }
.orbit .r2 { inset: 4%; --t: 38s; animation-direction: reverse; }
.orbit .r3 { inset: -6%; --t: 52s; }
.orbit .ring img { position: absolute; width: 24%; aspect-ratio: 1; border-radius: 24%; animation: spin var(--t) linear infinite reverse;
  box-shadow: 0 0 0 2px rgba(255,255,255,.18), 0 10px 30px rgba(0,0,0,.6), 0 0 30px rgba(124,92,255,.5); }
.orbit .r1 img { width: 30%; left: 35%; top: -15%; }
.orbit .r2 img { width: 25%; left: 87.5%; top: 37.5%; animation-direction: normal; }
.orbit .r3 img { width: 22%; left: 3%; top: 70%; }
.orbit .ring i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--c4); box-shadow: 0 0 14px var(--c4); left: 50%; bottom: -4px; }
.orbit .r2 i { background: var(--c2); box-shadow: 0 0 14px var(--c2); left: 6%; top: 25%; bottom: auto; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bob { 50% { transform: translateY(-10px) scale(1.02); } }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); } 50% { transform: translateY(-14px) rotate(calc(var(--rot, 0deg) * -1)); } }

/* rocket that flies across the hero */
.rocket { position: absolute; left: -60px; top: 75%; width: 46px; z-index: 2; pointer-events: none; offset-path: path("M0,0 C 320,-260 720,140 1400,-360"); offset-rotate: auto; animation: fly 16s cubic-bezier(.45,.05,.55,.95) infinite 1.5s; opacity: 0; }
.rocket svg { width: 100%; height: auto; transform: rotate(90deg); filter: drop-shadow(0 0 12px rgba(255,140,60,.8)); }
@keyframes fly { 0% { offset-distance: 0%; opacity: 0; } 3% { opacity: 1; } 38% { offset-distance: 100%; opacity: 1; } 39%, 100% { offset-distance: 100%; opacity: 0; } }

/* marquee */
.ticker { overflow: hidden; margin: 10px 0 0; padding: 14px 0; border-block: 1px solid var(--edge); background: linear-gradient(90deg, rgba(124,92,255,.12), rgba(34,211,238,.1), rgba(255,79,216,.12)); -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.ticker div { display: flex; gap: 34px; width: max-content; font: 800 1rem var(--mono); text-transform: uppercase; letter-spacing: .12em; animation: tick 30s linear infinite; }
.ticker span:nth-child(4n+3) { color: var(--c2); } .ticker span:nth-child(4n+1) { color: #fff; } .ticker span:nth-child(2n) { color: var(--c3); }
@keyframes tick { to { transform: translateX(-50%); } }

/* sections */
.head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 80px 0 24px; flex-wrap: wrap; }
.head h2 { margin: 0; }
.head .count { font: .9rem var(--mono); color: var(--mute); }
.carts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; perspective: 1000px; }
.cart { --rx: 0deg; --ry: 0deg; position: relative; display: flex; flex-direction: column; gap: 14px; padding: 26px; text-decoration: none; color: var(--text); overflow: hidden;
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform .2s ease-out, box-shadow .3s; }
.cart.rv { transform: translateY(40px) scale(.96); }
.cart.rv.in { transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .25s ease-out, box-shadow .3s, opacity .6s var(--d), filter .5s var(--d); }
.cart::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--a, 0deg), transparent 0 55%, var(--g-acc) 72%, #fff 78%, transparent 88%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: rim 5s linear infinite; }
.carts .cart:nth-child(2)::before { animation-delay: -1.7s; } .carts .cart:nth-child(3)::before { animation-delay: -3.4s; }
.cart::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 0%), color-mix(in srgb, var(--g-acc) 26%, transparent), transparent 60%); }
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes rim { to { --a: 360deg; } }
.cart:hover { color: var(--text); box-shadow: 0 30px 80px -30px color-mix(in srgb, var(--g-acc) 80%, transparent); }
.cart .icon { width: 96px; height: 96px; border-radius: 24px; transform: translateZ(40px); animation: float 5s ease-in-out infinite; --rot: 3deg; box-shadow: 0 16px 40px -10px color-mix(in srgb, var(--g-acc) 80%, #000); }
.carts .cart:nth-child(2) .icon { animation-delay: -1.6s; } .carts .cart:nth-child(3) .icon { animation-delay: -3.2s; }
.cart .num { position: absolute; right: 20px; top: 14px; font: 800 3.4rem/1 var(--mono); color: rgba(255,255,255,.07); }
.cart .meta { display: flex; gap: 6px; flex-wrap: wrap; }
.cart h3 { font-size: 1.6rem; margin: 0; }
.cart p { margin: 0; color: var(--mute); }
.cart .go { margin-top: auto; font: 700 .9rem var(--sans); color: #fff; display: inline-flex; gap: 8px; align-items: center; position: relative; z-index: 1; }
.cart .go::after { content: "→"; transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.cart:hover .go::after { transform: translateX(6px); }
.rules { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.rules li { padding: 26px; position: relative; overflow: hidden; }
.rules li .em { display: block; font-size: 2.6rem; line-height: 1; margin-bottom: 14px; animation: float 4.5s ease-in-out infinite; --rot: -6deg; }
.rules li:nth-child(2) .em { animation-delay: -1.5s; } .rules li:nth-child(3) .em { animation-delay: -3s; }
.rules strong { display: block; font-size: 1.15rem; margin-bottom: 6px; }
.rules .t { color: var(--mute); }
.mail { margin-top: 80px; padding: 40px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; position: relative; overflow: hidden; }
.mail::before { content: ""; position: absolute; width: 380px; height: 380px; right: -120px; top: -170px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe7a8, #ff8a3d 40%, #8a1d5a 80%); opacity: .5; animation: bob 7s ease-in-out infinite; }
.mail > * { position: relative; }
.mail h2 { margin: 0 0 6px; }
.mail p { margin: 0; color: var(--mute); }

/* game page */
.g-hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: center; padding: 20px 0 40px; min-height: 70vh; }
.g-title { display: flex; gap: 28px; align-items: center; margin-bottom: 18px; }
.planet { position: relative; flex: none; width: 112px; height: 112px; animation: bob 5s ease-in-out infinite; }
.planet img { width: 100%; height: 100%; border-radius: 28px; position: relative; z-index: 1; box-shadow: 0 0 40px color-mix(in srgb, var(--acc) 70%, transparent), 0 14px 30px rgba(0,0,0,.6); }
.planet::before { content: ""; position: absolute; inset: 30% -26%; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--soft) 75%, transparent); transform: rotate(-16deg); z-index: 2; box-shadow: 0 0 16px color-mix(in srgb, var(--soft) 60%, transparent); }
.planet .moon { position: absolute; z-index: 3; width: 12px; height: 12px; border-radius: 50%; background: var(--soft); box-shadow: 0 0 14px var(--soft); left: 50%; top: 50%; offset-path: ellipse(84px 24px at 0 0); offset-rotate: 0deg; animation: moon 4s linear infinite; }
@keyframes moon { to { offset-distance: 100%; } }
.g-title h1 { margin: 0; font-size: clamp(2.4rem, 7vw, 4.6rem); }
.g-hero .lead { font-size: 1.18rem; color: var(--mute); max-width: 46ch; }
.facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 28px; padding: 0; }
.facts div { padding: 10px 16px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid var(--edge); }
.facts dt { font: 700 .66rem var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--mute); }
.facts dd { margin: 0; font-weight: 700; }
.device { justify-self: center; width: min(310px, 82%); position: relative; animation: float 7s ease-in-out infinite; --rot: 2deg; }
.device::before { content: ""; position: absolute; inset: 10% -20%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--acc) 60%, transparent), transparent 65%); filter: blur(30px); z-index: -1; }
.device img { border-radius: 36px; box-shadow: 0 0 0 8px #0d0c1d, 0 0 0 9px rgba(255,255,255,.18), 0 40px 80px -20px rgba(0,0,0,.9); }
.device.wide { width: 100%; }
.device.wide img { border-radius: 22px; }
.band { padding: 20px 0; }
.strip { display: flex; gap: 22px; overflow-x: auto; padding: 24px 6px 30px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.strip img { flex: none; height: 430px; width: auto; border-radius: 26px; scroll-snap-align: center; box-shadow: 0 0 0 1px var(--edge), 0 30px 60px -20px rgba(0,0,0,.9); animation: float 6s ease-in-out infinite; }
.strip img:nth-child(2n) { animation-delay: -2s; } .strip img:nth-child(3n) { animation-delay: -4s; }
.strip.wide img { height: 260px; border-radius: 18px; }
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.steps li { counter-increment: s; padding: 24px; position: relative; overflow: hidden; }
.steps li::before { content: counter(s, decimal-leading-zero); display: block; margin-bottom: 12px; font: 800 2.4rem/1 var(--mono); background: linear-gradient(120deg, var(--soft), var(--acc)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.feats { display: flex; flex-wrap: wrap; gap: 12px; padding: 0; margin: 0; list-style: none; }
.feats li { padding: 11px 18px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--edge); transition: transform .3s cubic-bezier(.3,1.6,.5,1), background .3s; }
.feats li:hover { transform: translateY(-4px) rotate(-1deg); background: color-mix(in srgb, var(--acc) 25%, transparent); }
.feats li::before { content: "✦ "; color: var(--soft); }
.qa { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin: 0; }
.qa div { padding: 22px 24px; }
.qa dt { font-weight: 700; font-size: 1.05rem; margin-bottom: 6px; }
.qa dd { margin: 0; color: var(--mute); }
.help { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 80px; }
.help > div { padding: 26px; }
.help p { margin: 0; color: var(--mute); }

/* documents */
.doc { display: grid; grid-template-columns: 220px 1fr; gap: 40px; padding: 30px 0 0; align-items: start; }
.doc aside { position: sticky; top: 20px; padding: 18px; font-size: .9rem; }
.doc aside b { display: block; font: 700 .7rem var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--mute); margin-bottom: 10px; }
.doc aside a { display: block; padding: 6px 10px; margin: 0 -10px; border-radius: 10px; text-decoration: none; color: var(--mute); transition: background .2s, color .2s; }
.doc aside a:hover { background: rgba(255,255,255,.06); color: #fff; }
.doc article { padding: 40px; max-width: 780px; }
.doc article h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); }
.doc article h2 { font-size: 1.35rem; margin-top: 2em; scroll-margin-top: 20px; }
.doc .stamp { font: .88rem var(--mono); color: var(--mute); margin-bottom: 24px; }
.tldr { padding: 20px 22px; border-radius: 18px; margin-bottom: 8px; background: linear-gradient(120deg, rgba(124,92,255,.25), rgba(34,211,238,.18)); border: 1px solid rgba(159,232,255,.3); }
.tldr b { font: 700 .72rem var(--mono); text-transform: uppercase; letter-spacing: .12em; display: block; margin-bottom: 6px; color: #9fe8ff; }
.tldr p { margin: 0; }
.doc ul { padding-left: 1.2em; }
table.t { width: 100%; border-collapse: collapse; font-size: .94rem; }
table.t th, table.t td { text-align: left; padding: 12px; border-bottom: 1px solid var(--edge); vertical-align: top; }
table.t th { font: 700 .7rem var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--mute); }
.scroll { overflow-x: auto; }

/* footer */
footer { margin-top: 100px; border-top: 1px solid var(--edge); background: rgba(5,4,13,.6); backdrop-filter: blur(10px); }
footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; padding-bottom: 34px; font-size: .88rem; color: var(--mute); }
footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
footer a { color: var(--mute); text-decoration: none; }
footer a:hover { color: #fff; }

@media (max-width: 860px) {
  .intro, .g-hero, .doc, .help, .mail { grid-template-columns: 1fr; }
  .intro { min-height: 0; }
  .orbit { width: min(360px, 84%); margin: 20px auto 0; }
  .doc aside { display: none; }
  .doc article { padding: 26px 20px; }
  .g-hero { min-height: 0; }
  .device { width: min(240px, 66%); }
  .device.wide { width: 100%; }
  .rocket { display: none; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .strip img { height: 340px; }
  .strip.wide img { height: 190px; }
  .planet { width: 84px; height: 84px; }
  .planet img { border-radius: 20px; }
  .planet .moon { offset-path: ellipse(64px 18px at 0 0); }
  .mail { padding: 28px 22px; }
  .head { margin-top: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rv, .cart.rv { opacity: 1; transform: none; filter: none; }
  .rocket { display: none; }
}