.public-demo-login { margin-top: 24px; padding: 20px; border: 1px solid #dce5d4; border-radius: 12px; background: #f4f8ed; text-align: center; }
.public-demo-login .small-label { display: block; color: #728363; font-size: 9px; font-weight: 750; letter-spacing: 1px; margin-bottom: 12px; }
.public-demo-login a { display: flex; text-decoration: none; justify-content: center; }
.public-demo-login p { margin: 10px 0 0; font-size: 11px; line-height: 1.6; }
.demo-page { --demo-cream: #fffdf5; --demo-green: #d3f29c; color: var(--ink); background: var(--demo-cream); min-height: 100vh; }
.demo-page [hidden] { display: none !important; }
.demo-page a { text-decoration: none; }
.demo-page button, .demo-page a, .demo-page input, .demo-page select, .demo-page summary { touch-action: manipulation; }
.demo-page button, .demo-page a { -webkit-tap-highlight-color: transparent; }
.demo-page button:focus-visible, .demo-page a:focus-visible, .demo-page summary:focus-visible { outline: 3px solid #315edf; outline-offset: 4px; }
.demo-page h1, .demo-page h2, .demo-page h3 { color: var(--navy); }
.demo-page .brand { font-size: 23px; color: var(--navy); }
.demo-page .brand > .icon, .demo-page .brand-dot { color: #648947; }
.demo-page .brand .icon { width: 29px; height: 29px; }
.demo-nav, .demo-main, .demo-footer { max-width: 1200px; margin: 0 auto; padding-left: 40px; padding-right: 40px; }
.demo-nav { min-height: 98px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.demo-nav nav { display: flex; align-items: center; gap: 25px; font-size: 14px; font-weight: 650; }
.demo-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--blue); color: #fff !important; padding: 14px 22px; border-radius: 11px; font-size: 14px; font-weight: 700; border: 1px solid transparent; min-height: 48px; transition: background .15s, transform .15s; }
.demo-button:hover { background: var(--blue-dark); }
.demo-button--small { padding: 10px 17px; min-height: 42px; }
.demo-button--secondary { background: #fff; color: var(--navy) !important; border-color: #cdd7dd; }
.demo-button--secondary:hover { background: #eff4e9; border-color: #aabda4; }
.demo-skip { position: absolute; top: -100px; left: 20px; z-index: 100; background: #fff; padding: 12px 20px; }
.demo-skip:focus { top: 10px; }
.demo-hero { padding: 49px 0 48px; display: grid; grid-template-columns: 1.04fr 1fr; gap: 44px; align-items: center; }
.demo-badge { display: inline-block; color: #486333; background: #edf4df; font-size: 10px; font-weight: 800; letter-spacing: 1.35px; border: 1px solid #d9e5c5; border-radius: 6px; padding: 7px 10px; }
.demo-hero h1 { font-size: clamp(43px, 5.2vw, 68px); letter-spacing: -2.8px; line-height: 1.06; margin: 22px 0 23px; font-weight: 780; }
.demo-hero h1 span { color: var(--blue); }
.demo-hero-copy > p { font-size: 17px; color: #5f6e79; max-width: 390px; line-height: 1.65; }
.demo-hero-copy .demo-hero-note { font-size: 11px; margin: 16px 0 0; max-width: 370px; }
.demo-hero-art { position: relative; min-height: 430px; background: #e7efdb; border-radius: 42% 42% 16px 16px; overflow: hidden; isolation: isolate; }
.demo-art-label { position: absolute; inset: 34px 0 auto; text-align: center; color: #547246; font-size: 9px; font-weight: 800; letter-spacing: 2px; z-index: 2; }
.demo-record { width: 270px; height: 270px; background: repeating-radial-gradient(circle at center, #203446 0 2px, #192c3c 3px 7px); border: 9px solid #162a39; border-radius: 50%; position: absolute; left: 50%; top: 83px; transform: translateX(-50%) rotate(-16deg); box-shadow: 0 15px 20px #15263322; display: grid; place-items: center; }
.demo-record::before { content: ""; position: absolute; inset: 15px; border-radius: 50%; background: conic-gradient(from 5deg, transparent 0 35deg, #cfe0f51c 48deg 77deg, transparent 90deg 230deg, #cfe0f50c 245deg 265deg, transparent 290deg); }
.demo-record-label { border: 8px solid #bfdc81; background: #cce79b; height: 116px; width: 116px; border-radius: 50%; font-size: 20px; letter-spacing: -1px; line-height: 1; font-weight: 900; color: #254438; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.demo-record-label span { font-size: 7px; letter-spacing: 2px; margin-top: 10px; }
.demo-hero-friend { position: absolute; width: 170px; top: 222px; z-index: 2; filter: drop-shadow(0 9px 6px #162f3320); }
.demo-hero-friend svg { display: block; width: 100%; height: auto; }
.demo-hero-friend--left { left: 1%; transform: rotate(-10deg); }
.demo-hero-friend--right { right: 1%; transform: rotate(10deg); }
.demo-art-caption { position: absolute; bottom: 21px; width: 100%; text-align: center; color: #496043; font-size: 10px; line-height: 1.6; }
.demo-art-caption strong { color: #203d2e; font-size: 12px; }
.demo-art-spark { position: absolute; font-size: 38px; color: #729c49; }
.demo-art-spark--one { top: 89px; left: 39px; transform: rotate(14deg); }
.demo-art-spark--two { top: 174px; right: 24px; font-size: 27px; color: #d78d4b; }
.demo-orbit { position: absolute; border: 1px solid #b4c69f80; border-radius: 50%; width: 530px; height: 220px; top: 120px; left: -40px; transform: rotate(-38deg); }
.demo-orbit--two { transform: rotate(38deg); }
.demo-steps { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #dce3d4; border-bottom: 1px solid #dce3d4; margin: 9px 0 58px; }
.demo-steps a { display: flex; align-items: center; padding: 21px 20px; gap: 12px; font-size: 13px; font-weight: 650; }
.demo-steps a + a { border-left: 1px solid #dce3d4; }
.demo-steps a:hover { background: #f0f4e7; }
.demo-steps a > span { font-size: 10px; color: #798875; }
.demo-steps .icon { margin-left: auto; width: 17px; height: 17px; color: #506f40; }
.demo-section { scroll-margin-top: 24px; margin-bottom: 66px; }
.demo-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 23px; }
.demo-kicker { font-size: 10px; font-weight: 800; letter-spacing: 1.5px; color: #708065; margin: 0 0 8px; display: block; }
.demo-section-heading h2 { font-size: 27px; letter-spacing: -.8px; max-width: 690px; }
.demo-pill { white-space: nowrap; border: 1px solid #dfe5d8; background: #f5f8ed; color: #69765e; padding: 5px 10px; border-radius: 20px; font-size: 10px; font-weight: 700; }
.demo-lesson { display: flex; align-items: start; gap: 19px; background: #edf2fa; padding: 24px; border-radius: 15px; border: 1px solid #dce4f1; }
.demo-lesson-symbol { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: #dce7fb; color: var(--blue); flex: 0 0 auto; }
.demo-lesson-symbol svg { width: 28px; height: 28px; }
.demo-lesson .demo-kicker { color: #5e76a3; font-size: 9px; letter-spacing: 1px; }
.demo-lesson h3 { font-size: 19px; margin-bottom: 8px; }
.demo-lesson p { font-size: 13px; color: #506479; line-height: 1.65; max-width: 850px; margin-bottom: 0; }
.demo-lesson-hint { margin-top: 12px; font-size: 12px; color: #345eae; }
.demo-lesson-hint summary { cursor: pointer; font-weight: 650; }
.demo-lesson-hint p { margin-top: 10px; }
.demo-keywords { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 22px; align-items: start; }
.demo-keyword { font-size: 11px; position: relative; max-width: 100%; }
.demo-keyword summary { list-style: none; background: #fff; border: 1px solid #dce4d5; color: #637551; border-radius: 8px; padding: 7px 10px; cursor: pointer; display: flex; gap: 15px; font-weight: 650; }
.demo-keyword summary::-webkit-details-marker { display: none; }
.demo-keyword summary span { color: #98a78e; }
.demo-keyword p { padding: 12px 14px; border: 1px solid #dce4d5; border-radius: 9px; color: #48593e; background: #f4f8ed; max-width: 320px; margin: 7px 0 0; font-size: 12px; line-height: 1.6; }
.demo-keyword--used summary { background: #e2f1d3; border-color: #aac793; color: #32512f; }
.demo-studio-grid { display: grid; grid-template-columns: minmax(0, 1fr) 295px; gap: 21px; align-items: start; }
.demo-paper { background: #fff; border: 1px solid #dce2e6; border-radius: 15px; padding: 24px; box-shadow: 0 5px 16px #28362f03; min-width: 0; }
.demo-paper-heading { display: flex; align-items: center; gap: 15px; justify-content: space-between; margin-bottom: 19px; }
.demo-paper-heading label { flex: 1; font-size: 10px; font-weight: 650; color: #75828b; }
.demo-paper-heading input { border: 0; padding: 6px 0; border-radius: 0; font-size: 19px; color: #293c50; font-weight: 650; box-shadow: none; }
.demo-paper-heading input::placeholder { color: #91a0a8; font-weight: 500; }
.demo-count { font-size: 10px; color: #84919a; white-space: nowrap; }
.demo-line { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #e8edf0; min-height: 59px; }
.demo-line > label { width: 21px; color: #acb8bd; font-size: 11px; }
.demo-line[data-active="true"] > label { color: var(--blue); font-weight: 750; }
.demo-line input { border: none; border-radius: 0; background: transparent; padding: 16px 0; box-shadow: none; font-size: 14px; flex: 1; min-width: 0; }
.demo-line:focus-within { border-bottom-color: var(--blue); }
.demo-line input::placeholder { color: #9aa6ac; }
.demo-line > button { width: 30px; height: 34px; display: grid; place-items: center; color: #9ba8ae; }
.demo-line > button:hover { color: #a3344b; background: #fff1f3; border-radius: 5px; }
.demo-line > button svg { width: 14px; height: 14px; }
.demo-paper-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 21px 0; }
.demo-paper-actions .demo-button { font-size: 12px; min-height: 39px; padding: 9px 13px; }
.demo-paper-actions .icon { width: 15px; height: 15px; }
.demo-small { font-size: 12px; color: #657580; line-height: 1.6; }
.demo-memory-note { font-size: 12px; color: #6c7b84; padding-top: 18px; margin-bottom: 13px; border-top: 1px dashed #e3e9ed; line-height: 1.6; }
.demo-save-actions { display: flex; flex-wrap: wrap; gap: 9px 19px; }
.demo-text-button { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 650; color: #526c8a; padding: 5px 0; }
.demo-text-button:hover { color: var(--blue); text-decoration: underline; }
.demo-text-button svg { width: 14px; height: 14px; }
.demo-status { font-size: 11px; color: #446a40; margin: 8px 0 0; min-height: 0; }
.demo-status:empty { display: none; }
.demo-rhyme-panel { border: 1px solid #dce5d3; border-radius: 15px; padding: 23px 20px; background: #f4f8ed; }
.demo-rhyme-icon { background: #e2edcf; width: 34px; height: 34px; border-radius: 10px; color: #668446; display: grid; place-items: center; margin-bottom: 14px; }
.demo-rhyme-panel h3 { font-size: 16px; }
.demo-rhyme-panel > p { font-size: 12px; color: #6b7b60; line-height: 1.7; margin-bottom: 17px; }
.demo-rhyme-panel form label { font-size: 10px; color: #6b7b62; font-weight: 650; }
.demo-search { display: flex; margin-top: 5px; gap: 7px; }
.demo-search input { border-color: #d5dfc9; background: #fff; font-size: 13px; padding: 11px 12px; }
.demo-search button { background: #325a43; color: #fff; border-radius: 9px; width: 43px; flex: 0 0 43px; }
.demo-search button:hover { background: #264432; }
.demo-search button svg { width: 17px; height: 17px; }
.demo-rhyme-suggestions { display: flex; align-items: center; gap: 12px; font-size: 10px; margin: 11px 0 20px; color: #8a9680; }
.demo-rhyme-suggestions button { color: #5d784d; text-decoration: underline; padding: 3px 0; }
.demo-rhyme-empty { font-size: 12px; color: #66775a; border-top: 1px solid #e0e8d8; padding-top: 17px; margin-bottom: 18px; line-height: 1.7; }
.demo-rhyme-group h4 { font-size: 11px; color: #4f6444; display: flex; justify-content: space-between; margin: 15px 0 8px; }
.demo-rhyme-group h4 span { color: #839077; font-weight: 400; }
.demo-rhyme-words { display: flex; flex-wrap: wrap; gap: 5px; max-height: 220px; overflow-y: auto; padding: 4px; margin: 0 -4px 10px; }
.demo-rhyme-words button { background: #fff; border: 1px solid #d9e3cf; border-radius: 6px; padding: 6px 9px; color: #506c41; font-size: 11px; overflow-wrap: anywhere; max-width: 100%; }
.demo-rhyme-words button:hover { background: #dcecc9; }
.demo-rhyme-panel .demo-rhyme-help { margin: 17px 0 0; font-size: 11px; color: #708063; }
.demo-character-layout { display: grid; grid-template-columns: 245px minmax(0, 1fr); gap: 26px; background: #fff; border: 1px solid #e0e5e7; border-radius: 16px; padding: 25px; }
.demo-character-preview { background: #f3efe7; border-radius: 12px; padding: 24px 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
#demo-avatar-preview { width: 185px; max-width: 100%; margin-bottom: 9px; }
#demo-avatar-preview svg { display: block; width: 100%; height: auto; }
.demo-character-preview strong { font-size: 15px; }
.demo-character-preview p { font-size: 10px; color: #9a9285; margin: 5px 0 0; }
.demo-character-controls { min-width: 0; }
.demo-character-controls fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.demo-character-controls legend, .demo-look-options > label { color: #60717f; font-weight: 650; font-size: 11px; margin-bottom: 10px; }
.demo-shapes { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.demo-shapes button { padding: 8px 3px 7px; border: 1px solid #e5e9eb; border-radius: 10px; background: #fff; min-width: 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; }
.demo-shapes button[aria-pressed="true"] { border-color: #7f9ce0; background: #edf3ff; box-shadow: 0 0 0 1px #7f9ce0; }
.demo-shapes button > span:first-child { display: block; width: 100%; max-width: 65px; }
.demo-shapes svg { width: 100%; height: auto; display: block; }
.demo-shapes button > span:last-child { font-size: 8px; line-height: 1.4; color: #617487; margin-top: 4px; }
.demo-look-options { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin: 25px 0 13px; }
.demo-colors { display: flex; flex-wrap: wrap; gap: 8px; }
.demo-color { width: 28px; height: 28px; border-radius: 50%; background: var(--demo-swatch); color: #fff; border: 2px solid transparent; outline: 2px solid transparent; outline-offset: 2px; display: grid; place-items: center; font-weight: 800; }
.demo-color span { opacity: 0; font-size: 13px; text-shadow: 0 1px 3px #15233380; }
.demo-color[aria-pressed="true"] { outline-color: #30475c; }
.demo-color[aria-pressed="true"] span { opacity: 1; }
.demo-look-options select { display: block; margin-top: 9px; padding: 8px 10px; font-weight: 400; font-size: 12px; }
.demo-character-controls > .demo-small { margin-bottom: 0; max-width: 600px; font-size: 12px; }
.demo-stage { position: relative; isolation: isolate; background: var(--theme-stage, #14283b); border: 1px solid #263e52; border-radius: 20px; overflow: hidden; color: #fff; padding: 24px 29px 15px; scroll-margin-top: 25px; }
.demo-stage::before { content: ""; position: absolute; z-index: -2; pointer-events: none; inset: 0; background: radial-gradient(ellipse at 10% 0, #53856528, transparent 65%), radial-gradient(ellipse at 100% 90%, #668fce21, transparent 70%); }
.demo-stage-wave { position: absolute; z-index: -1; bottom: 0; left: 0; right: 0; height: 74%; display: flex; gap: 5px; align-items: end; opacity: .19; padding: 0 15px; pointer-events: none; mask-image: linear-gradient(to top, #000, transparent); }
.demo-stage-wave i { flex: 1; min-width: 1px; height: 100%; border-radius: 8px 8px 0 0; background: linear-gradient(to top, #6e91bb, #96dbaa); transform: scaleY(.04); transform-origin: bottom; }
.demo-stage-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.demo-on-stage { display: flex; align-items: center; gap: 8px; color: #9dafc0; font-size: 9px; font-weight: 750; letter-spacing: 1.8px; }
.demo-on-stage > span { width: 6px; height: 6px; border-radius: 50%; background: #769d7b; }
.demo-stage[data-playing="true"] .demo-on-stage > span { background: #b6ec90; box-shadow: 0 0 8px #b6ec9055; }
.demo-stage-button { color: #b7c7d5; display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: #ffffff08; border: 1px solid #ffffff15; border-radius: 8px; font-size: 11px; padding: 9px 10px; min-height: 39px; }
.demo-stage-button:hover { background: #ffffff17; color: #fff; }
.demo-stage-button svg { width: 16px; height: 16px; }
.demo-stage-performance { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: center; gap: 35px; min-height: 280px; padding: 25px 0 32px; }
.demo-stage-performer { display: flex; flex-direction: column; align-items: center; width: 100%; }
.demo-stage-performer > span { border-radius: 20px; border: 1px solid #bfd8ae26; background: #d2f29e12; color: #c5d9b2; font-size: 10px; padding: 5px 14px; margin-top: 4px; }
.demo-dancer { width: 190px; max-width: 100%; transform-origin: center 92%; }
.demo-dancer svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 9px 10px #0002); }
.demo-stage[data-playing="true"] .demo-dancer { animation: demo-dance .65s ease-in-out infinite alternate; }
@keyframes demo-dance { 0% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-8px) rotate(0); } 100% { transform: translateY(0) rotate(5deg); } }
.demo-stage-verse { min-width: 0; }
.demo-stage-verse h3 { color: #d4e7b9; font-size: 13px; letter-spacing: .2px; margin-bottom: 13px; overflow-wrap: anywhere; }
#demo-stage-lyrics { max-height: 275px; overflow-y: auto; scrollbar-color: #5b7385 transparent; scrollbar-width: thin; padding-right: 12px; }
#demo-stage-lyrics p { font-size: 20px; line-height: 1.5; font-weight: 600; color: #f2f7fc; margin: 0 0 7px; overflow-wrap: anywhere; }
#demo-stage-lyrics .demo-stage-placeholder { font-size: 23px; color: #91a7b8; font-weight: 450; line-height: 1.5; }
.demo-stage-controls { display: flex; align-items: end; gap: 22px; padding-top: 22px; border-top: 1px solid #ffffff14; }
.demo-stage-controls > label:first-child { flex: 1; font-size: 9px; font-weight: 600; color: #95aabd; min-width: 0; }
.demo-stage-controls select { color: #e4edf7; background: #1d3346; border: 1px solid #3e5264; font-size: 12px; padding: 11px 12px; margin-top: 5px; border-radius: 9px; }
.demo-transport { display: flex; align-items: center; gap: 8px; }
.demo-transport .demo-button { background: #c8e99d; color: #294429 !important; font-size: 12px; padding: 11px 16px; min-height: 43px; }
.demo-transport .demo-button:hover { background: #d8f5b2; }
.demo-transport .demo-button svg { width: 16px; height: 16px; }
.demo-transport .demo-stage-button { min-height: 43px; }
.demo-horn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 43px; padding: 11px 14px; font-size: 12px; font-weight: 650; color: #ffcd95; background: #584232; border: 1px solid #80603d; border-radius: 9px; }
.demo-horn:hover { background: #705238; }
.demo-horn:active { transform: scale(.96); }
.demo-horn svg { width: 17px; height: 17px; }
.demo-volume { display: flex; align-items: center; gap: 10px; flex: 0 0 117px; min-height: 43px; }
.demo-volume svg { color: #859aae; width: 16px; height: 16px; }
.demo-stage input[type="range"] { accent-color: #b5d995; min-width: 0; }
.demo-stage-seek { display: flex; align-items: center; gap: 12px; margin-top: 21px; }
.demo-stage-seek > span { font-size: 10px; color: #8ba2b6; font-variant-numeric: tabular-nums; }
.demo-stage-seek > input { flex: 1; }
.demo-loop { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; color: #9cb0c1; margin-left: 7px; }
.demo-loop input[type="checkbox"] { height: 13px; width: 13px; accent-color: #bfdc9b; }
.demo-audio-status { color: #8da5b9; font-size: 10px; margin: 12px 0 0; min-height: 16px; }
.demo-stage-footnote { margin: 10px 0 0; font-size: 10px; }
.demo-stage:fullscreen { display: flex; flex-direction: column; padding: 28px 45px; border: 0; border-radius: 0; overflow-y: auto; }
.demo-stage:fullscreen .demo-stage-performance { flex: 1; grid-template-columns: minmax(220px, 30%) minmax(0, 1fr); }
.demo-stage:fullscreen .demo-dancer { width: min(30vw, 400px); }
.demo-stage:fullscreen #demo-stage-lyrics { max-height: 55vh; }
.demo-stage:fullscreen #demo-stage-lyrics p { font-size: clamp(20px, 3vw, 40px); }
.demo-teacher-section { padding: 38px 0 0; margin-top: -10px; border-top: 1px solid #dfe5d7; }
.demo-teacher-section > h2 { font-size: 28px; letter-spacing: -.8px; max-width: 590px; margin: 0 0 29px; }
.demo-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; margin-bottom: 32px; }
.demo-feature-grid article > span { width: 36px; height: 36px; border: 1px solid #e0e8d6; border-radius: 10px; background: #edf4e4; color: #65804f; display: grid; place-items: center; margin-bottom: 15px; }
.demo-feature-grid article > span svg { width: 18px; height: 18px; }
.demo-feature-grid h3 { font-size: 15px; margin-bottom: 9px; }
.demo-feature-grid p { color: #78847b; font-size: 12px; line-height: 1.8; margin: 0; }
.demo-teacher-cta { background: #edf3e4; border: 1px solid #dce7cc; border-radius: 14px; padding: 25px; display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.demo-teacher-cta h3 { font-size: 18px; margin-bottom: 5px; }
.demo-teacher-cta p { font-size: 11px; color: #77866b; margin: 0; }
.demo-teacher-cta > div:last-child { display: flex; flex-shrink: 0; gap: 10px; }
.demo-teacher-cta .demo-button { font-size: 12px; padding: 11px 17px; min-height: 43px; }
.demo-footer { display: flex; align-items: center; gap: 25px; flex-wrap: wrap; padding-top: 34px; padding-bottom: 32px; margin-top: 28px; }
.demo-footer .brand { font-size: 15px; }
.demo-footer .brand .icon { width: 21px; height: 21px; }
.demo-footer p { margin: 0; color: #88917f; font-size: 10px; }
.demo-footer > span { margin-left: auto; color: #99a18e; font-size: 9px; }
@media (max-width: 1000px) {
  .demo-nav, .demo-main, .demo-footer { padding-left: 28px; padding-right: 28px; }
  .demo-hero { gap: 28px; }
  .demo-hero-art { min-height: 400px; }
  .demo-hero-friend { width: 142px; top: 220px; }
  .demo-character-layout { grid-template-columns: 210px minmax(0, 1fr); gap: 22px; padding: 22px; }
  .demo-shapes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .demo-shapes button { flex-direction: row; align-items: center; padding: 6px; gap: 5px; }
  .demo-shapes button > span:first-child { width: 35px; flex: 0 0 35px; }
  .demo-shapes button > span:last-child { text-align: left; margin: 0; }
  .demo-look-options { gap: 15px; }
  .demo-stage-controls { gap: 15px; flex-wrap: wrap; }
  .demo-volume { flex: 0 0 95px; }
  .demo-transport { gap: 5px; }
  .demo-transport .demo-button { padding: 11px 12px; }
  .demo-horn { padding: 11px 10px; }
}
@media (max-width: 760px) {
  .demo-nav { min-height: 79px; }
  .demo-nav nav { gap: 15px; font-size: 11px; }
  .demo-nav .brand { font-size: 20px; }
  .demo-hero { grid-template-columns: 1fr .85fr; gap: 20px; padding: 35px 0; }
  .demo-hero h1 { font-size: 46px; letter-spacing: -2px; }
  .demo-hero-copy > p { font-size: 14px; }
  .demo-badge { font-size: 8px; letter-spacing: .6px; }
  .demo-hero-art { min-height: 350px; border-radius: 120px 120px 14px 14px; }
  .demo-record { width: 210px; height: 210px; top: 85px; }
  .demo-record-label { width: 95px; height: 95px; font-size: 16px; }
  .demo-art-label { top: 55px; font-size: 7px; letter-spacing: .8px; }
  .demo-hero-friend { width: 112px; top: 202px; }
  .demo-art-caption { font-size: 8px; bottom: 16px; }
  .demo-art-caption strong { font-size: 10px; }
  .demo-art-spark--one { top: 105px; left: 15px; font-size: 25px; }
  .demo-art-spark--two { top: 175px; right: 8px; font-size: 21px; }
  .demo-steps { margin-bottom: 42px; }
  .demo-steps a { padding: 16px 10px; font-size: 11px; gap: 8px; }
  .demo-steps a svg { display: none; }
  .demo-section-heading h2 { font-size: 23px; }
  .demo-studio-grid { grid-template-columns: minmax(0, 1fr) 230px; gap: 14px; }
  .demo-paper { padding: 18px; }
  .demo-paper-heading input { font-size: 16px; }
  .demo-paper-actions { flex-wrap: wrap; }
  .demo-rhyme-panel { padding: 19px 15px; }
  .demo-character-layout { grid-template-columns: 170px minmax(0, 1fr); padding: 18px; gap: 18px; }
  .demo-shapes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .demo-shapes button { flex-direction: column; gap: 0; }
  .demo-shapes button > span:last-child { text-align: center; font-size: 7px; }
  .demo-look-options { grid-template-columns: 1fr; gap: 17px; margin-top: 18px; }
  .demo-stage { padding: 21px; }
  .demo-stage-performance { grid-template-columns: 170px minmax(0, 1fr); gap: 22px; min-height: 250px; }
  .demo-dancer { width: 160px; }
  #demo-stage-lyrics p { font-size: 17px; }
  #demo-stage-lyrics .demo-stage-placeholder { font-size: 20px; }
  .demo-stage-controls > label:first-child { flex-basis: 100%; }
  .demo-volume { margin-left: auto; flex-basis: 120px; }
  .demo-feature-grid { gap: 22px; }
  .demo-teacher-cta { flex-wrap: wrap; }
  .demo-footer { gap: 10px 20px; }
  .demo-footer > span { flex-basis: 100%; margin: 0; }
}
@media (max-width: 580px) {
  .demo-nav, .demo-main, .demo-footer { padding-left: 20px; padding-right: 20px; }
  .demo-nav { min-height: 77px; gap: 12px; }
  .demo-nav .brand { font-size: 18px; gap: 5px; }
  .demo-nav .brand svg { width: 23px; height: 23px; }
  .demo-nav nav { gap: 12px; font-size: 10px; }
  .demo-nav .demo-button { padding: 8px 11px; font-size: 10px; min-height: 36px; }
  .demo-nav .demo-button svg { display: none; }
  .demo-hero { grid-template-columns: 1fr; padding: 23px 0 28px; gap: 30px; }
  .demo-hero h1 { font-size: clamp(43px, 11.8vw, 62px); margin: 18px 0; line-height: 1.04; }
  .demo-hero-copy > p { max-width: 330px; font-size: 14px; }
  .demo-hero h1 br:nth-child(2) { display: none; }
  .demo-hero h1 span::before { content: " "; }
  .demo-hero-art { min-height: 275px; border-radius: 140px 140px 16px 16px; margin: 0 12px; }
  .demo-art-label { top: 20px; }
  .demo-record { width: 195px; height: 195px; top: 45px; }
  .demo-record-label { width: 87px; height: 87px; font-size: 15px; border-width: 6px; }
  .demo-hero-friend { top: 126px; width: 127px; }
  .demo-hero-friend--left { left: 0; }
  .demo-hero-friend--right { right: 0; }
  .demo-art-caption { bottom: 9px; font-size: 7px; }
  .demo-art-caption strong { font-size: 9px; }
  .demo-art-spark--one { top: 75px; left: 23px; }
  .demo-art-spark--two { top: 85px; right: 21px; }
  .demo-steps { margin-top: 3px; margin-bottom: 36px; }
  .demo-steps a { flex-direction: column; align-items: start; padding: 14px 9px; font-size: 10px; line-height: 1.4; }
  .demo-steps a > span { font-size: 9px; }
  .demo-section { margin-bottom: 45px; }
  .demo-section-heading { align-items: start; gap: 10px; margin-bottom: 19px; }
  .demo-section-heading h2 { font-size: 23px; line-height: 1.25; }
  .demo-section-heading .demo-pill { display: none; }
  .demo-kicker { font-size: 8px; letter-spacing: 1.1px; }
  .demo-lesson { padding: 18px; gap: 12px; }
  .demo-lesson-symbol { width: 32px; height: 32px; border-radius: 9px; }
  .demo-lesson-symbol svg { width: 21px; height: 21px; }
  .demo-lesson h3 { font-size: 16px; }
  .demo-lesson p { font-size: 12px; }
  .demo-lesson .demo-kicker { font-size: 7px; }
  .demo-keywords { margin-bottom: 17px; gap: 6px; }
  .demo-keyword summary { font-size: 10px; gap: 11px; padding: 6px 8px; }
  .demo-studio-grid { grid-template-columns: 1fr; gap: 17px; }
  .demo-paper { padding: 18px; }
  .demo-paper-heading input { font-size: 17px; }
  .demo-line input, .demo-search input, .demo-look-options select, .demo-stage-controls select { font-size: 16px; }
  .demo-rhyme-panel { padding: 20px; }
  .demo-rhyme-icon { float: right; margin: 0; }
  .demo-rhyme-panel > p { max-width: 240px; }
  .demo-rhyme-panel .demo-rhyme-help { max-width: none; }
  .demo-rhyme-words { max-height: 165px; }
  .demo-character-layout { grid-template-columns: 1fr; padding: 18px; gap: 20px; }
  .demo-character-preview { padding: 13px; }
  #demo-avatar-preview { width: 150px; margin-bottom: 4px; }
  .demo-character-preview strong { font-size: 13px; }
  .demo-shapes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
  .demo-shapes button > span:first-child { width: 50px; flex-basis: 50px; }
  .demo-shapes button > span:last-child { font-size: 8px; }
  .demo-look-options { grid-template-columns: 1fr; }
  .demo-character-controls > .demo-small { font-size: 12px; }
  .demo-stage { padding: 18px 16px 14px; border-radius: 15px; }
  .demo-stage-performance { grid-template-columns: 1fr; gap: 19px; padding-top: 20px; padding-bottom: 23px; }
  .demo-dancer { width: 145px; }
  .demo-stage-verse { text-align: center; }
  .demo-stage-verse h3 { font-size: 12px; }
  #demo-stage-lyrics { max-height: 225px; padding-right: 0; }
  #demo-stage-lyrics p { font-size: 17px; }
  #demo-stage-lyrics .demo-stage-placeholder { font-size: 17px; }
  .demo-stage-controls { gap: 15px 7px; padding-top: 19px; }
  .demo-transport { flex: 1; gap: 6px; }
  .demo-transport .demo-button { flex: 1; font-size: 11px; padding: 10px; }
  .demo-transport .demo-stage-button { padding: 10px; }
  .demo-horn { font-size: 11px; padding: 10px; }
  .demo-volume { flex: 1 0 100%; margin: 0; min-height: 22px; }
  .demo-volume input { max-width: none; }
  .demo-stage-seek { gap: 8px; margin-top: 15px; }
  .demo-loop { margin-left: 2px; }
  .demo-audio-status { font-size: 9px; }
  .demo-stage:fullscreen { padding: 20px; }
  .demo-stage:fullscreen .demo-stage-performance { grid-template-columns: 1fr; align-content: center; gap: 12px; }
  .demo-stage:fullscreen .demo-dancer { width: min(35vw, 200px); }
  .demo-stage:fullscreen #demo-stage-lyrics { max-height: 30vh; }
  .demo-stage:fullscreen #demo-stage-lyrics p { font-size: 19px; }
  .demo-teacher-section { padding-top: 28px; margin-top: 0; }
  .demo-teacher-section > h2 { font-size: 24px; margin-bottom: 27px; }
  .demo-feature-grid { grid-template-columns: 1fr; gap: 27px; }
  .demo-feature-grid article { position: relative; padding-left: 53px; }
  .demo-feature-grid article > span { position: absolute; left: 0; top: 0; }
  .demo-feature-grid p { font-size: 12px; }
  .demo-teacher-cta { padding: 21px; gap: 18px; }
  .demo-teacher-cta h3 { font-size: 17px; }
  .demo-teacher-cta > div:last-child { gap: 8px; }
  .demo-teacher-cta .demo-button { padding: 10px 14px; }
  .demo-footer { padding-top: 24px; padding-bottom: 25px; margin-top: 13px; gap: 13px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-page *, .demo-page *::before, .demo-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* The public sample uses the same writing workspace as classroom and Jam raps. */
#demo-studio :where(.demo-lesson) { border: 0; border-radius: 0; background: transparent; }
#demo-studio :where(.demo-paper) { padding: 0; box-shadow: none; }
#demo-studio :where(.demo-keywords) { margin: 15px 0 0; gap: 8px; }
#demo-studio :where(.demo-keyword) { width: 100%; }
#demo-studio :where(.demo-keyword summary) { justify-content: space-between; padding: 10px 12px; border-color: #e5e1ef; background: #f8f7fc; color: #514266; font-size: 12px; }
#demo-studio :where(.demo-keyword summary span) { color: #8c7ea0; }
#demo-studio :where(.demo-keyword p) { width: 100%; max-width: none; border: 0; border-left: 2px solid #a28ae0; border-radius: 0; padding: 4px 11px; color: #655e72; background: transparent; }
#demo-studio :where(.demo-keyword--used summary) { background: #eef7f2; border-color: #cbe7d9; color: #347157; }
#demo-studio :where(.demo-paper-actions) { margin: 0; }
#demo-studio :where(.demo-memory-note) { border: 0; padding: 0; margin: 12px 0 0; font-size: 11px; }
#demo-studio :where(.demo-text-button) { color: #71519f; font-size: 12px; }
#demo-studio :where(.demo-rhyme-panel) { background: #fff; border-color: #e6e1ed; }
#demo-studio :where(.demo-rhyme-panel > p, .demo-rhyme-panel form label, .demo-rhyme-empty, .demo-rhyme-help) { color: #777084; }
#demo-studio :where(.demo-rhyme-icon) { margin: 0; float: none; color: #7752b8; background: #eee7fa; }
#demo-studio :where(.demo-search input) { border-color: #ded6e9; }
#demo-studio :where(.demo-search button) { background: #7551b4; }
#demo-studio :where(.demo-search button:hover) { background: #603d9e; }
#demo-studio :where(.demo-rhyme-suggestions) { color: #8b8198; }
#demo-studio :where(.demo-rhyme-suggestions button, .demo-rhyme-group h4) { color: #7551a5; }
#demo-studio :where(.demo-rhyme-words button) { border-color: #e2d9ed; color: #725199; }
#demo-studio :where(.demo-rhyme-words button:hover) { background: #f0e9fa; }
#demo-studio :where(.demo-rhyme-empty) { border-color: #e9e4ef; }
#demo-studio :where(.demo-line > label) { width: auto; }
#demo-studio :where(.demo-line textarea) { width: 100%; overflow-wrap: anywhere; }
#demo-studio :where(.demo-line[data-active="true"] > label) { color: #7652b0; }
#demo-studio :where(.demo-line:focus-within) { border-bottom-color: #b198d3; }
#demo-studio :where(.rw-dock-status) { color: #b3b9cf; font-size: 11px; line-height: 1.5; margin: -5px 0 0; flex: 1 0 100%; }
@media (max-width: 580px) {
  #demo-studio :where(.demo-rhyme-panel > p) { max-width: none; }
}

#demo-studio .rw-header-actions .demo-button { color: #576078 !important; }
#demo-studio .rw-header-actions .demo-button[aria-pressed="true"] { color: var(--rw-accent) !important; }
#demo-studio .rw-editor-bottom .demo-button { color: var(--rw-accent) !important; }
#demo-studio .rw-transport .demo-button { color: #30264e !important; }
#demo-studio .rw-transport a { color: #d7ccec; }
#demo-studio .rw-tool-head { justify-content: flex-start; }
#demo-studio .rw-tool-head .rw-kicker { font-size: 8px; letter-spacing: 1px; margin-bottom: 4px; }
#demo-studio .rw-tool-icon { flex: 0 0 34px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--rw-soft); color: var(--rw-accent); }
#demo-studio .rw-brief-body { border-top: 1px solid var(--rw-border); }
#demo-studio .rw-brief-body .demo-lesson-hint p { margin-top: 10px; }