:root{color-scheme:dark;--paper:#f4f6f2;--ink:#122e34;--muted:#b6cbc6;--mint:#00c3a9;--line:#38575b}
*{box-sizing:border-box}body{margin:0;padding:12px;background:#081e24;color:var(--paper);font:15px/1.5 system-ui,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.55}button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid #f1aa3e;outline-offset:3px}a{color:inherit}h2,h3,h4,p{margin:0}[hidden]{display:none!important}
.showcase{max-width:1320px;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:44px;align-items:center}.device-label{margin-bottom:18px}.device-label>span{font-size:11px;text-transform:uppercase;letter-spacing:.14em;font-weight:750;color:var(--mint)}.device-label h2{font-size:clamp(20px,2.3vw,28px);letter-spacing:-.035em;line-height:1.2;margin-top:6px}.driver-column{min-width:0}.driver-device{background:#091316;border:2px solid #526164;border-radius:30px;padding:14px 20px;box-shadow:0 22px 50px #0005,inset 0 0 0 3px #151f23;position:relative}.driver-device::before{content:'';position:absolute;left:6px;top:45%;width:4px;height:32px;background:#3e4f52;border-radius:5px}.driver-viewport{position:relative;aspect-ratio:1000/520;overflow:hidden;border-radius:14px;background:#122e34}#driver-demo{display:block;width:1000px;height:520px;border:0;transform:scale(var(--driver-scale,1));transform-origin:0 0}.driver-caption{display:flex;justify-content:space-between;gap:14px;margin-top:22px;align-items:center}.driver-caption p{font-size:13px;position:relative;padding-left:17px}.driver-caption strong{display:block;font-weight:650}.driver-caption p>span:last-child{display:block;color:var(--muted);font-size:12px;margin-top:3px}.stream-dot{position:absolute;top:7px;left:0;width:7px;height:7px;border-radius:50%;background:var(--mint)}.is-paused .stream-dot{background:#f1aa3e}.driver-actions{display:flex;gap:8px;flex:none}.driver-actions button{min-height:48px;padding:10px 14px;border-radius:12px;border:1px solid #527069;background:#18393d;color:var(--paper);font-size:13px;font-weight:650}.driver-actions [data-show-map]{background:#dcebdd;color:#122e34;border-color:#dcebdd}.driver-description{font-size:14px;max-width:53ch;color:var(--muted);margin-top:20px}.text-link{display:inline-flex;align-items:center;min-height:48px;color:#80e0ce;font-size:13px;text-underline-offset:4px}
.mechanic-column{width:100%;max-width:340px;margin-inline:auto}.mechanic-column .device-label{margin-left:10px}.mechanic-column .device-label h2{font-size:22px}.mechanic-device{position:relative;border:5px solid #202c2d;outline:1px solid #658078;border-radius:38px;background:#f4f6f2;color:#122e34;padding:29px 5px 10px;box-shadow:0 22px 50px #0006;overflow:hidden;height:670px;display:flex;flex-direction:column}.phone-camera{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:65px;height:6px;border-radius:6px;background:#203b3b}.phone-header{display:flex;align-items:center;justify-content:space-between;padding:3px 16px 12px;font-size:10px;font-weight:800;letter-spacing:.14em}.phone-header b{color:#855300;background:#f7e8cc;padding:3px 6px;border-radius:5px;letter-spacing:.07em}.phone-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b4c8bf transparent;padding:4px 13px 16px;flex:1}.phone-footer{flex:none;border-top:1px solid #d5e0d8;padding:7px 13px 0;text-align:center;background:#f4f6f2}.phone-footer>span{font-size:9px;color:#526b61;display:block}.phone-footer a{display:flex;align-items:center;justify-content:center;min-height:48px;font-size:12px;font-weight:700;color:#006d60;text-underline-offset:3px}.mechanic-description{font-size:12px;color:var(--muted);text-align:center;padding:0 10px;margin-top:17px}.showcase-note{max-width:780px;text-align:center;margin:30px auto 8px;font-size:12px;line-height:1.6;color:#aac3ba}
.driver-is-expanded .driver-device{position:fixed;inset:0;z-index:1000;border:0;padding:0;border-radius:0;box-shadow:none}.driver-is-expanded .driver-device::before{display:none}.driver-is-expanded .driver-viewport{width:100%;height:100%;border-radius:0;aspect-ratio:auto}.driver-is-expanded #driver-demo{width:100%;height:100%;transform:none;pointer-events:auto}
@media(max-width:1050px){.showcase{gap:24px;grid-template-columns:minmax(0,1fr) 320px}.driver-caption{align-items:flex-start;flex-direction:column}.mechanic-device{height:650px}}
@media(max-width:780px){body{padding:5px 2px}.showcase{grid-template-columns:1fr;gap:36px;max-width:680px}.device-label{margin:4px 3px 14px}.driver-device{border-radius:23px;padding:10px 15px}.driver-viewport{border-radius:10px}.driver-caption{margin:16px 5px 0;flex-direction:row;align-items:center;flex-wrap:wrap}.driver-actions{flex-wrap:wrap}.driver-description,.text-link{margin-left:5px}.driver-description{margin-top:12px}.mechanic-column .device-label{margin-left:5px}.mechanic-device{height:660px}.showcase-note{margin-top:24px;padding:0 7px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* The mechanic can move between records without scrolling back to find tabs. */
.mechanic-device{height:700px;color-scheme:light}
.part-record,.inspection-demo{scroll-margin-top:68px}
.inspection-demo{border:1px solid #aac6b8;border-radius:12px;background:#e6eee8;margin:12px 0}
.inspection-demo>summary{display:flex;align-items:center;justify-content:space-between;min-height:52px;list-style:none;padding:12px;font-size:12px;font-weight:750;cursor:pointer}
.inspection-demo>summary::-webkit-details-marker{display:none}
.inspection-demo[open]>summary span{transform:rotate(45deg)}
.inspection-demo form{padding:0 12px 12px}
.inspection-demo form>p{font-size:11px;line-height:1.6;margin:0 0 12px}
.inspection-demo label{font-size:11px;font-weight:650;display:block;margin-bottom:5px}
.tread-entry{display:flex;align-items:center;gap:10px}
.tread-entry input{min-height:52px;min-width:0;width:100%;padding:10px;border:1px solid #789b89;border-radius:9px;background:#fff;color:#122e34;font:20px/1.3 system-ui,sans-serif}
.tread-entry>span{flex:none;font-size:12px;color:#426254}
.inspection-demo small{font-size:10px;line-height:1.6;color:#466058;display:block;margin:8px 0 12px}
.inspection-demo button,.start-inspection{display:block;min-height:48px;width:100%;padding:10px;border:1px solid #007a6a;border-radius:9px;background:#126355;color:#fff;font:650 12px/1.4 system-ui,sans-serif}
.start-inspection{margin:12px 0}
.inspection-demo input:focus-visible{outline:3px solid #9a6200;outline-offset:2px}
.inspection-demo [aria-invalid=true]{border-color:#9a6200}
.inspection-demo #inspection-result{font-size:11px;color:#325647;margin:12px 0 0}
.inspection-demo [data-recheck-history]{background:transparent;color:#126355;margin-top:12px}