:root{--bg: #0f1226;--bg-soft: #171a35;--panel: #1d2142;--panel-2: #252a52;--text: #e9ecff;--muted: #a2a7d0;--accent: #61dafb;--accent-2: #7c5cff;--ok: #2ecc71;--ng: #ff6b6b;--border: #2c3160;--radius: 14px;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:Hiragino Sans,Hiragino Kaku Gothic ProN,Noto Sans JP,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.7;-webkit-font-smoothing:antialiased}button{font-family:inherit;cursor:pointer}code,pre{font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace}.app{display:flex;min-height:100vh}.menu-toggle{display:none;position:fixed;top:14px;left:14px;z-index:30;width:44px;height:44px;border-radius:12px;border:1px solid var(--border);background:var(--panel);color:var(--text);font-size:20px}.overlay{display:none}.sidebar{width:320px;flex-shrink:0;background:var(--bg-soft);border-right:1px solid var(--border);padding:22px 18px;display:flex;flex-direction:column;gap:18px;position:sticky;top:0;height:100vh;overflow-y:auto}.brand{display:flex;align-items:center;gap:12px}.brand-logo{font-size:34px}.brand-title{margin:0;font-size:20px;background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}.brand-sub{margin:2px 0 0;font-size:12px;color:var(--muted)}.progress{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:14px}.progress-head{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin-bottom:8px}.progress-bar{height:8px;background:var(--panel-2);border-radius:99px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:99px;transition:width .4s ease}.lesson-nav{display:flex;flex-direction:column;gap:6px;flex:1}.lesson-item{display:flex;align-items:center;gap:10px;text-align:left;padding:10px 12px;border-radius:12px;border:1px solid transparent;background:transparent;color:var(--text);transition:background .15s,border-color .15s}.lesson-item:hover{background:var(--panel)}.lesson-item.active{background:var(--panel);border-color:var(--accent)}.lesson-status{flex-shrink:0;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;background:var(--panel-2);color:var(--muted)}.lesson-status.done{background:var(--ok);color:#06210f}.lesson-emoji{font-size:18px}.lesson-text{display:flex;flex-direction:column;min-width:0}.lesson-name{font-size:14px;font-weight:600}.lesson-desc{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reset-link{background:none;border:none;color:var(--muted);font-size:12px;text-decoration:underline;align-self:flex-start}.reset-link:hover{color:var(--ng)}.main{flex:1;padding:40px clamp(20px,5vw,64px) 60px;max-width:860px;margin:0 auto;width:100%}.celebrate{background:linear-gradient(90deg,#2ecc712e,#7c5cff2e);border:1px solid var(--ok);border-radius:var(--radius);padding:14px 18px;margin-bottom:24px;font-weight:600}.lesson-header{margin-bottom:28px}.lesson-step{display:inline-block;font-size:12px;color:var(--accent);background:#61dafb1f;padding:4px 10px;border-radius:99px;margin-bottom:10px}.lesson-header h1{margin:0;font-size:clamp(26px,4vw,34px)}.lesson-subtitle{margin:6px 0 0;color:var(--muted)}.lesson-section{margin-bottom:30px}.lesson-section h2{font-size:18px;border-left:4px solid var(--accent);padding-left:12px;margin:0 0 12px}.lesson-section p{margin:0 0 12px;white-space:pre-line;color:#d3d7f5}.demo-box{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:26px;position:relative}.demo-box:before{content:"LIVE DEMO";position:absolute;top:10px;right:14px;font-size:10px;letter-spacing:1px;color:var(--accent);opacity:.7}.demo-stack{display:flex;flex-direction:column;gap:14px;align-items:flex-start}.demo-greet{margin:0;font-size:26px}.demo-input{width:100%;max-width:320px;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--bg-soft);color:var(--text);font-size:15px}.demo-input:focus{outline:2px solid var(--accent);border-color:transparent}.demo-hint{font-size:13px;color:var(--muted);margin:0}.demo-card{background:var(--bg-soft);border:1px solid var(--border);border-radius:12px;padding:16px;width:100%}.demo-user{display:flex;flex-direction:column;background:var(--bg-soft);border-left:4px solid var(--accent);border-radius:8px;padding:10px 14px;width:100%}.demo-user span{font-size:13px;color:var(--muted)}.demo-counter{font-size:56px;font-weight:800;line-height:1;background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}.demo-row{display:flex;gap:10px;flex-wrap:wrap}.demo-list{list-style:none;padding:0;margin:0;width:100%;display:flex;flex-direction:column;gap:6px}.demo-list li{display:flex;justify-content:space-between;align-items:center;background:var(--bg-soft);border:1px solid var(--border);border-radius:8px;padding:8px 12px}.color-swatch{width:30px;height:30px;border-radius:8px;border:none;outline-offset:2px;cursor:pointer}.chip-x{background:none;border:none;color:var(--muted);font-size:13px}.chip-x:hover{color:var(--ng)}.btn{padding:10px 16px;border-radius:10px;border:1px solid var(--border);background:var(--panel-2);color:var(--text);font-size:14px;font-weight:600;transition:transform .1s,filter .15s}.btn:hover:not(:disabled){filter:brightness(1.15)}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));border:none;color:#06121f}.btn-ghost{background:transparent}.btn-big{font-size:18px;padding:14px 28px;color:#fff}.codeblock{background:#0b0e22;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.codeblock-bar{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:#11142b;border-bottom:1px solid var(--border)}.dots{display:flex;gap:6px}.dots i{width:11px;height:11px;border-radius:50%;display:inline-block}.copy-btn{background:none;border:1px solid var(--border);color:var(--muted);font-size:12px;padding:4px 10px;border-radius:7px}.copy-btn:hover{color:var(--text)}.codeblock pre{margin:0;padding:16px;overflow-x:auto;font-size:13.5px;line-height:1.6;color:#d7defb}.typing-lead{margin:0 0 14px;font-size:14px;color:var(--muted)}.typing{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.typing-head{display:flex;align-items:center;gap:14px;padding:12px 16px;background:#11142b;border-bottom:1px solid var(--border)}.typing-progress{flex:1;height:8px;background:var(--panel-2);border-radius:99px;overflow:hidden}.typing-progress>i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:99px;transition:width .2s ease}.typing-stat{flex-shrink:0;font-size:12px;color:var(--muted);white-space:nowrap}.typing-target{margin:0;padding:16px;background:#0b0e22;color:#5b628a;font-size:13.5px;line-height:1.7;white-space:pre-wrap;word-break:break-word;max-height:260px;overflow:auto}.typing-target .tc.ok{color:#7ee787}.typing-target .tc.bad{color:#fff;background:#ff6b6b73;border-radius:2px}.typing-target .tc.cur{background:#61dafb66;border-radius:2px}.typing-input{display:block;width:100%;border:none;border-top:1px solid var(--border);background:var(--bg-soft);color:var(--text);font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:13.5px;line-height:1.7;padding:14px 16px;min-height:150px;resize:vertical}.typing-input:focus{outline:2px solid var(--accent);outline-offset:-2px}.typing-input.has-error{border-top-color:var(--ng);box-shadow:inset 0 2px #ff6b6b80}.typing-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--border)}.typing-done{font-size:14px;font-weight:700;color:var(--ok);animation:typing-pop .4s ease}.typing-msg{font-size:13px;color:var(--muted)}.typing-msg.ng{color:var(--ng)}.typing.is-done{animation:typing-glow .7s ease}@keyframes typing-glow{0%{box-shadow:0 0 #2ecc7100}40%{box-shadow:0 0 0 3px #2ecc718c}to{box-shadow:0 0 #2ecc7100}}@keyframes typing-pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.12)}to{transform:scale(1);opacity:1}}.typing-result{position:relative;border-top:1px solid var(--border);padding:18px 16px;background:#2ecc7112;animation:typing-reveal .45s ease both}@keyframes typing-reveal{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.typing-result-title{margin:0 0 14px;font-weight:700;color:var(--ok)}.typing-celebrate{position:absolute;top:8px;left:50%;width:0;height:0;pointer-events:none}.confetti{position:absolute;width:9px;height:9px;border-radius:2px;opacity:0;animation:confetti-fly .95s ease-out forwards;animation-delay:var(--delay)}@keyframes confetti-fly{0%{transform:translate(0) rotate(0);opacity:1}to{transform:translate(var(--x),var(--y)) rotate(var(--rot));opacity:0}}@media(prefers-reduced-motion:reduce){.typing.is-done,.typing-done,.typing-result,.confetti{animation:none}.confetti{display:none}}.quiz{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:24px;margin-top:8px}.quiz-title{margin:0 0 14px;font-size:18px;display:flex;align-items:center;gap:10px}.badge-done{font-size:11px;background:var(--ok);color:#06210f;padding:2px 8px;border-radius:99px;font-weight:700}.quiz-question{margin:0 0 16px;font-weight:600}.quiz-options{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}.quiz-option{display:flex;align-items:center;gap:12px;text-align:left;padding:12px 14px;border-radius:10px;border:1px solid var(--border);background:var(--bg-soft);color:var(--text);font-size:14px;transition:border-color .15s,background .15s}.quiz-option:hover:not(:disabled){border-color:var(--accent)}.quiz-option.selected{border-color:var(--accent);background:#61dafb1a}.quiz-option.correct{border-color:var(--ok);background:#2ecc7126}.quiz-option.wrong{border-color:var(--ng);background:#ff6b6b26}.quiz-option:disabled{cursor:default}.quiz-mark{flex-shrink:0;width:24px;height:24px;border-radius:6px;display:grid;place-items:center;background:var(--panel-2);font-weight:700;font-size:12px}.quiz-result{border-radius:10px;padding:14px 16px;margin-top:4px}.quiz-result.ok{background:#2ecc711f;border:1px solid var(--ok)}.quiz-result.ng{background:#ff6b6b1a;border:1px solid var(--ng)}.quiz-result p{margin:8px 0 12px;font-size:14px;color:#d3d7f5}.lesson-pager{display:flex;justify-content:space-between;gap:12px;margin-top:32px}.app-footer{margin-top:48px;padding-top:20px;border-top:1px solid var(--border);text-align:center;font-size:12px;color:var(--muted)}@media(max-width:820px){.menu-toggle{display:block}.sidebar{position:fixed;left:0;top:0;z-index:25;transform:translate(-100%);transition:transform .25s ease;box-shadow:0 0 40px #00000080}.sidebar.open{transform:translate(0)}.overlay{display:block;position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:20}.main{padding-top:70px}}