:root{--ink:#153c38;--muted:#6b7d77;--green:#12816a;--lime:#def3e4;--line:#dce6df;--paper:#f4f7f4}body{font-family:Arial,Helvetica,sans-serif}header{height:93px;background:#0a2b30;color:#eaf4ed;border:0;padding:0 4.3vw}.brand{width:205px;display:block;line-height:1}.brand img{display:block;width:100%;height:auto}.header-title{font-size:12px;letter-spacing:.3px;margin-left:25px;color:#deede6}.header-title span{color:#63827b}.family{border-color:#355955;color:#def3e7;font-size:10px}.intro{margin-bottom:26px}.intro h1{font-weight:500;letter-spacing:-1.4px;font-size:35px}.intro p{color:#6c7f75}.guide-link{display:flex;align-items:center;gap:13px;border:1px solid var(--line);background:#fff;padding:13px 17px;border-radius:8px;text-decoration:none;font-size:11px}.guide-link span{margin-left:0}.workspace{grid-template-columns:185px minmax(0,1fr);gap:25px}.nav-button{padding:15px 12px;min-height:73px;border-radius:9px;gap:13px}.nav-button.active{background:#e0eee5;color:#145643;box-shadow:inset 3px 0 #248865}.nav-button strong{font-size:12px}.nav-number{opacity:1;padding-top:1px}.nav-number svg{width:20px;height:20px}.nav-button small{font-size:10px}.nav-foot{font-size:10px;color:#7b8b82}.lesson{border-radius:15px;box-shadow:0 16px 55px #122a2007}.lesson-top{padding:22px 28px;position:relative}.lesson-top h2{font-size:23px}.lesson-actions{display:flex;align-items:center;gap:15px}.live-badge{font-size:9px}.device-link{font-size:10px;border:1px solid var(--line);border-radius:20px;padding:9px 13px;background:white;color:var(--ink)}.lesson-progress-track{position:absolute;bottom:0;left:0;right:0;height:2px;background:#eef3ec}#lesson-progress{height:100%;width:20%;background:#85baa0;transition:width .4s}.experience{grid-template-columns:minmax(0,1.7fr) minmax(250px,1fr);min-height:525px}.stage{min-height:525px;padding:27px;background:radial-gradient(ellipse at 50% 44%,#fff 0%,#f6f8f2 80%)}.instruction{padding:34px 27px 25px;background:#fff}.instruction h3{font-weight:500;font-size:25px;line-height:1.24}.instruction p{font-size:13px;line-height:1.8}.note{background:#f0f6ee;border-left:2px solid #9aba90;border-radius:0 8px 8px 0;color:#5b7459;font-size:11px}.primary{background:#1b6655;font-size:11px;min-height:43px}.round{color:#477363}.step-dot{width:27px;height:27px;border-radius:50%;background:#f0f4ed}.step-dot.active{width:27px;background:#286e55}.step-dot:after{content:attr(data-number);font-size:10px;color:#899786}.step-dot.active:after{color:white}.lesson-bottom{padding:15px 25px}.sources{font-size:10px}.spin-experience{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;min-width:0}.spin-heading{display:flex;align-items:center;justify-content:space-between;align-self:stretch;font-size:9px;color:#789188;letter-spacing:1.6px;position:absolute;top:19px;left:24px;right:24px}.spin-heading b{font-size:11px;letter-spacing:.5px;font-weight:400}.spin-turntable{position:relative;width:min(100%,440px);aspect-ratio:1;touch-action:pan-y;cursor:grab;margin-top:0;outline-offset:-8px}.spin-turntable:active{cursor:grabbing}.spin-object{width:100%;height:100%;position:relative;transition:transform .6s cubic-bezier(.32,0,.15,1),opacity .55s;transform-origin:43% 63%}.spin-object>img:first-child{width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;position:relative;z-index:1}.ground-ring{position:absolute;bottom:9%;left:16%;width:70%;height:15%;border:1px solid #d3dfd060;border-radius:50%;box-shadow:0 11px 24px #2549370c;transform:rotate(-2deg)}.device-screen-preview{position:absolute;left:20.7%;top:48.4%;width:44%;height:28%;object-fit:fill;border-radius:3px;z-index:2;pointer-events:none;opacity:0;transition:opacity .18s}.spin-object.zoom-to-screen{transform:scale(3.8);opacity:.2}.spin-object.zoom-to-screen #device-pins{opacity:0}.device-pin{position:absolute;border:0;padding:0;background:transparent;display:flex;align-items:center;z-index:4;gap:7px;transform:translate(-50%,-50%);color:var(--ink);cursor:pointer}.device-pin i{font-style:normal;background:#fff;border:1px solid #2d7b56;border-radius:50%;height:26px;width:26px;display:grid;place-items:center;font-size:18px;box-shadow:0 0 0 6px #53aa7040;animation:pinPulse 3s infinite}.device-pin span{font-size:10px;white-space:nowrap;background:#fff;padding:7px 9px;border-radius:5px;box-shadow:0 5px 20px #163e2516}.spin-bottom{width:100%;max-width:410px;margin-top:-14px;position:relative;z-index:5}.spin-angle{display:flex;align-items:center;gap:10px;font-size:8px;color:#8b9b90}.spin-angle span:first-child{min-width:27px}.spin-angle input{width:100%;height:2px;accent-color:#216954;cursor:ew-resize}.spin-controls{display:flex;gap:8px;justify-content:center;margin-top:14px}.spin-controls button{height:31px;padding:5px 10px;background:#fff;border:1px solid #dfe8dd;color:#446c5b;border-radius:7px;font-size:10px;display:flex;align-items:center;gap:5px}.spin-controls svg{width:15px;height:15px}.part-jumps{display:flex;gap:6px;justify-content:center;margin-top:16px}.part-jumps button{display:flex;align-items:center;gap:5px;border:0;background:#eaf1e6;color:#4d6b54;border-radius:30px;padding:8px 10px;font-size:10px}.part-jumps button:hover{background:#d3e5ce}.part-jumps svg{width:13px;height:13px}.stage:has(.spin-experience){padding:26px 24px 22px}.studio-view,.lock-scene{position:absolute;inset:0;background:#f0f1ef;overflow:hidden}.studio-photo,.lock-scene>img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}.studio-photo{animation:studioReveal .75s cubic-bezier(.2,.7,.3,1) both}.studio-wash{position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#f5f7f2e6 0%,transparent 25%,transparent 80%,#f9faf78a 100%)}.studio-kicker{position:absolute;left:23px;top:23px;font-size:9px;letter-spacing:1.4px;color:#4c665e;background:#ffffffc9;backdrop-filter:blur(12px);padding:9px 12px;border-radius:5px;max-width:calc(100% - 45px)}.studio-caption{position:absolute;left:23px;bottom:40px;right:23px;font-size:11px;color:#204437;font-weight:500;line-height:1.6;background:#fffffff0;padding:11px 13px;border-radius:8px;box-shadow:0 8px 25px #26483109}.studio-credit{position:absolute;left:24px;bottom:18px;font-size:8px;color:#77897c}.lock-scene>img{position:absolute;inset:0;object-position:45% center}.lock-after{animation:lockCross 7s ease-in-out infinite}.lock-graphic{position:absolute;right:18px;top:70px;width:112px;background:#fffffff2;border:1px solid #d5e5d5;border-radius:14px;box-shadow:0 10px 35px #1d473521;text-align:center;padding:10px 12px 12px}.lock-graphic svg{width:72px;height:72px;display:block;margin:auto}.lock-graphic strong{font-size:22px;font-weight:500}.lock-graphic span{display:block;font-size:9px;margin-top:4px;color:#60796b}.dial-hand{transform-origin:50px 50px;animation:dialQuarter 7s ease-in-out infinite}.quarter-arc{stroke-dasharray:58;stroke-dashoffset:58;animation:arcQuarter 7s ease-in-out infinite}.stage:has(.lock-scene) .motion-control{top:auto;bottom:102px;right:18px}.paused .lock-after,.paused .dial-hand,.paused .quarter-arc{animation-play-state:paused}.screen-polished{max-width:680px;animation:screenReveal .28s ease both}.screen-breadcrumb{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:10px}.screen-breadcrumb>span{font-size:8px;letter-spacing:1.2px;color:#6c887d;display:flex;align-items:center;gap:7px}.screen-breadcrumb i{height:5px;width:5px;background:#76a966;border-radius:50%}.screen-breadcrumb button{border:0;background:transparent;font-size:10px;color:#5d796a;display:flex;align-items:center;gap:5px;padding:5px}.screen-breadcrumb svg{width:15px;height:15px}.screen-hardware{display:grid;grid-template-columns:minmax(0,1fr) 53px;gap:5px;padding:12px 7px 12px 12px;border-radius:20px;background:linear-gradient(130deg,#31423c,#0d1715 48%,#25322b);border:3px solid #65a589;box-shadow:0 3px 0 #18382b,0 24px 37px #24463126;outline:1px solid #d6e5d5}.screen-hardware .screen-frame{border:0;outline:0;border-radius:9px;box-shadow:none;width:100%;align-self:center;aspect-ratio:1.6}.device-rail{display:flex;flex-direction:column;align-items:center;justify-content:space-around;padding:2px 0 0;gap:6px;border-left:1px solid #49564f}.device-rail button{border:0;background:transparent;color:#cddcd2;display:grid;place-items:center;width:34px;min-height:29px;cursor:pointer}.device-rail svg{width:20px;height:20px}.device-rail #virtual-ramp{font-size:25px;line-height:1}.device-rail #virtual-knob{margin-top:auto;width:41px;height:41px;min-height:41px;border:1px solid #7e8d7d;border-radius:50%;box-shadow:0 3px 4px #000;background:conic-gradient(from 35deg,#19231f,#737e71,#1f2821,#0a110e,#8d998a,#19231f)}#virtual-knob span{display:block;width:29px;height:29px;border-radius:50%;background:radial-gradient(at 35% 30%,#444d42,#111b14 70%);border:1px solid #141f17}.device-rail small{font-size:6px;line-height:1.05;color:#93ae95;letter-spacing:.5px;text-align:center;margin-top:4px}.screen-context{margin-top:24px;text-align:center}.screen-context b{font-size:12px;display:block;font-weight:500;color:#335f4d}.screen-context span{font-size:9px;display:block;color:#7c8e80;margin-top:6px}.screen-tools{margin-top:16px;gap:5px}.screen-tools button{font-size:9px;border-radius:20px;padding:8px 10px;background:#fff9}.screen-label{font-size:8px;line-height:1.6;margin-top:13px;color:#8a988b}.hotspot{border-radius:4px}.hotspot.suggested-target{border:1px solid #a0e579aa;animation:targetPulse 2.5s ease-in-out infinite}.ui-reading{background:#0b0b0b;left:4%;width:92%;top:20%;height:39%;padding:3px 5% 0}.ui-reading strong{font-family:Arial,sans-serif;font-weight:400;font-size:24px;color:#87e286;line-height:1.2}.ui-reading input{appearance:none;-webkit-appearance:none;height:4px;border-radius:0;background:linear-gradient(to right,#83dc7b 0 var(--fill),#343834 var(--fill) 100%);width:100%;margin:16px auto 0;cursor:pointer}.ui-reading input::-webkit-slider-thumb{appearance:none;width:11px;height:11px;border-radius:50%;background:#f2f7eb;box-shadow:0 0 8px #86d97b88}.ui-reading input::-moz-range-thumb{width:11px;height:11px;border:0;border-radius:50%;background:#fff}.ui-reading small{font-size:7px;margin-top:9px}.selected-value{font-family:Arial,sans-serif;font-size:15px;color:#8be18a;background:#111810}.value-change{animation:valuePop .22s ease}.from-device{animation:zoomComplete .5s cubic-bezier(.2,.7,.2,1) both}.lesson.theater .experience{grid-template-columns:1fr}.lesson.theater .stage{min-height:560px}.lesson.theater .screen-zone{max-width:780px}.lesson.theater .instruction{display:grid;grid-template-columns:1fr auto;border-left:0;border-top:1px solid var(--line);column-gap:30px;padding:24px 30px}.lesson.theater .instruction>*{grid-column:1}.lesson.theater .step-controls{grid-column:2;grid-row:1/6}.lesson.theater .device-rail{min-height:280px}.lesson.theater .ui-reading strong{font-size:35px}.lesson.theater .selected-value{font-size:24px}.lesson.theater .ui-reading small{font-size:11px}.lesson.theater .ui-reading input{margin-top:24px}.lesson.theater .screen-hardware{grid-template-columns:minmax(0,1fr) 72px}.lesson.theater .device-rail #virtual-knob{width:54px;height:54px}.lesson.theater #virtual-knob span{width:41px;height:41px}.product{filter:drop-shadow(0 16px 14px #29472610)}.assembly{height:445px;width:355px}.assembly .tank{animation-duration:6s}.assembly.lid .tank{animation-duration:6s}.stage-tag{font-size:8px;letter-spacing:1.1px}.safety-symbol{font-size:9px;background:#ffffffed}.stage-caption{font-size:10px}.closing{padding:24px 0}.closing span{font-size:12px}.closing p{font-size:10px;max-width:560px}.motion-control{font-size:9px}.stage .photo{display:none}@keyframes studioReveal{from{opacity:0;transform:scale(1.045)}to{opacity:1;transform:scale(1)}}@keyframes screenReveal{from{opacity:.5;transform:translateX(8px)}to{opacity:1;transform:translateX(0)}}@keyframes zoomComplete{from{opacity:.4;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes valuePop{50%{transform:scale(1.12);text-shadow:0 0 10px #7bce7766}}@keyframes lockCross{0%,25%,100%{opacity:0}55%,85%{opacity:1}}@keyframes dialQuarter{0%,25%,100%{transform:rotate(0)}55%,85%{transform:rotate(90deg)}}@keyframes arcQuarter{0%,25%,100%{stroke-dashoffset:58}55%,85%{stroke-dashoffset:0}}@keyframes pinPulse{50%{box-shadow:0 0 0 9px #53aa7010}}@keyframes targetPulse{50%{border-color:#cafa93;box-shadow:0 0 0 2px #cafa9320}}
@media(max-width:1100px){.workspace{grid-template-columns:160px minmax(0,1fr);gap:16px}.experience{grid-template-columns:1fr}.stage{min-height:480px}.instruction{display:grid;grid-template-columns:1fr auto;column-gap:25px;padding:24px}.instruction h3{font-size:23px}.instruction>*{grid-column:1}.instruction .step-controls{grid-column:2;grid-row:1/6}.spin-turntable{width:380px}.stage:has(.spin-experience){min-height:520px}.screen-zone{max-width:590px}.selected-value{font-size:19px}.studio-view .studio-photo{object-fit:cover;object-position:center 48%}.screen-hardware{grid-template-columns:minmax(0,1fr) 63px}.screen-polished{max-width:640px}.live-badge{display:none}.assembly{height:400px;width:320px}.ui-reading strong{font-size:30px}}
@media(max-width:650px){header{height:82px;padding:0 20px}.brand{width:175px}.family{font-size:8px;padding:8px 10px}.header-title{display:none}main{padding:27px 16px 0}.intro h1{font-size:30px;letter-spacing:-1.2px;max-width:330px}.intro p{font-size:12px}.guide-link{display:inline-flex;padding:10px 13px;margin-top:17px;font-size:10px}.workspace{display:block}.nav-button{min-width:155px;min-height:62px;padding:10px;border:1px solid #dfe7dc}.nav-button.active{box-shadow:inset 0 -2px #248865}.nav-button strong{font-size:11px}.nav-number svg{width:17px;height:17px}.nav-button small{font-size:9px}.lesson-top{padding:20px 18px;gap:10px}.lesson-top h2{font-size:20px;line-height:1.2;max-width:225px}.lesson-top .eyebrow{font-size:8px;letter-spacing:1.2px}.device-link{font-size:8px;padding:8px}.experience{display:block}.stage{min-height:370px;padding:18px 12px}.stage:has(.spin-experience){min-height:415px;padding:16px 10px 18px}.spin-heading{top:15px;left:18px;right:18px;font-size:7px}.spin-turntable{width:100%;max-width:360px;margin-top:8px}.spin-bottom{margin-top:-26px;max-width:300px}.spin-controls{margin-top:11px}.spin-angle{margin:0 10px}.part-jumps{gap:5px;margin-top:13px}.part-jumps button{font-size:9px;padding:7px 9px}.part-jumps svg{width:12px;height:12px}.spin-controls button{font-size:9px;height:29px}.device-pin span{font-size:8px;padding:5px}.device-pin i{width:22px;height:22px;font-size:15px}.screen-pin{left:46%!important}.instruction,.lesson.theater .instruction{display:flex;padding:24px 21px}.instruction h3{font-size:24px}.instruction p{font-size:13px;line-height:1.8}.note{font-size:11px}.step-controls{padding-top:22px}.step-controls .primary{flex:1}.lesson-bottom{padding:16px 20px}.studio-caption{left:17px;right:17px;bottom:35px;font-size:10px;padding:9px}.studio-credit{left:19px;bottom:17px;font-size:7px}.studio-kicker{top:17px;left:17px;font-size:7px;padding:8px}.lock-graphic{width:91px;right:14px;top:64px;padding:7px}.lock-graphic svg{width:56px;height:56px}.lock-graphic strong{font-size:18px}.lock-graphic span{font-size:8px}.stage:has(.lock-scene) .motion-control{bottom:90px;font-size:8px}.screen-hardware,.lesson.theater .screen-hardware{grid-template-columns:minmax(0,1fr) 34px;border-radius:14px;padding:7px 3px 7px 7px;border-width:2px;gap:3px}.screen-hardware .screen-frame{border-radius:5px}.device-rail button{width:26px;min-height:22px}.device-rail svg{width:16px;height:16px}.device-rail #virtual-ramp{font-size:19px}.device-rail #virtual-knob,.lesson.theater .device-rail #virtual-knob{width:28px;height:28px;min-height:28px}.device-rail #virtual-knob span,.lesson.theater #virtual-knob span{width:20px;height:20px}.device-rail small{font-size:4px;margin-top:0}.device-rail{gap:4px}.screen-breadcrumb{margin-bottom:14px}.screen-breadcrumb>span{font-size:7px}.screen-breadcrumb button{font-size:9px}.screen-context{margin-top:19px}.screen-context b{font-size:11px}.screen-context span{font-size:8px}.screen-tools button{font-size:8px;padding:7px 8px}.screen-label{font-size:7px}.screen-tools{margin-top:13px}.ui-reading strong,.lesson.theater .ui-reading strong{font-size:18px}.ui-reading input,.lesson.theater .ui-reading input{margin-top:8px;height:3px}.ui-reading small,.lesson.theater .ui-reading small{font-size:6px;margin-top:7px}.selected-value,.lesson.theater .selected-value{font-size:12px}.stage:has(.screen-zone),.lesson.theater .stage:has(.screen-zone){min-height:345px;padding:24px 13px}.lesson.theater .device-rail{min-height:0}.assembly{width:285px;height:356px}.stage:has(.assembly){min-height:420px}.stage:has(.assembly) .stage-tag{max-width:50%;font-size:7px}.safety-symbol{font-size:8px;right:14px;bottom:19px}.motion-control{font-size:8px;padding:7px 9px}.lesson-top .lesson-actions{gap:0}.closing{padding:24px 4px}.closing p{font-size:10px}footer{font-size:9px}.screen-polished{max-width:100%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.lock-after{opacity:1}.dial-hand{transform:rotate(90deg)}.quarter-arc{stroke-dashoffset:0}}

.closed-confirmation{position:absolute;bottom:65px;left:0;right:0;display:flex;justify-content:center;gap:12px}.closed-confirmation span{border-radius:20px;background:#e1efdd;color:#39704d;padding:9px 13px;font-size:10px;animation:appear .5s both}.closed-confirmation span+span{animation-delay:.3s}

.screen-frame{container-type:inline-size}.screen-frame .selected-value{font-size:4.4cqw!important;top:72%;height:10%;line-height:1.4;border-radius:3px}.ui-reading .ui-ticks{display:flex;justify-content:space-between;font-size:1.7cqw!important;line-height:1.2;color:#c9d0c6;margin-top:10px}.ui-ticks span{min-width:0;text-align:center}@media(max-width:650px){.ui-reading .ui-ticks{margin-top:7px}}