:root { color-scheme: dark; --orbit-mint: #b5eedb; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #f2f5f4; min-height: 100svh; background: radial-gradient(ellipse at 72% 48%, #172628 0, #0b1117 50%, #080b10 90%); }
.container { width: calc(100% - 48px); max-width: 1800px; margin: auto; padding: 16px 0; }
.header { display: flex; justify-content: space-between; align-items: center; min-height: 62px; gap: 20px; }
.page-brand { display: flex; align-items: center; gap: 18px; min-width: 0; }
.page-brand img { width: 164px; height: auto; display: block; }
.page-brand-suffix { color: #c0cdc8; font-size: 16px; max-width: 440px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-brand-suffix:empty { display: none; }
.back-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 110px; color: #a7b3b8; border: 1px solid #ffffff18; padding: 12px 18px; border-radius: 24px; text-decoration: none; font-size: 13px; white-space: nowrap; transition: color .2s, border-color .2s; }
.back-btn:hover { color: var(--orbit-mint); border-color: #b5eedb55; }
.orbit-layout { display: grid; grid-template-columns: clamp(180px, 18vw, 260px) minmax(0, 1fr); gap: 24px; align-items: center; }
.orbit-intro { min-width: 0; padding: 20px 4px; }
.orbit-eyebrow { color: var(--orbit-mint); font-size: 10px; letter-spacing: .18em; }
.orbit-intro h1 { font-size: clamp(34px, 4vw, 58px); line-height: 1.2; letter-spacing: -.04em; font-weight: 600; margin: 22px 0 0; overflow-wrap: anywhere; }
.orbit-intro h1 span { color: #8d9f9c; }
.orbit-stat { margin-top: 32px; padding-top: 18px; border-top: 1px solid #ffffff12; color: #bcc9c5; font-size: 12px; }
.orbit-panel { min-width: 0; }
.globe-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 8px 4px; color: #81938f; font-size: 11px; }
.globe-toggle { min-height: 48px; min-width: 104px; font: inherit; font-size: 12px; color: #c6d7d0; background: #ffffff06; border: 1px solid #ffffff18; border-radius: 24px; padding: 12px 18px; cursor: pointer; transition: background .2s; }
.globe-toggle:hover { background: #b5eedb12; }
.globe-stage { position: relative; height: max(340px, calc(100svh - 162px)); overflow: hidden; touch-action: none; cursor: grab; border-radius: 24px; }
.globe-stage:focus-visible { outline: 1px solid #b5eedb55; outline-offset: -2px; }
.orbit-dragging { cursor: grabbing; }
.globe-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.card-grid { position: absolute; inset: 0; }
.card { position: absolute; top: 50%; left: 50%; width: var(--orbit-card-size, 116px); padding: 10px; color: #edf5f1; text-decoration: none; user-select: none; -webkit-user-drag: none; will-change: transform; transition: opacity .14s linear; }
.card-artwork { width: 100%; aspect-ratio: 1; border: 1px solid #ffffff1a; border-radius: 12px; overflow: hidden; background: #1c2d2c; box-shadow: 0 8px 26px #0007; transition: border-color .2s, box-shadow .2s; }
.card-artwork img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.card-placeholder[hidden], .card-artwork img[hidden] { display: none; }
.card-placeholder { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 34px; font-weight: 500; color: #e4f2ec; background: radial-gradient(circle at 25% 20%, #66847b, #223f43 55%, #192332); }
.card-placeholder::after { content: ''; position: absolute; width: 44%; aspect-ratio: 1; border: 1px solid #ffffff25; border-radius: 50%; pointer-events: none; }
.card-title { font-size: 12px; line-height: 1.5; text-align: center; padding: 10px 0 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-shadow: 0 2px 8px #000; }
.card-arrow { display: none; }
.orbit-rear .card-title { visibility: hidden; }
.card:hover .card-artwork, .card:focus-visible .card-artwork { border-color: #b5eedbbb; box-shadow: 0 8px 30px #0008, 0 0 18px #b5eedb22; }
.card:focus-visible { outline: 2px solid var(--orbit-mint); outline-offset: 5px; border-radius: 12px; }
.orbit-dragging .card { pointer-events: none !important; }
.empty { text-align: center; color: #81938f; padding: 100px 20px; font-size: 13px; }
.orbit-list { height: auto; min-height: 350px; touch-action: auto; cursor: default; overflow: visible; padding: 24px 0; }
.orbit-list .card-grid { position: static; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 32px 24px; }
.orbit-list .card { position: static; width: 100%; padding: 10px; will-change: auto; }
.orbit-list .card-title { text-align: left; padding-top: 10px; }
.frontier-covers .orbit-layout { grid-template-columns: minmax(0, 1fr); }
.frontier-covers .orbit-intro, .frontier-covers .page-brand-suffix { display: none; }
.frontier-covers .globe-toolbar { margin: auto; }
.frontier-covers #globeHint { font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.path-navigation { display: flex; flex: 1 1 auto; align-items: center; gap: 16px; min-width: 0; }
.path-navigation #globeHint { min-width: 0; }
.path-navigation .back-btn { flex: 0 0 auto; min-height: 48px; }
.frontier-covers .globe-stage { height: auto; min-height: 0; width: 100%; margin: 0 auto; touch-action: auto; cursor: default; border-radius: 0; }
.frontier-covers .card-grid { position: relative; inset: auto; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.frontier-covers .card-grid::-webkit-scrollbar { display: none; }
.album-page { flex: 0 0 100%; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 12px; scroll-snap-align: start; scroll-snap-stop: always; }
.frontier-covers .card { position: relative; top: auto; left: auto; align-self: start; width: 100%; padding: 0; min-width: 0; min-height: 0; will-change: auto; transition: none; }
.frontier-covers .card-artwork { border-radius: 16px; }
.frontier-covers .card-title { position: absolute; inset: auto 0 0; padding: 26px 8px 8px; border-radius: 0 0 16px 16px; background: linear-gradient(transparent, #071014dd); font-size: 12px; white-space: nowrap; display: block; overflow: hidden; text-overflow: ellipsis; }
.frontier-covers .orbit-dragging .card-grid { scroll-snap-type: none; cursor: grabbing; }
.album-pagination { display: flex; justify-content: center; align-items: center; gap: 16px; min-height: 52px; }
.album-pagination[hidden] { display: none; }
.album-pages { display: flex; align-items: center; overflow-x: auto; max-width: 240px; }
.album-page-dot { flex: 0 0 28px; width: 28px; height: 24px; display: inline-flex; align-items: center; }
.album-page-dot::after { content: ''; display: block; height: 6px; width: 6px; margin: auto; border-radius: 8px; background: #70827b; transition: width .2s, background .2s; }
.album-page-dot[aria-current="true"]::after { width: 18px; background: var(--orbit-mint); }
#albumPageStatus { color: #8d9f9c; font-size: 12px; min-width: 32px; }
@media (max-width: 650px) {
    .container { width: 92%; padding: 16px 0; }
    .header { min-height: 48px; }
    .page-brand img { width: 128px; }
    .page-brand { gap: 10px; }
    .page-brand-suffix { max-width: 100px; font-size: 12px; }
    .back-btn { padding: 9px 12px; font-size: 11px; }
    .orbit-layout { display: block; }
    .orbit-intro { padding: 20px 4px 8px; }
    .orbit-intro h1 { font-size: 30px; margin-top: 10px; }
    .orbit-intro h1 br { display: none; }
    .orbit-stat { margin-top: 12px; padding-top: 0; border-top: 0; }
    .globe-toolbar { padding: 10px 0; gap: 8px; }
    #globeHint { font-size: 9px; }
    .globe-stage { height: max(350px, calc(100svh - 280px)); }
    .orbit-list .card-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 16px; }
    .frontier-covers .globe-stage { width: 100%; }
    .album-page { gap: 12px 10px; padding: 8px 2px; }
    .frontier-covers .card-artwork { border-radius: 12px; }
    .frontier-covers .card-title { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .card { will-change: auto; } * { transition: none !important; } }
html { overscroll-behavior-x: none; }