*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Quicksand",sans-serif;background:#eef2f7;color:#3d4a5c;min-height:100vh;background-image:radial-gradient(circle at 15% 20%,#ffe4f0,transparent 40%),radial-gradient(circle at 85% 15%,#d9f2ff,transparent 35%),radial-gradient(circle at 50% 90%,#e4ffe8,transparent 40%)}
.nav{display:flex;justify-content:space-between;padding:1.3rem clamp(1.2rem,4vw,3rem);font-weight:700;font-size:.85rem}
.nav a{color:#3d4a5c;text-decoration:none;background:#fff;padding:.55rem 1rem;border-radius:999px;box-shadow:0 8px 24px rgba(61,74,92,.08)}
.app{max-width:560px;margin:0 auto;padding:1rem clamp(1.2rem,4vw,3rem) 4rem}
.top{margin-bottom:1.5rem}
.brand{font-weight:700;font-size:clamp(3rem,10vw,4.5rem);line-height:.9;color:#4668c9;margin-bottom:.5rem}
.tag{opacity:.75}
.panel{background:#fff;border-radius:28px;padding:1.5rem;box-shadow:0 18px 40px rgba(61,74,92,.08)}
.panel h1{font-size:1.4rem;margin-bottom:1.2rem}
.pills{display:flex;flex-wrap:wrap;gap:.75rem;border:0;margin-bottom:1.25rem}
.pills legend{width:100%;margin-bottom:.35rem;font-weight:700}
.pills label{cursor:pointer}
.pills input{position:absolute;opacity:0;pointer-events:none}
.pills span{display:block;font-weight:700;background:#eef2f7;color:#3d4a5c;padding:.8rem 1.2rem;border-radius:999px;transition:background .2s ease,color .2s ease}
.pills input:checked + span{background:#4668c9;color:#fff}
.pills input:focus-visible + span{outline:3px solid #3d4a5c;outline-offset:3px}
.row{display:flex;justify-content:space-between;align-items:center;padding:1rem 0;border-top:1px solid #e8edf4;font-weight:700}
.switch{position:relative;width:52px;height:30px}
.switch input{opacity:0;position:absolute}
.switch span{position:absolute;inset:0;background:#d7dee8;border-radius:999px;transition:background .2s ease}
.switch span::after{content:"";position:absolute;width:24px;height:24px;border-radius:50%;background:#fff;top:3px;left:3px;box-shadow:0 2px 6px rgba(0,0,0,.15);transition:transform .2s ease}
.switch input:checked + span{background:#4668c9}
.switch input:checked + span::after{transform:translateX(22px)}
.slider{display:grid;gap:.6rem;padding:1rem 0;border-top:1px solid #e8edf4;font-weight:700;margin-bottom:1rem}
.slider input{width:100%;accent-color:#4668c9}
.cta{display:inline-block;text-decoration:none;background:#4668c9;color:#fff;font-weight:700;padding:.95rem 1.4rem;border-radius:999px;box-shadow:0 10px 30px rgba(70,104,201,.25);transition:transform .2s ease}
.cta:hover{transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}