@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Syne:wght@600;700;800&family=Figtree:wght@400;500;600&display=swap";:root{--ink:#102a2e;--ink-soft:#3a5559;--paper:#f3f6f4;--panel:#fffc;--line:#c5d2ce;--teal:#0d7a6f;--teal-deep:#08564e;--mint:#b8f0e0;--danger:#b42318;--ok:#067647;--shadow:0 18px 50px #102a2e1f;--radius:18px;color:var(--ink);background:var(--paper);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;font-family:Figtree,system-ui,sans-serif;line-height:1.5}*,:before,:after{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{min-height:100vh}button,input{font:inherit}.shell{grid-template-rows:auto 1fr auto;min-height:100vh;display:grid;position:relative;overflow:hidden}.topbar{z-index:2;justify-content:flex-end;width:min(760px,100% - 2rem);margin:.85rem auto 0;display:flex;position:relative}.lang-switch{border:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffffc7;border-radius:999px;align-items:center;gap:.35rem;padding:.28rem .55rem;display:inline-flex;box-shadow:0 8px 24px #102a2e0f}.lang-btn{appearance:none;color:var(--ink-soft);letter-spacing:.04em;cursor:pointer;background:0 0;border:0;border-radius:999px;padding:.2rem .35rem;font-family:IBM Plex Mono,monospace;font-size:.78rem;font-weight:500;transition:color .15s,background .15s}.lang-btn:hover{color:var(--ink)}.lang-btn.is-active{color:var(--teal-deep);background:var(--mint)}.lang-sep{color:var(--line);-webkit-user-select:none;user-select:none;font-size:.75rem}.atmosphere{z-index:0;background:radial-gradient(80% 55% at 12% -10%,#9fd9c8 0%,#0000 55%),radial-gradient(70% 50% at 100% 0,#d7e8ef 0%,#0000 50%),linear-gradient(165deg,#eef5f2 0%,#e4ebe7 45%,#dfe8e4 100%);position:fixed;inset:0}.atmosphere:after{content:"";opacity:.35;background-image:radial-gradient(var(--line) .7px, transparent .7px);background-size:18px 18px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000,#0000 85%);mask-image:linear-gradient(#000,#0000 85%)}.frame{z-index:1;width:min(760px,100% - 2rem);margin:0 auto;padding:clamp(1.25rem,4vh,3rem) 0 2rem;position:relative}.foot{z-index:1;width:min(720px,100% - 2rem);color:var(--ink-soft);justify-content:space-between;margin:0 auto 1.25rem;font-size:.85rem;display:flex;position:relative}.home{animation:.55s both rise}.eyebrow{color:var(--teal-deep);letter-spacing:.04em;text-transform:uppercase;margin:0 0 .75rem;font-size:.78rem;font-weight:600}.brand{letter-spacing:-.03em;color:var(--ink);margin:0;font-family:Syne,sans-serif;font-size:clamp(3rem,10vw,4.75rem);font-weight:800;line-height:.95}.lede{max-width:28rem;color:var(--ink-soft);margin:1.25rem 0 0;font-size:1.15rem}.cta-row{flex-wrap:wrap;align-items:center;gap:1rem;margin-top:2rem;display:flex}.meta{color:var(--ink-soft);font-size:.95rem}.path-grid{gap:1rem;margin-top:2.25rem;display:grid}@media (width>=640px){.path-grid{grid-template-columns:1fr 1fr}.path-card--wide{grid-column:1/-1}}.path-card{text-align:left;border-radius:var(--radius);border:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:var(--shadow);cursor:pointer;background:#ffffffc7;flex-direction:column;align-items:flex-start;gap:.45rem;padding:1.25rem 1.3rem;transition:transform .18s,border-color .18s;display:flex}.path-card:hover{border-color:var(--teal);transform:translateY(-2px)}.path-kicker{letter-spacing:.04em;text-transform:uppercase;color:var(--teal-deep);font-size:.75rem;font-weight:600}.path-title{letter-spacing:-.02em;font-family:Syne,sans-serif;font-size:1.35rem;font-weight:700}.path-desc{color:var(--ink-soft);font-size:.95rem;line-height:1.45}.path-meta{color:var(--ink-soft);margin-top:.55rem;font-size:.85rem}.btn-primary,.btn-ghost{cursor:pointer;border:1px solid #0000;border-radius:999px;padding:.75rem 1.35rem;transition:transform .15s,background .15s,border-color .15s}.btn-primary{background:var(--teal);color:#fff;font-weight:600}.btn-primary:hover:not(:disabled){background:var(--teal-deep);transform:translateY(-1px)}.btn-primary:disabled{opacity:.55;cursor:default}.btn-ghost{color:var(--ink-soft);border-color:var(--line);background:0 0}.btn-ghost:hover{border-color:var(--teal);color:var(--teal-deep)}.exercise{animation:.45s both rise}.exercise-top{justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.5rem;display:flex}.progress{color:var(--ink-soft);align-items:center;gap:.65rem;font-size:.9rem;display:flex}.progress-track{background:var(--line);border-radius:999px;width:7rem;height:.35rem;overflow:hidden}.progress-fill{background:var(--teal);border-radius:inherit;height:100%;transition:width .3s}.exercise-meta{flex-wrap:wrap;gap:.5rem;margin-bottom:.85rem;display:flex}.pill{background:var(--mint);color:var(--teal-deep);border-radius:999px;align-items:center;padding:.28rem .7rem;font-size:.78rem;font-weight:600;display:inline-flex}.pill.muted{color:var(--ink-soft);background:#e7eeeb}.exercise-title{letter-spacing:-.02em;margin:0;font-family:Syne,sans-serif;font-size:clamp(1.6rem,4vw,2.1rem)}.exercise-goal{color:var(--ink-soft);margin:.45rem 0 1.25rem}.code-block{border-radius:var(--radius);color:#d7ebe4;box-shadow:var(--shadow);white-space:pre;background:#0f2428;margin:0;padding:1.15rem 1.2rem;font-family:IBM Plex Mono,ui-monospace,monospace;font-size:.92rem;line-height:1.65;overflow-x:auto}.blank{color:#b8f0e0;min-width:3.2rem;font:inherit;text-align:center;vertical-align:baseline;background:#1a3a3f;border:none;border-bottom:2px solid #5ec4b0;border-radius:4px 4px 0 0;margin:0 .12rem;padding:.05rem .35rem;display:inline-block}.blank:focus{outline-offset:1px;outline:2px solid #5ec4b0}.blank-wrong{color:#ffd2cd;background:#3a2222;border-bottom-color:#f97066}.actions{flex-wrap:wrap;gap:.75rem;margin-top:1.25rem;display:flex}.hint,.feedback{border-radius:12px;margin:1rem 0 0;padding:.85rem 1rem;font-size:.95rem}.hint{color:var(--ink-soft);background:#e8f3ef}.feedback-wrong{color:var(--danger);background:#fef3f2}.feedback-ok{color:var(--ok);background:#ecfdf3;animation:.35s pop}@keyframes rise{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes pop{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}.lesson{animation:.45s both rise}.lesson-jump{flex-direction:column;gap:.35rem;margin:0 0 1.1rem;display:flex}.lesson-jump-label{letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);font-size:.78rem;font-weight:600}.lesson-jump-select{appearance:none;border:1px solid var(--line);background:linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%) calc(100% - 1.15rem) calc(50% - .2rem) / .4rem .4rem no-repeat, linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%) calc(100% - .85rem) calc(50% - .2rem) / .4rem .4rem no-repeat, #ffffffdb;width:100%;color:var(--ink);font:inherit;cursor:pointer;border-radius:12px;padding:.7rem 2.4rem .7rem .9rem;font-size:.95rem;transition:border-color .15s}.lesson-jump-select:hover,.lesson-jump-select:focus{border-color:var(--teal);outline:none}.lesson-body{flex-direction:column;gap:1rem;display:flex}.lesson-text{color:var(--ink);margin:0;font-size:1.02rem}.lesson-callout{border-left:3px solid var(--teal);background:#e8f3ef;border-radius:14px;padding:.95rem 1.05rem}.lesson-callout strong{color:var(--teal-deep);margin-bottom:.25rem;display:block}.lesson-callout p{color:var(--ink-soft);margin:0}.lesson-code{margin:0}.lesson-code-cap{color:var(--ink-soft);margin:0 0 .4rem;font-size:.82rem;font-weight:600}.code-readonly{box-shadow:none}.quiz-card{border-radius:var(--radius);border:1px solid var(--line);background:#ffffffd1;margin-top:.5rem;padding:1.2rem 1.25rem}.quiz-step{color:var(--teal-deep);text-transform:uppercase;letter-spacing:.04em;margin:0 0 .5rem;font-size:.82rem;font-weight:600}.quiz-question{letter-spacing:-.02em;margin:0 0 1rem;font-family:Syne,sans-serif;font-size:1.2rem}.quiz-options{flex-direction:column;gap:.55rem;margin:0;padding:0;list-style:none;display:flex}.quiz-option{text-align:left;border:1px solid var(--line);width:100%;color:var(--ink);cursor:pointer;background:#fff;border-radius:12px;align-items:center;gap:.75rem;padding:.75rem .9rem;transition:border-color .15s,background .15s;display:flex}.quiz-option:hover:not(:disabled){border-color:var(--teal)}.quiz-option.is-picked{border-color:var(--teal);background:#e8f3ef}.quiz-letter{background:var(--mint);width:1.6rem;height:1.6rem;color:var(--teal-deep);border-radius:999px;flex-shrink:0;justify-content:center;align-items:center;font-size:.78rem;font-weight:700;display:inline-flex}.quiz-fill input{border:1px solid var(--line);background:#fff;border-radius:12px;width:100%;padding:.8rem .95rem;font-family:IBM Plex Mono,ui-monospace,monospace;font-size:.95rem}.quiz-fill input:focus{outline:2px solid var(--teal);outline-offset:1px}.blank-wrong-light{background:#fef3f2!important;border-color:#f97066!important}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.nav-row{justify-content:space-between;gap:.75rem;margin-top:1.5rem;display:flex}.lede-tight{color:var(--ink-soft);margin:.75rem 0 0;font-size:1.05rem;line-height:1.55}.exam-brief{animation:.45s both rise}.brief-box{border-radius:var(--radius);border:1px solid var(--line);background:#ffffffd1;margin:1.5rem 0 1rem;padding:1.1rem 1.2rem}.brief-box-title{margin:0 0 .65rem;font-family:Syne,sans-serif;font-size:1rem}.brief-steps{color:var(--ink);flex-direction:column;gap:.45rem;margin:0;padding-left:1.2rem;display:flex}.track-tabs{border-radius:var(--radius);border:1px solid var(--line);background:#ffffffb3;gap:.35rem;margin:1.25rem 0 .75rem;padding:.25rem;display:flex}.track-tab{border-radius:calc(var(--radius) - 2px);color:var(--ink-soft);cursor:pointer;background:0 0;border:0;flex:1;padding:.55rem .75rem;font-family:Syne,sans-serif;font-size:.92rem;font-weight:700}.track-tab.is-active{background:color-mix(in srgb, var(--teal) 18%, white);color:var(--teal-deep)}.track-soft-hint{border-radius:var(--radius);border:1px dashed color-mix(in srgb, var(--teal) 40%, var(--line));background:color-mix(in srgb, var(--teal) 8%, white);color:var(--ink-soft);margin:0 0 .5rem;padding:.65rem .8rem;font-size:.9rem;line-height:1.4}.exam-pick-recommend{color:var(--ink-soft);font-size:.8rem;font-style:italic}.exam-pick-list{flex-direction:column;gap:.75rem;margin:1.5rem 0 0;padding:0;list-style:none;display:flex}.challenge-editor{border-radius:var(--radius);border:1px solid var(--line);min-height:220px;margin:1rem 0;overflow:hidden}.challenge-sig{border-radius:calc(var(--radius) - 2px);background:#f0f0f0;margin:0 0 .85rem;padding:.65rem .75rem;font-family:IBM Plex Mono,ui-monospace,monospace;font-size:.88rem;overflow-x:auto}.challenge-results{flex-direction:column;gap:.5rem;margin:.75rem 0;display:flex}.challenge-result{border-radius:calc(var(--radius) - 2px);border:1px solid var(--line);padding:.55rem .7rem;font-size:.9rem}.challenge-result.is-ok{border-color:color-mix(in srgb, var(--teal) 55%, var(--line));background:color-mix(in srgb, var(--teal) 10%, white)}.challenge-result.is-bad{border-color:color-mix(in srgb, #c44 45%, var(--line));background:#fbf0f0}.challenge-detail{white-space:pre-wrap;color:var(--ink-soft);margin:.4rem 0 0;font-family:IBM Plex Mono,ui-monospace,monospace;font-size:.78rem;line-height:1.4}.hint-box{border-left:3px solid var(--teal);color:var(--ink-soft);margin:.5rem 0 0;padding:.65rem .8rem;font-size:.92rem}.ok-msg{color:var(--teal-deep);font-weight:600}.err-msg{color:#a33;font-weight:600}.challenge-step{animation:.35s both rise}.exam-pick-card{text-align:left;border-radius:var(--radius);border:1px solid var(--line);cursor:pointer;background:#ffffffd1;flex-direction:column;align-items:flex-start;gap:.35rem;width:100%;padding:1rem 1.1rem;transition:border-color .15s,transform .15s;display:flex}.exam-pick-card:hover{border-color:var(--teal);transform:translateY(-1px)}.exam-pick-title{letter-spacing:-.02em;font-family:Syne,sans-serif;font-size:1.15rem;font-weight:700}.exam-pick-desc{color:var(--ink-soft);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:.92rem;line-height:1.45;display:-webkit-box;overflow:hidden}.exam-pick-meta{color:var(--teal-deep);margin-top:.35rem;font-size:.85rem;font-weight:600}.exam-session{animation:.45s both rise}.fn-name{color:var(--teal-deep);font-family:IBM Plex Mono,ui-monospace,monospace;font-size:.92em;font-weight:500}.fn-examples{flex-direction:column;gap:.55rem;margin:0;padding:0;list-style:none;display:flex}.fn-examples li{flex-wrap:wrap;align-items:center;gap:.5rem;font-family:IBM Plex Mono,ui-monospace,monospace;font-size:.88rem;display:flex}.fn-examples span{color:var(--ink-soft)}.fn-teach,.fn-write{animation:.35s both rise}.exercise-list{animation:.45s both rise}.exam-groups{flex-direction:column;gap:1.25rem;margin-top:1.5rem;display:flex}.exam-group{border-radius:var(--radius);border:1px solid var(--line);background:#ffffffc7;padding:1rem 1.1rem .85rem}.exam-group-head{justify-content:space-between;align-items:baseline;gap:.75rem;margin-bottom:.65rem;display:flex}.exam-group-head h3{letter-spacing:-.02em;margin:0;font-family:Syne,sans-serif;font-size:1.05rem}.exam-group-head span{color:var(--ink-soft);font-size:.82rem}.exam-item-list{flex-direction:column;gap:.45rem;margin:0;padding:0;list-style:none;display:flex}.exam-item{text-align:left;border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:12px;grid-template-rows:auto auto;grid-template-columns:1fr auto;gap:.15rem .75rem;width:100%;padding:.7rem .85rem;transition:border-color .15s,transform .15s;display:grid}.exam-item:hover{border-color:var(--teal);transform:translateY(-1px)}.exam-item.is-done{background:#f3fbf6;border-color:#9fd5b5}.exam-item-title{color:var(--ink);grid-column:1;font-weight:600}.exam-item-goal{color:var(--ink-soft);grid-column:1;font-size:.88rem}.exam-item-badge{color:var(--ok);grid-area:1/2/span 2;align-self:center;font-weight:700}@media (width<=540px){.exercise-top{flex-direction:column;align-items:flex-start}.code-block{padding:1rem;font-size:.82rem}}.frame--wide{width:min(1100px,100% - 2rem);padding-top:1.25rem}.playground-screen{min-height:min(78vh,720px);animation:.45s both rise}.playground{border-radius:var(--radius);border:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);height:100%;min-height:0;box-shadow:var(--shadow);background:#ffffffd1;flex-direction:column;display:flex;overflow:hidden}.playground--fullscreen{min-height:min(78vh,720px)}.playground--drawer{height:100%;box-shadow:none;color:#e8f2ef;background:#102a2e;border:none;border-radius:0}.playground-bar{border-bottom:1px solid var(--line);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem 1rem;padding:.85rem 1rem;display:flex}.playground--drawer .playground-bar{border-bottom-color:#ffffff1f}.playground-bar-left{align-items:center;gap:.75rem;min-width:0;display:flex}.playground-kicker{letter-spacing:.06em;text-transform:uppercase;color:var(--teal-deep);margin:0;font-size:.7rem;font-weight:600}.playground--drawer .playground-kicker{color:var(--mint)}.playground-title{letter-spacing:-.02em;margin:0;font-family:Syne,sans-serif;font-size:1.15rem;line-height:1.1}.playground--drawer .playground-title{color:#f4faf8}.playground-actions{flex-wrap:wrap;align-items:center;gap:.45rem;display:flex}.playground-status{color:var(--ink-soft);margin-right:.25rem;font-size:.78rem}.playground--drawer .playground-status{color:#e8f2efb3}.playground-status.is-loading{color:var(--teal)}.playground-status.is-error{color:var(--danger)}.playground-run{min-width:4.5rem}.playground-close{padding:.35rem .55rem}.playground-banner{color:var(--danger);background:#fef3f2;border-bottom:1px solid #fecdca;justify-content:space-between;align-items:center;gap:.75rem;padding:.65rem 1rem;font-size:.88rem;display:flex}.playground-body{flex:1;grid-template-rows:minmax(180px,1.4fr) minmax(120px,.9fr);min-height:0;display:grid}.playground--fullscreen .playground-body{min-height:min(68vh,620px)}.playground-editor{border-bottom:1px solid var(--line);min-height:0;overflow:hidden}.playground--drawer .playground-editor{border-bottom-color:#ffffff1a}.playground-console{color:#d7e8e2;background:#0c1f22;flex-direction:column;min-height:0;padding:.75rem 1rem 1rem;display:flex}.playground-console-label{letter-spacing:.05em;text-transform:uppercase;color:#b8f0e0bf;margin:0 0 .4rem;font-size:.72rem;font-weight:600}.playground-console-empty,.playground-console-out{white-space:pre-wrap;word-break:break-word;flex:1;margin:0;font-family:IBM Plex Mono,ui-monospace,monospace;font-size:.82rem;line-height:1.45;overflow:auto}.playground-console-empty{color:#d7e8e273}.console-out{color:#d7e8e2}.console-err{color:#ffb4a9}.console-meta{color:#d7e8e28c;font-style:italic}.playground-dock{z-index:40;pointer-events:none;position:fixed;inset:0}.playground-tab{pointer-events:auto;writing-mode:vertical-rl;text-orientation:mixed;border:1px solid var(--line);background:color-mix(in srgb, white 88%, var(--mint));color:var(--teal-deep);letter-spacing:.06em;cursor:pointer;border-right:none;border-radius:12px 0 0 12px;padding:.95rem .45rem;font-family:Syne,sans-serif;font-size:.82rem;font-weight:700;transition:background .18s,transform .18s;position:fixed;top:50%;right:0;transform:translateY(-50%);box-shadow:-4px 8px 24px #102a2e1f}.playground-tab:hover{background:#fff;transform:translateY(-50%)translate(-2px)}.playground-dock.is-open .playground-tab{right:min(460px,100vw)}.playground-tab-label{display:inline-block;transform:rotate(180deg)}.playground-backdrop{pointer-events:auto;cursor:pointer;background:#102a2e47;border:none;margin:0;padding:0;position:fixed;inset:0}.playground-drawer{pointer-events:auto;background:#102a2e;width:min(460px,100vw);height:100%;animation:.28s both dock-slide;position:fixed;top:0;right:0;box-shadow:-12px 0 40px #102a2e47}@keyframes dock-slide{0%{transform:translate(100%)}to{transform:translate(0)}}.playground--drawer .btn-ghost{color:#e8f2efd9;border-color:#ffffff2e}.playground--drawer .btn-ghost:hover:not(:disabled){color:#fff;background:#ffffff14}.playground--drawer .btn-primary{background:var(--mint);color:var(--teal-deep)}.playground--drawer .btn-primary:hover:not(:disabled){background:#cff8ea}@media (width<=640px){.playground-tab{writing-mode:horizontal-tb;border:1px solid var(--line);border-radius:999px;padding:.7rem 1.1rem;top:auto;bottom:1.25rem;right:.75rem;transform:none}.playground-tab:hover{transform:translateY(-1px)}.playground-dock.is-open .playground-tab{opacity:0;pointer-events:none;right:.75rem}.playground-tab-label{transform:none}.playground-drawer{width:100vw}.playground-body{grid-template-rows:minmax(160px,1fr) minmax(140px,.85fr)}.playground-bar{align-items:flex-start}}