.screen-tutorial{background:#fff!important;color:#203a8c!important;min-height:100dvh}.tutorial-top{display:flex;align-items:center;justify-content:space-between;background:#203a8c;color:white;padding:16px}.tutorial-top button{color:white;background:transparent;border:1px solid #ffffff80;border-radius:8px;padding:10px}.screen-tutorial main{padding:20px;max-width:520px;margin:auto}.screen-tutorial h1{font-size:24px;margin:20px 0}.tutorial-notice{font-size:13px;background:#eff1fa;padding:10px;border-radius:8px}.tutorial-progress{display:flex;gap:5px;margin:15px 0}.tutorial-progress i{height:4px;flex:1;background:#eff1fa}.tutorial-progress i.active{background:#203a8c}.tutorial-guide{display:flex;align-items:center;gap:12px;margin:18px 0 24px}.tutorial-guide>div{flex:0 0 70px}.tutorial-guide img,.tutorial-guide svg{width:70px;height:105px;object-fit:contain}.tutorial-guide p{margin:0;background:#eff1fa;border:1px solid #dce1f0;border-radius:16px;padding:14px;font-size:15px;line-height:1.7}.tutorial-guide strong{display:block}.tutorial-record{border:1px solid #dce1f0;border-radius:12px;padding:14px;margin:14px 0}.tutorial-record h2{font-size:16px;margin:0 0 10px}.tutorial-record p{line-height:1.7}.tutorial-record.good{border-top:4px solid #20a775}.tutorial-record.bad{border-top:4px solid #e5708a}.tutorial-input{background:#fff5f4;border:2px solid #ff6b6b;border-radius:14px;padding:16px;margin:24px 0}.tutorial-input label{display:block;font-weight:800;font-size:19px;margin-bottom:12px}.screen-tutorial textarea{font-size:16px;width:100%;box-sizing:border-box;line-height:1.7;background:white;color:#203a8c}.screen-tutorial .primary{background:#ff6b6b!important;color:#fff!important;min-height:48px;margin-top:16px}.screen-tutorial button:disabled{opacity:.45}.screen-tutorial .ac-topic-banner{background:#203a8c;color:white;padding:14px;border-radius:10px;font-size:17px}.screen-tutorial .ac-record{margin:0}.screen-tutorial .ac-record-date{white-space:nowrap}.screen-tutorial .text-button{min-height:44px}.tutorial-status{color:#ad2035}
.phone.screen-tutorial .tutorial-top{background:#203a8c!important;color:#fff!important}.phone.screen-tutorial .tutorial-top strong,.phone.screen-tutorial .tutorial-top button{color:#fff!important}.phone.screen-tutorial textarea{border:1.5px solid #bdc8e1!important;border-radius:12px;padding:14px}.tutorial-guide>div{overflow:hidden}.tutorial-guide img{transform:scale(1.45)}

/* Practice picker uses the same coral selected state as the real book picker. */
.phone.screen-tutorial .ac-select{min-height:44px;background:#fff;color:#203a8c;border:1px solid #203a8c;padding:10px;margin-top:10px}
.phone.screen-tutorial .ac-select .ac-select-state{color:inherit;margin:0;font-size:14px;font-weight:700}
.phone.screen-tutorial .ac-select[aria-pressed="true"]{background:#ff6b6b;color:#fff;border-color:#ff6b6b}
.phone.screen-tutorial .ac-select[aria-pressed="true"] .ac-select-state{color:#fff}
.phone.screen-tutorial .ac-record.selected{border:2px solid #ff6b6b;border-radius:12px;padding:10px;background:#fff8f7}
/* Large, one-action-at-a-time avatar guidance. */
.tutorial-v2 .tutorial-guide{align-items:center;gap:14px;margin:22px 0 28px}
.tutorial-v2 .tutorial-guide>div:first-child{flex:0 0 84px;overflow:visible}
.tutorial-v2 .tutorial-guide img,.tutorial-v2 .tutorial-guide svg{width:84px;height:145px;object-fit:contain;transform:scale(1.35)}
.tutorial-v2 .tutorial-guide>.tutorial-bubble{position:relative;flex:1;min-width:0;overflow:visible;background:#eff1fa;border:2px solid #dce1f0;border-radius:20px;padding:20px 18px;font-size:19px;line-height:1.7;color:#203a8c}
.tutorial-v2 .tutorial-bubble::before{content:'';position:absolute;left:-10px;top:45%;width:16px;height:16px;background:#eff1fa;border-left:2px solid #dce1f0;border-bottom:2px solid #dce1f0;transform:rotate(45deg)}
.tutorial-v2 .tutorial-bubble strong{display:block;font-size:21px;font-weight:800;margin-bottom:8px;line-height:1.6}
.tutorial-v2 main{padding-bottom:100px}.tutorial-v2 .record-play-option{width:100%;min-height:56px;background:white;color:#203a8c;border:1px solid #ccd4ed;border-left:4px solid #203a8c;border-radius:12px;padding:16px;text-align:left;font-size:17px;font-weight:700;margin-bottom:10px}
.tutorial-v2 .record-kind{width:100%;min-height:90px;text-align:left;color:#203a8c;border-radius:12px;padding:16px;margin-bottom:12px}.tutorial-v2 .record-kind.good{background:#f0faf5;border:1px solid #a8d9be}.tutorial-v2 .record-kind.bad{background:#fff4f6;border:1px solid #efbdc9}.tutorial-v2 .kind-face svg{width:24px;height:24px}.tutorial-v2 .record-kind h2{font-size:19px}
.tutorial-v2 .tutorial-unknown{font-size:15px;display:flex;align-items:center;gap:10px;margin:14px 0}.tutorial-v2 .tutorial-unknown input{width:20px;height:20px}
.tutorial-line-demo{display:grid;gap:10px}.tutorial-line-demo span{display:block;padding:14px;text-align:center;border:1px solid #203a8c;border-radius:10px;font-weight:700}.tutorial-line-demo span:last-child{background:#06c755;color:white;border-color:#06c755}
.tutorial-video-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}.tutorial-video-pair button{border:2px solid #dce1f0;background:#eff1fa;color:#203a8c;border-radius:12px;padding:16px 8px}.tutorial-video-pair button[aria-pressed=true]{border-color:#ff6b6b;background:#fff5f4}.tutorial-video-pair strong,.tutorial-video-pair small{display:block}.tutorial-video-pair svg{height:65px;width:45px;margin:15px}.tutorial-rewards{display:flex;align-items:center;gap:18px;padding:18px;background:#eff1fa;border-radius:14px}.tutorial-rewards>span{font-size:48px}.tutorial-theme-preview{display:flex;align-items:center;justify-content:space-between;background:#203a8c;color:white;padding:16px;border-radius:12px;margin-top:20px}.tutorial-theme-label{border:1px solid white;border-radius:20px;padding:8px 16px}.tutorial-v2 nav button:disabled{opacity:.4}.tutorial-home-preview .reference-home-hero{padding:20px;background:#203a8c;color:#fff;border-radius:14px}.tutorial-home-preview h2{font-size:21px;color:#fff}
@media(max-width:400px){.tutorial-v2 .tutorial-guide{gap:10px}.tutorial-v2 .tutorial-guide>div:first-child{flex-basis:64px}.tutorial-v2 .tutorial-guide img,.tutorial-v2 .tutorial-guide svg{width:64px;height:130px}.tutorial-v2 .tutorial-guide>.tutorial-bubble{padding:16px 14px;font-size:18px}.tutorial-v2 .tutorial-bubble strong{font-size:20px}}

.tutorial-home-preview .reference-home-hero{margin:0;min-height:150px;background:#203a8c url('../assets/volleyball-court.png') center/cover}.tutorial-home-preview .reference-home-hero::before{background:linear-gradient(90deg,#203a8cdd,#203a8c55)}