.first-course-main{max-width:1450px!important;padding:28px!important}.l1-shell{display:grid;grid-template-columns:210px minmax(0,1fr);gap:26px}.l1-reading,.l1-home{font-family:var(--font-text);color:#27445f;min-width:0;font-size:19px;line-height:1.85}.l1-reading h1,.l1-home h1{font-size:34px;line-height:1.4;letter-spacing:-.5px;margin:10px 0 20px}.l1-reading h2,.l1-home h2{font-size:25px;line-height:1.5}.l1-reading h3{font-size:21px;line-height:1.6}.l1-label{display:block;font-size:16px;font-weight:600;letter-spacing:.03em;color:#647e96}.l1-lead{font-size:21px;margin:0 0 22px}.l1-body{margin:22px 0}.l1-menu{position:sticky;top:20px;align-self:start;font-size:16px;background:#fff;border:1px solid #dce6ef;border-radius:20px;padding:15px;max-height:88vh;overflow:auto}.l1-menu summary{cursor:pointer;padding:10px 0;font-weight:700;line-height:1.6}.l1-menu>summary>span{display:block;font-size:14px;color:#6c8094;font-weight:400}.l1-menu a{display:block;padding:8px 10px;border-radius:9px;line-height:1.6;color:#456179;text-decoration:none}.l1-menu a.current{background:#e9f2ff;color:#2163b1}.l1-menu>details{border-top:1px solid #e8eef2}.l1-art{background:#fffdf6;border:1px solid #e7dfc6;border-radius:24px;padding:22px;overflow:hidden}.l1-pair{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:14px;margin:15px 0}.l1-code,.l1-output{padding:20px;border-radius:16px;min-width:0}.l1-code{background:#243e57;color:#eff7ff}.l1-code .l1-label{color:#bad1e6}.l1-output{background:#fff;border:1px solid #d7e3ed}.l1-code pre,.l1-output pre,.l1-mini-code,.l1-options pre{font-family:var(--font-code);font-size:19px;line-height:1.8;margin:13px 0 0;overflow-x:auto;tab-size:4}.l1-code pre>span{display:block;min-height:1.8em;padding:0 4px}.l1-code .is-line{background:#426484;border-left:3px solid #ffce65}.l1-output-row{display:flex;min-height:1.8em;white-space:pre}.l1-output-row i{font:14px var(--font-text);color:#8194a5;min-width:25px;align-self:center;user-select:none}.l1-switch{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}.l1-reading button,.l1-primary{font:600 17px/1.6 var(--font-text);border:1px solid #b6cee7;background:white;color:#285a88;border-radius:12px;padding:11px 18px;cursor:pointer;text-decoration:none;display:inline-block}.l1-reading button:hover,.l1-reading button[aria-pressed=true]{background:#e6f0ff;border-color:#619ade}.l1-primary{background:#2a70ce!important;color:white!important;border-color:#2a70ce!important}.l1-reading button:focus-visible,.l1-reading a:focus-visible{outline:3px solid #eeae26;outline-offset:3px}.l1-note{display:flex;align-items:center;gap:14px;background:#fff4d7;border:1px solid #ecdbaf;border-radius:18px;padding:18px 22px;margin:22px 0;font-size:18px}.l1-note img{width:92px;height:105px;object-fit:contain;flex-shrink:0}.l1-note p{margin:5px 0}.l1-quiz{margin:28px 0;padding:25px;background:#eef5fc;border-radius:22px;border:1px solid #d6e4f3}.l1-options{display:grid;gap:10px}.l1-options button{text-align:left;display:flex;gap:15px;align-items:center;background:#fff}.l1-options pre{white-space:pre-wrap;margin:0;overflow-wrap:anywhere}.l1-options button>span{color:#6180a0}.l1-feedback:empty{display:none}.l1-feedback{margin-top:17px;padding:15px;border-radius:12px}.l1-feedback.correct{background:#def0e5;color:#285740}.l1-feedback.retry{background:#fff0d5;color:#795321}.l1-bottom{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:25px}.l1-storage,.l1-muted{font-size:16px;color:#748497}.l1-storage{margin-top:35px}.l1-diagram{overflow:auto}.l1-diagram svg{display:block;width:100%;min-width:580px;font-family:var(--font-text)}.l1-items{display:flex;align-items:center;justify-content:center;gap:10px;padding:22px 0;flex-wrap:wrap}.l1-items strong{font-size:30px;background:#fff;padding:10px 20px;border:2px solid #a8c8df;border-radius:14px}.l1-gap{min-width:40px;text-align:center;font:24px var(--font-code);color:#9b6d24}.l1-gap small{display:block;font:15px var(--font-text);margin-top:5px}.l1-token-line{display:flex;justify-content:center;align-items:start;gap:17px;font:40px var(--font-code);padding:20px}.l1-token-line mark{background:transparent;color:#557189;border-radius:10px;padding:0 8px}.l1-token-line mark.lit{background:#ffe399;color:#745515}.l1-token-line small{display:block;font:16px var(--font-code);text-align:center}.l1-explain{background:#edf4f9;border-radius:12px;padding:15px 20px;margin:15px 0}.l1-step-status{font-size:17px;font-weight:700;color:#795f30}.l1-example{padding:17px 22px;background:white;border:1px solid #dae4ed;border-radius:16px;margin:20px 0}.l1-example summary{cursor:pointer;font-weight:700}.l1-hero{display:grid;grid-template-columns:1.4fr 1fr;align-items:center;padding:32px;background:linear-gradient(120deg,#e9f3ff,#fff4d9);border:1px solid #d6e4ee;border-radius:28px}.l1-hero img{width:100%;max-height:320px;object-fit:contain}.l1-hero p{font-size:19px}.l1-unit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px;margin-top:24px}.l1-unit-grid a{background:#fff;border:1px solid #dce6ed;border-radius:22px;padding:20px;text-decoration:none;color:inherit;position:relative;min-height:190px;padding-right:125px}.l1-unit-grid a:nth-child(3n+2){background:#fff9e9}.l1-unit-grid a:nth-child(3n){background:#edf6f1}.l1-unit-grid img{position:absolute;right:5px;bottom:10px;width:128px;height:150px;object-fit:contain}.l1-unit-grid h2{font-size:23px;margin:6px 0}.l1-unit-grid p{font-size:17px;line-height:1.7;margin:5px 0}.l1-unit-grid a>span{font-size:15px;color:#6684a0}.l1-map{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.l1-map>div,.l1-map>a{background:white;border:1px solid #dbe5ef;border-radius:16px;padding:20px;text-decoration:none;color:inherit}.l1-map h3{font-size:19px;margin:5px 0}.l1-map small{color:#6d8398}.l1-summary-card{padding:16px 25px;border:1px solid #dce6ee;background:#fff;border-radius:18px;margin:14px 0}.l1-summary-card h2,.l1-summary-card p{margin:4px 0}.l1-task li{margin:12px 0}.l1-project-check{display:block;padding:20px 0}.l1-project-check input{width:21px;height:21px;vertical-align:middle}.l1-quiz input{display:block;padding:12px;border:1px solid #b7cbdc;border-radius:8px;font:20px var(--font-text);margin:10px 0;width:100%;box-sizing:border-box}.l1-reuse .story-scroll>svg{max-height:430px}.l1-reuse .visual-controls{margin-top:0}.l1-reuse .story-scroll{margin:0}.l1-output small{font-size:14px}.l1-home{max-width:1100px;margin:auto}
@media(max-width:1100px){.l1-shell{grid-template-columns:180px minmax(0,1fr);gap:18px}.l1-pair{grid-template-columns:1fr}.l1-unit-grid{grid-template-columns:1fr}.l1-unit-grid a{min-height:160px}.l1-reading h1{font-size:30px}}
@media(max-width:800px){.first-course-main{padding:18px!important}.l1-shell{display:block}.l1-menu{position:static;max-height:none;margin-bottom:22px}.l1-reading{font-size:18px}.l1-art,.l1-quiz{padding:16px}.l1-reading h1,.l1-home h1{font-size:29px}.l1-lead{font-size:20px}.l1-hero{padding:23px;grid-template-columns:1fr}.l1-hero img{height:190px;grid-row:1}.l1-map{grid-template-columns:1fr 1fr}.l1-note{padding:16px;align-items:flex-start}.l1-note img{width:62px;height:76px}.l1-code pre,.l1-output pre{font-size:18px}.l1-reading h2{font-size:24px}.l1-pair{grid-template-columns:1fr}.l1-unit-grid a{padding-right:112px}.l1-unit-grid img{width:110px}.l1-bottom{font-size:17px}.l1-code,.l1-output{padding:15px}}
.l1-pair{grid-template-columns:minmax(0,1fr);gap:0;border:1px solid #cdd9e5;border-radius:16px;overflow:hidden}.l1-pair .l1-code{border-radius:0;background:#1e1e1e;color:#d4d4d4}.l1-pair .l1-output{border-radius:0;border:0;border-top:1px solid #cdd9e5;background:#fff}.l1-code .l1-label{color:#b7c4d1}.l1-code .is-line{background:#303b48}.l1-code .py-function,.l1-mini-code .py-function{color:#dcdcaa}.l1-code .py-string,.l1-mini-code .py-string{color:#ce9178}.l1-code .py-comment,.l1-mini-code .py-comment{color:#8bad72}.l1-code .py-number,.l1-mini-code .py-number{color:#b5cea8}.l1-code .py-keyword,.l1-mini-code .py-keyword{color:#c586c0}.l1-code .py-parameter,.l1-mini-code .py-parameter{color:#9cdcfe}.l1-mini-code{background:#1e1e1e;color:#d4d4d4;border-radius:12px;padding:18px}.l1-code pre>span[class^="py-"]{display:inline;padding:0}.l1-teaching{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(230px,1fr);gap:20px;align-items:start}.l1-side-explanation{background:#fff;border:1px solid #dce6ef;border-radius:20px;padding:20px}.l1-side-explanation h2{font-size:22px;margin:0 0 14px}.l1-side-explanation .l1-body{margin:0}.l1-side-explanation .l1-note{display:block;margin:20px 0 0;padding:16px}.l1-side-explanation .l1-note img{float:right;width:74px;height:84px;margin:0 0 8px 8px}.l1-teaching .l1-art{min-width:0;padding:18px}.l1-teaching .l1-switch button{padding:9px 12px}.l1-teaching .l1-code pre{white-space:pre;overflow-wrap:normal;font-size:18px}.l1-teaching:has(.l1-reuse){grid-template-columns:minmax(0,1fr)}.l1-teaching:has(.l1-reuse) .l1-side-explanation{display:grid;grid-template-columns:1fr 1fr;gap:16px}.l1-teaching:has(.l1-reuse) .l1-side-explanation h2{grid-column:1/-1;margin:0}.l1-teaching:has(.l1-reuse) .l1-note{margin:0}
@media(max-width:1200px){.l1-teaching{grid-template-columns:1fr}.l1-side-explanation .l1-note{display:flex}.l1-teaching:has(.l1-reuse) .l1-side-explanation{display:block}.l1-teaching:has(.l1-reuse) .l1-note{margin-top:18px}}

.l1-optional-tag{display:inline-block;font-size:14px;color:#6f4c97;background:#eee6f8;padding:1px 8px;border-radius:7px}.l1-optional-banner{background:#f4effb;border:1px solid #daccE9;border-radius:17px;padding:18px 22px;margin:18px 0;font-size:18px}.l1-optional-banner strong{color:#614182}.l1-optional-banner p{margin:8px 0 12px}.l1-optional-banner>a:not(.l1-primary){color:#614182;text-decoration:underline}.l1-optional-review{border-color:#dacbe9;background:#f8f4fc}
