:root{--bg:#0b0e17;--bg-soft:#11162393;--surface:#151b2c;--surface-2:#1b2238;--border:#2a3350;--text:#e8ecf6;--text-dim:#9aa5c0;--accent:#6c7bff;--accent-2:#00d4b8;--warn:#ffb84d;--danger:#ff5d73;--ok:#3ddc97;--radius:14px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:PingFang SC,Hiragino Sans GB,Microsoft YaHei,-apple-system,system-ui,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(1100px 500px at 85% -10%, #6c7bff29, transparent 60%), radial-gradient(900px 500px at -10% 25%, #00d4b81a, transparent 55%), var(--bg);color:var(--text);min-height:100vh;margin:0;line-height:1.7}#root{min-height:100vh}a{color:var(--accent);text-decoration:none}.page{max-width:1080px;margin:0 auto;padding:28px 24px 80px}.section-title{letter-spacing:.04em;margin:0 0 18px;font-size:22px}.btn{border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;border-radius:10px;justify-content:center;align-items:center;gap:6px;padding:10px 20px;font-family:inherit;font-size:15px;transition:all .18s;display:inline-flex}.btn:hover:not(:disabled){border-color:var(--accent);transform:translateY(-1px)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg, var(--accent), #8f5bff);border:none;font-weight:600;box-shadow:0 4px 18px #6c7bff59}.btn-ghost{background:0 0}.btn-sm{padding:6px 14px;font-size:13px}.btn-lg{padding:14px 30px;font-size:17px}.btn-disabled{border:1px dashed var(--border);color:var(--text-dim);opacity:.6;border-radius:10px;align-items:center;padding:6px 14px;font-size:13px;display:inline-flex}.page-nav{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.nav-back{color:var(--text-dim);font-size:14px}.nav-back:hover{color:var(--text)}.nav-mode{color:var(--text-dim);border:1px solid var(--border);border-radius:999px;padding:4px 14px;font-size:13px}.rich p{margin:0 0 10px}.rich p:last-child{margin-bottom:0}.rich ul{margin:8px 0;padding-left:20px}.rich li{margin:5px 0}.inline-code{color:#aeb8ff;background:#6c7bff24;border:1px solid #6c7bff40;border-radius:5px;padding:1px 6px;font-family:SF Mono,Menlo,Consolas,monospace;font-size:.88em}.code-block{border:1px solid var(--border);color:#c8d3f5;background:#0a0d16;border-radius:10px;margin:10px 0;padding:14px 16px;font-family:SF Mono,Menlo,Consolas,monospace;font-size:13px;line-height:1.65;overflow-x:auto}.rank-badge{background:#ffffff08;border:1px solid;border-radius:999px;align-items:center;gap:5px;padding:3px 12px;font-size:13px;font-weight:600;display:inline-flex}.rank-badge--lg{padding:5px 18px;font-size:16px}.hero{text-align:center;padding:70px 20px 50px;position:relative}.hero__kicker{color:var(--accent-2);letter-spacing:.3em;margin:0 0 14px;font-size:13px}.hero__title{letter-spacing:.02em;margin:0 0 18px;font-size:clamp(40px,7vw,64px)}.hero__title-accent{background:linear-gradient(120deg, var(--accent), var(--accent-2));color:#0000;-webkit-background-clip:text;background-clip:text}.hero__sub{color:var(--text-dim);max-width:560px;margin:0 auto 26px;font-size:17px}.hero__stats{border:1px solid var(--border);background:var(--bg-soft);color:var(--text-dim);border-radius:999px;align-items:center;gap:18px;padding:8px 22px;font-size:14px;display:inline-flex}.hero__stats b{color:var(--accent-2);font-size:17px}.cert-link{color:var(--warn);font-weight:600}.modes{margin:36px 0 50px}.mode-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;display:grid}.mode-card{text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;color:var(--text);flex-direction:column;gap:10px;padding:26px 24px;font-family:inherit;transition:all .2s;display:flex}.mode-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 10px 32px #6c7bff2e}.mode-card--challenge:hover{border-color:var(--warn);box-shadow:0 10px 32px #ffb84d29}.mode-card--teach:hover{border-color:var(--accent-2);box-shadow:0 10px 32px #00d4b829}.mode-card__icon{font-size:34px}.mode-card__name{font-size:20px;font-weight:700}.mode-card__desc{color:var(--text-dim);font-size:14px;line-height:1.7}.level-grid{grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:16px;display:grid}.level-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:8px;padding:20px;transition:border-color .2s;display:flex}.level-card.is-completed{border-color:#3ddc9773}.level-card.is-locked{opacity:.62}.level-card__top{justify-content:space-between;align-items:center;display:flex}.level-card__no{color:var(--text-dim);letter-spacing:.1em;font-size:12px}.level-card__title{margin:2px 0 0;font-size:19px}.level-card__sub{color:var(--text-dim);flex:1;margin:0;font-size:13px}.level-card__status{color:var(--text-dim);font-size:13px}.level-card__actions{gap:8px;margin-top:6px;display:flex}.home-footer{color:var(--text-dim);border-top:1px solid var(--border);justify-content:space-between;align-items:center;gap:20px;margin-top:60px;padding-top:22px;font-size:13px;display:flex}.learn-header{margin-bottom:26px}.learn-header__meta{align-items:center;gap:14px;margin-bottom:10px;display:flex}.level-no{color:var(--text-dim);letter-spacing:.15em;font-size:14px}.learn-title{margin:0 0 8px;font-size:clamp(30px,5vw,42px)}.learn-sub{color:var(--text-dim);margin:0;font-size:17px}.learn-intro{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--radius);margin-bottom:36px;padding:22px 26px;font-size:15.5px}.learn-intro>p{margin:0 0 12px}.goal-box{background:#00d4b812;border:1px solid #00d4b84d;border-radius:10px;margin-top:16px;padding:12px 18px}.goal-box__label{color:var(--accent-2);font-size:14px;font-weight:700}.goal-box p{margin:6px 0 0;font-size:14.5px}.learn-section{margin-bottom:38px}.learn-section__heading{border-bottom:1px solid var(--border);margin:0 0 16px;padding-bottom:10px;font-size:21px}.concept-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;display:grid}.concept-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px;font-size:14.5px}.concept-card__head{justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px;display:flex}.concept-card h3{margin:0;font-size:16.5px}.concept-tag{color:#aeb8ff;white-space:nowrap;background:#6c7bff26;border-radius:999px;flex-shrink:0;padding:2px 10px;font-size:11.5px}.concept-tag--红线,.concept-tag--铁律{color:#ff8fa0;background:#ff5d7326}.concept-tag--必背{color:var(--warn);background:#ffb84d26}.concept-tag--避坑,.concept-tag--调试{color:var(--accent-2);background:#00d4b821}.pitfall-list{gap:10px;margin:0;padding:0;list-style:none;display:grid}.pitfall-list li{background:#ff5d730f;border:1px solid #ff5d7340;border-radius:10px;padding:12px 18px;font-size:14.5px}.practice-list{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin:0;padding:18px 18px 18px 40px;font-size:14.5px}.practice-list li{margin:8px 0}.learn-footer{margin-top:44px}.learn-footer__nav{justify-content:space-between;align-items:center;gap:14px;display:flex}.challenge-header{margin-bottom:26px}.challenge-tip{color:var(--text-dim);font-size:14px}.challenge-host{max-width:860px}.challenge-progress{align-items:center;gap:7px;margin-bottom:16px;display:flex}.progress-dot{background:var(--border);border-radius:50%;width:10px;height:10px}.progress-dot.is-done{background:var(--ok)}.progress-dot.is-current{background:var(--accent);box-shadow:0 0 0 4px #6c7bff40}.challenge-progress__text{color:var(--text-dim);margin-left:8px;font-size:13px}.challenge-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:26px 28px}.challenge-title{margin:0 0 6px;font-size:19px}.challenge-question{margin:0 0 16px;font-size:16px;font-weight:600}.multi-tag{border:1px solid var(--warn);color:var(--warn);border-radius:999px;margin-left:10px;padding:1px 10px;font-size:12px;font-weight:400}.quiz-options{gap:10px;margin-bottom:18px;display:grid}.quiz-option{text-align:left;background:var(--surface-2);border:1px solid var(--border);color:var(--text);cursor:pointer;border-radius:10px;align-items:center;gap:12px;padding:12px 16px;font-family:inherit;font-size:14.5px;transition:all .15s;display:flex}.quiz-option:hover{border-color:var(--accent)}.quiz-option.is-selected{border-color:var(--accent);background:#6c7bff1f}.quiz-option.is-right{border-color:var(--ok);background:#3ddc971f}.quiz-option.is-wrong{border-color:var(--danger);background:#ff5d731a}.quiz-option__letter{background:#6c7bff2e;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:26px;height:26px;font-size:13px;font-weight:700;display:inline-flex}.feedback{border-radius:10px;margin-top:16px;padding:14px 18px;font-size:14.5px}.feedback--wrong{background:#ff5d7314;border:1px solid #ff5d734d}.feedback--right{background:#3ddc9712;border:1px solid #3ddc9752}.feedback-title{color:var(--ok);margin:0 0 6px;font-weight:700}.btn-next{margin-top:18px}.code-editor{color:#c8d3f5;border:1px solid var(--border);resize:vertical;background:#0a0d16;border-radius:10px;outline:none;width:100%;padding:14px 16px;font-family:SF Mono,Menlo,Consolas,monospace;font-size:14px;line-height:1.7}.code-editor:focus{border-color:var(--accent)}.code-actions{gap:10px;margin:12px 0;display:flex}.hint-box{background:#ffb84d14;border:1px solid #ffb84d4d;border-radius:10px;padding:10px 16px;font-family:SF Mono,Menlo,Consolas,monospace;font-size:14px}.console-output{border:1px solid var(--border);background:#0a0d16;border-radius:10px;padding:10px 16px 12px;font-family:SF Mono,Menlo,Consolas,monospace;font-size:13.5px}.console-output__title{color:var(--text-dim);letter-spacing:.12em;margin-bottom:6px;font-family:inherit;font-size:11px}.console-line{color:#c8d3f5;white-space:pre-wrap}.console-line--error{color:var(--danger)}.terminal-tasks{gap:6px;margin:0 0 16px;padding-left:0;font-size:14px;list-style:none;display:grid}.terminal-tasks li{color:var(--text-dim);border-radius:8px;padding:6px 12px}.terminal-tasks li.is-current{color:var(--text);background:#6c7bff1a;border:1px solid #6c7bff4d}.terminal-tasks li.is-done{color:var(--ok)}.terminal{border:1px solid var(--border);background:#0a0d16;border-radius:12px;overflow:hidden}.terminal__bar{background:#161b29;align-items:center;gap:7px;padding:9px 14px;display:flex}.dot{border-radius:50%;width:11px;height:11px}.dot-r{background:#ff5f57}.dot-y{background:#febc2e}.dot-g{background:#28c840}.terminal__title{color:var(--text-dim);margin-left:8px;font-size:12px}.terminal__screen{min-height:180px;max-height:320px;padding:14px 16px;font-family:SF Mono,Menlo,Consolas,monospace;font-size:13.5px;line-height:1.65;overflow-y:auto}.term-line{white-space:pre-wrap;word-break:break-all;margin:0 0 4px}.term-line--cmd{color:#e8ecf6}.term-line--out{color:#8ff0c8}.term-line--err{color:var(--danger)}.term-input-row{align-items:center;gap:8px;display:flex}.term-prompt{color:#7dd3fc;flex-shrink:0}.term-input{color:var(--text);background:0 0;border:none;outline:none;flex:1;font-family:inherit;font-size:13.5px}.order-area{grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px;display:grid}@media (width<=720px){.order-area{grid-template-columns:1fr}}.order-col{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;flex-direction:column;gap:8px;min-height:180px;padding:14px;display:flex}.order-col--answer{border-color:#6c7bff66}.order-col__title{color:var(--text-dim);margin-bottom:4px;font-size:12.5px}.order-item{text-align:left;background:var(--surface);border:1px solid var(--border);color:var(--text);cursor:pointer;border-radius:8px;align-items:center;gap:10px;padding:9px 13px;font-family:inherit;font-size:13.5px;transition:border-color .15s;display:flex}.order-item:hover{border-color:var(--accent)}.order-item--picked.is-wrong{border-color:var(--danger)}.order-item--picked.is-right{border-color:var(--ok)}.order-num{background:#6c7bff33;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:22px;height:22px;font-size:12px;font-weight:700;display:inline-flex}.order-empty{color:var(--text-dim);text-align:center;margin:auto;font-size:13px}.level-clear{text-align:center;padding-top:80px}.level-clear__badge{background:var(--surface);border:3px solid;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:2px;width:150px;height:150px;margin:0 auto 26px;animation:.5s pop;display:flex;box-shadow:0 0 60px #6c7bff40}@keyframes pop{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}.level-clear__icon{font-size:52px}.level-clear__rank{font-size:18px;font-weight:800}.level-clear__title{margin:0 0 12px;font-size:34px}.level-clear__text{color:var(--text-dim);max-width:540px;margin:0 auto 30px;font-size:16px}.level-clear__actions{flex-wrap:wrap;justify-content:center;gap:14px;display:flex}.challenge-locked{text-align:center;padding-top:100px}.challenge-locked__actions{justify-content:center;gap:14px;margin-top:24px;display:flex}.teach{flex-direction:column;min-height:100vh;padding:20px 28px;display:flex}.teach-nav{justify-content:space-between;align-items:center;display:flex}.nav-back--light{font-size:14px}.teach-counter{color:var(--text-dim);letter-spacing:.15em;font-size:14px}.slide{flex-direction:column;flex:1;justify-content:center;width:100%;max-width:960px;margin:0 auto;padding:30px 10px;animation:.3s slidein;display:flex}@keyframes slidein{0%{opacity:0;transform:translate(18px)}to{opacity:1;transform:translate(0)}}.slide-badge{border:1px solid var(--accent-2);color:var(--accent-2);letter-spacing:.08em;border-radius:999px;align-self:flex-start;margin-bottom:18px;padding:4px 16px;font-size:14px}.slide-title{letter-spacing:.02em;margin:0 0 30px;font-size:clamp(34px,5.5vw,54px)}.slide-bullets{gap:16px;margin:0;padding:0;font-size:clamp(17px,2.2vw,22px);list-style:none;display:grid}.slide-bullets>li{padding-left:30px;position:relative}.slide-bullets>li:before{content:"▸";color:var(--accent);position:absolute;left:4px}.slide-flow{flex-wrap:wrap;align-items:center;gap:10px;margin-top:30px;display:flex}.slide-flow__wrap{align-items:center;gap:10px;display:inline-flex}.slide-flow__step{background:var(--surface);border:1px solid var(--accent);border-radius:10px;padding:10px 18px;font-size:clamp(14px,1.8vw,18px);font-weight:600;box-shadow:0 4px 16px #6c7bff2e}.slide-flow__arrow{color:var(--accent-2);font-size:20px}.slide-note{color:var(--text-dim);background:#ffb84d12;border:1px dashed #ffb84d66;border-radius:10px;margin-top:38px;padding:14px 18px;font-size:14.5px}.slide-note__label{color:var(--warn);margin-bottom:4px;font-size:13px;font-weight:700;display:block}.teach-controls{justify-content:space-between;align-items:center;gap:16px;padding-bottom:8px;display:flex}.teach-dots{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.teach-dot{background:var(--border);cursor:pointer;border:none;border-radius:50%;width:11px;height:11px;padding:0}.teach-dot.is-current{background:var(--accent);box-shadow:0 0 0 4px #6c7bff40}.cert{max-width:760px}.cert-card{text-align:center;background:radial-gradient(500px 220px at 50% 0%, #ffb84d1f, transparent 70%), var(--surface);border:2px solid #ffb84d73;border-radius:20px;margin:30px 0 40px;padding:50px 40px;box-shadow:0 12px 60px #ffb84d1f}.cert-card__crown{font-size:60px}.cert-card__kicker{letter-spacing:.3em;color:var(--warn);margin:14px 0 6px;font-size:13px}.cert-card__title{margin:0 0 22px;font-size:42px}.cert-card__body{color:var(--text-dim);font-size:16px;line-height:2}.cert-card__sign{color:var(--text-dim);letter-spacing:.1em;margin-top:26px;font-size:13.5px}.cert-next .btn{margin-top:20px}.layout-compare{grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px;display:grid}@media (width<=720px){.layout-compare{grid-template-columns:1fr}}.layout-panel{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:12px}.layout-panel__title{color:var(--text-dim);margin-bottom:10px;font-size:12.5px}.layout-stage{border:1px dashed var(--border);background:repeating-linear-gradient(45deg,#ffffff04,#ffffff04 8px,#0000 8px 16px);border-radius:8px;height:150px;padding:10px}.layout-chip{color:#0b0e17;white-space:nowrap;border-radius:8px;padding:8px 14px;font-size:13px;font-weight:600}.layout-chip--0{background:var(--accent-2)}.layout-chip--1{background:var(--accent);color:#fff}.layout-chip--2{background:var(--warn)}.layout-controls{flex-direction:column;gap:12px;margin-bottom:16px;display:flex}.layout-control__label{color:var(--text-dim);margin-bottom:6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;display:block}.layout-btns{flex-wrap:wrap;gap:8px;display:flex}.layout-btn{background:var(--surface);border:1px solid var(--border);color:var(--text);cursor:pointer;border-radius:8px;padding:7px 13px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;transition:all .15s}.layout-btn:hover{border-color:var(--accent)}.layout-btn.is-on{background:var(--accent);border-color:var(--accent);color:#fff}.layout-code{border:1px solid var(--border);color:var(--accent-2);background:#0a0d16;border-radius:8px;margin-bottom:16px;padding:14px 16px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.7;overflow-x:auto}.layout-code__dim{color:var(--text-dim)}