:root{--bg-grad: linear-gradient(180deg, #fdf4ef 0%, #fbe4da 100%);--text: #46302a;--text-sub: #77625b;--text-faint: #b1968c;--text-scale: #c4aca2;--accent: oklch(.62 .1 22);--accent-deep: oklch(.52 .1 22);--accent-pale: oklch(.94 .03 22);--border-dash: oklch(.82 .05 22);--camera-bg: #211511;--camera-preview: #33241e;--shadow-card: 0 4px 14px rgba(93, 63, 50, .08);--shadow-photo: 0 10px 30px rgba(93, 63, 50, .12);--shadow-cta: 0 8px 20px rgba(93, 63, 50, .25);--shadow-modal: 0 20px 50px rgba(70, 48, 42, .3);--error: #c62828}*{box-sizing:border-box}body{margin:0;background:#fdf4ef;background-image:var(--bg-grad);background-attachment:fixed;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Hiragino Sans,Noto Sans JP,system-ui,sans-serif;font-size:15px;line-height:1.7}button,.pill-btn{font-family:inherit;cursor:pointer;border:none}button:active:not(:disabled){filter:brightness(.95)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}main{max-width:480px;margin:0 auto;min-height:100dvh;padding:calc(14px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column}.title-row{position:relative}.app-title{margin:0;text-align:center;font-size:16px;font-weight:700;color:var(--text);padding:4px 0 12px}#btn-help{position:absolute;right:0;top:2px;background:none;padding:4px 6px;font-size:13px;font-weight:500;color:var(--accent-deep)}.status{margin:0 0 10px;text-align:center;font-size:13px;color:var(--text-sub)}.status.error{color:var(--error)}#photo-stage{position:relative;flex:1;min-height:340px;border-radius:28px;overflow:hidden}#photo-placeholder{position:absolute;inset:0;background:#fff9;border:2px dashed var(--border-dash);border-radius:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}#photo-placeholder[hidden]{display:none}#photo-placeholder p{margin:0;font-size:14px;font-weight:500;color:var(--text-sub)}.empty-icon{width:56px;height:56px;border-radius:50%;background:var(--accent-pale);display:flex;align-items:center;justify-content:center}.empty-icon svg{width:26px;height:26px;fill:none;stroke:var(--accent-deep);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}#result-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}#result-canvas[hidden]{display:none}#photo-stage:has(#result-canvas:not([hidden])){box-shadow:var(--shadow-photo)}#diopter-badge{position:absolute;top:12px;left:12px;padding:6px 12px;border-radius:99px;background:#ffffffe6;font-size:12px;font-weight:700;color:var(--accent-deep)}#diopter-badge[hidden]{display:none}#btn-compare{position:absolute;bottom:12px;left:50%;transform:translate(-50%);padding:8px 18px;border-radius:99px;background:#46302a99;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:12.5px;font-weight:500;color:#fff;white-space:nowrap;touch-action:none;user-select:none;-webkit-user-select:none}#btn-compare[hidden]{display:none}#diopter-card{background:#fff;border-radius:24px;padding:18px;margin-top:14px;box-shadow:var(--shadow-card)}#diopter-card.disabled{opacity:.5}.diopter-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}.diopter-label{font-size:13px;font-weight:500;color:var(--text-sub)}.diopter-value{font-size:20px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}#diopter{--pct: 100%;width:100%;height:30px;margin:0;appearance:none;-webkit-appearance:none;background:transparent}#diopter::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:linear-gradient(to right,var(--accent) var(--pct),var(--accent-pale) var(--pct))}#diopter::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid var(--accent);margin-top:-9px}#diopter:disabled::-webkit-slider-thumb{border-color:var(--border-dash)}#diopter:disabled::-webkit-slider-runnable-track{background:var(--accent-pale)}#diopter:disabled::-moz-range-progress{background:var(--accent-pale)}#diopter::-moz-range-track{height:8px;border-radius:4px;background:var(--accent-pale)}#diopter::-moz-range-progress{height:8px;border-radius:4px;background:var(--accent)}#diopter::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid var(--accent)}.diopter-scale{display:flex;justify-content:space-between;font-size:11px;font-weight:500;color:var(--text-scale);margin-top:4px}.action-row{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;margin-top:14px;align-items:center}.pill-btn{height:50px;border-radius:99px;background:#fff;box-shadow:var(--shadow-card);display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:500;color:var(--text);cursor:pointer}.pill-btn svg{width:18px;height:18px;fill:none;stroke:var(--accent-deep);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.pill-btn.upload input{display:none}#btn-camera{grid-column:2;width:64px;height:64px;border-radius:50%;background:var(--accent);box-shadow:var(--shadow-cta);display:flex;align-items:center;justify-content:center;padding:0}#btn-camera svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}#btn-save[hidden]{display:none}#overlay{position:fixed;inset:0;z-index:100;background:#fdf4efb3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}#overlay[hidden]{display:none}#overlay-text{margin:0;color:var(--text);font-size:14px;font-weight:500}.overlay-spinner{width:44px;height:44px;border:4px solid var(--accent-pale);border-top-color:var(--accent);border-radius:50%;animation:poc-spin .8s linear infinite}@keyframes poc-spin{to{transform:rotate(360deg)}}#camera-modal{position:fixed;inset:0;z-index:200;background:var(--camera-bg);display:flex;flex-direction:column;padding:calc(6px + env(safe-area-inset-top)) 0 calc(24px + env(safe-area-inset-bottom))}#camera-modal[hidden]{display:none}.camera-stage{position:relative;flex:1;margin:6px 14px 0;border-radius:28px;overflow:hidden;background:var(--camera-preview)}#camera-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--camera-preview)}#camera-video.mirrored{transform:scaleX(-1)}#camera-guide{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.camera-hint{position:absolute;top:14px;left:50%;transform:translate(-50%);margin:0;padding:7px 16px;border-radius:99px;background:#0d1a1899;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:12.5px;font-weight:500;color:#fff;white-space:nowrap}.camera-controls{display:flex;align-items:center;justify-content:space-between;padding:22px 36px 0}#btn-camera-close,#btn-camera-flip{width:56px;height:44px;background:none;font-size:14px;font-weight:500;color:#ffffffd9;padding:0}#btn-camera-shutter{width:72px;height:72px;border-radius:50%;background:none;border:4px solid #fff;display:flex;align-items:center;justify-content:center;padding:0}.shutter-inner{width:56px;height:56px;border-radius:50%;background:#fff}#camera-privacy{position:fixed;inset:0;z-index:250;background:#46302a59;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:28px}#camera-privacy[hidden]{display:none}.privacy-card{background:#fff;border-radius:28px;padding:28px 24px;width:100%;max-width:360px;box-shadow:var(--shadow-modal);display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}.privacy-icon{width:56px;height:56px;border-radius:50%;background:var(--accent-pale);color:var(--accent-deep);display:flex;align-items:center;justify-content:center}.privacy-icon svg{width:26px;height:26px}.privacy-title{margin:0;font-size:17px;font-weight:700;color:var(--text)}.privacy-text{margin:0;font-size:13px;line-height:1.7;color:var(--text-sub)}#btn-privacy-ok{height:50px;width:100%;margin-top:6px;border-radius:99px;background:var(--accent);color:#fff;font-size:15px;font-weight:700;box-shadow:var(--shadow-cta)}.privacy-cancel{height:44px;background:none;font-size:13.5px;color:var(--text-faint);padding:0}#onboarding{position:fixed;inset:0;z-index:300;background:#fdf4ef;background-image:var(--bg-grad);display:flex;justify-content:center;overflow-y:auto}#onboarding[hidden]{display:none}.onboarding-card{width:100%;max-width:480px;min-height:100dvh;padding:calc(24px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column}.onboarding-hero{position:relative;height:250px;border-radius:28px;overflow:hidden;box-shadow:var(--shadow-photo)}.onboarding-hero img{width:100%;height:100%;object-fit:cover;display:block}.hero-divider{position:absolute;left:50%;top:0;bottom:0;width:2px;background:#ffffffd9}.hero-pills{position:absolute;bottom:12px;left:50%;transform:translate(-50%);display:flex;background:#ffffffe6;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:99px;padding:3px}.hero-pills span{padding:5px 14px;border-radius:99px;font-size:12px;font-weight:500;color:var(--text-sub)}.hero-pills span.active{background:var(--accent);color:#fff}.onboarding-card h2{margin:30px 6px 0;font-size:30px;line-height:1.4;font-weight:700;color:var(--text);text-wrap:balance}.onboarding-spacer{flex:1;min-height:20px}.onboarding-steps{display:flex;gap:10px;padding-bottom:20px}.step-card{flex:1;background:#fff;border-radius:20px;padding:14px 12px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:8px;align-items:center}.step-icon{width:44px;height:44px;border-radius:50%;background:var(--accent-pale);display:flex;align-items:center;justify-content:center}.step-icon svg{width:22px;height:22px;fill:none;stroke:var(--accent-deep);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.step-icon .knob{fill:var(--accent-pale)}.step-icon .pupil{fill:var(--accent-deep)}.step-label{font-size:12.5px;line-height:1.5;font-weight:500;color:var(--text);text-align:center}#btn-onboard-start{height:54px;border-radius:99px;background:var(--accent);color:#fff;font-size:16px;font-weight:700;box-shadow:var(--shadow-cta)}.onboarding-note{margin:0;text-align:center;font-size:11.5px;color:var(--text-faint);padding-top:10px}@media (prefers-reduced-motion: no-preference){#camera-privacy:not([hidden]) .privacy-card,#onboarding:not([hidden]) .onboarding-card{animation:poc-pop .2s ease-out}@keyframes poc-pop{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}}