/* Adapted from Lens Showcase by DayDreamInAReverie (2026), MIT License.
   Source: sources/lens-showcase-reference.html; full notice: vendor/LICENSE-design-systems.txt.
   Visual-only polish for the Starry Study; existing geometry and responsive layout stay intact. */
.room-tools{background:linear-gradient(145deg,#28263bdc,#141624e8);border-color:#dfc58b55;border-radius:16px;box-shadow:inset 0 1px 0 #fff2,inset 1px 0 0 #fff1,0 10px 26px -14px #000b}
.tool-group{border-radius:12px}
.tool-group>small{color:#d3c5a6;text-shadow:0 1px 8px #0008}
.tool-item>button{border-radius:11px!important;background:linear-gradient(145deg,#ffffff0c,#00000012)!important;box-shadow:inset 0 1px 0 #fff2,0 2px 5px #0003}
.tool-item>button[aria-pressed="true"]{color:#f4dba6;background:linear-gradient(145deg,#9b794747,#d9bd871c)!important;box-shadow:inset 0 1px 0 #ffe9b644,inset 0 0 0 1px #e7c98d88,0 3px 10px #0004}
.tool-item>button:focus-visible{outline-color:#f4d690;outline-offset:3px}
.tool-tip{border-radius:13px;background:linear-gradient(145deg,#29263cf7,#171827fa);box-shadow:inset 0 1px 0 #fff2,0 12px 30px #0009}
.intro-actions button,.link-button{border-radius:13px;box-shadow:inset 0 1px 0 #ffffff40,0 5px 16px -9px #000b}
.intro-actions .primary,.link-button{background:linear-gradient(150deg,#f0dfb5,#d5bb84);border-color:#f2dfb5;color:#242333}
.intro-actions button:not(.primary),.secondary-link{background:linear-gradient(150deg,#ffffff12,#ffffff05);border-color:#d9bd8755;color:#f1eadb}
.intro-actions button:hover,.link-button:hover{box-shadow:inset 0 1px 0 #fff8,0 0 0 1px #f1d79d88,0 7px 18px -9px #000b}
.link-button small{color:inherit}
dialog#panel{border-radius:22px;background:linear-gradient(145deg,#232337,#171825);box-shadow:inset 0 1px 0 #ffffff16,0 28px 90px #000b}
.close-panel{border-radius:50%;box-shadow:inset 0 1px 0 #ffffff30,0 4px 14px #0008}
#overviewZoom{border-radius:16px;background:linear-gradient(145deg,#28263be8,#151725f2);box-shadow:inset 0 1px 0 #ffffff20,0 9px 24px -12px #000b}
#overviewZoom button{border-radius:12px}
#overviewZoom button:focus-visible,#viewSettings button:focus-visible,#websiteExit:focus-visible{outline:2px solid #f4d690;outline-offset:3px}
#viewSettings{border-radius:14px;background:linear-gradient(145deg,#27263aeF,#151725f5);box-shadow:inset 0 1px 0 #ffffff20,0 10px 24px -13px #000b}
#websiteExit{border-radius:12px;background:linear-gradient(145deg,#ffffff13,#ffffff05);box-shadow:inset 0 1px 0 #ffffff20,0 4px 12px -8px #000b}
#websiteExit:hover{background:linear-gradient(145deg,#a78a5538,#ffffff0c);border-color:#e4c78a;box-shadow:inset 0 1px 0 #fff4,0 0 0 1px #e4c78a35}
/* Actual projection controls: no decorative fake toggles. */

@media(max-height:500px) and (orientation:landscape){.intro{background:none!important;border:0!important;padding:0!important;backdrop-filter:none!important;transform:none!important}.intro h1,.intro .eyebrow,.intro-note{display:none!important}.intro-actions{position:fixed!important;top:17px!important;bottom:auto!important;left:50%!important;right:auto!important;width:228px;transform:translateX(-50%);margin:0!important;gap:8px!important}.intro-actions button{flex:1;padding:10px 9px!important;min-height:40px;font-size:11px!important}.intro-actions button span{margin-left:5px!important}footer .location,footer .hint{display:none!important}footer{justify-content:center!important;padding:10px 14px!important}.room-tools{flex-shrink:0}.room-tools button span{white-space:nowrap}.header-right #menu span{display:none}#overviewZoom{bottom:94px}body.exploring .intro{display:none!important}}@media(max-width:600px) and (max-height:500px) and (orientation:landscape){.intro-actions{width:190px}.brand{font-size:16px}.brand small{display:none}.brand img{width:26px;height:26px}}


/* Compact navigation menu: keep every destination and exit visible without scrolling. */
#quick{width:min(440px,calc(100vw - 24px));padding:16px;max-height:none;overflow:visible}
#quickLinks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 10px}
#quickLinks button{min-width:0;min-height:48px;padding:8px 5px;gap:8px;border-bottom:1px solid #ffffff12}
#quickLinks button span{min-width:0}
#quickLinks strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#quickLinks small,.aside-sub{display:none}
#returnRoom,#creditsMobile{display:inline-flex;justify-content:center;align-items:center;width:calc(50% - 5px);min-height:40px;margin:8px 2px 0;padding:7px 5px;border:1px solid #d9bd8744;border-radius:9px;font-size:11px}
#notice{bottom:auto;top:calc(env(safe-area-inset-top) + 88px);z-index:19;max-width:min(92vw,520px);padding:10px 15px;line-height:1.55}
@media(max-height:500px) and (orientation:landscape){#quick{top:64px;right:12px;width:min(540px,calc(100vw - 24px));padding:12px}#quickLinks{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 6px}#quickLinks button{min-height:44px;padding:6px 3px;justify-content:center;text-align:center}#quickLinks b{display:none}#returnRoom,#creditsMobile{min-height:36px;margin-top:5px}#overviewZoom{left:auto;right:12px;top:50%;bottom:auto;transform:translateY(-50%)}.tool-tip{position:fixed;left:auto;right:12px;bottom:84px;transform:none;width:min(170px,calc(100vw - 24px))}#notice{top:64px}}
body:has(#notice:not([hidden])) .tool-tip{visibility:hidden!important}
@media(max-width:440px) and (orientation:portrait){#quick{padding:13px}#quickLinks{gap:0 6px}#quickLinks button{min-height:46px;font-size:12px}#returnRoom,#creditsMobile{font-size:10px}}

/* One anchored control dock for navigation, atmosphere, comfort and overview zoom. */
.room-tools #overviewZoom{position:static;inset:auto;transform:none;display:flex;align-items:center;gap:0;padding:0;background:transparent;border:0;box-shadow:none;backdrop-filter:none}
.room-tools #overviewZoom button{min-width:36px;min-height:40px;border:0;padding:7px 5px;border-radius:8px;font-size:13px}
.tool-group:has(#overviewZoom){transition:opacity .18s ease}
body.exploring .tool-group:has(#overviewZoom),body.detail .tool-group:has(#overviewZoom),body.travelling .tool-group:has(#overviewZoom){display:none}
@media(max-width:760px) and (orientation:portrait){.room-tools{display:grid;grid-template-columns:auto 1fr;gap:0 4px;justify-items:center}.room-tools>.tool-group:nth-child(1){grid-column:1;grid-row:1}.room-tools>.tool-group:nth-child(2){grid-column:2;grid-row:1}.room-tools>.tool-group:nth-child(3){grid-column:1;grid-row:2;border-left:0;border-top:1px solid #ffffff24}.room-tools>.tool-group:nth-child(4){grid-column:2;grid-row:2;border-left:0;border-top:1px solid #ffffff24}.room-tools #overviewZoom button{min-width:32px;min-height:36px;padding:5px 3px;font-size:12px}.room-tools #zoomReset{min-width:43px!important}body:not(.exploring) .intro-note{display:none!important}}
@media(max-height:500px) and (orientation:landscape){.room-tools{flex-wrap:nowrap}.room-tools #overviewZoom button{min-width:34px;min-height:38px}}

/* Mobile overview actions sit below the title, clear of the anchored control dock. */
@media(max-width:760px) and (orientation:portrait){
 .intro-actions{position:relative!important;inset:auto!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important;width:100%;display:flex;margin:14px 0 0!important;gap:8px!important}
 .intro-actions button{flex:1;min-width:0;max-width:none;padding:10px 7px!important;min-height:44px;font-size:14px!important}
 .intro-actions button span{margin-left:5px!important}
 .intro-note{display:none!important}
}
@media(max-height:500px) and (orientation:landscape){
 .room-tools{display:flex!important;flex-wrap:nowrap!important;justify-content:center;width:min(calc(100vw - 16px),540px);gap:0}
 .tool-group{min-width:0;padding:1px 2px!important}
 .room-tools .tool-item>button{min-width:31px!important;min-height:42px!important;padding:4px 2px!important;font-size:13px!important;gap:2px}
 .room-tools button span{font-size:8px!important;white-space:nowrap}
 .tool-group>small{font-size:8px;letter-spacing:.5px}
 .room-tools #overviewZoom button{min-width:28px!important;min-height:36px!important}
}@media(max-height:500px) and (orientation:landscape){
 .panel-paged{padding-top:36px!important}
 .panel-paged>.close-panel{top:3px!important}
 .panel-paged .pager-host{inset:36px 0 0;height:auto}
 .panel-paged .pager-heading{padding:3px 14px 0}
 .panel-paged .pager-heading .panel-kicker{font-size:10px;line-height:1.1}
 .panel-paged .pager-heading h2{font-size:18px;line-height:1.15;margin:0 36px 2px 0}
 .panel-paged .pager-heading .tabs{flex-wrap:nowrap;gap:4px}
 .panel-paged .pager-heading .tabs button,.panel-paged .pager-heading [data-episode]{min-height:28px!important;padding:4px 8px!important;font-size:11px}
 .panel-paged .pager-content{padding:3px 14px}
 .panel-paged .pager-content img,.panel-paged .pager-content video{max-height:24dvh}
 .panel-paged .pager-actions{padding:3px 14px;gap:5px}
 .panel-paged .pager-actions>*{min-height:32px!important}
 .panel-paged .pager-nav{padding:2px 12px 4px}
 .panel-paged .pager-nav button{min-height:32px;min-width:40px}
}

/* Cool translucent glass hover: preserve the study's violet/silver palette and avoid solid gold flashes. */
button:not(:disabled):hover,a[href]:not(.brand):hover{
 border-color:#d9d4f2b8!important;
 background:linear-gradient(135deg,#e9e5ff35,#c9d7ff1d 52%,#ffffff12)!important;
 color:#f5f2ff!important;
 backdrop-filter:blur(14px) saturate(145%);
 box-shadow:inset 0 1px 0 #ffffff60,inset 0 0 0 1px #e8e3ff30,0 0 18px #aebaf12a,0 8px 20px #08091340!important;
}
.hotspot,.intro-actions button:not(.primary),.tool-item>button,#menu,#websiteExit,.link-button{
 backdrop-filter:blur(12px) saturate(130%);
}
.hotspot:hover,.hotspot.is-hover,.hotspot:focus-visible{
 border-color:#eee9ffc9!important;
 background:linear-gradient(140deg,#dcd7f65c,#bfcaed3e 58%,#ffffff22)!important;
 color:#fbf9ff!important;
 box-shadow:inset 0 1px 0 #fff9,inset 0 0 0 1px #e9e4ff44,0 0 0 3px #c7c4f52a,0 7px 20px #08091380!important;
}
.intro-actions .primary:hover{
 border-color:#f5e6c7!important;
 background:linear-gradient(135deg,#f2e8cfde,#dbc99fc9 62%,#cdb786c9)!important;
 color:#262538!important;
 box-shadow:inset 0 1px 0 #fff9,0 0 0 1px #f3e6c566,0 7px 18px #08091355!important;
}
@media(max-width:700px){
 .panel-paged .pager-content img,.panel-paged .pager-content video{max-height:min(34dvh,300px)!important}
}
@media(max-height:500px) and (orientation:landscape){
 .panel-paged .pager-heading .tabs{display:flex!important;flex-wrap:nowrap!important;align-items:center;gap:3px}
 .panel-paged .pager-heading .tabs>*{min-width:0;min-height:28px!important;padding:4px 7px!important;font-size:10px!important;white-space:nowrap}
 .panel-paged .pager-heading .panel-kicker{font-size:9px!important;line-height:1!important;margin:0!important}
 .panel-paged .pager-heading h2{font-size:17px!important;line-height:1.05!important;margin:0 34px 1px 0!important}
 .panel-paged .pager-actions .panel-links{display:flex!important;flex-wrap:nowrap!important;gap:4px!important;width:auto!important;margin:0!important}
 .panel-paged .pager-actions .panel-links>*{min-height:28px!important;padding:3px 7px!important;font-size:10px!important}
 .panel-paged .pager-content img,.panel-paged .pager-content video{max-height:24dvh!important}
}
/* Fit media and copy as real blocks so pagination avoids even small internal scroll areas. */
.panel-paged .pager-content img,.panel-paged .pager-content video{max-height:min(34dvh,300px)!important}
.panel-paged .pager-content p.pager-block,.panel-paged .pager-content li.pager-block{margin-block:5px!important}
@media(max-height:500px) and (orientation:landscape){.panel-paged .pager-content img,.panel-paged .pager-content video{max-height:24dvh!important}}.panel-paged .pager-content img,.panel-paged .pager-content video{max-height:min(30dvh,280px)!important}
@media(max-height:500px) and (orientation:landscape){.panel-paged .pager-content img,.panel-paged .pager-content video{max-height:20dvh!important}.panel-paged .pager-content{padding-top:0!important;padding-bottom:0!important}}
.panel-paged .pager-content{padding-top:4px!important;padding-bottom:4px!important}

@media(max-width:760px) and (orientation:portrait){.room-tools #unstuck{min-width:40px!important;padding-inline:3px!important}}

/* Theater UI: clear program-first hierarchy, compact remote controls, and a glass playback remote. */
.panel-paged .projector-episodes{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:0 0 6px;padding:5px 7px;border:1px solid #d8d4ef2b;border-radius:12px;background:#1a1b2c8c;backdrop-filter:blur(12px)}
.panel-paged .projector-episodes-label{font-size:10px;letter-spacing:.12em;color:#c9c4d8;margin-inline:3px 5px}
.panel-paged .projector-episodes [data-episode]{min-height:34px!important;padding:6px 10px!important;font-size:11px!important;border-radius:10px;background:#ffffff09}
.panel-paged .projector-episodes [data-episode][aria-pressed="true"]{border-color:#c8c3e0a8!important;background:#c5c0e324!important;color:#f2efff!important}
.panel-paged .pager-heading .projector-status{margin:2px 40px 0 0!important;font-size:10px!important;line-height:1.3!important;color:#c9c6d8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.panel-paged .pager-actions .projector-power,.panel-paged .pager-actions .projector-audio,.panel-paged .pager-actions .projector-watch{min-height:36px!important;padding:7px 10px!important;font-size:11px!important;border-radius:10px}
.panel-paged .pager-actions .projector-watch{border-color:#c9c2df66!important;background:#d4cee91a!important;color:#f0edfa!important}
@media(max-height:500px) and (orientation:landscape){.panel-paged{padding-top:40px!important}.panel-paged .pager-host{inset:40px 0 0!important}.panel-paged .pager-heading{padding:3px 14px 2px!important}.panel-paged .pager-content{padding:0 14px!important}.panel-paged .pager-actions{padding:2px 14px!important;gap:4px!important}.panel-paged .pager-actions .projector-power,.panel-paged .pager-actions .projector-audio,.panel-paged .pager-actions .projector-watch{min-height:27px!important;padding:3px 7px!important;font-size:10px!important}.panel-paged .pager-nav{padding:1px 10px 3px!important}.panel-paged .pager-nav button{min-height:28px!important}.panel-paged .projector-episodes{gap:4px;margin-bottom:2px;padding:2px 4px}.panel-paged .projector-episodes [data-episode]{min-height:25px!important;padding:3px 6px!important;font-size:9px!important}.panel-paged .pager-heading .projector-status{font-size:9px!important;margin-top:1px!important}.panel-paged .pager-content video{max-height:16dvh!important}.panel-paged .pager-content .steps{margin-block:3px!important}.panel-paged .pager-content .steps>*{margin-block:3px!important}.panel-paged .pager-content p{margin-block:2px!important}.panel-paged .pager-actions .panel-links>*{min-height:25px!important;padding:2px 6px!important;font-size:9px!important}}
@media(max-width:700px) and (orientation:portrait){.panel-paged .pager-actions .projector-power,.panel-paged .pager-actions .projector-audio,.panel-paged .pager-actions .projector-watch{min-height:36px!important;padding:7px 9px!important;font-size:10px!important}.panel-paged .pager-actions .panel-links>*{min-height:34px!important;font-size:10px!important}}

/* Physical shelf books open a matching chapter and return to the shelf. */
.book{transition:transform .22s ease,filter .22s ease,box-shadow .22s ease;transform-origin:center bottom}.book:hover,.book:focus-visible{transform:translateY(-5px) rotate(-1deg);filter:brightness(1.12);box-shadow:0 12px 24px #0005,0 0 0 1px #e5ca91aa}.book:active{transform:translateY(-2px) scale(.99)}#backBooks{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 14px;border:1px solid #dfc28b77;border-radius:10px;background:linear-gradient(145deg,#ffffff12,#ffffff04);color:#efdfbf}.reading{box-shadow:0 12px 30px #0a0b16aa,inset 0 1px 0 #fff8}.reading h3{color:#473c4a}.reading p{line-height:2.05}.reading .small-note{line-height:1.7}@media(max-width:600px){#backBooks{width:100%;justify-content:center}.reading{padding:19px 17px;margin-top:14px}.reading h3{font-size:21px}.reading p{font-size:13px;line-height:1.9}}@media(prefers-reduced-motion:reduce){.book{transition:none!important}.book:hover,.book:focus-visible,.book:active{transform:none}}

/* Portrait control dock is centered as one unit; labels stay away from scene hotspots. */
@media(max-width:760px) and (orientation:portrait){footer{justify-content:center!important}.location,footer .hint{display:none!important}.room-tools{margin-inline:auto!important}}
/* A compact local music player paired with the small celestial music box. */
.music-intro{margin:7px 0 12px!important;color:#d8d3e4;font-size:13px;line-height:1.65}
.music-drop{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 13px;border:1px solid #d4c8ed4d;border-radius:14px;background:linear-gradient(125deg,#cfc6f21b,#ffffff08 55%,#d9bd8710);box-shadow:inset 0 1px 0 #fff2;cursor:pointer;transition:border-color .18s,background .18s,transform .18s}
.music-drop:hover,.music-drop.drag-over{border-color:#d8caefb8;background:linear-gradient(125deg,#d9d1f635,#ffffff10 60%,#e2c98d22);transform:translateY(-1px)}
.music-drop input{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.music-drop:focus-within{outline:2px solid #d9c8ed;outline-offset:3px}
.music-drop-icon{display:grid;place-items:center;width:38px;height:38px;border:1px solid #d8c8ed66;border-radius:12px;background:#cfc4ef1a;color:#f0d99f;font-size:22px}
.music-drop>span:nth-of-type(2){display:grid;gap:3px;min-width:0;flex:1}.music-drop strong{font-size:13px;color:#f1ecfb}.music-drop small{font-size:10px;line-height:1.4;color:#c1bbcf}.music-drop>b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#dfd5f11b;color:#e6d5a6;font-size:19px;font-weight:400}
.music-player{margin-top:11px;padding:12px;border:1px solid #d2c5e23d;border-radius:15px;background:linear-gradient(140deg,#252438c9,#151827e8);box-shadow:inset 0 1px 0 #fff2,0 8px 24px #08091335}
.music-now{display:flex;align-items:center;gap:10px;min-width:0}.music-disc{display:grid;place-items:center;flex:0 0 39px;height:39px;border:1px solid #ddc78b6b;border-radius:50%;background:radial-gradient(circle,#4b4566 0 30%,#252339 32% 56%,#c9b07866 58% 60%,#232337 62%);color:#f0d99f;font-size:16px;box-shadow:0 0 15px #b5a0df20}.music-now>span:nth-child(2){display:grid;gap:3px;min-width:0;flex:1}.music-now>span:nth-child(2) small{font-size:8px;letter-spacing:.16em;color:#aaa5bf}.music-now>span:nth-child(2) strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:#f1edf8}.music-state{padding:4px 7px;border:1px solid #d4c9e52e;border-radius:20px;color:#d2c9e4;font-size:9px;white-space:nowrap}.music-lid{min-height:29px!important;padding:4px 8px!important;border-radius:9px!important;font-size:9px!important;white-space:nowrap}
.music-seek{display:grid;grid-template-columns:34px 1fr 34px;align-items:center;gap:7px;margin-top:8px;color:#aaa6b8;font-size:9px;font-variant-numeric:tabular-nums}.music-seek input,.music-volume input{width:100%;height:16px;accent-color:#cfbbeb;cursor:pointer}.music-transport{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:7px}.music-transport>button{display:grid;place-items:center;min-width:35px!important;min-height:34px!important;padding:5px!important;border:1px solid #cec1e344!important;border-radius:10px!important;background:#ffffff08;color:#e5deef;font-size:15px}.music-transport>button:disabled{opacity:.35}.music-transport .music-play{min-width:43px!important;min-height:39px!important;border-color:#dfc98b99!important;background:linear-gradient(140deg,#d9c89c35,#d2c1e423)!important;color:#f4dda2;font-size:17px}.music-volume{display:flex;align-items:center;gap:5px;width:92px;margin-left:auto;color:#d8c997;font-size:13px}.music-volume input{width:67px}
.music-list{display:grid;gap:4px;max-height:112px;overflow:auto;margin-top:8px;padding-right:2px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#8f84a8 transparent}.music-track{display:flex;align-items:center;gap:9px;width:100%;min-height:34px!important;padding:5px 8px!important;text-align:left;border:1px solid #d1c8e51c!important;border-radius:9px!important;background:#ffffff05!important;color:#d9d4e3}.music-track>span{color:#cab987;font-size:9px;font-variant-numeric:tabular-nums}.music-track strong{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:500}.music-track small{color:#aaa3bb;font-size:9px}.music-track.active{border-color:#d9c68d66!important;background:#d5c39715!important}.music-empty{display:block;padding:8px 3px;text-align:center;color:#aaa4b7;font-size:10px}.music-local-note{margin:8px 0 0!important;font-size:10px!important;line-height:1.45}
@media(max-width:700px){.music-intro{font-size:12px;margin:4px 0 9px!important}.music-drop{min-height:56px;padding:8px 10px}.music-drop small{font-size:9px}.music-player{margin-top:8px;padding:9px}.music-list{max-height:88px}.music-volume{width:78px}.music-volume input{width:54px}}
@media(prefers-reduced-motion:reduce){.music-drop{transition:none!important;transform:none!important}}

/* Calm camera navigation: keep the capture hint clear of the bottom control dock. */
#captureMouse{top:76px;bottom:auto;left:50%;transform:translateX(-50%);z-index:10;max-width:calc(100vw - 24px);white-space:normal;text-align:center}
@media(max-height:430px){#captureMouse{top:62px}}
/* Interaction panels share the slower 0.8 second transition cadence. */
dialog.closing{animation-duration:.8s}

/* A compact, readable projector remote sits above the room controls and stays out of the screen center. */

.music-now>span:nth-child(2) .music-credit{font-size:9px;letter-spacing:0;color:#b9b2ca;line-height:1.45}

/* Keep the preset player readable without scrolling on short landscape screens. */
@media(max-height:500px){dialog:has(.music-player){max-height:calc(100dvh - 18px)}dialog:has(.music-player) .panel-inner{padding:18px 22px 14px}.music-intro{display:none}.music-player{margin-top:5px;padding:7px}.music-list{max-height:48px}.music-local-note{display:none}}

/* Projector controls are grouped by action; the live remote stays above the control dock. */
.projector-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 0 4px;align-items:stretch}
.projector-controls button{display:flex;align-items:center;justify-content:center;min-width:0;min-height:46px;padding:8px 10px;font-size:12px;line-height:1.35;text-align:center;white-space:normal;border:1px solid #d2c9e348;border-radius:11px;background:linear-gradient(140deg,#ffffff0d,#ffffff05);color:#eeeafa;box-shadow:inset 0 1px 0 #ffffff19;touch-action:manipulation}
.projector-controls button[aria-pressed="true"]{border-color:#d8c99c9c;background:linear-gradient(140deg,#d9c58c2b,#c9c2e21c);color:#f3dfaf}
.projector-controls #projectorPower{grid-column:1;min-width:0}
.projector-controls [data-episode="0"]{grid-column:2}
.projector-controls [data-episode="1"]{grid-column:3}
.projector-controls #projectorMute{grid-column:1}
.projector-controls #projectorWatch{grid-column:2/4;border-color:#d8c99c85;background:linear-gradient(140deg,#d9c58c30,#c9c2e21c);color:#f4e7c9}
.projector-controls video{grid-column:1/-1;display:block;width:100%;max-height:40dvh;object-fit:contain;background:#090b14;border:1px solid #d9bd8733;border-radius:12px}
.projector-controls p{grid-column:1/-1;font-size:12px;line-height:1.5;margin:0;color:#c9c4d8;overflow-wrap:anywhere}
#projectorRemote{position:fixed;z-index:9;right:calc(18px + env(safe-area-inset-right));bottom:calc(112px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:10px;min-height:50px;padding:8px 13px;border:1px solid #ded6ee78;border-radius:15px;background:linear-gradient(140deg,#26263be8,#171a2be8);color:#f3efff;backdrop-filter:blur(18px) saturate(145%);box-shadow:inset 0 1px 0 #ffffff30,0 8px 26px #05061070;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;touch-action:manipulation}
#projectorRemote:hover{transform:translateY(-2px);border-color:#e3cf9caa;background:linear-gradient(140deg,#343249ed,#202237ed);box-shadow:inset 0 1px 0 #ffffff44,0 10px 28px #05061085}
#projectorRemote:focus-visible{outline:2px solid #e5d5a5;outline-offset:3px}
#projectorRemote .remote-mark{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border:1px solid #e5d5a573;border-radius:10px;color:#edd59b;font-size:15px}
#projectorRemote .remote-copy{display:grid;gap:3px;text-align:left}
#projectorRemote .remote-copy strong{font-size:11px;font-weight:600;letter-spacing:.04em}
#projectorRemote .remote-copy small{font-size:9px;color:#c4bfd4}
#projectorRemote .remote-live{flex:0 0 7px;width:7px;height:7px;margin-left:2px;border-radius:50%;background:#9ed6b1;box-shadow:0 0 10px #8fd7aa88}
#projectorRemote[hidden]{display:none!important}
@media(max-width:760px) and (orientation:portrait){
 .projector-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:10px}
 .projector-controls button{min-height:46px;padding:7px 8px;font-size:11px}
 .projector-controls #projectorPower{grid-column:1}
 .projector-controls [data-episode="0"]{grid-column:2}
 .projector-controls [data-episode="1"]{grid-column:1}
 .projector-controls #projectorMute{grid-column:2}
 .projector-controls #projectorWatch{grid-column:1/-1}
 .projector-controls video{max-height:34dvh}
 #projectorRemote{left:50%;right:auto;bottom:calc(224px + env(safe-area-inset-bottom));transform:translateX(-50%);min-height:48px;max-width:calc(100vw - 28px);padding:7px 12px}
 #projectorRemote:hover{transform:translate(-50%,-2px)}
}
@media(max-height:500px) and (orientation:landscape){
 .projector-controls{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:6px 0 2px}
 .projector-controls button{min-height:40px;padding:5px 6px;font-size:10px}
 .projector-controls #projectorPower,.projector-controls [data-episode="0"],.projector-controls [data-episode="1"],.projector-controls #projectorMute,.projector-controls #projectorWatch{grid-column:auto}
 .projector-controls video{max-height:23dvh}
 .projector-controls p{font-size:10px}
 #projectorRemote{right:calc(12px + env(safe-area-inset-right));bottom:calc(90px + env(safe-area-inset-bottom));min-height:44px;padding:6px 9px;gap:7px}
 #projectorRemote .remote-mark{flex-basis:26px;width:26px;height:26px}
}
@media(max-width:430px) and (orientation:portrait){
 .projector-controls{gap:6px}
 .projector-controls button{font-size:10px;padding-inline:5px}
 #projectorRemote{bottom:calc(230px + env(safe-area-inset-bottom));gap:7px;min-height:46px}
 #projectorRemote .remote-mark{flex-basis:26px;width:26px;height:26px}
}
@media(prefers-reduced-motion:reduce){#projectorRemote{transition:none!important}}

/* Stable media panels: CSS adapts without detaching a playing video on resize. */
.projector-decoder{position:fixed;left:50%;top:50%;width:min(72vw,640px);height:min(42vh,360px);height:min(42dvh,360px);transform:translate(-50%,-50%);overflow:hidden;opacity:.001;pointer-events:none;z-index:2}
.projector-decoder video{display:block;width:100%;height:100%;object-fit:contain}
#panel[data-phase="closing"]{pointer-events:none}
#panel.panel-projector{box-sizing:border-box;inset:0!important;margin:auto!important;width:min(760px,calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)))!important;height:fit-content!important;max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;padding:42px 0 0!important;overflow:hidden!important;transform:none}
#panel.panel-projector #panelBody{box-sizing:border-box;max-height:calc(100dvh - 72px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;overflow:auto!important;scrollbar-gutter:auto}
.panel-projector .panel-inner{padding:8px 18px 14px!important}
.panel-projector .panel-kicker{font-size:10px;letter-spacing:.15em;margin:0 42px 3px 0}
.panel-projector h2{font-size:clamp(20px,4vw,27px);margin:0 42px 6px 0}
.panel-projector .panel-inner>p{font-size:12px;margin:4px 0 8px;line-height:1.5}
.panel-projector .projector-controls{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:7px 0}
.panel-projector .projector-controls button{grid-column:auto!important;min-height:44px}
.panel-projector .projector-controls video{grid-column:1/-1;max-height:min(30dvh,240px);object-fit:contain;width:100%;aspect-ratio:auto}
.panel-projector .panel-links{margin-top:8px}
.panel-projector .panel-links>a{min-height:42px;padding:8px 12px;font-size:12px}
#projectorRemote{transition:border-color .2s,box-shadow .2s!important;max-width:calc(100vw - 28px);max-height:calc(100dvh - 24px);overflow:hidden}
#projectorRemote:hover{transform:none}
@media(max-width:760px) and (orientation:portrait){#projectorRemote:hover{transform:translateX(-50%)}.panel-projector .projector-controls video{max-height:27dvh}}
.music-transport{flex-wrap:wrap}.music-volume[hidden]{display:none!important}.music-volume-note{flex-basis:100%;text-align:right;font-size:11px;color:#c9bfd7}.music-transport>button{min-height:44px!important;min-width:44px!important}.music-seek input,.music-volume input{min-height:32px;touch-action:pan-x}.music-state{white-space:normal;max-width:110px;line-height:1.4}
@media(max-width:430px){.music-now{flex-wrap:wrap}.music-state{margin-left:49px}.music-lid{margin-left:auto}}
@media(max-height:500px) and (orientation:landscape){
 #panel.panel-projector{width:min(840px,calc(100vw - 24px))!important;padding-top:36px!important}
 #panel.panel-projector #panelBody{max-height:calc(100dvh - 62px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important}
 .panel-projector .panel-inner{padding:0 14px 8px!important;display:grid;grid-template-columns:minmax(0,1fr) minmax(130px,.42fr);gap:3px 12px}
 .panel-projector .panel-kicker,.panel-projector h2,.panel-projector .panel-inner>p{grid-column:1/-1}
 .panel-projector .panel-inner>p{display:none}.panel-projector h2{font-size:20px;margin-bottom:0}
 .panel-projector #projectorControls{grid-column:1/-1}.panel-projector .projector-controls{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(120px,1.3fr);gap:5px;margin:3px 0}
 .panel-projector .projector-controls button{min-height:40px;padding:5px;font-size:11px}
 .panel-projector .projector-controls video{grid-column:4;grid-row:1/3;max-height:130px;height:100%;width:100%}
 .panel-projector .projector-controls p{font-size:10px;line-height:1.35}
 .panel-projector .panel-links{grid-column:1/-1;margin:0}.panel-projector .panel-links>a{min-height:36px;padding:5px 10px}
}

@media(max-height:650px) and (orientation:portrait){.panel-projector .panel-inner>p{display:none}.panel-projector .projector-controls video{max-height:20dvh}.panel-projector .projector-controls{gap:5px}.panel-projector .projector-controls p{font-size:11px}.panel-projector h2{font-size:21px}}

.music-now{display:grid;grid-template-columns:39px minmax(0,1fr) auto;gap:7px 9px}.music-now>.music-disc{grid-column:1;grid-row:1/3}.music-now>span:nth-child(2){grid-column:2/-1}.music-now>span:nth-child(2) strong{font-size:14px}.music-now>span:nth-child(2) .music-credit{font-size:11px;line-height:1.5}.music-now>.music-state{grid-column:2;justify-self:start;margin:0;max-width:none}.music-now>.music-lid{grid-column:3;grid-row:2;margin:0}.panel-paged .pager-nav[hidden]{display:none!important}

#panel.panel-music{box-sizing:border-box;inset:0!important;margin:auto!important;width:min(720px,calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)))!important;height:fit-content!important;max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;padding:42px 0 0!important;overflow:hidden!important;transform:none}
#panel.panel-music #panelBody{max-height:calc(100dvh - 72px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;overflow:auto!important;scrollbar-gutter:auto}
.panel-music .panel-inner{padding:4px 16px 12px!important}.panel-music .panel-kicker{font-size:10px;letter-spacing:.15em;margin:0 40px 3px 0}.panel-music h2{font-size:24px;margin:0 40px 8px 0}.panel-music .music-list{max-height:84px}.panel-music .music-intro{font-size:12px;margin:0 0 8px!important;line-height:1.5}
@media(max-height:500px) and (orientation:landscape){#panel.panel-music{padding-top:34px!important}#panel.panel-music #panelBody{max-height:calc(100dvh - 60px - env(safe-area-inset-bottom))!important}.panel-music .panel-inner{padding:0 14px 8px!important}.panel-music h2{font-size:20px;margin-bottom:4px}.panel-music .panel-kicker{display:none}.panel-music .music-player{margin:0}.panel-music .music-now{grid-template-columns:39px minmax(0,1fr) auto auto}.panel-music .music-now>span:nth-child(2){grid-column:2;grid-row:1/3}.panel-music .music-now>.music-state{grid-column:3;grid-row:1/3}.panel-music .music-now>.music-lid{grid-column:4;grid-row:1/3}.panel-music .music-volume-note{flex-basis:auto}.panel-music .music-list{max-height:42px}.panel-music .music-transport{margin-top:3px}}


/* Compact settings disclosure: common navigation stays in the dock; secondary controls open above it. */
.room-tools{align-items:center;gap:5px;background:linear-gradient(145deg,#25243bdc,#121421eb);border-color:#c8c8e833}
.room-tools .tool-group>small{color:#c7c8dc}
.room-tools .primary-tools{border:0;padding:1px 4px}
.primary-tools .tool-row{align-items:center}
#controlSettings{position:relative;align-self:stretch;display:flex;align-items:center;border-left:1px solid #d6d5ee2b;padding-left:5px}
#controlSettings>summary{list-style:none;display:flex;min-width:58px;min-height:42px;align-items:center;justify-content:center;gap:5px;padding:7px 10px;border:1px solid #d2d2e244;border-radius:11px;background:linear-gradient(145deg,#ffffff12,#ffffff04);color:#e4e3f2;font-size:11px;cursor:pointer;user-select:none}
#controlSettings>summary::-webkit-details-marker{display:none}
#controlSettings>summary::marker{content:""}
#controlSettings>summary:hover,#controlSettings[open]>summary{border-color:#d8d8f0a8;background:linear-gradient(145deg,#c6c4f02b,#ffffff08)}
#controlSettings>summary:focus-visible{outline:2px solid #c7c9f2;outline-offset:3px}
.settings-popover{position:absolute;right:0;bottom:calc(100% + 12px);z-index:24;display:grid;grid-template-columns:1fr 1fr;gap:8px;width:min(390px,calc(100vw - 24px));max-height:min(64dvh,480px);overflow:auto;overscroll-behavior:contain;padding:13px;border:1px solid #c8c7e45c;border-radius:16px;background:linear-gradient(145deg,#29283ff5,#151624fa);box-shadow:inset 0 1px 0 #ffffff22,0 18px 48px #050610b8;backdrop-filter:blur(20px) saturate(130%)}
.settings-popover .tool-group{min-width:0;padding:7px;border:1px solid #ffffff15;border-radius:11px;background:#10121c55}
.settings-popover .tool-group>small{display:block;margin:0 0 5px;color:#bfc0d5;font-size:9px;letter-spacing:1px}
.settings-popover .tool-row{display:flex;flex-wrap:wrap;gap:3px}
.settings-popover .tool-item>button{min-width:56px;min-height:40px;padding:6px 7px!important;font-size:12px}
.settings-popover .tool-item>button span{display:inline!important;font-size:10px}
.settings-popover .tool-tip{z-index:26;max-width:min(230px,calc(100vw - 32px))}
.settings-popover #overviewZoom{justify-content:flex-start;gap:3px}
.settings-popover #overviewZoom button{min-width:38px;min-height:38px;background:#ffffff0a;color:#e2e3f2}
#viewSettings{position:static;z-index:auto;grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;background:#10121c70;border-color:#ffffff20;color:#d4d4e5}
#viewSettings input{accent-color:#aaaeea}
#viewSettings button{border-radius:9px;background:#ffffff0b}
#overviewZoom{accent-color:#aaaeea}
.tool-item>button[aria-pressed="true"]{color:#e5e3fa;background:linear-gradient(145deg,#aaa7e737,#d7d8f018)!important;box-shadow:inset 0 0 0 1px #c3c2e066,0 3px 10px #0004}
.tool-item>button:focus-visible,#overviewZoom button:focus-visible,#viewSettings button:focus-visible,#websiteExit:focus-visible{outline-color:#c6c8f0}
body.is-watching .intro,body.is-watching .intro-note,body.is-watching .hint,body.is-watching footer,body.is-watching #viewSettings,body.is-watching #controlSettings,body.is-watching #labels,body.is-watching #crosshair,body.is-watching #captureMouse{display:none!important}
body.is-watching #projectorRemote,body.is-watching #exitWatching{display:flex!important}
#exitWatching{position:fixed;right:max(16px,env(safe-area-inset-right));top:calc(env(safe-area-inset-top) + 82px);z-index:18;display:none;align-items:center;justify-content:center;min-height:42px;padding:9px 14px;border:1px solid #d0cee8a3;border-radius:12px;background:#211f36e8;color:#f0effa;box-shadow:0 8px 24px #05061080;backdrop-filter:blur(15px)}
@media(max-width:760px) and (orientation:portrait){.room-tools{display:flex!important;flex-wrap:nowrap;max-width:calc(100vw - 24px);gap:3px;padding:4px}.room-tools .tool-group>small{display:none}.room-tools .primary-tools .tool-item>button{min-width:47px;min-height:42px;padding:7px 6px!important}.room-tools .primary-tools .tool-item>button span{display:inline!important;font-size:10px!important}.room-tools #unstuck{min-width:45px!important}.settings-popover{right:-2px;grid-template-columns:1fr 1fr;width:min(360px,calc(100vw - 20px));max-height:min(58dvh,420px);padding:10px}.settings-popover #viewSettings{display:flex!important}#controlSettings>summary{min-width:53px;padding:6px 8px}}
@media(max-height:500px) and (orientation:landscape){.settings-popover{max-height:68dvh;width:min(430px,calc(100vw - 20px));grid-template-columns:repeat(2,minmax(0,1fr));padding:9px}.settings-popover .tool-group{padding:4px}.settings-popover .tool-item>button{min-height:34px!important}.room-tools .primary-tools .tool-item>button{min-height:38px!important}}

/* Viewport-rooted settings panel: portal out of footer transforms on compact screens. */
.settings-popover{position:fixed;inset:auto max(10px,env(safe-area-inset-right)) calc(70px + env(safe-area-inset-bottom)) auto;width:min(360px,calc(100vw - 20px));max-height:min(64dvh,440px);grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:10px}
.settings-popover .tool-group{padding:5px}
.settings-popover .tool-row{gap:2px}
.settings-popover .tool-item>button{min-width:50px;min-height:36px;padding:5px!important}
.settings-popover .tool-item>button span{font-size:9px}
.settings-popover #overviewZoom button{min-width:34px;min-height:34px;padding:4px}
.settings-popover #viewSettings{gap:5px;padding:7px;font-size:10px}
@media(max-width:380px) and (orientation:portrait){
 .settings-popover{right:max(10px,env(safe-area-inset-right));bottom:calc(66px + env(safe-area-inset-bottom));width:calc(100vw - 20px);max-height:min(64dvh,390px);gap:5px;padding:8px;border-radius:13px}
 .settings-popover .tool-group{padding:4px}
 .settings-popover .tool-group>small{margin-bottom:3px;font-size:8px}
 .settings-popover .tool-row{gap:1px}
 .settings-popover .tool-item>button{min-width:0;min-height:34px;padding:4px 5px!important;font-size:11px}
 .settings-popover .tool-item>button span{font-size:9px}
 .settings-popover #overviewZoom{gap:1px}
 .settings-popover #overviewZoom button{min-width:30px;min-height:32px;padding:3px;font-size:11px}
 .settings-popover #zoomReset{min-width:38px!important}
 .settings-popover #viewSettings{display:grid!important;grid-template-columns:max-content minmax(50px,1fr) max-content;align-items:center;justify-content:stretch;gap:4px 6px;padding:6px;font-size:9px}
 .settings-popover #viewSettings input{width:100%;min-width:50px}
 .settings-popover #viewSettings button{min-height:30px;padding:4px 6px;font-size:9px}
}
@media(max-height:620px) and (orientation:portrait){.settings-popover{max-height:min(60dvh,380px)}}

/* Settings are portaled out of the old dock; reset legacy scene-overlay positioning. */
.settings-popover #overviewZoom{position:static!important;inset:auto!important;transform:none!important;display:flex;align-items:center;padding:0;background:transparent;border:0;box-shadow:none;backdrop-filter:none}
.settings-popover .zoom-tools{grid-column:1/-1}
.settings-popover #viewSettings{inset:auto!important;transform:none!important;margin:0;width:auto!important;max-width:none!important}
.settings-popover[hidden]{display:none!important}
body.is-watching .settings-popover{display:none!important}

#nearbyAction{position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:12;min-height:44px;max-width:calc(100vw - 32px);padding:10px 16px;border:1px solid #ccc8e56b;border-radius:14px;background:#222039c9;color:#eeedf8;backdrop-filter:blur(12px);font-size:13px;white-space:nowrap}
#nearbyAction[hidden],body.is-watching #nearbyAction{display:none!important}
@media(max-height:500px) and (orientation:landscape){#nearbyAction{bottom:72px;font-size:11px}}

.pager-heading #deskLamp{margin-top:6px;min-height:38px;padding:7px 12px;font-size:12px;border-color:#c7c3df55;background:#b8b1d51a;color:#e5e1f3}

.projector-controls #projectorVolumeControl{grid-column:1/-1;display:flex;align-items:center;gap:10px;min-height:38px;padding:2px 4px;color:#d9d4e6;font-size:12px}
.projector-controls #projectorVolumeControl[hidden]{display:none!important}
#projectorVolume{min-width:70px;max-width:220px;flex:1;accent-color:#bcb5df;min-height:30px;touch-action:pan-x}
@media(max-height:500px) and (orientation:landscape){.projector-controls #projectorVolumeControl{grid-column:1/4;min-height:28px}#projectorVolume{min-height:24px}}

.room-tools{width:max-content!important;min-width:0!important;max-width:calc(100vw - 24px);flex:0 0 auto!important}

.settings-popover .tool-item>button{min-height:40px!important;min-width:44px!important;font-size:12px!important}
.settings-popover .tool-item>button span{font-size:11px!important}
.settings-popover .tool-group>small{font-size:10px!important}
.settings-popover #viewSettings button{min-height:38px}
.settings-popover #viewSettings input{min-height:30px}

@media(max-height:500px) and (orientation:landscape){
 .panel-projector .projector-controls{grid-template-rows:40px 40px 32px auto;align-items:stretch}
 .panel-projector #projectorPower{grid-column:1;grid-row:1}
 .panel-projector [data-episode="0"]{grid-column:2;grid-row:1}
 .panel-projector [data-episode="1"]{grid-column:3;grid-row:1}
 .panel-projector #projectorMute{grid-column:1;grid-row:2}
 .panel-projector #projectorPlayback{grid-column:2;grid-row:2}
 .panel-projector #projectorWatch{grid-column:3;grid-row:2}
 .panel-projector #projectorVolumeControl{grid-column:1/4;grid-row:3}
 .panel-projector .projector-controls video{grid-column:4;grid-row:1/4;min-height:0;max-height:130px;height:100%}
 .panel-projector .projector-controls p{grid-column:1/-1;grid-row:4;margin:0}
}

/* Rare UI inspired pilot: a restrained halo on the book-room directory entries.
   Native CSS only; touch users keep the visible border and direct tap targets. */
#quickLinks button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(183, 174, 248, .16);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(183, 174, 248, .045), rgba(255, 255, 255, .012));
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
#quickLinks button::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(150px circle at 50% 50%, rgba(183, 174, 248, .13), transparent 72%);
  opacity: 0;
  transition: opacity .2s ease;
}
#quickLinks button:hover,
#quickLinks button:focus-visible {
  border-color: rgba(217, 180, 92, .42);
  background-color: rgba(183, 174, 248, .035);
  box-shadow: inset 0 0 0 1px rgba(183, 174, 248, .08), 0 5px 16px -12px rgba(183, 174, 248, .5);
}
#quickLinks button:hover::after,
#quickLinks button:focus-visible::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  #quickLinks button,
  #quickLinks button::after { transition: none; }
}
#quickLinks button > b,
#quickLinks button > span { position: relative; z-index: 1; }

/* Observation has one stable DOM tree, so touch controls stay together on rotation. */
#panel.panel-observatory{box-sizing:border-box;width:min(720px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:40px 0 0;overflow:auto}
.panel-observatory .panel-inner{padding:8px 18px 14px}.panel-observatory h2{font-size:clamp(21px,4vw,28px);margin:2px 36px 8px 0}.panel-observatory .panel-kicker{font-size:11px}.observation-intro{font-size:13px;line-height:1.5;margin:6px 0 10px}
.observatory{display:grid;gap:12px}.observation-view{position:relative;height:min(30vh,220px);height:min(30dvh,220px);min-height:110px;overflow:hidden;border:1px solid #b3a9cf66;border-radius:18px;background:#101322;touch-action:none;cursor:grab;isolation:isolate}.observation-view:focus-visible{outline:2px solid #ded7f6;outline-offset:3px}.observation-view.is-dragging{cursor:grabbing}.observation-image{width:100%;height:100%;object-fit:cover;max-height:none!important;max-width:none!important;user-select:none;pointer-events:none;transition:transform .25s ease}.is-dragging .observation-image{transition:none}.observation-reticle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:26px;color:#e5dfef99;pointer-events:none}.observation-caption{position:absolute;bottom:8px;left:10px;color:#e8e4f2;font-size:10px;text-shadow:0 1px 4px #000;pointer-events:none}.observation-tools{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}.observation-themes{display:flex;gap:8px;grid-column:1/-1}.observation-tools button{min-height:44px;padding:8px 14px;background:#29243966;border:1px solid #bfb5da55;color:#eeeaf8;border-radius:13px}.observation-tools button[aria-pressed=true]{background:#a99acc25;border-color:#cfc4e699}.observation-tools label{display:grid;grid-template-columns:1fr auto;gap:4px 8px;font-size:12px}.observation-tools input{grid-column:1/-1;min-height:30px;width:100%;accent-color:#b7a9d6}.observation-tools p{grid-column:1/-1;margin:0;font-size:11px;line-height:1.5;color:#c8bfd9}.panel-observatory .panel-links{margin-top:10px}.panel-observatory .panel-links a{min-height:42px;padding:8px 12px;font-size:12px}
@media(max-height:500px) and (orientation:landscape){.observatory{grid-template-columns:minmax(0,1.6fr) minmax(170px,1fr)}.observation-view{height:155px}.observation-tools{gap:5px}.observation-themes{gap:5px}.observation-tools button{font-size:11px;min-height:40px;padding:6px 9px}.observation-intro{margin:3px 0 6px}.panel-observatory .panel-inner{padding:0 14px 10px}.panel-observatory .panel-links{margin-top:6px}}
@media(prefers-reduced-motion:reduce){.observation-image{transition:none}}

/* Keep the settings sheet inside the visible mobile viewport after rotation or keyboard changes. */
.settings-popover{
  right:calc(100vw - var(--settings-vv-right,100vw) + max(10px,env(safe-area-inset-right)));
  bottom:calc(100vh - var(--settings-vv-bottom,100vh) + 70px + env(safe-area-inset-bottom));
  max-height:min(440px,calc(var(--settings-vv-height,64dvh) - 92px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.settings-popover .tool-item>button,
.settings-popover #overviewZoom button{min-height:44px!important}
.settings-popover #viewSettings button{min-height:40px; touch-action:manipulation}
@media(max-height:500px) and (orientation:landscape){
  .settings-popover{bottom:calc(100vh - var(--settings-vv-bottom,100vh) + 54px + env(safe-area-inset-bottom));max-height:min(360px,calc(var(--settings-vv-height,64dvh) - 72px - env(safe-area-inset-top) - env(safe-area-inset-bottom)))}
  .settings-popover .tool-item>button,.settings-popover #overviewZoom button{min-height:44px!important}
}