:root{--bg:oklch(98% .01 28);--surface:oklch(99.3% .006 35);--ink:oklch(25% .055 348);--muted:oklch(52% .035 350);--line:oklch(89% .025 345);--accent:oklch(58% .19 12);--accent-soft:oklch(92% .055 14);--plum:oklch(35% .1 344);--safe-bottom:max(18px,env(safe-area-inset-bottom));--safe-top:env(safe-area-inset-top,0px);--font-cn:"PingFang SC","Noto Sans SC","Source Han Sans SC","Microsoft YaHei",sans-serif;--text-caption:.75rem;--text-small:.875rem;--text-body:1rem;--text-title:2.75rem;font-family:var(--font-cn);font-kerning:normal;color:var(--ink);background:var(--bg)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg)}body{min-height:100dvh;-webkit-font-smoothing:antialiased}button,input{font:inherit}.app-shell{min-height:100dvh;background:var(--bg)}.app-bar{height:64px;padding:0 20px;display:flex;align-items:center;justify-content:space-between}.brand{color:var(--ink);text-decoration:none;font-family:var(--font-cn);font-size:1.5rem;font-weight:800;letter-spacing:-.045em}.brand span{font-style:normal;color:var(--accent)}.app-actions{display:flex;align-items:center;gap:11px}.live-dot{display:flex;align-items:center;gap:7px;font-size:.68rem;color:var(--muted)}.live-dot i{width:7px;height:7px;border-radius:50%;background:oklch(66% .17 145);box-shadow:0 0 0 4px oklch(66% .17 145/.12)}.icon-button,.result-top button,.dialog-close{border:0;background:transparent;color:var(--ink);width:44px;height:44px;border-radius:50%;font-weight:700;cursor:pointer}.capture-screen{padding:14px 20px calc(151px + var(--safe-bottom))}.screen-heading{margin-bottom:25px}.eyebrow{display:block;color:var(--accent);font-size:.61rem;font-weight:700;letter-spacing:.19em;margin-bottom:9px}.screen-heading h1{font-family:var(--font-cn);font-size:var(--text-title);font-weight:800;line-height:1.12;letter-spacing:-.055em;margin:0}.screen-heading h1 em{font-style:normal;color:var(--accent)}.screen-heading p{font-size:var(--text-body);color:var(--muted);line-height:1.65;margin:14px 0 0;max-width:320px}.capture-form{display:block}.photo-stage{height:min(43dvh,400px);min-height:300px;display:grid;place-items:center;position:relative;overflow:hidden;border-radius:28px;background:var(--surface);border:1px solid var(--line);cursor:pointer;box-shadow:0 14px 45px oklch(35% .07 345/.08);transition:transform .25s cubic-bezier(.16,1,.3,1)}.photo-stage:active{transform:scale(.985)}.photo-stage>input{position:absolute;opacity:0;pointer-events:none}.photo-stage:before,.photo-stage:after{content:"";position:absolute;width:18px;height:18px;border-color:oklch(66% .08 345);border-style:solid;z-index:2;opacity:.7}.photo-stage:before{top:18px;left:18px;border-width:1px 0 0 1px;border-radius:5px 0 0}.photo-stage:after{right:18px;bottom:18px;border-width:0 1px 1px 0;border-radius:0 0 5px}.face-guide{position:absolute;width:162px;height:218px;border:1px dashed oklch(65% .06 348/.55);border-radius:48% 48% 43% 43%;top:44%;left:50%;transform:translate(-50%,-50%)}.face-guide:before,.face-guide:after{content:"";position:absolute;top:48%;width:33px;border-top:1px solid oklch(65% .06 348/.35)}.face-guide:before{right:100%;margin-right:15px}.face-guide:after{left:100%;margin-left:15px}.face-guide span{position:absolute;left:50%;top:50%;height:26px;border-left:1px solid oklch(65% .06 348/.35)}.face-guide i{position:absolute;width:30px;height:13px;border-bottom:1px solid oklch(65% .06 348/.35);border-radius:50%;left:50%;bottom:26px;transform:translateX(-50%)}.stage-copy{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;margin-top:115px}.camera-button{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--plum);box-shadow:0 8px 24px oklch(35% .1 344/.2);margin-bottom:13px}.camera-button i{width:19px;height:16px;border:1.5px solid var(--surface);border-radius:5px;position:relative}.camera-button i:before{content:"";position:absolute;width:6px;height:6px;border:1px solid var(--surface);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}.stage-copy strong{font-size:.9rem}.stage-copy small{font-size:.66rem;color:var(--muted);margin-top:5px}.photo-stage #preview{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.change-photo{display:none;position:absolute;right:14px;bottom:14px;z-index:3;background:oklch(99% .005 30/.88);backdrop-filter:blur(12px);padding:10px 14px;border-radius:999px;font-size:.68rem;font-weight:600}.photo-stage.has-image #preview,.photo-stage.has-image .change-photo{display:block}.photo-stage.has-image .stage-copy,.photo-stage.has-image .face-guide{display:none}.photo-tips{display:grid;grid-template-columns:repeat(3,1fr);padding:17px 3px 5px}.photo-tips span{text-align:center;color:var(--muted);font-size:.67rem;border-right:1px solid var(--line)}.photo-tips span:last-child{border:0}.photo-tips i{font-style:normal;color:var(--accent);margin-right:4px}.consent{padding:13px 3px}.consent label{display:flex;align-items:flex-start;gap:9px;color:var(--muted);font-size:.68rem;line-height:1.5}.consent input{appearance:none;width:19px;height:19px;flex:0 0 19px;border:1px solid var(--line);border-radius:6px;background:var(--surface);display:grid;place-items:center;margin:0}.consent input:checked{background:var(--plum);border-color:var(--plum)}.consent input:checked:after{content:"✓";font-size:.7rem;color:var(--surface)}.bottom-action{position:fixed;left:0;right:0;bottom:0;z-index:10;padding:8px 20px var(--safe-bottom);background:linear-gradient(to top,var(--bg) 80%,oklch(98% .01 28/0));}.status{height:18px;margin:0;text-align:center;font-size:.7rem;color:var(--accent)}#submit{width:100%;height:56px;border:0;border-radius:18px;background:var(--plum);color:var(--surface);display:flex;align-items:center;justify-content:center;gap:12px;font-weight:700;cursor:pointer;box-shadow:0 12px 30px oklch(35% .1 344/.2);transition:transform .2s,opacity .2s}#submit:active:not(:disabled){transform:scale(.98)}#submit:disabled{opacity:.28;box-shadow:none}.button-arrow{font-size:1.15rem}.bottom-action>small{display:block;text-align:center;color:var(--muted);font-size:.6rem;margin-top:8px}.bottom-action>small i{color:var(--accent);font-style:normal}.result-screen{min-height:calc(100dvh - 64px);padding:10px 20px calc(28px + var(--safe-bottom));animation:screen-in .55s cubic-bezier(.16,1,.3,1) both}.result-top{height:44px;display:flex;align-items:center;justify-content:space-between}.result-top>span{font-size:.7rem;color:oklch(60% .15 145);display:flex;align-items:center;gap:7px}.result-top>span:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}.result-top button{font-size:1.8rem;font-weight:300}.score-orbit{width:min(76vw,310px);aspect-ratio:1;margin:12px auto 16px;position:relative;display:grid;place-items:center}.score-orbit svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}.score-orbit circle{fill:none;stroke:var(--line);stroke-width:1.5}.score-orbit .progress-ring{stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:540;stroke-dashoffset:108}.score-wrap{text-align:center}.score-wrap span{display:block;color:var(--muted);font-size:.68rem;letter-spacing:.13em}.score-wrap strong{font-family:var(--font-cn);font-size:6.75rem;line-height:.95;color:var(--plum);font-weight:800;letter-spacing:-.07em;font-variant-numeric:tabular-nums}.score-wrap i{font-style:normal;font-size:.68rem;color:var(--muted);margin-left:7px}.verdict{border-top:1px solid var(--line);padding-top:22px}.result-kicker{font-size:.65rem;color:var(--accent);font-weight:700;letter-spacing:.15em}.verdict blockquote{font-family:var(--font-cn);font-size:1.125rem;font-weight:500;line-height:1.75;margin:10px 0 16px}.verdict ul{display:flex;flex-wrap:wrap;gap:7px;padding:0;margin:0;list-style:none}.verdict li{background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:8px 12px;font-size:.67rem}.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:25px}.result-actions button{height:50px;border-radius:16px;font-weight:600;cursor:pointer}.result-actions button:first-child{border:1px solid var(--line);color:var(--ink);background:var(--surface)}.result-actions button:last-child{border:0;background:var(--plum);color:var(--surface)}.result-note{text-align:center;color:var(--muted);font-size:.62rem;margin:14px 0}.desktop-note{display:none}dialog{width:calc(100% - 32px);max-width:390px;border:0;border-radius:28px;background:var(--surface);color:var(--ink);padding:30px 24px 22px;box-shadow:0 24px 80px oklch(25% .06 345/.25)}dialog::backdrop{background:oklch(20% .04 345/.38);backdrop-filter:blur(4px)}dialog>span{font-size:.62rem;color:var(--accent);font-weight:700;letter-spacing:.17em}dialog h2{font-family:var(--font-cn);font-size:1.75rem;line-height:1.25;font-weight:800;margin:12px 0}dialog p{font-size:var(--text-body);line-height:1.75;color:var(--muted)}.dialog-close{position:absolute;right:12px;top:12px;font-size:1.6rem;font-weight:300}.dialog-confirm{width:100%;height:50px;border:0;border-radius:16px;background:var(--plum);color:var(--surface);font-weight:600;margin-top:10px}.result-open .capture-screen{display:none}.result-open .app-bar{display:none}@keyframes screen-in{from{opacity:0;transform:translateX(30px)}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
@media(min-width:1024px){body{display:grid;grid-template-columns:minmax(430px,510px) minmax(340px,1fr);align-items:center;min-height:100vh;background:oklch(34% .09 343);padding:clamp(24px,4vw,60px);gap:clamp(55px,8vw,130px)}.app-shell{width:100%;max-width:480px;height:min(900px,calc(100vh - 48px));min-height:680px;justify-self:end;border-radius:38px;overflow:auto;position:relative;box-shadow:0 45px 100px oklch(15% .05 345/.35)}.capture-screen{padding-inline:28px}.bottom-action{position:sticky;left:auto;right:auto;margin:0 -28px -151px;padding-inline:28px;border-radius:0 0 38px 38px}.photo-stage{height:min(42vh,390px)}.desktop-note{display:block;color:oklch(96% .025 15);max-width:540px}.desktop-note>span{font-size:.65rem;letter-spacing:.21em;color:oklch(82% .09 15)}.desktop-note h2{font-family:var(--font-cn);font-size:clamp(3.2rem,5vw,5.5rem);line-height:1.08;font-weight:700;letter-spacing:-.05em;margin:22px 0}.desktop-note h2 em{color:oklch(78% .12 12);font-style:normal}.desktop-note>p{max-width:450px;color:oklch(90% .025 15/.72);line-height:1.8;font-size:var(--text-body)}.desktop-note>div{border-top:1px solid oklch(92% .02 15/.2);margin-top:48px;padding-top:18px;display:flex;flex-direction:column;gap:6px}.desktop-note small{color:oklch(90% .025 15/.58)}.result-screen{padding-inline:28px}.result-open .app-shell{height:auto}.result-open .result-screen{min-height:680px}}
@media(max-width:350px){.capture-screen{padding-inline:15px}.app-bar{padding-inline:15px}.screen-heading h1{font-size:2.35rem}.photo-stage{min-height:270px}.bottom-action{padding-inline:15px}.photo-tips span{font-size:.61rem}}

/* App viewport contract: the primary flow always fits one screen. */
[hidden]{display:none!important}
html{width:100%;max-width:100%;overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%}body{width:100%;max-width:100%;overflow-x:clip;overscroll-behavior-x:none}.app-shell,main,.capture-screen,.capture-form{min-width:0;max-width:100%}img,svg{max-width:100%}
@media(max-width:1023px){html,body,.app-shell{height:100%;height:100dvh;overflow:hidden}.app-bar{height:calc(56px + var(--safe-top));padding:var(--safe-top) 16px 0}.capture-screen{height:calc(100dvh - 56px - var(--safe-top));padding:4px 16px calc(116px + var(--safe-bottom));display:flex;flex-direction:column}.screen-heading{flex:0 0 auto;margin-bottom:12px}.eyebrow{margin-bottom:5px}.screen-heading h1{font-size:2.35rem;line-height:1.06}.screen-heading p{font-size:.875rem;line-height:1.5;margin-top:8px;max-width:25rem}.capture-form{flex:1;min-height:0;display:flex;flex-direction:column}.photo-stage{flex:1;min-height:0;height:auto;max-height:400px;border-radius:24px}.stage-copy{margin-top:92px}.face-guide{height:min(190px,72%);width:min(142px,42%)}.photo-tips{flex:0 0 auto;padding:12px 3px 3px}.consent{flex:0 0 auto;padding:10px 3px 5px}.bottom-action{padding:4px 16px var(--safe-bottom)}.status{height:14px}#submit{height:52px}.bottom-action>small{margin-top:5px}.result-screen{height:100dvh;min-height:0;overflow:hidden;padding:calc(10px + var(--safe-top)) 18px calc(14px + var(--safe-bottom));display:flex;flex-direction:column}.result-top{flex:0 0 40px}.score-orbit{flex:0 0 auto;width:min(58vw,230px);margin:2px auto 10px}.verdict{flex:1;min-height:0;padding-top:14px}.verdict blockquote{font-size:1rem;line-height:1.62;margin:7px 0 10px}.verdict li{padding:6px 10px}.result-actions{flex:0 0 auto;margin-top:12px}.result-actions button{height:46px}.result-note{flex:0 0 auto;margin:8px 0 0}}

@media(max-width:1023px) and (max-height:620px){.app-bar{height:calc(52px + var(--safe-top))}.capture-screen{height:calc(100dvh - 52px - var(--safe-top));padding-top:0;padding-bottom:calc(104px + var(--safe-bottom))}.screen-heading{margin-bottom:8px}.eyebrow{display:none}.screen-heading h1{font-size:2rem;line-height:1.03}.screen-heading p{font-size:.8125rem;margin-top:6px;white-space:nowrap}.stage-copy{margin-top:72px}.camera-button{width:48px;height:48px;margin-bottom:8px}.photo-tips{padding-top:8px}.consent{padding-block:7px 2px}.bottom-action{padding-top:2px}#submit{height:48px}.bottom-action>small{font-size:.5625rem}.score-orbit{width:min(47vw,196px);margin-top:-2px}.verdict{padding-top:10px}.verdict blockquote{font-size:.9375rem;line-height:1.55}.result-actions{margin-top:8px}.result-note{margin-top:5px}}

@media(min-width:1024px){html,body{width:100%;height:100%;overflow:hidden}body{grid-template-columns:minmax(380px,1fr) minmax(420px,480px);height:100dvh;min-height:0;padding:clamp(20px,4vh,44px) clamp(32px,6vw,96px);gap:clamp(56px,8vw,130px)}.desktop-note{grid-column:1;grid-row:1;order:1;justify-self:end;width:100%}.app-shell{grid-column:2;grid-row:1;order:2;justify-self:start;height:calc(100dvh - clamp(40px,8vh,88px));min-height:0;max-height:820px;overflow:hidden}.app-bar{height:58px}.capture-screen{height:calc(100% - 58px);padding:2px 26px 18px;display:flex;flex-direction:column}.screen-heading{flex:0 0 auto;margin-bottom:10px}.eyebrow{margin-bottom:4px}.screen-heading h1{font-size:2.2rem;line-height:1.06}.screen-heading p{font-size:.8125rem;line-height:1.5;margin-top:6px}.capture-form{flex:1;min-height:0;display:flex;flex-direction:column}.photo-stage{flex:1;min-height:210px;height:auto;max-height:none;border-radius:24px}.stage-copy{margin-top:74px}.face-guide{height:min(180px,70%);width:138px}.photo-tips{flex:0 0 auto;padding:10px 3px 3px}.consent{flex:0 0 auto;padding:7px 3px 5px}.bottom-action{position:static;flex:0 0 auto;margin:0;padding:2px 0 0;background:none;border-radius:0}.status{height:14px}#submit{height:48px}.bottom-action>small{margin-top:5px}.desktop-note h2{margin:18px 0}.desktop-note>p{line-height:1.7}.desktop-note>div{margin-top:32px}.result-screen{height:100%;min-height:0;padding:8px 28px 18px;display:flex;flex-direction:column}.result-top{flex:0 0 40px}.score-orbit{width:min(27vh,220px);margin:2px auto 8px}.verdict{flex:1;min-height:0;padding-top:12px}.verdict blockquote{font-size:1rem;line-height:1.6;margin:8px 0 10px}.result-actions{margin-top:10px}.result-actions button{height:46px}.result-note{margin:7px 0 0}}

@media(min-width:1024px) and (max-height:700px){body{padding-block:16px}.app-shell{height:calc(100dvh - 32px)}.desktop-note h2{font-size:3rem}.desktop-note>div{margin-top:20px}.screen-heading h1{font-size:1.9rem}.screen-heading p{white-space:nowrap}.photo-stage{min-height:180px}.stage-copy{margin-top:54px}.photo-tips{padding-top:6px}.consent{padding-block:5px 2px}}

@media(min-width:1024px){.app-shell{display:flex;flex-direction:column}.app-shell>main{flex:1;min-height:0}.capture-screen{height:100%}}

@media(max-width:1023px){body,.app-shell,.app-shell>main,.capture-screen,.capture-form,.photo-stage{width:100%;max-width:100vw}.app-bar,.bottom-action{width:100%;max-width:100vw;left:0;right:0}.screen-heading,.photo-tips,.consent{max-width:100%;min-width:0}}

/* Mobile is a fixed app viewport, never a horizontally scrollable document. */
@media(max-width:1023px){html,body{position:fixed;inset:0;width:100%;height:100%;margin:0;overflow:hidden;touch-action:pan-y}.app-shell{position:fixed;inset:0;width:auto;max-width:none;height:auto;overflow:hidden;contain:layout paint}.app-shell>main{width:100%;height:calc(100% - 56px - var(--safe-top));overflow:hidden}.capture-screen{width:100%;height:100%;overflow:hidden}.bottom-action{position:absolute;bottom:0}.result-open .app-shell>main{height:100%}.result-screen{width:100%;height:100%}}

/* Typography and density pass. MiSans uses native 330 / 450 / 630 weights. */
:root{--font-cn:"MiSans","PingFang SC","Microsoft YaHei",sans-serif;--text-title:2.35rem}body{font-weight:330}.brand,.screen-heading h1,.score-wrap strong,dialog h2,.desktop-note h2{font-weight:630}.stage-copy strong,#submit,.result-actions button,.dialog-confirm{font-weight:450}.brand{letter-spacing:-.06em}.screen-heading h1{letter-spacing:-.045em}.screen-heading h1 em{display:inline-block}.eyebrow{font-weight:450;letter-spacing:.12em}.screen-heading p{color:oklch(47% .035 350)}button:focus-visible,input:focus-visible,.photo-stage:has(input:focus-visible){outline:3px solid color-mix(in oklch,var(--accent),white 45%);outline-offset:3px}.icon-button:active,.result-actions button:active,.dialog-confirm:active{transform:scale(.97)}

@media(max-width:1023px){.app-bar{height:calc(52px + var(--safe-top))}.app-shell>main{height:calc(100% - 52px - var(--safe-top))}.capture-screen{padding:0 16px calc(108px + var(--safe-bottom))}.screen-heading{margin-bottom:9px}.screen-heading h1{font-size:2.15rem;line-height:1.08}.screen-heading p{margin-top:6px;line-height:1.45}.photo-stage{max-height:360px;border-radius:22px}.stage-copy{margin-top:66px}.camera-button{width:50px;height:50px;margin-bottom:10px}.face-guide{height:min(172px,68%);width:min(132px,40%)}.photo-tips{padding:9px 2px 2px}.consent{padding:8px 3px 3px}.bottom-action{padding-top:2px}#submit{height:50px;border-radius:16px}.bottom-action>small{margin-top:4px}}

@media(min-width:1024px){.app-bar{height:54px}.screen-heading{margin-bottom:7px}.screen-heading h1{font-size:2rem}.screen-heading p{margin-top:4px}.photo-stage{border-radius:22px}.stage-copy{margin-top:58px}.camera-button{width:50px;height:50px;margin-bottom:9px}.photo-tips{padding-top:7px}.consent{padding-block:6px 3px}#submit{border-radius:15px}}

/* Keep the complete desktop composition centered on wide screens. */
@media(min-width:1024px){body{grid-template-columns:minmax(360px,600px) minmax(400px,480px);justify-content:center;column-gap:clamp(48px,6vw,96px);padding-inline:clamp(24px,4vw,64px)}.desktop-note{width:100%;max-width:600px}}