/* Existing app layout, with tyre rings aligned to the original motorcycle image. */
.demo-screen{container-type:inline-size;background:#060d14;color:#edf4fa;border:1px solid #263b4e;border-radius:16px;overflow:hidden;font-family:Arial,Helvetica,sans-serif;font-size:11px;background-image:linear-gradient(138deg,transparent 30%,#007bb421 30.2%,transparent 30.7%,transparent 63%,#007bb419 63.2%,transparent 63.7%)}
.demo-top{display:flex;align-items:center;justify-content:space-between;padding:20px 18px 16px}
.demo-top img{width:42%;height:auto}
.demo-top>span{font-size:9px;letter-spacing:1.5px;color:#9baeba;display:flex;align-items:center;gap:8px}
.demo-top i,.demo-connection i,.demo-section-title i{display:inline-block;width:5px;height:5px;background:#49df83;border-radius:50%;margin-right:3px}
.demo-connection{display:flex;justify-content:space-between;gap:8px;background:#0c1923;border-block:1px solid #174363;padding:10px 14px;color:#b6c9d7;font-size:8px;font-weight:700;letter-spacing:.3px}
.demo-connection>span:first-child{color:#57dc8b}
.demo-context{display:grid;grid-template-columns:1fr 1fr;border:1px solid #174363;border-radius:9px;margin:12px 12px 0;background:#081621}
.demo-context>div{padding:11px 12px}
.demo-context>div+div{border-left:1px solid #174363}
.demo-context small{font-size:7px;letter-spacing:1.2px;color:#7d97aa;display:block;margin-bottom:3px}
.demo-context strong{font-size:11px;font-weight:600}
.demo-section-title{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 9px;gap:8px}
.demo-section-title strong{font-size:12px;font-weight:600}
.demo-section-title>span{font-size:7px;letter-spacing:.8px;color:#8aa1b3;white-space:nowrap}
.demo-section-title>span:has(i){color:#56d995}
.demo-bike{position:relative;margin:0 10px 8px;background:#060b10;border:1px solid #152d3e;border-radius:9px;overflow:hidden}
.demo-bike>img{width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;opacity:.88}
.demo-bike>img.tire-rings{position:absolute;inset:0;width:100%;height:100%;opacity:1;object-fit:contain;pointer-events:none}
.tire-gauge{--gauge:#f7a335;--amount:38%;position:absolute;left:7%;top:49%;width:25%;aspect-ratio:1;border-radius:50%;padding:4px;background:conic-gradient(from 225deg,var(--gauge) 0 var(--amount),#25323d var(--amount) 75%,#142331 75%);box-shadow:0 1px 0 2px #05111b,0 7px 16px #000a}
.tire-front{--gauge:#48df83;--amount:79%;left:auto;right:7%}
.tire-gauge>div{height:100%;border-radius:50%;background:#061017f5;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:0}
.tire-gauge small{font-size:1.8cqw;letter-spacing:.9px;color:#a2b6c2}
.tire-gauge strong{color:var(--gauge);font:600 8cqw/.98 var(--display)}
.tire-gauge strong>span{font-size:3.4cqw}
.tire-values{font-size:1.65cqw;color:#cfdae2;margin-top:4px;white-space:nowrap}
.demo-laps-summary{display:grid;grid-template-columns:1.05fr 1.05fr .9fr;margin:0 12px;border:1px solid #174363;border-radius:9px;background:#0a1823;padding:12px 0}
.demo-laps-summary>div{text-align:center;padding:0 3px}
.demo-laps-summary>div+div{border-left:1px solid #184260}
.demo-laps-summary small{display:block;color:#91a9ba;font-size:1.85cqw;letter-spacing:.6px;white-space:nowrap}
.demo-laps-summary strong{display:block;font:600 5.8cqw/1.25 var(--display);letter-spacing:.2px;margin-top:5px;font-variant-numeric:tabular-nums}
.demo-laps-summary em{font:8px Arial,sans-serif;color:#adbcc8}
.demo-green{color:#49dc8a}
.demo-service{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #174363;border-radius:9px;margin:0 12px;background:#0a1721;padding:10px 0}
.demo-service>div{display:flex;align-items:center;flex-direction:column;gap:2px;text-align:center}
.demo-service>div+div{border-left:1px solid #184260}
.service-symbol{font-size:18px;line-height:1.1;color:#38aff7}
.demo-service small{font-size:7px;letter-spacing:1px;color:#a9bdca}
.demo-service strong{font:600 6.5cqw/1.2 var(--display);color:#eaf4fa}
.demo-service strong em{font:10px Arial,sans-serif;color:#9fb4c4}
.demo-service>div>span:last-child{font-size:1.8cqw;color:#829aaa}
.demo-laps{margin:0 12px 13px;border:1px solid #19384e;border-radius:8px;background:#08141f;overflow:hidden}
.demo-laps>div{display:grid;grid-template-columns:1fr 1fr .7fr;align-items:center;padding:8px 12px;font-size:9px;color:#b7cad8}
.demo-laps>div+div{border-top:1px solid #183449}
.demo-laps strong{font-size:11px;font-variant-numeric:tabular-nums;color:#eaf4fa}
.demo-laps>div>span:last-child{text-align:right;font-size:8px;color:#8ea8bc}
.demo-laps .best-lap{background:#11332250}
.demo-laps .best-lap strong,.demo-laps .best-lap>span:last-child{color:#53df92}
.demo-nav{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid #174766;background:#030b11;padding:10px 5px 7px}
.demo-nav>span{text-align:center;color:#7b8b99;font-size:22px;line-height:1.1}
.demo-nav small{display:block;font-size:6px;letter-spacing:.3px;margin-top:5px;padding-bottom:4px}
.demo-nav>.active{color:#21acff}
.demo-nav>.active small{border-bottom:2px solid #21acff}