/* 交互体验页 —— 与官网同一套纸白 / 细线 / 等宽标注 */

:root{
  --bg:#fff;
  --alt:#f5f5f7;
  --ink:#1d1d1f;
  --sub:#6e6e73;
  --hair:rgba(0,0,0,.09);
  --hair-2:rgba(0,0,0,.16);
  --sans:"Inter","PingFang SC","Microsoft YaHei UI","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","SFMono-Regular",Consolas,"Courier New",monospace;
  --bar:50px;
  --dock:76px;
  --pad:clamp(16px,4vw,40px);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  overflow:hidden;
  background:var(--alt);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }

/* ============================ 顶栏 ============================ */
.bar{
  position:fixed; top:0; left:0; right:0; height:var(--bar); z-index:40;
  display:flex; align-items:center; gap:18px; padding:0 var(--pad);
  background:color-mix(in oklab, var(--alt) 76%, transparent);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--hair);
}
.brand{ display:flex; align-items:baseline; gap:9px; font-weight:600; font-size:15px; letter-spacing:.01em; }
.brand small{ font-family:var(--mono); font-weight:500; font-size:8.5px; letter-spacing:.28em; color:var(--sub); }
.tag{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.26em; color:var(--sub);
  padding-left:16px; border-left:1px solid var(--hair-2); line-height:1.3;
}
.sp{ flex:1; }
.back{ font-size:12.5px; color:var(--sub); transition:color .2s ease; }
.back:hover{ color:var(--ink); }

/* ============================ 舞台 ============================ */
#stage{ position:fixed; top:var(--bar); left:0; right:0; bottom:var(--dock); z-index:1; }
#gl{ position:absolute; inset:0; display:block; width:100%; height:100%; touch-action:none; }
#faceLayer{ position:absolute; inset:0; z-index:5; }
#faceLayer .face-frame{
  position:absolute; left:0; top:0; width:100%; height:100%;
  border:0; background:transparent;
}
body.observe #faceLayer{ pointer-events:none; }
body.idle #faceLayer{ pointer-events:none; }

/* ============================ 底部工具条 ============================ */
.dock{
  position:fixed; left:0; right:0; bottom:0; height:var(--dock); z-index:30;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px;
  padding:0 var(--pad);
  background:color-mix(in oklab, var(--alt) 76%, transparent);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  border-top:1px solid var(--hair);
}

/* 操作说明：中文不走等宽。
   mono 栈里没有汉字，10px 的中文会落到系统兜底字（Windows 上是宋体），
   小字号 + 淡灰 = 一团糊。这里换成 sans，字号提到 12，颜色压深一档。 */
.hints{
  font-family:var(--sans); font-size:12px; line-height:1.85; letter-spacing:.01em;
  color:#48484a; max-width:52ch; transition:opacity .7s ease;
}
.hints p + p{ margin-top:3px; }
.hints b{
  font-family:var(--sans); font-weight:600; font-size:12px; color:var(--ink);
  margin-right:7px; letter-spacing:.02em;
}
body.engaged .hints{ opacity:.26; }

.views{
  display:flex; gap:1px; justify-self:center;
  padding:3px; border-radius:999px; background:#fff; border:1px solid var(--hair);
}
.views button{
  padding:6px 13px; border-radius:999px; font-size:12px; color:var(--sub);
  white-space:nowrap; transition:background .18s ease, color .18s ease;
}
.views button:hover{ color:var(--ink); }
.views button.on{ background:var(--ink); color:#fff; }

.acts{ display:flex; align-items:center; gap:8px; justify-self:end; }
.tools{ display:flex; align-items:center; gap:8px; }

.pill{
  display:inline-flex; align-items:center; height:32px; padding:0 14px;
  border-radius:999px; border:1px solid var(--hair-2);
  font-size:12px; letter-spacing:.01em; white-space:nowrap;
  transition:background .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease;
}
.pill:hover{ border-color:var(--ink); }
.pill.ghost{ color:var(--sub); border-color:var(--hair); }
.pill.ghost:hover{ color:var(--ink); border-color:var(--ink); }
.pill.ghost.on{ color:var(--ink); border-color:var(--ink); }
.pill.solid{ background:var(--ink); border-color:var(--ink); color:#fff; }
.pill.solid:hover{ opacity:.86; }

/* 设计台控件（?lab=1 才出现） */
.sel{ display:none; }
.pill.lab{ display:none; }
html.lab .sel{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:10px; color:var(--sub);
}
html.lab .sel select{
  font:inherit; font-size:10.5px; color:var(--ink);
  background:#fff; border:1px solid var(--hair); border-radius:8px;
  padding:5px 6px; max-width:180px;
}
html.lab .pill.lab{ display:inline-flex; }

/* ============================ 装配 / 提示 ============================ */
#loading{
  position:fixed; inset:0; z-index:80;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  background:var(--alt);
  transition:opacity .6s ease, visibility .6s ease;
}
#loading p{ font-family:var(--mono); font-size:11px; letter-spacing:.3em; color:var(--sub); }
#loading::after{
  content:""; width:120px; height:1px;
  background:linear-gradient(90deg, transparent, var(--ink), transparent);
  background-size:200% 100%; opacity:.3;
  animation:load 1.4s linear infinite;
}
@keyframes load{ from{ background-position:100% 0; } to{ background-position:-100% 0; } }
#loading.done{ opacity:0; visibility:hidden; pointer-events:none; }

#toast{
  position:fixed; left:50%; bottom:calc(var(--dock) + 22px); z-index:70;
  transform:translate(-50%, 6px);
  padding:8px 15px; border-radius:999px;
  background:rgba(29,29,31,.9); color:#fff;
  font-size:12px; letter-spacing:.01em; white-space:nowrap;
  opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
#toast.on{ opacity:1; transform:translate(-50%, 0); }

/* ============================ 嵌进官网时 ============================ */
html.embed, html.embed body{ background:transparent; }
html.embed{ --dock:0px; }
html.embed .bar, html.embed .dock{ display:none; }
html.embed #stage{ top:0; bottom:0; }
html.embed, html.embed body{ touch-action:pan-y; }

/* 整机状态：不盖任何全屏层。
   以前这里铺了一块透明 <button> 等着被点，结果它把 pointerdown/move 全吃了，
   表既转不动也拖不动，只能看它自己晃（见 main.js attachDrag 的点击判定）。 */
html.embed #gl{ cursor:grab; }
html.embed #gl:active{ cursor:grabbing; }

.idle-hint{ display:none; }
html.embed .idle-hint{
  display:block; position:fixed; left:50%; bottom:20px; z-index:26; transform:translateX(-50%);
  font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:.08em; color:#48484a;
  pointer-events:none; transition:opacity .45s ease;
}
html.embed.entered .idle-hint{ opacity:0; }

.embed-hints{ display:none; opacity:0; transition:opacity .5s ease .2s; }
.embed-acts{ display:none; opacity:0; transition:opacity .5s ease .2s; }
/* 嵌在官网里时这行说明浮在三维画面上，比独立页再大一档、再深一点 */
html.embed.entered .embed-hints{
  display:block; position:fixed; left:var(--pad); bottom:18px; z-index:26;
  font-family:var(--sans); font-size:12.5px; line-height:1.8; letter-spacing:.01em;
  color:#3f3f42; max-width:52ch;
}
html.embed.entered .embed-hints p + p{ margin-top:3px; }
html.embed.entered .embed-hints b{
  font-family:var(--sans); font-weight:600; font-size:12.5px; color:var(--ink); margin-right:7px;
}
html.embed.entered .embed-acts{
  display:flex; align-items:center; gap:8px;
  position:fixed; right:var(--pad); bottom:16px; z-index:26;
}
html.embed.entered .embed-hints,
html.embed.entered .embed-acts{ opacity:1; }
html.embed .embed-acts .pill{ background:#fff; }
html.embed .embed-acts .pill.solid{ background:var(--ink); }

/* 贴近表盘后表带会跑到这一屏外面，用那一屏的纸色把它化掉，别像被切了一刀 */
html.embed.entered #stage::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:96px; z-index:6;
  background:linear-gradient(to bottom, color-mix(in srgb, var(--embed-bg, #fff) 0%, transparent), var(--embed-bg, #fff) 82%);
  pointer-events:none;
}
html.embed.entered #stage::before{
  content:""; position:absolute; left:0; right:0; top:0; height:72px; z-index:6;
  background:linear-gradient(to bottom, var(--embed-bg, #fff), color-mix(in srgb, var(--embed-bg, #fff) 0%, transparent));
  pointer-events:none;
}

/* 嵌进页面时提示条挪到顶上，别压住底部那排按钮 */
html.embed #toast{ bottom:auto; top:14px; transform:translate(-50%,-6px); }
html.embed #toast.on{ transform:translate(-50%,0); }

/* ============================ 窄屏 ============================ */
@media (max-width:1120px){
  .hints{ max-width:32ch; }
  .hints p:nth-child(2){ display:none; }
}
@media (max-width:960px){
  :root{ --dock:68px; }
  .dock{ grid-template-columns:auto 1fr auto; gap:14px; }
  /* 字号提到 12 之后，22ch 只剩 ~130px，一行会被截成半个词 —— 放到 42ch */
  .hints{ max-width:42ch; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  .hints p:nth-child(3){ display:none; }
  .views{ justify-self:center; overflow-x:auto; max-width:100%; scrollbar-width:none; }
  .views::-webkit-scrollbar{ display:none; }
}
@media (max-width:720px){
  :root{ --dock:64px; }
  .tag{ display:none; }
  .dock{ grid-template-columns:1fr auto; gap:10px; }
  .hints{ display:none; }
  .views{ justify-self:start; }
  .views button{ padding:6px 10px; font-size:11.5px; }
  #modeBtn{ display:none; }
  .pill{ height:30px; padding:0 12px; font-size:11.5px; }
  /* 嵌在页面里：手机上只要那两枚按钮，说明文字让位 */
  html.embed.entered .embed-hints{ display:none; }
  html.embed.entered .embed-acts{ left:var(--pad); right:var(--pad); justify-content:flex-end; }
}
@media (prefers-reduced-motion:reduce){
  #loading::after{ animation:none; }
  *{ transition-duration:.01ms !important; }
}