:root{--ink:#173b33;--cream:#f3efe5;--paper:#faf8f2;--coral:#e46e50;--sage:#c8d2bd;--line:rgba(23,59,51,.16);--serif:"Noto Serif TC",serif;--sans:"DM Sans",system-ui,sans-serif;--shadow:0 22px 60px rgba(36,48,40,.12)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);min-height:100vh}.grain{position:fixed;inset:0;pointer-events:none;opacity:.28;z-index:10;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='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E")}.topbar{height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 max(5vw,28px);border-bottom:1px solid var(--line);position:relative;z-index:3}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);font-weight:600;letter-spacing:.18em}.brand-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:50% 50% 44% 56%;background:var(--ink);color:white;font-family:var(--serif);letter-spacing:0}.topbar nav{display:flex;gap:32px}.nav-link{border:0;background:none;color:#66756f;cursor:pointer;font:500 14px var(--sans);padding:30px 0;position:relative}.nav-link.active{color:var(--ink)}.nav-link.active:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--coral)}.nav-link span{background:var(--coral);color:white;border-radius:10px;padding:1px 6px;font-size:10px}.icon-button{border:1px solid var(--line);background:transparent;color:var(--ink);width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:18px}.hero{min-height:540px;padding:94px max(7vw,40px) 70px;position:relative;overflow:hidden;background:var(--cream);border-bottom:1px solid var(--line)}.eyebrow{font-size:11px;letter-spacing:.22em;font-weight:600}.eyebrow>span{display:inline-block;width:30px;height:1px;background:var(--coral);vertical-align:middle;margin-right:12px}.hero h1{font:700 clamp(54px,7vw,102px)/1.04 var(--serif);margin:24px 0 30px;letter-spacing:-.05em}.hero h1 em{color:var(--coral);font-style:normal}.hero>p{font-size:17px;line-height:1.85;color:#5e6d67;max-width:500px}.hero-meta{display:flex;gap:50px;margin-top:50px}.hero-meta div{display:flex;flex-direction:column}.hero-meta strong{font:600 25px var(--serif)}.hero-meta span{font-size:11px;color:#738079;margin-top:5px;letter-spacing:.08em}.hero-art{position:absolute;right:3vw;top:45px;width:45vw;height:470px}.sun{position:absolute;width:340px;height:340px;border-radius:50%;background:#dfd5bd;right:13%;top:24px}.hanger{position:absolute;right:30%;top:20%;font:200 220px/1 var(--sans);transform:rotate(-8deg);color:var(--ink);z-index:2}.fabric{position:absolute;border-radius:48% 52% 14% 12%;box-shadow:var(--shadow)}.fabric-a{width:205px;height:285px;background:var(--coral);right:23%;bottom:-35px;transform:rotate(8deg)}.fabric-b{width:170px;height:250px;background:var(--ink);right:4%;bottom:14px;transform:rotate(-10deg)}.workspace{padding:90px max(7vw,40px) 130px}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:36px}.section-heading>div,.results-title>div{display:flex;align-items:center;gap:18px}.section-heading h2,.results-title h2{font:600 30px var(--serif);margin:0}.section-heading p{margin:0;color:#7b857f;font-size:13px}.step{color:var(--coral);font-weight:600;font-size:12px;letter-spacing:.1em}.wardrobe-layout{display:flex;gap:18px}.upload-card{width:190px;min-width:190px;height:250px;border:1px dashed #90a19a;background:transparent;border-radius:5px;color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;cursor:pointer;transition:.25s}.upload-card:hover{border-color:var(--coral);background:#fff;transform:translateY(-3px)}.upload-icon{font-size:30px;font-weight:300}.upload-card strong{font:600 15px var(--serif)}.upload-card small{color:#8a9690}.clothes-grid{display:grid;grid-auto-flow:column;grid-auto-columns:190px;gap:18px;overflow-x:auto;padding-bottom:10px;flex:1}.clothing-card{height:250px;background:#ece8de;border-radius:5px;position:relative;overflow:hidden;box-shadow:0 0 0 1px rgba(23,59,51,.05);transition:.25s}.clothing-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.clothing-card img{width:100%;height:100%;object-fit:cover}.card-label{position:absolute;left:10px;right:10px;bottom:10px;padding:10px 11px;background:rgba(250,248,242,.92);backdrop-filter:blur(8px);display:flex;justify-content:space-between;align-items:center;font:600 12px var(--serif)}.card-label small{font:500 9px var(--sans);color:#718079}.delete-item{position:absolute;right:9px;top:9px;border:0;background:rgba(250,248,242,.9);width:28px;height:28px;border-radius:50%;cursor:pointer;opacity:0;transition:.2s}.clothing-card:hover .delete-item{opacity:1}.filter-row{display:flex;gap:8px;margin-top:24px}.filter-chip{border:1px solid var(--line);border-radius:20px;background:transparent;padding:8px 15px;color:#62716b;cursor:pointer;font:500 12px var(--sans)}.filter-chip.active{background:var(--ink);color:white;border-color:var(--ink)}.generator-heading{margin-top:100px}.generator{display:grid;grid-template-columns:1.15fr .8fr .55fr;align-items:end;gap:50px;padding:36px 42px;background:var(--ink);color:white;border-radius:5px;box-shadow:var(--shadow)}fieldset{border:0;padding:0;margin:0}legend{font:600 14px var(--serif);margin-bottom:20px}.choice-row{display:flex;flex-wrap:wrap;gap:8px}.choice-row input{position:absolute;opacity:0}.choice-row span{display:block;border:1px solid rgba(255,255,255,.22);border-radius:22px;padding:10px 14px;font-size:12px;cursor:pointer;transition:.2s}.choice-row input:checked+span{background:var(--cream);color:var(--ink);border-color:var(--cream)}.temperature-control{display:grid;grid-template-columns:1fr auto;gap:9px 14px;align-items:center}.temperature-control input{accent-color:var(--coral)}.temperature-control output{font:600 20px var(--serif)}.temperature-control span{grid-column:1/-1;font-size:11px;color:#adc0b7}.generate-button{border:0;background:var(--coral);color:white;min-height:58px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font:600 14px var(--serif);transition:.25s}.generate-button:hover{background:#f07a5a;transform:translateY(-2px)}.generate-button b{font:300 24px var(--sans)}.results{margin-top:90px}.results-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.results-title button{border:0;background:transparent;color:var(--ink);cursor:pointer}.looks-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.look-card{background:var(--cream);padding:18px;position:relative;animation:rise .55s both}.look-card:nth-child(2){animation-delay:.1s}.look-card:nth-child(3){animation-delay:.2s}@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}.look-visual{height:360px;display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:1fr 1fr;gap:8px}.look-visual img{width:100%;height:100%;object-fit:cover;background:#e6e1d6}.look-visual img:first-child{grid-row:1/-1}.look-info{padding:19px 4px 4px}.look-info>span{font-size:10px;letter-spacing:.18em;color:var(--coral)}.look-info h3{font:600 20px var(--serif);margin:7px 0}.look-info p{font-size:12px;color:#66736d;line-height:1.65;margin:0 45px 0 0}.save-look{position:absolute;right:20px;bottom:20px;border:1px solid var(--line);background:var(--paper);width:38px;height:38px;border-radius:50%;cursor:pointer;color:var(--ink);font-size:17px}.save-look.saved{background:var(--coral);color:white;border-color:var(--coral)}.saved-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.empty-state{grid-column:1/-1;border:1px dashed var(--line);padding:80px;text-align:center;color:#77847e}.empty-state strong{display:block;font:600 22px var(--serif);color:var(--ink);margin-bottom:10px}.hidden{display:none!important}dialog{border:0;padding:0;max-width:720px;width:calc(100% - 30px);border-radius:6px;background:var(--paper);color:var(--ink);box-shadow:0 35px 100px rgba(14,38,31,.25)}dialog::backdrop{background:rgba(19,42,35,.66);backdrop-filter:blur(5px)}#itemForm{display:grid;grid-template-columns:1fr 1.1fr;position:relative}.preview-wrap{background:var(--cream);min-height:470px}.preview-wrap img{width:100%;height:100%;object-fit:cover}.dialog-content{padding:55px 46px}.dialog-content h2{font:600 26px var(--serif);margin:13px 0 30px}.dialog-content label{display:block;font-size:11px;font-weight:600;margin:18px 0}.dialog-content input,.dialog-content select{display:block;width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;padding:10px 2px;font:14px var(--sans);color:var(--ink);outline:0}.dialog-content input:focus,.dialog-content select:focus{border-color:var(--coral)}.save-item{width:100%;margin-top:18px;border:0;background:var(--ink);color:white;padding:16px;cursor:pointer;font:600 14px var(--serif)}.dialog-close{position:absolute;right:16px;top:13px;border:0;background:transparent;font-size:28px;color:var(--ink);cursor:pointer;z-index:2}.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);background:var(--ink);color:white;padding:12px 19px;font-size:12px;opacity:0;pointer-events:none;transition:.3s;z-index:20}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:900px){.hero{padding-top:65px}.hero-art{opacity:.28;right:-18%;width:70vw}.hero>p{position:relative}.generator{grid-template-columns:1fr;gap:30px}.looks-grid,.saved-grid{grid-template-columns:1fr 1fr}.section-heading p{display:none}}@media(max-width:620px){.topbar{height:68px}.topbar nav{gap:14px}.nav-link{padding:23px 0;font-size:12px}.icon-button{display:none}.hero{min-height:500px;padding:58px 24px}.hero h1{font-size:52px}.hero-meta{gap:26px}.workspace{padding:70px 20px 100px}.section-heading h2,.results-title h2{font-size:24px}.wardrobe-layout{display:block}.upload-card{width:100%;height:120px;margin-bottom:16px}.clothes-grid{grid-auto-columns:155px}.clothing-card{height:210px}.generator{padding:30px 24px}.looks-grid,.saved-grid{grid-template-columns:1fr}.look-visual{height:390px}.filter-row{overflow-x:auto}.filter-chip{white-space:nowrap}#itemForm{grid-template-columns:1fr}.preview-wrap{min-height:240px;height:240px}.dialog-content{padding:32px 25px}.results-title .step{display:none}}