:root{ --disp:'Space Grotesk',Archivo,Arial,sans-serif;--body:'DM Sans',system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,Menlo,monospace; --red:#ea383a;--red-ink:#bf2426;--red-wash:#fdecec;--on-red:#fff; --ink:#0b0b0b;--body-c:#3d3d3d;--mute:#6b6b6b;--faint:#8f8f8b; --hairline:#e7e7e3;--hairline-strong:#d3d3ce;--canvas:#f6f6f4;--surface:#fff;--surface-soft:#efefec;--surface-softer:#f6f6f4; --cream:#f9ecda;--soft-blue:#e9f5fb; --ok:#1f7a44;--ok-wash:#e7f4ec;--warn:#9a5a00;--warn-wash:#fbf0dd;--info:#265fc0;--info-wash:#e9f0fc; --violet:#6d4bc4;--violet-wash:#efe9fb; --r-xs:6px;--r-sm:10px;--r-md:14px;--r-lg:20px;--r-xl:28px;--r-pill:999px; --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s7:32px;--s8:48px; --sh-sm:0 1px 2px rgba(11,11,11,.06),0 1px 1px rgba(11,11,11,.04); --sh-md:0 2px 6px rgba(11,11,11,.06),0 8px 20px rgba(11,11,11,.07); --sh-lg:0 12px 32px rgba(11,11,11,.14),0 3px 8px rgba(11,11,11,.06); --sh-sheet:0 -12px 50px rgba(11,11,11,.18); --ease-out:cubic-bezier(.23,1,.32,1);--ease-inout:cubic-bezier(.77,0,.175,1);--ease-sheet:cubic-bezier(.32,.72,0,1); /* legacy alias, removed in P5 */ --paper:var(--canvas);--white:var(--surface);--card:var(--surface); --g1:var(--ink);--g2:var(--body-c);--g3:var(--mute);--g4:var(--faint);--g5:var(--hairline);--g6:var(--hairline);--border:var(--hairline); --sh-1:var(--sh-sm);--ai:var(--mute);--ai-wash:var(--surface-soft); --safe-b:env(safe-area-inset-bottom,0px); } [data-theme="dark"]{ --red:#ff5a5c;--red-ink:#ff6b6d;--red-wash:rgba(255,90,92,.16);--on-red:#1a0505; --ink:#f4f4f2;--body-c:#c9c9c5;--mute:#9a9a96;--faint:#727270; --hairline:#282828;--hairline-strong:#3a3a3a;--canvas:#0a0a0a;--surface:#161616;--surface-soft:#202020;--surface-softer:#1a1a1a; --cream:rgba(249,236,218,.09);--soft-blue:rgba(233,245,251,.08); --ok:#4ecb81;--ok-wash:rgba(78,203,129,.15);--warn:#e0a02a;--warn-wash:rgba(224,160,42,.15);--info:#7aa3f0;--info-wash:rgba(122,163,240,.15); --violet:#a98bec;--violet-wash:rgba(169,139,236,.16); --sh-sm:0 1px 2px rgba(0,0,0,.5);--sh-md:0 2px 6px rgba(0,0,0,.4),0 8px 20px rgba(0,0,0,.5);--sh-lg:0 12px 32px rgba(0,0,0,.6);--sh-sheet:0 -12px 50px rgba(0,0,0,.7); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --red:#ff5a5c;--red-ink:#ff6b6d;--red-wash:rgba(255,90,92,.16);--on-red:#1a0505; --ink:#f4f4f2;--body-c:#c9c9c5;--mute:#9a9a96;--faint:#727270; --hairline:#282828;--hairline-strong:#3a3a3a;--canvas:#0a0a0a;--surface:#161616;--surface-soft:#202020;--surface-softer:#1a1a1a; --cream:rgba(249,236,218,.09);--soft-blue:rgba(233,245,251,.08); --ok:#4ecb81;--ok-wash:rgba(78,203,129,.15);--warn:#e0a02a;--warn-wash:rgba(224,160,42,.15);--info:#7aa3f0;--info-wash:rgba(122,163,240,.15); --violet:#a98bec;--violet-wash:rgba(169,139,236,.16); --sh-sm:0 1px 2px rgba(0,0,0,.5);--sh-md:0 2px 6px rgba(0,0,0,.4),0 8px 20px rgba(0,0,0,.5);--sh-lg:0 12px 32px rgba(0,0,0,.6);--sh-sheet:0 -12px 50px rgba(0,0,0,.7); } } *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.4;-webkit-font-smoothing:antialiased} /* native feel: no pull-to-refresh / page bounce, no accidental text selection or iOS callout on long press, no double-tap zoom delay. Inputs and barcode digits stay selectable so a code can be copied. */ html,body{overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent} input,textarea,[contenteditable],.k-gt,.gt,.mono,.sel{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default} button,a,[role=button],.tap,input,label{touch-action:manipulation} button{font:inherit;border:0;background:none;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent} input{font:inherit} .picno{display:inline-flex;align-items:center;justify-content:center;color:var(--mute)} [data-ic]{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;line-height:0} @media (min-width: 760px) and (hover:hover){ .btn:hover{filter:brightness(.97)} } /* ══════════ Very narrow phones (≤359px): keep the settings gauges breathing ══════════ */ @media (max-width:359px){ .gauges{gap:6px} } /* ══════════ Reduced motion: honour the OS setting ══════════ Every ambient/looping animation stops; purposeful entrances become instant. State is still conveyed by colour + icon + text, never motion alone. */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;} } /* ══════════ Keyboard focus: a visible ring on every interactive control ══════════ :focus-visible only — pointer/touch users never see it, keyboard users always do. */ :focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:2px;} nav button:focus-visible{outline:2px solid var(--red);outline-offset:-2px;} /* ── camera stage ── */ .stage{position:absolute;inset:0;background:radial-gradient(130% 85% at 50% 28%,#212121,#040404);display:flex;flex-direction:column;z-index:1} .stage-top{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--sat) + 10px) var(--s6) 0} .wm{font-family:var(--disp);font-weight:600;font-size:17px;color:#fff;display:flex;align-items:center;letter-spacing:-.01em} .wm .dot{width:6px;height:6px;border-radius:50%;background:#ea383a;margin:0 1.5px;transform:translateY(1px)} .reticle{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;gap:14px;transition:transform .32s var(--ease-sheet)} .frame{width:186px;height:120px;position:relative;transition:width .3s var(--ease-out),height .3s var(--ease-out)} .frame b{position:absolute;width:30px;height:30px;border:3px solid #fff;border-radius:7px;transition:border-color .2s} .frame b:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}.frame b:nth-child(2){top:0;right:0;border-left:0;border-bottom:0} .frame b:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}.frame b:nth-child(4){bottom:0;right:0;border-left:0;border-top:0} .sweep{position:absolute;left:9px;right:9px;height:2px;top:50%;background:linear-gradient(90deg,transparent,#ea383a,transparent);box-shadow:0 0 14px 2px rgba(234,56,58,.6);animation:sw 2.2s var(--ease-inout) infinite} @keyframes sw{0%,100%{top:11%}50%{top:87%}} .stage.detecting .frame{width:160px;height:104px}.stage.detecting .sweep{animation-duration:.55s} .stage.locked .frame b{border-color:#4ecb81;width:34px;height:34px}.stage.locked .sweep{opacity:0} .hint{text-align:center;color:rgba(255,255,255,.74);font-size:14px;min-height:20px;transition:color .2s;letter-spacing:.01em} .hint.act{color:#ff8082;font-family:var(--mono);font-size:13px;letter-spacing:.08em} .hint.got{font-family:var(--mono);font-size:15px;font-weight:600;letter-spacing:.12em;color:#fff;line-height:1.5} .manual{display:flex;justify-content:center;padding:var(--s5) 0 var(--s2)} /* legacy push layers (#detail); kit.css .k-push wins by source order */ .push{position:absolute;inset:0;background:var(--canvas);z-index:20;display:flex;flex-direction:column;transform:translateX(100%);visibility:hidden;transition:transform .3s var(--ease-out),visibility 0s linear .3s} .push.show{transform:translateX(0);visibility:visible;transition-delay:0s} .pbody{flex:1;overflow-y:auto}.pbody::-webkit-scrollbar{width:0} /* toast (prototype 415-418) — plain toast writes #toastMsg; toastAction() replaces the children (.rich) */ .toast{position:absolute;left:var(--s4);right:var(--s4);top:calc(var(--sat) + 10px);background:var(--ink);color:var(--surface);border-radius:var(--r-md);padding:13px 16px;font-size:13px;font-weight:500;z-index:40;box-shadow:var(--sh-lg);transform:translateY(-160%);visibility:hidden;transition:transform .34s var(--ease-out),visibility 0s .34s;display:flex;align-items:center;gap:10px;pointer-events:none} .toast.show{transform:translateY(0);visibility:visible;transition:transform .34s var(--ease-out),visibility 0s;pointer-events:auto} .toast:not(.show){display:none} .toast .td{width:8px;height:8px;border-radius:50%;background:var(--ok);flex-shrink:0} .toast .tcnt{margin-left:auto;font-family:var(--mono);font-size:11px;background:rgba(255,255,255,.15);padding:2px 8px;border-radius:var(--r-pill);white-space:nowrap;flex-shrink:0} /* ── type ── */ h1{font-family:var(--disp);font-size:24px;line-height:1.1;font-weight:700;letter-spacing:-.02em;margin-bottom:8px} h2{font-family:var(--disp);font-size:18px;font-weight:700;margin:22px 0 10px} .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums} .btn{height:46px;padding:0 18px;border-radius:3px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap} .btn.red{background:var(--red);color:#fff} .btn.ink{background:var(--ink);color:var(--canvas)} .btn.ghost{border:1px solid var(--ink);color:var(--ink);background:transparent} .btn.sm{height:38px;padding:0 12px;font-size:13px} .btn:disabled{opacity:.45} /* ── quality charts (Settings, catalogue.js chartsHtml) ── */ .charts{max-height:0;overflow:hidden;transition:max-height .34s var(--ease-inout)} .charts.open{max-height:640px;margin-bottom:var(--s3)} .chart{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-md);padding:var(--s4);margin-bottom:var(--s2);opacity:0;transform:translateY(8px);transition:opacity .3s var(--ease-out),transform .3s var(--ease-out);box-shadow:var(--sh-sm)} .charts.open .chart{opacity:1;transform:none} .charts.open .chart:nth-child(1){transition-delay:.02s}.charts.open .chart:nth-child(2){transition-delay:.08s}.charts.open .chart:nth-child(3){transition-delay:.14s} .chart h5{font-family:var(--disp);font-size:14px;color:var(--ink);margin-bottom:3px;letter-spacing:-.01em} .chart .csub{font-size:11px;color:var(--faint);margin-bottom:var(--s3)} .donut-row{display:flex;align-items:center;gap:var(--s4)} .donut{width:92px;height:92px;border-radius:50%;background:conic-gradient(var(--ink) 0 81%,var(--red) 81% 100%);display:flex;align-items:center;justify-content:center;flex-shrink:0} .donut .in{width:64px;height:64px;border-radius:50%;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center} .donut .in b{font-family:var(--disp);font-size:20px;color:var(--ink)}.donut .in span{font-size:8px;color:var(--faint);text-transform:uppercase;letter-spacing:.04em} .leg{flex:1;display:flex;flex-direction:column;gap:7px;font-size:12px} .leg .l{display:flex;align-items:center;gap:8px;color:var(--body-c)}.leg .l i{width:10px;height:10px;border-radius:3px}.leg .l b{margin-left:auto;font-family:var(--mono);color:var(--ink)} .cols{display:flex;align-items:flex-end;gap:10px;height:110px} .cols .c{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end} .cols .c i{width:100%;border-radius:var(--r-xs) var(--r-xs) 0 0;background:var(--ink);min-height:3px}.cols .c i.hot{background:var(--red)} .cols .c span{font-size:9px;color:var(--faint);font-family:var(--mono)}.cols .c em{font-size:10px;color:var(--ink);font-family:var(--mono);font-weight:600;font-style:normal} .gauges{display:flex;gap:10px} .gauge{flex:1;text-align:center;cursor:pointer} .gauge .gr{width:56px;height:56px;border-radius:50%;margin:0 auto 7px;display:flex;align-items:center;justify-content:center} .gauge .gr .in{width:40px;height:40px;border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink)} .gauge .gl{font-size:11px;color:var(--body-c);font-weight:600}.gauge .gm{font-size:9px;color:var(--faint);font-family:var(--mono);margin-top:1px} .renorm{margin:var(--s2) var(--s1) 0;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-md);padding:10px 12px} .renorm[hidden]{display:none} .rb-row{display:flex;align-items:center;gap:8px;font-size:12.5px} .rb-t{font-weight:600}.rb-s{color:var(--mute);flex:1} .rb-x{font:inherit;font-size:12px;border:1px solid var(--hairline);background:transparent;border-radius:var(--r-pill);padding:3px 10px;cursor:pointer} .rb-bar{height:4px;background:var(--surface-soft);border-radius:2px;margin-top:8px;overflow:hidden}.rb-bar i{display:block;height:100%;background:var(--ink)} /* install modal (pwa.js) */ .sheet-legacy{position:fixed;inset:0;z-index:20} .sheet-legacy[hidden]{display:none} .sheet-bg{position:absolute;inset:0;background:rgba(11,11,11,.45)} .sheet-in{position:absolute;left:0;right:0;bottom:0;max-width:640px;margin:0 auto;background:var(--paper);padding:20px 18px calc(20px + var(--safe-b));border-radius:14px 14px 0 0} /* ── settings push view (prototype §settings) ── */ .settings{position:absolute;inset:0;background:var(--canvas);z-index:22;display:flex;flex-direction:column;overflow:hidden;transform:translateX(100%);visibility:hidden;transition:transform .3s var(--ease-out),visibility 0s linear .3s} .settings.show{transform:translateX(0);visibility:visible;transition-delay:0s} .settings .pbody{flex:1;overflow-y:auto;padding:0 0 calc(var(--sab) + 24px)} /* ── action toast (title + desc + action) ── */ .toast.rich{gap:12px;text-align:left;padding:13px 14px;border-radius:14px} .toast.rich .t-ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto;background:var(--info)} .toast.rich .t-ic.info{background:var(--info)} .toast.rich .t-ic.ok{background:var(--ok)} .toast.rich .t-ic.warn{background:var(--warn)} .toast.rich .t-ic.err{background:var(--red)} .toast.rich .t-ic svg{width:18px;height:18px;color:#fff} .toast.rich .t-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px} .toast.rich .t-t{font-weight:700;font-size:13.5px;color:#fff} .toast.rich .t-d{font-size:12px;color:var(--g4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .toast.rich .t-act{font-size:13px;font-weight:700;color:#ff9a9a;padding:6px 10px;flex:0 0 auto;background:none;border:0;cursor:pointer} /* ── product menu (detail.js proMenu) ── */ .menu{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;justify-content:flex-end} .menu .mbg{position:absolute;inset:0;background:rgba(0,0,0,.38);opacity:0;transition:opacity .22s var(--ease-out)} .menu.open .mbg{opacity:1} .menu .mi{position:relative;background:var(--surface);padding:16px 18px;font-size:15px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:12px;cursor:pointer;transform:translateY(100%);transition:transform .26s var(--ease-sheet);border-bottom:1px solid var(--hairline)} .menu.open .mi{transform:translateY(0)} .menu .mi svg{color:var(--red-ink)} .menu .mi.del{color:var(--red-ink);border-radius:0 0 var(--r-lg) var(--r-lg);border-bottom:0} .menu .mi.del svg{color:var(--red-ink)} /* ── screen shell ── */ .screen{position:fixed;inset:0;border-radius:0;overflow:hidden;background:var(--canvas);--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px)} #video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}.stage>*:not(#video){position:relative;z-index:1}.stage.camoff .reticle .frame{opacity:.35} .stage{padding-bottom:calc(var(--handle-h,60px) + var(--sab))} @media (min-width:521px){.screen{left:50%;width:min(480px,100vw);transform:translateX(-50%);box-shadow:var(--sh-lg)}body{background:var(--canvas)}} /* legacy Building product layer (#proview); kit.css .k-push wins by source order */ .proview{position:absolute;inset:0;background:var(--canvas);z-index:31;display:flex;flex-direction:column;transform:translateX(100%);visibility:hidden;transition:transform .3s var(--ease-out),visibility 0s linear .3s} .proview.show{transform:translateX(0);visibility:visible;transition-delay:0s} /* ══════════ camera for the shot plan (design-language/building-product.html screen 3 + photo options) ══════════ close, dots, a frame shaped per shot (corner brackets, dim outside), ghost icon, title + one line, shutter, Skip. */ .cap{position:absolute;inset:0;background:#0a0a0a;z-index:30;display:flex;flex-direction:column;overflow:hidden;color:#fff;font-family:var(--body);transform:translateY(100%);transition:transform .34s var(--ease-sheet);container-type:size;container-name:cap} .cap.show{transform:translateY(0)} .cap:not(.show){pointer-events:none;visibility:hidden;transition:transform .34s var(--ease-sheet),visibility 0s .34s} /* persistent shared-camera feed: built once, never re-rendered (a fresh