:root{color-scheme:light;--ink: #263b45;--muted: #71828a;--paper: #f7f9ee;--paper-deep: #eef2e2;--white: #fffef8;--line: #e4e9d9;--green: #3a8d72;--green-deep: #276f5a;--mint: #dff1e5;--coral: #ef8874;--yellow: #f4c45f;--blue: #7ab5c4;--lavender: #aaa2d8;--shadow: 0 8px 0 rgba(56, 85, 66, .07), 0 18px 35px rgba(52, 79, 65, .07);--font: "DM Sans", sans-serif;--display: "Nunito", sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}button,a{font:inherit}button{color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #e39d45;outline-offset:3px}.app-shell{min-height:100dvh;overflow:hidden}.topbar{max-width:1180px;margin:auto;padding:20px 34px;display:flex;align-items:center;justify-content:space-between;gap:18px}.brand{display:flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;font:900 21px var(--display);letter-spacing:-.7px}.brand-mark{width:36px;height:36px;color:var(--green);display:grid;place-items:center}.brand-mark svg{width:100%;height:100%}.brand-dot{color:var(--green)}.topbar-note{display:flex;align-items:center;gap:9px;color:#85938b;font-size:13px;font-weight:700}.tiny-sun{width:9px;height:9px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 4px #f8edca}.top-start{border:0;background:var(--white);border-radius:999px;padding:11px 17px;color:var(--green-deep);font-weight:800;font-size:13px;box-shadow:0 2px #e5eadb;cursor:pointer;transition:transform .18s,box-shadow .18s}.top-start:hover{transform:translateY(-2px);box-shadow:0 4px #e0e7d7}.play-triangle{display:inline-block;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:7px solid currentColor;margin-right:7px}#main-content{outline:none}.hero{max-width:1180px;margin:0 auto;padding:44px 34px 32px;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:35px}.eyebrow{color:var(--green);text-transform:uppercase;font-weight:900;letter-spacing:1.7px;font-size:11px;display:flex;gap:9px;align-items:center}.eyebrow:before{content:"";width:23px;height:2px;background:var(--yellow)}.hero h1{font:900 clamp(42px,5.4vw,68px)/.99 var(--display);letter-spacing:-2.6px;margin:17px 0 16px;max-width:580px}.hero h1 em{color:var(--green);font-style:normal;position:relative;white-space:nowrap}.hero h1 em:after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:9px;border-top:3px solid var(--yellow);border-radius:50%;transform:rotate(-2deg)}.hero-copy{color:#6c7e83;line-height:1.65;font-size:16px;max-width:465px;margin:0 0 24px}.hero-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.button-main{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:14px;background:var(--green);color:#fff;padding:15px 21px;font-weight:900;cursor:pointer;box-shadow:0 5px 0 var(--green-deep);transition:transform .16s,box-shadow .16s}.button-main:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--green-deep)}.button-main:active{transform:translateY(2px);box-shadow:0 2px 0 var(--green-deep)}.button-main .play-triangle{border-left-color:#fff}.hero-sub{color:#8b9994;font-size:12px;font-weight:700}.hero-art{min-height:260px;position:relative;display:grid;place-items:center}.art-blob{width:min(320px,82%);aspect-ratio:1;border-radius:48% 52% 51% 49%/51% 47% 53% 49%;background:#e7f1d9;position:absolute;transform:rotate(-8deg)}.art-card{position:relative;z-index:1;width:250px;background:#fffef8;border:1px solid #e6ebdd;border-radius:22px;padding:22px 23px;box-shadow:0 13px #45604414,0 20px 40px #3c503e17;transform:rotate(3deg)}.art-card-top{display:flex;justify-content:space-between;color:#93a298;text-transform:uppercase;font-weight:900;letter-spacing:1px;font-size:10px}.art-card-jp{display:flex;align-items:center;justify-content:center;gap:16px;margin:17px 0 10px}.art-card-jp strong{font:800 48px var(--display);color:#355d53}.art-arrow{color:#e9b853;font-size:21px;font-weight:900}.art-reading{text-align:center;color:var(--green);font:900 24px var(--display);letter-spacing:2px}.art-card p{margin:10px 0 0;text-align:center;font-size:12px;color:#9aa59d}.spark{position:absolute;z-index:2;width:24px;height:24px;color:var(--coral)}.spark-one{top:28px;left:16%;transform:rotate(-12deg)}.spark-two{bottom:38px;right:11%;color:#e7b64e;width:19px;height:19px}.mini-illustration{display:block;width:48px;height:48px;flex:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.art-leaf{position:absolute;width:31px;height:18px;border-radius:100% 0;background:#93c5a4;z-index:2;transform:rotate(-31deg)}.leaf-one{top:67px;right:14%}.leaf-two{bottom:49px;left:11%;transform:rotate(45deg) scale(.7);background:#c1d68d}.section-wrap{max-width:1180px;margin:auto;padding:28px 34px 75px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:22px}.section-heading h2{margin:0;font:900 28px var(--display);letter-spacing:-.7px}.section-heading p{margin:6px 0 0;color:#86938d;font-size:13px}.count-pill{background:#e8efdf;color:#607c67;border-radius:999px;padding:8px 12px;font-size:11px;font-weight:900;white-space:nowrap}.category-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px;align-items:start}.category-card{--cat-color:var(--green);--cat-soft:#e5f2e4;background:var(--white);border:1px solid var(--line);border-radius:19px;overflow:hidden;box-shadow:0 3px #4c674b09}.category-card.feature-wide{grid-column:1/-1}.category-card.pair-left{grid-column:1}.category-card.pair-right{grid-column:2}.category-head{padding:18px 20px 15px;display:flex;align-items:center;gap:13px;border-bottom:1px solid #edf0e7}.category-icon{width:38px;height:38px;display:grid;place-items:center;background:var(--cat-soft);color:var(--cat-color);border-radius:12px;flex:none}.category-icon svg{width:23px;height:23px}.category-title{flex:1;min-width:0}.category-title h3{font:900 17px var(--display);margin:0;letter-spacing:-.3px}.category-title p{margin:3px 0 0;color:#84918b;font-size:11px;font-weight:700}.category-start{color:var(--cat-color);background:var(--cat-soft);border:0;border-radius:999px;padding:9px 12px;cursor:pointer;font-weight:900;font-size:11px;white-space:nowrap;transition:transform .15s}.category-start:hover{transform:translateY(-2px)}.counter-list{padding:4px 18px 11px}.counter-row{display:grid;grid-template-columns:max-content minmax(80px,1fr) auto;align-items:center;gap:11px;padding:12px 3px;border-bottom:1px dashed #e9ede3}.counter-kanji{font:900 25px var(--display);color:#39564e;text-align:center;white-space:nowrap}.counter-info{min-width:0}.counter-meaning{font-size:12px;font-weight:800}.counter-note{margin-top:3px;color:#91a098;font-size:10px}.counter-example{background:#f5f7ef;border-radius:9px;padding:7px 9px;color:#65796f;font-size:11px;white-space:nowrap}.counter-example strong{color:#3b8069;font:900 13px var(--display)}.method-strip{margin:29px 0 0;background:#edf3e4;border-radius:16px;padding:18px 21px;display:flex;gap:14px;align-items:center}.method-icon{width:34px;height:34px;display:grid;place-items:center;background:#d8e8d1;border-radius:50%;color:#578466;font-weight:900;font-size:18px;flex:none}.method-strip strong{display:block;font:900 14px var(--display)}.method-strip span{display:block;margin-top:3px;font-size:12px;color:#788c7e}.site-footer{max-width:1180px;border-top:1px solid #e9edde;margin:auto;padding:22px 34px 30px;color:#98a39b;display:flex;justify-content:center;align-items:center;gap:8px;font-size:11px;font-weight:700}.footer-mark{color:var(--green);font:800 16px var(--display)}.footer-separator{color:#c2cabb}.practice-shell{max-width:880px;margin:0 auto;padding:23px 28px 70px}.practice-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:25px}.text-button{border:0;background:transparent;color:#6f827a;font-size:13px;font-weight:800;padding:8px 0;cursor:pointer}.text-button:hover{color:var(--green)}.quiz-label{color:#95a198;text-transform:uppercase;letter-spacing:1.4px;font-size:10px;font-weight:900}.progress-copy{color:#75867d;font-size:12px;font-weight:900}.progress-track{height:9px;background:#e6ecdf;border-radius:99px;overflow:hidden;margin-bottom:28px}.progress-fill{height:100%;border-radius:inherit;background:#79b596;transition:width .3s}.question-card{background:var(--white);border:1px solid #e8ecdf;border-radius:24px;padding:clamp(22px,5vw,43px);box-shadow:var(--shadow)}.question-kicker{display:flex;justify-content:center;align-items:center;gap:8px;color:#8c9a91;font-size:12px;font-weight:800}.question-dot{width:7px;height:7px;border-radius:50%;background:var(--yellow)}.question-art{width:82px;height:82px;margin:18px auto -6px;display:grid;place-items:center;border-radius:28px;background:#f8f5e8}.question-art .mini-illustration{width:64px;height:64px}.prompt-line{font:900 clamp(29px,6vw,43px)/1.2 var(--display);letter-spacing:-1px;text-align:center;margin:22px 0 8px}.prompt-line .prompt-count{color:var(--green)}.prompt-hint{text-align:center;color:#9aa59f;font-size:13px;margin:0}.answer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:29px}.answer-option{min-height:65px;background:#fbfcf7;border:2px solid #e9eee4;border-radius:14px;color:#496056;font:800 21px var(--display);cursor:pointer;transition:transform .15s,border-color .15s,background .15s}.answer-option:hover:not(:disabled){border-color:#a9cfb1;transform:translateY(-2px);background:#f2f8ef}.answer-option:disabled{cursor:default}.answer-option.is-correct{border-color:#79bd8e;background:#e9f6e9;color:#397a55}.answer-option.is-wrong{border-color:#e89b85;background:#fff0e9;color:#ad624f}.feedback{min-height:76px;margin-top:17px;border-radius:14px;padding:15px 17px;display:flex;align-items:center;gap:13px;background:#f1f4eb;color:#6d8076}.feedback[hidden]{display:none}.feedback-mark{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:#dcefe0;color:#3a865e;font-weight:900;flex:none}.feedback.is-no{background:#fff2eb;color:#966b5e}.feedback.is-no .feedback-mark{background:#f7dfd4;color:#b56c57}.feedback strong{display:block;font:900 14px var(--display);color:#3d6654}.feedback.is-no strong{color:#a35d4c}.feedback span{display:block;font-size:12px;line-height:1.45;margin-top:2px}.feedback-reading{font-weight:900;color:#397e62}.question-footer{display:flex;justify-content:space-between;align-items:center;margin-top:22px;gap:14px}.sentence-hint{color:#9aa49b;font-size:11px}.next-button{border:0;border-radius:12px;background:#3a8d72;color:#fff;font-weight:900;padding:13px 18px;cursor:pointer;box-shadow:0 4px #276f5a;transition:transform .15s}.next-button:hover{transform:translateY(-2px)}.next-button:disabled{background:#c8d4c9;box-shadow:0 4px #afc0b0;cursor:not-allowed;transform:none}.example-reveal{margin:16px auto 0;padding:14px 16px;background:#fffef5;border:1px solid #f0ebd7;border-radius:12px;text-align:center;max-width:560px}.example-reveal[hidden]{display:none}.example-japanese{font-size:16px;font-weight:800}.example-translation{color:#84918a;font-size:12px;margin-top:4px}.result-shell{max-width:820px;margin:0 auto;padding:24px 26px 75px}.result-hero{text-align:center;background:#e9f2df;border-radius:24px;padding:33px 20px 29px;position:relative;overflow:hidden}.result-kicker{text-transform:uppercase;letter-spacing:1.5px;font-size:10px;font-weight:900;color:#739278}.result-hero h1{font:900 clamp(35px,7vw,52px)/1 var(--display);letter-spacing:-1.7px;margin:12px 0 8px}.result-hero p{color:#718679;margin:0;font-size:14px}.score-bubble{width:116px;height:116px;border-radius:50%;margin:20px auto 0;background:#fffef8;border:6px solid #cce1c9;display:grid;place-content:center;box-shadow:0 5px #4c6f4e14}.score-bubble strong{font:900 37px var(--display);color:#367c61;line-height:1}.score-bubble span{color:#8a9b8b;font-size:11px;font-weight:800;margin-top:3px}.result-actions{display:flex;justify-content:center;gap:12px;margin:20px 0 29px;flex-wrap:wrap}.button-secondary{border:2px solid #dfe8db;background:#fffef8;color:#537064;border-radius:13px;padding:12px 19px;font-weight:900;cursor:pointer}.button-secondary:hover{background:#f1f7ed}.wrong-title{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:13px}.wrong-title h2{font:900 21px var(--display);margin:0}.wrong-title span{color:#97a299;font-size:11px;font-weight:800}.wrong-list{display:grid;gap:10px}.wrong-card{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:grid;grid-template-columns:1fr auto;gap:8px 14px;align-items:center}.wrong-prompt{font-weight:900}.wrong-prompt small{display:block;color:#95a097;font-size:11px;font-weight:700;margin-top:3px}.wrong-answer{text-align:right;font:900 17px var(--display);color:#438264}.wrong-answer small{display:block;color:#9aa59e;font:700 10px var(--font);margin-top:3px}.all-correct{text-align:center;padding:30px 14px;background:#f0f6eb;color:#62816b;border-radius:15px;font-weight:800}.all-correct[hidden]{display:none}.screen-enter{animation:enter .32s ease both}@keyframes enter{0%{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}@media(max-width:760px){.topbar{padding:15px 20px}.topbar-note{display:none}.hero{padding:34px 22px 22px;grid-template-columns:1fr;gap:5px}.hero h1{font-size:clamp(42px,11vw,60px)}.hero-art{min-height:230px;margin-top:-4px}.art-card{width:230px;padding:18px}.section-wrap{padding:20px 18px 55px}.category-grid{gap:12px}.category-card.pair-left,.category-card.pair-right{grid-column:auto}.counter-example{white-space:normal;text-align:right;max-width:105px}.practice-shell,.result-shell{padding:18px 18px 55px}.site-footer{padding-left:15px;padding-right:15px;flex-wrap:wrap}}@media(max-width:540px){.topbar{padding:13px 16px}.brand{font-size:19px}.top-start{padding:10px 12px;font-size:11px}.hero{padding:29px 20px 14px}.hero-copy{font-size:14px}.hero-art{min-height:210px}.section-wrap{padding:19px 15px 45px}.section-heading h2{font-size:23px}.count-pill{font-size:10px}.category-grid{grid-template-columns:1fr}.category-card.feature-wide,.category-card.pair-left,.category-card.pair-right{grid-column:1}.category-head{padding:16px 15px 13px}.category-title h3{font-size:16px}.counter-list{padding:3px 13px 9px}.counter-row{grid-template-columns:42px minmax(78px,1fr) auto;gap:8px}.counter-example{max-width:96px;padding:7px;font-size:10px}.counter-example strong{font-size:12px}.method-strip{align-items:flex-start;padding:15px}.answer-grid{gap:9px}.answer-option{min-height:59px;font-size:18px}.question-card{border-radius:19px}.question-footer{align-items:flex-end}.sentence-hint{max-width:130px;line-height:1.4}.wrong-card{padding:12px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}.top-start{text-decoration:none;display:inline-flex;align-items:center;gap:7px}.category-total{color:#97a198;font-size:10px;font-weight:800;white-space:nowrap}.counter-row{width:100%;text-align:left;font-family:inherit;background:transparent;border:0;border-bottom:1px dashed #e9ede3;position:relative;cursor:pointer;transition:background .16s,padding .16s,border-radius .16s}.counter-row:last-child{border-bottom:0}.counter-row:hover{background:#f7f9f1;border-radius:10px;padding-left:9px;padding-right:9px}.counter-row:focus-visible{position:relative;z-index:2}.counter-info{display:flex;flex-direction:column}.counter-example{display:inline-block}.counter-chevron{display:none;color:var(--cat-color);font-size:16px;font-weight:900}.study-shell{max-width:880px;margin:0 auto;padding:23px 28px 72px}.study-hero{background:#fffef8;border:1px solid #e7ecdd;border-radius:25px;padding:clamp(22px,5vw,43px);box-shadow:var(--shadow)}.study-kicker{color:#8a9b8d;text-transform:uppercase;letter-spacing:1.5px;font-size:10px;font-weight:900}.study-title-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 0 9px}.study-title-row h1{margin:0;color:#355d53;font:900 clamp(38px,7vw,58px)/1 var(--display);letter-spacing:-1.5px}.study-title-row h1 small{display:block;margin-top:8px;color:#83948a;font:800 15px var(--font);letter-spacing:0}.study-title-row p{color:#94a097;font-size:12px;margin:8px 0 0}.study-art{width:94px;height:94px;display:grid;place-items:center;flex:none;border-radius:34px 29px 36px 26px;background:#edf3e4;transform:rotate(3deg)}.study-art .mini-illustration{width:72px;height:72px}.study-intro{max-width:610px;margin:16px 0 21px;color:#708078;font-size:14px;line-height:1.65}.reading-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px}.reading-row{display:grid;grid-template-columns:42px 18px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:48px;padding:7px 12px;border:1px solid #e9eddf;background:#fbfcf7;border-radius:12px}.reading-quantity{color:#6b8974;font-size:16px;font-weight:900}.reading-equals{color:#bec8b8;font-size:12px}.reading-kana{color:#3d6757;font:900 19px var(--display);letter-spacing:.2px}.reading-note{color:#a0aaa1;font-size:10px}.study-actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:24px;padding-top:19px;border-top:1px solid #edf0e6}.study-actions .button-main{min-height:49px}.quantity-tag{width:max-content;margin:19px auto -12px;padding:6px 11px;border-radius:999px;background:#f8f0d9;color:#92723a;font-size:12px;font-weight:900}.question-card{padding-top:31px}.question-art{width:104px;height:104px;border-radius:32px 27px 35px 28px;background:#f3f4e6}.question-art .mini-illustration{width:88px;height:88px}.prompt-line{margin-top:22px}.answer-grid{grid-template-columns:1fr;gap:9px}.answer-option{display:flex;align-items:center;gap:12px;min-height:57px;padding:10px 14px;text-align:left;font:800 17px/1.5 var(--display)}.answer-option>span:last-child{flex:1}.choice-number{color:#b1bba8;font-size:13px;font-weight:900;flex:none}.answer-option.is-correct .choice-number{color:#397a55}.answer-option.is-wrong .choice-number{color:#ad624f}.feedback,.example-reveal{animation:enter .24s ease both}.wrong-answer{max-width:70%;font-size:15px}.wrong-answer small{line-height:1.5}.loading-card .answer-option{min-height:57px;background:linear-gradient(90deg,#f4f6ee 25%,#fafbf6,#f4f6ee 75%);background-size:220% 100%;animation:shimmer 1.5s ease-in-out infinite}@keyframes shimmer{to{background-position:-220% 0}}@media(max-width:760px){.study-shell{padding:18px 18px 55px}.reading-list{gap:7px}}@media(max-width:540px){.category-total{display:none}.counter-row{grid-template-columns:38px minmax(70px,1fr) auto 14px;gap:7px}.counter-example{max-width:105px;text-align:right}.counter-chevron{display:block}.study-shell{padding:15px 14px 45px}.study-hero{border-radius:19px;padding:21px 16px}.study-title-row h1{font-size:45px}.study-art{width:72px;height:72px;border-radius:24px}.study-art .mini-illustration{width:59px;height:59px}.reading-list{grid-template-columns:1fr}.reading-row{min-height:45px}.study-actions .button-main{width:100%}.practice-top{gap:8px}.quiz-label{max-width:115px;text-align:center;line-height:1.4}.question-card{padding:24px 16px}.answer-option{font-size:15px;padding:10px 11px}.question-footer{align-items:flex-end}.wrong-card{grid-template-columns:1fr}.wrong-answer{max-width:none;text-align:left}}.photo-illustration{position:relative;display:inline-grid;place-items:center;width:48px;height:48px;flex:none;overflow:visible;border-radius:14px;background:#f7f4ea}.photo-illustration img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;filter:drop-shadow(0 3px 4px rgba(44,66,49,.12))}.illustration-badge{position:absolute;z-index:2;display:grid;place-items:center;min-width:25px;height:25px;padding:0 6px;border:2px solid #fffef8;border-radius:999px;background:#3a8d72;color:#fff;font:900 11px/1 var(--font);white-space:nowrap;box-shadow:0 2px 5px #263b4529}.illustration-badge.count{top:-4px;right:-8px}.illustration-badge.calendar-marker{top:34%;left:50%;min-width:0;height:auto;padding:3px 6px;transform:translate(-50%);border:1px solid #f1d9c9;border-radius:5px;background:#fffaf2;color:#c85f4e;font-size:clamp(11px,2vw,17px)}.illustration-badge.door-marker{top:18%;left:50%;right:auto;transform:translate(-50%);min-width:22px;height:22px;border-radius:5px;background:#fff7df;color:#60482d;font-size:12px}.clock-hands{position:absolute;inset:20%;width:60%;height:60%;overflow:visible;pointer-events:none}.clock-hands line{stroke:#344b4c;stroke-width:4;stroke-linecap:round}.clock-hands line:first-of-type{stroke-width:5}.clock-hands circle{fill:#ef8874}.art-card-jp .photo-illustration{width:68px;height:68px}.study-art .photo-illustration{width:75px;height:75px}.question-art .photo-illustration{width:84px;height:84px}@media(max-width:540px){.art-card-jp .photo-illustration{width:60px;height:60px}.study-art .photo-illustration{width:57px;height:57px}.question-art .photo-illustration{width:78px;height:78px}}