/* v138: an original classroom theme, with a calm teal palette and learning scenes. */
:root {
  --paper:#f6f9fa; --surface:#fff; --surface-plain:#fff;
  --ink:#243f4a; --ink-soft:#576d77; --line:#dce7eb;
  --primary:#117e85; --primary-deep:#086a72; --primary-wash:#e7f4f3;
  --accent:#b77829; --accent-wash:#fff2dc;
  --good:#117e85; --radius:15px; --radius-lg:22px;
  --media-surround:#26383f; --media-border:#43575f; --media-ink:#e7eff2;
}
body { background:var(--paper); }
button,a,input,select,textarea,summary { -webkit-tap-highlight-color:#117e8520; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible { outline-color:#168b91; }
.ui-primary:hover { background:#075860; }
.ui-button { border-radius:12px; }
.ui-primary { box-shadow:0 4px 0 #07535a; }
.ui-primary:disabled { box-shadow:none; }
.topbar { min-height:78px; border-bottom-color:#dce9eb; }
.brand-mark { border-radius:12px 12px 4px 12px; background:#168b91; box-shadow:4px 4px 0 #d1e9e8; }
.brand small { letter-spacing:.09em; }
.ui-eyebrow { letter-spacing:.09em; }
.eyebrow-dot { display:inline-block; width:8px; height:8px; background:#dfaf5e; border-radius:50%; margin-right:7px; }
body[data-screen="role"] { background:#fff; }
body[data-screen="role"] main { padding-top:48px; max-width:1320px; }
.welcome-grid { grid-template-columns:1fr 1.05fr; gap:44px; min-height:430px; }
.welcome-copy h1 { font-size:clamp(39px,4.3vw,60px); line-height:1.45; letter-spacing:.02em; margin:22px 0; }
.welcome-copy h1 em { color:var(--primary); font-style:normal; white-space:nowrap; }
.welcome-lead { font-size:14px; line-height:2; margin-bottom:25px; color:var(--ink-soft); }
.welcome-actions .ui-primary { min-width:275px; padding:16px 22px; }
.welcome-actions .ui-small { font-size:10px; }
.welcome-proof { gap:10px 16px; margin-top:24px; font-size:10px; }
.classroom-scene { position:relative; padding:32px 18px 26px 28px; min-width:0; isolation:isolate; }
.classroom-scene::before { content:""; position:absolute; z-index:-1; background:#dfe7e9; inset:4px -8px 36px 10px; border-radius:42% 48% 38% 24%; }
.scene-board { background:var(--media-surround); color:var(--media-ink); border:1px solid var(--media-border); border-radius:14px; padding:10px; box-shadow:0 14px 28px #243b4526; transform:rotate(-2deg); overflow:hidden; }
.scene-board-title { display:flex; align-items:center; gap:7px; padding:4px 3px 12px; font-size:10px; font-weight:700; }
.scene-board-title>span:last-child { margin-left:auto; font-weight:400; font-size:9px; color:#b7d9dc; }
.scene-board-dot { width:8px; height:8px; border-radius:50%; background:#e8bd68; }
.scene-board>img { width:100%; height:auto; display:block; border-radius:7px; }
.scene-board-bottom { display:flex; align-items:center; gap:6px; font-size:9px; padding:11px 3px 2px; }
.scene-board-bottom .ui-icon { width:13px; height:13px; color:#b7d9dc; }
.scene-board-bottom>span { margin-left:auto; color:#c2d1d7; white-space:nowrap; }
.scene-answer { position:absolute; right:-4px; bottom:124px; display:flex; align-items:center; gap:10px; width:227px; padding:15px; background:#f1f5f6; border:1px solid #d6e1e4; border-radius:14px; box-shadow:0 8px 28px #274f5d1a; transform:rotate(3deg); }
.scene-answer>.ui-icon { color:#b77d32; background:#fff2dc; padding:7px; width:35px; height:35px; border-radius:10px; }
.scene-answer b { font-size:10px; }
.answer-line { display:block; height:4px; width:106px; background:#d5e5e8; border-radius:5px; margin:8px 0 0; }
.answer-line.short { width:73px; margin-top:6px; }
.scene-check { position:absolute; top:-11px; right:-10px; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:#147e85; color:#fff; border:3px solid #fff; }
.scene-check .ui-icon { width:16px; height:16px; }
.scene-people { position:relative; display:block; width:92%; height:auto; margin:-9px auto 0; }
.scene-spark { position:absolute; z-index:2; color:#dfaf5e; font-size:30px; top:4px; left:18px; transform:rotate(14deg); }
.scene-caption { margin:0; text-align:center; font-size:9px; color:var(--ink-soft); }
.welcome-join.join-ribbon { display:grid; grid-template-columns:1fr 1.05fr; align-items:center; gap:40px; background:#edf7f8; border:1px solid #d6e9eb; border-radius:18px; padding:25px 30px; margin-top:22px; }
.join-ribbon-heading { display:flex; align-items:center; gap:18px; }
.join-ribbon-icon { display:grid; place-items:center; flex-shrink:0; width:52px; height:52px; border-radius:50%; background:#fff; color:var(--primary); }
.join-ribbon-icon .ui-icon { width:26px; height:26px; }
.join-ribbon .ui-eyebrow { font-size:10px; margin-bottom:5px; }
.join-ribbon h2 { font-size:22px; margin:0; line-height:1.6; }
.join-ribbon p { font-size:11px; margin:5px 0 0; color:var(--ink-soft); }
.join-ribbon .join-form { display:grid; grid-template-columns:1fr 1.1fr; gap:0 10px; align-items:center; }
.join-ribbon .join-form label { grid-column:1/-1; margin-bottom:7px; }
.join-ribbon .join-code-input { height:52px; font-size:23px; border-color:#b5d2d6; }
.join-ribbon .join-form .ui-primary { margin:0; height:52px; font-size:12px; padding:10px; }
.join-ribbon .join-form .ui-small,.join-ribbon .ui-form-error { grid-column:1/-1; margin:8px 0 0; }
.intro-flow { border-top:0; grid-template-columns:.8fr 2fr; gap:32px; margin-top:60px; padding:0; }
.intro-flow h2 { font-size:21px; line-height:1.7; }
.intro-flow ol { gap:20px; }
.intro-flow li { display:flex; align-items:flex-start; gap:12px; }
.intro-flow li>span { display:grid; place-items:center; flex-shrink:0; width:39px; height:39px; border-radius:12px; background:#e6f2f3; color:var(--primary); }
.intro-flow li:nth-child(2)>span { background:#fff0d7; color:#a76f26; }
.intro-flow li:nth-child(3)>span { background:#eaf0fa; color:#4d75a0; }
.intro-flow li small { display:block; color:var(--ink-soft); font-size:9px; letter-spacing:.1em; margin:0 0 7px; }
.intro-flow li b { display:block; font-size:12px; line-height:1.7; }
.intro-flow li p { font-size:10px; line-height:1.9; }
.welcome-lessons { background:#f2f7f9; margin:60px -32px 0; padding:35px 32px; border-radius:22px; }
.section-heading h2 { font-size:26px; }
.lesson-sample { grid-template-columns:42% 1fr; min-height:182px; border-color:#dce6ea; border-radius:14px; box-shadow:0 3px 12px #26465405; }
.sample-art { position:relative; min-height:182px; padding:14px; background:var(--media-surround); }
.sample-art[data-chapter="3"] { background:var(--media-surround); }
.sample-art>img { width:100%; height:auto; display:block; border-radius:6px; box-shadow:0 5px 12px #101b2240; }
.sample-play { display:grid; place-items:center; position:absolute; width:30px; height:30px; right:10px; bottom:13px; border:2px solid #b9ced4; border-radius:50%; background:#137f87; color:#fff; }
.sample-play .ui-icon { width:14px; height:14px; }
.sample-body { padding:22px; gap:10px; }
.sample-body b { font-size:18px; }
.sample-body>span:last-child { color:var(--primary); }
.lesson-sample:hover { border-color:#72b4ba; }
.workspace-title { border-bottom:1px solid var(--line); padding-bottom:22px; }
.class-create-form { background:linear-gradient(120deg,#fff 65%,#edf7f8); border-top:3px solid #77bfc3; }
.class-create-form input,.registration-fields input,.registration-fields select { border-color:#bfdae0!important; }
.class-list-card { border-left:5px solid #63b2b8!important; }
.class-share { background:#e8f5f5; border-color:#cce5e6; border-radius:18px; }
.share-label>.ui-icon { background:#fff; box-sizing:content-box; border-radius:13px; padding:12px; }
.share-code { border-color:#bddcde; }
.share-code strong { color:#086a72; }
.live-session { border-top-color:#168b91; }
.live-session .stat-tile { background:#edf5f7; }
.live-session .stat-tile:nth-child(2) { background:#fff2df; }
.live-session .stat-tile:nth-child(3) { background:#e7f4ef; }
.live-session .stat-tile:nth-child(4) { background:#eef0f9; }
.library-search { border-color:#c9dfe3; }
.chapter-filter { border-radius:20px; }
.chapter-filter[aria-pressed="true"] { background:#086a72; border-color:#086a72; }
.lesson-card { --chapter-color:#15818b; --chapter-wash:#e5f3f4; border-top:4px solid var(--chapter-color); border-radius:15px; box-shadow:0 4px 14px #27455404; }
.lesson-card[data-chapter="2"] { --chapter-color:#a97734; --chapter-wash:#fff2dc; }
.lesson-card[data-chapter="3"] { --chapter-color:#4c76a6; --chapter-wash:#eaf0fb; }
.lesson-card[data-chapter="4"] { --chapter-color:#557d53; --chapter-wash:#eef4e7; }
.lesson-card-heading { margin-bottom:17px; }
.chapter-label { display:inline-flex; align-items:center; gap:7px; background:var(--chapter-wash); color:var(--chapter-color); padding:5px 10px; }
.chapter-label .ui-icon { width:16px; height:16px; }
.lesson-card h2 { line-height:1.6; }
.current-lesson { border-top:5px solid #168b91; box-shadow:0 10px 28px #22556708; background:linear-gradient(135deg,#fff 75%,#eaf6f5); }
.current-lesson .task-type { color:var(--primary-deep); }
.student-header .ui-eyebrow { padding:4px 9px; border-radius:5px; background:#e4f1f2; width:fit-content; }
.student-waiting { background:linear-gradient(140deg,#fff 65%,#edf6f8); }
.waiting-ring { border:7px solid #f3f9fa; box-sizing:content-box; }
.watch-steps span { padding:5px 8px; border-radius:20px; }
.watch-steps .active { background:#e1f1f2; color:#086a72; }
.watch-steps b { background:#e7eff2; }
.watch-steps .active b { background:#168b91; color:#fff; }
.watch-q { border-left-color:#168b91; }
.watch-stage { background:var(--media-surround); border:6px solid var(--media-surround); box-shadow:0 0 0 1px var(--media-border); }
.join-page,.signin-page { border-top:4px solid #168b91; box-shadow:0 8px 35px #264f5d07; }
.submission-success { background:linear-gradient(145deg,#fff 60%,#e8f5f2); }
.success-symbol { border:7px solid #f3faf8; box-sizing:content-box; }
@media(max-width:1100px) {
  .welcome-grid { gap:24px; }
  .welcome-copy h1 { font-size:43px; }
  .welcome-lead { font-size:12px; }
  .scene-answer { width:210px; right:0; bottom:111px; }
  .join-ribbon h2 { font-size:19px; }
  .welcome-join.join-ribbon { gap:20px; padding:24px; }
  .join-ribbon-icon { width:40px; height:40px; }
  .intro-flow { grid-template-columns:1fr; gap:18px; }
  .intro-flow h2 br { display:none; }
}
@media(max-width:780px) and (min-width:681px) {
  .welcome-grid { grid-template-columns:1fr; }
  .welcome-copy { text-align:center; }
  .welcome-actions,.welcome-proof { align-items:center; justify-content:center; }
  .classroom-scene { max-width:500px; margin:0 auto; }
  .welcome-join.join-ribbon { grid-template-columns:1fr; }
  .intro-flow ol { gap:12px; }
}
@media(max-width:680px) {
  body[data-screen="role"] main { padding-top:22px; }
  .topbar { min-height:68px; }
  .welcome-page { display:flex; flex-direction:column; }
  .welcome-join.join-ribbon { order:-1; grid-template-columns:1fr; padding:22px; margin:0 0 35px; gap:17px; }
  .join-ribbon-heading { gap:12px; }
  .join-ribbon h2 { font-size:20px; }
  .join-ribbon p { font-size:10px; }
  .join-ribbon .join-form { grid-template-columns:1fr; }
  .join-ribbon .join-form .ui-primary { margin-top:11px; font-size:13px; }
  .join-ribbon .join-code-input { font-size:25px; }
  .welcome-grid { grid-template-columns:minmax(0,1fr); gap:18px; min-height:0; }
  .welcome-copy { min-width:0; }
  .welcome-copy h1 { font-size:clamp(28px,8vw,43px); margin:18px 0; }
  .welcome-copy .ui-eyebrow { font-size:9px; letter-spacing:.02em; }
  .welcome-lead { font-size:12px; line-height:2; }
  .welcome-actions .ui-primary { min-width:0; width:100%; }
  .welcome-actions .ui-small { font-size:9px; }
  .welcome-proof { font-size:9px; gap:10px; }
  .classroom-scene { padding:20px 12px 15px; max-width:480px; margin:0 auto; width:100%; }
  .scene-board-title { font-size:9px; }
  .scene-board-bottom { font-size:7px; }
  .scene-board-bottom>span { display:none; }
  .scene-answer { width:177px; padding:11px; bottom:94px; right:0; gap:7px; }
  .scene-answer b { font-size:8px; }
  .scene-answer>.ui-icon { width:29px; height:29px; }
  .answer-line { width:90px; height:3px; margin-top:6px; }
  .scene-caption { font-size:8px; }
  .intro-flow { margin-top:36px; }
  .intro-flow h2 { font-size:21px; }
  .intro-flow ol { gap:20px; }
  .intro-flow li { gap:16px; }
  .intro-flow li b { font-size:14px; }
  .intro-flow li p { font-size:11px; }
  .intro-flow li p br { display:none; }
  .welcome-lessons { margin:36px -6px 0; padding:25px 18px; border-radius:17px; }
  .section-heading h2 { font-size:22px; }
  .lesson-sample { grid-template-columns:1fr; }
  .sample-art { min-height:0; padding:20px; }
  .sample-art>img { max-width:400px; }
  .sample-play { bottom:12px; right:14px; width:36px; height:36px; }
  .sample-body { padding:22px; }
  .sample-body b { font-size:19px; }
  .sample-body .ui-eyebrow { font-size:10px; }
  .class-share { gap:16px; }
  .share-label>.ui-icon { padding:9px; width:20px; height:20px; }
  .share-label { gap:10px; }
  .watch-steps { gap:5px; font-size:8px; }
  .watch-steps span { padding:4px; gap:4px; }
  .watch-steps b { width:20px; height:20px; }
}