/* © 2026 HowItWorks3D. All rights reserved.
   Unauthorized copying, reproduction, modification, extraction,
   redistribution, resale, or commercial use prohibited without
   prior written permission. */
.wl-app{--wl-ink:#e9f1f3;--wl-muted:#a5bac4;--wl-mint:#a8e4d2;background:#101f2a;color:var(--wl-ink);font-family:Inter,Arial,sans-serif;min-height:100svh;font-size:14px;line-height:1.65;color-scheme:dark}.wl-app *{box-sizing:border-box}.wl-app button,.wl-app input,.wl-app select{font:inherit}.wl-app button,.wl-app a{touch-action:manipulation}.wl-app button{cursor:pointer;color:inherit;background:#ffffff08;border:1px solid #ffffff24;border-radius:12px;padding:9px 13px;display:inline-flex;align-items:center;justify-content:center;gap:8px}.wl-app button:hover:not(:disabled){background:#ffffff15;border-color:#a8e4d27a}.wl-app button:disabled{opacity:.48;cursor:default}.wl-app a{color:inherit;text-decoration:none}.wl-app a:hover{text-decoration:underline}.wl-app :focus-visible{outline:3px solid #a8e4d2;outline-offset:4px}.wl-header{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:78px;padding:16px 32px;border-bottom:1px solid #ffffff14;background:#11232e}.wl-brand{font-size:18px;font-weight:750;letter-spacing:-.7px;display:flex;align-items:baseline}.wl-brand>span{color:#9cceca}.wl-brand small{font-size:9px;letter-spacing:2px;font-weight:500;margin-left:20px;color:var(--wl-muted)}.wl-header>div{display:flex;gap:10px;align-items:center}.wl-header a:not(.wl-brand){display:flex;align-items:center;gap:8px;font-size:12px}.wl-header button{font-size:12px;border-radius:30px}.wl-layout{display:grid;grid-template-columns:255px minmax(0,1fr);max-width:1800px;margin:auto}.wl-sidebar{border-right:1px solid #ffffff13;padding:32px 20px;background:#132530}.wl-eyebrow{font-size:9px;letter-spacing:2px;font-weight:650;color:#a7ccc9}.wl-progress{padding:0 12px 24px}.wl-progress>div{display:flex;gap:12px;align-items:baseline;margin-top:14px}.wl-progress strong{font-size:38px;letter-spacing:-2px;font-weight:450}.wl-progress span:not(.wl-eyebrow){font-size:10px;color:var(--wl-muted)}.wl-progress progress{width:100%;height:4px;appearance:none;border:0;background:#ffffff15;border-radius:5px;overflow:hidden}.wl-progress progress::-webkit-progress-bar{background:#ffffff15}.wl-progress progress::-webkit-progress-value{background:var(--wl-mint);border-radius:5px}.wl-progress progress::-moz-progress-bar{background:var(--wl-mint)}.wl-progress p{color:var(--wl-muted);font-size:12px;line-height:1.8}.wl-sidebar nav{display:flex;flex-direction:column;gap:5px}.wl-sidebar nav :is(button,a){justify-content:flex-start;text-align:left;border:1px solid transparent;padding:13px 10px;gap:12px;background:transparent;line-height:1.4;font-size:12px}.wl-sidebar nav :is(button,a).is-active{background:#a8e4d212;border-color:#a8e4d23d;color:#d1f6e9}.wl-nav-index{display:flex;align-items:center;justify-content:center;width:24px;flex-shrink:0;color:#a1bbb9;font-size:10px}.wl-sidebar nav small{display:block;color:#8da6b1;font-size:7px;letter-spacing:1.1px;margin-top:6px}.wl-sidebar .wl-reset{border:0;font-size:10px;color:#a3b8c0;margin-top:25px}.wl-storage{font-size:10px;color:#829da9;padding:0 12px}.wl-main{padding:36px 38px 20px;min-width:0}.wl-lesson-title{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:28px}.wl-lesson-title h1{font-size:clamp(28px,3.2vw,48px);font-weight:450;line-height:1.15;letter-spacing:-1.8px;margin:12px 0}.wl-lesson-title p{color:var(--wl-muted);font-size:13px;max-width:650px;margin:0;line-height:1.85}.wl-lesson-symbol{font-size:70px;font-family:Georgia,serif;opacity:.8;margin-right:10px;line-height:1}.wl-workbench{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:20px;align-items:start}.wl-visual{border:1px solid #ffffff20;border-radius:22px;overflow:hidden;background:radial-gradient(ellipse at 75% 0%,#294656,#142c39 70%);position:sticky;top:16px}.wl-visual-top,.wl-visual-bottom{display:flex;justify-content:space-between;gap:12px;padding:18px 20px;font-size:9px;color:#b3c9d0;letter-spacing:.6px;position:relative;z-index:1}.wl-visual-top>span:first-child{display:flex;gap:8px;align-items:center}.wl-visual-top i{width:5px;height:5px;background:#a8e4d2;border-radius:50%;box-shadow:0 0 0 4px #a8e4d210}.wl-visual-top>span:last-child{white-space:nowrap;color:#8ba5b1}.wl-canvas{height:410px;position:relative;width:100%;isolation:isolate}.wl-canvas canvas{touch-action:none}.wl-scene-label{display:block;white-space:nowrap;color:#e6f4f7;background:#11232dd9;border:1px solid #c4e2e82b;border-radius:18px;padding:4px 9px;font-size:10px;line-height:1.4;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.wl-visual-bottom{font-size:9px;letter-spacing:0;padding-top:8px;color:#8ba9b5}.wl-experiment-prompt{padding:18px 22px;background:#a8e4d20b;border-top:1px solid #ffffff15}.wl-experiment-prompt>span{font-size:8px;letter-spacing:2px;color:#acd5c9}.wl-experiment-prompt p{font-size:12px;margin:6px 0 0;color:#cce0e4}.wl-controls{padding:24px;background:#ffffff05;border:1px solid #ffffff14;border-radius:22px;min-width:0}.wl-controls h2,.wl-controls h3{font-weight:500;font-size:20px;line-height:1.3;letter-spacing:-.5px;margin:12px 0 22px}.wl-controls p{font-size:12px;color:#b3c7d0;line-height:1.85}.wl-slider{display:block;margin:22px 0}.wl-slider>span{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:#afc2cc}.wl-slider output{color:#ebf6f5;font-weight:600;font-size:12px}.wl-slider input{width:100%;accent-color:#a8e4d2;margin:14px 0 0;height:6px;cursor:pointer}.wl-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px}.wl-metric{border-radius:14px;background:#a8e4d20a;border:1px solid #a8e4d21c;padding:13px 15px;margin:12px 0}.wl-metric span{font-size:9px;color:#a4bec4;display:block}.wl-metric strong{font-size:22px;letter-spacing:-.7px;font-weight:500;color:#c6eedd}.wl-controls .wl-result{border-left:2px solid #9bdac3;padding:4px 0 4px 14px;color:#d0eee1;font-size:12px}.wl-controls .wl-note{font-size:10px;color:#93aeb9}.wl-primary{background:#b2e7d4!important;border-color:#b2e7d4!important;color:#183b3f!important;font-size:11px!important;font-weight:600!important;min-height:40px}.wl-primary:hover:not(:disabled){background:#d1f5e6!important}.wl-actions,.wl-segmented{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0}.wl-actions button,.wl-segmented button{font-size:10px;flex:1;padding:9px 8px}.wl-segmented button[aria-pressed=true]{background:#a8e4d221;border-color:#a8e4d26b;color:#d1f4e6}.wl-legend{display:flex;flex-direction:column;gap:10px;margin:22px 0;font-size:11px;color:#bdd1da}.wl-legend span{display:flex;align-items:center;gap:9px}.wl-legend i{width:8px;height:8px;border-radius:50%}.wl-steps{list-style:none;padding:0;margin:20px 0;display:flex;flex-direction:column;gap:5px}.wl-steps button{width:100%;justify-content:flex-start;border-color:transparent;font-size:11px;background:none;padding:7px 8px}.wl-steps button span{border:1px solid #ffffff20;border-radius:50%;width:23px;height:23px;font-size:9px;display:grid;place-items:center}.wl-steps button[aria-current=step]{background:#a8e4d218;color:#bcebd9}.wl-choices,.wl-journal fieldset{border:1px solid #ffffff20;border-radius:14px;padding:14px;margin:18px 0}.wl-choices legend,.wl-journal legend{font-size:10px;padding:0 6px;color:#a8cfca}.wl-choices label{display:flex;align-items:flex-start;gap:9px;font-size:12px;margin:12px 0;cursor:pointer}.wl-choices input{accent-color:#a8e4d2}.wl-feedback{border:1px solid #a8e4d240;background:#a8e4d20b;padding:15px;border-radius:14px;margin-top:20px;font-size:12px}.wl-feedback button{font-size:10px}.wl-field{display:block;font-size:11px;color:#b6cbd3;margin:15px 0}.wl-field select,.wl-field input{display:block;width:100%;margin-top:7px;background:#172f3d;color:#e8f3f5;padding:10px;border:1px solid #ffffff26;border-radius:10px;font-size:11px;min-width:0}.wl-journal h3{margin-top:12px}.wl-journal .wl-text-button{font-size:11px;margin-top:12px;width:100%}.wl-entries article{border-top:1px solid #ffffff20;padding:18px 0}.wl-entry-heading{display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:12px}.wl-entry-heading button{font-size:9px;padding:4px 9px}.wl-entries small{font-size:9px;color:#9bb8c4}.wl-explanation{display:grid;grid-template-columns:1.7fr 1fr;gap:35px;padding:32px 0;border-bottom:1px solid #ffffff12}.wl-explanation h2{font-size:24px;letter-spacing:-.8px;font-weight:450;margin:10px 0}.wl-explanation p{font-size:12px;line-height:1.95;color:#a9c0cb;max-width:700px}.wl-explanation a{font-size:10px;display:inline-flex;align-items:center;gap:5px;color:#b1d9ce}.wl-complete{border:1px solid #ffffff16;border-radius:16px;padding:20px}.wl-complete>span{font-size:8px;letter-spacing:2px;color:#a7d4c6}.wl-complete>small{display:block;font-size:9px;color:#96b1ba;margin-top:10px}.wl-complete>a{display:flex;margin-top:16px}.wl-footer{display:flex;justify-content:space-between;gap:20px;padding:23px 0 5px;font-size:9px;color:#839faa}.wl-canvas-fallback{position:absolute;left:10%;right:10%;top:30%;color:#bad1db;font-size:13px;text-align:center}.wl-canvas-fallback button{font-size:11px}.wx-learning-dialog{position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:#101f2a;color:#edf5f6;overflow:auto;z-index:20000}.wx-learning-dialog::backdrop{background:#101f2af0}.wx-learn-trigger{pointer-events:auto!important;margin-top:18px;display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border-radius:22px;border:1px solid #ffffff65;background:#ffffff14;color:inherit;font-size:11px!important}.wx-current{pointer-events:auto}.wx-education-grid{max-width:1320px;margin:0 auto;padding:65px 30px}.wx-education-grid h2{font-size:36px;letter-spacing:-1.4px;font-weight:450;margin:12px 0}.wx-education-grid>p{font-size:13px;color:#637c85;max-width:630px;line-height:1.8}.wx-education-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-top:30px}.wx-education-cards a{display:block;border:1px solid #c6d5d5;border-radius:20px;padding:23px;background:#ffffff50;transition:transform .2s,background .2s}.wx-education-cards a:hover{transform:translateY(-3px);background:#ffffff90}.wx-education-cards a>span{font-size:25px;display:block;color:#467e83;margin-bottom:12px}.wx-education-cards small{font-size:8px;letter-spacing:1.2px;color:#718c93}.wx-education-cards h3{font-size:16px;font-weight:500;line-height:1.4;margin:8px 0}.wx-education-cards p{font-size:11px;color:#6b858d;line-height:1.7}.wx-education-cards b{font-size:10px;font-weight:500;color:#467780}.wx-learning-dialog .wl-header{position:sticky;top:0;z-index:20}.wx-learning-dialog .wl-visual{top:95px}@media(min-width:1700px){.wl-canvas{height:510px}.wl-main{padding:42px 48px}.wl-controls{padding:30px}}@media(max-width:1150px){.wl-layout{grid-template-columns:205px minmax(0,1fr)}.wl-sidebar{padding:25px 12px}.wl-main{padding:28px 22px}.wl-workbench{grid-template-columns:minmax(0,1.1fr) minmax(270px,1fr)}.wl-canvas{height:360px}.wl-controls{padding:19px}.wl-lesson-symbol{display:none}.wx-education-cards{grid-template-columns:repeat(2,1fr)}}@media(max-width:850px){.wl-layout{grid-template-columns:1fr}.wl-sidebar{border-right:0;border-bottom:1px solid #ffffff15;padding:18px 20px}.wl-progress{display:flex;align-items:center;gap:16px;padding:0;flex-wrap:wrap}.wl-progress>.wl-eyebrow{font-size:8px}.wl-progress>div{margin:0;gap:7px}.wl-progress strong{font-size:25px}.wl-progress progress{width:100px}.wl-progress p{display:none}.wl-sidebar nav{flex-direction:row;overflow:auto;margin-top:14px;padding-bottom:8px}.wl-sidebar nav :is(button,a){flex:0 0 175px;font-size:11px;padding:10px 7px}.wl-sidebar .wl-reset{margin-top:6px}.wl-storage{display:inline;font-size:9px}.wl-main{padding:25px 20px}.wl-visual{position:relative!important;top:0!important}.wl-header{padding:14px 20px;min-height:65px}.wl-brand small{display:none}.wl-workbench{grid-template-columns:1.15fr 1fr}.wl-canvas{height:360px}.wl-explanation{gap:20px}}@media(max-width:620px){.wl-header{align-items:center;gap:10px;flex-wrap:wrap}.wl-brand{font-size:16px}.wl-header>div{gap:6px}.wl-header button,.wl-header a:not(.wl-brand){font-size:10px;padding:7px 9px}.wl-header button svg{width:12px}.wl-lesson-title h1{font-size:32px}.wl-lesson-title p{font-size:12px}.wl-workbench,.wl-explanation{grid-template-columns:1fr}.wl-canvas{height:330px}.wl-controls{padding:23px}.wl-visual-top{font-size:8px;padding:15px}.wl-visual-bottom{padding:10px 15px}.wl-explanation{padding-top:25px}.wl-footer{flex-direction:column;gap:8px}.wx-education-grid{padding:45px 22px}.wx-education-grid h2{font-size:30px}.wx-education-cards{gap:10px}.wx-education-cards a{padding:17px}.wx-education-cards h3{font-size:14px}.wl-scene-label{font-size:9px}.wl-slider input{height:10px}.wl-sidebar nav :is(button,a){min-height:60px}}@media(prefers-reduced-motion:reduce){.wl-app *,.wx-education-cards a{scroll-behavior:auto!important;transition:none!important;animation:none!important}}.wl-sidebar nav a{display:flex;align-items:center;border-radius:12px}.wl-sidebar nav a:hover{background:#ffffff0a;text-decoration:none}.wl-footer nav{display:flex;flex-wrap:wrap;gap:16px}.wl-sidebar{min-width:0}.wl-progress-feedback{position:fixed;bottom:24px;left:50%;transform:translate(-50%);z-index:20050;display:flex;align-items:center;gap:14px;width:max-content;max-width:calc(100vw - 32px);padding:18px 20px;border:1px solid #b2e7d480;border-radius:18px;background:#183c41f5;box-shadow:0 12px 40px #0006,inset 0 1px #fff2;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:#e9fff6;animation:wl-feedback-arrive .25s ease-out}.wl-progress-feedback>svg{flex-shrink:0;color:#b2e7d4}.wl-progress-feedback strong{display:block;font-size:13px;line-height:1.5}.wl-progress-feedback p{margin:4px 0 0;font-size:12px;line-height:1.6;color:#bfddd6}.wl-progress-feedback button{min-width:40px;min-height:40px;padding:8px;flex-shrink:0}.wl-progress progress{transition:all .35s ease}.wl-progress progress::-webkit-progress-value{transition:width .4s ease}.wl-progress progress::-moz-progress-bar{transition:width .4s ease}@keyframes wl-feedback-arrive{0%{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%)}}@media(prefers-reduced-motion:reduce){.wl-progress-feedback{animation:none}.wl-progress progress,.wl-progress progress::-webkit-progress-value,.wl-progress progress::-moz-progress-bar{transition:none}}@media(max-width:620px){.wl-progress-feedback{bottom:16px;padding:14px;gap:10px}.wl-progress-feedback strong{font-size:12px}.wl-progress-feedback p{font-size:11px}}.wl-app button{transition:background-color .16s,border-color .16s,box-shadow .16s,transform .12s;line-height:1.4;gap:10px}.wl-app button svg{flex-shrink:0}.wl-app button:active:not(:disabled){transform:translateY(1px) scale(.97);box-shadow:inset 0 2px 6px #0004;border-color:#b2e7d4}.wl-app .wl-primary{padding:12px 18px;min-height:44px}.wl-controls>button,.wl-complete>button{margin-top:12px;margin-bottom:14px}.wl-controls .wl-result{margin-top:22px;margin-bottom:16px}.wl-controls .wl-playback-status{margin:0 0 14px;color:#b2e7d4;font-size:11px;min-height:20px}.wl-controls>button+p,.wl-complete>button+small{margin-top:4px}.wl-controls .wl-note{margin-top:14px}.wl-sidebar .wl-reset{margin-bottom:10px}.wl-storage{line-height:1.7}@media(prefers-reduced-motion:reduce){.wl-app button{transition:none}.wl-app button:active:not(:disabled){transform:none;background-color:#ffffff25}}