@font-face{font-family:D-DIN;src:url(/fonts/D-DIN.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:D-DIN;src:url(/fonts/D-DIN-Bold.woff2)format("woff2");font-weight:700;font-style:normal;font-display:swap}:root{--primary:#8057e5;--primary-base:#6039bc;--coral:#ff806c;--paper:#fff;--ink:#3e3b46;--muted:#716b7b;--line:#e7e4ed;--surface:#f8f7fb;--selection:#f1ebff;--selection-line:#cbb9f4;--success:#347341;--success-bg:#e8f6e9;--error:#aa3636;--error-bg:#fff0ed;--sidebar:232px;--node-width:70px;--node-height:65px;--node-lip:8px;--pitch:90px;--radius:16px;--screen-time:.2s;--progress-time:.34s;font-synthesis:none;color:var(--ink);background:var(--paper);font-family:D-DIN,Segoe UI,sans-serif}*{box-sizing:border-box}body{margin:0;font-size:18px;line-height:1.5}button,input,select{font:inherit}button{color:inherit;cursor:pointer;background:0 0;border:0}button:disabled{cursor:default}h1,h2,h3,p,figure{margin:0}h1,h2,h3{font-weight:700;line-height:1.2}h1{font-size:32px}h2{font-size:24px}h3{font-size:20px}p{overflow-wrap:anywhere}a{color:var(--primary-base);text-underline-offset:4px}button,a,input,select,summary,[tabindex]{touch-action:manipulation}:is(button,a,input,select,summary,[tabindex]):focus-visible{outline:3px solid var(--primary-base);outline-offset:4px}[hidden],dialog:not([open]){display:none!important}.od-icon{width:var(--od-icon-size,26px);height:var(--od-icon-size,26px);flex:none;display:block}.icon-box{flex:none;justify-content:center;align-items:center;width:48px;height:48px;display:flex}.muted{color:var(--muted)}.small{font-size:15px}.eyebrow{letter-spacing:1px;text-transform:uppercase;color:var(--primary-base);font-size:13px;font-weight:700;display:block}.wide{width:100%}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.screen{animation:screen-in var(--screen-time) ease-out both;min-width:0}@keyframes screen-in{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@keyframes cue{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.btn{border:2px solid var(--line);letter-spacing:.5px;text-transform:uppercase;min-height:48px;box-shadow:0 3px 0 var(--line);text-align:center;overflow-wrap:anywhere;background:#fff;border-radius:12px;justify-content:center;align-items:center;gap:10px;padding:10px 20px;font-size:15px;font-weight:700;line-height:1.35;transition:transform .16s ease-out,box-shadow .16s ease-out,background .16s ease-out;display:inline-flex}.btn.primary{color:#fff;background:var(--primary-base);border-color:var(--primary-base);box-shadow:0 3px #48258f}.btn.brand-action{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 4px 0 var(--primary-base)}.btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 0 #0000}.btn:disabled{color:#857e91;box-shadow:0 3px 0 var(--line);background:#f0edf4;border-color:#f0edf4}.btn.quiet{color:var(--primary-base);box-shadow:none;text-transform:none;letter-spacing:0;background:0 0;border-color:#0000;padding-inline:8px;font-size:16px}.btn .od-icon{--od-icon-size:20px}.text-link{min-height:44px;color:var(--primary-base);text-underline-offset:4px;justify-content:center;align-items:center;padding:8px 0;font-size:15px;font-weight:700;text-decoration:underline;display:inline-flex}.sidebar{width:var(--sidebar);border-right:2px solid var(--line);z-index:10;background:#fff;padding:40px 16px;position:fixed;inset:0 auto 0 0}.nav{gap:16px;display:grid}.nav-item{text-align:left;letter-spacing:.4px;border:2px solid #0000;border-radius:12px;align-items:center;gap:16px;min-height:58px;padding:6px 12px;font-size:16px;font-weight:700;display:flex}.nav-item .icon-box{width:36px;height:40px;color:var(--primary)}.nav-item.active{color:var(--primary-base);background:var(--selection);border-color:var(--selection-line)}.nav-item .od-icon{--od-icon-size:32px}.workspace{margin-left:var(--sidebar);max-width:1540px;padding:32px 40px 64px}.main{min-width:0;max-width:1120px;margin:auto}.page-head{justify-content:space-between;align-items:center;gap:24px;margin-bottom:32px;display:flex}.page-head h1{margin:8px 0}.page-head p{color:var(--muted);max-width:60ch}.head-mascot{object-fit:contain;flex:none;width:104px;height:auto;max-height:124px}.catalog-welcome{border-bottom:2px solid var(--line);align-items:center;gap:20px;margin-bottom:32px;padding-bottom:24px;display:flex}.catalog-welcome .mascot{width:64px;max-height:88px}.catalog-welcome strong{font-size:22px;display:block}.catalog-welcome p{color:var(--muted);font-size:17px}.category-tabs{flex-wrap:wrap;gap:8px;margin-bottom:28px;display:flex}.category-tabs button{border:2px solid var(--line);border-radius:12px;justify-content:center;align-items:center;min-height:44px;padding:8px 20px;font-size:16px;font-weight:700;display:flex}.category-tabs button.active{background:var(--selection);border-color:var(--selection-line);color:var(--primary-base)}.category-heading{justify-content:space-between;align-items:center;gap:12px;margin:28px 0 16px;display:flex}.category-heading span{color:var(--muted);font-size:14px}.course-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;display:grid}.course-card{border:2px solid var(--line);text-align:left;background:#fff;border-radius:16px;flex-direction:column;align-items:flex-start;gap:12px;min-width:0;padding:24px;display:flex}.course-card.recommended{border-color:var(--selection-line);background:#fcfaff}.course-card .course-icon{width:52px;height:48px;font-size:20px}.course-card h3{font-size:21px}.course-card p{color:var(--muted);flex:1;font-size:16px}.course-card .text-link{margin-top:auto}.course-meta{color:var(--muted);font-size:13px;font-weight:700}.course-icon{border:2px solid var(--selection-line);background:var(--selection);width:40px;height:36px;color:var(--primary-base);white-space:nowrap;border-radius:10px;flex:none;justify-content:center;align-items:center;font-size:16px;font-weight:700;line-height:1;display:flex}.pill{background:var(--selection);color:var(--primary-base);letter-spacing:.4px;text-transform:uppercase;border-radius:8px;align-items:center;gap:6px;padding:4px 10px;font-size:12px;font-weight:700;display:inline-flex}.pill.coral{color:#8f3e2d;background:#ffede7}.continue-banner{border:2px solid var(--selection-line);background:var(--selection);border-radius:16px;justify-content:space-between;align-items:center;gap:20px;margin-bottom:28px;padding:20px 24px;display:flex}.continue-banner strong{font-size:21px;display:block}.continue-banner p{color:var(--muted);margin-top:4px;font-size:16px}.progress{background:#efedf3;border-radius:99px;min-width:0;height:14px;overflow:hidden}.progress span{background:var(--primary);border-radius:inherit;height:100%;transition:width var(--progress-time) ease-out;display:block}.progress-caption{color:var(--muted);justify-content:space-between;gap:12px;margin:10px 0 16px;font-size:14px;display:flex}.course-layout{grid-template-columns:minmax(0,640px) 300px;justify-content:center;gap:40px;display:grid}.panel{border:2px solid var(--line);border-radius:16px;margin-bottom:24px;padding:24px}.panel h2,.panel h3{margin-bottom:16px}.panel p{color:var(--muted);font-size:17px}.panel .btn{margin-top:20px}.course-facts{grid-template-columns:1fr 1fr;gap:24px;margin:28px 0;display:grid}.course-facts dt{color:var(--muted);margin-bottom:6px;font-size:14px}.course-facts dd{margin:0;font-weight:700;line-height:1.5}.unit-list{margin:16px 0 0;padding:0;list-style:none}.unit-list li{border-top:1px solid var(--line)}.unit-list button{text-align:left;justify-content:space-between;align-items:center;gap:16px;width:100%;min-height:72px;padding:16px 0;display:flex}.unit-list button span{display:block}.unit-list small{color:var(--muted);margin-top:4px;font-size:14px;display:block}.mascot{object-fit:contain;max-width:100%;height:auto;display:block}.mentor-panel .mascot{width:120px;max-height:156px;margin:0 auto 20px}.mentor-label{color:var(--primary-base);margin-bottom:8px;font-size:14px;font-weight:700}.unit-picker{align-items:center;gap:12px;margin-bottom:24px;display:flex}.unit-picker label{color:var(--muted);flex:none;font-size:15px}.unit-picker select{border:2px solid var(--line);width:100%;min-width:0;height:48px;color:var(--ink);background:#fff;border-radius:12px;padding:8px 12px}.trail-top{justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;display:flex}.trail-top button{text-align:left;align-items:center;gap:12px;min-height:48px;font-size:18px;font-weight:700;display:flex}.unit-banner{color:#fff;background:var(--primary);min-height:90px;box-shadow:0 5px 0 var(--primary-base);border-radius:14px;justify-content:space-between;align-items:center;gap:16px;padding:16px 24px;display:flex}.unit-banner small{color:#ffffffa6;text-transform:uppercase;margin-bottom:5px;font-size:14px;font-weight:700;display:block}.unit-banner h1{font-size:23px}.unit-guide{color:#fff;border:2px solid #ffffff40;border-radius:10px;flex:none;justify-content:center;align-items:center;width:44px;height:48px;display:flex}.learning-path{grid-auto-rows:var(--pitch);isolation:isolate;max-width:520px;margin:auto;padding:68px 0 32px;display:grid;position:relative}.path-row{margin-left:calc(var(--offset) * 2);justify-content:center;align-items:center;min-width:0;display:flex}.path-anchor{justify-content:center;align-items:center;width:98px;height:93px;display:flex;position:relative}.node{width:var(--node-width);height:var(--node-height);color:#a8a4ad;box-shadow:0 var(--node-lip) 0 #bab7bf;background:#e5e5e5;border-radius:50%;flex:none;justify-content:center;align-items:center;padding:0;transition:transform .16s ease-out,box-shadow .16s ease-out;display:flex;position:relative}.node .od-icon{--od-icon-size:32px}.node.current,.node.done{background:var(--primary);color:#fff;box-shadow:0 var(--node-lip) 0 var(--primary-base)}.node.current:before{content:"";background:#fff3;border-radius:50%;width:25px;height:11px;position:absolute;top:10px;left:10px;transform:rotate(-30deg)}.node.action-node{color:#a64e3c;box-shadow:0 var(--node-lip) 0 #e7b7a9;background:#fff0eb}.node:active{transform:translateY(4px);box-shadow:0 4px #bab7bf}.node.current:active,.node.done:active{box-shadow:0 4px 0 var(--primary-base)}.node-ring{pointer-events:none;width:98px;height:93px;position:absolute;top:3px;left:0}.start-bubble{border:2px solid var(--line);color:var(--primary-base);white-space:nowrap;z-index:2;background:#fff;border-radius:12px;padding:8px 12px;font-size:14px;font-weight:700;position:absolute;bottom:98px;left:50%;transform:translate(-50%)}.start-bubble:after{content:"";border-right:2px solid var(--line);border-bottom:2px solid var(--line);background:#fff;width:10px;height:10px;position:absolute;bottom:-7px;left:calc(50% - 6px);transform:rotate(45deg)}.path-mascot{pointer-events:none;position:absolute}.path-mascot img{width:128px;max-height:160px}.fox-art{top:180px;left:calc(50% + 28px)}.nilo-art{top:470px;right:calc(50% + 32px)}.unit-end{border-top:2px solid var(--line);text-align:center;padding-top:24px}.unit-end p{color:var(--muted);margin:8px 0 20px;font-size:16px}.lesson{flex-direction:column;min-height:100dvh;display:flex}.lesson-top{align-items:center;gap:16px;width:min(100%,1000px);margin:auto auto 0;padding:20px 24px;display:flex}.lesson-top .progress{flex:1}.lesson-top .btn{min-height:44px}.back-icon{width:44px;height:44px;color:var(--muted);border-radius:10px;flex:none;justify-content:center;align-items:center;display:flex}.lesson-steps{color:var(--muted);border-bottom:1px solid var(--line);justify-content:center;align-items:center;gap:24px;padding:12px 16px;font-size:15px;display:flex}.lesson-steps span.active{color:var(--primary-base);font-weight:700}.lesson-steps span{align-items:center;gap:6px;display:flex}.lesson-steps .od-icon{--od-icon-size:16px}.lesson-main{flex:1;width:min(720px,100% - 40px);min-width:0;margin:32px auto 48px}.lesson-main h1{margin:8px 0 24px;font-size:28px;line-height:1.3}.lesson-kicker{color:var(--primary-base);font-size:14px;font-weight:700}.lesson-reading{overflow-wrap:anywhere;font-size:18px;line-height:1.65}.lesson-reading h2{margin:32px 0 16px;font-size:23px}.lesson-reading p{margin:16px 0}.reading-intro{border:2px solid var(--line);border-radius:14px;margin-bottom:28px;padding:20px}.reading-intro strong{color:var(--primary-base);margin-bottom:6px;font-size:15px;display:block}.reading-intro p{margin:0}.reading-intro .prereq{color:var(--muted);margin-top:16px;font-size:15px}.content-block pre,.question-code{white-space:pre;border:2px solid var(--line);background:var(--surface);min-width:0;max-width:100%;color:var(--ink);tab-size:2;border-radius:12px;margin:24px 0;padding:20px;font:15px/1.7 Consolas,Courier New,monospace;display:block;overflow-x:auto}.lesson-reading :not(pre)>code{background:var(--selection);overflow-wrap:anywhere;border-radius:4px;padding:2px 4px;font:.9em Consolas,monospace}.lesson-reading :is(ul,ol){margin:16px 0;padding-left:28px}.lesson-reading li{margin:8px 0}.lesson-reading blockquote{border:2px solid var(--line);border-radius:12px;margin:24px 0;padding:16px 20px}.table-scroll{border:2px solid var(--line);border-radius:12px;max-width:100%;margin:24px 0;overflow-x:auto}table{border-collapse:collapse;min-width:100%}th,td{border-bottom:1px solid var(--line);text-align:left;vertical-align:top;min-width:120px;padding:12px}th{background:var(--surface)}.mentor{align-items:center;gap:20px;margin:24px 0;display:flex}.mentor .mascot{flex:none;width:80px;max-height:112px}.mentor p{color:var(--muted);margin:0;font-size:16px}.mentor strong{color:var(--primary-base);margin-bottom:4px;font-size:15px;display:block}.answers{gap:12px;margin:24px 0;display:grid}.answer{border:2px solid var(--line);box-shadow:0 2px 0 var(--line);text-align:left;background:#fff;border-radius:12px;align-items:center;gap:16px;width:100%;min-height:64px;padding:16px;font-size:18px;line-height:1.5;display:flex}.answer>span:not(.key){overflow-wrap:anywhere;flex:1;min-width:0}.key{border:2px solid var(--line);width:30px;height:30px;color:var(--muted);border-radius:8px;flex:none;justify-content:center;align-items:center;font-size:15px;display:flex}.answer.selected{border-color:var(--selection-line);background:var(--selection);box-shadow:0 2px 0 var(--selection-line);color:var(--primary-base)}.answer.correct{background:var(--success-bg);border-color:#8fc493;box-shadow:0 2px #8fc493}.answer.wrong{background:var(--error-bg);border-color:#e6a59a;box-shadow:0 2px #e6a59a}.hint summary{color:var(--primary-base);cursor:pointer;min-height:44px;padding:8px 0;font-size:17px;list-style-position:inside;display:list-item}.hint p{color:var(--muted);margin:8px 0 20px;font-size:16px}.order-list{gap:12px;margin:24px 0;padding:0;list-style:none;display:grid}.order-item{border:2px solid var(--line);border-radius:12px;align-items:center;gap:12px;padding:10px 12px;display:flex}.order-item>span{overflow-wrap:anywhere;flex:1;min-width:0}.move-controls{flex:none;gap:4px;display:flex}.move{border:2px solid var(--line);border-radius:8px;justify-content:center;align-items:center;width:44px;height:44px;display:flex}.move:disabled{opacity:.35}.lesson-footer{z-index:8;border-top:2px solid var(--line);padding:24px 32px max(24px,env(safe-area-inset-bottom));background:#fff;margin-top:auto;position:sticky;bottom:0}.footer-inner{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;max-width:960px;margin:auto;display:grid}.footer-inner>.btn{min-width:160px}.feedback{align-items:flex-start;gap:16px;min-width:0;max-height:min(28dvh,240px);padding:4px;animation:.18s ease-out cue;display:flex;overflow-y:auto}.feedback img{flex:none;width:56px;max-height:76px}.feedback h2{margin-bottom:4px;font-size:21px}.feedback p{font-size:16px;line-height:1.5}.lesson-footer.success{background:var(--success-bg);color:var(--success)}.lesson-footer.error{background:var(--error-bg);color:var(--error)}.reading-toolbar{justify-content:space-between;align-items:center;gap:16px;margin-top:24px;display:flex}.result-box{max-width:640px;margin:40px auto}.result-box>.mascot{width:128px;max-height:160px;margin:0 auto 24px}.result-box h1{text-align:center;margin-bottom:16px}.result-box>p{text-align:center;color:var(--muted)}.result-stats{grid-template-columns:1fr 1fr;gap:16px;margin:28px 0;display:grid}.result-stat{border:2px solid var(--line);text-align:center;border-radius:14px;padding:20px}.result-stat strong{color:var(--primary-base);font-size:28px;display:block}.result-stat span{color:var(--muted);font-size:15px}.result-next{border:2px solid var(--selection-line);background:var(--selection);border-radius:14px;margin:24px 0;padding:24px}.result-next strong{margin:4px 0 16px;font-size:21px;display:block}.profile-grid{grid-template-columns:minmax(0,640px) 300px;justify-content:center;gap:40px;display:grid}.field-label{margin-bottom:8px;font-size:16px;font-weight:700;display:block}.name-field{gap:12px;display:flex}.name-field input{border:2px solid var(--line);border-radius:10px;flex:1;min-width:0;min-height:48px;padding:10px 12px}.profile-course-row{border-top:1px solid var(--line);padding:16px 0}.profile-course-row button{text-align:left;align-items:center;gap:12px;width:100%;min-height:44px;display:flex}.profile-course-row .progress{margin-top:12px}.profile-grid details{border-top:1px solid var(--line);padding:12px 0}.profile-grid summary{cursor:pointer;min-height:44px;padding:8px 0;font-weight:700}.profile-grid details p{color:var(--muted);margin:8px 0;font-size:16px}.danger{color:var(--error)}dialog{border:2px solid var(--line);width:calc(100% - 32px);max-width:480px;max-height:calc(100dvh - 40px);color:var(--ink);border-radius:20px;padding:28px;overflow-y:auto}dialog::backdrop{background:#190f2859}dialog h2{margin-bottom:16px}dialog p{margin:12px 0;font-size:17px}dialog .dialog-actions{flex-wrap:wrap;gap:12px;margin-top:24px;display:flex}dialog .btn{flex:1}.notice{background:var(--ink);color:#fff;z-index:40;text-align:center;border-radius:12px;max-width:calc(100% - 32px);padding:12px 20px;font-size:16px;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}@media (hover:hover){.btn:not(:disabled):not(.primary):not(.brand-action):hover,.nav-item:not(.active):hover,.unit-list button:hover{background:var(--surface)}.btn.primary:hover{background:#532da9}.course-card:hover{border-color:var(--selection-line)}.node.current:hover{filter:brightness(1.05)}}@media (width<=1199px){:root{--sidebar:216px}.workspace{padding:28px}.course-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.course-layout,.profile-grid{grid-template-columns:minmax(0,1fr)}.rightbar{display:none}}@media (width<=767px){body{font-size:17px}.sidebar{width:100%;height:calc(76px + env(safe-area-inset-bottom));border-right:0;border-top:2px solid var(--line);padding:4px 8px env(safe-area-inset-bottom);inset:auto 0 0}.nav{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.nav-item{flex-direction:column;justify-content:center;align-items:center;gap:0;min-height:64px;padding:4px 0;font-size:13px;line-height:1.2;display:flex}.nav-item .icon-box{width:32px;height:32px}.nav-item .od-icon{--od-icon-size:26px}.workspace{padding:24px 16px calc(108px + env(safe-area-inset-bottom));margin:0}.page-head{gap:12px;margin-bottom:24px}.page-head h1{font-size:28px}.page-head p{font-size:17px}.head-mascot{width:76px;max-height:96px}.catalog-welcome{gap:16px;margin-bottom:24px;padding-bottom:20px}.catalog-welcome strong{font-size:21px}.catalog-welcome p{font-size:16px}.catalog-welcome .mascot{width:56px}.category-tabs{gap:8px}.category-tabs button{flex:1;padding:8px 14px;font-size:15px}.course-grid{grid-template-columns:1fr;gap:16px}.course-card{grid-template-columns:48px minmax(0,1fr);gap:12px 16px;padding:20px;display:grid}.course-card .course-icon{grid-row:1/3;width:48px;height:44px}.course-card h3{font-size:22px}.course-card p{grid-column:2;font-size:16px}.course-card .pill,.course-card .course-meta,.course-card .text-link{grid-column:2;justify-self:start}.category-heading{margin-top:24px}.continue-banner{flex-direction:column;align-items:flex-start;gap:16px;padding:20px}.continue-banner>.btn{width:100%}.panel{margin-bottom:20px;padding:20px}.course-facts{gap:20px 16px}.course-facts dd{font-size:17px}.trail-top{margin-bottom:16px}.trail-top button{font-size:17px}.unit-picker{gap:8px}.unit-picker label{font-size:14px}.unit-picker select{font-size:16px}.unit-banner{min-height:90px;padding:16px}.unit-banner h1{font-size:21px}.unit-banner small{font-size:14px}.unit-guide{width:44px}.learning-path{padding-top:68px}.path-mascot img{width:112px;max-height:144px}.fox-art{top:180px;left:calc(50% + 30px)}.nilo-art{top:470px;right:calc(50% + 30px)}.lesson-top{gap:12px;padding:12px 16px}.lesson-top>.progress{display:none}.lesson-top .small{flex:1;font-size:14px}.lesson-top .btn{padding:8px 12px;font-size:14px}.lesson-steps{gap:20px;font-size:14px}.lesson-main{width:calc(100% - 40px);margin:24px auto 32px}.lesson-main h1{font-size:26px}.lesson-reading{font-size:18px}.reading-intro{padding:16px}.content-block pre,.question-code{padding:16px;font-size:14px}.mentor{gap:16px}.mentor .mascot{width:64px;max-height:96px}.answer{gap:12px;padding:12px;font-size:17px}.order-item{gap:8px;padding:8px}.order-item>span{font-size:16px}.move-controls{flex-direction:column}.lesson-footer{padding:16px 20px max(16px,env(safe-area-inset-bottom))}.footer-inner{grid-template-columns:1fr;gap:12px}.footer-inner>.btn{width:100%;min-width:0}.feedback{gap:12px;max-height:min(25dvh,200px)}.feedback h2{font-size:20px}.feedback p{font-size:16px}.feedback img{width:44px;max-height:60px}.reading-toolbar{flex-wrap:wrap}.result-box{margin:24px auto}.result-stats{gap:12px}.result-stat{padding:16px}.result-next{padding:20px}.name-field{flex-wrap:wrap}.name-field input{flex-basis:100%}.notice{bottom:calc(92px + env(safe-area-inset-bottom))}}@media (width<=359px){.workspace{padding-inline:12px}.lesson-main{width:calc(100% - 32px)}.lesson-footer{padding-inline:16px}.category-tabs button{padding:8px 10px}.course-facts{grid-template-columns:1fr}.course-card{gap:12px;padding:16px}.unit-banner h1{font-size:20px}.unit-banner{gap:8px}.lesson-steps{gap:12px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}.lesson{--content-width:720px;--content-gutter:20px;--content-body:18px;--content-leading:1.65;--content-space:24px;--content-ink:var(--ink,#4b4b4b);--content-muted:var(--muted,#777);--content-link:var(--primary-base,#6039bc);--content-border:var(--line,#e5e5e5);--content-code-bg:#f7f7f7;--content-code-ink:#3c3c3c;--content-code-font:Consolas, "Courier New", monospace;min-inline-size:0}.lesson .lesson-main.lesson-reading{box-sizing:border-box;inline-size:min(var(--content-width), calc(100% - 2 * var(--content-gutter)));max-inline-size:var(--content-width);min-inline-size:0;color:var(--content-ink);font-family:D-DIN,Segoe UI,sans-serif;font-size:var(--content-body);line-height:var(--content-leading);overflow-wrap:anywhere;word-break:normal;margin:32px auto 48px}.lesson-reading *,.lesson-reading :before,.lesson-reading :after{box-sizing:border-box}.lesson-reading>*,.lesson-reading .markdown-body>*{min-inline-size:0}.lesson-reading :is(p,ul,ol,dl,blockquote,pre,.content-table,figure){margin-block:0 var(--content-space)}.lesson-reading p,.lesson-reading li,.lesson-reading dd,.lesson-reading .lesson-summary{font-size:var(--content-body);line-height:var(--content-leading)}.lesson-reading .lesson-summary{font-weight:700}.lesson-reading :is(h1,h2,h3,h4,h5,h6){overflow-wrap:anywhere;text-wrap:pretty;scroll-margin-block-start:32px;font-family:inherit;font-weight:700;line-height:1.3}.lesson-reading h1{margin-block:0 24px;font-size:32px}.lesson-reading h2{margin-block:40px 16px;font-size:26px}.lesson-reading h3{margin-block:32px 12px;font-size:22px}.lesson-reading :is(h4,h5,h6){margin-block:24px 12px;font-size:20px}.lesson-reading .lesson-kicker{color:var(--content-muted);overflow-wrap:anywhere;margin-block:0 12px;font-size:14px;font-weight:700;line-height:1.5;display:block}.lesson-reading :is(ul,ol){padding-inline-start:28px;list-style-position:outside}.lesson-reading ul{list-style-type:disc}.lesson-reading ol{list-style-type:decimal}.lesson-reading li{margin-block:8px;padding-inline-start:4px}.lesson-reading li>:is(ul,ol){margin-block:8px 0}.lesson-reading li>p{margin-block:0 8px}.lesson-reading dt{font-weight:700}.lesson-reading dd{margin-block-end:16px;margin-inline-start:24px}.lesson-reading a{color:var(--content-link);text-underline-offset:3px;overflow-wrap:anywhere;text-decoration:underline;text-decoration-thickness:1.5px}.lesson-reading :is(a,pre,.content-table):focus-visible,.lesson .lesson-footer :is(a,.feedback):focus-visible{outline:3px solid var(--primary-base,#6039bc);outline-offset:4px}.lesson-reading blockquote{border:2px solid var(--content-border);background:var(--paper,#fff);color:inherit;border-radius:12px;padding:16px 20px}.lesson-reading blockquote>:last-child{margin-block-end:0}.lesson-reading code{font-family:var(--content-code-font);font-size:.875em;font-weight:400}.lesson-reading :not(pre)>code{background:var(--content-code-bg);color:var(--content-code-ink);white-space:break-spaces;overflow-wrap:anywhere;-webkit-box-decoration-break:clone;box-decoration-break:clone;border-radius:4px;padding:2px 5px}.lesson-reading pre,.lesson .lesson-main:not(.lesson-reading)>pre{box-sizing:border-box;border:2px solid var(--content-border);background:var(--content-code-bg);min-inline-size:0;max-inline-size:100%;color:var(--content-code-ink);font:15px/1.65 var(--content-code-font);white-space:pre;overflow-wrap:normal;word-break:normal;overscroll-behavior-inline:contain;tab-size:2;border-radius:12px;padding:20px;display:block;overflow-x:auto}.lesson-reading pre>code{color:inherit;font:inherit;white-space:inherit;overflow-wrap:normal;background:0 0;border:0;padding:0;display:block}.lesson-reading .content-table{overscroll-behavior-inline:contain;border:2px solid var(--content-border);border-radius:12px;min-inline-size:0;max-inline-size:100%;display:block;overflow-x:auto}.lesson-reading table{border-collapse:collapse;inline-size:100%;color:inherit;font:inherit;text-align:start;line-height:1.5}.lesson-reading :is(th,td){border-block-end:1px solid var(--content-border);vertical-align:top;text-align:start;overflow-wrap:anywhere;min-inline-size:120px;padding:12px 16px}.lesson-reading th{background:var(--content-code-bg);font-weight:700}.lesson-reading tr:last-child td{border-block-end:0}.lesson-reading caption{text-align:start;padding:12px 16px;font-weight:700}.lesson-reading hr{border:0;border-block-start:2px solid var(--content-border);margin-block:32px}.lesson-reading :is(img,video,svg){block-size:auto;max-inline-size:100%}.lesson-reading figure{margin-inline:0}.lesson-reading figcaption{color:var(--content-muted);margin-block-start:8px;font-size:14px}.lesson-reading .content-source{border-block-start:2px solid var(--content-border);color:var(--content-muted);margin-block-start:40px;padding-block-start:20px;font-size:14px;line-height:1.6}.lesson-reading .content-source p{font:inherit;margin-block:0 8px}.lesson>.lesson-footer{z-index:6;box-sizing:border-box;min-block-size:0;max-block-size:calc(100dvh - 80px);min-inline-size:0;padding:24px 32px max(24px, env(safe-area-inset-bottom));position:sticky;inset-block-end:0}.lesson>.lesson-footer .footer-inner{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;min-inline-size:0;max-inline-size:960px;display:grid}.lesson>.lesson-footer .feedback{overflow-wrap:anywhere;overscroll-behavior-block:contain;scrollbar-gutter:stable;align-items:flex-start;gap:16px;min-block-size:0;max-block-size:min(28dvh,240px);min-inline-size:0;padding:4px;display:flex;overflow-y:auto}.lesson>.lesson-footer .feedback>div{min-inline-size:0}.lesson>.lesson-footer .feedback p{max-inline-size:none;margin-block:0 8px;line-height:1.5}.lesson>.lesson-footer .feedback .icon-box{flex:none;justify-content:center;align-items:center;display:flex}.lesson>.lesson-footer .footer-inner>.btn{white-space:normal;overflow-wrap:anywhere;text-align:center;align-self:center;min-block-size:48px;min-inline-size:160px;max-inline-size:100%;margin:0}.learning-path[data-content-module]{grid-auto-rows:var(--path-pitch,90px)}.learning-path[data-content-module]>.path-row{min-inline-size:0}.course-icon{white-space:nowrap;letter-spacing:0;flex:none;justify-content:center;align-items:center;font-size:16px;font-weight:700;line-height:1;display:flex}@media (width<=767px){.lesson .lesson-main.lesson-reading{inline-size:calc(100% - 40px);margin-block:24px 32px;font-size:18px;line-height:1.65}.lesson-reading p,.lesson-reading li,.lesson-reading dd,.lesson-reading .lesson-summary{font-size:18px;line-height:1.65}.lesson-reading h1{font-size:28px}.lesson-reading h2{margin-block-start:32px;font-size:24px}.lesson-reading h3{font-size:21px}.lesson-reading pre,.lesson .lesson-main:not(.lesson-reading)>pre{padding:16px;font-size:14px}.lesson-reading :is(th,td){padding:12px}.lesson>.lesson-footer{padding:16px 20px max(16px, env(safe-area-inset-bottom))}.lesson>.lesson-footer .footer-inner{grid-template-columns:minmax(0,1fr);gap:12px}.lesson>.lesson-footer .feedback{max-block-size:min(26dvh,224px);inline-size:100%}.lesson>.lesson-footer .feedback h2{font-size:20px}.lesson>.lesson-footer .footer-inner>.btn{inline-size:100%;min-inline-size:0}}:root{--primary-pale:var(--selection);--primary-border:var(--selection-line);--path-pitch:90px}body{min-width:0}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}a{color:inherit}.nav-item{text-decoration:none}.main:focus,h1:focus{outline:none}.character-slot{flex:none;justify-content:center;align-items:center;margin:0;display:flex}.character-slot img{object-fit:contain;max-width:100%;height:auto;display:block}.head-mascot{width:104px}.mascot-think,.mascot-encourage{animation:.24s ease-out both mentor-enter}.mascot-celebrate{animation:.42s ease-out both mentor-complete}@keyframes mentor-enter{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@keyframes mentor-complete{0%{opacity:0;transform:translateY(8px)scale(.96)}65%{opacity:1;transform:translateY(-2px)scale(1.015)}to{opacity:1;transform:none}}.btn{text-decoration:none}.btn:disabled{opacity:1}.btn.primary:disabled,.btn.primary:disabled:hover{color:#797282;box-shadow:0 3px 0 var(--line);background:#f0edf4;border-color:#f0edf4}.lesson-footer .btn.primary:active:not(:disabled){box-shadow:0 0 #0000}.text-link{text-transform:none;letter-spacing:0;gap:8px}.back-link{margin-bottom:20px}.page-head>div{min-width:0}.page-head>.course-icon{width:60px;height:56px;font-size:22px}.mark-javascript{color:#85610c;background:#fff5d8;border-color:#f6d76c}.mark-html{color:#a14c3c;background:#fff0ec;border-color:#ffc8bd}.catalog-note{color:var(--muted);margin-top:36px;font-size:15px}.started-courses{margin-bottom:32px}.started-courses h2{margin-bottom:16px}.started-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.started-course{border:2px solid var(--line);text-align:left;border-radius:14px;align-items:center;gap:14px;min-width:0;padding:16px;display:flex}.started-course>span:nth-child(2){flex:1;min-width:0}.started-course strong,.started-course small{overflow-wrap:anywhere;display:block}.started-course small{color:var(--muted);font-size:14px}.course-purpose>p{margin-top:16px}.course-start{margin-bottom:36px}.how-it-works{margin:16px 0;padding-left:24px}.how-it-works li{margin:10px 0}.course-layout>div,.profile-grid>div{min-width:0}.rightbar{align-self:start;min-width:0;position:sticky;top:24px}.rightbar .progress{margin-top:20px}.rightbar .mentor-label{color:var(--primary-base);font-weight:700}.trail-top{flex-wrap:wrap}.trail-top>button{min-width:0;max-width:100%}.trail-top>button>span:not(.course-icon){overflow-wrap:anywhere}.trail-chevron{width:16px;height:16px;color:var(--muted);flex:none;display:block}.unit-picker{flex-wrap:wrap}.unit-picker select{flex:1;width:auto;min-width:120px}.unit-picker .btn{white-space:nowrap;margin-left:auto;padding:4px}.unit-banner>div{min-width:0}.unit-banner{scroll-margin-top:24px}.unit-progress-copy{color:var(--muted);text-align:right;margin:16px 0 0;font-size:14px}.node{scroll-margin-block:130px}.node .od-icon{pointer-events:none}.node.current{animation:.3s ease-out both node-reveal}@keyframes node-reveal{0%{transform:scale(.94)}to{transform:none}}.node.locked .od-icon{filter:grayscale();opacity:.75}.node.action-node.locked{color:#a8a4ad;background:#e5e5e5;box-shadow:0 8px #bab7bf}.path-anchor.selected{z-index:5}.path-mascot{z-index:-1}.node-popover{top:108px;left:calc(50% - var(--offset));border:2px solid var(--primary-base);background:var(--primary);color:#fff;width:min(300px,100vw - 40px);box-shadow:0 3px 0 var(--primary-base);z-index:5;border-radius:16px;padding:20px;animation:.16s ease-out cue;position:absolute;transform:translate(-50%)}.node-popover:before{content:"";width:16px;height:16px;top:-10px;left:calc(50% - 8px + var(--offset));background:var(--primary);border-top:2px solid var(--primary-base);border-left:2px solid var(--primary-base);position:absolute;transform:rotate(45deg)}.node-popover strong{font-size:20px;display:block}.node-popover p{margin:8px 0 18px;font-size:16px}.node-popover .btn{color:var(--primary-base);border-color:#fff}.node-ring ellipse:last-child{transition:stroke-dasharray .34s ease-out}.course-completion{border:2px solid var(--selection-line);background:var(--selection);border-radius:14px;flex-wrap:wrap;align-items:center;gap:16px;margin-bottom:24px;padding:20px;display:flex}.course-completion>div{flex:1;min-width:160px}.course-completion h2{font-size:22px}.course-completion p{margin-top:8px;font-size:16px}.course-review{border-top:2px solid var(--line);margin-top:36px;padding-top:16px;scroll-margin-top:24px}.course-review summary{cursor:pointer;min-height:48px;padding:12px 0;font-weight:700}.course-review p{color:var(--muted);margin:12px 0;font-size:16px}.review-list,.guide-list{margin:16px 0;padding:0;list-style:none}.review-list li,.guide-list li{border-top:1px solid var(--line)}.review-list button{text-align:left;justify-content:space-between;align-items:center;gap:16px;width:100%;min-height:60px;padding:12px 0;display:flex}.review-list small,.guide-list small{color:var(--muted);margin-top:6px;font-size:14px;display:block}.guide-list li{padding:14px 0}.guide-list li>span{align-items:center;gap:12px;display:flex}.guide-list .od-icon{width:22px;height:22px;color:var(--primary-base)}.dialog-head{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.dialog-head h2{overflow-wrap:anywhere;margin:4px 0 12px}.dialog-head .back-icon{margin:-4px -8px 0 0}.dialog-actions{align-items:center}.dialog-actions .btn{min-width:140px}.dialog-actions .danger{color:var(--error);border-color:#d39a91}.connection-note,.update-note{color:#66500a;background:#fff8df;border:2px solid #e8d9a0;border-radius:12px;margin-bottom:20px;padding:14px 18px;font-size:16px}.update-note{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.loading-status,.global-message,.storage-warning{z-index:50;border:2px solid var(--selection-line);background:var(--selection);width:max-content;max-width:calc(100vw - 24px);color:var(--primary-base);border-radius:12px;padding:12px 20px;font-size:16px;position:fixed;top:12px;left:50%;transform:translate(-50%);box-shadow:0 3px 16px #24123c16}.global-message,.storage-warning{color:#66500a;background:#fff8df;border-color:#e8d9a0}.storage-warning{top:auto;bottom:12px}.skip-link{border:2px solid var(--primary-base);z-index:100;background:#fff;border-radius:10px;padding:12px 20px;position:fixed;top:-100px;left:16px}.skip-link:focus{top:12px}.lesson-top{flex-wrap:wrap;margin:0 auto}.lesson-steps{flex:none}.lesson-prompt{align-items:center;gap:20px;margin:20px 0 24px;display:flex}.lesson-prompt .mascot{width:88px;max-height:120px}.speech{border:2px solid var(--line);min-width:0;color:var(--muted);border-radius:14px;flex:1;padding:16px;font-size:16px}.lesson-reading .mentor p{margin:0;font-size:16px}.reading-return{margin-bottom:12px}.lesson-kicker{margin-bottom:12px;display:block}.order-index{text-align:center;width:24px;color:var(--muted);flex:none!important}.order-text{flex:1;min-width:0}.order-item:focus{outline:3px solid var(--primary-base);outline-offset:3px}.move span{justify-content:center;align-items:center;font-size:24px;line-height:1;display:flex}.move{padding:0}.feedback .icon-box{color:inherit}.feedback>div{min-width:0}.feedback{animation:none}.lesson-footer.success .feedback,.lesson-footer.error .feedback{animation:.18s ease-out both cue}.answer>.od-icon{width:22px;height:22px}.answer.wrong{color:var(--error)}.answer.correct{color:var(--success)}.feedback .correct-order{margin:8px 0;padding-left:20px;font-size:16px}.lesson-footer.success .primary{background:var(--success);border-color:var(--success);box-shadow:0 3px #24522d}.lesson-footer.error .primary{background:var(--error);border-color:var(--error);box-shadow:0 3px #7f2626}.result-box>.mascot{width:128px}.result-box>.mascot img{width:auto;max-height:160px}.result-learning{margin-top:28px}.result-learning h2{margin-bottom:16px}.result-learning p{margin-top:16px}.result-learning li{margin:10px 0}.result-next .btn{margin-top:20px}.result-next p{color:var(--muted);font-size:16px}.unit-completion{background:var(--surface);border-radius:14px;margin-top:24px;padding:20px}.unit-completion .text-link{justify-content:flex-start;display:flex}.profile-course-row button>span:nth-child(2){flex:1;min-width:0}.profile-course-row small{color:var(--muted);font-size:14px;display:block}.profile-total strong{color:var(--primary-base);font-size:28px}.preference-row{align-items:center;gap:20px;display:flex}.preference-row>span{flex:1;min-width:0}.preference-row small{color:var(--muted);margin-top:6px;font-size:15px;display:block}.preference-row input{width:24px;height:24px;accent-color:var(--primary-base);flex:none}.reset-link{text-align:left;justify-content:flex-start;display:flex}.saved-label{margin-top:12px;color:var(--success)!important}.profile-grid .name-field .btn{margin-top:0}@media (width<=767px){.head-mascot{width:76px}.trail-top>a{display:none}.sidebar .nav{gap:4px}.sidebar .nav-item{text-decoration:none}.sidebar .nav-item .icon-box{justify-content:center;align-items:center;display:flex}.started-list{grid-template-columns:1fr}.course-card .course-icon{grid-row:1/3}.course-card h3{grid-column:2}.unit-picker label{width:100%}.unit-picker select{max-width:100%}.unit-picker .btn{font-size:14px}.unit-banner{height:auto;min-height:90px}.unit-banner>div{flex:1}.lesson-top>.progress{flex-basis:100%;order:3;height:10px;display:block}.lesson-top>.btn{margin-left:auto}.lesson-prompt{gap:14px}.lesson-prompt .mascot{width:68px}.speech{padding:12px}.mentor .mascot{width:64px}.storage-warning{bottom:calc(88px + env(safe-area-inset-bottom))}}@media (width<=359px){.category-tabs button{flex:0 auto}.unit-picker{gap:6px}.unit-picker .btn{font-size:13px}.unit-picker select{min-width:100px;padding:8px;font-size:15px}.page-head{align-items:flex-start}.head-mascot{width:58px}}[data-reduced-motion=true] *,[data-reduced-motion=true] :before,[data-reduced-motion=true] :after{scroll-behavior:auto!important;transition:none!important;animation:none!important}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}.btn:not(.quiet),.pill,.eyebrow,.unit-banner small{letter-spacing:.06em}.legal-links{flex-wrap:wrap;gap:8px 24px;margin-top:16px;display:flex}.legal-links a{align-items:center;min-height:44px;font-size:16px;display:inline-flex}.legal-reading{overflow-wrap:anywhere;max-width:65ch}.legal-reading h2{margin-top:24px}.legal-reading .btn.quiet{margin-bottom:12px;margin-left:-8px}