:root{--ink:#1d1d1f;--muted:#737379;--blue:#0066cc;--bg:#f5f5f7}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:85px}body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,"Microsoft YaHei","PingFang SC",sans-serif;-webkit-font-smoothing:antialiased}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #1689ee;outline-offset:5px}[hidden]{display:none!important}.nav{height:76px;max-width:1440px;margin:auto;padding:0 6%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dedee2}.brand{font-weight:650;font-size:21px;letter-spacing:-.7px}.brand span{font-weight:400;font-size:12px;margin-left:20px;color:var(--muted);letter-spacing:1px}.nav nav{display:flex;gap:32px;font-size:12px}.nav nav span{color:var(--blue)}main{max-width:1440px;margin:auto}.hero{min-height:680px;display:grid;grid-template-columns:42% 58%;align-items:center;padding:50px 6% 35px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:600;color:var(--muted);margin:0 0 27px}.hero h1{font-size:clamp(46px,5.1vw,72px);line-height:1.2;letter-spacing:-3px;margin:0 0 26px;font-weight:650}.hero h1 span,.closing h2 span{color:#86868b}.intro{font-size:17px;line-height:1.9;color:#6e6e73;margin-bottom:32px}.primary{border:0;border-radius:28px;padding:15px 24px;background:var(--blue);color:white;display:inline-flex;align-items:center;gap:26px;font-size:14px;min-height:48px}.primary:hover{background:#0074e5}.hero-note{display:block;font-size:11px;color:var(--muted);margin-top:18px}.product-stage{height:550px;position:relative;background:radial-gradient(ellipse at 50% 60%,#fff 0,transparent 68%)}model-viewer{height:100%;width:100%;--progress-bar-color:#0066cc;--progress-bar-height:2px}.stage-label{position:absolute;top:15px;left:24px;font-size:10px;letter-spacing:1.5px;color:#85858b;z-index:1}.stage-bottom{position:absolute;bottom:5px;left:24px;right:10px;display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#85858b}.text-button{border:0;background:transparent;color:var(--blue);font-size:12px;padding:12px 0;min-height:44px}.hotspot{background:white;border:1px solid #ccc;border-radius:50%;width:30px;height:30px;color:#555;font-size:20px;box-shadow:0 3px 14px #0001;opacity:var(--hotspot-opacity,1)}.hotspot span{position:absolute;left:38px;top:2px;white-space:nowrap;font-size:11px;background:#ffffffdf;padding:6px 10px;border-radius:14px}.model-status{position:absolute;top:45%;left:0;right:0;text-align:center;font-size:13px;color:var(--muted);pointer-events:none}.overview{margin:0 6% 90px;border-top:1px solid #dcdce0;border-bottom:1px solid #dcdce0;display:grid;grid-template-columns:repeat(3,1fr)}.overview a{display:flex;align-items:center;gap:18px;padding:28px 24px;border-right:1px solid #dcdce0}.overview a:first-child{padding-left:0}.overview a:last-child{border:0}.overview a>span{font-size:11px;color:#929299;align-self:flex-start;padding-top:5px}.overview h2{font-size:16px;margin:0 0 8px;font-weight:600}.overview p{font-size:12px;color:var(--muted);margin:0;line-height:1.7}.overview b{margin-left:auto;font-weight:400;color:#85858b}.learn{padding:0 6%;scroll-margin-top:20px}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:35px}.section-heading .eyebrow{margin-bottom:16px}.section-heading h2{font-size:40px;letter-spacing:-1.5px;font-weight:600;margin:0}.section-heading>p{font-size:14px;line-height:1.8;color:var(--muted);margin:0}.mobile-break{display:none}.mode-tabs{display:inline-flex;background:#e7e7eb;padding:4px;border-radius:25px;margin-bottom:24px;gap:3px}.mode-tabs button{border:0;background:transparent;color:#707075;border-radius:22px;font-size:12px;padding:11px 25px;min-height:42px}.mode-tabs button.selected{background:#fff;color:var(--ink);box-shadow:0 2px 6px #0001}.workspace{display:grid;grid-template-columns:1fr 1fr;background:#fff;border-radius:28px;overflow:hidden;min-height:615px}.simulator{background:#ebebee;padding:32px 45px 25px;display:flex;flex-direction:column;align-items:center}.sim-top{display:flex;justify-content:space-between;width:100%;align-items:center;margin-bottom:25px}.sim-top>span:first-child{font-size:12px;font-weight:650;letter-spacing:2px}.sim-badge{font-size:10px;color:#737379;border:1px solid #c8c8ce;padding:5px 10px;border-radius:20px}.display-bezel{padding:12px;background:linear-gradient(135deg,#55585d,#202226);border:1px solid #a7a9ae;border-radius:17px;box-shadow:0 12px 24px #0002,inset 0 1px 1px #fff8}.screen{position:relative;width:270px;height:270px;overflow:hidden;background:#07090c;border-radius:5px;color:#f4f7ff;font-family:Arial,"Microsoft YaHei","PingFang SC",sans-serif;padding:12px;line-height:1.35}.home-ui{position:absolute;inset:12px;display:flex;flex-direction:column}.flow-zone{flex:1}.status-line{height:23px;display:flex;gap:6px;justify-content:flex-end;font-size:11px}.sig-dot{width:5px;height:5px;background:#e8efff;border-radius:50%;margin-top:5px}.sig{display:flex;align-items:flex-end;height:13px;gap:2px}.sig i{width:3px;background:#fff;height:5px}.sig i:nth-child(2){height:7px}.sig i:nth-child(3){height:10px}.sig i:nth-child(4){height:13px}.flow-head,.total-head{display:flex;justify-content:space-between;align-items:center}.flow-title{font-size:31px}.flow-unit{font-size:14px}.flow-reading{font-size:48px;text-align:right;padding:15px 0}.home-divider{height:2px;background:#d5dbe9;margin:6px 0}.total-zone{height:75px}.total-head{font-size:21px}.total-unit{font-size:13px}.total-reading{font-size:32px;text-align:right}.screen-title{font-size:14px;text-align:center;margin:3px 0 13px;white-space:nowrap}.menu-row{display:grid;grid-template-columns:19px 1fr auto;gap:3px;font-size:12px;min-height:21px;padding:2px;white-space:nowrap}.menu-row.selected{background:#d3def8;color:#10151d}.menu-row.editing{outline:1px dashed #5c88d2;outline-offset:-2px}.overlay-tag{position:absolute;bottom:6px;right:8px;background:#d5def5;color:#111;font-size:10px;padding:1px 4px}.footer-note{position:absolute;bottom:5px;left:6px;right:6px;font-size:9px;text-align:center;background:#07090c}.keypad{display:grid;grid-template-columns:64px 56px 64px;grid-template-rows:43px 49px 43px;gap:6px;margin-top:24px}.keypad button{border:1px solid #d3d3d8;background:#f9f9fb;border-radius:12px;box-shadow:0 2px 2px #00000008;color:#46464c;font-size:20px;min-height:43px;transition:background .15s,transform .15s}.keypad button:active{transform:scale(.95);background:#ddd}.keypad .aux{font-size:10px;letter-spacing:1px;background:transparent;box-shadow:none;border-color:transparent}.keypad .ok{background:#fff;font-size:12px;font-weight:600}.keypad .down{grid-column:2}.keypad button.hint{box-shadow:0 0 0 2px #0071e3;background:#e2efff;color:#0066cc}.keyboard-note{font-size:10px;color:#83838a;margin:18px 0 0}.lesson-panel{padding:35px 40px;display:flex;flex-direction:column;min-width:0}.lesson-top{display:flex;justify-content:space-between;align-items:center;color:#8a8a91;font-size:10px;min-height:44px;letter-spacing:1px}.lesson-panel h3{font-size:29px;font-weight:600;letter-spacing:-.8px;margin:19px 0 12px}.lesson-intro{font-size:13px;line-height:1.8;color:var(--muted);margin:0}.progress{display:flex;gap:5px;margin:27px 0 30px}.progress span{height:3px;background:#e8e8ed;flex:1;border-radius:3px}.progress span.done{background:#0071e3}.step-number{font-size:10px;color:var(--blue);letter-spacing:1px}.lesson-panel h4{font-size:20px;margin:12px 0;font-weight:600}.step-body{font-size:13px;color:var(--muted);line-height:1.9;min-height:49px}.instruction{border-radius:12px;background:#f5f7fa;padding:15px;font-size:12px;color:#525967;line-height:1.7;margin-top:18px}.instruction kbd{font:11px inherit;background:#fff;padding:3px 6px;border:1px solid #dedee3;border-radius:4px;color:var(--blue)}.context{margin-top:auto;padding-top:25px;border-top:1px solid #eee;margin-top:30px}.context>span{font-size:10px;color:#94949b;display:block;margin-bottom:8px}.context strong{font-size:13px;font-weight:550}.context p{font-size:12px;line-height:1.7;color:#86868b;margin:7px 0 0}.context .screen-message{color:#0066cc}.search-label{display:block;font-size:11px;margin:22px 0 8px;color:var(--muted)}input{width:100%;border:1px solid #dedee3;border-radius:10px;background:#fafafa;padding:12px;font-size:13px}.menu-results{max-height:235px;overflow:auto;margin-top:10px}.menu-result{display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;background:transparent;width:100%;border:0;border-bottom:1px solid #eee;padding:12px 4px;font-size:12px;min-height:45px}.menu-result span{color:#86868b;font-size:10px}.menu-result:hover{color:var(--blue)}.simulation-note{font-size:11px;line-height:1.9;color:#94949b;max-width:740px;margin:20px 0}.closing{text-align:center;padding:120px 20px 100px}.closing h2{font-size:44px;letter-spacing:-1.5px;line-height:1.35;font-weight:600;margin:0 0 24px}footer{max-width:1267px;margin:auto;border-top:1px solid #dedee2;padding:25px 0 35px;display:flex;justify-content:space-between;font-size:10px;color:#929299}#nextLesson{font-size:12px;padding:12px 20px;margin-top:15px}
@media(min-width:1500px){.hero{min-height:730px}}@media(max-width:900px){.hero{grid-template-columns:44% 56%;min-height:550px}.hero h1{font-size:48px}.product-stage{height:450px}.hero-note{font-size:10px}.overview a{padding:24px 12px;gap:12px}.overview p{font-size:11px}.simulator{padding:28px 20px}.lesson-panel{padding:28px 25px}.screen{width:240px;height:250px}.section-heading h2{font-size:34px}footer{margin:0 6%}}@media(max-width:650px){html{scroll-padding-top:20px}.nav{height:64px;padding:0 6%}.brand{font-size:18px}.brand span{font-size:10px;margin-left:10px;letter-spacing:0}.nav nav{gap:0}.nav nav a:first-child{display:none}.hero{display:flex;flex-direction:column;padding:48px 6% 24px;min-height:0;align-items:stretch}.hero-copy{text-align:center}.hero .eyebrow{font-size:9px;letter-spacing:1.8px;margin-bottom:21px}.hero h1{font-size:48px;letter-spacing:-2px;margin-bottom:20px}.intro{font-size:14px;line-height:1.8;margin-bottom:23px}.hero-note{margin-top:13px}.product-stage{height:350px;margin-top:25px}.stage-label{top:7px;left:0;font-size:9px}.stage-bottom{left:0;right:0;font-size:10px}.overview{margin:0 6% 60px;grid-template-columns:1fr}.overview a,.overview a:first-child{padding:18px 0;border-right:0;border-bottom:1px solid #dedee2;gap:20px}.overview a:last-child{border-bottom:0}.overview h2{font-size:14px;margin-bottom:4px}.overview p{font-size:11px}.section-heading{display:block;margin-bottom:23px}.section-heading h2{font-size:32px;line-height:1.3;letter-spacing:-1px}.section-heading>p{font-size:12px;margin-top:16px}.workspace{grid-template-columns:1fr;border-radius:22px}.simulator{padding:23px 20px}.screen{width:260px;height:260px}.keyboard-note{display:none}.lesson-panel{padding:22px 25px 27px}.lesson-panel h3{font-size:26px;margin-top:10px}.progress{margin:23px 0}.context{padding-top:18px;margin-top:25px}.keypad{margin-top:20px}.lesson-top{font-size:9px}.simulation-note{font-size:10px}.closing{padding:75px 20px 65px}.closing h2{font-size:34px}.closing .eyebrow{font-size:9px}footer{font-size:9px}.mode-tabs{width:100%}.mode-tabs button{flex:1}.learn{scroll-margin-top:0}.menu-results{max-height:260px}}@media(max-width:350px){.screen{width:230px;height:240px}.brand span{display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

.mobile-step{display:none}@media(max-width:650px){.mobile-step{display:block;font-size:11px;color:#0066cc;text-align:center;line-height:1.7;margin:18px 0 0}.keypad{margin-top:12px}}

@media(max-width:650px){.mobile-break{display:initial}}
/* Interactive physical device */
.product-stage{height:660px}.hero{min-height:760px}#product{position:absolute;inset:28px 0 67px;overflow:hidden}#product>canvas{display:block;width:100%;height:100%;touch-action:pan-y}#product.rotating>canvas{touch-action:none;cursor:grab}.stage-bottom{gap:12px;bottom:5px;flex-wrap:wrap}.stage-bottom>span{font-size:11px;text-align:center;flex:1;line-height:1.7}.stage-bottom button{flex-shrink:0}#physicalKeys{position:absolute;inset:0;pointer-events:none}.physical-key{position:absolute;transform:translate(-50%,-50%);width:32px;height:32px;min-height:0;border:1px solid transparent;border-radius:50%;background:transparent;padding:0;pointer-events:auto;touch-action:none}.physical-key:hover,.physical-key:focus-visible{background:#1689ee22;border-color:#1689eeaa}.physical-key.next-key{border-color:#4c9de37a;box-shadow:0 0 0 3px #1689ee0c}.physical-key.is-pressed{background:#1689ee33;border-color:#1689ee}.physical-key[hidden]{display:none}.physical-key:disabled{pointer-events:none}#rotateView[aria-pressed=true]{font-weight:650}#product.rotating .physical-key{display:none}@media(max-width:650px){.hero{min-height:0}.product-stage{height:630px;margin-top:30px}#product{inset:25px 0 70px}.stage-bottom{gap:5px}.stage-bottom>span{flex-basis:100%;order:-1}.physical-key{width:34px;height:34px}.stage-bottom button{flex:1}.hero-copy .intro{margin-bottom:20px}}
/* Studio rendering and seamless controls */
.product-stage{height:800px}.hero{grid-template-columns:38% 62%;min-height:900px}#product{inset:20px 0 100px;touch-action:none}#product>canvas{touch-action:none}.physical-key,.physical-key:hover,.physical-key:focus-visible,.physical-key.next-key,.physical-key.is-pressed{border:0;background:transparent;box-shadow:none;outline:0}.stage-bottom{justify-content:center;bottom:0}.stage-bottom .view-presets{display:flex;justify-content:center;gap:28px;width:100%}.stage-bottom>span{flex-basis:100%}.stage-bottom>small{font-size:10px;color:#888;text-align:center;width:100%}.stage-bottom button{flex:initial}.product-stage{background:radial-gradient(ellipse at 50% 45%,#fff 0,#f5f5f700 68%)}@media(max-width:650px){.hero{min-height:0}.product-stage{height:740px}#product{inset:25px -10px 106px}.stage-bottom>span{order:0}.stage-bottom .view-presets{gap:24px}}