:root{color-scheme:dark;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;background:#0b1018;color:#e7edf6;font-size:16px}*{box-sizing:border-box}body{margin:0;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}header,main{max-width:1000px;margin:auto}header{display:flex;justify-content:space-between;align-items:center;padding:20px 22px;border-bottom:1px solid #253041}.brand{font-size:12px;letter-spacing:.16em;color:#99b8ff;font-weight:700}#connection{font-size:12px;color:#96a5b9}main{padding:22px}.status{padding:0 0 18px}.eyebrow{color:#7eaeff;font-size:12px;font-weight:700;letter-spacing:.08em}h1{font-size:clamp(19px,3.6vw,26px);line-height:1.5;margin:9px 0 16px;font-weight:650;word-break:keep-all}h2{font-size:18px;margin:0}.steps{display:flex;gap:18px;font-size:12px;color:#75849a}.steps .active{color:#9bffce}#metrics,.muted{color:#8799b0;font-size:12px;line-height:1.6}button{background:#a4c1ff;color:#101a2c;border:0;border-radius:10px;padding:14px 24px;font:inherit;font-weight:650;cursor:pointer}button:disabled{opacity:.5}button:focus-visible,#code-window:focus-visible{outline:2px solid #a4c1ff;outline-offset:4px}#setup{border:1px solid #2b3a50;border-radius:14px;padding:18px;margin-bottom:18px;line-height:1.6}.preview{position:relative;border:1px solid #253041;border-radius:12px;overflow:hidden;background:#04070b;display:none}.preview video{display:block;width:100%;max-height:210px;object-fit:contain}.preview span{position:absolute;bottom:8px;left:12px;font-size:11px;color:#fff;background:#080d15c9;padding:4px 8px;border-radius:5px}#answer{margin-top:20px}.answer-header{display:flex;justify-content:space-between;align-items:center;gap:12px}#code-progress{white-space:nowrap;font-size:11px;color:#9bffce}#approach{padding-left:20px;color:#b7c5d9;font-size:14px;line-height:1.65}#code-window{background:#121c2b;border:1px solid #293951;border-radius:12px;max-height:49vh;min-height:180px;overflow:auto;scrollbar-width:thin;padding:18px}pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;tab-size:4;font:14px/1.7 Consolas,"SFMono-Regular",monospace;color:#cfe1ff}footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;color:#687a94;font-size:10px;padding:18px 0}.has-answer .preview video{max-height:90px}.has-answer .preview span{display:none}.has-answer #metrics{margin-bottom:0}@media(orientation:landscape) and (max-height:600px){header{padding:10px 20px}main{padding:14px 20px}.has-answer .preview{display:none}.has-answer h1{font-size:17px;margin:5px 0 9px}.has-answer #code-window{max-height:50vh}.has-answer #approach{margin:8px 0}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
:root{--header-height:58px}[hidden]{display:none!important}.camera-active.has-answer header{height:var(--header-height);padding:12px 22px}.camera-active.has-answer main{height:calc(100dvh - var(--header-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom));display:flex;flex-direction:column;overflow:hidden;padding-top:12px;padding-bottom:4px}.camera-active.has-answer .status{flex-shrink:0;padding-bottom:8px}.camera-active.has-answer h1{font-size:17px;margin:4px 0 8px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.camera-active.has-answer .preview{display:none}.camera-active.has-answer #answer{display:flex;flex-direction:column;flex:1;min-height:0;margin-top:10px}.camera-active.has-answer #approach{flex-shrink:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font-size:12px;line-height:1.5;margin:8px 0}.camera-active.has-answer #code-window{flex:1;min-height:80px;max-height:none}.camera-active.has-answer #complexity,.camera-active.has-answer #cautions{flex-shrink:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;margin:5px 0;font-size:11px}.camera-active.has-answer footer{flex-shrink:0;padding:5px 0}.camera-active.has-answer #metrics{font-size:10px;margin:4px 0 0}@media(orientation:landscape) and (max-height:600px){.camera-active.has-answer .status{padding-bottom:0}.camera-active.has-answer #approach,.camera-active.has-answer #complexity,.camera-active.has-answer #cautions,.camera-active.has-answer footer{display:none}.camera-active.has-answer .steps,.camera-active.has-answer #metrics{display:none}.camera-active.has-answer #answer{margin-top:6px}.camera-active.has-answer .answer-header{margin-bottom:6px}}