:root{color-scheme:light;--color-background:#f5f7fb;--color-surface:#fff;--color-surface-muted:#f0f4f9;--color-surface-strong:#e6edf6;--color-text:#172033;--color-text-muted:#5f6c80;--color-heading:#0f172a;--color-border:#d7dfeb;--color-border-strong:#b9c5d6;--color-primary:#6558d3;--color-primary-dark:#4d42b5;--color-primary-light:#edeaff;--color-accent:#0f9f86;--color-accent-dark:#087866;--color-success:#16794c;--color-success-bg:#eaf8f0;--color-success-border:#9ed8b9;--color-warning:#8a5707;--color-warning-bg:#fff7df;--color-warning-border:#edcf7d;--color-danger:#b4233c;--color-danger-bg:#fff0f2;--color-danger-border:#efa6b3;--color-info:#155b95;--color-info-bg:#edf7ff;--color-info-border:#9dcced;--color-code-background:#101727;--color-code-surface:#172033;--color-code-text:#e5edf8;--color-code-muted:#aebbd0;--shadow-sm:0 1px 2px rgba(15,23,42,.06);--shadow-md:0 12px 30px rgba(23,32,51,.09);--shadow-lg:0 24px 60px rgba(23,32,51,.14);--radius-sm:0.45rem;--radius-md:0.8rem;--radius-lg:1.15rem;--radius-pill:999px;--content-width:1180px;--reading-width:780px;--header-height:4.5rem;--transition:160ms ease;--font-sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace}*,:after,:before{box-sizing:border-box}html{min-width:320px;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-height) + 1.25rem);background:var(--color-background)}body{margin:0;overflow-wrap:break-word;color:var(--color-text);background:radial-gradient(circle at 12% 0,rgba(101,88,211,.11),transparent 30rem),radial-gradient(circle at 90% 12%,rgba(15,159,134,.08),transparent 26rem),var(--color-background);font-family:var(--font-sans);font-size:1rem;line-height:1.65;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}#__next,body{min-height:100vh}::selection{color:#fff;background:var(--color-primary)}canvas,img,svg,video{display:block;max-width:100%}iframe{max-width:100%;border:0}button,input,select,textarea{margin:0;color:inherit;font:inherit}button,select{text-transform:none}button,input[type=button],input[type=submit]{-webkit-appearance:none;-moz-appearance:none;appearance:none}button:not(:disabled),input[type=button]:not(:disabled),input[type=submit]:not(:disabled),select:not(:disabled){cursor:pointer}button:disabled,input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;opacity:.62}a{color:var(--color-primary-dark);-webkit-text-decoration-color:rgba(77,66,181,.38);text-decoration-color:rgba(77,66,181,.38);text-decoration-thickness:.09em;text-underline-offset:.18em;transition:color var(--transition),-webkit-text-decoration-color var(--transition);transition:color var(--transition),text-decoration-color var(--transition);transition:color var(--transition),text-decoration-color var(--transition),-webkit-text-decoration-color var(--transition)}a:hover{color:var(--color-primary);-webkit-text-decoration-color:currentColor;text-decoration-color:currentColor}:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{outline:3px solid rgba(101,88,211,.38);outline-offset:3px}h1,h2,h3,h4,h5,h6{margin:0 0 .65em;color:var(--color-heading);font-weight:750;line-height:1.18;letter-spacing:-.025em}h1{font-size:clamp(2.1rem,5vw,4rem)}h2{font-size:clamp(1.55rem,3vw,2.35rem)}h3{font-size:clamp(1.18rem,2vw,1.5rem)}h4{font-size:1.08rem}blockquote,ol,p,pre,ul{margin-top:0}p{margin-bottom:1rem}ol,ul{padding-left:1.35rem}li+li{margin-top:.35rem}hr{height:1px;margin:2rem 0;border:0;background:var(--color-border)}code,kbd,pre,samp{font-family:var(--font-mono)}:not(pre)>code{padding:.12rem .38rem;border:1px solid #d8d5f4;border-radius:.35rem;color:#493da8;background:#f1efff;font-size:.9em}pre{max-width:100%;overflow:auto;-moz-tab-size:2;tab-size:2}blockquote{margin-right:0;margin-left:0;padding:.35rem 0 .35rem 1.15rem;border-left:4px solid var(--color-primary);color:var(--color-text-muted)}.skip-link{position:fixed;z-index:1000;top:.75rem;left:.75rem;padding:.65rem 1rem;border-radius:var(--radius-sm);color:#fff;background:var(--color-heading);box-shadow:var(--shadow-md);transform:translateY(-160%)}.skip-link:focus{color:#fff;transform:translateY(0)}.container,.footer-inner,.header-inner,.page-container{width:min(100% - 2rem,var(--content-width));margin-inline:auto}.site-main,main{min-height:calc(100vh - var(--header-height) - 11rem)}main{padding-block:clamp(2rem,5vw,4.5rem)}.auth-page,.home-page,.page,.page-section,.tutorial-page{width:min(100% - 2rem,var(--content-width));margin-inline:auto}.auth-container,.auth-page,.content-narrow{width:min(100% - 2rem,680px);margin-inline:auto}.eyebrow,.kicker{margin-bottom:.75rem;color:var(--primary,var(--color-primary-dark));font-size:.78rem;font-weight:800;letter-spacing:.12em;line-height:1.4;text-transform:uppercase}.hero-description,.lead,.page-intro{max-width:760px;color:var(--color-text-muted);font-size:clamp(1.05rem,2vw,1.25rem);line-height:1.7}.form-help,.help-text,.muted,.text-muted{color:var(--color-text-muted)}.sr-only,.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;border:0!important;padding:0!important;white-space:nowrap!important}.header,.site-header{position:-webkit-sticky;position:sticky;z-index:100;top:0;min-height:var(--header-height);border-bottom:1px solid rgba(185,197,214,.72);background:hsla(0,0%,100%,.9);box-shadow:0 1px 0 rgba(15,23,42,.03);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.header-content,.header-inner{display:flex;min-height:var(--header-height);align-items:center;justify-content:space-between;gap:1.25rem}.brand,.logo,.site-brand{display:inline-flex;flex:0 0 auto;align-items:center;gap:.65rem;color:var(--color-heading);font-size:1.15rem;font-weight:850;letter-spacing:-.025em;text-decoration:none}.brand:before,.site-brand:before{display:grid;width:2rem;height:2rem;place-items:center;border-radius:.6rem;color:#fff;background:linear-gradient(145deg,var(--color-primary),#8677ef);box-shadow:0 7px 16px rgba(101,88,211,.26);content:"JS";font-family:var(--font-mono);font-size:.72rem;font-weight:900;letter-spacing:-.06em}.brand:hover,.logo:hover,.site-brand:hover{color:var(--color-primary-dark);text-decoration:none}.auth-nav,.nav,.nav-links,.site-nav{display:flex;align-items:center;gap:.35rem}.nav a,.nav-link,.site-nav a{display:inline-flex;min-height:2.55rem;align-items:center;justify-content:center;padding:.45rem .8rem;border-radius:var(--radius-pill);color:var(--color-text);font-weight:650;text-decoration:none;transition:color var(--transition),background-color var(--transition),transform var(--transition)}.nav a:hover,.nav-link:hover,.nav-link[aria-current=page],.site-nav a:hover{color:var(--color-primary-dark);background:var(--color-primary-light)}.nav-user,.user-greeting,.username{margin:0 .4rem;color:var(--color-text-muted);font-size:.92rem}.footer,.site-footer{margin-top:clamp(3rem,8vw,7rem);border-top:1px solid var(--color-border);background:hsla(0,0%,100%,.74)}.footer-content,.footer-inner{display:flex;min-height:8rem;align-items:center;justify-content:space-between;gap:1.5rem;color:var(--color-text-muted);font-size:.92rem}.footer-content p,.footer-inner p{margin:0}.hero{position:relative;display:grid;min-height:22rem;align-items:center;padding:clamp(2rem,7vw,5.5rem);overflow:hidden;border:1px solid rgba(185,197,214,.78);border-radius:clamp(1rem,3vw,1.8rem);background:linear-gradient(135deg,hsla(0,0%,100%,.98),rgba(245,243,255,.96)),var(--color-surface);box-shadow:var(--shadow-lg);isolation:isolate}.hero:after{position:absolute;z-index:-1;top:-8rem;right:-7rem;width:25rem;height:25rem;border-radius:50%;background:radial-gradient(circle,rgba(101,88,211,.23),rgba(15,159,134,.03) 58%,transparent 70%);content:""}.hero-content{max-width:790px}.hero h1{max-width:880px;margin-bottom:1rem}.action-row,.card-actions,.code-actions,.form-actions,.hero-actions,.runner-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:1.5rem}.catalog-header,.section-heading,.tutorial-header{margin-bottom:clamp(1.5rem,4vw,2.5rem)}.catalog-header p,.section-heading p,.tutorial-header p{max-width:780px;color:var(--color-text-muted)}.benefits-grid,.card-grid,.feature-grid,.tutorial-catalog,.tutorial-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:1.25rem;gap:1.25rem}.benefits-grid,.feature-grid{margin-block:clamp(2rem,6vw,4.5rem)}.auth-card,.benefit-card,.card,.feature-card,.form-card,.tutorial-card{border:1px solid var(--color-border);border-radius:var(--radius-lg);background:hsla(0,0%,100%,.96);box-shadow:var(--shadow-sm)}.benefit-card,.card,.feature-card{padding:1.4rem}.benefit-card,.feature-card{position:relative;overflow:hidden}.benefit-card:before,.feature-card:before{display:block;width:2.5rem;height:.3rem;margin-bottom:1.15rem;border-radius:var(--radius-pill);background:linear-gradient(90deg,var(--color-primary),var(--color-accent));content:""}.benefit-card p:last-child,.feature-card p:last-child{margin-bottom:0}.catalog-section,.tutorial-catalog-section{margin-top:clamp(3rem,7vw,6rem)}.tutorial-card{display:flex;min-width:0;flex-direction:column;padding:1.4rem;transition:border-color var(--transition),box-shadow var(--transition),transform var(--transition)}.tutorial-card:hover{border-color:#bbb2ef;box-shadow:var(--shadow-md);transform:translateY(-3px)}.card-title,.tutorial-card h2,.tutorial-card h3{margin-bottom:.65rem;font-size:1.28rem}.card-title a,.tutorial-card h2 a,.tutorial-card h3 a,.tutorial-link{color:var(--color-heading);text-decoration:none}.card-title a:hover,.tutorial-card h2 a:hover,.tutorial-card h3 a:hover,.tutorial-link:hover{color:var(--color-primary-dark)}.card-description,.tutorial-card p{color:var(--color-text-muted)}.tutorial-card .card-actions,.tutorial-card .tutorial-card-footer{margin-top:auto;padding-top:1rem}.card-meta,.meta-row,.metadata,.tutorial-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem .8rem;margin-block:.8rem 1rem;color:var(--color-text-muted);font-size:.86rem}.badge,.difficulty,.meta-badge,.tag{display:inline-flex;min-height:1.65rem;align-items:center;padding:.18rem .58rem;border:1px solid #d3cef7;border-radius:var(--radius-pill);color:var(--color-primary-dark);background:var(--color-primary-light);font-size:.75rem;font-weight:750;letter-spacing:.02em;line-height:1.2;text-transform:capitalize}.difficulty-beginner{border-color:#a7dbc5;color:var(--color-success);background:var(--color-success-bg)}.difficulty-intermediate{border-color:var(--color-warning-border);color:var(--color-warning);background:var(--color-warning-bg)}.difficulty-advanced{border-color:var(--color-danger-border);color:var(--color-danger);background:var(--color-danger-bg)}.btn,.button,button,input[type=submit]{display:inline-flex;min-height:2.75rem;align-items:center;justify-content:center;gap:.45rem;padding:.58rem 1rem;border:1px solid transparent;border-radius:var(--radius-md);color:#fff;background:var(--color-primary);box-shadow:0 5px 13px rgba(101,88,211,.18);font-weight:750;line-height:1.2;text-align:center;text-decoration:none;transition:background-color var(--transition),border-color var(--transition),color var(--transition),box-shadow var(--transition),transform var(--transition)}.btn:hover,.button:hover,button:hover:not(:disabled),input[type=submit]:hover:not(:disabled){color:#fff;background:var(--color-primary-dark);box-shadow:0 8px 18px rgba(77,66,181,.23);text-decoration:none;transform:translateY(-1px)}.btn:active,.button:active,button:active:not(:disabled){box-shadow:none;transform:translateY(0)}.btn-secondary,.button-secondary,.secondary-button,button.secondary{border-color:var(--color-border-strong);color:var(--color-text);background:var(--color-surface);box-shadow:var(--shadow-sm)}.btn-secondary:hover,.button-secondary:hover,.secondary-button:hover,button.secondary:hover:not(:disabled){border-color:#aaa0e7;color:var(--color-primary-dark);background:var(--color-primary-light);box-shadow:var(--shadow-sm)}.btn-ghost,.button-ghost,.ghost-button,.nav button,.site-nav button{min-height:2.45rem;padding:.42rem .78rem;border-color:transparent;color:var(--color-text);background:transparent;box-shadow:none}.btn-ghost:hover,.button-ghost:hover,.ghost-button:hover,.nav button:hover:not(:disabled),.site-nav button:hover:not(:disabled){color:var(--color-primary-dark);background:var(--color-primary-light);box-shadow:none}.btn-danger,.button-danger{color:#fff;background:var(--color-danger)}.btn-small,.button-small,.small-button{min-height:2.2rem;padding:.38rem .72rem;border-radius:var(--radius-sm);font-size:.86rem}.auth-page{display:grid;grid-gap:1.5rem;gap:1.5rem}.auth-intro{text-align:center}.auth-card,.auth-form,.form-card{width:min(100%,540px);margin-inline:auto;padding:clamp(1.25rem,4vw,2.25rem)}.auth-form{border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-md)}form{width:100%}.field,.form-field,.form-group{display:grid;grid-gap:.4rem;gap:.4rem;margin-bottom:1.15rem}.form-label,label{color:var(--color-heading);font-size:.92rem;font-weight:700}input,select,textarea{width:100%;min-height:2.85rem;border:1px solid var(--color-border-strong);border-radius:var(--radius-md);padding:.62rem .78rem;background:#fff;box-shadow:inset 0 1px 2px rgba(15,23,42,.03);transition:border-color var(--transition),box-shadow var(--transition),background-color var(--transition)}textarea{min-height:8rem;resize:vertical}input::placeholder,textarea::placeholder{color:#8792a5;opacity:1}input:hover,select:hover,textarea:hover{border-color:#9ca9bc}input:focus,select:focus,textarea:focus{border-color:var(--color-primary);outline:0;box-shadow:0 0 0 4px rgba(101,88,211,.14)}.input-error,input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--color-danger)}input[aria-invalid=true]:focus,select[aria-invalid=true]:focus,textarea[aria-invalid=true]:focus{box-shadow:0 0 0 4px rgba(180,35,60,.12)}.error-text,.field-error,.form-error{margin:0;color:var(--color-danger);font-size:.86rem;font-weight:650}.auth-alternate,.form-footer{margin:1.35rem 0 0;color:var(--color-text-muted);text-align:center}.auth-form button[type=submit],.form-actions button{min-width:8.5rem}.auth-form button[type=submit]{width:100%}.checkbox-field,.checkbox-label,.completion-control{display:flex;align-items:flex-start;gap:.65rem}input[type=checkbox],input[type=radio]{width:1.1rem;min-width:1.1rem;height:1.1rem;min-height:1.1rem;margin-top:.2rem;padding:0;accent-color:var(--color-primary)}.alert,.empty-state,.error-message,.loading-message,.notice,.runtime-notice,.status-message{width:100%;margin-block:1rem;padding:1rem 1.1rem;border:1px solid var(--color-info-border);border-radius:var(--radius-md);color:var(--color-info);background:var(--color-info-bg)}.runtime-notice{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.notice-content{min-width:0}.alert-title,.notice-title,.runtime-notice h2,.runtime-notice h3{margin:0 0 .2rem;color:inherit;font-size:1rem;letter-spacing:0}.alert p,.empty-state p,.notice p,.runtime-notice p,.status-message p{margin:0}.alert button,.notice button,.runtime-notice button{flex:0 0 auto;min-height:2.25rem;padding:.38rem .7rem;border-color:currentColor;color:inherit;background:transparent;box-shadow:none;font-size:.84rem}.alert button:hover:not(:disabled),.notice button:hover:not(:disabled),.runtime-notice button:hover:not(:disabled){color:#fff;background:currentColor;box-shadow:none}.alert-success,.notice-success,.runtime-notice[data-status=success],.status-success{border-color:var(--color-success-border);color:var(--color-success);background:var(--color-success-bg)}.alert-warning,.notice-warning,.runtime-notice[data-status=unavailable],.runtime-notice[data-status=warning],.status-warning{border-color:var(--color-warning-border);color:var(--color-warning);background:var(--color-warning-bg)}.alert-error,.error-message,.notice-error,.runtime-notice[data-status=error],.status-error{border-color:var(--color-danger-border);color:var(--color-danger);background:var(--color-danger-bg)}.alert-info,.notice-info,.runtime-notice[data-status=info],.status-info{border-color:var(--color-info-border);color:var(--color-info);background:var(--color-info-bg)}.catalog-loading,.loading-state,.viewer-loading{display:grid;min-height:12rem;place-items:center;color:var(--color-text-muted);text-align:center}.catalog-loading:before,.loading-state:before,.spinner{width:2rem;height:2rem;border:3px solid var(--color-surface-strong);border-top-color:var(--color-primary);border-radius:50%;content:"";animation:spin .8s linear infinite}.empty-state{padding:clamp(1.5rem,5vw,3rem);border-style:dashed;color:var(--color-text-muted);background:hsla(0,0%,100%,.72);text-align:center}@keyframes spin{to{transform:rotate(1turn)}}.tutorial-layout,.tutorial-viewer{display:grid;grid-template-columns:minmax(0,1fr);grid-gap:1.5rem;gap:1.5rem}.tutorial-header{padding:clamp(1.25rem,4vw,2.25rem);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:linear-gradient(145deg,#fff,#f5f3ff);box-shadow:var(--shadow-sm)}.tutorial-header h1{max-width:900px;font-size:clamp(2rem,4.5vw,3.4rem)}.progress-panel,.tutorial-progress{padding:1rem 1.15rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}.progress-summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.55rem;color:var(--color-text-muted);font-size:.9rem;font-weight:650}.progress-bar,progress{width:100%;height:.7rem;overflow:hidden;border:0;border-radius:var(--radius-pill);background:var(--color-surface-strong)}progress::-webkit-progress-bar{border-radius:var(--radius-pill);background:var(--color-surface-strong)}progress::-webkit-progress-value{border-radius:var(--radius-pill);background:linear-gradient(90deg,var(--color-primary),var(--color-accent))}progress::-moz-progress-bar{border-radius:var(--radius-pill);background:linear-gradient(90deg,var(--color-primary),var(--color-accent))}.sections-list,.tutorial-sections{display:grid;grid-gap:1.5rem;gap:1.5rem}.lesson-section,.section-card,.tutorial-section{min-width:0;padding:clamp(1.25rem,4vw,2.25rem);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-sm)}.lesson-section:target,.tutorial-section:target{border-color:#aaa0e7;box-shadow:0 0 0 4px rgba(101,88,211,.1)}.lesson-header,.section-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.1rem}.lesson-header h2,.section-header h2{margin:0}.section-number{display:inline-flex;margin-bottom:.5rem;color:var(--color-primary-dark);font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.lesson-content,.section-content{max-width:var(--reading-width)}.lesson-content p:last-child,.section-content p:last-child{margin-bottom:0}.completed-label,.section-complete{display:inline-flex;align-items:center;gap:.4rem;color:var(--color-success);font-size:.86rem;font-weight:750}.complete-button[aria-pressed=true],.completion-button[aria-pressed=true]{border-color:var(--color-success-border);color:var(--color-success);background:var(--color-success-bg);box-shadow:none}.progress-status,.save-status{min-height:1.4em;color:var(--color-text-muted);font-size:.82rem}.code-example,.code-runner,.example-runner{margin-top:1.5rem;overflow:hidden;border:1px solid #29364c;border-radius:var(--radius-lg);background:var(--color-code-background);box-shadow:0 15px 34px rgba(10,16,29,.2)}.code-header,.code-runner-header,.example-header{display:flex;min-height:3.1rem;align-items:center;justify-content:space-between;gap:1rem;padding:.65rem .85rem .65rem 1rem;border-bottom:1px solid #2b3850;color:var(--color-code-muted);background:var(--color-code-surface)}.code-runner-title,.code-title{margin:0;color:var(--color-code-text);font-family:var(--font-mono);font-size:.86rem;font-weight:700;letter-spacing:0}.code-example pre,.code-runner pre,.source-code{min-height:5rem;max-height:32rem;margin:0;padding:1.15rem;overflow:auto;color:var(--color-code-text);background:var(--color-code-background);font-size:.9rem;line-height:1.65;white-space:pre}.code-example pre code,.code-runner pre code{padding:0;border:0;color:inherit;background:transparent;font-size:inherit}.code-actions button,.code-runner button,.runner-actions button{min-height:2.15rem;padding:.38rem .72rem;border-color:#475775;color:var(--color-code-text);background:#24304a;box-shadow:none;font-size:.82rem}.code-actions button:hover:not(:disabled),.code-runner button:hover:not(:disabled),.runner-actions button:hover:not(:disabled){border-color:#7669e1;color:#fff;background:var(--color-primary);box-shadow:none}.code-runner .run-button,.run-button{border-color:#1ea58c;color:#fff;background:var(--color-accent-dark)}.code-runner .run-button:hover:not(:disabled),.run-button:hover:not(:disabled){background:var(--color-accent)}.code-actions,.runner-actions{margin:0}.console-output,.output-panel,.runner-output{min-height:5.5rem;border-top:1px solid #2b3850;color:var(--color-code-text);background:#0a101d}.console-header,.output-header{padding:.55rem 1rem;border-bottom:1px solid #202b3f;color:var(--color-code-muted);background:#111a2a;font-family:var(--font-mono);font-size:.76rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase}.console-lines,.console-output pre,.output-content,.runner-output pre{min-height:3.25rem;max-height:18rem;margin:0;padding:.85rem 1rem;overflow:auto;color:var(--color-code-text);background:transparent;font-family:var(--font-mono);font-size:.84rem;line-height:1.55;white-space:pre-wrap;word-break:break-word}.console-empty,.output-empty{color:#8492a9;font-style:italic}.console-error,.output-error{color:#ff9baa}.console-warning,.output-warning{color:#f8d477}.output-success{color:#77dbb5}.code-runner iframe,.sandbox-frame{position:absolute;width:1px;height:1px;overflow:hidden;-webkit-clip-path:inset(50%);clip-path:inset(50%);pointer-events:none}.error-boundary,.not-found{width:min(100% - 2rem,680px);margin:4rem auto;padding:2rem;border:1px solid var(--color-danger-border);border-radius:var(--radius-lg);background:var(--color-danger-bg);text-align:center}@media (max-width:920px){.benefits-grid,.card-grid,.feature-grid,.tutorial-catalog,.tutorial-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero{min-height:auto}}@media (max-width:700px){:root{--header-height:4rem}.auth-page,.container,.footer-inner,.header-inner,.home-page,.page,.page-container,.page-section,.tutorial-page{width:min(100% - 1.25rem,var(--content-width))}main{padding-block:1.75rem}.header,.site-header{position:relative}.header-content,.header-inner{min-height:var(--header-height);flex-wrap:wrap;gap:.45rem .75rem;padding-block:.6rem}.auth-nav,.nav,.nav-links,.site-nav{width:100%;justify-content:flex-start;gap:.2rem;overflow-x:auto;padding-bottom:.2rem;scrollbar-width:thin}.nav a,.nav button,.nav-link,.site-nav a,.site-nav button{flex:0 0 auto}.nav-user,.user-greeting,.username{margin-left:auto}.hero{padding:1.6rem;border-radius:var(--radius-lg)}.form-actions>*,.hero-actions>*{flex:1 1 auto}.benefits-grid,.card-grid,.feature-grid,.tutorial-catalog,.tutorial-grid{grid-template-columns:1fr}.runtime-notice{flex-direction:column}.alert button,.notice button,.runtime-notice button{align-self:flex-start}.lesson-header,.section-header{flex-direction:column}.footer-content,.footer-inner{min-height:7rem;flex-direction:column;align-items:flex-start;justify-content:center;gap:.5rem}}@media (max-width:480px){h1{font-size:clamp(1.85rem,10vw,2.5rem)}h2{font-size:1.45rem}.brand,.logo,.site-brand{font-size:1.02rem}.brand:before,.site-brand:before{width:1.8rem;height:1.8rem}.nav a,.nav button,.nav-link,.site-nav a,.site-nav button{min-height:2.25rem;padding:.35rem .62rem;font-size:.88rem}.nav-user,.user-greeting,.username{display:none}.hero{padding:1.3rem}.benefit-card,.card,.feature-card,.lesson-section,.section-card,.tutorial-card,.tutorial-header,.tutorial-section{border-radius:var(--radius-md)}.auth-form,.lesson-section,.section-card,.tutorial-card,.tutorial-header,.tutorial-section{padding:1.15rem}.code-header,.code-runner-header,.example-header{align-items:flex-start;flex-direction:column}.code-actions,.runner-actions{width:100%}.code-actions button,.runner-actions button{flex:1 1 auto}.code-example pre,.code-runner pre,.source-code{padding:.9rem;font-size:.8rem}.btn,.button,button,input[type=submit]{min-height:2.65rem}}@media (prefers-reduced-motion:reduce){*,:after,:before{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.btn:hover,.button:hover,.tutorial-card:hover,button:hover:not(:disabled){transform:none}}@media (prefers-contrast:more){:root{--color-border:#8793a6;--color-border-strong:#647084;--color-text-muted:#465267}:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{outline-color:var(--color-heading);outline-width:4px}}@media print{body{color:#000;background:#fff}.code-actions,.completion-control,.footer,.header,.hero-actions,.runner-actions,.runtime-notice button,.site-footer,.site-header{display:none!important}main{padding:0}.lesson-section,.page,.section-card,.tutorial-page,.tutorial-section{width:100%;border-color:#b8b8b8;box-shadow:none}.code-runner,.lesson-section,.section-card,.tutorial-section{page-break-inside:avoid;break-inside:avoid}a{color:#000}}