:root {
  color-scheme: dark;
  font-family: "Segoe UI", system-ui, sans-serif;
  color: #e4e8e5;
  background: #161d21;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 3px solid #87c4bd; outline-offset: 4px; }
[hidden] { display: none !important; }
.loading { padding: 48px; }
.gallery { max-width: 1180px; margin: 9vh auto; padding: 40px; }
.eyebrow { color: #91b5aa; font-size: 13px; letter-spacing: 0.16em; font-weight: 600; }
.gallery h1 { font-size: 64px; letter-spacing: -0.04em; margin: 20px 0; font-weight: 600; }
.gallery-intro { color: #b8c5c4; font-size: 20px; max-width: 680px; line-height: 1.6; }
.gallery-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 46px; }
.gallery-shot { display: flex; flex-direction: column; gap: 34px; padding: 26px; border: 1px solid #52645e; border-radius: 12px; background: #2d3a3c; color: #d8e4df; text-decoration: none; }
.gallery-shot:hover { background: #384b49; }
.gallery-shot-id { font-size: 38px; font-weight: 600; }
.error-panel { max-width: 850px; margin: 12vh auto; padding: 40px; border: 1px solid #ac7770; border-radius: 12px; background: #342c2c; }
.error-panel p { line-height: 1.6; overflow-wrap: anywhere; }
.error-panel a { color: #d4e8e2; }
body:has(.stage) { overflow: hidden; background: #0d1114; }
.stage { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow: hidden; background: #1e1f22; isolation: isolate; }
.scene, .screen-ui, .dialogue { position: absolute; inset: 0; pointer-events: none; }
.scene { transform-origin: 0 0; }
.layer { position: absolute; top: 0; left: 0; width: 2560px; height: 1440px; transform-origin: 0 0; will-change: transform; pointer-events: none; }
.paint-layer { position: absolute; max-width: none; user-select: none; }
.ui-box { position: absolute; top: 0; left: 0; transform-origin: 0 0; pointer-events: auto; --minimum-font: 18px; }
.ui-box > section, .ui-box > figure { width: 100%; height: 100%; margin: 0; }
.blink-lid { position: absolute; transform-origin: 50% 0; border-radius: 50%; pointer-events: none; }
.viewer-controls { position: fixed; bottom: 16px; left: 18px; display: flex; gap: 8px; opacity: 0.55; z-index: 10; }
.viewer-controls:hover, .viewer-controls:focus-within { opacity: 1; }
.viewer-back, .viewer-replay { font: 14px "Segoe UI", system-ui, sans-serif; text-decoration: none; border: 1px solid #64726c; color: #e7ece7; background: #263330; border-radius: 6px; padding: 9px 14px; }
.sql-editor { color-scheme: dark; background: #1e1f22; color: #d4d4d4; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #454849; }
.sql-toolbar { display: flex; align-items: center; gap: 22px; min-height: 46px; padding: 6px 18px; background: #2c2e32; font-size: max(19px, var(--minimum-font)); }
.sql-file { color: #a9b8b5; }
.sql-timer { margin-left: auto; font-family: "Cascadia Mono", Consolas, ui-monospace, monospace; }
.sql-copy { border: 1px solid #626970; background: #3c4248; color: #eee; border-radius: 4px; font-size: max(18px, var(--minimum-font)); padding: 5px 14px; }
.sql-code { flex: 1; min-height: 0; overflow: auto; white-space: pre; tab-size: 4; font: max(20px, var(--minimum-font)) / 1.22 "Cascadia Mono", Consolas, ui-monospace, monospace; margin: 0; padding: 14px 18px; }
.sql-keyword { color: #77b8fa; }
.sql-string { color: #ddb396; }
.sql-number { color: #a4d4aa; }
.sql-comment { color: #87a878; }
.sql-table-name { color: #7edbd0; }
.sql-status { padding: 8px 18px; background: #2c3438; font-size: max(18px, var(--minimum-font)); }
.sql-results { border-collapse: collapse; margin: 8px 18px; font: max(18px, var(--minimum-font)) / 1.4 "Cascadia Mono", Consolas, ui-monospace, monospace; }
.sql-results td, .sql-results th { border: 1px solid #596167; padding: 4px 10px; text-align: left; }
.meter { position: relative; padding: 18px 22px; background: #e9eee7; border: 2px solid #4a635d; border-radius: 12px; color: #283d38; box-shadow: 0 4px 12px #0003; }
.meter-label { font-size: max(28px, var(--minimum-font)); font-weight: 650; }
.meter-track { height: 12px; background: #c7d3c8; border-radius: 10px; overflow: hidden; margin-top: 12px; }
.meter-fill { height: 100%; background: #c38150; border-radius: 10px; }
.meter-drops { position: absolute; display: flex; gap: 10px; top: 24px; right: 20px; }
.sweat-drop { width: 13px; height: 18px; border-radius: 60% 60% 60% 12%; background: #71a8c1; transform: rotate(-35deg); }
.choice { display: flex; justify-content: center; align-items: center; gap: 18px; }
.choice-option { padding: 20px 32px; font-size: max(25px, var(--minimum-font)); color: #243831; background: #eef0e6; border: 2px solid #5c7569; border-radius: 10px; box-shadow: 0 4px 12px #0003; }
.choice-option[aria-pressed="true"] { background: #9dcbb7; border-color: #184735; }
.browser-page { position: relative; overflow: hidden; background: #f6f1e7; color: #1f2a33; }
.browser-bar { position: absolute; top: 0; left: 0; width: 100%; height: 46px; display: flex; gap: 22px; align-items: center; padding: 5px 20px; background: #dddcd7; border-bottom: 1px solid #babcb6; font-size: max(20px, var(--minimum-font)); z-index: 1; }
.browser-bar-thin { height: 38px; }
.browser-url { flex: 1; background: #f5f4ef; border-radius: 5px; padding: 2px 16px; }
.browser-controls { color: #6c787b; }
.slide { position: relative; display: flex; flex-direction: column; padding: 5% 6% 6%; overflow: hidden; background: #f6f1e7; color: #1f2a33; }
.slide-title { font-size: max(36px, var(--minimum-font)); line-height: 1.25; font-weight: 600; margin: 0 0 3%; max-width: 95%; }
.slide svg { flex: 1; min-height: 0; width: 100%; }
.slide-mark { position: absolute; right: 4%; bottom: 3%; font-size: max(20px, var(--minimum-font)); color: #536b64; }
.video-tile { position: relative; display: flex; flex-direction: column; overflow: hidden; background: #e4e8dc; border: 2px solid #4b5a54; border-radius: 6px; }
.video-tile-image { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: center; flex: 1; }
.video-tile-label { background: #283a36; color: #f1f0e9; font-size: max(20px, var(--minimum-font)); line-height: 1.2; padding: 9px 12px; }
.title-card { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 18px; padding: 28px; border-radius: 12px; background: #f6f1e7ee; color: #1f2a33; text-align: center; font-size: max(40px, var(--minimum-font)); }
.title-card p { margin: 0; }
.bubble { position: absolute; top: 0; left: 0; max-width: calc(600px * var(--display-scale)); padding: calc(16px * var(--display-scale)) calc(23px * var(--display-scale)); color: #26312d; background: white; border-radius: calc(18px * var(--display-scale)); font-size: calc(25px * var(--display-scale)); line-height: 1.32; font-weight: 500; filter: drop-shadow(0 3px 4px #0003); }
.bubble-tail { position: absolute; background: white; pointer-events: none; }
.slide-title, .video-tile-label { white-space: pre-line; }
.data-grid { color: #1f2a33; background: #f6f1e7; padding: 16px; overflow: auto; }
.data-grid-table { width: 100%; border-collapse: collapse; font-size: max(22px, var(--minimum-font)); line-height: 1.4; }
.data-grid-table caption { text-align: left; font-weight: 600; margin-bottom: 14px; }
.data-grid-table th, .data-grid-table td { border-bottom: 1px solid #bac7c0; padding: 9px 12px; text-align: left; }
.data-grid-table th { background: #dce5dd; font-weight: 600; }
.data-grid-table .grid-number { text-align: right; font-variant-numeric: tabular-nums; }
.grid-highlight { background: #deecd1; box-shadow: inset 5px 0 #538368; }
.sql-editor-has-save { position: relative; }
.sql-editor > .data-grid { max-height: 42%; flex-shrink: 0; background: #252c31; color: #d4d4d4; }
.sql-editor .data-grid-table { font: max(18px, var(--minimum-font)) / 1.4 "Cascadia Mono", Consolas, ui-monospace, monospace; }
.sql-editor .data-grid-table th { background: #38464a; }
.sql-editor .data-grid-table td, .sql-editor .data-grid-table th { border-color: #596167; padding: 4px 10px; }
.sql-editor .grid-highlight { background: #33473b; }
.sql-saved { position: absolute; right: 18px; bottom: 52px; background: #354f45; border: 1px solid #90b5a3; border-radius: 6px; padding: 14px 18px; font-size: max(20px, var(--minimum-font)); }
.ai-panel { background: #1e1f22; color: #d4d4d4; padding: 26px; overflow: auto; font-size: max(25px, var(--minimum-font)); line-height: 1.45; }
.ai-title { font-size: max(26px, var(--minimum-font)); color: #95c7bb; margin: 0 0 20px; }
.ai-question { padding: 16px; border-radius: 8px; background: #343b40; margin: 0 0 20px; white-space: pre-wrap; }
.ai-answer { margin: 0; white-space: pre-wrap; }
.ai-name { background: #425359; color: #a3dfd0; border-bottom: 2px dotted #93b0a8; }
.ai-source { display: inline-block; margin-top: 18px; color: #a8c6bc; border: 1px solid #586e65; border-radius: 5px; padding: 5px 10px; font-size: max(18px, var(--minimum-font)); }
.label-chip, .toast { display: flex; align-items: center; justify-content: center; padding: 15px 24px; border: 1px solid #87b5a0; border-radius: 10px; background: #e7eee2; color: #244138; font-size: max(25px, var(--minimum-font)); text-align: center; box-shadow: 0 4px 16px #0003; }
.text-block { padding: 30px; background: #f6f1e7; color: #1f2a33; overflow: auto; }
.text-block > * { white-space: pre-wrap; margin: 0 0 18px; }
.text-h1 { font-size: max(38px, var(--minimum-font)); line-height: 1.2; }
.text-h2 { font-size: max(30px, var(--minimum-font)); }
.text-body { font-size: max(26px, var(--minimum-font)); line-height: 1.45; }
.text-small { font-size: max(19px, var(--minimum-font)); line-height: 1.4; }
.text-code { font: max(23px, var(--minimum-font)) / 1.45 "Cascadia Mono", Consolas, ui-monospace, monospace; }
.phone { position: relative; padding: 28px 13px 18px; border: 8px solid #232e33; border-radius: 32px; background: #232e33; color: #1f2a33; overflow: hidden; }
.phone:before { content: ''; position: absolute; width: 22%; height: 9px; border-radius: 10px; background: #10181c; top: 8px; left: 39%; }
.phone-content { height: 100%; padding: 24px; overflow: auto; border-radius: 14px; background: #f6f1e7; font-size: max(24px, var(--minimum-font)); line-height: 1.4; }
.phone-content h2 { font-size: max(28px, var(--minimum-font)); line-height: 1.3; }
.phone-video-call .phone-content { padding: 0; }
.phone-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.phone-query { background: #dfe5de; border-radius: 12px; padding: 12px; margin-top: 0; }
.phone-results { padding-left: 28px; }
.phone-results li { margin: 26px 0; color: #285662; }
.phone-meta { color: #6a7979; }
.phone-lock-card .phone-content { display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; gap: 20px; }
.phone-lock { display: block; width: 58px; height: 45px; border-radius: 7px; background: #607b73; position: relative; color: transparent; margin-top: 25px; }
.phone-lock:before { content: ''; position: absolute; top: -25px; left: 12px; width: 34px; height: 34px; border: 6px solid #607b73; border-radius: 20px 20px 0 0; }
.phone-lock:after { content: ''; position: absolute; width: 7px; height: 16px; border-radius: 5px; background: #e9eee3; left: 26px; top: 15px; }
.phone button, .cards-controls button { font-size: max(24px, var(--minimum-font)); border: 1px solid #59776a; border-radius: 8px; padding: 14px 24px; background: #e0ecdc; color: #244038; }
.docs-tooltip { color: #1f2a33; overflow: hidden; }
.docs-card { background: #f6f1e7; padding: 22px 28px; overflow: auto; max-height: 100%; border: 2px solid #719586; border-radius: 8px; }
.docs-tooltip h2 { margin: 0 0 14px; font: max(28px, var(--minimum-font)) / 1.3 "Cascadia Mono", Consolas, ui-monospace, monospace; }
.docs-description { font-size: max(24px, var(--minimum-font)); line-height: 1.45; margin: 0; white-space: pre-wrap; overflow: hidden; }
.split { display: flex; background: #e3e8df; color: #1f2a33; overflow: hidden; gap: 4px; }
.split-side { position: relative; flex: 1; min-width: 0; overflow: hidden; }
.split-label { height: 58px; margin: 0; padding: 10px 18px; background: #d8e2d8; font-size: max(28px, var(--minimum-font)); }
.split-content { position: absolute; top: 58px; left: 0; right: 0; bottom: 0; overflow: auto; }
.counter { display: flex; align-items: center; justify-content: center; font: max(76px, var(--minimum-font)) / 1.2 "Cascadia Mono", Consolas, ui-monospace, monospace; color: #1f2a33; background: #f6f1e7; font-variant-numeric: tabular-nums; }
.flip-cards { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 36px 48px; gap: 22px; background: #f6f1e7f5; color: #1f2a33; border-radius: 16px; text-align: center; overflow: auto; }
.flip-cards h1 { margin: 0; font-size: max(40px, var(--minimum-font)); line-height: 1.2; }
.cards-progress { margin: 0; font-size: max(22px, var(--minimum-font)); }
.flip-card { display: flex; flex: 1; min-height: 180px; width: 100%; flex-direction: column; justify-content: center; align-items: center; padding: 24px; border: 2px solid #648f7c; border-radius: 12px; color: #243831; background: #e4ecdf; }
.flip-card h2 { font-size: max(32px, var(--minimum-font)); margin: 0; }
.flip-card p { font-size: max(26px, var(--minimum-font)); line-height: 1.4; margin: 20px 0 0; white-space: pre-wrap; }
.cards-controls { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.cards-controls button:disabled { opacity: 0.4; cursor: default; }
.end-card { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 48px 56px; gap: 26px; background: #f6f1e7e0; color: #1f2a33; border: 1px solid #fff9; border-radius: 20px; text-align: center; box-shadow: 0 12px 48px #473f3326; overflow: auto; }
.end-heading { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.end-card h1 { margin: 0; font-size: max(96px, var(--minimum-font)); line-height: 1.1; font-weight: 650; letter-spacing: -2px; }
.end-subtitle { margin: 0; font-size: max(36px, var(--minimum-font)); line-height: 1.3; }
.end-actions { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }
.end-card button { font-size: max(30px, var(--minimum-font)); line-height: 1.3; border: 2px solid #59776a; border-radius: 10px; padding: 18px 28px; background: transparent; color: #244038; }
.end-card .end-primary { background: #335b4b; border-color: #335b4b; color: #fffaf0; font-weight: 600; }
.end-card button:focus-visible { outline: 4px solid #244038; outline-offset: 6px; }
.end-card .end-link { font-size: max(22px, var(--minimum-font)); background: transparent; border: 0; text-decoration: underline; text-underline-offset: 4px; padding: 5px; }
.end-teaser { margin: 0; font-size: max(24px, var(--minimum-font)); line-height: 1.5; white-space: pre-wrap; }
.end-wordmark { margin: 0; font-size: max(20px, var(--minimum-font)); line-height: 1.4; color: #536b64; }
.slide-boxes { display: flex; gap: 24px; flex-wrap: wrap; flex: 1; align-items: center; justify-content: center; }
.slide-box { border: 3px solid #64897e; border-radius: 10px; padding: 28px; font-size: max(34px, var(--minimum-font)); white-space: pre-wrap; }
.slide-tag, .slide-stat { display: flex; align-items: center; justify-content: center; flex: 1; font-size: max(56px, var(--minimum-font)); text-align: center; white-space: pre-wrap; }
.slide-tag { border: 2px solid #779486; border-radius: 20px; background: #e5ebdd; margin: 20px; }
.slide-text { font-size: max(26px, var(--minimum-font)); line-height: 1.4; white-space: pre-wrap; }
.story-controls { left: 18px; transform: none; align-items: center; opacity: 0.85; background: #263330ed; border: 1px solid #61726a; padding: 8px; border-radius: 8px; }
.story-controls button, .story-controls select { font: 14px "Segoe UI", system-ui, sans-serif; color: #e7ece7; background: #344640; border: 1px solid #698074; border-radius: 5px; padding: 8px 12px; }
.story-controls button:disabled { opacity: 0.4; }
.story-controls select { max-width: 200px; }
.read-along { position: fixed; top: 18px; left: 18px; z-index: 15; width: 530px; max-height: calc(100vh - 110px); overflow: auto; padding: 24px; background: #24332ff5; color: #f0f0e7; border: 1px solid #719385; border-radius: 12px; box-shadow: 0 4px 30px #0008; }
.read-along h2 { margin: 0 0 16px; font-size: 24px; }
.read-along h3 { font-size: 16px; color: #b6cbbf; margin-top: 22px; }
.read-along p, .read-along li { font-size: 16px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.read-along pre { white-space: pre-wrap; font: 14px / 1.4 "Cascadia Mono", Consolas, ui-monospace, monospace; }
.mouth-patch { position: absolute; pointer-events: none; }
.paint-hover { position: absolute; top: 0; left: 0; transform-origin: 0 0; pointer-events: auto; }
.hover-tooltip { position: fixed; z-index: 60; pointer-events: none; max-width: 620px; max-height: 65vh; overflow: hidden; margin: 0; padding: 16px 20px; border: 1px solid #91b5aa; border-radius: 8px; background: #f6f1e7; color: #1f2a33; box-shadow: 0 4px 18px #0005; font: 16px / 1.4 "Segoe UI", system-ui, sans-serif; white-space: pre-wrap; }
.transition-fill { position: absolute; inset: 0; z-index: 30; pointer-events: none; }
.transition-solid { position: absolute; inset: 0; z-index: 30; }
.transition-ui { position: absolute; top: 0; left: 0; transform-origin: 0 0; --minimum-font: 18px; }
.transition-ui > section { width: 100%; height: 100%; }
.opening-timer { display: flex; gap: 0.6em; align-items: center; justify-content: center; white-space: nowrap; color: #d4d4d4; background: #1e1f22; font: 100px / 1.2 "Cascadia Mono", Consolas, ui-monospace, monospace; }
.transition-ui-timer .opening-timer { background: transparent; }
.note-overlay { color: #282a23; padding: 6%; white-space: pre-wrap; font-family: "Segoe Print", "Comic Sans MS", cursive; line-height: 1.25; overflow: hidden; }
.print-dialog { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 26px; color: #1f2a33; background: #f6f1e7; border: 2px solid #68786e; border-radius: 9px; padding: 24px; }
.print-dialog h2 { margin: 0; font-size: max(32px, var(--minimum-font)); }
.print-dialog button { font-size: max(28px, var(--minimum-font)); padding: 12px 32px; color: #fffaf0; background: #335b4b; border: 2px solid #59776a; border-radius: 8px; }
.print-pressed { transform: translateY(2px); box-shadow: inset 0 3px 8px #0005; }
.play-screen { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: #263330; }
.play-screen button { font-size: 32px; padding: 22px 65px; border: 2px solid #91b5aa; border-radius: 12px; color: #23382f; background: #f6f1e7; }
.calendar-bar { position: fixed; left: 50%; transform: translateX(-50%); z-index: 12; min-height: 48px; display: flex; gap: 2px; padding: 6px; background: #263330f5; border-top: 1px solid #61726a; }
.calendar-bar button { flex: 1 1 auto; white-space: nowrap; font-size: 13px; color: #e7ece7; background: #344640; border: 1px solid #698074; border-radius: 4px; padding: 8px 6px; }
.calendar-bar button[aria-current="true"] { background: #587d6c; border-color: #b9d5bd; }
.calendar-bar button:disabled { color: #aab7ac; cursor: default; }
.episode-mode .episode-controls { bottom: auto; top: 12px; }
.transition-ui { z-index: 31; pointer-events: none; }
.transition-ui-sql-editor .sql-code, .transition-ui-sql-editor .sql-status, .transition-ui-sql-editor .sql-file, .transition-ui-sql-editor .sql-copy { display: none; }
.transition-ui-sql-editor .sql-toolbar { height: 100%; justify-content: center; background: #1e1f22; border: 0; }
.transition-ui-sql-editor .sql-timer { margin: 0; font-size: 100px; }
.hover-tooltip { pointer-events: auto; overflow: auto; }
.episode-controls button[aria-pressed="true"] { background: #587d6c; border-color: #b9d5bd; }

/* Gate D1 optional component states; legacy layouts retain their selectors. */
.sql-main-code { display: block; }
.sql-selection { background: #315575; box-shadow: 0 0 0 1px #6b93b5; }
.sql-append { margin-top: 20px; white-space: normal; }
.sql-appended-code { white-space: pre; tab-size: 4; font: inherit; margin: 0 0 12px; }
.sql-append .data-grid { background: #252c31; color: #d4d4d4; }
.sql-status-finished { background: #405f43; color: #f0f7ee; }
.sql-empty-results { position: relative; flex-shrink: 0; background: #252c31; border-top: 1px solid #596167; overflow: hidden; }
.sql-empty-results small { position: absolute; right: 18px; bottom: 10px; font-size: max(18px, var(--minimum-font)); }
.ai-chat { display: flex; flex-direction: column; }
.ai-messages { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; flex: 1; min-height: 0; overflow: auto; }
.ai-chat .ai-question { align-self: flex-end; max-width: 88%; background: #3b5550; border-radius: 16px 16px 3px 16px; margin: 0; }
.ai-chat .ai-answer { max-width: 92%; padding: 16px; background: #2d343b; border-radius: 16px 16px 16px 3px; }
.ai-composer { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 12px; border: 1px solid #667d77; border-radius: 12px; background: #2b3438; }
.ai-input { flex: 1; min-width: 0; resize: none; border: 0; background: transparent; color: inherit; font: inherit; height: 2.9em; }
.ai-send { color: #a8c6bc; background: #384b47; border: 1px solid #617d72; border-radius: 10px; font: inherit; padding: 12px 18px; }
.ai-send-ready { background: #659d88; color: #fff; box-shadow: 0 0 20px #87c4bd80; }
.ai-send[aria-pressed="true"] { transform: scale(.9); }
.ai-typing-dots { display: flex; gap: 8px; padding: 18px; }
.ai-typing-dots i { width: 10px; height: 10px; background: #a8c6bc; border-radius: 50%; animation: ai-dot .8s ease-in-out infinite alternate; }
.ai-typing-dots i:nth-child(2) { animation-delay: .15s; }
.ai-typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ai-dot { to { opacity: .3; transform: translateY(-5px); } }
.find-panel { background: #252c31; color: #d4d4d4; padding: 24px; overflow: auto; font-size: max(24px, var(--minimum-font)); }
.find-title { margin: 0 0 20px; font-size: max(28px, var(--minimum-font)); }
.find-query { width: 100%; padding: 12px; background: #1e1f22; color: #e4e8e5; border: 1px solid #657c75; font: inherit; }
.find-scope { color: #b0c3b9; }
.find-result { padding: 16px; background: #38584b; border-left: 5px solid #8fc2a7; }
.phone-spinner { display: block; width: 64px; height: 64px; margin: 70px auto; border: 6px solid #c9d4ce; border-top-color: #526d62; border-radius: 50%; animation: phone-spin .75s linear infinite; }
@keyframes phone-spin { to { transform: rotate(360deg); } }
.scene-blur-guard { position: absolute; max-width: none; pointer-events: none; }