/* Tutorial chrome matches the download page; app/system illustration tokens stay intact. */
.tutorial-page{
  --sf:#f8f9f7;--on:#20332e;--onv:#61766c;--line:#dde7e0;--hair:#e9eeea;
  --tut-accent:var(--brand);--tut-rgb:var(--glow);--tut-accent-ink:var(--brand);
  --tut-tint:rgba(var(--glow),.055);--tut-edge:rgba(var(--glow),.22);
  --tut-hover:rgba(var(--glow),.1);--tut-hover-ink:var(--brand-d);
  --tut-hover-edge:rgba(var(--glow),.32);
  background:#f8f9f7;
  background-image:radial-gradient(ellipse 900px 560px at 28% 0,rgba(225,153,153,.04),transparent 65%),radial-gradient(ellipse 780px 560px at 82% 8%,rgba(218,232,224,.18),transparent 72%);
  background-attachment:scroll;
}
.tutorial-page.tutorial-soft-red{
  --tut-accent:#d45257;--tut-rgb:212,82,87;--tut-accent-ink:#a83f46;
  --tut-tint:#fff1f1;--tut-edge:#e9c9cb;
  --tut-hover:#ffe7e8;--tut-hover-ink:#98363d;--tut-hover-edge:#dfaeb2;
}
.tutorial-page .public-footer-links a:hover{color:var(--tut-accent-ink);}
.tutorial-page .tut-tabs{background:#f8f9f7f5;border-bottom-color:var(--line);box-shadow:none;}
.tutorial-page .tut-tab,.tutorial-page .tut-pill{background:#fff;border-color:var(--line);color:var(--onv);box-shadow:none;}
.tutorial-page .tut-tab:hover,.tutorial-page .tut-pill:hover{color:var(--tut-accent-ink);background:var(--tut-tint);border-color:var(--tut-edge);}
.tutorial-page #tut-android:checked ~ .tut-tabs [data-platform-tab="android"],
.tutorial-page #tut-ios:checked ~ .tut-tabs [data-platform-tab="ios"],
.tutorial-page #tut-windows:checked ~ .tut-tabs [data-platform-tab="windows"],
.tutorial-page #tut-macos:checked ~ .tut-tabs [data-platform-tab="macos"],
.tutorial-page #tut-linux:checked ~ .tut-tabs [data-platform-tab="linux"],
.tutorial-page #aid-1:checked ~ .tut-mtab-btns label[for="aid-1"],
.tutorial-page #aid-2:checked ~ .tut-mtab-btns label[for="aid-2"],
.tutorial-page #aid-3:checked ~ .tut-mtab-btns label[for="aid-3"]{
  color:var(--tut-accent-ink);background:var(--tut-tint);border-color:var(--tut-edge);box-shadow:none;
}
.tutorial-page #aid-1:checked ~ .tut-mtab-btns label[for="aid-1"] .tut-pill-ca::after,
.tutorial-page #aid-2:checked ~ .tut-mtab-btns label[for="aid-2"] .tut-pill-ca::after,
.tutorial-page #aid-3:checked ~ .tut-mtab-btns label[for="aid-3"] .tut-pill-ca::after{color:var(--tut-accent-ink);}
.tutorial-page .tut-back-btn,.tutorial-page .tut-foot-cta>.btn-brand,
.tutorial-page .tut-arch-selector>.btn-brand,.tutorial-page .tut-idmore-btn{
  color:var(--tut-accent-ink);background:var(--tut-tint);border:1px solid var(--tut-edge);box-shadow:none;
}
.tutorial-page .tut-back-btn:hover,.tutorial-page .tut-foot-cta>.btn-brand:hover,
.tutorial-page .tut-arch-selector>.btn-brand:hover,.tutorial-page .tut-idmore-btn:hover{
  color:var(--tut-hover-ink);background:var(--tut-hover);border-color:var(--tut-hover-edge);filter:none;box-shadow:none;
}
.tutorial-page .tut-panel .tut-step{border-color:var(--line);box-shadow:0 3px 16px -12px #496e5920;}
.tutorial-page .tut-panel .tut-step:hover{border-color:#cfdcd3;box-shadow:0 8px 24px -19px #496e5930;transform:none;}
.tutorial-page .tut-panel .tut-step::before{background:linear-gradient(180deg,rgba(var(--tut-rgb),.24),rgba(var(--tut-rgb),.07));}
.tutorial-page .tut-panel .tut-step-no{color:var(--tut-accent-ink);background:var(--tut-tint);box-shadow:0 0 0 1px var(--tut-edge);}
.tutorial-page .tut-panel .tut-step.is-optional{background:#f4f7f3;border-color:#d9e2da;}
.tutorial-page .tut-panel .tut-step.is-optional .tut-step-no{color:#62766b;background:#edf2ed;box-shadow:0 0 0 1px #d9e2da;}
.tutorial-page .tut-outline-link{border-color:var(--line);}
.tutorial-page .tut-outline-link:hover,.tutorial-page .tut-outline-link.is-current{color:var(--tut-accent-ink);background:var(--tut-tint);border-color:var(--tut-edge);}
.tutorial-page .tut-outline-no{color:var(--tut-accent-ink);background:var(--tut-tint);}
.tutorial-page .tut-list li::before{border-color:var(--tut-accent);box-shadow:none;}
.tutorial-page .tut-step-desc code{color:var(--tut-accent-ink);background:#f1f4f1;}
.tutorial-page .tut-install-block{background:#fcfdfb;border-color:var(--line);}
.tutorial-page .tut-install-block[open]>summary{color:var(--tut-accent-ink);border-color:var(--line);}
.tutorial-page .tut-install-sources a,.tutorial-page .tut-platform-notice a{color:var(--tut-accent-ink);}
.tutorial-page .tut-mtab-panel{background:#fafbf8;border-color:var(--line);}
.tutorial-page .tut-panel .tut-sub{color:var(--tut-accent-ink);background:var(--tut-tint);border-color:var(--tut-edge);}
.tutorial-page .tut-platform-notice{background:#f0f5f0;border-color:#d9e4da;}
.tutorial-page .tut-store-link,.tutorial-page .tut-copy-code{color:var(--tut-accent-ink);background:var(--tut-tint);border-color:var(--tut-edge);}
.tutorial-page .tut-store-link:hover,.tutorial-page .tut-copy-code:hover{color:var(--tut-hover-ink);background:var(--tut-hover);border-color:var(--tut-hover-edge);}
.tutorial-page .tut-panel .tut-mock{
  --sf:#fff;--on:#1b1e24;--onv:#606874;--line:rgba(var(--ov),.1);--hair:rgba(var(--ov),.06);
  color:var(--on);background:radial-gradient(ellipse at 50% 0,#edf3ee,transparent 65%),#f3f6f2;border-top-color:#e3eae2;
}
.tutorial-page .tut-tab:focus-visible,.tutorial-page .tut-pill:focus-visible,
.tutorial-page .tut-back-btn:focus-visible,.tutorial-page .tut-outline-link:focus,
.tutorial-page .tut-copy-code:focus,.tutorial-page .tut-store-link:focus-visible,
.tutorial-page .tut-foot-cta>.btn:focus-visible,.tutorial-page .tut-install-block>summary:focus-visible,
.tutorial-page .public-nav-link:focus-visible,.tutorial-page .tut-arch-selector>.btn:focus-visible{outline-color:var(--tut-accent);}