/* 互动说明书模板样式（www/templates/default）——风格参考 LINKOO 官方站点：
   暖米底 + 活力橙 + 木质米色，圆角卡片、柔和阴影。
   主题色由 {{theme.*}} 占位符在导出时替换；data/site.json 可在运行时覆盖。 */
:root{
  --brand-orange:#ff7d29;
  --brand-orange-light:#ffa05a;
  --brand-bg:#f5f3f0;
  --brand-wood:#e8d9c5;
  --brand-green:#8fb996;
  --brand-text:#2c2620;
  --line:#e4ded6;
  --muted:#8b8377;
  --card:#ffffff;
  --shadow:0 10px 30px rgba(44,38,32,.10);
  --radius:18px;
  --maxw:1120px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--brand-bg);color:var(--brand-text);
  font-family:"Outfit","PingFang SC","Microsoft YaHei",-apple-system,"Segoe UI",sans-serif;
  line-height:1.6;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* ---------- 顶栏 ---------- */
.topbar{
  position:sticky;top:0;z-index:30;background:rgba(245,243,240,.88);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.topbar .inner{max-width:var(--maxw);margin:0 auto;padding:10px 20px;
  display:flex;align-items:center;gap:14px}
.topbar .brand{display:flex;align-items:center;gap:10px;font-weight:700}
.topbar .brand img{height:30px;width:auto}
.topbar h1{font-size:16px;margin:0;font-weight:600;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .spacer{flex:1}
.back{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;
  background:var(--card);border:1px solid var(--line);font-size:13px;font-weight:600;
  cursor:pointer;transition:.18s;white-space:nowrap}
.back:hover{border-color:var(--brand-orange);color:var(--brand-orange)}
.topbar .meta{font-size:12.5px;color:var(--muted);white-space:nowrap}
/* V0.9.31：3D 页顶栏「编号」开关（零件标签显隐），on 态为实心橙 */
.tgl{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;
  background:var(--card);border:1px solid var(--line);font-size:13px;font-weight:600;
  font-family:inherit;color:var(--muted);cursor:pointer;white-space:nowrap;transition:.18s}
.tgl:hover{border-color:var(--brand-orange);color:var(--brand-orange)}
.tgl.on{background:var(--brand-orange);border-color:var(--brand-orange);color:#fff}

/* ---------- 首页 ---------- */
.hero{padding:38px 0 8px}
.hero-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  overflow:hidden;display:grid;grid-template-columns:1.05fr .95fr}
.hero-media{position:relative;background:linear-gradient(135deg,var(--brand-wood),#f7efe4);
  min-height:320px;display:flex;align-items:center;justify-content:center}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover}
.hero-media .ph{font-size:13px;color:var(--muted)}
.hero-body{padding:38px 40px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.lg{height:44px;width:auto;align-self:flex-start}
.eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand-orange)}
.toyname{font-size:34px;line-height:1.2;margin:0;font-weight:800;letter-spacing:-.01em}
.tagline{margin:0;color:var(--muted);font-size:15px}
.intro{margin:0;font-size:14px;color:var(--muted)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.btn{display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border-radius:999px;
  font-weight:700;font-size:15px;cursor:pointer;border:1px solid transparent;transition:.18s}
.btn .ic{font-size:17px;line-height:1}
.btn-primary{background:var(--brand-orange);color:#fff;box-shadow:0 8px 20px rgba(255,125,41,.32)}
.btn-primary:hover{background:var(--brand-orange-light);transform:translateY(-1px)}
.btn-ghost{background:#fff;color:var(--brand-text);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--brand-orange);color:var(--brand-orange)}
.footnote{padding:22px 0 34px;text-align:center;color:var(--muted);font-size:12.5px}

/* ---------- 2D 说明书 ---------- */
.page-wrap{max-width:900px;margin:0 auto;padding:22px 16px 60px}
.step-block{margin:0 0 18px}
.step-block img{width:100%;height:auto;border-radius:14px;background:#fff;box-shadow:var(--shadow)}

/* ---------- 3D 说明书 ---------- */
body.fullbleed{height:100vh;overflow:hidden}
#c{display:block;width:100vw;height:100vh;background:#eef1f4;touch-action:none}

/* 播放器条：固定漂浮在画面下部中央，视频播放器式一行 */
#player{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:40;
  display:flex;align-items:center;gap:12px;padding:10px 16px;border-radius:999px;
  background:rgba(255,255,255,.96);border:1px solid var(--line);box-shadow:var(--shadow);
  width:min(680px,92vw)}
#player button{display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:#fff;color:var(--brand-text);cursor:pointer;
  border-radius:999px;font-size:14px;font-family:inherit;transition:.15s}
#playBtn{width:44px;height:44px;font-size:16px;background:var(--brand-orange);
  border-color:var(--brand-orange);color:#fff;flex:0 0 auto}
#playBtn:hover{background:var(--brand-orange-light)}
.tbtn{padding:9px 18px;font-weight:600;flex:0 0 auto}
.tbtn:hover{border-color:var(--brand-orange);color:var(--brand-orange)}
#scrub{flex:1;min-width:80px;accent-color:var(--brand-orange);height:4px;cursor:pointer}

#stepbar{position:fixed;left:50%;top:64px;transform:translateX(-50%);z-index:40;
  display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;
  background:rgba(255,255,255,.96);border:1px solid var(--line);box-shadow:var(--shadow)}
#stepbar button{padding:7px 14px;border:1px solid var(--line);border-radius:999px;
  background:#fff;cursor:pointer;font-size:13px;font-family:inherit}
#stepbar button:hover{border-color:var(--brand-orange);color:var(--brand-orange)}
#stepSel{padding:7px 10px;border:1px solid var(--line);border-radius:999px;background:#fff;
  font-size:13px;font-family:inherit;max-width:190px}
#stepTag{font-weight:700;color:var(--brand-orange);min-width:74px;text-align:center;font-size:13px}

/* 操作说明：仅 PC 显示 */
#hint{position:fixed;right:18px;bottom:96px;z-index:35;padding:12px 16px;max-width:250px;
  border-radius:14px;background:rgba(255,255,255,.94);border:1px solid var(--line);
  box-shadow:var(--shadow);color:var(--muted);font-size:12.5px;line-height:1.7}
#hint b{color:var(--brand-text)}

/* 加载过渡画面 */
#overlay{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;background:rgba(245,243,240,.96);
  transition:opacity .3s}
#overlay.hide{opacity:0;pointer-events:none}
#overlay .ring{width:46px;height:46px;border-radius:50%;border:4px solid var(--brand-wood);
  border-top-color:var(--brand-orange);animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#overlay .t{font-size:15px;font-weight:700;color:var(--brand-text)}
#overlay .s{font-size:12.5px;color:var(--muted)}
#overlay .bar{width:260px;height:6px;border-radius:3px;background:var(--brand-wood);overflow:hidden}
#overlay .bar i{display:block;height:100%;width:0%;background:var(--brand-orange);transition:width .2s}
#err{position:fixed;left:50%;top:44%;transform:translateX(-50%);z-index:80;display:none;
  background:#fdecea;border:1px solid #e57373;color:#b71c1c;padding:12px 16px;
  border-radius:10px;font-size:13px;max-width:70vw}

/* ---------- 响应式：平板 ---------- */
@media (max-width:900px){
  .hero-card{grid-template-columns:1fr}
  .hero-media{min-height:240px}
  .hero-body{padding:28px 26px}
  .toyname{font-size:28px}
  .lg{height:38px}
}
/* ---------- 响应式：手机 ---------- */
@media (max-width:560px){
  .wrap{padding:0 14px}
  .hero{padding:20px 0 4px}
  .hero-media{min-height:190px}
  .hero-body{padding:22px 18px;gap:11px}
  .toyname{font-size:23px}
  .tagline{font-size:13.5px}
  .intro{display:none}
  .actions{flex-direction:column;gap:10px}
  .btn{width:100%;justify-content:center;padding:13px 18px}
  .topbar h1{font-size:14px}
  .topbar .meta{display:none}
  .tgl{padding:6px 11px;font-size:12px}
  #hint{display:none}                 /* 操作说明在手机模式不显示 */
  #player{bottom:12px;padding:8px 12px;gap:9px}
  .tbtn{padding:8px 13px;font-size:13px}
  #playBtn{width:40px;height:40px}
  #stepbar{top:58px;gap:6px;padding:6px 9px}
  #stepSel{max-width:120px}
  #stepTag{display:none}
  .step-block img{border-radius:10px}
}