
:root{--bg:#101b2c;--panel:#1b2a40;--mint:#76edc4;--text:#edf5ff}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,sans-serif}button,input,select{font:inherit}button{cursor:pointer;color:inherit;border:1px solid #40526a;background:var(--panel);border-radius:14px;padding:14px}button:hover{border-color:var(--mint);transform:translateY(-1px)}button:focus-visible{outline:3px solid #fff}header,main{max-width:1100px;margin:auto;padding:22px}header{display:flex;align-items:center;justify-content:space-between;gap:15px}small,.muted{color:#afc1d6}h1{font-size:clamp(30px,6vw,55px);line-height:1.2;margin:14px 0}h2{font-size:25px}p{line-height:1.9}nav{display:flex;gap:8px;overflow:auto;padding:5px 0 16px}nav button{white-space:nowrap}nav button.active,.primary{background:var(--mint);color:#102e2b;border-color:var(--mint);font-weight:bold}.hero{background:radial-gradient(circle at 85% 50%,#285d68,transparent 45%),#192b42;border:1px solid #3a516b;border-radius:26px;padding:30px;margin:8px 0 24px}.eyebrow{letter-spacing:.16em;font-size:12px;color:var(--mint)}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:15px}.card{background:var(--panel);border:1px solid #34475f;border-radius:20px;padding:22px;text-align:left}.icon{font-size:45px}.card strong{display:block;font-size:21px;margin:10px 0}.tag{display:inline-block;background:#304459;color:#aaf4dc;border-radius:20px;padding:5px 12px;font-size:13px;margin:4px}.toolbar{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0}input,select{background:#edf5ff;color:#14253a;border:0;border-radius:12px;padding:12px;max-width:100%}.elements{display:grid;grid-template-columns:repeat(auto-fill,minmax(89px,1fr));gap:9px}.el{padding:10px 3px;text-align:center;border-top:3px solid #76edc4;min-height:105px}.el b{display:block;font-size:29px}.el span{font-size:11px}.el small{display:block}.seen{background:#234a49}.detail{background:#20354d;border:1px solid #536c86;border-radius:20px;padding:24px;margin:20px 0}.symbol{font-size:78px;color:var(--mint);font-weight:800}.options{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.options button{font-size:24px;min-height:86px}.correct{background:#225d4a!important}.wrong{background:#783840!important}.feedback{font-size:21px;font-weight:bold;min-height:40px;padding:12px 0}.big{text-align:center;font-size:35px;margin:32px 0}.meter{height:9px;background:#34465a;border-radius:20px;overflow:hidden}.meter i{display:block;height:100%;background:var(--mint)}.beaker{width:135px;height:160px;border:5px solid #d9e9f7;border-top:0;border-radius:0 0 30px 30px;margin:30px auto;background:linear-gradient(transparent 25%,var(--liquid,#9869dc) 25%);transition:background 1s;box-shadow:0 15px 60px #8661ab55}.flame{font-size:100px;text-align:center;filter:drop-shadow(0 0 25px var(--fire,#ffda53));color:var(--fire);padding:20px}.profile{font-size:13px;padding:9px}.notice{border-left:3px solid var(--mint);padding:10px 17px;color:#c3d4e7}footer{padding:35px 0;color:#9bb0c6;font-size:12px}a{color:var(--mint)}@media(max-width:600px){header,main{padding:15px}.hero{padding:21px}.grid{grid-template-columns:1fr 1fr}.card{padding:15px}.card strong{font-size:17px}.grid .card p{font-size:13px}.elements{grid-template-columns:repeat(4,1fr)}.options button{font-size:20px}}
ruby{ruby-align:center}rt{font-size:.62em;color:#c4e8dd;line-height:1.5}body.no-ruby rt{display:none}.reading-tools{max-width:1100px;margin:auto;padding:0 22px;display:flex;gap:8px;flex-wrap:wrap}.reading-tools button{padding:10px 14px;font-size:14px}p{line-height:2.3}.el{min-height:118px}.el span{line-height:2.4}nav button{line-height:2.2}header{line-height:2.1}@media(max-width:600px){.reading-tools{padding:0 15px}.elements{gap:6px}.el span{font-size:12px}.options button{line-height:2.3}}.lesson-section{margin:24px 0;padding-top:12px;border-top:1px solid #455b72}.lesson-section h3{font-size:19px;color:var(--mint);margin:10px 0}.lesson-section p{max-width:48em;font-size:17px}.lesson-lead{font-size:22px;font-weight:bold;color:#bbf8df}.word-help{background:#15273b;border-radius:14px;padding:16px;margin:14px 0}.word-help summary{cursor:pointer;font-weight:bold;line-height:2}.word-help p{font-size:16px}.lesson-actions{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}.guide-block{background:var(--panel);border:1px solid #3b536d;border-radius:18px;padding:22px;margin:18px 0}.model-row{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;margin:20px 0}.atom-dot{border:2px solid #88e5d0;background:#244941;border-radius:50%;width:65px;height:65px;display:grid;place-content:center;text-align:center;font-weight:bold}.oxygen-dot{background:#563847;border-color:#ffb0c1;width:78px;height:78px}.lesson-detail{scroll-margin-top:15px} .related-title{font-size:18px} @media(max-width:600px){.lesson-section p{font-size:16px}.detail{padding:19px}.guide-block{padding:18px}}
.hub-return{display:block;width:max-content;max-width:100%;margin:8px auto 0;padding:12px 18px;font-size:15px;font-weight:700;text-decoration:underline;text-underline-offset:4px}.backup-tools{margin:24px 0;padding:20px;border:1px solid currentColor;border-radius:16px;text-align:left;line-height:1.85}.backup-tools summary{cursor:pointer;font-weight:700;font-size:17px}.backup-tools p{font-size:15px;line-height:1.85}.backup-tools button,.backup-tools input{max-width:100%;margin:8px 0}.backup-tools button{min-height:44px}.backup-tools button:disabled{opacity:.45;cursor:not-allowed}.backup-file-label{display:block;margin-top:12px}.backup-tools a{text-decoration:underline;text-underline-offset:3px;color:inherit}.backup-tools input[type=file]{display:block;max-width:100%;font-size:14px}.backup-tools [role=status]{overflow-wrap:anywhere}

.backup-actions{display:flex;gap:8px;flex-wrap:wrap}.backup-tools textarea{display:block;width:100%;min-height:120px;max-width:100%;box-sizing:border-box;border:1px solid #9aafa5;border-radius:10px;background:#fff;color:#193d38;padding:12px;font:16px/1.5 system-ui,sans-serif;overflow-wrap:anywhere}.backup-tools textarea:focus-visible{outline:3px solid #e7a836;outline-offset:3px}.backup-tools [hidden]{display:none!important}.backup-paste{margin:16px 0;padding:12px 0;border-block:1px solid currentColor}.backup-paste summary{font-size:16px}.backup-tools>button{margin-right:8px}@media(max-width:550px){.backup-tools{padding:15px}.backup-actions>button{flex:1 1 140px}.backup-tools textarea{min-width:0}}
