* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; }
body { color: #233a53; background: #142742; font-family: "Microsoft YaHei", "PingFang SC", SimHei, sans-serif; }
button { font-family: inherit; }
button:focus { outline: 4px solid rgba(250,188,73,.45); outline-offset: 2px; }
.hidden { display: none !important; }
.clearfix:after { content: ""; display: table; clear: both; }
#viewport { position: relative; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(circle at 50% 30%, #3f5e82 0, #142742 75%); }
#courseware { position: absolute; width: 1600px; height: 900px; overflow: visible; transform-origin: 0 0; border-radius: 28px; background: #edf7f3; box-shadow: 0 28px 80px rgba(0,0,0,.33); }
#courseware:before { content: ""; position: absolute; right: -90px; top: -130px; width: 410px; height: 410px; border-radius: 50%; background: rgba(61,177,157,.10); pointer-events: none; }
.topbar { position: absolute; left: 48px; right: 48px; top: 25px; height: 72px; z-index: 5; }
.brand { float: left; margin-top: 9px; padding: 11px 20px; border-radius: 14px 14px 14px 4px; color: #fff; background: #208d83; box-shadow: 0 8px 18px rgba(32,141,131,.22); font-size: 19px; font-weight: 800; letter-spacing: 2px; }
.title-block { float: left; margin-left: 22px; }
.title-block h1 { margin: 0; color: #173b5c; font-size: 33px; line-height: 43px; letter-spacing: 2px; }
.title-block p { margin: 1px 0 0; color: #758496; font-size: 17px; }
.step-progress { float: right; width: 105px; height: 54px; margin-top: 7px; border: 2px solid #d1e6df; border-radius: 24px; background: rgba(255,255,255,.78); color: #217b73; text-align: center; line-height: 49px; }
.step-progress span { font-size: 27px; font-weight: 900; }.step-progress b { margin-left: 5px; font-size: 18px; }
.experiment-tabs { position: absolute; left: 395px; top: 104px; width: 810px; height: 70px; z-index: 7; text-align: center; }
.experiment-tab { position: relative; display: inline-block; width: 250px; height: 64px; margin: 0 7px; padding: 8px 12px 7px 64px; border: 3px solid #d7e6e1; border-radius: 20px; background: #fff; color: #4f6679; text-align: left; cursor: pointer; box-shadow: 0 8px 18px rgba(42,72,96,.08); }
.experiment-tab span { position: absolute; left: 14px; top: 12px; width: 38px; height: 38px; border-radius: 13px; background: #e2ece9; color: #6d7f8d; text-align: center; line-height: 38px; font-size: 20px; font-weight: 900; }
.experiment-tab b { display: block; font-size: 21px; }.experiment-tab small { display: block; margin-top: 2px; font-size: 14px; opacity: .75; }
.experiment-tab.active-tab { border-color: #208e84; color: #fff; background: #208e84; box-shadow: 0 9px 20px rgba(32,142,132,.25); }.experiment-tab.active-tab span { color: #604611; background: #ffc45b; }
.lab-main { position: absolute; left: 42px; right: 42px; top: 180px; height: 690px; z-index: 4; }
.operation-card { float: left; width: 1165px; height: 680px; padding: 13px 20px 18px; border: 2px solid #d7e8e2; border-radius: 28px; background: #fff; box-shadow: 0 16px 36px rgba(42,75,99,.09); }
.operation-head { height: 55px; padding: 1px 10px 0; }.operation-head > div { float: left; }.operation-head small { display: inline-block; margin-right: 10px; padding: 5px 10px; border-radius: 12px; color: #1c7c74; background: #dff3ed; font-size: 14px; font-weight: 800; }.operation-head h2 { display: inline-block; margin: 0; color: #24435e; font-size: 25px; }
.operation-head p { float: right; width: 610px; margin: 4px 0 0; color: #637589; font-size: 17px; line-height: 27px; text-align: right; }
#labCanvas { display: block; width: 1120px; height: 600px; border-radius: 19px; background: #f9fcfb; cursor: crosshair; touch-action: none; }
.record-panel { float: right; width: 290px; height: 680px; padding: 22px 20px; border-radius: 28px; color: #fff; background: #193f61; box-shadow: 0 17px 38px rgba(25,63,97,.23); }
.record-heading { height: 70px; }.record-heading > span { float: left; width: 58px; height: 58px; margin-right: 13px; border-radius: 18px; color: #fff; background: #f3b442; text-align: center; line-height: 58px; font-size: 30px; font-weight: 900; }.record-heading small { color: #b6d5d0; font-size: 14px; }.record-heading h2 { margin: 3px 0 0; font-size: 25px; }
.record-section { min-height: 330px; }.record-guide { min-height: 48px; margin: 8px 0 15px; padding: 10px 12px; border-radius: 13px; color: #d7e8e5; background: rgba(255,255,255,.09); font-size: 15px; line-height: 23px; }
.measure-row { height: 65px; margin-bottom: 8px; padding: 12px 5px; border-bottom: 1px dashed rgba(255,255,255,.21); font-size: 19px; }.measure-row span, .measure-row em { display: inline-block; width: 38px; color: #abd4ce; font-style: normal; font-weight: 800; }.measure-row em { margin-left: 19px; }.measure-row b { display: inline-block; width: 55px; color: #fff; font-size: 20px; }
.meter { height: 12px; margin: 26px 3px 10px; overflow: hidden; border-radius: 8px; background: rgba(255,255,255,.16); }.meter i { display: block; width: 0; height: 100%; background: #f4b846; transition: width .2s ease; }.status-line { margin: 10px 0; color: #ffe09b; font-size: 17px; font-weight: 800; text-align: center; }
.compare-card { height: 88px; margin-bottom: 13px; padding: 11px 13px; border-radius: 16px; background: rgba(255,255,255,.10); }.compare-card span { float: left; color: #c8e3de; font-size: 17px; font-weight: 800; }.compare-card b { float: right; color: #ffd276; font-size: 16px; }.compare-card small { display: block; clear: both; padding-top: 8px; color: #fff; font-size: 20px; font-weight: 800; }
.side-action { width: 100%; height: 50px; margin-top: 10px; border: 0; border-radius: 15px; color: #185f59; background: #dff4ee; font-size: 17px; font-weight: 800; cursor: pointer; }
.diag-btn { width: 100%; height: 68px; margin-bottom: 13px; padding: 0 15px; border: 2px solid rgba(255,255,255,.17); border-radius: 17px; color: #fff; background: rgba(255,255,255,.09); cursor: pointer; }.diag-btn:hover, .diag-btn.active-diag { border-color: #f4bd50; background: rgba(244,189,80,.16); }.diag-btn span { float: left; width: 52px; height: 40px; margin-top: 11px; border-radius: 12px; color: #173e60; background: #ffc65d; line-height: 40px; font-size: 21px; font-weight: 900; }.diag-btn b { float: right; line-height: 64px; color: #dcebe8; font-size: 16px; }
.rotate-tip { height: 84px; margin-top: 14px; padding: 10px; border-top: 1px solid rgba(255,255,255,.17); }.rotate-tip i { float: left; width: 55px; color: #ffcc65; font-size: 45px; font-style: normal; }.rotate-tip p { margin: 6px 0 0 60px; color: #cce2df; font-size: 14px; line-height: 23px; }
.shape-confirm { width: 100%; height: 46px; margin: 0 0 9px; border: 2px solid #ffd06b; border-radius: 14px; color: #5f430c; background: #ffd06b; font-size: 17px; font-weight: 900; cursor: pointer; }.shape-confirm.confirmed-shape { color: #e4f3f0; border-color: #5aa99f; background: #276b71; }
.conclusion { min-height: 105px; margin-top: 3px; padding: 13px 14px; border-radius: 16px; color: #65450d; background: #fff0c7; font-size: 16px; font-weight: 800; line-height: 25px; }
.panel-tools { margin-top: 15px; }.panel-tools button { float: left; width: 47%; height: 45px; border: 0; border-radius: 13px; color: #fff; background: #2e7090; font-size: 15px; font-weight: 800; cursor: pointer; }.panel-tools button + button { float: right; background: #278f84; }
.toast { display: none; position: absolute; left: 50%; top: 50%; width: 520px; min-height: 210px; margin: -105px 0 0 -260px; padding: 28px; z-index: 50; border: 4px solid #43aa9d; border-radius: 28px; background: #fff; box-shadow: 0 25px 80px rgba(12,35,58,.36); text-align: center; }.toast.show-toast { display: block; }.toast span { font-size: 45px; }.toast p { margin: 10px 0 18px; color: #304b64; font-size: 20px; line-height: 30px; }.toast button { width: 145px; height: 48px; border: 0; border-radius: 14px; color: #fff; background: #208e84; font-size: 17px; font-weight: 800; cursor: pointer; }
@media (max-width: 900px) { #courseware { border-radius: 0; } }

    
#courseware{height:810px}.lab-main{top:105px}.topbar{top:14px}.record-section{min-height:315px}