/* Centered, readable layouts shared by the Mac app and iPhone web app. */
html { scroll-behavior: smooth; }
.app-shell { width: min(100%, 1320px); margin-inline: auto; }
main { width: min(100%, 1070px); margin-inline: auto; }
.workspace { display: flex !important; flex-direction: column; align-items: stretch !important; width: 100%; gap: 18px; }
.viewer-card, .details-card { width: 100%; min-width: 0; margin-inline: auto; }
.viewer-card { overflow: hidden; }
.details-card { align-self: stretch; }
.details-card, .details-heading, .details-heading > div, .object-type, .details-copy { text-align: center; }
.details-heading { justify-content: center; position: relative; }
.details-heading .bookmark { position: absolute; right: 0; top: 0; }
.object-type { justify-content: center; flex-wrap: wrap; }
.object-type .type-year { margin-left: 0; }
.inspector-layout { display: grid !important; grid-template-columns: minmax(0,1fr) !important; gap: 12px; width: 100%; }
.component-tabs { display: grid !important; grid-template-columns: repeat(auto-fit,minmax(120px,1fr)); gap: 7px; width: 100%; }
.component-tab { min-width: 0; min-height: 42px; display: flex; align-items: center; gap: 8px; text-align: left; }
.component-tab span { font-size: 8px; }
.component-detail { width: 100%; max-width: 900px; max-height: none; margin-inline: auto; padding: clamp(15px,3vw,24px); }
.component-detail-heading, .component-summary { width: 100%; max-width: 760px; margin-inline: auto; }
.detail-specs { width: 100%; max-width: 820px; margin: 14px auto 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 22px; }
.detail-specs > div { min-width: 0; align-content: start; grid-template-columns: minmax(0,1fr); gap: 5px; padding: 11px 5px; }
.detail-specs > div[data-movie-cast], .detail-specs > .snapshot-time { grid-column: 1 / -1; }
.detail-specs dt, .detail-specs dd { overflow-wrap: anywhere; }
.detail-specs dt, .detail-specs dd { text-align: center; }
.detail-specs dt { font-size: 9px; }
.detail-specs dd { font-size: 11px; line-height: 1.65; }
.web-results, .photo-panel, .install-guide { width: 100%; margin-inline: auto; }
.web-results-body { display: grid !important; grid-template-columns: minmax(0,1fr) !important; width: 100%; }
.web-results-list { width: min(100%,880px); margin-inline: auto; padding-inline: clamp(15px,4vw,32px); }
.web-fact-panel { width: 100%; border-left: 0; border-top: 1px solid #27313a; padding: 18px clamp(15px,4vw,32px); }
.web-result { grid-template-columns: 28px minmax(0,1fr); }
.public-contact { width: 100%; max-width: 100%; margin: 0 auto 14px; text-align: center; }
.public-contact-heading, .public-contact-links { justify-content: center; }
.object-photo, .gallery-photo, #photo-preview, .homework-photo-status img { filter: none !important; -webkit-filter: none !important; mix-blend-mode: normal !important; opacity: 1 !important; image-rendering: auto; }
.object-photo { object-fit: contain; }
.back-button { margin-left: auto; margin-right: 12px; min-height: 34px; border: 1px solid #35413d; border-radius: 7px; padding: 0 11px; background: #141b20; color: #dce8df; font: 11px var(--sans); cursor: pointer; }
.back-button:disabled { opacity: .42; cursor: default; }
.topbar { justify-content: flex-start; gap: 10px; }
.topbar-caption { margin-inline: auto; }
.settings-menu-wrap { flex: 0 0 auto; }
.settings-panel[hidden], [hidden] { display: none !important; }
.assistant-dialog[open], .owner-dialog[open] { display: block; margin: auto; }
.trailer-link[hidden] { display: none !important; }
@media (max-width: 760px) {
  .app-shell { padding-inline: max(14px, env(safe-area-inset-left)); }
  .topbar { gap: 6px; }
  .brand { font-size: 15px; gap: 6px; letter-spacing: .07em; }
  .brand-mark { flex: 0 0 26px; }
  .back-button { margin: 0 auto 0 0; padding-inline: 8px; }
  .back-button span { display: none; }
  .topbar-caption, .avatar { display: none; }
  .install-button { margin-left: auto; }
  .settings-button { padding-inline: 8px; }
  .workspace { gap: 13px; }
  .model-stage { height: clamp(245px,72vw,390px); }
  .viewer-controls { flex-wrap: wrap; height: auto; min-height: 50px; padding-block: 7px; }
  .control-divider { flex: 1 1 8px; }
  .details-card { padding: 18px 16px; }
  .detail-specs { grid-template-columns: 1fr; }
  .detail-specs > div[data-movie-cast], .detail-specs > .snapshot-time { grid-column: auto; }
  .component-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .component-tab { font-size: 9px; }
  .assistant-dialog, .owner-dialog { width: calc(100vw - 20px); max-width: none; max-height: calc(100dvh - 24px); padding: 16px; }
  .web-result { grid-template-columns: 22px minmax(0,1fr); gap: 7px; }
  .web-result-link { overflow-wrap: anywhere; }
}
@media (max-width: 380px) {
  .brand > span:last-child { display: none; }
  .install-button { font-size: 8px; }
  .settings-button { font-size: 10px; }
  .control-button { padding-inline: 6px; font-size: 9px; }
}
.install-platforms { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0; }
.install-platforms button { border:1px solid #39483f; border-radius:7px; padding:9px 15px; background:#151e19; color:#c5d2c7; font:11px var(--sans); cursor:pointer; }
.install-platforms button[aria-pressed="true"] { border-color:#a9d58d; background:#202e22; color:#e4f4d8; }
.install-instructions { max-width:700px; margin:0 auto; color:#dce6dc; font:12px/1.7 var(--sans); }
.install-instructions h3 { margin:10px 0; font:600 17px var(--display); text-align:center; }
.install-instructions ol { display:grid; gap:6px; padding-left:22px; }
.install-instructions p { color:#acb8ae; }
.math-answer { font-weight:700; font-size:13px !important; color:#eef8e9 !important; }
.math-process { margin:8px 0 0; padding-left:21px; color:#c3d0c6; font:11px/1.7 var(--mono); }
.math-process li { padding-left:3px; }

/* First launch stays focused on search; reveal the explorer after a lookup. */
.workspace[hidden], .below-fold[hidden] { display:none !important; }
.tutorial-dialog, .weather-dialog { width:min(760px,calc(100vw - 28px)); max-height:min(88vh,820px); overflow:auto; margin:auto; padding:clamp(20px,5vw,36px); border:1px solid #405044; border-radius:15px; background:linear-gradient(145deg,#141d25,#0c1218); color:#edf2ee; box-shadow:0 24px 90px #000b; }
.tutorial-dialog::backdrop, .weather-dialog::backdrop { background:#02070bd9; backdrop-filter:blur(5px); }
.tutorial-close, .weather-close { position:sticky; top:0; display:flex; justify-content:flex-end; height:0; overflow:visible; z-index:2; }
.tutorial-step-count { display:block; margin-top:16px; color:#aeca98; font:10px var(--mono); letter-spacing:.14em; }
.tutorial-dialog h2, .weather-dialog h2 { margin:10px 0 14px; text-align:center; font:600 clamp(25px,5vw,37px)/1.16 var(--display); }
.tutorial-art { width:80px; height:80px; display:grid; place-items:center; margin:24px auto; border:1px solid #637758; border-radius:22px; background:#1b2a20; color:#c5efa3; font:42px var(--sans); }
.tutorial-copy { max-width:560px; min-height:82px; margin:0 auto; color:#c3cec6; font:15px/1.8 var(--sans); text-align:center; }
.tutorial-progress { display:flex; justify-content:center; gap:7px; margin:24px 0; }
.tutorial-progress span { width:7px; height:7px; border-radius:50%; background:#465349; }
.tutorial-progress span.active { width:22px; border-radius:8px; background:#b7f37d; }
.tutorial-actions { display:flex; align-items:center; gap:9px; }
.tutorial-actions button { min-height:40px; padding:0 15px; border:1px solid #435046; border-radius:7px; background:#18211b; color:#e2ebe3; font:11px var(--sans); cursor:pointer; }
.tutorial-actions .tutorial-next { margin-left:auto; background:#b7f37d; color:#172112; border-color:#b7f37d; font-weight:700; }
.tutorial-actions .tutorial-back:disabled { opacity:.45; cursor:default; }
.tutorial-actions .tutorial-skip { border-color:transparent; background:transparent; color:#aeb9b0; }
.weather-dialog { width:min(900px,calc(100vw - 28px)); }
.weather-dialog > .eyebrow, .weather-dialog > .weather-attribution { text-align:center; justify-content:center; }
.weather-search { display:flex; flex-wrap:wrap; gap:8px; max-width:720px; margin:22px auto; }
.weather-search input { flex:1 1 220px; min-width:120px; padding:11px 12px; border:1px solid #435046; border-radius:7px; background:#0f151b; color:#eef4ee; font:13px var(--sans); }
.weather-search button { border:1px solid #435046; border-radius:7px; padding:0 13px; background:#1a251c; color:#e2ebe3; font:11px var(--sans); cursor:pointer; }
.weather-search button[type=submit] { background:#b7f37d; border-color:#b7f37d; color:#172112; font-weight:700; }
.weather-status, .weather-attribution { color:#aab7ae; font:11px/1.65 var(--sans); text-align:center; }
.weather-current { margin:14px 0 24px; padding:19px; border:1px solid #36463a; border-radius:10px; background:#111a14; }
.weather-current > div { display:flex; justify-content:space-between; align-items:center; color:#cbd8cb; font:12px var(--sans); }
.weather-current strong { color:#dff3d1; font:600 42px var(--display); }
.weather-current p { margin:7px 0 0; color:#aab8ac; font:11px/1.6 var(--sans); }
.weather-dialog h3 { margin:19px 0 10px; color:#e6eee6; font:600 16px var(--display); }
.weather-days { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:8px; }
.weather-day, .weather-week { display:grid; gap:7px; padding:12px; border:1px solid #303c33; border-radius:8px; background:#121a15; color:#bdc9c0; font:10px/1.5 var(--sans); }
.weather-day { width:100%; text-align:left; cursor:pointer; transition:border-color .15s,background .15s; }
.weather-day:hover, .weather-day[aria-expanded="true"] { border-color:#8baa73; background:#19241b; }
.weather-day em { color:#94b47e; font:italic 9px var(--sans); }
.weather-hourly { grid-column:1/-1; min-width:0; margin:0 0 11px; padding:14px; border:1px solid #354539; border-radius:8px; background:#0d1510; }
.weather-hourly h4 { margin:0 0 11px; color:#e0ebdf; font:600 13px var(--display); }
.weather-hour-grid { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(150px,190px); gap:7px; overflow-x:auto; overscroll-behavior-inline:contain; padding:0 0 8px; scroll-snap-type:x proximity; }
.weather-hour { display:grid; gap:5px; padding:9px; border:1px solid #28352b; border-radius:7px; background:#131b15; color:#aebbb0; font:9px/1.45 var(--sans); scroll-snap-align:start; }
.weather-hour strong { color:#cddacb; font:10px var(--sans); }
.weather-hour b { color:#e1efd9; font:600 17px var(--display); }
.weather-hour small { color:#9daaa0; }
.weather-day strong, .weather-week strong { color:#e4ece5; font:11px var(--sans); }
.weather-day b { color:#d8efc9; font:600 14px var(--display); }
.weather-day small, .weather-week small { color:#99a69b; }
.weather-confidence, .weather-updated { color:#a1afa4; font:10px/1.6 var(--sans); }
.weather-weeks { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:8px; }
.weather-updated { text-align:right; }
body.light-mode .tutorial-dialog, body.light-mode .weather-dialog { background:#fff; color:#1a2420; border-color:#cbd8cd; }
body.light-mode .tutorial-copy, body.light-mode .weather-status, body.light-mode .weather-attribution, body.light-mode .weather-confidence, body.light-mode .weather-updated { color:#56645b; }
body.light-mode .tutorial-art { background:#edf5e9; color:#31552a; border-color:#bdcdb5; }
body.light-mode .tutorial-actions button { background:#f3f7f3; color:#2c3d30; border-color:#d0dbd1; }
body.light-mode .tutorial-actions .tutorial-next { background:#4c7828; border-color:#4c7828; color:#fff; }
body.light-mode .tutorial-actions .tutorial-skip { background:transparent; border-color:transparent; color:#4c5c50; }
body.light-mode .weather-search input { background:#f7faf7; color:#1b2820; border-color:#cbd8cd; }
body.light-mode .weather-search button { background:#f2f7ef; color:#354b37; border-color:#cbdac6; }
body.light-mode .weather-search button[type=submit] { background:#4c7828; border-color:#4c7828; color:#fff; }
body.light-mode .weather-current, body.light-mode .weather-day, body.light-mode .weather-week { background:#f7faf7; border-color:#d6dfd7; color:#536158; }
body.light-mode .weather-current > div, body.light-mode .weather-dialog h3, body.light-mode .weather-day strong, body.light-mode .weather-week strong { color:#24332a; }
body.light-mode .weather-current strong, body.light-mode .weather-day b { color:#31552a; }
body.light-mode .weather-current p, body.light-mode .weather-day small, body.light-mode .weather-week small { color:#5d6b61; }
body.light-mode .weather-day:hover, body.light-mode .weather-day[aria-expanded="true"] { background:#edf5e9; border-color:#a8c39a; }
body.light-mode .weather-day em { color:#4c7828; }
body.light-mode .weather-hourly { background:#f5f8f5; border-color:#d2ddd3; }
body.light-mode .weather-hourly h4, body.light-mode .weather-hour strong { color:#24332a; }
body.light-mode .weather-hour { background:#fff; border-color:#dbe3dc; color:#536158; }
body.light-mode .weather-hour b { color:#31552a; }
body.light-mode .weather-hour small { color:#5d6b61; }
body.light-mode .model-disclaimer, body.light-mode .spec-note, body.light-mode .stage-hint { color:#37443b; }
body.light-mode .viewer-label, body.light-mode .component-tab, body.light-mode .control-button, body.light-mode .icon-control { color:#26362b; }
body.light-mode .viewer-label .live-dot { background:#4c7828; }
body.light-mode .details-heading h2, body.light-mode .object-type, body.light-mode .detail-specs dd, body.light-mode .detail-specs dt, body.light-mode .article-fact dd { color:#1f2d23; }
body.light-mode .details-copy, body.light-mode .component-summary { color:#38483d; }
body.light-mode .component-tab.active, body.light-mode .control-button.active { color:#294921; }
body.light-mode .detail-specs dt a, body.light-mode .article-fact dt a { color:#31552a; }
body.light-mode .viewer-controls .icon-control { border-color:#c5d0c7; }
/* Blueprint and X-ray are separate viewer slides; the saved photo itself stays in color. */
.viewer-card.object-illustration.xray .model-wrap, .viewer-card.object-illustration.blueprint .model-wrap { opacity:0 !important; filter:none !important; }
.viewer-card.object-illustration.xray .object-photo, .viewer-card.object-illustration.blueprint .object-photo { filter:none !important; -webkit-filter:none !important; }
.viewer-card.object-illustration.xray .real-car-view, .viewer-card.object-illustration.blueprint .real-car-view { opacity:0 !important; }
@media (max-width:540px) { .tutorial-actions { gap:5px; } .tutorial-actions button { padding-inline:10px; } .weather-current strong { font-size:34px; } }
 .weather-hourly-card{min-width:0;padding:12px;border:1px solid #26362b;border-radius:10px;background:#101812}.weather-hourly-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 10px}.weather-hourly-heading>strong{color:#e2ebdf;font:600 13px var(--display)}.weather-detail-tabs{display:flex;gap:6px;margin:0}.weather-detail-tabs button,.weather-radar-controls button{border:1px solid #354539;border-radius:7px;background:#172019;color:#c5d5c4;padding:7px 12px;font:600 10px var(--sans);cursor:pointer}.weather-detail-tabs button[aria-pressed="true"]{background:#294126;border-color:#8baa73;color:#e4f2dc}.weather-radar-heading{display:flex;justify-content:space-between;gap:12px;align-items:baseline;color:#e2ebdf;font:11px var(--sans)}.weather-radar-heading span,.weather-radar-credit{color:#9daaa0;font:9px var(--sans)}.weather-radar-map{position:relative;width:min(100%,512px);margin:10px auto;overflow:hidden;border:1px solid #39463b;border-radius:10px;background:#090f12}.weather-radar-tile{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;margin:0}.weather-radar-crosshair{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#fff;font:24px/1 var(--sans);text-shadow:0 1px 4px #000}.weather-radar-controls{display:flex;align-items:center;gap:10px}.weather-radar-controls input{flex:1;accent-color:#a6d477}.weather-radar-controls button:disabled{opacity:.45}.weather-radar-zoom{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-top:8px;color:#a1afa4;font:10px var(--sans)}.weather-radar-zoom button{width:30px;height:28px;border:1px solid #354539;border-radius:6px;background:#172019;color:#c5d5c4;font-size:16px;cursor:pointer}.weather-radar-note,.weather-radar-status{color:#a1afa4;font:10px/1.6 var(--sans)}.weather-radar-note a{color:#c6e5b7}.weather-radar-credit{display:block;text-align:right}.weather-radar-view[hidden],.weather-hourly-content[hidden]{display:none!important}body.light-mode .weather-hourly-card{background:#f8faf8;border-color:#d2ddd3}body.light-mode .weather-hourly-heading>strong{color:#24332a}body.light-mode .weather-detail-tabs button,body.light-mode .weather-radar-controls button,body.light-mode .weather-radar-zoom button{background:#f5f8f4;color:#34483b;border-color:#d2ddd3}body.light-mode .weather-detail-tabs button[aria-pressed="true"]{background:#e5f1de;color:#31552a;border-color:#a8c39a}body.light-mode .weather-radar-heading{color:#24332a}body.light-mode .weather-radar-heading span,body.light-mode .weather-radar-credit,body.light-mode .weather-radar-note,body.light-mode .weather-radar-status,body.light-mode .weather-radar-zoom{color:#5d6b61}body.light-mode .weather-radar-note a{color:#31552a}
@media(max-width:540px){.weather-hourly-heading{align-items:flex-start}.weather-detail-tabs button{padding:6px 9px}.weather-radar-controls{flex-wrap:wrap}.weather-radar-controls input{min-width:100%;order:2}}
.weather-radar-map-shell{position:relative;width:100%;height:min(54vh,440px);min-height:280px;margin:10px 0;border:1px solid #39463b;border-radius:10px;overflow:hidden;background:#d8e3e7}.weather-radar-map{position:relative;width:100%;height:100%;max-width:none;aspect-ratio:auto;margin:0;border:0;border-radius:0;overflow:hidden;background:#d8e3e7}.weather-radar-map .leaflet-container{width:100%;height:100%;background:#d8e3e7;font:11px var(--sans)}.weather-radar-map-tools{position:absolute;z-index:1000;top:12px;right:12px;display:grid;justify-items:center;gap:5px;padding:7px;border:1px solid #24343c;border-radius:10px;background:#0c1519eF;color:#eaf2f1;box-shadow:0 3px 12px #0004}.weather-radar-map-tools span{font:600 10px var(--sans)}.weather-radar-map-tools button{width:30px;height:28px;border:1px solid #4a5b60;border-radius:6px;background:#1b292d;color:#f3f7f7;font:600 18px/1 var(--sans);cursor:pointer}.weather-radar-map-tools button:disabled{opacity:.4;cursor:default}.weather-radar-map .leaflet-control-attribution{font:9px/1.4 var(--sans);background:#ffffffd9;color:#24332a}.weather-radar-map .leaflet-control-attribution a{color:#195f8a}.weather-radar-controls .weather-radar-time{min-width:62px;color:#e3eee5;font:600 10px var(--sans);text-align:right}.weather-radar-note{margin:9px 0 0}.weather-radar-status{padding:14px;border:1px solid #354539;border-radius:8px;background:#101812}body.light-mode .weather-radar-controls .weather-radar-time{color:#24332a}body.light-mode .weather-radar-status{background:#f5f8f5;border-color:#d2ddd3}
@media(max-width:540px){.weather-radar-map-shell{height:55vh;min-height:260px}.weather-radar-controls .weather-radar-time{margin-left:auto}}
.weather-detail-tabs{flex-wrap:wrap;justify-content:flex-end}.weather-detail-tabs button{white-space:nowrap}.weather-forecast-map-shell{height:min(54vh,440px);min-height:300px;background:#e9f0f4}.weather-forecast-map{display:block;width:100%;height:100%;border:0}.weather-outlook-hours{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(100px,125px);gap:7px;overflow-x:auto;overscroll-behavior-inline:contain;padding:3px 0 9px;scroll-snap-type:x proximity}.weather-outlook-hour{display:grid;justify-items:center;gap:4px;padding:9px 7px;border:1px solid #354539;border-radius:8px;background:#101812;color:#aebbb0;font:10px/1.45 var(--sans);scroll-snap-align:start}.weather-outlook-hour strong{color:#e2ebdf}.weather-outlook-hour span{font-size:19px}.weather-outlook-hour b{color:#d8efc9;font:600 15px var(--display)}.weather-outlook-hour small{color:#9daaa0;text-align:center}.weather-forecast-view[hidden]{display:none!important}body.light-mode .weather-outlook-hour{background:#fff;border-color:#dbe3dc;color:#536158}body.light-mode .weather-outlook-hour strong{color:#24332a}body.light-mode .weather-outlook-hour b{color:#31552a}body.light-mode .weather-outlook-hour small{color:#5d6b61}
@media(max-width:540px){.weather-detail-tabs{justify-content:flex-start}.weather-forecast-map-shell{height:50vh;min-height:280px}}