[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#services{padding:0;display:block;overflow:hidden;background:#faf8f4}
#salon-lobby{position:absolute;inset:0;display:grid;grid-template-columns:.85fr 1.15fr;grid-template-rows:1fr auto;gap:0 3vw;padding:105px 7vw 28px;overflow:hidden;transition:opacity .65s ease}
.lobby-heading{align-self:center;position:relative;z-index:3;transition:opacity .4s,transform .7s}
.lobby-heading h2{font-size:clamp(44px,5.7vw,84px);line-height:1.02;margin:18px 0 22px}
.lobby-heading p{font-size:12px;letter-spacing:.03em;opacity:.7}
.lobby-stage{min-height:0;display:flex;align-items:center;justify-content:center;perspective:1200px}
#lobby-scene{position:relative;aspect-ratio:3/4;width:min(100%,calc((100svh - 165px)*.75));flex-shrink:0;transform-origin:var(--room-focus,50% 62%);transition:transform 1.15s cubic-bezier(.45,0,.15,1),opacity .8s ease;will-change:transform,opacity}
.lobby-art{width:100%;height:100%;display:block;object-fit:cover;border-radius:180px 180px 16px 16px;box-shadow:0 20px 60px #6f3b2a18}
.room-portal{position:absolute;top:26%;height:45%;width:29%;padding:0;border:0;border-radius:70px 70px 4px 4px;background:transparent;color:var(--ink);outline-offset:4px;isolation:isolate}
.room-portal[data-room=nails]{left:3.5%}.room-portal[data-room=hair]{left:35.5%}.room-portal[data-room=lashes]{left:67.5%}
.room-portal::before{content:'';position:absolute;inset:0;border:1px solid #fff5d200;border-radius:inherit;box-shadow:inset 0 0 35px #fff5d200;transition:all .35s}
.room-portal:hover::before,.room-portal:focus-visible::before{border-color:#ffedbbcc;box-shadow:inset 0 0 35px #fff1c950,0 0 22px #fff0c050}
.portal-label{position:absolute;left:1%;right:1%;bottom:-7%;display:flex;flex-direction:column;align-items:center;gap:6px;background:#fffaf1ed;border:1px solid #b48d6460;backdrop-filter:blur(14px);padding:12px 4px 10px;border-radius:38px;box-shadow:0 5px 20px #6b3d2325;transition:transform .35s,background .35s}
.portal-label small{font:8px Arial;letter-spacing:.18em;opacity:.55}.portal-label strong{font:16px Georgia,serif;letter-spacing:-.03em;font-weight:400;white-space:nowrap}.portal-label>span{font-size:15px;line-height:1}.room-portal:hover .portal-label{transform:translateY(-5px);background:#fffaf1}
.lobby-footer{grid-column:1/-1;text-align:center;position:relative;z-index:3;padding-top:13px;transition:opacity .35s}.lobby-footer p{font-size:10px;letter-spacing:.08em;margin:0 0 13px}
#services.room-entering #lobby-scene{transform:scale(3.2);opacity:0}
#services.room-entering .lobby-heading,#services.room-entering .lobby-footer{opacity:0;transform:translateY(-18px)}
#services.room-open #salon-lobby{opacity:0;pointer-events:none}
#room-view{position:absolute;inset:0;opacity:0;transition:opacity .75s ease;overflow:hidden;background:#ebcbc0}
#services.room-open #room-view{opacity:1}
#room-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 1.8s cubic-bezier(.2,.7,.2,1);filter:saturate(.9)}
#services.room-open #room-art{transform:scale(1)}
.room-shade{position:absolute;inset:0;background:linear-gradient(180deg,#faf8f4f5 0%,#faf8f460 15%,#faf8f400 46%,#f3dbcb45 100%)}
#rooms-back{position:absolute;left:6vw;top:100px;z-index:5;display:flex;gap:9px;align-items:center;padding:11px 16px;border-radius:30px;border:1px solid #a5775d40;background:#fff9f0dd;font-size:11px;backdrop-filter:blur(12px)}
.room-content{position:relative;display:grid;grid-template-columns:1.25fr 1fr;gap:2vw;max-width:1450px;height:100%;padding:140px 6vw 35px;margin:auto;align-items:center;overflow-y:auto;overscroll-behavior:contain}
#avatar-stage{position:relative;align-self:center;height:min(62svh,580px);min-height:350px;opacity:0;transform:translateY(45px) scale(.96);transition:opacity .8s .18s,transform 1.1s cubic-bezier(.2,.8,.2,1) .15s;pointer-events:none}
#services.room-open #avatar-stage{opacity:1;transform:translateY(0) scale(1)}
.avatar-motion{position:absolute;inset:0;transform-origin:50% 100%}
.avatar-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;opacity:0;transition:opacity .55s ease;filter:drop-shadow(4px 12px 16px #663c2d18)}
.avatar-layer.active{opacity:1}
#services.room-open .avatar-motion{animation:avatar-breathe 5.5s ease-in-out 1.2s infinite alternate}
@keyframes avatar-breathe{from{transform:translateY(0) rotate(-.15deg)}to{transform:translateY(-5px) rotate(.15deg)}}
.avatar-signature{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);font:italic 20px Georgia,serif;padding:8px 21px;border-radius:25px;background:#fff7edda;border:1px solid #d6bba060;white-space:nowrap}
.service-menu{position:relative;justify-self:end;width:100%;max-width:435px;padding:32px 30px 25px;background:#fffaf3f2;border:1px solid #d5b29a88;box-shadow:0 24px 80px #613c2630;border-radius:24px;backdrop-filter:blur(20px);opacity:0;transform:translateY(35px);transition:opacity .6s .32s,transform .8s .3s}
#services.room-open .service-menu{opacity:1;transform:translateY(0)}
.service-menu h2{font-size:43px;line-height:1.05;margin:12px 0}
.menu-hint{font-size:11px;line-height:1.5;opacity:.7;margin:0 0 24px}
#room-services{display:grid;gap:9px}
.service-option{border:1px solid #b78c7040;background:#ffffff90;padding:16px;border-radius:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;transition:background .25s,border-color .25s,transform .25s;opacity:0;transform:translateY(12px)}
#services.room-open .service-option{opacity:1;transform:translateY(0);transition:background .25s,border-color .25s,transform .55s calc(.38s + var(--item-index)*.08s),opacity .55s calc(.38s + var(--item-index)*.08s)}
.service-option:hover{background:#f8e6dd;border-color:#bd8a73}.service-option[aria-pressed=true]{background:#683449;color:#fff9f0;border-color:#683449}
.service-option strong{font:20px Georgia,serif;font-weight:400;letter-spacing:-.02em}.service-option i{font:16px Arial;font-style:normal;width:22px;height:22px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;opacity:.7}
#service-choice{position:relative;padding:20px 32px 0 0;margin-top:18px;border-top:1px solid #b58c7045;animation:choice-reveal .4s ease}
#selected-service{display:block;font:24px Georgia,serif;letter-spacing:-.03em;margin-top:7px}.choice-check{position:absolute;right:0;top:26px;color:#7b4d54;font-size:23px}
@keyframes choice-reveal{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){
 #salon-lobby{display:flex;flex-direction:column;padding:100px 15px 22px;gap:0}
 .lobby-heading{text-align:center;flex-shrink:0;align-self:center}.lobby-heading h2{font-size:37px;line-height:1.01;margin:12px 0 10px}.lobby-heading h2 br{display:none}.lobby-heading p{font-size:10px;margin:0 0 16px}
 .lobby-stage{flex:1;min-height:0;width:100%}
 #lobby-scene{width:min(100%,calc((100svh - 270px)*.75))}
 .lobby-art{border-radius:110px 110px 12px 12px}
 .portal-label{left:-3%;right:-3%;gap:5px;padding:10px 3px 8px}.portal-label strong{font-size:13px}.portal-label small{font-size:7px}.portal-label>span{font-size:13px}
 .lobby-footer{flex-shrink:0;padding-top:12px}.lobby-footer p{font-size:9px;margin-bottom:10px}
 #rooms-back{left:18px;top:83px;padding:9px 13px;font-size:10px}
 .room-content{display:flex;flex-direction:column;gap:0;padding:117px 18px 28px;height:100%;align-items:center}
 #room-art{object-position:50% 25%}.room-shade{background:linear-gradient(180deg,#faf8f4f5 0%,#faf8f430 25%,#f5dccc66 52%,#faf5edf5 100%)}
 #avatar-stage{align-self:auto;width:100%;height:clamp(180px,29svh,265px);min-height:0;flex-shrink:0}
 .avatar-signature{font-size:15px;bottom:1px;padding:6px 16px}
 .service-menu{flex-shrink:0;width:100%;max-width:450px;border-radius:20px;padding:23px 22px 20px}
 .service-menu h2{font-size:34px;margin:10px 0}.menu-hint{margin-bottom:18px;font-size:10px}
 .service-option{padding:13px 14px}.service-option strong{font-size:19px}.service-option i{width:20px;height:20px;font-size:14px}
 #service-choice{padding-top:15px;margin-top:15px}#selected-service{font-size:23px}
}
@media(max-width:700px) and (max-height:720px){
 #salon-lobby{padding-top:91px;padding-bottom:16px}.lobby-heading h2{font-size:31px;margin:8px 0}.lobby-heading p{margin-bottom:9px}
 #lobby-scene{width:min(100%,calc((100svh - 235px)*.75))}.lobby-footer{padding-top:8px}.lobby-footer p{margin-bottom:7px}
 .portal-label strong{font-size:11px}.portal-label{gap:4px;padding:8px 2px 7px}
 #avatar-stage{height:173px}.service-menu{padding:18px 19px}.service-menu h2{font-size:30px}.menu-hint{margin-bottom:13px}.service-option{padding:11px 13px}
}
@media(prefers-reduced-motion:reduce){#lobby-scene,#room-view,#room-art,.avatar-layer,#avatar-stage,.service-menu,.service-option{transition:none!important}.avatar-motion{animation:none!important}}
