:root{--purple:#6954db;--ink:#292638;--muted:#827f92;--line:#e9e6ef;--cream:#faf9f6}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font:15px/1.65 system-ui,-apple-system,'PingFang SC',sans-serif}button,input,textarea{font:inherit}button,a{ -webkit-tap-highlight-color:transparent}button{cursor:pointer;border:0;background:none;color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #b4a5ff;outline-offset:4px}aside{position:fixed;inset:0 auto 0 0;width:232px;background:white;border-right:1px solid var(--line);padding:35px 24px;display:flex;flex-direction:column}.logo{display:flex;gap:12px;text-decoration:none;color:var(--purple);font-size:34px;font-weight:900}.logo span{font-size:25px;color:var(--ink)}small{display:block;font-size:11px;letter-spacing:2px;color:var(--muted);font-weight:500}nav{display:grid;gap:12px;margin-top:55px}nav button{text-align:left;padding:15px 19px;border-radius:13px;font-weight:650;color:var(--muted)}nav button.active{background:#eeebff;color:var(--purple)}.aside-bottom{margin-top:auto;color:var(--muted);font-size:12px}.aside-bottom button{text-align:left;padding:0;font-size:12px;color:var(--purple)}.shell{margin-left:232px}header{height:82px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 48px;font-size:13px;color:var(--muted)}header div{display:flex;align-items:center;gap:24px}header b{color:#cf9530}.avatar{background:#eee9e0;border-radius:50%;width:34px;height:34px;text-align:center;line-height:34px;color:#7d715e}main{max-width:1260px;margin:auto;padding:38px 48px 60px}h1{font-size:38px;line-height:1.35;letter-spacing:-1px;margin:10px 0 16px}h2{font-size:23px;margin:0}h3{margin:5px 0 10px;font-size:18px}p{margin:10px 0}.muted{color:var(--muted)}.eyebrow{font-size:12px;color:var(--purple);font-weight:750;letter-spacing:2px}.hero{display:grid;grid-template-columns:1.3fr 1fr;min-height:285px;padding:34px 38px;background:#eeebfb;border-radius:24px;overflow:hidden}.hero p{max-width:470px;color:#6a647d}.primary{background:var(--purple);color:white;border-radius:12px;padding:13px 23px;box-shadow:0 4px 0 #4f3dad;font-weight:700}.secondary{border:1px solid var(--line);background:white;border-radius:12px;padding:12px 20px;font-weight:650}.hero-art{position:relative;display:flex;justify-content:center;align-items:center;min-height:220px}.orbit{width:210px;height:210px;border:1px dashed #b8abe7;border-radius:50%;display:grid;place-items:center;transform:rotate(-12deg)}.orb{height:130px;width:130px;border-radius:34px;background:var(--purple);box-shadow:12px 15px 0 #cec5ee;display:grid;place-items:center;font-size:70px;color:#fff;transform:rotate(12deg)}.float{position:absolute;background:white;border:1px solid #e2daf5;padding:12px 18px;border-radius:12px;box-shadow:0 8px 24px #6854db0d;font-weight:600}.float.a{top:15px;right:0;transform:rotate(8deg)}.float.b{bottom:5px;left:5px;transform:rotate(-6deg)}.stats{display:flex;gap:24px;margin:24px 0 35px;padding:17px 0;border-bottom:1px solid var(--line)}.stats strong{font-size:20px;margin-right:6px}.stats span{font-size:12px;color:var(--muted)}.section-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:26px 0 18px}.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}.tabs button{padding:8px 19px;background:white;border:1px solid var(--line);border-radius:24px;color:#766f88}.tabs button.selected{background:var(--ink);color:white;border-color:var(--ink)}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{background:white;border:1px solid var(--line);border-radius:18px;padding:23px;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}.card:hover{transform:translateY(-3px);box-shadow:0 12px 28px #28263808}.card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px}.icon{display:grid;place-items:center;height:48px;width:48px;border-radius:14px;background:#eeebff;color:var(--purple);font-size:25px}.tag,.pill{background:#f2f0f6;border-radius:6px;padding:3px 8px;font-size:11px;color:#81758c}.card p{font-size:13px;color:var(--muted);flex:1}.card button{text-align:left;color:var(--purple);padding:14px 0 0;border-top:1px solid var(--line);font-weight:700;margin-top:15px}.search{background:white;border:1px solid var(--line);padding:10px 14px;border-radius:10px;width:220px;max-width:100%}.journey-layout{display:grid;grid-template-columns:1fr 280px;gap:28px}.journey-head{background:var(--purple);color:white;padding:27px;border-radius:18px}.journey-head p{color:#e0d9ff}.unit{border:1px solid var(--line);background:white;border-radius:18px;margin-top:20px;padding:24px}.unit-label{font-size:12px;color:var(--purple);font-weight:700}.path{display:flex;flex-direction:column;align-items:center;padding:20px 0}.node{position:relative;width:76px;height:68px;background:#efedf4;color:#a09aac;border-radius:50%;border-bottom:6px solid #d9d5e3;font-size:27px;margin:10px;transform:translateX(var(--offset))}.node:after{content:'';position:absolute;left:35px;top:69px;width:2px;height:20px;background:#e1dce9}.node:last-child:after{display:none}.node.ready{background:#7965e7;color:white;border-color:#5942c4}.node.done{background:#8aba83;color:white;border-color:#679760}.node-label{font-size:12px;text-align:center;color:var(--muted);transform:translateX(var(--offset));max-width:210px}.sticky{position:sticky;top:25px;align-self:start}.progress{height:8px;background:#eeeaf5;border-radius:10px;overflow:hidden;margin:14px 0}.progress i{display:block;height:100%;background:var(--purple)}.notice{font-size:12px;color:#8c7f60;background:#f7f1e6;padding:13px;border-radius:10px}.work textarea,textarea{width:100%;border:1px solid #ded8e9;border-radius:12px;min-height:160px;padding:14px;background:#fff;resize:vertical}.work{margin:18px 0}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.rank-row{padding:18px 10px;border-top:1px solid var(--line);display:flex;align-items:center;gap:18px}.rank-row b:last-child{margin-left:auto;color:var(--purple)}dialog{border:0;border-radius:24px;width:min(720px,94vw);padding:0;max-height:92dvh;color:var(--ink);box-shadow:0 25px 100px #29263835}dialog::backdrop{background:#28233b88;backdrop-filter:blur(4px)}.lesson-top{display:flex;align-items:center;gap:18px;padding:22px 28px;border-bottom:1px solid var(--line)}.lesson-top .progress{flex:1}.lesson-content{padding:28px 34px}.lesson-content h2{font-size:28px;margin-bottom:18px}.example{border-left:3px solid var(--purple);padding:13px 20px;background:#f4f1fc;border-radius:0 12px 12px 0;margin:18px 0}.bad{color:#9f7e76;background:#faf2ee;border-color:#d7aca0}.options{display:grid;gap:12px;margin:25px 0}.option{padding:16px;border:2px solid var(--line);border-radius:12px;text-align:left}.option.chosen{border-color:var(--purple);background:#f2efff}.feedback{padding:15px;background:#edf5eb;border-radius:12px;margin:15px 0}.feedback.wrong{background:#fff1e9}.difficulty button{font-size:12px;padding:7px 10px;border:1px solid var(--line);border-radius:8px}.lesson-actions{padding:20px 34px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:15px}.check{display:block;padding:10px;background:#f6f4fa;border-radius:8px;margin:8px 0}footer{padding:20px 48px;font-size:11px;color:var(--muted);border-top:1px solid var(--line)}footer span{float:right}#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:var(--ink);color:white;padding:12px 20px;border-radius:10px;z-index:10;display:none}.empty{padding:60px;text-align:center}.complete-icon{font-size:60px;text-align:center;color:var(--purple)}@media(max-width:1100px){.grid{grid-template-columns:repeat(2,1fr)}aside{width:190px;padding:28px 18px}.shell{margin-left:190px}main{padding:28px}.journey-layout{grid-template-columns:1fr}.sticky{position:static}.hero{padding:28px}header{padding:0 28px}}@media(max-width:700px){aside{inset:auto 0 0;width:100%;height:70px;padding:0;z-index:5;border-top:1px solid var(--line)}.logo,.aside-bottom{display:none}nav{display:flex;margin:0;justify-content:space-around;gap:0;height:100%;align-items:center}nav button{font-size:12px;padding:12px 9px}.shell{margin:0;padding-bottom:70px}header{height:64px;padding:0 20px;font-size:11px}header div{gap:12px}main{padding:23px 18px 35px}.hero{grid-template-columns:1fr;padding:25px}.hero-art{display:none}h1{font-size:30px}.stats{gap:16px;flex-wrap:wrap}.grid{grid-template-columns:1fr}.section-head{align-items:start;flex-direction:column}.search{width:100%}.tabs{gap:6px}.tabs button{padding:7px 13px}.lesson-content{padding:23px}.lesson-actions{padding:20px 23px}.lesson-top{padding:16px 20px}footer{padding:18px}footer span{float:none;display:block}.empty{padding:35px 10px}}
summary{cursor:pointer;list-style:none}summary::-webkit-details-marker{display:none}.skill-group{width:100%;padding:20px 0;border-bottom:1px dashed var(--line)}.skill-name{text-align:center;font-weight:650;font-size:14px}.node:after{display:none}.node-label{min-width:90px}.path{gap:18px}.reading-section{margin:24px 0}.reading-section p{line-height:1.95;color:#514b61}.analysis-item{padding:15px 18px;border:1px solid var(--line);border-radius:12px;margin:12px 0}.analysis-item.highlight{background:#f2eeff;border-color:#c4b9ef}.analysis-item p{font-size:14px;line-height:1.9}.analysis-item a{color:var(--purple);text-decoration:none}.field-label{display:block;font-weight:650;margin:20px 0}.field-label textarea{display:block;margin-top:9px;font-weight:400;min-height:120px}.rubric-item{padding:15px;background:#f8f6fb;border-radius:12px;margin:12px 0}.rubric-item p{font-size:13px;color:var(--muted)}select{background:white;border:1px solid #ded8e9;border-radius:8px;padding:10px;max-width:100%;font:inherit;color:var(--ink)}.visual-lab{background:#f4f1f9;border-radius:16px;padding:20px;margin:22px 0}.shot-panels{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.shot-panels figure{margin:0;background:white;border-radius:10px;overflow:hidden}.shot-panels svg{width:100%;height:150px;background:#dadff0}.shot-panels figcaption{font-size:11px;padding:8px}.visual-lab>svg{width:100%;height:170px}.story-editor{border:1px solid var(--line);border-radius:14px;padding:16px;margin:22px 0}.shot-row{display:grid;grid-template-columns:44px 80px 1fr 65px;gap:8px;background:#f6f4fa;border-radius:8px;padding:10px;margin:10px 0}.shot-row input{min-width:0;border:1px solid var(--line);border-radius:7px;padding:8px}.shot-row input[data-part=sound]{grid-column:2/4}.shot-row button{padding:4px}.lesson-content ol{padding-left:25px}.lesson-content li{margin:12px 0;line-height:1.85}.lesson-content{line-height:1.85}button:disabled{cursor:default;opacity:.45}.course-metric{display:flex;justify-content:space-between;gap:20px}details>summary:focus-visible{outline:3px solid #b4a5ff}input[type=checkbox]{accent-color:var(--purple)}@media(max-width:700px){.shot-panels{grid-template-columns:1fr}.shot-panels svg{height:180px}.shot-row{grid-template-columns:35px 70px 1fr}.shot-row input[data-part=duration]{grid-column:2}.shot-row input[data-part=sound]{grid-column:2/4}.node{width:64px;height:57px;margin:5px}.node-label{min-width:78px;font-size:11px}.lesson-actions .primary{padding:11px 14px;font-size:13px}}
/* Focused launch and instructional illustrations */
.focused-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.card-cover{margin:-10px -10px 20px;border-radius:12px;overflow:hidden}.card-cover svg,.tutorial-figure svg,.hero-art svg{display:block;width:100%;height:auto}.hero-art{padding:12px;min-width:0}.hero-art svg{filter:drop-shadow(0 10px 10px #6854db12)}.stats{flex-wrap:wrap}.study-banner{background:#ede8fa;border-radius:16px;padding:20px;display:flex;align-items:center;justify-content:space-between;gap:18px}.study-banner p{font-size:13px;color:#6d6482}.daily-row{border:1px solid var(--line);border-radius:12px;margin:12px 0;padding:16px}.daily-row summary{display:flex;gap:16px;cursor:pointer;align-items:center;list-style:none}.daily-row summary>b{color:var(--purple);font-size:14px;flex-shrink:0}.daily-row small{letter-spacing:0;margin-top:4px}.daily-row ul{padding-left:22px}.daily-row li{margin-bottom:8px}.text-button{color:var(--purple);font-weight:700;padding:4px}.tutorial-figure{margin:22px 0;background:#f6f3fd;border:1px solid #e5deee;border-radius:16px;overflow:hidden;padding:14px}.tutorial-figure figcaption{font-size:12px;color:#736782;margin:12px 0}.tutorial-figure .secondary{padding:6px 16px}.reading-intro{font-size:16px;line-height:1.95}.walkthrough li{padding-left:4px;margin-bottom:16px}.before-after{display:grid;grid-template-columns:1fr 1fr;gap:12px}.before-after section{padding:20px;border:1px solid #ece7f1;border-radius:12px;background:#f8f5fb}.before-after section:last-child{background:#f1f6ed;border-color:#dce7d5}.resource-inline{margin:22px 0;padding:16px;border:1px solid #e4deec;border-radius:12px}.resource-inline summary{cursor:pointer;color:var(--purple);font-weight:650}.analysis-item a{color:var(--purple);text-decoration:none}.analysis-item a:hover{text-decoration:underline}.analysis-item small{letter-spacing:0;line-height:1.7}.homework-review{border-top:1px solid var(--line);margin-top:25px;padding-top:22px}.homework-review>p{font-size:13px;color:var(--muted)}.feedback small{letter-spacing:0}.practice-assets{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}.practice-assets a{color:var(--purple);font-size:12px;text-decoration:none}.practice-assets img{display:block;width:100%;border-radius:10px}.practice-assets span{display:block;padding-top:5px}.lesson-content p{overflow-wrap:anywhere}.lesson-content .example{white-space:pre-wrap}.grid .card small{letter-spacing:0}.lesson-content .analysis-item{line-height:1.8}
@media(max-width:760px){.focused-grid,.before-after{grid-template-columns:1fr}.study-banner{align-items:flex-start;flex-direction:column}.practice-assets{grid-template-columns:repeat(2,1fr)}.daily-row summary{align-items:flex-start}.hero-art{display:none}.study-banner .primary{width:100%}.lesson-content{padding:24px 20px}.tutorial-figure{padding:5px}.lesson-actions{gap:10px}.lesson-actions button{font-size:13px;padding:12px 16px}}