:root { --ink:#302838; --muted:#746b7d; --canvas:#f7f4f9; --paper:#fff; --line:#ded6e5; --brand:#76518d; --brand-dark:#503663; --soft:#eee6f3; --green:#397d59; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); background:var(--canvas); font-family:Heebo,sans-serif; }
button,a { -webkit-tap-highlight-color:transparent; }
.topbar { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 max(20px,calc((100vw - 760px)/2)); color:#fff; background:var(--brand-dark); }
.brand { display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none; font:600 1.3rem Newsreader,serif; }.brand-mark { width:32px; height:32px; display:grid; place-items:center; border:1px solid rgb(255 255 255 / 45%); border-radius:50%; font-family:Heebo,sans-serif; }
.icon-button { width:40px; height:40px; display:inline-grid; place-items:center; color:inherit; background:transparent; border:1px solid rgb(255 255 255 / 25%); border-radius:5px; text-decoration:none; }
.tutorial-shell { width:min(760px,calc(100% - 28px)); margin:28px auto 48px; }.page-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:18px; }.page-heading > svg { width:38px; height:38px; color:var(--brand); }.eyebrow { margin:0 0 3px; color:var(--brand); font-size:.72rem; font-weight:800; }h1 { margin:0 0 4px; font-size:1.8rem; }.page-heading p:not(.eyebrow) { margin:0; color:var(--muted); }
.tutorial-card { padding:24px; background:var(--paper); border:1px solid var(--line); border-radius:8px; box-shadow:0 14px 36px rgb(80 54 99 / 7%); }.tutorial-stage { position:relative; min-height:280px; display:grid; place-items:center; overflow:hidden; background:linear-gradient(145deg,#fbf8fc,#f0e8f5); border-radius:6px; }
.mock-login,.mock-board { position:absolute; width:min(280px,74%); padding:18px; background:#fff; border:1px solid var(--line); border-radius:7px; box-shadow:0 12px 22px rgb(80 54 99 / 12%); opacity:0; transform:translateX(35px) scale(.96); transition:opacity .4s ease,transform .4s ease; }.mock-login.active,.mock-board.active { opacity:1; transform:translateX(0) scale(1); }.mock-brand { margin-bottom:10px; color:var(--brand-dark); font:600 1.05rem Newsreader,serif; text-align:center; }.mock-login > strong { display:block; margin-bottom:13px; font-size:1.1rem; text-align:center; }.mock-field { display:grid; gap:4px; margin-top:8px; padding:8px; border:1px solid #d9d0e1; border-radius:4px; }.mock-field span { color:var(--muted); font-size:.65rem; }.mock-field b { display:block; min-height:15px; color:var(--brand); font-size:.75rem; letter-spacing:2px; }.mock-button { margin-top:14px; padding:8px; color:#fff; background:var(--brand); border-radius:4px; font-size:.78rem; font-weight:800; text-align:center; }.board-top { display:flex; justify-content:space-between; align-items:center; padding-bottom:12px; color:#fff; background:var(--brand-dark); font-size:.85rem; font-weight:700; }.board-top svg { width:17px; }.board-title { margin:22px 0 12px; font-size:1.2rem; font-weight:800; }.board-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }.board-grid i { aspect-ratio:1; display:block; background:#f2edf5; border:1px solid var(--line); border-radius:3px; }.board-grid i:nth-child(3n) { background:#e5f1e8; border-color:#9bc8aa; }.board-label { margin-top:14px; color:var(--muted); font-size:.75rem; }
.stage-copy { min-height:88px; padding:20px 4px 4px; text-align:center; }.stage-count { margin-bottom:5px; color:var(--brand); font-size:.75rem; font-weight:800; }.stage-copy h2 { margin:0 0 4px; font-size:1.35rem; }.stage-copy p:last-child { margin:0; color:var(--muted); }.stage-progress { display:flex; justify-content:center; gap:8px; margin:4px 0 20px; }.stage-progress button { width:30px; height:30px; padding:0; color:var(--muted); background:var(--paper); border:1px solid var(--line); border-radius:50%; cursor:pointer; }.stage-progress button[aria-selected=true] { color:#fff; background:var(--brand); border-color:var(--brand); }.tutorial-controls { display:flex; justify-content:center; gap:8px; }.primary-button,.secondary-button { min-height:42px; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:8px 15px; border-radius:5px; font:700 .9rem Heebo,sans-serif; cursor:pointer; }.primary-button { color:#fff; background:var(--brand); border:0; }.secondary-button { color:var(--brand); background:var(--soft); border:1px solid var(--line); }.tutorial-controls svg { width:16px; }.disclaimer { margin:14px 0 0; color:var(--muted); font-size:.78rem; text-align:center; }
.tutorial-next { margin:16px 0 0; text-align:center; }.tutorial-next a { text-decoration:none; }
@media(max-width:520px) { .tutorial-shell { width:calc(100% - 20px); margin-top:18px; }.tutorial-card { padding:14px; }.tutorial-stage { min-height:240px; }.tutorial-controls { display:grid; grid-template-columns:1fr 1fr; }.primary-button,.secondary-button { width:100%; } }
@media(prefers-reduced-motion:reduce) { .mock-login,.mock-board { transition:none; } }