:root{--ink:#16324b;--muted:#698092;--paper:#fff;--bg:#f3faf8;--line:#d9e8e5;--teal:#0b7285;--teal-dark:#075667;--green:#49b879;--yellow:#f6c453;--coral:#ef7d6b;--locked:#b6c2c5;--shadow:0 18px 55px rgba(23,58,70,.12)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:"Noto Sans SC",sans-serif}button{font:inherit}.topbar{height:76px;padding:0 clamp(18px,4vw,55px);display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.95);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30;backdrop-filter:blur(14px)}.brand{display:flex;align-items:center;gap:11px;border:0;background:transparent;color:var(--ink);cursor:pointer;text-align:left}.brand>span{width:44px;height:44px;border-radius:15px;display:grid;place-items:center;background:var(--teal);color:#fff;font:700 16px Fredoka;transform:rotate(-4deg)}.brand b,.brand small{display:block}.brand b{font:700 19px Fredoka}.brand small{font-size:10px;color:var(--muted)}.top-stats{display:flex;align-items:center;gap:22px}.top-stats>div{display:grid;grid-template-columns:auto auto;column-gap:5px;align-items:center}.top-stats>div>span{grid-row:1/3;font-size:22px}.top-stats b{line-height:1}.top-stats small{font-size:9px;color:var(--muted)}.avatar{width:44px;height:44px;border:3px solid white;border-radius:50%;background:var(--yellow);color:#654500;box-shadow:0 0 0 2px var(--teal);font-weight:700}.app-view{display:none}.app-view.active{display:block}.eyebrow{margin:0 0 5px;color:var(--teal);font-size:11px;font-weight:700;letter-spacing:.08em}#map-view{max-width:1500px;margin:auto;padding:36px clamp(18px,4vw,55px) 50px}.map-intro{display:grid;grid-template-columns:1fr auto;align-items:end;gap:25px;margin-bottom:24px}.map-intro h1{font:700 clamp(31px,4vw,48px) Fredoka,"Noto Sans SC";margin:4px 0 8px}.map-intro>div>p:last-child{color:var(--muted);margin:0}.journey-stat{display:flex;align-items:center;gap:12px;background:white;border-radius:20px;padding:15px 18px;box-shadow:0 9px 28px rgba(23,58,70,.08)}.journey-stat>span{font-size:31px}.journey-stat small,.journey-stat b,.journey-stat em{display:block}.journey-stat small{font-size:9px;color:var(--muted)}.journey-stat b{font-size:13px;margin:2px 0}.journey-stat em{font-size:10px;color:var(--teal);font-style:normal}.map-viewport{border-radius:32px;overflow-x:auto;box-shadow:var(--shadow);background:#bde8ef}.map-ocean{width:1500px;height:560px;position:relative;overflow:hidden;background:linear-gradient(180deg,#bfeaf1,#83d1c6);isolation:isolate}.map-ocean:after{content:"";position:absolute;inset:auto 0 0;height:150px;background:linear-gradient(transparent,rgba(26,145,154,.19));z-index:-1}.cloud{position:absolute;color:rgba(255,255,255,.72);font-size:72px;filter:blur(.2px)}.c1{left:8%;top:5%}.c2{left:43%;top:10%;font-size:54px}.c3{right:6%;top:4%}.sea-route{position:absolute;inset:0;width:100%;height:100%;z-index:1}.sea-route path{fill:none;stroke:rgba(255,255,255,.9);stroke-width:5;stroke-dasharray:13 13;stroke-linecap:round}.island-map{position:absolute;inset:0;z-index:2}.island-node{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:155px;border:0;background:transparent;color:var(--ink);cursor:pointer;text-align:center}.island-shape{width:132px;height:102px;margin:auto;border:7px solid #f8df9d;border-radius:52% 48% 44% 56%;background:var(--island-color,#75c883);box-shadow:0 10px 0 rgba(28,100,78,.15);display:grid;place-items:center;position:relative;transition:.2s}.island-shape>span{font-size:43px}.island-node:hover:not(.locked) .island-shape{transform:translateY(-7px) rotate(-2deg)}.island-node b,.island-node small,.island-node em{display:block}.island-node b{font-size:12px;background:rgba(255,255,255,.94);border-radius:10px;padding:5px 7px;margin-top:9px}.island-node small{font-size:9px;color:var(--muted);margin-top:3px}.island-node em{font-style:normal;font-size:9px;color:var(--teal);font-weight:700}.island-node.current .island-shape{box-shadow:0 10px 0 rgba(28,100,78,.15),0 0 0 9px rgba(246,196,83,.42);animation:islandPulse 2s infinite}.island-node.done .island-shape:after{content:"✓";position:absolute;right:-8px;top:-10px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:white;border:3px solid white}.island-node.locked{filter:grayscale(.8);opacity:.66;cursor:not-allowed}.island-node.locked .island-shape:after{content:"🔒";position:absolute;inset:0;display:grid;place-items:center;background:rgba(33,56,62,.33);border-radius:inherit;font-size:28px}.boat{position:absolute;left:4%;top:62%;z-index:4;font-size:44px;text-align:center;transition:1s}.boat small{display:block;background:white;border-radius:8px;padding:2px 6px;font-size:9px}@keyframes islandPulse{50%{box-shadow:0 10px 0 rgba(28,100,78,.15),0 0 0 15px rgba(246,196,83,.2)}}.map-legend{display:flex;justify-content:center;gap:25px;margin-top:15px;font-size:10px;color:var(--muted)}.map-legend span{display:flex;align-items:center;gap:5px}.map-legend i{width:10px;height:10px;border-radius:50%}.status-current{background:var(--yellow)}.status-done{background:var(--green)}.status-locked{background:var(--locked)}
#island-view,#lesson-view{max-width:1280px;margin:auto;padding:28px clamp(18px,4vw,52px) 80px}.island-topline,.lesson-topline{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.back-button{border:0;background:#e6f1ef;color:var(--ink);border-radius:11px;padding:9px 13px;cursor:pointer;font-weight:700}.breadcrumb{font-size:10px;color:var(--muted)}.island-hero{border-radius:30px;padding:35px 42px;display:flex;align-items:center;justify-content:space-between;gap:25px;background:linear-gradient(120deg,var(--hero-soft,#e9f8f4),#fff);box-shadow:var(--shadow)}.island-hero h1{font:700 clamp(31px,4vw,47px) Fredoka,"Noto Sans SC";margin:5px 0}.island-hero>div>p:nth-of-type(2){color:var(--muted);max-width:660px}.island-hero>span{font-size:94px}.island-meter{height:8px;background:rgba(23,58,70,.09);border-radius:99px;overflow:hidden;max-width:520px;margin:18px 0 5px}.island-meter i{display:block;height:100%;width:0;background:var(--teal);transition:.4s}.island-hero small{color:var(--muted)}.island-layout{display:grid;grid-template-columns:300px 1fr;gap:22px;margin-top:22px}.island-layout>aside,.island-overview{background:white;border-radius:25px;padding:23px;box-shadow:0 10px 30px rgba(23,58,70,.07)}.island-layout h2{margin:0 0 5px;font-size:18px}.island-layout aside>p{font-size:10px;color:var(--muted);margin:0 0 17px}.unit-path{display:grid;gap:8px;max-height:580px;overflow:auto;padding-right:4px}.unit-button{border:1px solid var(--line);border-radius:14px;background:white;color:var(--ink);padding:11px;display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:9px;text-align:left;cursor:pointer}.unit-button>span{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:#eef4f3;font-size:11px;font-weight:700}.unit-button b,.unit-button small{display:block}.unit-button b{font-size:11px}.unit-button small{font-size:8px;color:var(--muted)}.unit-button em{font-style:normal;font-size:12px}.unit-button.current{border-color:var(--teal);background:#edf8f5}.unit-button.current>span{background:var(--teal);color:white}.unit-button.done{border-color:#9bd5aa}.unit-button.done>span{background:var(--green);color:white}.unit-button.locked{opacity:.48;cursor:not-allowed}.overview-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.overview-heading h2{font:700 26px Fredoka,"Noto Sans SC"}.primary-button,.secondary-button{border:0;border-radius:13px;padding:12px 18px;font-weight:700;cursor:pointer}.primary-button{background:var(--teal);color:white;box-shadow:0 5px 0 var(--teal-dark)}.secondary-button{background:#e8f0ef;color:var(--ink)}.unit-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:24px 0}.summary-card{border-radius:17px;background:#f5f9f8;padding:16px}.summary-card span{font-size:23px}.summary-card b,.summary-card small{display:block}.summary-card b{font-size:12px;margin:6px 0 2px}.summary-card small{font-size:9px;color:var(--muted)}.exam-card{border:2px dashed var(--line);border-radius:18px;padding:17px;display:flex;align-items:center;gap:13px}.exam-card>span{font-size:32px}.exam-card b,.exam-card small{display:block}.exam-card b{font-size:12px}.exam-card small{font-size:9px;color:var(--muted)}
.lesson-header{display:flex;justify-content:space-between;align-items:end;gap:20px}.lesson-header h1{font:700 clamp(29px,4vw,43px) Fredoka,"Noto Sans SC";margin:5px 0}.lesson-header>div>p:last-child{color:var(--muted);margin:0}.lesson-duration{background:white;border-radius:15px;padding:12px 15px;font-size:10px;box-shadow:0 8px 24px rgba(23,58,70,.07)}.lesson-steps{display:flex;align-items:center;justify-content:center;margin:26px 0 15px}.lesson-steps button{border:0;border-radius:11px;background:#e5eeee;color:#748787;padding:9px 13px;font-size:10px;font-weight:700;cursor:pointer}.lesson-steps button.active{background:var(--teal);color:white}.lesson-steps button.done{background:#bde7c8;color:#25643a}.lesson-steps i{width:min(5vw,50px);height:3px;background:#dbe7e5}.lesson-stage{min-height:500px;border-radius:28px;background:white;box-shadow:var(--shadow);padding:clamp(25px,5vw,55px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.lesson-stage h2{font:700 clamp(27px,4vw,40px) Fredoka,"Noto Sans SC";margin:8px}.lesson-stage>p{color:var(--muted);max-width:700px}.animation-board{width:min(720px,100%);min-height:270px;border-radius:23px;background:linear-gradient(145deg,#eaf8f4,#fff7e8);display:grid;place-items:center;padding:25px;margin:15px 0}.animation-symbols{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap}.animation-symbol{min-width:90px;min-height:90px;border-radius:24px;background:white;box-shadow:0 10px 25px rgba(23,58,70,.09);display:grid;place-items:center;font:700 42px Fredoka;padding:14px;transition:.3s}.animation-symbol.active{transform:translateY(-10px) scale(1.07);box-shadow:0 15px 30px rgba(11,114,133,.2)}.example-cards,.quiz-options{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;width:min(820px,100%);margin-top:20px}.example-card,.quiz-option{border:2px solid var(--line);border-radius:18px;background:white;color:var(--ink);padding:18px 10px;cursor:pointer}.example-card span{font-size:37px;display:block}.example-card b{display:block;font:600 20px Fredoka;margin:6px}.example-card small{font-size:9px;color:var(--muted)}.practice-area{width:min(720px,100%);background:#f3f8f7;border-radius:22px;padding:25px}.practice-choice{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:18px}.practice-choice button{border:2px solid var(--line);border-radius:13px;background:white;padding:11px 17px;cursor:pointer;font-weight:700}.correct{border-color:#64bd78!important;background:#eaf8ed!important}.wrong{border-color:#e87979!important;background:#fff0f0!important}.feedback{min-height:27px;color:var(--teal);font-size:11px;font-weight:700}.quiz-option{font-weight:700}.result-panel{width:min(760px,100%)}.result-score{width:140px;height:140px;border-radius:50%;margin:15px auto;display:grid;place-items:center;background:conic-gradient(var(--green) 100%,#e4eeee 0);position:relative}.result-score:after{content:"";position:absolute;width:110px;height:110px;border-radius:50%;background:white}.result-score b{position:relative;z-index:1;font:700 31px Fredoka}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;text-align:left}.result-grid div{background:#f3f8f7;border-radius:14px;padding:14px}.result-grid b,.result-grid small{display:block}.result-grid b{font-size:11px}.result-grid small{font-size:9px;color:var(--muted);margin-top:4px}.lesson-actions{display:flex;align-items:center;justify-content:center;gap:25px;margin-top:18px}.lesson-actions span{min-width:100px;text-align:center;font-size:10px;color:var(--muted)}.toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,20px);opacity:0;background:var(--ink);color:white;border-radius:99px;padding:11px 18px;font-size:11px;transition:.25s;z-index:50}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:850px){.map-intro{grid-template-columns:1fr}.journey-stat{justify-self:start}.island-layout{grid-template-columns:1fr}.unit-path{grid-template-columns:repeat(2,1fr);max-height:none}.unit-summary{grid-template-columns:1fr}.example-cards,.quiz-options{grid-template-columns:repeat(2,1fr)}.island-hero>span{font-size:65px}.lesson-steps{overflow:auto;justify-content:flex-start}.lesson-steps i{min-width:20px}.result-grid{grid-template-columns:1fr}}@media(max-width:520px){.brand small,.top-stats small{display:none}.top-stats{gap:10px}.topbar{padding:0 14px}.map-ocean{transform-origin:left top}.island-hero{padding:25px}.island-hero>span{display:none}.unit-path{grid-template-columns:1fr}.overview-heading{align-items:flex-start;flex-direction:column}.lesson-header{align-items:flex-start;flex-direction:column}.lesson-stage{padding:22px 14px}.lesson-actions{gap:8px}.example-cards,.quiz-options{grid-template-columns:1fr}}

/* Premium lesson experience */
#lesson-view{max-width:1220px;padding-top:22px;background:radial-gradient(circle at 90% 8%,rgba(246,196,83,.12),transparent 28%)}
.lesson-topline{margin-bottom:22px}.back-button{background:rgba(255,255,255,.82);border:1px solid rgba(22,50,75,.09);box-shadow:0 6px 20px rgba(23,58,70,.05);transition:.2s}.back-button:hover{transform:translateX(-2px);border-color:rgba(11,114,133,.35)}
.lesson-header{padding:0 6px}.lesson-header h1{letter-spacing:-.025em}.lesson-header>div>p:last-child{font-size:13px;line-height:1.7}.lesson-duration{font-size:12px;border:1px solid rgba(22,50,75,.07);box-shadow:0 10px 30px rgba(23,58,70,.07)}
.lesson-steps{margin:24px auto 18px;max-width:920px}.lesson-steps button{min-height:38px;padding:10px 16px;font-size:12px;border:1px solid transparent;transition:.22s}.lesson-steps button.active{box-shadow:0 8px 22px rgba(11,114,133,.2)}.lesson-steps button.done{background:#e6f6ea;border-color:#c9ead2}.lesson-steps i{height:2px}.lesson-steps i.done{background:#73c68a}
.lesson-stage{min-height:480px;padding:46px clamp(28px,5vw,64px);border:1px solid rgba(22,50,75,.07);box-shadow:0 24px 70px rgba(26,64,75,.1);overflow:hidden;position:relative}.lesson-stage:before{content:"";position:absolute;width:280px;height:280px;border-radius:50%;right:-150px;top:-170px;background:rgba(11,114,133,.055);pointer-events:none}.lesson-stage h2{letter-spacing:-.03em}.lesson-stage>p{font-size:13px;line-height:1.7}
.practice-area{width:min(760px,100%);padding:32px;border:1px solid rgba(11,114,133,.09);background:linear-gradient(145deg,#f1f8f6,#f8fbfa);box-shadow:inset 0 1px 0 #fff}.practice-area h3{font-size:20px;margin:0 0 22px}.practice-choice,.quiz-options{gap:14px;margin:0 auto 20px}.practice-choice button,.quiz-option{min-width:140px;padding:15px 22px;border-radius:15px;font-size:15px;box-shadow:0 5px 15px rgba(23,58,70,.05);transition:.18s}.practice-choice button:hover,.quiz-option:hover{transform:translateY(-2px);border-color:#9fc8c2}.correct{box-shadow:0 0 0 4px rgba(73,184,121,.13)!important}.wrong{box-shadow:0 0 0 4px rgba(232,121,121,.11)!important}.feedback{font-size:13px;line-height:1.6;padding-top:4px}.lesson-actions{position:sticky;bottom:0;z-index:5;width:max-content;margin:18px auto 0;padding:10px 14px;border:1px solid rgba(22,50,75,.08);border-radius:18px;background:rgba(243,250,248,.92);backdrop-filter:blur(16px);box-shadow:0 12px 30px rgba(23,58,70,.08)}.lesson-actions span{font-size:12px}.lesson-actions .primary-button,.lesson-actions .secondary-button{min-width:138px;padding:13px 21px}

/* Learning report */
.result-panel{width:min(990px,100%);text-align:left}.result-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;border-bottom:1px solid #e7efed;padding-bottom:20px}.result-heading h2{margin:5px 0 7px;text-align:left}.result-heading p:last-child{margin:0;color:var(--muted);font-size:12px}.mastery-badge{flex:none;padding:9px 14px;border-radius:99px;background:#e7f7ec;color:#27824a;font-size:12px;font-weight:700;border:1px solid #ccebd6}.result-dashboard{display:grid;grid-template-columns:minmax(390px,1.05fr) minmax(320px,.95fr);align-items:center;gap:34px;padding:24px 0 18px}.radar-wrap{position:relative;min-height:330px;display:grid;place-items:center}.result-radar{display:block;width:min(430px,100%);overflow:visible}.radar-grid polygon{fill:none;stroke:#dce8e6;stroke-width:1}.radar-grid line{stroke:#dce8e6;stroke-width:1}.radar-grid text{fill:#647d89;font-size:12px;font-weight:600}.radar-shape{fill:rgba(11,114,133,.18);stroke:#0b7285;stroke-width:3;stroke-linejoin:round}.result-radar>circle{fill:#fff;stroke:#0b7285;stroke-width:3}.radar-value{fill:#0b7285;font:700 11px Fredoka}.radar-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-48%);display:grid;text-align:center;pointer-events:none}.radar-center b{font:700 25px Fredoka;color:var(--ink)}.radar-center span{font-size:9px;color:var(--muted)}.result-insights{display:grid;gap:11px}.insight{padding:16px 18px;border-radius:16px;background:#f5f9f8;border:1px solid #e7efed}.insight.primary{background:linear-gradient(145deg,#eaf7f3,#f7fbfa);border-color:#d4ebe5}.insight span,.insight b,.insight small{display:block}.insight span{color:var(--teal);font-size:10px;font-weight:700;letter-spacing:.08em}.insight b{font-size:14px;line-height:1.55;margin-top:5px}.insight small{color:var(--muted);font-size:10px;line-height:1.6;margin-top:5px}.result-strip{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #e2ecea;border-radius:18px;overflow:hidden;background:#fbfdfc}.result-strip>div{padding:15px 20px}.result-strip>div+div{border-left:1px solid #e2ecea}.result-strip span,.result-strip b,.result-strip small{display:block}.result-strip span{font-size:10px;color:var(--muted)}.result-strip b{font:700 21px Fredoka,"Noto Sans SC";margin:3px 0}.result-strip small{font-size:9px;color:var(--muted)}

@media(max-width:850px){.result-dashboard{grid-template-columns:1fr;gap:8px}.radar-wrap{min-height:310px}.result-insights{grid-template-columns:1fr 1fr}.insight.primary{grid-column:1/-1}.lesson-stage{min-height:440px}.lesson-actions{position:static}.result-strip{grid-template-columns:1fr}.result-strip>div+div{border-left:0;border-top:1px solid #e2ecea}}
@media(max-width:520px){.lesson-steps button{min-width:max-content}.lesson-stage{padding:28px 16px;border-radius:22px}.practice-area{padding:23px 14px}.practice-choice button,.quiz-option{min-width:120px}.lesson-actions{width:100%;padding:8px;gap:6px}.lesson-actions .primary-button,.lesson-actions .secondary-button{min-width:0;flex:1;padding:12px 8px}.result-heading{display:block}.mastery-badge{display:inline-block;margin-top:12px}.result-insights{grid-template-columns:1fr}.insight.primary{grid-column:auto}.radar-wrap{min-height:280px}.result-strip>div{padding:13px 16px}}

/* Varied mastery checks */
.quiz-options{display:grid;grid-template-columns:repeat(var(--option-count,3),minmax(140px,210px));justify-content:center;width:100%;max-width:720px}
.question-type{display:inline-flex;align-items:center;padding:6px 11px;margin:2px 0 15px;border-radius:99px;background:#edf6f4;color:var(--teal);font-size:10px;font-weight:700;letter-spacing:.05em}
.quiz-area,.sequence-area{display:flex;flex-direction:column;align-items:center}
.listen-button{display:grid;grid-template-columns:46px 1fr;grid-template-rows:auto auto;align-items:center;text-align:left;column-gap:12px;margin:0 auto 22px;padding:12px 20px 12px 12px;border:1px solid #cfe5e1;border-radius:17px;background:#fff;color:var(--ink);box-shadow:0 10px 24px rgba(23,58,70,.07);cursor:pointer;transition:.2s}.listen-button:hover{transform:translateY(-2px);border-color:var(--teal)}.listen-button>span{grid-row:1/3;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--teal);color:#fff}.listen-button b{font-size:13px}.listen-button small{font-size:9px;color:var(--muted)}
.sequence-answer{min-height:76px;width:min(560px,100%);display:flex;align-items:center;justify-content:center;gap:9px;margin:2px 0 18px;padding:13px;border:2px dashed #bddbd5;border-radius:17px;background:#fff}.sequence-answer span{font-size:11px;color:var(--muted)}.sequence-answer b{min-width:48px;height:48px;padding:0 12px;border-radius:13px;background:#e8f6f3;display:grid;place-items:center;font:700 21px Fredoka}.sequence-answer i{font-style:normal;color:#88a19e}.sequence-bank{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.sequence-bank button{width:54px;height:54px;border:1px solid #cfe1de;border-radius:14px;background:#fff;color:var(--ink);font:700 21px Fredoka;box-shadow:0 5px 14px rgba(23,58,70,.06);cursor:pointer}.sequence-bank button:disabled{opacity:.25;transform:scale(.92)}.sequence-actions{display:flex;gap:10px;margin:18px 0 9px}.sequence-actions button{border:0;border-radius:12px;padding:10px 16px;font-weight:700;cursor:pointer}.sequence-actions button:first-child{background:#e6eeee;color:var(--ink)}.sequence-actions button:last-child{background:var(--teal);color:#fff}.check-complete{min-height:210px}
@media(max-width:520px){.quiz-options{grid-template-columns:1fr;width:100%}.quiz-option{width:100%}.listen-button{margin-bottom:17px}.sequence-answer b{min-width:42px;height:44px}}

/* Constructive sound practice */
.construct-area{display:flex;flex-direction:column;align-items:center;max-width:790px}.construct-area~*{position:relative}.sound-track{display:flex;align-items:center;justify-content:center;gap:14px;width:100%;min-height:112px;margin-bottom:16px}.sound-track>i{font-style:normal;color:#a8bbb8;font-size:20px;transition:.35s}.sound-chip{min-width:112px;padding:14px 19px;border:1px solid #d4e4e1;border-radius:18px;background:#fff;color:var(--ink);box-shadow:0 8px 22px rgba(23,58,70,.07);cursor:pointer;transition:.45s}.sound-chip small,.sound-chip b{display:block}.sound-chip small{font-size:9px;color:var(--muted);margin-bottom:4px}.sound-chip b{font:700 24px Fredoka}.sound-chip.heard{border-color:var(--teal);box-shadow:0 0 0 4px rgba(11,114,133,.1)}.sound-track.blended{gap:0}.sound-track.blended>i{width:0;opacity:0}.sound-track.blended .sound-chip{margin-left:-8px;border-color:#9ccfc5}.sound-track.segmented .sound-chip:first-child{opacity:.18;transform:translateY(-16px) rotate(-8deg)}.blend-button{border:0;border-radius:13px;padding:11px 18px;background:#e3f3ef;color:var(--teal-dark);font-weight:700;cursor:pointer}.construct-prompt{width:min(590px,100%);margin-top:23px;padding-top:21px;border-top:1px solid #dce8e6}.construct-prompt>span{display:block;margin-bottom:12px;font-size:13px;font-weight:700}.construct-prompt label{display:grid;grid-template-columns:1fr auto;gap:9px}.construct-prompt input{min-width:0;border:2px solid #d6e5e2;border-radius:14px;padding:13px 15px;background:#fff;color:var(--ink);font:700 18px Fredoka;outline:0}.construct-prompt input:focus{border-color:var(--teal);box-shadow:0 0 0 4px rgba(11,114,133,.09)}.construct-prompt button{border:0;border-radius:14px;padding:12px 18px;background:var(--teal);color:#fff;font-weight:700;cursor:pointer}.construct-prompt button:disabled{background:var(--green)}
@media(max-width:620px){.sound-track{gap:6px}.sound-chip{min-width:80px;padding:12px 8px}.sound-chip b{font-size:19px}.construct-prompt label{grid-template-columns:1fr}.construct-prompt button{width:100%}}