:root{color-scheme:dark;--bg:#090e22;--panel:#121b35;--text:#f3f4ff;--muted:#a2adc9;--line:rgba(193,205,255,.14);--accent:#b8a6ff;font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif}
*{box-sizing:border-box}body{margin:0;color:var(--text);min-height:100vh;background:radial-gradient(ellipse at 80% 0,rgba(79,48,134,.25),transparent 49%),radial-gradient(ellipse at 0 50%,rgba(25,68,118,.22),transparent 50%),var(--bg)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.3;background-image:radial-gradient(circle,#b8c5ef 1px,transparent 1.5px),radial-gradient(circle,#9cabe0 .8px,transparent 1.3px);background-size:137px 149px,211px 239px;background-position:19px 25px,90px 60px;z-index:-1}
a{color:inherit;text-decoration:none}button,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a:focus-visible,button:focus-visible,select:focus-visible{outline:3px solid #c9bbff;outline-offset:5px}
.site-shell{width:min(1060px,calc(100% - 48px));margin:auto}.site-header{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:31px 0;border-bottom:1px solid var(--line)}.brand{display:inline-flex;align-items:center;gap:12px;font-size:16px;font-weight:700;letter-spacing:.03em}.brand-icon{width:37px;height:37px;border-radius:12px;background:linear-gradient(135deg,#b3a0ff,#8caeea);color:#18233b;display:grid;place-items:center}.brand-icon svg{width:23px;height:23px}.brand small{font-size:12px;font-weight:400;color:var(--muted);letter-spacing:.16em;margin-left:9px}.header-link{color:var(--muted);font-size:13px;transition:color .2s}.header-link:hover{color:var(--text)}
.hero{padding:65px 0 34px}.eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:#bcaff1;margin:0 0 16px;display:flex;gap:10px;align-items:center}.eyebrow::before{content:"";width:22px;height:1px;background:#b8a6ff}.hero h1{font-size:clamp(28px,5vw,43px);font-weight:650;letter-spacing:-.025em;line-height:1.35;margin:0 0 14px}.hero h1 span{color:#c1b4ff}.hero p{color:var(--muted);font-size:15px;line-height:1.9;margin:0}
.lesson-bar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0 23px}.lesson-picker{display:flex;align-items:center;gap:13px}.lesson-picker label{font-size:13px;color:var(--muted)}.lesson-picker select{border:1px solid var(--line);border-radius:10px;background:#151d35;color:var(--text);font-size:14px;font-weight:600;padding:10px 34px 10px 14px;cursor:pointer}.lesson-status{color:#8e9aba;font-size:12px;display:flex;align-items:center;gap:7px}.lesson-status::before{content:"";width:5px;height:5px;background:#a899e2;border-radius:50%}
.module-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.module-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-height:214px;padding:28px 30px;border:1px solid var(--line);background:linear-gradient(130deg,rgba(25,34,62,.8),rgba(16,24,46,.84));border-radius:19px;overflow:hidden;transition:transform .2s,border-color .2s,background .2s}.module-card::after{content:"";width:180px;height:180px;position:absolute;right:-70px;top:-70px;background:radial-gradient(circle,var(--glow,rgba(139,118,226,.1)),transparent 68%);pointer-events:none}.module-card:hover{transform:translateY(-4px);border-color:rgba(183,170,239,.42);background:linear-gradient(130deg,rgba(32,43,76,.94),rgba(21,28,51,.94))}.module-top{width:100%;display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.module-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--icon-bg,#292344);color:var(--icon-color,#c2b1ff)}.module-icon svg{width:23px;height:23px}.module-number{font-size:11px;letter-spacing:.14em;color:#65718f}.module-card h2{font-size:21px;font-weight:600;letter-spacing:.02em;margin:0 0 10px}.module-card p{margin:0;padding-right:27px;font-size:13px;color:var(--muted);line-height:1.75}.card-arrow{position:absolute;bottom:29px;right:29px;color:var(--icon-color,#c2b1ff);font-size:21px;transition:transform .2s}.module-card:hover .card-arrow{transform:translateX(4px)}.typing-card{--icon-bg:#19343f;--icon-color:#98d4d3;--glow:rgba(66,185,190,.09)}.notes-card{--icon-bg:#393027;--icon-color:#e4bd88;--glow:rgba(220,164,82,.07)}.feedback-card{--icon-bg:#372842;--icon-color:#d5acd9;--glow:rgba(191,112,206,.09)}
.site-footer{display:flex;justify-content:space-between;gap:20px;color:#707e9f;font-size:11px;line-height:1.7;margin:35px 0 25px;padding:21px 0 0;border-top:1px solid var(--line)}.footer-note{letter-spacing:.06em}.notes-main{max-width:920px;padding-bottom:35px}.notes-main .hero{padding-top:47px}.note-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 17px}.lesson-chip{display:inline-flex;align-items:center;gap:9px;font-size:12px;color:#c0b5ed;border:1px solid rgba(178,155,239,.23);padding:7px 11px;border-radius:30px;background:rgba(130,104,210,.08)}.note-hint{color:var(--muted);font-size:12px}.note-preview{display:block;padding:0;border:1px solid var(--line);border-radius:15px;overflow:hidden;width:100%;background:#11182b;cursor:zoom-in}.note-preview img{display:block;width:100%;height:auto}.note-empty{border:1px dashed var(--line);border-radius:15px;padding:75px 20px;text-align:center;color:var(--muted);font-size:14px;line-height:1.8}.note-empty strong{display:block;margin-bottom:10px;font-size:20px;font-weight:500;color:#ddd6f3}.note-loading{text-align:center;color:var(--muted);font-size:13px;padding:28px 0}.image-dialog{padding:50px 16px 16px;border:0;max-width:100vw;max-height:100dvh;width:100vw;height:100dvh;background:rgba(3,7,17,.95);color:white}.image-dialog::backdrop{background:rgba(3,7,17,.8)}.image-dialog[open]{display:flex;align-items:center;justify-content:center}.image-dialog img{display:block;max-width:100%;max-height:calc(100dvh - 70px);object-fit:contain}.dialog-close{position:fixed;right:19px;top:13px;border:1px solid var(--line);background:#1a2237;color:white;padding:9px 16px;border-radius:8px;font-size:13px}.dialog-close:hover{background:#29354f}[hidden]{display:none!important}
@media(max-width:620px){.site-shell{width:calc(100% - 32px)}.site-header{padding:23px 0}.brand{gap:9px;font-size:14px}.brand small{font-size:10px;margin-left:5px}.brand-icon{width:33px;height:33px;border-radius:10px}.hero{padding:40px 0 22px}.hero h1{font-size:29px}.hero p{font-size:13px}.lesson-bar{padding:16px 0 18px}.lesson-status{font-size:11px}.module-grid{gap:12px}.module-card{padding:21px 18px;min-height:212px;border-radius:15px}.module-top{margin-bottom:22px}.module-card h2{font-size:18px}.module-card p{font-size:12px;padding:0 0 19px}.card-arrow{bottom:16px;right:18px;font-size:18px}.module-number{font-size:9px}.site-footer{font-size:10px;gap:12px;margin-top:27px}.notes-main .hero{padding-top:34px}.header-link{font-size:12px}.note-hint{font-size:11px}}
@media(max-width:360px){.module-grid{grid-template-columns:1fr}.module-card{min-height:185px}.lesson-status{display:none}.brand small{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Continuous course directory: four compact buttons per row. */
.course-directory{max-width:560px;margin-inline:auto}
.directory-intro{padding:38px 0 23px}.directory-intro h1{font-size:28px;font-weight:600;letter-spacing:.02em;line-height:1.4;margin:0 0 10px}.directory-intro p{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:13px;line-height:1.8;color:var(--muted);margin:0}.directory-intro p span{font-size:11px;color:#8592b2;white-space:nowrap}
.course-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.lesson-tile{min-width:0;display:flex;align-items:center;justify-content:center;min-height:58px;padding:15px 8px;border:1px solid var(--line);border-radius:10px;background:linear-gradient(135deg,rgba(26,36,64,.82),rgba(15,23,45,.86));transition:background .2s,border-color .2s,transform .2s}
.lesson-tile:hover{transform:translateY(-2px);background:linear-gradient(135deg,rgba(42,44,83,.92),rgba(25,31,58,.94));border-color:rgba(188,170,241,.55)}
.lesson-name{font-size:16px;font-weight:600;letter-spacing:.02em;color:#e9eaff;white-space:nowrap}

/* Selected classroom. */
.classroom-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 23px}.switch-lesson{font-size:12px;color:#b9aed9}.switch-lesson:hover{color:#e3d9ff}.course-notice{margin:0 0 23px;padding:18px 21px;border:1px solid rgba(190,166,124,.23);border-radius:13px;background:rgba(91,72,42,.14);color:#cbb796;font-size:13px;line-height:1.8}.course-notice strong{display:block;color:#e0c69f;font-weight:500}.course-notice p{margin:5px 0 0;color:#aea58f;font-size:12px}.module-card.is-unavailable{cursor:default;background:linear-gradient(130deg,rgba(22,29,49,.62),rgba(15,22,39,.7));border-color:rgba(151,164,199,.09)}.module-card.is-unavailable:hover{transform:none}.module-card.is-unavailable .module-icon{opacity:.5}.module-card.is-unavailable h2{color:#949eb6}.module-card.is-unavailable p{color:#707c98}.module-card.is-unavailable .card-arrow{font-size:10px;color:#7a87a4;transform:none;letter-spacing:.03em}.module-card.is-unavailable::after{opacity:.35}

@media(max-width:620px){.directory-intro{padding:30px 0 21px}.directory-intro h1{font-size:25px}.directory-intro p{font-size:12px;gap:10px}.directory-intro p span{font-size:10px}.course-grid{gap:8px}.lesson-tile{min-height:52px;padding:13px 5px;border-radius:9px}.lesson-name{font-size:14px}.course-notice{padding:15px 16px}.classroom-toolbar{margin-bottom:18px}.switch-lesson{font-size:11px}}
@media(max-width:359px){.course-grid{gap:6px}.directory-intro p{font-size:11px}.lesson-tile{padding:12px 3px}.lesson-name{font-size:13px}}

/* Course access is confirmed before any directory link becomes active. */
.lesson-tile{position:relative}.lesson-tile.is-access-pending,.lesson-tile.is-course-locked{cursor:default;background:rgba(17,24,42,.66);border-color:rgba(156,170,205,.09)}.lesson-tile.is-access-pending:hover,.lesson-tile.is-course-locked:hover{transform:none;background:rgba(24,31,49,.72);border-color:rgba(156,170,205,.2)}.lesson-tile.is-access-pending .lesson-name,.lesson-tile.is-course-locked .lesson-name{color:#68758f}.course-lock{position:absolute;right:7px;top:9px;width:8px;height:7px;border:1px solid #6f7a92;border-radius:2px}.course-lock::before{content:"";position:absolute;left:1px;top:-5px;width:4px;height:5px;border:1px solid #6f7a92;border-bottom:0;border-radius:4px 4px 0 0}.course-access-status{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 17px;color:#9daac8;font-size:12px;line-height:1.7}.course-access-status p{margin:0}.course-access-status.is-error{color:#d6b8a6}.course-access-status button{flex:none;border:1px solid #71658c;border-radius:7px;padding:6px 13px;color:#d5c7ef;background:#211e37;font:inherit;cursor:pointer}.course-access-status button:disabled{opacity:.5;cursor:wait}.course-access-noscript{color:#d6b8a6;font-size:12px;margin:18px 0}.locked-page{max-width:500px;margin:14vh auto 0;padding:30px 24px}.locked-page h1{margin:26px 0 14px;font-size:30px;font-weight:600;line-height:1.4}.locked-page>p:not(.eyebrow){color:var(--muted);font-size:14px;line-height:1.9}.return-directory{display:inline-flex;margin-top:21px;padding:12px 20px;border:1px solid #8976b9;border-radius:10px;background:#2d2648;color:#e5daf9;font-size:14px}.return-directory:hover{background:#3b305c}