/* UI adoption from the team AtlasExperience: quiet overview, optional directory,
   one reading surface. Only persistent controls reserve space in the sky. */
#shell .topbar{grid-template-columns:132px minmax(180px,1fr) auto;padding:16px 28px 8px;gap:4px 16px;background:linear-gradient(#04070bf0,#04070b35 85%,transparent)}
#shell .topbar__actions{gap:8px}
#shell .study-toolbar{border:0;border-radius:0;background:none;padding:0;gap:4px}
#shell .study-toolbar button{min-height:44px;padding:6px 12px;border-radius:6px;font-size:12px}
#shell #study-optional{border:0;border-left:1px solid #ffffff24;border-radius:0;margin-left:8px;padding-left:16px}
#shell #study-change{color:#98a9b9;font-size:11px}
#shell .event-status{border-color:transparent;background:none;border-radius:6px;min-width:94px}
#shell .event-status:hover{background:#ffffff09}
#shell .event-status__ring>span{display:flex;align-items:baseline;gap:3px}
#shell .event-status__ring small{display:inline;font-size:11px;margin-right:5px}
#shell .event-status__ring b{font-size:15px}
#shell .view-settings{position:relative;pointer-events:auto}
#shell .view-settings summary,#shell .scene-catalog summary{display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;min-width:44px;padding:0 12px;border:1px solid #b8c7d526;border-radius:6px;background:#080d16b3;color:#bccbd9;cursor:pointer;font-family:inherit;font-weight:500;font-size:12px;line-height:1.4;list-style:none;pointer-events:auto}
#shell .view-settings summary::-webkit-details-marker,#shell .scene-catalog summary::-webkit-details-marker{display:none}
#shell .view-settings summary::after,#shell .scene-catalog summary::after{content:'⌄';font-size:14px;color:#8396a9}
#shell details[open]>summary::after{content:'⌃'}
#shell .view-settings summary:hover,#shell .scene-catalog summary:hover{border-color:#c6d4df66;color:#eef4f9}
#shell summary:focus-visible{outline:2px solid #beddd8;outline-offset:3px}
/* 整齐单列：左侧功能名，右侧开关状态或进入箭头；不再用大小不齐的方块按钮。 */
#shell .view-settings__panel{position:absolute;right:0;top:calc(100% + 8px);width:248px;padding:10px;background:#0b121efc;border:1px solid #b8c7d52b;border-radius:12px;box-shadow:0 16px 45px #0007;display:flex;flex-direction:column;gap:2px;z-index:40}
#shell .view-settings__panel p{margin:8px 4px 4px;color:#8ea2b7;font-size:11px;letter-spacing:.3px}
#shell .view-settings__panel p:first-child{margin-top:2px}
#shell .settings-row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:44px;padding:0 4px 0 8px;border:0;border-radius:8px;background:none;color:#dce6f0;font-family:inherit;font-size:13px;line-height:1.4;text-align:left}
#shell .settings-row[hidden]{display:none}
#shell .settings-row--link{cursor:pointer}
#shell .settings-row--link:hover,#shell .settings-row:hover{background:#ffffff08}
#shell .settings-row__name{flex:1;min-width:0}
#shell .settings-row__state{flex:none;min-width:56px;min-height:32px;padding:0 10px;border:1px solid #afc1d33d;border-radius:16px;background:#ffffff05;color:#bccbd9;font-family:inherit;font-size:12px;line-height:1.4;cursor:pointer;text-align:center}
#shell .settings-row__state:hover{border-color:#c6d4df80;color:#eef4f9}
#shell .settings-row__state[aria-pressed="true"]{border-color:#8fd7cf80;color:#bfeee8}
/* Sliding switches: knob right and track lit when the feature is on, knob left and
   dim when off. aria-checked always means "enabled", never "paused". */
#shell .settings-switch{position:relative;min-width:72px;padding:0 10px 0 34px;text-align:right}
#shell .settings-switch::before{content:"";position:absolute;left:8px;top:50%;transform:translateY(-50%);width:20px;height:12px;border-radius:999px;background:#ffffff1f;transition:background .18s ease}
#shell .settings-switch::after{content:"";position:absolute;left:10px;top:50%;transform:translateY(-50%);width:8px;height:8px;border-radius:50%;background:#9fb1c4;transition:transform .18s ease,background .18s ease}
#shell .settings-switch[aria-checked="true"]{border-color:#8fd7cf80;color:#bfeee8}
#shell .settings-switch[aria-checked="true"]::before{background:#8fd7cf66}
#shell .settings-switch[aria-checked="true"]::after{transform:translate(8px,-50%);background:#bfeee8}
#shell .settings-switch:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
#shell .settings-row__state:disabled{opacity:.55;cursor:default}
#shell .settings-row__go{flex:none;padding-right:6px;color:#8396a9;font-size:16px}
#shell .view-settings__panel .icon-button{width:auto;min-width:44px;height:auto;min-height:44px;padding:8px;border-radius:6px;border:1px solid #afc1d32b;background:#ffffff04;font-family:inherit;font-weight:500;font-size:12px;line-height:1.4;white-space:normal}
#shell .view-settings__panel .icon-button[hidden]{display:none}
#shell .view-settings:not([open]) .view-settings__panel{display:none}
#shell .hero-copy{top:154px;left:32px;width:min(300px,26vw);max-height:calc(100dvh - 244px);overflow-y:auto;scrollbar-width:thin;translate:none}
#shell .hero-copy h1,#shell[data-study-level=universe] .hero-copy h1{font-size:clamp(28px,2.8vw,40px);line-height:1.2;letter-spacing:.2px;margin:10px 0 12px}
#shell .hero-copy__eyebrow{font-size:10px;font-weight:500;letter-spacing:.6px;color:#92a4b7}
#shell .hero-copy__english,#shell .hero-copy__chapter,#shell .reward-line,#shell .corner-coordinate{display:none}
#shell .data-context{font-size:11px;color:#a3b2c2;margin:8px 0}
#shell .hero-copy__description{font-size:13px;line-height:1.9;margin:16px 0;color:#c1cedb;max-width:30ch}
#shell .primary-action{min-height:44px;padding:10px 0;margin-top:12px;border:0;border-radius:0;background:none;font-size:12px;gap:12px;box-shadow:none}
#shell .primary-action::before,#shell .primary-action::after,#shell .primary-action__shine{display:none}
#shell .study-panel{padding:14px 0 0;border:0;border-top:1px solid #ffffff1c;background:none;box-shadow:none;margin-top:16px}
#shell .study-panel h2{font-size:16px;line-height:1.6}
#shell #study-hint{font-size:12px;line-height:1.8}
#shell .scene-catalog{position:absolute;right:28px;top:124px;z-index:20;pointer-events:auto}
#shell .scene-catalog[hidden]{display:none}
#shell .scene-catalog:not([open]) #nav{display:none}
/* Higher specificity intentionally replaces the older fixed desktop/mobile rails. */
#shell .scene-catalog #nav{position:absolute;inset:calc(100% + 8px) 0 auto auto;display:flex;flex-direction:column;gap:2px;width:232px;max-width:calc(100vw - 32px);max-height:min(60dvh,520px);overflow:auto;padding:8px 12px;background:#0b121efc;border:1px solid #b8c7d52b;border-radius:12px;box-shadow:0 16px 45px #0007;translate:none;transform:none!important;visibility:visible!important;opacity:1!important}
#shell .scene-catalog #nav .chapter-button{display:grid;width:100%;min-width:0;min-height:44px;flex:none;grid-template-columns:22px 1fr;gap:9px;padding:8px 4px;border:0;border-radius:4px;background:none;text-align:left}
#shell .scene-catalog #nav .chapter-button:hover,#shell .scene-catalog #nav .chapter-button:focus-visible{background:#ffffff08}
#shell .scene-catalog #nav .chapter-button__index{display:block;font-size:10px;color:#7f91a4;letter-spacing:0}
#shell .scene-catalog #nav .chapter-button__copy{display:block;min-width:0}
#shell .scene-catalog #nav .chapter-button__copy b{display:block;font-size:12px;letter-spacing:.3px;white-space:normal;line-height:1.6}
#shell .scene-catalog #nav .chapter-button__copy small{display:block;font-size:10px;line-height:1.5;color:#8599af;letter-spacing:0;margin-top:2px}
#shell .scene-catalog #nav .chapter-button__icon,#shell .scene-catalog #nav .chapter-button .state{display:none}
#shell .scene-pagination{bottom:76px}
#shell[data-view=planet] .hero-copy{display:none}
#shell .dossier{width:min(490px,43vw);background:#080e18ed;border-left:1px solid #b6c6d319}
#shell .dossier__head,#shell[data-guidance=true] .dossier__head{padding:126px 28px 14px;gap:12px;flex-wrap:wrap}
#shell .dossier__head .reading-heading{flex:1;min-width:120px;font-size:20px;font-weight:500}
#shell .dossier__actions .back{min-height:44px;padding:8px 10px;font-size:12px;border:0;border-bottom:1px solid #afc5d133;border-radius:0;white-space:nowrap;background:none}
#shell .reading-expand{display:none}
#shell .dossier__body{padding:0 28px 86px}
#shell #study-detail-slot .study-panel{margin:0 28px;padding:14px 0}
#shell .journey-footer{gap:8px;justify-content:flex-start}
#shell .journey-footer #immersive-toggle{margin-left:auto}
#shell .journey-footer button{border-color:#c7d9e226;background:#070c15b3;font-size:12px}
#shell #product-tour-toggle{border-color:transparent;background:transparent;color:#8e9ead;padding-left:0}
@media(max-width:820px) and (orientation:portrait){
  #shell .topbar{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:44px 44px;padding:calc(8px + env(safe-area-inset-top,0px)) 14px 4px;gap:3px 8px}
  #shell .brand{display:none}
  #shell .topbar__meta{grid-column:1;grid-row:1;justify-content:flex-start;overflow:hidden}
  #shell #crumbs{font-size:11px;gap:5px}
  #shell #crumbs .crumb{min-height:44px}
  /* The three top controls were 44/42/42 tall and sat on two different baselines,
     so they read as three unrelated shapes. One height, one baseline, one radius. */
  #shell .topbar__actions{grid-column:2;grid-row:1;gap:4px;align-items:center}
  #shell .topbar__actions>*,
  #shell .topbar__actions .account__entry,
  #shell .topbar__actions .view-settings summary,
  #shell .topbar__actions .event-status{height:40px;min-height:40px;border-radius:12px;align-self:center}
  #shell .topbar__actions #view-settings-toggle,
  #shell .topbar__actions #exploration-progress{height:40px;min-height:40px;max-height:40px;border-radius:12px;align-self:center}
  #shell .view-settings summary{padding:0 9px;font-size:11px}
  #shell .event-status{min-width:66px;padding:0 6px}
  #shell .event-status__ring>span{display:block;line-height:1.2}
  #shell .event-status__ring small{display:block;font-size:10px;margin:0 0 2px}
  #shell .event-status__ring b{font-size:14px}
  #shell .study-toolbar{grid-column:1/-1;grid-row:2;justify-self:stretch;justify-content:space-between;gap:0}
  #shell .study-toolbar button{min-height:44px;font-size:11px;padding:6px 8px}
  #shell #study-focus{flex:1;min-width:0;max-width:none;overflow:hidden;text-overflow:ellipsis}
  #shell #study-change{font-size:10px;padding:6px 5px}
  #shell #study-optional{min-width:92px;margin-left:4px;padding:6px 6px 6px 10px}
  #shell .hero-copy,#shell[data-study-level=constellation] .hero-copy{top:calc(114px + env(safe-area-inset-top,0px));left:18px;width:calc(100% - 36px);max-height:min(190px,26dvh);min-height:0;overflow:auto}
  #shell .hero-copy h1,#shell[data-study-level=universe] .hero-copy h1{font-size:28px;margin:0 0 7px}
  #shell .hero-copy__eyebrow{display:none}
  #shell .data-context{font-size:10px;line-height:1.5;margin:4px 0}
  #shell .hero-copy__description{display:none}
  #shell .primary-action{display:none}
  #shell .study-panel{margin-top:10px;padding-top:8px}
  #shell .study-panel__meta{margin-bottom:5px}
  #shell .study-panel h2{font-size:13px;margin:4px 0}
  #shell #study-hint{display:none}
  #shell #study-next{min-height:44px;margin-top:6px}
  #shell .scene-catalog{top:auto;right:14px;bottom:calc(67px + env(safe-area-inset-bottom,0px))}
  #shell .scene-catalog summary{font-size:11px;min-height:44px;background:#080e18e0}
  #shell .scene-catalog #nav{inset:auto 0 calc(100% + 8px) auto;width:220px;max-height:48dvh}
  #shell .scene-pagination{left:14px;right:auto;bottom:calc(67px + env(safe-area-inset-bottom,0px));gap:8px;max-width:calc(100% - 150px);transform:none}
  #shell .scene-pagination span{font-size:10px;white-space:normal;text-align:center}
  #shell .scene-pagination button{width:44px;height:44px}
  #shell .journey-footer{left:14px;right:14px;bottom:calc(8px + env(safe-area-inset-bottom,0px))}
  #shell .journey-footer button{font-size:11px;padding:8px 10px}
  #shell[data-view=planet] .journey-footer{left:0;right:0;bottom:0;padding:8px 14px calc(8px + env(safe-area-inset-bottom,0px));background:#080e18f5}
  #shell .dossier,#shell[data-view=planet] .dossier{inset:auto 0 0;width:100%;height:min(58dvh,calc(100dvh - 202px - env(safe-area-inset-top,0px)));border:1px solid #b8c7d526;border-bottom:0;border-radius:18px 18px 0 0;background:#0b121ef7}
  #shell[data-view=planet][data-reading-expanded=true] .dossier{height:calc(100dvh - 110px - env(safe-area-inset-top,0px))}
  #shell .dossier__head,#shell[data-guidance=true] .dossier__head{padding:16px 18px 8px;gap:4px 10px}
  #shell .dossier__head .reading-heading{flex-basis:100%;font-size:18px;line-height:1.6}
  #shell .dossier__actions{width:100%;justify-content:space-between}
  #shell .reading-expand{display:inline-flex;align-items:center}
  #shell .dossier__head::before{content:'';position:absolute;top:6px;left:calc(50% - 16px);width:32px;height:3px;background:#b8c7d555;border-radius:4px}
  #shell .dossier__body{padding:0 18px 24px;margin-bottom:calc(60px + env(safe-area-inset-bottom,0px))}
  #shell #study-detail-slot .study-panel{margin:0 18px;padding:8px 0}
  #shell .product-tour{bottom:calc(118px + env(safe-area-inset-bottom,0px))}
}
@media(orientation:landscape) and (max-height:520px){
  #shell .topbar{padding:6px 18px 4px;grid-template-rows:44px 44px}
  #shell .hero-copy{top:108px;left:20px;max-height:calc(100dvh - 180px);width:27vw}
  #shell .hero-copy h1,#shell[data-study-level=universe] .hero-copy h1{font-size:26px}
  #shell .hero-copy__description{display:none}
  #shell .scene-catalog{top:105px;right:18px}
  #shell .scene-catalog #nav{max-height:calc(100dvh - 214px)}
  #shell .dossier__head,#shell[data-guidance=true] .dossier__head{padding:100px 18px 8px}
  #shell .dossier__body{padding:0 18px 68px}
}
/* Mobile overview keeps the title and data provenance above the sky. The
   introductory prose remains in the welcome flow rather than reserving sky. */
@media(max-width:820px) and (orientation:portrait){
  #shell.shell[data-kanshan-hub][data-study-level=universe] .hero-copy{top:calc(68px + env(safe-area-inset-top,0px));left:22px;width:calc(100% - 44px)}
  #shell.shell[data-kanshan-hub][data-study-level=universe] .hero-copy h1{font-size:32px;line-height:1.2;letter-spacing:2px;margin:0 0 6px}
  #shell.shell[data-kanshan-hub][data-study-level=universe] .hero-copy__english,
  #shell.shell[data-kanshan-hub][data-study-level=universe] .hero-copy__description{display:none}
  #shell.shell[data-kanshan-hub][data-study-level=universe] .data-context{margin:4px 0;font-size:11px;line-height:1.6}
}
@media(orientation:landscape) and (max-height:520px){
  #shell.shell[data-kanshan-hub] .topbar__actions{align-items:center}
  #shell.shell[data-kanshan-hub] .topbar__actions .account__entry,
  #shell.shell[data-kanshan-hub] .topbar__actions #view-settings-toggle,
  #shell.shell[data-kanshan-hub] .topbar__actions #exploration-progress{height:40px;min-height:40px;max-height:40px;border-radius:12px;align-self:center}
  #shell.shell[data-kanshan-hub] .view-settings__panel{max-height:calc(100dvh - 76px);overflow-y:auto;overscroll-behavior:contain}
}
@media(orientation:landscape) and (max-height:520px){
  #shell.shell[data-kanshan-hub][data-study-level=universe] .hero-copy__english,
  #shell.shell[data-kanshan-hub][data-study-level=universe] .hero-copy__description{display:none}
  #shell .kanshan-hub__dock{width:min(276px,calc(100vw - 24px))}
  #shell .kanshan-hub__launcher{width:76px;height:88px}
}
/* The production host adds a 64px branding frame at the bottom right. Keep
   our controls clear of it without hiding or changing the platform frame. */
body:has(#nl-badge-frame) #shell .kanshan-hub__dock{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
body:has(#nl-badge-frame) #shell.spatial-immersive .spatial-controls{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
@media(orientation:landscape) and (max-height:640px){
  body:has(#nl-badge-frame) #shell .kanshan-hub{--hub-panel-bottom:76px}
}

/* A scene heading is a reading destination, not an interactive control.
   Keep its focus semantics without drawing a box around the display title. */
#shell .hero-copy h1:focus{outline:none}
/* The root already has a page title; show breadcrumbs only after entering it. */
#shell #crumbs[hidden]{display:none}

.settings-layer-control{border:0;margin:12px 0;padding:0}.settings-layer-control legend{padding:0 0 8px;color:#dce7ef;font-size:12px}.settings-layer-options{display:flex;gap:4px;border:1px solid #c6e1f022;border-radius:10px;padding:3px;background:#07101c55}.settings-layer-options label{position:relative;flex:1;min-width:0;cursor:pointer}.settings-layer-options input{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}.settings-layer-options span{display:flex;align-items:center;justify-content:center;min-height:44px;padding:5px;font-size:12px;color:#a9bdca;border-radius:7px;white-space:nowrap}.settings-layer-options input:checked+span{background:#b5d6e4;color:#10212c}.settings-layer-options input:focus-visible+span{outline:2px solid #a8dced;outline-offset:2px}.settings-layer-control small{display:block;margin-top:7px;color:#9eb1c1;font-size:11px;line-height:1.5}
