:root{--pmu-ink:#241923;--pmu-muted:#756b73;--pmu-forest:#4b233d;--pmu-jade:#b24574;--pmu-mint:#f8edf4;--pmu-cream:#fffafd;--pmu-line:rgba(75,35,61,.12)}
html,body{margin:0;min-height:100%;background:var(--pmu-cream);overscroll-behavior-y:none;color:var(--pmu-ink)}
body>header,body>footer{display:none}
#simulator{position:relative;inset:auto;display:block;width:100%;max-width:760px;max-height:none;margin:0 auto;padding:0;border:0;border-radius:0;overflow:visible;box-shadow:none;background:transparent}
#simulator>.close,#scanBook{display:none}
.scan-shell{min-height:0;background:transparent}
.scan-head{padding:1.65rem 1.25rem 1rem;border:0;background:transparent}
.scan-head .tag{font-size:.72rem;letter-spacing:.18em;color:var(--pmu-jade)}
.scan-head h2{font-size:clamp(2rem,8vw,3.3rem);line-height:.98;letter-spacing:-.055em;margin:.75rem 0 .65rem;color:var(--pmu-ink)}
.scan-head>p:not(.tag){max-width:38rem;margin:0;color:var(--pmu-muted);font-size:1rem;line-height:1.55}
.scan-steps{max-width:none;margin-top:1.2rem}.scan-steps span{font-size:.78rem}.scan-steps i{flex:1;width:auto;max-width:70px}
.scan-stage{padding:1rem 1.25rem}
.scan-intro{display:grid;justify-items:center;gap:.75rem;max-width:none;padding:1.4rem 1rem 1.1rem;text-align:center;border:1px solid var(--pmu-line);border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(248,237,244,.86));box-shadow:0 18px 50px rgba(75,35,61,.1)}
.scan-orb{width:118px;height:142px;margin:0 0 .25rem;border-radius:44% 44% 48% 48%;background:radial-gradient(circle at 50% 42%,#fff 0 38%,#f7dce9 39% 66%,#f1ecff 67%);box-shadow:0 0 0 1px #e8c9d8,0 14px 30px rgba(178,69,116,.12)}
.scan-orb>span{inset:9px;border-color:#c8789b;border-radius:44% 44% 48% 48%}
.scan-orb svg{width:70px;height:96px;stroke:var(--pmu-jade)}
.scan-intro h3{max-width:18ch;margin:.2rem 0;font-size:1.62rem;line-height:1.08;letter-spacing:-.035em}
.scan-intro>p{max-width:32ch;margin:0;color:var(--pmu-muted);font-size:.95rem;line-height:1.5}
.scan-actions{width:100%;max-width:430px;margin:.55rem 0 0;gap:.65rem}
.scan-actions .btn,.scan-upload{min-height:54px;border-radius:17px;padding:.8rem 1rem;font-size:.95rem}
.scan-actions .btn{background:var(--pmu-forest);box-shadow:0 10px 28px rgba(75,35,61,.22)}
.scan-upload{border-color:var(--pmu-line);background:#fff;color:var(--pmu-ink)}
.scan-intro>small{font-size:.76rem;color:var(--pmu-muted)}
.reference-preview{width:100%;max-width:430px;margin:.25rem 0 0;padding:.7rem;border:1px solid var(--pmu-line);border-radius:18px;background:rgba(255,255,255,.78);text-align:left}
.reference-thumbs{border-radius:12px;overflow:hidden}.reference-preview b{font-size:.82rem}.reference-preview p{font-size:.74rem;line-height:1.4}
.camera-wrap{border-radius:25px;box-shadow:0 18px 50px rgba(36,25,35,.2)}
.processing{padding:1.2rem}.processing-face{width:min(100%,480px);border-radius:25px;box-shadow:0 18px 50px rgba(75,35,61,.14)}
.processing h3{font-size:1.7rem;letter-spacing:-.04em}.process-list span{background:rgba(255,255,255,.78)}
.scan-result-head{align-items:center}.scan-result-head .tag{font-size:.7rem;letter-spacing:.14em}.scan-result-head h3{font-size:1.65rem;margin:.35rem 0}.resolution-badge{font-size:.68rem}
.scan-compare{min-height:min(98vw,570px);max-height:none;margin-top:.75rem;border:5px solid #fff;border-radius:27px;box-shadow:0 18px 48px rgba(75,35,61,.16)}
.scan-label{top:.8rem}.scan-label.before{left:.8rem}.scan-label.after{right:.8rem}.scan-divider b{width:48px;height:48px;color:var(--pmu-jade)}
.scan-controls{align-items:stretch;flex-direction:column;gap:.75rem;margin:.85rem 0 0}
.scan-controls>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;gap:.4rem;padding:4px;border-radius:17px;background:#f3e8ef}
.scan-controls button{min-height:43px;padding:.55rem .35rem;border:0;border-radius:13px;background:transparent;color:#805f72;font-size:.78rem;transition:.18s ease}
.scan-controls button.on{background:#fff;color:var(--pmu-forest);box-shadow:0 4px 14px rgba(75,35,61,.12)}
.scan-controls label{width:100%;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.8rem;padding:.75rem 1rem;border:1px solid var(--pmu-line);border-radius:17px;background:rgba(255,255,255,.8);box-sizing:border-box}
.scan-disclaimer{margin:0;padding:.8rem 1.25rem 1.4rem;color:var(--pmu-muted);font-size:.7rem;line-height:1.45}
.scan-intro>small,.scan-result-footer,.native-note{display:none}
.pmu-native .scan-head{display:none}
.pmu-native .scan-stage{padding:.9rem}
.pmu-native .scan-intro{min-height:calc(100dvh - 210px);box-sizing:border-box;justify-content:center;border:0;border-radius:0;background:radial-gradient(circle at 50% 24%,rgba(255,255,255,.92),transparent 44%),linear-gradient(155deg,#fcedf5,#f3efff)}
.pmu-native .scan-export,.pmu-native .scan-upload,.pmu-native .scan-intro>small{display:none}
.pmu-native .scan-actions{display:none}
.pmu-native .reference-preview{margin-top:.7rem}
.pmu-native .scan-result-head,.pmu-native .resolution-badge{display:none}
.pmu-native [data-scan-stage="result"]{padding:.45rem}
.pmu-native .scan-disclaimer{padding-bottom:1rem}
@media(min-width:761px){.scan-stage{padding-inline:2rem}.pmu-native .scan-stage{padding-inline:1.1rem}}
@media(max-width:420px){.scan-stage{padding:.8rem}.scan-intro{padding:1.1rem .75rem}.scan-orb{width:104px;height:126px}.scan-intro h3{font-size:1.45rem}.scan-controls button{font-size:.72rem}.scan-compare{min-height:104vw}}

/* Simplified, camera-first scanner */
.scan-guide-sheet{position:fixed;z-index:80;inset:0;display:flex;align-items:flex-end;justify-content:center;padding:1rem;background:rgba(20,12,18,.58);backdrop-filter:blur(14px);box-sizing:border-box}
.scan-guide-sheet[hidden]{display:none}
.scan-guide-card{position:relative;width:min(100%,520px);padding:1.55rem;border-radius:32px;background:#fff;box-shadow:0 28px 90px rgba(20,12,18,.28);box-sizing:border-box}
.scan-guide-card .tag{margin:0;color:var(--pmu-jade);font-size:.68rem;letter-spacing:.16em}
.scan-guide-card h3{margin:.45rem 0 1.25rem;font-size:1.8rem;line-height:1.05;letter-spacing:-.045em}
.scan-guide-card ol{display:grid;gap:.72rem;margin:0 0 1.25rem;padding:0;list-style:none;counter-reset:guide}
.scan-guide-card li{counter-increment:guide;display:grid;grid-template-columns:42px 1fr;column-gap:.8rem;align-items:center;min-height:58px;padding:.55rem .65rem;border-radius:18px;background:#fbf5f9}
.scan-guide-card li:before{content:counter(guide);grid-row:1/3;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--pmu-forest);color:#fff;font-weight:900}
.scan-guide-card li b{align-self:end;font-size:.96rem}.scan-guide-card li span{align-self:start;color:var(--pmu-muted);font-size:.82rem;line-height:1.35}
.scan-guide-card>.btn{width:100%;min-height:56px;border:0;border-radius:18px;background:var(--pmu-forest);color:#fff;font-weight:850}
.scan-guide-close{position:absolute;right:1rem;top:1rem;width:40px;height:40px;border:0;border-radius:50%;background:#f8edf4;color:var(--pmu-ink);font-size:1.6rem;line-height:1;cursor:pointer}
.camera-help,.camera-close{position:absolute;z-index:8;top:max(1rem,env(safe-area-inset-top));display:grid;place-items:center;width:48px;height:48px;border:1px solid rgba(255,255,255,.55);border-radius:50%;background:rgba(25,15,22,.38);color:#fff;font-size:1.5rem;font-weight:600;backdrop-filter:blur(12px);cursor:pointer}
.camera-help{left:1rem}.camera-close{right:1rem;font-size:2rem;font-weight:300}

.pmu-native,.pmu-native body,.pmu-native #simulator,.pmu-native .scan-shell{height:100%;min-height:100%;overflow:hidden}
.pmu-native .scan-stage[data-scan-stage="intro"]{height:100%;padding:0}
.pmu-native .scan-intro{min-height:100%;padding:1.5rem;gap:.65rem;background:radial-gradient(circle at 50% 34%,#fff 0 22%,transparent 48%),linear-gradient(160deg,#fffafd,#f7eaf2);box-sizing:border-box}
.pmu-native .scan-intro .scan-orb{width:174px;height:218px;margin:0 0 1rem;border-radius:46% 46% 48% 48%;background:radial-gradient(circle at 50% 42%,#fff 0 39%,#f7dce9 40% 65%,#f1ecff 66%);box-shadow:0 0 0 1px #e8c9d8,0 28px 65px rgba(178,69,116,.16)}
.pmu-native .scan-intro h3{margin:0;font-size:2rem}.pmu-native .scan-intro>p{font-size:.95rem}
.pmu-native .reference-preview,.pmu-native .quality-grid,.pmu-native .scan-disclaimer{display:none!important}
.pmu-native[data-scan-stage="camera"] body,.pmu-native[data-scan-stage="processing"] body{background:#080608}
.pmu-native [data-scan-stage="camera"]{height:100%;padding:0;background:#080608}
.pmu-native .camera-wrap{width:100%;height:100%;max-width:none;max-height:none;margin:0;border-radius:0;aspect-ratio:auto!important;background:#080608;box-shadow:none}
.pmu-native .camera-wrap video{object-fit:cover}
.pmu-native .camera-wrap #meshCanvas{display:none}
.pmu-native .face-guide{top:49%;width:min(72vw,360px);height:min(68vh,520px);border:1.5px solid rgba(255,255,255,.78);border-radius:48% 48% 46% 46%;box-shadow:0 0 0 999px rgba(8,6,8,.18)}
.pmu-native .face-guide:before,.pmu-native .face-guide:after,.pmu-native .face-guide span:before,.pmu-native .face-guide span:after{display:none}
.pmu-native .face-guide.ready{border-color:#fff;box-shadow:0 0 0 999px rgba(8,6,8,.13),0 0 0 5px rgba(255,255,255,.18)}
.pmu-native .scan-status{top:max(1rem,env(safe-area-inset-top));bottom:auto;width:auto;max-width:58%;min-height:48px;padding:.6rem .85rem;border-radius:999px;background:rgba(25,15,22,.48);box-sizing:border-box}
.pmu-native .scan-status>span{width:8px;height:8px}.pmu-native .scan-status>div{display:block}.pmu-native .scan-status b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.8rem}.pmu-native .scan-status small{display:none}
.pmu-native .stability{height:6px;background:rgba(255,255,255,.16)}
.pmu-native [data-scan-stage="processing"]{display:flex;min-height:100%;padding:3rem 1.5rem;align-content:center;justify-content:center;background:#080608;color:#fff;box-sizing:border-box}
.pmu-native .processing-face{width:min(76vw,420px);aspect-ratio:1/1;border-radius:50%;background:#21151d;box-shadow:0 0 60px rgba(255,255,255,.13)}
.pmu-native .processing-face canvas{height:100%;object-fit:cover}.pmu-native .processing>.tag,.pmu-native .process-list{display:none}
.pmu-native .processing h3{max-width:19ch;margin:1.6rem auto 0;color:#fff;font-size:1.35rem}
.pmu-native[data-scan-stage="camera"] .scan-guide-sheet{background:rgba(8,6,8,.45)}
@media(min-width:560px){.scan-guide-sheet{align-items:center}}

/* Context-aware result controls */
.smart-control-sheet{position:sticky;z-index:8;bottom:.65rem;margin:.75rem 0 0;padding:0!important;border:1px solid var(--pmu-line);border-radius:22px;background:rgba(255,255,255,.94);box-shadow:0 18px 48px rgba(75,35,61,.2);backdrop-filter:blur(18px);overflow:hidden}.smart-sheet-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:64px;padding:.75rem 1rem;border:0;background:transparent;color:var(--pmu-ink);text-align:left}.smart-sheet-trigger span{display:grid;gap:.12rem}.smart-sheet-trigger small{font-size:.65rem;font-weight:900;letter-spacing:.13em;color:var(--pmu-jade)}.smart-sheet-trigger b{font-size:.95rem}.smart-sheet-trigger i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--pmu-mint);color:var(--pmu-jade);font-style:normal;transition:transform .2s}.smart-sheet-trigger[aria-expanded=true] i{transform:rotate(180deg)}.smart-sheet-panel{padding:0 .75rem .75rem;border-top:1px solid var(--pmu-line)}.smart-sheet-panel[hidden]{display:none}.smart-sheet-panel .scan-controls{margin-top:.75rem}.sheet-secondary{width:100%;min-height:44px;margin-top:.65rem;border:0;border-radius:14px;background:var(--pmu-mint);color:var(--pmu-forest);font-weight:800}.pmu-native .smart-control-sheet{bottom:.35rem;margin-top:.5rem}

/* Mobile-first scanner: visible MediaPipe mesh, dynamic viewport and controls
   that stay reachable above the iPhone safe area and on-screen keyboard. */
html,body,#simulator,.scan-shell{min-height:100dvh}
.pmu-native .camera-wrap #meshCanvas{display:block!important;opacity:.78;mix-blend-mode:screen;pointer-events:none}
.pmu-native .camera-wrap{min-height:100dvh!important;height:100dvh!important}
.pmu-native .camera-help,.pmu-native .camera-close{top:max(14px,env(safe-area-inset-top))}
.pmu-native .scan-status{top:max(76px,calc(env(safe-area-inset-top) + 62px));max-width:calc(100% - 32px)}
.pmu-native .stability{bottom:max(16px,env(safe-area-inset-bottom));left:16px;right:16px;width:auto;border-radius:99px;overflow:hidden}
.smart-control-sheet{bottom:max(.5rem,env(safe-area-inset-bottom));border-radius:24px}
.smart-sheet-trigger,.scan-actions .btn,.scan-upload,.sheet-secondary{min-height:50px}
.scan-guide-card{padding-bottom:max(1.55rem,calc(1rem + env(safe-area-inset-bottom)))}
button,.scan-upload{touch-action:manipulation}
button:active,.scan-upload:active{transform:scale(.98)}
@media(max-width:420px){.scan-head{padding-top:max(1.25rem,env(safe-area-inset-top))}.scan-intro{border-radius:22px}.scan-compare{min-height:calc(100dvh - 250px);border-radius:22px}.smart-control-sheet{margin-inline:0}}

/* Mint / petrol mobile theme and camera-permission pattern adapted from the
   selected 21st.dev component without adding a React runtime. */
:root{--pmu-ink:#102b29;--pmu-muted:#5f716c;--pmu-forest:#0f4f48;--pmu-jade:#18776b;--pmu-mint:#e5f4ee;--pmu-cream:#fbfaf5;--pmu-line:rgba(15,79,72,.13)}
.scan-head{background:linear-gradient(145deg,#f7fcfa,#e7f4ef)}.scan-intro{background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(229,244,238,.88));box-shadow:0 18px 50px rgba(15,79,72,.1)}
.scan-orb{background:radial-gradient(circle at 50% 42%,#fff 0 38%,#dff2eb 39% 66%,#cbe8df 67%);box-shadow:0 0 0 1px #bddfd3,0 14px 30px rgba(15,79,72,.13)}.scan-orb>span{border-color:#62ae9e}.scan-orb svg{stroke:var(--pmu-jade)}
.scanner-privacy-pill{display:flex;align-items:center;gap:.65rem;width:min(100%,430px);padding:.65rem .8rem;border:1px solid #cfe5dd;border-radius:16px;background:#f5fbf8;color:var(--pmu-forest);box-sizing:border-box;text-align:left}.scanner-privacy-pill svg{flex:0 0 28px;width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.scanner-privacy-pill span{display:grid;gap:.08rem}.scanner-privacy-pill b{font-size:.82rem}.scanner-privacy-pill small{font-size:.73rem;color:var(--pmu-muted)}
.camera-permission-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.75rem;margin:0 0 1rem;padding:.8rem;border:1px solid #cfe5dd;border-radius:18px;background:linear-gradient(135deg,#f4fbf8,#fff);text-align:left}.camera-permission-icon{position:relative;display:grid;width:46px;height:46px;place-items:center;border-radius:14px;background:#dcefe8;color:var(--pmu-forest)}.camera-permission-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}.camera-permission-icon i{position:absolute;right:-2px;top:-2px;width:10px;height:10px;border:2px solid #fff;border-radius:50%;background:#35a678}.camera-permission-card>span:nth-child(2){display:grid;gap:.18rem}.camera-permission-card b{font-size:.88rem}.camera-permission-card small{color:var(--pmu-muted);font-size:.72rem}.camera-permission-card em{padding:.35rem .5rem;border-radius:99px;background:#ddf4e9;color:#12634e;font-size:.64rem;font-style:normal;font-weight:900;text-transform:uppercase;letter-spacing:.05em}
.scan-guide-card{background:#fbfdfb}.scan-guide-card li{background:#edf7f3}.scan-guide-card li:before,.scan-guide-card>.btn,.scan-actions .btn{background:var(--pmu-forest)}
.scan-steps{position:relative}.scan-steps span.on{color:var(--pmu-jade)}.scan-steps span.on b{background:var(--pmu-jade);border-color:var(--pmu-jade)}.scan-steps i{background:#cfe2dc}.scan-steps span.on+i{background:linear-gradient(90deg,var(--pmu-jade),#8dcbbb)}
.quality-grid span{border-color:#d9e9e3;background:rgba(255,255,255,.9);color:#5c706a}.quality-grid .pass{border-color:#abd9c8;background:#e8f7f1;color:#12634e}.quality-grid .pass i{border-color:#198168;background:#198168}.quality-grid .fail{border-color:#ead6a7;background:#fff9ec;color:#76571c}
.scan-divider b{color:var(--pmu-jade)}.scan-controls>div{background:#e5f1ed}.scan-controls button{color:#54716a}.scan-controls button.on{color:var(--pmu-forest)}.scan-controls input{accent-color:var(--pmu-jade)}
@media(max-width:480px){.camera-permission-card{grid-template-columns:auto 1fr}.camera-permission-card em{grid-column:2;justify-self:start}.scanner-privacy-pill{padding:.6rem .7rem}.scan-guide-card{padding-inline:1rem}}
.pmu-native[data-scan-stage="camera"] .quality-grid{position:fixed;z-index:9;right:12px;bottom:max(38px,calc(env(safe-area-inset-bottom) + 28px));left:12px;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin:0}.pmu-native[data-scan-stage="camera"] .quality-grid span{justify-content:center;padding:.48rem .35rem;border-color:rgba(255,255,255,.34);background:rgba(15,43,41,.58);color:#fff;font-size:.68rem;backdrop-filter:blur(12px)}.pmu-native[data-scan-stage="camera"] .quality-grid span:nth-child(n+4){display:none}.pmu-native[data-scan-stage="camera"] .quality-grid .pass{border-color:rgba(128,235,191,.6);background:rgba(18,99,78,.78)}.pmu-native[data-scan-stage="camera"] .stability{bottom:max(14px,env(safe-area-inset-bottom))}