/* The home is a working study desk: content, review method, practice mode. */
html{scroll-behavior:smooth}
body:not(.light-mode){--color-bg:#17211d;--color-card:#202d26;--color-soft:#2a382f;--color-text:#eeeede;--color-muted:#b0bbad;--color-line:#3a4b3e;--color-green:#8eb8a0;--color-red:#d39b83;--color-gold:#d3b985;--color-gold-dark:#d3b985}
body.light-mode{--color-bg:#f6f5f0;--color-card:#fffefb;--color-soft:#eeeee7;--color-text:#253c35;--color-muted:#70776c;--color-line:#dfe2d8;--color-gold:#987547;--color-gold-dark:#6e5635;--color-green:#285c49;--color-red:#a14f39}
body::before{display:none}
.shell{width:min(1192px,calc(100% - 56px));padding:24px 0 36px}
.header{margin:0;padding:0 0 20px;border-bottom:1px solid var(--color-line)}
.brand-lockup{display:flex;gap:11px;align-items:center;text-decoration:none;color:var(--color-text)}
.brand-mark{display:grid;place-items:center;width:38px;height:42px;border-radius:5px;background:#285342;color:#fff6df;font:24px var(--font-han)}
.brand-name{font-family:var(--font-ui);font-weight:800;letter-spacing:-.04em;font-size:19px}
.brand-name small{display:block;font:10px var(--font-body);letter-spacing:.08em;color:var(--color-muted);margin-top:3px}
.top-nav{display:flex;align-items:center;gap:26px}.top-nav a{color:var(--color-muted);font-size:13px;text-decoration:none}.top-nav a:hover{color:var(--color-text)}
.top-nav .course{background:transparent;color:var(--color-text);border:1px solid var(--color-line);border-radius:8px;min-height:38px}
#themeToggleBtn{min-height:38px;padding:0 12px;border-radius:8px;background:transparent;font-size:12px}
.desk-intro{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 0 24px}
.desk-intro h1{font-size:clamp(27px,3.2vw,40px);letter-spacing:-.045em;line-height:1.2;font-weight:700}
.desk-intro p{margin:10px 0 0;color:var(--color-muted);font-size:14px}
.desk-kicker{font-size:10px;text-transform:uppercase;letter-spacing:.17em;color:var(--color-red);display:block;margin-bottom:9px;font-weight:700}
.desk-art{width:228px;height:118px;object-fit:cover;border-radius:70px 10px 70px 10px;flex-shrink:0}
.flow{display:grid;grid-template-columns:1.12fr 1fr;gap:20px;align-items:start}
.step{padding:24px;border:1px solid var(--color-line);border-radius:15px;background:var(--color-card);box-shadow:0 3px 3px rgba(25,40,30,.015)}
.step:hover{box-shadow:none}.step:nth-child(2),.step:nth-child(3){border-left-color:var(--color-line)}
.step-title{color:var(--color-text);font-size:17px;text-transform:none;letter-spacing:-.025em;margin-bottom:8px;gap:11px}
.step-title::after{display:none}.step-number{display:grid;place-items:center;flex-shrink:0;width:27px;height:27px;border-radius:50%;background:var(--color-text);color:var(--color-card);font-size:11px;letter-spacing:0}
.step-note{font-size:12px;color:var(--color-muted);margin:0 0 18px 38px}
.source-row{display:block}.source{width:100%;min-height:99px;padding:14px 18px;background:var(--color-soft);border:0;border-radius:10px;gap:18px}
.source-icon{position:relative;width:58px;height:66px;font-size:28px;background:#315a49;color:#f9f0d7;border-radius:2px 6px 6px 2px;box-shadow:-4px 0 0 #bec8b5,-7px 0 0 #e2dccb}
.source-icon::after{content:"";position:absolute;left:6px;top:0;bottom:0;border-left:1px solid #ffffff25}
.source-copy strong{font-size:18px}.source-copy small{font-size:11px}.change{font-size:10px;letter-spacing:.04em}
.library-footnote{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 18px;color:var(--color-muted);font-size:10px}
.library-footnote span+span::before{content:"·";margin-right:8px}
.range{grid-template-columns:1fr 1fr;gap:10px}.field{gap:5px}.field label{font-size:10px;text-transform:none;letter-spacing:0}.field input,.field select{height:35px;font-size:12px;background:transparent;border-radius:7px}
#rangeSummary{font-size:10px;padding:0}
.pills{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pill{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;min-height:102px;padding:12px 14px;border-radius:10px;background:transparent;text-align:left;color:var(--color-text)}
.pill.active{color:var(--color-text);background:color-mix(in srgb,var(--color-green) 8%,var(--color-card));border-color:var(--color-green);box-shadow:0 0 0 1px var(--color-green)}
.pill strong{font-size:12px}.pill small{font-size:10px;font-weight:400;color:var(--color-muted)}.order-visual{display:flex;gap:4px;align-items:center;height:22px;margin-bottom:2px}.order-visual i{font-style:normal;font-size:9px;width:20px;height:20px;display:grid;place-items:center;background:var(--color-soft);border:1px solid var(--color-line);border-radius:4px;color:var(--color-green)}.order-visual i.mark{background:#f1dfb8;color:#75582b}.order-visual i.miss{background:#efdbd2;color:#983f2b}
.step-skills{grid-column:1/-1;padding:24px;background:transparent;border:0;border-top:1px solid var(--color-line);border-radius:0;margin-top:5px}
.step-skills .step-note{margin-bottom:22px}.modes{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.mode{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden;border:1px solid var(--color-line);border-radius:13px;min-height:0;background:var(--color-card)}
.mode:hover{transform:translateY(-3px);box-shadow:0 10px 25px #1639230d;border-color:var(--color-green)}
.mode.active{border-color:var(--color-green);background:var(--color-card);box-shadow:0 0 0 2px var(--color-green)}
.mode.active::after{background:var(--color-green);top:12px;right:12px;z-index:2}
.mode-preview{position:relative;height:155px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#eeeade;color:#293f34;border-bottom:1px solid #00000006}
.mode-copy{padding:16px 18px 18px;gap:6px}.mode-copy strong{font-size:14px}.mode-copy small{font-size:11px;font-weight:400;line-height:1.5;max-width:280px}
.preview-analysis{gap:18px;background:#eee9df}.mini-landscape{width:96px;height:112px;object-fit:cover;border-radius:48px 48px 6px 6px}.mini-definition b{font:44px var(--font-han);display:block}.mini-definition em{font-size:11px;color:#9b5136;font-style:normal}.mini-definition span{display:block;font-size:10px;margin-top:5px;color:#6c7568}
.preview-writing{background:#e7ece4;gap:12px}.writing-tile{width:90px;height:104px;background:#fffdf7;padding:8px;transform:rotate(-8deg);box-shadow:0 5px 10px #1e342215;border:1px solid #d6ddcf;border-radius:5px;display:grid;place-items:center;font:58px var(--font-han)}
.writing-tile+ .writing-tile{transform:rotate(7deg);background:linear-gradient(90deg,transparent 49.5%,#d7d7c9 50%,transparent 50.5%),linear-gradient(transparent 49.5%,#d7d7c9 50%,transparent 50.5%),#fffdf7;color:#c5cabb}
.preview-listen{background:#e8e8ed;flex-direction:column;gap:11px}.audio-word{font:26px var(--font-han)}.audio-wave{display:flex;align-items:center;gap:4px;height:36px}.audio-wave i{width:4px;background:#78758e;border-radius:4px;height:14px}.audio-wave i:nth-child(3n){height:34px}.audio-wave i:nth-child(3n + 1){height:23px}.audio-wave i:nth-child(5n){height:9px}.preview-caption{font-size:10px;letter-spacing:.04em;color:#73777b}
.preview-game{background:#f0e4d6;gap:7px;flex-wrap:wrap;padding:30px 42px}.game-chip{border:1px solid #d9c6ac;background:#fffaf0;padding:9px 12px;border-radius:7px;font:18px var(--font-han);box-shadow:0 3px 0 #ddceba}.game-chip.matched{background:#dce6d3;border-color:#aabd9c}.game-chip.small{font:11px var(--font-body)}
.preview-typing{background:#e3ebe8;flex-direction:column;gap:15px}.typing-line{font:25px var(--font-han);letter-spacing:4px}.typing-line b{font-weight:400;color:#709180}.typing-line em{font-style:normal;border-right:2px solid #476c57;padding-right:5px}.keyboard-row{display:flex;gap:4px}.keyboard-row i{display:grid;place-items:center;font:12px var(--font-body);width:24px;height:25px;border:1px solid #cad5cc;border-bottom:3px solid #bacabe;border-radius:4px;background:#fdfdf8}
.preview-speaking{background:#efe4df;flex-direction:column;gap:10px}.speech-bubble{background:#fffaf5;padding:9px 17px;border-radius:12px 12px 12px 0;font:22px var(--font-han);box-shadow:0 3px 10px #7843330b}.speak-row{display:flex;align-items:center;gap:12px}.mic-dot{display:grid;place-items:center;width:35px;height:35px;border-radius:50%;background:#a5634e;color:white}.mic-dot svg{width:18px;height:18px}.speaking-wave{display:flex;gap:3px;align-items:center;height:22px}.speaking-wave i{width:3px;height:10px;background:#b98571}.speaking-wave i:nth-child(even){height:21px}
.launch{grid-column:1/-1;justify-self:center;width:min(430px,100%);min-height:53px;margin:0;background:#285543;border-radius:10px;letter-spacing:0;font-size:14px;box-shadow:0 5px 12px #22493318}.launch:hover{background:#1e4737;box-shadow:0 8px 16px #22493322}.trust{margin:10px 0 28px;padding:0;font-size:11px}.site-footer-nav{width:100%;margin-top:20px;background:transparent;border:0;border-top:1px solid var(--color-line);border-radius:0;padding:25px 0}
.library-coach{display:none}
@media(max-width:900px){.shell{width:calc(100% - 36px)}.top-nav{gap:14px}.top-nav>a:not(.btn){display:none}.flow{gap:14px}.step{padding:19px}.modes{gap:12px}.preview-game{padding:20px}.mode-copy{padding:13px}.mode-copy strong{font-size:13px}.desk-art{width:180px;height:108px}}
@media(max-width:640px){.shell{width:100%;padding:17px 16px 28px}.header{flex-direction:row;align-items:center;gap:10px;padding-bottom:16px}.brand-name{font-size:16px}.brand-name small{font-size:8px}.top-nav .course{display:none}#themeToggleBtn{font-size:10px;padding:0 8px}.desk-intro{position:relative;padding:24px 0;min-height:145px;align-items:flex-start}.desk-intro>div{max-width:72%;position:relative;z-index:1}.desk-intro h1{font-size:27px}.desk-intro p{font-size:12px;max-width:250px;line-height:1.6}.desk-art{position:absolute;right:-10px;top:20px;width:96px;height:108px;border-radius:40px 5px 40px 5px;opacity:.9}.desk-kicker{font-size:8px}.flow{grid-template-columns:1fr;gap:16px}.step{padding:18px}.step-title{font-size:16px}.step-note{font-size:11px;margin-left:0}.step-skills{padding:20px 0 0}.modes{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.mode-preview{height:125px}.mode-copy{padding:12px 10px}.mode-copy strong{font-size:12px;line-height:1.5}.mode-copy small{font-size:10px}.mini-landscape{width:49px;height:79px}.preview-analysis{gap:9px}.mini-definition b{font-size:31px}.mini-definition em,.mini-definition span{font-size:9px}.writing-tile{width:56px;height:73px;font-size:42px}.preview-writing{gap:6px}.preview-game{padding:17px 8px;gap:5px}.game-chip{padding:7px 8px;font-size:16px}.game-chip.small{font-size:9px}.typing-line{font-size:21px}.keyboard-row{gap:2px}.keyboard-row i{width:18px;height:23px;font-size:9px}.speech-bubble{font-size:20px}.mode.active::after{width:19px;height:19px;font-size:10px;top:7px;right:7px}.change{display:block}.range{grid-template-columns:1fr 1fr}#rangeSummary{grid-column:1/-1}.launch{margin-top:4px}.site-footer-nav{grid-template-columns:1fr 1fr;gap:15px}.site-footer-nav a{font-size:11px}.footer-nav-title{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.mode,.launch{transition:none}}