.card{padding:15px;display:flex;flex-direction:column}.card p{flex:1}.module-preview{background:#f5f6f2;color:#02273a;border-radius:10px;margin-bottom:18px;padding:12px;min-height:174px;position:relative;overflow:hidden}.mini-bar{font-size:9px;border-bottom:1px solid #d7e0df;padding-bottom:9px;margin-bottom:11px;font-weight:600}.mini-row{background:white;border:1px solid #e1e6e5;border-radius:6px;padding:7px 9px;font-size:11px;margin:5px 0}.mini-row.row-2{color:#395e55;background:#e8f4ec}.example-tag{display:block;font-size:8px;color:#6b7e86;margin-top:9px}.calendar .row-0{background:#ffde2f;font-weight:600;letter-spacing:2px}.people .row-0:before,.people .row-1:before{content:'● ';color:#7879f1}.rhythm .row-0{font-size:25px;letter-spacing:4px;text-align:center}.classroom .row-0{background:#d8e3e8;padding:20px 5px;text-align:center}.transcript .row-1{color:#f74739;letter-spacing:9px;font-size:20px}.progress .row-1{color:#258653;font-size:17px}.rates .row-1,.invoice .row-1{font-size:19px;font-weight:600}.howto{margin-top:18px;border:0;border-radius:8px;background:#ffde2f;color:#02273a;padding:11px;text-align:left;font:600 11px Poppins;cursor:pointer}.howto:hover{background:#ffe966}.howto:focus-visible{outline:3px solid #7879f1;outline-offset:3px}@media(max-width:650px){.module-preview{min-height:155px}}

/* Lesson speech becomes text; manual note stays visibly teacher-written. */
.transcript .note-scene,.notes .note-scene{font-size:12px;line-height:1.5;min-height:224px}.scene-label{display:block;font-size:8px;letter-spacing:.6px;font-weight:600;color:#59717e;margin-bottom:5px}.speech-sample{background:#fff0dc;border-radius:10px 10px 10px 2px;padding:11px}.conversion-arrow{text-align:center;color:#687e88;padding:5px;font-size:15px}.conversion-arrow span{font-size:9px}.transcript-paper{background:white;border:1px solid #d6dfe1;border-left:3px solid #56d67d;border-radius:5px;padding:10px}.transcript-line{display:block;animation:transcript-arrives 5s ease-out infinite}.draft-result{color:#315b49;font-size:10px;padding-top:10px}.editor-toolbar{display:flex;justify-content:space-between;background:#edf0f2;padding:8px;border:1px solid #d6dfe1;border-radius:5px 5px 0 0;font-size:10px}.writing-paper{background:white;border:1px solid #d6dfe1;border-top:0;padding:11px;min-height:163px;border-radius:0 0 5px 5px}.writing-paper strong{font-size:11px}.card .writing-paper p{color:#334e5b;font-size:11px;line-height:1.65;margin:8px 0}.writing-caret{display:inline-block;height:13px;width:2px;vertical-align:-2px;background:#f74739;margin-left:2px;animation:writing-caret 1.1s steps(1,end) infinite}.writing-status{font-size:9px;color:#667e89;margin-top:8px}@keyframes writing-caret{0%,49%{opacity:1}50%,100%{opacity:0}}@keyframes transcript-arrives{0%,12%{opacity:0;transform:translateY(3px)}24%,100%{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.writing-caret,.transcript-line{animation:none}}

.engraved-rhythm{background:white;border:1px solid #e1e6e5;border-radius:8px;padding:4px;margin:5px 0 10px}.engraved-rhythm svg{display:block;width:100%;height:auto}.classroom-tools{display:grid;gap:9px;font-size:10px}.lesson-notes-tool,.tool-pair>div,.chord-tool{background:white;border:1px solid #dce4e4;border-radius:8px;padding:10px}.tool-heading{display:block;font-weight:600;font-size:11px;margin-bottom:8px}.note-options{display:grid;grid-template-columns:1fr 1fr;gap:7px}.note-options>span{background:#edf2f5;border-radius:5px;padding:7px;font-weight:600}.note-options>span:first-child{background:#fff4b6}.note-options small{display:block;font-size:8px;font-weight:400;margin-top:4px;line-height:1.4}.tool-pair{display:grid;grid-template-columns:1fr 1fr;gap:7px}.tool-pair>div{display:flex;align-items:center;gap:6px;padding:10px 7px}.tool-pair b{font-size:9px;font-weight:600}.record-dot{width:9px;height:9px;border-radius:50%;background:#f74739;flex-shrink:0}.tool-pair svg{width:20px;height:20px;flex-shrink:0}.chord-tool{display:flex;align-items:center;gap:8px}.chord-tool>span{margin-right:auto}.chord-tool b{background:#e6f3e9;border-radius:5px;padding:4px 10px;font-size:13px}

.tasks,.practice,.progress{min-height:265px}.practice-story{min-height:206px}.shared-task{background:white;border:1px solid #dde5e5;border-radius:9px;padding:10px;text-align:center}.shared-task svg{display:block;width:100px;height:44px;margin:auto}.shared-task strong{display:block;font-size:15px;margin-top:2px}.shared-task small{font-size:10px;color:#657b85}.assignment-destination{display:flex;align-items:center;gap:8px;font-size:10px;margin:12px 0}.student-avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;width:27px;height:27px;background:#e3dcfb;color:#4e458b;font-size:12px;font-weight:600;flex-shrink:0}.illustrated-action{background:#ffde2f;border-radius:6px;padding:9px 11px;font-size:11px;font-weight:600;display:flex;justify-content:space-between}.beat-dots{display:flex;justify-content:center;gap:10px;margin:12px 0}.beat-dots i{font-style:normal;border-radius:50%;width:26px;height:26px;display:grid;place-items:center;background:#e2e9eb;font-size:11px}.beat-dots .current{background:#ffde2f;box-shadow:0 0 0 3px #fff1a3}.session-state{display:flex;align-items:center;gap:8px;font-size:11px;background:#e5f3e9;border-radius:6px;padding:8px}.session-state strong{margin-left:auto;font-variant-numeric:tabular-nums}.play-symbol{color:#267847}.live-example{font-size:9px;letter-spacing:.7px;color:#277049;display:flex;align-items:center;gap:5px}.live-example>span{width:7px;height:7px;border-radius:50%;background:#39af6a}.live-example small{margin-left:auto;color:#6d8089;letter-spacing:0}.progress-task{display:flex;gap:8px;align-items:center;margin:17px 0}.progress-task strong{font-size:11px;display:block}.progress-task small{font-size:9px;color:#617a86}.practice-metrics{display:grid;grid-template-columns:1fr 1fr;gap:7px}.practice-metrics>div{background:white;border-radius:7px;padding:10px 7px}.practice-metrics strong{font-size:26px;display:block;letter-spacing:-1px}.practice-metrics strong span{font-size:12px;letter-spacing:0}.practice-metrics small{font-size:9px;color:#637983}.accuracy-track{height:7px;background:#dbe5df;border-radius:5px;margin-top:13px;overflow:hidden}.accuracy-track span{display:block;width:92%;height:100%;background:#56d67d}.progress-caption{font-size:9px;margin-top:9px;color:#57746a}

.classroom-context{background:#153c4e;border:1px solid #607986;border-bottom:0;border-radius:12px 12px 0 0;padding:16px 18px;font-size:14px}.classroom-context>span{font-size:11px;color:#c4d7df;display:inline-block;margin-left:12px}.classroom-context>div{font-size:12px;color:#ffde2f;margin-top:9px}.cards.inside-classroom{border:1px solid #607986;border-top:0;padding:14px;border-radius:0 0 12px 12px;background:#0b3042}@media(max-width:650px){.classroom-context>span{display:block;margin:5px 0 0}.cards.inside-classroom{padding:9px}}

.setup-screen{min-height:365px;padding:11px}.setup-screen .mini-bar{font-size:9px;min-height:29px}.setup-ui{min-height:290px;font-size:10px}.setup-top{display:flex;justify-content:space-between;align-items:center;gap:5px;min-height:30px;margin-bottom:10px}.setup-top>strong{font-size:12px}.ui-primary{display:inline-block;background:#f74739;color:white;border-radius:5px;padding:7px 8px;font-size:9px;font-weight:600;white-space:nowrap}.ui-dialog{background:white;border:1px solid #d8e1e4;border-radius:9px;padding:11px;box-shadow:0 3px 8px #02273a09}.ui-dialog>strong{display:block;font-size:12px;margin-bottom:9px}.wizard-steps{display:flex;gap:6px;font-size:7px;color:#758691;margin-bottom:11px}.wizard-steps b{color:#d44237;border-bottom:2px solid #f74739;padding-bottom:3px}.learner-options{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:9px}.learner-options>span,.duration-options>span{border:1px solid #dce3e7;border-radius:5px;padding:7px 4px;font-size:8px;text-align:center}.setup-ui .chosen{background:#fff0ed;border-color:#f74739;color:#a62d24}.ui-field{margin-bottom:9px}.ui-field small{display:block;font-size:8px;margin-bottom:4px;color:#5b707c}.ui-field>span{display:block;border:1px solid #d8e1e5;background:#fff;border-radius:5px;padding:7px;font-size:10px;min-height:29px}.ui-field i{float:right;font-style:normal}.ui-bottom{text-align:right;margin-top:9px}.ui-columns{display:grid;grid-template-columns:1fr 1fr;gap:7px}.duration-label{font-size:8px;color:#5b707c;margin-bottom:5px}.duration-options{display:flex;gap:6px}.duration-options>span{flex:1;padding:5px}.repeat-row{display:flex;justify-content:space-between;font-size:9px;margin-top:10px}.setup-hint{font-size:10px;color:#46665a;margin:12px 0 5px;line-height:1.5}.billing-mini-tabs{display:flex;font-size:9px;gap:4px;margin:0 0 14px;border-bottom:1px solid #d7e0e4}.billing-mini-tabs>span{padding:9px 5px;flex:1;border-bottom:2px solid transparent}.billing-demo-panels{position:relative;min-height:220px;background:white;padding:12px;border:1px solid #d8e1e4;border-radius:9px}.billing-demo-payment{position:absolute;inset:12px;animation:billing-payment 10s infinite}.billing-demo-price{animation:billing-price 10s infinite}.billing-tab-pricing{animation:tab-pricing 10s infinite}.billing-tab-payment{animation:tab-payment 10s infinite}.attention-one{animation:setup-focus 7s infinite}.attention-two{animation:setup-focus 7s 2s infinite}.attention-three{animation:setup-focus 7s 4s infinite}@keyframes setup-focus{0%,20%{box-shadow:0 0 0 3px #ffde2f}30%,100%{box-shadow:0 0 0 0 transparent}}@keyframes billing-price{0%,44%{opacity:1;visibility:visible}50%,94%{opacity:0;visibility:hidden}100%{opacity:1;visibility:visible}}@keyframes billing-payment{0%,44%{opacity:0;visibility:hidden}50%,94%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}@keyframes tab-pricing{0%,44%,100%{border-color:#f74739;color:#b8362c;background:#fff0ed}50%,94%{border-color:transparent;color:#657b86;background:transparent}}@keyframes tab-payment{0%,44%,100%{border-color:transparent;color:#657b86;background:transparent}50%,94%{border-color:#f74739;color:#b8362c;background:#fff0ed}}@media(prefers-reduced-motion:reduce){.setup-screen *{animation:none!important}.billing-demo-payment{position:static;margin-top:15px;padding-top:15px;border-top:1px solid #d8e1e4}.billing-demo-panels{min-height:0}}

.class-tool{background:white;border:1px solid #dce4e4;border-radius:8px;padding:11px}.class-tool-title{display:flex;align-items:center;gap:7px;font-size:11px;margin-bottom:9px}.class-tool-title svg{width:20px;height:20px}.metro-control{display:flex;align-items:center;gap:9px;background:#fff5bd;border-radius:6px;padding:8px}.metro-control strong{font-size:18px}.metro-control small{font-size:8px}.metro-beats{margin-left:auto;font-size:9px;letter-spacing:2px;color:#9b7c00}.identify-chord{display:flex;align-items:center;justify-content:space-between;gap:5px;font-size:10px}.identify-chord strong{background:#e3f4e9;padding:7px;border-radius:5px}.remote-connection{display:flex;align-items:center;justify-content:space-between;background:#edf1fa;padding:8px;border-radius:6px;font-size:10px}.remote-caption{display:block;color:#617582;font-size:8px;margin-top:5px}

.note[hidden]{display:none}.optional-billing{margin-top:12px;padding:12px;border-radius:8px;background:#153c4e;font-size:11px;line-height:1.6}.optional-billing strong{display:block;color:#ffde2f;font-weight:600}.optional-billing span{display:block;margin-top:6px;color:#cbdce3}

.familiar-ui{min-height:250px;font-size:11px}.screen-title{font-size:14px;font-weight:600;display:flex;justify-content:space-between;align-items:center;margin:10px 0 13px}.library-search{border:1px solid #d5dfe4;padding:8px;border-radius:6px;background:white;font-size:10px;color:#7a8a94;margin-bottom:10px}.piece-row{display:flex;align-items:center;gap:8px;background:white;padding:10px 7px;border:1px solid #dde4e7;border-radius:6px;margin-bottom:7px}.piece-row b{font-size:10px;display:block}.piece-row small{font-size:8px;color:#6b818b;display:block;margin-top:3px}.file-type{border-radius:5px;background:#ffe4df;color:#a53d32;padding:9px 4px;font-size:9px;font-weight:600}.file-type.xml{background:#e5e7ff;color:#544dad}.selected-piece{border-color:#f74739}.sharing-recipient{display:flex;align-items:center;gap:6px;background:#e4f3e9;padding:8px;border-radius:6px;font-size:9px;margin-top:13px;animation:recipient-reveal 7s infinite}.sharing-recipient b{margin-left:auto;color:#2d7750}.draft-pill{font-size:9px;background:#fff0bc;padding:4px 7px;border-radius:5px;color:#705b1c}.note-document,.invoice-paper{background:white;border:1px solid #dce4e7;border-radius:6px;padding:12px}.note-document b{font-size:11px}.card .note-document p{font-size:10px;color:#59727e;margin:9px 0}.document-lines i{display:block;background:#e3e9ec;height:5px;margin:6px 0;border-radius:2px}.document-lines i:last-child{width:65%}.note-next{margin-top:12px;padding-top:10px;border-top:1px solid #e1e7ea;font-size:9px}.billing-check{display:flex;align-items:center;gap:9px;padding:14px 8px;background:white;border:1px solid #dce5e5;border-radius:7px;margin-bottom:9px}.billing-check>span{background:#d9f1e2;color:#297849;border-radius:50%;padding:4px 7px}.billing-check b{font-size:11px;display:block}.billing-check small{display:block;font-size:9px;color:#657d88;margin-top:4px}.visual-caption{text-align:center;font-size:9px;color:#5b7580;margin:9px 0}.lesson-event{background:white;border-left:4px solid #7879f1;border-radius:6px;padding:12px}.lesson-event small,.lesson-event b,.lesson-event span{display:block}.lesson-event small{font-size:9px;color:#687d88}.lesson-event b{font-size:14px;margin:9px 0}.lesson-event span{font-size:10px}.classroom-entry{background:#f74739;color:white;padding:10px;border-radius:6px;margin-top:12px;font-size:11px;animation:setup-focus 7s infinite}.classroom-entry b{float:right}.record-path{background:#e7f2eb;border-radius:6px;padding:10px 6px;font-size:9px;display:flex;justify-content:space-around;gap:4px;margin-top:12px}.invoice-paper small{font-size:8px;color:#687e89}.invoice-paper>div{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px solid #e1e6e9;margin-bottom:9px;font-size:10px}.invoice-paper strong{font-size:23px}.lab-tabs{display:flex;gap:13px;font-size:10px;border-bottom:1px solid #d6e0e4;margin-bottom:12px}.lab-tabs>*{padding:6px 0}.lab-tabs b{color:#be4034;border-bottom:2px solid #f74739}.rhythm .row-1{display:flex;gap:10px;align-items:center;font-size:10px}.selected-tool{background:#fff0c1;padding:4px 7px;border-radius:4px}.lab-controls{display:flex;align-items:center;justify-content:space-between;gap:5px;font-size:9px}.lab-controls .ui-primary{font-size:8px;padding:5px}.cards .module-preview{min-height:290px}@keyframes recipient-reveal{0%,40%{opacity:.3}55%,100%{opacity:1}}@media(prefers-reduced-motion:reduce){.attention-one,.attention-two,.attention-three,.sharing-recipient,.classroom-entry{animation:none!important}}

.lesson-format-highlight{background:#ffde2f;color:#02273a;padding:2px 7px;border-radius:5px;box-decoration-break:clone;-webkit-box-decoration-break:clone}.detail h2{line-height:1.55}

.audio-to-text{display:flex;align-items:center;gap:12px;min-height:48px;color:#d84737}.audio-to-text svg{width:24px;height:30px;flex-shrink:0}.lesson-wave{display:flex;align-items:center;justify-content:center;gap:4px;flex:1;height:44px}.lesson-wave i{display:block;width:4px;height:var(--height);border-radius:4px;background:#f74739;transform-origin:center;animation:lesson-audio-wave 1.15s ease-in-out var(--delay) infinite alternate}.audio-caption{display:block;font-size:9px;color:#786151;margin-top:5px}@keyframes lesson-audio-wave{0%{transform:scaleY(.25)}45%{transform:scaleY(.65)}100%{transform:scaleY(1)}}@media(prefers-reduced-motion:reduce){.lesson-wave i{animation:none}}

.payment-step{display:flex;align-items:center;gap:9px;padding:10px 0;border-bottom:1px solid #dce5e5}.payment-number{display:grid;place-items:center;background:#fff0b4;border-radius:50%;width:23px;height:23px;font-size:10px;flex-shrink:0}.payment-step b{font-size:11px}.payment-step small{display:block;font-size:9px;color:#627a85;margin-top:4px}.paid-ack{background:#e1f4e8;border:1px solid #b9dec8;border-radius:7px;margin-top:12px;padding:11px;animation:recipient-reveal 7s infinite}.paid-ack b,.paid-ack span,.paid-ack small{display:block}.paid-ack b{font-size:13px;color:#286440}.paid-ack span{font-size:10px;margin-top:6px}.paid-ack small{font-size:8px;color:#557969;margin-top:5px}@media(prefers-reduced-motion:reduce){.paid-ack{animation:none}}

.payment-step{border-radius:7px;padding:10px 7px;animation:payment-sequence 12s linear infinite;opacity:.4}.payment-stage-1{animation-delay:0s}.payment-stage-2{animation-delay:3s}.payment-stage-3{animation-delay:6s}.paid-ack{animation:payment-complete 12s linear infinite}@keyframes payment-sequence{0%,24.9%{opacity:1;background:#fff0b4;box-shadow:inset 3px 0 #f74739}25%,100%{opacity:.4;background:transparent;box-shadow:none}}@keyframes payment-complete{0%,74.9%{opacity:0;transform:translateY(4px)}78%,97%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.payment-step,.paid-ack{animation:none;opacity:1;transform:none}}

.howto { display: block; text-decoration: none; text-align: left; border:2px solid #ffde2f;box-shadow:0 3px 0 #b39400;flex-direction:column;align-items:flex-start!important;gap:4px; }
.howto-label {font-size:11px;text-transform:uppercase;letter-spacing:.06em;}
.howto > span:last-child {text-decoration:underline;text-underline-offset:3px;}
.howto:hover {background:#fff3a3;border-color:#fff3a3;box-shadow:0 4px 0 #b39400;}

/* Fit the embedded article as well as the standalone flow. */
.journey > *, .cards > *, .admin > * { min-width: 0; }
.howto { min-height: 44px; display: flex; align-items: center; font-size: 13px; line-height: 1.5; }
@media (max-width: 1000px) {
  .journey { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .node:not(:last-child):after { display: none; }
  .node { min-height: 110px; padding: 16px; }
  .node strong { font-size: 18px; }
  main { padding: 28px 20px; }
}
@media (max-width: 900px) {
  .cards { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .card { padding: 20px; }
  .card h3 { font-size: 18px; }
  .card p { font-size: 14px; }
  .cards .module-preview { min-height: 0; }
  .detail { padding: 20px; }
  .detail h2 { font-size: 24px; }
  .module-preview { padding: 16px; }
  .mini-bar, .setup-hint, .example-tag { font-size: 11px; }
  .ui-field small, .duration-label, .scene-label { font-size: 11px; }
  .ui-field > span, .screen-title, .ui-primary { font-size: 12px; }
}
@media (max-width: 480px) {
  header { padding: 16px; }
  header img { width: 96px; }
  main { padding: 24px 12px 28px; }
  h1 { font-size: 28px; letter-spacing: -.7px; }
  .intro { font-size: 14px; margin-bottom: 22px; }
  .journey { gap: 9px; }
  .node { padding: 13px 11px; min-height: 112px; border-radius: 12px; }
  .node strong { font-size: 16px; }
  .node small { font-size: 11px; line-height: 1.5; }
  .loop { text-align: left; line-height: 1.6; }
  .admin { flex-direction: column; align-items: stretch; gap: 8px; margin-bottom: 22px; }
  .admin .node { width: 100%; }
  .admin p { margin: 0; }
  .detail { padding: 16px 12px; border-radius: 16px; }
  .detail h2 { font-size: 21px; line-height: 1.4; }
  .card { padding: 12px; }
  .module-preview { padding: 10px; }
  .howto { font-size: 14px; padding: 13px; }
  .screen-title { flex-wrap: wrap; gap: 8px; }
}