:root{--green:#234d40;--muted:#83887f;--paper:#f7f8f2;--line:#e3e7dc;--lime:#d6e8a6}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:#253c32;font:15px/1.7 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.5}a{color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #a3b96c;outline-offset:4px}.shell{max-width:1600px;margin:auto;display:grid;grid-template-columns:240px 1fr;min-height:100vh}aside{padding:40px 26px;border-right:1px solid var(--line);display:flex;flex-direction:column;background:#f0f3e9}.brand{text-decoration:none;font-size:27px;letter-spacing:4px;font-weight:700;display:flex;align-items:center;flex-wrap:wrap}.logo{display:inline-grid;place-items:center;background:var(--green);color:#e5edcc;border-radius:12px;width:42px;height:44px;margin-right:12px;font:36px Georgia}.latin{display:block;width:100%;margin:8px 0 0 54px;font-size:9px;letter-spacing:2px;color:var(--muted)}.aside-label{font-size:11px;color:var(--muted);margin:52px 15px 14px}nav{display:grid;gap:10px}nav button{border:0;background:transparent;text-align:left;padding:13px 18px;border-radius:9px;color:#69766b;display:flex;gap:15px;align-items:center}nav button.active{background:#e0e8d5;color:var(--green);font-weight:650}nav small{margin-left:auto}.aside-bottom{margin-top:auto;padding:60px 16px 0;color:#778371;font-size:13px}.plant{font-size:40px}.aside-bottom small{font-size:10px;letter-spacing:2px}main{padding:0 48px;min-width:0}header{height:96px;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted)}.avatar{width:34px;height:34px;border:1px solid #d8ddce;border-radius:50%;display:grid;place-items:center;color:var(--green)}h1{font-weight:650;font-size:34px;letter-spacing:1px;margin:6px 0 10px}h2{font-size:20px;margin:0}h3{font-size:17px;margin:0 0 8px}p{margin:8px 0 16px}.eyebrow{font-size:10px;letter-spacing:2px;color:#7a896e;font-weight:650}.muted{color:var(--muted);font-size:13px}.hero{display:grid;grid-template-columns:1.4fr 1fr;background:var(--green);color:#f8faed;border-radius:18px;overflow:hidden;margin:26px 0 30px;min-height:255px;position:relative}.hero-copy{padding:32px;z-index:1}.hero h2{font-size:28px;line-height:1.5;margin:13px 0}.hero p{color:#c0cfbf;font-size:13px}.tag{font-size:10px;letter-spacing:1px;display:inline-block;padding:4px 10px;border:1px solid #ffffff35;border-radius:5px}.primary{background:var(--lime);color:var(--green);padding:12px 24px;border:none;border-radius:7px;font-weight:600}.primary.dark{background:var(--green);color:white}.secondary{background:transparent;border:1px solid #cbd4c4;border-radius:7px;color:var(--green);padding:10px 18px}.art{position:relative;overflow:hidden;min-height:230px;background:radial-gradient(ellipse at center,#62816a55,transparent 70%)}.orbit{position:absolute;width:230px;height:230px;border:1px solid #99b49b38;border-radius:50%;top:15px;left:15px}.orbit:after{content:'';position:absolute;inset:25px;border:1px solid #99b49b38;border-radius:50%}.guitar{position:absolute;width:110px;height:142px;background:#c7d6a3;border-radius:48% 48% 43% 43%;transform:rotate(25deg);left:90px;top:115px;box-shadow:inset -12px -6px 0 #b7c795}.guitar:before{content:'';position:absolute;width:28px;height:160px;background:#b5c796;left:41px;top:-125px;border-radius:9px;border:4px solid #d0dcaf}.guitar:after{content:'';position:absolute;width:43px;height:43px;border:5px solid #9aae7b;border-radius:50%;background:var(--green);top:37px;left:33px}.strings{position:absolute;left:44px;top:-115px;width:23px;height:240px;background:repeating-linear-gradient(90deg,transparent 0 3px,#edf1cf 3px 4px);z-index:2}.note{position:absolute;right:30px;top:30px;color:#d9e8b5;font:42px Georgia}.grid{display:grid;grid-template-columns:1.9fr 1fr;gap:26px}.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:17px}.section-head small{color:var(--muted);font-size:11px}.lesson{width:100%;display:flex;align-items:center;text-align:left;gap:17px;padding:19px 18px;background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:12px;color:inherit}.lesson:hover{border-color:#97ab7d;transform:translateY(-1px)}.num{width:39px;height:43px;border-radius:9px;background:#edf2e4;color:#66814e;display:grid;place-items:center;font:20px Georgia;flex-shrink:0}.lesson:nth-child(even) .num{background:#f5eee1;color:#a18759}.lesson strong{font-size:14px;font-weight:600}.lesson small{display:block;color:var(--muted);font-size:11px;margin-top:3px}.arrow{margin-left:auto;color:#71816d}.panel{border:1px solid var(--line);background:#fff;border-radius:13px;padding:24px;margin-bottom:18px}.progress-ring{width:112px;height:112px;margin:22px auto;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--green) var(--progress),#edf1e6 0)}.ring-inner{border-radius:50%;width:94px;height:94px;background:#fff;text-align:center;display:flex;justify-content:center;flex-direction:column}.ring-inner b{font-size:28px;line-height:1.2}.ring-inner small{font-size:10px;color:var(--muted)}.split{display:flex;justify-content:space-between;gap:15px;font-size:12px}.bar{height:4px;background:#e9eedf;border-radius:3px;margin:8px 0 12px}.bar i{display:block;background:#829860;height:100%;border-radius:3px}.tip{background:#edf1e4;border:0;font-size:12px;color:#718068}.tip strong{color:#455b3e;font-size:13px}footer{font-size:10px;color:#93998d;display:flex;justify-content:space-between;margin:40px 0 24px}.back{border:none;background:none;color:#7b8871;padding:0;margin:8px 0 20px}.study{max-width:780px;margin:auto}.study .panel{padding:30px}.study p{line-height:1.95}.letters{display:flex;gap:8px;margin:25px 0;flex-wrap:wrap}.letter{border:1px solid #dbe3ce;background:#f0f4e8;border-radius:10px;flex:1;min-width:45px;text-align:center;padding:14px 4px;font:26px Georgia;color:var(--green)}.letter.selected{background:var(--green);color:white}.callout{background:#f0f3e8;border-left:3px solid #a1b47c;padding:15px 18px;border-radius:4px;font-size:14px;margin:20px 0}.actions{display:flex;justify-content:space-between;gap:15px;margin-top:25px;flex-wrap:wrap}.options{display:grid;gap:12px;margin:25px 0}.option{text-align:left;border:1px solid var(--line);border-radius:9px;background:white;padding:16px;color:var(--green)}.option.good{border-color:#588965;background:#eef6e8}.option.bad{border-color:#c59873;background:#fff5e9}.feedback{padding:18px;background:#eef3e5;border-radius:9px;margin:18px 0}details{border-top:1px solid var(--line);padding-top:15px;margin-top:25px;font-size:12px;color:#7d8874}summary{cursor:pointer}details a,.source a{color:#3e6b50;text-underline-offset:4px}.fretboard{background:#f2eee2;border:1px solid #ddd8c6;border-radius:10px;padding:15px;margin:22px 0}.string{display:flex;width:100%;align-items:center;gap:12px;border:0;background:none;color:#5a644c;padding:10px}.string i{height:var(--weight);flex:1;background:#a29374;position:relative}.string i:after{content:'';position:absolute;inset:-11px 0;background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 2px),#c8bfa7 calc(25% - 2px) 25%)}.string b{border-radius:50%;background:#fff;width:30px;height:30px;display:grid;place-items:center}.string.selected{background:#dde7ca;border-radius:8px}.source{margin:20px 0}.stage{padding:25px;border:1px solid var(--line);border-radius:12px;background:white;margin:14px 0}.stage small{color:var(--muted)}.empty{text-align:center;padding:45px 20px}.small-btn{border:0;background:transparent;color:#526d40;text-decoration:underline;font-size:12px}.toast{color:#9b6439;font-size:12px} @media(min-width:1400px){main{padding:0 70px}}@media(max-width:1000px){.shell{grid-template-columns:190px 1fr}aside{padding:30px 17px}main{padding:0 25px}.grid{grid-template-columns:1fr}.stats{display:grid;grid-template-columns:1fr 1fr;gap:15px}.hero-copy{padding:25px}.art{min-width:150px}.guitar{left:40px}}@media(max-width:650px){.shell{display:block}aside{padding:16px 20px;border-right:0;border-bottom:1px solid var(--line)}.brand{font-size:22px}.logo{width:32px;height:34px;font-size:28px}.latin{width:auto;margin:0 0 0 auto;font-size:8px}.aside-label,.aside-bottom{display:none}nav{display:flex;gap:3px;margin-top:18px;justify-content:space-between}nav button{padding:8px 9px;font-size:12px;gap:6px}nav small{display:none}main{padding:0 20px}header{height:62px;font-size:10px}h1{font-size:29px}.hero{grid-template-columns:1fr;margin:22px 0}.hero-copy{padding:25px}.hero h2{font-size:25px}.hero .art{position:absolute;width:140px;height:200px;right:-35px;bottom:-20px;opacity:.22}.hero-copy p{max-width:250px}.stats{display:block}.study .panel{padding:22px}.lesson{padding:16px 13px}.lesson strong{font-size:13px}footer{font-size:9px;gap:15px}.section-head h2{font-size:18px}}
.format-strip{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:-8px 0 28px;font-size:11px}.format-strip>span{color:var(--muted);margin-right:5px}.format-strip b{font-weight:500;background:#eaf0df;padding:5px 10px;border-radius:20px}.activity{margin:28px 0 12px;padding:24px;border:1px solid #d5dfc9;border-radius:14px;background:#f8faf3}.activity-heading{display:flex;gap:10px;align-items:center;margin-bottom:20px;flex-wrap:wrap}.activity-heading>span{font-size:10px;background:#e2eccf;padding:3px 8px;border-radius:4px}.activity-heading small{margin-left:auto;font-size:10px;color:var(--muted)}.activity p{font-size:14px}.flip-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:17px;background:var(--green);color:#f6f8ed;border:0;border-radius:15px;width:100%;min-height:210px;padding:28px;transition:background .2s}.flip-card .eyebrow{color:#bfd19e}.flip-card strong{font-size:21px;max-width:390px;line-height:1.7}.flip-card>span:last-child{font-size:12px;color:#d3dec5}.flip-card.flipped{background:#536b43}.order-slots{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;margin:20px 0}.order-slots span{border:1px dashed #9cad83;border-radius:8px;text-align:center;padding:15px 0;font:23px Georgia;background:white}.tile-bank{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin:20px 0}.note-tile{font:24px Georgia;width:51px;height:54px;background:#e5edda;border:1px solid #bfcea9;border-radius:9px;color:var(--green)}.activity-feedback{font-size:13px;color:#536e40;margin-top:18px;min-height:22px}.activity-success{font-size:21px;color:var(--green);padding:20px 0}.sound-pair{display:grid;grid-template-columns:1fr 1fr;gap:15px}.sound-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px 10px;background:white;border:1px solid var(--line);border-radius:12px;color:var(--green);overflow:hidden}.sound-card>span{display:grid;place-items:center;width:40px;height:40px;background:#e6eed7;border-radius:50%}.sound-card strong{font-size:19px}.sound-card small{color:var(--muted)}.wave{width:100%;height:30px;background:repeating-radial-gradient(ellipse at 50% 100%,transparent 0 8px,#a2b887 9px 10px,transparent 11px 18px);margin-top:10px}.wave.high{background-size:25% 100%}.wave.low{background-size:100% 100%}.find-board{background:#ede8d9;border-radius:10px;padding:14px}.find-board button{display:flex;align-items:center;gap:15px;width:100%;border:0;background:none;min-height:49px;color:var(--green)}.find-board button:hover{background:#dae4c7;border-radius:6px}.find-board small{width:28px;font-size:11px}.find-board i{flex:1;background:#94856c}.find-board span{font-size:10px;background:#fff9;padding:4px 8px;border-radius:20px}.match-target{display:flex;flex-direction:column;text-align:center;gap:10px;padding:25px;background:#e9efdc;border-radius:12px}.match-target strong{font-size:32px}.match-target small,.match-target span{font-size:12px;color:#758467}.scenario{display:flex;gap:15px;align-items:flex-start;background:#ede8de;border-radius:12px;padding:22px}.scenario .avatar{flex-shrink:0;background:white}.scenario p{margin:0;font-size:16px}@media(max-width:650px){.activity{padding:16px}.activity-heading small{width:100%;margin-left:0}.flip-card{padding:22px 15px}.flip-card strong{font-size:18px}.order-slots{gap:3px}.order-slots span{font-size:20px;padding:12px 0}.note-tile{width:42px;height:46px}.sound-pair{gap:9px}.activity .actions{gap:8px}.activity .actions button{font-size:12px;padding:10px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.checkin-banner{display:flex;align-items:center;justify-content:space-between;text-align:left;gap:20px;width:100%;background:#edf2e4;border:1px solid #dbe4cd;padding:17px 22px;border-radius:12px;color:var(--green);margin-top:22px}.checkin-banner small{display:block;color:#7c876f;font-size:11px;margin-top:3px}.checkin-banner>span:last-child{font-size:12px}.checkin-notice{background:#e9f1dc;padding:25px;border-radius:12px;max-width:780px;margin:20px auto}.checkin-notice p{font-size:13px}.calendar-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:26px 0}.calendar-stats>div{padding:22px;background:#eef2e7;border:1px solid #dee5d3;border-radius:12px}.calendar-stats strong{display:block;font:36px Georgia}.calendar-stats span{font-size:12px;color:#7a876d}.calendar-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:22px}.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}.weekdays{text-align:center;color:#929b87;font-size:12px;margin:20px 0 10px}.calendar-day{border:1px solid transparent;border-radius:10px;background:#f5f6f0;min-height:62px;color:#68765e;display:flex;flex-direction:column;justify-content:center;align-items:center}.calendar-day small{font-size:10px;color:#a1aa96}.calendar-day.checked{background:var(--green);color:white}.calendar-day.checked small{color:#d9e9be}.calendar-day.partial{background:#e1ebcc}.calendar-day.today{border-color:#8ea774}.calendar-day.selected{outline:2px solid #82995f;outline-offset:2px}.calendar-day:disabled{opacity:.35}.calendar-legend{display:flex;gap:20px;font-size:11px;color:#748261;margin-top:23px}.month-controls{display:flex;gap:5px;align-items:center}.month-controls .secondary{padding:2px 12px;font-size:23px}.calendar-detail h2{margin-top:8px}.calendar-detail p{color:#728362;font-size:13px}.day-lesson{display:flex;gap:12px;font-size:12px;padding:15px 0;border-top:1px solid var(--line);color:#919986}.day-lesson.done{color:var(--green)}.day-lesson small{display:block;font-size:10px;color:#939c88}.calendar-detail .primary{margin-top:15px;width:100%}@media(max-width:1000px){.calendar-layout{grid-template-columns:1fr}}@media(max-width:650px){nav{overflow-x:auto;justify-content:flex-start}nav button{flex-shrink:0;padding:8px;font-size:11px;gap:4px}.calendar-stats{gap:8px}.calendar-stats>div{padding:15px}.calendar-stats strong{font-size:29px}.calendar-stats span{font-size:10px}.calendar-grid{gap:5px}.calendar-day{min-height:50px}.calendar-layout .panel{padding:17px}.calendar-legend{gap:15px}.checkin-banner{padding:14px}.checkin-banner strong{font-size:13px}}
.checkin-banner.compact-week{padding:12px 18px;gap:18px}.week-summary{flex-shrink:0}.week-summary strong{font-size:13px}.week-days{display:flex;gap:13px;margin-left:auto}.week-day{display:flex;align-items:center;flex-direction:column;gap:3px}.week-dot{width:25px;height:25px;border-radius:50%;background:#e1e7d9;color:#a0ab94;display:grid;place-items:center;font-size:14px;line-height:1}.week-label{font-size:9px;color:#7f8b73;line-height:1.5}.week-day.checked .week-dot{background:var(--green);color:#edf5de}.week-day.partial .week-dot{background:#d8e7bb;color:#688345}.week-day.is-today .week-dot{outline:1px solid #8ba470;outline-offset:2px}.week-day.is-today .week-label{color:var(--green);font-weight:600}.checkin-banner .week-link{font-size:11px;white-space:nowrap;margin-left:4px}@media(max-width:650px){.checkin-banner.compact-week{display:grid;grid-template-columns:1fr auto;gap:10px;padding:12px 15px}.week-summary{display:flex;align-items:baseline;gap:12px}.checkin-banner .week-summary small{font-size:10px;margin:0}.week-days{grid-column:1 / -1;grid-row:2;justify-content:space-between;margin:0;gap:8px}.checkin-banner .week-link{grid-column:2;grid-row:1;font-size:10px}.week-dot{width:23px;height:23px}.week-label{font-size:9px}}
.auth-pending .shell{display:none}.auth-gate{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse at 20% 20%,#e0e9cc,transparent 60%),var(--paper)}.auth-gate[hidden]{display:none}.auth-card{width:min(100%,480px);background:#fff;padding:40px;border:1px solid var(--line);border-radius:20px;box-shadow:0 15px 60px #234d400a}.auth-card .eyebrow{margin-top:25px}.auth-card h1{font-size:27px;margin-top:12px}.auth-card form{display:grid;gap:12px;margin:25px 0}.auth-card label{font-size:13px}.auth-card input{width:100%;min-height:48px;border:1px solid #cbd5be;border-radius:8px;padding:12px;font:inherit;background:#fafbf7}.auth-card input:focus{outline:2px solid #9bb77d}.auth-card .toast{min-height:24px;margin:0}.auth-card>small{font-size:11px}@media(max-width:650px){.auth-card{padding:28px}.auth-card h1{font-size:24px}}