/* Notification center styles reused from Hat Lab, with Studio sizing below. */
:root{--sans:Nunito,sans-serif;--serif:Fredoka,sans-serif}
.notification-center{position:relative;z-index:80;flex-shrink:0}
.notification-button{position:relative;display:grid;place-items:center;width:49px;height:49px;background:#d4b3f2;border:2px solid #b18bcf;border-radius:18px;box-shadow:0 3px 0 #ba93d3;transition:transform .25s var(--bounce),box-shadow .25s}
.notification-button svg{width:35px;height:35px;fill:#fff;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 0 #b598cc);transform-origin:50% 12%;transform-box:view-box}
.notification-button.bell-ringing svg{animation:bell-ring .7s ease-in-out 1}
.notification-button #notification-count{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:1px 5px;border-radius:15px;background:#ff9fb9;border:2px solid white;color:#8b3869;font:700 10px/15px var(--sans)}
.notification-panel{position:absolute;right:0;top:calc(100% + 13px);width:min(390px,calc(100vw - 28px));max-height:min(600px,72dvh);background:#fffcff;border:2px solid #d3b7e5;border-radius:24px;box-shadow:0 8px 0 #dac0eb99,0 15px 35px #8760a533;overflow:hidden;animation:notification-pop .25s var(--bounce) backwards}
.notification-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 18px;background:#f2e5ff;border-bottom:1px solid #e3d0ef}
.notification-heading h2{font:600 24px/1.3 var(--serif);margin:0;color:#9466b2}
.notification-heading button{width:32px;height:32px;border-radius:50%;background:#fff8;font-size:25px;color:#9970b1}
.notification-list{max-height:min(510px,59dvh);overflow:auto;overscroll-behavior:contain;padding:8px}
.notification-entry{display:block;width:100%;text-align:left;border:1px solid #eadcf2;background:#fff;padding:13px;border-radius:16px;margin-bottom:8px;color:#80608f;font-size:13px;line-height:1.65;overflow-wrap:anywhere;transition:background .2s,transform .2s}
.notification-entry.unread{background:#f3e8ff}
.notification-kind{display:block;font-size:9px;color:#a287b5;letter-spacing:.8px;margin-bottom:4px}
.notification-question{display:block;font-size:12px;color:#9a7bab;margin-top:6px}
.notification-preview{display:block;margin:6px 0;padding:8px 10px;background:#f8f0ff;border-radius:10px;font-size:12px;white-space:pre-wrap}
.notification-entry time{display:block;font-size:10px;color:#af96bf;margin-top:6px}
.notification-empty{font-size:13px;line-height:1.8;padding:13px;color:#a184b3}
@keyframes bell-ring{0%,100%{transform:rotate(0)}12%{transform:rotate(22deg)}25%{transform:rotate(-21deg)}38%{transform:rotate(18deg)}51%{transform:rotate(-15deg)}64%{transform:rotate(11deg)}77%{transform:rotate(-7deg)}90%{transform:rotate(3deg)}}
@keyframes notification-pop{from{opacity:0;transform:translateY(-8px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(hover:hover) and (pointer:fine){.notification-button:hover{transform:scale(1.09);box-shadow:0 5px 0 #ba93d3}
.notification-entry:hover{background:#f2e5ff;transform:translateY(-1px)}}
@media(max-width:760px){.notification-button{width:44px;height:44px;border-radius:15px}
.notification-button svg{width:31px;height:31px}
.notification-panel{position:fixed;right:12px;top:70px;width:calc(100vw - 24px);max-height:72dvh;z-index:100}
.notification-list{max-height:calc(72dvh - 70px)}}
@media(prefers-reduced-motion:reduce){.notification-button.bell-ringing svg,.notification-panel{animation:none!important}
.notification-button,.notification-entry{transition:none}}
.notification-button svg{position:relative;left:-2px}
.notification-button{width:42px;height:42px;border-radius:15px;padding:0}
.notification-button svg{width:29px;height:29px}
@media(max-width:760px){.notification-button{width:38px;height:38px;border-radius:13px}
.notification-button svg{width:26px;height:26px}}
.notification-button{box-sizing:border-box;display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;min-height:0;padding:0;border:2px solid #b18bcf;border-radius:15px;background:#d4b3f2;box-shadow:0 3px 0 #ba93d3;transition:transform .25s var(--bounce),box-shadow .25s}
.notification-button svg{display:block;position:static;left:auto;top:auto;width:27px;height:27px;fill:white;stroke:none;filter:drop-shadow(0 2px 0 #b598cc)}
.notification-button svg{width:29px;height:29px;stroke:white;stroke-width:1.5;transform-origin:50% 12%}
.notification-controls{display:flex;align-items:center;gap:7px;flex-shrink:0}
.notification-heading button{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;padding:0;line-height:1;border:1px solid #dfc8ed}
.notification-heading button svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.notification-heading .danger-circle{color:#c44d66;background:#ffe6ec;border-color:#efb9c7}
.notification-heading h2{font-size:22px}
.notification-panel.notification-fading{opacity:0;transform:translateY(-7px);transition:opacity .3s,transform .3s}
@media(max-width:760px){.notification-center{grid-column:2;grid-row:1;justify-self:end}
.notification-button{width:40px;height:40px;flex-basis:40px;border-radius:14px}
.notification-button svg{width:28px;height:28px}
.notification-panel{top:66px;right:12px;max-height:73dvh}
.notification-heading{padding:12px}
.notification-heading h2{font-size:21px}
.notification-list{max-height:calc(73dvh - 70px)}}
@media(prefers-reduced-motion:reduce){.notification-panel.notification-fading{transform:none}
.notification-panel{transition:none}}
@media(max-width:760px){.notification-center{margin-right:50px}}
@media(min-width:761px) and (max-width:1100px){.notification-button{width:38px;height:38px;flex-basis:38px}}
@media(max-width:760px){.notification-button{position:relative;grid-column:auto;grid-row:auto;justify-self:auto;flex:0 0 29px;width:29px;height:32px;min-height:0;padding:0;margin:0;border-radius:11px}
.notification-center{grid-column:auto;grid-row:auto;margin:0;justify-self:auto}
.notification-button svg{width:21px;height:21px}
.notification-panel{top:66px}}
@media(max-width:350px){.notification-button{width:26px;flex-basis:26px;height:30px}}
.notification-open{display:block;width:100%;padding:0;text-align:left;line-height:inherit;font-size:inherit;color:inherit}
.notification-vote-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.notification-vote-actions .btn{flex:1;min-height:40px}
.notification-entry{cursor:default}
.notification-entry:has([data-vote]){border-color:#d4b4e8}
@media(max-width:760px){.notification-vote-actions .btn{min-height:44px}}
.dark-mode .notification-panel{background:#3b3743;border-color:#8b6b9e;box-shadow:0 7px 0 #28263099}
.dark-mode .notification-open,.dark-mode .notification-question,.dark-mode .notification-entry time,.dark-mode .notification-empty{color:#e0cbed}
.dark-mode .notification-heading{background:#51415f;border-color:#786187}
.dark-mode .notification-heading h2{color:#eed5ff}
.dark-mode .notification-heading button{background:#665272;color:#f1dffa;border-color:#80648f}
.dark-mode .notification-heading .danger-circle{background:#67414b;color:#ffb7ca;border-color:#ab6f83}
.dark-mode .notification-entry{background:#433b4b;border-color:#665171;color:#e5d2f2}
.dark-mode .notification-entry.unread{background:#594365}
.dark-mode .notification-preview{background:#51425d;color:#ecdcf6}
@media(hover:hover) and (pointer:fine){.dark-mode .notification-entry:hover{background:#5b4869}}
.notification-controls #mute-notifications[aria-pressed="true"]{background:#e7b2cd;color:#853858;border-color:#bd769e}
.dark-mode .notification-controls #mute-notifications[aria-pressed="true"]{background:#71455b;color:#ffcfdf}
@media(max-width:760px){.notification-heading h2{font-size:20px}
.notification-controls{gap:5px}}
html.animations-off .notification-panel{animation:none!important}
.notification-tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #ddc7eb;background:#f5eaff;padding:8px 12px;gap:8px}
.notification-tabs button{min-height:40px;font:600 15px var(--serif);border:1.5px solid transparent;border-radius:12px;color:#9d75b4;background:none;cursor:pointer}
.notification-tabs button.active{background:#dfc4f4;border-color:#b58ace;color:#774a92}
.notification-tabs span{display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:50%;background:#fff9ff;font-size:11px;margin-left:5px}
.notification-feed-toolbar{display:flex;justify-content:flex-end;padding:8px 15px 0}
.clear-feed{display:inline-flex;gap:6px;align-items:center;border:0;background:transparent;color:#c95875;font:500 12px var(--serif);cursor:pointer;min-height:32px}
.clear-feed svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#activity-feed[hidden],#updates-feed[hidden]{display:none!important}
.site-update{padding:18px;margin:12px;background:#faf5ff;border:1px solid #dac4e9;border-radius:18px;color:#89649f}
.site-update .update-label{font-size:9px;letter-spacing:1px;color:#ab83c1}
.site-update h3{font:600 20px/1.3 var(--serif);color:#8b56a7;margin:8px 0}
.site-update time{font-size:11px;color:#a17caf}
.site-update ul{margin:14px 0 0;padding-left:20px}
.site-update li{font-size:13px;line-height:1.7;margin:10px 0}
.site-update a{color:#83509f;text-decoration:underline;font-weight:600}
.dark-mode .notification-tabs{background:#4d3c59;border-color:#856394}
.dark-mode .notification-tabs button{color:#d6b4e9}
.dark-mode .notification-tabs button.active{background:#8a65a3;color:#fff2ff;border-color:#b990d2}
.dark-mode .notification-tabs span{background:#4d3b5c}
.dark-mode .site-update{background:#493b52;border-color:#856194;color:#dfc9eb}
.dark-mode .site-update h3,.dark-mode .site-update a{color:#e3bbfc}
.dark-mode .site-update time,.dark-mode .site-update .update-label{color:#c4a0d7}
.dark-mode .clear-feed{color:#ff9bb3}
@media(max-width:760px){.notification-list{max-height:calc(73dvh - 170px)}
.site-update{margin:10px;padding:15px}
.site-update li{font-size:13px}
.site-update h3{font-size:20px}}
.notification-panel{display:flex;flex-direction:column;max-height:min(650px,calc(100dvh - 110px));overflow:hidden}
.notification-heading,.notification-tabs{flex:none}
#activity-feed,#updates-feed{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;overflow:hidden}
.notification-feed-toolbar{flex:none;padding:3px 12px;min-height:32px;border-bottom:1px solid #eadcf2}
.clear-feed{min-height:26px;font-size:12px;padding:2px 4px}
.notification-panel .notification-list{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto;overflow-x:hidden;padding:9px 11px 14px;scroll-padding-bottom:14px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.site-update{margin:0 0 10px;padding:15px;background:#faf5ff}
.site-update h3{font-size:20px;margin:5px 0}
.site-update ul{margin-top:10px;padding-left:19px}
.site-update li{line-height:1.55;margin:8px 0;font-size:13px}
.site-update a{display:inline-block;font-size:12px}
.notification-footer{text-align:center;margin:10px 0 2px;padding:8px 4px 4px;font-size:11px;color:#9879a9;line-height:1.5}
.notification-tabs .unread-dot{display:inline-block;vertical-align:middle;width:8px;height:8px;min-width:8px;background:#ed4359;border:0;border-radius:50%;margin-left:6px;padding:0}
.notification-button #notification-count{width:11px;height:11px;min-width:11px;padding:0;background:#ed4359;border:2px solid #fff;border-radius:50%;top:-3px;right:-3px;box-shadow:none}
.dark-mode .notification-footer{color:#c9addb}
.dark-mode .notification-feed-toolbar{border-color:#70567e}
@media(max-width:760px){.notification-panel{top:66px;left:12px;right:12px;max-height:calc(100dvh - 146px);width:auto}
.notification-heading{padding:10px 12px}
.notification-tabs{padding:6px 10px}
.notification-tabs button{min-height:36px}}
.site-update[data-update-id="official-domain-live-20261025"]{background:#fff5d9;border-color:#d9b96d;color:#75532a}
.site-update[data-update-id="official-domain-live-20261025"] h3{color:#88601f}
.site-update[data-update-id="official-domain-live-20261025"] time,.site-update[data-update-id="official-domain-live-20261025"] .update-label{color:#947238}
.dark-mode .site-update[data-update-id="official-domain-live-20261025"]{background:#51452f;border-color:#a88a50;color:#f0dfb9}
.dark-mode .site-update[data-update-id="official-domain-live-20261025"] h3{color:#ffe2a0}
.dark-mode .site-update[data-update-id="official-domain-live-20261025"] time,.dark-mode .site-update[data-update-id="official-domain-live-20261025"] .update-label{color:#d9bd81}

.notification-center{margin:0;grid-column:auto;grid-row:auto}.notification-button{width:39px;height:39px;border-radius:14px;cursor:pointer;padding:0}.notification-button svg{width:28px;height:28px}.notification-button #notification-count{width:10px;min-width:10px;height:10px;top:-2px;right:-2px;padding:0;background:#ed4359}.notification-heading button{border:0;display:grid;place-items:center;cursor:pointer}.notification-heading button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2}.notification-panel{z-index:100;max-height:min(650px,calc(100dvh - 105px))}.notification-panel [role=tabpanel]{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.notification-feed-toolbar{flex:none}.notification-open{display:block;border:0;background:none;text-align:left;padding:0;width:100%;font:inherit;color:inherit;cursor:pointer}.notification-panel .notification-list{min-height:0;overflow:auto}.notification-entry strong{font-weight:700}.notification-button:focus-visible,.notification-tabs button:focus-visible{outline:3px solid #9865d8;outline-offset:2px}.notification-fading{opacity:0;transition:opacity .3s}.settings-navigation{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 20px}.hatlab-link{text-decoration:none;display:block}.beat-buttons [data-drag-entry]{margin-left:auto;align-self:center}.script-scroll .action-beat .beat-buttons [data-drag-entry]{margin-left:12px}.script-scroll .action-beat .beat-buttons{min-width:225px}.uppercase-location{text-transform:uppercase}
@media(max-width:820px){.notification-panel{position:fixed;left:10px;right:10px;top:64px;width:auto;max-height:calc(var(--studio-vh,100dvh) - 80px)}.notification-button{width:34px;height:34px;flex:none}.notification-button svg{width:25px;height:25px}.topbar .notification-center{flex:none}.notification-heading h2{font-size:21px}.notification-tabs button{min-height:38px}.settings-navigation .button{min-height:42px}.mobile-keyboard .notification-panel{top:48px;max-height:calc(var(--studio-vh,100dvh) - 65px)}}
@media(max-width:600px){.notification-button{width:31px;height:32px;border-radius:11px}.topbar{gap:5px}.script-scroll .action-beat .beat-buttons{min-width:0}.script-scroll .beat-buttons [data-drag-entry]{min-width:30px}.notification-heading{padding:10px 12px}.notification-panel .notification-list{padding:8px 10px 12px}}