#root{min-height:100vh}:root{color:#241631;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--ink:#241631;--muted:#67566f;--paper:#fffaf2;--card:#fffc;--border:#48265b24;--pink:#ff5fa2;--orange:#ff9f1c;--mint:#59d4b8;--blue:#45b7ff;background:#fff7ed;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 0 0,#ff5fa242,#0000 34rem),radial-gradient(circle at 88% 8%,#45b7ff3d,#0000 30rem),linear-gradient(135deg,#fff7ed 0%,#fff0fb 45%,#ecfbff 100%);min-width:320px;min-height:100vh;margin:0}button,select{font:inherit}.app-shell{width:min(1180px,100% - 32px);margin:0 auto;padding:32px 0 56px}.hero{border:1px solid var(--border);background:linear-gradient(135deg,#ffffffe0,#ffffff7a),repeating-linear-gradient(135deg,#ff5fa217 0 18px,#ff9f1c17 18px 36px,#59d4b817 36px 54px);border-radius:40px;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);align-items:center;gap:32px;min-height:520px;padding:42px;display:grid;position:relative;overflow:hidden;box-shadow:0 28px 90px #3f245429}.hero:before,.hero:after{content:"";filter:blur(2px);opacity:.8;border-radius:999px;position:absolute}.hero:before{background:#ffe066;width:190px;height:190px;top:-70px;right:36%}.hero:after{background:#9bf6ff;width:250px;height:250px;bottom:-100px;left:-90px}.hero-copy,.hero-art,.controls-panel,.swatch-section,.brand-strip{z-index:1;position:relative}.eyebrow{color:#8b2bb3;letter-spacing:.14em;text-transform:uppercase;margin:0 0 12px;font-size:.78rem;font-weight:900}h1,h2,h3,p{margin-top:0}h1{letter-spacing:-.08em;max-width:720px;margin-bottom:18px;font-size:clamp(3rem,8vw,6.8rem);line-height:.9}.hero-description{max-width:650px;color:var(--muted);font-size:clamp(1.05rem,2vw,1.35rem);line-height:1.55}.hero-actions{flex-wrap:wrap;gap:10px;margin-top:28px;display:flex}.hero-actions span,.brand-list span,.meta-row span,.size-pill{border:1px solid var(--border);color:#382045;background:#ffffffc2;border-radius:999px;justify-content:center;align-items:center;font-weight:800;display:inline-flex}.hero-actions span{padding:10px 14px;box-shadow:0 10px 24px #502c6614}.hero-art{place-items:center;min-height:420px;display:grid}.hero-photo-frame{background:#fff;border:8px solid #ffffffc7;border-radius:34px;width:min(100%,420px);margin:0;position:relative;overflow:hidden;transform:rotate(2deg);box-shadow:0 30px 64px #1f182b38}.hero-photo-frame:after{content:"";pointer-events:none;background:linear-gradient(130deg,#ffffff47,#0000 36%),radial-gradient(circle at 74% 20%,#ff5fa229,#0000 30%);position:absolute;inset:0}.hero-photo-frame img{object-fit:cover;object-position:50% 54%;width:100%;height:clamp(330px,48vw,520px);display:block}.hero-photo-frame figcaption{z-index:1;color:#382045;letter-spacing:.08em;text-transform:uppercase;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffffd6;border-radius:999px;padding:8px 12px;font-size:.78rem;font-weight:900;position:absolute;bottom:16px;left:16px}.hero-bottle{--bottle-color:#7d9c92;--cap-color:#dceae5;filter:drop-shadow(0 30px 36px #1f182b33);width:min(74%,360px);height:390px;position:absolute;top:48%;left:50%;transform:translate(-50%,-50%)rotate(7deg)}.bottle-cap{background:var(--cap-color);border:6px solid #2b1b35;border-bottom:none;border-radius:26px 26px 14px 14px;width:120px;height:54px;margin:0 auto -6px}.bottle-neck{background:linear-gradient(90deg, #fff6, transparent), var(--bottle-color);border:5px solid #2b1b35;border-radius:22px 22px 10px 10px;width:86px;height:52px;margin:0 auto -12px}.bottle-body{background:linear-gradient(115deg, #ffffff61 0 19%, transparent 19% 54%, #0000001f 54% 100%), var(--bottle-color);border:7px solid #2b1b35;border-radius:58px 58px 70px 70px;place-items:end center;width:100%;height:300px;padding-bottom:40px;display:grid}.bottle-body span{background:#fffc;border-radius:999px;padding:10px 18px;font-weight:1000}.hero-card{border:1px solid var(--border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffffc2;border-radius:24px;width:170px;padding:18px;position:absolute;box-shadow:0 18px 38px #3f245421}.hero-card span{color:var(--muted);font-size:.82rem;font-weight:800;display:block}.hero-card strong{margin-top:6px;font-size:1.3rem;display:block}.hero-card-one{top:10%;left:2%;transform:rotate(-7deg)}.hero-card-two{bottom:14%;right:0;transform:rotate(8deg)}.controls-panel{border:1px solid var(--border);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#ffffffe6;border-radius:28px;grid-template-columns:repeat(2,minmax(190px,1fr)) auto;align-items:end;gap:18px;width:min(980px,100% - 28px);margin:-36px auto 34px;padding:20px;display:grid;box-shadow:0 22px 54px #3f245421}.control-group{gap:8px;display:grid}label{color:#4f3460;font-size:.9rem;font-weight:900}select{width:100%;min-height:52px;color:var(--ink);background:#fffaf2;border:2px solid #8b2bb32e;border-radius:18px;padding:0 46px 0 16px;font-weight:800}select:focus-visible{border-color:#45b7ff;outline:4px solid #45b7ff5c}.results-summary{color:#fff;background:linear-gradient(135deg,#ff5fa2,#ff9f1c);border-radius:22px;justify-items:center;min-width:132px;padding:10px 14px;display:grid;box-shadow:0 14px 28px #ff5fa242}.results-summary strong{font-size:2rem;line-height:1}.results-summary span{font-size:.86rem;font-weight:800}.swatch-section,.brand-strip{border:1px solid var(--border);background:#ffffff9e;border-radius:34px;padding:32px}.section-heading{gap:4px;max-width:660px;margin-bottom:24px;display:grid}h2{letter-spacing:-.05em;font-size:clamp(2rem,4vw,3.3rem);line-height:1}.section-heading p:not(.eyebrow){color:var(--muted);line-height:1.55}.swatch-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;display:grid}.swatch-card{border:1px solid var(--border);background:#ffffffdb;border-radius:30px;transition:transform .18s,box-shadow .18s;overflow:hidden;box-shadow:0 18px 34px #3f24541a}.swatch-card:hover{transform:translateY(-6px)rotate(-.5deg);box-shadow:0 26px 44px #3f245426}.swatch-preview{--swatch:#7d9c92;--accent:#dceae5;background:radial-gradient(circle at 22% 20%, #ffffffdb, transparent 18%), radial-gradient(circle at 82% 12%, var(--accent), transparent 24%), linear-gradient(135deg, var(--swatch), color-mix(in srgb, var(--swatch), #000 18%));min-height:190px;position:relative;overflow:hidden}.swatch-preview:before,.swatch-preview:after{content:"";border-radius:999px;position:absolute}.swatch-preview:before{background:#ffffff52;width:130px;height:130px;bottom:-34px;right:-34px}.swatch-preview:after{border:14px solid #ffffff47;width:84px;height:84px;bottom:22px;left:22px}.shine{background:linear-gradient(120deg,#0000 0 36%,#ffffff5c 36% 48%,#0000 48% 100%);position:absolute;inset:0}.size-pill{color:var(--ink);padding:8px 12px;position:absolute;top:16px;right:16px}.swatch-content{gap:10px;padding:18px;display:grid}.brand-name{color:#8b2bb3;text-transform:uppercase;letter-spacing:.08em;margin:0 0 2px;font-size:.85rem;font-weight:900}h3{margin-bottom:0;font-size:1.45rem;line-height:1.05}.product-name,.personality{color:var(--muted);line-height:1.45}.personality{margin-bottom:0}.meta-row{flex-wrap:wrap;gap:8px;margin-top:4px;display:flex}.meta-row span{padding:7px 10px;font-size:.78rem}.empty-state{text-align:center;background:#ffffffa3;border:2px dashed #8b2bb342;border-radius:28px;padding:46px}.brand-strip{grid-template-columns:.75fr 1.25fr;align-items:center;gap:24px;margin-top:28px;display:grid}.brand-list{flex-wrap:wrap;gap:10px;display:flex}.brand-list span{padding:11px 14px}@media (width<=850px){.app-shell{width:min(100% - 20px,680px);padding-top:10px}.hero{border-radius:30px;grid-template-columns:1fr;min-height:auto;padding:28px}.hero-art{min-height:340px}.hero-bottle{width:260px;height:320px}.bottle-body{height:240px}.controls-panel,.brand-strip{grid-template-columns:1fr}.controls-panel{width:100%;margin-top:18px}.results-summary{justify-items:start}.swatch-section,.brand-strip{border-radius:28px;padding:22px}}@media (width<=520px){h1{font-size:3.15rem}.hero-card{width:140px;padding:14px}.hero-card-two{right:-4px}.swatch-grid{grid-template-columns:1fr}}
