@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap');
:root{--ink:#4d3d39;--pink:#bd626b;--paper:#faf7f2}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:14px}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button{transition:background .2s,transform .2s}button:hover{transform:translateY(-2px)}button:focus-visible,a:focus-visible{outline:3px solid #a95b6d;outline-offset:4px}header{height:90px;border-bottom:1px solid #e7dfd7;display:flex;align-items:center;justify-content:space-between;padding:0 5.5%}.brand{font-family:'Playfair Display',serif;font-size:43px;letter-spacing:-3px;text-decoration:none;color:var(--ink)}.brand span{font:28px serif;color:var(--pink);padding-left:5px}.tagline{font-size:10px;letter-spacing:2.5px;color:#8e7b72}.text-btn{border:0;background:transparent;font-size:12px}#count{display:inline-grid;place-items:center;background:#eee5dc;width:23px;height:23px;border-radius:50%;margin-left:7px}main{max-width:1260px;margin:auto;padding:38px 50px 0}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.eyebrow{font-size:9px;letter-spacing:2px;font-weight:600;margin:0 0 10px;color:#a17b6f}h1{font:46px 'Playfair Display',serif;letter-spacing:-1.5px;margin:0 0 12px}h1 em{color:var(--pink);font-weight:500}.intro p:not(.eyebrow){color:#8d7b72;margin:0;font-size:13px}.note{font:italic 19px 'Playfair Display',serif;line-height:1.5;transform:rotate(5deg);color:#a68172;padding-right:25px}.note span{font-size:38px;display:block;line-height:1;text-align:center}.studio{display:grid;grid-template-columns:1.15fr 1fr;gap:25px;align-items:stretch}.mirror-area{background:#eee4d8;border:1px solid #e7d9ca;border-radius:110px 110px 16px 16px;overflow:hidden;position:relative;padding:29px 30px 0}.mirror-top{display:flex;align-items:center;justify-content:center;font-size:9px;letter-spacing:1.5px;gap:8px;margin:0 0 18px}.live-dot{width:5px;height:5px;background:#9aab8c;border-radius:50%}.mirror-label{color:#9b8d7e;margin-left:25px}.portrait-wrap{position:relative;max-width:440px;margin:auto;touch-action:none;cursor:crosshair}.arch{border-radius:220px 220px 12px 12px;border:9px solid #e0c8af;box-shadow:0 0 0 1px #c8ad93,inset 0 0 20px #b49479;overflow:hidden;background:#eedecf}svg{display:block;width:100%;height:auto;transition:filter .2s}.bubble{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);background:#fffaf0eb;padding:11px 15px;border-radius:30px;white-space:nowrap;font-size:11px;color:#82665a;box-shadow:0 3px 14px #7d594019;pointer-events:none}.spark{position:absolute;z-index:2;font:48px serif;color:#fff9ed;pointer-events:none}.s1{top:19%;left:-14px}.s2{top:40%;right:-14px;font-size:35px}.mirror-bottom{display:flex;justify-content:space-between;align-items:center;height:52px;font-size:10px;color:#8c7868}.mirror-bottom button{font-size:10px}#brush{display:none;position:absolute;pointer-events:none;color:#fff;z-index:4;font-size:35px;transform:translate(-50%,-50%);text-shadow:0 1px 8px #c07671}.kit{padding:30px 33px 18px;background:#fffdf9;border:1px solid #e7dfd7;border-radius:16px}.kit-heading{display:flex;justify-content:space-between;align-items:center}.kit-heading>span{font-size:36px;color:#d3aaa0}h2{font:26px 'Playfair Display',serif;letter-spacing:-.4px;margin:0}h3{font-size:13px;font-weight:500;margin:0}.tabs{display:flex;gap:4px;padding:20px 0 23px;border-bottom:1px solid #eee5dc;margin-bottom:22px}.tabs button{flex:1;border:0;border-radius:10px;background:transparent;padding:10px 1px 8px;font-size:10px;color:#968179}.tabs .icon{display:block;font-size:23px;margin-bottom:7px;line-height:28px}.tabs button.active{background:#f4e3df;color:#a7505c}.product-head,.shade-caption,.look-head{display:flex;align-items:center;justify-content:space-between}.product-head h3{font-family:'Playfair Display',serif;font-size:21px}.product-head>span,.look-head>span{font-size:8px;letter-spacing:1.4px;color:#aa958a}#productDesc{color:#9a877e;font-size:11px;line-height:1.6;margin:8px 0 19px}.swatches{display:flex;justify-content:space-between;gap:10px}.swatch{width:44px;height:44px;border-radius:50%;border:4px solid #fffdf9;outline:1px solid transparent;box-shadow:inset 0 2px 4px #0001}.swatch.selected{outline-color:#a9786c}.shade-caption{margin:14px 0 24px;font-size:11px}#shadeFinish{font-size:9px;color:#a58c80}.intensity{display:grid;grid-template-columns:1fr auto;font-size:11px;gap:12px;margin-bottom:22px}.intensity output{color:#a58c80}input[type=range]{grid-column:1/-1;width:100%;accent-color:#be7277;height:4px;cursor:pointer}.apply{display:flex;justify-content:space-between;background:#b96570;color:#fff;border:0;border-radius:8px;padding:15px 18px;width:100%;font-size:12px}.apply:hover{background:#a85460}.tip{font-size:10px;text-align:center;color:#ad998e;margin:10px 0 20px}.divider{border-top:1px solid #eee5dc;margin-bottom:20px}.presets{display:flex;gap:8px;margin-top:15px}.presets button{flex:1;border:1px solid #e9dfd5;border-radius:8px;background:#fffdf9;padding:12px 3px;font-size:9px}.dots{display:block;width:15px;height:15px;border-radius:50%;margin:0 auto 9px;box-shadow:-9px 0 #c5816c,9px 0 #e4bca0}.everyday{background:#be746d}.sunset{background:#df8c78;box-shadow:-9px 0 #b75a4d,9px 0 #e8b181}.ube{background:#997492;box-shadow:-9px 0 #b87091,9px 0 #c3a5c8}.actions{display:flex;gap:10px;margin-top:23px}.actions button{border:1px solid #dfccc1;border-radius:7px;background:transparent;flex:1;padding:12px;font-size:11px}.actions button:last-child{background:#f5eee7}.saved-note{text-align:center;color:#a38c7f;font-size:10px;margin:15px 0 0}footer{display:flex;justify-content:space-between;align-items:center;padding:27px 0;color:#9c8b7e;font-size:10px}footer>span:first-child{font:22px 'Playfair Display',serif;color:#6e554b}footer em{font:italic 11px 'Playfair Display',serif;padding-left:8px}footer>span:last-child{font-size:8px;letter-spacing:1.2px}dialog{border:1px solid #dfccc1;border-radius:18px;padding:30px;background:var(--paper);width:min(650px,90vw);color:var(--ink)}dialog::backdrop{background:#34232577;backdrop-filter:blur(5px)}.dialog-title{display:flex;justify-content:space-between;align-items:center}.dialog-title button{border:0;background:none;font-size:20px}dialog p{font-size:12px;color:#987a6e}#savedLooks{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;max-height:60vh;overflow:auto}#savedLooks button{padding:0;border:1px solid #dfccc1;background:#fff8ef;border-radius:10px;overflow:hidden;font-size:11px}#savedLooks button span{display:block;padding:10px}.before #blushLayer,.before #shadowLayer,.before #linerLayer,.before #highlightLayer,.before #gloss{opacity:0!important}.before #lips{fill:#a76660!important}@media(min-width:1500px){main{padding-top:48px}}@media(max-width:800px){header{height:72px;padding:0 22px}.tagline{display:none}main{padding:28px 20px 0}.intro{margin-bottom:25px}.note{display:none}h1{font-size:36px}.intro p:not(.eyebrow){font-size:11px}.studio{grid-template-columns:1fr;gap:18px}.mirror-area{padding:23px 24px 0;max-width:520px;width:100%;margin:auto}.portrait-wrap{max-width:350px}.kit{padding:25px}footer{gap:15px}footer>span:last-child{display:none}.swatch{width:45px;height:45px}.tabs button{font-size:11px}#savedLooks{grid-template-columns:repeat(2,1fr)}}

.skin-control{padding:3px 4px 22px;max-width:440px;margin:auto}.skin-heading,.skin-labels{display:flex;justify-content:space-between;align-items:center}.skin-heading{font-size:12px;margin-bottom:13px}.skin-heading output{font-size:10px;color:#745f50}.skin-labels{font-size:10px;margin-top:9px;color:#745f50}input#skinTone{display:block;width:100%;height:12px;margin:0;appearance:none;-webkit-appearance:none;border-radius:9px;background:linear-gradient(to right,#edc5a7,#d49b74,#704932);accent-color:#825c49}#skinTone::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:22px;height:22px;background:#fffaf1;border:2px solid #825c49;border-radius:50%;box-shadow:0 1px 4px #51332333}#skinTone::-moz-range-thumb{width:18px;height:18px;background:#fffaf1;border:2px solid #825c49;border-radius:50%;box-shadow:0 1px 4px #51332333}#skinTone:focus-visible{outline:3px solid #a95b6d;outline-offset:6px}

/* Portrait phones: a stationary face preview with a scrollable makeup bag. */
.mobile-skin{display:none}
@media (max-width:600px) and (orientation:portrait){
  html{height:100%;overflow:hidden}
  body{height:100vh;height:100svh;display:flex;flex-direction:column;overflow:hidden;padding-top:env(safe-area-inset-top);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  header{height:56px;min-height:56px;padding:0 14px;gap:8px}
  .brand{font-size:30px;letter-spacing:-1.6px;white-space:nowrap}
  .brand span{font-size:22px}
  #galleryBtn{min-height:44px;padding:8px 0 8px 8px;font-size:12px;white-space:nowrap}
  #count{margin-left:3px}
  main{flex:1;min-height:0;width:100%;padding:0;display:flex;flex-direction:column}
  .intro,footer{display:none}
  .studio{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(180px,38%) minmax(0,1fr);gap:0;flex:1;min-height:0}
  .mirror-area{border:0;border-radius:0;padding:8px 12px 0;margin:0;max-width:none;min-height:0;display:flex;flex-direction:column;align-items:center}
  .mirror-top{font-size:9px;letter-spacing:1px;margin:0 0 6px;min-height:16px;flex-shrink:0}
  .mirror-label{margin-left:10px;color:#756151}
  .portrait-wrap{flex:1;min-height:0;height:100%;width:auto;aspect-ratio:310/325;max-width:100%;margin:0 auto}
  .arch{height:100%;width:100%;border-width:4px;border-radius:100px 100px 0 0}
  #portrait{height:100%;width:100%}
  .bubble{bottom:7px;font-size:10px;line-height:1.3;white-space:normal;text-align:center;width:max-content;max-width:min(260px,80vw);padding:6px 10px}
  .spark{font-size:28px}.s2{font-size:24px}
  .mirror-bottom{position:absolute;right:8px;bottom:8px;height:44px;z-index:3}
  .mirror-bottom>span{display:none}
  #before{min-height:44px;max-width:76px;background:#fffaf0ed;border:1px solid #d7c1b1;border-radius:10px;padding:6px;font-size:11px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
  .kit{min-height:0;min-width:0;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;border-radius:18px 18px 0 0;border-width:1px 0 0;padding:0 14px calc(20px + env(safe-area-inset-bottom));scroll-padding-top:72px}
  .kit-heading{display:none}
  .tabs{position:sticky;top:0;z-index:5;background:#fffdf9;margin:0 -3px 12px;padding:7px 0;gap:4px;box-shadow:0 3px 6px #4d3d3908}
  .tabs button{min-height:48px;min-width:44px;font-size:12px;padding:4px 2px}
  .tabs .icon{font-size:18px;line-height:20px;margin-bottom:2px}
  .product-head h3{font-size:20px}
  .product-head>span{font-size:10px}
  #productDesc{font-size:12px;margin:5px 0 10px}
  .swatches{gap:4px;justify-content:space-between;padding:2px}
  .swatch{flex:0 0 44px;width:44px;height:44px}
  .shade-caption{margin:10px 0 12px;font-size:12px}
  #shadeFinish{font-size:10px}
  .intensity{font-size:12px;gap:0;margin-bottom:8px}
  input#amount{height:44px;margin:0;touch-action:pan-y}
  .apply{min-height:48px;font-size:14px;padding:14px 16px}
  .tip{font-size:11px;margin:8px 0 12px}
  .mobile-skin{display:block;border-top:1px solid #eee5dc;margin-bottom:14px}
  .mobile-skin summary{min-height:48px;display:flex;align-items:center;justify-content:space-between;font-size:13px;cursor:pointer;list-style:none}
  .mobile-skin summary::-webkit-details-marker{display:none}
  .mobile-skin[open] summary span{transform:rotate(180deg)}
  .skin-control{padding:0 4px 14px;max-width:none}
  .skin-heading{margin-bottom:0;font-size:12px}
  input#skinTone{height:44px;background:linear-gradient(to right,#edc5a7,#d49b74,#704932) center/100% 12px no-repeat;touch-action:pan-y}
  .skin-labels{margin-top:0;font-size:11px}
  .divider{margin-bottom:14px}
  .look-head h3{font-size:13px}
  .look-head>span{font-size:9px}
  .presets{margin-top:10px}
  .presets button{min-height:62px;font-size:11px;padding:10px 3px}
  .actions{margin-top:15px}
  .actions button{min-height:48px;font-size:13px}
  .saved-note{font-size:12px;line-height:1.5}
  dialog{width:calc(100% - 24px);max-height:calc(100svh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:18px;overflow:auto}
  .dialog-title h2{font-size:23px}
  #closeGallery{min-width:44px;min-height:44px}
  #savedLooks{max-height:none;gap:10px}
  #savedLooks button{min-height:44px}
  button:hover{transform:none}
}
@media (max-width:360px) and (orientation:portrait){
  header{padding:0 10px}.brand{font-size:27px}.brand span{font-size:18px}
  .kit{padding-left:10px;padding-right:10px}.swatches{gap:3px}
}
@media (prefers-reduced-motion:reduce){button,svg{transition:none}}

/* Hair, brows and clothing share the same saved-look state as makeup. */
[hidden]{display:none!important}
.beauty-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin-top:18px;padding:4px;background:#f4ece4;border-radius:11px}
.beauty-nav button{min-height:44px;border:0;border-radius:8px;background:transparent;font-size:12px}
.beauty-nav button[aria-selected=true]{background:#fffdf9;box-shadow:0 2px 6px #59423212;color:#a7505c;font-weight:600}
.custom-title{font:22px 'Playfair Display',serif;margin:20px 0 8px}
.custom-description{font-size:12px;line-height:1.5;color:#8d7568;margin:0 0 16px}
.style-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.style-options button{display:flex;align-items:center;justify-content:flex-start;gap:10px;min-height:72px;border:1px solid #dfcec1;border-radius:10px;padding:9px;background:#fffaf3;text-align:left;font-size:12px}
.style-options svg{width:44px;height:54px;flex-shrink:0}
#panel-brows .style-options button{min-height:60px}
#panel-brows .style-options svg{height:35px}
#panel-tops .style-options svg{width:58px;height:45px}
.style-options button[aria-pressed=true],.custom-colors button[aria-pressed=true]{border-color:#ad606b;background:#f8e9e6;box-shadow:0 0 0 1px #ad606b}
.custom-label{font-size:13px;margin:22px 0 12px;font-weight:600}
.custom-colors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-bottom:22px}
.custom-colors button{min-height:76px;border:1px solid #e4d7ce;border-radius:9px;padding:8px 3px;background:#fffdf9;font-size:11px}
.custom-colors i{display:block;width:30px;height:30px;border-radius:50%;margin:0 auto 7px;border:1px solid #60453722}
@media (max-width:600px) and (orientation:portrait){
  .kit{scroll-padding-top:130px}
  .beauty-nav{position:sticky;top:0;z-index:7;margin:0 -4px;padding:6px 4px;border-radius:0;background:#fffdf9;border-bottom:1px solid #e9ddd1}
  .beauty-nav button{font-size:13px}
  .beauty-nav button[aria-selected=true]{background:#f4e3df;box-shadow:none}
  .tabs{top:57px;z-index:6}
  .custom-title{margin-top:16px;font-size:20px}
  .style-options{gap:8px}
  .style-options button{padding:8px;font-size:12px;min-height:66px}
  .custom-colors button{font-size:12px;min-height:80px}
}

#panel-face .style-options button{min-height:64px}#panel-face .style-options svg{width:44px;height:36px}
@media(max-width:360px) and (orientation:portrait){.beauty-nav button{font-size:12px;padding-left:2px;padding-right:2px}}