/* ===== CORONITA 👑 ===== */
:root{--pink:#f8e8f3;--plum:#704d70;--dark:#633d63;--accent:#b879a6;--ink:#33283a;--muted:#806d80;--line:#eadfe8}
*{box-sizing:border-box}
body{margin:0;background:#f6f2f5;color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.55}
button{font:inherit;cursor:pointer}
button:focus-visible{outline:3px solid #d2a34b;outline-offset:3px}
.shell{max-width:740px;margin:auto;padding:18px 13px 35px}
.app{background:white;border:1px solid var(--line);border-radius:26px;padding:12px;box-shadow:0 16px 45px #643c5f18}
.panel{background:var(--pink);border-radius:20px;padding:clamp(20px,5vw,38px)}
.brand{display:flex;align-items:center;gap:11px;margin-bottom:24px}
.mark{width:42px;height:42px;border-radius:13px;object-fit:cover;display:block;box-shadow:0 4px 12px #643c5f33}
.brandname{font-weight:900;letter-spacing:.13em;color:var(--dark)}
.sub{font-size:11px;letter-spacing:.15em;color:var(--muted)}
.pill{margin-left:auto;background:#fff9;border-radius:99px;padding:7px 11px;color:var(--plum);font-size:12px;font-weight:800;white-space:nowrap}
.kicker{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:850;color:#965c83}
h1{font-size:clamp(34px,7vw,53px);line-height:1.02;letter-spacing:-.05em;color:var(--dark);margin:9px 0 14px}
h2{font-size:clamp(25px,5vw,34px);line-height:1.12;color:var(--dark)}
.lead{color:var(--plum);font-size:17px}
.castle{height:160px;display:grid;place-items:center;font-size:100px;position:relative}
.star{position:absolute;color:var(--accent);font-size:25px}
.s1{left:20%;top:15px}.s2{right:20%;top:24px}.s3{left:29%;bottom:8px}.s4{right:28%;bottom:12px}
.meta{display:flex;gap:15px;flex-wrap:wrap;color:var(--plum);font-size:13px;font-weight:700;margin:15px 0 20px}
.btn{border:0;border-radius:14px;padding:13px 17px;font-weight:850}
.primary{background:var(--plum);color:white;width:100%;box-shadow:0 5px 0 #523253}
.secondary{background:white;border:1px solid var(--line);color:var(--plum)}
.content{padding:24px clamp(8px,3vw,23px) 12px}
.progressrow{display:flex;justify-content:space-between;color:var(--muted);font-size:13px;font-weight:800}
.track{height:7px;background:#f0e5ee;border-radius:99px;overflow:hidden;margin:10px 0 25px}
.fill{height:100%;background:var(--accent);transition:width .2s}
.question{text-align:center}
.note{text-align:center;color:var(--muted);font-size:14px}
.options{display:grid;gap:10px}
.option{display:flex;align-items:center;gap:12px;text-align:left;width:100%;padding:14px;background:white;border:1px solid var(--line);border-radius:15px;color:var(--ink)}
.option.selected{background:var(--pink);border:2px solid var(--accent);padding:13px}
.letter{width:32px;height:32px;flex:0 0 32px;border-radius:10px;background:#f5edf3;display:grid;place-items:center;color:var(--plum);font-weight:850}
.selected .letter{background:var(--accent);color:white}
.nav{display:flex;gap:10px;margin-top:22px}
.nav .secondary{min-width:95px}
.nav .primary{flex:1}
.result{text-align:center}
.princess-img{width:180px;height:180px;object-fit:cover;border-radius:26px;margin:6px auto 10px;display:block;box-shadow:0 14px 34px #643c5f40;border:3px solid #fff}
.tag{display:inline-block;background:#f2d9e9;color:var(--plum);border-radius:99px;padding:7px 12px;font-size:12px;font-weight:900}
.quote{background:#faf5f9;border:1px solid var(--line);border-radius:15px;padding:15px;color:var(--plum);font-style:italic;margin:18px 0}
.tiny{text-align:center;font-size:12px;color:var(--muted);margin:14px 0}
.footer{padding:20px 12px 10px;color:var(--muted);font-size:13px}
.footer strong{color:var(--ink)}
.copyright{text-align:center;font-size:11px;border-top:1px solid var(--line);padding-top:12px;margin-top:16px}
[hidden]{display:none!important}
@media(max-width:480px){.princess-img{width:150px;height:150px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}