/* RTOSafe click-through walkthrough player. Shared by every walkthrough in this folder. */
:root { --green:#2b846c; --green-light:#49bf9d; --ink:#111827; --muted:#4b5563; --line:#e5e7eb; }
* { box-sizing: border-box; }
body { margin:0; font-family: Inter, system-ui, sans-serif; color:var(--ink); background:#f9fafb; }
.wt { max-width: 1120px; margin: 24px auto; padding: 0 16px; }
.wt-card { background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 10px 30px -12px rgba(17,24,39,.18); overflow:hidden; }
.wt-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 20px; border-bottom:1px solid var(--line); }
.wt-brand { display:flex; align-items:center; gap:10px; min-width:0; color:inherit; text-decoration:none; }
.wt-brand img { height:26px; width:auto; flex-shrink:0; }
.wt-title { font-weight:600; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wt-count { font-size:13px; color:var(--muted); white-space:nowrap; }
.wt-bar { height:3px; background:#edfbf7; }
.wt-bar span { display:block; height:100%; background:var(--green); transition:width .35s ease; }
.wt-stage { position:relative; background:#f3f4f6; line-height:0; overflow:hidden; }
.wt-stage img { width:100%; height:auto; display:block; user-select:none; }
.wt-hot { position:absolute; border-radius:8px; box-shadow:0 0 0 2px rgba(255,255,255,.95), 0 0 0 9999px rgba(17,24,39,.42), 0 0 24px 6px rgba(255,255,255,.35); cursor:pointer; background:transparent; border:0; padding:0; }
.wt-hot.final { cursor:default; }
.wt-stage.nobox .wt-hot { box-shadow:none; }
.wt-stage.nobox .wt-dot { display:none; }
.wt-dot { position:absolute; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; background:var(--green); border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.3); pointer-events:none; z-index:1; }
.wt-dot::after { content:""; position:absolute; inset:-2px; border-radius:50%; background:var(--green-light); animation:wtPing 1.5s cubic-bezier(0,0,.2,1) infinite; z-index:-1; }
.wt-dot.final { display:none; }
.wt-hot.show, .wt-dot.show, .wt-tip.show { animation:wtIn .35s ease .05s both; }
@keyframes wtIn { from { opacity:0; } to { opacity:1; } }
@keyframes wtPing { 0% { transform:scale(1); opacity:.8; } 80%,100% { transform:scale(2.6); opacity:0; } }
.wt-vid { position:absolute; inset:0; width:100%; height:100%; display:none; background:#fff; cursor:pointer; z-index:3; }
.wt-stage.playing .wt-vid { display:block; }
.wt-stage.busy .wt-hot, .wt-stage.busy .wt-dot, .wt-stage.busy .wt-tip { visibility:hidden; }
.wt-tip { position:absolute; width:min(340px, 80%); background:var(--ink); color:#fff; border-radius:12px; padding:14px 16px; font-size:15px; line-height:1.5; box-shadow:0 12px 28px rgba(0,0,0,.25); z-index:2; }
.wt-tip b { display:block; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--green-light); margin-bottom:4px; }
.wt-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 20px; border-top:1px solid var(--line); }
.wt-btn { font:inherit; font-size:14px; font-weight:500; border-radius:8px; padding:8px 16px; cursor:pointer; border:1px solid var(--line); background:#fff; color:var(--ink); }
.wt-btn:disabled { opacity:.4; cursor:default; }
.wt-btn.primary { background:var(--green); border-color:var(--green); color:#fff; }
.wt-hint { font-size:13px; color:var(--muted); text-align:center; }
.wt-cap-mobile { display:none; padding:14px 20px; font-size:15px; line-height:1.5; border-top:1px solid var(--line); }
.wt-choice { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(17,24,39,.55); line-height:1.5; z-index:4; }
.wt-choice[hidden] { display:none; }
.wt.choosing .wt-hint { visibility:hidden; }
.wt-stage.choosing .wt-hot, .wt-stage.choosing .wt-dot, .wt-stage.choosing .wt-tip { display:none; }
.wt-choice-card { background:#fff; border-radius:16px; padding:28px; width:min(560px, 100%); box-shadow:0 20px 40px rgba(0,0,0,.3); animation:wtIn .35s ease both; }
.wt-choice-card h2 { margin:0 0 6px; font-size:22px; line-height:1.25; }
.wt-choice-card p { margin:0 0 20px; color:var(--muted); font-size:15px; }
.wt-options { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.wt-option { font:inherit; text-align:left; cursor:pointer; background:#fff; border:1.5px solid var(--line); border-radius:12px; padding:16px; display:flex; flex-direction:column; gap:4px; transition:border-color .15s, box-shadow .15s, transform .15s; }
.wt-option:hover, .wt-option:focus-visible { border-color:var(--green); box-shadow:0 0 0 3px #d1f2e8; transform:translateY(-1px); outline:none; }
.wt-option strong { font-size:15px; color:var(--ink); }
a.wt-option { text-decoration:none; }
.wt-option.primary { border-color:var(--green); background:#f0faf6; }
.wt-btn.wt-pulse { animation:wtNudge 1.6s ease-in-out infinite; }
@keyframes wtNudge { 0%,100% { box-shadow:0 0 0 0 rgba(43,132,108,.45); } 50% { box-shadow:0 0 0 6px rgba(43,132,108,0); } }
.wt-cta { font:inherit; font-size:15px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:12px 20px; border:0; border-radius:10px; background:var(--green); color:#fff; cursor:pointer; transition:background .15s; }
.wt-cta:hover, .wt-cta:focus-visible { background:#236e5a; outline:none; }
.wt-cta svg { width:16px; height:16px; }
.wt-links { list-style:none; margin:18px 0 0; padding:14px 0 0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:2px; }
.wt-links:empty { display:none; }
.wt-link { font:inherit; display:flex; align-items:baseline; gap:8px; width:100%; text-align:left; padding:6px 0; background:none; border:0; cursor:pointer; color:var(--green); text-decoration:none; font-size:15px; font-weight:600; }
.wt-link::after { content:"→"; transition:transform .15s; }
.wt-link:hover::after, .wt-link:focus-visible::after { transform:translateX(3px); }
.wt-link:hover strong, .wt-link:focus-visible strong { text-decoration:underline; }
.wt-link span { color:var(--muted); font-weight:400; font-size:14px; }
.wt-link span:empty { display:none; }
.wt-link span::before { content:"· "; }
.wt-option span { font-size:14px; color:var(--muted); }
/* Embedded in an iframe (help articles, Discourse): fill the frame, no page chrome. */
html.wt-embed body { background:transparent; }
html.wt-embed .wt { margin:0; padding:0; max-width:none; }
html.wt-embed .wt-card { box-shadow:none; }
@media (max-width: 720px) {
  .wt-tip { display:none; }
  .wt-cap-mobile { display:block; }
  .wt-hint { display:none; }
  .wt-title { font-size:14px; }
  .wt-choice { position:static; background:#fff; padding:16px; }
  .wt-stage.choosing .wt-img { display:none; }
  .wt-choice-card { box-shadow:none; padding:4px; }
  .wt-options { grid-template-columns:1fr; }
}