/* v1.7 Living Sky Galaxy — entirely DOM/CSS and GPU-friendly transforms. */
.sky-page{margin:0 0 35px;padding:0;--sky-ink:#2b3539;--sky-glass:rgba(247,238,220,.87);}
.sky-page-head{text-align:center;padding:13px 14px 12px;}
.sky-page-head>span{font-size:10px;letter-spacing:2.4px;color:#7d867e;font-weight:750;}
.sky-page-head h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(48px,11vw,77px);font-weight:400;letter-spacing:4px;line-height:1;margin:9px 0;}
.sky-page-head p{color:#625e55;font-size:12px;line-height:1.4;margin:0;}
.sky-modes{display:flex;position:relative;z-index:2;justify-content:center;margin:8px auto 12px;padding:4px;max-width:370px;border-radius:90px;border:1px solid #ccc2b6;background:#d9d5cbaa;gap:3px}
.sky-modes button{flex:1;border:0;border-radius:35px;padding:10px 7px;font-size:11px;background:transparent;color:#48535a;font-weight:700}.sky-modes button.active{background:#f7ead7;color:#2c3539;box-shadow:0 3px 11px #2b343322}
.sky-viewport{position:relative;margin:0 -5px;height:min(74dvh,720px);min-height:545px;overflow:hidden;border-radius:22px;background:linear-gradient(180deg,#699dbb 0%,#93b5c7 29%,#d6c8b6 62%,#f5dfc4 100%);isolation:isolate;touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:0 17px 33px #53483d27;border:1px solid #c4c9c4;}
.sky-atmosphere{position:absolute;inset:-6%;pointer-events:none;background:radial-gradient(ellipse 42% 15% at 15% 42%,#fff9e3ce 3%,transparent 100%),radial-gradient(ellipse 58% 23% at 76% 53%,#fff6e7b9 4%,transparent 95%),radial-gradient(ellipse 32% 22% at 38% 76%,#fff4d4c0 0%,transparent 90%);}
.sky-cloud{position:absolute;filter:blur(17px);opacity:.70;will-change:transform;transform:translateZ(0);border-radius:45%;background:radial-gradient(ellipse at 50% 50%,#fffdf1df 5%,#fff9e9a2 43%,transparent 73%)}
.sky-cloud-a{width:130%;height:32%;left:-44%;top:29%;transform:rotate(-13deg)}
.sky-cloud-b{width:123%;height:35%;right:-42%;top:50%;transform:rotate(16deg)}
.sky-cloud-c{width:140%;height:21%;left:-20%;bottom:2%;opacity:.58}
.sky-world{width:2800px;height:2800px;position:absolute;left:50%;top:50%;transform-origin:center center;transform:translate(-50%,-50%) scale(.29);will-change:transform;pointer-events:none;}
.sky-world.sky-transition{transition:transform 520ms cubic-bezier(.17,.76,.25,1)}
.sky-region{position:absolute;width:420px;min-height:210px;margin-left:-210px;margin-top:-100px;border:0;border-radius:50%;background:transparent;color:#2d3840;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;pointer-events:auto;text-align:center;cursor:pointer;}
.sky-region-glow{position:absolute;inset:-12%;border-radius:100%;background:radial-gradient(ellipse at center,var(--region-tint) 3%,#fff9e460 30%,transparent 68%);filter:blur(14px);opacity:.85;z-index:-1;}
.sky-region-title{font-family:Georgia,serif;font-weight:400;letter-spacing:1px;font-size:43px;text-shadow:0 2px 15px #f4f0d8b0;line-height:1.1;max-width:340px;}
.sky-region-detail{font-size:17px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;color:#49555cbd;}
.sky-sleeve{width:102px;height:102px;position:absolute;transform:translate(-50%,-50%) rotate(var(--rotate,0deg));padding:0;border:0;background:transparent;cursor:pointer;pointer-events:auto;z-index:4;filter:drop-shadow(0 17px 14px #34465170);transition:filter .28s ease;}
.sky-sleeve:hover,.sky-sleeve:focus-visible{z-index:7;filter:drop-shadow(0 10px 13px #33445390) brightness(1.08)}
.sky-sleeve .cover{width:100%;height:100%;min-width:0;min-height:0;font-size:22px;border-radius:5px;border:3px solid #fffcf2bd;box-shadow:0 0 25px #fff2c2cc;transform:perspective(480px) rotateY(-7deg) rotateX(3deg)}
.sky-sleeve-name{display:block;position:absolute;bottom:-24px;left:50%;transform:translateX(-50%);width:160px;color:#233139;background:#fff4dfd9;border-radius:40px;padding:4px 7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;font-size:10px;font-weight:700;opacity:0;}
.sky-sleeve:hover .sky-sleeve-name,.sky-sleeve:focus-visible .sky-sleeve-name{opacity:1;}
.sky-focus-node{width:96px;height:96px;}
.sky-focus-node.sky-lead{width:148px;height:148px;z-index:10}
.sky-focus-node .cover{border:3px solid #fff4d2;box-shadow:0 0 20px #ffe6ab,0 12px 17px #6a6b6c52}
.sky-focus-halo{position:absolute;width:520px;height:520px;margin:-260px;border-radius:50%;background:radial-gradient(ellipse,#fffce7bd 3%,#fff9e683 31%,transparent 69%);pointer-events:none;}
.sky-connections{position:absolute;inset:0;pointer-events:none;overflow:visible;}.sky-connections path{stroke:#fffef4;stroke-width:3;fill:none;filter:drop-shadow(0 0 6px #fff1bb);opacity:.87;}
.sky-scene-label{position:absolute;top:14px;left:14px;z-index:6;background:#fff8e5ab;border:1px solid #fff9e8a3;border-radius:90px;color:#3b505a;padding:9px 12px;font-size:10px;letter-spacing:1.1px;font-weight:750;max-width:73%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;backdrop-filter:blur(10px);pointer-events:none}
.sky-zoom-controls{position:absolute;right:10px;top:55px;display:grid;gap:4px;z-index:12;}
.sky-zoom-controls button{border:1px solid #fff8e2d4;background:#fff5e6ce;color:#47565b;border-radius:21px;width:41px;height:42px;font-size:24px;box-shadow:0 5px 13px #697c7b34;}
.sky-zoom-legend{position:absolute;top:57px;left:10px;right:64px;z-index:12;display:flex;align-items:center;gap:6px;color:#39545f;font-size:8px;letter-spacing:1px;font-weight:900;opacity:.9}
.sky-zoom-legend input{min-width:0;flex:1;accent-color:#ab805f;background:transparent;padding:0;}
.sky-hint{position:absolute;left:14px;bottom:calc(188px + env(safe-area-inset-bottom));z-index:6;border-radius:20px;background:#fffaeeae;color:#3f5055;padding:6px 10px;font-size:9px;letter-spacing:.2px;pointer-events:none}
.sky-detail{position:absolute;bottom:0;left:0;right:0;z-index:9;background:linear-gradient(180deg,#f4e8d9ed,#ece0d0fa);border:1px solid #fff4e3c7;border-radius:27px 27px 0 0;box-shadow:0 -15px 37px #33353739;backdrop-filter:blur(18px);padding:11px 15px calc(12px + env(safe-area-inset-bottom));color:#3a352e;max-height:48%;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;}
.sky-detail-grip{width:42px;height:5px;border-radius:10px;margin:0 auto 8px;background:#a89c8e;}
.sky-empty-detail{min-height:92px;display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center;gap:9px;}
.sky-empty-detail b{font-size:11px;letter-spacing:1.3px}.sky-empty-detail span{font-size:12px;line-height:1.5;max-width:280px;color:#62574f;}
.sky-detail-head{display:flex;align-items:center;gap:12px;margin:2px 0 10px;}.sky-detail-head>div:last-child{min-width:0;flex:1}
.sky-detail-cover{width:62px!important;height:62px!important;font-size:12px!important;flex:none;}
.sky-kicker{display:block;font-size:9px;letter-spacing:1.1px;font-weight:800;color:#776956;}.sky-detail-head h3{font:normal 25px/1.05 Georgia,serif;overflow-wrap:anywhere;margin:5px 0;}.sky-detail-head p{font-size:11px;margin:0;color:#776b61}
.sky-evidence{border-top:1px solid #cdbfb0;border-bottom:1px solid #d1c6b7;padding:9px 0}.sky-evidence strong{font-size:9px;letter-spacing:1.2px}.sky-evidence p{font-size:11px;line-height:1.45;color:#695e54;margin:4px 0 0;}
.sky-near-head{font:normal 15px Georgia,serif;margin-top:10px;display:flex;justify-content:space-between}.sky-near-head span{font:normal 10px Arial,sans-serif;color:#766b61}
.sky-near-row{display:flex;gap:9px;overflow-x:auto;padding:9px 0 3px;scrollbar-width:none}.sky-near-row button{flex:0 0 67px;border:0;background:none;padding:0;color:#544d44;font-size:10px;text-align:left;}.sky-near-row .cover{width:65px;height:65px;border-radius:8px;font-size:11px}.sky-near-row span{display:block;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sky-relation-note{font-size:10px;line-height:1.5;color:#75695b;}
.sky-detail-buttons{display:flex;gap:9px;margin-top:12px}.sky-detail-buttons button{flex:1;border:0;background:#3c423f;color:#f2e6d7;border-radius:50px;padding:12px 9px;font-size:11px;font-weight:750}.sky-detail-buttons button+button{background:#d9caba;color:#40392f}
.sky-filter-panel{margin-top:17px;background:#eee4d7;border:1px solid #d8c8b5;border-radius:18px;padding:0 14px}.sky-filter-panel summary{font-size:12px;font-weight:800;cursor:pointer;padding:16px 5px;display:flex;justify-content:space-between;align-items:center}.sky-filter-panel summary::marker{content:''}.sky-filter-inner{padding-bottom:15px}.sky-factor-title{font-size:11px;letter-spacing:.3px;font-weight:750;margin:13px 0 6px}.sky-factor{font-size:11px;display:grid;gap:5px;margin-bottom:7px}.sky-factor input{width:100%;accent-color:#a58c70}.sky-disclaimer{padding:12px 7px 5px;color:#6b6055;font-size:11px;line-height:1.5}
@media (min-width:800px){.sky-viewport{height:min(78dvh,850px);margin:0;}.sky-page{max-width:980px;margin:auto}.sky-detail{max-width:540px;left:50%;transform:translateX(-50%);border-radius:24px 24px 0 0}.sky-hint{bottom:14px}.sky-zoom-legend{max-width:350px}}
@media (max-width:365px){.sky-page-head h1{font-size:47px}.sky-detail{padding-left:11px;padding-right:11px}.sky-viewport{min-height:530px}.sky-detail-head h3{font-size:21px}}
@media(prefers-reduced-motion:reduce){.sky-world.sky-transition{transition:none}.sky-cloud{filter:blur(5px)}}

.sky-viewport[data-focused='true'] .sky-hint{display:none;}

/* Keep the album inspector above the persistent navigation on small iPhones. */
.sky-viewport{height:clamp(515px,calc(100dvh - 270px),700px)}
.sky-detail{bottom:74px;border-radius:23px;max-height:45%;padding-bottom:12px;}
.sky-hint{bottom:calc(190px + env(safe-area-inset-bottom))}
.sky-focus-node{width:70px;height:70px}
.sky-focus-node.sky-lead{width:123px;height:123px}
.sky-sleeve .cover-fallback{font-size:11px!important;line-height:1.12!important;letter-spacing:0!important;word-break:normal!important;overflow-wrap:anywhere;max-width:94%;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.sky-region{height:145px;min-height:145px;margin-top:-65px}
.sky-region-title{font-size:38px;line-height:1.0}
.sky-region-detail{font-size:13px}
@media (min-width:800px){.sky-viewport{height:min(78dvh,850px)}.sky-detail{bottom:15px;max-height:43%}}

.sky-viewport{background:linear-gradient(180deg,#80b6d13b,#ffe8ca24),url('./sky-v17.jpg') center / cover no-repeat,#98bfd2}

@keyframes sky-gentle-float{0%,100%{transform:perspective(480px) rotateY(-7deg) rotateX(3deg) translateY(0)}50%{transform:perspective(480px) rotateY(-4deg) rotateX(2deg) translateY(-7px)}}
.sky-sleeve .cover{animation:sky-gentle-float 6.5s ease-in-out infinite;animation-delay:var(--float-delay,0s)}
.sky-viewport[data-focused='true'] .sky-scene-label,.sky-viewport[data-focused='true'] .sky-zoom-legend{display:none}
@media(prefers-reduced-motion:reduce){.sky-sleeve .cover{animation:none}}

/* Final iPhone Galaxy composition: sky routes rather than oversized tiny text clusters. */
.sky-viewport[data-level="universe"] .sky-detail{display:none}
.sky-viewport[data-level="neighborhood"] .sky-detail:has(.sky-empty-detail){display:none}
.sky-viewport[data-level="universe"] .sky-hint,.sky-viewport[data-level="neighborhood"] .sky-hint{bottom:13px}
.sky-viewport[data-level="constellation"] .sky-hint{display:none}
.sky-viewport[data-level="universe"] .sky-region{width:440px;min-height:300px;height:300px;margin-left:-220px;margin-top:-145px;gap:8px;z-index:4}
.sky-region-preview{display:flex;align-items:center;justify-content:center;gap:0;min-height:126px;width:390px;pointer-events:none}
.sky-region-cover{display:block;flex:0 0 123px;height:123px;margin:0 -9px;transform:rotate(-8deg);filter:drop-shadow(0 11px 8px #46566b5d)}
.sky-region-cover:nth-child(2){transform:translateY(-14px) scale(1.12) rotate(3deg);z-index:2}
.sky-region-cover:nth-child(3){transform:translateY(6px) rotate(8deg)}
.sky-region-cover>.cover{width:123px;height:123px;border:3px solid #fff9eac9;border-radius:9px;box-shadow:0 0 27px #fff3d5ba}
.sky-region-cover .cover-fallback{font-size:15px!important;line-height:1.08!important;letter-spacing:0!important;max-width:95%;overflow-wrap:anywhere}
.sky-viewport[data-level="universe"] .sky-region-title{font-size:41px;line-height:1.08;max-width:410px;text-shadow:0 2px 10px #fff5e8,0 0 21px #fff8efd1}
.sky-viewport[data-level="universe"] .sky-region-detail{font-size:16px;color:#4a545b}
.sky-viewport[data-level="universe"] .sky-region-glow{filter:blur(25px);opacity:.72}
.sky-viewport[data-level="neighborhood"] .sky-region{display:none}
.sky-viewport[data-level="constellation"] .sky-region{display:none}
.sky-viewport[data-level="constellation"] .sky-focus-node{width:55px;height:55px}
.sky-viewport[data-level="constellation"] .sky-focus-node.sky-lead{width:108px;height:108px}
.sky-viewport[data-level="constellation"] .sky-sleeve .cover-fallback{font-size:9px!important;line-height:1.04!important;letter-spacing:0!important;padding:3px!important}
.sky-viewport[data-level="constellation"] .sky-focus-node.sky-lead .cover-fallback{font-size:11px!important;padding:6px!important}
.sky-viewport[data-level="neighborhood"] .sky-sleeve .cover-fallback{font-size:11px!important;line-height:1.08!important}
.sky-viewport[data-level="constellation"] .sky-detail{bottom:61px;max-height:42%;border-radius:22px}
@media(max-width:420px){.sky-viewport{height:min(69dvh,665px);min-height:515px}.sky-zoom-controls{top:75px}.sky-zoom-legend{top:80px}}

/* v1.7.1 gesture performance: moving scene uses composited transform only.
   Avoid running cover animations and expensive per-cover shadows during active panning. */
.sky-viewport.sky-dragging .sky-sleeve .cover{animation-play-state:paused!important}
.sky-viewport.sky-dragging .sky-sleeve{filter:none!important;transition:none!important}
.sky-viewport.sky-dragging .sky-region-cover{filter:none!important}
.sky-viewport.sky-dragging .sky-connections path{filter:none!important}

/* v1.7.2: iPhone GPU/compositing safety. Avoid resuming dozens of independent
   cover keyframe animations or expensive CSS filters the instant a finger lifts.
   Floating 3D perspective, borders, cover shadows, and the atmospheric sky remain. */
@media (hover:none) and (pointer:coarse){
 .sky-viewport .sky-sleeve .cover{animation:none!important;transform:perspective(480px) rotateY(-7deg) rotateX(3deg)}
 .sky-viewport .sky-sleeve{filter:none!important;transition:none!important}
 .sky-viewport .sky-region-cover{filter:none!important}
 .sky-viewport .sky-connections path{filter:none!important}
}