/* Find your frequency */
.find { background: radial-gradient(900px 520px at 50% 0, #ece5ff 0%, rgba(236, 229, 255, 0) 70%), #fff; }
.find .nav nav a[aria-current] { color: var(--royal); }
.tool { width: min(680px, 100% - 32px); margin: 18px auto 0; }
.prog { height: 6px; border-radius: 6px; background: rgba(90, 63, 192, .12); overflow: hidden; }
.prog i { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, #5a3fc0, #b048ac); transition: width .4s; }
.stepname { margin: 12px 2px 10px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--royal); min-height: 20px; }
.tool .card { padding: clamp(22px, 5vw, 40px); border-radius: 28px; min-height: 430px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 0 0 1px var(--line), 0 24px 60px rgba(60, 40, 130, .12); }
.tool h1 { font-size: clamp(28px, 5vw, 40px); line-height: 1.1; }
.tool h2 { font-size: clamp(22px, 3.6vw, 28px); }
.tool p { color: #33333b; }
.tool .sub { color: var(--muted); font-size: 15px; }
.tool-note { text-align: center; color: var(--muted); font-size: 13.5px; margin: 16px auto 0; max-width: 520px; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.end { margin-top: auto; padding-top: 8px; }
.btn.big { height: 60px; padding: 0 28px; font-size: 18px; border-radius: 18px; }
.btn.wide { flex: 1 1 150px; }
.btn.quiet { background: #f3effc; color: var(--royal); box-shadow: none; }
.btn.quiet:hover { background: #e8e1fb; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.linkbtn { font: inherit; font-weight: 600; font-size: 14.5px; color: var(--royal); background: none; border: 0; padding: 6px 2px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
kbd.k { font: inherit; font-size: 12px; font-weight: 700; background: rgba(255, 255, 255, .25); border-radius: 6px; padding: 1px 7px; box-shadow: none; color: inherit; margin-left: 4px; }
.quiet kbd.k, .btn-white kbd.k { background: rgba(90, 63, 192, .12); }

/* choices */
.opts { display: grid; gap: 10px; }
.opts.cols { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.opt { font: inherit; text-align: left; display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 16px; border: 0; background: #f6f3fc; cursor: pointer; font-weight: 600; color: var(--ink); box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .15s, background .15s; }
.opt:hover { background: #efe9fb; }
.opt[aria-pressed="true"], .opt[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--royal); background: #efe9ff; }
.opt small { display: block; font-weight: 500; color: var(--muted); font-size: 13.5px; }
.opt .box { flex: none; width: 22px; height: 22px; border-radius: 7px; box-shadow: inset 0 0 0 2px #b9b2d0; display: grid; place-items: center; color: #fff; font-size: 14px; }
.opt[aria-pressed="true"] .box { background: var(--royal); box-shadow: none; }
.warn { background: #fff4e5; border-radius: 16px; padding: 16px 18px; color: #6b3d00; }
.warn b { display: block; margin-bottom: 4px; }
.tip { background: #f1ecff; border-radius: 14px; padding: 12px 16px; font-size: 14.5px; color: #3a2a80; }

/* the orb: shows that sound is playing, and how loud */
.orbwrap { display: grid; place-items: center; padding: 10px 0; }
.orb { --s: 0; width: 148px; height: 148px; border-radius: 50%; position: relative; background: radial-gradient(circle at 35% 30%, #c9b9ff, #6a4df0 55%, #8e2f86); box-shadow: 0 18px 40px rgba(90, 63, 192, .35); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 34px; transition: transform .2s, filter .3s; filter: saturate(.55) brightness(1.08); }
.orb.on { filter: none; transform: scale(1.04); }
.orb::before, .orb::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2px rgba(106, 77, 240, .5); opacity: 0; }
.orb.on::before { animation: ring 1.4s ease-out infinite; }
.orb.on::after { animation: ring 1.4s ease-out .7s infinite; }
@keyframes ring { from { transform: scale(1); opacity: .7; } to { transform: scale(1.6); opacity: 0; } }
.orb.small { width: 92px; height: 92px; font-size: 24px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pair.three { grid-template-columns: repeat(3, 1fr); }
.pick2 { font: inherit; border: 0; cursor: pointer; border-radius: 22px; padding: 18px 10px 16px; background: #f6f3fc; display: grid; justify-items: center; gap: 12px; font-weight: 700; color: var(--ink); box-shadow: inset 0 0 0 2px transparent; }
.pick2:hover { background: #efe9fb; }
.pick2[aria-pressed="true"] { box-shadow: inset 0 0 0 2.5px var(--royal); background: #efe9ff; }
.dots { display: flex; gap: 6px; }
.dots i { width: 22px; height: 5px; border-radius: 5px; background: rgba(90, 63, 192, .16); }
.dots i.d { background: var(--royal); }
.meter { height: 10px; border-radius: 10px; background: #efeaf9; overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #b9a8ff, #5a3fc0); }

/* slider stage */
.tune { display: grid; gap: 14px; }
.tune input[type=range] { width: 100%; height: 44px; accent-color: var(--royal); margin: 0; }
.tune .ends { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); font-weight: 600; }
.seg2 { display: inline-flex; padding: 4px; border-radius: 14px; background: #f1edf9; }
.seg2 button { font: inherit; font-weight: 600; font-size: 14.5px; border: 0; background: none; padding: 8px 16px; border-radius: 10px; cursor: pointer; color: var(--muted); }
.seg2 button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(22, 22, 24, .15); }

/* result */
.big-hz { font-size: clamp(54px, 12vw, 88px); font-weight: 700; letter-spacing: -.04em; line-height: 1; background: linear-gradient(95deg, #5a3fc0, #8e2f86); -webkit-background-clip: text; background-clip: text; color: transparent; }
.big-hz small { font-size: .32em; letter-spacing: 0; margin-left: 8px; }
.conf { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 99px; font-weight: 700; font-size: 14px; }
.conf.high { background: #e3f7ec; color: #0c6b3a; } .conf.medium { background: #fff1d6; color: #7a4a00; } .conf.low { background: #fde6e6; color: #8a1f1f; }
.ruler { position: relative; height: 92px; margin: 6px 0 2px; }
.ruler .track { position: absolute; left: 0; right: 0; top: 34px; height: 12px; border-radius: 12px; background: linear-gradient(90deg, #dcd3ff, #b9a8ff 50%, #e8a6e0); }
.ruler .band { position: absolute; top: 22px; height: 36px; border-radius: 10px; background: rgba(90, 63, 192, .14); box-shadow: inset 0 0 0 1.5px rgba(90, 63, 192, .35); }
.ruler .range { position: absolute; top: 31px; height: 18px; border-radius: 9px; background: var(--royal); opacity: .55; }
.ruler .pin { position: absolute; top: 14px; width: 4px; height: 52px; margin-left: -2px; border-radius: 4px; background: #1a1429; }
.ruler .tick { position: absolute; top: 66px; transform: translateX(-50%); font-size: 12px; color: var(--muted); font-weight: 600; }
.ruler .lbl { position: absolute; top: 0; transform: translateX(-50%); font-size: 11.5px; font-weight: 700; color: var(--royal); white-space: nowrap; }
.facts { display: grid; gap: 8px; padding: 0; margin: 0; list-style: none; font-size: 15px; }
.facts li { padding-left: 22px; position: relative; color: #33333b; }
.facts li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--royal); }
.cta-card { border-radius: 20px; padding: 20px; color: #fff; background: radial-gradient(500px 260px at 100% 0, #8f7bff, transparent 70%), linear-gradient(140deg, #3a1f9c, #6a3fd0 60%, #a44fc8); display: grid; gap: 10px; }
.cta-card p { color: rgba(255, 255, 255, .9); }
.hist { font-size: 14.5px; color: var(--muted); }
.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); background: #161618; color: #fff; padding: 10px 18px; border-radius: 12px; font-weight: 600; font-size: 14.5px; z-index: 50; }

.how { padding: clamp(70px, 9vw, 120px) 0 0; }
.how .cards.two { grid-template-columns: 1fr 1fr; margin-top: 24px; }
@media (max-width: 860px) { .how .cards.two { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .pair.three { grid-template-columns: 1fr; } .orb { width: 120px; height: 120px; } }
@media (prefers-reduced-motion: reduce) { .orb.on::before, .orb.on::after { animation: none; opacity: .5; transform: scale(1.25); } }
.tool [tabindex="-1"]:focus { outline: none; }
.pick2 kbd.k { margin: 0; background: rgba(90, 63, 192, .12); }