:root { --ink:#1e1e1b; --muted:#716d66; --paper:#f6f1e9; --card:#fffdf8; --line:#d9d2c8; --sage:#dfe9db; --sage-ink:#35513b; --rose:#7a3453; --shadow:0 24px 70px #5d4d3718; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; }
button,input,select { font:inherit; }
button,label { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
.site-header { max-width:1120px; margin:auto; padding:22px 20px; display:flex; align-items:center; justify-content:space-between; }
.site-header p { margin:0; color:var(--muted); font-size:13px; }
.brand { color:inherit; text-decoration:none; display:flex; align-items:center; }
.brand img { display:block; width:148px; height:auto; }
main { padding:20px; }
.hero { max-width:720px; margin:54px auto 40px; text-align:center; }
.eyebrow,.step { margin:0 0 10px; text-transform:uppercase; letter-spacing:.15em; font-weight:800; font-size:11px; }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:20px; font:400 clamp(52px,12vw,88px)/.94 Georgia,serif; letter-spacing:-.055em; }
.lede { max-width:540px; margin:0 auto 24px; color:var(--muted); font-size:18px; line-height:1.55; }
.trust-list { margin:0; padding:0; display:flex; justify-content:center; flex-wrap:wrap; gap:10px 20px; color:#68645d; font-size:12px; list-style:none; }
.trust-list li::before { content:"✓"; margin-right:6px; color:var(--sage-ink); font-weight:900; }
.checker,.result { max-width:680px; margin:0 auto 40px; background:var(--card); border:1px solid #e6dfd5; border-radius:30px; padding:clamp(20px,5vw,42px); box-shadow:var(--shadow); }
.checker-heading { margin-bottom:30px; }
.checker-heading h2,.result h2 { margin:0; font:400 clamp(32px,8vw,48px)/1.02 Georgia,serif; letter-spacing:-.035em; }
.field-block { border:0; padding:0; margin:0 0 32px; min-width:0; }
.field-label { display:flex; align-items:center; gap:10px; margin-bottom:13px; font-weight:750; }
.field-label span { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; color:white; background:var(--ink); font-size:12px; }
.photo-picker { position:relative; display:block; min-height:320px; overflow:hidden; border:1.5px dashed #bcb3a6; border-radius:20px; background:linear-gradient(145deg,#eee7dc,#ddd8d0); }
.photo-picker img { width:100%; height:420px; object-fit:cover; }
.photo-empty { min-height:320px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:30px; text-align:center; }
.photo-empty b { display:grid; place-items:center; width:50px; height:50px; margin-bottom:15px; border-radius:50%; background:var(--ink); color:white; font-size:25px; font-weight:400; }
.photo-empty small { margin-top:7px; color:var(--muted); }
.photo-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:10px; }
.photo-actions label { position:relative; }
.photo-actions input { position:absolute; width:1px; height:1px; opacity:0; }
.photo-actions span,.photo-actions button { width:100%; display:block; padding:12px; border:1px solid var(--line); border-radius:999px; background:white; color:var(--ink); text-align:center; font-weight:750; cursor:pointer; }
.photo-actions input:focus-visible + span { outline:3px solid #a9c9ff; outline-offset:2px; }
.photo-actions button:focus-visible { outline:3px solid #a9c9ff; outline-offset:2px; }.native-camera-input{display:none}.camera-panel{margin-top:12px;padding:10px;border-radius:18px;background:#181816}.camera-panel video{display:block;width:100%;max-height:440px;object-fit:cover;border-radius:12px;background:#000}.camera-panel>div{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}.camera-panel button{padding:11px;border:1px solid #ffffff55;border-radius:999px;background:transparent;color:white;font-weight:750}.camera-panel button:last-child{background:white;color:var(--ink)}
.choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.choice,.style-grid label { position:relative; }
.choice input,.style-grid input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.choice span { height:100%; display:grid; grid-template-columns:26px 1fr; padding:14px; border:1px solid var(--line); border-radius:15px; background:white; font-weight:700; }
.choice b { grid-row:1/3; color:var(--rose); }
.choice small { margin-top:3px; color:var(--muted); font-weight:400; }
.choice input:checked + span,.style-grid input:checked + span { border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.choice input:focus-visible + span,.style-grid input:focus-visible + span { outline:3px solid #a9c9ff; outline-offset:2px; }
.style-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:2px; }
.style-grid label span { min-height:82px; display:flex; flex-direction:column; justify-content:flex-end; padding:12px; border:1px solid var(--line); border-radius:14px; background:white; font-weight:750; }
.style-grid label:last-child { grid-column:1/-1; }
.style-grid small { display:block; margin-top:3px; color:var(--muted); font-size:10px; font-weight:400; }
.field-error { margin:7px 0 0; min-height:1em; color:#a11b32; font-size:12px; }
.check-button { width:100%; display:flex; justify-content:space-between; align-items:center; border:0; border-radius:999px; padding:16px 20px; background:var(--ink); color:white; font-weight:800; box-shadow:0 12px 30px #1e1e1b25; }
.check-button b { font-size:22px; }
.check-button:disabled { cursor:not-allowed; opacity:.55; }
.privacy-note { max-width:500px; margin:12px auto 0; text-align:center; color:var(--muted); font-size:11px; line-height:1.5; }
.loading { padding:70px 20px; text-align:center; }
.loading h2 { margin:20px 0 6px; font:400 32px Georgia,serif; }
.loading p { color:var(--muted); }
.loader { display:block; width:52px; height:52px; margin:auto; border:3px solid #ddd5c9; border-top-color:var(--rose); border-radius:50%; animation:spin .9s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.error-panel { padding:22px; border-radius:16px; background:#fff0f1; color:#762237; }
.error-panel p { margin:6px 0 14px; }
.error-panel button,.reason-panel button { border:0; border-radius:999px; padding:10px 15px; background:var(--ink); color:white; font-weight:700; }
.result { background:#fdfbf6; }
.result header > p:last-child { margin-top:12px; color:var(--muted); line-height:1.5; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.section-heading h3 { margin:0; font-size:13px; text-transform:uppercase; letter-spacing:.1em; }
.section-heading span { color:var(--muted); font-size:11px; }
.score-section { margin:26px 0 22px; padding:20px; border:1px solid #d8cfc2; border-radius:20px; background:linear-gradient(145deg,#fff,#f4ece1); }
.score-layout { display:grid; grid-template-columns:150px 1fr; gap:24px; align-items:stretch; }
.overall-score { display:flex; flex-direction:column; justify-content:center; padding:18px; border-radius:16px; background:var(--ink); color:white; }.overall-score span{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.overall-score strong{font:400 58px/1 Georgia,serif;margin:8px 0 3px}.overall-score small{color:#d8d2c8}
.score-grid { display:grid; gap:13px; align-content:center; }
.score { display:grid; gap:6px; }.score>div{display:flex;justify-content:space-between;gap:12px;font-size:12px}.score span{color:var(--muted)}.score progress{width:100%;height:9px;border:0;border-radius:999px;overflow:hidden;background:#e2dbd2}.score progress::-webkit-progress-bar{background:#e2dbd2}.score progress::-webkit-progress-value{background:var(--rose);border-radius:999px}.score progress::-moz-progress-bar{background:var(--rose);border-radius:999px}
.verdicts { margin-bottom:28px; }.verdicts h3{font-size:13px;text-transform:uppercase;letter-spacing:.1em}.strengths { display:grid; gap:8px; margin:0 0 12px; }.strengths span{padding:10px 12px;border-radius:12px;background:var(--sage);color:var(--sage-ink);font-size:12px;font-weight:750}
.main-gap { display:grid;grid-template-columns:34px 1fr;gap:12px;padding:15px;border:1px solid #e1c7b8;border-radius:15px;background:#fff3eb}.main-gap>span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#9b4b35;color:white;font-weight:900}.main-gap small{display:block;color:#9b4b35;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.main-gap b{display:block;margin-top:3px}.main-gap p{margin:4px 0 0;color:var(--muted);font-size:12px;line-height:1.45}
.tips h3 { font-size:13px; text-transform:uppercase; letter-spacing:.1em; }
.tip { display:grid; grid-template-columns:34px 1fr; gap:13px; padding:18px 0; border-top:1px solid var(--line); }
.tip > span { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--ink); color:white; font-size:12px; font-weight:800; }
.tip b { font-size:17px; }
.tip p { margin:5px 0 0; color:var(--muted); line-height:1.55; }
.color-analysis { margin:24px 0; padding:18px; border-radius:18px; background:#eee5d7; }
.color-analysis > p { margin-bottom:16px; color:var(--muted); line-height:1.5; }.color-analysis>small{display:block;margin-top:14px;color:var(--muted);line-height:1.45}
.palette { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:16px; font-size:12px; }.palette>b{width:100%;}.palette span{display:flex;align-items:center;gap:6px;padding:6px 9px;border-radius:999px;background:#fff9}
.small-swatch,.large-swatch{display:block;border:1px solid #0002;box-shadow:inset 0 0 0 1px #fff5;overflow:hidden}.small-swatch{width:18px;height:18px;border-radius:50%}.large-swatch{width:42px;height:42px;border-radius:11px}
.recommended-colors { display:grid; gap:8px; }.recommended-colors article{display:grid;grid-template-columns:42px 1fr;gap:11px;padding:11px;border-radius:13px;background:#fff9}.recommended-colors small{display:block;margin-bottom:2px;color:var(--rose);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.recommended-colors b{display:block}.recommended-colors p{margin:3px 0 0;color:var(--muted);font-size:12px;line-height:1.4}
.feedback-panel { margin-top:28px; padding-top:20px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:15px; }
.feedback-panel p { margin:4px 0 0; color:var(--muted); font-size:12px; }
.feedback-panel button { border:1px solid var(--line); border-radius:999px; padding:9px 13px; background:white; }
.reason-panel { margin-top:15px; padding:15px; border-radius:14px; background:#eee9e2; }
.reason-panel label { display:block; margin-bottom:8px; font-weight:700; }.reason-panel select{max-width:100%;padding:9px;border:1px solid var(--line);border-radius:8px;background:white}.reason-panel button{margin-left:6px}
.ai-disclaimer { margin:22px 0; color:var(--muted); font-size:11px; line-height:1.5; }.ai-disclaimer button{border:0;padding:0;background:transparent;color:inherit;text-decoration:underline}
.start-over { width:100%; padding:14px; border:1px solid var(--ink); border-radius:999px; background:transparent; font-weight:800; }
footer { max-width:680px; margin:0 auto; padding:30px 20px 60px; display:flex; justify-content:space-between; gap:20px; color:var(--muted); font-size:12px; }footer .brand img{width:124px}footer p{margin:8px 0 0;text-align:right}
[hidden] { display:none !important; }
@media (max-width:560px) { main{padding:12px}.site-header{padding:18px}.hero{margin:36px auto 30px}.checker,.result{border-radius:24px}.choice-grid{grid-template-columns:1fr}.photo-picker,.photo-empty{min-height:280px}.photo-picker img{height:360px}.score-layout{grid-template-columns:1fr}.overall-score{min-height:150px}.feedback-panel{align-items:flex-start;flex-direction:column}.reason-panel button{margin:9px 0 0}.trust-list{gap:7px 13px}footer{flex-direction:column}footer p{text-align:left} }
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.loader{animation:none}}