/* Shared site-wide experience: Frozen appearance and the temporary demo notice. */
#frozen-aurora {
    position: fixed;
    inset: -12vmax;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    overflow: hidden;
    background:
        radial-gradient(42% 44% at 18% 28%, rgba(78, 106, 140, .18), transparent 74%),
        radial-gradient(38% 42% at 78% 72%, rgba(119, 94, 139, .15), transparent 76%),
        radial-gradient(34% 38% at 52% 46%, rgba(77, 121, 117, .12), transparent 75%);
    filter: blur(58px) saturate(112%);
    transform: translate3d(0, 0, 0) scale(1.03);
    transition: opacity .8s ease;
    animation: frozenDrift 34s ease-in-out infinite alternate;
}

html[data-frozen="true"] #frozen-aurora { opacity: .62; }
html[data-theme="light"][data-frozen="true"] #frozen-aurora { opacity: .48; }
html[data-theme="dark"][data-frozen="true"],
html[data-theme="dark"][data-frozen="true"] body { background-color: #050609 !important; }
html[data-theme="light"][data-frozen="true"],
html[data-theme="light"][data-frozen="true"] body { background-color: #edf1f4 !important; }
html[data-frozen="true"] body { background-image: none !important; isolation: isolate; }
html[data-frozen="true"] body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255,255,255,.025), rgba(255,255,255,0) 52%, rgba(255,255,255,.018));
}
html[data-frozen="true"] :is(.site-nav, .top-nav, .navbar, .overlay-panel, .modal-box, .card, .post-card, .cygnus-card-static, .ps-nav-item, .timeline-card, .timeline-detail) {
    backdrop-filter: blur(28px) saturate(142%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(142%) !important;
    border-color: rgba(255,255,255,.14) !important;
    box-shadow: 0 18px 54px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.09);
}
html[data-theme="dark"][data-frozen="true"] :is(nav, .site-nav, .top-nav, .topbar, .navbar, .sidebar, .nav-links-mobile, .mobile-menu, .dropdown-menu, .lang-dropdown, .submenu, .palette-panel, .overlay-panel, .modal-box, .modal-card, .card, .post-card, .cygnus-card-static, .ps-nav-item, .timeline-card, .timeline-detail) {
    background-color: rgba(8,10,15,.64) !important;
    backdrop-filter: blur(30px) saturate(148%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(148%) !important;
    border-color: rgba(220,232,246,.14) !important;
}
html[data-theme="light"][data-frozen="true"] :is(nav, .site-nav, .top-nav, .topbar, .navbar, .sidebar, .nav-links-mobile, .mobile-menu, .dropdown-menu, .lang-dropdown, .submenu, .palette-panel, .overlay-panel, .modal-box, .modal-card, .card, .post-card, .cygnus-card-static, .ps-nav-item, .timeline-card, .timeline-detail) {
    background-color: rgba(248,251,253,.76) !important;
    backdrop-filter: blur(30px) saturate(138%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(138%) !important;
    border-color: rgba(46,68,91,.18) !important;
    box-shadow: 0 18px 48px rgba(43,58,78,.14), inset 0 1px 0 rgba(255,255,255,.82);
}
html[data-frozen="true"] :is([class~="card"], [class$="-card"], [class~="panel"], [class$="-panel"], [class$="-menu"], [class~="dropdown-menu"], [class$="-modal"], [class*="modal-box"], [class~="sidebar"], [class$="-sidebar"], [class~="topbar"], [class$="-topbar"], [class~="navbar"], details, fieldset, table) {
    backdrop-filter: blur(24px) saturate(138%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(138%) !important;
    background-image: linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.012) 48%, rgba(126,151,178,.035)) !important;
    border-color: rgba(215,228,242,.15) !important;
}
html[data-theme="light"][data-frozen="true"] :is([class~="card"], [class$="-card"], [class~="panel"], [class$="-panel"], [class$="-menu"], [class~="dropdown-menu"], [class$="-modal"], [class*="modal-box"], [class~="sidebar"], [class$="-sidebar"], [class~="topbar"], [class$="-topbar"], [class~="navbar"], details, fieldset, table) {
    background-image: linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,255,255,.18) 48%, rgba(92,126,160,.075)) !important;
    border-color: rgba(51,75,99,.17) !important;
}
html[data-frozen="true"] :is(input, textarea, select) {
    background-color: rgba(8,11,16,.48) !important;
}
html[data-theme="light"][data-frozen="true"] :is(input, textarea, select) {
    background-color: rgba(255,255,255,.62) !important;
}

/* A navigation bar is one glass surface. Layout wrappers inside it must never
   become separate frosted rectangles. */
html[data-frozen="true"] .navbar {
    height: 70px;
    background-color: rgba(8, 11, 17, .74) !important;
    background-image: linear-gradient(100deg, rgba(148,172,197,.075), transparent 34%, rgba(113,93,137,.045)) !important;
    border-bottom: 1px solid rgba(215,228,242,.14) !important;
    box-shadow: 0 14px 38px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.055) !important;
    backdrop-filter: blur(28px) saturate(142%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(142%) !important;
}
html[data-theme="light"][data-frozen="true"] .navbar {
    background-color: rgba(246,249,251,.78) !important;
    background-image: linear-gradient(100deg, rgba(89,132,171,.10), transparent 38%, rgba(149,105,166,.065)) !important;
    border-bottom-color: rgba(47,70,94,.16) !important;
    box-shadow: 0 12px 34px rgba(44,64,84,.11), inset 0 1px 0 rgba(255,255,255,.82) !important;
}
html[data-frozen="true"] .navbar :is(.nav-container, .nav-controls, .search-wrapper, .more-menu-container, .user-panel-container, .logo) {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html[data-frozen="true"] .navbar .nav-container { height:100%; }
html[data-frozen="true"] .navbar .nav-controls { gap:12px; padding:0; }
html[data-frozen="true"] .navbar .search-wrapper input {
    width: 96px;
    height: 38px;
    padding: 0 14px;
    border: 1px solid rgba(215,228,242,.14) !important;
    border-radius: 999px;
    background: rgba(255,255,255,.055) !important;
    color: var(--text-main);
    backdrop-filter: blur(12px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(125%) !important;
}
html[data-frozen="true"] .navbar .search-wrapper input:is(:hover, :focus) {
    width: min(240px, 30vw);
    border-color: rgba(173,196,220,.32) !important;
    background: rgba(255,255,255,.085) !important;
    box-shadow: 0 0 0 3px rgba(135,164,194,.075);
}
html[data-frozen="true"] .navbar :is(.more-btn, .icon-btn, .theme-toggle-btn, .user-avatar-btn) {
    min-height: 38px;
    border: 1px solid rgba(215,228,242,.14) !important;
    background-color: rgba(255,255,255,.055) !important;
    background-image: linear-gradient(145deg, rgba(255,255,255,.07), transparent 58%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.055) !important;
    backdrop-filter: blur(12px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(125%) !important;
}
html[data-frozen="true"] .navbar :is(.icon-btn, .theme-toggle-btn, .user-avatar-btn) { width:38px; height:38px; padding:0; border-radius:50%; }
html[data-theme="light"][data-frozen="true"] .navbar .search-wrapper input,
html[data-theme="light"][data-frozen="true"] .navbar :is(.more-btn, .icon-btn, .theme-toggle-btn, .user-avatar-btn) {
    background-color: rgba(255,255,255,.58) !important;
    border-color: rgba(48,72,96,.16) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.82) !important;
}

#frozen-drift {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transform: translate3d(var(--pointer-x, 0), var(--pointer-y, 0), 0) rotateX(var(--pointer-rx, 0deg)) rotateY(var(--pointer-ry, 0deg)) scale(1.045);
    transform-origin: center;
    transition: opacity 1.2s ease, transform 3.8s cubic-bezier(.16, 1, .3, 1);
    perspective: 1000px;
}
html[data-frozen="true"] #frozen-drift { opacity: 1; }
.frozen-cloud {
    position: absolute;
    width: clamp(300px, 46vw, 760px);
    aspect-ratio: 1.12;
    border-radius: 50%;
    filter: blur(74px);
    opacity: .62;
    transform: translate(-50%, -50%);
    transition:
        left var(--cloud-speed, 24s) cubic-bezier(.45, 0, .2, 1),
        top var(--cloud-speed, 24s) cubic-bezier(.45, 0, .2, 1),
        transform var(--cloud-speed, 24s) cubic-bezier(.45, 0, .2, 1);
    will-change: left, top, transform;
}
.frozen-cloud--one { background: radial-gradient(circle, rgba(67, 100, 151, .38), rgba(67, 100, 151, .10) 45%, transparent 72%); }
.frozen-cloud--two { background: radial-gradient(circle, rgba(121, 83, 142, .30), rgba(121, 83, 142, .08) 48%, transparent 73%); }
.frozen-cloud--three { background: radial-gradient(circle, rgba(58, 126, 118, .27), rgba(58, 126, 118, .07) 48%, transparent 73%); }
html[data-theme="light"] .frozen-cloud { opacity: .38; filter: blur(78px); }
html[data-theme="light"] .frozen-cloud--one { background: radial-gradient(circle, rgba(79, 132, 181, .34), rgba(79, 132, 181, .08) 45%, transparent 72%); }
html[data-theme="light"] .frozen-cloud--two { background: radial-gradient(circle, rgba(158, 105, 174, .28), rgba(158, 105, 174, .065) 48%, transparent 73%); }
html[data-theme="light"] .frozen-cloud--three { background: radial-gradient(circle, rgba(68, 145, 132, .26), rgba(68, 145, 132, .06) 48%, transparent 73%); }

#frozen-controls {
    position: fixed;
    left: max(14px, env(safe-area-inset-left));
    bottom: max(14px, env(safe-area-inset-bottom));
    z-index: 2147482000;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 999px;
    background: rgba(16, 18, 27, .68);
    box-shadow: 0 16px 48px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.14);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    color: #fff;
    font: 600 11px/1 system-ui, -apple-system, 'Segoe UI', sans-serif;
    letter-spacing: .11em;
    text-transform: uppercase;
}
#frozen-controls button {
    min-width: 0;
    min-height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    cursor: pointer;
}
#frozen-controls button:hover,
#frozen-controls button:focus-visible { background: rgba(255,255,255,.13); outline: none; }
#frozen-controls .frozen-mode-button[aria-pressed="true"] {
    background: rgba(133, 157, 185, .36);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
#frozen-controls .frozen-base-button { border-left: 1px solid rgba(255,255,255,.16); border-radius: 0 999px 999px 0; }
html[data-theme="light"] #frozen-controls { color:#263442; background:rgba(249,251,253,.82); border-color:rgba(48,70,93,.18); box-shadow:0 14px 38px rgba(40,58,78,.14),inset 0 1px 0 rgba(255,255,255,.9); }
html[data-theme="light"] #frozen-controls button:hover,
html[data-theme="light"] #frozen-controls button:focus-visible { background:rgba(74,104,134,.1); }

#frozen-controls .frozen-mobile-trigger,
#frozen-controls .frozen-mobile-panel { display:none; }
.frozen-native-theme-hidden { display:none !important; }

#demo-notice {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2147483000;
    overflow: hidden;
    color: #3b2e08;
    background: rgba(255, 244, 184, .96);
    border-bottom: 1px solid rgba(113, 83, 0, .18);
    box-shadow: 0 14px 44px rgba(74, 53, 0, .16);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transform-origin: top;
    animation: demoNoticeOpen .58s cubic-bezier(.16, 1, .3, 1) both;
}
#demo-notice.demo-notice-closing { animation: demoNoticeClose .48s cubic-bezier(.7, 0, .84, 0) both; }
.demo-notice-inner {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    padding: 17px 116px 20px 24px;
    font: 500 13px/1.55 system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.demo-notice-inner a { color: #6a4b00; font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }
.demo-notice-mark {
    position: absolute;
    right: 24px;
    bottom: -13px;
    color: rgba(112, 80, 0, .10);
    font: 900 54px/.9 system-ui, sans-serif;
    letter-spacing: -.06em;
    user-select: none;
}
.demo-notice-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: #b88200;
    transform-origin: left;
    animation: demoProgress 5s linear forwards;
}

@keyframes frozenDrift {
    0% { transform: translate3d(-1.5%, -1%, 0) scale(1.03); }
    50% { transform: translate3d(1.2%, .8%, 0) scale(1.06); }
    100% { transform: translate3d(-.8%, 1.6%, 0) scale(1.04); }
}
@keyframes demoNoticeOpen { from { opacity: 0; transform: scaleY(0); } to { opacity: 1; transform: scaleY(1); } }
@keyframes demoNoticeClose { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-105%); } }
@keyframes demoProgress { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (max-width: 700px) {
    .demo-notice-inner { padding: 15px 76px 18px 16px; font-size: 11px; line-height: 1.48; }
    .demo-notice-mark { right: 14px; font-size: 38px; bottom: -8px; }

    #frozen-controls[data-mobile-integrated="true"] {
        position:relative;
        inset:auto;
        z-index:2147482000;
        flex:0 0 auto;
        margin:0 2px;
        padding:0;
        border:0;
        border-radius:0;
        background:transparent;
        box-shadow:none;
        backdrop-filter:none;
        -webkit-backdrop-filter:none;
        transform:none;
        color:inherit;
    }
    #frozen-controls[data-mobile-integrated="true"] > .frozen-mode-button,
    #frozen-controls[data-mobile-integrated="true"] > .frozen-base-button { display:none; }

    #frozen-controls[data-mobile-integrated="true"] .frozen-mobile-trigger {
        position:relative;
        display:grid;
        place-items:center;
        width:36px;
        height:36px;
        min-width:36px;
        min-height:36px;
        padding:0;
        overflow:hidden;
        border:1px solid rgba(215,228,242,.16);
        border-radius:12px;
        color:#e8eef5;
        background:rgba(255,255,255,.045);
        box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 8px 22px rgba(0,0,0,.12);
        backdrop-filter:blur(12px) saturate(125%);
        -webkit-backdrop-filter:blur(12px) saturate(125%);
        transition:background .38s ease,border-color .38s ease,box-shadow .38s ease,transform .25s ease;
    }
    #frozen-controls[data-mobile-integrated="true"] .frozen-mobile-trigger::before {
        content:'';
        position:absolute;
        inset:-45%;
        opacity:0;
        background:conic-gradient(from 120deg,transparent 0 25%,rgba(121,174,211,.32),rgba(174,128,188,.24),transparent 70%);
        transition:opacity .45s ease;
        animation:frozenControlHalo 8s linear infinite;
    }
    #frozen-controls[data-mobile-integrated="true"] .frozen-mobile-trigger:is(:hover,:focus-visible),
    #frozen-controls[data-mobile-integrated="true"].is-mobile-open .frozen-mobile-trigger {
        outline:none;
        border-color:rgba(208,225,242,.28);
        background:rgba(255,255,255,.085);
        box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 10px 28px rgba(0,0,0,.18);
    }
    #frozen-controls[data-mobile-integrated="true"].is-mobile-open .frozen-mobile-trigger::before,
    #frozen-controls[data-mobile-integrated="true"] .frozen-mobile-trigger.is-active::before { opacity:.62; }
    #frozen-controls[data-mobile-integrated="true"] .frozen-mobile-trigger:active { transform:scale(.92); }

    .frozen-mobile-trigger-glyph {
        position:relative;
        z-index:1;
        width:17px;
        height:17px;
        transform:rotate(-8deg);
    }
    .frozen-mobile-trigger-glyph i {
        position:absolute;
        width:9px;
        height:9px;
        border:1px solid currentColor;
        border-radius:50%;
        background:rgba(255,255,255,.06);
        box-shadow:inset 0 1px 2px rgba(255,255,255,.2);
        transition:transform .55s cubic-bezier(.16,1,.3,1),background .45s ease;
    }
    .frozen-mobile-trigger-glyph i:nth-child(1) { left:0; top:4px; }
    .frozen-mobile-trigger-glyph i:nth-child(2) { right:0; top:1px; }
    .frozen-mobile-trigger-glyph i:nth-child(3) { right:2px; bottom:0; }
    .is-mobile-open .frozen-mobile-trigger-glyph i:nth-child(1) { transform:translate(2px,-1px) scale(1.08); }
    .is-mobile-open .frozen-mobile-trigger-glyph i:nth-child(2) { transform:translate(-2px,2px) scale(.9); }
    .is-mobile-open .frozen-mobile-trigger-glyph i:nth-child(3) { transform:translate(-3px,-2px) scale(1.12); }

    #frozen-controls[data-mobile-integrated="true"] .frozen-mobile-panel {
        position:absolute;
        top:calc(100% + 12px);
        right:0;
        display:block;
        width:min(264px,calc(100vw - 24px));
        padding:10px;
        overflow:hidden;
        color:#edf3f8;
        border:1px solid rgba(218,231,245,.16);
        border-radius:20px;
        background:rgba(10,13,19,.88);
        background-image:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.018) 48%,rgba(91,130,166,.075));
        box-shadow:0 24px 70px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.10);
        backdrop-filter:blur(0) saturate(100%);
        -webkit-backdrop-filter:blur(0) saturate(100%);
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transform:translateY(-8px) scale(.96);
        transform-origin:top right;
        transition:opacity .28s ease,visibility .28s ease,transform .42s cubic-bezier(.16,1,.3,1);
    }
    #frozen-controls[data-mobile-integrated="true"].is-mobile-open .frozen-mobile-panel {
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        transform:translateY(0) scale(1);
        backdrop-filter:blur(26px) saturate(145%);
        -webkit-backdrop-filter:blur(26px) saturate(145%);
        animation:frozenPanelLiquefy .72s cubic-bezier(.16,1,.3,1) both;
    }
    .frozen-panel-heading {
        display:flex;
        align-items:baseline;
        justify-content:space-between;
        padding:7px 10px 9px;
        color:inherit;
        font:650 12px/1.2 system-ui,-apple-system,'Segoe UI',sans-serif;
        letter-spacing:.02em;
        text-transform:none;
    }
    .frozen-panel-heading small {
        color:rgba(226,236,246,.45);
        font-size:9px;
        font-weight:650;
        letter-spacing:.12em;
        text-transform:uppercase;
    }
    #frozen-controls[data-mobile-integrated="true"] .frozen-panel-switch {
        display:grid;
        grid-template-columns:minmax(0,1fr) auto 46px;
        align-items:center;
        gap:9px;
        width:100%;
        min-height:58px;
        padding:9px 10px;
        border:1px solid transparent;
        border-radius:14px;
        color:inherit;
        background:transparent;
        box-shadow:none;
        font:inherit;
        letter-spacing:normal;
        text-align:left;
        text-transform:none;
        transition:background .32s ease,border-color .32s ease;
    }
    #frozen-controls[data-mobile-integrated="true"] .frozen-panel-switch + .frozen-panel-switch { margin-top:2px; }
    #frozen-controls[data-mobile-integrated="true"] .frozen-panel-switch:is(:hover,:focus-visible) {
        outline:none;
        border-color:rgba(215,229,243,.10);
        background:rgba(255,255,255,.055);
    }
    .frozen-panel-copy { display:flex; min-width:0; flex-direction:column; gap:3px; }
    .frozen-panel-copy strong { color:inherit; font-size:12px; font-weight:650; letter-spacing:.01em; }
    .frozen-panel-copy small { color:rgba(225,235,245,.50); font-size:9px; font-weight:500; line-height:1.2; }
    .frozen-panel-state { color:rgba(225,235,245,.48); font-size:9px; font-weight:650; letter-spacing:.04em; }

    .frozen-liquid-track {
        position:relative;
        display:block;
        width:46px;
        height:25px;
        overflow:hidden;
        border:1px solid rgba(216,228,240,.14);
        border-radius:999px;
        background:#242a33;
        box-shadow:inset 0 2px 5px rgba(0,0,0,.32);
        transition:background .6s ease,border-color .6s ease,box-shadow .6s ease,backdrop-filter .6s ease;
    }
    .frozen-liquid-glint {
        position:absolute;
        inset:-80% -40%;
        opacity:0;
        background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.36) 48%,transparent 62%);
        transform:translateX(-55%) rotate(10deg);
        transition:opacity .35s ease;
    }
    .frozen-liquid-thumb {
        position:absolute;
        top:3px;
        left:3px;
        width:17px;
        height:17px;
        border-radius:50%;
        background:#d9dee4;
        box-shadow:0 2px 5px rgba(0,0,0,.30);
        transition:left .55s cubic-bezier(.2,1.35,.35,1),background .55s ease,border-radius .55s ease,box-shadow .55s ease,transform .55s ease;
    }
    .frozen-panel-switch[aria-checked="true"] .frozen-liquid-track {
        border-color:rgba(184,215,239,.32);
        background:linear-gradient(118deg,rgba(75,119,151,.62),rgba(110,92,142,.55) 54%,rgba(65,132,124,.52));
        box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 -4px 9px rgba(32,55,78,.22),0 4px 15px rgba(64,109,145,.18);
        backdrop-filter:blur(8px) saturate(155%);
        -webkit-backdrop-filter:blur(8px) saturate(155%);
        animation:frozenTrackLiquefy .72s cubic-bezier(.16,1,.3,1) both;
    }
    .frozen-panel-switch[aria-checked="true"] .frozen-liquid-glint {
        opacity:.7;
        animation:frozenSwitchGlint 3.8s ease-in-out .35s infinite;
    }
    .frozen-panel-switch[aria-checked="true"] .frozen-liquid-thumb {
        left:24px;
        border-radius:45% 55% 52% 48% / 48% 44% 56% 52%;
        background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(210,229,241,.72));
        box-shadow:inset 1px 1px 3px rgba(255,255,255,.82),inset -1px -2px 4px rgba(74,107,133,.20),0 3px 8px rgba(0,0,0,.25);
        animation:frozenThumbSettle 3.4s ease-in-out .55s infinite;
    }

    html[data-theme="light"] #frozen-controls[data-mobile-integrated="true"] .frozen-mobile-trigger {
        color:#263746;
        border-color:rgba(47,73,98,.17);
        background:rgba(255,255,255,.48);
        box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 8px 20px rgba(52,74,96,.10);
    }
    html[data-theme="light"] #frozen-controls[data-mobile-integrated="true"] .frozen-mobile-panel {
        color:#263746;
        border-color:rgba(50,75,99,.16);
        background:rgba(245,249,251,.91);
        background-image:linear-gradient(145deg,rgba(255,255,255,.86),rgba(255,255,255,.34) 52%,rgba(92,133,169,.10));
        box-shadow:0 24px 60px rgba(46,67,88,.19),inset 0 1px 0 rgba(255,255,255,.92);
    }
    html[data-theme="light"] .frozen-panel-heading small,
    html[data-theme="light"] .frozen-panel-copy small,
    html[data-theme="light"] .frozen-panel-state { color:rgba(38,55,70,.54); }
    html[data-theme="light"] #frozen-controls[data-mobile-integrated="true"] .frozen-panel-switch:is(:hover,:focus-visible) {
        border-color:rgba(47,73,98,.10);
        background:rgba(67,96,124,.06);
    }
    html[data-theme="light"] .frozen-liquid-track {
        border-color:rgba(51,73,94,.15);
        background:#d8dde1;
        box-shadow:inset 0 2px 5px rgba(42,57,70,.14);
    }
    html[data-theme="light"] .frozen-liquid-thumb {
        background:#fff;
        box-shadow:0 2px 6px rgba(43,62,79,.22);
    }

    #frozen-controls:not([data-mobile-integrated="true"]) { bottom:10px; left:10px; transform:scale(.92); transform-origin:bottom left; }
}

@keyframes frozenControlHalo { to { transform:rotate(360deg); } }
@keyframes frozenPanelLiquefy {
    0% { backdrop-filter:blur(0) saturate(100%); -webkit-backdrop-filter:blur(0) saturate(100%); }
    58% { backdrop-filter:blur(31px) saturate(154%); -webkit-backdrop-filter:blur(31px) saturate(154%); }
    100% { backdrop-filter:blur(26px) saturate(145%); -webkit-backdrop-filter:blur(26px) saturate(145%); }
}
@keyframes frozenTrackLiquefy {
    0% { border-radius:999px; filter:saturate(.65); transform:scale(.94); }
    48% { border-radius:46% 54% 49% 51% / 55% 48% 52% 45%; filter:saturate(1.18); transform:scale(1.035); }
    100% { border-radius:999px; filter:saturate(1); transform:scale(1); }
}
@keyframes frozenSwitchGlint {
    0%,35% { transform:translateX(-58%) rotate(10deg); opacity:0; }
    58% { opacity:.72; }
    78%,100% { transform:translateX(58%) rotate(10deg); opacity:0; }
}
@keyframes frozenThumbSettle {
    0%,100% { transform:translate3d(0,0,0) scale(1); }
    50% { transform:translate3d(-.5px,-.4px,0) scale(1.025); }
}

@media (prefers-reduced-motion: reduce) {
    #frozen-aurora { animation: none; }
    #frozen-drift { display: none; }
    #demo-notice, #demo-notice.demo-notice-closing { animation-duration: .01ms; }
    .frozen-mobile-trigger::before,
    .frozen-liquid-track,
    .frozen-liquid-glint,
    .frozen-liquid-thumb,
    .frozen-mobile-panel { animation:none !important; }
}