:root { --ink:#dff9ff; --muted:#89aab7; --void:#050812; --panel:rgba(9,17,30,.74); --line:rgba(132,229,255,.21); --cyan:#65e7ff; --pink:#ff3eae; --lime:#b6ff77; --serif:Georgia, 'Times New Roman', serif; --sans:Arial,Helvetica,sans-serif; --mono:Consolas,'Courier New',monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--void); }
body { min-width:320px; margin:0; overflow-x:hidden; background:radial-gradient(ellipse at 75% 1%,#16264b 0%,transparent 35%),linear-gradient(150deg,#050812 15%,#07121e 48%,#070914 100%); color:var(--ink); font-family:var(--sans); }
body:before { content:""; position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:.28; background-image:linear-gradient(rgba(109,238,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(109,238,255,.04) 1px,transparent 1px); background-size:52px 52px; mask-image:linear-gradient(to bottom,#000,transparent 78%); }
.scanlines { position:fixed; z-index:50; inset:0; pointer-events:none; opacity:.09; background:repeating-linear-gradient(0deg,rgba(255,255,255,.32) 0 1px,transparent 1px 4px); mix-blend-mode:soft-light; }
.ambient { position:absolute; z-index:-1; border-radius:50%; filter:blur(75px); opacity:.14; pointer-events:none; animation:drift 13s ease-in-out infinite alternate; }
.ambient-one { width:38rem; height:31rem; top:31rem; left:-18rem; background:#f30082; }.ambient-two { width:35rem; height:28rem; top:94rem; right:-17rem; background:#007eff; animation-delay:-6s; }
@keyframes drift { to { transform:translate(5rem,4rem) scale(1.15); } }
a { color:inherit; text-decoration:none; }.section-shell { width:min(1180px,calc(100% - 48px)); margin:0 auto; }.site-header { height:82px; width:min(1320px,calc(100% - 48px)); margin:auto; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2; border-bottom:1px solid rgba(134,236,255,.13); }.wordmark { font:500 15px var(--mono); letter-spacing:.16em; }.wordmark span { color:var(--pink); padding:0 .14em; }.site-header nav { display:flex; gap:28px; font:12px var(--mono); color:var(--muted); }.site-header nav a:hover { color:var(--cyan); }.header-cta { color:var(--cyan); text-transform:uppercase; font:11px var(--mono); letter-spacing:.08em; }.header-cta span { margin-left:5px; color:var(--pink); }
.bookmark { letter-spacing:.075em; font-size:12px; }.bookmark span { color:var(--pink); }.hero { min-height:calc(100vh - 82px); display:grid; grid-template-columns:1fr .86fr; align-items:center; gap:6vw; padding:64px 0 88px; position:relative; isolation:isolate; }.neo-sky { position:absolute; z-index:-1; inset:0 calc((100vw - min(1180px,calc(100vw - 48px)))/-2) 0; overflow:hidden; pointer-events:none; mask-image:linear-gradient(to bottom,transparent 0%,#000 9%,#000 85%,transparent 100%); }.moon-glow { position:absolute; top:8%; right:15%; width:31vw; max-width:410px; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 43% 45%,rgba(221,252,255,.22),rgba(95,218,255,.08) 24%,rgba(244,48,173,.06) 43%,transparent 68%); filter:blur(3px); animation:moonPulse 8s ease-in-out infinite alternate; }.sky-dot { position:absolute; height:2px; width:2px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px 2px var(--cyan); animation:twinkle 3s steps(2,end) infinite; }.dot-one{top:21%;left:7%}.dot-two{top:34%;left:47%;animation-delay:-1.3s}.dot-three{top:14%;left:69%;animation-delay:-2s}.dot-four{top:52%;left:15%;animation-delay:-.6s}.aircar { position:absolute; width:56px; height:2px; background:linear-gradient(90deg,transparent,var(--cyan)); box-shadow:0 0 10px var(--cyan); opacity:.8; }.aircar:after { content:""; position:absolute; right:-1px; top:-2px; height:6px; width:7px; border-radius:50%; background:#dffaff; box-shadow:0 0 12px var(--cyan); }.aircar-one { top:28%; left:-8%; animation:flyby 9s linear infinite; }.aircar-two { top:46%; left:-15%; transform:scale(.6); background:linear-gradient(90deg,transparent,var(--pink)); box-shadow:0 0 10px var(--pink); animation:flyby 13s linear -6s infinite; }.rain { position:absolute; inset:-30% 0 0; opacity:.25; background-image:repeating-linear-gradient(110deg,transparent 0 17px,rgba(110,230,255,.65) 18px 19px,transparent 20px 43px); background-size:125px 150px; transform:skewX(-12deg); animation:rainfall .65s linear infinite; }.rain-two { opacity:.13; background-size:180px 220px; animation-duration:1.1s; animation-direction:reverse; }.skyline { position:absolute; bottom:0; left:-3%; width:106%; display:flex; align-items:flex-end; justify-content:space-around; transform-origin:bottom; }.skyline i { display:block; position:relative; width:7%; min-width:48px; background:linear-gradient(90deg,#06101e,#122b3c 49%,#06101c); border:1px solid rgba(97,230,255,.18); box-shadow:inset 8px 0 0 rgba(0,0,0,.17),inset -3px 0 0 rgba(93,226,255,.07),0 0 28px rgba(0,183,255,.08); }.skyline i:after { content:""; position:absolute; inset:13px 23% 5px; opacity:.52; background:repeating-linear-gradient(to bottom,rgba(120,238,255,.9) 0 3px,transparent 3px 13px); box-shadow:0 0 8px rgba(101,231,255,.6); }.skyline i:nth-child(1){height:27%}.skyline i:nth-child(2){height:43%}.skyline i:nth-child(3){height:31%}.skyline i:nth-child(4){height:59%}.skyline i:nth-child(5){height:38%}.skyline i:nth-child(6){height:51%}.skyline i:nth-child(7){height:26%}.skyline i:nth-child(8){height:46%}.skyline i:nth-child(9){height:35%}.skyline-far { height:66%; opacity:.38; filter:blur(1.5px); transform:scale(1.06); animation:cityBreathe 7s ease-in-out infinite alternate; }.skyline-far i { background:#10233c; }.skyline-near { height:57%; opacity:.76; }.skyline-near i:nth-child(1){height:38%}.skyline-near i:nth-child(2){height:64%}.skyline-near i:nth-child(3){height:47%}.skyline-near i:nth-child(4){height:81%}.skyline-near i:nth-child(5){height:43%}.skyline-near i:nth-child(6){height:54%}.skyline-near i:nth-child(7){height:70%}.skyline-near i:nth-child(8){height:41%}.skyline-near i:nth-child(9){height:61%}.skyline-near i:nth-child(10){height:35%}.skyline-near i:nth-child(3):before,.skyline-near i:nth-child(7):before { content:""; position:absolute; top:-30px; left:40%; width:3px; height:30px; background:var(--pink); box-shadow:0 0 12px var(--pink); }.horizon-haze { position:absolute; left:0; right:0; bottom:16%; height:90px; background:linear-gradient(90deg,transparent,rgba(255,50,172,.15),rgba(90,232,255,.23),transparent); filter:blur(15px); animation:haze 6s ease-in-out infinite alternate; }.eyebrow,.section-kicker { margin:0; color:var(--cyan); font:11px var(--mono); letter-spacing:.13em; }.eyebrow span { display:inline-block; width:28px; height:1px; margin:0 11px 4px 0; background:var(--pink); }.hero h1,.story h2,.world h2,.poll-side h2,.purchase h2,.series h2 { margin:20px 0; font-size:clamp(48px,7vw,96px); line-height:.92; letter-spacing:-.07em; font-weight:600; }.hero h1 em,.story h2 em,.world h2 em,.purchase h2 em { color:var(--pink); font-family:var(--serif); font-weight:400; letter-spacing:-.09em; }.hero-lead { max-width:390px; font-size:18px; line-height:1.6; color:#b9d5dd; }.hero-actions { display:flex; gap:12px; align-items:center; margin-top:34px; }.button { display:inline-flex; align-items:center; justify-content:center; gap:20px; min-height:48px; padding:0 20px; text-transform:uppercase; letter-spacing:.07em; font:11px var(--mono); transition:.25s ease; }.button.primary { background:var(--cyan); color:#04101a; box-shadow:0 0 30px rgba(101,231,255,.2); }.button.primary:hover { transform:translateY(-3px); box-shadow:0 0 44px rgba(101,231,255,.45); }.button.quiet { color:var(--ink); border:1px solid var(--line); }.button.quiet:hover { border-color:var(--pink); color:var(--pink); }.availability { margin-top:62px; font:10px var(--mono); letter-spacing:.1em; color:var(--muted); }.availability i { display:inline-block; height:7px; width:7px; margin:0 10px; border-radius:50%; background:var(--lime); box-shadow:0 0 10px var(--lime); }
.hero-art { position:relative; width:min(400px,87vw); margin:auto; padding:25px 35px; transform:rotate(2deg); }.hero-art:after { content:""; position:absolute; inset:13% 11%; background:var(--pink); filter:blur(45px); opacity:.2; z-index:-1; }.hero-art img { display:block; width:100%; position:relative; box-shadow:19px 22px 0 rgba(0,0,0,.36),0 0 0 1px rgba(151,240,255,.25); animation:coverFloat 5s ease-in-out infinite alternate; }.hero-ring { position:absolute; border:1px solid rgba(101,231,255,.4); border-radius:50%; z-index:-1; }.ring-one { width:112%; aspect-ratio:1; left:-8%; top:4%; border-right-color:transparent; animation:spin 18s linear infinite; }.ring-two { width:77%; aspect-ratio:1; left:11%; top:16%; border-color:rgba(255,62,174,.3); border-left-color:transparent; animation:spin 12s linear infinite reverse; }.art-label { position:absolute; z-index:1; margin:0; font:9px var(--mono); letter-spacing:.12em; color:var(--cyan); }.top-label { top:4px; left:-3px; }.bottom-label { right:-12px; bottom:2px; color:var(--pink); }.hero-coordinate { position:absolute; bottom:29px; right:0; font:9px var(--mono); color:#55727d; letter-spacing:.1em; display:flex; gap:16px; }@keyframes spin { to { transform:rotate(360deg); }}@keyframes coverFloat { to { transform:translateY(-10px); }}
.story,.world,.poll-section,.purchase,.series { padding:130px 0; }.section-kicker { display:flex; align-items:center; gap:11px; }.section-kicker span { color:var(--pink); font-size:13px; }.story-grid { display:grid; grid-template-columns:.9fr 1fr; gap:10vw; align-items:center; margin-top:42px; }.story-visual { position:relative; }.story-visual img { width:100%; display:block; filter:saturate(.84) contrast(1.06); }.corner { position:absolute; width:48px; height:48px; }.corner:before,.corner:after { content:""; position:absolute; background:var(--cyan); }.top-left { left:-12px; top:-12px; }.top-left:before,.bottom-right:before { height:1px; width:48px; }.top-left:after,.bottom-right:after { width:1px; height:48px; }.bottom-right { bottom:-12px; right:-12px; }.bottom-right:before { right:0; bottom:0; }.bottom-right:after { right:0; bottom:0; }.story h2 { font-size:clamp(38px,5.2vw,70px); }.synopsis { border-left:1px solid var(--pink); padding-left:24px; color:#b9ced6; line-height:1.65; font-size:16px; }.synopsis p { margin:0 0 16px; }.text-link { display:inline-block; margin-top:15px; color:var(--cyan); font:11px var(--mono); text-transform:uppercase; letter-spacing:.09em; }.text-link span { color:var(--pink); padding-left:8px; }
.world { border-top:1px solid rgba(132,229,255,.13); }.section-intro { max-width:650px; }.world h2,.series h2 { font-size:clamp(39px,5vw,68px); margin-bottom:15px; }.section-intro>p { max-width:500px; color:var(--muted); line-height:1.65; }.gallery { margin-top:58px; display:grid; grid-template-columns:1.2fr .88fr .88fr; gap:18px; align-items:end; }.gallery-item { margin:0; position:relative; overflow:hidden; background:#0c1b28; }.gallery-item.offset { transform:translateY(47px); }.gallery-item img { display:block; width:100%; aspect-ratio:1; object-fit:cover; opacity:.82; transition:transform .6s ease,opacity .4s; }.gallery-item.tall img { aspect-ratio:1.13; }.gallery-item:hover img { transform:scale(1.06); opacity:1; }.gallery-item figcaption { padding:15px 16px 17px; position:absolute; bottom:0; left:0; right:0; background:linear-gradient(transparent,rgba(1,4,10,.92)); font-size:16px; }.gallery-item figcaption span { display:block; margin-bottom:4px; font:9px var(--mono); letter-spacing:.11em; color:var(--cyan); }
.poll-section { padding-bottom:92px; }.poll-panel { position:relative; display:grid; grid-template-columns:.84fr 1.16fr; overflow:hidden; border:1px solid rgba(101,231,255,.25); background:linear-gradient(130deg,rgba(7,23,38,.94),rgba(11,11,27,.84)); box-shadow:0 0 80px rgba(31,155,214,.1); }.poll-panel:before { content:""; position:absolute; width:34%; height:4px; left:0; top:0; background:var(--pink); box-shadow:0 0 16px var(--pink); }.poll-side { padding:55px 44px; background:linear-gradient(155deg,rgba(18,44,63,.55),rgba(10,12,28,.2)); border-right:1px solid var(--line); }.poll-side h2 { font-size:clamp(29px,3.7vw,47px); letter-spacing:-.055em; }.poll-side>p { color:var(--muted); line-height:1.55; }.countdown { margin-top:42px; border-top:1px solid var(--line); padding-top:17px; }.countdown-label { display:block; color:var(--muted); font:9px var(--mono); letter-spacing:.12em; }.countdown strong { display:block; margin:6px 0; color:var(--lime); font:500 18px var(--mono); letter-spacing:.03em; }.countdown small { font:9px var(--mono); color:#66818b; }.poll-content { padding:42px 44px; }.poll-options { display:grid; gap:10px; }.poll-option { min-height:71px; padding:13px 15px; display:grid; grid-template-columns:18px 1fr auto; gap:12px; align-items:center; border:1px solid rgba(130,216,240,.16); cursor:pointer; transition:.2s; }.poll-option:hover:not(.is-locked) { border-color:var(--cyan); background:rgba(89,224,255,.05); transform:translateX(4px); }.poll-option input { position:absolute; opacity:0; }.radio-mark { display:block; height:15px; width:15px; border:1px solid var(--cyan); border-radius:50%; }.is-selected { border-color:var(--pink); background:rgba(255,62,174,.08); }.is-selected .radio-mark { border:4px solid var(--pink); }.poll-option strong { display:block; font-size:14px; }.poll-option small { display:block; margin-top:3px; font-size:11px; color:var(--muted); }.vote-action { color:var(--cyan); font:10px var(--mono); }.is-locked { cursor:default; }.poll-status { min-height:19px; margin:16px 0 22px; color:#a9c6d0; font-size:12px; }.results-heading { display:flex; justify-content:space-between; color:var(--muted); font:9px var(--mono); letter-spacing:.1em; }.results-heading strong { color:var(--ink); font-weight:400; }.result-row { margin-top:14px; }.result-row>div:first-child { display:flex; justify-content:space-between; margin-bottom:6px; color:#acc6cf; font-size:12px; }.result-row b { color:var(--cyan); font:11px var(--mono); }.result-track { height:3px; background:rgba(128,215,240,.12); overflow:hidden; }.result-track i { display:block; height:100%; background:linear-gradient(90deg,var(--pink),var(--cyan)); box-shadow:0 0 10px var(--cyan); transition:width .7s ease; }.poll-note { color:#66818b; font-size:10px; line-height:1.5; margin:25px 0 0; }.poll-note code,.link-help code { color:var(--cyan); }
.purchase { min-height:570px; display:flex; align-items:center; position:relative; overflow:hidden; }.purchase-bg { position:absolute; z-index:-1; inset:0; width:100%; height:100%; object-fit:cover; opacity:.34; mix-blend-mode:screen; filter:hue-rotate(18deg) saturate(1.3); }.purchase:after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(5,8,18,.95) 14%,rgba(5,8,18,.45) 73%,rgba(5,8,18,.82)); }.purchase-content { max-width:630px; }.purchase h2 { font-size:clamp(47px,6.5vw,84px); }.purchase-content>p:not(.eyebrow):not(.link-help) { max-width:380px; line-height:1.65; color:#b6d1d9; }.purchase .button { margin-top:16px; }.link-help { font-size:10px; color:#6e8c96; }.series { padding-top:80px; }.series-grid { margin-top:42px; display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }.volume-card { min-height:310px; padding:13px; display:flex; flex-direction:column; background:rgba(13,23,36,.57); border:1px solid rgba(134,236,255,.15); transition:.3s; }.volume-card.active:hover { transform:translateY(-8px); border-color:var(--pink); box-shadow:0 15px 30px rgba(0,0,0,.25); }.volume-card img,.locked-cover { height:195px; width:100%; object-fit:cover; margin-bottom:14px; background:linear-gradient(135deg,#102d40,#101122); }.locked-cover { display:grid; place-items:center; color:#30596b; font-size:36px; }.volume-number { color:var(--cyan); font:9px var(--mono); letter-spacing:.1em; }.volume-card strong { display:block; margin:6px 0 auto; font-size:14px; line-height:1.2; }.volume-card small { margin-top:12px; font:10px var(--mono); color:var(--muted); }.volume-card small b { color:var(--pink); }.locked { opacity:.57; }footer { width:min(1180px,calc(100% - 48px)); margin:0 auto; min-height:110px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid rgba(132,229,255,.17); color:var(--muted); font:10px var(--mono); }footer>a:last-child { color:var(--cyan); }
.legal-page { background:radial-gradient(ellipse at 68% 0,#172a4d 0%,transparent 34%),linear-gradient(150deg,#050812 15%,#07121e 52%,#080812 100%); }.legal { max-width:850px; padding-top:108px; padding-bottom:100px; }.legal h1 { margin:18px 0 8px; font-size:clamp(56px,8vw,94px); letter-spacing:-.07em; line-height:.94; }.legal-lead { margin:0 0 64px; color:var(--pink); font:12px var(--mono); letter-spacing:.1em; }.legal section { position:relative; padding:29px 0 31px 25px; border-top:1px solid var(--line); }.legal section:before { content:""; position:absolute; width:5px; height:5px; left:0; top:35px; background:var(--cyan); box-shadow:0 0 13px var(--cyan); }.legal h2 { margin:0 0 14px; font-size:22px; letter-spacing:-.035em; }.legal p { max-width:730px; color:#b9d2da; line-height:1.7; font-size:15px; }.legal a { color:var(--cyan); text-decoration:underline; text-decoration-color:rgba(101,231,255,.35); text-underline-offset:3px; }.legal a:hover { color:var(--pink); }
.footer-links { display:flex; gap:19px; }.footer-links a { color:var(--cyan); }.reveal { opacity:0; transform:translateY(25px); transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1); }.reveal.is-visible { opacity:1; transform:none; }.delay-1 { transition-delay:.12s; }.delay-2 { transition-delay:.24s; }@keyframes moonPulse { to { transform:scale(1.13); opacity:.72; } }@keyframes twinkle { 50% { opacity:.15; transform:scale(.5); } }@keyframes flyby { to { transform:translateX(130vw); } }@keyframes rainfall { to { background-position:0 150px; } }@keyframes cityBreathe { to { filter:blur(0); opacity:.53; } }@keyframes haze { to { transform:translateX(8%); opacity:.7; } }
@media (max-width:800px) { .site-header { width:calc(100% - 32px); height:68px; }.site-header nav { display:none; }.section-shell { width:calc(100% - 32px); }.hero { min-height:auto; grid-template-columns:1fr; padding:70px 0 90px; gap:44px; }.neo-sky { inset:0 -16px; opacity:.72; }.hero-art { grid-row:1; width:min(320px,80vw); }.hero-copy { text-align:center; }.hero-lead { margin-left:auto; margin-right:auto; }.hero-actions { justify-content:center; }.availability { margin-top:38px; }.hero-coordinate { right:8px; }.story,.world,.poll-section,.purchase,.series { padding:78px 0; }.story-grid,.poll-panel { grid-template-columns:1fr; }.story-grid { gap:48px; }.story-visual { max-width:490px; }.poll-side { padding:37px 27px; border-right:0; border-bottom:1px solid var(--line); }.poll-content { padding:27px; }.gallery { grid-template-columns:1fr 1fr; }.gallery-item.offset { transform:none; }.gallery-item.tall { grid-row:span 2; }.gallery-item.tall img { height:100%; aspect-ratio:auto; }.series-grid { grid-template-columns:repeat(2,1fr); }.volume-card { min-height:285px; }.volume-card img,.locked-cover { height:175px; }footer { width:calc(100% - 32px); gap:16px; padding:25px 0; flex-wrap:wrap; } }
@media (max-width:460px) { .hero h1 { font-size:56px; }.hero-actions { flex-direction:column; }.button { width:100%; }.gallery { gap:9px; }.gallery-item figcaption { padding:10px; font-size:12px; }.poll-option { grid-template-columns:18px 1fr; }.vote-action { grid-column:2; }.series-grid { gap:9px; }.volume-card { padding:9px; min-height:248px; }.volume-card img,.locked-cover { height:142px; }.purchase { min-height:490px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.ambient,.hero-art img,.hero-ring,.moon-glow,.sky-dot,.aircar,.rain,.skyline-far,.horizon-haze { animation:none; }.reveal { opacity:1; transform:none; transition:none; } }

/* Charaktere */
.characters { padding:130px 0; border-top:1px solid rgba(132,229,255,.13); }
.characters h2 { margin:20px 0 15px; font-size:clamp(40px,5vw,68px); line-height:.94; letter-spacing:-.065em; }
.characters h2 em { color:var(--pink); font:400 1em var(--serif); }
.characters-intro>p { max-width:540px; color:var(--muted); line-height:1.65; }
.character-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:58px; }
.character-card { overflow:hidden; border:1px solid var(--line); background:linear-gradient(145deg,rgba(13,32,48,.85),rgba(11,14,29,.9)); transition:transform .35s,border-color .35s,box-shadow .35s; }
.character-card:hover { transform:translateY(-9px); border-color:var(--pink); box-shadow:0 20px 44px rgba(0,0,0,.52); }
.character-image { position:relative; overflow:hidden; background:#0b1420; }
.character-image img { display:block; width:100%; aspect-ratio:.69; object-fit:cover; transition:transform .7s ease; }
.character-card:hover .character-image img { transform:scale(1.045); }
.character-image:after { content:""; position:absolute; inset:auto 0 0; height:40%; background:linear-gradient(transparent,rgba(8,16,27,.9)); }
.character-image span { position:absolute; z-index:1; top:14px; right:14px; padding:6px 8px; color:var(--cyan); background:rgba(5,16,27,.86); font:10px var(--mono); }
.character-copy { padding:22px 21px 25px; }
.character-role { margin:0; color:var(--pink); font:10px var(--mono); letter-spacing:.1em; }
.character-copy h3 { margin:8px 0 12px; font-size:29px; letter-spacing:-.05em; }
.character-copy>p:last-child { margin:0; color:#afc8d1; font-size:14px; line-height:1.62; }
@media (max-width:800px) { .characters { padding:78px 0; }.character-grid { grid-template-columns:1fr; }.character-card { display:grid; grid-template-columns:minmax(150px,.7fr) 1fr; }.character-image img { height:100%; aspect-ratio:auto; } }
@media (max-width:460px) { .character-card { display:block; }.character-image img { height:auto; aspect-ratio:.72; } }

/* ======================= MODULARE SERIEN-ANSICHT ======================= */
main { scroll-snap-type:y proximity; }
.hero { overflow:hidden; min-height:calc(100svh - 82px); }
.hero-photo { position:absolute; z-index:-2; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; transform:scale(1.02); animation:heroKenBurns 22s ease-in-out infinite alternate; }
.hero-photo-shade { position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,rgba(2,8,18,.94) 0%,rgba(3,10,23,.68) 39%,rgba(3,8,17,.24) 100%),linear-gradient(0deg,rgba(3,8,17,.76),transparent 44%); }
.hero-carousel { width:min(285px,72vw); min-height:440px; margin:auto 2vw auto auto; position:relative; align-self:center; }
.hero-book { position:absolute; inset:0; display:grid; grid-template-rows:1fr auto auto auto; gap:5px; padding:13px; opacity:0; transform:translateX(110%) scale(.92); pointer-events:none; border:1px solid rgba(138,237,255,.27); background:rgba(4,11,21,.63); backdrop-filter:blur(10px); transition:opacity .28s ease,transform .42s cubic-bezier(.2,.75,.2,1); }
.hero-book.is-active { opacity:1; transform:none; pointer-events:auto; }
.hero-book-cover { min-height:330px; overflow:hidden; background:linear-gradient(145deg,#071827,#220b26); }
.hero-book-cover img { display:block; width:100%; height:100%; object-fit:cover; }
.hero-book p { margin:4px 0 0; color:var(--cyan); font:10px var(--mono); letter-spacing:.12em; }
.hero-book strong { font-size:18px; line-height:1.1; }.hero-book small { color:var(--pink); font:10px var(--mono); letter-spacing:.1em; }
.book-series { background:radial-gradient(ellipse at 80% 20%,rgba(15,79,116,.25),transparent 46%),#050912; }
.screen-panel { min-height:100svh; scroll-snap-align:start; scroll-snap-stop:normal; }
.book-detail { width:min(1180px,calc(100% - 48px)); margin:auto; display:grid; grid-template-columns:minmax(260px,.8fr) minmax(300px,1fr); gap:clamp(42px,9vw,150px); align-items:center; padding:90px 0; }
.book-detail-media { display:flex; justify-content:center; }.book-cover { position:relative; width:min(360px,80vw); overflow:hidden; box-shadow:25px 29px 0 rgba(0,0,0,.33),0 0 0 1px rgba(120,238,255,.32); background:#0d1825; }
.book-cover img { display:block; width:100%; aspect-ratio:2/3; object-fit:cover; }.book-cover-question { display:grid; place-items:center; aspect-ratio:2/3; background:radial-gradient(circle at 50% 25%,rgba(255,62,174,.23),transparent 30%),linear-gradient(145deg,#0a2535,#170b25); border:1px solid rgba(101,231,255,.36); }.book-cover-question span { color:var(--cyan); font:clamp(150px,21vw,260px)/1 var(--serif); text-shadow:0 0 38px rgba(101,231,255,.5); }.book-cover-question small { position:absolute; bottom:30px; color:#a5ddeb; text-align:center; font:12px var(--mono); letter-spacing:.17em; }
.book-detail-copy h2 { max-width:650px; margin:19px 0; font-size:clamp(42px,5.4vw,76px); line-height:.94; letter-spacing:-.065em; }.book-detail-copy h2 em { color:var(--pink); font:400 1em var(--serif); }.book-detail-copy>p:not(.eyebrow):not(.availability-note) { max-width:560px; color:#b8d0d8; font-size:17px; line-height:1.7; }.availability-note { display:inline-block; margin:26px 0 14px; padding:7px 10px; border:1px solid rgba(255,62,174,.48); color:#ffc6e5; font:10px var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.store-buttons { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); max-width:570px; gap:10px; }.store-button { display:flex; justify-content:space-between; align-items:center; min-height:52px; padding:0 15px; border:1px solid rgba(101,231,255,.31); color:var(--cyan); font:12px var(--mono); transition:.22s; }.store-button:hover:not(.is-unavailable) { transform:translateY(-3px); border-color:var(--pink); color:#fff; background:rgba(255,62,174,.1); }.store-button.is-unavailable { cursor:not-allowed; opacity:.44; color:#8197a0; border-color:rgba(128,151,160,.28); }
.characters { min-height:100svh; scroll-snap-align:start; padding-top:110px; }.places { scroll-snap-align:start; background:#050912; }.place-intro { min-height:44svh; display:flex; flex-direction:column; justify-content:center; }.place-intro h2 { margin:18px 0; font-size:clamp(48px,7vw,90px); line-height:.92; letter-spacing:-.07em; }.place-intro h2 em { color:var(--pink); font:400 1em var(--serif); }.place-detail { position:relative; width:100%; overflow:hidden; display:grid; place-items:center; background:#07101d; }.place-detail>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.6; filter:saturate(.9) contrast(1.08); transform:scale(1.02); transition:transform 1s ease; }.place-detail:hover>img { transform:scale(1.08); }.place-detail:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(4,9,18,.93),rgba(4,9,18,.38) 72%,rgba(4,9,18,.8)); }.place-copy { position:relative; z-index:1; width:min(1180px,calc(100% - 48px)); margin:auto; }.place-copy h3 { max-width:650px; margin:20px 0 13px; font-size:clamp(40px,5vw,74px); line-height:.94; letter-spacing:-.06em; }.place-copy>p:last-child { max-width:500px; color:#c5dce2; font-size:17px; line-height:1.7; }.skyline-outro { height:44svh; overflow:hidden; position:relative; }.skyline-outro:after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,#050912,transparent 40%,#050912a6); }.skyline-outro img { width:100%; height:100%; object-fit:cover; object-position:center 70%; filter:saturate(.85) contrast(1.06); }
@keyframes heroKenBurns { to { transform:scale(1.08) translateX(-1%); } }
@media (max-width:800px) { .hero { grid-template-columns:1fr; padding:88px 0 60px; }.hero-copy { align-self:start; }.hero-carousel { width:min(290px,80vw); min-height:360px; margin:8px auto 0; }.hero-book-cover { min-height:250px; }.book-detail { grid-template-columns:1fr; min-height:100svh; gap:42px; padding:80px 0; }.book-detail-media { order:0; }.book-cover { width:min(265px,62vw); }.book-detail-copy { text-align:left; }.store-buttons { grid-template-columns:1fr 1fr; }.characters { padding-top:78px; }.place-intro { min-height:35svh; }.place-copy { width:calc(100% - 36px); } }
@media (max-width:460px) { .hero-photo { object-position:62% center; }.hero-photo-shade { background:linear-gradient(0deg,rgba(3,8,17,.9),rgba(3,8,17,.42)),linear-gradient(90deg,rgba(3,8,17,.78),rgba(3,8,17,.28)); }.hero-carousel { min-height:330px; }.hero-book-cover { min-height:218px; }.book-detail { width:calc(100% - 32px); }.store-buttons { grid-template-columns:1fr; }.screen-panel { min-height:100svh; }.place-copy h3 { font-size:45px; } }

/* Let the opening image breathe across the entire viewport. */
.hero.section-shell { width:100%; max-width:none; padding-right:max(24px,calc((100vw - 1180px) / 2)); padding-left:max(24px,calc((100vw - 1180px) / 2)); }
.hero-photo { inset:0; object-position:center 55%; }

/* Strong but smooth chapter-like page capture on scroll. */
main { scroll-snap-type:y mandatory; scroll-behavior:smooth; }
.screen-panel, .characters { scroll-snap-align:start; scroll-snap-stop:always; }

/* Recognisable, local platform marks in every purchase button. */
.store-button { position:relative; gap:10px; justify-content:flex-start; }
.store-icon { width:22px; height:22px; flex:0 0 22px; object-fit:contain; border-radius:5px; filter:brightness(1.18) contrast(1.08); }
.store-icon-tolino { display:grid; place-items:center; width:22px; height:22px; flex:0 0 22px; border-radius:50%; color:#071421; background:linear-gradient(135deg,#b9ff2d,#37d7f7); font:700 10px/1 Arial,sans-serif; letter-spacing:-1px; }
.store-label { flex:1; }.store-arrow { margin-left:auto; color:var(--pink); }

/* Compact location archive: cards can grow naturally as more places are copied in. */
.places { min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:92px 0 0; background:radial-gradient(ellipse at 20% 14%,rgba(255,62,174,.10),transparent 36%),#050912; }
.places-wrap { padding-bottom:62px; }.place-intro { min-height:0; display:block; }.place-intro>p { max-width:540px; color:var(--muted); line-height:1.65; }
.place-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:38px; }
.place-card { position:relative; overflow:hidden; min-height:420px; border:1px solid rgba(132,229,255,.22); background:#0a1420; transition:transform .35s,border-color .35s,box-shadow .35s; }
.place-card:hover { transform:translateY(-8px); border-color:var(--pink); box-shadow:0 18px 42px rgba(0,0,0,.48); }
.place-card>img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; opacity:.75; transition:transform .75s ease,opacity .35s; }.place-card:hover>img { transform:scale(1.08); opacity:1; }
.place-card:after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(4,9,18,.98) 4%,rgba(4,9,18,.14) 78%); }
.place-card-copy { position:absolute; z-index:1; right:0; bottom:0; left:0; padding:22px; }.place-card-copy p { margin:0 0 8px; color:var(--cyan); font:10px var(--mono); letter-spacing:.1em; }.place-card-copy h3 { margin:0 0 10px; font-size:27px; line-height:1.04; letter-spacing:-.045em; }.place-card-copy span { display:block; color:#b9d3dc; font-size:14px; line-height:1.55; }
.skyline-outro { height:24svh; margin-top:auto; }
@media (max-width:800px) { main { scroll-snap-type:y proximity; }.hero.section-shell { padding-right:16px; padding-left:16px; }.place-grid { grid-template-columns:1fr 1fr; }.place-card { min-height:360px; }.places { padding-top:78px; } }
@media (max-width:460px) { .place-grid { grid-template-columns:1fr; }.place-card { min-height:330px; }.skyline-outro { height:18svh; } }

/* Mobile image preservation: show the full motif instead of cropping it. */
.hero-book-cover img { object-fit:contain; background:#07101b; }
@media (max-width:800px) {
  .character-card { display:block; }
  .character-image img { height:auto; aspect-ratio:auto; object-fit:contain; object-position:center top; }
  .place-card { display:flex; flex-direction:column; min-height:0; background:#091421; }
  .place-card>img { position:relative; height:auto; aspect-ratio:1/1; object-fit:contain; object-position:center; opacity:1; background:#08121d; }
  .place-card:after { display:none; }
  .place-card-copy { position:relative; padding:20px 20px 24px; background:linear-gradient(145deg,#0d2030,#0a111e); }
  .place-card-copy h3 { font-size:26px; }
  .place-card:hover>img { transform:none; }
}

/* Header soundtrack: user-controlled audio with a live neon equalizer. */
.header-tools { display:flex; align-items:center; gap:20px; }
.music-player { position:relative; display:flex; align-items:center; gap:6px; flex:0 0 auto; }
.music-toggle { position:relative; isolation:isolate; display:inline-flex; align-items:center; gap:9px; min-height:40px; padding:0 12px 0 10px; overflow:hidden; border:1px solid rgba(101,231,255,.3); border-radius:999px; color:var(--cyan); background:rgba(4,15,27,.66); box-shadow:inset 0 0 16px rgba(101,231,255,.035); font:10px var(--mono); letter-spacing:.08em; text-transform:uppercase; cursor:pointer; transition:border-color .25s ease,background .25s ease,box-shadow .25s ease,transform .25s ease; }
.music-toggle:hover { transform:translateY(-2px); border-color:var(--pink); background:rgba(255,62,174,.09); box-shadow:0 0 22px rgba(255,62,174,.18); }
.music-toggle:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; }
.music-equalizer { display:flex; align-items:center; gap:2px; width:18px; height:18px; }
.music-equalizer i { display:block; width:2px; height:5px; border-radius:2px; background:currentColor; box-shadow:0 0 7px currentColor; transform-origin:center; animation:musicBars .7s ease-in-out infinite alternate; animation-play-state:paused; }
.music-equalizer i:nth-child(2) { height:12px; animation-delay:-.28s; }.music-equalizer i:nth-child(3) { height:8px; animation-delay:-.46s; }.music-equalizer i:nth-child(4) { height:15px; animation-delay:-.12s; }
.music-player.is-playing .music-equalizer i { animation-play-state:running; }.music-player.is-playing .music-toggle { border-color:rgba(101,231,255,.75); background:rgba(15,74,91,.36); box-shadow:0 0 20px rgba(101,231,255,.2); }
.music-info { position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; gap:1px; line-height:1; }.music-info>span { color:#d6faff; font-size:9px; }.music-status { color:var(--pink); font:700 8px/1 var(--mono); letter-spacing:.15em; }.music-equalizer { position:relative; z-index:1; }
.music-pulse { position:absolute; z-index:0; inset:3px; border:1px solid var(--cyan); border-radius:inherit; opacity:0; pointer-events:none; }.music-player.is-playing .music-pulse { animation:musicPulse 1.9s ease-out infinite; }
.music-volume { position:relative; }.volume-toggle { display:grid; place-items:center; width:32px; height:32px; padding:0; border:1px solid rgba(101,231,255,.26); border-radius:50%; color:#b8eaf3; background:rgba(4,15,27,.66); cursor:pointer; transition:border-color .22s ease,color .22s ease,background .22s ease,transform .22s ease; }.volume-toggle:hover,.music-volume.is-open .volume-toggle { transform:translateY(-1px); border-color:var(--pink); color:var(--pink); background:rgba(255,62,174,.1); }.volume-toggle:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; }.volume-icon { width:15px; height:15px; fill:currentColor; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }.volume-wave { fill:none; }
.volume-panel { position:absolute; z-index:15; top:calc(100% + 10px); right:0; display:flex; align-items:center; gap:10px; width:166px; padding:11px 12px; border:1px solid rgba(101,231,255,.35); border-radius:12px; opacity:0; pointer-events:none; transform:translateY(-6px); background:rgba(5,16,29,.96); box-shadow:0 16px 35px rgba(0,0,0,.36),0 0 20px rgba(101,231,255,.08); backdrop-filter:blur(12px); transition:opacity .2s ease,transform .2s ease; }.music-volume.is-open .volume-panel { opacity:1; pointer-events:auto; transform:none; }
.volume-range { --volume-percent:30%; width:118px; height:4px; margin:0; appearance:none; border-radius:999px; outline:0; background:linear-gradient(90deg,var(--cyan) 0 var(--volume-percent),rgba(158,211,222,.22) var(--volume-percent) 100%); cursor:pointer; }.volume-range::-webkit-slider-runnable-track { height:4px; border-radius:999px; background:transparent; }.volume-range::-webkit-slider-thumb { width:12px; height:12px; margin-top:-4px; appearance:none; border:1px solid #d9fbff; border-radius:50%; background:var(--pink); box-shadow:0 0 10px rgba(255,62,174,.7); }.volume-range::-moz-range-track { height:4px; border-radius:999px; background:rgba(158,211,222,.22); }.volume-range::-moz-range-progress { height:4px; border-radius:999px; background:var(--cyan); }.volume-range::-moz-range-thumb { width:10px; height:10px; border:1px solid #d9fbff; border-radius:50%; background:var(--pink); box-shadow:0 0 10px rgba(255,62,174,.7); }.volume-range:focus-visible { outline:2px solid var(--cyan); outline-offset:5px; }.volume-value { min-width:27px; color:#e1faff; font:9px var(--mono); letter-spacing:.04em; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@keyframes musicBars { from { transform:scaleY(.42); opacity:.5; } to { transform:scaleY(1.18); opacity:1; } }
@keyframes musicPulse { 0% { transform:scale(.88); opacity:.7; } 100% { transform:scale(1.35); opacity:0; } }
.footer-links .music-credit { color:#a8c4cc; }
.footer-links .music-credit:hover { color:var(--pink); }
@media (max-width:800px) { .header-tools { gap:12px; margin-left:auto; }.music-toggle { width:40px; min-width:40px; justify-content:center; padding:0; }.music-info { display:none; } }
@media (min-width:801px) and (max-width:1050px) { footer { gap:20px; flex-wrap:wrap; padding:22px 0; }.footer-links { width:100%; justify-content:flex-end; flex-wrap:wrap; } }
@media (max-width:600px) { .header-cta { display:none; } }
@media (prefers-reduced-motion:reduce) { .music-equalizer i,.music-player.is-playing .music-pulse { animation:none; }.music-player.is-playing .music-equalizer i { opacity:1; } }

/* =========================== NEO TOKYO ENTRY GATE =========================== */
body.has-entry-gate { overflow:hidden; }
#site-shell { visibility:hidden; opacity:0; pointer-events:none; transform:scale(1.018); transition:opacity .72s ease,transform 1s cubic-bezier(.16,.82,.18,1),visibility 0s linear .72s; }
body.is-entering #site-shell,body.has-entered #site-shell { visibility:visible; opacity:1; pointer-events:auto; transform:none; transition-delay:0s; }
.entry-gate { position:fixed; z-index:200; inset:0; display:grid; place-items:center; min-height:100svh; overflow:hidden; isolation:isolate; background:#040711; color:#f2fbff; }
.entry-backdrop { position:absolute; z-index:-5; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(1.08) contrast(1.08) brightness(.77); transform:scale(1.055); animation:entryCityDrift 22s ease-in-out infinite alternate; }
.entry-vignette { position:absolute; z-index:-4; inset:0; background:radial-gradient(ellipse at 50% 49%,rgba(5,13,30,.04) 0 15%,rgba(3,9,22,.36) 54%,rgba(2,5,14,.92) 100%),linear-gradient(90deg,rgba(3,8,18,.45),transparent 30% 70%,rgba(3,8,18,.48)); }
.entry-grid { position:absolute; z-index:-3; inset:0; pointer-events:none; opacity:.36; background-image:linear-gradient(rgba(112,234,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(112,234,255,.12) 1px,transparent 1px); background-size:72px 72px; mask-image:linear-gradient(0deg,#000,transparent 72%); transform:perspective(600px) rotateX(57deg) scale(1.8) translateY(26%); transform-origin:bottom; animation:entryGridFlow 9s linear infinite; }
.entry-sweep { position:absolute; z-index:-2; inset:-35% -20%; pointer-events:none; background:linear-gradient(110deg,transparent 43%,rgba(80,234,255,.13) 48%,rgba(255,59,180,.18) 50%,rgba(80,234,255,.11) 52%,transparent 58%); transform:translateX(-42%); mix-blend-mode:screen; animation:entrySweep 5.5s ease-in-out infinite; }
.entry-orbit { position:absolute; z-index:-1; width:min(74vw,980px); aspect-ratio:1; border:1px solid rgba(109,239,255,.25); border-radius:50%; pointer-events:none; }.entry-orbit-one { transform:rotate(-22deg); border-right-color:transparent; animation:entryOrbit 18s linear infinite; }.entry-orbit-two { width:min(54vw,720px); border-color:rgba(255,62,174,.25); border-left-color:transparent; transform:rotate(38deg); animation:entryOrbit 13s linear infinite reverse; }
.entry-corner { position:absolute; width:clamp(54px,7vw,110px); aspect-ratio:1; border-color:rgba(101,231,255,.72); pointer-events:none; filter:drop-shadow(0 0 8px rgba(101,231,255,.46)); }.entry-corner-tl { top:clamp(20px,5vw,72px); left:clamp(20px,5vw,72px); border-top:1px solid; border-left:1px solid; }.entry-corner-br { right:clamp(20px,5vw,72px); bottom:clamp(20px,5vw,72px); border-right:1px solid; border-bottom:1px solid; }
.entry-content { position:relative; z-index:1; display:grid; justify-items:center; align-content:center; place-items:center; padding:24px; text-align:center; animation:entryContentIn 1.05s cubic-bezier(.12,.9,.2,1) both; }
.entry-button { position:relative; display:grid; justify-items:center; align-content:center; place-items:center; gap:25px; width:min(760px,calc(100vw - 48px)); min-height:clamp(190px,30vh,280px); padding:34px 52px 30px; overflow:hidden; border:1px solid rgba(165,241,255,.68); color:inherit; text-align:center; background:linear-gradient(135deg,rgba(3,10,24,.46),rgba(7,29,49,.17)); box-shadow:inset 0 0 0 1px rgba(255,62,174,.15),0 0 0 8px rgba(98,231,255,.035),0 0 66px rgba(20,199,255,.22); backdrop-filter:blur(6px); cursor:pointer; transition:transform .36s cubic-bezier(.16,.85,.2,1),border-color .36s ease,box-shadow .36s ease,background .36s ease; }
.entry-button:before,.entry-button:after { content:""; position:absolute; pointer-events:none; }.entry-button:before { inset:8px; border:1px solid rgba(255,62,174,.42); clip-path:polygon(0 0,18% 0,18% 1px,82% 1px,82% 0,100% 0,100% 22%,calc(100% - 1px) 22%,calc(100% - 1px) 78%,100% 78%,100% 100%,82% 100%,82% calc(100% - 1px),18% calc(100% - 1px),18% 100%,0 100%,0 78%,1px 78%,1px 22%,0 22%); opacity:.8; }.entry-button:after { width:28%; height:220%; top:-60%; left:-36%; background:linear-gradient(90deg,transparent,rgba(199,255,255,.3),transparent); transform:rotate(22deg); transition:left .72s cubic-bezier(.2,.8,.2,1); }
.entry-button:hover:not(:disabled),.entry-button:focus-visible { transform:translateY(-8px) scale(1.025); border-color:#dffcff; background:linear-gradient(135deg,rgba(6,43,67,.76),rgba(64,9,57,.46)); box-shadow:inset 0 0 35px rgba(93,235,255,.16),0 0 0 11px rgba(98,231,255,.06),0 0 105px rgba(22,211,255,.4); outline:0; }.entry-button:hover:after,.entry-button:focus-visible:after { left:112%; }
.entry-title { position:relative; z-index:1; display:grid; justify-items:center; gap:5px; width:100%; text-align:center; font:500 clamp(50px,9.5vw,148px)/.78 var(--serif); letter-spacing:-.075em; text-transform:uppercase; text-shadow:0 0 9px rgba(221,252,255,.68),0 0 42px rgba(72,221,255,.44); }.entry-title>span { display:block; width:100%; color:#edfeff; text-align:center; }.entry-title strong { display:block; width:100%; color:#ff75bd; text-align:center; font:500 1em/.8 var(--serif); text-shadow:0 0 14px rgba(255,62,174,.72),0 0 54px rgba(255,62,174,.38); }
.entry-action { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:12px; width:100%; color:#a9efff; text-align:center; font:11px var(--mono); letter-spacing:.26em; text-transform:uppercase; }.entry-action:before { content:""; display:block; width:36px; height:1px; background:var(--pink); box-shadow:0 0 10px var(--pink); }.entry-action i { color:var(--pink); font-style:normal; font-size:16px; }
.entry-hint { margin:18px 0 0; color:rgba(220,248,255,.75); text-align:center; font:10px var(--mono); letter-spacing:.12em; text-transform:uppercase; animation:entryHintPulse 2.4s ease-in-out infinite; }.entry-controls { display:grid; place-items:center; margin-top:13px; }
.entry-sound-toggle { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:0 13px; border:1px solid rgba(101,231,255,.48); border-radius:999px; color:#c6f8ff; background:rgba(3,19,33,.64); box-shadow:0 0 18px rgba(63,218,255,.11); cursor:pointer; font:10px var(--mono); letter-spacing:.12em; text-align:center; transition:transform .22s ease,border-color .22s ease,color .22s ease,background .22s ease; }.entry-sound-toggle:hover:not(:disabled),.entry-sound-toggle:focus-visible { transform:translateY(-2px); border-color:#e5fbff; color:#fff; background:rgba(15,79,102,.62); outline:0; }.entry-sound-toggle:disabled { cursor:default; opacity:.58; }.entry-sound-toggle.is-off { border-color:rgba(255,115,188,.62); color:#ffc5e5; background:rgba(68,6,45,.44); }.entry-sound-toggle:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; }.entry-sound-toggle b { color:var(--pink); font:700 10px var(--mono); }.entry-sound-toggle.is-off b { color:#ffc5e5; }.entry-sound-icon { width:14px; height:14px; fill:currentColor; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }.entry-sound-wave { fill:none; }.entry-sound-toggle.is-off .entry-sound-wave { opacity:.18; }
body.is-entering .entry-gate { pointer-events:none; animation:entryGateExit .82s cubic-bezier(.7,0,.24,1) forwards; }body.is-entering .entry-backdrop { animation:entryBackdropExit .82s cubic-bezier(.7,0,.24,1) forwards; }body.is-entering .entry-content { animation:entryContentExit .58s ease-out forwards; }
@keyframes entryCityDrift { to { transform:scale(1.14) translate3d(-1.2%,.8%,0); filter:saturate(1.24) contrast(1.11) brightness(.84); } }
@keyframes entryGridFlow { to { background-position:0 72px,72px 0; } }
@keyframes entrySweep { 0%,18% { transform:translateX(-45%); opacity:0; } 32% { opacity:1; } 58%,100% { transform:translateX(50%); opacity:0; } }
@keyframes entryOrbit { to { transform:rotate(338deg); } }
@keyframes entryContentIn { from { opacity:0; transform:scale(.87); filter:blur(12px); } to { opacity:1; transform:none; filter:none; } }
@keyframes entryHintPulse { 50% { opacity:.35; letter-spacing:.2em; } }
@keyframes entryGateExit { 0% { opacity:1; clip-path:inset(0 round 0); } 55% { opacity:1; } 100% { opacity:0; clip-path:inset(0 0 100% 0); } }
@keyframes entryBackdropExit { to { transform:scale(1.22); filter:brightness(1.45) saturate(1.45) blur(6px); } }
@keyframes entryContentExit { to { opacity:0; transform:scale(1.18); filter:blur(8px); } }
@media (max-width:800px) { .entry-button { width:min(590px,calc(100vw - 32px)); min-height:220px; padding:35px 24px 28px; }.entry-title { font-size:clamp(52px,15.2vw,94px); }.entry-orbit-one { width:110vw; }.entry-orbit-two { width:82vw; }.entry-backdrop { object-position:50% 50%; }.entry-grid { opacity:.24; background-size:54px 54px; }.entry-hint { max-width:250px; line-height:1.7; }.entry-sound-toggle { min-height:44px; } }
@media (max-width:430px) { .entry-button { min-height:204px; }.entry-title { font-size:clamp(47px,15vw,70px); }.entry-action { font-size:9px; letter-spacing:.21em; }.entry-corner { width:50px; } }
@media (prefers-reduced-motion:reduce) { #site-shell,.entry-gate,.entry-button { transition:none; }.entry-backdrop,.entry-grid,.entry-sweep,.entry-orbit,.entry-content,.entry-hint,body.is-entering .entry-gate,body.is-entering .entry-backdrop,body.is-entering .entry-content { animation:none; }.entry-backdrop { transform:scale(1.04); }.entry-button:hover:not(:disabled),.entry-button:focus-visible { transform:none; } }

/* Language selection: available at the entry gate and after entry in the header. */
.entry-language { display:grid; justify-items:center; gap:10px; margin:0 0 22px; }
.entry-language-label { margin:0; color:#dcfaff; font:10px var(--mono); letter-spacing:.19em; text-transform:uppercase; text-shadow:0 0 18px rgba(101,231,255,.42); }
.language-options,.header-language-switch { display:flex; align-items:center; gap:7px; }
.language-choice { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:38px; padding:0 13px; border:1px solid rgba(165,241,255,.36); border-radius:999px; color:#d7f8ff; background:rgba(3,18,32,.65); box-shadow:inset 0 0 14px rgba(101,231,255,.03); font:10px var(--mono); letter-spacing:.08em; cursor:pointer; transition:transform .2s ease,border-color .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease; }
.language-choice:hover,.language-choice:focus-visible { transform:translateY(-2px); border-color:rgba(255,118,190,.82); color:#fff; outline:0; }
.language-choice:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; }
.language-choice.is-active { border-color:rgba(101,231,255,.92); color:#061420; background:linear-gradient(135deg,#c5faff,#65e7ff); box-shadow:0 0 22px rgba(101,231,255,.24); }
.language-flag { font-size:16px; line-height:1; filter:saturate(1.1); }
.header-language-switch { gap:3px; padding:3px; border:1px solid rgba(132,229,255,.17); border-radius:999px; background:rgba(4,15,27,.4); }
.language-choice-compact { min-width:31px; min-height:30px; padding:0 6px; border:0; background:transparent; box-shadow:none; }
.language-choice-compact:hover,.language-choice-compact:focus-visible { transform:translateY(-1px); background:rgba(255,62,174,.13); }
.language-choice-compact.is-active { background:rgba(101,231,255,.88); box-shadow:0 0 14px rgba(101,231,255,.22); }
.language-choice-compact .language-flag { font-size:15px; }

/* Four concise place cards: no extra outro, imagery keeps the archive scan-friendly. */
.place-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.place-card { min-height:390px; }
.place-card-copy h3 { font-size:clamp(22px,1.72vw,27px); }
@media (max-width:1100px) { .place-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.place-card { min-height:365px; } }
@media (max-width:800px) { .entry-language { margin-bottom:18px; }.header-language-switch { gap:2px; }.language-choice-compact { min-width:29px; }.place-card { min-height:0; } }
@media (max-width:460px) { .entry-language-label { font-size:9px; }.language-choice { min-height:40px; }.header-tools { gap:8px; }.header-language-switch { padding:2px; }.language-choice-compact { min-width:28px; min-height:29px; padding:0 5px; }.place-grid { grid-template-columns:1fr; } }
@media (max-width:360px) { .header-language-switch { position:absolute; top:calc(100% + 8px); right:0; z-index:4; } }