.count-page{background:#fff;color:#2d2d3a}.count-screen{height:100vh;height:100svh;height:100dvh;min-height:30rem;max-height:960px;padding:calc(4.75rem + env(safe-area-inset-top)) 20px calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;max-width:1280px;margin:auto}.count-heading{flex:none;text-align:center;margin-bottom:12px}.count-heading h1{font-size:clamp(1.3rem,2.5vw,1.75rem);font-weight:750;line-height:1.2;letter-spacing:-.035em}.count-heading h1 span{color:#4d938a}.count-heading p{font-size:.875rem;color:#68717d;margin-top:7px}.count-app-intro{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:760px;margin:14px auto 0;padding:12px 16px;background:#2d2d3a;color:#fff;border-radius:14px;text-align:left}.count-app-intro strong{display:block;font-size:1rem}.count-app-intro span{display:block;margin-top:3px;font-size:.75rem;color:#ffffffcf}.count-app-intro-links{display:flex;flex:none;gap:8px}.count-screen:has(.has-photo) .count-app-intro{display:none}.count-surface{display:flex;flex:1;min-height:0;flex-direction:column;width:100%;max-width:760px;align-self:center;border:1px solid #e2e2e7;border-radius:24px;overflow:hidden;background:#f8f8fa;box-shadow:0 4px 12px #00000014}.count-stage{position:relative;flex:1;min-height:120px;display:flex;overflow:hidden}.count-viewer{display:flex;flex-direction:column;flex:1;position:relative;min-width:0;min-height:0;background:#2d2d3a;overflow:hidden}.count-image-frame{position:relative;flex:1;min-height:0}.count-image{position:absolute;width:100%;height:100%;top:0;right:0;bottom:0;left:0;touch-action:none;cursor:grab}.count-image:active{cursor:grabbing}.count-image:focus-visible{outline:3px solid #4b2965;outline-offset:-4px}.count-view-controls{order:-1;align-self:flex-end;flex:none;margin:6px 8px;display:flex;gap:2px;background:#ffffffed;border:1px solid #e2e2e7;border-radius:14px;padding:3px;box-shadow:0 2px 12px #0001}.count-view-controls button{display:flex;justify-content:center;align-items:center;gap:5px;min-width:44px;min-height:44px;border-radius:10px;color:#43344e;font-size:.8rem;padding:0 7px}.count-view-controls button:hover{background:#f0f4f8}.count-view-controls button:disabled{opacity:.35;cursor:default}.count-page button:focus-visible,.count-page a:focus-visible,.count-page summary:focus-visible{outline:3px solid #4b2965;outline-offset:3px}.count-upload{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:12px 16px;border:2px dashed transparent;transition:background .15s,border-color .15s}.count-upload.is-dragging{background:#e8f6f2;border-color:#71b8ae}.count-tray{width:min(280px,70%);max-height:29vh;display:block;flex-shrink:1;min-height:60px}.count-upload h2{font-size:clamp(1.125rem,2vw,1.4rem);font-weight:700;margin-top:4px}.count-upload>p{color:#73717d;font-size:.875rem;margin-top:4px}.count-upload-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin-top:20px}.count-button{display:inline-flex;justify-content:center;align-items:center;gap:8px;padding:12px 20px;min-height:44px;border-radius:999px;font-size:.875rem;font-weight:650;white-space:nowrap;transition:background .15s}.count-button-primary{background:#397e75;color:#fff}.count-button-primary:hover{background:#2c685f}.count-button-secondary{background:#fff;border:1px solid #d4d4dc;color:#4b2965}.count-button-secondary:hover{background:#f0f4f8}.count-drop-hint{font-size:.75rem;color:#777481;margin-top:12px}.count-privacy{flex:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px;padding:9px 12px;font-size:.7rem;color:#686371;background:#fff;border-top:1px solid #e2e2e7;text-align:center}.count-privacy a{text-decoration:underline;text-underline-offset:2px}.count-result-bar{flex:none;display:flex;align-items:center;gap:24px;padding:14px 24px;background:#fff;border-top:1px solid #e2e2e7}.count-total{display:flex;flex-direction:column;min-width:85px}.count-total>span{font-size:.75rem;color:#666071;font-weight:600}.count-total strong{font-size:clamp(2.75rem,5vw,3.75rem);line-height:1.05;letter-spacing:-.055em;font-weight:800;color:#4b2965;font-variant-numeric:tabular-nums}.count-result-hint{flex:1;font-size:.8rem;color:#625d6b}.count-result-hint p{margin-bottom:7px}.count-legend{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:.7rem}.count-legend>span{display:inline-flex;align-items:center;gap:5px}.count-swatch{display:inline-block;width:13px;height:7px;border-radius:6px;background:#10b981;transform:rotate(-25deg)}.count-swatch.is-half{opacity:.5}.count-swatch.is-flagged{background:#f59e0b}.count-swatch.is-excluded{background:#64748b}.count-preparing{display:grid;place-items:center;width:100%}.count-progress{position:absolute;left:50%;bottom:20px;transform:translate(-50%);width:-moz-max-content;width:max-content;max-width:calc(100% - 24px);display:flex;align-items:center;gap:12px;background:#ffffffef;border:1px solid #e2e2e7;box-shadow:0 4px 20px #0001;border-radius:16px;padding:10px 14px;font-size:.875rem}.count-progress p{font-size:.75rem;margin-top:3px}.count-progress button{min-width:36px;min-height:36px;display:grid;place-items:center}.count-spinner{animation:count-spin 1.2s linear infinite;flex-shrink:0;color:#397e75}@keyframes count-spin{to{transform:rotate(360deg)}}.count-error{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;background:#ffffffed;text-align:center;color:#4b2965}.count-error>p{max-width:360px;margin-top:14px}.count-support{max-width:1000px;margin:auto;padding:56px 24px 64px}.count-support h2{font-size:1.5rem;font-weight:700;letter-spacing:-.025em}.count-tips{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:22px 0 44px}.count-tip{text-align:center}.count-tip svg{width:100%;max-width:240px;margin:auto}.count-tip h3{font-weight:650;margin-top:12px}.count-tip p{font-size:.8rem;color:#6c6674;margin:5px auto 0;max-width:220px}.count-app-promo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;background:#f8f8fa;border-radius:20px;padding:26px;margin-bottom:36px}.count-app-promo h2{font-size:1.2rem}.count-app-promo p{color:#6c6674;font-size:.875rem;margin-top:5px}.count-app-links{display:flex;flex-wrap:wrap;gap:12px}.count-faq{margin-top:16px;border-top:1px solid #e2e2e7}.count-faq details{border-bottom:1px solid #e2e2e7;padding:16px 0}.count-faq summary{cursor:pointer;font-weight:600}.count-faq p{color:#6c6674;line-height:1.65;font-size:.875rem;margin:12px 0 0;max-width:760px}.count-reading{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:24px;font-size:.875rem}.count-reading a{color:#397e75;text-decoration:underline;text-underline-offset:3px}@media(min-width:760px){.count-surface.has-photo{max-width:clamp(520px,calc((100dvh - 220px) * var(--photo-ratio)),1200px)}.count-surface.has-result{display:grid;grid-template-columns:minmax(0,1fr) 210px;grid-template-rows:minmax(0,1fr) auto;max-width:clamp(620px,calc((100dvh - 220px) * var(--photo-ratio) + 210px),1200px)}.has-result .count-result-bar{flex-direction:column;align-items:stretch;justify-content:center;gap:24px;padding:24px;border-top:0;border-left:1px solid #e2e2e7;background:#fff}.has-result .count-total strong{font-size:clamp(3.75rem,6vw,5rem)}.has-result .count-result-hint{flex:none;line-height:1.5}.has-result .count-legend{gap:10px}.has-result .count-privacy{grid-column:1 / -1}}@media(max-width:759px){.count-screen{padding:calc(4.75rem + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom))}.count-heading{margin-bottom:12px}.count-heading p{font-size:.78rem}.count-app-intro{margin-top:10px;flex-direction:column;gap:8px;padding:10px 12px;text-align:center}.count-surface{border-radius:18px}.count-result-bar{padding:10px 14px;gap:10px;flex-wrap:wrap}.count-total{min-width:0;flex:1}.count-result-hint{order:3;flex-basis:100%;font-size:.7rem}.count-result-hint p{margin-bottom:5px}.count-legend{font-size:.75rem;gap:5px 10px}.count-button{padding:11px 16px;font-size:.8rem}.count-upload-actions{margin-top:14px}.count-upload .count-tray{max-height:23vh}.count-tips{gap:10px}.count-tip h3{font-size:.85rem}.count-tip p{font-size:.75rem}.count-support{padding:36px 20px}}@media(max-height:540px)and (min-width:600px){.count-screen{min-height:360px;padding-top:68px}.count-heading p{display:none}.count-app-intro{flex-direction:row;padding:6px 12px;text-align:left}.count-upload{display:grid;grid-template-columns:1fr 1fr;-moz-column-gap:20px;column-gap:20px;align-content:center}.count-upload .count-tray{grid-row:1 / 5;max-height:160px;justify-self:center}}@media(prefers-reduced-motion:reduce){.count-spinner{animation:none}.count-page *{transition:none!important}}