:root{--ink:#153e38;--muted:#6e7d76;--paper:#f6f7f1;--line:#dfe5d8;--green:#d8ee80;--orange:#e6a768}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",sans-serif}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:0;border-radius:12px;padding:14px 20px;background:var(--ink);color:white;font-weight:650}button:disabled{opacity:.65;cursor:default}button.secondary{background:#e9eee2;color:var(--ink)}button.small{font-size:12px;padding:10px 13px;background:white;color:var(--ink);border:1px solid var(--line)}button:focus-visible,a:focus-visible{outline:3px solid #d08c36;outline-offset:4px}.shell{max-width:1050px;margin:auto;padding:0 35px 110px}header{height:94px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{text-decoration:none;color:var(--ink);font-size:22px;font-weight:800;letter-spacing:-1px;display:flex;align-items:center;gap:8px}.brand>span:last-child{font-weight:400;margin-left:-7px}.brand-icon{background:var(--ink);color:var(--green);border-radius:11px;width:36px;height:36px;display:grid;place-items:center;font-size:23px}main{padding-top:32px;min-height:70vh}.eyebrow{text-transform:uppercase;font-size:11px;letter-spacing:2px;font-weight:750;color:var(--muted)}h1{font-size:clamp(30px,5vw,48px);line-height:1.13;letter-spacing:-1.6px;font-weight:650;margin:15px 0}h2{font-size:23px;letter-spacing:-.6px;margin:0 0 10px}h3{font-size:17px;margin:0 0 9px}p{line-height:1.65}.muted{color:var(--muted)}.hero{background:var(--ink);border-radius:25px;color:#fff;padding:34px;display:grid;grid-template-columns:1.4fr 1fr;gap:20px;position:relative;overflow:hidden}.hero .eyebrow{color:#bfd4c2}.hero p{color:#c8d9cc;max-width:420px;font-size:14px}.hero button{background:var(--green);color:var(--ink);margin-top:12px}.hero-art{display:flex;align-items:center;justify-content:center;position:relative;min-height:220px}.art-card{position:absolute;width:170px;height:200px;background:#f5f5e9;color:var(--ink);border-radius:18px;padding:24px;transform:rotate(-9deg);box-shadow:0 12px 25px #0003}.art-card.back{background:#d8ee80;transform:rotate(12deg) translate(20px,2px)}.art-card .ko{font-size:38px;font-weight:700;margin-top:25px}.art-card .rule{height:2px;background:#b4c4ad;margin-top:18px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0 30px}.stat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:19px}.stat strong{font-size:29px;font-weight:650;display:block}.stat span{font-size:12px;color:var(--muted)}.section-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:26px 0 16px}.section-head a{font-size:13px;color:var(--ink)}.chapter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.chapter{display:block;text-decoration:none;color:var(--ink);padding:20px;border:1px solid var(--line);border-radius:17px;background:white;transition:transform .15s}.chapter:hover{transform:translateY(-3px);border-color:#9db591}.chapter .number{font-size:11px;letter-spacing:1px;color:var(--muted)}.chapter h3{margin:12px 0;min-height:40px}.pills{font-size:13px;color:#52645b;line-height:1.7;min-height:48px}.progress-track{height:4px;background:#e6ebdf;border-radius:4px;overflow:hidden;margin-top:17px}.progress-track i{display:block;height:100%;background:#89a95b}.searchbar{display:flex;gap:10px;margin:22px 0}input,select{border:1px solid var(--line);background:white;padding:14px;border-radius:12px;min-width:0;color:var(--ink)}input{flex:1}.backlink{display:inline-block;color:var(--muted);font-size:13px;text-decoration:none;margin-bottom:18px}.lesson{background:white;border:1px solid var(--line);border-radius:19px;padding:24px;margin:18px 0}.lesson .pattern{font-size:27px;letter-spacing:-.6px}.meaning{background:#eef4df;padding:13px 17px;border-radius:10px;font-size:15px}.original{width:100%;display:block;margin:18px 0;border:1px solid #e3e3dc;cursor:zoom-in}.lesson-actions{display:flex;flex-wrap:wrap;gap:10px}.caption{font-size:11px;color:var(--muted)}.flash-wrap{max-width:650px;margin:20px auto}.flash{background:white;border:1px solid var(--line);border-radius:25px;padding:30px;text-align:center;min-height:310px;display:flex;align-items:center;justify-content:center;flex-direction:column;box-shadow:0 10px 30px #153e3808}.flash .pattern{font-size:clamp(27px,5vw,39px);margin:30px 0;word-break:keep-all}.flash .answer{font-size:21px;line-height:1.5}.flash .original{margin-bottom:0}.ratings{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:17px}.ratings button:first-child{background:#f1dfd4;color:#81462d}.ratings button:last-child{background:var(--green);color:var(--ink)}.topline{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:18px}.quiz-options{display:grid;gap:11px;margin:25px 0}.option{text-align:left;background:white;color:var(--ink);border:1px solid var(--line);font-weight:500;line-height:1.5}.option.correct{background:#e5f2cf;border-color:#8dab61;opacity:1}.option.wrong{background:#fbe2dc;border-color:#d99383;opacity:1}.feedback{background:#eaf1e0;padding:15px;border-radius:12px;font-size:14px}.empty{background:white;border:1px solid var(--line);border-radius:20px;padding:35px;text-align:center}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.notice{padding:16px 20px;border:1px solid var(--line);border-radius:15px;background:#eef1e7;font-size:13px;line-height:1.6;margin:20px 0}.list-row{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line);gap:12px;font-size:14px}.circle{width:130px;height:130px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--green) var(--p),#e6ebdf 0);margin:auto}.circle>div{border-radius:50%;background:white;width:105px;height:105px;display:grid;place-content:center;font-size:27px;font-weight:700}.circle small{font-size:11px;font-weight:400;color:var(--muted)}nav{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);width:min(520px,calc(100% - 28px));background:#173e38f7;backdrop-filter:blur(16px);display:flex;justify-content:space-around;border-radius:21px;padding:10px 8px;z-index:10;box-shadow:0 10px 35px #0002}nav a{display:flex;flex-direction:column;align-items:center;color:#a9c1b3;text-decoration:none;gap:4px;font-size:22px;width:24%;padding:3px}nav a span{font-size:10px}nav a.active{color:var(--green)}footer{font-size:10px;line-height:1.6;color:var(--muted);padding-top:30px;text-align:center}dialog{width:min(1100px,98vw);max-height:95vh;padding:12px;border:0;border-radius:15px;background:white}dialog::backdrop{background:#102c2bd9}dialog img{display:block;width:100%;margin-top:14px}dialog button{display:block;margin-left:auto}#toast{position:fixed;top:12px;left:50%;transform:translateX(-50%);background:#153e38;color:white;padding:13px 20px;border-radius:12px;z-index:50;max-width:90%;display:none;font-size:13px}.split{display:grid;grid-template-columns:1fr 1fr;gap:18px}.chips{display:flex;gap:8px;flex-wrap:wrap}.chips a{padding:8px 13px;background:#e8edde;border-radius:20px;text-decoration:none;color:var(--ink);font-size:12px}.error{color:#a74034}.offline{font-size:12px;margin-top:10px;color:var(--muted)}@media(max-width:650px){.shell{padding:0 18px 110px}header{height:77px}.brand{font-size:20px}main{padding-top:23px}.hero{padding:25px;grid-template-columns:1fr}.hero-art{display:none}.hero h1{font-size:36px}.chapter-grid{grid-template-columns:1fr 1fr}.chapter{padding:16px}.chapter h3{font-size:14px;min-height:40px}.pills{font-size:12px}.stats{gap:8px}.stat{padding:14px 11px}.stat strong{font-size:24px}.stat span{font-size:10px}.lesson{padding:17px}.lesson .pattern{font-size:24px}.split{grid-template-columns:1fr}.flash{padding:22px 16px}.searchbar{flex-wrap:wrap}.searchbar select{flex:1}h1{font-size:31px}.section-head h2{font-size:20px}.hero p{font-size:13px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}


.brand-copy{display:flex;flex-direction:column;gap:3px;align-items:flex-start}.brand-name{font-size:22px;font-weight:800;line-height:1;letter-spacing:-.6px}.brand-tagline{font-size:10px;font-weight:500;line-height:1.3;letter-spacing:.8px;color:#6e7d76}@media(max-width:650px){.brand-name{font-size:20px}.brand-tagline{font-size:9px;letter-spacing:.6px}}