*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--purple:#7B5EA7}
body{background:#111;color:#fff;font-family:'DM Sans',sans-serif;height:100dvh;overflow:hidden}
.app-shell,.screen{width:100%;height:100dvh}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px 80px;opacity:0;pointer-events:none;transition:opacity .45s ease;overflow:hidden}
.screen.active{opacity:1;pointer-events:auto}
#screen-logo{background:#fff;cursor:pointer}
#screen-question,#screen-wheel{background:#000}
#screen-question{cursor:pointer}
#screen-emotion,#screen-audio{background:linear-gradient(150deg,#cc4400,#cc0000)}
#screen-contact{background:radial-gradient(ellipse at center,#3a0a00 0%,#1a0400 55%,#0d0200 100%)}
.logo-row{display:flex;align-items:baseline;line-height:1}
.logo-part{font-size:clamp(56px,12vw,108px);font-weight:700;color:#000;letter-spacing:-2px}
.logo-o-svg{height:clamp(52px,11vw,102px);width:auto;display:block;margin:0 -3px;transform:translateY(4px)}
.tap-hint{position:absolute;bottom:90px;font-size:11px;color:rgba(0,0,0,.25);letter-spacing:.12em;text-transform:uppercase}
.brand-footer{position:absolute;bottom:18px;left:0;right:0;display:flex;justify-content:center}
.brand-footer span{font-size:9px;letter-spacing:.18em;color:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.28);padding:5px 14px;white-space:nowrap;text-transform:uppercase}
.brand-footer.dark span{color:rgba(0,0,0,.3);border-color:rgba(0,0,0,.2)}
.home-link{cursor:pointer}
.purple-border{position:absolute;right:0;top:0;bottom:0;width:4px;background:var(--purple)}
.q-wheel-wrap{position:relative;width:min(70vw,360px);height:min(70vw,360px)}
#wheel1{width:100%;height:100%;display:block;border-radius:50%}
.question-text{position:absolute;inset:0 0 44px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:26px}
.question-text p{font-size:clamp(18px,2vw,28px);line-height:1.35}
.question-text em{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(24px,2.6vw,40px);line-height:1.2}
.wheel-instruction{font-size:11px;letter-spacing:.16em;color:rgba(255,255,255,.5);text-transform:uppercase;margin-bottom:18px}
.wheel-container{position:relative;width:min(76vw,420px);height:min(76vw,420px);cursor:crosshair}
#colorWheel{display:block;width:100%;height:100%;border-radius:50%}
.wheel-magic-cursor,.wheel-selected-marker{position:absolute;pointer-events:none;transform:translate(-50%,-50%);z-index:6}
.wheel-selected-marker{display:none;z-index:7}
.wheel-selected-marker.visible{display:block}
.wmc-ring{width:38px;height:38px;border:2.5px solid #fff;border-radius:50%;box-shadow:0 0 12px rgba(255,255,255,.35),inset 0 0 6px rgba(255,255,255,.08)}
.wheel-selected-marker .wmc-ring{border-color:#000;box-shadow:0 0 0 2px rgba(255,255,255,.35),0 0 10px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.08)}
.wmc-star{position:absolute;color:#FFD700;line-height:1}
.wmc-star.a{font-size:18px;top:-14px;right:-10px}.wmc-star.b{font-size:11px;top:-7px;right:-22px}.wmc-star.c{font-size:9px;top:-20px;right:2px}
.wheel-label{margin-top:24px;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(30px,4vw,52px);color:#fff;min-height:42px;text-align:center}
.wheel-confirm{margin-top:18px;padding:14px 44px;border:2px solid rgba(255,255,255,.65);border-radius:50px;background:transparent;color:#fff;font-size:13px;letter-spacing:.12em;cursor:pointer}
.wheel-confirm.has-choice{border-color:#FFD700;color:#FFD700}
.emotion-name{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(62px,9vw,110px);line-height:1}
.emotion-name-wrap{position:relative;display:inline-block;margin-bottom:10px}
.emotion-sparkles{position:absolute;top:-8px;right:-36px;display:flex;flex-direction:column}
.emotion-sparkles span{color:#FFD700;line-height:1.1;animation:twinkle 1.6s ease-in-out infinite}
.emotion-sparkles span:first-child{font-size:22px;animation-delay:0s}
.emotion-sparkles span:last-child{font-size:13px;margin-left:10px;animation-delay:.3s}
.emotion-sub{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(32px,4vw,54px);color:rgba(255,255,255,.85);text-align:center;margin-top:60px;line-height:1.25;cursor:pointer}
.audio-instruction{font-size:11px;letter-spacing:.16em;color:rgba(255,255,255,.7);text-transform:uppercase;text-align:center;line-height:1.7;margin-bottom:30px}
.headphone-btn{position:relative;width:168px;height:168px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;box-shadow:0 0 70px rgba(255,255,255,.08);cursor:pointer;transition:transform .2s}
.headphone-btn:active{transform:scale(.95)}
.headphone-emoji{font-size:86px}
.play-overlay{position:absolute;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.28);display:flex;align-items:center;justify-content:center;top:50%;left:50%;transform:translate(-50%,-50%)}
.play-overlay svg{width:18px;height:18px;fill:#fff;margin-left:3px}
.audio-progress-wrap{width:200px;margin-top:16px;display:none;flex-direction:column;align-items:center;gap:6px}
.audio-progress-wrap.visible{display:flex}
.audio-bar-bg{width:100%;height:3px;background:rgba(255,255,255,.2);border-radius:2px;overflow:hidden}
.audio-bar-fill{height:100%;width:0%;background:rgba(255,255,255,.8);transition:width .3s linear}
.audio-time{font-size:11px;color:rgba(255,255,255,.5)}
.audio-msg{margin-top:36px;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(30px,4vw,52px);text-align:center;line-height:1.25}
.audio-skip{margin-top:24px;padding:12px 36px;border:1.5px solid rgba(255,255,255,.45);border-radius:50px;background:transparent;color:rgba(255,255,255,.75);font-size:12px;letter-spacing:.12em;cursor:pointer}
.contact-headphone{font-size:90px;filter:grayscale(.7) brightness(.6)}
.contact-title{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(34px,4.6vw,62px);text-align:center;margin-top:8px;margin-bottom:6px}
.contact-form{width:100%;max-width:320px;display:flex;flex-direction:column;gap:14px;align-items:center;margin-top:8px}
.email-input{width:100%;padding:15px 20px;border:1.5px solid rgba(255,255,255,.3);border-radius:50px;background:rgba(255,255,255,.06);color:#fff;font-family:'DM Sans',sans-serif;font-size:15px;text-align:center;outline:none}
.contact-btn{width:100%;padding:15px 0;border:2px solid rgba(255,255,255,.6);border-radius:50px;background:transparent;color:#fff;font-size:13px;letter-spacing:.15em;cursor:pointer}
.contact-note{font-size:13px;color:rgba(255,255,255,.6);text-align:center;line-height:1.5;max-width:260px;margin-top:10px}
.chat-bubble{position:fixed;bottom:24px;right:24px;width:52px;height:52px;border-radius:50%;background:rgba(35,35,35,.97);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 20px rgba(0,0,0,.5);z-index:20;border:none}
.chat-bubble svg{width:22px;height:22px;fill:#fff}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);display:grid;place-items:center;z-index:40;padding:20px}
.modal-backdrop.hidden{display:none}
.modal{width:min(100%,430px);background:#1d1d24;border:1px solid #343444;border-radius:16px;padding:22px 20px 18px;position:relative}
.modal-close{position:absolute;right:10px;top:8px;border:none;background:transparent;color:#fff;font-size:26px;cursor:pointer}
.modal-title{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:34px;line-height:1.1;margin-bottom:16px}
.contact-form-modal{display:grid;gap:12px}
.contact-form-modal .email-input{border-radius:14px;text-align:left;padding:12px 14px}
.contact-form-modal textarea.email-input{min-height:96px;resize:vertical}
.modal-status{min-height:20px;font-size:13px;color:rgba(255,255,255,.75);margin-top:8px}
@keyframes twinkle{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}
@media (min-width: 900px){.screen{padding:56px 48px 84px}}