:root{--ink:#172033;--muted:#667085;--line:#dfe5ee;--surface:#f3f6fa;--card:#fff;--blue:#1976d2;--blue-dark:#125ca8;--mint:#159a7d;--coral:#e65d5d}*{box-sizing:border-box}html{background:var(--surface)}body{min-height:100vh;margin:0;color:var(--ink);background:radial-gradient(circle at 12% 0,rgba(25,118,210,.12),transparent 28rem),var(--surface);font-family:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.experience{width:min(100% - 32px,1080px);margin:auto;padding:24px 0 32px}.experience__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:clamp(36px,6vw,64px)}.experience__brand{display:flex;gap:10px;align-items:center;font-size:15px;font-weight:700;letter-spacing:-.01em}.experience__mark{display:grid;width:34px;height:34px;place-items:center;border-radius:10px;color:#fff;background:var(--blue);box-shadow:0 8px 20px rgba(25,118,210,.24)}.experience__mark svg{width:21px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.experience__badge{display:flex;gap:8px;align-items:center;padding:7px 11px;border:1px solid rgba(21,154,125,.25);border-radius:999px;color:#18735f;background:rgba(226,247,240,.8);font-size:12px;font-weight:500}.experience__badge span{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(21,154,125,.12)}.experience__intro{max-width:720px;margin:0 auto 28px;text-align:center}.experience__eyebrow{margin:0 0 10px!important;color:var(--blue);font-size:11px!important;font-weight:700;letter-spacing:.14em;text-transform:uppercase}.experience__intro h1{max-width:650px;margin:0 auto 16px;color:var(--ink);font-size:clamp(34px,5vw,56px);font-weight:700;line-height:1.04;letter-spacing:-.05em}.experience__intro>p:last-child{max-width:570px;margin:0 auto!important;color:var(--muted);font-size:16px;line-height:1.65}.app-shell{overflow:hidden;border:1px solid rgba(23,32,51,.1);border-radius:24px;background:var(--card);box-shadow:0 24px 70px rgba(30,45,70,.12)}.app-shell .v-application{color:var(--ink)!important;background:transparent!important}.app-shell .v-application--wrap{min-height:0!important}.app-shell .container{max-width:920px!important;padding:clamp(24px,5vw,48px)!important}.app-shell .container>div:first-child{max-width:650px;margin:0 auto 24px;text-align:center}.app-shell .container>div:first-child b{display:block;margin-bottom:8px;color:var(--ink);font-size:20px;line-height:1.3;letter-spacing:-.025em}.app-shell .container>div:first-child p{margin:0!important;color:var(--muted)!important;font-size:14px;line-height:1.6;text-align:center!important}.app-shell .container>.my-3{gap:12px;margin:20px 0!important;flex-wrap:wrap}.app-shell .v-btn{min-height:46px;padding:0 24px!important;border:1px solid var(--line);color:var(--ink)!important;background:#fff!important;box-shadow:0 5px 14px rgba(23,32,51,.08)!important;font-size:12px!important;font-weight:700;letter-spacing:.06em;transition:transform .16s ease,box-shadow .16s ease,background .16s ease}.app-shell .v-btn:first-child,.app-shell .v-btn:last-child{border-color:var(--blue);color:#fff!important;background:var(--blue)!important;box-shadow:0 8px 20px rgba(25,118,210,.24)!important}.app-shell .v-btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(23,32,51,.12)!important}.app-shell .v-btn:first-child:hover,.app-shell .v-btn:last-child:hover{background:var(--blue-dark)!important}.app-shell .v-btn--disabled{border-color:var(--line)!important;color:#8d99aa!important;background:#edf1f5!important;box-shadow:none!important}.app-shell .container>.d-flex.mt-3{min-height:32px;align-items:center}.app-shell .container>.d-flex.mt-3 p{margin:0!important;padding:7px 12px;border-radius:999px;color:#526175;background:#edf2f7;font-size:12px;text-align:center!important}.app-shell #overlay{overflow:hidden!important;border-radius:20px;background:#111827;box-shadow:0 18px 45px rgba(23,32,51,.2)}.app-shell #webcam,.app-shell #mask{max-width:100%;height:auto}.app-shell #results{margin-top:32px;padding-top:4px}.app-shell #results>b{display:block;margin-bottom:16px;color:var(--ink);font-size:18px;letter-spacing:-.02em}.app-shell #results .v-divider{border-color:var(--line)!important}.app-shell #results .chart{height:220px;margin-bottom:20px;padding:14px;border:1px solid var(--line);border-radius:16px;background:#fbfcfe}.app-shell #results ul{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0;padding:0;list-style:none}.app-shell #results li{min-width:0;padding:18px 12px;border:1px solid var(--line);border-radius:14px;color:var(--ink);background:#fbfcfe;font-size:13px;font-weight:700;text-align:center}.experience__footer{display:flex;justify-content:space-between;padding:18px 4px 0;color:#7b8798;font-size:11px;letter-spacing:.03em}.measurement-guide{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:650px;margin:0 auto 24px}.measurement-guide__item{display:flex;gap:9px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:12px;color:#526175;background:#fbfcfe;font-size:12px;font-weight:500}.measurement-guide__item span{display:grid;width:22px;height:22px;flex:0 0 auto;place-items:center;border-radius:50%;color:var(--blue);background:rgba(25,118,210,.1);font-size:10px;font-weight:700}@media(max-width:640px){.experience{width:min(100% - 20px,1080px);padding-top:14px}.experience__header{margin-bottom:32px}.experience__badge{font-size:0;padding:8px}.experience__badge span{margin:0}.experience__intro h1{font-size:34px}.app-shell{border-radius:18px}.app-shell .container{padding:24px 16px!important}.measurement-guide{grid-template-columns:1fr}.app-shell #results ul{grid-template-columns:repeat(2,1fr)}.experience__footer{gap:8px;flex-direction:column;text-align:center}}@media(prefers-reduced-motion:reduce){.app-shell .v-btn{transition:none}}
:root{--camera-layout-gap:16px}
body.camera-active{height:100vh;overflow:hidden}
body.camera-active .experience{display:flex;height:100vh;flex-direction:column;padding-block:var(--camera-layout-gap)}
body.camera-active .experience__header{flex:0 0 auto;margin-bottom:var(--camera-layout-gap)}
body .experience__intro{overflow:hidden;max-height:320px;opacity:1;transform:translateY(0);transition:max-height 420ms cubic-bezier(.22,.8,.25,1),margin 420ms cubic-bezier(.22,.8,.25,1),opacity 220ms ease,transform 420ms cubic-bezier(.22,.8,.25,1),visibility 0s linear}
body.camera-active .experience__intro{visibility:hidden;max-height:0;margin-bottom:0;opacity:0;transform:translateY(-12px);pointer-events:none;transition:max-height 420ms cubic-bezier(.22,.8,.25,1),margin 420ms cubic-bezier(.22,.8,.25,1),opacity 180ms ease,transform 420ms cubic-bezier(.22,.8,.25,1),visibility 0s linear 420ms}
body.camera-active .app-shell{display:flex;min-height:0;flex:1 1 auto}
body.camera-active .app-shell .v-application,body.camera-active .app-shell .v-application--wrap,body.camera-active .app-shell .v-main,body.camera-active .app-shell .v-main__wrap,body.camera-active .app-shell #app{display:flex;width:100%;min-height:0;flex:1 1 auto}
body.camera-active .app-shell .container{display:flex;min-height:0;flex:1 1 auto;flex-direction:column;justify-content:center;padding-block:16px!important}
body.camera-active .app-shell .container>div:first-child{margin-bottom:8px}
body.camera-active .measurement-guide{display:none}
body.camera-active .app-shell .container>.my-3{margin:8px 0!important}
body.camera-active .app-shell .container>.d-flex.mt-3{min-height:24px}
body.camera-active .app-shell .container>.d-flex.mb-3{min-height:0;flex:1 1 auto;margin-bottom:0!important}
body.camera-active .app-shell #overlay{width:auto!important;max-width:100%;height:100%!important;max-height:100%;aspect-ratio:1/1}
body.camera-active .experience__footer{display:none}
@media(max-width:640px){body.camera-active .experience{width:min(100% - 20px,1080px);padding-block:10px}body.camera-active .experience__header{margin-bottom:10px}body.camera-active .app-shell .container>div:first-child{display:none}}
@media(prefers-reduced-motion:reduce){body .experience__intro,body.camera-active .experience__intro{transition:none}}
body.results-active .experience{display:flex;min-height:100vh;flex-direction:column;padding-block:16px}
body.results-active .experience__header{margin-bottom:12px}
body.results-active .experience__intro,body.results-active .experience__footer{display:none}
body.results-active .app-shell{flex:1 1 auto}
body.results-active .app-shell .container{padding:18px 24px!important}
body.results-active .app-shell .container>div:first-child,body.results-active .measurement-guide,body.results-active .app-shell .container>.d-flex.mt-3,body.results-active .app-shell .container>.d-flex.mb-3{display:none!important}
body.results-active .app-shell .container>.my-3{margin:0 0 12px!important}
body.results-active .app-shell #results{margin-top:0;padding-top:0}
body.results-active .app-shell #results>.v-divider{margin:12px 0!important}
body.results-active .app-shell #results>b{margin-bottom:10px;font-size:15px}
body.results-active .app-shell #results .chart{height:145px;margin-bottom:10px;padding:9px;border-radius:12px}
.app-shell #results ul{align-items:stretch}
.app-shell #results .prediction-card{position:relative;overflow:hidden;display:flex;min-height:92px;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:15px 14px;text-align:left}
.app-shell #results .prediction-card:before{position:absolute;inset:0 auto 0 0;width:4px;background:var(--blue);content:""}
.app-shell #results .prediction-card--bmi:before{background:#8b5cf6}.app-shell #results .prediction-card--hr:before{background:#e65d5d}.app-shell #results .prediction-card--rr:before{background:#159a7d}
.prediction-card__label{color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.prediction-card__value{color:var(--ink);font-size:clamp(16px,2.2vw,22px);font-weight:750;line-height:1.2;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
@media(max-width:640px){body.results-active .experience{padding-block:10px}body.results-active .experience__header{margin-bottom:8px}body.results-active .app-shell .container{padding:14px!important}body.results-active .app-shell #results .chart{height:125px}.app-shell #results .prediction-card{min-height:76px;padding:11px 12px}.prediction-card__value{font-size:16px}}