*{box-sizing:border-box} :root{font-family:Inter,"Microsoft YaHei",system-ui,sans-serif;color:#183047;background:#f3f6fb;font-size:14px;line-height:1.6;--blue:#245fde;--muted:#697b91}
body{margin:0}button,input,textarea,select{font:inherit}button{cursor:pointer;background:var(--blue);color:white;border:1px solid transparent;border-radius:8px;padding:9px 15px;font-weight:600}button:hover{filter:brightness(.95)}button:disabled{opacity:.45;cursor:not-allowed}button.secondary{background:white;color:#34506b;border-color:#d8e0ec}button.small{padding:5px 10px;font-size:12px}button.warn{background:#fff2df;color:#8c500c}input,textarea,select{width:100%;padding:10px 12px;border:1px solid #d5dfed;border-radius:8px;background:white;color:#183047;outline:none}input:focus,textarea:focus,select:focus{border-color:var(--blue);box-shadow:0 0 0 3px #245fde18}textarea{resize:vertical;min-height:100px}label{display:block;font-size:13px;font-weight:600;margin:12px 0 5px}h1{font-size:28px;line-height:1.3;letter-spacing:-.7px;margin:0 0 10px}h2{font-size:20px;margin:0 0 12px}h3{font-size:15px;margin:0 0 8px}p{margin:8px 0;color:var(--muted)}a{color:var(--blue)}.layout{display:grid;grid-template-columns:230px minmax(0,1fr);min-height:100vh}.sidebar{background:#fff;border-right:1px solid #e2e8f0;padding:28px 20px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:24px}.brand{font-size:22px;font-weight:800;letter-spacing:2px;display:flex;align-items:center;gap:12px}.mark{background:var(--blue);color:white;border-radius:12px;display:inline-grid;place-items:center;width:40px;height:40px;letter-spacing:0}.subtitle{font-size:11px;letter-spacing:1.4px;color:#8190a2;margin-top:6px}.nav{display:flex;flex-direction:column;gap:6px}.nav button{text-align:left;background:transparent;color:#5b6e85;padding:12px 15px}.nav button.active{color:var(--blue);background:#eef3ff}.sidefoot{margin-top:auto;border-top:1px solid #edf0f5;padding-top:20px;font-size:12px}.main{padding:32px 38px;min-width:0}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;gap:16px}.eyebrow{font-size:11px;color:var(--blue);font-weight:700;letter-spacing:1.6px;margin-bottom:10px}.pill{display:inline-block;background:#edf3ff;color:#285cc9;font-size:12px;border-radius:20px;padding:4px 10px}.pill.orange{background:#fff0dc;color:#9b5c14}.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.card{background:white;border:1px solid #e0e7f1;border-radius:14px;padding:24px;margin-bottom:18px;box-shadow:0 4px 16px #15345803}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px}.cards .card{margin:0}.empty{border:1px dashed #cbd8ec;text-align:center;padding:45px 20px;border-radius:12px;background:#fff}.empty p{max-width:430px;margin:8px auto 0}.muted{color:var(--muted)}.row{display:flex;justify-content:space-between;align-items:center;gap:12px}.grow{flex:1}.spacer{height:18px}.hero{padding:28px;border:1px solid #dbe5fc;border-radius:14px;background:linear-gradient(110deg,#eaf1ff,#f9fcff);margin-bottom:24px}.hero p{max-width:720px}.split{display:grid;grid-template-columns:1.1fr 1fr;gap:20px}.ide{display:grid;grid-template-columns:minmax(200px,.7fr) minmax(300px,1.2fr) minmax(230px,.8fr);gap:16px}.ide .card{padding:18px}.code{font-family:Consolas,monospace;white-space:pre;tab-size:4;min-height:340px;font-size:13px;line-height:1.65;background:#f9fbff}.output,pre{white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;font:13px/1.7 Consolas,"Microsoft YaHei",monospace;background:#f5f8fc;padding:14px;border-radius:8px;margin:12px 0}.steps{display:flex;gap:5px;margin:12px 0 20px}.steps span{height:5px;flex:1;border-radius:8px;background:#e0e7f0}.steps span.done{background:#2c67e1}.event{padding:14px 0 14px 20px;border-left:2px solid #dce6f6;position:relative}.event:before{content:"";position:absolute;width:8px;height:8px;background:#5480e2;border:2px solid white;border-radius:50%;left:-6px;top:20px}.event time{font-size:11px;color:#8490a1}.login{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}.login-story{background:#164cae;color:white;padding:12vh 10%;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}.login-story h1{font-size:44px;max-width:430px;line-height:1.45;letter-spacing:-1px;margin-top:45px}.login-story p{color:#ceddff;max-width:380px;font-size:16px}.login-form{display:flex;align-items:center;justify-content:center;padding:40px}.login-form .inner{width:100%;max-width:370px}.login-flow{margin-top:45px;color:#deebff;font-size:13px;word-spacing:8px}.hint{padding:12px 14px;background:#fff7e9;border-left:3px solid #eca64b;font-size:12px;color:#896234;margin:14px 0}.stage-editor{border:1px solid #dce6f1;border-radius:10px;padding:15px;margin:14px 0}.stage-head{display:flex;gap:8px;align-items:center}.stage-head input{flex:1}.stage-head select{width:130px}.stage-head button{flex:none}.metric{font-size:32px;font-weight:700;color:#2155bf}.test-grid{display:grid;grid-template-columns:1fr 1fr 90px;gap:10px;margin:12px 0}.test-grid textarea{min-height:60px}.check{display:flex;gap:8px;align-items:center}.check input{width:auto}#toast{position:fixed;right:25px;bottom:25px;max-width:500px;background:#17314f;color:white;padding:13px 20px;border-radius:10px;box-shadow:0 10px 30px #10213f30;display:none;z-index:10}.error{color:#bd3f36;background:#fff0ed;border-radius:8px;padding:12px}.busy{opacity:.65;pointer-events:none}.link-button{border:0;background:transparent;color:var(--blue);padding:0;font-weight:500}.note{font-size:12px}.wide{width:100%}details summary{cursor:pointer;font-weight:600}table{width:100%;border-collapse:collapse}td,th{text-align:left;padding:12px;border-bottom:1px solid #ecf0f5}th{font-size:12px;color:#8190a0}.badge-number{font-size:12px;font-weight:700;color:#2c63d5}
@media(max-width:1150px){.ide{grid-template-columns:1fr 1.4fr}.ide>section:last-child{grid-column:1/-1}.main{padding:25px}.layout{grid-template-columns:190px 1fr}.sidebar{padding:22px 12px}}@media(max-width:760px){.layout,.login,.split,.ide{grid-template-columns:1fr}.sidebar{height:auto;position:static;padding:15px}.nav{flex-direction:row;flex-wrap:wrap;gap:4px}.nav button{padding:8px 10px}.sidefoot,.subtitle{display:none}.main{padding:20px 15px}.login-story{padding:40px}.login-story h1{font-size:30px;margin-top:25px}.login-flow{margin-top:20px}.login-form{padding:30px}.topbar{align-items:flex-start}.test-grid{grid-template-columns:1fr}.stage-head{flex-wrap:wrap}.ide>section:last-child{grid-column:auto}}
/* Shared login navigation remains reachable when the teaching menu exceeds the viewport. */
@media(min-width:761px){.sidebar{overflow-y:auto;overscroll-behavior:contain}}