:root { --ink:#1e2927; --paper:#f6f3ed; --cream:#ece6da; --lime:#d5f260; --coral:#fd826f; --muted:#78817e; --line:#d8d4ca; --serif:"Fraunces", Georgia, serif; --sans:"DM Sans", Arial, sans-serif; --mono:"DM Mono", monospace; } *{box-sizing:border-box} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);min-height:100vh}.grain{position:fixed;inset:0;opacity:.13;pointer-events:none;z-index:2;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E")}button{font:inherit;border:0;cursor:pointer;color:inherit}button:focus-visible{outline:3px solid var(--coral);outline-offset:3px}#app{max-width:500px;min-height:100vh;margin:auto;position:relative;background:var(--paper);overflow:hidden}.screen{min-height:100vh;padding:24px 22px 34px;display:flex;flex-direction:column;animation:in .42s ease both}@keyframes in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.topline{display:flex;align-items:center;justify-content:space-between;height:28px;margin-bottom:29px}.logo{font-family:var(--serif);font-size:27px;letter-spacing:-1.5px}.step{font:12px var(--mono);color:var(--muted)}.progress{height:3px;background:#dedbd4;border-radius:10px;overflow:hidden;margin-bottom:37px}.progress i{display:block;height:100%;background:var(--ink);border-radius:inherit;transition:width .3s}.eyebrow{font:11px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:0 0 13px}.question{font:500 clamp(30px,8vw,41px)/1.04 var(--serif);letter-spacing:-1.8px;margin:0;max-width:410px}.sub{font-size:15px;line-height:1.45;color:var(--muted);margin:13px 0 24px}.choices{display:grid;gap:10px;margin-top:4px}.choice{padding:17px 17px;border:1.5px solid var(--line);background:rgba(255,255,255,.24);border-radius:15px;text-align:left;display:flex;align-items:center;justify-content:space-between;font-size:16px;font-weight:500;transition:.2s}.choice:hover{border-color:var(--ink)}.choice.selected{border-color:var(--ink);background:var(--lime);box-shadow:3px 3px 0 var(--ink)}.choice .tick{border:1px solid #aeb3ad;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:13px}.choice.selected .tick{background:var(--ink);border-color:var(--ink);color:white}.footer{margin-top:auto;padding-top:28px}.next{width:100%;padding:17px;background:var(--ink);color:white;border-radius:14px;font-size:16px;font-weight:600;transition:.2s}.next:disabled{opacity:.32;cursor:not-allowed}.next:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 5px 0 #87908b}.back{margin-top:18px;width:100%;background:transparent;color:var(--muted);font-size:14px}.look-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:22px}.look{aspect-ratio:.69;border-radius:12px;background-size:cover;background-position:center;position:relative;overflow:hidden;border:2px solid transparent;cursor:pointer;transition:.18s}.look::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 58%,rgba(0,0,0,.55))}.look span{position:absolute;z-index:1;bottom:8px;left:8px;color:white;font-size:11px;font-weight:600;text-shadow:0 1px 3px #000}.look b{display:none;position:absolute;z-index:2;right:7px;top:7px;width:23px;height:23px;border-radius:50%;background:var(--lime);text-align:center;line-height:23px;font-size:14px}.look.selected{border-color:var(--ink);box-shadow:2px 3px 0 var(--ink);transform:translate(-1px,-1px)}.look.selected b{display:block}.count{font:12px var(--mono);color:var(--muted);margin:15px 0 -8px}.occasion-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:25px}.occasion{min-height:72px;padding:13px;border:1.5px solid var(--line);background:#fbfaf7;border-radius:14px;text-align:left;font-size:15px;font-weight:500}.occasion span{display:block;font-size:23px;margin-bottom:5px}.occasion.selected{background:var(--lime);border-color:var(--ink);box-shadow:3px 3px 0 var(--ink)}.climate{margin-top:26px;padding:20px;border-radius:18px;background:#d8ebed;position:relative;overflow:hidden}.climate:after{content:"☀";font-size:80px;position:absolute;right:10px;top:-17px;opacity:.45}.climate small{display:block;font:11px var(--mono);text-transform:uppercase;color:#52686a;letter-spacing:.08em}.climate strong{font:500 27px var(--serif);display:block;margin-top:5px}.climate p{margin:4px 0 0;color:#52686a;font-size:14px}.feel{margin-top:24px;display:grid;gap:9px}.feel .choice{padding:14px 16px}.swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:29px}.swatch{aspect-ratio:1;border-radius:50%;background:var(--color);border:3px solid transparent;box-shadow:0 0 0 1px rgba(0,0,0,.13);position:relative}.swatch.selected{border-color:var(--paper);box-shadow:0 0 0 3px var(--ink)}.swatch span{position:absolute;top:calc(100% + 8px);font-size:10px;color:var(--muted);left:50%;transform:translateX(-50%);white-space:nowrap}.inventory{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;margin-top:27px}.inventory .choice{display:block;min-height:90px;padding:15px}.inventory b{display:block;font:500 25px var(--serif);letter-spacing:-1px;margin-bottom:4px}.upload-wrap{margin-top:27px}.upload-zone{border:1.5px dashed #a3aaa5;border-radius:18px;min-height:218px;padding:20px;display:grid;place-items:center;text-align:center;background:#faf9f5;position:relative}.upload-zone input{position:absolute;inset:0;opacity:0;cursor:pointer}.upload-icon{font-size:36px;margin-bottom:9px}.upload-zone h3{font:500 23px var(--serif);letter-spacing:-.8px;margin:0}.upload-zone p{font-size:14px;color:var(--muted);margin:7px 0 0}.closet-items{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:15px}.closet-piece{aspect-ratio:.78;border-radius:8px;background:var(--bg);background-size:cover;background-position:center;position:relative}.closet-piece .remove{position:absolute;right:-5px;top:-6px;width:18px;height:18px;border-radius:50%;background:var(--ink);color:#fff;font-size:12px;line-height:18px;padding:0}.add-piece{border:1.5px dashed #9ea59f;background:transparent;border-radius:8px;font-size:21px;color:var(--muted)}.intro{justify-content:space-between;background:var(--ink);color:#faf8f1;padding:27px 25px 38px}.intro .logo{color:var(--lime)}.intro-art{height:46vh;min-height:310px;margin:25px -25px 0;position:relative;overflow:hidden;background:linear-gradient(150deg,#e49c87,#a9c6b9 53%,#f1d3a4)}.intro-art i{position:absolute;border-radius:50%;border:2px solid rgba(255,255,255,.65)}.intro-art i:nth-child(1){height:245px;width:245px;top:35px;left:15px}.intro-art i:nth-child(2){height:340px;width:340px;top:-87px;right:-81px}.intro-art i:nth-child(3){height:100px;width:100px;bottom:7px;right:55px;background:var(--lime);border:0}.intro-art b{font:600 62px/.8 var(--serif);letter-spacing:-5px;position:absolute;bottom:29px;left:27px;color:var(--ink)}.intro h1{font:500 clamp(42px,11vw,55px)/.98 var(--serif);letter-spacing:-2.8px;margin:32px 0 12px;max-width:390px}.intro p{color:#cdd5cc;font-size:16px;line-height:1.45;margin:0;max-width:340px}.intro .next{margin-top:26px;background:var(--lime);color:var(--ink)}.intro small{font-size:12px;color:#9ca9a0;text-align:center;display:block;margin-top:15px}.loading{justify-content:center;text-align:center}.loader-orb{margin:0 auto 39px;width:150px;height:150px;border-radius:50%;background:conic-gradient(var(--lime) 0deg, var(--lime) 95deg, #dcd9d0 95deg);display:grid;place-items:center;animation:spinbg 3s linear infinite}.loader-orb div{width:121px;height:121px;background:var(--paper);border-radius:50%;display:grid;place-items:center;font:500 38px var(--serif)}@keyframes spinbg{to{background:conic-gradient(var(--lime) 360deg,var(--lime) 360deg,#dcd9d0 360deg)}}.loading h2{font:500 32px var(--serif);letter-spacing:-1.3px;margin:0}.loading p{color:var(--muted);font-size:15px}.loading-steps{font:13px var(--mono);color:var(--muted);margin-top:28px;line-height:2.2}.loading-steps .done{color:var(--ink)}.reveal{padding:22px 18px 35px;background:#e6e1d5}.reveal .topline{padding:0 4px;margin-bottom:17px}.share{background:transparent;font-size:20px}.result-card{background:#fcfbf7;border-radius:22px;padding:25px 20px 20px;box-shadow:0 8px 28px rgba(45,47,40,.10)}.result-card .eyebrow{font-size:10px}.result-card h1{font:500 42px/.94 var(--serif);letter-spacing:-2.5px;margin:0 0 25px}.aesthetic-chart{display:flex;height:9px;border-radius:20px;overflow:hidden;margin-bottom:12px}.aesthetic-chart i:nth-child(1){background:#c1df59;width:62%}.aesthetic-chart i:nth-child(2){background:#f48b77;width:24%}.aesthetic-chart i:nth-child(3){background:#758dcb;width:14%}.blend{display:flex;gap:8px;flex-wrap:wrap}.blend span{font:12px var(--mono);padding:6px 8px;border-radius:5px;background:#eff2e5}.score-row{display:flex;align-items:center;gap:18px;margin:29px 0 25px;border-top:1px solid var(--line);padding-top:22px}.score{font:500 53px/.75 var(--serif);letter-spacing:-3px}.score small{font:12px var(--mono);letter-spacing:0;color:var(--muted)}.score-row p{font-size:13px;line-height:1.35;color:var(--muted);margin:0}.palette-row{display:flex;gap:8px;margin-top:13px}.palette-dot{width:32px;height:32px;border-radius:50%;background:var(--p);border:1px solid rgba(0,0,0,.1)}.insight{margin:16px 0;background:var(--lime);border-radius:14px;padding:16px}.insight span{font:11px var(--mono);text-transform:uppercase;letter-spacing:.06em}.insight p{font:500 17px/1.26 var(--serif);letter-spacing:-.4px;margin:7px 0 0}.locked{margin-top:13px;border-radius:14px;background:#e6e7e0;padding:16px;position:relative;overflow:hidden}.locked:after{content:"";position:absolute;inset:0;background:rgba(235,236,230,.4);backdrop-filter:blur(4px)}.locked span,.locked p{position:relative}.locked p{font:500 17px var(--serif);margin:7px 0}.lock{position:absolute!important;z-index:1;right:15px;top:17px;font-size:20px}.pay-title{font:500 29px/1.02 var(--serif);letter-spacing:-1.5px;margin:28px 8px 15px}.pay-title em{font-style:normal;background:var(--lime)}.plan{border:1.5px solid var(--ink);background:var(--lime);border-radius:14px;padding:13px 15px;display:flex;justify-content:space-between;align-items:center;margin:10px 0}.plan small{display:block;color:#4f5b40;margin-top:2px}.plan b{font-size:15px}.plan .pill{font:10px var(--mono);background:var(--ink);color:#fff;padding:5px;border-radius:4px}.reveal .next{margin-top:15px}.fine{font-size:11px;text-align:center;color:var(--muted);margin:12px 0 0}.success{justify-content:center;text-align:center;padding:28px}.success .badge{font-size:58px;margin-bottom:15px}.success h1{font:500 42px/.97 var(--serif);letter-spacing:-2px;margin:0}.success p{color:var(--muted);line-height:1.45}.success .next{margin-top:25px}@media(max-width:370px){.question{font-size:30px}.look-grid{gap:6px}.screen{padding-left:16px;padding-right:16px}.swatches{gap:9px}} .gate-form{display:flex;flex-direction:column;gap:10px;margin-top:8px}.gate-input{width:100%;padding:17px;border:1.5px solid var(--line);border-radius:14px;background:var(--paper);color:var(--ink);font:18px var(--mono);letter-spacing:.08em;text-transform:uppercase;text-align:center}.gate-input:focus-visible{outline:3px solid var(--coral);outline-offset:3px}.gate-input::placeholder{color:var(--muted);letter-spacing:normal;text-transform:none}.gate-error{color:var(--coral);font-size:14px;margin:0;min-height:1.4em}.gate-error[hidden]{display:none}.fine-link{color:inherit;text-decoration:underline;text-underline-offset:2px}.intro small .fine-link{color:var(--muted)}.look.disabled{opacity:.35;filter:grayscale(1);cursor:not-allowed}.look.disabled:hover{transform:none}.look.disabled span{opacity:1}.insight.unlocked{background:var(--paper);border:1.5px solid var(--line);border-left:4px solid var(--lime)}.insight.unlocked b{font-family:var(--serif)} /* B2 · Q10 item type chips + reveal "colours you're missing" row */ .piece-wrap{display:flex;flex-direction:column;gap:6px} .type-chips{display:flex;flex-wrap:wrap;gap:4px} .type-chip{padding:5px 8px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--muted);font:500 10.5px/1 var(--mono);letter-spacing:.02em;cursor:pointer;text-transform:uppercase} .type-chip:hover{border-color:var(--ink);color:var(--ink)} .type-chip.selected{background:var(--ink);border-color:var(--ink);color:var(--paper)} .type-chip:focus-visible{outline:2px solid var(--coral);outline-offset:2px} .palette-missing-label{margin-top:16px} .palette-row.missing{align-items:center;flex-wrap:wrap;gap:8px} .palette-dot.ghost{border:1.5px dashed var(--line)} .palette-names{font:500 11px/1.3 var(--mono);letter-spacing:.04em;color:var(--muted);text-transform:uppercase} .insight.unlocked p{margin:6px 0 0} .insight.unlocked p b{font-family:var(--serif);font-weight:600} /* B2 fix · the "+" slot is a real file picker so it can never replace a partial upload */ .add-piece{display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative} .add-piece input[type=file]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer} /* Q2/Q3 · twelve looks. Three columns × four rows: the tile aspect is unchanged, so the grid is taller than the viewport on a phone and the screen scrolls to the footer rather than shrinking the photos to thumbnails nobody can read an aesthetic from. */ .look-grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:auto;gap:8px;margin-top:18px} .screen{overflow:visible} @media(max-width:370px){.look-grid{gap:6px}} /* Q3's skip is deliberately quiet — it is a way past, not a call to action. */ .footer .back.skip{margin-top:0;padding:15px;border:1.5px solid var(--line);border-radius:14px;color:var(--ink);font-weight:500} .footer .back.skip:hover{border-color:var(--ink)} /* Profile · "Reset my closet" armed for its second tap */ .profile-block.account .danger-row.armed span{color:var(--coral);font-weight:600} /* ============================================================================ B6 · the real closet: toasts, item collages, and the states a real closet has (empty filters, unplanned days, a look that cannot be built yet). ============================================================================ */ /* Confirmations. No window alert anywhere in the app — it blocks automation and reads like a browser error on a phone. */ .toast{position:fixed;left:50%;bottom:88px;transform:translate(-50%,14px);z-index:60;max-width:min(420px,calc(100vw - 36px));padding:12px 18px;border-radius:12px;background:var(--ink);color:#faf8f1;font:500 14px/1.35 var(--sans);text-align:center;box-shadow:0 8px 24px rgba(30,41,39,.28);opacity:0;pointer-events:none;transition:opacity .28s ease,transform .28s ease} .toast.show{opacity:1;transform:translate(-50%,0)} @media(prefers-reduced-motion:reduce){.toast{transition:none}} /* A look is a collage of the tester's OWN photos — there is no stock outfit shot left in the app, so every hero, card and plan tile draws from these four cells. */ .collage{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px;width:100%;height:100%;background:var(--cream);overflow:hidden} .collage img{width:100%;height:100%;object-fit:cover;display:block;background:var(--cream)} .collage .collage-blank{display:grid;place-items:center;background:#e2ded3;font:10px var(--mono);text-transform:uppercase;color:var(--muted)} .collage-1{grid-template-columns:1fr;grid-template-rows:1fr} .collage-2{grid-template-rows:1fr} .collage-3 img:first-child{grid-row:span 2} .collage-0{background:#e2ded3} .hero-look{position:relative;overflow:hidden;border-radius:20px;aspect-ratio:1.08;margin-top:14px;display:block;background:var(--cream)} .hero-collage{position:absolute;inset:0} .hero-look:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 42%,rgba(20,26,24,.72))} .hero-look .hero-tag,.hero-look .hero-copy,.hero-look .hero-more{position:relative;z-index:2} .hero-look .hero-tag{position:absolute;top:14px;left:14px;font:10px var(--mono);letter-spacing:.09em;background:var(--paper);color:var(--ink);padding:5px 8px;border-radius:6px} .hero-look .hero-copy{position:absolute;left:16px;right:60px;bottom:15px;color:#fff} .hero-look .hero-copy h2{font:500 30px/1.02 var(--serif);letter-spacing:-1.3px;margin:0} .hero-look .hero-copy p{margin:5px 0 0;font-size:13px;color:#e4e5df} .hero-look .hero-more{position:absolute;right:13px;bottom:13px;width:42px;height:42px;border-radius:50%;background:var(--paper);color:var(--ink);font-size:19px} .hero-look.empty{aspect-ratio:auto;padding:26px 20px;background:var(--cream);border:1.5px dashed var(--line)} .hero-look.empty:after{display:none} .hero-look.empty .hero-copy{position:static;color:var(--ink);left:auto;right:auto;bottom:auto} .hero-look.empty .hero-copy h2{font-size:27px} .hero-look.empty .hero-copy p{color:var(--muted);font-size:14px} .save-btn.saved{background:var(--lime);border-color:var(--ink)} /* Closet: the "＋" is a real file input so the add flow is the same one Q10 uses. */ .circle-btn.add{position:relative;overflow:hidden;display:grid;place-items:center} .circle-btn.add input[type=file]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer} .add-draft{margin:16px 0 4px;padding:14px;border:1.5px dashed var(--line);border-radius:16px;background:#faf9f5} .add-draft .closet-items{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px;margin-top:6px} .filter-row{display:flex;gap:8px;overflow-x:auto;padding:2px 0 4px;margin:16px 0 6px;-webkit-overflow-scrolling:touch} .filter-row button{flex:0 0 auto;padding:8px 13px;border:1.5px solid var(--line);border-radius:999px;background:transparent;font-size:13px;font-weight:500;color:var(--muted);white-space:nowrap} .filter-row button.selected{background:var(--ink);border-color:var(--ink);color:var(--paper)} .empty-note{margin:18px 2px 8px} /* Looks tab: one card per generated look. */ .look-card{margin:14px 0;border:1.5px solid var(--line);border-radius:20px;overflow:hidden;background:#fcfbf7} .look-card-collage{aspect-ratio:1.35} .look-card .builder-info{padding:16px} .look-card .builder-info h2{font:500 25px/1.05 var(--serif);letter-spacing:-1.1px;margin:0} .look-card .builder-info p{margin:5px 0 12px;font-size:13px;color:var(--muted)} .look-card .builder-items{display:flex;gap:7px;margin-bottom:12px;flex-wrap:wrap} .look-card .builder-items button{width:52px;height:52px;border-radius:10px;overflow:hidden;background:var(--cream);padding:0} .look-card .builder-items img{width:100%;height:100%;object-fit:cover;display:block} .saved-row{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px} .saved-row button{flex:0 0 132px;padding:0;border-radius:14px;overflow:hidden;border:1.5px solid var(--line);background:#fcfbf7;text-align:left} .saved-collage{aspect-ratio:1.25} .saved-row span{display:block;padding:8px 10px;font-size:12px;font-weight:600} /* Planner: real dates, and a plan card that draws the look it actually holds. */ .plan-collage{width:96px;height:96px;flex:0 0 96px;border-radius:12px} .plan-card{display:flex;gap:14px;align-items:center;justify-content:space-between} .plan-card>div{min-width:0} .week-strip button i{display:block} /* Maybe Closet: the candidate is typed with the same chips a closet piece uses. */ .candidate-chips{margin:14px 0 4px;justify-content:center} .tryon-card.empty{display:block;padding:16px} .tryon-card .look-card-collage{aspect-ratio:1.35;border-radius:14px;overflow:hidden;margin-bottom:12px} /* Profile "This month" reads real counts, so zero is a number it has to render well. */ .metrics div b{font-variant-numeric:tabular-nums} /* The closet-goals card shipped without styles and fell back to raw