:root{
  --bg:#f5f7fb;--card:#fff;--text:#172033;--muted:#667085;--line:#e6eaf0;
  --blue:#1769e0;--blue2:#0f58c9;--blueSoft:#eef5ff;--green:#14a46b;--red:#e13c4d;--redSoft:#fff1f3;
  --shadow:0 16px 45px rgba(26,39,66,.08);--radius:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
button,input{font:inherit}button{cursor:pointer}
.topbar{height:68px;background:rgba(255,255,255,.88);border-bottom:1px solid rgba(226,231,239,.9);position:sticky;top:0;z-index:20;backdrop-filter:blur(16px)}
.topbar-inner{max-width:1180px;height:100%;margin:auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between}
.brand{border:0;background:none;padding:0;display:flex;align-items:center;gap:11px;text-align:left;color:var(--text)}
.brand-logo{width:36px;height:36px;border-radius:11px;background:linear-gradient(145deg,#2176ec,#0d50bc);display:grid;place-items:center;position:relative;box-shadow:0 7px 18px rgba(23,105,224,.25)}
.brand-logo i:first-child{width:17px;height:12px;border:2px solid #fff;border-radius:3px}
.brand-logo i:last-child{position:absolute;width:8px;height:2px;background:#fff;right:5px;border-radius:2px}
.brand strong,.brand small{display:block}.brand strong{font-size:15px}.brand small{font-size:12px;color:var(--muted);margin-top:1px}
.link-button,.back-button{border:0;background:transparent;color:#526075;padding:9px 12px;border-radius:10px}
.link-button:hover,.back-button:hover{background:#edf1f6;color:var(--text)}
.app-shell{max-width:1180px;margin:auto;padding:38px 24px 70px}
.screen{display:none}.screen.is-active{display:block}
.intro{text-align:center;max-width:760px;margin:0 auto 30px}
.intro-tag{display:inline-flex;padding:6px 11px;border-radius:99px;background:#e8f2ff;color:var(--blue);font-size:12px;font-weight:800;letter-spacing:.04em}
.intro h1{font-size:clamp(29px,4vw,44px);line-height:1.18;margin:15px 0 12px;letter-spacing:-.035em}
.intro p{font-size:16px;color:var(--muted);line-height:1.8;margin:0}
.layout-grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(330px,.82fr);gap:22px;align-items:start}
.card{background:var(--card);border:1px solid rgba(226,231,239,.86);border-radius:var(--radius);box-shadow:var(--shadow)}
.form-card{padding:30px}
.card-title{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px}
.card-title>div{display:flex;align-items:center;gap:11px}
.card-title div>span{width:32px;height:32px;border-radius:9px;background:var(--blueSoft);color:var(--blue);display:grid;place-items:center;font-size:12px;font-weight:900}
.card-title h2{font-size:20px;margin:0}.card-title small{color:var(--muted);font-size:13px;padding-top:7px}
.presets{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}
.preset{border:1px solid var(--line);background:#fff;color:#4d596c;border-radius:11px;padding:10px 12px;font-size:13px;transition:.18s}
.preset b{color:var(--blue);margin-right:4px}.preset:hover,.preset.is-active{border-color:#8db9f7;background:#f2f7ff;color:#174c95}
.segment-list{display:grid;gap:12px}
.segment-card{border:1px solid var(--line);border-radius:17px;padding:18px;background:#fbfcfe}
.segment-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.segment-head b{font-size:15px}.segment-head small{color:var(--muted)}
.time-grid{display:grid;grid-template-columns:1fr 28px 1fr;align-items:center;gap:8px}.time-arrow{text-align:center;color:#96a0af;font-size:20px}
.time-field label{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.time-field label span{font-size:13px;font-weight:750}.time-field label small{font-size:11px;color:#99a2b0}
.number-box{height:52px;display:grid;grid-template-columns:42px 1fr 42px;border:1px solid #dfe4eb;border-radius:12px;background:#fff;overflow:hidden}
.number-box button{border:0;background:#f6f8fb;color:#526075;font-size:20px}.number-box button:hover{background:#eaf1fa;color:var(--blue)}
.number-box input{min-width:0;border:0;text-align:center;font-size:20px;font-weight:850;color:var(--text);outline:0;-moz-appearance:textfield}.number-box input::-webkit-inner-spin-button{display:none}
.advanced{margin-top:18px;border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden}
.advanced summary{list-style:none;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}.advanced summary::-webkit-details-marker{display:none}
.advanced summary span b,.advanced summary span small{display:block}.advanced summary span b{font-size:14px}.advanced summary span small{font-size:12px;color:var(--muted);margin-top:3px}
.advanced summary>i{font-style:normal;color:#8490a2;font-size:20px;transition:.2s}.advanced[open] summary>i{transform:rotate(180deg)}
.advanced-body{border-top:1px solid var(--line);padding:18px;background:#fafbfd}.field-group+.field-group{margin-top:21px}.group-label{display:block;font-size:13px;font-weight:800;margin-bottom:10px}
.segmented{display:grid;grid-template-columns:repeat(3,1fr);background:#edf1f6;padding:4px;border-radius:12px}.segmented button{border:0;background:transparent;padding:10px;border-radius:9px;color:#6b7688;font-weight:750}.segmented button.is-active{background:#fff;color:var(--blue);box-shadow:0 2px 8px rgba(20,31,55,.08)}
.field-help{font-size:12px;color:var(--muted);margin:8px 0 0}.mode-list{display:grid;gap:8px}.mode-item{display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:#fff;border-radius:13px;padding:13px 14px;cursor:pointer}.mode-item input{position:absolute;opacity:0}.mode-item span{flex:1}.mode-item b,.mode-item small{display:block}.mode-item b{font-size:14px}.mode-item small{font-size:12px;color:var(--muted);margin-top:3px}.mode-item>i{width:18px;height:18px;border:2px solid #c6ced9;border-radius:50%;position:relative}.mode-item.is-selected{border-color:#88b7f6;background:#f5f9ff}.mode-item.is-selected>i{border-color:var(--blue)}.mode-item.is-selected>i:after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--blue)}
.logic-summary{margin-top:18px;background:var(--blueSoft);border:1px solid #d7e8ff;border-radius:14px;padding:14px 15px;color:#204a80;font-size:14px;line-height:1.7}.logic-summary b{color:#123f78}.logic-flow{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:6px}.logic-flow span{background:#fff;border:1px solid #d9e7fa;border-radius:8px;padding:4px 8px;font-size:12px;font-weight:700}.logic-flow i{font-style:normal;color:#7a99bd}
.error{margin-top:12px;padding:11px 13px;border-radius:11px;background:#fff0f2;color:#b42336;font-size:13px}
.primary-button,.secondary-button{border:0;border-radius:13px;min-height:52px;padding:0 21px;font-weight:850;transition:.18s}.primary-button{background:linear-gradient(135deg,#2176ec,#1158c7);color:#fff;box-shadow:0 10px 24px rgba(23,105,224,.23)}.primary-button:hover{transform:translateY(-1px);box-shadow:0 13px 29px rgba(23,105,224,.28)}.primary-button:active{transform:translateY(0)}
.form-card>.primary-button{width:100%;margin-top:16px;font-size:16px;display:flex;align-items:center;justify-content:center;gap:12px}.save-note{text-align:center;color:#778294;font-size:12px;margin:12px 0 0}.save-note span{color:var(--green);font-weight:900}
.board-card{padding:26px;position:sticky;top:92px}.board-title{margin-bottom:10px}.board-wrap{max-width:330px;margin:0 auto;position:relative}.pcb{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 25px rgba(9,47,39,.18))}
.led>rect:first-child{fill:transparent;stroke:#d8dfe2;stroke-width:1;opacity:.42}.led .core{fill:#eef2f3;opacity:.10;filter:none;transition:fill .12s,opacity .12s,filter .12s}.led.is-on>rect:first-child{opacity:.82}.led-blue.is-on .core{fill:#36a8ff;opacity:1;filter:drop-shadow(0 0 7px #36a8ff)}.led-red.is-on .core{fill:#ff3d54;opacity:1;filter:drop-shadow(0 0 8px #ff3d54)}.led-green.is-on .core{fill:#37d483;opacity:1;filter:drop-shadow(0 0 7px #37d483)}
.set-button{transform-box:fill-box;transform-origin:center;transition:.12s}.button-pointer{opacity:.9}.status-ring,.power-ring{transition:.2s;transform-box:fill-box;transform-origin:center}.pcb.is-status-focus .status-ring,.pcb.is-power-focus .power-ring{opacity:.9;animation:ringPulse 1.3s ease-in-out infinite}
.board-callout{display:flex;gap:11px;align-items:center;background:#eff6ff;border-radius:13px;padding:13px 14px;margin-top:6px}.board-callout>i{width:9px;height:9px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 5px rgba(23,105,224,.12)}.board-callout.is-red{background:var(--redSoft)}.board-callout.is-red>i{background:var(--red);box-shadow:0 0 0 5px rgba(225,60,77,.12)}.board-callout b,.board-callout small{display:block}.board-callout b{font-size:13px}.board-callout small{font-size:12px;color:#62718a;margin-top:3px}
.led-legend{display:grid;grid-template-columns:1fr 1fr;gap:9px 12px;margin-top:16px;color:#687588;font-size:12px}.led-legend span{display:flex;align-items:center;gap:7px}.led-legend i{width:8px;height:8px;border-radius:50%;background:#aaa}.led-legend i.blue{background:#36a8ff}.led-legend i.red{background:#f4495c}.led-legend i.green{background:#37c97e}.led-legend .legend-focus{font-weight:800;color:#a92738}

/* 引导式教程：每次只显示一个操作 */
.tutorial-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.back-button{font-weight:700}.target-pill{max-width:78%;font-size:13px;color:#536176;background:#fff;border:1px solid var(--line);border-radius:99px;padding:9px 14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.guide-card{overflow:hidden;padding:0}.guide-topline{display:flex;align-items:center;justify-content:space-between;padding:22px 28px 13px}.guide-topline>div{display:flex;align-items:center;gap:10px}.guide-step-label{display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:0 11px;border-radius:9px;background:var(--blue);color:#fff;font-size:12px;font-weight:900}.guide-step-type{color:#6b7688;font-size:13px;font-weight:800}.guide-progress-text{color:#778294;font-size:13px;font-weight:800}.guide-progress{height:5px;background:#edf1f6}.guide-progress i{display:block;width:10%;height:100%;border-radius:0 99px 99px 0;background:linear-gradient(90deg,#2176ec,#60a2fa);transition:width .28s ease}
.guide-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);gap:34px;padding:38px 42px 34px;align-items:center}.guide-copy{min-width:0}.guide-eyebrow{margin:0 0 9px;color:var(--blue);font-size:12px;font-weight:900;letter-spacing:.08em}.guide-copy h1{font-size:clamp(30px,4vw,48px);line-height:1.14;letter-spacing:-.04em;margin:0 0 25px}
.guide-action-box{border:1px solid #d8e7fb;background:#f3f7fd;border-radius:17px;padding:17px 18px;display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start}.guide-action-box>span{display:inline-flex;min-height:28px;align-items:center;padding:0 9px;border-radius:8px;background:#fff;color:var(--blue);border:1px solid #d6e6fb;font-size:11px;font-weight:900}.guide-action-box strong{font-size:16px;line-height:1.65;color:#264c7d}
.guide-feedback-box{display:flex;align-items:flex-start;gap:15px;margin-top:14px;border:1px solid #ffd9df;background:linear-gradient(135deg,#fff1f3,#fff8f9);border-radius:18px;padding:18px}.guide-led-symbol{width:45px;height:45px;flex:0 0 auto;border-radius:14px;background:#fff;display:grid;place-items:center;box-shadow:0 8px 22px rgba(170,36,57,.09)}.guide-led-symbol i{width:16px;height:16px;border-radius:50%;background:#ff4057;box-shadow:0 0 0 7px rgba(255,64,87,.10),0 0 17px #ff6678}.guide-feedback-box small{display:block;color:#a32b3d;font-size:11px;font-weight:850;margin-bottom:5px}.guide-feedback-box strong{display:block;color:#8c2032;font-size:21px;line-height:1.35}.guide-feedback-box p{margin:7px 0 0;color:#7e4a54;font-size:13px;line-height:1.65}.guide-feedback-box.is-green{border-color:#cfeedd;background:linear-gradient(135deg,#eefaf4,#f8fdfb)}.guide-feedback-box.is-green .guide-led-symbol i{background:#37d483;box-shadow:0 0 0 7px rgba(55,212,131,.11),0 0 17px #5bdd9d}.guide-feedback-box.is-green small{color:#147b52}.guide-feedback-box.is-green strong{color:#176a4b}.guide-feedback-box.is-green p{color:#4d715f}
.guide-count-box{margin-top:14px;border:1px dashed #bcd3ef;background:#f7faff;border-radius:15px;min-height:68px;padding:11px 16px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;color:#536176}.guide-count-box[hidden]{display:none}.guide-count-box>span{font-size:13px;font-weight:750}.guide-count-box>strong{font-size:36px;line-height:1;color:var(--blue)}.guide-count-box>b{font-size:15px}.guide-count-box>small{width:100%;color:#8390a3;font-size:11px}.guide-trouble{margin-top:12px;border-left:3px solid #f0a531;background:#fff8eb;border-radius:0 11px 11px 0;padding:10px 12px;color:#845918;font-size:12px;line-height:1.6}
.guide-visual{background:linear-gradient(180deg,#f8fafc,#f2f5f9);border:1px solid #e9edf3;border-radius:22px;padding:22px;min-width:0}.guide-board{max-width:285px;margin:0 auto}.guide-board .pcb{filter:drop-shadow(0 17px 22px rgba(9,47,39,.18))}.guide-board .button-pointer{opacity:.9}.guide-focus-label{max-width:300px;margin:11px auto 0;display:flex;align-items:center;justify-content:center;gap:9px;border-radius:11px;background:#fff1f3;color:#9d2638;padding:10px 12px;font-size:12px;font-weight:850}.guide-focus-label i{width:10px;height:10px;border-radius:50%;background:#ff4057;box-shadow:0 0 9px #ff7080}.guide-focus-label.is-green{background:#edf9f3;color:#16734f}.guide-focus-label.is-green i{background:#37d483;box-shadow:0 0 9px #5bdd9d}.guide-replay{position:static;display:block;margin:11px auto 0;padding:8px 11px}
.guide-footer{min-height:86px;border-top:1px solid var(--line);background:#fbfcfe;padding:16px 28px;display:grid;grid-template-columns:minmax(120px,auto) 1fr minmax(220px,auto);align-items:center;gap:20px}.secondary-button{background:#fff;color:#526075;border:1px solid #dfe5ed}.secondary-button:hover{background:#f3f6f9}.secondary-button:disabled{opacity:.45;cursor:default}.guide-footer .primary-button{min-width:220px}.guide-dots{display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;overflow:auto;padding:5px}.guide-dot{display:block;width:8px;height:8px;flex:0 0 auto;border:0;border-radius:50%;background:#d7dee8;padding:0;transition:.2s}.guide-dot.is-done{background:#8eb7ee}.guide-dot.is-active{width:24px;border-radius:99px;background:var(--blue)}.guide-bottom-note{display:flex;align-items:center;justify-content:center;gap:9px;margin:15px 0 0;color:#788496;font-size:12px}.guide-bottom-note>span{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px rgba(20,164,107,.1)}
.guide-step-enter .guide-copy,.guide-step-enter .guide-visual{animation:guideEnter .28s ease both}.guide-step-enter .guide-visual{animation-delay:.05s}
.complete-card{max-width:680px;margin:45px auto 0;padding:48px;text-align:center}.success-mark{width:68px;height:68px;border-radius:50%;margin:0 auto 20px;background:#e8f8f1;color:var(--green);display:grid;place-items:center;font-size:32px;font-weight:900}.complete-card h1{font-size:34px;margin:15px 0 10px}.complete-card>p{color:var(--muted);line-height:1.8}.complete-plan{margin:24px 0;background:#f6f8fb;border-radius:15px;padding:16px;color:#4e5c71;font-size:14px;line-height:1.7}.complete-card .primary-button{min-width:230px}

.set-button.demo-press{animation:press .9s ease both}.led.demo-slow{animation:blink 1.05s steps(1,end) 5}.led.demo-fast{animation:blink .35s steps(1,end) 5}
@keyframes press{0%,100%{transform:translate(246px,56px)}45%,70%{transform:translate(246px,61px) scale(.96)}}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:.18}}
@keyframes ringPulse{0%,100%{transform:scale(.9);opacity:.25}50%{transform:scale(1.12);opacity:1}}

@media(max-width:980px){.steps-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.layout-grid{grid-template-columns:1fr}.board-card{position:static;order:-1}.board-card .board-wrap{max-width:260px}.app-shell{padding-top:28px}}
@media(max-width:680px){
  .topbar{height:62px}.topbar-inner{padding:0 16px}.brand small{display:none}.app-shell{padding:23px 14px 48px}.intro{margin-bottom:22px}.intro h1{font-size:30px}.intro p{font-size:14px}.card{border-radius:19px}.form-card{padding:20px}.board-card{padding:18px}.card-title{display:block;margin-bottom:16px}.card-title small{display:block;padding:7px 0 0 43px}.presets{display:grid;grid-template-columns:1fr}.preset{text-align:left}.time-grid{grid-template-columns:1fr}.time-arrow{transform:rotate(90deg);height:18px}.number-box{height:50px}.advanced summary{padding:14px}.advanced-body{padding:14px}.logic-flow{gap:5px}.logic-flow span{font-size:11px}
  .board-card{display:grid;grid-template-columns:132px 1fr;gap:12px;align-items:center}.board-card .card-title{grid-column:1/-1}.board-card .board-wrap{max-width:132px}.board-card .board-callout{margin:0}.board-card .led-legend{grid-column:1/-1;margin-top:0}.button-pointer{display:none}
  .tutorial-head{align-items:flex-start;gap:10px}.target-pill{max-width:67%;font-size:11px}.watch-banner{grid-template-columns:1fr;gap:11px;padding:16px}.watch-led{min-width:0}.tutorial-overview{align-items:flex-start;display:block;margin-top:24px}.tutorial-overview h1{font-size:26px}.tutorial-key{margin-top:13px}.steps-grid{grid-template-columns:1fr;gap:13px}.step-card{padding:15px}.step-card-head{min-height:auto}.step-visual{display:grid;grid-template-columns:122px 1fr;align-items:center;min-height:150px}.step-board{max-width:122px;margin:0 auto}.replay-button{position:static;justify-self:center}.action-line p,.feedback-line p{font-size:12px}.finish-panel{display:block;padding:17px}.finish-panel .primary-button{width:100%;margin-top:15px}.complete-card{padding:32px 20px;margin-top:20px}.complete-card h1{font-size:28px}
}
@media(max-width:390px){.step-visual{grid-template-columns:105px 1fr}.step-board{max-width:105px}.watch-banner strong{font-size:14px}}

@keyframes guideEnter{from{opacity:.35;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:900px){.guide-layout{grid-template-columns:1fr;gap:22px;padding:30px}.guide-visual{order:-1}.guide-board{max-width:230px}.guide-footer{grid-template-columns:auto 1fr auto}}
@media(max-width:680px){.tutorial-head{align-items:flex-start;gap:10px}.target-pill{max-width:67%;font-size:11px}.guide-topline{padding:17px 18px 11px}.guide-layout{padding:24px 18px 21px;gap:18px}.guide-copy h1{font-size:31px;margin-bottom:18px}.guide-action-box{padding:14px}.guide-action-box strong{font-size:14px}.guide-feedback-box{padding:15px}.guide-feedback-box strong{font-size:18px}.guide-visual{padding:15px}.guide-board{max-width:185px}.guide-board .button-pointer{display:none}.guide-footer{padding:14px 16px;grid-template-columns:1fr 1fr;gap:10px}.guide-footer .secondary-button,.guide-footer .primary-button{min-width:0;width:100%}.guide-dots{grid-column:1/-1;grid-row:1}.guide-footer .secondary-button{grid-column:1}.guide-footer .primary-button{grid-column:2}.guide-bottom-note{padding:0 10px;text-align:center;line-height:1.6}.complete-card{padding:32px 20px;margin-top:20px}.complete-card h1{font-size:28px}}
@media(max-width:390px){.guide-copy h1{font-size:28px}.guide-feedback-box{gap:11px}.guide-led-symbol{width:39px;height:39px}.guide-footer{grid-template-columns:1fr}.guide-dots,.guide-footer .secondary-button,.guide-footer .primary-button{grid-column:1}.guide-dots{grid-row:1}.guide-footer .secondary-button{grid-row:2}.guide-footer .primary-button{grid-row:3}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* 基于实际 Altium 器件坐标重建的交互式三维电路板 */
.has-pcb3d{min-width:0}
.pcb3d-shell{position:relative;width:100%;aspect-ratio:31.2/40;overflow:hidden;border-radius:20px;isolation:isolate;background:radial-gradient(circle at 33% 18%,rgba(255,255,255,.95),rgba(240,245,250,.82) 52%,rgba(226,233,241,.92));box-shadow:inset 0 0 0 1px rgba(213,221,231,.78);touch-action:none;user-select:none;-webkit-user-select:none}
.pcb3d-shell::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(128deg,rgba(255,255,255,.42),transparent 27%,transparent 73%,rgba(80,111,149,.06));border-radius:inherit}
.pcb3d-canvas{position:absolute;inset:0;z-index:2;width:100%;height:100%;display:block;cursor:grab;outline:0}
.pcb3d-canvas.is-dragging{cursor:grabbing}
.pcb3d-grid{position:absolute;inset:0;z-index:0;opacity:.38;background-image:linear-gradient(rgba(92,120,151,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(92,120,151,.09) 1px,transparent 1px);background-size:22px 22px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 90%)}
.pcb3d-tip,.pcb3d-badge{position:absolute;z-index:4;pointer-events:none;border:1px solid rgba(255,255,255,.82);background:rgba(255,255,255,.78);backdrop-filter:blur(8px);box-shadow:0 7px 20px rgba(31,48,76,.08);color:#607087;font-size:10px;font-weight:750;line-height:1}
.pcb3d-tip{left:10px;bottom:10px;padding:8px 10px;border-radius:9px}
.pcb3d-badge{top:10px;left:10px;padding:7px 9px;border-radius:99px;display:flex;align-items:center;gap:6px;color:#235a9f}
.pcb3d-badge i{width:7px;height:7px;border-radius:50%;background:#25bd77;box-shadow:0 0 0 4px rgba(37,189,119,.12)}
.pcb3d-reset{position:absolute;z-index:5;right:10px;top:10px;width:33px;height:33px;padding:0;border:1px solid rgba(255,255,255,.9);border-radius:10px;background:rgba(255,255,255,.82);backdrop-filter:blur(8px);box-shadow:0 7px 20px rgba(31,48,76,.10);color:#3e5878;font-size:20px;line-height:1;display:grid;place-items:center;transition:.18s}
.pcb3d-reset:hover{background:#fff;color:var(--blue);transform:translateY(-1px)}
.board-wrap.has-pcb3d,.guide-board.has-pcb3d{filter:drop-shadow(0 18px 23px rgba(16,39,59,.10))}
.guide-board .pcb3d-shell{border-radius:18px;background:radial-gradient(circle at 35% 18%,#fff,#f2f6fa 55%,#e6edf4)}
.guide-board .pcb3d-tip{font-size:9px;padding:7px 8px}
.guide-board .pcb3d-badge{font-size:9px}
@media(max-width:680px){
  .pcb3d-shell{border-radius:15px}
  .pcb3d-tip{display:none}
  .pcb3d-badge{top:7px;left:7px;padding:6px 7px;font-size:8px}
  .pcb3d-reset{top:7px;right:7px;width:28px;height:28px;border-radius:8px;font-size:17px}
}

/* 2026-08 手机优先、语音引导与 3D 兼容优化 */
.preset{display:flex;align-items:center;gap:5px}.preset span{display:inline-block}.preset b{white-space:nowrap}
.voice-setting{margin-top:14px;display:flex;align-items:center;gap:11px;padding:12px 14px;border:1px solid #dce7f5;border-radius:14px;background:#f7faff;cursor:pointer}
.voice-setting .voice-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#e8f2ff;font-size:17px}
.voice-setting>span:nth-child(2){flex:1;min-width:0}.voice-setting b,.voice-setting small{display:block}.voice-setting b{font-size:13px}.voice-setting small{margin-top:3px;color:#738096;font-size:11px;line-height:1.45}
.voice-setting input{position:absolute;opacity:0;pointer-events:none}.voice-setting>i{width:42px;height:24px;flex:0 0 auto;border-radius:99px;background:#cbd3de;position:relative;transition:.2s}.voice-setting>i::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(24,37,58,.2);transition:.2s}.voice-setting input:checked+i{background:var(--blue)}.voice-setting input:checked+i::after{transform:translateX(18px)}.voice-setting input:disabled+i{opacity:.48}
.voice-mini-button{border:1px solid var(--line);background:#fff;color:#667085;border-radius:99px;padding:8px 11px;font-size:12px;font-weight:800;white-space:nowrap}.voice-mini-button.is-on{border-color:#b8d4f8;background:#eef6ff;color:#1458ae}
.guide-replay-row{display:flex;justify-content:center;gap:8px;margin-top:10px}.guide-replay-row .replay-button{margin:0;padding:8px 10px}.guide-speak{color:#175da9;background:#edf6ff;border-color:#d4e8ff}

/* WebGL 启动前先显示兼容板图；首次成功渲染后无缝隐藏，避免手机端空白 */
.pcb3d-fallback{position:absolute;inset:8%;z-index:1;display:grid;place-items:center;opacity:1;transition:opacity .18s ease;pointer-events:none}.pcb3d-fallback .pcb{width:100%;height:100%;filter:drop-shadow(0 13px 18px rgba(9,47,39,.16))}.pcb3d-shell.is-rendered .pcb3d-fallback{opacity:0}.pcb3d-shell.is-fallback .pcb3d-fallback{opacity:1}.pcb3d-shell.is-fallback .pcb3d-canvas{opacity:0}.pcb3d-shell::after{z-index:3}

@media(max-width:680px){
  /* 首页压缩：快捷逻辑一眼可选，时间输入保持同一行 */
  .presets{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.preset{min-width:0;display:block;text-align:center!important;padding:8px 5px;font-size:10px;line-height:1.35}.preset b,.preset span{display:block}.preset b{margin:0 0 2px}.preset span{white-space:normal}
  .time-grid{grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr);gap:4px}.time-arrow{transform:none;height:auto;font-size:15px}.number-box{height:46px;grid-template-columns:34px 1fr 34px}.number-box input{font-size:18px}.number-box button{font-size:18px}.time-field label{gap:4px}.time-field label span{font-size:12px}.time-field label small{font-size:9px}
  .voice-setting{padding:10px 11px}.voice-setting .voice-icon{width:31px;height:31px}.voice-setting small{font-size:10px}

  /* 教程使用整屏工作区，底部按钮始终可见 */
  body.tutorial-active{height:100dvh;overflow:hidden;background:#edf2f8}
  body.tutorial-active .topbar{display:none}
  body.tutorial-active .app-shell{height:100dvh;max-width:none;padding:8px 10px calc(8px + env(safe-area-inset-bottom));overflow:hidden}
  #tutorialScreen.is-active{height:100%;min-height:0;display:flex;flex-direction:column}
  .tutorial-head{flex:0 0 38px;height:38px;margin:0 0 7px;align-items:center;gap:6px}.back-button{padding:7px 5px;font-size:12px}.target-pill{flex:1;max-width:none;min-width:0;padding:7px 9px;font-size:10px}.voice-mini-button{padding:7px 8px;font-size:10px}
  .guide-card{flex:1;min-height:0;display:flex;flex-direction:column;border-radius:16px}
  .guide-topline{flex:0 0 auto;padding:8px 11px 7px;min-height:38px}.guide-topline>div{min-width:0;gap:7px}.guide-step-label{min-height:25px;padding:0 8px;font-size:10px}.guide-step-type{min-width:0;max-width:205px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}.guide-progress-text{font-size:10px}.guide-progress{height:3px;flex:0 0 auto}
  .guide-layout{flex:1;min-height:0;overflow:hidden;display:grid;grid-template-columns:128px minmax(0,1fr);grid-template-areas:"visual copy";gap:9px;padding:9px;align-items:center}
  .guide-copy{grid-area:copy;min-height:0;max-height:100%;overflow:auto;overscroll-behavior:contain;padding-right:1px}.guide-eyebrow{display:none}.guide-copy h1{font-size:clamp(22px,7vw,28px);line-height:1.12;margin:0 0 7px;letter-spacing:-.035em}
  .guide-action-box{display:block;padding:9px 10px;border-radius:12px}.guide-action-box>span{display:none}.guide-action-box strong{font-size:12px;line-height:1.45}
  .guide-feedback-box{gap:8px;margin-top:7px;padding:9px;border-radius:13px}.guide-led-symbol{width:31px;height:31px;border-radius:9px}.guide-led-symbol i{width:11px;height:11px}.guide-feedback-box small{font-size:9px;margin-bottom:2px}.guide-feedback-box strong{font-size:14px;line-height:1.25}.guide-feedback-box p{display:none}
  .guide-count-box{min-height:44px;margin-top:7px;padding:6px 9px;border-radius:11px;gap:5px}.guide-count-box>span{font-size:10px}.guide-count-box>strong{font-size:28px}.guide-count-box>b{font-size:12px}.guide-count-box>small{display:none}.guide-trouble{margin-top:6px;padding:6px 8px;font-size:9px;line-height:1.35}
  .guide-visual{grid-area:visual;order:0;padding:7px;border-radius:14px;align-self:center}.guide-board{max-width:122px}.guide-focus-label{margin:6px auto 0;padding:6px 5px;gap:5px;font-size:9px;line-height:1.2}.guide-focus-label i{width:7px;height:7px}.guide-replay-row{gap:4px;margin-top:6px;flex-wrap:wrap}.guide-replay-row .replay-button{padding:5px 6px;font-size:9px;line-height:1.1}
  .guide-footer{flex:0 0 62px;min-height:62px;padding:8px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.35fr);gap:8px;position:relative;bottom:auto}.guide-dots{display:none!important}.guide-footer .secondary-button,.guide-footer .primary-button{grid-row:1!important;min-width:0;width:100%;min-height:45px;height:45px;padding:0 8px;font-size:12px;border-radius:11px}.guide-footer .secondary-button{grid-column:1!important}.guide-footer .primary-button{grid-column:2!important}.guide-bottom-note{display:none}
  .pcb3d-fallback{inset:7%}
}

@media(max-width:370px){
  .voice-mini-button span{display:none}.guide-step-type{max-width:155px}.guide-layout{grid-template-columns:100px minmax(0,1fr);gap:7px;padding:7px}.guide-board{max-width:100px}.guide-copy h1{font-size:21px}.guide-action-box strong{font-size:11px}.guide-feedback-box strong{font-size:13px}.guide-replay-row .guide-speak{display:none}
}

@media(max-width:680px) and (max-height:680px){
  .tutorial-head{flex-basis:34px;height:34px;margin-bottom:5px}.guide-topline{padding:6px 10px 5px;min-height:34px}.guide-layout{grid-template-columns:106px minmax(0,1fr);padding:6px;gap:7px}.guide-board{max-width:104px}.guide-copy h1{font-size:20px;margin-bottom:5px}.guide-action-box{padding:7px 8px}.guide-feedback-box{padding:7px;margin-top:5px}.guide-count-box{margin-top:5px}.guide-focus-label{margin-top:4px}.guide-replay-row{margin-top:4px}.guide-footer{flex-basis:56px;min-height:56px;padding:6px}.guide-footer .secondary-button,.guide-footer .primary-button{height:43px;min-height:43px}
}

/* 2026-08-01：按键灯光聚焦、移动端不留空白、步骤意图说明 */
.board-wrap{max-width:390px}
.board-wrap:empty{min-height:160px;border-radius:17px;background:linear-gradient(145deg,#f7fafc,#eaf0f6)}
.board-wrap:empty::before{content:"正在载入按键与灯光区域…";min-height:160px;display:grid;place-items:center;color:#738096;font-size:12px;font-weight:750}
.pcb3d-shell{aspect-ratio:4/3;min-height:220px}
.pcb3d-fallback{inset:4%}
.pcb3d-fallback .pcb,.pcb.is-control-closeup{width:100%;height:100%;object-fit:contain}

/* 首屏在 JavaScript 与 WebGL 启动前也能立即看到按键和四颗灯 */
.pcb-instant{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:18px;background:linear-gradient(145deg,#0b4c3e,#06372e);box-shadow:inset 0 0 0 1px #79ad9c,0 16px 24px rgba(16,55,48,.17)}
.pcb-instant::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 16px,rgba(126,204,177,.08) 16px 17px),repeating-linear-gradient(90deg,transparent 0 18px,rgba(126,204,177,.07) 18px 19px)}
.instant-chip{position:absolute;border-radius:8px;background:linear-gradient(145deg,#242d31,#0f1518);box-shadow:inset 0 0 0 1px #526168,0 5px 8px rgba(0,0,0,.22)}
.instant-chip.chip-a{left:12%;top:17%;width:25%;height:31%}.instant-chip.chip-b{left:43%;top:48%;width:21%;height:25%}
.instant-coil{position:absolute;left:39%;top:22%;width:24%;aspect-ratio:1;border-radius:10px;display:grid;place-items:center;background:linear-gradient(145deg,#6a7275,#394145);color:#202629;font-size:20px;font-weight:800;box-shadow:inset 0 0 0 2px #747e81,0 6px 10px rgba(0,0,0,.2)}
.instant-led-row{position:absolute;right:8%;top:16%;display:flex;gap:7px}.instant-led-row i{width:12px;height:7px;border-radius:3px;background:rgba(238,244,245,.10);box-shadow:inset 0 0 0 1px rgba(223,232,234,.50),0 0 0 1px rgba(17,29,31,.18)}.instant-led-row i.on.green{background:#37cf83;box-shadow:0 0 0 2px #d5e1dc,0 0 15px #37cf83}.instant-led-row i.focus{background:rgba(238,244,245,.08);box-shadow:inset 0 0 0 1px rgba(223,232,234,.55),0 0 0 5px rgba(240,68,88,.15)}
.instant-button{position:absolute;right:8%;top:39%;width:24%;aspect-ratio:1;border-radius:10px;background:linear-gradient(145deg,#cbd2d5,#737f84);box-shadow:0 5px 10px rgba(0,0,0,.24),inset 0 0 0 2px #eaf0f2;display:grid;place-items:center}.instant-button i{width:58%;aspect-ratio:1;border-radius:50%;background:linear-gradient(145deg,#313b40,#10171a);box-shadow:inset 0 0 0 2px #68757a}

.guide-purpose-box{margin:0 0 12px;border-left:4px solid var(--blue);background:#eef5ff;border-radius:0 12px 12px 0;padding:10px 12px}.guide-purpose-box span,.guide-purpose-box strong{display:block}.guide-purpose-box span{font-size:10px;font-weight:900;color:#1769e0;letter-spacing:.04em}.guide-purpose-box strong{margin-top:4px;color:#294b77;font-size:14px;line-height:1.5}
.guide-copy h1{margin-bottom:14px}
.guide-board{max-width:390px}
.guide-board .pcb3d-shell{aspect-ratio:16/10;min-height:0}

@media(max-width:680px){
  .intro{margin-bottom:17px}.intro-tag{padding:5px 9px}.intro h1{font-size:28px;margin:12px 0 8px}.intro p{font-size:13px;line-height:1.55}
  .board-card{display:block!important;padding:16px}.board-card .card-title{margin-bottom:11px}.board-card .board-wrap{width:100%;max-width:none;margin:0}.board-card .board-callout{margin-top:9px;padding:10px 12px}.board-card .board-callout small{font-size:10px}.board-card .led-legend{margin-top:10px;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;font-size:9px}.board-card .led-legend span{gap:4px;white-space:nowrap}.board-card .led-legend i{width:6px;height:6px}
  .pcb3d-shell,.pcb-instant{aspect-ratio:16/9;min-height:0;border-radius:14px}.pcb3d-fallback{inset:2%}.pcb3d-badge{display:none}.pcb3d-reset{top:6px;right:6px}.board-wrap:empty,.board-wrap:empty::before{min-height:150px}

  .guide-layout{grid-template-columns:132px minmax(0,1fr);align-items:center}
  .guide-purpose-box{margin:0 0 6px;padding:6px 7px;border-left-width:3px;border-radius:0 8px 8px 0}.guide-purpose-box span{font-size:8px}.guide-purpose-box strong{font-size:10px;line-height:1.3;margin-top:2px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .guide-copy{overflow:hidden!important}.guide-copy h1{font-size:21px;margin:0 0 6px}.guide-action-box{padding:7px 8px}.guide-action-box strong{font-size:11px;line-height:1.35}.guide-feedback-box{padding:7px 8px;margin-top:5px}.guide-feedback-box small{font-size:8px}.guide-feedback-box strong{font-size:12px;line-height:1.25}.guide-count-box{margin-top:5px;min-height:38px;padding:4px 7px}.guide-count-box>strong{font-size:25px}
  .guide-visual{padding:6px}.guide-board{width:100%;max-width:126px}.guide-board .pcb3d-shell{aspect-ratio:16/10}.guide-focus-label{font-size:8px;padding:5px 4px}.guide-replay-row{margin-top:4px}.guide-replay-row .replay-button{font-size:8px;padding:4px 5px}
}

@media(max-width:370px){
  .guide-layout{grid-template-columns:108px minmax(0,1fr)}.guide-board{max-width:104px}.guide-purpose-box strong{font-size:9px;-webkit-line-clamp:2}.guide-copy h1{font-size:19px}.guide-action-box strong{font-size:10px}.guide-feedback-box strong{font-size:11px}
}
@media(max-width:680px){
  .guide-layout{align-items:start;align-content:start;padding-top:11px}
  .guide-visual{align-self:start}
}

@media(max-width:370px){.guide-layout{grid-template-columns:122px minmax(0,1fr)}.guide-board{max-width:118px}}

/* 2026-08-01：手机竖屏改为“3D 在上、说明在下”，灯效自动循环并显示播放进度 */
.demo-loop{max-width:360px;margin:8px auto 0}.demo-loop-head{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#68778c;font-size:10px;line-height:1}.demo-loop-head>span{display:flex;align-items:center;gap:6px;min-width:0}.demo-loop-head i{width:7px;height:7px;border-radius:50%;background:#2180ef;box-shadow:0 0 0 4px rgba(33,128,239,.10)}.demo-loop-head b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.demo-loop-head small{flex:0 0 auto;color:#8a96a7}.demo-loop-track{height:4px;margin-top:6px;overflow:hidden;border-radius:99px;background:#dfe7f1}.demo-loop-track i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#2378e8,#63a7ff);transition:none}.demo-loop.is-waiting .demo-loop-head i{background:#ef9d2e;box-shadow:0 0 0 4px rgba(239,157,46,.11)}
.guide-replay-row .replay-button{touch-action:manipulation;-webkit-tap-highlight-color:transparent;position:relative;z-index:6}.guide-speak.is-speaking{border-color:#9ac5f8;background:#ddecff;color:#0e57b6}.guide-speak.is-error{border-color:#f0c4ca;background:#fff1f3;color:#a72b3b}

@media(max-width:680px) and (orientation:portrait){
  /* 整个教程仍固定在一屏内，但内容按上下顺序显示 */
  .guide-layout{display:flex!important;flex-direction:column!important;grid-template-columns:none!important;grid-template-areas:none!important;align-items:stretch!important;align-content:stretch!important;gap:7px!important;padding:7px 9px 6px!important;overflow:hidden!important}
  .guide-visual{order:-1!important;flex:0 0 clamp(182px,29dvh,226px);width:100%;min-height:0;padding:6px 8px!important;border-radius:13px;display:flex;flex-direction:column;justify-content:flex-start;align-self:stretch!important;overflow:hidden}
  .guide-board{width:min(100%,330px)!important;max-width:330px!important;flex:1;min-height:0;margin:0 auto!important;display:flex;align-items:center;justify-content:center}
  .guide-board .pcb3d-shell{width:100%;height:100%;min-height:0!important;aspect-ratio:auto!important;border-radius:11px}
  .guide-board>.pcb{width:100%;height:100%;max-height:100%;object-fit:contain}
  .guide-focus-label{position:absolute;z-index:5;left:50%;transform:translateX(-50%);top:8px;width:max-content;max-width:76%;margin:0!important;padding:5px 8px!important;background:rgba(255,241,243,.92);backdrop-filter:blur(5px);box-shadow:0 5px 13px rgba(61,29,35,.08);font-size:9px!important}
  .guide-visual{position:relative;padding-top:29px!important}
  .demo-loop{width:min(100%,330px);margin:4px auto 0}.demo-loop-head{font-size:8px}.demo-loop-track{height:3px;margin-top:4px}
  .guide-replay-row{position:absolute;right:7px;bottom:17px;z-index:7;display:flex;gap:5px;margin:0!important;flex-wrap:nowrap!important}.guide-replay-row .replay-button{min-height:29px;padding:0 8px!important;border-radius:9px;font-size:9px!important;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);box-shadow:0 4px 12px rgba(25,50,82,.09)}
  .guide-copy{order:0;flex:1;min-height:0;max-height:none!important;width:100%;overflow:hidden!important;padding:0!important;display:flex;flex-direction:column}
  .guide-purpose-box{flex:0 0 auto;margin:0 0 5px!important;padding:5px 8px!important}.guide-purpose-box span{font-size:8px!important}.guide-purpose-box strong{font-size:10px!important;line-height:1.25!important;margin-top:1px!important;display:block!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .guide-copy h1{flex:0 0 auto;font-size:21px!important;line-height:1.08!important;margin:0 0 5px!important}
  .guide-action-box{flex:0 0 auto;padding:7px 9px!important}.guide-action-box strong{font-size:11px!important;line-height:1.35!important}
  .guide-feedback-box{flex:0 0 auto;margin-top:5px!important;padding:7px 8px!important}.guide-feedback-box small{font-size:8px!important}.guide-feedback-box strong{font-size:12px!important;line-height:1.25!important}.guide-feedback-box p{display:none!important}
  .guide-count-box{flex:0 0 auto;margin-top:5px!important;min-height:36px!important;padding:4px 8px!important}.guide-count-box>strong{font-size:24px!important}.guide-count-box>small{display:none!important}.guide-trouble{flex:0 0 auto;margin-top:4px!important;padding:5px 7px!important;font-size:8px!important;line-height:1.25!important}
  .guide-footer{flex:0 0 60px!important;min-height:60px!important}
}

@media(max-width:680px) and (orientation:portrait) and (max-height:700px){
  .tutorial-head{flex-basis:34px;height:34px;margin-bottom:4px}
  .guide-topline{min-height:32px;padding:5px 9px 4px}
  .guide-visual{flex-basis:clamp(154px,25dvh,176px);padding-top:26px!important}
  .guide-board{max-width:285px!important}
  .guide-purpose-box strong{font-size:9px!important}.guide-copy h1{font-size:18px!important;margin-bottom:4px!important}.guide-action-box{padding:5px 7px!important}.guide-action-box strong{font-size:10px!important}.guide-feedback-box{padding:5px 7px!important;margin-top:4px!important}.guide-feedback-box strong{font-size:11px!important}.guide-count-box{margin-top:4px!important;min-height:31px!important}.guide-count-box>strong{font-size:21px!important}
  .guide-footer{flex-basis:54px!important;min-height:54px!important;padding:5px!important}.guide-footer .secondary-button,.guide-footer .primary-button{height:42px!important;min-height:42px!important}
  .guide-replay-row{bottom:13px}.guide-replay-row .replay-button{min-height:26px;font-size:8px!important;padding:0 6px!important}
}

@media(max-width:370px) and (orientation:portrait){
  .guide-layout{grid-template-columns:none!important}.guide-board{max-width:285px!important}.guide-replay-row .guide-speak{display:inline-flex!important}.voice-mini-button span{display:none}.guide-purpose-box strong{white-space:nowrap;-webkit-line-clamp:unset!important}.guide-copy h1{font-size:18px!important}
}


/* 2026-08-01 V4：手机竖屏强制上下布局；上方专注灯与按键，下方显示当前操作 */
.voice-setting.is-unavailable{opacity:.72}.voice-setting.is-unavailable input,.voice-setting.is-unavailable>i{display:none}.voice-setting.is-unavailable small{color:#8b5a20}
.voice-mini-button.is-error{border-color:#efc5cb;background:#fff2f4;color:#a3293c}

@media (max-width:680px) and (orientation:portrait){
  body.tutorial-active #tutorialScreen .guide-card{display:flex!important;flex-direction:column!important}
  body.tutorial-active #tutorialScreen .guide-layout{
    display:flex!important;
    flex-direction:column!important;
    grid-template-columns:none!important;
    grid-template-areas:none!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:6px!important;
    padding:6px 8px 5px!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  body.tutorial-active #tutorialScreen .guide-visual{
    order:-1!important;
    flex:0 0 clamp(196px,31dvh,246px)!important;
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    max-height:none!important;
    align-self:stretch!important;
    padding:27px 7px 5px!important;
    border-radius:13px!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }
  body.tutorial-active #tutorialScreen .guide-board{
    flex:1 1 auto!important;
    width:min(100%,350px)!important;
    max-width:350px!important;
    min-height:0!important;
    margin:0 auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  body.tutorial-active #tutorialScreen .guide-board .pcb3d-shell{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    aspect-ratio:auto!important;
  }
  body.tutorial-active #tutorialScreen .guide-copy{
    order:0!important;
    flex:1 1 auto!important;
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    max-height:none!important;
    overflow:auto!important;
    overscroll-behavior:contain;
    padding:0 1px!important;
  }
  body.tutorial-active #tutorialScreen .guide-purpose-box strong{white-space:normal!important;display:block!important;overflow:visible!important;text-overflow:clip!important}
}

@media (max-width:680px) and (orientation:portrait) and (max-height:700px){
  body.tutorial-active #tutorialScreen .guide-visual{flex-basis:clamp(165px,27dvh,190px)!important;padding-top:25px!important}
  body.tutorial-active #tutorialScreen .guide-purpose-box strong{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
}


/* 2026-08-01 V5：全局黑色科技主题 + Android 语音兼容状态 */
:root{
  color-scheme:dark;
  --bg:#05080d;--card:#0b111a;--text:#eef7ff;--muted:#8a9aae;--line:#1c2a39;
  --blue:#28a8ff;--blue2:#006dff;--blueSoft:rgba(40,168,255,.11);--green:#39e39b;--red:#ff4b6b;--redSoft:rgba(255,75,107,.10);
  --shadow:0 22px 70px rgba(0,0,0,.46);--radius:24px;
}
html{background:#05080d}
body{
  background-color:#05080d;
  background-image:
    radial-gradient(circle at 18% -8%,rgba(0,126,255,.18),transparent 30%),
    radial-gradient(circle at 92% 12%,rgba(0,255,203,.08),transparent 27%),
    linear-gradient(rgba(48,105,153,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(48,105,153,.035) 1px,transparent 1px);
  background-size:auto,auto,28px 28px,28px 28px;
  color:var(--text);
}
::selection{background:rgba(40,168,255,.32);color:#fff}
*{scrollbar-color:#24415b #08101a}
.topbar{background:rgba(5,9,15,.84);border-bottom-color:rgba(48,79,107,.55);box-shadow:0 10px 34px rgba(0,0,0,.28)}
.brand-logo{background:linear-gradient(145deg,#0dc2ff,#0057ff);box-shadow:0 0 0 1px rgba(89,205,255,.28),0 0 25px rgba(0,123,255,.28)}
.link-button,.back-button{color:#9aadc1}.link-button:hover,.back-button:hover{background:#101b27;color:#eef8ff}
.intro-tag{background:rgba(26,163,255,.12);color:#61c9ff;border:1px solid rgba(57,179,255,.22);box-shadow:inset 0 0 18px rgba(0,133,255,.05)}
.intro h1,.card-title h2,.complete-card h1,.guide-copy h1{color:#f2f9ff;text-shadow:0 0 30px rgba(40,168,255,.06)}
.card{background:linear-gradient(155deg,rgba(13,21,31,.98),rgba(8,14,22,.98));border-color:rgba(48,77,103,.62);box-shadow:var(--shadow),inset 0 1px 0 rgba(143,210,255,.035)}
.card-title div>span{background:rgba(40,168,255,.11);color:#6ad0ff;border:1px solid rgba(52,179,255,.18)}
.preset{background:#0a121c;border-color:#1d3144;color:#a8b7c7}.preset b{color:#57c6ff}.preset:hover,.preset.is-active{border-color:#168fe2;background:linear-gradient(145deg,rgba(0,117,216,.20),rgba(13,31,49,.92));color:#e6f7ff;box-shadow:0 0 0 1px rgba(54,179,255,.08),0 0 20px rgba(0,116,255,.10)}
.segment-card{background:#08111a;border-color:#1b2c3c}.segment-head small,.time-field label small{color:#718398}
.number-box{background:#070d14;border-color:#203348;box-shadow:inset 0 0 0 1px rgba(102,189,255,.025)}
.number-box button{background:#0e1823;color:#9cb0c4}.number-box button:hover{background:#12263a;color:#65caff}.number-box input{background:#070d14;color:#eef9ff;caret-color:#39b8ff}
.advanced{background:#08111a;border-color:#1d3042}.advanced-body{background:#070e16;border-top-color:#1b2b3b}.advanced summary>i{color:#6e8499}
.segmented{background:#050b12}.segmented button{color:#788ba0}.segmented button.is-active{background:#122236;color:#5dc9ff;box-shadow:0 0 0 1px rgba(65,180,255,.16),0 6px 18px rgba(0,0,0,.25)}
.mode-item{background:#09121b;border-color:#1b2e40}.mode-item.is-selected{background:linear-gradient(145deg,rgba(0,109,214,.18),rgba(7,19,30,.92));border-color:#168edb}.mode-item>i{border-color:#40556b}
.logic-summary{background:linear-gradient(135deg,rgba(0,112,226,.13),rgba(0,184,255,.055));border-color:rgba(41,159,235,.25);color:#a9d9ff}.logic-summary b{color:#e3f5ff}.logic-flow span{background:#081521;border-color:#22415b;color:#c7e8ff}.logic-flow i{color:#587c9d}
.error{background:rgba(255,55,88,.10);color:#ff91a3;border:1px solid rgba(255,74,104,.22)}
.primary-button{background:linear-gradient(135deg,#00a9ff,#005dff);box-shadow:0 12px 30px rgba(0,103,255,.28),inset 0 1px 0 rgba(255,255,255,.18)}
.primary-button:hover{box-shadow:0 15px 38px rgba(0,126,255,.34),0 0 24px rgba(0,170,255,.12)}
.secondary-button{background:#0b1621;color:#a9bed2;border-color:#24384a}.secondary-button:hover{background:#112333;color:#e8f7ff}
.save-note{color:#73869a}.save-note span{color:#47eda7}
.board-callout{background:rgba(22,137,235,.10);border:1px solid rgba(55,169,255,.16)}.board-callout.is-red{background:rgba(255,55,87,.075);border-color:rgba(255,76,108,.16)}.board-callout small{color:#8195a9}.led-legend{color:#7e91a5}.led-legend .legend-focus{color:#ff788d}
.voice-setting{background:linear-gradient(145deg,rgba(15,30,44,.94),rgba(8,17,26,.94));border-color:#20384d}.voice-setting .voice-icon{background:rgba(40,168,255,.12);box-shadow:inset 0 0 0 1px rgba(78,194,255,.11)}.voice-setting small{color:#7f92a6}.voice-setting>i{background:#28394a}.voice-setting>i::after{background:#dfeeff;box-shadow:0 2px 9px rgba(0,0,0,.48)}.voice-setting input:checked+i{background:linear-gradient(90deg,#008cff,#00b5ff);box-shadow:0 0 17px rgba(0,151,255,.24)}.voice-setting.needs-gesture{border-color:rgba(255,170,61,.40);box-shadow:0 0 0 1px rgba(255,170,61,.06)}.voice-setting.needs-gesture .voice-icon{background:rgba(255,167,49,.12)}
.target-pill{background:#09131d;border-color:#1d3347;color:#9eb3c7}.voice-mini-button{background:#0b1722;border-color:#20364a;color:#88a0b7}.voice-mini-button.is-on{background:rgba(0,138,255,.13);border-color:rgba(53,174,255,.36);color:#6bceff}.voice-mini-button.is-error{background:rgba(255,158,47,.09);border-color:rgba(255,169,55,.30);color:#ffc16e}
.guide-progress{background:#101d29}.guide-progress i{background:linear-gradient(90deg,#006bff,#30c8ff);box-shadow:0 0 16px rgba(35,184,255,.30)}.guide-step-type,.guide-progress-text{color:#758aa0}
.guide-purpose-box{background:rgba(0,126,239,.10);border-left-color:#21b5ff}.guide-purpose-box span{color:#5ccaff}.guide-purpose-box strong{color:#b8d8f1}
.guide-action-box{background:linear-gradient(145deg,rgba(10,31,48,.94),rgba(7,18,29,.96));border-color:#1e415a}.guide-action-box>span{background:#0a1d2d;border-color:#21506e;color:#5ccaff}.guide-action-box strong{color:#cae6f8}
.guide-feedback-box{background:linear-gradient(135deg,rgba(255,55,87,.105),rgba(25,11,18,.90));border-color:rgba(255,75,105,.28)}.guide-led-symbol{background:#0d151f;box-shadow:0 8px 28px rgba(0,0,0,.42),inset 0 0 0 1px rgba(255,83,112,.14)}.guide-feedback-box small{color:#ff899b}.guide-feedback-box strong{color:#ffd9df}.guide-feedback-box p{color:#a9858d}.guide-feedback-box.is-green{background:linear-gradient(135deg,rgba(36,225,147,.10),rgba(7,24,19,.92));border-color:rgba(53,227,155,.26)}.guide-feedback-box.is-green small{color:#65e9b1}.guide-feedback-box.is-green strong{color:#d5fff0}.guide-feedback-box.is-green p{color:#88aa9d}
.guide-count-box{background:rgba(13,31,47,.78);border-color:#285173;color:#8fa7bc}.guide-count-box>strong{color:#56c9ff;text-shadow:0 0 20px rgba(50,185,255,.22)}.guide-count-box>small{color:#70879c}.guide-trouble{background:rgba(255,165,35,.075);color:#e9bd78;border-left-color:#f0a531}
.guide-visual{background:radial-gradient(circle at 50% 20%,rgba(16,48,70,.92),rgba(5,12,19,.98) 68%);border-color:#183044;box-shadow:inset 0 0 36px rgba(0,150,255,.035)}
.guide-focus-label{background:rgba(255,54,88,.10);color:#ff99aa;border:1px solid rgba(255,73,104,.18)}.guide-focus-label.is-green{background:rgba(47,225,150,.09);color:#7af0bc;border-color:rgba(55,225,153,.16)}
.guide-footer{background:#08111a;border-top-color:#1a2b3b}.guide-dot{background:#203244}.guide-dot.is-done{background:#286ca7}.guide-dot.is-active{background:#28a8ff;box-shadow:0 0 12px rgba(40,168,255,.45)}.guide-bottom-note{color:#718499}
.complete-plan{background:#08121c;color:#abc0d4;border:1px solid #1c3042}.success-mark{background:rgba(42,228,151,.10);color:#48eaa5;border:1px solid rgba(59,232,164,.16);box-shadow:0 0 30px rgba(44,221,151,.07)}
.demo-loop-head{color:#7b91a6}.demo-loop-head small{color:#60758a}.demo-loop-track{background:#142536}.demo-loop-track i{background:linear-gradient(90deg,#006eff,#32c8ff);box-shadow:0 0 12px rgba(42,187,255,.35)}
.guide-speak{background:rgba(0,139,255,.11);border-color:rgba(43,173,255,.25);color:#6dccff}.guide-speak.is-speaking{background:rgba(0,167,255,.18);border-color:#27b8ff;color:#d8f5ff;box-shadow:0 0 18px rgba(0,169,255,.14)}.guide-speak.is-error{background:rgba(255,157,47,.10);border-color:rgba(255,172,65,.32);color:#ffc174}
.pcb3d-shell,.guide-board .pcb3d-shell{background:radial-gradient(circle at 46% 28%,#13283a,#07111b 58%,#03070b);box-shadow:inset 0 0 0 1px rgba(54,105,142,.42),inset 0 0 50px rgba(0,117,200,.055),0 18px 35px rgba(0,0,0,.38)}
.pcb3d-shell::after{background:linear-gradient(128deg,rgba(54,197,255,.08),transparent 28%,transparent 72%,rgba(0,108,255,.055))}.pcb3d-grid{opacity:.56;background-image:linear-gradient(rgba(53,159,222,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(53,159,222,.09) 1px,transparent 1px)}
.pcb3d-tip,.pcb3d-badge{background:rgba(4,13,21,.76);border-color:rgba(75,139,183,.31);color:#8aabc4;box-shadow:0 8px 22px rgba(0,0,0,.30)}.pcb3d-badge{color:#66cbff}.pcb3d-reset{background:rgba(5,16,25,.82);border-color:rgba(73,132,173,.40);color:#9fc4dd;box-shadow:0 8px 22px rgba(0,0,0,.32)}.pcb3d-reset:hover{background:#0d2131;color:#5acbff}
.board-wrap:empty{background:linear-gradient(145deg,#08131e,#050a10)}.board-wrap:empty::before{color:#6e879b}
.pcb-instant{background:radial-gradient(circle at 64% 20%,#0d604f,#07392f 58%,#031812);box-shadow:inset 0 0 0 1px rgba(93,185,154,.42),0 18px 32px rgba(0,0,0,.42)}
/* 熄灭的 LED 完全透明无色，只有点亮时显示颜色 */
.led>rect:first-child{stroke:#52636c;opacity:.30}.led .core{fill:transparent!important;opacity:0!important;filter:none!important}.led.is-on .core{opacity:1!important}.instant-led-row i{background:transparent;box-shadow:inset 0 0 0 1px rgba(213,228,232,.28)}.instant-led-row i.focus{background:transparent;box-shadow:inset 0 0 0 1px rgba(213,228,232,.28),0 0 0 5px rgba(255,69,99,.11)}
input:-webkit-autofill{-webkit-text-fill-color:#eef8ff!important;-webkit-box-shadow:0 0 0 1000px #070d14 inset!important}

@media(max-width:680px){
  body.tutorial-active{background:#03070b!important;background-image:radial-gradient(circle at 50% -10%,rgba(0,127,255,.16),transparent 40%)!important}
  .guide-replay-row .replay-button{background:rgba(5,16,25,.90)!important;border-color:rgba(55,115,157,.42)!important;color:#9bc5df!important;box-shadow:0 5px 16px rgba(0,0,0,.34)!important}
  .guide-replay-row .guide-speak{color:#64caff!important;background:rgba(0,130,242,.15)!important;border-color:rgba(54,176,255,.32)!important}
  .guide-focus-label{background:rgba(41,10,18,.88)!important;box-shadow:0 5px 16px rgba(0,0,0,.34)!important}
  .guide-focus-label.is-green{background:rgba(7,35,25,.88)!important}
  .topbar{background:rgba(4,8,13,.92)}
}