* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; color: white; background: transparent; font-family: "Microsoft YaHei", "PingFang SC", sans-serif; }
#poster, #scene { position: absolute; inset: 0; width: 100%; height: 100%; }
#poster { z-index: 1; object-fit: cover; opacity: .84; transition: opacity .65s ease; }
#scene { z-index: 2; touch-action: none; opacity: 0; transition: opacity .65s ease; }
body.ready #scene { opacity: 1; }
body.ready #poster { opacity: 0; pointer-events: none; }
.loading { position: absolute; z-index: 5; top: 50%; left: 50%; width: min(280px, 72vw); transform: translate(-50%,-50%); padding: 16px; text-align: center; background: rgba(4,15,27,.76); border: 1px solid rgba(112,194,232,.28); border-radius: 8px; backdrop-filter: blur(10px); }
.loading span { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.loading > div { height: 3px; overflow: hidden; background: rgba(255,255,255,.13); border-radius: 4px; }
.loading i { display: block; width: 0; height: 100%; background: linear-gradient(90deg,#087aff,#20e0e9); transition: width .2s; }
.loading small { display: block; margin-top: 9px; color: #91a7ba; font-size: 10px; }
.loading button { margin-top: 10px; border: 1px solid rgba(87,211,255,.55); border-radius: 999px; padding: 8px 14px; color: #dff8ff; background: rgba(11,50,72,.88); font: inherit; cursor: pointer; }
.loading button[hidden] { display: none; }
.story-caption { position: absolute; z-index: 4; left: 18px; top: 18px; display: grid; grid-template-columns: 34px 1fr; gap: 10px; width: min(430px, calc(100% - 36px)); padding: 13px 15px; background: rgba(3,14,27,.82); border: 1px solid rgba(27,207,231,.3); border-radius: 6px; backdrop-filter: blur(14px); }
.story-caption > span { display: grid; place-items: center; height: 34px; color: #20d8ea; border: 1px solid rgba(32,216,234,.4); border-radius: 50%; font-size: 11px; }
.story-caption b { display: block; font-size: 14px; }
.story-caption p { margin: 4px 0 0; color: #a9bccb; font-size: 11px; line-height: 1.5; }
.part-tip { position: absolute; z-index: 4; right: 18px; top: 18px; display: grid; width: min(250px, calc(100% - 36px)); padding: 13px 34px 13px 15px; background: rgba(3,14,27,.82); border: 1px solid rgba(255,255,255,.16); border-radius: 6px; backdrop-filter: blur(14px); }
.part-tip button { position: absolute; right: 7px; top: 5px; border: 0; color: #9fb2c2; background: transparent; font-size: 20px; }
.part-tip small { color: #20d8ea; font-size: 9px; letter-spacing: .12em; }
.part-tip b { margin: 4px 0; font-size: 13px; }
.part-tip span { color: #a9bccb; font-size: 10px; line-height: 1.5; }
.part-tip dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 8px; margin: 8px 0 0; padding-top: 7px; border-top: 1px solid rgba(255,255,255,.1); font-size: 9px; line-height: 1.45; }
.part-tip dt { color: #70879a; }
.part-tip dd { min-width: 0; margin: 0; color: #c2d1dc; overflow-wrap: anywhere; }
.dimension-overlay { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.dimension-line { position: absolute; color: #69e8f2; border-color: #69e8f2; filter: drop-shadow(0 1px 2px #06101b); }
.dimension-line::before, .dimension-line::after { position: absolute; content: ""; background: #69e8f2; }
.dimension-line span { position: absolute; padding: 3px 7px; color: #e9fdff; background: rgba(3,20,32,.88); border: 1px solid rgba(105,232,242,.45); border-radius: 4px; font: 600 10px/1.3 "Microsoft YaHei", sans-serif; white-space: nowrap; }
.dimension-length, .dimension-width { height: 1px; border-top: 1px solid; transform-origin: left center; }
.dimension-length::before, .dimension-length::after, .dimension-width::before, .dimension-width::after { top: -5px; width: 1px; height: 11px; }
.dimension-length::after, .dimension-width::after { right: 0; }
.dimension-length span, .dimension-width span { left: 50%; bottom: 7px; transform: translateX(-50%); }
.dimension-height { width: 1px; border-left: 1px solid; }
.dimension-height::before, .dimension-height::after { left: -5px; width: 11px; height: 1px; }
.dimension-height::after { bottom: 0; }
.dimension-height span { left: 8px; top: 50%; transform: translateY(-50%); }
.part-menu { position: absolute; z-index: 4; left: 50%; bottom: 72px; display: flex; max-width: calc(100% - 36px); gap: 5px; transform: translateX(-50%); padding: 6px; overflow-x: auto; background: rgba(4,15,27,.9); border: 1px solid rgba(32,216,234,.26); border-radius: 7px; backdrop-filter: blur(12px); scrollbar-width: none; }
.part-menu::-webkit-scrollbar { display: none; }
.part-menu button { flex: 0 0 auto; min-height: 30px; padding: 0 10px; color: #bcd0de; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 4px; font: 600 10px/1 "Microsoft YaHei", sans-serif; white-space: nowrap; }
.part-menu button:hover, .part-menu button.active { color: white; background: rgba(8,113,237,.72); border-color: rgba(32,216,234,.5); }
.controls { position: absolute; z-index: 4; left: 50%; bottom: 18px; display: flex; gap: 7px; transform: translateX(-50%); padding: 6px; background: rgba(4,15,27,.76); border: 1px solid rgba(255,255,255,.13); border-radius: 7px; backdrop-filter: blur(12px); }
.controls button { min-height: 36px; padding: 0 13px; color: #c6d6e3; background: transparent; border: 0; border-radius: 4px; font: 600 11px/1 "Microsoft YaHei", sans-serif; white-space: nowrap; }
.controls button:hover, .controls button.active { color: white; background: rgba(255,255,255,.09); }
.controls .accent { color: white; background: #0871ed; }
.controls .accent:hover, .controls .accent.active { background: #0b83ff; }
.hint { position: absolute; z-index: 3; left: 16px; bottom: 20px; color: #7890a5; font-size: 9px; letter-spacing: .04em; }
body.force-landscape { position: fixed; width: 100vh; height: 100vw; transform: rotate(90deg) translateY(-100%); transform-origin: top left; }
body:fullscreen, html:fullscreen { background: #07111f; }
@media (max-width: 680px) {
  .story-caption { top: 10px; left: 10px; width: calc(100% - 20px); }
  .part-tip { top: auto; right: 10px; bottom: 74px; width: calc(100% - 20px); }
  .part-menu { bottom: 62px; max-width: calc(100% - 20px); }
  .controls { bottom: 10px; width: calc(100% - 20px); justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .controls::-webkit-scrollbar { display: none; }
  .controls button { flex: 0 0 auto; min-width: max-content; padding: 0 10px; }
  .hint { display: none; }
}