@charset "UTF-8";
.academy-page { --academy-muted:#65715f; --academy-border:#dce3d4; --ochre:#956b32; --lesson-red:#ad5145; }
.academy-page [hidden] { display:none!important; }
.academy-shell { max-width:1250px!important; padding:0 44px; }
.academy-page .site-header { height:92px; }
.academy-navigation { display:flex; align-items:center; gap:24px; font-size:14px; }
.academy-navigation>a { display:flex; align-items:center; gap:8px; min-height:44px; }
.return-game { border:1px solid var(--academy-border); border-radius:8px; padding:0 14px; }
.return-game .icon { width:17px; }
.academy-navigation a:hover { color:#507340; }
.academy-intro { display:flex; align-items:center; justify-content:space-between; padding:33px 0 29px; gap:24px; }
.academy-intro .eyebrow { color:#647c56; font-size:10px; }
.academy-intro h1 { font-size:35px; margin:13px 0 9px; }
.academy-intro p { font-size:14px; color:var(--academy-muted); margin:0; line-height:1.8; }
.learning-progress { display:flex; align-items:center; gap:13px; color:#526d46; padding:13px 0 13px 20px; }
.learning-progress>.icon { width:25px; height:25px; }
.learning-progress>div { display:flex; flex-direction:column; gap:5px; }
.learning-progress>div>span { font-size:12px; color:var(--academy-muted); }
.learning-progress strong { font-weight:500; font-size:19px; font-variant-numeric:tabular-nums; }
.progress-ring { height:37px; width:37px; margin-left:5px; background:conic-gradient(#729457 var(--progress,0%),#e4e9dc 0); border-radius:50%; position:relative; }
.progress-ring::after { content:""; position:absolute; inset:5px; border-radius:50%; background:var(--paper); }
.learning-path { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); padding:5px; gap:5px; border:1px solid var(--academy-border); border-radius:11px; margin:0 0 31px; background:#eef0e6; }
.path-button { padding:12px; min-height:61px; border-radius:7px; display:flex; align-items:center; gap:12px; text-align:left; background:transparent; color:#708064; transition:background .15s; }
.path-button>span { font-family:Georgia,serif; font-size:21px; color:#98a78b; }
.path-button>div { display:flex; flex-direction:column; gap:5px; min-width:0; }
.path-button strong { font-size:14px; font-weight:500; }
.path-button small { font-size:11px; line-height:1.4; }
.path-button.active { background:white; color:#315a43; box-shadow:0 2px 7px #29433108; }
.path-button.active>span { color:#709253; }
.path-button:hover:not(.active) { background:#e3e9d8; }
.academy-layout { display:grid; grid-template-columns:190px minmax(0,1fr); gap:32px; align-items:start; }
.directory-heading { display:flex; align-items:center; justify-content:space-between; font-size:13px; font-weight:500; padding:5px 3px 18px; border-bottom:1px solid var(--academy-border); }
.directory-heading>span { color:#8a9582; font-size:9px; letter-spacing:1px; }
.lesson-group { padding-top:18px; }
.lesson-group>h3 { margin:0 0 8px 10px; font-size:11px; font-weight:400; color:#7d8d70; letter-spacing:1px; }
.lesson-link { min-height:47px; padding:10px; display:flex; align-items:center; gap:9px; width:100%; border-radius:7px; background:transparent; text-align:left; font-size:13px; line-height:1.5; }
.lesson-link .lesson-dot { width:17px; height:17px; flex-shrink:0; border:1px solid #ced9c3; border-radius:50%; display:grid; place-items:center; color:#6a8555; font-size:10px; }
.lesson-link .lesson-dot.done { background:#698951; color:white; border-color:#698951; }
.lesson-link.active { background:#e5ecd9; color:#345637; font-weight:500; }
.lesson-link.active .lesson-dot:not(.done) { border:4px solid #759258; background:#eff4e7; }
.lesson-link:hover { background:#ebefdf; }
.sidebar-note { border-top:1px solid var(--academy-border); margin:26px 10px 0; padding-top:20px; }
.sidebar-note>span { font-size:12px; color:#73855f; }
.sidebar-note p { font-size:12px; line-height:1.9; color:#87917d; margin:8px 0; }
.mobile-lesson-picker { display:none; }
.lesson-content { min-width:0; scroll-margin-top:20px; }
.lesson-heading { display:flex; align-items:flex-start; gap:12px; justify-content:space-between; margin-bottom:23px; }
.lesson-meta { display:flex; align-items:center; gap:12px; color:#88937e; font-size:11px; }
.lesson-meta>span:first-child { background:#e9efdf; color:#618047; border-radius:4px; padding:4px 7px; }
.lesson-heading h2 { font-family:"Songti SC","SimSun",serif; font-size:28px; font-weight:500; letter-spacing:.4px; margin:12px 0 8px; }
.lesson-heading p { font-size:14px; line-height:1.75; color:var(--academy-muted); margin:0; }
.mastery-badge { display:flex; align-items:center; gap:4px; white-space:nowrap; font-size:11px; color:#65824f; background:#eaf0e1; padding:6px 8px; border-radius:5px; margin-top:2px; }
.mastery-badge .icon { width:14px; height:14px; }
.lesson-workspace { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); gap:26px; align-items:start; }
.demonstration { min-width:0; scroll-margin-top:14px; }
.demo-topline { display:flex; align-items:center; justify-content:space-between; font-size:11px; color:#7c8970; margin-bottom:9px; padding-left:19px; }
.demo-topline>span:first-child { display:flex; align-items:center; gap:6px; }
.demo-topline i { display:inline-block; height:5px; width:5px; background:#7e9e64; border-radius:50%; }
.demo-coordinate-frame { position:relative; padding:19px 0 0 19px; }
.column-coordinates { position:absolute; inset:0 0 auto 19px; height:19px; display:grid; grid-template-columns:repeat(9,1fr); font-size:10px; color:#8d9785; text-align:center; }
.row-coordinates { position:absolute; inset:19px auto 0 0; width:19px; display:grid; grid-template-rows:repeat(9,1fr); align-items:center; font-size:10px; color:#8d9785; text-align:left; }
.demo-board { position:relative; display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); grid-template-rows:repeat(9,minmax(0,1fr)); aspect-ratio:1; background:#fff; border:2px solid #78856d; border-radius:8px; overflow:hidden; box-shadow:0 8px 23px #29433306; }
.demo-row { display:contents; }
.demo-cell { position:relative; display:grid; place-items:center; min-width:0; min-height:0; border-right:1px solid #e0e5d9; border-bottom:1px solid #e0e5d9; color:#3a4435; background:#fff; font-family:"Avenir Next","Trebuchet MS",sans-serif; font-size:25px; font-weight:500; transition:background .35s ease; }
.demo-cell[data-col="2"],.demo-cell[data-col="5"] { border-right:2px solid #8b9780; }
.demo-cell[data-col="8"] { border-right:0; }
.demo-cell[data-row="2"],.demo-cell[data-row="5"] { border-bottom:2px solid #8b9780; }
.demo-cell[data-row="8"] { border-bottom:0; }
.demo-cell.related { background:#f1f4ea; }
.demo-cell.focus { background:#e0eccc; box-shadow:inset 0 0 0 1.5px #96b373; }
.demo-cell.placed { background:#d4e5bf; color:#396630; }
.demo-cell.placed>.cell-value { animation:placed .4s ease both; }
.demo-cell.has-elimination { background:#fbf0e5; }
.demo-cell.focus.has-elimination { background:#e8eace; }
.cell-value { position:relative; z-index:3; }
.demo-candidates { width:100%; height:100%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr)); padding:2px; }
.demo-candidates>span { display:grid; place-items:center; position:relative; font-size:11px; font-weight:500; color:#718063; z-index:3; line-height:1; }
.demo-cell.focus .demo-candidates>span { color:#405f31; }
.demo-candidates>span.removed { color:#b4614c!important; opacity:.7; }
.demo-candidates>span.removed::after { content:""; height:1px; background:#b4614c; width:105%; position:absolute; top:50%; left:-2%; transform:rotate(-37deg); }
.connection-layer { position:absolute; top:21px; left:21px; width:calc(100% - 23px); height:calc(100% - 23px); pointer-events:none; overflow:visible; }
.connection-layer path { fill:none; stroke:#6d904c; stroke-width:5; stroke-linecap:round; opacity:.5; stroke-dasharray:1200; stroke-dashoffset:0; animation:draw-link .6s ease-out; }
.board-legend { margin:12px 0 0 19px; display:flex; flex-wrap:wrap; gap:6px 12px; color:#7b8670; font-size:10px; }
.board-legend>span { display:flex; align-items:center; gap:4px; white-space:nowrap; }
.board-legend i { width:10px; height:10px; border-radius:2px; display:inline-grid; place-items:center; font-style:normal; }
.legend-focus { background:#e0eccc; border:1px solid #96b373; }
.legend-elimination { color:#ad5145; font-size:14px; }
.legend-placement { background:#639448; }
.step-caption { display:flex; align-items:flex-start; gap:12px; margin:19px 0 0 19px; min-height:112px; }
.step-index { color:#759354; border:1px solid #d4dfc6; border-radius:6px; background:#eef3e6; flex-shrink:0; width:33px; height:33px; display:grid; place-items:center; font-size:12px; font-variant-numeric:tabular-nums; }
.step-caption h3 { font-size:15px; font-weight:500; line-height:1.6; margin:0 0 5px; color:#405b34; }
.step-caption p { font-size:14px; line-height:1.8; color:#64725a; margin:0; white-space:pre-line; }
.playback-controls { display:flex; gap:7px; align-items:center; margin:16px 0 0 19px; }
.player-icon { width:44px; height:46px; flex-shrink:0; background:#eaf0df; border:1px solid #dce5d1; border-radius:7px; display:grid; place-items:center; color:#5a7944; touch-action:manipulation; }
.player-icon:hover:not(:disabled) { background:#dce8cd; }
.player-icon>.icon { width:18px; height:18px; }
.play-button { flex:1; min-width:95px; min-height:46px; display:flex; align-items:center; justify-content:center; gap:8px; padding:10px 8px; background:var(--green); color:#fff; border-radius:7px; font-size:13px; white-space:nowrap; touch-action:manipulation; }
.play-button:hover { background:#244737; }
.play-button>.icon { width:16px; height:16px; }
.speed-label select { font:inherit; font-size:16px; color:#587144; padding:0 3px; border:1px solid #dce5d1; background:#f7f9f0; border-radius:7px; width:62px; height:46px; }
.step-timeline { display:flex; gap:6px; margin:7px 0 0 19px; }
.timeline-step { background:none; flex:1; min-width:0; min-height:44px; padding:12px 0 4px; color:#829176; font-size:10px; font-variant-numeric:tabular-nums; }
.timeline-step>i { display:block; width:100%; height:3px; border-radius:2px; background:#e0e6d7; margin-bottom:7px; }
.timeline-step.past>i { background:#a4bd8b; }
.timeline-step.active { color:#4d6b39; font-weight:600; }
.timeline-step.active>i { background:#608544; }
.demo-note { margin:6px 0 0 19px; font-size:11px; color:#87917c; line-height:1.8; }
.principle-card { background:#edf2e5; border:1px solid #dce5d0; border-radius:11px; padding:23px; }
.note-kicker { font-size:9px; color:#799464; letter-spacing:2px; }
.principle-card h3 { font-family:"Songti SC","SimSun",serif; font-size:21px; font-weight:500; margin:12px 0 13px; line-height:1.5; }
.principle-card>p { font-size:15px; line-height:1.95; color:#607154; margin:0; white-space:pre-line; }
.takeaway { border-top:1px solid #d7e1cd; margin-top:19px; padding-top:15px; }
.takeaway>span { color:#7d9069; font-size:11px; }
.takeaway>p { font-size:14px; font-weight:500; line-height:1.9; margin:6px 0 0; color:#48613b; }
.pitfall-card { display:flex; gap:11px; margin:17px 0 20px; padding:3px 4px; }
.pitfall-symbol { border:1px solid #caba90; color:#9b8351; display:grid; place-items:center; border-radius:50%; width:18px; height:18px; flex-shrink:0; font-size:11px; margin-top:3px; }
.pitfall-card h3 { margin:0 0 6px; font-size:13px; font-weight:500; color:#897240; }
.pitfall-card p { margin:0; font-size:13px; line-height:1.85; color:#8b8066; }
.quiz-card { padding:21px; border:1px solid var(--academy-border); background:#fff; border-radius:11px; }
.quiz-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:13px; }
.quiz-heading>span:first-child { font-size:12px; font-weight:500; color:#6a8256; }
.quiz-heading>span:last-child { font-size:10px; color:#929b8a; }
.quiz-card>h3 { font-size:15px; font-weight:500; line-height:1.85; margin:0 0 15px; }
.quiz-choices { display:grid; gap:8px; }
.quiz-choice { display:flex; align-items:flex-start; gap:9px; text-align:left; width:100%; min-height:52px; background:#f8faf4; border:1px solid #e4e9dc; padding:12px; border-radius:7px; font-size:13px; line-height:1.65; transition:background .15s; touch-action:manipulation; }
.quiz-choice>.choice-letter { color:#8b9a7e; font-family:Georgia,serif; font-size:14px; flex-shrink:0; }
.quiz-choice:hover:not(:disabled) { background:#ecf2e4; border-color:#cadbbb; }
.quiz-choice.correct { background:#e5efd9; border-color:#9eba80; color:#416832; }
.quiz-choice.incorrect { background:#fcf0e9; border-color:#d6ad98; color:#9a6047; }
.quiz-choice:disabled { opacity:1; }
.quiz-feedback { margin-top:12px; border-radius:7px; background:#eef4e6; padding:12px; font-size:13px; line-height:1.8; color:#52723f; }
.quiz-feedback[data-kind="incorrect"] { background:#f8f1e4; color:#92764b; }
.quiz-reset { min-height:44px; color:#6a8059; text-decoration:underline; text-underline-offset:3px; background:transparent; font-size:12px; padding:8px 0; }
.lesson-bottom { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:29px; border-top:1px solid var(--academy-border); padding-top:24px; }
.lesson-bottom>div { display:flex; flex-direction:column; gap:7px; }
.lesson-bottom>div>span { font-size:11px; color:#87977b; }
.lesson-bottom strong { font-size:15px; font-weight:500; }
.lesson-bottom>button { display:flex; align-items:center; justify-content:center; gap:12px; min-height:46px; padding:12px 15px; font-size:13px; border-radius:7px; background:#e6eeda; color:#587241; flex-shrink:0; }
.lesson-bottom .icon { width:15px; }
.lesson-sources { color:#7d8c70; font-size:11px; margin-top:18px; }
.lesson-sources summary { cursor:pointer; min-height:44px; display:flex; align-items:center; }
.lesson-sources summary::before { content:"+"; margin-right:8px; }
.lesson-sources[open] summary::before { content:"−"; }
.lesson-sources p { font-size:12px; line-height:1.8; }
.lesson-sources ul { padding-left:20px; line-height:2; }
.lesson-sources a { text-decoration:underline; text-underline-offset:3px; color:#557344; }
.academy-faq { margin:43px 0 0; padding-top:32px; border-top:1px solid var(--academy-border); display:grid; grid-template-columns:280px minmax(0,1fr); gap:70px; }
.faq-heading>.eyebrow { font-size:9px; color:#829870; }
.faq-heading h2 { font-family:"Songti SC","SimSun",serif; font-size:25px; font-weight:500; line-height:1.7; margin:11px 0 0; }
.faq-list details { border-bottom:1px solid #e2e7da; }
.faq-list summary { min-height:58px; padding:15px 0; display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:14px; line-height:1.8; cursor:pointer; list-style:none; }
.faq-list summary::after { content:"+"; color:#87a16e; font-size:20px; flex-shrink:0; }
.faq-list details[open] summary::after { content:"−"; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list p { margin:0 0 20px; color:#748267; font-size:14px; line-height:1.95; }
.academy-page footer { font-size:11px; }
.learning-notice { position:fixed; bottom:16px; left:50%; transform:translateX(-50%); background:#2e493b; color:white; font-size:13px; padding:12px 18px; border-radius:8px; max-width:calc(100% - 32px); z-index:10; line-height:1.7; }
.sr-only,.skip-link:not(:focus) { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.skip-link:focus { display:block; padding:16px; color:var(--green); }
.academy-page button:focus-visible,.academy-page select:focus-visible,.academy-page summary:focus-visible { outline:3px solid #8faa6e; outline-offset:3px; }
@keyframes placed { from { transform:scale(.7); opacity:.2; } to { transform:scale(1); opacity:1; } }
@keyframes draw-link { from { stroke-dashoffset:1200; } to { stroke-dashoffset:0; } }
@media(max-width:1120px) {
  .academy-shell { padding:0 30px; }
  .academy-layout { grid-template-columns:165px minmax(0,1fr); gap:24px; }
  .lesson-workspace { gap:20px; }
  .principle-card,.quiz-card { padding:17px; }
  .demo-cell { font-size:23px; }
  .playback-controls { gap:5px; }
  .player-icon { width:40px; }
  .speed-label select { width:58px; }
  .play-button { min-width:85px; font-size:12px; }
  .path-button { padding:11px 8px; gap:8px; }
  .path-button small { font-size:10px; }
}
@media(max-width:980px) {
  .academy-layout { grid-template-columns:155px minmax(0,1fr); }
  .lesson-workspace { grid-template-columns:minmax(0,1fr); }
  .demonstration { max-width:500px; width:100%; margin:0 auto; }
  .lesson-notes { display:grid; grid-template-columns:1fr 1fr; gap:17px; margin-top:5px; }
  .principle-card { grid-column:1; }
  .pitfall-card { grid-column:1; grid-row:2; margin:0; }
  .quiz-card { grid-column:2; grid-row:1 / span 2; }
  .learning-progress { padding-left:0; }
  .learning-progress>.icon { display:none; }
  .path-button>span { font-size:17px; }
  .path-button small { display:none; }
  .path-button { min-height:48px; }
  .academy-faq { grid-template-columns:230px 1fr; gap:35px; }
}
@media(max-width:720px) {
  .academy-shell { padding:0 20px; }
  .academy-page .site-header { height:76px; }
  .academy-navigation { gap:14px; font-size:12px; }
  .return-game { border:0; padding:0; gap:5px!important; }
  .return-game .icon { width:15px; }
  .academy-intro { padding:24px 0 20px; gap:14px; align-items:flex-start; }
  .academy-intro h1 { font-size:28px; margin:10px 0 8px; letter-spacing:0; }
  .academy-intro .eyebrow { font-size:8px; letter-spacing:1.3px; }
  .academy-intro p { font-size:13px; line-height:1.8; max-width:250px; }
  .learning-progress { padding:0; gap:0; margin-top:0; }
  .learning-progress>div>span { font-size:10px; }
  .learning-progress strong { font-size:15px; }
  .progress-ring { display:none; }
  .learning-path { gap:3px; padding:4px; margin-bottom:18px; border-radius:9px; }
  .path-button { padding:8px 2px; justify-content:center; gap:0; min-height:45px; }
  .path-button>span { display:none; }
  .path-button strong { font-size:13px; }
  .academy-layout { display:block; }
  .lesson-sidebar { display:none; }
  .mobile-lesson-picker { display:flex; gap:12px; align-items:center; margin:0 0 23px; font-size:12px; color:#7b8b6e; }
  .mobile-lesson-picker label { white-space:nowrap; }
  .mobile-lesson-picker select { min-width:0; width:100%; flex:1; min-height:46px; font:inherit; font-size:16px; padding:9px 30px 9px 11px; color:#49643b; background:#f9fbf4; border:1px solid #dbe4d0; border-radius:7px; }
  .lesson-heading { margin-bottom:18px; }
  .lesson-meta { font-size:10px; gap:9px; }
  .lesson-heading h2 { font-size:27px; margin-top:10px; }
  .lesson-heading p { font-size:14px; }
  .mastery-badge { font-size:10px; padding:5px; }
  .lesson-workspace { display:block; }
  .demo-cell { font-size:26px; }
  .demo-candidates>span { font-size:11px; }
  .demo-coordinate-frame { padding-top:17px; padding-left:17px; }
  .column-coordinates { left:17px; height:17px; }
  .row-coordinates { top:17px; width:17px; }
  .connection-layer { top:19px; left:19px; width:calc(100% - 21px); height:calc(100% - 21px); }
  .demo-topline { padding-left:17px; font-size:10px; }
  .board-legend { margin-left:17px; font-size:10px; gap:6px 10px; }
  .step-caption { margin-left:17px; min-height:0; margin-top:16px; gap:9px; }
  .step-caption h3 { font-size:15px; }
  .step-caption p { font-size:14px; }
  .playback-controls { margin-left:17px; gap:5px; }
  .player-icon { width:44px; min-height:46px; }
  .play-button { min-width:85px; font-size:13px; gap:5px; }
  .speed-label select { width:57px; }
  .step-timeline,.demo-note { margin-left:17px; }
  .lesson-notes { display:block; margin-top:24px; }
  .principle-card,.quiz-card { padding:22px; }
  .principle-card>p { font-size:16px; }
  .pitfall-card { margin:20px 2px 22px; }
  .pitfall-card p { font-size:14px; }
  .quiz-card>h3 { font-size:16px; }
  .quiz-choice { font-size:14px; min-height:55px; }
  .quiz-feedback { font-size:14px; }
  .lesson-bottom { margin-top:25px; gap:12px; }
  .lesson-bottom strong { font-size:14px; }
  .lesson-bottom>button { font-size:12px; gap:5px; padding:12px; }
  .academy-faq { display:block; margin-top:27px; padding-top:24px; }
  .faq-heading { margin-bottom:17px; }
  .faq-heading h2 { font-size:24px; }
  .academy-page footer { display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin-top:28px; }
}
@media(max-width:370px) {
  .academy-shell { padding:0 15px; }
  .academy-navigation { gap:11px; font-size:11px; }
  .academy-intro h1 { font-size:25px; }
  .learning-progress>div>span { font-size:9px; }
  .learning-progress strong { font-size:14px; }
  .academy-intro p { font-size:12px; }
  .demo-cell { font-size:23px; }
  .demo-candidates>span { font-size:10px; }
  .playback-controls { flex-wrap:wrap; }
  .speed-label { margin-left:auto; }
  .speed-label select { width:62px; }
  .play-button { min-width:97px; }
  .player-icon { width:44px; }
  .lesson-heading h2 { font-size:24px; }
}
@media(prefers-reduced-motion:reduce) {
  .academy-page *,.academy-page *::before,.academy-page *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}