:root{color-scheme:dark;font-family:Inter,"Microsoft YaHei","PingFang SC",system-ui,sans-serif;color:#eef3f2;background:#0c1418;font-synthesis:none;--accent:#4fd1c5;--line:#b7c8cc2a;--glass:#111d22d9}
*{box-sizing:border-box}
body{margin:0;overflow:hidden;background:#0c1418}
button,a,input{font:inherit}
button{cursor:pointer;color:inherit;border:1px solid transparent;background:transparent;min-height:44px;padding:10px 17px;border-radius:9px;font-size:.9rem;transition:background .15s,border-color .15s,color .15s}
button:hover{background:#ffffff10}
button:disabled{opacity:.45;cursor:default}
button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
[hidden]{display:none!important}
#scene{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
main::after{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(100deg,#0a1216c4 0,#0a121670 26%,transparent 46%),linear-gradient(180deg,#0a121690 0,transparent 18%)}

.site-head{position:fixed;top:max(24px,env(safe-area-inset-top));left:32px;right:32px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.site-head>*{pointer-events:auto}
.brand{display:flex;gap:13px;align-items:center;color:inherit;text-decoration:none;font-size:1rem;letter-spacing:.03em;text-shadow:0 2px 14px #0008}
.brand small{display:block;font-size:.65rem;letter-spacing:.17em;color:#b3c0c6;margin-top:5px}
.brand-mark{height:45px;width:45px;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);border-radius:12px;display:grid;place-content:center;font:28px Georgia,serif;color:var(--accent);position:relative;background:#0c1418a0}
.brand-mark>span{font-size:14px;position:absolute;right:6px;top:3px}
.head-actions{display:flex;gap:10px;align-items:center}
.back-link{color:#c7d3d7;text-decoration:none;font-size:.85rem;border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(10px);padding:11px 15px;border-radius:22px}
.back-link:hover{border-color:var(--accent);color:#fff}
.icon-button{border:1px solid var(--line);background:var(--glass);width:44px;padding:0;font-size:20px;border-radius:50%}

.exhibit{position:fixed;top:118px;left:36px;pointer-events:none;max-width:380px;text-shadow:0 2px 18px #000a}
.eyebrow{font-size:.74rem;letter-spacing:.18em;color:var(--accent);display:flex;align-items:center;gap:10px;margin:0}
.eyebrow i{width:32px;height:1px;background:color-mix(in srgb,var(--accent) 60%,transparent)}
h1{font-size:clamp(28px,3vw,42px);font-weight:500;letter-spacing:-.03em;line-height:1.2;margin:18px 0 10px}
.exhibit>p:not(.eyebrow){font-size:.92rem;color:#c3d0d4;line-height:1.7;margin:0 0 14px}
.model-note{display:inline-block;font-size:.75rem;color:#b4c3c8;border:1px solid var(--line);background:#0c1418a8;border-radius:20px;padding:5px 11px}

.collection{position:fixed;right:32px;top:118px;display:grid;gap:8px;width:176px}
.collection button{display:grid;grid-template-columns:28px 1fr;text-align:left;gap:4px 6px;background:var(--glass);border:1px solid var(--line);padding:14px 14px;backdrop-filter:blur(10px);border-radius:12px;position:relative;overflow:hidden}
.collection button::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:var(--c);opacity:.35;transition:opacity .2s}
.collection button>span{grid-row:span 2;font-size:.75rem;color:#8eaaaf;align-self:center}
.collection strong{font-size:.95rem;font-weight:500}
.collection small{font-size:.72rem;color:#91a9b2;letter-spacing:.04em}
.collection button.selected{border-color:color-mix(in srgb,var(--c) 70%,transparent);background:color-mix(in srgb,var(--c) 14%,#111d22e6)}
.collection button.selected::before{opacity:1}
.collection button.selected>span{color:var(--c)}

.loading{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(380px,calc(100vw - 32px));padding:28px 28px 24px;border:1px solid var(--line);background:#0f1a1ff2;backdrop-filter:blur(16px);border-radius:18px;text-align:center;box-shadow:0 24px 60px #0008}
.loading h2{font-size:1.05rem;font-weight:500;margin:16px 0 18px}
.loading p{font-size:.82rem;color:#9fb1b7;margin:14px 0 0}
.loading button{margin-top:16px;border-color:var(--accent);color:var(--accent)}
.loader-mark{display:inline-block;width:34px;height:34px;border-radius:50%;border:2px solid #ffffff1a;border-top-color:var(--accent);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.track{height:4px;background:#ffffff14;border-radius:2px;overflow:hidden}
#progress{height:100%;width:0;background:var(--accent);transition:width .2s}

#panel-dock{position:fixed;right:24px;bottom:104px;width:min(640px,calc(100vw - 32px));filter:drop-shadow(0 18px 40px #000a)}
#panel-dock canvas{display:block;width:100%;height:auto;touch-action:none}

footer{position:fixed;bottom:max(20px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);max-width:calc(100vw - 24px);width:max-content;text-align:center}
.toolbar{display:flex;align-items:center;gap:7px;padding:8px;border:1px solid var(--line);background:#111d22eb;backdrop-filter:blur(16px);border-radius:14px}
.view-controls{display:flex;gap:4px;padding:3px;background:#ffffff08;border-radius:10px}
.view-controls button.active,#toggle-panel.active{background:color-mix(in srgb,var(--accent) 20%,transparent);border-color:color-mix(in srgb,var(--accent) 60%,transparent);color:#fff}
.divider{width:1px;height:26px;background:var(--line);margin:0 4px}
.primary{background:var(--accent);color:#081014;font-weight:600}
.primary:hover{background:color-mix(in srgb,var(--accent) 85%,#fff)}
#hint{display:inline-block;font-size:.78rem;color:#b8c6cb;margin:10px 0 0;padding:4px 12px;border-radius:12px;background:#0c1418b8}

#touch-move{position:fixed;left:22px;bottom:110px;display:grid;justify-items:center;gap:6px}
#touch-move div{display:flex;gap:6px}
#touch-move button{width:54px;height:54px;border:1px solid var(--line);background:var(--glass);border-radius:14px;font-size:20px;user-select:none;-webkit-user-select:none}

#toast{position:fixed;top:24px;left:50%;transform:translateX(-50%);padding:11px 18px;border-radius:24px;border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);background:#0f1a1ff2;font-size:.88rem;box-shadow:0 10px 30px #0007}

dialog{max-width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:auto;color:inherit;background:#0f1a1f;border:1px solid var(--line);border-radius:18px;padding:30px 32px;line-height:1.7}
dialog::backdrop{background:#0009;backdrop-filter:blur(3px)}
dialog h2{font-weight:500;margin:10px 0 6px}
dialog h3{font-size:.95rem;color:var(--accent);font-weight:500;margin:20px 0 4px}
dialog p{font-size:.86rem;color:#c0ccd0;margin:4px 0}
dialog b{color:#fff;font-weight:600}
#close-help{position:absolute;right:18px;top:18px}

body.in-xr .exhibit,body.in-xr .collection,body.in-xr #panel-dock{opacity:.25}

@media (max-width:760px){
  .site-head{left:16px;right:16px;top:max(14px,env(safe-area-inset-top))}
  .brand>span:last-child{font-size:.88rem}
  .back-link{display:none}
  .exhibit{top:78px;left:18px;right:18px;max-width:none}
  h1{margin:10px 0 4px;font-size:26px}
  .exhibit>p:not(.eyebrow){margin-bottom:8px;font-size:.84rem}
  .collection{top:auto;bottom:calc(max(20px,env(safe-area-inset-bottom)) + 140px);left:16px;right:16px;width:auto;grid-template-columns:repeat(3,1fr);gap:6px}
  .collection button{padding:9px 10px;grid-template-columns:1fr}
  .collection button>span{display:none}
  .collection small{display:none}
  .collection strong{font-size:.82rem}
  footer{width:calc(100vw - 24px)}
  .toolbar{flex-wrap:wrap;justify-content:center}
  .toolbar button{padding:9px 12px;font-size:.82rem}
  .divider{display:none}
  #hint{display:none}
  #panel-dock{left:16px;right:16px;width:auto;bottom:calc(max(20px,env(safe-area-inset-bottom)) + 196px)}
  #touch-move{bottom:calc(max(20px,env(safe-area-inset-bottom)) + 206px)}
}