/* Live scanner theme. Existing functional layouts are retained below the camera. */
:root{--bg:#070b12;--panel:#101824;--line:#2d3d50;--text:#f3f7fd;--muted:#acbdce;--accent:#a5f5db;--ink:#08291f}
body{background:radial-gradient(ellipse at 90% 0,#12303a55,transparent 46%),var(--bg)}
.shell{max-width:1440px}header{height:86px}.brandmark{border-radius:11px 3px 11px 3px;background:var(--accent);color:var(--ink);box-shadow:0 0 30px #a5f5db1c}.tagline{letter-spacing:2.4px}.local-badge{font-size:.875rem}
button,.button{background:#172332}button:hover{background:#24374a}button[aria-pressed=true]{color:var(--accent);background:#183b36;border-color:#73bda8}.primary{background:var(--accent);color:var(--ink);border-color:var(--accent)}.primary:hover{background:#d0ffec}.text-button{background:transparent}
.experience-switch{width:460px;max-width:100%;gap:6px;margin-top:22px;padding:5px;border:1px solid var(--line);background:#0c131d;border-radius:16px}.experience-switch button{gap:4px;border-color:transparent;background:transparent;padding:10px 16px}.experience-switch button[aria-pressed=true]{background:#1b3038;border-color:#42616a;color:var(--text)}.experience-switch strong{font-weight:600}.experience-switch span{color:var(--muted);font-size:.75rem}
nav{position:absolute;top:107px;right:max(44px,calc((100vw - 1352px)/2));padding:0;gap:5px}nav button{min-width:0;font-size:.875rem;padding:10px 16px}nav button[aria-pressed=true]{background:#192831;color:var(--accent);border-color:#38575a}
.page-heading{padding:28px 0 20px}.eyebrow{font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-weight:500}.profile-picker select,select{max-width:100%;min-height:48px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:#101a28;color:var(--text)}.profile-picker select{font-size:.875rem}.workspace-grid{grid-template-columns:minmax(0,1fr) 285px;gap:24px}.camera-column{min-width:0}
.viewfinder,body[data-mode=identify] .viewfinder{height:600px;min-height:480px;max-height:none;border-radius:24px;background:radial-gradient(ellipse at 50% 45%,#16454666,transparent 65%),linear-gradient(140deg,#12202d,#0a1019);border:1px solid #3f606c;box-shadow:0 0 0 6px #12202766,0 20px 70px #0005}.viewfinder video{z-index:0}.viewfinder #display{z-index:1}
.viewer-top,.viewer-bottom{left:20px;right:20px;z-index:4}.viewer-top{top:20px;right:80px;align-items:flex-start}.viewer-bottom{top:128px;bottom:auto}.glass{background:#09121ee8;color:#f3f7fd;border-color:#8bc4cf40;backdrop-filter:blur(12px)}button.glass{min-height:44px}#view-label{color:var(--accent);max-width:55%}.expand-scanner{position:absolute;right:16px;top:16px;z-index:6;width:48px;font-size:1.6rem!important;padding:0}
.quick-views{position:absolute;top:72px;left:20px;right:20px;z-index:4;display:flex;gap:8px;pointer-events:none}.quick-views button{pointer-events:auto;min-height:44px;font-size:.875rem;background:#09121ee8;border-color:#8bc4cf55;backdrop-filter:blur(12px)}.quick-views button[aria-pressed=true]{background:#183f35;color:#c9ffec;border-color:var(--accent)}
.scanner-guides{position:absolute;inset:150px 35px 215px;pointer-events:none;z-index:2}.scanner-guides i{position:absolute;width:25px;height:25px;border-color:#b2fce565;border-style:solid;border-width:0}.scanner-guides i:nth-child(1){left:0;top:0;border-left-width:1px;border-top-width:1px}.scanner-guides i:nth-child(2){right:0;top:0;border-right-width:1px;border-top-width:1px}.scanner-guides i:nth-child(3){left:0;bottom:0;border-left-width:1px;border-bottom-width:1px}.scanner-guides i:nth-child(4){right:0;bottom:0;border-right-width:1px;border-bottom-width:1px}
#empty-state{inset:132px 24px 24px;z-index:3}.camera-icon{font-size:4.5rem;line-height:1.2;filter:drop-shadow(0 0 17px #a5f5db66)}#empty-state h2{font-size:1.8rem;margin-top:16px}#empty-state p{color:#cad8e5;font-size:1rem}.small{font-size:.875rem}
.target{height:66px;width:66px;min-height:66px;background:#06181a22!important;border:1px solid #e5fff5;box-shadow:0 0 0 7px #05141b66,0 0 22px #a5f5db44,inset 0 0 0 6px #01181e44;z-index:3}.target:before{width:16px;height:1px}.target:after{width:1px;height:16px}.target span{width:86px;height:86px;border:1px dashed #ffffff99;border-radius:50%;position:absolute;pointer-events:none}
.viewfinder:has(#empty-state:not([hidden])) .reading-card{display:none}.reading-card{position:absolute;z-index:5;bottom:16px;left:16px;right:16px;background:#08111ef2;border:1px solid #82b9c655;border-radius:16px;padding:16px;display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:4px 14px;backdrop-filter:blur(18px);box-shadow:0 8px 32px #0005}.card-top{grid-column:1/3;display:flex;justify-content:flex-start;gap:12px;margin:0 0 5px}.card-top>span{color:var(--accent)}.colour-symbol{grid-column:1;grid-row:2/4;width:48px;height:48px;border:1px solid #c3d6e1;border-radius:12px;font-size:1.6rem;background:#1b3038;margin:0}#colour-name{grid-column:2;grid-row:2;font-size:1.8rem;line-height:1.13;letter-spacing:-.7px;margin:0;text-transform:none}.colour-values{grid-column:2;grid-row:3;gap:8px;font-size:.75rem;margin-top:3px}.colour-values span+span{border:0;padding:0}.symbol-caption{grid-column:1/3;font-size:.75rem;margin:6px 0 0}.speak{grid-column:3;grid-row:1/3;align-self:center;width:auto;font-size:.875rem;min-height:44px;padding:10px 12px}.frame-explain{grid-column:3;grid-row:3/5;display:flex;flex-direction:column;gap:4px;text-align:center}.frame-explain button{font-size:.875rem;min-height:44px;padding:9px 12px;background:#18313a;border-color:#4c8b92;color:#d7ffff}.frame-explain>span{font-size:.75rem;color:var(--muted)}.speech-status{grid-column:1/-1;text-align:left;margin:8px 0 0}
.source-controls{flex-wrap:wrap;margin-top:16px}.source-controls button{background:#101b28;min-width:100px;padding:10px}.status{font-size:.875rem;margin:12px 2px 20px}.assist-controls{border-top:1px solid var(--line);padding-top:20px}.segmented button{flex-basis:auto;background:none;font-size:.875rem;min-width:100px}.segmented button[aria-pressed=true]{background:#1c3937;color:var(--accent);border-color:#507b71}.range-row input{height:32px}
.auto-card,.compare-card,.settings-card{background:linear-gradient(145deg,#142131,#0e1622);border-color:var(--line);border-radius:18px;padding:22px}.auto-card{margin-top:0}.auto-card select{background:#101a28}.auto-card p,.tip p{font-size:.875rem;line-height:1.6}.tip{margin:22px 8px}.compare-slots{grid-template-columns:1fr}.compare-card{margin-top:0}.compare-card>button{margin-top:8px;width:100%}.settings-card p{font-size:1rem}fieldset label:has(input:checked){background:#1c3937}.text-button:hover{background:#142330}
#before-after{inset:132px 16px 16px;z-index:2}.before-after-view .scanner-guides{display:none}.before-after-view .workspace-grid{grid-template-columns:1fr}.before-after-view .camera-column{max-width:none}.comparison-layout{margin-top:16px}.explain-photo{position:relative;min-height:360px;background:radial-gradient(ellipse,#15323e,#101824);border-color:#3f606c}.explain-photo p{max-width:320px}.photo-badge{position:absolute;top:16px;left:16px;font-family:ui-monospace,monospace;letter-spacing:2px;font-size:.75rem;background:#07131de6;border:1px solid var(--line);padding:8px;border-radius:7px}.explain-photo canvas{max-height:540px}.explain-experience .page-heading{padding-bottom:12px}
.scanner-expanded{overflow:hidden}.scanner-expanded .viewfinder{position:fixed;inset:0;z-index:30;width:100%;height:100dvh;max-height:none;min-height:0;border:0;border-radius:0}.scanner-expanded .viewer-top{top:calc(20px + env(safe-area-inset-top))}.scanner-expanded .expand-scanner{top:calc(16px + env(safe-area-inset-top))}.scanner-expanded .quick-views{top:calc(72px + env(safe-area-inset-top))}.scanner-expanded .reading-card{bottom:calc(20px + env(safe-area-inset-bottom));max-width:650px;margin:auto}.scanner-expanded .viewer-bottom{top:calc(128px + env(safe-area-inset-top))}.scanner-expanded #before-after{top:calc(132px + env(safe-area-inset-top))}.scanner-expanded .scanner-guides{inset:25% 12% 32%}
@media(max-width:1050px){.shell{padding:0 24px}nav{right:24px}nav button{padding:10px}.experience-switch{width:395px}.workspace-grid{grid-template-columns:minmax(0,1fr) 250px;gap:18px}.reading-card{gap:4px 10px;padding:14px}#colour-name{font-size:1.5rem}.auto-card,.compare-card{padding:18px}}
@media(max-width:760px){.shell{padding:0 16px}header{height:64px;gap:12px}.brandmark{width:29px;height:29px;font-size:1.65rem;border-radius:9px 3px 9px 3px}.local-badge{font-size:.75rem}.experience-switch{margin-top:14px;width:100%;gap:4px;padding:4px}.experience-switch button{padding:8px 12px;min-height:52px}.experience-switch strong{font-size:.875rem}.experience-switch span{font-size:.75rem}nav{position:fixed;inset:auto 0 0;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:#0a121ff5;border-top-color:#37515e;z-index:20;gap:4px}nav button{font-size:.875rem;padding:7px 4px;min-height:56px}.page-heading,body[data-mode=identify] .page-heading{display:flex;padding:18px 0 16px;gap:8px}.page-heading .eyebrow{font-size:.75rem;letter-spacing:1.2px;margin-bottom:6px}h1{font-size:1.375rem;letter-spacing:-.5px}.profile-picker select{font-size:.875rem;max-width:145px;padding:10px 8px;min-height:44px}.workspace-grid,.settings-grid{grid-template-columns:1fr;gap:18px}.camera-column{display:block}.reading-column{display:grid;gap:14px}body[data-mode=identify] .workspace-grid{padding-top:0}.viewfinder,body[data-mode=identify] .viewfinder{height:calc(100svh - 275px);min-height:490px;max-height:650px;border-radius:20px;box-shadow:0 0 0 4px #12202766}.viewer-top{left:12px;right:68px;top:14px;gap:6px}.glass{font-size:.75rem;padding:8px}.expand-scanner{right:10px;top:10px;width:44px}.quick-views{top:65px;left:12px;right:12px;gap:6px}.quick-views button{font-size:.875rem;padding:10px}.viewer-bottom{top:119px;left:12px;right:12px}.scanner-guides{inset:165px 25px 215px}.reading-card{left:10px;right:10px;bottom:10px;padding:12px;grid-template-columns:40px minmax(0,1fr) auto;gap:3px 9px}.colour-symbol{width:38px;height:38px;font-size:1.3rem;border-radius:10px;grid-row:2/4}#colour-name{font-size:1.5rem;margin:0}.card-top{grid-column:1/3;gap:8px;margin-bottom:5px}.card-top .eyebrow{font-size:.75rem;letter-spacing:1px}.colour-values{font-size:.75rem;gap:4px;line-height:1.5}.colour-values #rgb{display:none}.speak{grid-column:3;grid-row:1/4;padding:8px 10px;font-size:.875rem;min-height:44px}.symbol-caption{grid-column:1/-1;font-size:.75rem;margin-top:7px}.frame-explain{grid-column:1/-1;grid-row:auto;flex-direction:row;align-items:center;text-align:left;gap:10px;margin-top:8px}.frame-explain button{flex:1;font-size:.875rem;min-height:44px}.frame-explain span{max-width:108px;font-size:.75rem;line-height:1.5}.speech-status{margin:5px 0 0;font-size:.75rem}.source-controls{gap:6px;margin-top:12px}.source-controls button{font-size:.875rem;min-width:90px;padding:10px 6px}.source-controls #stop-camera{flex-basis:100%}.segmented button{flex-basis:40%}.tip{margin:0 4px 8px}.auto-card{padding:20px}.compare-slots{grid-template-columns:1fr 1fr}.control-label{flex-wrap:wrap}#empty-state{inset:120px 18px 18px}#empty-state h2{font-size:1.5rem}#empty-state p{font-size:1rem;margin-bottom:18px}.camera-icon{font-size:3.5rem}.before-after-view .viewfinder{height:65svh}#before-after{inset:124px 8px 10px;gap:8px}.explain-photo{min-height:300px}.scanner-expanded .viewfinder{height:100dvh;min-height:0;max-height:none;border-radius:0}.scanner-expanded .quick-views{top:calc(65px + env(safe-area-inset-top))}.scanner-expanded .viewer-bottom{top:calc(119px + env(safe-area-inset-top))}}
@media(max-width:360px){.shell{padding:0 10px}h1{font-size:1.2rem}.profile-picker select{max-width:128px}.card-top{flex-wrap:wrap}.reading-card{grid-template-columns:34px minmax(0,1fr) auto;gap:3px 7px}.colour-symbol{width:32px;height:34px}#colour-name{font-size:1.3rem}.frame-explain span{max-width:90px}}
.in-view-layout{display:none}.scanner-expanded.before-after-view .in-view-layout{position:absolute;display:flex;bottom:calc(16px + env(safe-area-inset-bottom));left:16px;right:16px;gap:8px;z-index:6}.in-view-layout button{flex:1;min-width:0;font-size:.875rem}.scanner-expanded.before-after-view #before-after{bottom:calc(80px + env(safe-area-inset-bottom))}.reading-card{max-height:48%;overflow:auto}
@media(prefers-reduced-motion:no-preference){.target span{animation:target-breathe 3s ease-in-out infinite}@keyframes target-breathe{50%{opacity:.4;transform:scale(1.05)}}}
@media(prefers-reduced-transparency:reduce){.reading-card,.glass,.quick-views button,nav{backdrop-filter:none;background:#09121e}}
.scene-options{display:grid;gap:10px;margin:20px 0}.scene-options label{font-size:1rem}.scene-options select{width:100%;font-size:1rem;min-height:52px}.scene-filters{display:flex;gap:8px}.scene-filters button{flex:1;min-width:0;font-size:1rem;padding:10px}.scene-caution{padding:16px;border:1px solid #cdbd80;border-left:4px solid #f7e4a4;background:#282617;color:#fff1c7!important;border-radius:12px;font-size:1.0625rem!important}.scene-object{padding:20px;margin:16px 0;border:1px solid #436370;border-radius:16px;background:#0c1825}.scene-object-heading{display:flex;gap:12px;align-items:center}.scene-object h3{font-size:1.3rem;margin:0;line-height:1.4}.object-number{border:1px solid #829faa;border-radius:9px;min-width:34px;height:34px;display:grid;place-items:center;color:var(--accent);font-family:ui-monospace,monospace}.object-location{margin:8px 0!important;font-size:.875rem!important}.object-colours{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.object-colour{border:1px solid #587585;border-radius:8px;padding:6px 10px;font-size:1rem;color:var(--text)}.object-fact,.object-meaning{font-size:1.125rem!important;line-height:1.65!important}.object-fact{color:var(--text)!important}.object-meaning{border-top:1px solid var(--line);padding-top:14px}.object-listen{width:100%;margin-top:8px;min-height:52px}.object-uncertain{color:#ffe4a3!important;font-size:1rem!important}.object-label{margin:0;padding:16px;background:#070d15;border:1px solid var(--line);border-radius:10px;font-size:1.125rem;white-space:pre-wrap}.object-label-title{font-size:.875rem!important}#scene-count{margin-top:26px;font-size:.875rem;line-height:1.6}#scene-focus{margin:16px 0}#scene-focus-note{min-height:44px}#explain-speak{width:100%;min-height:54px;background:var(--accent);color:var(--ink)}#scene-uncertainties p{font-size:1rem}#explain-experience .page-heading h1{max-width:650px}#explain-experience .page-heading .eyebrow{line-height:1.5}
/* Sampling guidance stays next to the colour and scrolls with the reading card. */
.sample-quality{grid-column:1/-1;font-size:13px;line-height:1.45;color:var(--muted);margin:4px 0 8px;}
.profile-guidance{margin-top:18px;line-height:1.6;}
.profile-guidance summary{cursor:pointer;padding:12px 0;font-weight:600;}
header .guide-link{margin-left:auto;display:inline-flex;align-items:center;min-height:44px;font-size:.875rem;font-weight:600;color:var(--accent);text-underline-offset:5px}header .local-badge{margin-left:0}footer .guide-link{color:var(--accent);font-size:.875rem;text-underline-offset:5px;min-height:44px;display:inline-flex;align-items:center}@media(max-width:600px){header .local-badge{display:none}}