:root{color-scheme:light;--bg:#f5f0e7;--green:#1d4b3a;--text:#253a30;--muted:#647067;--line:#dddcd1;--mint:#e0eee5;--card:#fffdf8;font-family:-apple-system,BlinkMacSystemFont,'Hiragino Kaku Gothic ProN','Noto Sans JP',sans-serif;color:var(--text);background:var(--bg)}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:default;opacity:.45}a{color:var(--green)}:focus-visible{outline:3px solid #548b75;outline-offset:4px}[hidden]{display:none!important}.preview-note{margin:0;padding:9px 20px;text-align:center;font-size:11px;background:#e6e9df;color:#425747}.top{max-width:620px;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;margin:auto;padding:16px 24px;gap:12px}.top button{border:0;background:transparent;color:var(--green);min-height:44px;justify-self:start}.brand{font-family:Georgia,serif;font-size:25px;text-decoration:none;justify-self:center}.progress{display:flex;gap:7px;max-width:550px;margin:0 auto;padding:0 24px}.segment{height:4px;flex:1;background:#dddcd1;overflow:hidden;border-radius:4px}.segment i{display:block;height:100%;background:var(--green);transition:width .25s}.page{max-width:550px;margin:0 auto;padding:30px 24px 150px;min-height:70vh}h1{font-size:clamp(25px,5vw,33px);font-weight:650;letter-spacing:-.025em;line-height:1.55;white-space:pre-line;margin:12px 0 20px}h2{font-size:19px;line-height:1.6}p{line-height:1.85;white-space:pre-line}.lead{color:var(--muted);font-size:15px}.eyebrow{color:var(--green);font-size:12px;margin:0}.options{display:grid;gap:12px;margin-top:26px}.option{display:flex;align-items:center;gap:14px;width:100%;min-height:64px;padding:18px;text-align:left;background:#fffdf8;border:1px solid var(--line);border-radius:15px;color:var(--text);line-height:1.6}.option.selected{border:2px solid var(--green);padding:17px;background:var(--mint)}.option .mark{flex:none;width:21px;height:21px;border:1px solid #afbeb0;border-radius:50%;display:grid;place-items:center;font-size:13px;margin-left:auto}.selected .mark{background:var(--green);color:white;border-color:var(--green)}.option small{display:block;color:var(--muted);font-size:13px;margin-top:4px}.dock{position:fixed;bottom:0;left:0;width:100%;padding:12px 24px max(18px,env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid #e7e2d8}.dock-inner{max-width:502px;margin:auto}.primary{display:block;width:100%;min-height:54px;background:var(--green);color:#fff;border:0;border-radius:30px;padding:14px 24px;font-weight:600;line-height:1.5}.secondary{display:block;border:0;background:transparent;color:var(--green);margin:8px auto 0;padding:10px;font-size:13px;min-height:44px}.tiles{display:flex;gap:12px;justify-content:center;margin:30px 0}.tile{display:grid;place-items:center;width:72px;height:80px;font-size:35px;font-weight:650;border-radius:17px;background:var(--mint);color:var(--green)}.tile.locked{color:#aeb9ae;background:#eae9df}.catalog{display:flex;overflow:auto;gap:16px;scroll-snap-type:x mandatory;margin:30px -10px;padding:10px}.persona-mini{flex:0 0 110px;text-align:center;scroll-snap-align:start;font-size:12px}.persona-mini img{width:95px;height:95px;object-fit:contain}.persona-mini strong,.persona-mini span{display:block;margin-top:5px}.comparison{display:grid;grid-template-columns:1fr 1fr;gap:12px}.panel{background:#fffdf8;border:1px solid var(--line);border-radius:20px;padding:20px}.panel img{display:block;width:100px;height:100px;object-fit:contain;margin:0 auto 12px}.panel h2{font-size:16px}.panel p{font-size:13px}.big-character{display:block;width:min(260px,75%);height:auto;margin:20px auto}.center{text-align:center}.scale{height:9px;border-radius:6px;background:linear-gradient(90deg,#d1a68e,#9fbeaf);margin:30px 0 12px;position:relative}.scale b{position:absolute;top:-5px;width:19px;height:19px;border:4px solid white;background:var(--green);border-radius:50%;transform:translateX(-50%)}.ends{display:flex;justify-content:space-between;font-size:12px;gap:20px}.field{display:block;margin:25px 0 15px;font-weight:500}.field input,.field select{display:block;width:100%;margin-top:10px;padding:16px;border:1px solid #afbeb0;border-radius:12px;background:#fffdf8;min-height:54px;color:var(--text)}.tone-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.tone-grid .option{position:relative;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:10px;min-height:0;padding:12px;text-align:center}.tone-grid .option.selected{padding:11px}.tone-grid .swatch{width:100%;height:108px;flex:none;border-radius:14px;border:1px solid #0000001a;box-shadow:inset 0 -14px 22px #00000012,inset 0 10px 16px #ffffff44}.tone-grid .option.selected .swatch{border-color:#16402b55;box-shadow:0 0 0 3px #1d4b3a20,inset 0 -14px 22px #00000012,inset 0 10px 16px #ffffff44}.tone-grid .option>span:not(.swatch):not(.mark){font-size:17px;font-weight:650;line-height:1}.tone-grid .mark{position:absolute;top:18px;right:18px;margin:0;background:#fffdf8e8}.selected.tone-grid .mark,.tone-grid .option.selected .mark{background:var(--green)}.tone-grid .option:not(:has(.swatch)){grid-column:1/-1;flex-direction:row;align-items:center;justify-content:flex-start;gap:14px;min-height:64px;padding:18px;text-align:left}.tone-grid .option:not(:has(.swatch)).selected{padding:17px}.tone-grid .option:not(:has(.swatch)) .mark{position:static;margin-left:auto;background:transparent}.swatch{height:34px;width:34px;flex:none;border-radius:50%;border:1px solid #0001}.notice{padding:14px 16px;background:#e4eee5;border-radius:12px;font-size:13px;color:#365944}.photo{display:block;width:100%;max-height:350px;object-fit:contain;border-radius:20px;margin:18px auto}.spinner{width:70px;height:70px;border:5px solid #dce4d7;border-top-color:var(--green);border-radius:50%;margin:45px auto;animation:turn 1.8s linear infinite}.restart{max-width:550px;margin:0 auto 130px;padding:0 24px;font-size:12px;color:var(--muted)}.error{color:#9f342a}.axis-name{font-size:11px;text-align:center;line-height:1.5}.intro-axes{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.intro-axes .tile{width:100%;font-size:22px;height:70px}.disclaimer{font-size:12px;color:var(--muted)}@keyframes turn{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}@media(min-width:900px){.page{padding-top:45px}body{background:linear-gradient(90deg,#eceee5,var(--bg) 30%,var(--bg) 70%,#eceee5)}.preview-note{font-size:12px}}@media(max-width:360px){.page{padding-inline:18px}.tile{width:58px;height:68px}.comparison{gap:8px}.panel{padding:12px}}

.benefits{padding-left:1.4rem;line-height:1.8;margin:24px 0}.field input[type=checkbox]{width:22px;height:22px;margin:12px;vertical-align:middle}.page>a.secondary{display:inline-block;margin:8px 16px 8px 0;text-decoration:underline}.notice[role=alert]{color:#a32121}.option[aria-pressed=true]{border-color:var(--ink,#183a34)}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #407767;outline-offset:3px}

h1[tabindex="-1"]:focus{outline:none}.field:has(input[type="checkbox"]){display:flex;flex-direction:row-reverse;align-items:center;justify-content:flex-end;gap:8px;font-size:14px}.field input[type="checkbox"]{flex:none;margin:0}
.page[data-screen=processing]{text-align:center;padding-bottom:48px}.process-ring{width:148px;height:148px;margin:28px auto 8px;border-radius:50%;background:conic-gradient(var(--green) 0deg,#dce4d7 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 12px),#000 calc(100% - 11px));mask:radial-gradient(farthest-side,transparent calc(100% - 12px),#000 calc(100% - 11px))}
.page[data-screen=welcome]{padding-top:4px;padding-bottom:120px}.page[data-screen=welcome] h1{font-size:clamp(24px,5.6vw,30px);margin:6px 0 10px}.welcome-photos{display:flex;justify-content:center;align-items:flex-end;gap:10px;margin:0 auto 16px;max-width:340px}.welcome-shot{position:relative;margin:0;width:46%;max-width:152px;aspect-ratio:3/4;border-radius:22px;overflow:hidden;background:#e7e4dc;box-shadow:0 10px 24px #1d4b3a1a}.welcome-shot:first-child{transform:rotate(-7deg) translateY(10px)}.welcome-shot:last-child{transform:rotate(6deg) translateY(-6px)}.welcome-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 18%}.welcome-shot span{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);background:#fff;color:#253a30;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:600;box-shadow:0 2px 8px #00000022;white-space:nowrap}.welcome-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:12px}.welcome-list li{display:flex;align-items:center;gap:12px;padding:0;line-height:1.45;font-size:15px}.welcome-icon{flex:none;width:40px;height:40px}

/* Lovi-style loading screens */
.loader{text-align:center}.loader h1{margin-bottom:26px}.loader-pct{font-size:56px;font-weight:700;color:var(--green);letter-spacing:-.03em;line-height:1;margin:18px 0 6px;font-variant-numeric:tabular-nums}
.checklist{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:18px;text-align:left}.check-head{display:flex;justify-content:space-between;gap:12px;font-size:14px;margin-bottom:8px;color:var(--muted)}.check-row.done .check-head{color:var(--text)}.check-pct{flex:none;font-variant-numeric:tabular-nums;color:var(--green);font-weight:600}.check-bar{height:8px;border-radius:8px;background:#e3e2d8;overflow:hidden}.check-bar i{display:block;height:100%;width:0;background:var(--green);border-radius:8px}
.tip-card{text-align:left;background:#fffdf8;border:1px solid var(--line);border-radius:18px;padding:16px 18px;margin:8px 0 18px}.tip-label{margin:0 0 4px;font-size:12px;font-weight:600;color:var(--green)}.tip-body{margin:0;font-size:14px;line-height:1.75}
.load-question{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-end;justify-content:center;background:#1d2b2466;animation:fade .2s ease-out}.load-sheet{width:100%;max-width:550px;background:var(--bg);border-radius:24px 24px 0 0;padding:26px 24px max(26px,env(safe-area-inset-bottom));animation:rise .25s ease-out}.load-sheet h2{font-size:21px;margin:6px 0 4px;white-space:pre-line}.load-sheet .options{margin-top:18px}
@keyframes fade{from{opacity:0}}@keyframes rise{from{transform:translateY(40px);opacity:0}}
.progress .segment i{transition:width .6s cubic-bezier(.2,.7,.2,1)}
.page[data-screen=skin-goals] .options{padding-bottom:env(safe-area-inset-bottom)}