:root{--ink:#303c32;--green:#334938;--cream:#f8f6ef;--muted:#74786e;--line:#dddfd3}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--cream);color:var(--ink);font:14px 'Be Vietnam Pro',sans-serif;line-height:1.7}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;font:inherit}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #b87954;outline-offset:4px}header{max-width:1320px;margin:auto;padding:24px 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:20px}.logo{font:36px 'Playfair Display',serif;letter-spacing:4px;display:flex;align-items:center;gap:12px}.logo span{font:9px 'Be Vietnam Pro';letter-spacing:3px;border-left:1px solid #aaa;padding-left:12px}nav{display:flex;gap:32px;font-size:14px}.small{background:transparent;border:1px solid #a4ad9e;border-radius:4px;padding:10px 18px;font-size:14px}main{overflow:hidden}.hero{max-width:1320px;margin:auto;padding:55px 5% 65px;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}.eyebrow{font-size:14px;letter-spacing:2px;font-weight:600;color:#6b7766}h1,h2{font-family:'Playfair Display',serif;font-weight:400;line-height:1.23}h1{font-size:clamp(44px,5.2vw,76px);letter-spacing:-2px;margin:24px 0}em{font-weight:400;color:#718063}p{color:var(--muted)}.hero-copy>p{max-width:395px;font-size:16px;margin:0 0 28px}.primary{background:var(--green);color:white;border:0;border-radius:4px;padding:17px 24px;font-size:14px;display:inline-flex;gap:30px;align-items:center}.primary:hover{background:#52664c}.micro{font-size:14px;color:#84887c;margin-top:13px}.micro i{padding:0 10px}.hero-foot{display:flex;align-items:center;gap:14px;font-size:14px;color:#7b8275;margin-top:40px}.star{font-size:42px;color:#9ba387}.hero-art{height:530px;position:relative;background:#d5d4bb;border-radius:130px 4px 4px 4px}.hero-art>img{width:100%;height:100%;object-fit:cover;border-radius:inherit;filter:brightness(.83) saturate(.65)}.art-label{position:absolute;top:40px;left:35px;color:#fff;font:12px 'Be Vietnam Pro';letter-spacing:3px}.art-label em{font:23px 'Playfair Display';letter-spacing:0;color:white}.floating-palette{position:absolute;bottom:28px;left:-30px;background:#fffcf4;padding:20px 24px;box-shadow:0 12px 30px #313c3220;transform:rotate(-4deg);width:270px}.floating-palette>span{font-size:14px;letter-spacing:1.5px}.floating-palette>div{display:flex;margin:12px 0}.floating-palette i{width:20%;height:50px}.floating-palette small{font-size:14px;color:#777}.vertical{position:absolute;right:-28px;top:60px;writing-mode:vertical-rl;font-size:14px;letter-spacing:2px}.ribbon{background:#e9ecdf;display:flex;justify-content:center;gap:48px;padding:21px;font-size:14px;letter-spacing:1px}.ribbon b{color:#879177}.section{max-width:1320px;margin:auto;padding:80px 5%}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:35px}h2{font-size:37px;margin:13px 0}.section-heading>p{font-size:14px;max-width:340px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}.steps article{border-top:1px solid #bfc5b5;padding-top:20px}.steps article>span{font:25px 'Playfair Display';color:#939d83}h3{font-size:17px;font-weight:500}.steps p{font-size:14px}.seasons{padding-top:35px}.season-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.season-card{padding:0;text-align:left;border:0;background:transparent;color:var(--ink)}.season-card:hover .season-picture{transform:translateY(-5px)}.season-picture{height:240px;position:relative;overflow:hidden;transition:.2s;border-radius:80px 80px 3px 3px}.season-picture svg{width:100%;height:100%}.swatches{display:flex;gap:6px;margin:15px 0}.swatches i{display:block;flex:1;height:23px;border:1px solid #00000009}.season-card h3{font-family:'Playfair Display';font-size:24px;margin:0}.season-card h3 span{float:right;font:18px 'Be Vietnam Pro'}.season-card p{font-size:14px;margin:5px 0}.guide{display:grid;grid-template-columns:1fr 1.15fr;gap:70px;background:#eeeee3;max-width:none;padding-left:max(5%,calc((100vw - 1188px)/2));padding-right:max(5%,calc((100vw - 1188px)/2))}.guide>div>p{font-size:14px;max-width:350px;margin-bottom:25px}.guide-cards{display:grid;grid-template-columns:1fr 1fr;gap:22px}.guide-cards article p{font-size:14px}.cosmetic,.fabric{height:170px;background:#e8d7ca;display:flex;justify-content:center;align-items:center;gap:20px;overflow:hidden}.cosmetic span{width:25px;height:70px;background:#9a5547;border-bottom:30px solid #b9a082;transform:rotate(-12deg);border-radius:7px 7px 0 0;box-shadow:10px 12px 10px #6b483230}.cosmetic span:nth-child(2){background:#be7773;transform:rotate(10deg)}.cosmetic span:nth-child(3){background:#b9474c;transform:rotate(22deg)}.fabric{gap:0;background:#d0d1c4}.fabric i{height:210px;width:70px;background:#a5af98;transform:rotate(22deg);box-shadow:inset 10px 0 20px #0002}.fabric i:nth-child(2){background:#eee6d6}.fabric i:nth-child(3){background:#70654b}.note{text-align:center;padding:75px 20px}.note>span{font-size:34px;color:#8c977f}.note p{max-width:560px;margin:20px auto;font-size:14px}.text-button{border:0;background:none;text-decoration:underline;font-size:14px;color:var(--green)}footer{border-top:1px solid var(--line);padding:28px 5%;display:flex;align-items:center;justify-content:space-between;gap:20px}footer p,footer small{font-size:14px}.quiz{max-width:850px;min-height:70vh}.quiz-top{display:flex;justify-content:space-between;align-items:center}.progress{height:4px;background:#e1e4d8;margin:20px 0 35px}.progress div{height:100%;background:#718063;transition:width .3s}.quiz h2{font-size:33px}.options{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:25px 0}.option{background:#fffcf7;border:1px solid #d9ddcf;border-radius:7px;padding:20px;text-align:left;color:var(--ink)}.option.selected{border:2px solid #52684d;background:#edf0e4;padding:19px}.option small{display:block;color:var(--muted);font-size:14px}.option .swatches{margin-top:0}.quiz-actions{display:flex;justify-content:space-between;align-items:center}.primary:disabled{opacity:.4;cursor:not-allowed}.result>p{max-width:700px}.result-hero{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}.result .season-picture{height:330px}.palette-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin:25px 0}.color-chip{border:1px solid #ddd;padding:0;background:white;text-align:left}.color-chip i{height:65px;display:block}.color-chip span{display:block;font-size:14px;padding:7px}.result-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:35px 0}.result-tabs button{padding:10px 20px;border:1px solid #bdc5b4;background:transparent;border-radius:30px}.result-tabs .active{background:var(--green);color:white}.recommendations{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.recommendations article{padding:24px;background:#eeeee3}.recommendations p{font-size:14px}.recommendations a{font-size:14px;text-decoration:underline}dialog{border:0;border-radius:8px;padding:35px;max-width:700px;width:90%;max-height:85vh;color:var(--ink);background:var(--cream)}dialog::backdrop{background:#26332799;backdrop-filter:blur(4px)}.close{position:absolute;right:15px;top:10px;border:0;background:transparent;font-size:27px}.source p{font-size:14px}.source a{text-decoration:underline}button:hover{filter:brightness(.97)}[hidden]{display:none!important}@media(max-width:760px){header{padding:18px 6%}.logo{font-size:28px}.logo span{font-size:14px}nav{display:none}.small{font-size:14px;padding:9px}.hero{grid-template-columns:1fr;padding:35px 6% 45px;gap:30px}.hero h1{font-size:51px}.hero-foot{display:none}.hero-art{height:380px;margin-left:15px}.floating-palette{width:235px;left:-15px}.ribbon{gap:14px;flex-wrap:wrap;font-size:14px}.section{padding:50px 6%}.section-heading{display:block}.section-heading>p{max-width:100%}h2{font-size:30px}.steps{grid-template-columns:1fr;gap:20px}.season-grid{grid-template-columns:1fr 1fr;gap:25px 15px}.season-picture{height:200px}.season-card h3{font-size:23px}.guide{grid-template-columns:1fr;gap:30px}.guide-cards{gap:15px}.cosmetic{gap:12px}.note{padding:45px 6%}footer{flex-wrap:wrap}footer small{width:100%}.options{grid-template-columns:1fr}.quiz h2{font-size:27px}.result-hero{grid-template-columns:1fr;gap:20px}.palette-grid{grid-template-columns:repeat(3,1fr)}.recommendations{grid-template-columns:1fr}.quiz-actions{gap:10px}.primary{font-size:14px;padding:15px 20px}}@media print{header,footer,.result-tabs,.quiz-actions,button{display:none!important}.result{padding:10px}.recommendations{display:block}body{background:white}}
/* AJIN — rose petals & young leaves */
:root{--ink:#493a40;--green:#a74e70;--cream:#fff9fa;--muted:#84747a;--line:#eddae0}body{font-size:16px}header{padding-top:20px;padding-bottom:20px}.logo{font-style:italic;letter-spacing:-2px;color:#bf527c;font-size:48px;gap:15px}.logo span{font-style:normal;letter-spacing:2px;line-height:1.6;color:#846d77;border-color:#e1c3ce}.small{border-color:#d7acbd;border-radius:30px;color:#9b4163;font-weight:600;font-size:14px}.primary{background:#a94d70;border-radius:40px;font-size:16px;padding:17px 27px;gap:25px}.primary:hover{background:#8d3c5c}.hero{padding-top:45px;padding-bottom:65px;gap:55px}.hero h1{font-size:clamp(45px,5.2vw,72px)}em{color:#b4577b}.hero-copy>p{font-size:17px;line-height:1.8}.hero-cta{font-size:22px;font-weight:600;padding:21px 30px;box-shadow:0 10px 28px #b4597822}.eyebrow{color:#9a687c;letter-spacing:1.8px}.hero-art{height:540px;background:#f6e6e9;border-radius:160px 160px 12px 12px}.hero-art>img{object-fit:contain;filter:none;border-radius:inherit;background:#f6e9e3;padding:10px}.floating-palette{background:#fffdf8;border-radius:8px;bottom:10px;width:280px}.floating-palette i{border-radius:25px;height:45px;margin-right:5px}.hero-foot{color:#897378}.star{color:#a7b778}.ribbon{background:#e5eccd;color:#69734b;gap:60px}.ribbon b{color:#9ba969}.section{padding-top:65px;padding-bottom:65px}.section-heading p{max-width:320px}h2{font-size:36px}.season-picture{height:310px;border-radius:100px 100px 12px 12px;background:#f8edf0}.season-picture img{height:100%;width:100%;object-fit:cover;object-position:top}.swatches{gap:5px}.swatches i{border-radius:20px;height:24px}.season-card h3{font-family:'Playfair Display',serif;color:#8c3e5c}.season-card p{font-size:14px}.guide{display:block;background:#f8e9ee}.editorial-grid,.learn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.editorial-grid>button,.learn-grid>button{padding:0;border:0;background:none;text-align:left;color:var(--ink)}.editorial-grid img{width:100%;height:350px;object-fit:cover;object-position:top;border-radius:14px}.editorial-grid h3{font-size:16px}.learn-grid img{width:100%;height:270px;object-fit:contain;background:#f6f1e8;border-radius:14px}.learn-grid p{font-size:14px}.note{background:#edf1dc;margin:15px 5% 50px;border-radius:160px 160px 20px 20px;padding:55px 20px}.note .text-button{margin-top:18px}.note>span{color:#9ca96d}.note p{font-size:14px}.quiz{max-width:920px;min-height:80vh}.quiz h2{font-family:'Be Vietnam Pro',sans-serif;font-weight:600;font-size:32px;line-height:1.5;max-width:740px}.quiz>p{font-size:16px}.progress{background:#f2dce4}.progress div{background:#bf6b8a}.options{margin:25px 0 35px}.option{display:flex;align-items:center;gap:17px;border:1px solid #e6cdd7;padding:20px;border-radius:16px;min-height:88px;background:#fff}.option.selected{border:2px solid #b45679;padding:19px;background:#fbe9f0}.option b{font-size:17px}.sample{width:45px;height:45px;border-radius:50%;border:1px solid #0001;flex-shrink:0}.tick{margin-left:auto;color:#a24567}.option.skip{background:#edf1de;justify-content:center;min-height:60px;font-size:15px;grid-column:1/-1}.image-help{display:flex;align-items:center;gap:15px;padding:7px 15px 7px 7px;background:#fff;border:1px solid #eedce3;border-radius:12px;color:#9a526d;font-size:14px}.image-help img{height:70px;width:58px;object-fit:cover;object-position:top;border-radius:7px}.quiz-note{font-size:14px!important;color:#8b7d83;margin-top:25px;max-width:700px}.result-hero .season-picture{height:440px}.result-hero h1{font-size:54px}.result-hero p{max-width:390px}.result-badge{background:#edf1db;color:#6b764a;border-radius:20px;padding:8px 14px;font-size:14px;display:table;margin:20px 0}.result-tabs{margin:28px 0}.result-tabs button{border-color:#e2c0cd;font-size:15px}.result-tabs .active{background:#ac5073}.palette-grid{gap:13px}.color-chip{border-radius:12px;overflow:hidden;border-color:#eddae0}.color-chip i{height:100px}.color-chip span{font-size:14px;padding:10px}.recommendations{gap:24px}.recommendations article{padding:0;background:#f9edf1;border-radius:16px;overflow:hidden}.rec-image{padding:0;position:relative;width:100%;background:#f2e7df;border:0;display:block}.rec-image img{display:block;width:100%;height:340px;object-fit:cover;object-position:top}.rec-image span{position:absolute;bottom:12px;right:12px;background:#fffE;border-radius:20px;padding:5px 11px;font-size:14px}.rec-copy{padding:18px 22px}.rec-copy h3{margin:0 0 7px;font-size:17px;color:#954464}.rec-copy p{font-size:15px;margin:0;min-height:45px}.rec-copy .swatches{margin-bottom:0}.observations{margin-top:30px;padding:18px 24px;background:#f0f3e4;border-radius:14px;font-size:14px}.observations summary{cursor:pointer;font-weight:600}.observations>div{display:flex;gap:25px;flex-wrap:wrap}.result-actions{justify-content:flex-start;gap:15px;flex-wrap:wrap;margin-top:25px}.full-image{width:100%;max-height:64vh;object-fit:contain;display:block;margin:20px auto}dialog{background:#fff9fa;border-radius:18px}dialog small{display:block;color:#88757c;font-size:14px}footer{border-color:#ead2dc}footer .logo{font-size:40px}.text-button{color:#9c4567}button:focus-visible,a:focus-visible{outline-color:#94a660}
@media(max-width:760px){header{gap:10px}.logo{font-size:36px}.logo span{font-size:14px;padding-left:9px;letter-spacing:1px}.small{padding:10px 13px;font-size:14px}.hero{gap:30px;padding-top:30px}.hero h1{font-size:47px}.hero-copy>p{font-size:17px}.hero-cta{font-size:20px;padding:18px 25px}.hero-art{height:440px;margin-left:15px;border-radius:130px 130px 10px 10px}.floating-palette{width:245px;left:-15px}.ribbon{gap:20px;font-size:14px}.section{padding:45px 6%}.season-picture{height:255px}.editorial-grid{grid-template-columns:1fr;gap:25px}.editorial-grid img{height:370px;object-fit:contain;background:#f4e7e2}.learn-grid{grid-template-columns:1fr;gap:25px}.learn-grid img{height:320px}.section-heading{margin-bottom:25px}h2{font-size:30px}.quiz h2{font-size:26px}.option{min-height:75px;padding:17px}.option.selected{padding:16px}.option b{font-size:16px}.result-hero h1{font-size:43px}.result-hero .season-picture{height:390px}.result-tabs{gap:7px}.result-tabs button{font-size:14px;padding:9px 12px}.color-chip i{height:80px}.color-chip span{font-size:14px}.recommendations{grid-template-columns:1fr}.rec-image img{height:380px;object-fit:contain}.rec-copy p{min-height:0}.observations>div{gap:5px 20px}.note{border-radius:100px 100px 15px 15px}.quiz-actions .primary{font-size:14px}.quiz-top .eyebrow{font-size:14px}}
@media(max-width:380px){header .logo span{display:none}.hero h1{font-size:41px}.hero-art{height:380px}.season-picture{height:215px}}
@media print{.result .rec-image img{height:220px;object-fit:contain}.recommendations{display:grid;grid-template-columns:repeat(3,1fr)}.result-hero .season-picture{height:260px}.result-hero h1{font-size:35px}.observations,.image-help,.rec-image span{display:none}.color-chip{display:block!important}}
.hero-art>img{object-fit:cover;padding:0}.hero-art{background:#f2e9df}
/* ColorWithAjin identity, twelve palettes, and local photo draping */
.logo{display:block;line-height:0;letter-spacing:0}.logo img{width:220px;height:72px;display:block}header{gap:20px;padding-top:12px;padding-bottom:12px}header nav{gap:23px}footer .logo img{width:195px;height:65px}.face-intro{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center;background:#f2f4e6;border-radius:30px;margin:0 auto 15px;max-width:1188px;padding:45px}.face-intro p{font-size:15px}.face-intro small{display:block;font-size:14px;margin-top:15px;color:#80856a}.face-art{position:relative;padding:25px;text-align:center;max-width:380px;margin:auto;width:100%}.face-silhouette{width:145px;height:180px;border-radius:48% 48% 46% 46%;background:#eddcd8;margin:0 auto 20px;display:grid;place-items:center;border:7px solid #fff8}.face-silhouette span{font-size:48px;color:#bd7d96}.face-color-samples{display:flex;gap:12px;justify-content:center}.face-color-samples i{height:48px;width:48px;border-radius:50%}.face-art p{font-size:14px}.family-tabs{display:flex;gap:10px;margin:35px 0 0;flex-wrap:wrap}.family-tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:12px 20px;color:#826874;font-size:16px}.family-tabs .active{border-bottom-color:#b35378;color:#a84a70;font-weight:600}.subtype-tabs{margin-top:18px}.palette-title{display:flex;align-items:baseline;justify-content:space-between;gap:20px}.palette-title h2{font-size:33px}.palette-title p{font-size:14px}.look-button{background:transparent;border:0;padding:0;text-align:left;color:var(--ink);position:relative;width:100%;display:block;border-radius:18px;overflow:hidden}.look-button>span{position:absolute;bottom:12px;right:12px;left:auto;background:#fffE;border-radius:18px;padding:6px 12px;font-size:14px;color:#805a6b}.look-button .season-picture{height:520px;border-radius:150px 150px 15px 15px}.season-picture img{object-fit:cover;object-position:50% 10%}.result-hero{gap:55px}.result-hero h1{font-size:49px}.result-hero .season-picture{height:520px}.matched-look{display:grid;grid-template-columns:1fr 1fr;gap:40px;background:#f7edf1;border-radius:20px;overflow:hidden;align-items:stretch}.matched-look .look-button{border-radius:0;background:#f2eee7;min-height:400px;height:100%}.matched-look .look-button img{width:100%;height:100%;max-height:570px;object-fit:cover;display:block}.matched-look .outfit-crop img{object-position:50% 5%}.matched-look .beauty-crop img{object-fit:cover;object-position:50% 100%}.matched-copy{padding:35px 35px 30px 0}.matched-copy h3{font:27px/1.45 'Playfair Display',serif;margin:12px 0 22px;color:#895066}.product-shade{display:flex;gap:17px;align-items:center;padding:12px 0;border-top:1px solid #e7d3dd}.product-shade>i{display:block;flex-shrink:0;width:55px;height:55px;border-radius:50%;border:1px solid #0001}.product-shade>div{display:flex;flex-direction:column}.product-shade small{font-size:14px;color:#987c89}.product-shade b{font-size:16px;font-weight:500}.product-shade span{font-size:14px;color:#9b8890}.result-face{margin-top:60px;padding-top:40px;border-top:1px solid var(--line)}.result-face .section-heading{align-items:center}.result-face h2{font-size:30px}.empty-photo{text-align:center;background:#f0f3e4;border:1px dashed #bfc99a;border-radius:22px;padding:40px 25px}.empty-photo>span{font-size:35px;color:#a2b178}.empty-photo h3{font:25px 'Playfair Display',serif}.empty-photo p{font-size:14px}.face-test{max-width:1050px}.face-test h1{font-size:52px}.upload-control{display:inline-flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:#ac4f74;color:white;font-weight:600;border-radius:30px;padding:17px 28px;cursor:pointer;margin:15px 0 0}.upload-control:focus-within{outline:3px solid #94a660;outline-offset:4px}.upload-control input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}.upload-control+ p{font-size:14px;max-width:650px}.photo-tools{display:flex;gap:25px;align-items:center;flex-wrap:wrap;padding:20px;border-radius:15px;background:#f5e9ee;margin:25px 0}.photo-tools label{display:flex;flex-direction:column;font-size:14px;gap:9px}.photo-tools input{accent-color:#b45679;max-width:180px}.face-palette-select{display:flex;gap:15px;align-items:center;flex-wrap:wrap;font-size:15px;margin:25px 0}.face-palette-select select{padding:11px 16px;border:1px solid #dab6c6;background:white;border-radius:12px;color:#654353;font:inherit;max-width:100%}.face-palette-select>span{font-size:14px;color:#9a7e8a}.drape-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.drape-grid article{background:#fff;border:1px solid #ead7df;border-radius:18px;padding:12px 12px 18px;overflow:hidden}.drape-grid h3{font-size:16px;margin:13px 5px 3px}.drape-grid small{font-size:14px;color:#917b85}.color-dot{display:inline-block;width:13px;height:13px;vertical-align:middle;border-radius:50%;margin:0 6px}.face-frame{background:var(--drape);position:relative;display:block;height:390px;width:100%;border-radius:12px;overflow:hidden;padding-top:20px}.portrait-window{width:65%;height:80%;border-radius:48% 48% 47% 47%;overflow:hidden;position:relative;margin:auto;z-index:1;background:#e8dfdc}.portrait-window img{width:100%;height:100%;object-fit:cover;display:block;transform-origin:center;filter:none!important}.virtual-cloth{height:30%;width:120%;position:absolute;left:-10%;bottom:-7%;background:var(--drape);border-radius:50% 50% 0 0;z-index:2;box-shadow:0 -7px 18px #00000004}.drape-pair-heading{margin:28px 0 15px}.drape-pair-heading h3{margin-bottom:3px;color:#667541;font-size:17px}.drape-pair-heading p{font-size:14px;margin:0}.drape-pair-heading.caution h3{color:#9a6a4c}.options .face-frame{height:225px;flex-shrink:0}.options .option:has(.face-frame){flex-wrap:wrap;justify-content:center;text-align:center}.options .option:has(.face-frame)>b{width:100%}.options .portrait-window{width:60%;height:85%}.options .tick{position:absolute;right:20px;bottom:18px}.options .option{position:relative}.note .primary{margin-top:10px}
@media(max-width:900px){header nav{gap:13px;font-size:14px}.logo img{width:190px;height:64px}.face-intro{margin:0 5%;padding:30px;gap:30px}.matched-look{gap:25px}.matched-copy{padding:25px 25px 20px 0}.face-frame{height:330px}}
@media(max-width:760px){.logo img{width:170px;height:58px}header{padding:10px 5%;gap:8px}header>.small{font-size:14px;padding:10px 12px}footer .logo img{width:180px;height:62px}.face-intro{grid-template-columns:1fr;padding:30px 25px;gap:5px;border-radius:22px}.face-art{padding:20px 15px}.face-silhouette{height:130px;width:100px}.face-color-samples i{height:38px;width:38px}.result-hero h1{font-size:38px}.result-hero .season-picture{height:520px}.family-tabs{gap:5px}.family-tabs button{font-size:14px;padding:10px 12px}.palette-title{display:block}.palette-title h2{font-size:29px;margin-bottom:0}.matched-look{grid-template-columns:1fr;gap:0}.matched-look .look-button{height:460px;min-height:0}.matched-look .look-button img{object-fit:cover;object-position:center 10%}.matched-copy{padding:25px}.matched-copy h3{font-size:25px}.result-face .section-heading{display:block}.result-face .small{margin-top:10px}.drape-grid{gap:12px}.drape-grid article{padding:7px 7px 13px;border-radius:13px}.face-frame{height:240px;padding-top:13px}.portrait-window{width:78%;height:79%}.drape-grid h3{font-size:14px;margin:10px 3px 3px}.drape-pair-heading h3{font-size:17px}.photo-tools{gap:15px}.photo-tools input{max-width:125px}.face-test h1{font-size:41px}.face-palette-select{gap:10px}.face-palette-select>span{width:100%}.options .face-frame{height:280px}.options .portrait-window{width:65%}.look-button>span{font-size:14px;bottom:10px;right:10px}.season-picture{height:300px}.result-face h2{font-size:27px}}
@media(max-width:380px){.logo img{width:150px;height:52px}.face-frame{height:210px}.season-picture{height:255px}.result-hero .season-picture{height:450px}}
@media print{.family-tabs,.photo-tools,.face-palette-select,.upload-control,.result-badge,.result-actions{display:none!important}.look-button{display:block!important}.matched-look{break-inside:avoid;grid-template-columns:1fr 1fr}.face-frame{height:280px}.drape-grid{break-inside:avoid}.result-face .small{display:none!important}.result-hero .season-picture{height:320px}.matched-look .look-button{height:350px}}
.season-picture{background:#f2eee9}.season-picture img{object-fit:contain;object-position:center}.result-hero .season-picture{border-radius:120px 120px 16px 16px}.matched-look .beauty-crop{display:flex;align-items:center;min-height:300px;background:#efebe5}.matched-look .beauty-crop img{height:auto;max-height:none;object-fit:contain}.matched-look .outfit-crop img{object-fit:contain;height:100%;background:#f2eee9}.matched-look .outfit-crop{background:#f2eee9}
@media(max-width:760px){.matched-look .beauty-crop{height:auto;min-height:0;padding:25px 0}.matched-look .beauty-crop img{width:100%;height:auto}.matched-look .outfit-crop{height:470px}}
/* Softer Vietnamese typography and the combined photo/question journey. */
:root{--font-body:'Nunito Sans',sans-serif;--font-display:'Lora',Georgia,serif}body{font-family:var(--font-body);font-size:17px;line-height:1.75}h1,h2,.season-card h3,.matched-copy h3,.empty-photo h3,.outfit-copy h3,.participant-card h3{font-family:var(--font-display);font-weight:400}button,input,select{font-family:var(--font-body)}.hero h1{font-size:clamp(43px,5vw,68px);line-height:1.26;letter-spacing:-1.8px}.hero-art{height:600px;border-radius:180px 180px 12px 12px}.hero-art>img{object-fit:cover;object-position:50% 20%}.hero .floating-palette{left:-30px;bottom:20px;width:255px}.hero .floating-palette>div{margin:9px 0}.section-heading h2,.face-intro h2{font-size:34px;line-height:1.35}.intro-model{width:190px;height:225px;object-fit:cover;object-position:50% 18%;border-radius:110px 110px 15px 15px;display:block;margin:0 auto 10px}.model-caption{display:block;font-size:14px;color:#9c7b88;margin-bottom:18px}.season-picture{height:330px;border-radius:90px 90px 12px 12px}.season-picture img{object-fit:cover;object-position:center 8%}.season-card p{font-size:14px}.editorial-grid img{height:410px;object-fit:contain;background:#f3eee9;border-radius:120px 120px 14px 14px}.editorial-grid .eyebrow{display:block;margin-top:18px}.editorial-grid h3{font-family:var(--font-display);font-size:22px;margin-top:4px}.quiz{max-width:1220px;padding-top:35px}.quiz .quiz-top{margin-bottom:20px}.test-journey{display:flex;align-items:center;justify-content:center;gap:18px;margin:0 0 32px;padding:14px 20px;border-radius:50px;background:#f5ebef;font-size:14px;color:#ad929d}.test-journey .current{color:#a74e70;font-weight:700}.test-journey i{font-style:normal;color:#c3aeb7}.assessment-shell{display:grid;grid-template-columns:290px minmax(0,1fr);gap:55px;align-items:start}.participant-card{position:sticky;top:25px;background:#f1f3e6;padding:25px;border-radius:130px 130px 18px 18px;text-align:center}.participant-card>.eyebrow{display:block;font-size:14px;margin:20px 0 15px}.assessment-model{width:100%;height:280px;object-fit:cover;object-position:50% 12%;border-radius:100px 100px 13px 13px}.participant-card small{display:block;color:#99868c;font-size:14px;margin:10px 0}.participant-card h3{font-size:22px;line-height:1.5;letter-spacing:-.6px;margin:15px 0 10px}.participant-card p{font-size:14px;line-height:1.7;margin-bottom:20px;color:#8a8377}.participant-card .small{font-size:14px}.participant-portrait .face-frame{height:270px;border-radius:100px 100px 15px 15px}.participant-portrait .portrait-window{width:82%;height:85%}.photo-saved{display:block;font-size:14px;color:#7f8a58;margin:12px 0}.assessment-main{min-width:0;padding-bottom:30px}.assessment-main>.eyebrow{display:block;margin-top:8px}.quiz .assessment-main h2{font-family:var(--font-display);font-size:33px;font-weight:400;line-height:1.4;letter-spacing:-.7px;max-width:680px}.assessment-main>p{font-size:16px}.assessment-main .progress{margin:5px 0 28px}.upload-control{font-weight:600;font-size:17px}.upload-tips{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:center;background:#fbf0f4;border-radius:15px;padding:22px;margin:28px 0}.upload-tips span{font:italic 20px var(--font-display);color:#b87b93}.upload-tips p{font-size:15px;margin:0}.upload-preview{max-width:340px;margin-top:25px}.upload-preview .face-frame{height:330px}.upload-preview .portrait-window{width:65%;height:82%}.photo-tools{gap:20px;padding:16px;margin:18px 0 26px}.photo-tools input{max-width:125px}.photo-tools label{font-size:14px}.assessment-main .options{gap:13px}.assessment-main .option{padding:18px;min-height:79px}.assessment-main .option.selected{padding:17px}.assessment-main .option b{font-size:16px;font-weight:600}.assessment-main .options .face-frame{height:245px}.assessment-main .quiz-actions{gap:15px}.combined-result-photo{max-width:450px;width:100%;justify-self:center;background:#f6e9ef;padding:15px 15px 18px;border-radius:160px 160px 18px 18px;text-align:center}.combined-result-photo .face-frame{height:420px;border-radius:150px 150px 15px 15px}.combined-result-photo .portrait-window{width:73%;height:83%}.combined-result-photo>span{font-size:14px;color:#9c6e82;display:block;margin-top:13px}.result .test-journey{margin-bottom:40px}.result-hero h1{font-family:var(--font-display);font-size:47px;line-height:1.3;letter-spacing:-1.1px}.result-hero .season-picture{height:560px;border-radius:140px 140px 16px 16px}.result-hero .season-picture img{object-fit:contain}.combined-face{background:#fff;padding:30px;border:1px solid #efdee5;border-radius:22px;margin:35px 0 50px}.combined-face h2{font-size:28px;max-width:600px}.combined-face .drape-grid{grid-template-columns:1fr 1fr;max-width:850px;margin:auto}.combined-face .drape-pair-heading{max-width:850px;margin:24px auto 13px}.outfit-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:35px 0 25px}.outfit-heading h3{font:30px/1.4 var(--font-display);letter-spacing:-.7px;margin:10px 0 0}.outfit-heading>span{font-size:14px;color:#a18b96}.outfit-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.outfit-trio article{border:1px solid #eddae2;border-radius:145px 145px 18px 18px;background:#fff;overflow:hidden}.outfit-trio article>button{border:0;padding:0;width:100%;height:440px;position:relative;background:#f2ece7;display:block;overflow:hidden}.outfit-trio img{width:100%;height:100%;object-fit:contain;display:block}.outfit-trio button>span{position:absolute;bottom:12px;right:12px;background:#fffE;border-radius:30px;padding:5px 10px;font-size:14px;color:#906276}.outfit-copy{padding:23px}.outfit-copy>.eyebrow{font-size:14px;letter-spacing:1.3px}.outfit-copy h3{font-size:24px;letter-spacing:-.8px;margin:7px 0}.outfit-copy p{font-size:15px;margin:0 0 8px}.outfit-copy small{font-size:14px;color:#9c8390}.matched-copy h3{font-family:var(--font-display)}.result-tabs button{font-family:var(--font-body)}.note h2{line-height:1.4}.quiz-top .text-button{font-size:14px}
@media(max-width:1000px){.assessment-shell{grid-template-columns:240px minmax(0,1fr);gap:30px}.participant-card{padding:20px}.assessment-model{height:240px}.participant-card h3{font-size:20px}.outfit-trio article>button{height:350px}.outfit-copy{padding:17px}.outfit-copy h3{font-size:20px}.outfit-copy p{font-size:14px}}
@media(max-width:760px){body{font-size:17px}.hero h1{font-size:43px;letter-spacing:-1.4px}.hero-art{height:480px;border-radius:140px 140px 12px 12px}.hero-copy>p{font-size:16px}.hero .floating-palette{width:235px;left:-15px}.section-heading h2,.face-intro h2{font-size:29px}.quiz{padding-top:25px}.quiz .quiz-top .eyebrow{font-size:14px;letter-spacing:1.1px}.test-journey{gap:8px;font-size:14px;padding:12px 10px;margin-bottom:25px}.test-journey i{font-size:14px}.assessment-shell{grid-template-columns:1fr;gap:25px}.participant-card{position:static;border-radius:16px;padding:15px;text-align:left;display:grid;grid-template-columns:70px minmax(0,1fr);column-gap:15px;align-items:center;max-height:130px;overflow:hidden}.participant-card>.eyebrow{margin:0;font-size:14px;grid-column:2}.participant-card .assessment-model,.participant-portrait{width:70px;height:85px;grid-column:1;grid-row:1/5;border-radius:38px 38px 8px 8px}.participant-portrait .face-frame{height:85px;padding-top:5px;border-radius:38px 38px 8px 8px}.participant-portrait .portrait-window{width:80%;height:85%}.participant-card h3{font:18px/1.4 var(--font-display);margin:0;grid-column:2}.participant-card h3 br{display:none}.participant-card p{display:none}.participant-card>small{grid-column:2;font-size:14px;margin:0}.participant-card .small{grid-column:2;justify-self:start;font-size:14px;padding:5px 9px}.participant-card .photo-saved{grid-column:2;font-size:14px;margin:0}.quiz .assessment-main h2{font-size:28px;line-height:1.45}.assessment-main>p{font-size:15px}.assessment-main .options .face-frame{height:260px}.assessment-main .quiz-actions .primary{font-size:14px;padding:14px 18px}.photo-tools{gap:14px}.upload-preview{max-width:320px;margin:22px auto 0}.upload-preview .face-frame{height:310px}.result-hero h1{font-size:37px;letter-spacing:-1px}.result-hero .season-picture{height:490px;border-radius:120px 120px 14px 14px}.combined-result-photo{max-width:340px;border-radius:120px 120px 16px 16px}.combined-result-photo .face-frame{height:350px}.combined-face{padding:22px 12px;margin:30px 0;border-radius:18px}.combined-face h2{font-size:24px}.combined-face .drape-grid{gap:10px}.combined-face .face-frame{height:225px}.outfit-heading{display:block;margin-top:25px}.outfit-heading h3{font-size:27px;margin-bottom:10px}.outfit-trio{grid-template-columns:1fr;gap:25px}.outfit-trio article{border-radius:140px 140px 16px 16px}.outfit-trio article>button{height:530px}.outfit-copy{padding:23px}.outfit-copy h3{font-size:26px}.outfit-copy p{font-size:16px}.editorial-grid img{height:470px}.editorial-grid h3{font-size:24px}.season-picture{height:300px;border-radius:75px 75px 12px 12px}.intro-model{width:160px;height:200px}}
@media(max-width:380px){.hero h1{font-size:38px}.hero-art{height:420px}.test-journey{font-size:14px;gap:6px}.quiz .assessment-main h2{font-size:25px}.outfit-trio article>button{height:450px}.combined-face .face-frame{height:190px}.season-picture{height:250px}}
@media print{.participant-card,.test-journey{display:none!important}.outfit-trio{grid-template-columns:repeat(3,1fr)}.outfit-trio article>button{display:block!important;height:300px}.outfit-copy{padding:10px}.outfit-copy h3{font-size:18px}.outfit-copy p{font-size:14px}.combined-face{break-inside:avoid}.combined-result-photo .face-frame{height:280px}}
/* Clothing matched to Ajin's cotton/linen and cozy winter references. */
.weather-switch{display:inline-flex;gap:8px;padding:6px;border-radius:40px;background:#f3e6ec;border:1px solid #eddae2}.weather-switch button{border:0;background:none;border-radius:30px;padding:12px 24px;font-size:16px;color:#9e6b80;min-height:46px}.weather-switch button.active{background:#ac5073;color:#fff;box-shadow:0 5px 15px #b4547620}.weather-note{font-size:14px;color:#967f88;margin:13px 0 25px}.weather-outfits article{border-radius:75px 75px 18px 18px}.weather-outfits article>button{height:460px;background:#f4f0eb}.weather-outfits img{object-fit:contain}.weather-outfits .outfit-copy h3{font-size:23px;line-height:1.4}.weather-outfits .outfit-copy p{line-height:1.75;font-size:15px}.accessory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:25px}.accessory-grid article{background:#fff;border:1px solid #eddae2;border-radius:80px 80px 16px 16px;overflow:hidden}.accessory-grid article>button{border:0;padding:0;width:100%;height:245px;position:relative;display:block;background:#f6f3ed}.accessory-grid img{width:100%;height:100%;object-fit:contain;display:block}.accessory-grid button>span{position:absolute;bottom:10px;right:10px;border-radius:25px;padding:5px 10px;background:#fffE;color:#987185;font-size:14px}.accessory-grid article>div{padding:20px}.accessory-grid h3{font:25px var(--font-display);color:#92506a;margin:0 0 10px}.accessory-grid p{font-size:14px;margin:0;line-height:1.7}.accessory-detail{background:#f5f1ea;border-radius:14px;max-height:58vh}.result-hero .season-picture img{object-fit:contain}.outfit-heading h3 em{font-family:var(--font-display)}
@media(max-width:1000px){.accessory-grid{grid-template-columns:repeat(2,1fr)}.accessory-grid article>button{height:290px}.weather-outfits article>button{height:390px}.weather-outfits .outfit-copy h3{font-size:20px}}
@media(max-width:760px){.weather-switch{display:flex;width:max-content;max-width:100%;margin-top:10px}.weather-switch button{padding:11px 19px;font-size:15px}.weather-note{font-size:14px;line-height:1.8}.weather-outfits article>button{height:530px}.weather-outfits .outfit-copy h3{font-size:26px}.weather-outfits .outfit-copy p{font-size:16px}.weather-outfits article{border-radius:80px 80px 16px 16px}.accessory-grid{gap:14px}.accessory-grid article{border-radius:60px 60px 12px 12px}.accessory-grid article>button{height:190px}.accessory-grid article>div{padding:16px}.accessory-grid h3{font-size:22px}.accessory-grid p{font-size:14px}.outfit-heading h3{line-height:1.4}}
@media(max-width:380px){.accessory-grid article>button{height:160px}.accessory-grid article>div{padding:12px}.accessory-grid h3{font-size:20px}.weather-outfits article>button{height:470px}.weather-switch button{font-size:14px;padding:10px 16px}}
@media print{.weather-switch{display:none}.weather-outfits article>button{height:330px}.accessory-grid{grid-template-columns:repeat(4,1fr)}.accessory-grid article>button{display:block!important;height:160px}.accessory-grid h3{font-size:18px}.accessory-grid article>div{padding:10px}}
/* Keep clothing-only photography proportional; do not compress garments. */
.hero-art>img{object-fit:contain;object-position:center;background:#f4f0eb}.assessment-model,.intro-model{object-fit:contain;object-position:center;background:#f4f0eb}.weather-outfits img{object-fit:contain;object-position:center}.weather-outfits article>button{height:500px}.weather-outfits .outfit-copy h3{line-height:1.45}.accessory-grid img{object-fit:contain}
@media(max-width:1000px){.weather-outfits article>button{height:450px}}
@media(max-width:760px){.weather-outfits article>button{height:560px}}
@media(max-width:380px){.weather-outfits article>button{height:500px}}
.capsule-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:3px;width:100%;height:100%;background:#f4f0ea;overflow:hidden}.capsule-board img{width:100%;height:100%;min-height:0;min-width:0;object-fit:contain!important;object-position:center!important;display:block}.capsule-board.full-image{display:grid;height:min(64vh,680px);max-height:none;aspect-ratio:3/4;margin:20px auto}.season-picture .capsule-board{border-radius:inherit}.hero-art>img{object-fit:contain;background:#f4f0eb}.weather-outfits article>button{background:#f4f0eb}
.linen-style{display:grid;grid-template-columns:310px minmax(0,1fr);gap:35px;align-items:center;margin:35px 0 15px;background:#f0f3e6;border-radius:20px;overflow:hidden}.linen-style>button{position:relative;display:block;border:0;padding:0;height:380px;background:#f4f0eb;width:100%}.linen-style img{display:block;width:100%;height:100%;object-fit:contain}.linen-style>button>span{position:absolute;right:12px;bottom:12px;background:#fffE;border-radius:25px;padding:5px 12px;font-size:14px;color:#926c7f}.linen-style>div{padding:30px 35px 30px 0}.linen-style h3{font:30px/1.4 var(--font-display);color:#8f506a;margin:12px 0}.linen-style p{font-size:15px}.linen-style small{font-size:14px;color:#94828a}.linen-style .swatches{max-width:250px}@media(max-width:760px){.linen-style{grid-template-columns:1fr;gap:0}.linen-style>button{height:430px}.linen-style>div{padding:25px}.linen-style h3{font-size:27px}.linen-style p{font-size:16px}}@media print{.linen-style{grid-template-columns:240px 1fr;break-inside:avoid}.linen-style>button{display:block!important;height:300px}}

/* Ajin portrait and full-length outfit presentation. */
.hero-art>img{object-fit:cover;object-position:center 28%;padding:0;background:#f6e9e3}
.weather-outfits article>button{height:auto;aspect-ratio:1/2.2}
.weather-outfits img{width:100%;height:100%;object-fit:contain}
.editorial-grid img{height:auto;aspect-ratio:1/1.95;object-fit:contain;background:#f4f0eb}
.capsule-board{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
.season-picture:has(.capsule-board){height:auto;aspect-ratio:3/4.4}
.capsule-board.full-image{aspect-ratio:3/4.4;height:min(74vh,880px)}
.season-reference{display:grid;grid-template-columns:1fr 1.3fr;gap:40px;align-items:center;margin-top:48px;padding:30px;border:1px solid var(--line);border-radius:22px;background:#fff5f5}
.season-reference h3{font-family:var(--font-display);font-size:30px;line-height:1.4}
.season-reference p{font-size:15px}.season-reference button{border:0;background:transparent;padding:0;color:var(--ink)}
.season-reference img{display:block;width:100%;height:auto;border-radius:12px}.season-reference button span{display:block;margin-top:10px;font-size:14px}
.season-reference-full{display:block;width:100%;height:auto}
@media(max-width:760px){.season-reference{grid-template-columns:1fr;gap:18px;padding:20px}.season-reference h3{font-size:26px}.weather-outfits article>button{height:auto;aspect-ratio:1/2.2}.hero-art>img{object-position:center 24%}}

/* Comfortable reading sizes across desktop and mobile. */
body{font-size:17px}small{font-size:14px;line-height:1.65}p{line-height:1.8}.eyebrow{letter-spacing:1.3px}.floating-palette>span{font-size:14px;letter-spacing:.8px}.floating-palette small{font-size:14px}.floating-palette{width:290px}.hero .floating-palette{width:290px}header nav{gap:16px}header nav a{font-size:14px}.test-journey{flex-wrap:wrap}.participant-card{max-height:none}.color-chip span{overflow-wrap:anywhere}.option small{line-height:1.6}
@media(max-width:1000px) and (min-width:761px){header{flex-wrap:wrap}header nav{order:3;justify-content:center;width:100%}}
@media(max-width:760px){.hero .floating-palette{width:270px}.participant-card{max-height:none}.participant-card .small{padding:7px 10px}.test-journey{border-radius:18px}.weather-switch{flex-wrap:wrap}header>.small{font-size:14px}.quiz-actions{flex-wrap:wrap}.outfit-copy>.eyebrow{font-size:14px}}