:root{
  --paper:#f4eee2;
  --paper-dim:rgba(244,238,226,.72);
  --ink:#171310;
  --brass:#b78a52;
  --brass-hi:#e2bd85;
  --line:rgba(244,238,226,.16);
  --glass:rgba(18,15,12,.52);
  --glass-2:rgba(18,15,12,.72);
  --font-cn:"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
  --font-display:"Songti SC","Noto Serif SC","Georgia",serif;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:#0d0b09;color:var(--paper);font-family:var(--font-cn);
  -webkit-font-smoothing:antialiased;overflow:hidden}
#app{position:fixed;inset:0}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block}
.vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 62% 38%,rgba(0,0,0,0) 42%,rgba(0,0,0,.42) 78%,rgba(0,0,0,.72) 100%)}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.55'/></svg>")}

/* ---------------- top bar ---------------- */
.topbar{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;
  padding:26px 30px;z-index:6;pointer-events:none}
.brand{display:flex;align-items:baseline;gap:10px;pointer-events:auto}
.brand .mark{font-family:var(--font-display);font-size:30px;letter-spacing:.14em;line-height:1;
  color:#f7f1e6;text-shadow:0 1px 18px rgba(0,0,0,.6)}
.brand .cn{font-size:14px;letter-spacing:.28em;color:var(--brass-hi)}
.brand .tag{margin-left:10px;padding-left:14px;border-left:1px solid var(--line);font-size:12px;
  letter-spacing:.18em;color:rgba(244,238,226,.62)}
.tools{display:flex;gap:8px;pointer-events:auto}
.tool{appearance:none;border:1px solid rgba(244,238,226,.2);background:rgba(18,15,12,.42);
  color:rgba(244,238,226,.82);border-radius:999px;padding:9px 14px;display:flex;align-items:center;gap:7px;
  font-family:var(--font-cn);font-size:11.5px;letter-spacing:.1em;cursor:pointer;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:.25s}
.tool:hover{border-color:rgba(226,189,133,.65);color:#fff;transform:translateY(-1px)}
.tool.is-on{border-color:rgba(226,189,133,.75);background:rgba(183,138,82,.22);color:#ffe9c9}
.tool .ico{font-size:13px;opacity:.9}

/* ---------------- info card ---------------- */
.card{position:absolute;right:30px;top:96px;width:308px;padding:22px 22px 16px;z-index:5;
  background:linear-gradient(160deg,rgba(20,16,13,.78),rgba(16,13,10,.58));
  border:1px solid rgba(244,238,226,.13);border-radius:18px;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 30px 80px rgba(0,0,0,.45);transition:opacity .4s,transform .4s}
.card.is-hidden{opacity:0;transform:translateY(8px);pointer-events:none}
.card-top{display:flex;justify-content:space-between;align-items:center}
.kicker{font-size:9.5px;letter-spacing:.26em;color:rgba(244,238,226,.45)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--brass);box-shadow:0 0 12px var(--brass)}
.card h1{font-family:var(--font-display);font-weight:500;font-size:27px;margin:12px 0 2px;letter-spacing:.04em;color:#fbf5ea}
.height{display:flex;align-items:baseline;gap:8px;margin-top:6px}
.height b{font-family:var(--font-display);font-size:38px;font-weight:500;color:var(--brass-hi);line-height:1}
.height .unit{font-size:11px;letter-spacing:.18em;color:rgba(244,238,226,.5)}
.height em{font-style:normal;font-size:11px;color:rgba(244,238,226,.62);margin-left:6px}
.card ul{list-style:none;margin:16px 0 6px;padding:0}
.card li{position:relative;padding:0 0 9px 15px;font-size:11.5px;line-height:1.55;color:rgba(244,238,226,.76)}
.card li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;background:var(--brass);border-radius:1px}
.card-foot{margin-top:10px;padding-top:11px;border-top:1px solid rgba(244,238,226,.1);
  font-size:10px;letter-spacing:.08em;color:rgba(244,238,226,.38)}

/* ---------------- mode nav ---------------- */
.modes{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);display:flex;gap:6px;z-index:6;
  padding:6px;border-radius:999px;background:rgba(16,13,10,.55);border:1px solid rgba(244,238,226,.12);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 18px 50px rgba(0,0,0,.45)}
.mode{appearance:none;border:0;background:transparent;color:rgba(244,238,226,.62);cursor:pointer;
  padding:11px 18px 10px;border-radius:999px;display:flex;flex-direction:column;align-items:center;gap:3px;
  font-family:var(--font-cn);transition:.28s;min-width:92px}
.mode .n{font-size:9px;letter-spacing:.2em;opacity:.55}
.mode .t{font-size:12.5px;letter-spacing:.08em}
.mode .h{font-size:9px;letter-spacing:.12em;color:rgba(244,238,226,.38)}
.mode:hover{color:#fff;background:rgba(244,238,226,.06)}
.mode.is-active{color:#1a1511;background:linear-gradient(150deg,#e8cf9f,#c69c62)}
.mode.is-active .h{color:rgba(26,21,17,.62)}
.mode.is-active .n{opacity:.6}

/* ---------------- hint / toast ---------------- */
.hint{position:absolute;left:30px;bottom:34px;font-size:10.5px;letter-spacing:.06em;color:rgba(244,238,226,.4);z-index:5}
.hint b{color:rgba(226,189,133,.9);font-weight:500}
.toast{position:absolute;left:50%;bottom:118px;transform:translate(-50%,10px);max-width:min(560px,80vw);
  padding:12px 18px;border-radius:12px;background:rgba(18,15,12,.82);border:1px solid rgba(226,189,133,.35);
  color:#f6eddd;font-size:12px;line-height:1.55;letter-spacing:.03em;opacity:0;pointer-events:none;
  backdrop-filter:blur(12px);transition:.35s;z-index:8}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ---------------- hotspot labels ---------------- */
.hotspots{position:absolute;inset:0;pointer-events:none;z-index:4}
.hot{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer;
  width:26px;height:26px;border-radius:50%;border:1px solid rgba(244,238,226,.55);
  background:rgba(18,15,12,.55);color:#f4eee2;font-size:10px;display:flex;align-items:center;justify-content:center;
  letter-spacing:.02em;backdrop-filter:blur(6px);transition:.25s;box-shadow:0 4px 16px rgba(0,0,0,.4)}
.hot::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid rgba(226,189,133,.35);
  animation:pulse 2.6s ease-out infinite}
.hot:hover{background:var(--brass);color:#1a1511;border-color:var(--brass)}
@keyframes pulse{0%{transform:scale(.8);opacity:.8}70%{transform:scale(1.35);opacity:0}100%{opacity:0}}
.hot.is-hidden{display:none}

/* ---------------- loading ---------------- */
.loading{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(80% 70% at 50% 45%,#1a1612,#0b0908 75%);transition:opacity .8s ease}
.loading.is-done{opacity:0;pointer-events:none}
.loading-inner{text-align:center;width:min(420px,72vw)}
.loading-mark{font-family:var(--font-display);font-size:54px;letter-spacing:.2em;color:#f4eee2}
.loading-sub{margin-top:8px;font-size:11px;letter-spacing:.3em;color:rgba(244,238,226,.45)}
.bar{height:1px;margin:34px 0 12px;background:rgba(244,238,226,.16);overflow:hidden}
.bar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,#c69c62,#f0d6a5);transition:width .3s}
.loading-text{font-size:10.5px;letter-spacing:.16em;color:rgba(244,238,226,.4)}
.fallback{display:none;position:absolute;inset:0;z-index:30;place-items:center;text-align:center;padding:40px;
  background:#12100d;color:#f4eee2;font-size:14px;line-height:1.8}

@media (max-width: 900px){
  .card{right:14px;top:82px;width:246px;padding:16px}
  .card h1{font-size:21px}
  .height b{font-size:30px}
  .card li{font-size:10.5px}
  .brand .tag{display:none}
  .tools .label{display:none}
  .tool{padding:9px 11px}
  .modes{bottom:18px;max-width:96vw;overflow-x:auto}
  .mode{min-width:74px;padding:9px 12px}
  .hint{display:none}
}
@media (max-width: 640px){
  .card{display:none}
  .brand .mark{font-size:22px}
}