:root { color-scheme: dark; font-family: "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; background: #071226; overflow: hidden; }
button { font: inherit; }
.viewer-shell { position: relative; width: 100%; height: 100%; min-height: 480px; background: #071226; overflow: hidden; }
#viewer { position: relative; z-index: 0; display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
#viewer:active { cursor: grabbing; }
.flat-fallback { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; opacity: 1; pointer-events: none; transition: opacity .25s ease; }
.flat-fallback.is-hidden { opacity: 0; }
.shade { position: absolute; z-index: 2; left: 0; right: 0; pointer-events: none; }
.shade-top { top: 0; height: 25%; background: linear-gradient(180deg, rgba(2, 10, 28, .76), transparent); }
.shade-bottom { bottom: 0; height: 46%; background: linear-gradient(0deg, rgba(2, 10, 28, .72), transparent); }
.topbar { position: absolute; z-index: 3; top: clamp(18px, 3vw, 38px); left: clamp(18px, 4vw, 56px); right: clamp(18px, 4vw, 56px); display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.logo { display: block; width: min(250px, 48vw); height: auto; filter: drop-shadow(0 2px 8px rgba(0,0,0,.3)); }
.top-controls { display: flex; align-items: center; gap: 8px; }
.control-button, .icon-button, .round-button, .close-detail { border: 1px solid rgba(255,255,255,.3); color: #fff; background: rgba(5, 24, 54, .62); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); cursor: pointer; transition: background .2s, border-color .2s, transform .2s; }
.control-button:hover, .icon-button:hover, .round-button:hover, .close-detail:hover { background: rgba(19, 82, 179, .85); }
.control-button[aria-pressed="true"] { border-color: #78aaff; background: rgba(28, 101, 215, .75); }
.control-button { border-radius: 999px; padding: 9px 13px; font-size: 13px; white-space: nowrap; }
.icon-button { width: 39px; height: 39px; border-radius: 50%; font-size: 21px; }
.status { position: absolute; z-index: 1; left: clamp(18px, 4vw, 56px); bottom: 145px; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.45); pointer-events: none; }
#scene-title { display: block; font-size: clamp(19px, 2.2vw, 28px); font-weight: 600; letter-spacing: .04em; }
.counter { display: block; margin-top: 6px; color: #c9d7ee; font-size: 13px; }
.navigation { position: absolute; z-index: 1; right: clamp(18px, 4vw, 56px); bottom: 145px; display: flex; gap: 10px; }
.round-button { width: 44px; height: 44px; border-radius: 50%; font-size: 34px; line-height: 32px; }
.scene-strip { position: absolute; z-index: 1; left: clamp(14px, 3vw, 42px); right: clamp(14px, 3vw, 42px); bottom: 23px; padding: 11px 13px 13px; border: 1px solid rgba(165, 197, 246, .24); border-radius: 13px; background: rgba(5, 20, 48, .58); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 12px 34px rgba(0,0,0,.2); }
.scene-strip-head { display: flex; justify-content: space-between; margin: 0 3px 8px; color: #edf4ff; font-size: 13px; font-weight: 600; }
.drag-tip { color: #a5b9da; font-size: 11px; font-weight: 400; }
.scene-list { display: flex; gap: 8px; overflow-x: auto; padding: 2px 1px 5px; scrollbar-width: thin; scrollbar-color: rgba(141, 180, 244, .7) transparent; }
.scene-list::-webkit-scrollbar { height: 4px; }
.scene-list::-webkit-scrollbar-thumb { border-radius: 99px; background: rgba(141, 180, 244, .7); }
.scene-item { flex: 0 0 112px; min-height: 48px; padding: 8px 10px; border: 1px solid rgba(124,159,221,.28); border-radius: 8px; color: #e9f1ff; background: rgba(255,255,255,.06); text-align: left; cursor: pointer; transition: .2s; }
.scene-item:hover, .scene-item.active { border-color: #69a0ff; background: rgba(48, 112, 225, .48); }
.scene-item .scene-number { display: block; color: #a8c7fb; font-size: 10px; line-height: 1.15; }
.scene-item .scene-name { display: block; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.hint { position: absolute; z-index: 1; left: 50%; bottom: 119px; transform: translateX(-50%); margin: 0; color: rgba(255,255,255,.84); font-size: 12px; white-space: nowrap; text-shadow: 0 1px 3px #000; pointer-events: none; }
.hotspots { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.hotspot { position: absolute; width: 39px; height: 39px; transform: translate(-50%, -50%); border: 0; border-radius: 50%; color: #fff; background: rgba(33, 125, 255, .95); box-shadow: 0 0 0 8px rgba(85, 157, 255, .18), 0 3px 12px rgba(0, 25, 80, .45); font-size: 23px; cursor: pointer; pointer-events: auto; animation: pulse 2.2s infinite; }
.hotspot::after { content: ""; position: absolute; inset: -8px; border: 1px solid rgba(159, 204, 255, .85); border-radius: 50%; animation: ring 2.2s infinite; }
@keyframes pulse { 50% { transform: translate(-50%, -50%) scale(1.07); } }
@keyframes ring { 70%, 100% { opacity: 0; transform: scale(1.45); } }
.hotspot-detail { position: absolute; z-index: 5; top: 50%; right: clamp(18px, 5vw, 70px); width: min(330px, calc(100vw - 36px)); transform: translateY(-50%); padding: 23px 25px; border: 1px solid rgba(142, 184, 249, .38); border-radius: 14px; color: #fff; background: rgba(4, 18, 47, .9); box-shadow: 0 18px 55px rgba(0,0,0,.34); backdrop-filter: blur(16px); }
.preview-note { position: absolute; z-index: 5; top: 50%; left: 50%; max-width: min(450px, calc(100% - 36px)); transform: translate(-50%, -50%); margin: 0; padding: 12px 16px; border: 1px solid rgba(168, 204, 255, .45); border-radius: 9px; color: #fff; background: rgba(4, 18, 47, .72); text-align: center; font-size: 13px; line-height: 1.55; box-shadow: 0 8px 30px rgba(0,0,0,.2); }
.hotspot-detail h2 { margin: 6px 0 9px; font-size: 22px; }
.hotspot-detail p { margin: 0; color: #d8e4f8; font-size: 14px; line-height: 1.75; }
.eyebrow { color: #8fb8ff; font-size: 11px; letter-spacing: .16em; }
.close-detail { position: absolute; top: 12px; right: 12px; width: 31px; height: 31px; border-radius: 50%; font-size: 23px; line-height: 25px; }
@media (max-width: 700px) { .viewer-shell { min-height: 100%; } .logo { width: min(180px, 48vw); } .top-controls { gap: 6px; } .control-button { padding: 8px 10px; font-size: 11px; } .icon-button { width: 35px; height: 35px; font-size: 18px; } .status { bottom: 136px; } .navigation { bottom: 140px; } .hint { display: none; } .scene-strip { left: 10px; right: 10px; bottom: 12px; padding: 9px 10px 10px; } .scene-item { flex-basis: 98px; } .hotspot-detail { top: 38%; right: 18px; } }