:root {
  --ink:#101828; --muted:#667085; --line:#e4e7ec; --surface:#fff;
  --canvas:#f4f7fb; --aqua:#15b8c8; --lime:#70db75; --navy:#111d31;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",ui-sans-serif,system-ui,sans-serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:radial-gradient(ellipse 65% 45% at 100% 0,rgba(21,184,200,.12),transparent 66%),var(--canvas); color:var(--ink); letter-spacing:-.018em; }
.topbar { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; height:72px; padding:0 max(24px,calc((100vw - 1120px)/2)); border-bottom:1px solid rgba(16,24,40,.07); background:rgba(255,255,255,.84); backdrop-filter:blur(18px); }
.brand { display:flex; align-items:center; color:var(--ink); font-size:20px; font-weight:900; letter-spacing:-.06em; text-decoration:none; }
.brand i { width:10px; height:10px; margin-right:7px; border-radius:50%; background:linear-gradient(135deg,var(--aqua),var(--lime)); }
.topbar nav { display:flex; align-items:center; gap:13px; }.topbar nav>a { color:var(--muted); font-size:12px; font-weight:780; text-decoration:none; }
.roundButton { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:44px; padding:8px 10px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--ink); font:800 12px inherit; cursor:pointer; }.roundButton.theme b { font-size:11px; }
.page { max-width:1120px; margin:auto; padding:64px 24px 74px; }.intro { max-width:700px; }.eyebrow { margin:0 0 10px; color:#087f8b; font-size:10px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
.intro h1 { margin:0; font-size:clamp(41px,5.8vw,70px); line-height:.92; letter-spacing:-.075em; }.intro>p:not(.eyebrow) { max-width:610px; margin:19px 0 0; color:var(--muted); font-size:16px; line-height:1.55; }
.introChips { display:flex; flex-wrap:wrap; gap:7px; margin-top:19px; }.introChips span { padding:7px 9px; border:1px solid #cfe4e6; border-radius:999px; background:#f3fcfc; color:#087f8b; font-size:10px; font-weight:850; }
.privacyNotice { display:flex; gap:11px; align-items:flex-start; max-width:760px; margin-top:20px; padding:13px 15px; border:1px solid #c8e8ea; border-radius:15px; background:#f1fbfc; color:#35616a; font-size:11px; line-height:1.5; }.privacyNotice b { flex:0 0 auto; color:#087f8b; }
.workspace { display:grid; grid-template-columns:340px minmax(0,1fr); gap:18px; margin-top:30px; align-items:start; }.setupCard,.photoCard,.resultCard { border:1px solid var(--line); border-radius:24px; background:var(--surface); box-shadow:0 19px 55px rgba(16,24,40,.07); }.setupCard { position:sticky; top:92px; padding:21px; }.analysisColumn { display:grid; gap:16px; min-width:0; }.photoCard,.resultCard { padding:23px; }
.cardHead,.photoHead,.resultHead { display:flex; align-items:center; gap:12px; }.photoHead,.resultHead { justify-content:space-between; align-items:flex-start; }.glyph { display:grid; place-items:center; width:42px; height:42px; flex:0 0 auto; border-radius:13px; background:var(--navy); color:#a9ef87; font-size:20px; font-weight:900; }.cardHead h2,.photoHead h2,.resultHead h2 { margin:0; font-size:21px; letter-spacing:-.05em; }.cardHead p,.photoHead>span,.resultHead>span { margin:3px 0 0; color:var(--muted); font-size:10px; line-height:1.4; }.photoHead>span,.resultHead>span { max-width:155px; text-align:right; }
.shootingGuide { display:grid; gap:9px; margin:19px 0; padding:0; list-style:none; }.shootingGuide li { display:grid; grid-template-columns:22px 1fr; gap:9px; color:#475467; font-size:11px; line-height:1.42; }.shootingGuide i,.previewSteps i { display:grid; place-items:center; width:21px; height:21px; border-radius:7px; background:#effbfc; color:#087f8b; font-size:9px; font-style:normal; font-weight:900; }
.landmarkGuide { margin:14px 0; padding:12px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.landmarkGuide summary { cursor:pointer; color:var(--ink); font-size:11px; font-weight:850; }.landmarkGuide dl { display:grid; gap:7px; margin:10px 0 0; }.landmarkGuide div { display:grid; grid-template-columns:72px 1fr; gap:8px; }.landmarkGuide dt { color:#344054; font-size:10px; font-weight:850; }.landmarkGuide dd { margin:0; color:var(--muted); font-size:10px; line-height:1.4; }
.fieldLabel { display:block; margin:14px 0 6px; color:#344054; font-size:11px; font-weight:800; }.setupCard select,.measurementGrid input,.saveRow input { width:100%; height:43px; padding:0 11px; border:1px solid #d7dde7; border-radius:11px; background:#fff; color:var(--ink); font:750 13px inherit; outline:0; }.setupCard select:focus,.measurementGrid input:focus,.saveRow input:focus { border-color:var(--aqua); box-shadow:0 0 0 3px rgba(21,184,200,.12); }.hint { margin:6px 0 0; color:var(--muted); font-size:10px; line-height:1.4; }
.measurements { margin-top:15px; padding:13px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.measurements summary { cursor:pointer; color:var(--ink); font-size:11px; font-weight:850; }.measurements p { margin:8px 0; color:var(--muted); font-size:10px; line-height:1.4; }.measurementGrid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.measurementGrid label,.saveRow label { display:grid; gap:5px; color:#475467; font-size:10px; font-weight:800; }.measurementGrid input { height:38px; }
.photoActions { display:grid; gap:8px; margin-top:17px; }.primaryAction,.secondaryAction { display:flex; align-items:center; justify-content:center; width:100%; min-height:43px; padding:8px; border-radius:11px; font:850 11px inherit; cursor:pointer; text-align:center; }.primaryAction { border:0; background:var(--navy); color:#fff; }.secondaryAction { border:1px solid var(--line); background:#fff; color:var(--ink); }.localNote { margin:12px 0 0; padding:10px; border-radius:11px; background:#f6f8fa; color:var(--muted); font-size:10px; line-height:1.45; }
.photoHint { margin-top:8px; }
.emptyResult { display:grid; place-items:center; min-height:205px; text-align:center; }.emptyResult i { display:grid; place-items:center; width:52px; height:52px; margin-bottom:13px; border-radius:16px; background:#effbfc; color:#087f8b; font-size:23px; font-style:normal; }.emptyResult b { font-size:17px; }.emptyResult span { max-width:315px; margin-top:8px; color:var(--muted); font-size:11px; line-height:1.5; }.previewSteps { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:14px 0 0; padding:0; list-style:none; }.previewSteps li { display:grid; grid-template-columns:21px 1fr; gap:7px; align-items:start; padding:10px; border:1px solid var(--line); border-radius:12px; color:var(--muted); font-size:9px; line-height:1.38; }.previewSteps b { display:block; color:var(--ink); font-size:10px; }
.captureTabs { display:flex; gap:7px; margin-top:15px; padding-bottom:2px; border-bottom:1px solid var(--line); }.captureTabs button { flex:1; min-height:35px; padding:7px; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--muted); font:850 10px inherit; cursor:pointer; }.captureTabs button.isReady { color:#087f8b; }.captureTabs button.isActive { border-bottom-color:var(--aqua); color:var(--ink); }
.pointHelp { margin:14px 0 0; padding:10px 12px; border-radius:11px; background:#effbfc; color:#35616a; font-size:11px; line-height:1.4; }.photoFrame { position:relative; width:100%; margin-top:12px; overflow:hidden; border-radius:16px; background:#172235; line-height:0; }.photoFrame img { display:block; width:100%; max-height:650px; object-fit:contain; }.photoFrame svg { position:absolute; inset:0; width:100%; height:100%; touch-action:none; }.poseLine { stroke:#bff12c; stroke-width:7; stroke-linecap:round; opacity:.95; }.posePoint { cursor:grab; }.posePoint circle { fill:#fff; stroke:#ed4d5d; stroke-width:8; filter:drop-shadow(0 3px 4px rgba(0,0,0,.32)); }.posePoint.isUnconfirmed circle { fill:#ffd86a; stroke:#755b00; }.posePoint.isActive circle,.posePoint.isActive.isUnconfirmed circle { fill:#ed4d5d; stroke:#fff; stroke-width:7; }.posePoint text { fill:#fff; font:700 24px system-ui,sans-serif; paint-order:stroke; stroke:#101828; stroke-width:7; stroke-linejoin:round; }
.pointList { display:flex; flex-wrap:wrap; gap:7px; margin-top:13px; }.pointList button,.quietButton { padding:7px 9px; border:1px solid var(--line); border-radius:999px; background:#fff; color:#344054; font:800 10px inherit; cursor:pointer; }.pointList button:hover,.pointList button:focus-visible { border-color:var(--aqua); color:#087f8b; }.keyboardHint,.saveHint { margin:10px 0 0; color:var(--muted); font-size:10px; line-height:1.4; }
.angleGrid { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; margin-top:18px; }.angleGrid article { padding:14px; border:1px solid var(--line); border-radius:15px; }.angleGrid article[data-status="review"] { border-color:#f0c480; background:#fffaf1; }.angleGrid span { display:block; color:#667085; font-size:9px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }.angleGrid b { display:block; margin:4px 0 8px; font-size:30px; letter-spacing:-.06em; }.angleGrid strong { display:block; margin-bottom:5px; color:#344054; font-size:11px; }.angleGrid p { margin:0; color:var(--muted); font-size:10px; line-height:1.43; }.angleGrid small { display:block; margin-top:9px; padding-top:8px; border-top:1px solid var(--line); color:#475467; font-size:10px; font-weight:700; line-height:1.43; }.interpretation { margin-top:13px; padding:13px 14px; border:1px solid #c7e8eb; border-radius:14px; background:#effbfc; color:#35616a; }.interpretation b { color:#087f8b; font-size:11px; }.interpretation p { margin:4px 0 0; font-size:10px; line-height:1.5; }.saddleReference { margin-top:13px; padding:13px 14px; border:1px solid #d8ddea; border-radius:14px; background:#f6f8fc; color:#475467; }.saddleReference b { display:block; color:#344054; font-size:11px; }.saddleReference p:not(.eyebrow) { margin:4px 0 0; font-size:10px; line-height:1.5; }
.topPositionResult { margin-top:13px; padding:13px 14px; border:1px solid #d8ddea; border-radius:14px; background:#f6f8fc; color:#475467; }.topPositionResult b { display:block; color:#344054; font-size:11px; }.topPositionResult p:not(.eyebrow) { margin:5px 0 0; font-size:10px; line-height:1.5; }.topMetric { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:10px; }.topMetric span { display:grid; gap:3px; padding:9px; border-radius:10px; background:#fff; color:var(--muted); font-size:9px; font-weight:850; text-transform:uppercase; }.topMetric strong { color:var(--ink); font-size:19px; letter-spacing:-.05em; }
.calculationMethod { margin-top:12px; border:1px solid var(--line); border-radius:13px; }.calculationMethod summary { padding:11px 12px; cursor:pointer; color:var(--ink); font-size:11px; font-weight:850; }.calculationMethod p { margin:0; padding:0 12px 12px; color:var(--muted); font-size:10px; line-height:1.5; }
.saveRow { display:grid; grid-template-columns:1fr auto; gap:9px; align-items:end; margin-top:18px; }.saveRow button { min-height:43px; }.comparison { margin-top:16px; padding:15px; border:1px solid #cce8ce; border-radius:15px; background:#f4fbf4; }.comparison h3 { margin:0; color:#344054; font-size:14px; }.compareGrid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:11px; }.compareGrid div { padding:9px; border-radius:10px; background:#fff; }.compareGrid span,.compareGrid small { display:block; color:var(--muted); font-size:9px; font-weight:800; }.compareGrid b { display:block; margin:4px 0; color:#344054; font-size:12px; }.compareGrid small { color:#35743a; }.quietButton { margin-top:11px; background:transparent; }
.safety { margin-top:18px; padding:18px 20px; border:1px solid #f0c480; border-radius:17px; background:#fff7ea; color:#70430d; }.safety b { font-size:12px; }.safety p { margin:5px 0 0; font-size:11px; line-height:1.5; }footer { display:flex; justify-content:space-between; gap:20px; max-width:1120px; margin:auto; padding:25px 24px 42px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; }footer nav { display:flex; gap:15px; }footer a { color:inherit; text-decoration:none; }
.photoFileInput { position:absolute!important; width:1px!important; height:1px!important; margin:-1px!important; padding:0!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }.srOnly { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.resultSources { margin:12px 0 0; color:var(--muted); font-size:9px; line-height:1.45; }.resultSources a { color:#087f8b; font-weight:800; }
html[data-theme="dark"] { --ink:#f5f7fb; --muted:#a8b4c6; --line:rgba(192,211,236,.16); --surface:#101a2b; --canvas:#07101d; --navy:#eaf3ff; }html[data-theme="dark"] body { background:radial-gradient(ellipse 65% 45% at 100% 0,rgba(51,183,198,.15),transparent 66%),var(--canvas); }html[data-theme="dark"] .topbar { background:rgba(7,16,29,.86); }html[data-theme="dark"] .roundButton,html[data-theme="dark"] .setupCard select,html[data-theme="dark"] .measurementGrid input,html[data-theme="dark"] .saveRow input,html[data-theme="dark"] .secondaryAction,html[data-theme="dark"] .pointList button { background:#0a1423; color:var(--ink); }html[data-theme="dark"] .glyph,html[data-theme="dark"] .primaryAction { background:#eaf3ff; color:#111d31; }html[data-theme="dark"] .localNote { background:#162438; }html[data-theme="dark"] .comparison { background:#162b1a; border-color:rgba(145,226,154,.3); }html[data-theme="dark"] .compareGrid div { background:#101a2b; }html[data-theme="dark"] .safety { background:#332516; border-color:rgba(255,191,112,.45); color:#ffdcae; }
html[data-theme="dark"] .topPositionResult,html[data-theme="dark"] .saddleReference { background:#162438; }html[data-theme="dark"] .topMetric span { background:#0a1423; color:var(--muted); }
@media(max-width:850px) { .workspace { grid-template-columns:1fr; }.setupCard { position:static; }.previewSteps { grid-template-columns:1fr; } }@media(max-width:600px) { .topbar { height:64px; padding:0 15px; }.topbar nav>a { display:none; }.roundButton.theme b { display:none; }.page { padding:42px 15px 52px; }.intro h1 { font-size:clamp(41px,13vw,57px); }.privacyNotice { display:grid; gap:5px; }.photoCard,.resultCard,.setupCard { padding:17px; border-radius:20px; }.photoHead,.resultHead { display:grid; }.photoHead>span,.resultHead>span { text-align:left; }.angleGrid,.saveRow,.compareGrid { grid-template-columns:1fr; }footer { display:grid; padding:22px 15px 34px; }footer nav { flex-wrap:wrap; } }@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; } }