:root{font-family:'DM Sans',Arial,sans-serif;background:#f7fcff;color:#103653;--blue:#137fcb;--cyan:#0baddc;--teal:#0aae98;--ink:#123c5b;--muted:#648294;--border:#d1e7ee;--shadow:0 15px 40px #1b6b8b10}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:radial-gradient(ellipse 55% 35% at 90% -10%,#b4f6e5 0,transparent 100%),linear-gradient(130deg,#f9fdfd 0%,#f2fbfe 100%)}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #49b6ee;outline-offset:3px}a{color:inherit}
.site-head{display:flex;align-items:center;gap:25px;max-width:1600px;margin:auto;padding:15px clamp(16px,3vw,42px);min-height:76px}.site-brand{display:flex;align-items:center;gap:13px;color:#123a59;font:900 23px 'Outfit',sans-serif;letter-spacing:-1.1px;text-decoration:none;white-space:nowrap}.back-arrow{display:grid;place-items:center;width:39px;height:39px;font:700 27px Arial;border-radius:13px;background:#fff;border:1px solid var(--border)}.brand-gradient{background:linear-gradient(90deg,#1686d8,#0aafad);-webkit-background-clip:text;background-clip:text;color:transparent}.section-name{font:900 11px 'Outfit',sans-serif;color:#29859b;letter-spacing:.14em;display:flex;align-items:center;gap:9px}.small-dot{width:8px;height:8px;background:#0fc1a6;border-radius:50%}.section-sub{color:#9ab0bc}.other-version{margin-left:auto;text-decoration:none;border-radius:12px;border:1px solid var(--border);background:#fff;color:#27738e;padding:11px 15px;font-size:12px;font-weight:800;white-space:nowrap}
.page-shell{max-width:1600px;margin:auto;padding:5px clamp(16px,3vw,42px) 68px}.intro-text{display:flex;min-height:144px;align-items:center;justify-content:space-between;position:relative;padding:7px 5px 21px;gap:16px}.eyebrow,.panel-kicker{display:inline-block;font:900 11px/1.4 'Outfit',sans-serif;letter-spacing:.15em;color:#1597a9}.intro-text h1{font:900 clamp(36px,4.2vw,58px)/1 'Outfit',sans-serif;letter-spacing:-.045em;margin:9px 0 8px;color:#103d64}.intro-text h1 em{font-style:normal;background:linear-gradient(90deg,#168ae3,#08a8dc,#04b39b);color:transparent;-webkit-background-clip:text;background-clip:text}.intro-text p{font-size:14px;font-weight:650;color:#648393;margin:0;max-width:650px;line-height:1.45}.ren-banner{width:340px;height:130px;align-self:stretch;position:relative;isolation:isolate;flex-shrink:0}.ren-circle{position:absolute;right:120px;top:0;width:126px;height:126px;border:13px solid #b7eee6;background:#dcf9f3;border-radius:50%;box-shadow:0 0 0 15px #caf2f01f}.ren-banner img{position:absolute;right:135px;top:-21px;height:175px;width:auto;filter:drop-shadow(0 8px 10px #1e5b7622);object-fit:contain;object-position:top;clip-path:inset(0 0 5% 0)}.ren-quote{position:absolute;right:0;top:43px;width:150px;background:white;border:1px solid #d2e9eb;border-radius:14px;padding:11px 12px;box-shadow:0 10px 24px #144b7210;display:grid;gap:3px}.ren-quote strong{font:900 11px 'Outfit',sans-serif;color:#7e60a6}.ren-quote span{font-size:11px;line-height:1.4;color:#58738a;font-weight:750}
.lab-layout{display:grid;grid-template-columns:minmax(220px,260px) minmax(0,1fr) minmax(250px,286px);gap:14px;align-items:stretch}.tool-panel,.central-panel,.reading-study{background:#fff;border:1px solid var(--border);border-radius:23px;box-shadow:var(--shadow);min-width:0;overflow:hidden}.tool-panel{padding:22px 16px;display:flex;flex-direction:column;gap:17px}.panel-heading h2{font:900 24px/1.15 'Outfit',sans-serif;letter-spacing:-.025em;margin:7px 0 8px;color:var(--ink)}.panel-heading p{color:#6a8796;font-weight:600;font-size:12px;line-height:1.53;margin:0}.solid-chooser{display:grid;gap:8px}.solid-chooser button{display:flex;align-items:center;text-align:left;gap:10px;width:100%;border:1px solid #d8e8ee;background:#fafdff;color:#284e67;border-radius:15px;padding:10px;font:850 13px 'Outfit',sans-serif;transition:background .14s,border-color .14s,transform .14s}.solid-chooser button:hover{transform:translateY(-1px);border-color:#9ad9e5}.solid-chooser button[aria-pressed=true]{background:linear-gradient(110deg,#e4f7ff,#e2fbf3);border-color:#8bdbdf;color:#116f98}.solid-chooser button span:last-child{display:grid;gap:3px}.solid-chooser small{font:650 10px 'DM Sans',sans-serif;color:#819baa}.solid-icon{display:grid;place-items:center;flex:0 0 42px;height:42px;border-radius:12px;background:#dcf3fa;color:#147ea4;font-size:27px}.solid-chooser button[aria-pressed=true] .solid-icon{background:#c9eff3;color:#0a8e8a}.compact-head{display:flex;align-items:center;gap:6px;justify-content:space-between}.compact-head h3,.read-heading h3{font:900 15px 'Outfit',sans-serif;margin:0;color:#1e4c6a}.pill{font-size:10px;border-radius:20px;background:#e7f7f9;color:#218a94;font-weight:800;padding:5px 8px}.editor-row{display:flex;gap:7px}.small-button,.icon-button{background:#fff;border:1px solid #c7e2ed;color:#267eac;font-weight:800;font-size:11px;padding:10px 11px;border-radius:11px}.small-button:hover,.icon-button:hover{background:#eaf8fc}.editor-row .small-button{flex:1}.icon-button{flex:0 0 40px;font-size:17px}.instructions{display:flex;align-items:start;gap:10px;background:#f3faff;border-radius:14px;border:1px solid #dceaf4;padding:13px}.instruction-icon{display:grid;place-items:center;flex:0 0 30px;height:30px;background:#dcedfa;color:#2485bb;border-radius:9px;font-size:17px}.instructions div:last-child{display:grid;gap:5px}.instructions b{font-size:12px;color:#2b6890}.instructions span{font-size:11px;font-weight:600;color:#6d8b9e;line-height:1.43}
.central-panel{display:flex;flex-direction:column}.scene-topbar{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:58px;padding:12px 18px;border-bottom:1px solid #e0edf1;background:linear-gradient(95deg,#f6fffb,#f2f9ff)}.scene-topbar>div{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}.scene-topbar b{font:900 17px 'Outfit',sans-serif;color:#164966}.scene-topbar span:not(.live-pill){font-size:11px;color:#82a0ac;font-weight:700}.live-pill{display:flex;align-items:center;gap:6px;background:#e5faf1;border:1px solid #bde9d5;color:#279b80;border-radius:30px;padding:7px 9px;font:850 9px 'Outfit',sans-serif;letter-spacing:.07em;white-space:nowrap}.live-pill i{width:6px;height:6px;border-radius:50%;background:#16c693;box-shadow:0 0 0 3px #21ca9621}
.view-frame{position:relative;min-height:460px;flex:1;background:linear-gradient(165deg,#f6fcff,#ecf7fb);overflow:hidden;isolation:isolate}.scene-host{position:absolute;inset:0;touch-action:none;cursor:grab}.scene-host canvas,.scene-host>svg{width:100%;height:100%;display:block;touch-action:none}.view-frame.vector-fallback .scene-host{background:#eef7fc}.view-gradient{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#f6fcff50,transparent 25%,transparent 75%,#e2f8f738)}.loading{position:absolute;z-index:9;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;background:linear-gradient(145deg,#effaff,#e8f8f6);color:#2a7192;text-align:center;padding:25px}.loading[hidden]{display:none}.loading strong{font:900 17px 'Outfit',sans-serif}.loading small{font-size:12px;color:#7193a0;max-width:290px}.loader{width:39px;height:39px;border:4px solid #bee8f0;border-top-color:#189bd0;border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.view-note{position:absolute;left:15px;top:16px;max-width:240px;color:#5e8395;font-size:11px;font-weight:750;line-height:1.5;background:#ffffffc9;border:1px solid #e0edf2;border-radius:11px;padding:9px 12px;pointer-events:none}.view-quick{position:absolute;right:13px;bottom:13px;display:flex;gap:5px;background:#fffffff2;border:1px solid #d3e6ed;padding:5px;border-radius:13px;box-shadow:0 7px 19px #1d699222}.view-quick button{border:0;border-radius:9px;background:transparent;color:#4c7891;font-size:10px;font-weight:850;padding:9px 10px;white-space:nowrap}.view-quick button[aria-pressed=true]{color:white;background:#188bc5}.view-quick button:hover:not([aria-pressed=true]){background:#e9f6f8}
.transform-bar{display:flex;align-items:center;gap:15px;justify-content:center;padding:12px;background:#f7fbfd;border-top:1px solid #dcecf0;flex-wrap:wrap}.toolbar-group{display:flex;align-items:center;gap:9px}.toolbar-caption{font:900 9px 'Outfit',sans-serif;letter-spacing:.1em;color:#8aa2ae}.segmented{display:flex;padding:3px;background:#e8f3f8;border:1px solid #d3e8ee;border-radius:12px;gap:3px}.segmented button{border:0;background:transparent;padding:8px 11px;border-radius:9px;color:#65879a;font-size:11px;font-weight:850}.segmented button[aria-pressed=true]{background:white;color:#157bae;box-shadow:0 2px 7px #397a9912}.reset-camera{background:transparent;border:1px solid #c7e1e9;border-radius:11px;padding:10px;font-size:10px;color:#477a92;font-weight:800}.scene-footnote{background:#fafdff;border-top:1px solid #e4eef0;padding:11px 16px;color:#87a0ab;font-size:10px;line-height:1.45;font-weight:650}
.touch-controls{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;border-top:1px solid #dbeaf1;background:#eff9fc}.touch-label{display:grid;gap:3px}.touch-label b{font:850 12px 'Outfit',sans-serif;color:#276b87}.touch-label span{font-size:10px;color:#7092a3;font-weight:700;line-height:1.35}.axis-controls{display:flex;gap:5px;flex-shrink:0}.axis-controls button{min-width:42px;min-height:42px;border:1px solid #b9dae9;border-radius:11px;background:#fff;color:#206f97;font:900 13px 'Outfit',sans-serif;touch-action:manipulation}.axis-controls button:active{background:#bdebf5;transform:scale(.97)}.axis-controls button:nth-child(3),.axis-controls button:nth-child(4){color:#168f83}.axis-controls button:nth-child(5),.axis-controls button:nth-child(6){color:#bd7a31}
.axis-controls[hidden]{display:none!important}.axis-controls[data-mode="translate-solid"] button[data-axis="z"]{display:none}.camera-tools{position:absolute;z-index:6;right:13px;top:14px;display:flex;flex-direction:column;align-items:flex-end;gap:7px}.orbit-toggle{display:flex;align-items:center;gap:8px;min-height:43px;border:1px solid #c0dae7;border-radius:13px;padding:8px 12px;background:#fffffff0;color:#246e91;font:850 12px 'Outfit',sans-serif;box-shadow:0 5px 18px #386d8520}.orbit-toggle>span{font:900 21px/1 Arial,sans-serif}.orbit-toggle[aria-pressed="true"]{background:linear-gradient(100deg,#167ec6,#08aaa7);border-color:#09a3ad;color:#fff}.camera-zoom{display:flex;gap:5px}.camera-zoom button{display:grid;place-items:center;width:43px;height:43px;background:#ffffffef;color:#156a95;border:1px solid #c8dfe9;border-radius:12px;font:900 23px/1 'Outfit',sans-serif;box-shadow:0 5px 15px #386d8520}.camera-zoom button:active{transform:scale(.95);background:#d8f3fa}
.engraved-label{position:absolute;z-index:3;transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none;color:#385265;font-family:Arial,sans-serif;font-weight:600;line-height:1;text-shadow:0 1px 0 #eff7f9aa}.engraved-label[hidden]{display:none}.nonio-engraving{color:#24566b;font-weight:750}.precision-engraving{color:#263d4b;font-weight:750;letter-spacing:-.02em}
.mechanics-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.mechanics-row button{display:flex;align-items:center;justify-content:center;gap:5px;border:1px solid #bbdce9;background:#f3fbff;color:#216e91;font:850 11px 'Outfit',sans-serif;border-radius:11px;padding:12px 7px;min-height:44px}.mechanics-row button[aria-pressed=true]{background:#fcecd5;border-color:#e9c38a;color:#9a5f23}.mechanics-row button:active{transform:scale(.98)}.mechanics-row #closeToContact{background:#e4f8f1;color:#118870;border-color:#b5e4d6}.mechanics-row button:disabled,.slider-card button:disabled{opacity:.48;cursor:not-allowed}
.slider-card{border:1px solid #d4e8ee;background:#f6fbff;padding:14px 12px;border-radius:15px}.slider-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.slider-head b{font:850 13px 'Outfit',sans-serif}.slider-head span{color:#7b9daa;font-size:10px;font-weight:750}.slider-card input{width:100%;margin:22px 0 17px;accent-color:#128bd0;cursor:pointer}.nudge-row{display:flex;align-items:center;justify-content:space-between;gap:3px}.nudge-row button{flex:0 0 auto;border:1px solid #c8e2ea;background:#fff;color:#237da5;font:850 11px 'Outfit',sans-serif;border-radius:9px;padding:7px 6px}.nudge-row button:hover{background:#e3f7fa}.nudge-row span{font:900 16px 'Outfit',sans-serif;white-space:nowrap;color:#155c7f;letter-spacing:-.03em}.contact-card{display:flex;align-items:flex-start;gap:10px;border:1px solid #d5e5eb;border-radius:14px;background:#f8fbfc;padding:13px}.contact-card>span{width:25px;height:25px;flex:0 0 25px;display:grid;place-items:center;border-radius:50%;font-size:17px;color:#8ca7b5;background:#e4eef1}.contact-card b{font:900 12px 'Outfit',sans-serif;color:#476b7e}.contact-card p{font-size:11px;line-height:1.45;color:#76909c;font-weight:650;margin:4px 0 0}.contact-card[data-state=contact]{background:#e5faf0;border-color:#b8e9d4}.contact-card[data-state=contact]>span{color:#098d72;background:#c8f2e2}.contact-card[data-state=contact] b{color:#07866e}.contact-card[data-state=collision]{background:#fff4e9;border-color:#f0d9be}.contact-card[data-state=collision]>span{color:#be7636;background:#fbe5c9}.contact-card[data-state=collision] b{color:#a76b2e}.read-heading{display:flex;align-items:center;justify-content:space-between;gap:7px}.text-button{border:0;background:transparent;color:#1785b6;font-size:10px;font-weight:850;padding:4px 0}.readout{border:1px solid #d4e8ef;background:linear-gradient(125deg,#f4fbff,#f1fdfa);padding:17px 16px;border-radius:15px}.readout>span{font:850 10px 'Outfit',sans-serif;color:#7094a6;letter-spacing:.1em;text-transform:uppercase}.readout strong{display:block;font:900 34px/1.1 'Outfit',sans-serif;color:#126388;letter-spacing:-.05em;margin:7px 0}.readout strong small{font-size:15px;color:#6696a3}.readout p{font-size:11px;line-height:1.45;font-weight:700;color:#7694a0;margin:0}.primary-button{background:linear-gradient(100deg,#117fce,#09b8d6);border:0;color:white;font:850 13px 'Outfit',sans-serif;border-radius:12px;display:flex;align-items:center;justify-content:space-between;padding:13px 17px;box-shadow:0 8px 18px #1c91b82c}.primary-button span{font-size:18px}.ren-tip{margin-top:auto;background:linear-gradient(145deg,#f3f0fe,#edfafd);border:1px solid #deddf3;border-radius:14px;padding:16px}.tip-title{font:900 10px 'Outfit',sans-serif;color:#8068a4;letter-spacing:.08em}.ren-tip p{font-size:12px;font-weight:650;line-height:1.55;color:#6f728c;margin:6px 0 0}
.reading-study{margin-top:17px;padding:24px 27px 22px}.study-heading{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:16px}.study-heading h2{font:900 25px 'Outfit',sans-serif;letter-spacing:-.03em;margin:5px 0}.study-heading p{font-size:12px;color:#73909f;font-weight:650;margin:0;line-height:1.5}.ruler-scroll{overflow-x:auto;border:1px solid #cee2eb;background:#f5fcff;border-radius:16px;padding:12px;scrollbar-color:#b0dae8 transparent}.ruler-scroll svg{display:block;min-width:670px;width:100%;height:auto}.reading-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}.reading-steps span{display:flex;align-items:flex-start;gap:9px;color:#65869a;font-size:12px;font-weight:750;line-height:1.5}.reading-steps b{display:grid;place-items:center;background:#dff3fa;color:#1882ae;border-radius:50%;width:23px;height:23px;flex:0 0 23px;font-size:12px}
@media(max-width:1250px){.lab-layout{grid-template-columns:215px minmax(0,1fr) 248px;gap:10px}.tool-panel{padding:19px 12px}.view-frame{min-height:420px}.nudge-row span{font-size:13px}.nudge-row button{padding:7px 5px;font-size:10px}}
@media(max-width:1030px){.lab-layout{grid-template-columns:minmax(0,1fr) 280px}.left-panel{grid-column:1/-1;display:grid;grid-template-columns:220px 1fr;align-items:center;gap:16px}.left-panel .solid-chooser{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.left-panel .solid-chooser button{padding:7px;flex-direction:column;text-align:center;justify-content:center}.left-panel .solid-icon{flex-basis:37px;width:37px;height:37px}.left-panel .compact-head,.left-panel .editor-row,.left-panel .instructions{display:none}.left-panel .panel-heading h2{font-size:21px}.central-panel{grid-column:1}.right-panel{grid-column:2}.touch-controls{align-items:stretch;flex-direction:column}.axis-controls{justify-content:space-between}}
@media(max-width:750px){.site-head{padding:11px 15px;min-height:63px;gap:10px}.site-brand{font-size:20px;gap:7px}.back-arrow{height:33px;width:33px;border-radius:10px}.section-name{font-size:9px;letter-spacing:.06em}.section-sub,.small-dot{display:none}.other-version{padding:8px 9px;font-size:10px}.page-shell{padding:4px 10px 40px}.intro-text{min-height:132px;padding:10px 4px 15px}.intro-text h1{font-size:38px}.intro-text p{max-width:240px;font-size:12px}.ren-banner{width:110px;height:124px}.ren-banner .ren-circle{right:0;top:14px;width:105px;height:105px;border-width:10px}.ren-banner img{right:1px;top:0;height:150px}.ren-quote{display:none}.lab-layout{display:flex;flex-direction:column;gap:10px}.central-panel{order:0}.left-panel{order:1;display:flex;gap:12px}.right-panel{order:2}.tool-panel,.central-panel,.reading-study{border-radius:18px}.left-panel .panel-heading p{display:none}.left-panel .solid-chooser{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}.left-panel .solid-chooser button{padding:8px 2px}.left-panel .solid-chooser small{font-size:9px}.left-panel .panel-heading h2{font-size:20px}.left-panel .compact-head,.left-panel .editor-row{display:flex}.left-panel .instructions{display:none}.left-panel .solid-chooser button span:last-child{font-size:11px}.scene-topbar{min-height:50px;padding:9px 12px}.scene-topbar b{font-size:15px}.scene-topbar .live-pill{font-size:8px}.view-frame{height:clamp(340px,57vh,520px);min-height:340px;flex:none}.view-note{left:8px;top:8px;max-width:160px;font-size:10px;padding:7px}.view-quick{bottom:8px;right:8px;gap:2px;padding:3px}.view-quick button{font-size:10px;padding:7px 8px}.transform-bar{padding:9px;gap:7px}.toolbar-group{gap:4px}.toolbar-caption{font-size:8px}.segmented button{padding:7px;font-size:10px}.reset-camera{padding:8px;font-size:10px}.scene-footnote{font-size:9px;padding:10px}.touch-controls{padding:10px;gap:8px}.touch-label span{font-size:10px}.axis-controls button{flex:1;min-width:0;min-height:46px}.right-panel{display:grid;grid-template-columns:1fr 1fr;gap:11px}.right-panel .panel-heading,.right-panel .ren-tip{grid-column:1/-1}.right-panel .slider-card,.right-panel .contact-card,.right-panel .mechanics-row{grid-column:1/-1}.right-panel .read-heading{grid-column:1/-1}.right-panel .readout{grid-column:1}.right-panel .primary-button{grid-column:2;justify-content:center}.right-panel .panel-heading h2{font-size:21px}.right-panel .ren-tip{margin:0}.reading-study{padding:19px 14px}.reading-steps{grid-template-columns:1fr;gap:9px}.study-heading h2{font-size:21px}.study-heading p{font-size:11px}}
@media(max-width:410px){.site-head{gap:5px}.section-name{font-size:8px}.site-brand{font-size:18px}.other-version{font-size:9px}.intro-text h1{font-size:35px}.intro-text p{max-width:215px}.eyebrow{font-size:9px}.ren-banner{width:95px}.ren-banner .ren-circle{width:94px;height:94px}.ren-banner img{height:133px}.view-quick button{font-size:9px;padding:7px 5px}.toolbar-caption{display:none}.right-panel .readout,.right-panel .primary-button{grid-column:1/-1}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* Calmer, slimmer camera controls: the mobile stage belongs to the instrument. */
.camera-zoom .quick-reset{font-size:19px;color:#3b819b;background:#f4fbfd}
@media(max-width:750px){
  .view-note{max-width:145px;font-size:9px;line-height:1.4;padding:7px 8px;border-radius:10px}
  .camera-tools{right:8px;top:8px;gap:4px}
  .orbit-toggle{min-height:37px;padding:6px 9px;gap:5px;font-size:10px;border-radius:11px}
  .orbit-toggle>span{font-size:17px}
  .camera-zoom{gap:4px}
  .camera-zoom button{width:37px;height:37px;font-size:19px;border-radius:10px}
  .camera-zoom .quick-reset{font-size:17px}
}
@media(max-width:410px){
  .view-note{max-width:134px}
  .orbit-toggle{font-size:9px}
  .camera-zoom button{width:35px;height:35px}
}

/* Reading the vernier: the compact formula follows the slider in real time. */
.live-equation{position:absolute;z-index:5;bottom:13px;left:13px;max-width:320px;padding:8px 11px;border:1px solid #b9dfe9;border-radius:11px;background:#f7fdffed;box-shadow:0 4px 15px #256a8520;color:#176587;font:850 11px/1.35 'Outfit',sans-serif;white-space:nowrap;pointer-events:none;font-variant-numeric:tabular-nums}
.calculation-card{display:grid;gap:10px;padding:12px;border:1px solid #b8dde9;background:linear-gradient(135deg,#f3fbff,#effbf8);border-radius:14px;min-width:0}
.calc-heading{display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap}
.calc-heading strong{color:#206b88;font:900 12px 'Outfit',sans-serif}
.calc-heading>span{color:#279b95;font-size:9px;font-weight:850;white-space:nowrap}
.calc-components{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.calc-components>div{min-width:0;display:grid;gap:2px;background:#fff;border:1px solid #d8eaf0;padding:9px 8px;border-radius:10px}
.calc-components span{color:#728f9d;font-size:9px;font-weight:750}
.calc-components strong{color:#1a6585;font:900 17px 'Outfit',sans-serif;font-variant-numeric:tabular-nums}
.calc-components small{color:#6b93a2;font-size:9px;font-weight:750;line-height:1.3}
.calc-expression{display:flex;align-items:center;gap:5px;flex-wrap:wrap;border:1px solid #d0e7ed;border-radius:10px;padding:10px;background:#fff;color:#47778e;font-weight:850;font-size:11px}
.calc-expression code{color:#215c7a;font:850 11px 'DM Sans',sans-serif;font-variant-numeric:tabular-nums}
.calc-expression strong{color:#087f85;font:900 15px 'Outfit',sans-serif;font-variant-numeric:tabular-nums}
.calc-measure-hint{margin:0;padding:8px 9px;border-radius:9px;background:#e8f2f6;color:#547b8e;font-size:10px;font-weight:700;line-height:1.43}
.calc-measure-hint[data-contact="true"]{background:#dff8ec;color:#087a62}
.precision-choice{display:grid;gap:7px;border:1px solid #c9e3ed;border-radius:14px;background:linear-gradient(120deg,#f4fbff,#f2fbf8);padding:11px 12px}
.precision-choice>span{font:850 11px 'Outfit',sans-serif;color:#326f88}
.precision-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.precision-options button{min-width:0;min-height:40px;border:1px solid #c7dfe9;border-radius:10px;background:#fff;color:#32728e;font:900 14px 'Outfit',sans-serif;cursor:pointer;touch-action:manipulation}
.precision-options button[aria-pressed="true"]{border-color:#159cb1;background:linear-gradient(105deg,#1682b4,#10aba6);color:#fff;box-shadow:0 4px 10px #128da224}
.precision-options button:focus-visible{outline:3px solid #e3a44d;outline-offset:2px}
.precision-choice small{color:#7795a3;font-size:9px;font-weight:700}
@media(max-width:1250px){.live-equation{bottom:54px;max-width:calc(100% - 24px)}}
@media(max-width:750px){
  .live-equation{left:8px;right:8px;bottom:50px;max-width:none;white-space:normal;text-align:center;justify-content:center;padding:7px 8px;font-size:10px}
  .right-panel .calculation-card,.right-panel .precision-choice{grid-column:1/-1}
  .calculation-card{padding:12px}
}

/* Macro camera controls overlay the real 3D instrument (no cloned scale). */
.lens-toggle{display:flex;align-items:center;gap:6px;justify-content:center;min-height:38px;padding:7px 12px;border:1px solid #bcdce8;border-radius:12px;background:#ffffffed;color:#22738e;font:850 11px 'Outfit',sans-serif;box-shadow:0 4px 15px #326f8720}
.lens-toggle>span{font:900 23px/1 Arial,sans-serif}
.lens-toggle[aria-pressed="true"]{background:linear-gradient(110deg,#1689ba,#11a69d);border-color:#159ea9;color:white}
.magnifier-panel{position:absolute;left:13px;bottom:8px;z-index:8;display:grid;gap:6px;width:min(360px,calc(100% - 26px));max-height:calc(100% - 30px);overflow-y:auto;padding:9px;border:1px solid #b4d7e5;border-radius:15px;background:#f7fcfff1;box-shadow:0 12px 30px #193e5a2f;backdrop-filter:blur(10px);touch-action:pan-y}
.magnifier-panel[hidden]{display:none!important}
.lens-head,.lens-head-tools,.lens-scan,.lens-bottom{display:flex;align-items:center;gap:7px}
.lens-head{justify-content:space-between}.lens-head strong{font:900 13px 'Outfit',sans-serif;color:#175877;white-space:nowrap}
.lens-head-tools{gap:4px}.lens-head-tools button{border:1px solid #c5dfe9;background:#fff;border-radius:8px;color:#1c7295;min-width:30px;height:30px;font:900 17px 'Outfit',sans-serif}
.lens-head-tools #lensClose{color:#647e8e;font-size:21px}
#lensZoomLabel{font:850 10px 'Outfit',sans-serif;color:#527c8f;min-width:20px;text-align:center}
.lens-scan input{flex:1;min-width:0;accent-color:#168da8;touch-action:pan-x;height:35px;cursor:pointer}
.lens-scan button{width:37px;height:37px;flex:none;border:1px solid #c4e0e9;background:white;border-radius:10px;font:900 22px 'Outfit',sans-serif;color:#267b9a}
.lens-bottom{justify-content:space-between}.lens-bottom span{font:850 11px 'Outfit',sans-serif;color:#28667f}
.lens-bottom button{border:0;border-radius:9px;background:#188db6;color:white;min-height:35px;padding:7px 10px;font:850 10px 'Outfit',sans-serif}
.lens-feedback{margin:0;min-height:27px;color:#627f91;font:750 10px/1.4 'DM Sans',sans-serif}
.lens-feedback:not([data-match]){display:none}
.lens-feedback[data-match="true"]{color:#07866f}.lens-feedback[data-match="false"]{color:#996723}
.view-frame[data-lens="true"] .view-note{display:none}
.view-frame[data-lens="true"] .live-equation{top:10px;bottom:auto;max-width:220px}
@media(max-width:750px){
  .lens-toggle{min-height:34px;padding:5px 9px;font-size:10px;border-radius:10px}
  .lens-toggle>span{font-size:20px}
  .magnifier-panel{left:8px;right:8px;bottom:7px;width:auto;max-height:calc(100% - 20px);padding:7px;gap:5px;border-radius:12px}
  .lens-head strong{font-size:12px}
  .lens-head-tools button{min-width:28px;height:29px}
  .view-frame[data-lens="true"] .live-equation{top:7px;bottom:auto;left:8px;right:auto;max-width:180px;font-size:9px;padding:5px 7px;white-space:normal}
  .view-frame[data-lens="true"] .view-quick{display:none}
}