:root {
  --or: #F07A22; --or-d: #C2570E; --or-l: #F9B47A; --or-s: #FFEBD9; --line: #F2DFCC;
  --txt: #3B2A20; --body: #5C4636; --muted: #8F7C6D; --blue: #2F67A8; --blue-bg: #E7F0FB;
  --font: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #2b2420; font-family: var(--font); color: var(--body); overflow: hidden; }
em { font-style: normal; color: var(--or); font-weight: 700; }
.or { color: var(--or); }

/* 1920×1080 舞台，等比缩放进窗口 */
#viewport { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
#stage { position: relative; width: 1920px; height: 1080px; flex: none; transform-origin: center center; }
.slide { position: absolute; inset: 0; padding: 170px 108px 90px; background: #FFF8F1 url(img/bg_content.jpg) center / cover; display: none; }
.slide.active { display: block; animation: fadein .35s ease; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.slide .title { position: absolute; left: 108px; top: 62px; font-size: 40px; font-weight: 700; color: var(--txt); padding-left: 22px; border-left: 9px solid var(--or); line-height: 1.15; }
.slide .title .tag { display: inline-block; margin-left: 18px; font-size: 18px; padding: 4px 14px; border: 1.5px solid var(--or); color: var(--or); background: var(--or-s); border-radius: 20px; vertical-align: middle; }
.slide .pno { position: absolute; right: 108px; bottom: 34px; font-size: 16px; color: var(--muted); }
.step { opacity: 0; transition: opacity .4s; }
.step.shown { opacity: 1; }

/* 封面 */
.cover { background-image: url(img/bg_cover.jpg); padding: 260px 108px; }
.cover .tag { display: inline-block; background: var(--or); color: #fff; font-size: 20px; padding: 6px 16px; }
.cover h1 { font-size: 72px; line-height: 1.3; margin: 30px 0 20px; color: var(--txt); }
.cover .sub { font-size: 28px; margin: 10px 0; }
.cover .chips { margin-top: 40px; font-size: 26px; color: var(--or); }
.cover .chips span { display: inline-block; padding: 8px 26px; margin: 0 8px; border: 1.5px solid #F5C49B; border-radius: 30px; background: rgba(255,255,255,.85); color: var(--or-d); font-weight: 700; }
.demo-note { position: absolute; left: 108px; bottom: 50px; font-size: 18px; color: var(--muted); }
.end h1 { font-size: 80px; }

/* 卡片 */
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.card { background: rgba(255,255,255,.92); border: 1px solid var(--line); border-radius: 22px; padding: 34px 32px; min-height: 380px; }
.card h3 { font-size: 34px; margin: 18px 0 6px; color: var(--txt); }
.card p { font-size: 26px; margin: 10px 0; }
.badge { display: inline-flex; width: 64px; height: 64px; border-radius: 50%; align-items: center; justify-content: center; background: var(--or); color: #fff; font-size: 26px; border: 3px solid #fff; box-shadow: 0 2px 0 var(--line); }
.bar { margin-top: 40px; background: var(--or); color: #fff; font-size: 30px; font-weight: 700; padding: 30px 44px; border-radius: 28px; }
.hint { font-size: 28px; margin: 0 0 24px; }
.row { display: flex; gap: 20px; align-items: center; margin-top: 28px; }
.btn { font: 700 26px var(--font); padding: 16px 40px; border-radius: 40px; border: 0; background: var(--or-d); color: #fff; cursor: pointer; }
.btn.ghost { background: #fff; color: var(--or-d); border: 2px solid var(--or-l); }
.btn.ghost.on { background: var(--or); color: #fff; border-color: var(--or); }
.result { font-size: 28px; font-weight: 700; }

/* 排线 */
.slots, .pool { display: flex; gap: 22px; }
.slot { width: 150px; height: 300px; border: 3px dashed #E5CDB6; border-radius: 18px; background: rgba(255,255,255,.7); position: relative; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 12px; }
.slot::before { content: attr(data-n); position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 46px; height: 46px; border-radius: 50%; background: var(--or-l); color: #fff; font: 700 24px/46px var(--font); text-align: center; }
.slot.ok { border-color: #2E9E4F; border-style: solid; }
.slot.bad { border-color: #D9452B; border-style: solid; }
.pool { margin-top: 26px; min-height: 250px; padding: 14px; background: rgba(255,255,255,.55); border-radius: 18px; }
.wire { width: 136px; height: 220px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; cursor: grab; user-select: none; touch-action: none; font-size: 24px; font-weight: 700; color: var(--txt); background: #fff; border: 2px solid #eee; }
.wire i { display: block; width: 46px; height: 150px; border-radius: 10px; margin-bottom: 12px; }
.wire.sel { outline: 4px solid var(--or); }
.slot .wire { width: 130px; height: 210px; border: 0; background: transparent; }

/* 测线仪 */
.scen { margin-top: 0; }
.tester { margin-top: 40px; display: flex; gap: 60px; }
.unit { flex: 1; background: #2f2a27; border-radius: 26px; padding: 30px 36px; color: #f3e5d8; font-size: 26px; }
.lamps { display: flex; gap: 22px; margin-top: 20px; }
.lamp { width: 58px; height: 58px; border-radius: 50%; background: #4a423d; color: #9a8f86; display: flex; align-items: center; justify-content: center; font-size: 22px; transition: background .15s; }
.lamp.on { background: #3DBE6B; color: #fff; box-shadow: 0 0 22px #3DBE6B; }
.scen-text { font-size: 28px; min-height: 44px; margin: 30px 0 0; color: var(--txt); font-weight: 700; }

/* 底部翻页 */
#nav { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 8px; align-items: center; background: rgba(43,36,32,.72); color: #fff; padding: 6px 12px; border-radius: 30px; font-size: 14px; opacity: .25; transition: opacity .3s; z-index: 5; }
#nav:hover { opacity: 1; }
#nav button { background: none; border: 0; color: #fff; font-size: 22px; width: 36px; height: 32px; cursor: pointer; }

/* 给舞台右侧留出橙小芯站的位置 */
.room { padding-right: 420px; }

/* 橙小芯：住在 1920×1080 舞台里，随页走位 */
#xx { position: absolute; left: 0; top: 0; z-index: 8; width: 300px; height: 520px;
  transition: left 1.1s cubic-bezier(.45,0,.25,1), top 1.1s cubic-bezier(.45,0,.25,1), width 1.1s cubic-bezier(.45,0,.25,1), height 1.1s cubic-bezier(.45,0,.25,1); }
#xxBody { position: absolute; inset: 0; cursor: pointer; transform-origin: 50% 100%; animation: breathe 3.2s ease-in-out infinite; }
#xxBody img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; pointer-events: none; user-select: none; transition: transform .35s; filter: drop-shadow(0 10px 18px rgba(120,60,10,.25)); }
#xx.flip #xxBody img { transform: scaleX(-1); }
/* 视频模式：动作都在动画片段里，只保留走位时的颠簸；静态图在待机片段开播前垫底 */
#xx.vid:not(.walk) #xxBody { animation: none; }
#xxBody video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom; opacity: 0; transition: opacity .18s, transform .35s; pointer-events: none; filter: drop-shadow(0 10px 18px rgba(120,60,10,.22)); }
#xxBody video.on { opacity: 1; }
#xx.flip #xxBody video { transform: scaleX(-1); }
#xxBody.ready img { visibility: hidden; }
#xxShadow { position: absolute; left: 22%; right: 22%; bottom: -8px; height: 22px; border-radius: 50%; background: radial-gradient(rgba(90,45,10,.28), transparent 70%); animation: shadow 3.2s ease-in-out infinite; }
@keyframes breathe { 0%,100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-8px) scale(1.01, .995); } }
@keyframes shadow { 0%,100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(.9); opacity: .75; } }
/* 走路：一颠一颠 */
#xx.walk #xxBody { animation: walk .32s ease-in-out infinite; }
@keyframes walk { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-22px) rotate(3deg); } }
/* 开心：跳两下 */
#xx.happy #xxBody { animation: hop .45s ease-out 2; }
@keyframes hop { 0% { transform: translateY(0) scale(1.06,.94); } 40% { transform: translateY(-70px) scale(.96,1.05); } 75% { transform: translateY(0) scale(1.05,.95); } 100% { transform: translateY(0) scale(1,1); } }
/* 想一想：摇头 */
#xx.think #xxBody { animation: shake .7s ease-in-out 1; }
@keyframes shake { 0%,100% { transform: rotate(0); } 20% { transform: rotate(-6deg); } 45% { transform: rotate(5deg); } 70% { transform: rotate(-3deg); } }
/* 打招呼：探身 */
#xx.wave #xxBody { animation: lean 1s ease-in-out 1; }
@keyframes lean { 0%,100% { transform: rotate(0) translateY(0); } 30% { transform: rotate(-5deg) translateY(-10px); } 60% { transform: rotate(4deg) translateY(-4px); } }

/* 头顶的表情符号 */
.fx { position: absolute; left: 50%; top: -10px; font-size: 64px; font-weight: 900; color: var(--or); transform: translateX(-50%); opacity: 0; pointer-events: none; }
.fx.pop { animation: pop 1.3s ease-out; }
@keyframes pop { 0% { opacity: 0; transform: translate(-50%, 20px) scale(.4); } 25% { opacity: 1; transform: translate(-50%, -30px) scale(1.15); } 70% { opacity: 1; transform: translate(-50%, -40px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -60px) scale(.9); } }

/* 说话气泡（在她身边，舞台坐标） */
.say { position: absolute; bottom: 72%; width: 560px; background: #fff; color: var(--txt); font-size: 30px; line-height: 1.55; padding: 22px 28px; border-radius: 26px; border: 3px solid var(--or-l); box-shadow: 0 12px 30px rgba(120,60,10,.18); cursor: pointer; }
.say.left { right: 82%; border-bottom-right-radius: 6px; }
.say.right { left: 82%; border-bottom-left-radius: 6px; }
.say::after { content: ""; position: absolute; bottom: -3px; width: 26px; height: 26px; background: #fff; border: 3px solid var(--or-l); border-top: 0; }
.say.left::after { right: -14px; border-left: 0; transform: skewX(-35deg); }
.say.right::after { left: -14px; border-right: 0; transform: skewX(35deg); }
.say.top { border-bottom-right-radius: 6px; font-size: 27px; }
.say.top::after { right: 70px; bottom: -15px; width: 26px; height: 26px; border-left: 0; border-top: 0; transform: rotate(45deg); }
.say b { color: var(--or); }
.say.in { animation: sayin .3s ease-out; }
@keyframes sayin { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }

/* 对话框：在她身边打开 */
#chat { position: absolute; z-index: 9; width: 680px; height: 640px; background: #fffaf5; border-radius: 28px; border: 3px solid var(--or-l); box-shadow: 0 20px 50px rgba(80,40,10,.3); display: flex; flex-direction: column; overflow: hidden; font-size: 26px; }
#chat header { display: flex; gap: 14px; align-items: baseline; padding: 16px 22px; background: var(--or); color: #fff; }
#chat header b { font-size: 30px; }
#chat header small { flex: 1; opacity: .85; font-size: 20px; }
#close { background: none; border: 0; color: #fff; font-size: 40px; line-height: 1; cursor: pointer; }
#msgs { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.m { max-width: 86%; padding: 12px 18px; border-radius: 20px; line-height: 1.55; white-space: pre-wrap; }
.m.bot { background: #fff; border: 1.5px solid var(--line); align-self: flex-start; }
.m.me { background: var(--or); color: #fff; align-self: flex-end; }
#chips { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 18px 12px; }
#chips button { font: 21px var(--font); border: 1.5px solid var(--or-l); background: #fff; color: var(--or-d); border-radius: 20px; padding: 6px 16px; cursor: pointer; }
#ask { display: flex; border-top: 1.5px solid var(--line); }
#ask input { flex: 1; border: 0; padding: 18px 20px; font: 24px var(--font); background: #fff; outline: none; }
#ask button { border: 0; background: var(--or-d); color: #fff; padding: 0 30px; font: 700 24px var(--font); cursor: pointer; }
.hidden { display: none !important; }

/* 三维演示页 */
.steps3d { gap: 14px; }
.steps3d .btn.on { background: var(--or); color: #fff; }
.view3d { position: relative; height: 640px; margin-top: 18px; border-radius: 28px; background: radial-gradient(ellipse at 50% 40%, #fff 0%, #FFF1E4 70%); border: 2px solid #F2DFCC; overflow: hidden; cursor: grab; }
.view3d:active { cursor: grabbing; }
.view3d canvas { display: block; }