@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#292b28;background:#f8f7f2;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}header{height:100px;max-width:1280px;margin:auto;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #deded5;padding:0 38px}.brand{font-size:42px;letter-spacing:-3px;font-weight:800}.brand span{font-size:15px;vertical-align:top;letter-spacing:0;margin-left:5px}.header-note{font-size:12px;color:#6a6d64}main{max-width:1160px;margin:auto;padding:54px 28px 0}.intro{margin-bottom:34px;display:grid;grid-template-columns:1fr 1fr;align-items:end}.eyebrow{font-size:10px;letter-spacing:2px;grid-column:1/-1;margin:0 0 17px}.intro h1{font-family:Manrope,sans-serif;font-size:68px;line-height:1.02;letter-spacing:-4px;margin:0;font-weight:600}.intro h1 br{display:none}.intro em{font-family:Georgia,serif;font-weight:400}.intro>p:last-child{justify-self:end;font-size:14px;line-height:1.7;color:#76796f;margin:0 0 5px}.workspace{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:70px}.portrait{border-radius:22px;overflow:hidden;aspect-ratio:1;max-height:560px;background:#d8c9ed}.portrait svg{display:block;width:100%;height:100%}.portrait-caption{display:flex;align-items:center;justify-content:space-between;margin-top:19px}.portrait-caption b{font-family:Manrope,sans-serif;font-size:20px;letter-spacing:-.5px}.portrait-caption small{display:block;color:#83857b;font-size:11px;margin-top:4px}.shuffle{background:transparent;border:1px solid #d6d8cc;padding:11px 17px;border-radius:30px;font-size:12px}.preview-line{display:flex;align-items:center;gap:13px;margin-top:25px}.mini{width:43px;height:43px;border-radius:50%;overflow:hidden}.mini svg{width:100%;height:100%}.preview-line p{font-size:11px;line-height:1.6;color:#61665c}.preview-line span{color:#999c92}aside{padding-top:9px}.controls-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px;font-size:10px;letter-spacing:1.8px}.controls-title button{border:0;background:none;color:#818577;font-size:11px;letter-spacing:0;text-decoration:underline}.control{border:0;padding:0;margin:0 0 23px;min-width:0}.control legend{font-size:12px;font-weight:600;margin-bottom:11px;padding:0}.choices{display:flex;flex-wrap:wrap;gap:7px}.choice{border:1px solid #dedfd6;background:transparent;border-radius:9px;padding:9px 12px;font-size:11px;color:#74796b;transition:background .15s}.choice[aria-pressed=true]{background:#e7ebdf;border-color:#657055;color:#34432a}.swatch{width:29px;height:29px;border-radius:50%;padding:0;background:var(--color);border:3px solid #f8f7f2;outline:1px solid transparent}.swatch[aria-pressed=true]{background:var(--color);outline:1.5px solid #46513b;border-color:#f8f7f2}.hair-colors{margin-top:12px}.save{width:100%;background:#303e28;color:#fff;border:0;padding:17px 21px;border-radius:12px;text-align:left;font-size:13px;display:flex;justify-content:space-between}.save:hover{background:#46563b}.save:disabled{opacity:.6}.export-note{text-align:center;font-size:10px;color:#96998e;margin:12px 0}.friends{margin-top:56px;border-top:1px solid #deded5;padding-top:30px}.friends-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.friends h2{font-family:Manrope,sans-serif;font-size:21px;font-weight:500;letter-spacing:-.6px;margin:0}.friends-heading p{font-size:12px;color:#85887d}#gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}.friend{padding:0;border:0;background:none;text-align:left}.friend svg{width:100%;height:auto;display:block;border-radius:12px;transition:transform .2s}.friend:hover svg{transform:translateY(-4px)}.friend span{display:block;text-align:center;font-size:10px;color:#7b8073;margin-top:9px}footer{display:flex;justify-content:space-between;padding:44px 0 25px;color:#95998d;font-size:9px;letter-spacing:1px}button:focus-visible,a:focus-visible{outline:3px solid #b97745;outline-offset:4px}@media(min-width:1400px){main{padding-top:65px}}@media(max-width:800px){header{height:76px;padding:0 24px}.header-note{display:none}main{padding:35px 22px 0}.intro{display:block}.intro h1{font-size:51px;letter-spacing:-3px}.intro>p:last-child{margin-top:15px;font-size:12px}.workspace{grid-template-columns:1fr;gap:25px}.portrait{max-height:none}.preview-line{margin-top:14px}aside{padding-top:0}.controls-title{margin-bottom:20px}#gallery{grid-template-columns:repeat(3,1fr);gap:15px}.friends{margin-top:32px}.friends-heading{display:block}.friends-heading p{margin-top:7px}footer{gap:20px;font-size:8px}.control{margin-bottom:20px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.range-control{display:block;margin:14px 0;font-size:11px;color:#62685c}.range-control span{display:flex;justify-content:space-between;margin-bottom:8px}.range-control input{width:100%;accent-color:#46563b;cursor:pointer}.range-control output{font-variant-numeric:tabular-nums}.frame-color{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#62685c;margin-top:14px}.frame-color input{width:40px;height:29px;border:1px solid #d6d8cc;background:none;border-radius:5px;cursor:pointer}.pose-controls{border-top:1px solid #dedfd6;padding:16px 0;margin-bottom:18px}.pose-controls summary{cursor:pointer;font-size:12px;font-weight:600}.pose-controls summary span{font-size:10px;color:#85887d;font-weight:400;margin-left:10px}.portrait-area{align-self:start;position:sticky;top:24px}@media(max-width:800px){.portrait-area{position:static}}