.tutorial-page{width:min(1180px,calc(100% - 32px));margin:36px auto 72px}.tutorial-page h1{margin:6px 0 8px;font-size:clamp(2rem,4.5vw,3.2rem)}.tut-steps ol{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 20px;padding:0;list-style:none}.tut-steps button{display:inline-flex;gap:8px;align-items:center;min-height:40px;padding:0 14px 0 6px;border:2px solid var(--line);border-radius:999px;background:var(--paper);color:var(--muted);font-weight:700}.tut-steps button span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--canvas);font-size:.85rem}.tut-steps button.seen span{background:var(--sky-100)}.tut-steps button[aria-current=step]{border-color:var(--doodle);color:var(--ink);box-shadow:0 3px 0 var(--sky-200)}.tut-steps button[aria-current=step] span{background:var(--yellow);color:var(--ink)}.tut-stage{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-gap:24px;gap:24px;align-items:start}.tut-lesson{position:-webkit-sticky;position:sticky;top:100px;padding:26px;border:var(--outline);border-radius:var(--wobble);background:var(--paper);box-shadow:var(--sticker)}.tut-lesson h2{margin:6px 0 10px;font-size:1.8rem;outline:none}.tut-lesson p{color:var(--muted)}.tut-nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.tut-window{overflow:hidden;border:var(--outline);border-radius:var(--radius);background:#f7fbff;box-shadow:var(--sticker)}.tut-window-bar{display:flex;gap:6px;align-items:center;padding:10px 14px;border-bottom:2px solid var(--line);background:var(--paper)}.tut-window-bar strong{margin-left:8px;font-size:.9rem}.tut-dot{width:11px;height:11px;border-radius:50%;background:var(--sky-200)}.tut-window-body{display:grid;grid-template-columns:150px minmax(0,1fr);min-height:430px}.tut-sidebar{display:grid;align-content:start;grid-gap:4px;gap:4px;padding:14px 10px;border-right:2px solid var(--line);background:var(--blue-soft);color:var(--muted);font-size:.88rem}.tut-sidebar small{margin:8px 6px 2px;font-size:.7rem;font-weight:800;letter-spacing:.08em}.tut-sidebar span{display:flex;gap:4px;align-items:center;padding:4px 6px;border-radius:8px}.tut-sidebar span.on{background:var(--paper);color:var(--ink);font-weight:700}.tut-pane{position:relative;padding:18px}.tut-center{display:grid;grid-gap:12px;gap:12px;justify-items:center;padding:30px 10px;text-align:center}.tut-hero-flame{width:110px;animation:tut-bob 3s ease-in-out infinite}.tut-celebrate{display:flex;gap:10px;align-items:center;margin-bottom:12px;padding:10px 14px;border:2px solid var(--doodle);border-radius:18px;background:var(--yellow-soft);animation:tut-pop .45s ease-out}.tut-celebrate-flame{width:34px;animation:tut-bob 1.6s ease-in-out infinite}.tut-embed{display:grid;grid-gap:12px;gap:12px;padding:16px;border-left:5px solid var(--doodle);border-radius:12px;background:var(--paper)}.tut-embed-title{font-family:var(--font-heading);font-size:1.1rem}.tut-field{display:grid;grid-gap:6px;gap:6px;font-weight:700}.tut-field input[type=range],.tut-field select{min-height:42px;padding:0 10px;border:2px solid var(--line);border-radius:12px;background:var(--paper)}.tut-field input[type=range]{padding:0;border:0;accent-color:var(--blue-strong)}.tut-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;border:0}.tut-chips legend{margin-bottom:6px;font-weight:700}.tut-actions button,.tut-chips button{display:inline-flex;gap:5px;align-items:center;min-height:38px;padding:0 12px;border:2px solid var(--line);border-radius:999px;background:var(--paper);font-weight:700;transition:transform .12s,background .12s}.tut-chips button[aria-pressed=true]{border-color:var(--doodle);background:var(--sky-100)}.tut-actions button:hover:not(:disabled),.tut-chips button:hover:not(:disabled){transform:translateY(-1px);background:var(--blue-soft)}.tut-actions button[aria-pressed=true]{background:#ffe6dc}.tut-actions{gap:8px;margin-top:12px}.tut-actions,.tut-row{display:flex;flex-wrap:wrap}.tut-row{gap:10px}.tut-note{margin:8px 0 0;color:var(--muted);font-size:.93rem}.tut-note.ok{color:#23805f;font-weight:700}.tut-goal{display:grid;grid-template-columns:auto 1fr auto;grid-gap:8px;gap:8px;align-items:center;margin-bottom:12px;font-weight:700}.tut-goal .tut-bar{grid-column:1/-1}.tut-bar{height:14px;overflow:hidden;border:2px solid var(--doodle);background:var(--paper)}.tut-bar,.tut-bar span{display:block;border-radius:999px}.tut-bar span{height:100%;transition:width .4s ease}.tut-bar.sun span{background:var(--yellow)}.tut-bar.sky span{background:#86bcef}.tut-lines{display:grid;grid-gap:6px;gap:6px;min-height:200px;margin:0;padding:0;list-style:none}.tut-lines li{display:grid;grid-template-columns:auto 1fr;grid-gap:2px 10px;gap:2px 10px;align-items:center;animation:tut-in .25s ease-out}.tut-lines small{grid-column:2;display:inline-flex;gap:4px;align-items:center;font-size:.78rem;font-weight:700}.tut-lines .yes small{color:#23805f}.tut-lines .no small{color:#b2491f}.tut-lines .no .tut-text{opacity:.6}.tut-avatar{display:grid;grid-row:span 2;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--sky-100);font-size:.7rem;font-weight:800}.tut-empty{color:var(--muted);font-style:italic}.tut-room{padding:14px;border:2px solid var(--line);border-radius:16px;background:var(--paper)}.tut-room strong{display:flex;gap:6px;align-items:center}.tut-room ul{display:flex;gap:8px;margin:10px 0 0;padding:0;list-style:none}.tut-room li:not(.tut-empty){padding:6px 12px;border-radius:999px;background:var(--sky-100);font-weight:700;animation:tut-in .25s ease-out}.tut-room li.deaf{background:#ffe6dc}.tut-card{display:grid;grid-gap:12px;gap:12px;max-width:460px;margin:0 auto;padding:16px;border:3px solid var(--doodle);border-radius:26px;background:linear-gradient(180deg,#bcdcfa,#f2f8ff 38%)}.tut-card-head{display:grid;grid-template-columns:auto 1fr auto;grid-gap:10px;gap:10px;align-items:center}.tut-card-head small{display:block;color:var(--muted)}.tut-card-avatar{display:grid;place-items:center;width:48px;height:48px;border:3px solid var(--doodle);border-radius:50%;background:var(--blue);font-weight:800}.tut-card-flame{width:46px}.tut-card-panel{display:grid;grid-gap:4px;gap:4px;padding:12px 14px;border:3px solid var(--doodle);border-radius:20px;box-shadow:0 4px 0 var(--sky-200)}.tut-card-panel.sun{background:var(--yellow-soft)}.tut-card-panel.sky{background:var(--blue-soft)}.tut-card-streak{font-family:var(--font-heading);font-size:2.2rem;line-height:1}.tut-card-streak small,.tut-card-today{color:var(--muted);font-size:.9rem}.tut-freezes{display:inline-flex;gap:6px;align-items:center;grid-column:3;color:#4f86c6}.tut-days{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0;padding:0;list-style:none}.tut-days li{display:grid;place-items:center;width:34px;height:34px;border:2.5px solid var(--doodle);border-radius:50%;color:#4f86c6;animation:tut-pop .35s ease-out}.tut-days .done{border-color:#c99a00;background:var(--yellow)}.tut-days .frozen{background:var(--blue-soft)}.tut-days .missed{border-color:#aeb9c7;background:#eef1f5}.tut-need{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:12px;gap:12px;margin-top:16px}.tut-need div{display:grid;grid-gap:4px;gap:4px;justify-items:center;padding:16px;border:2px solid var(--line);border-radius:18px;background:var(--paper);text-align:center}.tut-need strong{font-family:var(--font-heading);font-size:2.4rem;line-height:1}.tut-need span{color:var(--muted);font-size:.9rem}.tut-disclaimer{margin:0;padding:8px 14px;border-top:2px solid var(--line);background:var(--paper);color:var(--muted);font-size:.8rem}@keyframes tut-bob{0%,to{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(2deg)}}@keyframes tut-pop{0%{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}@keyframes tut-in{0%{transform:translateY(6px);opacity:0}to{transform:none;opacity:1}}@media (max-width:900px){.tut-stage{grid-template-columns:1fr}.tut-lesson{position:static}}@media (max-width:560px){.tut-window-body{grid-template-columns:1fr}.tut-sidebar{display:none}.tut-steps button{padding:0 6px;font-size:0}.tut-steps button span{font-size:.85rem}}@media (prefers-reduced-motion:reduce){.tut-celebrate,.tut-celebrate-flame,.tut-days li,.tut-hero-flame,.tut-lines li,.tut-room li{animation:none}.tut-actions button,.tut-bar span,.tut-chips button{transition:none}}