:root{--teal:#6c42dc;--coral:#f36955;--line:#e3dbf5;color:#2c2153;background:#f3efff;font-family:Segoe UI,Arial,sans-serif}body{background:radial-gradient(ellipse at 5% 10%,#e3f9fc 0,transparent 42%),radial-gradient(ellipse at 95% 20%,#fff0d9 0,transparent 35%),#f3efff}header{background:#ffffffed;border-bottom:2px solid #e9e1fa;height:82px}.brand{color:#6241ce}.brand b{letter-spacing:2px}.edition{color:#71648d}.layout{gap:28px;padding:30px 4%;grid-template-columns:265px minmax(0,1fr);max-width:1380px}aside{background:#fff9;border:2px solid white;border-radius:28px;padding:22px 15px;align-self:start}aside h2{font-size:29px;color:#3d286d}.eyebrow{color:#986138}.muted,.save-note{color:#766a8b}nav{margin-top:20px;gap:10px}nav button{border:2px solid #eee8fa;background:#fff;color:#544772;border-radius:18px;gap:8px;position:relative;padding:10px 8px;font-size:13px}nav button.active{border-color:#9367ea;background:#f0e8ff;color:#5632b4;box-shadow:0 4px 0 #d9c9f5}nav .num{position:absolute;top:-5px;left:-3px;background:#fff;border:2px solid #e3d8f4;width:23px;height:23px;font-size:11px}.chapter-icon{width:52px;height:46px;object-fit:contain;flex-shrink:0}.done{color:#745d9e}.save-note{font-size:11px;margin:22px 4px 8px}article{border:2px solid #fff;border-radius:30px;padding:26px;box-shadow:0 9px 0 #e3d9f3,0 16px 35px #6241ce0c;background:#fff}h1{color:#352257;font-weight:750;font-size:clamp(26px,3vw,35px)}.pill{background:#fff0ce;color:#85561c;font-weight:750;font-size:11px}.learning-goal{background:#f1ecff;border-left:5px solid #9769f0;padding:12px 16px;border-radius:15px;margin:14px 0 18px}.learning-goal span{color:#7352b6;font-size:10px;font-weight:800;letter-spacing:1px}.learning-goal p{margin:6px 0 0;color:#3f2b68;font-size:17px;font-weight:650;line-height:1.4}.scene{background:none;display:block;min-height:0}.picture-world{position:relative;min-height:280px;background:radial-gradient(ellipse at 50% 55%,#fff 0,#fff 35%,transparent 36%),linear-gradient(130deg,#e1f8fc,#eee5ff 60%,#fff2d7);border:2px solid #f0e9fc;border-radius:24px;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:24px 12px 70px}.lesson-art{width:100%;height:265px;object-fit:contain;filter:drop-shadow(0 12px 10px #60428c14);transition:transform .4s}.experiment-on .lesson-art{transform:translateY(-5px) scale(1.025)}.picture-tag{position:absolute;top:15px;left:15px;background:white;color:#7652b0;padding:7px 10px;border-radius:10px;font-size:10px;font-weight:800;box-shadow:0 3px 0 #dacbea}.picture-caption{position:absolute;bottom:13px;left:14px;right:14px;border-radius:14px;background:#fffef5f2;color:#45335b;text-align:center;padding:12px;font-size:16px;font-weight:650;line-height:1.35}.scene-caption{margin:9px 3px 12px;color:#817491;font-size:11px}.try-panel{display:flex;gap:12px;justify-content:space-between;align-items:center;padding:14px;background:#fff7e1;border:1px solid #f5e3b8;border-radius:16px}.try-panel b{font-size:13px;color:#795626}.try-panel p{margin:5px 0 0;font-size:13px;line-height:1.45;color:#68573d}.hint-button{white-space:nowrap;background:#ffcd65;color:#664311;box-shadow:0 3px 0 #e4ad41;font-size:13px;padding:10px 12px;flex-shrink:0}button{border-radius:14px;box-shadow:0 4px 0 #4a2cac;font-weight:700;transition:transform .15s,filter .15s}button:hover{filter:brightness(1.04);transform:translateY(-1px)}button:active{transform:translateY(2px);box-shadow:0 1px 0 #4a2cac}button:disabled{box-shadow:none;transform:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #fc9b36;outline-offset:3px}.secondary{background:#eee7fb;color:#6b47ae;box-shadow:0 3px 0 #d7c9ef}.text-button{box-shadow:none}.beats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0 12px}.beats [data-beat]{font-size:14px;min-height:49px;background:#f1edfc;color:#6c519a;box-shadow:0 3px 0 #ded3f3;padding:10px}.beats [data-beat].active{background:#7c4ee1;color:white;box-shadow:0 4px 0 #5732ab}.beats #play,.beats #speak{box-shadow:none;font-size:11px;background:transparent;color:#837293;padding:5px;min-height:32px}.beats #play{grid-column:span 2}.explanation-card{border-radius:20px;padding:18px 20px;background:#edf9f8;border:1px solid #d3efeb}.explanation-title{color:#1c8076;font-size:13px;font-weight:800}.short-explain{color:#403851;font-size:17px;line-height:1.6}.explanation-card p{margin:8px 0 0}.check{border:2px solid #ebe3fc;background:#fcfaff;border-radius:22px;padding:20px;margin-top:22px}.check-label{display:block;color:#976127;font-size:11px;font-weight:800;letter-spacing:.7px;margin-bottom:10px}.check h3{font-size:21px;color:#50317f;margin:0}.check>p{font-size:16px;font-weight:600;line-height:1.5}.options{gap:12px}.option{background:white;border:2px solid #e7ddf5;color:#493360;box-shadow:0 3px 0 #e3d7f4;font-size:15px;padding:14px 16px}.feedback:empty{display:none}.feedback{background:#dcf6e9;color:#205f49;font-size:15px;border:1px solid #b9e8d1}.feedback.error{background:#fff0d6;color:#785220;border-color:#f3d39a}.hint{background:#fff2c7;color:#77551d;padding:16px;font-size:14px;line-height:1.6}.hint[hidden]{display:none}.mini-experiment{border-radius:18px;padding:16px;margin-bottom:12px;background:#f0eaff;border:2px solid #e0d3fb}.experiment-label{font-size:10px;letter-spacing:.8px;color:#8259bf;font-weight:800}.mini-experiment p{font-size:17px;line-height:1.45;color:#503475;font-weight:600}.mini-experiment button{background:#fa805c;box-shadow:0 4px 0 #cd5638;width:100%;font-size:16px}.guide{background:#fff9;border-radius:17px;padding:12px;color:#756384}.avatar{background:#ffefc7;border-radius:14px;font-size:24px}.lesson-footer{padding:5px 0 12px}.lesson-footer #next{background:#7a4bd9;min-width:140px}.route-top{color:#7a6999;font-size:11px}.progress-bar{height:8px;background:#e3daf5;margin-bottom:20px}.progress-bar span{background:linear-gradient(90deg,#a681ee,#734ad1)}.explain-detail{background:#f5f1fd;color:#69577e}.explain-detail small{font-size:10px;overflow-wrap:anywhere}.practice-hero{display:flex;align-items:center;gap:18px;background:#ebf7fc;border-radius:20px;padding:12px;margin-bottom:20px}.practice-art{width:155px;height:120px;object-fit:contain;flex-shrink:0}.practice-hero p{font-size:16px;line-height:1.45;font-weight:600;margin:0}.exercise-head{align-items:flex-start}.exercise-head label{font-size:13px;padding-top:12px;color:#6c5782}.answer-row input,.answer-row select{border:2px solid #dfd2f6}.answer-row button{background:#7a4bd9}.badges{margin:20px 0}.badge{background:#fff0c9;color:#845719;border:1px solid #f2d898;font-weight:650}.summary-art{display:block;margin:0 auto;width:230px;max-width:100%;height:170px;object-fit:contain}.summary-grid{gap:10px}.summary-grid button{background:#f2edfc}.screen-status{color:#8b7a9e}.about{color:#7b6a8b}header button{box-shadow:none;background:#eee8fa;color:#7959a9}#menu-toggle{background:#f1eaff}.warning{color:#795522}select,input[type=text]{color:#45365e;border-color:#ded4ed}
@media(max-width:1000px){.layout{grid-template-columns:220px minmax(0,1fr);gap:18px;padding:24px 2%}aside{padding:18px 10px}article{padding:22px}.chapter-icon{width:42px}.picture-caption{font-size:15px}.learning-goal p{font-size:16px}}
@media(max-width:700px){header{height:auto;min-height:72px;padding:12px 16px}.layout{display:block;padding:14px 12px}aside{padding:10px 12px;border-radius:20px;margin-bottom:16px}aside h2,aside>.muted,aside>.eyebrow{display:none}aside .save-note,aside .about{display:none}#menu-toggle{margin:0;box-shadow:none}aside.menu-open .save-note,aside.menu-open .about{display:block}aside nav{margin:12px 0 0}.chapter-icon{width:48px}article{padding:18px 14px;border-radius:24px}h1{font-size:27px}.learning-goal{padding:11px 13px;margin-bottom:14px}.learning-goal p{font-size:16px}.picture-world{min-height:255px;padding:20px 5px 70px}.lesson-art{height:210px}.picture-caption{font-size:14px;padding:10px}.try-panel{align-items:flex-start;padding:12px;gap:8px}.try-panel p{font-size:12px}.hint-button{font-size:11px;padding:8px}.beats [data-beat]{font-size:12px;padding:10px 5px}.explanation-card{padding:15px}.short-explain{font-size:16px}.check{padding:16px}.check h3{font-size:20px}.option{font-size:14px}.practice-art{width:90px;height:100px}.practice-hero{gap:10px;padding:10px}.practice-hero p{font-size:14px}.route-top>span:last-child{display:none}.mini-experiment p{font-size:15px}.lesson-footer #next{min-width:120px}.lesson-footer{margin-top:17px}.scene-caption{font-size:10px}.guide{font-size:12px}}
@media(prefers-reduced-motion:reduce){button,.lesson-art{transition:none!important;transform:none!important}}
.art-key{position:absolute;top:48px;left:15px;right:15px;display:flex;justify-content:space-around;gap:8px;flex-wrap:wrap}.art-key span{background:#ffffffed;border:1px solid #e4d7f8;color:#725199;font-size:11px;font-weight:750;padding:6px 10px;border-radius:9px}.connected-instruments{width:100%;display:flex;position:relative;gap:60px;justify-content:center}.connected-instruments img{width:36%;height:250px}.connection{position:absolute;left:18%;right:18%;top:6%;text-align:center;border-top:5px solid #e8ba4f;padding-top:5px;color:#785727;font-size:12px;font-weight:700;background:#ffffffe0;border-radius:9px}.connection.insulator{border-color:#81d2e6;color:#346977}.particle-cards,.solution-path{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.particle-cards span,.solution-path span{flex:1;min-width:110px;padding:12px;background:#f1eaff;border-radius:12px;color:#644391;font-size:12px;line-height:1.5}.particle-cards b{display:block}.solution-path span{min-width:150px;font-size:14px}@media(max-width:700px){.art-key span{font-size:9px;padding:5px 7px}.art-key{top:47px;gap:4px}.connected-instruments{gap:20px}.connected-instruments img{height:190px;width:40%}.connection{font-size:10px;left:9%;right:9%;top:5%}}