.preferences-example{--beam:#4d9bf0;--ice:#bfdbfe;--mist:#8fa5c8;--faint:#5d6f92;--mint:#8fc4ff;--glass:#0d1c388c;--edge:#9fc7ff29;--ink:#eaf2ff;width:100%;line-height:normal;font-family:var(--font-inter), system-ui, sans-serif;color:var(--ink);position:relative}:root:not(.dark) .preferences-example{--beam:#0066d6;--ice:#0052ac;--mist:#44587a;--faint:#7e90ac;--mint:#0052ac;--glass:#ffffffb3;--edge:#0b1e3f1f;--ink:#0b1e3f}.preferences-example .top{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:14px;margin-bottom:20px;display:flex}.preferences-example .ctx{letter-spacing:.08em;color:var(--faint);order:1;font-size:1rem;font-weight:600}.preferences-example .prog{order:2;gap:7px;display:flex}.preferences-example .prog i{background:#9fc7ff29;border-radius:99px;width:30px;height:3.5px;transition:background .4s;display:block}:root:not(.dark) .preferences-example .prog i{background:#0b1e3f1f}.preferences-example .prog i.on{background:linear-gradient(90deg,#7fb4f5,#3b82f6)}:root:not(.dark) .preferences-example .prog i.on{background:linear-gradient(90deg,#0066d6,#0052ac)}.preferences-example .heart{width:100%;max-width:660px;margin:0 auto}.preferences-example .beat{animation:.55s cubic-bezier(.2,.8,.2,1) prefs-beat-in}@keyframes prefs-beat-in{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}.preferences-example .whisper{letter-spacing:.28em;text-transform:uppercase;color:var(--faint);margin-top:16px;font-size:.96rem;font-weight:600;line-height:1.5}.preferences-example .chips{flex-wrap:wrap;gap:10px;margin-top:24px;display:flex}.preferences-example .chips.loose{margin-top:14px}.preferences-example .chip{text-align:left;color:var(--ink);cursor:pointer;background:var(--glass);border:1px solid var(--edge);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:999px;padding:12px 20px;font-family:inherit;font-size:1rem;font-weight:600;line-height:normal;transition:border-color .2s,box-shadow .2s,transform .15s}.preferences-example .chip:hover{border-color:#7fb4f566}:root:not(.dark) .preferences-example .chip:hover{border-color:#0066d673}.preferences-example .chip[aria-pressed=true]{border-color:#7fb4f5bf;box-shadow:0 0 0 4px #3b82f621,0 12px 34px -14px #2563eb8c}:root:not(.dark) .preferences-example .chip[aria-pressed=true]{border-color:#0066d6b3;box-shadow:0 0 0 4px #0066d61f,0 12px 34px -14px #0052ac66}.preferences-example .chip em{color:var(--faint);margin-left:6px;font-size:1rem;font-style:normal;font-weight:500}.preferences-example .chip[aria-pressed=true] em{color:var(--ice)}.preferences-example .chiplbl{letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin:22px 0 -12px;font-size:.96rem;font-weight:700}.preferences-example .soft-note{color:var(--faint);max-width:52ch;margin-top:14px;font-size:1.05rem;line-height:1.6}.preferences-example .soft-note b{color:var(--mist)}.preferences-example .vis{cursor:pointer;-webkit-user-select:none;user-select:none;background:#7db8ff0f;border:1px solid #7db8ff4d;border-radius:999px;align-items:center;gap:9px;margin-top:22px;padding:8px 16px;font-family:inherit;transition:background .2s,border-color .2s;display:inline-flex}.preferences-example .vis .sw{background:#7db8ffb3;border-radius:99px;flex-shrink:0;width:30px;height:17px;transition:background .2s;position:relative}.preferences-example .vis .sw:after{content:"";background:#061225;border-radius:50%;width:13px;height:13px;transition:left .2s;position:absolute;top:2px;left:15px}.preferences-example .vis span:last-child{color:var(--mint);font-size:1.05rem;font-weight:600}.preferences-example .vis[aria-checked=false]{border-color:var(--edge);background:#9fc7ff0d}.preferences-example .vis[aria-checked=false] .sw{background:#9fc7ff40}.preferences-example .vis[aria-checked=false] .sw:after{background:#8fa5c8;left:2px}.preferences-example .vis[aria-checked=false] span:last-child{color:var(--faint)}:root:not(.dark) .preferences-example .vis{background:#0052ac12;border-color:#0052ac59}:root:not(.dark) .preferences-example .vis .sw{background:#0052aca6}:root:not(.dark) .preferences-example .vis[aria-checked=false]{border-color:var(--edge);background:#0b1e3f0a}:root:not(.dark) .preferences-example .vis[aria-checked=false] .sw{background:#0b1e3f33}:root:not(.dark) .preferences-example .vis[aria-checked=false] .sw:after{background:#7e90ac}.preferences-example .ctarow{flex-wrap:wrap;align-items:center;gap:14px;margin-top:30px;display:flex}.preferences-example .go{color:#061225;cursor:pointer;background:linear-gradient(135deg,#eaf4ff,#bfdbfe 60%,#93c5fd);border:none;border-radius:14px;padding:14px 28px;font-family:inherit;font-size:1.05rem;font-weight:600;line-height:normal;transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .25s,opacity .2s;box-shadow:0 8px 26px -8px #93c5fd80}.preferences-example .go:hover{box-shadow:0 12px 34px -8px #93c5fdb3}.preferences-example .go:active{transform:scale(.97)}.preferences-example .go:disabled{opacity:.32;cursor:not-allowed;box-shadow:none;transform:none}.preferences-example .go.warm{background:linear-gradient(135deg,#ffefd8,#f8d9a6 60%,#f0be76);box-shadow:0 8px 26px -8px #f3c98b80}:root:not(.dark) .preferences-example .go{color:#f5faff;background:linear-gradient(135deg,#0066d6,#0052ac 60%,#0b1e3f);box-shadow:0 8px 26px -8px #0066d673}:root:not(.dark) .preferences-example .go:hover{box-shadow:0 12px 34px -8px #0066d699}:root:not(.dark) .preferences-example .go.warm{color:#fff7ed;background:linear-gradient(135deg,#d97706,#b45309 60%,#92400e);box-shadow:0 8px 26px -8px #b4530966}:root:not(.dark) .preferences-example .go.warm:hover{box-shadow:0 12px 34px -8px #b453098c}.preferences-example .ghostlink{color:var(--mist);cursor:pointer;background:0 0;border:none;border-bottom:1px solid #8fa5c859;border-radius:0;padding:0 0 2px;font-family:inherit;font-size:.96rem;font-weight:600;transition:color .2s}.preferences-example .ghostlink:hover{color:var(--ink)}:root:not(.dark) .preferences-example .ghostlink{border-bottom-color:#44587a59}.preferences-example .review{background:var(--glass);border:1px solid var(--edge);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:18px;flex-direction:column;margin-top:22px;padding:6px 22px;display:flex}.preferences-example .rrow{border-bottom:1px solid #9fc7ff1a;align-items:center;gap:14px;padding:14px 0;display:flex}:root:not(.dark) .preferences-example .rrow{border-bottom-color:#0b1e3f1a}.preferences-example .rrow:last-child{border-bottom:none}.preferences-example .rk{letter-spacing:.1em;text-transform:uppercase;width:150px;color:var(--faint);flex-shrink:0;font-size:.98rem;font-weight:700;line-height:1.4}.preferences-example .rv{overflow-wrap:anywhere;flex:1;min-width:0;font-size:1rem;font-weight:600;line-height:1.5}.preferences-example .rv em{color:var(--mist);font-style:normal;font-weight:500}.preferences-example .redit{color:var(--beam);cursor:pointer;background:0 0;border:none;flex-shrink:0;padding:0;font-family:inherit;font-size:.87rem;font-weight:600}.preferences-example .redit:hover{color:var(--ice)}.preferences-example .rvis{cursor:pointer;border-radius:999px;flex-shrink:0;padding:5px 12px;font-family:inherit;font-size:.76rem;font-weight:700;transition:color .2s,background .2s,border-color .2s}.preferences-example .rvis.on{color:var(--mint);background:#7db8ff14;border:1px solid #7db8ff4d}:root:not(.dark) .preferences-example .rvis.on{color:#0052ac;background:#0052ac14;border-color:#0052ac59}.preferences-example .rvis.off{color:var(--faint);border:1px solid var(--edge);background:#9fc7ff0d}.preferences-example .fresh{color:var(--mist);background:#4d9bf00f;border:1px solid #4d9bf038;border-radius:14px;margin-top:16px;padding:13px 17px;font-size:.94rem;line-height:1.65}.preferences-example .fresh b{color:var(--ink)}:root:not(.dark) .preferences-example .fresh{background:#0066d60f;border-color:#0066d640}.preferences-example :is(button,a):focus-visible{outline:2px solid var(--beam);outline-offset:2px}@media (max-width:720px){.preferences-example .prog{display:none}.preferences-example .top{justify-content:flex-start;margin-bottom:14px}.preferences-example .ctx{font-size:.9rem}.preferences-example .review{padding:6px 16px}.preferences-example .rrow{flex-wrap:wrap}.preferences-example .rk{width:100%}}@media (prefers-reduced-motion:reduce){.preferences-example *,.preferences-example :before,.preferences-example :after{scroll-behavior:auto!important;transition:none!important;animation:none!important}.preferences-example .beat{opacity:1;transform:none}}
