*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans","Yu Gothic",sans-serif;background:#fff7fb;color:#2d1b24}
body{overflow-x:hidden;display:flex;justify-content:center}
.lt5-app{position:relative;width:min(100%,768px);min-height:100dvh;margin:0 auto;overflow:hidden;background:linear-gradient(180deg,#ffe8f3 0%,#fff 52%,#fff8fb 100%)}
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle at 18% 4%,rgba(255,255,255,.95) 0 12%,rgba(255,198,224,.55) 13% 28%,transparent 29%),radial-gradient(circle at 88% 20%,rgba(91,192,190,.22) 0 18%,transparent 19%),radial-gradient(circle at 20% 86%,rgba(255,199,44,.25) 0 20%,transparent 21%)}
.topbar{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:42px 1fr 64px;gap:10px;align-items:center;padding:12px 16px;background:rgba(255,247,251,.88);backdrop-filter:blur(14px);border-bottom:1px solid rgba(123,27,72,.08)}
.backLink{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;color:#7b1b48;background:#fff;border:1px solid #ffd0e4;font-size:32px;line-height:1;box-shadow:0 8px 20px rgba(120,20,70,.08)}
.brand{font-size:22px;font-weight:1000;color:#e91e63;letter-spacing:.06em;line-height:1}.caption{font-size:12px;font-weight:900;color:#7b1b48;margin-top:2px}.counter{text-align:right;font-size:12px;font-weight:1000;color:#a06982}
.app{position:relative;z-index:1;padding:18px;min-height:calc(100dvh - 63px);display:flex;align-items:center;justify-content:center}
.screen,.resultBox{width:100%;max-width:640px;background:rgba(255,255,255,.9);border:1px solid rgba(233,30,99,.10);border-radius:26px;padding:24px;box-shadow:0 18px 50px rgba(120,20,70,.14)}
.sceneIntro{position:relative;overflow:hidden}.sceneIntroKicker{text-align:center;font-size:12px;font-weight:1000;letter-spacing:.22em;color:#5bc0be;margin-bottom:8px}.sceneImageFrame{display:block;width:100%;aspect-ratio:16/10;border-radius:18px;margin:0 0 16px;box-shadow:0 18px 42px rgba(120,20,70,.18);border:1px solid rgba(255,255,255,.8);overflow:hidden;background:#1a1518}.sceneImage{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0;transform:scale(2);transform-origin:50% 0}.dropIn{opacity:0;animation:dropIn .72s cubic-bezier(.18,1.18,.32,1) forwards}.delay0{animation-delay:.04s}.delay1{animation-delay:.13s}.delay2{animation-delay:.23s}.delay3{animation-delay:.34s}.delay4{animation-delay:.45s}.delay5{animation-delay:.56s}.delay6{animation-delay:.67s}.sceneBurst{position:absolute;inset:0;pointer-events:none;overflow:hidden}.sceneBurst span{position:absolute;top:-18px;width:9px;height:42px;border-radius:999px;background:#ff5b9f;opacity:.7;animation:confettiDrop 1.1s ease-out forwards}.sceneBurst span:nth-child(1){left:12%;background:#5bc0be;animation-delay:.05s}.sceneBurst span:nth-child(2){left:34%;height:30px;animation-delay:.18s}.sceneBurst span:nth-child(3){left:68%;background:#ffc72c;animation-delay:.1s}.sceneBurst span:nth-child(4){left:86%;height:34px;animation-delay:.28s}@keyframes dropIn{0%{opacity:0;transform:translateY(-38px) scale(.98);filter:blur(4px)}70%{opacity:1;transform:translateY(5px) scale(1.01);filter:blur(0)}100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}@keyframes confettiDrop{0%{transform:translateY(-30px) rotate(0deg);opacity:0}20%{opacity:.85}100%{transform:translateY(420px) rotate(220deg);opacity:0}}@keyframes titleCallIn{0%{opacity:0;transform:scale(.6) rotateX(-15deg) translateY(-20px);filter:blur(8px)}40%{opacity:1;transform:scale(1.08) rotateX(0)}85%{transform:scale(1.02)}100%{opacity:1;transform:scale(1) rotateX(0);filter:blur(0)}}
.logo{text-align:center;font-size:48px;font-weight:1000;letter-spacing:.04em;color:#e91e63}.titleImage{display:block;width:min(100%,360px);height:auto;margin:0 auto 12px;border-radius:18px;box-shadow:0 14px 34px rgba(120,20,70,.16)}.sub{text-align:center;font-size:20px;font-weight:1000;color:#7b1b48;margin:2px 0 18px}
.copy{font-size:16px;line-height:1.8;color:#4c3440}.small{font-size:13px;line-height:1.7;color:#755b68}.note{margin-top:16px;padding:12px 14px;border-radius:16px;background:#fff2f7;border:1px solid #ffd0e4}
button,.primary{border:0;border-radius:18px;padding:15px 18px;font-size:16px;font-weight:1000;background:linear-gradient(135deg,#ff5b9f,#e91e63);color:white;box-shadow:0 10px 22px rgba(233,30,99,.23);cursor:pointer;text-decoration:none;display:inline-flex;justify-content:center;align-items:center}
.ghostBtn,.secondary{background:#fff;color:#e91e63;border:1px solid #ffd0e4;box-shadow:none}.footerBtns,.quickBtns{display:flex;gap:10px;margin-top:18px}.footerBtns button,.quickBtns button{flex:1}.yesBtn{background:#e8f5e9;color:#2e7d32;box-shadow:none}.noBtn{background:#ffebee;color:#c62828;box-shadow:none}
.progress{text-align:center;font-weight:1000;color:#e91e63;margin-bottom:10px}.sceneTitle{font-size:28px;font-weight:1000;color:#e91e63;text-align:center;margin-bottom:16px;letter-spacing:.15em;animation:titleCallIn .9s cubic-bezier(.15,.82,.42,1.01) forwards;position:relative;text-shadow:2px 4px 12px rgba(233,30,99,.25);transform-origin:center}.aruaruTitle{font-size:22px;font-weight:1000;color:#7b1b48;text-align:center;line-height:1.45;margin:8px 0 18px}.stepSceneTitle{font-size:clamp(30px,7.2vw,46px);font-weight:1000;color:#e91e63;text-align:center;line-height:1.18;margin:2px 0 10px;text-shadow:2px 4px 14px rgba(233,30,99,.28);transform-origin:center}.stepAruaruTitle{font-size:clamp(24px,5.4vw,36px);font-weight:1000;color:#e91e63;text-align:center;line-height:1.25;margin:0 0 20px;text-shadow:0 8px 22px rgba(233,30,99,.22);position:relative}.stepAruaruTitle:after{content:"";display:block;width:88px;height:4px;border-radius:999px;background:linear-gradient(90deg,#5bc0be,#ff5b9f,#ffc72c);margin:14px auto 0;animation:lineSweep .78s ease-out forwards}
.aruaruStage{position:relative;overflow:hidden}.aruaruStage:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,91,159,.08),transparent 38%,rgba(91,192,190,.08));opacity:0;animation:stageFlash .8s ease-out forwards;pointer-events:none}.aruaruBurst{position:absolute;inset:0;pointer-events:none;overflow:hidden}.aruaruBurst span{position:absolute;top:-24px;width:10px;height:10px;border-radius:50%;background:#ff5b9f;box-shadow:0 0 18px rgba(255,91,159,.7);animation:starDrop .95s ease-out forwards}.aruaruBurst span:nth-child(1){left:10%;animation-delay:.03s}.aruaruBurst span:nth-child(2){left:28%;background:#5bc0be;animation-delay:.12s}.aruaruBurst span:nth-child(3){left:51%;width:8px;height:38px;border-radius:999px;background:#ffc72c;animation-delay:.06s}.aruaruBurst span:nth-child(4){left:73%;background:#ff8ec4;animation-delay:.18s}.aruaruBurst span:nth-child(5){left:90%;background:#5bc0be;animation-delay:.09s}.smallBurst span{animation-duration:.72s}.aruaruTitleFx{color:#e91e63;text-shadow:0 8px 22px rgba(233,30,99,.22);position:relative}.aruaruTitleFx:after{content:"";display:block;width:88px;height:4px;border-radius:999px;background:linear-gradient(90deg,#5bc0be,#ff5b9f,#ffc72c);margin:12px auto 0;animation:lineSweep .78s ease-out forwards}.cardEnter{opacity:0;animation:cardDrop .72s cubic-bezier(.16,1.1,.32,1) forwards}.choiceEnter .choiceBtn{opacity:0;animation:choiceDrop .52s cubic-bezier(.18,1.1,.32,1) forwards}.choiceEnter .choiceBtn:nth-child(1){animation-delay:.38s}.choiceEnter .choiceBtn:nth-child(2){animation-delay:.48s}.choiceEnter .choiceBtn:nth-child(3){animation-delay:.58s}.choiceEnter .choiceBtn:nth-child(4){animation-delay:.68s}@keyframes stageFlash{0%{opacity:0}35%{opacity:1}100%{opacity:0}}@keyframes starDrop{0%{opacity:0;transform:translateY(-30px) scale(.7) rotate(0deg)}20%{opacity:1}100%{opacity:0;transform:translateY(330px) scale(1.25) rotate(260deg)}}@keyframes lineSweep{0%{transform:scaleX(0);opacity:0}100%{transform:scaleX(1);opacity:1}}@keyframes cardDrop{0%{opacity:0;transform:translateY(-44px) scale(.96);filter:blur(5px)}72%{opacity:1;transform:translateY(7px) scale(1.01);filter:blur(0)}100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}@keyframes choiceDrop{0%{opacity:0;transform:translateY(-24px) scale(.98)}100%{opacity:1;transform:translateY(0) scale(1)}}
.cardWrap{position:relative;height:min(410px,58dvh);min-height:330px}.card{position:absolute;inset:0;background:#fff;border-radius:28px;box-shadow:0 18px 45px rgba(120,20,70,.17);padding:26px;touch-action:none;user-select:none;overflow:hidden;transition:transform .12s,opacity .12s}.card:after{content:"";position:absolute;right:-45px;bottom:-45px;width:140px;height:140px;border-radius:50%;background:#fff0f6}
.label{font-size:13px;color:#a06982;font-weight:900;margin-bottom:12px}.question{position:relative;z-index:1;font-size:clamp(22px,6.5vw,30px);line-height:1.45;font-weight:1000;margin-top:34px}.hint{position:absolute;z-index:2;left:20px;right:20px;bottom:24px;text-align:center;color:#917081;font-size:14px}
.badge{position:absolute;top:22px;padding:9px 14px;border-radius:999px;font-weight:1000;font-size:14px;opacity:0;z-index:3}.keep{left:22px;background:#e8f5e9;color:#2e7d32}.discard{right:22px;background:#ffebee;color:#c62828}
.choicePrompt{font-size:20px;line-height:1.55;font-weight:1000;color:#7b1b48;text-align:center;margin:16px 0 18px}.choiceList{display:grid;gap:10px}.choiceBtn{width:100%;display:grid;grid-template-columns:42px 1fr;gap:10px;align-items:center;text-align:left;background:#fff;color:#4c3440;border:1px solid #ffd0e4;box-shadow:0 8px 18px rgba(120,20,70,.08);border-radius:16px;padding:14px 16px}.choiceBtn b{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#fff0f6;color:#e91e63}.choiceBtn span{line-height:1.55;font-weight:900}
.textInput{width:100%;min-height:150px;resize:vertical;border:1px solid #ffd0e4;border-radius:16px;background:#fff;color:#2d1b24;padding:14px 16px;font:inherit;font-size:16px;line-height:1.7;box-shadow:0 8px 18px rgba(120,20,70,.08);outline:none}.textInput:focus{border-color:#e91e63;box-shadow:0 0 0 4px rgba(233,30,99,.12)}.textInput::placeholder{color:#a98797}
.resultType{font-size:30px;line-height:1.35;font-weight:1000;color:#e91e63;margin:10px 0}.resultLead{font-size:14px;line-height:1.8;color:#4c3440}.meter{width:100%;height:18px;background:#f5dbe7;border-radius:999px;overflow:hidden;margin:12px 0 6px}.bar{height:100%;background:linear-gradient(90deg,#5bc0be,#ff5b9f);width:0%}.spicy{border-left:5px solid #e91e63;background:#fff2f7;padding:14px;border-radius:14px;line-height:1.7;font-weight:800}.rankList{display:grid;gap:8px;margin:12px 0}.rankItem{display:grid;grid-template-columns:1fr 56px;gap:10px;align-items:center;padding:10px 12px;border-radius:14px;background:#fff7fb;border:1px solid #ffe1ef}.rankLink{text-decoration:none;color:inherit;transition:transform .12s,box-shadow .12s,border-color .12s}.rankLink:hover,.rankLink:focus-visible{transform:translateY(-1px);border-color:#ff5b9f;box-shadow:0 8px 18px rgba(233,30,99,.16);outline:none}.rankName{font-weight:1000;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}.rankScore{text-align:right;color:#e91e63;font-weight:1000}.maskPip{position:fixed;right:max(14px,calc((100vw - 768px)/2 + 14px));bottom:14px;z-index:20;width:min(360px,calc(100vw - 28px));background:rgba(255,255,255,.96);border:1px solid #ffd0e4;border-radius:20px;box-shadow:0 22px 60px rgba(62,8,34,.28);padding:12px;backdrop-filter:blur(14px);animation:pipIn .18s ease-out}.maskPip[hidden]{display:none}.maskPipClose{position:absolute;top:8px;right:8px;z-index:2;width:34px;height:34px;border-radius:50%;padding:0;background:#fff;color:#e91e63;border:1px solid #ffd0e4;box-shadow:none;font-size:24px;line-height:1}.maskPipBody{display:grid;grid-template-columns:108px 1fr;gap:12px;align-items:start}.maskPipImage{width:108px;aspect-ratio:1/1;object-fit:contain;border-radius:14px;background:#fff8fb;border:1px solid #ffe1ef}.maskPipKicker{font-size:11px;font-weight:1000;letter-spacing:.12em;color:#e91e63;text-transform:uppercase}.maskPip h3{margin:2px 36px 4px 0;color:#2d1b24;font-size:19px;line-height:1.35}.maskPip p{margin:6px 0;font-size:12px;line-height:1.65;color:#4c3440;font-weight:800}.maskPipRole{color:#7b1b48}.maskPipKeywords{color:#a06982}.maskPipDetail{display:inline-flex;margin-top:6px;color:#e91e63;font-size:13px;font-weight:1000;text-decoration:underline;text-underline-offset:3px}.maskPipLoading{padding:18px 42px 18px 8px;color:#7b1b48;font-weight:1000}.saveStatus{font-size:12px;color:#755b68;text-align:center;margin:8px 0 0}@keyframes pipIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:520px){.app{padding:14px}.screen,.resultBox{padding:20px;border-radius:22px}.topbar{grid-template-columns:38px 1fr 54px;padding:10px 12px}.logo{font-size:42px}.footerBtns,.quickBtns{gap:8px}button,.primary{font-size:15px;padding:13px 14px}}