/* Beauty Playground — cinematic editorial direction */
:root{--paper:#f5eee6;--ink:#35242f;--pink:#dcc0ba;--lime:#e8d8ca;--line:#d8c5ba;--muted:#79636b;--serif:'Cormorant Garamond',Georgia,serif}
em{font-family:var(--serif);letter-spacing:-.045em}html{scroll-padding-top:24px}body{background:var(--paper)}
.club-nav{background:#21171e;color:#f5e7dc;border-bottom:1px solid #ffffff17;padding:22px 6%;min-height:84px}.brand{font-size:17px;letter-spacing:.14em}.brand small{font-size:8px;letter-spacing:.22em;color:#c4a7ae}.ig-button{border-color:#b898a25e;font-size:12px;min-height:44px}.back-home{font-size:12px;color:#d3bdc0}
.cinema-intro{position:relative;isolation:isolate;display:block;min-height:650px;height:min(760px,calc(100svh - 84px));padding:58px 8% 70px;background:#21171e;color:#fff3e8;overflow:hidden}.cinema-frame{position:absolute;inset:0;z-index:-1;overflow:hidden}.cinema-frame>img{position:absolute;right:0;top:0;width:62%;height:100%;object-fit:cover;object-position:center 29%;animation:cinema-arrive 1.6s ease-out both}.cinema-shade{position:absolute;inset:0;background:linear-gradient(90deg,#21171e 6%,#21171ef5 30%,#21171e88 49%,#21171e05 75%),linear-gradient(0deg,#21171ecc,transparent 36%)}.frame-caption{position:absolute;top:32px;right:5%;font-size:8px;letter-spacing:.2em;color:#3b2530}.frame-caption i{display:block;text-align:right;font:italic 23px var(--serif);letter-spacing:0;margin-top:4px}.cinema-copy{position:relative;max-width:590px;animation:cinema-copy 1s ease-out both}.cinema-copy .eyebrow{font-size:9px;letter-spacing:.2em;color:#dec3be;display:flex;align-items:center;gap:14px;margin-bottom:24px}.cinema-copy .eyebrow>span{height:1px;width:35px;background:#bd9390}.cinema-intro h1{font-size:clamp(70px,7.8vw,114px);line-height:.87;letter-spacing:-.05em;font-weight:400}.cinema-intro h1 em{color:#e2b7ad}.cinema-intro .intro-copy{color:#d7c3c8;font-size:15px;line-height:1.7;margin:25px 0}.cinema-actions{display:flex;align-items:flex-start;flex-direction:column;gap:18px}.cinema-actions .button{gap:30px;padding:15px 22px}.cinema-actions .button>span{font-size:20px}.cinema-link{font-size:12px;color:#e4cdd0;border-bottom:1px solid #b78f9c66;padding-bottom:6px}.cinema-link>span{margin-left:20px}.cinema-footnote{font-size:8px;letter-spacing:.18em;color:#c09fa9;margin-top:25px;margin-bottom:0}.cinema-credit{position:absolute;bottom:24px;right:5%;left:58%;border-top:1px solid #fbe9df50;padding-top:15px;display:flex;justify-content:space-between;align-items:center;gap:14px}.cinema-credit>span{font-size:7px;letter-spacing:.13em}.cinema-credit>i{font:italic 25px var(--serif);white-space:nowrap}.cinema-credit>span:last-child{display:none}
.mode-nav{border:0;background:#2d2028;padding:0 6%;gap:0;color:#ddc6cd}.mode-nav a{position:relative;border:0!important;font-size:11px;letter-spacing:.025em;padding:24px 8px;transition:color .2s,background .2s}.mode-nav a:after{content:'';position:absolute;bottom:0;left:24%;right:24%;height:2px;background:transparent}.mode-nav a:hover,.mode-nav a.active{background:#ffffff04;color:#ffe6d5}.mode-nav a.active:after{background:#d4a394}.mode-nav a:last-child{background:transparent;color:#efcbb1}
.section{padding:78px 8%}.eyebrow{font-size:10px;letter-spacing:.16em;color:#865e69}.section-heading h2{font-size:clamp(46px,5vw,72px);line-height:.95}.section-heading h2 em{color:#955e70}.section-heading>p{color:#755d66;font-size:13px}.button{border-radius:6px;min-height:48px;border-color:#b8999d;font-size:13px}.dark{background:#714455;color:#fff3e9;border-color:#714455}.dark:hover{background:#573441}.cinema-actions .dark{background:#edcebb;border-color:#edcebb;color:#34232c}.outline:hover{background:#e6d6ce}.pink{background:#eed3c0}.pill{border-color:#bba2a8;color:#785763;font-size:9px;letter-spacing:.1em}.quiet-button{min-height:44px;text-decoration-color:#b89b9e}
.quiz-shell{background:#fcf8f3;border:1px solid #e0cec3;border-radius:16px;padding:30px;box-shadow:0 22px 70px #512d3e08}.quiz-intro{grid-template-columns:.8fr 1.2fr;gap:48px}.quiz-illustration{transform:none;display:block;position:relative;aspect-ratio:4/5;max-width:330px;width:100%;border-radius:10px;overflow:hidden;background:#35242f}.quiz-illustration>img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 32%}.quiz-illustration>div{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:end;padding:25px;color:#fff1e5;background:linear-gradient(transparent 45%,#2b182de6)}.quiz-illustration span{display:block;border:0;border-radius:0;font-size:8px;background:none!important;letter-spacing:.15em;margin:0 0 10px;width:auto;aspect-ratio:auto}.quiz-illustration i{font:italic 40px/.95 var(--serif)}.quiz-intro h3{font-size:42px}.quiz-intro p{font-size:14px}.quiz-intro .sp-notice{font-size:11px;line-height:1.75;color:#806a74}.option{border-radius:9px;background:#f5ece5;transition:background .2s,transform .2s}.option:hover{background:#e9d6d1;border-color:#b08191;transform:translateX(3px)}.option span{border-color:#bea0a6;color:#895a6d}.quiz-progress{background:#edddd2}.quiz-progress span{background:#9b6679}.result-card{border-radius:12px;box-shadow:0 14px 30px #60364312;color:#35242f}.result-copy h3{font-size:42px}
.daily{background:radial-gradient(ellipse at 100% 20%,#5d384888,transparent 60%),#2b2028;color:#f4e8df}.daily .eyebrow{color:#cba3ad}.daily .pill{color:#e4c4bf;border-color:#9f7484}.daily-tag{color:#d4b3be}.daily .fineprint{color:#c7adb8}.daily .dark{background:#e9c9b5;color:#35242f;border-color:#e9c9b5}.daily .outline{color:#ead2d7;border-color:#ad8795}.daily .outline:hover{background:#ffffff0d}.passport{transform:none;border:1px solid #ffffff22;border-radius:12px;box-shadow:0 25px 60px #130b154d;background:#ffffff06;color:#f6e6dc;padding:30px}.passport-top{border-color:#c09ba544;color:#dab9bd}.passport-number b{font-family:var(--serif);font-size:92px;font-weight:400}.passport-stats{border-color:#c09ba544}.badge{border-color:#b89aa0;color:#c4aab4}.badge.earned{background:#d8b7ad;border-color:#d8b7ad;color:#362630}
.lab{background:#efe4db}.palette-preview{border:1px solid #cbb2a8;border-radius:14px;padding:30px;background:#f9f1e8;box-shadow:0 16px 35px #6e485311}.palette-bars{gap:10px}.palette-bars div{border-radius:90px 90px 8px 8px}.palette-bottom strong{font-size:38px}.palette-controls{align-self:center}.slot-button{min-height:44px}.paint-colors{grid-template-columns:repeat(7,minmax(0,1fr));gap:12px}.paint{min-height:36px}.saved-mood{border-radius:8px;background:#faf3eb}.saved-section{border-color:#cbb2a8}
.ai-section{background:#241921;gap:10%}.ai-section .eyebrow{color:#d8b5bf}.ai-section h2{font-size:clamp(50px,5vw,74px)}.ai-section h2 em{color:#e1b7ad}.ai-image{width:100%;max-width:360px;border-radius:160px 160px 10px 10px;overflow:hidden;box-shadow:0 22px 70px #08040966}.ai-image:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 60%,#241921aa)}.ai-image span{z-index:1;font:italic 27px var(--serif)}.instagram-section{background:radial-gradient(ellipse at center,#f5e5d8,#e3ccc1)}.instagram-section h2 em{color:#955e70}.instagram-section .eyebrow{color:#855869}footer{background:#21171e;color:#e2c8ce;border-top:1px solid #ffffff12}dialog{border-radius:14px}dialog::backdrop{background:#170e19db;backdrop-filter:blur(12px)}.share-layout textarea{border-radius:7px;background:#fffaf5}
@keyframes cinema-arrive{from{transform:scale(1.04);filter:brightness(.75)}to{transform:scale(1);filter:brightness(1)}}@keyframes cinema-copy{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(min-width:1600px){.cinema-intro{padding-left:max(8%,calc((100vw - 1480px)/2))}.cinema-frame>img{width:57%}.cinema-intro h1{font-size:120px}}
@media(max-width:1000px) and (min-width:761px){.cinema-intro{padding-left:6%;min-height:650px}.cinema-intro h1{font-size:82px}.cinema-credit{left:60%}.cinema-credit>span{display:none}.quiz-intro{gap:28px}.quiz-shell{padding:26px}.paint-colors{grid-template-columns:repeat(6,1fr)}}
@media(max-width:760px){.club-nav{min-height:74px;padding:17px 6%}.brand{font-size:14px;letter-spacing:.11em}.brand small{font-size:7px}.ig-button{padding:10px 14px;font-size:11px}.cinema-intro{height:auto;min-height:690px;padding:292px 7% 34px;display:flex;align-items:end}.cinema-frame>img{width:100%;height:100%;object-position:50% 21%;object-fit:cover;animation:none}.cinema-shade{background:linear-gradient(0deg,#21171e 0%,#21171ef5 17%,#21171eaa 42%,#21171e08 76%)}.frame-caption{top:23px;right:7%;font-size:7px}.frame-caption i{font-size:21px}.cinema-copy{width:100%}.cinema-copy .eyebrow{font-size:8px;letter-spacing:.15em;margin-bottom:15px}.cinema-intro h1{font-size:clamp(62px,16vw,86px);line-height:.88}.cinema-intro h1 br:nth-child(2){display:none}.cinema-intro h1 em{display:block}.cinema-intro .intro-copy{font-size:13px;margin:19px 0}.cinema-actions{gap:15px}.cinema-actions .button{width:100%;justify-content:space-between;font-size:12px;padding:13px 17px}.cinema-link{font-size:11px}.cinema-footnote,.cinema-credit{display:none}.mode-nav{padding:0 5%;grid-template-columns:1fr 1fr}.mode-nav a{padding:18px 6px;font-size:10px;border-bottom:1px solid #ffffff0d!important}.mode-nav a:after{left:18%;right:18%}.section{padding:50px 6%}.section-heading h2{font-size:48px}.quiz-shell{padding:20px;border-radius:12px}.quiz-intro{grid-template-columns:1fr;gap:24px}.quiz-illustration{aspect-ratio:16/10;max-width:none}.quiz-illustration>img{object-position:50% 29%}.quiz-illustration>div{padding:18px;background:linear-gradient(90deg,#241623ab,transparent 85%)}.quiz-illustration i{font-size:32px}.quiz-intro h3{font-size:35px}.quiz-intro .sp-notice{font-size:11px}.daily h2{font-size:48px}.passport{padding:25px}.paint-colors{grid-template-columns:repeat(6,minmax(0,1fr));gap:13px}.paint{min-height:32px}.palette-preview{padding:22px}.lab-actions>.button{flex:1}.ai-image{aspect-ratio:4/5;max-width:290px;margin:0 auto}.ai-section h2{font-size:52px}.instagram-section h2{font-size:43px}.instagram-section>p:not(.eyebrow):not(.fineprint){font-size:13px}.button{font-size:13px}.result-card h3{font-size:48px}}
@media(prefers-reduced-motion:reduce){.cinema-frame>img,.cinema-copy{animation:none}.option{transition:none}}
@media(min-width:761px){.cinema-shade{background:linear-gradient(90deg,#21171e 6%,#21171e 38%,#21171ec9 45%,#21171e38 64%,#21171e00 85%),linear-gradient(0deg,#21171ecc,transparent 36%)}}