.code-hero{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center;padding:25px 0 40px}.code-hero h1{font-size:clamp(40px,5vw,64px)}.code-hero p{color:#526c86}.code-art{background:linear-gradient(140deg,#123b60,#342c68);border-radius:30px;padding:50px 28px;color:#d3ebfa;box-shadow:0 12px 30px #1d486123;transform:rotate(2deg);font-family:monospace}.code-art span{display:block;font-size:21px;color:#a6d9f1}.code-art strong{display:block;font-size:22px;margin:25px 0 35px;padding-left:24px;color:#ffe5a7}.code-art small{font-size:12px;color:#bbacd9}.practice-note{padding:20px;background:#e4ecfc;border:1px solid #cbdcf2;border-radius:15px;font-size:12px;line-height:1.8;margin-bottom:25px}.workspace{display:grid;grid-template-columns:340px minmax(0,1fr);gap:22px;align-items:start;scroll-margin-top:20px}.question-panel,.editor-panel{background:#fff;border:1px solid #d3dfed;border-radius:20px;padding:23px}.question-panel>label{font-size:11px;font-weight:bold;display:block;margin-bottom:9px}.question-panel select{width:100%;padding:13px;border:1px solid #b8cee2;border-radius:9px;background:white;color:#214c72;font-size:12px}.question-panel h2{font-size:26px}.question-panel h3{font-size:17px}.question-panel p,.question-panel li{font-size:12px;line-height:1.8;color:#526a7c}.question-panel code{font-family:monospace;color:#633d8c}.question-panel>code{display:block;background:#f1edfa;padding:13px;border-radius:9px}.question-panel pre{font-size:11px;white-space:pre-wrap;overflow-wrap:anywhere;background:#f1f5fb;padding:14px;border-radius:10px;line-height:1.7}.question-panel details{border-top:1px solid #e2e9f1;padding-top:15px;margin-top:18px}.question-panel summary{font-size:12px;font-weight:bold;cursor:pointer}.question-panel ol{padding-left:20px}.editor-head{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:15px}.editor-head h2{font-size:22px;margin:0}.editor-head span{font-size:10px;color:#668095}#code{display:block;width:100%;min-height:350px;resize:vertical;background:#102b47;color:#e6f3ff;border:1px solid #2d4f6e;border-radius:12px;padding:20px;font:14px/1.8 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;tab-size:4;white-space:pre;overflow:auto}#code:focus{outline:3px solid #82b3e1;outline-offset:2px}#editor-help{font-size:10px;color:#6d8196;margin:11px 0}.editor-tools{display:flex;gap:17px;align-items:center;flex-wrap:wrap;margin:17px 0}.file-button{position:relative;display:inline-block;font-size:11px;font-weight:bold;padding:11px 14px;background:#edf1fa;border:1px solid #bdd0e6;border-radius:8px;cursor:pointer}.file-button input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}.file-button:focus-within{outline:3px solid #548cbd}.editor-tools button{font-size:10px}.run-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:17px;border-top:1px solid #e2e9f1}#run-status{font-size:11px;line-height:1.6;color:#536c83;flex:1;min-width:140px}.results{margin-top:26px}.results h3{font-size:19px}.test-row{border:1px solid #dce5ee;border-radius:10px;padding:13px;margin:9px 0;display:grid;grid-template-columns:90px minmax(0,1fr);gap:9px;font-size:11px;line-height:1.7}.test-row.pass{background:#eef8ef;border-color:#bed9c4}.test-row.fail{background:#fff0eb;border-color:#e3c5bb}.test-row strong{font-size:12px}.test-row pre{margin:0;font-size:10px;white-space:pre-wrap;overflow-wrap:anywhere}#output{max-height:250px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;background:#f0f4fa;border-radius:10px;padding:15px;font-size:11px;line-height:1.7}#output-box summary{font-size:12px;cursor:pointer}.primary:disabled{opacity:.45;cursor:default}@media(max-width:950px){.workspace{grid-template-columns:280px minmax(0,1fr)}.code-art{padding:40px 22px}.code-art strong{font-size:19px;padding-left:0}}@media(max-width:700px){.code-hero{grid-template-columns:1fr;gap:20px;padding-top:10px}.code-hero h1{font-size:43px}.code-art{padding:26px;transform:none}.code-art strong{margin:17px 0 24px}.workspace{grid-template-columns:1fr}.question-panel,.editor-panel{padding:20px}.editor-head{align-items:start;flex-direction:column;gap:8px}#code{min-height:320px;font-size:12px;padding:16px}.test-row{grid-template-columns:1fr}.code-hero p{font-size:13px}.run-row{gap:9px}.run-row>span{flex-basis:100%}}