:root{--ink:#17151b;--muted:#706a78;--line:#e8e2eb;--purple:#7557ff;--pink:#df69a5;--soft:#f7f4f8;--shadow:0 22px 70px rgba(39,27,50,.1)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:#fff}button,input{font:inherit}.simple-head{display:flex;width:min(1320px,calc(100% - 36px));height:72px;align-items:center;justify-content:space-between;margin:auto}.brand{color:#18151d;font-size:25px;font-weight:950;text-decoration:none}.brand span{color:var(--purple)}.simple-head nav{display:flex;gap:24px}.simple-head nav a{color:#5f5964;font-size:13px;font-weight:750;text-decoration:none}.hero{display:grid;width:min(1320px,calc(100% - 36px));min-height:610px;grid-template-columns:1.05fr .95fr;align-items:center;gap:70px;margin:auto;padding:70px 0 90px}.eyebrow,.section-head>span,.info span{color:var(--purple);font-size:11px;font-weight:950;letter-spacing:.16em}.hero h1{max-width:760px;margin:18px 0;font-size:clamp(48px,6vw,84px);line-height:.98;letter-spacing:-.065em}.hero p{max-width:650px;color:var(--muted);font-size:17px;line-height:1.75}.hero-btn{display:inline-flex;align-items:center;gap:28px;margin-top:22px;padding:17px 22px;border-radius:14px;background:var(--ink);color:#fff;font-weight:850;text-decoration:none}.hero-art{position:relative;min-height:520px}.hero-art img{position:absolute;inset:20px 40px 0 80px;width:calc(100% - 120px);height:calc(100% - 20px);object-fit:cover;border-radius:34px;box-shadow:var(--shadow)}.hero-orb{position:absolute;inset:0;border-radius:50%;background:linear-gradient(140deg,#eee8ff,#fff0f7)}.hero-note{position:absolute;right:0;bottom:34px;padding:15px 18px;border-radius:16px;background:#fff;box-shadow:var(--shadow)}.hero-note b,.hero-note span{display:block}.hero-note span{margin-top:4px;color:var(--muted);font-size:11px}.designer,.library,.showcase{width:min(1320px,calc(100% - 36px));margin:auto;padding:90px 0}.section-head{max-width:820px;margin:0 auto 42px;text-align:center}.section-head h2{margin:14px 0;font-size:clamp(36px,4.5vw,58px);line-height:1.04;letter-spacing:-.045em}.section-head p{margin:0;color:var(--muted);line-height:1.75}.designer-card{max-width:980px;margin:auto;padding:26px;border:1px solid var(--line);border-radius:28px;background:#fff;box-shadow:var(--shadow)}.upload-box{position:relative;display:flex;min-height:300px;align-items:center;justify-content:center;overflow:hidden;border:1.5px dashed #cfc4da;border-radius:22px;background:linear-gradient(145deg,#fbf9fc,#f5f0f8);cursor:pointer}.upload-box input{display:none}#autoEmpty{display:flex;flex-direction:column;align-items:center;text-align:center}#autoEmpty i{display:grid;width:64px;height:64px;place-items:center;margin-bottom:14px;border-radius:20px;background:#fff;color:var(--purple);font-size:28px;font-style:normal;box-shadow:0 10px 28px rgba(50,34,65,.12)}#autoEmpty b{font-size:20px}#autoEmpty span{margin-top:4px;color:var(--purple);font-weight:750}#autoEmpty small{margin-top:12px;color:#8f8794}.upload-preview{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:12px}.upload-preview[hidden]{display:none}.upload-preview img{width:100%;height:100%;object-fit:contain;border-radius:16px}.upload-preview button{position:absolute;right:16px;bottom:16px;padding:9px 13px;border:0;border-radius:999px;background:rgba(20,17,24,.82);color:#fff;cursor:pointer}.option-block{margin-top:24px}.option-block h3{margin:0 0 13px;font-size:14px}.choice-row{display:flex;flex-wrap:wrap;gap:8px}.choice-row button{padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;color:#665f6c;cursor:pointer;font-size:12px;font-weight:800}.choice-row button.active{border-color:var(--purple);background:#f0ebff;color:var(--purple)}.color-row{display:flex;flex-wrap:wrap;gap:10px}.color-row button{display:flex;align-items:center;gap:7px;padding:7px 10px 7px 7px;border:1px solid var(--line);border-radius:999px;background:#fff;cursor:pointer}.color-row button i{display:block;width:24px;height:24px;border-radius:50%;background:var(--c)}.color-row button span{font-size:11px;font-weight:750}.color-row button.active{border-color:var(--purple);box-shadow:0 0 0 2px rgba(117,87,255,.12)}.generate-auto{display:flex;width:100%;min-height:58px;align-items:center;justify-content:center;gap:14px;margin-top:26px;border:0;border-radius:15px;background:linear-gradient(100deg,var(--purple),var(--pink));color:#fff;cursor:pointer;font-weight:900}.generate-auto:disabled{cursor:not-allowed;filter:grayscale(.6);opacity:.45}.designer-hint{text-align:center;color:var(--muted);font-size:11px}.auto-result{max-width:980px;margin:24px auto 0;padding:24px;border:1px solid var(--line);border-radius:24px}.auto-result[hidden]{display:none}.result-head span{color:var(--purple);font-size:10px;font-weight:900}.result-head h3{margin:5px 0 16px}.result-box{display:grid;min-height:360px;place-items:center;border-radius:18px;background:var(--soft);overflow:hidden}.result-box img{max-width:100%;max-height:800px;object-fit:contain}.gender-tabs{display:grid;width:min(520px,100%);grid-template-columns:repeat(3,1fr);gap:7px;margin:0 auto 28px;padding:5px;border-radius:16px;background:var(--soft)}.gender-tabs button{padding:12px;border:0;border-radius:12px;background:transparent;color:#77717d;cursor:pointer;font-weight:850}.gender-tabs button.active{background:#fff;color:var(--ink);box-shadow:0 5px 16px rgba(37,25,47,.09)}.model-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px}.model-card{position:relative;min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:15px;background:#fff}.model-card img{display:block;width:100%;aspect-ratio:1/1.08;object-fit:cover}.model-card h3{margin:0;padding:10px 9px 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.model-hover{position:absolute;inset:0 0 38px;display:flex;align-items:flex-end;padding:10px;background:linear-gradient(transparent 35%,rgba(18,14,22,.84));opacity:0;transition:.2s}.model-card:hover .model-hover{opacity:1}.model-hover a{display:flex;width:100%;min-height:38px;align-items:center;justify-content:center;border-radius:10px;background:#fff;color:var(--ink);font-size:10px;font-weight:900;text-align:center;text-decoration:none}.showcase-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.showcase-grid article{padding:12px;border:1px solid var(--line);border-radius:20px;background:#fff}.compare{--split:50%;position:relative;overflow:hidden;aspect-ratio:1/1.08;border-radius:15px;touch-action:none;cursor:ew-resize;user-select:none;-webkit-user-select:none}.compare img{pointer-events:none;-webkit-user-drag:none}.compare>.before,.after img{width:100%;height:100%;object-fit:cover}.after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--split))}.divider{position:absolute;top:0;bottom:0;left:var(--split);width:2px;transform:translateX(-1px);background:#fff}.divider i{position:absolute;left:50%;top:50%;display:grid;width:48px;height:48px;place-items:center;transform:translate(-50%,-50%);border-radius:50%;background:#fff;color:#9299a4;font-style:normal;box-shadow:0 9px 25px rgba(0,0,0,.18)}.tag{position:absolute;top:12px;padding:7px 10px;border-radius:999px;background:#4a4650;color:#fff;font-size:9px;font-weight:950;text-transform:uppercase}.tag.left{left:12px}.tag.right{right:12px;background:var(--purple)}.benefits{padding:90px max(18px,calc((100% - 1320px)/2));background:#17131d;color:#fff}.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.benefit-grid article{padding:28px;border:1px solid rgba(255,255,255,.12);border-radius:20px}.benefit-grid b{color:#aa96ff}.benefit-grid p{color:#bdb5c1;line-height:1.7}.info{display:grid;width:min(1120px,calc(100% - 36px));grid-template-columns:1fr 1fr;gap:80px;margin:auto;padding:100px 0}.info h2{font-size:42px;letter-spacing:-.04em}.info p{color:var(--muted);line-height:1.85}footer{padding:30px;text-align:center;color:var(--muted);font-size:12px;border-top:1px solid var(--line)}@media(max-width:1000px){.hero{grid-template-columns:1fr}.hero-copy{text-align:center}.hero-copy p{margin-left:auto;margin-right:auto}.hero-art{max-width:650px;width:100%;margin:auto}.model-grid{grid-template-columns:repeat(5,1fr)}}@media(max-width:650px){.simple-head{height:62px}.simple-head nav{display:none}.hero,.designer,.library,.showcase{width:calc(100% - 20px)}.hero{padding:44px 0 55px;gap:35px}.hero h1{font-size:46px}.hero p{font-size:14px}.hero-art{min-height:380px}.hero-art img{inset:10px 24px 0 44px;width:calc(100% - 68px)}.designer,.library,.showcase{padding:65px 0}.designer-card{padding:14px;border-radius:20px}.upload-box{min-height:250px}.choice-row{gap:6px}.choice-row button{padding:9px 10px;font-size:10px}.model-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.model-card h3{font-size:9px;padding:7px 5px}.model-hover{inset:0 0 28px;padding:5px}.model-hover a{min-height:31px;font-size:8px}.showcase-grid{grid-template-columns:repeat(2,1fr);gap:9px}.showcase-grid article{padding:6px;border-radius:14px}.compare{border-radius:11px}.tag{top:7px;padding:5px 7px;font-size:7px}.tag.left{left:7px}.tag.right{right:7px}.divider i{width:38px;height:38px}.benefit-grid,.info{grid-template-columns:1fr}.info{gap:15px;padding:70px 0}.info h2{font-size:34px}.section-head h2{font-size:35px}}

/* V2: original Tool67 navigation, practical preferences and progressive library */
body > .t67-header { position: relative; z-index: 100; }
main { overflow: hidden; }
.option-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.option-title h3 { margin: 0; }
.option-title small { color: var(--muted); font-size: 10px; font-weight: 700; }
.goal-row button { background: #faf8fb; }
.preference-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.preference-grid label { display: flex; flex-direction: column; gap: 8px; color: var(--ink); font-size: 12px; font-weight: 800; }
.preference-grid select { width: 100%; min-height: 46px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); outline: none; }
.preference-grid select:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(117,87,255,.1); }
.load-more { display: block; min-height: 46px; margin: 28px auto 0; padding: 0 22px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); cursor: pointer; font-size: 12px; font-weight: 850; }
.load-more:hover { border-color: var(--purple); color: var(--purple); }
.load-more[hidden] { display: none; }
.compare, .compare * { -webkit-tap-highlight-color: transparent; }
.compare { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.compare img { user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.footer { margin-top: 0; }

@media(max-width: 1000px) {
  .preference-grid { grid-template-columns: 1fr 1fr; }
}

@media(max-width: 650px) {
  .preference-grid { grid-template-columns: 1fr; }
  .option-title { align-items: flex-start; flex-direction: column; gap: 3px; }
  .hero { padding-top: 50px; }
}


/* V3: simplified advisor, animated hero and responsive controls */
.hero-art{position:relative;overflow:hidden;isolation:isolate}
.hero-scan-compare{position:absolute;inset:24px 34px 52px;border-radius:28px;overflow:hidden;background:#e9e3f0;box-shadow:0 28px 70px rgba(36,25,53,.2);user-select:none;-webkit-user-select:none}
.hero-scan-compare img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.hero-before{position:absolute;inset:0}
.hero-after{position:absolute;inset:0;clip-path:inset(0 0 0 50%);animation:hero-reveal 4.2s ease-in-out infinite}
.hero-scan-line{position:absolute;top:0;bottom:0;left:50%;width:2px;background:rgba(255,255,255,.95);box-shadow:0 0 18px rgba(126,87,255,.8);animation:hero-scan 4.2s ease-in-out infinite}
.hero-scan-line i{position:absolute;left:50%;top:50%;width:50px;height:50px;transform:translate(-50%,-50%);border:2px solid rgba(255,255,255,.95);border-radius:50%;background:rgba(118,87,255,.24);box-shadow:0 0 0 9px rgba(118,87,255,.1),0 0 32px rgba(118,87,255,.6);backdrop-filter:blur(7px)}
.hero-scan-line i:before,.hero-scan-line i:after{content:"";position:absolute;left:50%;top:50%;background:#fff;transform:translate(-50%,-50%)}
.hero-scan-line i:before{width:20px;height:2px}.hero-scan-line i:after{width:2px;height:20px}
.hero-tag{position:absolute;top:16px;padding:7px 10px;border-radius:999px;background:rgba(20,16,28,.68);color:#fff;font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(8px)}
.before-tag{left:16px}.after-tag{right:16px;background:#7657ff}
.hero-art.is-reversed .hero-after{animation-direction:reverse}.hero-art.is-reversed .hero-scan-line{animation-direction:reverse}
@keyframes hero-reveal{0%,10%{clip-path:inset(0 0 0 82%)}50%{clip-path:inset(0 0 0 18%)}90%,100%{clip-path:inset(0 0 0 82%)}}
@keyframes hero-scan{0%,10%{left:82%}50%{left:18%}90%,100%{left:82%}}
.upload-box{transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease,filter .25s ease;background-size:180% 180%}
.upload-box:hover,.upload-box.drag{transform:translateY(-3px);border-color:#8b67ff;box-shadow:0 20px 48px rgba(118,87,255,.18),0 0 0 4px rgba(223,105,165,.08);filter:saturate(1.12);animation:upload-shimmer 2.4s ease infinite}
@keyframes upload-shimmer{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
.preference-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:650px){
  .hero-scan-compare{inset:18px 18px 54px;border-radius:21px}
  .preference-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .preference-grid label span{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .preference-grid select{min-width:0;padding:0 5px;font-size:10px}
}