:root { color-scheme: dark; }
.ar-picker { margin-bottom: 20px; }
.ar-picker label { display:block; font:600 12px/1.5 system-ui,sans-serif; color:#b2ddeb; margin-bottom:8px; }
.ar-picker select { width:100%; min-height:50px; border:1px solid #78bbd1; border-radius:8px; background:#092438; color:white; font:14px system-ui,sans-serif; padding:12px 14px; }
.ar-picker p { margin:12px 0 4px; color:#9fd9eb; font:12px/1.5 system-ui,sans-serif; }
.ar-back-link { font:12px/1.6 system-ui,sans-serif; color:#d8f6ff; text-underline-offset:3px; }
.ar-back-link[hidden] { display:none; }
.ar-model-gallery { margin-top:65px; }
.ar-model-gallery h2 { font-size:36px; }
.ar-model-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px; }
.ar-gallery-card { display:block;border:1px solid #426581;border-radius:12px;overflow:hidden;padding:0;text-align:left;color:white;background:#0a2439;cursor:pointer; }
.ar-gallery-card img { display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:#09243a; }
.ar-gallery-card span { display:block;padding:17px; }
.ar-gallery-card small { display:block;font:11px/1.5 system-ui,sans-serif;color:#a3d5e8;margin-bottom:5px; }
.ar-gallery-card strong { display:block;font:600 16px/1.4 system-ui,sans-serif; }
.ar-gallery-card:hover { border-color:#a9edff; }
@media(max-width:750px){.ar-model-grid{grid-template-columns:1fr 1fr;gap:12px}.ar-gallery-card span{padding:12px}.ar-gallery-card strong{font-size:14px}}
.ar-intro { padding-top: 32px; padding-bottom: 34px; }
.ar-intro h1 { max-width: 900px; font-size: clamp(44px, 6vw, 78px); line-height: 1.05; margin: 22px 0; }
.ar-intro .lead { max-width: 720px; }
.ar-lab { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr); gap: 26px; align-items: start; padding-bottom: 76px; }
.ar-demo, .ar-share { border: 1px solid #3c6e89; background: linear-gradient(145deg, #0a2540, #06182b); border-radius: 18px; padding: 24px; min-width: 0; box-shadow: 0 18px 54px #0003; }
.ar-demo-heading { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 22px; }
.ar-demo-heading h2 { font-size: 26px; margin: 0; }
.ar-badge { font: 11px/1.5 system-ui, sans-serif; letter-spacing: .03em; color: #a6e9fa; background: #0c3b50; border: 1px solid #32687d; border-radius: 20px; padding: 5px 12px; }
.ar-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.ar-choice { display: flex; align-items: center; gap: 12px; padding: 10px; min-height: 82px; text-align: left; color: #f3f9ff; border: 1px solid #38556d; border-radius: 12px; background: #081d32; cursor: pointer; font: inherit; transition: border-color .18s, background .18s; }
.ar-choice[aria-pressed="true"] { border-color: #88e7ff; background: #103349; box-shadow: inset 0 0 0 1px #88e7ff; }
.ar-choice:hover { background: #13354c; }
.ar-choice img { flex: 0 0 68px; width: 68px; height: 60px; object-fit: cover; border-radius: 8px; background: white; }
.ar-choice strong, .ar-choice small { display: block; }
.ar-choice strong { font-size: 15px; }
.ar-choice small { font-size: 11px; margin-top: 5px; color: #c1d3df; }
.ar-stage { height: clamp(340px, 40vw, 510px); position: relative; border: 1px solid #31546e; border-radius: 13px; overflow: hidden; background: radial-gradient(ellipse at 50% 74%, #16405a, #051426 70%); }
model-viewer { display: block; width: 100%; height: 100%; --poster-color: #081b2e; --progress-bar-color: #8feaff; }
.ar-cover { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; gap: 14px; justify-content: center; align-items: center; padding: 24px; text-align: center; background: radial-gradient(circle at 50% 40%, #123c57, #06162a 80%); }
.ar-cover svg { width: 76px; height: 76px; stroke: #95e7ff; stroke-width: 1; fill: none; filter: drop-shadow(0 0 20px #26bdea55); }
.ar-cover p { margin: 4px 0; max-width: 280px; }
.ar-cover small { color: #bbcfdf; }
.ar-cover[hidden] { display: none; }
.ar-stage-label { position: absolute; left: 16px; bottom: 14px; pointer-events: none; font: 10px/1.4 system-ui, sans-serif; color: #d1e2ec; letter-spacing: .13em; }
.ar-controls { display: flex; gap: 12px; margin: 18px 0 12px; flex-wrap: wrap; }
.ar-lab .button { font: 600 13px/1.4 system-ui, sans-serif; cursor: pointer; border-radius: 8px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 12px 17px; text-decoration: none; }
.ar-lab .button:disabled { opacity: .5; cursor: default; }
.ar-native-button { position: absolute; bottom: 45px; left: 50%; transform: translateX(-50%); border: 1px solid #8feaff; border-radius: 24px; background: #08263de8; color: white; font: 600 13px system-ui; padding: 14px 20px; cursor: pointer; white-space: nowrap; }
.ar-status { min-height: 48px; color: #9fe7ff; font: 14px/1.7 system-ui, sans-serif; margin: 10px 0; }
.ar-caption, .ar-small { color: #bdcddc; font: 12px/1.8 system-ui, sans-serif; }
.ar-caption { border-top: 1px solid #29445b; padding-top: 15px; margin-bottom: 0; }
.ar-share h2 { font-size: 35px; line-height: 1.13; margin: 15px 0 22px; }
.ar-qr { background: white; color: #061526; border-radius: 12px; width: min(100%, 230px); aspect-ratio: 1; padding: 13px; margin: 0 auto; display: grid; place-items: center; }
.ar-qr svg { width: 100%; height: auto; display: block; }
.ar-qr-label { font-size: 13px; text-align: center; color: #aee5f4; }
.ar-steps { padding-left: 24px; margin: 22px 0; font: 13px/1.8 system-ui, sans-serif; color: #d5e2ec; }
.ar-steps li + li { margin-top: 9px; }
.ar-share label { display: block; color: #d0e1ef; font-size: 12px; margin-bottom: 8px; }
.ar-share input { display: block; width: 100%; box-sizing: border-box; padding: 13px 10px; color: #e4f4ff; background: #06172c; border: 1px solid #55718a; border-radius: 7px; font: 11px/1.5 ui-monospace, monospace; }
.ar-share-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 12px; }
.ar-share-actions .button { flex: 1; padding: 10px; }
.ar-share-actions [aria-disabled="true"] { opacity: .5; pointer-events: none; }
.ar-information { padding-bottom: 76px; }
.ar-information > h2 { font-size: clamp(36px, 4vw, 54px); line-height: 1.12; margin: 18px 0 30px; }
.ar-info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ar-info-grid article { padding: 25px; background: #0a253c; border: 1px solid #365771; border-radius: 13px; }
.ar-info-grid span { color: #98def2; font-size: 10px; letter-spacing: .12em; }
.ar-info-grid h3 { font-size: 25px; line-height: 1.2; margin: 18px 0 12px; }
.ar-info-grid p, .ar-compatibility p { font: 14px/1.8 system-ui, sans-serif; color: #c5d6e5; }
.ar-compatibility { border-left: 2px solid #87d8ee; padding: 5px 0 5px 24px; margin: 36px 0; max-width: 960px; }
.ar-compatibility h3 { font-size: 24px; margin-top: 0; }
.ar-credits { margin-top: 30px; font: 12px/1.8 system-ui, sans-serif; color: #c7d9e7; }
.ar-credits summary { cursor: pointer; padding: 10px 0; }
.ar-credits a { color: #a8e6fb; }
.ar-lab :focus-visible, .ar-information :focus-visible { outline: 3px solid #b4efff; outline-offset: 4px; }
@media (max-width: 850px) {
  .ar-lab { grid-template-columns: 1fr; }
  .ar-share { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
  .ar-share .kicker, .ar-share h2, .ar-share label, .ar-share input, .ar-share-actions, #share-status, .ar-share > .ar-small { grid-column: 1 / -1; }
  .ar-qr { grid-row: span 2; align-self: center; }
  .ar-steps { margin-top: 0; }
  .ar-info-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .ar-intro { padding-top: 22px; }
  .ar-demo, .ar-share { padding: 16px; border-radius: 12px; }
  .ar-stage { height: 350px; }
  .ar-choice { padding: 8px; gap: 8px; flex-direction: column; align-items: flex-start; }
  .ar-choice img { height: 67px; width: 100%; flex-basis: auto; }
  .ar-choices { gap: 10px; }
  .ar-share { display: block; }
  .ar-share label { margin-top: 22px; }
  .ar-controls .button { width: 100%; }
  .ar-stage-label { font-size: 9px; }
  .ar-lab { padding-bottom: 50px; }
}
@media (prefers-reduced-motion: reduce) { .ar-choice { transition: none; } }
.ar-details { margin-top:20px; border-top:1px solid #31546e; padding-top:18px; }
.ar-details[hidden], .ar-detail-card[hidden] { display:none; }
.ar-details h3 { margin:0 0 8px; font:600 20px/1.3 system-ui,sans-serif; }
.ar-detail-hint { font:12px/1.7 system-ui,sans-serif; color:#bed4df; margin:0 0 14px; }
.ar-detail-options { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.ar-detail-option { min-height:48px; padding:10px 12px; text-align:left; border:1px solid #527389; border-radius:8px; color:#e9f8ff; background:#0a2336; font:600 12px/1.5 system-ui,sans-serif; cursor:pointer; }
.ar-detail-option[aria-pressed="true"] { background:#16455a; border-color:#9beaff; }
.ar-detail-option:disabled { opacity:.45; cursor:default; }
.ar-detail-card { margin-top:14px; padding:17px; background:#082a3b; border:1px solid #7ba8b6; border-radius:10px; }
.ar-detail-card h4 { font:600 18px/1.4 system-ui,sans-serif; margin:0 0 9px; color:#a9ecff; }
.ar-detail-card p { font:14px/1.75 system-ui,sans-serif; margin:0 0 12px; color:#d6e4eb; }
.ar-detail-card a { display:block; font:12px/1.6 system-ui,sans-serif; color:#e5c382; margin-bottom:14px; }
.ar-detail-card a[hidden] { display:none; }
.ar-hotspot { display:grid;place-items:center;min-width:36px;min-height:36px;width:36px;height:36px;border-radius:50%;border:2px solid #e8f9ff;background:#072b3ee8;color:#fff;font:700 13px/1 system-ui,sans-serif;box-shadow:0 0 0 5px #a2eaff20,0 4px 14px #0006;cursor:pointer;--min-hotspot-opacity:.18;opacity:var(--hotspot-opacity,1); }
.ar-hotspot[aria-pressed="true"] { background:#f1cc8a;color:#091828;box-shadow:0 0 0 7px #f1cc8a26; }
.ar-hotspot:disabled { visibility:hidden; }
model-viewer[ar-status="session-started"] .ar-hotspot { min-width:44px;min-height:44px; }
@media(max-width:520px){.ar-detail-options{grid-template-columns:1fr}.ar-detail-card{padding:14px}.ar-hotspot{width:44px;height:44px;min-height:44px;min-width:44px}}

.ar-android-help[hidden]{display:none}.ar-android-help{margin:18px 0;padding:16px;background:#113147;border:1px solid #76b8cc;border-radius:10px;font:14px/1.7 system-ui}.ar-android-help summary{font-weight:700;cursor:pointer}.ar-android-actions{display:flex;gap:9px;flex-wrap:wrap}.ar-android-actions .button{min-height:44px;font-size:12px}