/* One continuous page surface; the existing poster artwork is now an ambient layer. */
.rail-toggle { display:none; }
@media(max-width:800px) {
 .rail-toggle-ready #rail-collapse { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; min-width:44px; min-height:44px; padding:6px; border:0; border-radius:8px; background:#30465c; color:#c2ddeb; font-size:14px; cursor:pointer; }
 .rail-toggle-ready.rail-collapsed .rail-companion { display:none; }
 body.tools-mode.rail-floating .rail-companion { position:fixed; left:auto; right:12px; bottom:max(12px,env(safe-area-inset-bottom)); top:auto; width:min(340px,calc(100vw - 24px)); margin:0; z-index:8; }
 .rail-toggle-ready.rail-collapsed .rail-expand { display:inline-flex; align-items:center; justify-content:center; gap:8px; position:fixed; z-index:8; right:max(12px,env(safe-area-inset-right)); bottom:max(12px,env(safe-area-inset-bottom)); min-height:44px; max-width:calc(100vw - 24px); padding:10px 14px; border:1px solid #48617c; border-radius:24px; background:#203247; color:#c2ddeb; font-size:14px; box-shadow:0 4px 18px #050c1540; cursor:pointer; }
 body.rail-collapsed .app-shell { padding-bottom:80px; }
 .rail-toggle:focus-visible { outline:2px solid #8edaf2; outline-offset:3px; }
}
body { background:#121a26; overflow-x:clip; }
.app-shell { position:relative; isolation:isolate; }
@media(min-width:1051px) {
 .app-shell { grid-template-columns:200px minmax(0,1fr) 330px; }
 .sidebar { padding-inline:20px; }
}
@media(min-width:801px) and (max-width:1050px) {
 .app-shell { grid-template-columns:180px minmax(0,1fr) 230px; }
}
.sidebar,.content { background:transparent; }
.content { position:relative; z-index:1; }
.right-rail { position:sticky; top:0; align-self:start; height:100dvh; padding:0; background:transparent; isolation:isolate; }
.right-rail::before { content:""; position:absolute; inset:0 0 0 -100px; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at 70% 36%,#36567140 0%,#20364c28 35%,transparent 70%); }
.slogan-card { position:absolute; inset:0 0 355px; height:auto; min-height:0; top:0; padding:30px 24px; overflow:visible; background:none; border:0; border-radius:0; box-shadow:none; }
.slogan-card::before,.slogan-card::after { display:none; }
.card-top { font-size:.75rem; letter-spacing:.12em; color:#8eaabb; }
.slogan-atmosphere { position:absolute; inset:0 0 0 -65px; overflow:hidden; pointer-events:none; mask-image:linear-gradient(90deg,transparent,#000 24%),linear-gradient(180deg,transparent 0%,#000 14%,#000 55%,transparent 93%); mask-composite:intersect; }
.slogan-atmosphere::before,.slogan-atmosphere::after { content:""; position:absolute; border:1px solid #8ecbea28; border-radius:50%; width:430px; height:145px; left:-50px; top:42%; transform:rotate(-19deg); }
.slogan-atmosphere::after { width:520px; height:210px; top:35%; transform:rotate(25deg); opacity:.6; }
.slogan-atmosphere .card-stars { top:15%; right:20%; }
.slogan-atmosphere .card-planet { width:82%; height:auto; aspect-ratio:1; left:18%; top:23%; }
.slogan-card h2 { left:24px; right:15px; bottom:94px; font-size:clamp(26px,2.2vw,34px); line-height:1.22; letter-spacing:-.05em; text-shadow:0 2px 20px #121a26; }
.slogan-tail { display:inline-block; white-space:nowrap; }
.slogan-card p { left:24px; right:12px; bottom:20px; font-size:.875rem; line-height:1.9; }
.rail-companion { position:absolute; z-index:3; left:8px; right:24px; bottom:24px; }
.rail-mascot { position:absolute; z-index:4; right:20px; bottom:calc(100% - 7px); width:94px; height:auto; pointer-events:none; user-select:none; }
.rail-info { position:relative; max-height:calc(100dvh - 140px); overflow:auto; padding:18px; color:#e3edf4; border:1px solid #8eb8d026; border-radius:16px; background:linear-gradient(135deg,#23394be8,#182737ed); box-shadow:0 8px 28px #050c1526; backdrop-filter:blur(12px); scrollbar-width:thin; }
.rail-info-top { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:18px; }
.rail-info-top h2 { margin:0; font-size:.875rem; font-weight:500; }
.rail-reference { color:#9eb4c5; font-size:.75rem; white-space:nowrap; }
.rail-summary-row { display:grid; grid-template-columns:minmax(0,1fr) 60px; gap:10px; align-items:center; }
.rail-moon { min-width:0; display:flex; align-items:center; gap:10px; }
.rail-moon canvas { flex:0 0 58px; width:58px; height:58px; filter:drop-shadow(0 0 12px #8dcfe41c); }
.rail-moon strong { display:block; font-size:.875rem; font-weight:400; }
.rail-moon small,.rail-score small { display:block; font-size:.75rem; line-height:1.6; margin-top:4px; color:#a5bdcf; }
.rail-score { text-align:right; }
.rail-score strong { display:block; font:400 36px/1 Georgia,serif; color:#91def2; font-variant-numeric:tabular-nums; }
.rail-score-window { margin:14px 0 12px; color:#a7c4d5; font-size:.75rem; line-height:1.5; }
.rail-info-meta { color:#c0d1df; font-size:.75rem; line-height:1.7; }
.rail-info-meta span,.rail-info-meta time { display:block; overflow-wrap:anywhere; }
.rail-info-bottom { display:flex; align-items:start; justify-content:space-between; gap:8px; margin-top:8px; color:#88a3b9; font-size:.75rem; }
.rail-info-bottom>a { overflow-wrap:anywhere; }
.rail-info-bottom>a:hover { color:#b5e7f7; }
.rail-method { flex:0 0 auto; }
.rail-method summary { cursor:pointer; color:#b5d9e9; }
.rail-method[open] { position:static; }
.rail-info:has(.rail-method[open]) .rail-info-bottom { display:block; }
.rail-info:has(.rail-method[open]) .rail-method { margin-top:10px; }
.rail-method-copy { font-size:.75rem; line-height:1.8; color:#b9cdda; }
.rail-method-copy p { margin:10px 0 0; }
.rail-info a:focus-visible,.rail-method summary:focus-visible { outline:2px solid #8edaf2; outline-offset:3px; }
@media (min-width:801px) and (max-width:1100px) {
 .slogan-card { padding-left:12px; padding-right:12px; }
 .slogan-card h2,.slogan-card p { left:12px; }
 .rail-companion { left:0; right:12px; }
 .rail-info { padding:12px; }
 .rail-mascot { width:80px; right:14px; bottom:calc(100% - 6px); }
 .rail-summary-row { grid-template-columns:minmax(0,1fr) 48px; gap:6px; }
 .rail-moon { gap:6px; }
 .rail-moon canvas { flex-basis:42px; width:42px; height:42px; }
 .rail-score strong { font-size:30px; }
}
@media (min-width:801px) and (max-height:700px) {
 .slogan-card h2 { bottom:18px; font-size:26px; }
 .slogan-card p { display:none; }
 .slogan-atmosphere .card-planet { top:14%; width:65%; left:25%; }
}
@media (max-width:800px) {
 .app-shell { padding-bottom:285px; }
 .right-rail { position:static; height:0; padding:0; isolation:auto; }
 .right-rail::before { display:none; }
 .slogan-card { position:fixed; inset:0; height:100dvh; min-height:0; margin:0; z-index:-1; opacity:.26; pointer-events:none; }
 .slogan-card .card-top,.slogan-card h2,.slogan-card p { display:none; }
 .slogan-atmosphere { inset:0 0 0 15%; }
 .slogan-atmosphere .card-planet { top:18%; }
 .rail-companion { position:fixed; left:auto; right:12px; bottom:max(12px,env(safe-area-inset-bottom)); width:min(340px,calc(100vw - 24px)); z-index:8; }
 .rail-info { padding:12px 14px; border-radius:14px; }
 .rail-mascot { width:76px; right:18px; bottom:calc(100% - 5px); }
 .rail-info-top { margin-bottom:8px; }
 .rail-summary-row { grid-template-columns:minmax(0,1fr) 70px; }
 .rail-moon canvas { flex-basis:44px; width:44px; height:44px; }
 .rail-score strong { font-size:30px; }
 .rail-score-window { margin:8px 0 5px; }
 .rail-info-meta { display:flex; justify-content:space-between; flex-wrap:wrap; gap:0 8px; }
 .rail-info-bottom { margin-top:5px; }
}