:root { color-scheme: light; --paper:#faf9f6; --ink:#252d2a; --muted:#6a7068; --line:#dedfd5; --olive:#59664b; --canvas:#eaece5; font-family:"Segoe UI",Arial,sans-serif; color:var(--ink); }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; display:grid; grid-template-columns:284px minmax(0,1fr); min-height:100dvh; background:var(--canvas); }
button,select,input { font:inherit; }
button,select,summary,.switch-row { cursor:pointer; }
button:focus-visible,select:focus-visible,summary:focus-visible,canvas:focus-visible,input:focus-visible,input:focus-visible + .switch { outline:3px solid #687d51; outline-offset:4px; }
button { color:var(--ink); }
.sidebar { height:100dvh; overflow-y:auto; display:flex; flex-direction:column; background:var(--paper); border-right:1px solid var(--line); padding:30px 27px 22px; z-index:2; }
.wordmark { display:flex; align-items:center; font-size:12px; letter-spacing:2.5px; font-weight:650; gap:9px; }
.mark { font-size:28px; line-height:1; font-weight:400; color:var(--olive); }
.edition { margin-left:auto; font-size:10px; letter-spacing:1px; color:var(--muted); }
.project-heading { margin:55px 0 25px; }
.eyebrow { margin:0 0 14px; font-size:10px; letter-spacing:1.9px; color:var(--olive); font-weight:650; }
h1 { font-size:34px; font-weight:450; letter-spacing:-1.6px; line-height:1.12; margin:0; }
.title-dot { color:var(--olive); }
.intro { color:var(--muted); font-size:13px; line-height:1.7; margin:17px 0 0; }
.specifications { border-top:1px solid var(--line); }
.roof-choice { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px; grid-column:1/-1; }
.roof-choice a { color:var(--olive); border:1px solid var(--line); border-radius:6px; padding:8px 10px; text-decoration:none; font-size:12px; }
.roof-choice a[aria-current="page"] { color:white; background:var(--olive); border-color:var(--olive); }
summary { list-style:none; font-size:12px; font-weight:600; padding:20px 0 8px; display:flex; justify-content:space-between; }
summary::-webkit-details-marker { display:none; }
summary span { color:var(--muted); }
.specifications:not([open]) summary span { font-size:0; }
.specifications:not([open]) summary span::after { content:"+"; font-size:12px; }
.metrics { margin:8px 0 18px; }
.metrics > div { display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding:10px 0; }
dt { font-size:12px; color:var(--muted); }
dd { margin:0; font-size:15px; font-weight:500; white-space:nowrap; font-variant-numeric:tabular-nums; }
dd small { font-size:12px; color:var(--muted); font-weight:400; }
.finish { display:flex; flex-wrap:wrap; gap:10px 15px; font-size:11px; color:var(--muted); margin-bottom:24px; }
.finish span { display:flex; align-items:center; gap:7px; }
.swatch { width:12px; height:12px; border:1px solid #c9c9c0; border-radius:50%; display:inline-block; }
.swatch.light { background:#f1ede1; }.swatch.dark { background:#363d40; border-color:#363d40; }
.settings { border-top:1px solid var(--line); padding-top:22px; }
.access-settings { border-top:1px solid var(--line); margin-top:10px; padding-top:14px; }
.access-settings > button { width:100%; min-height:42px; padding:8px 10px; border:1px solid var(--olive); border-radius:7px; background:var(--olive); color:white; font-size:12px; }
.access-settings > button:hover { background:#46533b; }
.access-note { margin:0 0 4px; color:var(--muted); font-size:11px; line-height:1.5; }
.setting-label { display:block; font-size:12px; font-weight:600; margin-bottom:10px; }
.lid-label { display:block; font-size:11px; color:var(--muted); margin:0 0 7px; }
select:disabled { opacity:.6; cursor:default; }
select { width:100%; min-height:44px; border:1px solid var(--line); border-radius:7px; background:#fffefa; padding:8px 9px; font-size:12px; color:var(--ink); }
.switch-row { display:flex; position:relative; align-items:center; justify-content:space-between; gap:10px; min-height:55px; font-size:12px; }
.switch-row input { position:absolute; width:38px; height:24px; right:0; opacity:0; }
.switch { width:34px; height:20px; border-radius:20px; background:#cccec3; padding:3px; flex-shrink:0; transition:background .18s; }
.switch::after { content:""; display:block; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 1px 3px #0002; transition:transform .18s; }
input:checked + .switch { background:var(--olive); }input:checked + .switch::after { transform:translateX(14px); }
.sidebar-foot { display:flex; align-items:center; gap:7px; margin-top:auto; padding-top:30px; font-size:10px; color:var(--muted); }
.status-dot,.live-label span { width:5px; height:5px; border-radius:50%; background:#7b8b60; display:inline-block; }
.version { margin-left:auto; }
#viewer { height:100dvh; min-height:580px; position:relative; overflow:hidden; background:#e6e9e0; }
#scene { position:absolute; inset:0 0 217px; }
canvas { display:block; width:100%; height:100%; touch-action:none; cursor:grab; }
canvas:active { cursor:grabbing; }
.viewer-header { position:absolute; z-index:1; top:30px; left:34px; right:30px; display:flex; align-items:center; justify-content:space-between; pointer-events:none; gap:16px; }
.view-label { font-size:10px; font-weight:600; letter-spacing:2.2px; color:#5d6855; }
.live-label { display:flex; align-items:center; gap:8px; font-size:11px; color:#5e665c; }
.settings-link { display:none; pointer-events:auto; color:#526341; font-size:11px; text-underline-offset:3px; }
.view-presets { position:absolute; left:50%; bottom:161px; transform:translateX(-50%); display:flex; gap:3px; background:#faf9f3ed; padding:5px; border:1px solid #d9dcd0; border-radius:12px; box-shadow:0 5px 20px #313a2510; max-width:calc(100% - 32px); }
.view-presets button { border:0; background:transparent; border-radius:8px; padding:12px 16px; min-height:44px; white-space:nowrap; font-size:12px; transition:background .15s,color .15s; }
.view-presets button[aria-pressed="true"] { background:var(--olive); color:#fff; }
.view-presets button:hover:not([aria-pressed="true"]) { background:#e9ecdf; }
.camera-tools { position:absolute; right:27px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; padding:5px; background:#faf9f3ed; border:1px solid #d9dcd0; border-radius:12px; box-shadow:0 5px 20px #313a2510; }
.camera-tools button { width:40px; height:40px; border:0; background:transparent; border-radius:7px; font-size:23px; line-height:1; }
.camera-tools button:hover { background:#e6eadc; }
.tool-divider { height:1px; background:var(--line); margin:4px; }
.viewer-footer { position:absolute; bottom:25px; left:34px; right:30px; display:flex; justify-content:space-between; gap:16px; font-size:11px; color:#626b5d; pointer-events:none; }
.viewer-footer b { font-weight:400; margin:0 7px; color:#99a08e; }
.units { font-variant-numeric:tabular-nums; white-space:nowrap; }.touch-help { display:none; }
#loading { position:absolute; z-index:3; left:50%; top:45%; transform:translate(-50%,-50%); padding:20px; max-width:80%; color:var(--ink); background:var(--paper); border-radius:8px; font-size:14px; line-height:1.6; }
#dimension-labels,#access-labels { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.dimension-label { position:absolute; transform:translate(-50%,-50%); padding:4px 8px; border-radius:4px; background:#faf9f3ee; color:#3d5033; font-size:12px; font-weight:600; white-space:nowrap; box-shadow:0 1px 4px #27351d12; }
.access-label { position:absolute; transform:translate(-50%,-50%); padding:4px 8px; border-radius:4px; background:#faf9f3eb; color:#3d5033; font-size:11px; font-weight:600; white-space:nowrap; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.fit-summary { margin-top:14px; padding:13px 12px; background:#f1e6df; border-left:3px solid #aa533c; border-radius:0 7px 7px 0; }
.fit-summary[data-fit="true"] { background:#e9eddf; border-color:var(--olive); }
.fit-summary strong { font-size:13px; font-weight:600; }
.fit-summary p { font-size:11px; line-height:1.55; margin:7px 0 0; }
.vehicle-settings { border-top:1px solid var(--line); margin-top:15px; }
.vehicle-settings p,.vehicle-settings label { font-size:11px; line-height:1.55; color:var(--muted); }
.vehicle-settings label { display:block; color:var(--ink); }
.vehicle-settings input { display:block; width:100%; margin-top:8px; padding:8px; border:1px solid var(--line); border-radius:6px; color:var(--ink); background:#fffefa; }
.vehicle-settings input:invalid { border-color:#aa533c; }
.source-links a { color:#4b603b; text-underline-offset:3px; }
.playback { position:absolute; bottom:49px; left:50%; transform:translateX(-50%); width:min(560px,calc(100% - 32px)); padding:12px 14px 9px; border:1px solid #d9dcd0; border-radius:12px; background:#faf9f6f5; box-shadow:0 5px 20px #313a2510; }
.playback-top { display:flex; align-items:center; gap:8px; font-size:12px; margin-bottom:7px; min-height:24px; }
.gear { display:inline-grid; place-items:center; width:24px; height:24px; border-radius:5px; background:var(--olive); color:#fff; font-weight:650; flex-shrink:0; }
.gear[data-gear="R"] { background:#a36c34; }.gear[data-gear="P"] { background:#73796d; }
#drive-stage { flex:1; line-height:1.3; }#drive-time { font-size:11px; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums; }
.playback-controls { display:flex; align-items:center; gap:8px; }.playback button { border:1px solid var(--line); background:#fffefa; border-radius:6px; min-height:38px; padding:6px 10px; font-size:12px; white-space:nowrap; }.playback #drive-play { min-width:102px; background:var(--olive); color:white; border-color:var(--olive); }.playback button:disabled { opacity:.5; cursor:default; }
.playback input { min-width:30px; flex:1; width:0; height:28px; accent-color:var(--olive); cursor:pointer; }
#drive-note { margin:5px 0 0; font-size:10px; line-height:1.4; color:var(--muted); }
.playback[data-blocked="true"] { border-color:#bb7761; }.playback[data-blocked="true"] .gear { background:#aa533c; }
body[data-mode="outside"] [data-interior],body[data-mode="inside"] [data-exterior] { display:none; }
.mode-switch { position:absolute; z-index:2; top:61px; left:34px; display:flex; gap:3px; padding:4px; border:1px solid var(--line); border-radius:9px; background:#faf9f6f2; }
.mode-switch button { min-height:44px; padding:8px 20px; border:0; border-radius:6px; background:transparent; font-size:13px; }
.mode-switch button[aria-pressed="true"] { color:white; background:var(--olive); }
.mode-switch button:hover:not([aria-pressed="true"]) { background:#e9ecdf; }
.interior-panel { border-top:1px solid var(--line); padding-top:19px; }
.interior-panel h2 { font-size:19px; font-weight:500; letter-spacing:-.3px; margin:0 0 12px; }
.interior-panel p { font-size:13px; line-height:1.65; color:var(--muted); margin:12px 0; }
.interior-panel .metrics { margin:16px 0; }
.interior-panel .interior-assumption { border-left:2px solid #b49b71; padding-left:11px; font-size:12px; }
body[data-mode="inside"] #scene { bottom:123px; }
.interior-presets { bottom:60px; }
.walk-controls { position:absolute; left:27px; bottom:143px; display:grid; grid-template-columns:repeat(3,44px); gap:5px; padding:10px; border:1px solid var(--line); border-radius:10px; background:#faf9f6f2; }
.walk-controls span { grid-column:1/-1; font-size:11px; color:var(--muted); text-align:center; margin-bottom:3px; }
.walk-controls button { width:44px; height:44px; border:1px solid var(--line); border-radius:6px; background:#fffefa; font-size:22px; }
.walk-controls button:hover { background:#e9ecdf; }
.walk-controls [data-step="forward"] { grid-column:2; }
.walk-controls [data-step="left"] { grid-column:1; }
body[data-inside-view="plan"] .walk-controls { display:none; }
@media (max-width:1150px) { .view-presets button { padding:11px 10px; font-size:11px; }.viewer-footer .units { display:none; }.sidebar { padding-inline:22px; }body { grid-template-columns:260px minmax(0,1fr); }.live-label { display:none; } }
@media (max-width:760px) {
  body { display:flex; flex-direction:column; }.sidebar { order:2; height:auto; overflow:visible; min-height:0; padding:18px 20px 12px; border-right:0; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
  .wordmark { grid-column:1/-1; font-size:10px; }.mark { font-size:24px; }.project-heading { margin:18px 0 12px; }.eyebrow,.intro { display:none; }h1 { font-size:24px; letter-spacing:-.8px; }
  .specifications { grid-column:1/-1; order:3; }.specifications summary { padding:12px 0; }.metrics { display:grid; grid-template-columns:1fr 1fr; gap:0 24px; margin-bottom:6px; }.metrics > div { padding:6px 0; }.finish { margin:8px 0 12px; }
  .settings { border:0; padding:12px 0 0; }.setting-label { display:none; }select { font-size:14px; min-height:42px; }.switch-row { min-height:40px; }.sidebar-foot { display:none; }
  .access-settings { grid-column:1/-1; order:2; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:3px 16px; margin-top:0; padding-top:10px; }.access-note { grid-column:1/-1; font-size:10px; margin-bottom:6px; }
  .fit-summary { grid-column:1/-1; order:3; margin-top:5px; }.fit-summary p { margin-top:4px; }.vehicle-settings { grid-column:1/-1; order:4; margin-top:10px; }.vehicle-settings summary { padding:10px 0; }
  #viewer { order:1; height:100dvh; min-height:620px; flex:none; }.viewer-header { top:20px; left:20px; right:20px; }.view-label { font-size:9px; }.settings-link { display:inline; }.camera-tools { right:12px; top:36%; padding:3px; }.camera-tools button { width:38px; height:39px; }
  .view-presets { max-width:none; width:calc(100% - 24px); bottom:163px; gap:2px; justify-content:center; }.view-presets button { flex:1; font-size:10px; padding:9px 5px; white-space:normal; line-height:1.25; }.viewer-footer { bottom:19px; left:16px; right:16px; font-size:10px; justify-content:center; }.desktop-help { display:none; }.touch-help { display:inline; }
  .playback { bottom:46px; width:calc(100% - 24px); }.playback-top { font-size:11px; }.playback-controls { gap:6px; }
  .mode-switch { top:49px; left:16px; }.mode-switch button { min-height:44px; padding-inline:18px; }
  .interior-panel { grid-column:1/-1; order:2; padding-top:16px; }
  .interior-panel .metrics { grid-template-columns:1fr; }
  .interior-presets { bottom:54px; }.interior-presets button { min-height:50px; font-size:11px; }
  .walk-controls { left:12px; bottom:139px; padding:7px; gap:5px; }
  body[data-mode="inside"] .camera-tools { top:42%; }
}
@media (min-width:761px) and (max-height:850px) { .sidebar { padding-top:20px; padding-bottom:15px; }.project-heading { margin:24px 0 16px; }.intro { margin-top:10px; line-height:1.5; }summary { padding-top:14px; }.metrics > div { padding:7px 0; }.metrics { margin-bottom:12px; }.finish { margin-bottom:16px; }.settings { padding-top:15px; }.sidebar-foot { padding-top:14px; } }
@media (max-width:380px) { .sidebar { padding-inline:14px; gap:0 12px; }h1 { font-size:21px; }.metrics { grid-template-columns:1fr; }.camera-tools button { width:36px; }.view-presets button { font-size:9px; } }
@media (pointer:coarse) { .camera-tools button { width:44px; height:44px; }select { min-height:44px; }.switch-row { min-height:44px; } }
@media (prefers-reduced-motion:reduce) { *,*::after { transition:none !important; } }
.review-toggle { position:absolute; z-index:3; right:27px; top:62px; padding:10px 12px; min-height:44px; border:1px solid var(--line); border-radius:9px; background:#faf9f6f5; font-size:12px; }
.review-toggle[aria-expanded="true"] { background:var(--olive); color:white; }
.review-toggle span { margin-left:5px; font-variant-numeric:tabular-nums; }
.review-panel { position:fixed; z-index:8; inset:0 auto 0 0; width:284px; overflow-y:auto; padding:22px; background:var(--paper); border-right:1px solid var(--line); }
.review-panel h2,#review-editor h2 { font-size:19px; font-weight:550; margin:0; }
.review-heading { display:flex; align-items:center; gap:8px; justify-content:space-between; }
.review-heading button { border:0; font-size:25px; background:transparent; min-width:36px; min-height:40px; }
.review-panel p { font-size:12px; line-height:1.6; }
.review-panel button,#review-editor button { border:1px solid var(--line); border-radius:6px; min-height:40px; background:#fffefa; padding:8px 10px; font-size:12px; }
.review-panel .review-primary,#review-editor .review-primary { background:var(--olive); color:white; border-color:var(--olive); }
#review-add { width:100%; }
.review-file-actions { display:grid; gap:6px; margin:12px 0; }
.review-local-note,#review-empty { color:var(--muted); }
#review-message { color:#49643b; overflow-wrap:anywhere; }
#review-message[data-error="true"],#review-editor-error { color:#9c3527; }
.review-list { padding:0; margin:16px 0; list-style:none; }
.review-list li { padding:12px 0; border-top:1px solid var(--line); overflow-wrap:anywhere; }
.review-list li[data-selected="true"] { border-left:3px solid var(--olive); padding-left:9px; }
.review-list h3 { font-size:13px; line-height:1.5; margin:0 0 5px; }
.review-list p { white-space:pre-wrap; margin:7px 0; }
.review-list small { color:var(--muted); font-size:11px; }
.review-list img { display:block; width:100%; max-height:125px; object-fit:contain; margin:9px 0; border-radius:5px; background:#e6e7df; }
.review-card-actions { display:flex; flex-wrap:wrap; gap:5px; }
.review-card-actions button { flex:1 1 70px; white-space:nowrap; overflow-wrap:normal; }
#review-markers { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.review-marker { position:absolute; transform:translate(-50%,-50%); pointer-events:auto; border:2px solid white; border-radius:50%; width:30px; height:30px; padding:0; background:#277bb6; color:white; font-size:12px; font-weight:650; box-shadow:0 2px 7px #0006; }
.review-marker[aria-pressed="true"] { background:#a55c24; }
.review-pick-hint { position:absolute; z-index:4; top:118px; left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100% - 30px); display:flex; gap:10px; align-items:center; padding:10px 12px; border:1px solid #7690a5; border-radius:8px; background:#f3f8fcf5; color:#254f70; font-size:12px; }
.review-pick-hint button { border:0; background:transparent; text-decoration:underline; color:inherit; min-height:28px; }
body[data-review-picking="true"] canvas { cursor:crosshair; }
#review-editor { width:min(420px,calc(100% - 28px)); padding:24px; border:1px solid var(--line); border-radius:12px; background:var(--paper); color:var(--ink); max-height:calc(100dvh - 30px); overflow:auto; }
#review-editor::backdrop { background:#15202765; }
#review-element { font-size:13px; color:var(--muted); }
#review-editor label { display:block; font-size:13px; margin:15px 0 6px; }
#review-editor label small { color:var(--muted); }
#review-editor input,#review-editor textarea { width:100%; padding:10px; border:1px solid var(--line); border-radius:6px; background:white; color:var(--ink); font:inherit; font-size:14px; }
#review-editor textarea { resize:vertical; }
.review-editor-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }
@media (max-width:1150px) and (min-width:761px) { .review-panel { width:260px; padding:18px; } }
@media (max-width:760px) { .review-toggle { top:49px; right:12px; } .review-panel { inset:auto 0 0; width:100%; max-height:58dvh; border-top:1px solid var(--line); border-right:0; box-shadow:0 -5px 30px #0002; } }
@media (max-width:400px) { .review-toggle { top:105px; } .review-pick-hint { top:157px; } }