/* Red/blue light on dark glass. New covers are isolated copies of project art. */
:root {
  --brand-blue: #182bd0;
  --brand-red: #ff604b;
  --brand-paper: #fff6e9;
  --brand-on-red: #18143c;
  --bg: #090b13;
  --ink: var(--brand-paper);
  --muted: #bbc5da;
  --red: #ffb098;
  --line: #414858;
  --surface: #111624;
  --surface-raised: #1a2133;
}
::selection,.skip { background: var(--brand-red); color: var(--brand-on-red); }
:focus-visible { outline-color: var(--brand-paper); }
.header { background: #090c16e8; border-color: #a6b6d51f; backdrop-filter: blur(16px); }
.brand svg { color: var(--brand-red); filter: none; }
.brand small,.nav-count { color: var(--muted); }
.nav>a[aria-current=page]::after { background: var(--brand-red); }
.header-random,.button-outline { background: transparent; border-color: #6e7b93; }
.header-random:hover,.button-outline:hover { background: #222d44; border-color: var(--brand-paper); color: var(--brand-paper); }
.button-primary { background: var(--brand-red); color: var(--brand-on-red); border-color: var(--brand-red); box-shadow: none; }
.button-primary:hover { background: #ff8973; color: var(--brand-on-red); }
.mobile-nav:not([hidden]) { background: #101522; box-shadow: 0 20px 40px #0008; }
.mobile-nav button { color: var(--brand-paper); }
.playground { background: radial-gradient(ellipse at 105% 66%,#68252d85 0%,transparent 54%),radial-gradient(ellipse at 42% -10%,#1c428d8f 0%,transparent 59%),#070a12; border-bottom: none; }
.playground-kicker,.playground-description { color: var(--muted); }
.intro-invite { display: block; }
.playground-kicker>span,.playground h1 em { color: #ff8069; }
.core-fallback { background: conic-gradient(from 30deg,#d9e3f3,#3a5685 12%,#a4c7ff 20%,#111521 35%,#ff684d 50%,#fbe2d5 59%,#775252 66%,#172033 78%,#c1d0e9 90%); box-shadow: inset -12px -20px 24px #0508128c,0 15px 50px #0005; }
.core-fallback::after { background: #111522; box-shadow: 5px -6px 10px #a8c4ff66,inset 5px 6px 14px #040713; }
.core-hit>span { background: #ff604b; color: var(--brand-on-red); border-color: #ffbaa1; }
.planet-shell { background: conic-gradient(from 25deg,#d9e5ff,#536c9b 12%,#253758 29%,#10131c 46%,#887d84 62%,#ead1c5 72%,#b75647 87%,#d9e5ff); box-shadow: 0 14px 32px #0007,0 0 0 1px #c5caff35; }
.planet-shell::after { border-color: #0008; box-shadow: inset 0 0 15px #0004; }
.planet img { filter: saturate(1); }
.planet-label { color: var(--brand-paper); background: #121827e8; border-color: #71809a70; }
.planet-label>span { color: #ffa087; }
.planet-badge { position: absolute; z-index: 2; top: 6px; right: -8px; padding: 5px 9px; border: 1px solid #ffc8b5; border-radius: 3px; background: var(--brand-red); color: var(--brand-on-red); font-size: 11px; font-weight: 650; line-height: 1.3; white-space: nowrap; transform: rotate(8deg) scale(calc(1 / var(--planet-scale,1))); transform-origin: right center; box-shadow: 2px 3px 0 #0005; }
.planet.is-active .planet-shell { box-shadow: 0 18px 40px #0009,0 0 0 1px #ff8069b3,8px 0 26px #ff543421,-9px -4px 24px #327dff26; }
.planet:hover .planet-label,.planet:focus-visible .planet-label { background: var(--brand-red); border-color: var(--brand-red); color: var(--brand-on-red); }
.planet:hover .planet-label>span,.planet:focus-visible .planet-label>span { color: var(--brand-on-red); }
.planet:focus-visible .planet-shell { outline-color: var(--brand-paper); }
.orbit-position,.orbit-focus>p { color: var(--muted); }
.orbit-picker button { color: var(--brand-paper); background: #151c2c; border-color: #71809a70; }
.orbit-pick-dot { background: #8998b1; }
.orbit-picker button[aria-pressed=true] { background: var(--brand-red); border-color: var(--brand-red); color: var(--brand-on-red); }
.orbit-picker button[aria-pressed=true] .orbit-pick-dot { background: var(--brand-on-red); }
.orbit-step { color: var(--brand-paper); border-color: #7c8ca6; }
.orbit-step:hover { background: var(--brand-red); border-color: var(--brand-red); color: var(--brand-on-red); }
.section-note,.work-meta,.detail-type { color: var(--muted); }
.filters button[aria-pressed=true] { background: var(--brand-red); color: var(--brand-on-red); }
.filters button:not([aria-pressed=true]):hover { background: #222c40; }
.work-image { border-color: #69758c80; background: #141a29; box-shadow: 0 12px 30px #0004; }
.work-link:hover .work-image { border-color: var(--brand-red); }
.work-open { background: #111a2c; border-color: #7a8ba6; color: var(--brand-paper); }
.work-link:hover .work-open { background: var(--brand-red); color: var(--brand-on-red); }
.detail-wrap,.about-page { background: none; }
.detail-copy h1 { color: var(--brand-paper); }
.type-dot { background: var(--brand-red); border-color: #ffab94; box-shadow: none; }
.detail-visual { background: linear-gradient(145deg,#2b3b58,#101827 45%,#30212a); border-color: #7d8ba166; box-shadow: 0 25px 55px #0006,-8px -5px 30px #3476ff0e,8px 5px 30px #ff634b0c; }
.zoom-hint { background: #101a2ce8; color: var(--brand-paper); border-color: #8b9eba; }
.detail-gallery,.download-options article { background: #121a29; border-color: #495872; }
.mobile-launch { background: #0d1421; border-color: #52617a; }
.footer { background: #080c14; border-color: #39455c; }
.footer-bottom { border-color: #39455c; }
dialog { background: #151c2a; border-color: #798ba4; box-shadow: 0 35px 100px #000b; }
dialog::backdrop { background: #03060bd4; }
.random-art { background: #1a2335; border-color: #51627d; }
.dialog-close { background: #101a2d; border-color: #8094b1; }
.dialog-close:hover { background: var(--brand-red); color: var(--brand-on-red); }
.image-dialog { background: #080c14; }
.toast { background: var(--brand-paper); color: #16243d; border-color: var(--brand-paper); }
.preview-note { background: #111827e6; color: #b7c3d7; border-color: #54627c; box-shadow: none; }
.noscript { background: #080c14; }
@media(max-width:1000px) {
  .orbit-picker button { background: transparent; border: none; }
  .orbit-picker button[aria-pressed=true] { background: var(--brand-red); }
  .orbit-picker button[aria-pressed=true] .orbit-pick-dot { background: var(--brand-on-red); }
}
@media(max-width:500px) {
  .playground h1 { font-size: clamp(28px,8.2vw,40px); }
  .planet-badge { font-size: 10px; padding: 4px 7px; right: -5px; top: 2px; }
}

/* A bounded exhibition stage: ultrawide screens add breathing room outside,
   never a gulf between the introduction and the objects. */
.header { display: block; padding: 12px max(48px,calc((100% - 1320px) / 2)); border: 0; background: #080b1600; backdrop-filter: none; }
.header-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 22px; height: 100%; padding: 0 18px 0 22px; border: 1px solid #a8bbeb2b; border-radius: 22px; background: linear-gradient(110deg,#2536577a,#101521d9 45%,#42263170); box-shadow: inset 0 1px 0 #d7e3ff14,0 8px 36px #02040a35; backdrop-filter: blur(22px); }
.brand { font-size: 18px; gap: 10px; }
.brand svg { width: 31px; height: 31px; }
.brand small { font-size: 8px; letter-spacing: .12em; }
.nav { gap: 5px; margin: 0; padding: 4px; border-radius: 30px; background: #05091550; border: 1px solid #8ca7d510; }
.nav>a { min-height: 35px; padding: 0 17px; border-radius: 22px; font-size: 12px; color: #b7c3db; }
.nav>a[aria-current=page] { color: #fff2e8; background: #c8d5ff12; box-shadow: inset 0 0 0 1px #aabfea25; }
.nav>a[aria-current=page]::after { display: none; }
.nav>a:hover { color: #fff; background: #bbccff13; }
.nav-count { margin-top: 6px; font-size: 9px; color: #f49182; }
.header-random { min-height: 36px; padding: 0 15px; gap: 15px; border-radius: 30px; border-color: #ff998b55; background: #ff604b10; }
.header-random>span { color: #ff9380; }
.playground { background: radial-gradient(ellipse at 70% 45%,#17254377,transparent 60%),#080b16; }
.planet img { object-position: center; }
.planet-glint { background: linear-gradient(130deg,#ffffff14,transparent 32% 80%,#0002); }
.planet-shell::after { box-shadow: inset 0 0 9px #0002; }
.work-image>img,.work[data-project=today_swing] .work-image>img { object-fit: contain; object-position: center; }
.work-image { background: #101923; }
.random-art img { object-fit: contain; object-position: center; }
@media(min-width:1001px) {
  .playground-intro { left: var(--stage-left, max(48px,calc((100% - 1320px) / 2))); width: clamp(250px,26vw,340px); top: calc((100% - 230px) * .51); transform: translateY(-50%); }
  .playground h1 { font-size: clamp(46px,4.2vw,64px); line-height: 1.22; text-wrap: initial; white-space: nowrap; margin-block: 23px; }
  .playground-description { font-size: 13px; max-width: 310px; }
  .gravity-core,.orbit-focus { left: var(--scene-center,69.5%); }
  .orbit-focus { top: calc(var(--scene-y) + var(--orbit-y-radius) + 160px); bottom: auto; }
  .gravity-core { width: 320px; height: 320px; }
  .planet { width: 176px; }
  .orbit-bottom { left: max(48px,calc((100% - 1320px) / 2)); right: max(48px,calc((100% - 1320px) / 2)); }
}
@media(min-width:1001px) and (max-width:1200px) {
  .planet { width: 145px; }
  .gravity-core { width: 265px; height: 265px; }
}
@media(max-width:1000px) {
  .header { padding: 8px 24px; }
  .header-inner { padding-inline: 16px; border-radius: 20px; gap: 12px; }
  .nav>a { padding-inline: 12px; }
}
@media(max-width:700px) {
  .header { padding: 8px 14px; }
  .header-inner { padding: 0 10px 0 14px; border-radius: 18px; }
  .brand { font-size: 17px; gap: 8px; }
  .brand svg { width: 29px; height: 29px; }
  .brand small { font-size: 7px; }
  .menu-toggle { height: 36px; width: 36px; border: 1px solid #7c8caa5c; border-radius: 50%; }
  .mobile-nav { top: calc(100% + 9px); left: 0; right: 0; border: 1px solid #8999c94a; border-radius: 18px; }
}

/* Open constellation: artwork first, quiet labels, generous space between worlds. */
.playground { background: radial-gradient(ellipse at 72% 45%,#111d3d 0%,#080c1b 54%,#070a13 100%); }
.planet { width: 142px; gap: 10px; }
.planet-shell { padding: 3px; background: linear-gradient(140deg,#aabfe094,#26385560 46%,#f3b7c373); box-shadow: 0 8px 28px #01051166; }
.planet img { inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); }
.planet-glint { inset: 3px; background: linear-gradient(140deg,#c7dfff12,transparent 45%); }
.planet-shell::after { inset: 2px; border-color: #a9c6ff1f; box-shadow: none; }
.planet-badge { top: 1px; right: -7px; bottom: auto; padding: 3px 7px; font-size: 10px; line-height: 1.3; font-weight: 500; border-radius: 12px; transform: none; background: #15203ce8; color: #d5dff6; border-color: #8da6e168; box-shadow: none; }
.planet-label { padding: 0; border: 0; border-radius: 0; background: transparent; color: #dce3f6; font-size: 12px; line-height: 1.5; gap: 0; }
.planet-label>span { display: none; }
.planet.is-active .planet-badge { color: #191630; background: #ff9e8d; border-color: #ffd0c5; }
.planet.is-active .planet-shell { box-shadow: 0 0 0 1px #f4b9b867,0 0 32px #acc3ff1c; }
.planet.is-active .planet-label,.planet:hover .planet-label,.planet:focus-visible .planet-label { color: #ffd8ce; background: transparent; border-color: transparent; }
.gravity-core { width: 185px; height: 185px; opacity: .76; }
.core-hit>span { opacity: 0; font-size: 10px; background: #15203ce8; border-color: #8da6e168; color: #edf2ff; }
.core-hit:hover>span,.core-hit:focus-visible>span { opacity: 1; }
.orbit-focus { top: auto; bottom: 92px; display: flex; align-items: center; justify-content: center; gap: 13px; min-width: 0; white-space: nowrap; }
.orbit-focus>a { margin: 0; }
.orbit-focus strong { font-size: 17px; }
.orbit-focus>p { display: none; }
.orbit-position { font-size: 10px; opacity: .75; }
@media(min-width:1001px) {
  .orbit-space { bottom: 180px; }
  .playground-intro { top: calc((100% - 180px) * .5); }
}
@media(min-width:1001px) and (max-width:1200px) {
  .planet { width: 116px; }
  .planet-label { font-size: 11px; }
  .gravity-core { width: 145px; height: 145px; }
}
@media(max-width:1000px) {
  .orbit-space { top: 174px; bottom: 120px; }
  .planet { width: 112px; gap: 9px; }
  .gravity-core { width: 122px; height: 122px; top: 50%; }
  .orbit-focus { left: 50%; bottom: 76px; }
  .orbit-focus strong { font-size: 16px; }
}
@media(max-width:500px) {
  .orbit-space { top: 168px; bottom: 116px; }
  .planet { width: 84px; gap: 7px; }
  .planet-label { font-size: 11px; }
  .planet-badge { font-size: 9px; padding: 3px 6px; right: -7px; }
  .gravity-core { width: 102px; height: 102px; }
  .orbit-focus { bottom: 69px; }
  .orbit-focus strong { font-size: 15px; }
}
@media(max-width:1000px) and (max-height:700px) {
  .home-page .orbit-space { top: 139px; bottom: 100px; }
  .home-page .planet { width: 72px; gap: 5px; }
  .home-page .planet-label { font-size: 10px; }
  .home-page .planet-badge { font-size: 8px; padding: 2px 5px; }
  .home-page .gravity-core { width: 78px; height: 78px; }
  .home-page .orbit-focus { bottom: 58px; }
  .home-page .orbit-focus strong { font-size: 14px; }
}