:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}body{color:#f5f7ff;background:radial-gradient(circle at 70% 22%,#3e7bff21,#0000 34%),radial-gradient(circle at 70% 78%,#ff622517,#0000 32%),#03050b}.labPanel{z-index:30;box-sizing:border-box;-webkit-backdrop-filter:blur(24px)saturate(1.25);backdrop-filter:blur(24px)saturate(1.25);background:linear-gradient(145deg,#0b1121e8,#050812c7),#050812d1;border:1px solid #afc7ff26;border-radius:22px;width:min(330px,100vw - 48px);padding:24px;position:fixed;top:24px;left:24px;box-shadow:0 30px 90px #0000006b,inset 0 1px #ffffff0e}.labEyebrow{color:#87b5ff;letter-spacing:.15em;text-transform:uppercase;margin:0 0 11px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;font-weight:750}.labPanel h1{letter-spacing:-.055em;margin:0;font-size:clamp(30px,3.2vw,44px);font-weight:680;line-height:.98}.labIntro{color:#dee8ffa3;margin:16px 0 0;font-size:12px;line-height:1.58}.familyControls{grid-template-columns:repeat(2,1fr);gap:7px;margin-top:20px;display:grid}.familyControls button{appearance:none;color:#e6edffa8;cursor:pointer;background:#ffffff09;border:1px solid #b6cdff21;border-radius:11px;min-height:38px;font:650 11px/1 inherit;transition:border-color .16s,background .16s,color .16s,transform .16s}.familyControls button:hover,.familyControls button:focus-visible{color:#fff;border-color:#7dacff94;outline:none;transform:translateY(-1px)}.familyControls button[aria-pressed=true]{color:#fff;background:linear-gradient(135deg,#2a65de6b,#7541d647);border-color:#7dacffb8;box-shadow:inset 0 1px #ffffff1f}.familyReadout{border-block:1px solid #ffffff13;grid-template-columns:9px 1fr;gap:12px;margin-top:18px;padding:15px 0;display:grid}.familySwatch{background:linear-gradient(#ffb06d,#c64b27);border-radius:99px;box-shadow:0 0 18px #ff70398a}body[data-material-family=steel] .familySwatch{background:linear-gradient(#dfe8f5,#708199);box-shadow:0 0 18px #96bbeb6b}body[data-material-family=gold] .familySwatch{background:linear-gradient(#ffe88b,#d78218);box-shadow:0 0 18px #ffc13785}body[data-material-family=ceramic] .familySwatch{background:linear-gradient(#6da1ff,#173bb2);box-shadow:0 0 18px #4077ff94}.familyReadout strong{font-size:12px}.familyReadout p{color:#dbe5fc8c;margin:5px 0 0;font-size:10px;line-height:1.48}.labLegend{gap:9px;margin:16px 0 0;display:grid}.labLegend div{justify-content:space-between;gap:16px;display:flex}.labLegend dt,.labLegend dd{text-transform:uppercase;margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px}.labLegend dt{color:#dce6fc61;letter-spacing:.08em}.labLegend dd{color:#e0eaffb8;text-align:right}.axisLabel{z-index:24;color:#ccdaf96b;letter-spacing:.1em;pointer-events:none;text-transform:uppercase;align-items:center;gap:9px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;display:flex;position:fixed}.axisLabel i{background:linear-gradient(90deg,#74a1ff26,#74a1ffb8);width:62px;height:1px;display:block}.axisMetallic{top:25px;right:7vw}.axisRoughness{flex-direction:column;top:34%;right:20px}.axisRoughness i{background:linear-gradient(#74a1ff26,#ff79439e);width:1px;height:54px}.labHint{z-index:24;color:#ccdaf95c;letter-spacing:.08em;pointer-events:none;text-transform:uppercase;margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;position:fixed;bottom:20px;right:28px}.hilo3dStats{top:auto;bottom:14px}@media (max-width:1200px) and (min-width:821px){.labPanel{width:300px;padding:20px;top:18px;left:18px}.labPanel h1{font-size:34px}.labIntro{font-size:11px}.familyReadout{padding-block:12px}.axisRoughness{right:12px}}@media (max-width:820px){.labPanel{border-radius:17px;width:calc(100vw - 24px);padding:18px;top:12px;left:12px}.labPanel h1{font-size:30px}.labIntro,.familyReadout,.labLegend{display:none}.familyControls{margin-top:15px}.axisLabel,.labHint{display:none}.hilo3dStats{display:none!important}}@media (max-width:560px){.labPanel{padding:16px}.labPanel h1{font-size:28px}.familyControls{gap:6px;margin-top:13px}.familyControls button{min-height:36px}}
