/* Landing page only. Match the existing 46px scroll-to-top control. */
.landing-whats-new {
    --float-size:46px;
    --float-right:30px;
    --notice-bottom:94px;
}
.landing-whats-new [hidden] {
    display:none!important;
}
.landing-whats-new button {
    font-family:inherit;
    cursor:pointer;
}
.landing-whats-new button:focus-visible {
    outline:3px solid #edab36;
    outline-offset:4px;
}
.landing-whats-new .notice-launch {
    position:fixed;
    right:var(--float-right);
    width:var(--float-size);
    height:var(--float-size);
    padding:0;
    border-radius:50%;
    display:grid;
    place-items:center;
    z-index:11000;
    box-sizing:border-box;
}
.landing-whats-new .notice-launch {
    bottom:var(--notice-bottom);
    border:1px solid #ffffffb3;
    background:linear-gradient(140deg,#e67b29,#c95819);
    color:white;
    box-shadow:0 5px 18px #bb591c40;
    isolation:isolate;
    transition:box-shadow .2s,filter .2s;
}
.landing-whats-new .notice-launch:hover {
    filter:brightness(1.08);
    box-shadow:0 6px 22px #bb591c60;
}
.landing-whats-new .bell {
    width:22px;
    height:22px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    transform-origin:50% 20%;
}
.landing-whats-new .notice-launch::before {
    content:'';
    position:absolute;
    inset:-1px;
    border:2px solid #df7a33;
    border-radius:50%;
    opacity:0;
    pointer-events:none;
    z-index:-1;
}
.landing-whats-new .attention-dot {
    position:absolute;
    top:1px;
    right:1px;
    width:9px;
    height:9px;
    border-radius:50%;
    background:#ffdfa1;
    border:2px solid white;
    opacity:0;
}
.landing-whats-new .is-attention .attention-dot {
    opacity:1;
}
.landing-whats-new .is-attention::before {
    animation:landing-notice-ring 3.8s ease-out infinite;
}
.landing-whats-new .is-attention .bell {
    animation:landing-notice-bell 5s ease-in-out infinite;
}
.landing-whats-new .notice-panel {
    position:fixed;
    right:var(--float-right);
    bottom:calc(var(--notice-bottom) + var(--float-size) + 16px);
    width:306px;
    max-width:calc(100vw - 32px);
    padding:16px 18px;
    background:linear-gradient(145deg,#fff2dd 0%,#fffaf3 55%,#fff 100%);
    border:1px solid #eba969;
    border-top:4px solid #e77924;
    border-radius:16px;
    box-shadow:0 14px 40px #8b451b29,0 3px 10px #19255618;
    z-index:12000;
    text-align:left;
    transform-origin:calc(100% - 23px) calc(100% + 16px);
}
.landing-whats-new .notice-panel::after {
    content:'';
    position:absolute;
    right:16px;
    bottom:-8px;
    width:14px;
    height:14px;
    transform:rotate(45deg);
    background:#fff;
    border-right:1px solid #eba969;
    border-bottom:1px solid #eba969;
    pointer-events:none;
}
.landing-whats-new .panel-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
}
.landing-whats-new .panel-top h2 {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13px;
    line-height:20px;
    letter-spacing:.8px;
    font-weight:700;
    color:#af4c15;
    margin:0;
}
.landing-whats-new .notice-title-icon {
    width:34px;
    height:34px;
    flex-shrink:0;
    display:grid;
    place-items:center;
    border-radius:11px;
    color:white;
    background:linear-gradient(135deg,#f09835,#ce5719);
    box-shadow:0 4px 10px #cf661b33;
}
.landing-whats-new .notice-title-icon svg {
    width:23px;
    height:23px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
    animation:landing-notice-announce 3s ease-in-out 2;
}
.landing-whats-new .icon-close {
    display:grid;
    place-items:center;
    width:28px;
    height:28px;
    flex-shrink:0;
    margin:-4px -7px 0 0;
    padding:0;
    border:0;
    border-radius:7px;
    background:transparent;
    color:#7b8394;
    font-size:22px;
    line-height:1;
}
.landing-whats-new .icon-close:hover {
    background:#fff1e7;
    color:#af4c15;
}
.landing-whats-new .notice-content {
    font-size:14px;
    line-height:22px;
    color:#354158;
    max-height:66px;
    overflow:hidden;
    overflow-wrap:anywhere;
}
.landing-whats-new .notice-content p {
    font:inherit;
    color:inherit;
    line-height:inherit;
    margin:0;
    white-space:normal;
}
.landing-whats-new .notice-content.is-expanded {
    max-height:calc(100dvh - var(--notice-bottom) - 230px);
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
}
.landing-whats-new .expand-button {
    border:1px solid #efc091;
    border-radius:20px;
    background:#ffecd5;
    color:#99400d;
    font-size:12px;
    font-weight:600;
    padding:5px 10px 5px 13px;
    margin:12px 0 0 auto;
    width:fit-content;
    display:flex;
    align-items:center;
    gap:7px;
    transition:background .2s,box-shadow .2s;
}
.landing-whats-new .expand-button:hover {
    background:#ffdfb8;
    box-shadow:0 3px 9px #c958191a;
}
.landing-whats-new .expand-icon {
    width:18px;
    height:18px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.landing-whats-new .expand-button:hover .expand-icon {
    transform:translateY(2px);
}
.landing-whats-new .expand-button[aria-expanded="true"] .expand-icon {
    transform:rotate(180deg);
}
.landing-whats-new .expand-button[aria-expanded="true"]:hover .expand-icon {
    transform:translateY(-2px) rotate(180deg);
}
@keyframes landing-notice-announce {
    0%,25%,100% { transform:rotate(0); }
    7% { transform:rotate(-12deg); }
    15% { transform:rotate(8deg); }
}
@keyframes landing-notice-ring {
    0% {
        transform:scale(1);
        opacity:.55;
    }
    45%, 100% {
        transform:scale(1.55);
        opacity:0;
    }
}
@keyframes landing-notice-bell {
    0%,8%,16%,100% {
        transform:rotate(0);
    }
    2%, 10% {
        transform:rotate(12deg);
    }
    5%, 13% {
        transform:rotate(-12deg);
    }
}
@media(max-width:767px) {
    .landing-whats-new {
        --float-right:18px;
        --notice-bottom:calc(24px + env(safe-area-inset-bottom,0px));
    }
    body.landing-has-notice .progress-wrap {
        right:76px;
        bottom:calc(24px + env(safe-area-inset-bottom,0px));
    }
}
@media(prefers-reduced-motion:reduce) {
    .landing-whats-new *, .landing-whats-new *::before, .landing-whats-new *::after {
        animation:none!important;
        transition:none!important;
        scroll-behavior:auto!important;
    }
}
