.guide-flow{background:#eff8ff;color:#102a56}.simple-bar{height:82px;padding:14px 20px 0;display:grid;grid-template-columns:56px 1fr 56px;align-items:center;background:#fff}.simple-bar h1{margin:0;text-align:center;font-size:25px}.simple-bar button{height:50px;border-radius:50%!important;color:#334155!important}.simple-bar svg{width:30px;height:30px}
.compatible-demo .ix-toolbar{grid-template-columns:42px minmax(0,1fr)42px;background:#fff}.compatible-demo .ix-toolbar h1{text-align:left;font-size:20px;line-height:24px}.compatible-demo .ix-search-form input{font-size:14px}.compat-list{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;padding:32px 12px 20px;background:#eff8ff}.compat-list.one{display:block;padding:32px 0 20px}.compat-list button{width:100%;border:0;color:#102a56!important;font:inherit}.compat-brand-item{height:90px;border-radius:16px!important;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(#e8eaed,#e8eaed) border-box!important;border:1px solid transparent!important;box-shadow:0 1px 0 #e8eaed,0 2px 7px rgba(16,42,86,.08)!important;display:grid;place-items:center;text-align:center;padding:0 16px}.compat-brand-item b{font-family:Inter,RobotoLocal,Roboto,Arial,sans-serif;font-size:16px;line-height:20px;font-weight:600}.compat-model-item{min-height:57px;margin-bottom:1px;border-radius:0!important;background:#fff!important;box-shadow:none!important;display:grid;align-items:center;justify-items:start;text-align:left;padding:18px 20px}.compat-model-item b{font-family:RobotoLocal,Roboto,Arial,sans-serif;font-size:16px;line-height:20px;font-weight:400}.empty-note{grid-column:1/-1;text-align:center;color:#7b8794}
.chooser-body{flex:1;overflow:auto;padding:42px 26px}.chooser-body h1{margin:0;color:#102a56;font-size:30px;text-align:center;line-height:1.1}.chooser-body>p{margin:16px 0 34px;text-align:center;color:#8290a3;font-size:18px}.lan-card,.direct-card{width:100%;min-height:230px;margin-bottom:30px;border-radius:28px!important;padding:26px;text-align:left;display:grid;gap:12px;position:relative}.lan-card{background:linear-gradient(135deg,#0054ad,#0b8fff)!important;color:#fff!important}.direct-card{background:#fff!important;color:#102a56!important;box-shadow:0 2px 12px rgba(15,23,42,.12)}.lan-card span,.direct-card span{width:78px;height:78px;border-radius:18px;display:grid;place-items:center;background:rgba(255,255,255,.22)}.direct-card span{background:#dbeeff;color:#2478f2}.lan-card b,.direct-card b{font-size:30px}.lan-card small,.direct-card small{font-size:18px;line-height:1.35}.lan-card em,.direct-card em{font-style:normal;font-size:15px;font-weight:800;opacity:.88}
.brand-picker{flex:1;overflow:auto;padding:32px 22px}.brand-picker h1{margin:0 0 22px;font-size:30px}.brand-picker button{width:100%;min-height:76px;margin-bottom:14px;border-radius:18px!important;background:#fff!important;color:#102a56!important;font-size:23px!important;box-shadow:0 1px 8px rgba(15,23,42,.13)}
.step-demo{background:#eff8ff}.step-demo main{flex:1;overflow:auto;padding:30px 22px 34px}.step-art{height:355px;border-radius:28px;display:grid;place-items:center;background:#dff0ff;color:#2478f2;overflow:hidden}.step-art svg{width:142px;height:142px}.step-art.mail{background:#e9f5ff;color:#e94135}.step-art.phone{background:#ecf7ff;color:#111827}.step-art.print{background:#eaf6ff;color:#2478f2}.step-art.share{background:#eef4ff;color:#756bff}.step-demo h1{margin:30px 0 10px;font-size:31px;line-height:1.12}.step-demo p{color:#7b8794;font-size:18px;line-height:1.35}.step-count{margin:22px 0;color:#2478f2;font-weight:800;text-align:center}.step-next{width:100%;min-height:66px;border-radius:18px!important;background:#2478f2!important;color:#fff!important;font-size:23px!important;font-weight:800!important}
.email-step-demo .simple-bar{grid-template-columns:64px minmax(0,1fr);height:82px;padding:14px 26px 0;background:#fff}.email-step-demo .simple-bar h1{text-align:left;font-size:27px;line-height:34px}.email-step-demo .simple-bar i{display:none}.email-step-demo main{padding:0 16px 34px}.email-step-demo .step-art{height:390px;margin:0 -56px;border-radius:0;background:transparent;color:inherit}.email-step-demo .step-art>div{width:100%;height:100%}.email-step-demo h1{margin:26px 0 10px;font-size:30px;line-height:1.12}.email-step-demo p{margin:0;color:#8794a8;font-size:18px;line-height:1.38}.email-step-demo .step-next{min-height:52px;margin-top:34px;border-radius:16px!important;font-size:16px!important;font-weight:600!important;box-shadow:inset 0 -2px 3px rgba(16,42,86,.28),0 12px 24px rgba(21,112,239,.22)}.email-step-demo .step-next svg{width:24px;height:24px;margin:0 4px;stroke:#fff}
.dialog-demo{background:rgba(15,23,42,.18)}.contact-permission-demo{background:#eff8ff}.contact-permission-demo main{flex:1;display:grid;place-content:center;text-align:center;padding:34px 26px}.contact-art{width:142px;height:142px;margin:auto;border-radius:32px;background:#fff;color:#2478f2;display:grid;place-items:center;box-shadow:0 8px 24px rgba(15,23,42,.12)}.contact-art svg{width:88px;height:88px}.contact-permission-demo h1{font-size:30px;margin:26px 0 10px}.contact-permission-demo p{color:#75849a;font-size:18px;line-height:1.35}.contact-permission-demo main button{min-height:62px;border-radius:18px!important;background:#2478f2!important;color:#fff!important;font-size:21px!important;font-weight:800!important}
.contact-paywall-demo{background:linear-gradient(160deg,#c3e7ff,#eff8ff)}.contact-paywall-demo main{flex:1;display:grid;place-items:center;padding:24px;position:relative}.pay-close{position:absolute;right:18px;top:42px;color:#fff!important;background:rgba(16,42,86,.35)!important;border-radius:50%!important;width:52px;height:52px}.contact-paywall-demo section{text-align:center;color:#102a56}.pay-crown{width:134px;height:112px;margin:0 auto 24px;border-radius:28px;background:#fff8df;color:#ffb11b;display:grid;place-items:center;box-shadow:0 10px 26px rgba(15,23,42,.13)}.pay-crown svg{width:82px;height:82px}.contact-paywall-demo h1{font-size:32px;line-height:1.12}.contact-paywall-demo p{color:#66758a;font-size:18px;line-height:1.35}.contact-paywall-demo section button{width:100%;min-height:62px;margin-top:16px;border-radius:18px!important;background:#2478f2!important;color:#fff!important;font-weight:800!important;font-size:21px!important}.contact-paywall-demo section button:last-child{background:#fff!important;color:#2478f2!important}
.print-edit-demo{background:#eff8ff}.print-edit-demo main{flex:1;overflow:auto;padding:22px 20px 110px}.print-row,.option-chips{margin-bottom:16px;padding:18px;border-radius:18px;background:#fff;box-shadow:0 1px 8px rgba(15,23,42,.1)}.print-row{display:grid;grid-template-columns:1fr 48px 48px 48px;align-items:center;gap:8px}.print-row span,.option-chips b{font-size:19px;font-weight:800}.print-row button{height:44px;border-radius:12px!important;background:#eff6ff!important;color:#2478f2!important;font-size:24px!important}.option-chips{display:flex;flex-wrap:wrap;gap:10px}.option-chips b{width:100%;color:#102a56}.option-chips button,.page-size-link{min-height:44px;padding:0 15px;border-radius:999px!important;background:#edf2f7!important;color:#536071!important;font-weight:800!important}.option-chips button.on{background:#2478f2!important;color:#fff!important}.page-size-link{width:100%;border-radius:16px!important;background:#fff!important;color:#2478f2!important}.save-options{position:absolute;left:22px;right:22px;bottom:22px}
.email-app-demo{background:#f8fafc}.mail-inbox{flex:1;overflow:auto;padding:14px 18px 42px;background:#f8fafc}.mail-row{width:100%;min-height:104px;margin-bottom:10px;padding:14px 12px;border-radius:16px!important;background:#fff!important;color:#1f2937!important;display:grid;grid-template-columns:48px 1fr;grid-template-areas:"avatar from" "avatar subject" "avatar file";gap:3px 12px;text-align:left;box-shadow:0 1px 7px rgba(15,23,42,.1)}.mail-row span{grid-area:avatar;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#e8f0fe;color:#1a73e8;font-weight:900}.mail-row b{grid-area:from;font-size:15px}.mail-row strong{grid-area:subject;font-size:17px}.mail-row small{grid-area:file;color:#6b7280;font-size:13px}.mail-preview{flex:1;overflow:auto;padding:22px 20px 42px}.mail-preview article{min-height:100%;padding:22px;border-radius:22px;background:#fff;box-shadow:0 2px 12px rgba(15,23,42,.12)}.mail-preview small{color:#64748b}.mail-preview h2{margin:8px 0 10px;color:#102a56;font-size:27px;line-height:1.16}.mail-preview p{color:#64748b;font-size:16px;line-height:1.45}.mail-file{margin:28px 0;padding:18px;border:1px solid #dbeafe;border-radius:18px;display:grid;grid-template-columns:44px 1fr;gap:5px 12px;background:#f0f7ff}.mail-file svg{grid-row:1/3;color:#2478f2}.mail-file span{color:#64748b}.mail-preview button{width:100%;min-height:58px;border-radius:17px!important;background:#2478f2!important;color:#fff!important;font-size:18px!important;font-weight:800!important}.mail-preview button svg{stroke:#fff}
.compat-list button:active{filter:brightness(.985)}.compat-sheet{display:none!important}
.tutorial-toolbar{min-height:68px;padding:12px 20px;background:#fff;display:grid;grid-template-columns:1fr 36px;align-items:center}.tutorial-toolbar button{grid-column:2;width:28px;height:28px;border-radius:50%!important;background:rgba(0,0,0,.45)!important;color:#fff!important}.tutorial-toolbar h1{grid-row:1;grid-column:1;margin:0;color:#102a56;font-size:20px}.tutorial-toolbar:not(.close){grid-template-columns:40px 1fr}.tutorial-toolbar:not(.close) button{grid-column:1;background:transparent!important;color:#102a56!important}.tutorial-toolbar:not(.close) h1{grid-column:2}.tutorial-chooser-ui main{flex:1;overflow:auto;padding:28px 20px 24px;background:#f2f2f7}.tutorial-chooser-ui main>h1{margin:0;color:#102a56;font-size:24px;line-height:1.1;letter-spacing:0;text-align:left}.tutorial-chooser-ui main>p,.tutorial-brand-ui main>p,.step-head p,.brand-head p{color:#788697;font-size:14px;line-height:1.4}.connect-card{width:100%;margin-top:16px;padding:20px;border-radius:24px!important;text-align:left}.connect-card>div{display:grid;grid-template-columns:56px 1fr 20px;gap:14px;align-items:center}.connect-card span{width:56px;height:56px;border-radius:16px;display:grid;place-items:center}.connect-card span img{width:28px;height:28px}.connect-card section em{display:block;margin-bottom:4px;font-style:normal;font-size:12px;font-weight:800;letter-spacing:.08em}.connect-card section b{font-size:22px}.connect-card>div>img{width:20px;height:20px}.connect-card p{margin:18px 0 14px;font-size:12px;line-height:1.5}.connect-card nav{display:flex;flex-wrap:wrap;gap:8px}.connect-card nav i,.connect-card small{display:inline-grid;border-radius:20px;padding:6px 12px;font-size:12px;font-style:normal;font-weight:800}.connect-card.lan{background:linear-gradient(135deg,#0a84ff,#007aff 55%,#0c447c)!important;color:#fff!important;box-shadow:0 3px 12px rgba(21,112,239,.24)}.connect-card.lan span{background:rgba(255,255,255,.24);border:1px solid rgba(255,255,255,.3)}.connect-card.lan nav i,.connect-card.lan small{background:rgba(255,255,255,.2);color:#fff}.connect-card.direct{background:#fff!important;color:#102a56!important;box-shadow:0 2px 10px rgba(16,42,86,.12)}.connect-card.direct span{background:#dbeeff}.connect-card.direct nav i{background:#eff8ff;color:#1570ef}.tutorial-brand-ui main{flex:1;overflow:auto;padding:16px 12px 20px;background:#f2f2f7}.tutorial-brand-ui h1{margin:0 8px 4px;font-size:24px}.tutorial-brand-ui main>p{margin:0 8px 8px}.tutorial-brand-ui section{display:grid;grid-template-columns:1fr 1fr}.brand-card{min-height:174px;margin:4px;border-radius:20px!important;padding:16px 14px;background:#fff!important;color:#102a56!important;text-align:center;box-shadow:0 2px 8px rgba(16,42,86,.12)}.brand-card img{width:110px;height:70px;object-fit:contain}.brand-card b{display:block;margin-top:6px;font-size:18px}.brand-card p{margin:4px 0 8px;color:#788697;font-size:12px}.brand-card small{display:inline-block;border-radius:20px;padding:4px 8px;background:#eaf4ff;color:#1570ef;font-size:10px;font-weight:800}.tutorial-step-ui{background:#f2f2f7}.step-head,.brand-head{padding:16px 20px 14px;background:#f2f2f7}.step-head span,.brand-head span{display:inline-flex;align-items:center;gap:6px;border-radius:20px;padding:4px 12px;background:rgba(255,255,255,.5);color:#1570ef;font-size:12px;font-weight:800;letter-spacing:.04em}.step-head span i,.brand-head span i{width:8px;height:8px;border-radius:50%;background:var(--c,#1570ef)}.step-head h1,.brand-head h1{margin:10px 0 4px;color:#102a56;font-size:24px;line-height:1.12}.step-pills{display:flex;gap:4px;margin-top:14px}.step-pills i{height:4px;flex:1;border-radius:4px;background:#e5e5ea}.step-pills i.on{background:#1570ef}.tutorial-step-ui main{flex:1;overflow:auto;padding:4px 16px 92px}.illus-card,.tutorial-card,.phys-card,.advantages{margin-bottom:12px;border-radius:12px;padding:13px;background:#fff;color:#102a56}.illus-card.warn{border:2px solid #ff9500}.illus-card.ok{border:2px solid #34c759}.illus-card>b,.advantages>b{display:block;margin-bottom:9px;color:#8e8e93;font-size:10px;text-transform:uppercase;letter-spacing:.05em}.printer-mini{display:grid;justify-items:center;gap:8px}.printer-mini img{width:180px;height:116px;object-fit:contain}.printer-mini span{min-width:112px;border-radius:6px;padding:4px 10px;background:#1a2530;color:#4ade80;text-align:center;font:700 11px monospace}.lan-diagram{height:130px;position:relative}.lan-diagram span,.lan-diagram i{position:absolute;top:36px;min-width:80px;border-radius:10px;padding:12px 8px;text-align:center;background:#f0f0f5;color:#102a56;font-style:normal;font-weight:800;font-size:12px}.lan-diagram i{left:50%;transform:translateX(-50%);background:#e5f8eb;color:#166534;border:1.5px solid #34c759}.lan-diagram span:first-child{left:0}.lan-diagram span:nth-child(3){right:0}.lan-diagram small{display:block;margin-top:4px;color:#34c759;font:700 10px monospace}.lan-diagram em{position:absolute;left:50%;bottom:0;transform:translateX(-50%);white-space:nowrap;border-radius:7px;padding:5px 12px;background:#e5f8eb;color:#166534;font-size:11px;font-style:normal;font-weight:800}.scan-illus{padding:14px;border-radius:12px;background:#eaf4ff}.scan-illus article{margin-top:8px;padding:10px;border-radius:10px;background:#fff;display:grid;grid-template-columns:36px 1fr 22px;align-items:center}.scan-illus article.dim{opacity:.45}.scan-illus article i{width:36px;height:36px;border-radius:50%;background:#e5f8eb}.scan-illus b{font-size:13px}.scan-illus small{grid-column:2;color:#34c759;font-size:11px}.scan-illus em{grid-row:1/3;grid-column:3;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#e5f8eb;color:#34c759;font-style:normal}.tutorial-card{display:grid;grid-template-columns:32px 1fr;gap:3px 10px}.tutorial-card i{grid-row:1/3;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#1570ef;color:#fff;font-style:normal;font-weight:800}.tutorial-card b,.phys-card b{font-size:15px}.tutorial-card p,.phys-card p,.advantages p{margin:4px 0 0;color:#788697;font-size:13px;line-height:1.4}.phys-card{background:#fff7ed;border:2px solid #ffd7a8;display:grid;grid-template-columns:40px 1fr;gap:2px 10px}.phys-card i{grid-row:1/3;width:36px;height:36px;display:grid;place-items:center}.phys-card img{width:26px;height:26px}.tip-box,.warn-box,.success-box{margin-bottom:12px;border-radius:11px;padding:10px;text-align:center;font-size:13px;font-weight:800;line-height:1.35}.tip-box{background:#fff4e0;color:#633806}.warn-box{background:#fdecec;color:#7f1d1d}.success-box{background:#e5f8eb;color:#166534}.tutorial-bottom{position:absolute;left:0;right:0;bottom:0;padding:10px 16px 20px;background:#f2f2f7}.tutorial-bottom button{width:100%;height:52px;border-radius:16px!important;background:#1570ef!important;color:#fff!important;font-size:16px!important;font-weight:800!important}
.connect-card.lan span img,.connect-card.lan>div>img{filter:brightness(0) invert(1);opacity:.9}.connect-card.direct span img,.connect-card.direct>div>img{filter:brightness(0) saturate(100%) invert(36%) sepia(83%) saturate(2095%) hue-rotate(202deg) brightness(97%) contrast(94%)}

/* Tutorial refresh: softer mobile guide surfaces with clearer hierarchy and touch rhythm. */
#interactive .guide-flow {
  --guide-page: #f5f8fc;
  --guide-surface: #ffffff;
  --guide-ink: #08224a;
  --guide-muted: #64748b;
  --guide-primary: #1570ef;
  --guide-primary-deep: #0b4ea2;
  --guide-teal: #0d9488;
  --guide-amber: #e97912;
  --guide-line: #dce7f5;
  --guide-soft: #eaf4ff;
  --guide-shadow: 0 14px 34px rgba(8, 34, 74, .13);
  --guide-soft-shadow: 0 8px 24px rgba(8, 34, 74, .08);
  background: var(--guide-page);
  color: var(--guide-ink);
}

#interactive .guide-flow button {
  touch-action: manipulation;
  cursor: pointer;
}

#interactive .tutorial-toolbar {
  min-height: 76px;
  padding: 18px 20px 10px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 1px 0 rgba(220, 231, 245, .95);
  display: grid;
  align-items: center;
}

#interactive .tutorial-toolbar h1 {
  color: var(--guide-ink);
  font-size: 21px;
  line-height: 26px;
  font-weight: 800;
}

#interactive .tutorial-toolbar button {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  display: grid;
  place-items: center;
  border-radius: 18px !important;
}

#interactive .tutorial-toolbar.close {
  grid-template-columns: 1fr 48px;
}

#interactive .tutorial-toolbar.close button {
  background: #eef2f7 !important;
  color: #475569 !important;
}

#interactive .tutorial-toolbar:not(.close) {
  grid-template-columns: 48px 1fr;
  column-gap: 8px;
}

#interactive .tutorial-toolbar:not(.close) button {
  background: transparent !important;
  color: var(--guide-ink) !important;
}

#interactive .tutorial-chooser-ui main,
#interactive .tutorial-brand-ui main,
#interactive .tutorial-step-ui {
  background:
    linear-gradient(180deg, #fbfdff 0%, var(--guide-page) 34%, #f2f6fb 100%);
}

#interactive .tutorial-chooser-ui main {
  padding: 28px 20px 28px;
}

#interactive .tutorial-chooser-ui main > h1,
#interactive .tutorial-brand-ui h1,
#interactive .step-head h1,
#interactive .brand-head h1 {
  color: var(--guide-ink);
  font-weight: 850;
  letter-spacing: 0;
}

#interactive .tutorial-chooser-ui main > h1,
#interactive .tutorial-brand-ui h1 {
  font-size: 25px;
  line-height: 31px;
}

#interactive .tutorial-chooser-ui main > p,
#interactive .tutorial-brand-ui main > p,
#interactive .step-head p,
#interactive .brand-head p {
  color: var(--guide-muted);
  font-size: 14px;
  line-height: 20px;
}

#interactive .tutorial-chooser-ui main > p {
  margin: 8px 0 22px;
}

#interactive .connect-card {
  width: 100%;
  min-height: 0;
  margin-top: 14px;
  padding: 18px;
  border-radius: 22px !important;
  border: 1px solid rgba(220, 231, 245, .92) !important;
  text-align: left;
  overflow: hidden;
  transform-origin: center;
}

#interactive .connect-card > div {
  grid-template-columns: 58px minmax(0, 1fr) 34px;
  gap: 13px;
  align-items: center;
}

#interactive .connect-card span {
  width: 58px;
  height: 58px;
  border-radius: 18px;
}

#interactive .connect-card span img {
  width: 29px;
  height: 29px;
}

#interactive .connect-card section em {
  margin-bottom: 3px;
  font-size: 11px;
  line-height: 14px;
  font-weight: 850;
  letter-spacing: .02em;
  text-transform: none;
}

#interactive .connect-card section b {
  display: block;
  color: inherit;
  font-size: 23px;
  line-height: 27px;
  font-weight: 900;
}

#interactive .connect-card > div > img {
  justify-self: end;
  width: 22px;
  height: 22px;
  padding: 5px;
  box-sizing: content-box;
  border-radius: 999px;
}

#interactive .connect-card p {
  margin: 16px 0 14px;
  max-width: 312px;
  font-size: 13px;
  line-height: 19px;
}

#interactive .connect-card nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#interactive .connect-card nav i,
#interactive .connect-card small {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 6px 11px;
  font-size: 11px;
  line-height: 14px;
  font-style: normal;
  font-weight: 850;
}

#interactive .connect-card.lan {
  color: #fff !important;
  background:
    linear-gradient(135deg, #2388ff 0%, #116fe9 48%, #0b4f9f 100%) !important;
  border-color: rgba(255, 255, 255, .16) !important;
  box-shadow: 0 18px 38px rgba(21, 112, 239, .28), inset 0 1px 0 rgba(255, 255, 255, .24) !important;
}

#interactive .connect-card.lan span {
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .34);
}

#interactive .connect-card.lan p {
  color: rgba(255, 255, 255, .94);
}

#interactive .connect-card.lan nav i,
#interactive .connect-card.lan small {
  color: #fff;
  background: rgba(255, 255, 255, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}

#interactive .connect-card.direct {
  color: var(--guide-ink) !important;
  background: var(--guide-surface) !important;
  box-shadow: var(--guide-soft-shadow) !important;
}

#interactive .connect-card.direct span {
  background: #e1f1ff;
}

#interactive .connect-card.direct section em {
  color: #0f3f7d;
}

#interactive .connect-card.direct p {
  color: #16345f;
}

#interactive .connect-card.direct nav i {
  color: #0f65d6;
  background: #eef7ff;
}

#interactive .tutorial-brand-ui main {
  padding: 22px 16px 28px;
}

#interactive .tutorial-brand-ui h1 {
  margin: 0 4px 5px;
}

#interactive .tutorial-brand-ui main > p {
  margin: 0 4px 18px;
}

#interactive .tutorial-brand-ui section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#interactive .brand-card {
  min-height: 196px;
  margin: 0;
  padding: 10px 10px 14px;
  border: 1px solid var(--guide-line) !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, #fff, #fbfdff) !important;
  color: var(--guide-ink) !important;
  text-align: left;
  box-shadow: var(--guide-soft-shadow) !important;
}

#interactive .brand-card img {
  width: 100%;
  height: 104px;
  object-fit: cover;
  margin-bottom: 12px;
  padding: 0;
  border-radius: 18px;
  background: #f7fbff;
  box-shadow: inset 0 0 0 1px rgba(220, 231, 245, .82);
}

#interactive .brand-card b {
  display: block;
  padding: 0 5px;
  margin-top: 0;
  font-size: 18px;
  line-height: 23px;
  font-weight: 900;
}

#interactive .brand-card p {
  min-height: 32px;
  margin: 3px 5px 10px;
  color: var(--guide-muted);
  font-size: 12px;
  line-height: 16px;
}

#interactive .brand-card small {
  display: inline-flex;
  margin: 0 5px;
  min-height: 26px;
  align-items: center;
  border-radius: 999px;
  padding: 5px 9px;
  background: #eef7ff;
  color: #0f65d6;
  font-size: 10px;
  line-height: 13px;
  font-weight: 850;
}

#interactive .step-head,
#interactive .brand-head {
  padding: 18px 20px 14px;
  background: transparent;
}

#interactive .step-head span,
#interactive .brand-head span {
  min-height: 30px;
  border-radius: 999px;
  padding: 5px 12px;
  background: rgba(255, 255, 255, .86);
  color: var(--guide-primary);
  box-shadow: 0 1px 0 rgba(220, 231, 245, .92);
  font-size: 12px;
  line-height: 16px;
  font-weight: 850;
  letter-spacing: 0;
}

#interactive .step-head span i,
#interactive .brand-head span i {
  width: 9px;
  height: 9px;
  background: var(--c, var(--guide-teal));
}

#interactive .step-head h1,
#interactive .brand-head h1 {
  margin: 12px 0 5px;
  font-size: 25px;
  line-height: 31px;
}

#interactive .step-pills {
  gap: 7px;
  margin-top: 16px;
}

#interactive .step-pills i {
  height: 5px;
  border-radius: 999px;
  background: #d8e3f0;
}

#interactive .step-pills i.on {
  background: linear-gradient(90deg, var(--guide-primary), var(--guide-teal));
}

#interactive .tutorial-step-ui main {
  padding: 2px 16px 96px;
}

#interactive .illus-card,
#interactive .tutorial-card,
#interactive .phys-card,
#interactive .advantages {
  margin-bottom: 12px;
  border: 1px solid var(--guide-line);
  border-radius: 20px;
  padding: 15px;
  background: var(--guide-surface);
  color: var(--guide-ink);
  box-shadow: var(--guide-soft-shadow);
}

#interactive .illus-card {
  padding: 16px;
  overflow: hidden;
}

#interactive .illus-card.warn {
  border: 1px solid rgba(233, 121, 18, .35);
  background: linear-gradient(180deg, #fff, #fff8ef);
}

#interactive .illus-card.ok,
#interactive .illus-card.success {
  border: 1px solid rgba(13, 148, 136, .32);
  background: linear-gradient(180deg, #ffffff, #f0fdfa);
}

#interactive .illus-card > b,
#interactive .advantages > b {
  margin-bottom: 12px;
  color: #526278;
  font-size: 11px;
  line-height: 14px;
  text-transform: none;
  letter-spacing: .02em;
  font-weight: 850;
}

#interactive .printer-mini {
  gap: 10px;
}

#interactive .printer-mini img {
  width: min(210px, 78%);
  height: 122px;
  object-fit: contain;
  padding: 6px;
}

#interactive .printer-mini span {
  min-width: 132px;
  border-radius: 999px;
  padding: 7px 13px;
  background: #0f172a;
  color: #67e8f9;
  font: 850 12px/15px RobotoLocal, Roboto, Arial, sans-serif;
  letter-spacing: 0;
}

#interactive .printer-mini.warn span {
  background: #7c2d12;
  color: #fed7aa;
}

#interactive .printer-mini.success span {
  background: #064e3b;
  color: #99f6e4;
}

#interactive .lan-diagram {
  height: 154px;
  margin-top: 4px;
  position: relative;
}

#interactive .lan-diagram::before,
#interactive .lan-diagram::after {
  content: "";
  position: absolute;
  top: 69px;
  height: 2px;
  background: linear-gradient(90deg, #b8d7ff, #99f6e4);
}

#interactive .lan-diagram::before {
  left: 72px;
  right: 50%;
}

#interactive .lan-diagram::after {
  left: 50%;
  right: 72px;
}

#interactive .lan-diagram span,
#interactive .lan-diagram i {
  top: 34px;
  min-width: 82px;
  border: 1px solid var(--guide-line);
  border-radius: 18px;
  padding: 13px 9px;
  background: #f8fbff;
  color: var(--guide-ink);
  box-shadow: 0 4px 14px rgba(8, 34, 74, .06);
  font-size: 12px;
  line-height: 15px;
}

#interactive .lan-diagram i {
  min-width: 96px;
  background: #effcf9;
  color: #115e59;
  border-color: rgba(13, 148, 136, .22);
  z-index: 1;
}

#interactive .lan-diagram small {
  color: #0d9488;
  font: 850 10px/13px RobotoLocal, Roboto, Arial, sans-serif;
}

#interactive .lan-diagram em {
  bottom: 3px;
  border-radius: 999px;
  padding: 7px 13px;
  background: #e8fff9;
  color: #115e59;
  border: 1px solid rgba(13, 148, 136, .18);
  font-size: 12px;
  line-height: 15px;
  font-weight: 850;
}

#interactive .scan-illus {
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(180deg, #eef7ff, #f8fbff);
}

#interactive .scan-illus article {
  min-height: 58px;
  margin-top: 10px;
  padding: 11px;
  border: 1px solid #e4edf8;
  border-radius: 16px;
  background: #fff;
  grid-template-columns: 38px 1fr 36px;
  gap: 2px 10px;
}

#interactive .scan-illus article i {
  width: 38px;
  height: 38px;
  background: #e8fff9;
  border: 1px solid rgba(13, 148, 136, .18);
}

#interactive .scan-illus b {
  font-size: 13px;
  line-height: 17px;
}

#interactive .scan-illus small {
  color: #0d9488;
  font-size: 11px;
  line-height: 14px;
}

#interactive .scan-illus em {
  width: 32px;
  height: 32px;
  background: #e8fff9;
  color: #0f766e;
  font-size: 10px;
  font-weight: 900;
}

#interactive .tutorial-card {
  grid-template-columns: 38px 1fr;
  gap: 4px 11px;
}

#interactive .tutorial-card i {
  grid-row: 1 / 3;
  width: 34px;
  height: 34px;
  border-radius: 13px;
  background: #eaf4ff;
  color: var(--guide-primary);
  font-size: 12px;
  font-weight: 900;
}

#interactive .tutorial-card b,
#interactive .phys-card b {
  font-size: 15px;
  line-height: 19px;
  font-weight: 850;
}

#interactive .tutorial-card p,
#interactive .phys-card p,
#interactive .advantages p {
  margin: 4px 0 0;
  color: var(--guide-muted);
  font-size: 13px;
  line-height: 19px;
}

#interactive .phys-card {
  grid-template-columns: 42px 1fr;
  gap: 4px 11px;
  border-color: rgba(233, 121, 18, .25);
  background: #fffaf4;
}

#interactive .phys-card i {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: #fff1df;
}

#interactive .phys-card img {
  width: 24px;
  height: 24px;
}

#interactive .tip-box,
#interactive .warn-box,
#interactive .success-box {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
  border-radius: 18px;
  padding: 13px 14px;
  text-align: left;
  font-size: 13px;
  line-height: 18px;
  font-weight: 750;
  box-shadow: none;
}

#interactive .tip-box {
  background: #fff8ed;
  color: #7c3b08;
  border: 1px solid rgba(233, 121, 18, .22);
}

#interactive .tip-box b {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #ffedd5;
  color: #9a3412;
  font-size: 11px;
}

#interactive .tip-box span {
  display: block;
}

#interactive .warn-box {
  background: #fef2f2;
  color: #7f1d1d;
  border: 1px solid #fecaca;
}

#interactive .success-box {
  display: block;
  background: #e8fff9;
  color: #115e59;
  border: 1px solid rgba(13, 148, 136, .22);
  text-align: center;
}

#interactive .advantages {
  background: linear-gradient(180deg, #fff, #f7fffd);
  border-color: rgba(13, 148, 136, .22);
}

#interactive .advantages p {
  position: relative;
  padding-left: 20px;
}

#interactive .advantages p::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--guide-teal);
}

#interactive .tutorial-bottom {
  padding: 10px 16px 20px;
  background: linear-gradient(180deg, rgba(245, 248, 252, 0), var(--guide-page) 30%);
}

#interactive .tutorial-bottom button {
  width: 100%;
  height: 54px;
  min-height: 54px;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #2388ff, #1570ef 52%, #0b4ea2) !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 850 !important;
  box-shadow: 0 14px 26px rgba(21, 112, 239, .28), inset 0 1px 0 rgba(255, 255, 255, .2) !important;
}

#interactive .guide-flow button:focus-visible {
  outline: 3px solid rgba(21, 112, 239, .28);
  outline-offset: 2px;
}

#interactive .connect-card:active,
#interactive .brand-card:active {
  transform: scale(.985);
}

@media (max-height: 760px) {
  #interactive .tutorial-chooser-ui main { padding-top: 22px; }
  #interactive .connect-card { padding: 16px; }
  #interactive .connect-card p { margin: 12px 0; }
  #interactive .brand-card { min-height: 180px; }
  #interactive .brand-card img { height: 92px; }
  #interactive .step-head h1,
  #interactive .brand-head h1 { font-size: 23px; line-height: 28px; }
  #interactive .printer-mini img { height: 104px; }
}

/* Connection guide polish pass: calmer print-app surfaces, cleaner cards, and less heavy visual hierarchy. */
#interactive .guide-flow {
  --guide-page: #eef6ff;
  --guide-surface: #ffffff;
  --guide-ink: #0b2b5b;
  --guide-muted: #5f728e;
  --guide-primary: #2378f2;
  --guide-primary-deep: #0d59bd;
  --guide-teal: #0aa79b;
  --guide-amber: #d86f10;
  --guide-line: rgba(190, 213, 238, .72);
  --guide-shadow: 0 10px 28px rgba(15, 45, 86, .09);
  --guide-soft-shadow: 0 6px 20px rgba(15, 45, 86, .065);
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 255, 255, .95) 0 16%, transparent 30%),
    radial-gradient(circle at 91% 13%, rgba(195, 232, 255, .7) 0 20%, transparent 34%),
    linear-gradient(180deg, #fbfdff 0%, #eef6ff 48%, #edf5fc 100%);
  opacity: 1 !important;
  transform: none !important;
}

#interactive .tutorial-toolbar {
  min-height: 74px;
  padding: 16px 18px 10px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 1px 0 rgba(194, 214, 236, .65);
}

#interactive .tutorial-toolbar h1 {
  font-size: 21px;
  line-height: 27px;
  font-weight: 800;
  letter-spacing: 0;
}

#interactive .tutorial-toolbar:not(.close) {
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 8px;
}

#interactive .tutorial-toolbar button {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 16px !important;
}

#interactive .tutorial-step-ui,
#interactive .tutorial-brand-ui main {
  background:
    linear-gradient(rgba(35, 120, 242, .045) 1px, transparent 1px) 0 0 / 100% 28px,
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, .92) 0 14%, transparent 32%),
    linear-gradient(180deg, #f9fcff 0%, #eef6ff 100%);
}

#interactive .tutorial-step-ui main,
#interactive .tutorial-brand-ui main {
  overflow-x: hidden;
}

#interactive .step-head,
#interactive .brand-head {
  padding: 16px 20px 12px;
}

#interactive .step-head span,
#interactive .brand-head span {
  min-height: 28px;
  padding: 5px 11px;
  border: 1px solid rgba(205, 224, 245, .75);
  background: rgba(255, 255, 255, .9);
  color: var(--guide-primary);
  box-shadow: none;
  font-size: 12px;
  line-height: 16px;
  font-weight: 800;
}

#interactive .step-head span i,
#interactive .brand-head span i {
  width: 8px;
  height: 8px;
}

#interactive .step-head h1,
#interactive .brand-head h1 {
  margin: 11px 0 5px;
  font-size: 24px;
  line-height: 30px;
  font-weight: 800;
  letter-spacing: 0;
}

#interactive .step-head p,
#interactive .brand-head p,
#interactive .tutorial-brand-ui main > p {
  max-width: 340px;
  color: var(--guide-muted);
  font-size: 14px;
  line-height: 20px;
}

#interactive .step-pills {
  gap: 8px;
  margin-top: 15px;
}

#interactive .step-pills i {
  height: 4px;
  background: #dbe8f5;
}

#interactive .step-pills i.on {
  background: var(--guide-primary);
}

#interactive .tutorial-step-ui main {
  padding: 2px 16px 12px;
}

#interactive .illus-card,
#interactive .tutorial-card,
#interactive .phys-card,
#interactive .advantages {
  border-radius: 22px;
  border: 1px solid var(--guide-line);
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--guide-soft-shadow);
}

#interactive .illus-card {
  padding: 16px;
}

#interactive .illus-card > b,
#interactive .advantages > b {
  margin-bottom: 13px;
  color: #415a78;
  font-size: 12px;
  line-height: 16px;
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0;
}

#interactive .lan-diagram {
  height: 158px;
  margin-top: 2px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 45%, rgba(10, 167, 155, .12), transparent 34%),
    linear-gradient(180deg, #f8fcff, #ffffff);
}

#interactive .lan-diagram::before,
#interactive .lan-diagram::after {
  top: 72px;
  height: 1px;
  background: linear-gradient(90deg, rgba(35, 120, 242, .28), rgba(10, 167, 155, .5));
}

#interactive .lan-diagram::before {
  left: 78px;
  right: 52%;
}

#interactive .lan-diagram::after {
  left: 52%;
  right: 78px;
}

#interactive .lan-diagram span,
#interactive .lan-diagram i {
  top: 37px;
  min-width: 82px;
  border-radius: 20px;
  border: 1px solid rgba(198, 219, 242, .8);
  padding: 12px 8px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 7px 18px rgba(13, 42, 82, .075);
  color: var(--guide-ink);
  font-size: 12px;
  line-height: 15px;
  font-weight: 800;
}

#interactive .lan-diagram i {
  min-width: 102px;
  background: #edfffb;
  border-color: rgba(10, 167, 155, .3);
  color: #075f58;
}

#interactive .lan-diagram small {
  margin-top: 4px;
  color: #0c8f86;
  font-size: 10px;
  line-height: 13px;
  font-weight: 800;
}

#interactive .lan-diagram em {
  bottom: 10px;
  border-radius: 999px;
  padding: 7px 14px;
  background: #e8fff9;
  color: #075f58;
  border: 1px solid rgba(10, 167, 155, .25);
  box-shadow: 0 7px 16px rgba(10, 167, 155, .1);
  font-size: 12px;
  line-height: 15px;
  font-weight: 800;
}

#interactive .scan-illus {
  padding: 16px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 18% 20%, rgba(35, 120, 242, .12), transparent 32%),
    linear-gradient(180deg, #f6fbff, #ffffff);
}

#interactive .scan-illus .printer-mini {
  margin-bottom: 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, #eef7ff, #f9fcff);
}

#interactive .printer-mini {
  gap: 8px;
}

#interactive .printer-mini img {
  width: min(198px, 74%);
  height: 112px;
  padding: 2px;
  object-fit: contain;
}

#interactive .printer-mini span {
  min-width: 124px;
  border-radius: 999px;
  padding: 7px 14px;
  background: #11213d;
  color: #bdf6ee;
  font-size: 12px;
  line-height: 15px;
  font-weight: 800;
  font-family: RobotoLocal, Roboto, Arial, sans-serif;
}

#interactive .scan-illus article {
  min-height: 62px;
  padding: 12px;
  border-radius: 18px;
  border-color: rgba(200, 219, 240, .78);
  box-shadow: 0 6px 16px rgba(13, 42, 82, .055);
}

#interactive .scan-illus article i {
  background: #e8fff9;
  border-color: rgba(10, 167, 155, .24);
}

#interactive .scan-illus b {
  color: var(--guide-ink);
  font-size: 13px;
  line-height: 18px;
  font-weight: 800;
}

#interactive .scan-illus small {
  color: #0a8f83;
  font-size: 11px;
  line-height: 14px;
}

#interactive .scan-illus em {
  background: #e8fff9;
  color: #08756e;
  font-weight: 800;
}

#interactive .tutorial-card {
  grid-template-columns: 42px 1fr;
  gap: 4px 12px;
  padding: 15px;
}

#interactive .tutorial-card i {
  width: 36px;
  height: 36px;
  border-radius: 15px;
  background: #eaf4ff;
  color: var(--guide-primary);
  box-shadow: inset 0 0 0 1px rgba(35, 120, 242, .06);
}

#interactive .tutorial-card b,
#interactive .phys-card b {
  color: var(--guide-ink);
  font-size: 15px;
  line-height: 20px;
  font-weight: 800;
}

#interactive .tutorial-card p,
#interactive .phys-card p,
#interactive .advantages p {
  color: var(--guide-muted);
  font-size: 13px;
  line-height: 19px;
}

#interactive .tip-box,
#interactive .warn-box,
#interactive .success-box {
  border-radius: 20px;
  padding: 13px 14px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
}

#interactive .tip-box {
  background: #fff8ee;
  border-color: rgba(216, 111, 16, .24);
  color: #6b3708;
}

#interactive .tip-box b {
  background: #ffefd9;
  color: #90490a;
}

#interactive .tutorial-brand-ui main {
  padding: 22px 18px 32px;
}

#interactive .tutorial-brand-ui h1 {
  margin: 0 2px 5px;
  font-size: 25px;
  line-height: 31px;
  font-weight: 800;
}

#interactive .tutorial-brand-ui main > p {
  margin: 0 2px 18px;
}

#interactive .tutorial-brand-ui section,
#interactive .tutorial-brand-ui .brand-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

#interactive .brand-card {
  width: 100%;
  min-width: 0;
  min-height: 86px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 32px;
  gap: 12px;
  align-items: center;
  border-radius: 22px !important;
  border-color: rgba(190, 213, 238, .75) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(250, 253, 255, .96)) !important;
  box-shadow: var(--guide-soft-shadow) !important;
  text-align: left;
}

#interactive .brand-card > span {
  width: 72px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background:
    radial-gradient(circle at 78% 18%, rgba(35, 120, 242, .12), transparent 30%),
    linear-gradient(180deg, #f6fbff, #ffffff);
  box-shadow: inset 0 0 0 1px rgba(207, 226, 247, .72);
  overflow: hidden;
}

#interactive .brand-card > span img {
  width: 64px;
  height: 48px;
  object-fit: contain;
  object-position: center;
  padding: 0;
  margin: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#interactive .brand-card section {
  min-width: 0;
}

#interactive .brand-card b {
  display: block;
  padding: 0;
  color: var(--brand);
  font-size: 18px;
  line-height: 23px;
  font-weight: 800;
}

#interactive .brand-card p {
  min-height: 0;
  margin: 2px 0 6px;
  font-size: 12px;
  line-height: 16px;
}

#interactive .brand-card small {
  margin: 0;
  min-height: 25px;
  padding: 5px 9px;
  background: #eef7ff;
  color: #1768d7;
  font-size: 10px;
  line-height: 13px;
  font-weight: 800;
}

#interactive .brand-card > i {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #f2f7ff;
}

#interactive .brand-card > i img {
  width: 18px;
  height: 18px;
  filter: brightness(0) saturate(100%) invert(38%) sepia(88%) saturate(1860%) hue-rotate(203deg) brightness(96%) contrast(98%);
}

#interactive .brand-card > i svg {
  width: 18px;
  height: 18px;
  color: var(--guide-primary);
  stroke-width: 2.4;
}

#interactive .tutorial-bottom {
  position: static;
  flex: 0 0 auto;
  padding: 12px 16px 20px;
  background: #eef6ff;
}

#interactive .tutorial-bottom button {
  height: 54px;
  min-height: 54px;
  border-radius: 18px !important;
  background: #2378f2 !important;
  box-shadow: 0 12px 24px rgba(35, 120, 242, .26) !important;
  color: #fff !important;
  font-size: 16px !important;
  line-height: 20px !important;
  font-weight: 800 !important;
}

@media (max-height: 760px) {
  #interactive .step-head,
  #interactive .brand-head { padding-top: 13px; }
  #interactive .tutorial-step-ui main { padding-top: 0; }
  #interactive .brand-card { min-height: 82px; }
  #interactive .brand-card > span { height: 56px; }
  #interactive .brand-card > span img { height: 44px; }
  #interactive .printer-mini img { height: 100px; }
}

/* Base design alignment: match Splash/Onboard/Home language — #1570ef primary, #102a56 ink,
   white 22px cards with soft inset-ring shadows, no teal, no ruled-paper texture, vector illustrations. */
#interactive .guide-flow {
  --guide-page: #f2f8ff;
  --guide-surface: #ffffff;
  --guide-ink: #102a56;
  --guide-muted: #66758a;
  --guide-primary: #1570ef;
  --guide-primary-2: #2e90fa;
  --guide-success: #22a447;
  --guide-amber: #f59e0b;
  --guide-line: rgba(152, 170, 194, .16);
  --guide-card-shadow: inset 0 0 0 1px rgba(152, 170, 194, .14), 0 14px 30px rgba(16, 42, 86, .055);
  background: linear-gradient(180deg, #fbfdff 0%, #f2f8ff 52%, #eef5fd 100%);
}

#interactive .tutorial-toolbar {
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 1px 0 rgba(152, 170, 194, .22);
}

#interactive .tutorial-toolbar h1 { color: var(--guide-ink); }

#interactive .tutorial-toolbar:not(.close) button {
  border-radius: 50% !important;
  color: var(--guide-ink) !important;
}

/* Clean page surface — drop the ruled-notebook texture. */
#interactive .tutorial-step-ui,
#interactive .tutorial-brand-ui main {
  background:
    radial-gradient(circle at 85% 4%, rgba(209, 233, 255, .55) 0 12%, transparent 30%),
    linear-gradient(180deg, #fbfdff 0%, #f2f8ff 60%, #eef5fd 100%);
}

#interactive .step-head span,
#interactive .brand-head span {
  border: 0;
  background: #eaf4ff;
  color: var(--guide-primary);
  box-shadow: inset 0 0 0 1px rgba(21, 112, 239, .12);
}

#interactive .step-head h1,
#interactive .brand-head h1 { color: var(--guide-ink); }

#interactive .step-head p,
#interactive .brand-head p { color: var(--guide-muted); }

/* Progress: mirror onboarding pager (5px pills). */
#interactive .step-pills { gap: 7px; }
#interactive .step-pills i { height: 5px; border-radius: 5px; background: #e0e8f2; }
#interactive .step-pills i.on { background: var(--guide-primary); }

/* Cards: home-style soft surfaces. */
#interactive .illus-card,
#interactive .tutorial-card,
#interactive .phys-card,
#interactive .advantages {
  border: 0;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: var(--guide-card-shadow);
}

#interactive .illus-card.ok { border: 0; box-shadow: inset 0 0 0 1.5px rgba(34, 164, 71, .35), 0 14px 30px rgba(16, 42, 86, .055); }
#interactive .illus-card.warn { border: 0; box-shadow: inset 0 0 0 1.5px rgba(245, 158, 11, .4), 0 14px 30px rgba(16, 42, 86, .055); }

#interactive .illus-card > b,
#interactive .advantages > b { color: var(--guide-muted); font-weight: 700; }

/* Step number: solid primary circle with white numeral (home arrow-circle motif). */
#interactive .tutorial-card i {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--guide-primary-2), var(--guide-primary));
  color: #fff;
  box-shadow: 0 6px 14px rgba(21, 112, 239, .22);
  font-size: 14px;
}

#interactive .tutorial-card b,
#interactive .phys-card b { color: var(--guide-ink); font-weight: 700; }

#interactive .tutorial-card p,
#interactive .phys-card p,
#interactive .advantages p { color: var(--guide-muted); }

/* Physical-button callout: soft amber, no hard border. */
#interactive .phys-card {
  background: #fff9ef;
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .22), 0 10px 24px rgba(16, 42, 86, .045);
}

/* LAN diagram: onboard3 motif — white nodes, dashed blue links, green success pill. */
#interactive .lan-diagram {
  border-radius: 18px;
  background: linear-gradient(180deg, #f7fbff, #ffffff);
}

#interactive .lan-diagram::before,
#interactive .lan-diagram::after {
  height: 0;
  background: none;
  border-top: 2px dashed rgba(21, 112, 239, .38);
}

#interactive .lan-diagram span,
#interactive .lan-diagram i {
  border: 0;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(152, 170, 194, .18), 0 8px 18px rgba(16, 42, 86, .07);
  color: var(--guide-ink);
}

#interactive .lan-diagram i {
  background: #eaf4ff;
  box-shadow: inset 0 0 0 1px rgba(21, 112, 239, .16), 0 8px 18px rgba(21, 112, 239, .12);
  color: #0d59bd;
}

#interactive .lan-diagram small { color: var(--guide-muted); font-family: inherit; }
#interactive .lan-diagram i small { color: #1768d7; }

#interactive .lan-diagram em {
  border: 0;
  background: #e9f8ee;
  box-shadow: inset 0 0 0 1px rgba(34, 164, 71, .18);
  color: #187a35;
}

/* Scan illustration: clean sky panel + white result rows. */
#interactive .scan-illus {
  border-radius: 18px;
  background: linear-gradient(180deg, #eff8ff, #f8fcff);
  box-shadow: inset 0 0 0 1px rgba(21, 112, 239, .08);
}

#interactive .scan-illus .printer-mini {
  border-radius: 16px;
  background: transparent;
}

#interactive .printer-mini img { width: min(170px, 62%); height: 96px; }

#interactive .printer-mini span {
  border-radius: 999px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(21, 112, 239, .18);
  color: var(--guide-primary);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
}

#interactive .printer-mini.success span {
  background: #e9f8ee;
  box-shadow: inset 0 0 0 1px rgba(34, 164, 71, .2);
  color: #187a35;
}

#interactive .printer-mini.warn span {
  background: #fff7e8;
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .3);
  color: #8a5200;
}

#interactive .scan-illus article {
  border: 0;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(152, 170, 194, .16), 0 6px 16px rgba(16, 42, 86, .05);
}

#interactive .scan-illus article i {
  border: 0;
  background: #eaf4ff;
  box-shadow: inset 0 0 0 1px rgba(21, 112, 239, .12);
}

#interactive .scan-illus b { color: var(--guide-ink); font-weight: 700; }
#interactive .scan-illus small { color: var(--guide-success); }

#interactive .scan-illus em {
  background: #22a447;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  box-shadow: 0 4px 10px rgba(34, 164, 71, .3);
}

/* Info boxes: status colors from the home card language. */
#interactive .tip-box { background: #fff7e8; border: 0; box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .22); color: #8a5200; }
#interactive .tip-box b { background: #ffedcc; color: #8a5200; }
#interactive .warn-box { background: #fdf0ef; border: 0; box-shadow: inset 0 0 0 1px rgba(217, 45, 32, .18); color: #b42318; }
#interactive .success-box { background: #e9f8ee; border: 0; box-shadow: inset 0 0 0 1px rgba(34, 164, 71, .18); color: #187a35; }

/* Brand picker: ink titles, brand color only as a soft tint on the illustration tile. */
#interactive .brand-card {
  border: 0 !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  box-shadow: var(--guide-card-shadow) !important;
}

#interactive .brand-card > span {
  border-radius: 18px;
  background: color-mix(in srgb, var(--brand) 9%, #f7fbff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 18%, transparent);
}

#interactive .brand-card > span img { width: 58px; height: 42px; }

#interactive .brand-card b { color: var(--guide-ink); font-weight: 800; }
#interactive .brand-card p { color: var(--guide-muted); }

#interactive .brand-card small {
  background: #eaf4ff;
  color: #1768d7;
  box-shadow: inset 0 0 0 1px rgba(21, 112, 239, .1);
}

#interactive .brand-card > i {
  background: #eaf4ff;
  box-shadow: inset 0 0 0 1px rgba(21, 112, 239, .1);
}

/* CTA: identical to the onboarding next pill. */
#interactive .tutorial-bottom {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(242, 248, 255, .85) 40%, #eef5fd 100%);
}

#interactive .tutorial-bottom button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 16px !important;
  background: #1570ef !important;
  box-shadow: 0 14px 28px rgba(21, 112, 239, .24), inset 0 -1px 2px rgba(16, 42, 86, .22) !important;
}

#interactive .tutorial-bottom button svg {
  width: 22px;
  height: 22px;
  color: #fff;
  stroke: #fff;
}

/* Fixes: plain-text status boxes must not inherit the tip-box icon grid;
   brand tiles host product photos again, so keep them neutral. */
#interactive .warn-box,
#interactive .success-box {
  display: block;
  grid-template-columns: none;
  text-align: center;
}

#interactive .brand-card > span {
  background: linear-gradient(180deg, #f6fbff, #ffffff);
  box-shadow: inset 0 0 0 1px rgba(207, 226, 247, .72);
}

#interactive .brand-card > span img {
  width: 64px;
  height: 48px;
}

#interactive .printer-mini img {
  width: min(190px, 70%);
  height: 108px;
}