:root{--bg:#f5f6f0;--paper:#fff;--ink:#233e35;--muted:#839089;--line:#e5e9e2;--green:#267d5a;--mint:#e8f2de;--orange:#ed9d66;font-family:'Noto Sans SC',system-ui,sans-serif;color:var(--ink);background:var(--bg);font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,select{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.5}button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible{outline:3px solid #72b995;outline-offset:4px}[hidden]{display:none!important}.site-header{height:104px;max-width:1280px;margin:auto;padding:0 48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--ink)}.brand-mark{width:40px;height:40px;display:grid;place-items:center;background:var(--ink);color:#d6eabf;border-radius:12px;font:38px/1 Georgia;transform:rotate(-8deg);padding-bottom:8px}.brand strong{font-size:22px;letter-spacing:2px}.brand strong span{display:block;font-size:8px;letter-spacing:2.2px;margin-top:3px;font-weight:500}.header-tag{font-size:12px;color:#6b7c70;display:flex;align-items:center;gap:8px}.header-tag i{width:6px;height:6px;border-radius:50%;background:#74a781}main{max-width:1280px;margin:auto;padding:0 48px}.intro{padding:48px 0 38px;display:flex;align-items:center;justify-content:space-between}.eyebrow{font-size:10px;letter-spacing:1.8px;color:#86907c;font-weight:600}h1{font-size:44px;line-height:1.4;letter-spacing:-1.8px;margin:15px 0 15px;font-weight:600}h1>span{color:#80a06a}.intro p{font-size:13px;color:#738074;line-height:1.9;margin:0}.mobile-break{display:none}.intro-art{height:220px;width:300px;position:relative;margin-right:35px}.smile-face{width:134px;height:134px;border-radius:50%;background:#dfeccd;box-shadow:inset -10px -9px 0 #d7e5c4;position:absolute;left:80px;top:40px;transform:rotate(-12deg);display:flex;align-items:center;flex-direction:column}.smile-face b{font:64px/1.1 Georgia;letter-spacing:1px}.smile-face span{font:80px/.6 Georgia;transform:scaleX(1.15);margin-top:-4px}.orbit{position:absolute;width:250px;height:175px;border:1px solid #dce2d4;border-radius:50%;left:15px;top:20px;transform:rotate(-22deg)}.orbit.two{width:270px;height:130px;top:48px;transform:rotate(29deg)}.spark{position:absolute;color:#8ba47c}.s1{top:10px;right:30px;font-size:32px}.s2{bottom:22px;left:21px;font-size:28px}.tiny-tag{position:absolute;right:-18px;bottom:13px;font-size:8px;letter-spacing:1.3px;padding:9px 13px;border:1px solid #d8dfd1;border-radius:20px;transform:rotate(-9deg);background:var(--bg)}.workspace{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(340px,1fr);gap:22px}.panel{background:var(--paper);border:1px solid var(--line);border-radius:20px}.input-panel{padding:20px}.panel-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.tabs{padding:4px;background:#f1f3ee;border-radius:10px;display:flex;gap:3px}.tab{background:transparent;border:none;border-radius:7px;padding:9px 17px;font-size:12px;color:#7d877b}.tab.active{background:white;color:var(--ink);box-shadow:0 2px 4px #233e3509;font-weight:600}.small{font-size:10px}.muted{color:var(--muted)}#source-label{letter-spacing:1px}.viewport{aspect-ratio:4/3;background:#203c32;border-radius:12px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#c3d3bf}.viewport video,.viewport>img{width:100%;height:100%;position:absolute;object-fit:contain;background:#152a22;z-index:1}.viewport video{transform:scaleX(-1)}.view-grid{position:absolute;inset:0;background-image:linear-gradient(#d3e1c809 1px,transparent 1px),linear-gradient(90deg,#d3e1c809 1px,transparent 1px);background-size:36px 36px;mask-image:radial-gradient(ellipse,black,transparent)}.view-tag{position:absolute;top:18px;left:18px;border:1px solid #cedec425;background:#20392be0;color:#c6d5c0;padding:6px 10px;border-radius:20px;display:flex;align-items:center;gap:6px;font-size:10px;z-index:2}.view-tag>span:first-child{background:#8da58a;width:5px;height:5px;border-radius:50%}.view-tag>span.active:first-child{background:#b5eaa4;box-shadow:0 0 0 3px #b5eaa415}.placeholder{text-align:center;z-index:1;padding:30px 10px}.face-frame{height:122px;width:110px;margin:5px auto 13px;position:relative;color:#b8cca5;background:linear-gradient(currentColor,currentColor) left top/15px 1px no-repeat,linear-gradient(currentColor,currentColor) left top/1px 15px no-repeat,linear-gradient(currentColor,currentColor) right top/15px 1px no-repeat,linear-gradient(currentColor,currentColor) right top/1px 15px no-repeat,linear-gradient(currentColor,currentColor) left bottom/15px 1px no-repeat,linear-gradient(currentColor,currentColor) left bottom/1px 15px no-repeat,linear-gradient(currentColor,currentColor) right bottom/15px 1px no-repeat,linear-gradient(currentColor,currentColor) right bottom/1px 15px no-repeat}.face-frame svg{width:84px;margin-top:11px;opacity:.65}.face-frame i{position:absolute;top:51%;left:-14px;right:-14px;height:1px;background:linear-gradient(90deg,transparent,#afc59a55,transparent)}.placeholder h2{font-size:16px;font-weight:500;letter-spacing:1px;margin:12px 0}.placeholder p{font-size:10px;color:#839f8d;margin:0}.view-bottom{position:absolute;left:18px;right:18px;bottom:14px;font-size:9px;display:flex;align-items:center;justify-content:space-between;color:#a4b6a5;z-index:2;text-shadow:0 1px 4px #000}.view-corner{font-size:23px}.actions{display:flex;gap:12px;align-items:center;margin-top:18px}.button{border-radius:9px;padding:12px 20px;border:1px solid transparent;font-size:12px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px}.primary{background:var(--green);color:white}.primary:hover:not(:disabled){background:#1d684a}.secondary{background:#f5f6f0;border-color:#e5e9e2;color:var(--ink)}.privacy{display:flex;gap:7px;font-size:10px;color:#8a9388;line-height:1.8;margin:15px 0 0}.privacy svg{width:15px;height:18px;flex-shrink:0;margin-top:1px}.connection{font-size:10px;line-height:1.7;margin-top:11px;color:#69866e;min-height:18px;display:flex;gap:8px}.connection.error{color:#b05e40}.result-panel{padding:25px 27px;display:flex;flex-direction:column}.result-heading{display:flex;align-items:center;justify-content:space-between}.result-heading h2,.section-heading h2,.tip-panel h2{font-size:16px;margin:0;font-weight:600}.pill{border-radius:20px;background:#f2f4ee;padding:5px 9px;color:#93a08b;font-size:9px}.pill.ready{background:#e9f3e5;color:#57805a}.dominant{display:flex;align-items:center;gap:14px;padding:28px 0 27px;border-bottom:1px solid var(--line)}.result-icon{height:64px;width:64px;flex-shrink:0;background:#eff2e8;border-radius:18px;font:46px/1 Georgia;display:grid;place-items:center;color:#8ba576;padding-bottom:5px}.dominant h3{font-size:21px;margin:5px 0;font-weight:600;letter-spacing:-.6px}.dominant p{font-size:10px;color:#8e988d;margin:0}.dominant .eyebrow{letter-spacing:1px;font-size:9px}.top-score{margin-left:auto;font-size:22px;letter-spacing:-1px;color:var(--green)}.distribution-heading{display:flex;justify-content:space-between;align-items:center;margin:22px 0 18px}.distribution-heading h3{font-size:12px;margin:0;font-weight:500}.distribution-heading span{font-size:9px;color:#94a08d}.bars{display:grid;gap:16px}.bar{display:grid;grid-template-columns:60px 1fr 33px;gap:12px;align-items:center;font-size:11px}.bar-label{display:flex;align-items:center;gap:8px;color:#728070}.bar-label i{width:6px;height:6px;border-radius:50%;background:var(--bar-color);opacity:.7}.track{height:6px;border-radius:10px;background:#f2f4ee;overflow:hidden}.fill{height:100%;width:0;border-radius:10px;background:var(--bar-color);transition:width .45s ease}.value{font-size:10px;text-align:right;color:#8e988b;font-variant-numeric:tabular-nums}.bar.top .bar-label,.bar.top .value{color:var(--green);font-weight:600}.result-footer{display:flex;align-items:center;justify-content:space-between;font-size:9px;color:#899684;margin-top:24px;padding-top:17px;border-top:1px solid var(--line)}.result-footer>span:first-child{display:flex;gap:6px;align-items:center}#result-dot{height:5px;width:5px;border-radius:50%;background:#bdc7b4}#result-dot.active{background:#6e9b6a}.result-disclaimer{font-size:9px;color:#a0a798;line-height:1.9;margin:12px 0 0}.below-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:22px;margin-top:22px}.history-panel{padding:23px 24px}.section-heading{display:flex;justify-content:space-between;align-items:center}.section-heading .eyebrow{font-size:8px;letter-spacing:1.5px}.section-heading h2{margin-top:7px;font-size:15px}.text-button{padding:3px 0;border:none;background:none;color:#819578;font-size:10px;white-space:nowrap}.text-button:hover{color:var(--green)}.history-empty{display:flex;gap:18px;align-items:center;padding:19px 0 2px}.history-empty>span{font-size:37px;color:#b4c0a7}.history-empty p{font-size:11px;color:#879380;line-height:1.7}.history-empty small{display:block;font-size:9px;color:#a5ad9d;margin-top:4px}.history-list{display:flex;gap:8px;overflow-x:auto;padding:17px 0 2px}.history-item{border-radius:10px;background:#f5f7f1;min-width:71px;padding:10px 8px;text-align:center}.history-item b{display:block;font-size:11px;color:#5a7654;font-weight:500}.history-item small{font-size:8px;display:block;color:#97a18f;margin-top:5px}.tip-panel{padding:26px 28px;border:1px solid #e2e8d7;border-radius:20px;background:#edf1e4}.tip-panel .eyebrow{font-size:8px;letter-spacing:1.5px}.tip-panel h2{font-size:16px;margin:10px 0}.tip-panel p{font-size:10px;color:#8c987f;line-height:1.9;margin:0}.tip-chips{display:flex;gap:17px;color:#77896a;font-size:9px;margin-top:19px}.settings{margin:24px 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:11px}.settings summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;padding:18px 4px;color:#7b8a72}.settings summary::-webkit-details-marker{display:none}.settings-summary{font-size:10px;color:#96a08c}.settings-summary span{margin-left:20px}.settings-body{padding:0 4px 18px;display:grid;grid-template-columns:90px minmax(0,400px);gap:12px;align-items:center}.settings select{padding:10px;border:1px solid var(--line);background:white;border-radius:7px;max-width:100%;color:var(--ink);font-size:11px}.settings p{grid-column:1/-1;font-size:10px;color:#8c9786;line-height:1.8;max-width:600px;margin:0}footer{display:flex;justify-content:space-between;align-items:center;padding:28px 0 32px;font-size:9px;color:#95a18d;letter-spacing:.5px}footer>span:first-child{letter-spacing:1.2px}@media(min-width:1200px){.viewport{aspect-ratio:1.43}}@media(max-width:1000px){main,.site-header{padding-left:28px;padding-right:28px}.workspace{grid-template-columns:1.15fr 1fr;gap:16px}.input-panel{padding:16px}.result-panel{padding:22px}.intro-art{margin-right:0}.dominant{gap:10px}.result-icon{width:50px;height:50px}.dominant h3{font-size:18px}.top-score{font-size:18px}#action-help{display:none}.bar{gap:9px}.bars{gap:14px}.viewport{aspect-ratio:1.05}.below-grid{gap:16px}}@media(max-width:740px){main,.site-header{padding-left:20px;padding-right:20px}.site-header{height:80px}.header-tag{font-size:10px}.intro{padding:32px 0 28px}.intro-art{width:140px;height:180px;transform:scale(.7);transform-origin:right center;margin-left:-100px}.intro-art .smile-face{left:0}.intro-art .orbit{left:-53px}.intro-art .tiny-tag{right:-27px;bottom:0}.intro-art .s1{right:-47px;top:0}.intro-art .s2{left:-55px;bottom:0}.intro .eyebrow{font-size:7px;letter-spacing:1px}h1{font-size:33px;letter-spacing:-1px}.intro p{font-size:11px;max-width:250px}.mobile-break{display:block}.workspace,.below-grid{grid-template-columns:1fr}.viewport{aspect-ratio:4/3}.result-panel{padding:23px}.dominant{padding:23px 0}.result-icon{width:60px;height:60px}.dominant h3{font-size:22px}.top-score{font-size:23px}.bars{gap:17px}.result-disclaimer{font-size:10px}.below-grid{margin-top:16px}.history-panel,.tip-panel{padding:22px}.settings-body{grid-template-columns:1fr}footer{font-size:8px;gap:12px}.privacy{font-size:10px}.result-footer{font-size:10px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.speed-controls{display:flex;align-items:center;gap:10px;font-size:10px;margin-top:16px;padding-top:13px;border-top:1px solid var(--line);color:#809177}.speed-controls select{font:inherit;background:#f4f6ef;color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:6px 8px;max-width:160px}.speed-live{margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums}.speed-live b{font-size:14px;color:var(--green);font-weight:500}.fill{transition:width .12s linear}@media(max-width:380px){.speed-controls{gap:6px}.speed-controls select{max-width:130px}}

.offline-help{font-size:11px;line-height:1.9;margin-top:18px}.offline-help summary{cursor:pointer;color:#567c55;padding:10px 0}.offline-help ol{padding-left:20px;color:#75836f}.offline-help code{background:#e9eddf;padding:2px 5px;border-radius:4px;word-break:break-all}.offline-help pre{font-size:9px;white-space:pre-wrap;color:#839079}.offline-help p{color:#75836f}.offline-badge{border:1px solid #ccddc0;padding:5px 9px;border-radius:20px;background:#edf4e8;color:#567c55;font-size:10px}

.actions{flex-wrap:wrap}.camera-button{min-width:150px;box-shadow:0 3px 10px #267d5a18}.camera-hint{font-size:10px;line-height:1.8;color:#7b8d72;margin:10px 0 0}@media(max-width:450px){.camera-button{flex:1;min-width:145px}}

.learning-panel{margin-top:24px;padding:26px}.learning-panel h2{font-size:22px;margin:6px 0}.learning-intro,.learning-steps,.learning-warning,#learn-status{font-size:12px;line-height:1.9;color:#687962}.learning-panel summary{padding:13px 0;cursor:pointer;font-size:14px;color:#446c51;font-weight:600}.learning-steps{padding-left:22px}.learning-steps li{padding-bottom:8px}.learning-panel h3{font-size:14px;margin:18px 0 10px}.learning-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:16px}.learning-actions label{font-size:12px;color:#65785a}.learning-actions select{background:#fff;border:1px solid #d2dcc7;border-radius:8px;padding:10px;font:inherit;color:#456241}.learning-actions .button{font-size:12px;min-height:40px}.learning-actions .text-button{padding:5px 0}.learn-counts{display:flex;gap:7px;flex-wrap:wrap}.learn-counts span{font-size:11px;padding:6px 10px;border:1px solid #e0e3d8;border-radius:8px;background:#f7f7f3}.learn-counts .enough{border-color:#a5c59c;background:#eaf4e5;color:#3e7042}.learn-report{overflow-x:auto}.learn-report table{border-collapse:collapse;font-size:12px;width:100%;max-width:680px;margin:15px 0}.learn-report caption{text-align:left;font-size:11px;color:#748069;padding-bottom:8px}.learn-report th,.learn-report td{text-align:left;padding:9px;border-bottom:1px solid #e5e8df}.learn-report th{background:#edf2e7;color:#4e6b41}.learning-panel .pill{white-space:normal}.learning-warning{font-size:11px}.quality-line{font-size:11px;line-height:1.8;color:#7f715c;margin:12px 0 0;min-height:20px}.learning-actions button:disabled{opacity:.45;cursor:not-allowed}@media(max-width:550px){.learning-panel{padding:18px}.learning-panel .section-heading{gap:10px;align-items:flex-start}.learning-panel h2{font-size:19px}.learning-actions .button{flex:1 1 140px}.learning-actions select{max-width:140px}}
/* Public mobile release and sharing controls. */
.header-links{display:flex;align-items:center;gap:22px;font-size:12px}.header-links a{color:var(--ink);text-decoration:none}.header-links .share-x{border:1px solid #d5dfcd;padding:10px 14px;border-radius:30px;background:#eaf1e4}.browser-banner{display:flex;align-items:center;gap:18px;margin-top:24px;padding:18px 22px;border:1px solid #cfddc9;background:#edf4e8;border-radius:14px;font-size:12px;line-height:1.8}.browser-banner strong,.browser-banner span{display:block}.browser-banner .button{flex-shrink:0}.camera-extras{display:flex;align-items:center;gap:10px;margin-top:15px;color:#738074;font-size:12px}.camera-extras select{padding:8px;border:1px solid var(--line);border-radius:8px;background:#f5f6f0;color:var(--ink);font-size:12px}.camera-extras .text-button{margin-left:auto;font-size:12px}.viewport video.rear-camera{transform:none}.launch-panel{padding:28px;margin-top:24px}.launch-panel h2,.web-help h2{font-size:22px;font-weight:600;margin:10px 0}.launch-panel p{font-size:12px;color:#738074;line-height:1.8}.share-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.share-actions a{text-decoration:none}.web-help{margin:35px 0 10px}.web-help details{border-bottom:1px solid var(--line);padding:17px 0}.web-help summary{cursor:pointer;font-size:14px;font-weight:500;line-height:1.7}.web-help p{font-size:13px;color:#71816f;line-height:1.9;max-width:850px;margin:12px 0 0}.web-help a{color:var(--green)}#copy-fallback{margin-top:12px;font-size:12px}#public-link{display:block;width:100%;max-width:650px;font-size:16px;padding:12px;border:1px solid var(--line);border-radius:8px;margin-top:7px}.camera-hint,.privacy,.connection,.result-disclaimer,.learning-warning{font-size:11px;line-height:1.9}.actions .button{min-height:46px}.learning-actions .text-button{min-height:40px}.tip-panel p{font-size:12px}.settings p{font-size:12px}.intro p{font-size:14px}.intro-art{pointer-events:none}.launch-panel .small{font-size:11px}@media(max-width:740px){.header-links{gap:12px;font-size:11px}.header-links .share-x{padding:9px 11px}.intro-art{display:none}.intro{padding-top:26px}.intro h1{font-size:35px}.intro p{max-width:none;font-size:13px}.browser-banner{align-items:flex-start;flex-direction:column;gap:10px;margin-top:18px;padding:16px}.site-header{height:76px}.button,.tab{font-size:13px}.actions{gap:8px}.actions .camera-button{min-width:150px;flex:1}.actions #primary{flex:1;min-width:120px}.launch-panel{padding:22px}.launch-panel h2{font-size:20px}.web-help p{font-size:13px}.speed-controls{font-size:11px;flex-wrap:wrap}.speed-controls select{padding:8px}.placeholder p{font-size:11px}.settings-summary{max-width:66%;text-align:right}.dominant p{font-size:11px;line-height:1.8}.dominant h3{font-size:21px}.result-panel{padding:20px}.learning-panel{padding:20px!important}.learning-steps{font-size:12px!important}.header-links>a:first-child{display:none}}@media(max-width:380px){main,.site-header{padding-left:14px;padding-right:14px}.brand strong{font-size:19px}.brand-mark{width:34px;height:34px}.bar{grid-template-columns:54px 1fr 34px}.dominant{gap:8px}.result-icon{width:44px;height:50px}.dominant h3{font-size:19px}.top-score{font-size:20px}}