:root{--text:#5b6275;--text-h:#0f1222;--bg:#f5f6fb;--surface:#ffffffc7;--border:#0f122217;--code-bg:#0f12220d;--accent:#6d5efc;--accent-2:#22d3ee;--grad:linear-gradient(135deg, #6d5efc 0%, #a855f7 55%, #ec4899 100%);--accent-bg:#6d5efc1a;--accent-border:#6d5efc8c;--ok:#10b981;--shadow:0 1px 2px #0f12220a, 0 12px 32px -12px #3c32a02e;--glow:0 8px 24px -6px #6d5efc8c;--ease:cubic-bezier(.22, 1, .36, 1);--spring:cubic-bezier(.34, 1.56, .64, 1);--sans:"Inter", system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;--mono:ui-monospace, "SF Mono", Consolas, monospace;font:16px/1.65 var(--sans);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--text:#9aa3b8;--text-h:#f4f5fb;--bg:#0b0d17;--surface:#181b2cb8;--border:#ffffff14;--code-bg:#ffffff0f;--accent:#8b7dff;--accent-bg:#8b7dff24;--accent-border:#8b7dff99;--shadow:0 1px 2px #0006, 0 16px 40px -14px #000000b3;--glow:0 8px 28px -6px #8b7dff8c}}*{box-sizing:border-box}body{background:radial-gradient(60rem 30rem at 10% -10%, #6d5efc2e, transparent 60%), radial-gradient(50rem 28rem at 100% 0%, #ec48991f, transparent 60%), var(--bg);background-attachment:fixed;min-height:100svh;margin:0}#root{flex-direction:column;max-width:720px;min-height:100svh;margin:0 auto;display:flex}main{animation:fade-in .5s var(--ease) both;padding:20px 16px 64px}h1,h2,h3{color:var(--text-h);letter-spacing:-.02em;font-weight:700}h1{margin:20px 0 8px;font-size:30px;line-height:1.2}h2{margin:0 0 8px;font-size:20px;line-height:1.3}p{margin:0 0 8px}a{color:var(--accent);transition:background-size .3s var(--ease);background-image:linear-gradient(currentColor,currentColor);background-position:0 100%;background-repeat:no-repeat;background-size:0 1.5px;text-decoration:none}a:hover{background-size:100% 1.5px}code{font-family:var(--mono);background:var(--code-bg);color:var(--text-h);border-radius:6px;padding:2px 6px;font-size:.9em}.nav{border:1px solid var(--border);background:var(--surface);-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow);border-radius:999px;gap:4px;margin-bottom:8px;padding:4px;font-size:14px;display:inline-flex}.nav a{color:var(--text);transition:background .2s, color .2s, transform .2s var(--spring);background-image:none;border-radius:999px;padding:6px 14px}.nav a:hover{background:var(--accent-bg);color:var(--text-h)}.nav a:active{transform:scale(.94)}.nav a.active{background:var(--grad);color:#fff;box-shadow:var(--glow)}.nav span{display:none}.doc-list{gap:10px;padding:0;list-style:none;display:grid}.doc-list li{animation:rise .5s var(--ease) both;animation-delay:calc(var(--i,0) * 40ms);margin:0}.doc-list a{border:1px solid var(--border);background:var(--surface);color:var(--text-h);box-shadow:var(--shadow);transition:transform .25s var(--spring), border-color .2s;background-image:none;border-radius:14px;padding:14px 16px;display:block}.doc-list a:hover{border-color:var(--accent-border);transform:translate(4px)}.doc{text-align:left}.doc pre{background:var(--code-bg);border-radius:12px;padding:14px;font-size:14px;overflow-x:auto}.doc pre code{background:0 0;padding:0}.doc blockquote{border-left:3px solid var(--accent-border);color:var(--text);margin:12px 0;padding:4px 14px}.table-wrap{overflow-x:auto}.doc table{border-collapse:collapse;margin:12px 0;font-size:15px}.doc th,.doc td{border:1px solid var(--border);text-align:left;vertical-align:top;padding:6px 10px}.lesson{text-align:left}.lesson h1{background:var(--grad);color:#0000;-webkit-background-clip:text;background-clip:text;margin:16px 0 4px;font-size:28px}.note{color:var(--text);font-size:13px}.q{color:var(--text-h);margin:8px 0 14px;font-size:20px;font-weight:600}.coach{border:1px solid var(--accent-border);background:var(--accent-bg);animation:rise .6s var(--ease) both;border-radius:14px;margin:14px 0;padding:12px 16px}.progress{background:var(--code-bg);border-radius:999px;height:6px;margin:14px 0 10px;overflow:hidden}.progress i{height:100%;width:var(--p,0%);border-radius:inherit;background:var(--grad);transition:width .7s var(--ease);background-size:200% 100%;animation:3s linear infinite shimmer;display:block}.steps{flex-wrap:wrap;gap:6px;margin:0 0 16px;padding:0;font-size:13px;list-style:none;display:flex}.steps li{border:1px solid var(--border);background:var(--surface);transition:all .3s var(--ease);border-radius:999px;padding:4px 12px}.steps .cur{color:#fff;background:var(--grad);box-shadow:var(--glow);border-color:#0000;transform:scale(1.04)}.steps .done{color:var(--ok);border-color:#10b98159}.steps .done:before{content:"✓ "}.part{text-align:left;border:1px solid var(--border);background:var(--surface);-webkit-backdrop-filter:blur(16px);box-shadow:var(--shadow);animation:card-in .55s var(--ease) both;border-radius:20px;margin-top:12px;padding:20px}.part section{margin:16px 0}.part h3{text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin:18px 0 6px;font-size:13px}.row{flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0;display:flex}.word{min-width:6em;color:var(--text-h);font-weight:600}.choices{gap:10px;display:grid}.timer{font-variant-numeric:tabular-nums;letter-spacing:-.03em;color:var(--text-h);margin:4px 0;font-size:44px;font-weight:700;transition:color .3s}.timer.run{color:var(--accent);animation:1.4s ease-in-out infinite breathe}.btn{font:inherit;border:1px solid var(--border);background:var(--surface);min-height:46px;color:var(--text-h);cursor:pointer;text-align:left;transition:transform .25s var(--spring), box-shadow .25s, border-color .2s, background .2s;-webkit-tap-highlight-color:transparent;border-radius:14px;margin:2px 4px 2px 0;padding:10px 16px;font-weight:600;position:relative;overflow:hidden}.btn:hover:not(:disabled){border-color:var(--accent-border);box-shadow:var(--shadow);transform:translateY(-2px)}.btn:active:not(:disabled){transition-duration:80ms;transform:scale(.96)}.btn:focus-visible,.link:focus-visible,textarea:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn.small{border-radius:12px;min-height:38px;padding:6px 12px;font-size:14px}.btn.on{border-color:var(--accent);background:var(--accent-bg);animation:pop .4s var(--spring)}.btn.on:after{content:"✓";color:var(--accent);margin-left:8px}.btn.primary{color:#fff;background:var(--grad);box-shadow:var(--glow);text-align:center;background-size:140% 100%;border-color:#0000}.btn.primary:hover:not(:disabled){background-position:100% 0;box-shadow:0 12px 32px -6px #6d5efcb3}.btn.primary:before{content:"";background:linear-gradient(105deg,#0000 35%,#ffffff73 50%,#0000 65%);position:absolute;inset:0;transform:translate(-120%)}.btn.primary:hover:before{transition:transform .7s var(--ease);transform:translate(120%)}.btn.rec{color:#ef4444;border-color:#ef4444;animation:1.3s ease-out infinite pulse-ring}.btn:disabled{opacity:.4;cursor:not-allowed}.link{font:inherit;color:var(--accent);cursor:pointer;background:0 0;border:none;padding:0}.link:disabled{opacity:.4}textarea,input{font:inherit;border:1px solid var(--border);background:var(--code-bg);color:var(--text-h);border-radius:12px;padding:12px 14px;transition:border-color .2s,box-shadow .2s}textarea{resize:vertical;width:100%;margin:8px 0}input{margin:4px 8px 4px 0}textarea:focus,input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-bg);outline:none}.login{text-align:left}.done-card{text-align:center;position:relative;overflow:hidden}.done-card .check{color:#fff;background:var(--grad);width:72px;height:72px;box-shadow:var(--glow);animation:pop .7s var(--spring) both;border-radius:50%;place-items:center;margin:4px auto 12px;font-size:36px;display:grid}.confetti{pointer-events:none;position:absolute;inset:0}.confetti i{background:hsl(calc(var(--n) * 37), 85%, 60%);opacity:0;width:8px;height:12px;animation:burst 1.3s var(--ease) both;animation-delay:calc(var(--n) * 12ms);--x:calc((var(--n) - 12) * 15px);--r:calc(var(--n) * 53deg);border-radius:2px;position:absolute;top:28px;left:50%}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes rise{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes card-in{0%{opacity:0;transform:translateY(18px)scale(.98)}to{opacity:1;transform:none}}@keyframes pop{0%{transform:scale(.94)}55%{transform:scale(1.04)}to{transform:scale(1)}}@keyframes shimmer{to{background-position:200% 0}}@keyframes breathe{50%{opacity:.55}}@keyframes pulse-ring{0%{box-shadow:0 0 #ef444480}to{box-shadow:0 0 0 14px #ef444400}}@keyframes burst{0%{opacity:1;transform:translate(0)rotate(0)}to{opacity:0;transform:translate(var(--x), calc(60px + (var(--n) * 6px))) rotate(var(--r))}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.roadmap{margin:8px 0 16px}.road-steps{grid-template-columns:repeat(4,1fr);gap:6px;margin:0;padding:0;list-style:none;display:grid}.road-step button{border:1px solid var(--border);background:var(--surface);width:100%;color:var(--text);font:inherit;cursor:pointer;transition:transform .2s var(--spring), border-color .2s;border-radius:14px;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;font-size:13px;display:flex}.road-step button:hover{transform:translateY(-2px)}.road-step.sel button,.road-step.now button{border-color:var(--accent-border)}.road-dot{background:var(--code-bg);width:28px;height:28px;color:var(--text-h);border-radius:50%;place-items:center;font-size:12px;font-weight:700;display:grid}.road-step.now .road-dot{background:var(--grad);color:#fff;box-shadow:var(--glow)}.road-step.done .road-dot{background:var(--ok);color:#fff}.road-label{color:var(--text-h);font-weight:600}.road-here{color:var(--accent);font-size:11px}.road-detail{border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow);animation:fade-in .3s var(--ease) both;border-radius:14px;margin-top:8px;padding:14px 16px}.road-meta{font-size:13px}