/* tutorial page — matches the alpha account / gate look */
:root{--bg:#0b0e14;--card:#131826;--ink:#e8e6e3;--dim:#9aa4b2;--gold:#d4a23c;--red:#e5534b;--up:#3fb950;--line:#222a3a;--btn:#2c7be5}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font:16px/1.65 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:1.5rem}
.wrap{max-width:720px;width:100%}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:2rem 1.9rem}
h1{font-size:1.5rem;margin-bottom:.4rem}
h2{font-size:1.25rem;margin:.5rem 0;color:var(--gold)}
p{color:var(--dim);margin:.7rem 0}
.muted{color:var(--dim)} .small{font-size:.85rem}
.ok{color:var(--up)} .bad{color:var(--red)}
a{color:var(--btn)}
.tag{display:inline-block;background:rgba(212,162,60,.12);color:var(--gold);border:1px solid rgba(212,162,60,.4);border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.08em;padding:.2rem .7rem;margin-bottom:1rem}
.wiz-btn{display:inline-block;background:var(--btn);color:#fff;border:0;border-radius:8px;padding:.6rem 1.1rem;font:inherit;cursor:pointer;text-decoration:none}
.linkbtn{background:transparent;border:0;color:var(--btn);font:inherit;cursor:pointer;padding:0;margin-bottom:.6rem}

/* progress bar */
.pbar{height:8px;background:var(--bg);border:1px solid var(--line);border-radius:999px;overflow:hidden;margin:1rem 0 .5rem}
.pfill{height:100%;background:var(--up);transition:width .25s}
.pmeta{display:flex;justify-content:space-between;gap:1rem;font-size:.85rem;flex-wrap:wrap}

/* stage list */
.stages{list-style:none;margin:1.1rem 0 0}
.stage{border:1px solid var(--line);border-radius:10px;margin:.5rem 0;background:var(--bg);cursor:pointer}
.stage:hover{border-color:var(--btn)}
.stage[data-stage="0"]{cursor:default}
.srow{display:flex;align-items:center;gap:.8rem;padding:.7rem .85rem}
.snum{flex:0 0 1.6rem;height:1.6rem;line-height:1.6rem;text-align:center;border-radius:50%;background:var(--card);border:1px solid var(--line);font-size:.8rem;color:var(--dim)}
.sbody{flex:1 1 auto;min-width:0}
.slabel{color:var(--ink);font-size:.95rem}
.sdesc{color:var(--dim);font-size:.8rem;margin-top:.1rem}
.sgo{flex:0 0 auto;font-size:.85rem}
.is-done .snum{background:var(--up);color:#0b0e14;border-color:var(--up)}
.sbadge{flex:0 0 auto;font-size:.7rem;font-weight:700;letter-spacing:.04em;padding:.15rem .55rem;border-radius:999px;border:1px solid var(--line);color:var(--dim)}
.b-done{color:var(--up);border-color:rgba(63,185,80,.5)}
.b-open{color:var(--btn);border-color:rgba(44,123,229,.5)}
.b-gated{color:var(--gold);border-color:rgba(212,162,60,.4)}
.b-phase3{color:var(--gold);border-color:rgba(212,162,60,.4)}

/* detail view */
.detail{padding:.2rem 0}
.dtier{font-size:.8rem;color:var(--dim);margin-bottom:.3rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.markrow{display:flex;align-items:flex-start;gap:.55rem;margin:1rem 0;color:var(--ink);font-size:.95rem}
.legend{margin-top:1.2rem;font-size:.8rem;color:var(--dim);border-top:1px solid var(--line);padding-top:.8rem}
.legend b{color:var(--ink)}