/* Home hero: a phone that types an example into a calculator, shows the result, then moves on to the next one. */
.demo-phone{position:relative;width:300px;height:600px;border-radius:44px;background:#0B0B0B;border:1px solid #2C2C2C;padding:12px;box-shadow:0 0 0 1px rgba(255,255,255,.03)}
.demo-screen{position:relative;width:100%;height:100%;border-radius:34px;background:#121212;overflow:hidden;font-family:var(--font,'Inter',system-ui,sans-serif);color:#fff}
.demo-notch{position:absolute;top:10px;left:50%;width:84px;height:22px;margin-left:-42px;border-radius:12px;background:#0B0B0B;z-index:3}
.demo-scene{position:absolute;inset:0;padding:44px 14px 14px;display:flex;flex-direction:column;gap:10px;opacity:0;transform:translateX(40px);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.demo-scene.is-in{opacity:1;transform:none}
.demo-scene.is-out{opacity:0;transform:translateX(-40px)}
.demo-bar{display:flex;align-items:center;gap:10px;height:28px;font-size:15px;font-weight:600}
.demo-bar svg{width:16px;height:16px;stroke:#fff;stroke-width:2;fill:none}
.demo-diagram{height:150px;border-radius:12px;background:#1A1A1A;border:1px solid #262626;display:flex;align-items:center;justify-content:center}
.demo-diagram svg{width:100%;height:100%}
.demo-draw{fill:none;stroke:#F5A623;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 1.1s ease}
.demo-draw.is-drawn{stroke-dashoffset:0}
.demo-floor{fill:none;stroke:#555;stroke-width:2}
.demo-dimline{fill:none;stroke:#777;stroke-width:1}
.demo-dim{fill:#AAAAAA;font-size:9px;font-family:inherit;opacity:0;transition:opacity .4s ease .5s}
.demo-dim.is-shown{opacity:1}
.demo-field{background:#222;border-radius:10px;padding:6px 12px 7px}
.demo-field-label{font-size:10px;color:#9A9A9A}
.demo-field-value{font-size:16px;font-weight:600;min-height:20px;display:flex;align-items:baseline;gap:4px}
.demo-field-value .u{font-size:11px;font-weight:400;color:#8A8A8A;margin-left:auto}
.demo-caret{display:inline-block;width:1.5px;height:16px;background:#F5A623;margin-left:1px;animation:demo-blink 1s steps(1) infinite;vertical-align:-2px}
@keyframes demo-blink{50%{opacity:0}}
.demo-result{background:#1C1C1C;border-radius:12px;padding:4px 12px;opacity:0;transform:translateY(16px);transition:opacity .4s ease,transform .4s cubic-bezier(.2,.7,.2,1)}
.demo-result.is-shown{opacity:1;transform:none}
.demo-row{display:flex;justify-content:space-between;align-items:baseline;padding:8px 0;border-bottom:1px solid #2A2A2A;font-size:12px;color:#B5B5B5}
.demo-row:last-child{border-bottom:0}
.demo-row b{color:#fff;font-weight:600;font-size:13px}
.demo-row.hero{flex-direction:column;align-items:flex-start;gap:2px}
.demo-row.hero b{color:#F5A623;font-size:26px;font-weight:700;line-height:1.1}
@media (max-width:900px){
  .hero-visual{display:flex!important;margin-top:28px}
  .demo-phone{width:260px;height:520px;border-radius:40px}
  .demo-diagram{height:120px}
}
@media (prefers-reduced-motion:reduce){
  .demo-scene,.demo-result,.demo-draw,.demo-dim{transition:none}
  .demo-caret{animation:none}
}