*{box-sizing:border-box;margin:0;padding:0}
:root{--navy:#071d33;--navy2:#173b5b;--ink:#17283b;--muted:#63768a;--line:#cbd5df;--silver:#e8edf2;--soft:#f5f7f9;--paper:#fff;--cyan:#4f9fca;--green:#247356;--page-width:1580px;--shadow:0 26px 70px -52px rgba(7,29,51,.85)}
html{scroll-behavior:smooth}
body{min-height:100vh;font-family:"Pretendard",-apple-system,BlinkMacSystemFont,sans-serif;background:linear-gradient(145deg,#fff 0%,#f4f7f9 58%,#e6edf3 100%);color:var(--ink);line-height:1.65}
a{color:inherit;text-decoration:none}button{font:inherit}
.topbar{position:sticky;top:0;z-index:40;border-bottom:1px solid rgba(184,197,209,.82);background:rgba(255,255,255,.91);backdrop-filter:blur(18px)}
.topbar-inner{width:min(var(--page-width),calc(100% - 34px));min-height:68px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:12px;color:var(--navy);font-weight:900}.brand img{width:40px;height:40px;border:1px solid #c4ced8;border-radius:11px;background:#fff}.brand small{display:block;color:#72859a;font-family:"Lexend",sans-serif;font-size:9px;letter-spacing:2px;text-transform:uppercase}
.top-actions{display:flex;gap:7px}.pill{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:8px 14px;border:1px solid #b9c5d0;border-radius:999px;background:#fff;color:var(--navy);font-size:11px;font-weight:850}.pill.primary{border-color:var(--navy);background:var(--navy);color:#fff}
.hero{width:min(var(--page-width),calc(100% - 34px));margin:auto;padding:70px 0 42px;display:grid;grid-template-columns:minmax(0,1fr) minmax(410px,.9fr);gap:46px;align-items:center}
.eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:17px;color:#4c7092;font-family:"Lexend",sans-serif;font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase}.lesson-no{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--navy);color:#fff;letter-spacing:0}
.hero h1{color:var(--navy);font-size:clamp(46px,6vw,78px);font-weight:950;line-height:1.02;letter-spacing:-4px;word-break:keep-all}.hero-lead{margin-top:22px;max-width:650px;color:#52677b;font-size:17px;line-height:1.85;word-break:keep-all}.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:25px}.tag{padding:8px 12px;border:1px solid #c1ccd6;border-radius:999px;background:rgba(255,255,255,.8);color:var(--navy2);font-size:11px;font-weight:850}
.hero-shot{position:relative;min-height:360px;border:1px solid #c4cfd9;border-radius:28px;background:linear-gradient(145deg,#f9fbfc,#e5ebf1);box-shadow:var(--shadow);overflow:hidden}.hero-shot img{width:100%;height:100%;min-height:360px;object-fit:cover;display:block}.hero-shot::after{content:"REAL UNITY 6.3 · TESTED";position:absolute;left:18px;bottom:18px;padding:8px 11px;border-radius:999px;background:rgba(7,29,51,.92);color:#fff;font-family:"Lexend",sans-serif;font-size:9px;font-weight:800;letter-spacing:1.2px}
.starter-kit{width:min(var(--page-width),calc(100% - 34px));margin:0 auto 34px;display:grid;grid-template-columns:minmax(360px,.72fr) minmax(420px,.8fr);border:1px solid #92b9aa;border-radius:28px;background:linear-gradient(145deg,#fbfffd,#eaf5f0);box-shadow:var(--shadow);overflow:hidden}.starter-copy{padding:40px}.starter-copy h2{color:var(--navy);font-size:clamp(33px,3.6vw,52px);font-weight:950;line-height:1.08;letter-spacing:-2px}.starter-copy>p{margin-top:15px;color:#506a61;font-size:15px;line-height:1.8}.starter-copy>p b{color:#176348}.kit-download{display:grid;grid-template-columns:42px 1fr;align-items:center;margin-top:23px;padding:16px;border-radius:15px;background:#176348;color:#fff;box-shadow:0 18px 35px -28px #0a5137}.kit-download>span{grid-row:1/3;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#fff;color:#176348;font-size:20px;font-weight:950}.kit-download>b{font-size:15px}.kit-download>small{color:#c8eadb;font-size:10px}.kit-steps{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:17px}.kit-steps li{display:flex;align-items:center;gap:8px;list-style:none;color:#48685b;font-size:11px;font-weight:750}.kit-steps b{display:grid;place-items:center;width:23px;height:23px;border-radius:7px;background:#d7eee3;color:#176348;font-family:"Lexend",sans-serif;font-size:9px}.starter-visual{position:relative;min-height:440px;overflow:hidden;background:#052f32}.kit-space{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.88}.kit-sprites{position:absolute;inset:24px;display:grid;grid-template-columns:1.12fr 1fr .42fr;align-items:end;gap:10px}.kit-sprites figure{position:relative;margin:0;padding:12px;border:1px solid rgba(207,255,237,.36);border-radius:20px;background:rgba(2,24,31,.55);backdrop-filter:blur(8px)}.kit-sprites img{display:block;width:100%;height:auto;filter:drop-shadow(0 14px 20px rgba(0,0,0,.35))}.kit-sprites figcaption{position:absolute;left:13px;top:11px;color:#d8fff0;font-family:"Lexend",sans-serif;font-size:8px;font-weight:850;letter-spacing:1.4px}.kit-sprites .bullet{align-self:center;padding:18px}.ai-sprite-maker{grid-column:1/-1;padding:30px 40px 38px;border-top:1px solid #b8d5ca;background:rgba(255,255,255,.72)}.ai-intro{display:grid;grid-template-columns:minmax(220px,.6fr) minmax(0,1fr);gap:8px 30px;align-items:end}.ai-intro small{grid-column:1/-1;color:#2b7c5c;font-family:"Lexend",sans-serif;font-size:9px;font-weight:850;letter-spacing:1.8px}.ai-intro h3{color:var(--navy);font-size:29px;line-height:1.15;letter-spacing:-1px}.ai-intro p{color:#5c7169;font-size:13px;line-height:1.7}.prompt-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}.prompt-grid article{min-width:0;padding:16px;border:1px solid #bfd3cb;border-radius:16px;background:#fff}.prompt-grid header{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#267052;font-size:9px;font-weight:850}.prompt-grid h4{margin-top:12px;color:var(--navy);font-size:16px}.prompt-grid pre{max-height:145px;margin-top:8px;padding:12px;overflow:auto;border-radius:10px;background:#eef6f2;color:#365a4b;font:10px/1.7 "JetBrains Mono",monospace;white-space:pre-wrap;word-break:keep-all}.copy-prompt{flex:0 0 auto;padding:7px 9px;border:1px solid #8fbaa7;border-radius:8px;background:#f1faf6;color:#176348;font-size:9px;font-weight:850;cursor:pointer}.prompt-check{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}.prompt-check>*{padding:7px 9px;border-radius:999px;background:#e4f3ec;color:#36624f;font-size:10px}.prompt-check b{background:#176348;color:#fff}
.vscode-beginner{width:min(var(--page-width),calc(100% - 34px));margin:0 auto 34px;padding:40px;border:1px solid #aebdca;border-radius:28px;background:rgba(255,255,255,.96);box-shadow:var(--shadow)}.vscode-intro{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:28px;align-items:end}.vscode-intro h2{color:var(--navy);font-size:clamp(36px,4.2vw,58px);font-weight:950;line-height:1.03;letter-spacing:-2.5px}.vscode-intro p{max-width:790px;margin-top:16px;color:#596e81;font-size:15px;line-height:1.8}.vscode-intro p b{color:var(--navy)}.vscode-download{display:grid;grid-template-columns:40px 1fr;align-items:center;padding:15px;border:1px solid #a9bac8;border-radius:15px;background:#f5f8fa}.vscode-download>span{grid-row:1/3;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--navy);color:#fff}.vscode-download>b{color:var(--navy);font-size:12px}.vscode-download>small{color:#738598;font-size:9px}.vscode-tour{display:grid;grid-template-columns:minmax(540px,1.45fr) minmax(300px,.55fr);gap:20px;margin-top:30px}.vscode-window{overflow:hidden;border:1px solid #4e6478;border-radius:18px;background:#101820;box-shadow:0 28px 60px -42px #071d33}.mock-titlebar{display:flex;align-items:center;gap:7px;height:34px;padding:0 12px;background:#20262c;color:#aebbc6;font:9px/1 "JetBrains Mono",monospace}.mock-titlebar i{width:9px;height:9px;border-radius:50%;background:#ff625a}.mock-titlebar i:nth-child(2){background:#ffbd2e}.mock-titlebar i:nth-child(3){background:#28c840}.mock-titlebar span{margin-left:8px}.mock-workbench{display:grid;grid-template-columns:44px 190px minmax(0,1fr);min-height:390px}.mock-activity{display:flex;flex-direction:column;align-items:center;gap:20px;padding-top:14px;background:#252a30;color:#aeb7c0;font-size:19px}.mock-activity b,.vscode-labels>li>b{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:#f2bd32;color:#071d33;font:900 9px/1 "Lexend",sans-serif}.mock-explorer{display:flex;flex-direction:column;gap:8px;padding:14px 10px;background:#1d2228;color:#cad3db;font:10px/1.35 "JetBrains Mono",monospace}.mock-pane-title{margin-bottom:9px;color:#8e9ba7;font-size:9px}.mock-explorer span,.mock-explorer em{font-style:normal}.mock-explorer .indent{padding-left:10px}.mock-explorer .indent2{padding-left:20px}.mock-explorer em{padding:6px 7px 6px 31px;border-radius:4px}.mock-explorer .active-file{background:#343a40;color:#fff}.mock-editor{min-width:0;display:grid;grid-template-rows:36px 1fr 24px;background:#091d2d}.mock-tabs{display:flex;background:#151b21}.active-tab{position:relative;display:flex;align-items:center;gap:7px;min-width:175px;padding:0 11px;border-top:1px solid #7cb0d5;background:#091d2d;color:#d9e6ef;font:10px/1 "JetBrains Mono",monospace}.active-tab b{display:grid;place-items:center;width:19px;height:19px;border-radius:6px;background:#f2bd32;color:#071d33;font-size:8px}.active-tab i{margin-left:auto;color:#f2bd32;font-style:normal}.mock-code{display:grid;grid-template-columns:32px minmax(0,1fr);align-content:start;padding:17px 0;overflow:hidden;color:#dce8f2;font:11px/1.8 "JetBrains Mono",monospace}.mock-code .line-no{padding-right:9px;color:#536b7d;text-align:right;user-select:none}.mock-code code{padding-left:13px;white-space:nowrap}.mock-code strong{color:#72b9e7}.mock-code .green{color:#72d6a0}.mock-code u{text-decoration:underline wavy #ef6c75 1.5px;text-underline-offset:4px}.mock-status{display:flex;justify-content:space-between;align-items:center;padding:0 8px;background:#1d668b;color:#fff;font:8px/1 "JetBrains Mono",monospace}.mock-status b{display:inline-grid;place-items:center;width:18px;height:18px;margin-right:5px;border-radius:5px;background:#f2bd32;color:#071d33}.vscode-labels{display:grid;gap:9px}.vscode-labels>li{display:grid;grid-template-columns:28px 1fr;gap:10px;list-style:none;padding:13px;border:1px solid #c6d1da;border-radius:13px;background:#f7f9fb}.vscode-labels>li:last-child>b{background:#d95862;color:#fff}.vscode-labels strong,.vscode-labels span{display:block}.vscode-labels strong{color:var(--navy);font-size:12px}.vscode-labels span{margin-top:3px;color:#607487;font-size:10px;line-height:1.55}.vscode-labels code{padding:1px 4px;border-radius:4px;background:#e6edf3;font-family:"JetBrains Mono",monospace}.vscode-labels em{color:#c18d00;font-style:normal}.vscode-routine{margin-top:20px;padding:23px;border:1px solid #90b5a6;border-radius:18px;background:linear-gradient(145deg,#f7fcfa,#eaf5f0)}.routine-title small{color:#2d7459;font-family:"Lexend",sans-serif;font-size:9px;font-weight:850;letter-spacing:1px}.routine-title h3{margin-top:4px;color:var(--navy);font-size:23px}.vscode-routine ol{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:16px}.vscode-routine li{min-width:0;list-style:none;padding:12px;border-radius:12px;background:#fff}.vscode-routine li>b{display:block;color:#69917f;font:900 9px/1 "Lexend",sans-serif}.vscode-routine li span,.vscode-routine li strong,.vscode-routine li small{display:block}.vscode-routine li strong{margin-top:8px;color:var(--navy);font-size:11px}.vscode-routine li small{margin-top:4px;color:#61776d;font-size:9px;line-height:1.5}.vscode-routine li.must{background:#f3bd32}.vscode-routine li.must>b,.vscode-routine li.must small{color:#5a4511}.vscode-help{display:grid;grid-template-columns:220px 1fr 1fr;gap:16px;margin-top:17px;padding:17px;border-left:4px solid #315f89;background:#eef4f8;color:#52687b;font-size:11px;line-height:1.65}.vscode-help>strong{color:var(--navy);font-size:13px}.vscode-help span b{color:#244f74}
.csharp-primer{width:min(var(--page-width),calc(100% - 34px));margin:0 auto 34px;padding:38px 40px;border:1px solid #a9bac8;border-radius:28px;background:linear-gradient(145deg,#071b2f,#133a58);color:#fff;box-shadow:var(--shadow)}.csharp-primer>header{display:grid;grid-template-columns:minmax(320px,.65fr) minmax(380px,1fr);gap:36px;align-items:end}.csharp-primer .step-kicker{color:#8eb5d5}.csharp-primer h2{font-size:clamp(35px,4vw,55px);font-weight:950;line-height:1.04;letter-spacing:-2px}.csharp-primer>header p{color:#c3d2df;font-size:14px;line-height:1.8}.csharp-primer>header p b{color:#fff}.csharp-word-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:28px}.csharp-word-grid article{display:grid;grid-template-columns:70px minmax(0,1fr);gap:11px;align-items:center;min-width:0;padding:14px;border:1px solid #3b607e;border-radius:14px;background:rgba(255,255,255,.06)}.csharp-word-grid code{display:grid;place-items:center;min-width:0;min-height:45px;padding:6px;overflow:hidden;border-radius:10px;background:#fff;color:#0b2c47;font:850 12px/1.25 "JetBrains Mono",monospace;text-align:center;white-space:nowrap}.csharp-word-grid article.long-token{grid-template-columns:1fr;align-content:start}.csharp-word-grid article.long-token code{place-items:center start;min-height:36px;padding:8px 10px;font-size:10px}.csharp-word-grid strong,.csharp-word-grid span{display:block}.csharp-word-grid strong{font-size:11px}.csharp-word-grid span{margin-top:3px;color:#adc2d2;font-size:9px;line-height:1.45}.typing-rules{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;padding:14px;border-radius:14px;background:#eff7f3;color:#365d4e}.typing-rules>*{padding:6px 9px;border-radius:8px;background:#fff;font-size:10px}.typing-rules b{background:#f3bd32;color:#17283b}
.course-layout{width:min(var(--page-width),calc(100% - 34px));margin:0 auto 85px;display:grid;grid-template-columns:250px minmax(0,1fr);gap:30px;align-items:start}.lesson-nav{position:sticky;top:88px;max-height:calc(100vh - 108px);overflow-y:auto;padding:17px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.9);box-shadow:var(--shadow)}.nav-label{margin:0 7px 11px;color:#8191a1;font-family:"Lexend",sans-serif;font-size:9px;font-weight:800;letter-spacing:2px;text-transform:uppercase}.lesson-nav a{display:grid;grid-template-columns:27px 1fr;gap:8px;align-items:center;padding:10px 8px;border-radius:10px;color:#586d81;font-size:12px;font-weight:750}.lesson-nav a:hover{background:#edf2f6;color:var(--navy)}.lesson-nav a.is-done{color:#176348;background:#edf8f3}.lesson-nav a.is-done b{color:#178059}.lesson-nav b{color:#91a2b2;font-family:"Lexend",sans-serif;font-size:9px}.lesson-main{display:grid;gap:18px}
.step{overflow:hidden;border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.96);box-shadow:var(--shadow)}.step-grid{display:grid;grid-template-columns:minmax(390px,.78fr) minmax(0,1.22fr);min-height:480px}.step-copy{padding:38px 34px;display:flex;flex-direction:column;justify-content:center}.step-kicker{margin-bottom:13px;color:#8090a1;font-family:"Lexend",sans-serif;font-size:9px;font-weight:800;letter-spacing:2px;text-transform:uppercase}.step h2{color:var(--navy);font-size:clamp(29px,3.1vw,43px);font-weight:950;line-height:1.12;letter-spacing:-1.8px;word-break:keep-all}.step p{margin-top:16px;color:#5b6f82;font-size:15px;line-height:1.83;word-break:keep-all}.click-path{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}.click-path span{padding:6px 9px;border:1px solid #c6d1db;border-radius:8px;background:#f5f8fa;color:var(--navy2);font-family:"JetBrains Mono",monospace;font-size:10px;font-weight:700}.click-path i{align-self:center;color:#8da0b2;font-style:normal;font-weight:900}.tasks{display:grid;gap:8px;margin-top:20px}.tasks li{position:relative;list-style:none;padding-left:31px;color:#40566c;font-size:13px;font-weight:650;line-height:1.6}.tasks li::before{content:attr(data-num);position:absolute;left:0;top:1px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#e8eef4;color:#315f89;font-family:"Lexend",sans-serif;font-size:8px;font-weight:900}.check{margin-top:19px;padding:13px 15px;border-left:3px solid #315f89;background:#eff4f8;color:#4d6479;font-size:12px;line-height:1.65}
.kid-guide{margin-top:19px;padding:15px;border:1px solid #e0bd55;border-radius:15px;background:#fffaf0}.kid-guide>header{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.kid-guide>header span{padding:5px 8px;border-radius:999px;background:#f3bd32;color:#182c3f;font-size:9px;font-weight:900}.kid-guide>header strong{color:var(--navy);font-size:12px}.kid-guide>p{margin-top:9px;color:#5d5133;font-size:12px;line-height:1.7}.kid-guide details{margin-top:10px;border-top:1px solid #ead9aa}.kid-guide summary{padding:10px 0 5px;color:#6a5726;font-size:10px;font-weight:850;cursor:pointer}.kid-guide dl{display:grid;gap:5px}.kid-guide dl>div{display:grid;grid-template-columns:minmax(80px,.36fr) minmax(0,1fr);gap:8px;padding:7px 8px;border-radius:8px;background:#fff}.kid-guide dt{color:#173b5b;font-size:10px;font-weight:900;word-break:keep-all}.kid-guide dd{color:#665d48;font-size:10px;line-height:1.45}.kid-trouble{display:grid;grid-template-columns:115px 1fr;gap:9px;margin-top:10px;padding:10px;border-radius:10px;background:#edf4f8}.kid-trouble b{color:#285b80;font-size:10px}.kid-trouble span{color:#536a7c;font-size:10px;line-height:1.55}.task-title{display:flex;align-items:baseline;gap:8px;margin-top:18px}.task-title b{color:var(--navy);font-size:12px}.task-title span{color:#7a8a98;font-size:9px}.task-title+.tasks{margin-top:10px}.task-action{display:block;color:#334c62;font-weight:800}.task-why{display:block;margin-top:5px;padding:8px 10px;border-left:2px solid #62a780;border-radius:0 8px 8px 0;background:#f0f7f3;color:#567063;font-size:10px;font-weight:600;line-height:1.6}.task-why b{margin-right:5px;color:#18704b;font-size:9px;font-weight:950}
.task-annotations{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}.task-annotations>span{display:flex;align-items:baseline;gap:6px;padding:6px 9px;border:1px solid #c9d8e3;border-radius:8px;background:#f7fafc}.task-annotations b{color:#153e60;font-size:10.5px;font-weight:950}.task-annotations i{color:#526b80;font-size:10.5px;font-style:normal;font-weight:650;line-height:1.5}
.step-media{display:flex;align-items:center;justify-content:center;min-width:0;padding:26px;background:linear-gradient(145deg,#f1f5f8,#e1e8ee)}.shot-button{position:relative;width:100%;padding:0;border:1px solid #b9c6d1;border-radius:18px;background:#fff;box-shadow:0 22px 48px -39px rgba(7,29,51,.9);overflow:hidden;cursor:zoom-in}.shot-button img{display:block;width:100%;height:auto}.shot-caption{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;color:#5b6e81;background:#fff;font-size:11px;font-weight:750;text-align:left}.shot-caption b{color:var(--navy)}
.code-card{width:100%;border:1px solid #263d54;border-radius:18px;background:#071a2c;box-shadow:0 22px 48px -39px #071d33;overflow:hidden}.code-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #25425f;color:#b9c9d7;font-family:"Lexend",sans-serif;font-size:9px;font-weight:800;letter-spacing:1.5px}.copy-code{padding:6px 9px;border:1px solid #42617d;border-radius:8px;background:#102a43;color:#fff;font-size:9px;font-weight:800;cursor:pointer}.code-card pre{overflow:auto;padding:22px;color:#e8f2fa;font:12px/1.75 "JetBrains Mono",monospace;white-space:pre}.code-card .accent{color:#7dd7ff}
.code-card.typing-code{border-color:#547995}.code-card.typing-code .code-head{color:#d9f5ee;background:#0d2d43}.code-card.typing-code pre{font-size:13px;line-height:1.8;tab-size:4}.typing-tag{border-color:#83b6a3;background:#eaf7f1;color:#176247}.typing-progress{margin:0 0 12px;padding:12px;border:1px solid #c4d4df;border-radius:13px;background:#f4f8fa}.typing-progress span{display:flex;align-items:baseline;gap:4px;color:#4f6578;font-size:10px;font-weight:850}.typing-progress b{color:#136a4a;font:900 18px/1 "Lexend",sans-serif}.typing-progress i{display:block;height:7px;margin:9px 0 7px;overflow:hidden;border-radius:999px;background:#dce5eb}.typing-progress em{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#1d7659,#53a98c);transition:width .25s ease}.typing-progress small{display:block;color:#71869a;font-size:9px}.step-complete{align-self:flex-start;margin-top:15px;padding:9px 13px;border:1px solid #a8bbc9;border-radius:10px;background:#fff;color:#31516d;font-size:11px;font-weight:850;cursor:pointer}.step-complete span{margin-right:4px;font-family:"Lexend",sans-serif}.step-complete:hover{border-color:#4e7798;background:#f1f6f9}.step-complete.is-done{border-color:#73a891;background:#e9f6f0;color:#176348}.step.is-done{border-color:#80ad9a;box-shadow:0 26px 70px -52px rgba(20,105,76,.9)}.step.is-done .step-kicker{color:#197053}
.code-before{display:grid;gap:3px;padding:13px 16px;border-bottom:1px solid #36546d;background:#fff5d7;color:#5b4a20}.code-before b{font-size:11px}.code-before span{font-size:9px;line-height:1.5}.code-pieces{display:grid;gap:9px;padding:12px;background:#071a2c}.code-piece{overflow:hidden;border:1px solid #294b65;border-radius:12px;background:#0a2033}.code-piece>header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-bottom:1px solid #294b65;background:#102d43}.code-piece>header span{color:#72d6a0;font:850 9px/1 "Lexend",sans-serif}.code-piece>header b{color:#b8cad8;font-size:9px}.code-piece pre{padding:13px 0!important}.code-line{display:grid;grid-template-columns:34px minmax(max-content,1fr);min-height:23px}.code-line>i{padding-right:9px;border-right:1px solid #203c52;color:#60798d;font-style:normal;text-align:right;user-select:none}.code-line>span{padding:0 13px;white-space:pre}.code-pieces .code-comment{display:inline;color:#72d6a0}
.code-comment{color:#72d6a0;font-style:italic}.comment-guide{margin-top:17px;padding:13px 15px;border:1px solid #9bcab3;border-radius:12px;background:#effaf4;color:#315d49;font-size:12px;line-height:1.65}.comment-guide b{display:block;margin-bottom:4px;color:#17704b;font-family:"JetBrains Mono",monospace;font-size:11px}.comment-guide span{display:block}
.save-guide{margin-top:11px;padding:14px;border:1px solid #d7b664;border-radius:14px;background:linear-gradient(145deg,#fffdf7,#fff7df);color:#584a2c}.save-warning{display:flex;align-items:center;gap:11px;padding-bottom:12px;border-bottom:1px solid #ead7a5}.save-warning>span{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:#f1bd31;color:#15283b;font:950 18px/1 "Lexend",sans-serif}.save-warning b,.save-warning small{display:block}.save-warning b{color:var(--navy);font-size:13px}.save-warning small{margin-top:2px;color:#75623a;font-size:10px;line-height:1.5}.save-guide ol{display:grid;gap:8px;margin-top:12px}.save-guide li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px;align-items:start;list-style:none;font-size:11px;font-weight:800;line-height:1.45}.save-guide li>b{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:var(--navy);color:#fff;font:850 9px/1 "Lexend",sans-serif}.save-guide li span{min-width:0}.save-guide li small{display:block;margin-top:2px;color:#776744;font-size:9px;font-weight:600;line-height:1.5}.save-guide kbd{display:inline-block;min-width:20px;padding:1px 5px;border:1px solid #b8a46e;border-bottom-width:2px;border-radius:5px;background:#fff;color:#24384c;font:750 9px/1.5 "JetBrains Mono",monospace;box-shadow:0 1px 0 rgba(70,53,14,.12)}
.finish{padding:40px;border:1px solid #244767;border-radius:24px;background:linear-gradient(135deg,#071a2e,#153b5c);color:#dbe6ef}.finish-grid{display:grid;grid-template-columns:1fr .8fr;gap:34px;align-items:center}.finish small{color:#88abc9;font-family:"Lexend",sans-serif;font-weight:800;letter-spacing:2px}.finish h2{margin-top:10px;color:#fff;font-size:38px;line-height:1.15;letter-spacing:-1.5px}.finish p{margin-top:14px;color:#b9c8d5}.mission{padding:20px;border:1px solid #456681;border-radius:16px;background:rgba(255,255,255,.06)}.mission b{display:block;color:#77c9f3;font-size:11px}.mission span{display:block;margin-top:8px;color:#fff;font-size:15px;font-weight:800}.pager{display:grid;grid-template-columns:1fr 1fr;gap:10px}.pager a{padding:18px;border:1px solid var(--line);border-radius:17px;background:#fff}.pager a:last-child{text-align:right}.pager small{display:block;color:#8293a4;font-family:"Lexend",sans-serif;font-size:8px;letter-spacing:1.2px}.pager b{display:block;margin-top:4px;color:var(--navy);font-size:13px}
.course-note{padding:20px 22px;border:1px solid var(--line);border-radius:18px;background:#fff;color:#63768a;font-size:12px}.course-note strong{color:var(--navy)}.course-note a{display:inline-block;margin-top:10px;margin-right:6px;padding:6px 9px;border:1px solid #c0ccd7;border-radius:999px;color:#315f89;font-weight:800}
dialog{width:min(1280px,calc(100% - 30px));max-height:92vh;margin:auto;padding:12px;border:1px solid #8ea0b1;border-radius:20px;background:#fff;box-shadow:0 40px 100px rgba(7,29,51,.42)}dialog::backdrop{background:rgba(3,15,27,.8)}dialog img{display:block;max-width:100%;max-height:82vh;margin:auto;border-radius:10px}.dialog-close{position:fixed;right:28px;top:24px;width:42px;height:42px;border:0;border-radius:50%;background:#fff;color:var(--navy);font-size:20px;font-weight:900;cursor:pointer}
@media(max-width:980px){.hero{grid-template-columns:1fr}.hero-shot{min-height:300px}.starter-kit{grid-template-columns:1fr}.starter-visual{min-height:520px}.ai-intro,.prompt-grid,.vscode-intro,.vscode-tour,.csharp-primer>header{grid-template-columns:1fr}.vscode-download{max-width:320px}.vscode-routine ol{grid-template-columns:repeat(3,1fr)}.vscode-help{grid-template-columns:1fr}.csharp-word-grid{grid-template-columns:repeat(2,1fr)}.course-layout{grid-template-columns:1fr}.lesson-nav{position:static;display:flex;overflow:auto}.nav-label{display:none}.typing-progress{flex:0 0 190px;margin:0 8px 0 0}.lesson-nav a{min-width:165px}.step-grid{grid-template-columns:1fr}.step-media{min-height:360px}.finish-grid{grid-template-columns:1fr}}
@media(max-width:640px){.topbar-inner,.hero,.starter-kit,.vscode-beginner,.csharp-primer,.course-layout{width:min(100% - 24px,var(--page-width))}.topbar-inner{min-height:62px}.brand small{display:none}.top-actions .pill:first-child{display:none}.hero{padding:46px 0 30px;gap:28px}.hero h1{font-size:43px;letter-spacing:-2.4px}.hero-lead{font-size:15px}.hero-shot,.hero-shot img{min-height:230px}.starter-copy{padding:28px 23px}.starter-copy h2{font-size:34px}.kit-steps{grid-template-columns:1fr}.starter-visual{min-height:390px}.kit-sprites{inset:14px;grid-template-columns:1fr 1fr}.kit-sprites .bullet{display:none}.ai-sprite-maker{padding:26px 22px 30px}.ai-intro h3{font-size:25px}.vscode-beginner,.csharp-primer{padding:27px 20px}.vscode-intro h2,.csharp-primer h2{font-size:37px}.vscode-tour{display:block;overflow:hidden}.vscode-window{overflow-x:auto}.mock-workbench{min-width:680px}.vscode-labels{margin-top:14px}.vscode-routine{padding:18px}.vscode-routine ol,.csharp-word-grid{grid-template-columns:1fr 1fr}.csharp-word-grid article{grid-template-columns:55px minmax(0,1fr);padding:10px}.csharp-word-grid article.long-token{grid-template-columns:1fr}.course-layout{gap:18px}.step-grid{min-height:0}.step-copy{padding:29px 23px}.step h2{font-size:31px}.kid-trouble{grid-template-columns:1fr}.task-title{display:block}.task-title span{display:block;margin-top:2px}.step-media{min-height:0;padding:16px}.code-card pre{font-size:10px}.code-piece>header{align-items:flex-start;flex-direction:column}.finish{padding:28px 24px}.pager{grid-template-columns:1fr}.pager a:last-child{text-align:left}}

/* Unity Hub와 Project Settings를 공개 수업용으로 다시 그린 단계별 화면 안내 */
.has-panel-guide .step-grid{grid-template-columns:minmax(410px,.68fr) minmax(650px,1.32fr)}
.panel-guide-media{align-items:stretch;padding:22px;background:linear-gradient(145deg,#dbe4ea,#bac7d1)}
.unity-guide{display:flex;flex-direction:column;width:100%;min-width:0;overflow:hidden;border:1px solid #40505c;border-radius:18px;background:#111;color:#eef3f5;box-shadow:0 24px 55px -32px rgba(0,0,0,.8)}
.unity-guide>header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;min-height:48px;padding:0 16px;border-bottom:1px solid #30383e;background:#171a1d}
.unity-guide>header b{font:800 12px/1.2 "Lexend",sans-serif}.unity-guide>header small{color:#8f9aa2;font-size:9px}.traffic{display:flex;gap:6px}.traffic i{width:9px;height:9px;border-radius:50%;background:#52585d}.traffic i:first-child{background:#ef655f}.traffic i:nth-child(2){background:#eab846}.traffic i:last-child{background:#55b970}
.unity-guide i{font-style:normal}.hub-workspace{display:grid;grid-template-columns:112px minmax(340px,1fr) 220px;flex:1;min-height:410px}.hub-workspace>aside,.settings-workspace>aside{padding:18px 11px;border-right:1px solid #30383e;background:#191c1f}.hub-workspace>aside strong,.settings-workspace>aside strong{display:block;margin-bottom:19px;font:900 17px/1 "Lexend",sans-serif}.hub-workspace>aside span,.settings-workspace>aside span{display:flex;align-items:center;gap:7px;margin-bottom:7px;padding:9px;border-radius:7px;color:#b3bbc1;font-size:10px}.hub-workspace>aside span.active,.settings-workspace>aside span.active{background:#343a3f;color:#fff;font-weight:850}.unity-guide i:not(.traffic i){display:inline-grid;place-items:center;flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:#f3bd32;color:#102a40;font:950 10px/1 "Lexend",sans-serif;box-shadow:0 0 0 3px rgba(243,189,50,.2)}
.hub-workspace>main{padding:20px;background:#101214}.hub-version{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid #4a535a;border-radius:8px;background:#24282c}.hub-version span,.hub-version small,.hub-version b{display:block}.hub-version small{color:#8e989f;font-size:8px}.hub-version b{margin-top:3px;font-size:10px}.template-label{margin:16px 0 8px;color:#a8b0b5;font-size:9px}.template-row{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.template-row article{position:relative;overflow:hidden;border:1px solid #424a50;border-radius:8px;background:#1b1e21}.template-row article>i{position:absolute;right:7px;top:7px}.template-row article>div{display:grid;place-items:center;height:88px;background:#4b94b8;color:#eef7fb;font:900 17px/1 "Lexend",sans-serif}.template-row article:nth-child(3)>div{background:#e9a800}.template-row article.selected{border:3px solid #208be6}.template-row article.selected>div{background:#248d62;font-size:28px}.template-row article b,.template-row article small{display:block;padding:0 9px}.template-row article b{padding-top:10px;font-size:10px}.template-row article small{padding-top:4px;padding-bottom:10px;color:#929ba2;font-size:7px}.template-row article.selected small{color:#70d8a8}
.hub-form{padding:18px 14px;border-left:1px solid #30383e;background:#1a1d20}.cloud-note{display:flex;gap:9px;align-items:center;margin-bottom:14px;padding:9px;border:1px solid #465057;border-radius:8px;background:#252a2e}.cloud-note span,.cloud-note b,.cloud-note small{display:block}.cloud-note b{font-size:9px}.cloud-note small{margin-top:2px;color:#9ca7ae;font-size:7px}.hub-form label{display:block;margin-top:11px}.hub-form label span{display:flex;align-items:center;gap:6px;color:#aab4ba;font-size:8px}.hub-form label b{display:block;margin-top:5px;padding:10px;border:1px solid #545e65;border-radius:7px;background:#272b2f;font-size:9px}.hub-form p{display:flex;justify-content:space-between;gap:8px;margin-top:13px;color:#c2c8cc;font-size:8px}.hub-form em{color:#72d6a0;font-style:normal}.hub-form button{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;margin-top:22px;padding:12px;border:0;border-radius:7px;background:#1684df;color:#fff;font-size:10px;font-weight:900}.hub-form button i{background:#fff!important;color:#1475bd!important;box-shadow:none!important}
.unity-guide>footer{display:flex;gap:12px;padding:12px 15px;border-top:1px solid #30383e;background:#161a1d;color:#acb7be;font-size:9px;line-height:1.5}.unity-guide>footer b{flex:0 0 auto;color:#f3bd32}
.settings-workspace{display:grid;grid-template-columns:165px 1fr;flex:1;min-height:410px}.settings-workspace>main{padding:22px;background:#202326}.settings-workspace .search{padding:10px;border:1px solid #4b545a;border-radius:7px;background:#151719;color:#aeb7bd;font-size:9px}.settings-workspace h3{display:flex;align-items:center;gap:9px;margin-top:18px;padding:10px;border-bottom:1px solid #4c565d;font-size:12px}.settings-workspace main>section{margin-top:15px;padding:16px;border:1px solid #485159;border-radius:10px;background:#292d31}.settings-workspace main>section>small{color:#96a2aa;font-size:8px}.settings-workspace label{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:17px}.settings-workspace label span{display:flex;align-items:center;gap:9px;font-size:10px}.settings-workspace label b{min-width:150px;padding:10px;border:2px solid #2f91e2;border-radius:7px;background:#151719;color:#fff;font-size:10px}.settings-workspace main>section>p{display:flex;align-items:center;gap:10px;margin-top:18px;padding:11px;border:1px solid #6e633b;border-radius:8px;background:#40391f}.settings-workspace main>section>p span,.settings-workspace main>section>p strong,.settings-workspace main>section>p small{display:block}.settings-workspace main>section>p strong{font-size:9px}.settings-workspace main>section>p small{margin-top:2px;color:#d6ca9e;font-size:8px}.console-check{display:flex;align-items:center;gap:10px;margin-top:15px;padding:12px;border:1px solid #3a7258;border-radius:9px;background:#18392a}.console-check span,.console-check b,.console-check small{display:block}.console-check b{font-size:10px}.console-check small{margin-top:3px;color:#9cc9b1;font-size:8px}
@media(max-width:1180px){.has-panel-guide .step-grid{grid-template-columns:1fr}.hub-workspace{grid-template-columns:100px minmax(330px,1fr) 200px}}
@media(max-width:720px){.panel-guide-media{overflow-x:auto;justify-content:flex-start}.unity-guide{min-width:760px}.has-panel-guide .step-copy{padding:29px 23px}.unity-guide>header small{display:none}}

/* Focus reading layout: 목차는 기본 접힘, 본문과 코드는 넓고 크게 */
.course-layout{grid-template-columns:280px minmax(0,1fr);gap:24px;transition:grid-template-columns .24s ease,gap .24s ease}
.course-layout.nav-collapsed{grid-template-columns:72px minmax(0,1fr);gap:18px}
.lesson-nav{display:block;max-height:calc(100vh - 98px);padding:12px;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;transition:padding .24s ease,border-color .24s ease}
.lesson-nav>:not(.nav-toggle){overflow:visible}
.nav-toggle{position:sticky;top:0;z-index:4;display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:10px;width:100%;min-height:50px;margin-bottom:10px;padding:6px;border:1px solid #b8c7d3;border-radius:14px;background:linear-gradient(145deg,#fff,#edf3f7);color:var(--navy);text-align:left;cursor:pointer;box-shadow:0 12px 30px -26px #071d33}
.nav-toggle:hover,.nav-toggle:focus-visible{border-color:#567b9a;background:#f7fbfd;outline:3px solid rgba(79,159,202,.18);outline-offset:2px}
.nav-toggle-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--navy);color:#fff;font-size:17px;line-height:1}
.nav-toggle-copy,.nav-toggle-copy b,.nav-toggle-copy small{display:block}.nav-toggle-copy b{font-size:13px}.nav-toggle-copy small{margin-top:2px;color:#718496;font-size:10px;font-weight:800}.nav-toggle-copy em{color:#176c4d;font:900 15px/1 "Lexend",sans-serif;font-style:normal}
.course-layout.nav-collapsed .lesson-nav{max-height:none;padding:8px;background:rgba(255,255,255,.94);overflow:visible}
.course-layout.nav-collapsed .lesson-nav>:not(.nav-toggle){display:none}
.course-layout.nav-collapsed .nav-toggle{grid-template-columns:1fr;gap:6px;min-height:94px;margin:0;padding:8px 5px;text-align:center}
.course-layout.nav-collapsed .nav-toggle-icon{width:40px;height:40px;margin:auto}
.course-layout.nav-collapsed .nav-toggle-copy b{display:none}
.course-layout.nav-collapsed .nav-toggle-copy small{font-size:9px;line-height:1.25}.course-layout.nav-collapsed .nav-toggle-copy em{display:block;margin-bottom:2px;font-size:17px}
.lesson-nav .nav-label{margin-top:2px}.lesson-nav a{grid-template-columns:31px 1fr;gap:9px;padding:11px 9px;font-size:13px;line-height:1.45}.lesson-nav a b{font-size:10px}.lesson-nav a.is-current{background:#e8f1f7;color:var(--navy);box-shadow:inset 3px 0 #315f89}.lesson-nav a.is-current b{color:#315f89}
.lesson-main{min-width:0;gap:24px}
.step-grid,.has-panel-guide .step-grid{grid-template-columns:minmax(480px,.82fr) minmax(0,1.18fr);min-height:540px}
.step-copy{justify-content:flex-start;padding:48px 44px}.step-kicker{font-size:10px}.step h2{font-size:clamp(36px,3.25vw,50px);line-height:1.1}.step p{margin-top:18px;font-size:17px;line-height:1.85}
.kid-guide{margin-top:22px;padding:19px;border-radius:17px}.kid-guide>header{gap:10px}.kid-guide>header span{padding:6px 10px;font-size:11px}.kid-guide>header strong{font-size:15px}.kid-guide>p{margin-top:12px;font-size:14px;line-height:1.78}.kid-guide summary{padding:13px 0 7px;font-size:12px}.kid-guide dl{gap:7px}.kid-guide dl>div{grid-template-columns:minmax(105px,.34fr) minmax(0,1fr);gap:12px;padding:10px}.kid-guide dt{font-size:12px}.kid-guide dd{font-size:12px;line-height:1.6}.kid-trouble{grid-template-columns:145px 1fr;gap:12px;margin-top:12px;padding:13px}.kid-trouble b,.kid-trouble span{font-size:12px}.kid-trouble span{line-height:1.65}
.comment-guide{margin-top:19px;padding:16px 18px;font-size:14px;line-height:1.75}.comment-guide b{font-size:13px}
.save-guide{margin-top:14px;padding:18px;border-radius:16px}.save-warning{gap:13px;padding-bottom:15px}.save-warning>span{flex-basis:36px;width:36px;height:36px}.save-warning b{font-size:15px}.save-warning small{font-size:12px;line-height:1.6}.save-guide ol{gap:11px;margin-top:15px}.save-guide li{grid-template-columns:27px minmax(0,1fr);gap:11px;font-size:13px;line-height:1.55}.save-guide li>b{width:27px;height:27px;font-size:10px}.save-guide li small{font-size:11px;line-height:1.6}.save-guide kbd{font-size:10px}
.click-path{gap:8px;margin-top:22px}.click-path span{padding:8px 11px;font-size:11px}.task-title{display:block;margin-top:24px}.task-title b{font-size:15px}.task-title span{display:block;margin-top:3px;font-size:12px;line-height:1.55}.task-title+.tasks{margin-top:14px}.tasks{gap:12px}.tasks li{padding-left:39px;font-size:15px;line-height:1.65}.tasks li::before{top:0;width:28px;height:28px;font-size:10px}.task-action{font-size:15px}.task-why{margin-top:7px;padding:11px 13px;border-left-width:3px;font-size:13px;line-height:1.7}.task-why b{font-size:11px}.check{margin-top:23px;padding:16px 18px;font-size:14px;line-height:1.7}.step-complete{margin-top:19px;padding:11px 16px;font-size:13px}
.step-media{padding:32px}.code-head{padding:15px 18px;font-size:11px}.code-card pre{padding:26px;font-size:14px;line-height:1.85}.code-card.typing-code pre{font-size:15.5px;line-height:1.9}.code-before{gap:5px;padding:16px 19px}.code-before b{font-size:13px}.code-before span{font-size:12px;line-height:1.65}.code-pieces{gap:13px;padding:16px}.code-piece{border-radius:14px}.code-piece>header{padding:12px 15px}.code-piece>header span,.code-piece>header b{font-size:11px}.code-piece pre{padding:17px 0!important}.code-line{grid-template-columns:42px minmax(max-content,1fr);min-height:29px}.code-line>i{padding-right:11px}.code-line>span{padding:0 16px}.shot-caption{padding:15px 17px;font-size:13px}
.typing-progress{padding:14px}.typing-progress span{font-size:12px}.typing-progress small{font-size:11px}.typing-progress b{font-size:20px}

@media(max-width:1320px){.step-grid,.has-panel-guide .step-grid{grid-template-columns:minmax(430px,.9fr) minmax(0,1.1fr)}.step-copy{padding:40px 35px}.step-media{padding:24px}.code-card.typing-code pre{font-size:14px}}
@media(max-width:1080px){.course-layout,.course-layout.nav-collapsed{grid-template-columns:1fr;gap:18px}.lesson-nav,.course-layout.nav-collapsed .lesson-nav{position:sticky;top:76px;z-index:25;max-height:70vh;padding:8px;background:rgba(255,255,255,.97)}.course-layout.nav-collapsed .nav-toggle{grid-template-columns:38px 1fr;min-height:50px;padding:6px;text-align:left}.course-layout.nav-collapsed .nav-toggle-icon{width:38px;height:38px;margin:0}.course-layout.nav-collapsed .nav-toggle-copy b{display:block}.course-layout.nav-collapsed .nav-toggle-copy small{font-size:10px}.course-layout.nav-collapsed .nav-toggle-copy em{display:inline;margin:0;font-size:15px}.lesson-nav a{min-width:0}.step-grid,.has-panel-guide .step-grid{grid-template-columns:1fr}.step-media{min-height:0}.nav-toggle{margin-bottom:8px}}
@media(max-width:640px){.step-copy{padding:31px 23px}.step h2{font-size:34px}.step p{font-size:16px}.kid-guide{padding:15px}.kid-guide>header strong{font-size:14px}.kid-guide>p{font-size:13px}.kid-guide dl>div,.kid-trouble{grid-template-columns:1fr}.task-action{font-size:14px}.task-why{font-size:12px}.step-media{padding:15px}.code-card.typing-code pre,.code-card pre{font-size:12.5px;line-height:1.8}.code-line{grid-template-columns:34px minmax(max-content,1fr)}.code-line>span{padding:0 11px}.save-warning small,.save-guide li small{font-size:10.5px}}