*{box-sizing:border-box}
:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#fff}
body{margin:0;min-height:100vh;background:#101112;overflow-x:hidden}
.bg-hearts{position:fixed;inset:0;opacity:.06;background-image:radial-gradient(circle at 15% 20%,#fff 0 1px,transparent 1px),radial-gradient(circle at 80% 70%,#fff 0 1px,transparent 1px);background-size:38px 38px,54px 54px;pointer-events:none}
.wrap{width:min(720px,100%);min-height:100vh;margin:auto;padding:22px 16px;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:1}
.progress{height:4px;background:#ffffff14;border-radius:99px;margin-bottom:16px;overflow:hidden}
.progress span{display:block;height:100%;width:11%;background:#ff3158;border-radius:99px;transition:width .4s}
.screen{display:none;animation:in .35s ease}
.screen.active{display:block}
.card{background:#202223;border:1px solid #ffffff0c;border-radius:20px;padding:28px;box-shadow:0 20px 70px #0008}
.center{text-align:center}
.eyebrow{display:inline-block;padding:7px 12px;border-radius:99px;background:#ff3158;font-size:.78rem;font-weight:800}
h1{font-size:clamp(2rem,7vw,3.2rem);line-height:1.08;margin:18px 0 12px}
h2{font-size:1.65rem;margin:10px 0}
h3{font-size:1rem;margin:0 0 7px}
p{color:#ddd;line-height:1.65}
.big{font-size:1.05rem}
.quote{background:#171819;border-left:3px solid #ff3158;border-radius:10px;padding:18px;color:#eee;line-height:1.6;margin:20px 0}
button{width:100%;border:0;border-radius:999px;padding:13px 18px;background:#ff3158;color:#fff;font-size:1rem;font-weight:800;cursor:pointer;margin-top:10px}
button:hover{filter:brightness(1.08)}
.question{padding:18px 0;border-bottom:1px solid #ffffff10}
.question .choice{background:#303233;text-align:left;margin-top:8px}
.question .choice.selected{outline:2px solid #ff3158}
.loader-wrap{height:65px;display:grid;place-items:center;margin-top:12px}
.loader{width:48px;height:48px;border:5px solid #ffffff18;border-top-color:#ff3158;border-radius:50%;animation:spin 1s linear infinite}
.analysis{display:grid;gap:8px;margin-top:18px;text-align:left}
.analysis span{padding:10px 12px;background:#171819;border-radius:10px;color:#bbb}
.result h1{font-size:clamp(1.6rem,5vw,2.3rem)}
.score{background:#171819;border-radius:16px;padding:20px;margin:20px 0;display:flex;justify-content:space-between;align-items:center;gap:15px}
.score span{color:#bbb}.score strong{font-size:1.5rem}
.stats{display:grid;gap:9px}
.stats div{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;padding:11px 12px;background:#171819;border-radius:10px}
.stats span{color:#ddd}.stats b{text-align:right}
.verdict{margin-top:20px;padding:18px;border:1px solid #ff315844;border-radius:14px;background:#ff31580d}
.verdict h2{margin-top:0}
.signature,.love{font-weight:800;font-size:1.2rem}
.topline{display:flex;justify-content:space-between;color:#aaa;font-size:.85rem}
.hint,.small{font-size:.88rem;color:#aaa}
.puzzle{width:min(94vw,560px);aspect-ratio:1128/1600;margin:22px auto;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);gap:4px;touch-action:none}
.piece{position:relative;min-width:0;min-height:0;border-radius:7px;overflow:hidden;background-repeat:no-repeat;cursor:grab;border:2px solid transparent;user-select:none;transition:transform .16s,opacity .16s,border-color .16s}
.piece.dragging{opacity:.45;border-color:#ff3158}
.piece.correct{border-color:#49d996}
.status{text-align:center;min-height:25px;font-weight:800}
.heart{font-size:4rem;line-height:1;animation:pulse 1.3s infinite}
.final{padding:38px 28px}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes pulse{50%{transform:scale(1.1)}}
@media(max-width:520px){.card{padding:21px}.score{flex-direction:column;align-items:flex-start}.stats div{grid-template-columns:auto 1fr}.stats b{grid-column:2;text-align:left}.puzzle{width:min(94vw,520px);gap:3px}.piece{border-radius:5px}}