.nav-cluster .surprise-switch{position:relative;display:grid;place-items:center;width:80px;height:74px;padding:0;border:0;border-radius:50%;background:transparent;overflow:visible;isolation:isolate;cursor:pointer;flex-shrink:0;outline-offset:4px}.manual-base{position:relative;display:block;width:72px;height:49px;border-radius:50%;background:linear-gradient(150deg,#fafafa 5%,#b9bdc2 32%,#eeeeef 48%,#73777e 79%,#d7dadf);box-shadow:0 7px 0 #777b82,0 9px 0 #41444a,0 13px 10px #0003,inset 0 1px 2px #fff;transform:translateY(5px)}.manual-base:before{content:'';position:absolute;inset:5px;border-radius:50%;background:#585960;box-shadow:inset 0 3px 5px #0009}.manual-cap{position:absolute;left:7px;right:7px;top:-10px;height:45px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(ellipse at 38% 24%,#ff6c61 0%,#ed302c 44%,#c91418 80%);box-shadow:0 9px 0 #ac0b10,0 12px 0 #7c090e,0 14px 4px #0005,inset 0 2px 2px #ff9d8a,inset 0 -2px 3px #bb1116;transition:transform .16s ease,box-shadow .16s ease,filter .2s;transform:translateY(0)}.manual-cap:before{content:'';position:absolute;inset:6px 9px 20px;border-top:2px solid #ffffff35;border-radius:50%;pointer-events:none}.manual-cap>span{font-family:Arial,Helvetica,sans-serif;font-size:10px;font-weight:800;letter-spacing:1.6px;color:#fff9;text-shadow:0 1px 0 #9007;transform:scaleY(.8)}.surprise-switch:hover .manual-cap,.surprise-switch:focus-visible .manual-cap{filter:brightness(1.08);transform:translateY(2px)}.surprise-switch:active .manual-cap{transform:translateY(9px);box-shadow:0 2px 0 #ac0b10,0 4px 0 #7c090e,0 5px 2px #0005,inset 0 2px 2px #ff9d8a}.surprise-switch .surprise-tooltip{top:calc(100% + 6px);left:50%;right:auto;border:2px solid var(--ink);border-radius:48% 52% 43% 47%;background:var(--paper);color:var(--ink);padding:14px 18px;font-family:Arial,Helvetica,sans-serif;font-size:13px;font-weight:800;font-style:italic;letter-spacing:-.3px;box-shadow:3px 4px 0 var(--ink);transform:translateX(-50%) rotate(-6deg);white-space:nowrap;z-index:90}.surprise-tooltip:before{content:'';position:absolute;top:-8px;left:48%;width:12px;height:12px;background:var(--paper);border-left:2px solid var(--ink);border-top:2px solid var(--ink);transform:rotate(45deg)}@media(max-width:800px){.nav-cluster{gap:10px}.nav-cluster .surprise-switch{width:62px;height:64px}.manual-base{scale:.8}}@media(max-width:580px){.nav-cluster .surprise-switch{width:46px;height:52px;padding:0}.manual-base{scale:.62}.surprise-switch .surprise-tooltip{font-size:11px;padding:12px 14px}}@media(prefers-reduced-motion:reduce){.manual-cap{transition:none}}

/* Center the scaled 49px base inside the button instead of letting its grid row overflow. */
.nav-cluster .surprise-switch{width:48px;height:44px;grid-template-rows:minmax(0,1fr)}.manual-base{scale:.6;transform:none}@media(max-width:800px){.nav-cluster .surprise-switch{width:44px;height:42px}.manual-base{scale:.56}}@media(max-width:580px){.nav-cluster .surprise-switch{width:36px;height:36px}.manual-base{scale:.46}}

/* Expressions are drawn into the cap, so the physical button keeps its shape. */
.surprise-face{width:48px;height:32px;color:#fff;overflow:visible;pointer-events:none;transform:scaleY(.84);filter:none}.surprise-face path{fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}.surprise-face circle{fill:currentColor}.face-upside,.face-happy{display:none}.face-upside{transform:rotate(180deg);transform-origin:24px 16px}.face-cheek{fill:#fff;opacity:1}.surprise-switch:is(:hover,:focus-visible) .face-neutral{display:none}.surprise-switch:is(:hover,:focus-visible) .face-upside{display:block}.surprise-switch:is(:active,.is-face-pressed) .face-neutral,.surprise-switch:is(:active,.is-face-pressed) .face-upside{display:none}.surprise-switch:is(:active,.is-face-pressed) .face-happy{display:block}

.manual-cap .surprise-face{color:#fff;stroke:#fff}.manual-cap .surprise-face path{stroke:#fff}.manual-cap .surprise-face circle,.manual-cap .surprise-face .face-cheek{fill:#fff;stroke:none}