/* Night fallbacks until the first shared GPU/HTML appearance frame. */
:root { --paper:#0d101c;--hw-ink:#fafbfc;--hw-muted:#c0c6d4;--tertiary:#9cacc1;--caption:#fafbfc;--hw-mint:#aef5d6;--action:#aef5d6;--hw-line:#ffffff14;--line-strong:#ffffff26;--line-soft:#ffffff0b;--panel:#161b26b0;--raised:#222735c2;--field:#050a172e;--hover:#ffffff0f;--hover-strong:#ffffff1a;--shine:#ffffff1a;--shadow:#00052647;--shadow-soft:#0005261f;--button:#aff0d3;--button-ink:#15392b;--error:#f0c4a2;--focus:#ffffff8c; }

:root { color-scheme:dark;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--hw-ink);background:var(--paper);font-synthesis:none; }
* { box-sizing:border-box; }
html,body { margin:0;width:100%;height:100%;overflow:hidden; }
canvas { display:block;width:100vw;height:100vh;outline:none; }
button { background:var(--button);color:var(--button-ink);padding:10px 20px;border:0;border-radius:8px;font:inherit;cursor:pointer; }
[hidden] { display:none!important; }
#loading { position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:27px;background:var(--paper);transition:opacity .3s ease; }
#loading.depart { opacity:0;pointer-events:none; }
.eye-loader { display:block;width:200px;height:218px;padding:0;border:0;background:none;color:inherit;cursor:default;border-radius:0; }
.eye-loader:disabled { opacity:1; }
.eye-loader svg { display:block;width:100%;height:100%;overflow:visible; }
.eye-rotor { transform-origin:100px 91px;animation:london-eye-turn 12s linear infinite; }
.eye-spokes { fill:none;stroke:#8393a9;stroke-width:.55;opacity:.45; }
.eye-rim { fill:none;stroke:url(#eye-light);stroke-width:1.3; }
.eye-pods { fill:var(--paper);stroke:#b4d2d5;stroke-width:1.1; }
.eye-capsule { transform-box:fill-box;transform-origin:center;animation:london-eye-upright 12s linear infinite; }
.eye-support { fill:none;stroke:#899caa;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; }
.eye-hub { fill:var(--paper);stroke:#b4d2d5;stroke-width:1.5; }
#loading-title { margin:0;color:var(--hw-muted);font-size:14px;font-weight:400;letter-spacing:0; }
#loading[data-failed] .eye-rotor,#loading[data-failed] .eye-capsule { animation-play-state:paused; }
#loading[data-failed] .eye-loader { cursor:pointer; }
#loading[data-failed] .eye-loader:focus-visible { outline:1px solid var(--focus);outline-offset:8px;border-radius:16px; }
@keyframes london-eye-turn { to { transform:rotate(360deg); } }
@keyframes london-eye-upright { to { transform:rotate(-360deg); } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important;transition:none!important; } }


@font-face { font-family:Homeward;src:url('/fonts/inter.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap; }
:root { font-family:Homeward,Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--hw-glass:linear-gradient(155deg,var(--shine),transparent 48%),var(--panel); }
/* London Travel: the map and the question come first. */
#app-chrome { color:var(--hw-ink);font-size:13px;line-height:1.6; }
#toolbar { position:fixed;top:22px;left:24px;right:24px;display:flex;align-items:flex-start;justify-content:flex-end;pointer-events:none;z-index:5; }
#view-menu { display:flex;align-items:center;gap:10px;pointer-events:auto; }
.map-action { display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--line-strong);border-radius:50%;background:var(--panel);color:var(--caption);backdrop-filter:blur(24px);box-shadow:inset 0 1px var(--line-soft); }
.map-action:hover { background:var(--raised); }
.map-action svg { width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round; }
.fullscreen-contract { display:none; }
#fullscreen[aria-pressed=true] .fullscreen-expand { display:none; }
#fullscreen[aria-pressed=true] .fullscreen-contract { display:inline; }
body:has(#evidence:not([hidden])) #open-evidence { background:var(--raised);border-color:var(--focus); }
#examples { position:fixed;bottom:105px;left:50%;transform:translateX(-50%);display:flex;justify-content:center;gap:7px;max-width:calc(100vw - 32px);width:max-content;z-index:3; }
#examples button { white-space:nowrap;background:var(--panel);color:var(--hw-ink);font-size:12px;font-weight:400;padding:9px 13px;border:1px solid var(--line-strong);border-radius:24px;backdrop-filter:blur(25px);box-shadow:inset 0 1px var(--line-soft); }
#examples button:hover { background:var(--raised);border-color:var(--hover); }
#answer-card { position:fixed;top:88px;left:24px;width:360px;max-height:calc(100dvh - 204px);overflow:auto;padding:24px;z-index:3;line-height:1.6;background:var(--hw-glass);border:1px solid var(--line-strong);border-radius:24px;backdrop-filter:blur(24px) saturate(.9);-webkit-backdrop-filter:blur(24px) saturate(.9);box-shadow:inset 0 1px var(--line-strong),0 12px 45px var(--shadow);scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;overscroll-behavior:contain; }
.answer-heading { display:flex;align-items:flex-start;gap:10px;margin-bottom:18px; }
.question { flex:1;min-width:0;border:0!important;padding:0!important; }
.question summary { font-size:12px;color:var(--hw-muted);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;cursor:pointer;list-style:none; }
.question[open] summary { white-space:normal; }
.question summary:hover { color:var(--hw-ink); }
.icon-button { display:grid;place-items:center;flex:none;background:var(--line-soft);color:var(--hw-muted);border:1px solid var(--line-soft);border-radius:50%;width:27px;height:27px;font-size:19px;line-height:1;padding:0; }
.icon-button:hover { background:var(--line-soft);color:var(--hw-ink); }
.answer-heading>.icon-button { margin-top:-4px; }
.answer-prose { font-size:16px;line-height:1.58;letter-spacing:-.2px; }
.answer-prose p { margin:0 0 13px;white-space:pre-wrap; }
.state-label { display:block;color:var(--action);font-size:10px;margin:0 0 16px;line-height:1.5; }
.answer-places { border-top:1px solid var(--hw-line);margin-top:20px;padding-top:14px; }
.place-caption { color:var(--caption);font-size:10px;margin:0 0 9px; }
.place-row { display:flex;align-items:center;gap:11px;width:100%;padding:7px 0;color:var(--hw-ink);background:none;font-size:13px;text-align:left; }
.place-row:hover { color:var(--action); }
.place-number { display:inline-grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:var(--button);color:var(--button-ink);font-size:10px; }
.sources { margin-top:13px;padding:10px 0 0;border-top:1px solid var(--hw-line); }
.sources>summary,.original-answer>summary { color:var(--hw-muted);font-size:11px;cursor:pointer; }
.source-list p { margin:12px 0;font-size:12px;line-height:1.5; }
.source-list a { color:var(--action);text-decoration:none; }
.source-list small { display:block;color:var(--caption);font-size:10px;margin-top:3px; }
.source-fact { font-size:12px;color:var(--hw-muted); }
.answer-footer { display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:18px; }
.provenance,.text-button { padding:3px 0;background:none;color:var(--action);border:0;font:inherit;font-size:12px;text-align:left; }
.provenance { font-size:10px;color:var(--caption);max-width:100%; }
.provenance:hover,.text-button:hover { color:var(--hw-ink); }
.correction-status,.draft-link { display:block;background:none;padding:0;color:var(--action);font-size:11px;margin-top:16px;text-align:left; }
.draft-link { color:var(--hw-muted); }
.live-update { border-left:2px solid var(--error);padding-left:12px;font-size:12px;margin:16px 0;color:var(--hw-ink); }
.live-update small { color:var(--caption);font-size:10px; }
#learning { position:static;z-index:auto;color:inherit;font-size:inherit; }
#learning .edit-heading { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px; }
#learning h2 { font-size:20px;font-weight:450;letter-spacing:-.6px;margin:0;line-height:1.2; }
#learning h3 { font-size:13px;font-weight:500;margin:20px 0 9px; }
#learning .edit-question { font-size:12px;color:var(--caption);line-height:1.6;margin:0 0 20px; }
#learning .state-label { margin-bottom:14px; }
#learning .edit-places { margin-bottom:10px; }
.edit-place { display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;color:var(--hw-ink);font-size:13px; }
#learning .icon-button { padding:0;margin:0;width:24px;height:24px;font-size:16px; }
#learning label,#operator-fields label { display:block;font-size:12px;color:var(--hw-muted);margin:18px 0 9px; }
#learning input[type=search],#learning textarea,#operator-fields select { width:100%;display:block;padding:11px 12px;font:inherit;font-size:13px;line-height:1.5;color:var(--hw-ink);background:var(--field);border:1px solid var(--line-strong);border-radius:12px;box-shadow:inset 0 1px 6px var(--shadow-soft);margin-top:7px; }
#learning textarea { min-height:80px;resize:vertical; }
#learning textarea:focus,#learning input:focus,#operator-fields select:focus { outline:none;border-color:var(--hover);box-shadow:0 0 0 3px var(--hover); }
#learning input::placeholder { color:var(--caption); }
#learning .text-button,#learning .quiet { width:auto;display:inline-block;padding:4px 0;margin:9px 0;font-size:12px;background:none;color:var(--action); }
#learning .text-button.muted { color:var(--caption); }
#learning details { margin:14px 0 0;padding:10px 0;border-top:1px solid var(--hw-line);border-bottom:0; }
#learning .editor-actions { display:flex;flex-direction:column;align-items:flex-start;margin-top:20px; }
#learning .primary,.primary { width:100%;display:block;background:var(--button);color:var(--button-ink);border:1px solid var(--hover);border-radius:22px;font-size:13px;font-weight:500;padding:12px 16px;margin:6px 0;box-shadow:inset 0 1px var(--shine); }
#learning .primary:hover,.primary:hover { background:var(--button); }
#learning .place-result { display:block;width:100%;background:var(--line-soft);color:var(--hw-ink);border:1px solid var(--line-soft);border-radius:12px;font-size:12px;text-align:left;padding:10px 12px;margin:6px 0; }
#learning .share-confirm { border-top:1px solid var(--hw-line);margin-top:12px;padding-top:2px; }
.muted,#learning .muted { color:var(--hw-muted);font-size:11px;line-height:1.65; }
.form-message { color:var(--error);font-size:12px;line-height:1.6; }
.form-message[data-tone=passed] { color:var(--hw-mint); }
button:disabled { opacity:.35;cursor:not-allowed; }
#evidence { position:fixed;top:88px;right:24px;width:420px;max-width:calc(100vw - 48px);max-height:calc(100dvh - 204px);overflow:auto;z-index:6;padding:24px;background:var(--hw-glass);border:1px solid var(--line-strong);border-radius:24px;backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);box-shadow:inset 0 1px var(--line-soft),0 16px 60px var(--shadow);scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;overscroll-behavior:contain; }
.evidence-heading { display:flex;justify-content:space-between;align-items:center;margin-bottom:20px; }
.evidence-heading h2 { margin:0;font-size:23px;line-height:1.1;font-weight:450;letter-spacing:-.7px; }
#evidence-tabs { display:flex;gap:4px;padding-bottom:15px;border-bottom:1px solid var(--hw-line);margin-bottom:20px; }
#evidence-tabs button { flex:1;background:none;color:var(--caption);font-size:11px;padding:7px 6px;border-radius:15px; }
#evidence-tabs button[aria-pressed=true] { background:var(--line-soft);color:var(--action); }
#evidence h3 { font-size:16px;font-weight:450;margin:16px 0 10px; }
#evidence h4 { font-size:12px;font-weight:500;margin:25px 0 10px;color:var(--hw-muted); }
#evidence p { font-size:13px;line-height:1.65; }
#evidence .muted { font-size:12px; }
#evidence pre { white-space:pre-wrap;overflow-wrap:anywhere;background:var(--shadow-soft);border-radius:12px;padding:12px;font-size:10px;color:var(--hw-muted); }
#evidence details { border-top:1px solid var(--hw-line);padding:14px 0;margin-top:16px; }
#evidence details>summary { cursor:pointer;color:var(--hw-muted);font-size:12px; }
#evidence dl { display:grid;grid-template-columns:100px 1fr;gap:8px;font-size:11px; }
#evidence dt { color:var(--caption); }#evidence dd { margin:0;color:var(--hw-ink);overflow-wrap:anywhere; }
#evidence .quiet { background:var(--line-soft);color:var(--hw-ink);border:1px solid var(--line-soft);border-radius:18px;padding:8px 12px;font-size:12px; }
#evidence .history-item { padding:15px 0;border-bottom:1px solid var(--hw-line); }
#evidence .history-question { padding:0;background:none;color:var(--hw-ink);font-size:12px;text-align:left; }
#evidence .history-item p { font-size:10px;margin:5px 0 0; }
#evidence .inline-actions { display:flex;gap:8px;margin:20px 0; }
#evidence a { color:var(--action);font-size:12px; }
#evidence table { width:100%;border-collapse:collapse;font-size:11px; }
#evidence td,#evidence th { text-align:left;vertical-align:top;overflow-wrap:anywhere;border-bottom:1px solid var(--hw-line);padding:9px 5px;font-weight:400; }
.check-label { display:flex;gap:9px;align-items:center;font-size:12px; }.check-label input { accent-color:var(--action); }
#app-message { position:fixed;left:50%;transform:translateX(-50%);bottom:106px;z-index:8;max-width:600px;width:max-content;padding:12px 18px;background:var(--panel);backdrop-filter:blur(24px);color:var(--hw-ink);border:1px solid var(--line-strong);border-radius:18px;font-size:12px;box-shadow:0 8px 40px var(--shadow); }
#app-message button { margin-left:12px; }
#gesture-hint { position:fixed;bottom:4px;left:24px;font-size:10px;color:var(--caption);text-shadow:0 1px 5px var(--shadow);margin:0;pointer-events:none; }
#app-chrome button:focus-visible,#app-chrome summary:focus-visible { outline:2px solid var(--hover);outline-offset:4px; }
@media(max-width:1000px) {
 #toolbar { left:16px;right:16px; }
 #answer-card { left:16px;width:312px; }
 #evidence { right:16px;width:360px;max-width:calc(100vw - 32px); }
 #examples button { font-size:11px;padding:8px 11px; }
 #app-message { max-width:calc(100vw - 40px);width:fit-content; }
 #gesture-hint { left:16px; }
}

.place-results { max-height:180px;overflow:auto; }
.form-message:empty { display:none; }

#learning { display:flex;flex-direction:column;max-height:calc(100dvh - 254px);min-height:0; }
#learning>.state-label,#learning>.edit-heading,.edit-footer { flex:none; }
#learning .edit-heading { margin-bottom:12px; }
#learning .edit-body { overflow:auto;min-height:0;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;padding-right:3px; }
#learning .edit-footer { border-top:1px solid var(--hw-line);margin-top:12px;padding-top:8px; }
#learning .editor-actions { margin-top:0; }
#learning .edit-footer p { margin:4px 0 0; }
#learning .edit-footer>[data-discard] { margin:6px 0 0; }

#learning .edit-body h3 { display:flex;align-items:center;justify-content:space-between;gap:12px; }
#learning .edit-body h3 .text-button { margin:0;padding:0;font-size:11px; }

#learning .place-result small { display:block;color:var(--caption);font-size:10px;margin-top:3px;line-height:1.5; }

/* A real 270-degree dial: bottom → left → top → right. */
#toolbar { gap:10px;align-items:center; }
.light-dial-wrap { pointer-events:auto;position:relative; }
#ambience { width:44px;height:44px;border:1px solid var(--line-strong);border-radius:50%;background:var(--panel);backdrop-filter:blur(24px);box-shadow:inset 0 1px var(--line-soft);cursor:grab;touch-action:none;user-select:none;outline:none; }
#ambience:active,#ambience[data-turning] { cursor:grabbing; }
#ambience:focus-visible { outline:2px solid var(--focus);outline-offset:4px; }
#ambience svg { display:block;width:100%;height:100%;overflow:visible; }
#dial-needle path { stroke:var(--caption);stroke-width:1.4;stroke-linecap:round; }
#dial-needle circle { fill:var(--caption);stroke:var(--paper);stroke-width:1; }
.dial-moon { fill:var(--caption); }
.dial-sun { fill:none;stroke:var(--caption);stroke-width:1.3;stroke-linecap:round;opacity:var(--dial-day,0); }
.dial-moon { opacity:calc(1 - var(--dial-day,0)); }
#dial-label { position:absolute;top:calc(100% + 9px);left:50%;transform:translate(-50%,-3px);white-space:nowrap;font-size:11px;line-height:1;padding:8px 11px;border:1px solid var(--hw-line);border-radius:14px;background:var(--raised);color:var(--caption);backdrop-filter:blur(24px);opacity:0;transition:opacity .15s,transform .15s;pointer-events:none; }
.light-dial-wrap:hover #dial-label,.light-dial-wrap:focus-within #dial-label,.light-dial-wrap:has([data-turning]) #dial-label { opacity:1;transform:translate(-50%,0); }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
#evidence pre { background:#101923ee;color:#e0eaf4; }
#gesture-hint { color:var(--caption);background:var(--raised);padding:1px 7px;border-radius:5px;text-shadow:none; }
#evidence dd,.place-caption,.source-list small,.provenance,.state-label { color:var(--caption); }
#failure { margin:-12px 0 0;max-width:420px;padding:0 16px;color:var(--hw-muted);font-size:14px;line-height:1.5;text-align:center; }
#no-webgpu { position:fixed;inset:0;z-index:100;display:flex;padding:24px 16px;overflow:auto;background:linear-gradient(180deg,#0d101ccc,#0d101cf2),url('/media/london-night.jpg') center/cover no-repeat,var(--paper); }
.no-webgpu-panel { margin:auto;width:min(560px,100%);padding:36px 36px 32px;border:1px solid var(--line-strong);border-radius:20px;background:var(--hw-glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 24px 80px #0005; }
#no-webgpu .no-webgpu-kicker { margin:0 0 10px;color:var(--hw-mint);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase; }
#no-webgpu h1 { margin:0 0 14px;font-size:30px;line-height:1.2;font-weight:600;letter-spacing:-.01em;text-wrap:balance; }
#no-webgpu p { margin:0 0 12px;color:var(--hw-muted);font-size:16px;line-height:1.55; }
#no-webgpu .no-webgpu-reason { color:var(--hw-ink); }
#no-webgpu h2 { margin:22px 0 8px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tertiary); }
#no-webgpu ul { margin:0;padding:0 0 0 20px;color:var(--hw-muted);font-size:15px;line-height:1.7; }
.no-webgpu-actions { display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:26px; }
.no-webgpu-actions a { color:var(--hw-mint);font-size:15px;text-decoration:none; }
.no-webgpu-actions a:hover { text-decoration:underline; }
@media (max-width:480px) { .no-webgpu-panel { padding:26px 20px 24px; } #no-webgpu h1 { font-size:25px; } }