:root{font-family:system-ui,-apple-system,'Malgun Gothic',sans-serif;color:#1d2c45;background:#edf2fa;font-size:14px}*{box-sizing:border-box}body{margin:0}button,textarea{font:inherit}a{color:#1353a1}button{cursor:pointer}button:disabled{opacity:.55;cursor:not-allowed}button:focus-visible,a:focus-visible{outline:3px solid #2c7cf0;outline-offset:3px}[hidden]{display:none!important}.top{height:68px;padding:10px 23px;background:#102944;color:white;display:flex;justify-content:space-between;gap:18px;align-items:center;border-bottom:1px solid #304b6d}.brand{display:flex;gap:10px;align-items:center;color:white!important;text-decoration:none;font-weight:850;font-size:16px}.brand small{display:block;color:#91accb;font-size:10px;letter-spacing:1px}.k-logo{display:grid;place-items:center;background:#4d8ff0;border-radius:9px;width:35px;height:35px;color:white}.top-right{display:flex;align-items:center;gap:12px}.top-right a{color:#dbe7f7;text-decoration:none;font-size:12px}.course-badge{font-size:11px;padding:7px 9px;border:1px solid #477094;border-radius:20px;color:#d7eafa}.outline-top{background:#d7eaff;color:#103963;border:0;border-radius:8px;padding:11px 14px;font-weight:800}.shell{display:grid;grid-template-columns:252px minmax(340px,.92fr) minmax(450px,1.08fr);min-height:calc(100vh - 68px)}.side{background:#fff;border-right:1px solid #dce6f0;overflow:auto;max-height:calc(100vh - 68px);position:sticky;top:0}.side-head{padding:24px 17px 15px}.eyebrow{font-size:10px;color:#366baf;letter-spacing:1.4px;font-weight:850}.side-head h1{font-size:19px;line-height:1.35;margin:10px 0;color:#153558}.side-head p{font-size:12px;color:#61738b;line-height:1.75}.bar{height:7px;background:#e9eef6;border-radius:5px;overflow:hidden}.bar span{display:block;background:#1b86a3;width:0;height:100%;transition:width .25s}.side .small{font-size:11px;color:#68809c}.side nav{padding:4px 9px 16px}.group-title{font-size:10px;font-weight:850;letter-spacing:.65px;color:#8392a7;padding:16px 12px 7px;border-top:1px solid #edf0f5}.lesson-link{display:flex;gap:9px;align-items:center;width:100%;padding:11px 9px;text-align:left;background:transparent;border:0;border-radius:9px;color:#455974;font-size:12px;line-height:1.4}.lesson-link:hover{background:#f3f7fb}.lesson-link[aria-current=step]{background:#eaf3ff;color:#0e4d92;font-weight:800}.lesson-link .id{font-size:10px;font-weight:800;color:#7793af;min-width:27px}.lesson-link .done{margin-left:auto;color:#087c78}.side-note{margin:10px 14px 22px;padding:13px;background:#f0f6fb;border-radius:10px;font-size:11px;line-height:1.75;color:#61738c}.side-note strong{color:#21436b}.side-note p{margin:4px 0}.learn{min-width:0;padding:24px;overflow:auto;max-height:calc(100vh - 68px)}.mobile-side-toggle{display:none}.step-header{padding:22px 24px;border-radius:15px;background:#fff;border:1px solid #dce5f0;margin-bottom:15px}.step-kicker{display:flex;gap:9px;align-items:center;color:#22749f;font-weight:800;font-size:11px}.step-kicker span:first-child{background:#eaf5fb;padding:6px 8px;border-radius:7px}.step-header h2{font-size:25px;letter-spacing:-.6px;margin:13px 0 8px;color:#132f50}.step-header>p{font-size:13px;color:#5e7189;line-height:1.75}.why{background:#eef5ff;border-left:3px solid #2d83c2;padding:13px 15px;border-radius:8px}.why b{font-size:12px;color:#255681}.why p{margin:5px 0 0;line-height:1.75;color:#34526e;font-size:12px}.learn-card{background:#fff;border:1px solid #dde6f0;border-radius:14px;padding:18px 20px;margin-bottom:14px}.learn-card h3{margin:0 0 12px;font-size:15px;color:#183e64}.learn-card p{line-height:1.8;color:#4b617a;font-size:12px;margin:8px 0}.explain-lines{display:grid;gap:7px}.explain-line{border:1px solid #e7edf4;padding:11px 12px;border-radius:8px;background:#f9fbfe}.explain-line code{font-family:Consolas,'Malgun Gothic',monospace;font-size:11px;color:#1b63a4;white-space:pre-wrap;word-break:break-word}.explain-line p{margin:4px 0 0}.location{display:inline-block;font-size:11px;font-weight:800;color:#365c80;background:#edf6fb;padding:6px 10px;border-radius:7px;margin:7px 0 10px}.code-samples{border:1px solid #d5e1ed;border-radius:10px;overflow:hidden}.sample-tabs{display:flex;gap:0;background:#f3f6fa;border-bottom:1px solid #d5e1ed}.sample-tabs button{border:0;border-right:1px solid #d5e1ed;padding:10px 11px;background:transparent;color:#5a7390;font-size:11px}.sample-tabs button[aria-selected=true]{background:#fff;color:#174c82;font-weight:800}.code-samples pre{margin:0;padding:15px;line-height:1.7;max-height:300px;overflow:auto;white-space:pre-wrap;word-break:break-word;font-family:Consolas,Monaco,monospace;font-size:11px;color:#2c3e5a;background:#fbfdff;tab-size:2}.tip{font-size:11px!important;color:#607690!important}.dual{display:grid;grid-template-columns:1fr 1fr;gap:15px}.dual>div+div{border-left:1px solid #edf0f6;padding-left:15px}.error{background:#fffaf2;border-color:#f4e5c9}.error h3{color:#87531d}.quiz{background:#fafdff}.quiz-options{display:grid;gap:8px}.quiz-options button{border:1px solid #d6e2f0;border-radius:7px;text-align:left;padding:11px 12px;background:white;color:#243b59;font-size:12px}.quiz-options button[aria-pressed=true]{border-color:#3187d1;background:#eef7ff}.quiz-feedback{font-weight:700}.quiz-feedback.ok{color:#168064}.quiz-feedback.no{color:#ad5f35}.check-list{display:grid;gap:5px}.check-line{display:flex;gap:10px;padding:7px 0;color:#5f7388;font-size:12px;border-bottom:1px solid #f1f3f7}.check-line b{width:15px;color:#768ea4}.check-line.pass b{color:#14966a}.check-line.fail b{color:#d28641}.verify-buttons{display:flex;flex-wrap:wrap;gap:9px;margin:14px 0}.primary{background:#246bb1!important;color:#fff!important;border-color:#246bb1!important}.verify button,.reference button,.step-footer button,.editor-tools button{border:1px solid #cbdceb;background:white;border-radius:8px;padding:10px 12px;font-weight:800;font-size:12px;color:#31587d}.status{background:#f1f6fc;padding:10px 12px;border-radius:7px}.complete{width:100%;background:#0b817c!important;color:#fff!important;border:0!important;padding:13px!important;margin-top:10px}.audit{display:grid;gap:5px}.audit-row{border:1px solid #e2eaf2;border-radius:8px;padding:10px;background:#f8fbff;font-size:11px;color:#526d83}.audit-row b{color:#214a70}.audit-row.good{border-color:#bddfd4;background:#f0fbf6}.audit-row.bad{border-color:#eed0c7;background:#fff6f3}.step-footer{display:flex;justify-content:space-between;gap:12px;margin:10px 0 25px}.reference{padding:16px 20px;background:#e7edf7;border-radius:13px;margin-bottom:20px}.reference h3{margin:0 0 9px;font-size:14px}.reference p{font-size:11px;line-height:1.7;color:#526981}.reference button{margin:8px 10px 8px 0}.reference a{font-size:11px;font-weight:800}.editor{background:#162438;min-width:0;color:#dce8fa;display:flex;flex-direction:column;position:sticky;top:0;height:calc(100vh - 68px)}.editor-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid #314156}.editor-head strong{display:block;font-size:14px}.editor-head small{display:block;font-size:10px;margin-top:5px;color:#9aacbe}.editor-head>span{font-size:10px;color:#a9c8e2}.files{display:flex;gap:0;border-bottom:1px solid #3d4d62;background:#1e3147}.files button{border:0;background:transparent;color:#9fb7d3;padding:12px 16px;font-size:11px;border-right:1px solid #34475d}.files button[aria-selected=true]{background:#182638;color:#fff;border-bottom:2px solid #77b3f8;font-weight:800}.editor-surface{flex:1;min-height:220px;position:relative}.editor-surface textarea{width:100%;height:100%;background:#121d2b;color:#e4eefa;border:0;padding:18px;resize:none;font-family:Consolas,monospace;font-size:13px;line-height:1.6}.editor-surface .CodeMirror{height:100%;background:#172538;color:#dae7fa;font-size:12px;line-height:1.6}.CodeMirror-gutters{background:#172438!important;border-right:1px solid #34465b!important}.CodeMirror-linenumber{color:#70859e!important}.CodeMirror-cursor{border-left-color:#fff!important}.CodeMirror-selected{background:#425871!important}.cm-tag,.cm-keyword{color:#76caff!important}.cm-attribute,.cm-property{color:#b5dbff!important}.cm-string{color:#eab28c!important}.cm-comment{color:#7998a9!important}.cm-number{color:#dbd18b!important}.editor-tools{padding:12px 16px;background:#20344d;border-top:1px solid #344b63;display:grid;gap:10px}.device-actions,.editor-save-actions{display:flex;flex-wrap:wrap;gap:7px}.editor-tools button{background:#28496c;border-color:#46658b;color:#eaf5ff;flex:1}.editor-save-actions button{background:#263a52;border-color:#3d526f;font-size:10px}.editor-help{padding:16px;background:#11243b;border-top:1px solid #3e5169;font-size:11px;line-height:1.7}.editor-help p{color:#adc1d7;margin:5px 0 11px}.editor-help a{color:#b8dbff;font-weight:800}.modal{position:fixed;inset:0;z-index:300;display:grid;place-items:center}.modal-bg{position:absolute;inset:0;background:#15223bba}.modal section{position:relative;background:white;padding:25px;border-radius:13px;max-width:420px;width:calc(100vw - 36px);box-shadow:0 22px 60px #0004}.modal section h2{font-size:17px}.modal section p{font-size:12px;line-height:1.8}.modal section>div{display:flex;justify-content:flex-end;gap:9px}.modal section button{border:1px solid #bfcfe0;border-radius:7px;padding:11px 16px;background:white}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);z-index:400;border-radius:10px;background:#123a62;color:white;padding:13px 20px;box-shadow:0 10px 40px #0005;max-width:calc(100vw - 32px);font-size:12px}[hidden].toast{display:none}.mobile-side-toggle{display:none}
@media(max-width:1350px){.shell{grid-template-columns:216px minmax(300px,1fr) minmax(390px,1.1fr)}.side-head{padding:18px 12px}.learn{padding:16px}.learn-card{padding:15px}.top-right a{display:none}}
@media(max-width:1080px){.shell{grid-template-columns:190px minmax(280px,1fr) minmax(340px,1fr)}.side-head h1{font-size:17px}.editor-help{display:none}.top{height:62px}.shell,.side,.learn,.editor{min-height:calc(100vh - 62px)}.side,.learn{max-height:calc(100vh - 62px)}.editor{height:calc(100vh - 62px)}}
@media(max-width:920px){.shell{grid-template-columns:212px minmax(0,1fr)}.side{max-height:none;position:relative;grid-row:1 / span 2}.learn{max-height:none;overflow:visible}.editor{position:relative;height:auto;min-height:600px;grid-column:2;grid-row:2}.editor-surface{height:430px;flex:initial}.editor-help{display:block}.top-right .course-badge{display:none}}
@media(max-width:680px){.top{height:auto;min-height:60px;padding:10px}.top .brand{font-size:13px}.top .brand small{font-size:9px}.top-right .outline-top{padding:8px 9px;font-size:11px}.shell{display:block}.side{display:none;max-height:none;border-right:0;border-bottom:1px solid #dce5ef}.side.mobile-open{display:block}.mobile-side-toggle{display:block;margin-bottom:12px}.mobile-side-toggle button{border:1px solid #c7dbe9;border-radius:9px;padding:10px 12px;background:white;width:100%;text-align:left;font-weight:800;color:#24527d}.learn{padding:12px;max-height:none}.step-header{padding:18px}.step-header h2{font-size:22px}.dual{grid-template-columns:1fr}.dual>div+div{padding-left:0;border-left:0;border-top:1px solid #edf0f6;padding-top:12px}.editor{height:auto;min-height:0}.editor-surface{height:430px}.editor-help{display:block}.files button{flex:1;padding:12px 5px}.top-right a{display:none}.learn-card{padding:15px}.reference button{display:block;width:100%;margin:8px 0}.step-footer button{padding:11px}}
@media(max-width:380px){.brand{gap:6px}.top-right .outline-top{font-size:10px}.step-header h2{font-size:20px}.code-samples pre{font-size:10px}}

.self-explain textarea{width:100%;min-height:90px;padding:12px 14px;border:1px solid #cad9e7;background:#fbfdff;border-radius:9px;resize:vertical;font:inherit;line-height:1.8;color:#203d5e}.self-explain textarea:focus-visible{outline:3px solid #a4cff8}

.finish{padding:20px;background:#e4f6ef;border:1px solid #b9e0d2;border-radius:13px;margin:14px 0}.finish h3{color:#0a6b59;margin:0 0 8px}.finish p{line-height:1.8;font-size:12px}.finish>div{display:flex;gap:10px;flex-wrap:wrap}.finish a{padding:10px 12px;background:#146d67;color:#fff;border-radius:8px;text-decoration:none;font-weight:800;font-size:12px}