/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

:root {
    --glass-pink-surface: rgba(255, 247, 251, 0.88);
    --glass-pink-control: linear-gradient(to right, #fdeef5, #ffdbee);
    --glass-pink-active: linear-gradient(to right, #fbdde9, #ff98ca);
    --glass-pink-line: rgba(255, 174, 207, 0.62);
    --glass-pink-line-soft: rgba(255, 199, 222, 0.42);
    --glass-pink-shadow: 0 5px 14px rgba(255, 145, 195, 0.13);
    --glass-pink-shadow-small: 0 2px 7px rgba(255, 145, 195, 0.14);
    --glass-pink-text: rgba(106, 92, 99, 0.76);
    --glass-pink-text-strong: rgba(255, 255, 255, 0.96);

    /* Shared by the Links, Wishes and :3 menus: one column, and the pinned
       paper card and pin used by the Links and Wishes cards. */
    --menu-col: min(88vw, 324px);
    --paper-bg: linear-gradient(180deg, #fffefe 0%, #fff9fb 70%, #fff6fa 100%);
    --paper-line: rgba(239, 183, 204, 0.72);
    --paper-ring: inset 0 0 0 2px rgba(255, 255, 255, 0.92);
    --paper-shadow: 0 5px 12px rgba(177, 92, 124, 0.08), 0 1px 2px rgba(142, 76, 99, 0.06);
    --paper-shadow-lift: 0 9px 18px rgba(174, 75, 113, 0.13);
    --paper-radius: 16px;
    --paper-radius-inner: 12px;
    --pin-size: 11px;
    --pin-top: -6px;
    --pin-fill: radial-gradient(circle at 35% 30%, #fff, #ffb6d5);
    --pin-shadow: 0 2px 3px rgba(0, 0, 0, 0.3), inset 0 -1px 1px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.5);
    --doll-hand: "Comic Sans MS", "Trebuchet MS", cursive;
    --menu-enter-from: translateY(-8px) scale(0.985);
    --menu-enter-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Registered numeric edge strengths can cross-fade without introducing a
   coloured overlay. Older engines simply keep the existing binary fallback. */
@property --dwl-edge-top {
    syntax: "<number>";
    inherits: true;
    initial-value: 1;
}

@property --dwl-edge-bottom {
    syntax: "<number>";
    inherits: true;
    initial-value: 1;
}

/* Keeps the community feed's bottom transparency edge aligned with the
   stationary card bottom while its taller scroll viewport is revealed. */
@property --community-edge-shift {
    syntax: "<length>";
    inherits: true;
    initial-value: 0px;
}

html {
    height: 100%;
    /* KEYBOARD FIX: Prevent viewport resize on mobile */
    height: 100vh;
    height: -webkit-fill-available;
    background:
        radial-gradient(circle at 50% 34%, rgba(255, 226, 240, 0.44), transparent 38%),
        #fff7fb url('site-images/background.png?v=13') center / cover no-repeat fixed;
    overscroll-behavior: none;
    touch-action: manipulation;
}

/* iOS ignores `background-attachment: fixed` outright (WebKit bug 275247, still
   open, called "by design"), and an in-app browser such as Snapchat can leave a
   strip of its own white under a page that never scrolls. This layer is pinned
   to the tallest the screen can ever be, so the art always reaches the bottom
   edge no matter where the browser puts its toolbar. */
html::before {
    content: '';
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    /* Whichever is taller: the area we can see right now, or the tallest the
       screen gets once the browser's toolbars are out of the way. */
    min-height: 100vh;
    min-height: 100lvh;
    /* Same layers as `html` above, so on a wide screen this is a no-op: it sits
       over the canvas, and anything left out here would simply disappear. */
    background:
        radial-gradient(circle at 50% 34%, rgba(255, 226, 240, 0.44), transparent 38%),
        #fff7fb url('site-images/background.png?v=13') center / cover no-repeat;
    z-index: -1;
    pointer-events: none;
}

body {
    background-color: transparent;
    background-image: url('site-images/background.png?v=13');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    font-family: 'Arial', sans-serif;
    color: #333;
    text-align: center;
    min-height: 100vh;
    /* KEYBOARD FIX: Use -webkit-fill-available for mobile */
    min-height: -webkit-fill-available;
    position: relative;
    max-width: 600px;
    margin: 0 auto;
    padding: 0 1px;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

button,
[role="button"],
a,
input,
textarea,
canvas {
    touch-action: manipulation;
}

/* KEYBOARD FIX: Prevent layout shift when virtual keyboard appears */
@media screen and (max-height: 500px) and (orientation: landscape) {
    body {
        height: 100vh;
        min-height: 100vh;
        overflow: hidden;
    }

    /* A phone on its side: the width-sized header alone filled the screen
       and left the menus no room. The same art, scaled to the height. */
    header .header-image {
        width: auto;
        height: 46vh;
    }

    header {
        margin-top: 22px;
    }
}

.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #ffeef6 0%, #fff7fb 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.5s ease;
}

.loading-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(82vw, 320px);
    padding: 20px 18px 18px;
    transform: translateY(32px);
}

.loading-slow-message {
    position: absolute;
    top: calc(100% - 7px);
    left: 50%;
    width: min(280px, 78vw);
    margin: 0;
    color: rgba(116, 82, 100, 0.58);
    font-family: var(--doll-hand);
    font-size: 11px;
    line-height: 1.35;
    letter-spacing: 0.01em;
    text-align: center;
    pointer-events: none;
    transform: translateX(-50%);
    animation: loadingSlowMessageIn 0.42s ease both;
}

.loading-slow-message[hidden] {
    display: none !important;
}

@keyframes loadingSlowMessageIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.loading-bar-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 12px;
}

.loading-bar {
    width: min(260px, 74vw);
    height: 58px;
    position: relative;
}

.loading-bar-fill {
    height: 100%;
    width: 0%;
    transition: width 0.3s ease;
    position: relative;
    overflow: visible;
}

.loading-paw-track {
    position: absolute;
    inset: 0 auto auto 0;
    width: min(260px, 74vw);
    height: 58px;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    align-items: start;
}

.loading-paw-print {
    --paw-rotation: 74deg;
    position: relative;
    justify-self: center;
    width: 23px;
    height: 27px;
    margin-top: 3px;
    opacity: 0;
    transform: translateY(-2px) rotate(var(--paw-rotation)) scale(0.62);
    transform-origin: center;
    will-change: opacity, transform;
    /* drop-shadow lives here, not on ::after — applying it to a pseudo-element
       that also has a mask + gradient background renders a visible square
       edge on older iOS/WebKit (the shadow is composited against the
       unmasked box instead of the masked shape). */
    filter:
        drop-shadow(-1px -1px 0 rgba(255, 255, 255, 0.76))
        drop-shadow(1px 1px 0 rgba(171, 91, 130, 0.12));
}

.loading-paw-print:nth-child(even) {
    --paw-rotation: 106deg;
    margin-top: 28px;
}

.loading-paw-print::before,
.loading-paw-print::after {
    content: '';
    position: absolute;
    inset: 0;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 54'%3E%3Cellipse cx='7.5' cy='20' rx='5.5' ry='8' transform='rotate(-22 7.5 20)'/%3E%3Cellipse cx='18' cy='11.5' rx='5.8' ry='8.5' transform='rotate(-8 18 11.5)'/%3E%3Cellipse cx='30' cy='11.5' rx='5.8' ry='8.5' transform='rotate(8 30 11.5)'/%3E%3Cellipse cx='40.5' cy='20' rx='5.5' ry='8' transform='rotate(22 40.5 20)'/%3E%3Cpath d='M24 25c-8.5 0-14.5 7.2-13 14.8 1.3 6.6 7.8 8.9 12.5 4.9.3-.3.7-.3 1 0 4.7 4 11.2 1.7 12.5-4.9C38.5 32.2 32.5 25 24 25Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 54'%3E%3Cellipse cx='7.5' cy='20' rx='5.5' ry='8' transform='rotate(-22 7.5 20)'/%3E%3Cellipse cx='18' cy='11.5' rx='5.8' ry='8.5' transform='rotate(-8 18 11.5)'/%3E%3Cellipse cx='30' cy='11.5' rx='5.8' ry='8.5' transform='rotate(8 30 11.5)'/%3E%3Cellipse cx='40.5' cy='20' rx='5.5' ry='8' transform='rotate(22 40.5 20)'/%3E%3Cpath d='M24 25c-8.5 0-14.5 7.2-13 14.8 1.3 6.6 7.8 8.9 12.5 4.9.3-.3.7-.3 1 0 4.7 4 11.2 1.7 12.5-4.9C38.5 32.2 32.5 25 24 25Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.loading-paw-print::before {
    background: rgba(171, 91, 130, 0.2);
    transform: translate(1.2px, 1.2px);
    filter: blur(0.35px);
}

.loading-paw-print::after {
    background: linear-gradient(145deg, rgba(140, 77, 108, 0.42), rgba(208, 125, 165, 0.18) 55%, rgba(255, 255, 255, 0.8));
}

.loading-paw-print.is-stamped {
    animation: loadingPawStamp 0.3s cubic-bezier(0.2, 0.9, 0.32, 1.25) both;
}

@keyframes loadingPawStamp {
    0% {
        opacity: 0;
        transform: translateY(-3px) rotate(var(--paw-rotation)) scale(0.58);
    }
    62% {
        opacity: 1;
        transform: translateY(1px) rotate(var(--paw-rotation)) scale(1.08);
    }
    100% {
        opacity: 0.92;
        transform: translateY(0) rotate(var(--paw-rotation)) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .loading-bar-fill {
        transition: none;
    }

    .loading-paw-print.is-stamped {
        animation: none;
        opacity: 0.92;
        transform: rotate(var(--paw-rotation)) scale(1);
    }
}

.main-screen {
    display: none;
    text-align: center;
    padding: 0;
    background-color: transparent;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    transform-origin: center;
    transition: filter 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}

.main-screen .button-group,
.main-screen .note-peel-target.active-content {
    opacity: 0;
}

.main-screen.ui-ready .button-group {
    opacity: 1;
    transition: opacity 0.45s ease;
}

.main-screen.note-ready .note-peel-target.active-content {
    opacity: 1;
    animation: none;
}

.main-screen.note-ready .note-peel-target.active-content.hidden,
.main-screen.note-ready .note-peel-target.active-content:has(.note-image.hidden) {
    opacity: 0;
    animation: none;
}

.corner-text {
    position: absolute;
    top: 12px;
    left: 12px;
    font-size: 11px;
    color: rgba(106, 92, 99, 0.46);
    opacity: 1;
}

header {
    position: relative;
    margin-bottom: -44px;
    animation: slideDown 0.75s ease forwards;
}

@keyframes slideDown {
    0% { transform: translateY(-100%) rotate(0deg); opacity: 0; }
    50% { opacity: 0.5; transform: translateY(0px) rotate(0deg); }
    100% { transform: translateY(-48px) rotate(0deg); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    /* Same resting place, without the drop-in. */
    header {
        animation: none;
        transform: translateY(-48px);
    }
}

.header-image {
    width: 100%;
    max-width: 600px;
    height: auto;
    margin: 0 auto;
    display: block;
}

.popup {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(236, 109, 194, 0.027);
    backdrop-filter: blur(12px);
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 1;
    transition: opacity 0.5s ease;
}

button {
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

/* The entry-gate icon reuses the exact same paw print asset as the loading
   bar (.loading-paw-print above) — same SVG mask, same two-layer
   shadow/gradient treatment, same drop-shadow-on-the-parent structure (not
   on ::after, which would reintroduce the old-iOS square-edge mask+filter
   bug). The rotation is deliberately NOT the loading trail's 74deg/106deg,
   though — those simulate an alternating walking trail and read as the
   paw lying almost sideways when used as one standalone icon. Per explicit
   direction: upright ("looking up"), just slightly tilted to one side. */
.entry-paw {
    position: relative;
    display: block;
    width: 38px;
    height: 45px;
    transform: rotate(-12deg);
    transform-origin: center;
    filter:
        drop-shadow(-1px -1px 0 rgba(255, 255, 255, 0.76))
        drop-shadow(1px 1px 0 rgba(171, 91, 130, 0.12));
    animation: entryPawIdle 2.2s ease-in-out infinite;
}

.entry-paw::before,
.entry-paw::after {
    content: '';
    position: absolute;
    inset: 0;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 54'%3E%3Cellipse cx='7.5' cy='20' rx='5.5' ry='8' transform='rotate(-22 7.5 20)'/%3E%3Cellipse cx='18' cy='11.5' rx='5.8' ry='8.5' transform='rotate(-8 18 11.5)'/%3E%3Cellipse cx='30' cy='11.5' rx='5.8' ry='8.5' transform='rotate(8 30 11.5)'/%3E%3Cellipse cx='40.5' cy='20' rx='5.5' ry='8' transform='rotate(22 40.5 20)'/%3E%3Cpath d='M24 25c-8.5 0-14.5 7.2-13 14.8 1.3 6.6 7.8 8.9 12.5 4.9.3-.3.7-.3 1 0 4.7 4 11.2 1.7 12.5-4.9C38.5 32.2 32.5 25 24 25Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 54'%3E%3Cellipse cx='7.5' cy='20' rx='5.5' ry='8' transform='rotate(-22 7.5 20)'/%3E%3Cellipse cx='18' cy='11.5' rx='5.8' ry='8.5' transform='rotate(-8 18 11.5)'/%3E%3Cellipse cx='30' cy='11.5' rx='5.8' ry='8.5' transform='rotate(8 30 11.5)'/%3E%3Cellipse cx='40.5' cy='20' rx='5.5' ry='8' transform='rotate(22 40.5 20)'/%3E%3Cpath d='M24 25c-8.5 0-14.5 7.2-13 14.8 1.3 6.6 7.8 8.9 12.5 4.9.3-.3.7-.3 1 0 4.7 4 11.2 1.7 12.5-4.9C38.5 32.2 32.5 25 24 25Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.entry-paw::before {
    background: rgba(171, 91, 130, 0.2);
    transform: translate(1.2px, 1.2px);
    filter: blur(0.35px);
}

.entry-paw::after {
    background: linear-gradient(145deg, rgba(140, 77, 108, 0.42), rgba(208, 125, 165, 0.18) 55%, rgba(255, 255, 255, 0.8));
}

/* Gentle idle bounce/wobble so the print feels alive while waiting to be
   tapped, rather than sitting there static — a small rock side-to-side
   (rotate wobbling a few degrees either side of the resting -12deg tilt)
   paired with a soft up-down bounce, looping continuously. */
@keyframes entryPawIdle {
    0%, 100% { transform: rotate(-12deg) translateY(0) scale(1); }
    50% { transform: rotate(-18deg) translateY(-3px) scale(1.05); }
}

#close-popup.is-pressed .entry-paw {
    animation: entryPawTap 0.32s cubic-bezier(0.2, 0.9, 0.32, 1.25) both;
}

@keyframes entryPawTap {
    0% { transform: rotate(-12deg) scale(1); }
    45% { transform: rotate(-12deg) scale(0.85); }
    75% { transform: rotate(-12deg) scale(1.1); }
    100% { transform: rotate(-12deg) scale(1); }
}

@media (hover: hover) and (pointer: fine) {
    #close-popup:not(.is-pressed):hover .entry-paw {
        animation-play-state: paused;
        transform: rotate(-12deg) scale(1.1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .entry-paw {
        animation: none;
    }
}

.entry-bubble-field {
    position: fixed;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: auto;
}

.entry-bubble-field[hidden] {
    display: none;
}

.footer-play-bubble.entry-bubble {
    min-width: 44px;
    min-height: 44px;
    appearance: none;
    -webkit-appearance: none;
    pointer-events: auto;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    animation:
        entryBubbleBorn 0.58s cubic-bezier(0.18, 0.9, 0.22, 1.24) forwards,
        entryBubbleFloat var(--bubble-duration, 5.2s) ease-in-out 0.58s infinite;
}

.footer-play-bubble.entry-bubble.is-hint-pressed {
    animation: entryBubbleHintPress 0.72s cubic-bezier(0.2, 0.82, 0.24, 1) 0.42s both;
}

.entry-bubble-hint-finger,
.entry-bubble-hint-wave {
    position: fixed;
    left: var(--hint-x);
    top: var(--hint-y);
    z-index: 4;
    pointer-events: none;
}

.entry-bubble-hint-finger {
    width: 40px;
    height: 56px;
    filter: drop-shadow(0 4px 7px rgba(116, 74, 95, 0.2));
    transform-origin: 50% 8%;
    animation: entryBubbleHintFinger 1.34s cubic-bezier(0.2, 0.78, 0.22, 1) both;
}

.entry-bubble-hint-finger svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.entry-bubble-hint-wave {
    width: var(--hint-size);
    height: var(--hint-size);
    border: 2px solid rgba(255, 255, 255, 0.72);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(255, 172, 207, 0.14);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.54);
    animation: entryBubbleHintWave 0.68s ease-out 0.68s both;
}

.footer-play-bubble.entry-bubble:hover {
    filter: brightness(1.05) saturate(1.04);
}

.footer-play-bubble.entry-bubble:focus-visible {
    outline: 3px solid rgba(255, 132, 187, 0.62);
    outline-offset: 4px;
}

.footer-play-bubble.entry-bubble.popping,
.footer-play-bubble.entry-bubble.popping:hover {
    pointer-events: none;
    filter: none;
    animation: entryBubblePop 0.31s cubic-bezier(0.12, 0.84, 0.2, 1) forwards;
}

.entry-bubble-burst {
    position: fixed;
    z-index: 2;
    width: 0;
    height: 0;
    pointer-events: none;
}

@keyframes entryBubbleHintPress {
    0%, 45% {
        opacity: 0.88;
        transform: translate(-50%, -9px) scale(1);
    }

    62% {
        opacity: 1;
        transform: translate(-50%, -7px) scale(0.84);
    }

    78% {
        opacity: 0.96;
        transform: translate(-50%, -10px) scale(1.08);
    }

    100% {
        opacity: 0.88;
        transform: translate(-50%, -9px) scale(1);
    }
}

@keyframes entryBubbleHintFinger {
    0% {
        opacity: 0;
        transform: translate(18px, 34px) rotate(-12deg) scale(0.96);
    }

    24% {
        opacity: 0.82;
    }

    54% {
        opacity: 0.92;
        transform: translate(-4px, 10px) rotate(-7deg) scale(1);
    }

    66% {
        opacity: 0.96;
        transform: translate(-5px, 4px) rotate(-6deg) scale(0.88);
    }

    82% {
        opacity: 0.74;
        transform: translate(-2px, 9px) rotate(-7deg) scale(0.98);
    }

    100% {
        opacity: 0;
        transform: translate(9px, 27px) rotate(-10deg) scale(0.94);
    }
}

@keyframes entryBubbleHintWave {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.54);
    }

    24% {
        opacity: 0.68;
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.36);
    }
}

.entry-bubble-burst::before,
.entry-bubble-burst::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: var(--burst-size);
    height: var(--burst-size);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0.2);
}

.entry-bubble-burst::before {
    box-sizing: border-box;
    border: 2px solid rgba(255, 180, 212, 0.28);
    box-shadow:
        inset 0 0 5px rgba(255, 166, 205, 0.12),
        0 0 5px rgba(255, 255, 255, 0.3);
    animation: entryBubbleBurstRing 0.56s cubic-bezier(0.1, 0.7, 0.2, 1) forwards;
}

.entry-bubble-burst::after {
    background: radial-gradient(ellipse, rgba(255, 255, 255, 0.75), rgba(255, 166, 205, 0.2) 38%, transparent 68%);
    animation: entryBubbleBurstFlash 0.25s ease-out forwards;
}

.entry-bubble-burst i {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(var(--particle-size) * 1.28);
    height: var(--particle-size);
    border: 1px solid rgba(255, 255, 255, 0.76);
    border-radius: 52% 48% 50% 50%;
    background: radial-gradient(
        circle at 28% 24%,
        #fff 0 12%,
        rgba(255, 238, 247, 0.9) 18%,
        rgba(255, 166, 205, 0.34) 58%,
        rgba(255, 145, 195, 0.18) 100%
    );
    box-shadow: inset -2px -1px 3px rgba(255, 145, 195, 0.18);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.25);
    animation: entryBubbleBurstParticle 0.82s cubic-bezier(0.08, 0.68, 0.16, 1) var(--particle-delay) forwards;
}

.entry-bubble-burst b {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--fragment-size);
    height: calc(var(--fragment-size) * 0.5);
    border: 3px solid rgba(255, 180, 212, 0.5);
    border-bottom: 0;
    border-radius: 50% 50% 0 0;
    opacity: 0;
    animation: entryBubbleBurstFragment 0.66s ease-out var(--particle-delay) forwards;
}

@keyframes entryBubbleBorn {
    64% {
        opacity: 0.96;
        transform: translate(-50%, -19px) scale(1.08);
    }

    to {
        opacity: 0.88;
        transform: translate(-50%, -9px) scale(1);
    }
}

@keyframes entryBubbleFloat {
    0%,
    100% {
        transform: translate(-50%, -9px) translateX(0) scale(1);
    }

    50% {
        transform: translate(-50%, -31px) translateX(var(--bubble-drift, 26px)) scale(1.035);
    }
}

@keyframes entryBubblePop {
    0% {
        opacity: 0.9;
        transform: translate(-50%, -9px) scale(1);
    }

    48% {
        opacity: 1;
        transform: translate(-50%, -11px) scale(1.16);
    }

    to {
        opacity: 0;
        transform: translate(-50%, -14px) scale(1.28, 1.2);
    }
}

@keyframes entryBubbleBurstRing {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.45, 0.32);
    }

    26% { opacity: 0.9; }

    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.54, 1.18);
    }
}

@keyframes entryBubbleBurstFlash {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.18);
    }

    30% {
        opacity: 0.72;
        transform: translate(-50%, -50%) scale(0.92);
    }

    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.22);
    }
}

@keyframes entryBubbleBurstParticle {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.25);
    }

    16% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(1.12);
    }

    70% { opacity: 0.72; }

    to {
        opacity: 0;
        transform: translate(calc(-50% + var(--burst-x)), calc(-50% + var(--burst-y))) rotate(var(--particle-spin)) scale(0.42);
    }
}

@keyframes entryBubbleBurstFragment {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(var(--fragment-angle)) scale(0.25);
    }

    22% { opacity: 0.8; }

    to {
        opacity: 0;
        transform: translate(calc(-50% + var(--burst-x)), calc(-50% + var(--burst-y))) rotate(calc(var(--fragment-angle) + 55deg)) scale(0.1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .footer-play-bubble.entry-bubble {
        opacity: 0.88;
        transform: translate(-50%, -9px);
        animation: none;
    }

    .footer-play-bubble.entry-bubble.popping {
        animation: entryBubblePop 0.16s ease-out forwards;
    }

    .entry-bubble-burst::before,
    .entry-bubble-burst::after,
    .entry-bubble-burst i,
    .entry-bubble-burst b {
        animation-duration: 0.18s;
    }
}

.loading-gif {
    display: block;
    width: 180px;
    height: auto;
    margin: 0 auto;
    transform: translateY(-56px);
    filter: drop-shadow(0 3px 6px rgba(255, 145, 195, 0.12));
}

.icon-container {
    position: relative;
    isolation: isolate;
    display: flex;
    width: 46px;
    height: 61px;
    flex: 0 0 46px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
    opacity: 1;
    visibility: visible;
    transition: transform 0.18s ease;
}

/* The selected section keeps a fairy-dust trail looping around its icon: a
   smoky tail that thins out behind a twinkling sparkle head. It lives on the
   wrapper so the button's clipped glass circle and heart-glitter stay
   independent. The loop never stops; only opacity and scale follow the open
   state, so switching sections dissolves the trail where it is instead of
   snapping it back to its starting angle. It is sized so its loop sits on
   the button's 1px border (r = 22.5px), and it copies the button's hover
   lift and press so it never slides off the rim. */
.dwl-icons-row .icon-container::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 23px;
    z-index: 2;
    width: 60px;
    height: 60px;
    background: url("site-images/fairy-trail.svg?v=2") center / 100% 100% no-repeat;
    opacity: 0;
    pointer-events: none;
    translate: -50% -50%;
    scale: 0.82;
    transition: opacity 0.28s ease, scale 0.34s ease, translate 0.18s ease;
    animation: fairyTrailLoop 5.6s linear infinite;
    will-change: opacity, scale, rotate;
}

.dwl-icons-row .icon-container:has(> .support-menu-button.open)::after {
    opacity: 1;
    scale: 1;
    transition: opacity 0.45s ease 0.05s, scale 0.6s cubic-bezier(0.22, 1, 0.36, 1), translate 0.18s ease;
}

@media (hover: hover) and (pointer: fine) {
    .dwl-icons-row .icon-container:hover::after {
        translate: -50% calc(-50% - 2px);
    }
}

/* Touch press: the button dips 1px and shrinks to 0.965 (see
   .support-menu-button:active); on desktop the hover lift wins instead. */
@media not all and (hover: hover) and (pointer: fine) {
    .dwl-icons-row .icon-container:has(> .support-menu-button.open:active)::after {
        translate: -50% calc(-50% + 1px);
        scale: 0.965;
        transition: opacity 0.45s ease, scale 0.18s ease, translate 0.18s ease;
    }
}

/* Sparkles drift behind the section names rather than across them. */
.dwl-icons-row .icon-container > .dwl-icon-name {
    z-index: 3;
}

@keyframes fairyTrailLoop {
    to {
        rotate: 360deg;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dwl-icons-row .icon-container::after {
        background-image: url("site-images/fairy-trail-still.svg?v=2");
        animation: none;
        rotate: -40deg;
    }
}

.socials-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Pink glitter heart animation for mail icon */
.email-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    background: rgba(255, 185, 216, 0.44);
    border: none;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 70'%3E%3Cpath d='M35,20 C35,20 25,10 15,10 C5,10 0,20 0,30 C0,40 15,55 35,70 C55,55 70,40 70,30 C70,20 65,10 55,10 C45,10 35,20 35,20 Z' fill='white'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 70'%3E%3Cpath d='M35,20 C35,20 25,10 15,10 C5,10 0,20 0,30 C0,40 15,55 35,70 C55,55 70,40 70,30 C70,20 65,10 55,10 C45,10 35,20 35,20 Z' fill='white'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.email-button.show-glitter::before {
    animation: pinkGlitterHeart 2s ease-out forwards;
    animation-iteration-count: 1;
    opacity: 1;
}

@keyframes pinkGlitterHeart {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.05);
        filter: blur(0) drop-shadow(0 0 0 rgba(255, 184, 216, 0));
    }
    12% {
        opacity: 0.82;
        transform: translate(-50%, -50%) scale(0.16);
        filter: blur(0) drop-shadow(0 0 5px rgba(255, 184, 216, 0.26));
    }
    45% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(0.86);
        filter: blur(0.2px) drop-shadow(0 0 8px rgba(255, 184, 216, 0.18));
    }
    78% {
        opacity: 0.24;
        transform: translate(-50%, -50%) scale(1.12);
        filter: blur(0.7px) drop-shadow(0 0 11px rgba(255, 184, 216, 0.1));
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.28);
        filter: blur(1.2px) drop-shadow(0 0 14px rgba(255, 184, 216, 0));
    }
}

/* Sparkle particles effect for mail icon */
.email-button.show-glitter::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    border-radius: 50%;
    background: rgba(255, 203, 226, 0.58);
    box-shadow: 0 0 8px rgba(255, 190, 220, 0.34);
    animation: sparkleParticlesHeart 2s ease-out forwards;
}

@keyframes sparkleParticlesHeart {
    0% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(0.2);
    }
    30% {
        opacity: 0.55;
        transform: translate(-50%, -50%) scale(3.2);
    }
    60% {
        opacity: 0.22;
        transform: translate(-50%, -50%) scale(6.2);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(8.8);
    }
}

.drawing-controls {
    display: flex;
    gap: 11px;
    margin-bottom: 8px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 240px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.drawing-controls button {
    background: var(--glass-pink-control);
    border: none;
    padding: 6px 10px;
    border-radius: 999px;
    color: rgba(101, 91, 96, 0.8);
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: var(--glass-pink-shadow-small);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    min-width: 32px;
    font-size: 12px;
    flex-shrink: 0;
}

.drawing-controls button:hover {
    transform: scale(1.05);
    background: linear-gradient(to right, #ffdbee, #fdeef5);
    color: rgba(101, 91, 96, 0.86);
}

#brush-size {
    background: var(--glass-pink-control);
    border: 1px solid var(--glass-pink-line-soft);
    border-radius: 999px;
    padding: 5px 10px;
    height: 32px;
    width: 94px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    transition: all 0.3s;
    box-shadow: var(--glass-pink-shadow-small);
    flex-shrink: 0;
}

#brush-size:hover {
    transform: scale(1.02);
    background: linear-gradient(to right, #ffdbee, #fdeef5);
}

/* Webkit browsers (Chrome, Safari) */
#brush-size::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ff91c6;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 5px rgba(255, 145, 198, 0.28);
    transition: transform 0.2s ease;
}

#brush-size::-webkit-slider-thumb:hover,
#brush-size::-webkit-slider-thumb:active {
    transform: scale(1.2);
    background: #ff7fbc;
}

/* Firefox support */
#brush-size::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ff91c6;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 5px rgba(255, 145, 198, 0.28);
    -moz-appearance: none;
    appearance: none;
}

#brush-size::-moz-range-track {
    height: 4px;
    background: transparent;
    border-radius: 20px;
}

#color-picker {
    background: var(--glass-pink-control);
    border: 1px solid var(--glass-pink-line-soft);
    border-radius: 50%;
    padding: 2px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: var(--glass-pink-shadow-small);
    transition: all 0.3s;
    flex-shrink: 0;
}

#color-picker:hover {
    transform: scale(1.05);
    background: linear-gradient(to right, #ffdbee, #fdeef5);
}

/* Webkit browsers (Chrome, Safari) */
#color-picker::-webkit-color-swatch-wrapper {
    padding: 0;
    border: none;
    border-radius: 50%;
}

#color-picker::-webkit-color-swatch {
    border: none;
    border-radius: 50%;
}

/* Firefox */
#color-picker::-moz-color-swatch {
    border: none;
    border-radius: 50%;
}

#send-drawing,
#send-question {
    width: 85%;
    background: var(--glass-pink-active) !important;
    border: none;
    padding: 6px 10px;
    border-radius: 999px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    text-shadow: none;
    box-shadow: 0 3px 9px rgba(255, 145, 198, 0.24);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    min-width: 36px;
    font-size: 12px;
    margin-top: 6px;
}

#send-drawing:hover,
#send-question:hover {
    background: linear-gradient(to right, #fbdde9, #ff8fc4) !important;
    transform: scale(1.05);
}

#send-drawing.is-loading,
#send-question.is-loading {
    cursor: wait;
    opacity: 0.86;
    transform: none;
    pointer-events: none;
}

.send-loading-dot {
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.96);
    box-shadow:
        10px 0 0 rgba(255, 255, 255, 0.68),
        20px 0 0 rgba(255, 255, 255, 0.42);
    animation: sendLoadingDots 0.86s ease-in-out infinite;
}

@keyframes sendLoadingDots {
    0%, 100% {
        opacity: 0.55;
        transform: translateY(0);
    }
    50% {
        opacity: 1;
        transform: translateY(-2px);
    }
}

.note-peel-target.hidden,
.note-peel-target:has(.note-image.hidden) {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(-8px) rotate(0deg) scale(0.985);
    animation: none;
}

/* Kills note interactivity the instant a panel starts opening, without
   starting its visual hide transition yet — that's deferred until the
   incoming panel's own entrance is about to start, so the two cross-fade in
   the same frame instead of racing (see openThroneMockup()). */
.note-peel-target.dwl-note-locking {
    pointer-events: none;
}

.drawing-widget.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0) scale(1);
}

.toggle-container {
    /* The scroll-linked value is visual only. Open panels allocate their
       fully-grown viewport once, then the compositor reveals it by moving an
       inner layer. No flow geometry changes while a finger is scrolling. */
    --dwl-collapse: 0;
    --dwl-collapse-distance: 53px;
    --dwl-scroll-grow: calc(var(--dwl-collapse-distance) * var(--dwl-collapse));
    --dwl-motion-hidden: calc(var(--dwl-collapse-distance) - var(--dwl-scroll-grow));
    --dwl-collapse-easing: linear(
        0,
        0.0078 5%,
        0.0313 10%,
        0.0703 15%,
        0.125 20%,
        0.25 30%,
        0.375 40%,
        0.5 50%,
        0.625 60%,
        0.75 70%,
        0.875 80%,
        0.9297 85%,
        0.9688 90%,
        0.9922 95%,
        1
    );
    position: relative;
    /* Closed-home geometry ends just below the note (including its soft
       shadow) instead of reserving a panel-sized empty tail. Open Socials,
       Wishlist and :3 states replace this with their measured heights. */
    min-height: 294px;
    margin: 0 auto;
    width: min(94vw, 360px);
    timeline-scope: --dwl-social-scroll, --dwl-wishlist-scroll, --dwl-posts-scroll;
}

body.has-posts-panel-open {
    overflow-x: hidden;
    overflow-y: auto;
}

body.has-posts-panel-open .toggle-container {
    min-height: var(--posts-panel-height, 310px);
}

body.has-posts-panel-open .site-brand-footer {
    /* Hug the panel: the panel itself now grows to fill tall screens (see
       --panel-fill-max / setPanelFillMax), so the pill just sits snug
       beneath it -- no viewport-based push needed. */
    margin-top: 18px;
}

.content-area {
    --open-surface-top: -14px;
    position: relative;
    width: 100%;
}

.main-screen header,
.main-screen .content-area,
.main-screen .site-brand-footer {
    transition: opacity 0.32s ease;
}

.site-brand-footer {
    display: flex;
    justify-content: center;
    /* Match the compact footer rhythm used beneath open surfaces. The closed
       toggle now ends at the note's visual bottom, so this is a real gap
       instead of being added after a large invisible reserved tail. */
    margin: 18px auto 0;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
    /* Reserve the complete pill + safe-area strip in every layout
       calculation. Open panels are shortened before this footer is allowed
       to leave the visible viewport. */
    min-height: calc(30px + max(14px, env(safe-area-inset-bottom)));
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
}

.main-screen.note-ready .site-brand-footer {
    pointer-events: auto;
    animation: brandFooterIn 0.6s ease 0.45s forwards;
}

.site-brand-footer a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0;
    min-height: 30px;
    padding: 5px 9px 5px 11px;
    border: 1px solid rgba(255, 180, 212, 0.48);
    border-radius: 999px;
    background:
        linear-gradient(rgba(255, 255, 255, 0.66), rgba(255, 246, 251, 0.5)),
        repeating-linear-gradient(90deg, rgba(255, 231, 242, 0.24) 0 8px, rgba(255, 250, 253, 0.24) 8px 16px);
    color: rgba(122, 76, 92, 0.7);
    font-family: var(--doll-hand);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    box-shadow:
        0 5px 14px rgba(255, 145, 195, 0.11),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
    transition:
        transform 0.18s ease,
        border-color 0.22s ease,
        background 0.22s ease,
        box-shadow 0.22s ease,
        color 0.22s ease;
}

.site-brand-footer a:focus-visible {
    outline: 2px solid rgba(216, 69, 125, 0.7);
    outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
    .site-brand-footer a:hover {
        border-color: rgba(239, 158, 195, 0.7);
        background:
            linear-gradient(rgba(255, 255, 255, 0.88), rgba(255, 229, 241, 0.7)),
            repeating-linear-gradient(90deg, rgba(255, 231, 242, 0.28) 0 8px, rgba(255, 250, 253, 0.28) 8px 16px);
        color: rgba(122, 76, 92, 0.82);
        box-shadow:
            0 9px 19px rgba(183, 98, 136, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.88);
        transform: translateY(-2px) scale(1.035);
    }
}

.site-brand-footer a:active {
    border-color: rgba(229, 135, 177, 0.58);
    box-shadow:
        0 2px 6px rgba(255, 145, 195, 0.16),
        inset 0 2px 5px rgba(199, 111, 152, 0.12);
    transform: translateY(1px) scale(0.965);
    transition-duration: 0.08s;
}

.site-brand-name {
    letter-spacing: 0;
}

.site-brand-dot {
    color: rgba(255, 132, 187, 0.86);
    transform: translateY(-1px);
}

.site-brand-gg {
    margin-left: -1px;
    padding: 3px 6px 4px;
    border-radius: 999px;
    background: rgba(255, 218, 234, 0.72);
    color: rgba(174, 85, 130, 0.84);
    font-size: 11px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
    transform: rotate(-4deg);
    transition: transform 0.18s cubic-bezier(0.2, 0.86, 0.28, 1), background 0.22s ease;
}

@media (hover: hover) and (pointer: fine) {
    .site-brand-footer a:hover .site-brand-gg {
        background: rgba(255, 205, 229, 0.82);
        transform: rotate(-2deg) scale(1.045);
    }
}

.site-brand-footer a:active .site-brand-gg {
    transform: rotate(-6deg) scale(0.96);
}

.footer-bubble-field {
    position: fixed;
    inset: 0;
    z-index: 34;
    pointer-events: none;
    overflow: hidden;
    contain: strict;
}

.footer-play-bubble {
    position: absolute;
    left: var(--bubble-x);
    top: var(--bubble-y);
    width: var(--bubble-size);
    height: var(--bubble-size);
    border-radius: 999px;
    background:
        radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.96) 0 13%, transparent 15%),
        radial-gradient(circle at 44% 44%, rgba(255, 238, 247, 0.9), rgba(255, 166, 205, 0.34) 54%, rgba(255, 145, 195, 0.12));
    border: 1px solid rgba(255, 180, 212, 0.32);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.74),
        0 10px 24px rgba(255, 145, 195, 0.12);
    opacity: 0;
    transform: translate(-50%, 18px) scale(0.58);
    will-change: transform, opacity;
    animation:
        footerBubbleBorn 0.58s cubic-bezier(0.18, 0.9, 0.22, 1.24) forwards,
        footerBubbleFloat var(--bubble-duration, 5.8s) ease-in-out 0.58s infinite;
}

.footer-play-bubble.settled {
    will-change: transform;
}

.footer-play-bubble.popping {
    animation: footerBubblePop 0.42s cubic-bezier(0.25, 0.86, 0.3, 1) var(--pop-delay, 0ms) forwards;
}

@media (max-height: 720px) {
    body.has-social-panel-open .main-screen .site-brand-footer,
    body.has-wishlist-panel-open .main-screen .site-brand-footer,
    body.has-posts-panel-open .main-screen .site-brand-footer {
        margin-top: 6px !important;
        padding-bottom: max(8px, env(safe-area-inset-bottom));
        min-height: calc(26px + max(8px, env(safe-area-inset-bottom)));
    }

    body.has-social-panel-open .site-brand-footer a,
    body.has-wishlist-panel-open .site-brand-footer a,
    body.has-posts-panel-open .site-brand-footer a {
        min-height: 26px;
        padding: 3px 7px 3px 9px;
        font-size: 12px;
    }

    body.has-social-panel-open .site-brand-footer .site-brand-gg,
    body.has-wishlist-panel-open .site-brand-footer .site-brand-gg,
    body.has-posts-panel-open .site-brand-footer .site-brand-gg {
        padding: 2px 5px 3px;
        font-size: 10px;
    }
}

@keyframes brandFooterIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes footerBubbleBorn {
    64% {
        opacity: 0.82;
        transform: translate(-50%, -10px) scale(1.08);
    }

    to {
        opacity: 0.72;
        transform: translate(-50%, 0) scale(1);
    }
}

@keyframes footerBubbleFloat {
    0%,
    100% {
        transform: translate(-50%, 0) translateX(0) scale(1);
    }

    50% {
        transform: translate(-50%, -22px) translateX(var(--bubble-drift, 26px)) scale(1.035);
    }
}

@keyframes footerBubblePop {
    55% {
        opacity: 0.82;
        transform: translate(-50%, -10px) scale(1.16);
    }

    to {
        opacity: 0;
        transform: translate(-50%, -16px) scale(0);
    }
}

.note-peel-target {
    --note-shadow-strength: 1;
    transition: opacity 0.46s ease, transform 0.42s cubic-bezier(0.2, 0.86, 0.24, 1), filter 0.32s ease;
    position: absolute;
    /* The small 4px compensation keeps the visible paper edge aligned with
       the other open surfaces while its natural corner remains untouched. */
    top: calc(var(--open-surface-top) + 4px);
    left: 50%;
    z-index: 1;
    transform: translateX(-50%) rotate(0deg) scale(1.015);
    width: 254px;
    height: auto;
    margin: 0;
    border-radius: 16px;
    filter:
        saturate(1.025)
        drop-shadow(
            0
            calc(7px * var(--note-shadow-strength))
            calc(10px * var(--note-shadow-strength))
            rgb(126 82 103 / calc(0.115 * var(--note-shadow-strength)))
        )
        drop-shadow(
            0
            calc(1.5px * var(--note-shadow-strength))
            calc(2.5px * var(--note-shadow-strength))
            rgb(116 74 95 / calc(0.095 * var(--note-shadow-strength)))
        );
    cursor: default;
    overflow: visible;
    isolation: isolate;
    transform-origin: 50% 50%;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

.note-peel-target::before {
    position: absolute;
    right: 2.5%;
    bottom: -9px;
    left: 7%;
    z-index: 0;
    height: 21px;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at 54% 0%,
        rgba(113, 70, 92, 0.145) 0%,
        rgba(113, 70, 92, 0.072) 38%,
        rgba(113, 70, 92, 0) 73%
    );
    content: "";
    opacity: calc(0.82 * var(--note-shadow-strength));
    pointer-events: none;
    transform: scaleX(0.96);
    transform-origin: 50% 0;
    transition: opacity 0.2s ease, transform 0.24s ease;
}

.note-under-sign {
    position: absolute;
    /* Preserve the original 126px sticker's center while displaying it at 1.5×. */
    top: calc(var(--open-surface-top) + 8.5px);
    left: 50%;
    z-index: 0;
    display: block;
    width: 189px;
    height: auto;
    opacity: 0;
    filter: drop-shadow(0 3px 4px rgba(118, 80, 99, 0.1));
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    transform: translateX(-50%) translateY(3px) scale(0.96);
    transform-origin: 50% 50%;
    transition:
        opacity 0.38s ease,
        transform 0.46s cubic-bezier(0.22, 1, 0.36, 1);
}

.note-under-sign[hidden] {
    display: none !important;
}

.main-screen.note-ready .note-under-sign {
    opacity: 0.94;
    transform: translateX(-50%) translateY(0) scale(1);
}

.main-screen.note-ready .note-peel-target.hidden + .note-under-sign,
.main-screen.note-ready .note-peel-target:has(.note-image.hidden) + .note-under-sign {
    opacity: 0;
    transform: translateX(-50%) translateY(-3px) scale(0.96);
}

.note-peel-target.editing {
    cursor: text;
    touch-action: manipulation;
}

.note-peel-target.admin-editable {
    cursor: text;
}

@media (hover: hover) and (pointer: fine) {
    .note-peel-target:hover,
    .note-peel-target:focus-visible {
        filter:
            saturate(1.035)
            drop-shadow(0 8px 11px rgba(126, 82, 103, 0.13))
            drop-shadow(0 2px 3px rgba(116, 74, 95, 0.1));
    }
}

.note-peel-target.peeling {
    cursor: grabbing;
    animation: none !important;
    transition: none;
    z-index: 4;
    will-change: filter;
}

.note-peel-target.resetting {
    transition: none;
}

.note-peel-target.peeling::before,
.note-peel-target.resetting::before {
    transition: none;
}

.note-peel-target.completing {
    cursor: grabbing;
    animation: none !important;
    pointer-events: none;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), filter 0.22s ease, opacity 0.22s ease;
    z-index: 4;
    will-change: transform, filter, opacity;
    filter:
        saturate(1.035)
        drop-shadow(0 19px 17px rgba(126, 82, 103, 0.19))
        drop-shadow(0 5px 6px rgba(116, 74, 95, 0.1));
}

.note-peel-target.completing::before,
.note-peel-target.detached::before {
    opacity: 0;
    transform: translateY(4px) scaleX(0.82);
}

.main-screen.note-ready .note-peel-target.active-content.detached {
    opacity: 0;
    transition:
        transform 0.82s cubic-bezier(0.38, 0.02, 0.72, 0.45),
        filter 0.54s ease,
        opacity 0.68s ease 0.1s;
    filter:
        saturate(1.01)
        drop-shadow(0 24px 18px rgba(126, 82, 103, 0.11));
}

.note-peel-target.peeled-away {
    visibility: hidden;
}

.note-front-face {
    position: relative;
    z-index: 1;
    width: 100%;
    clip-path: polygon(1px 1px, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - 1px), 1px calc(100% - 1px));
}

.note-front-face::before {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        radial-gradient(
            ellipse 45% 78% at 91% 74%,
            rgba(158, 94, 127, 0.052) 0%,
            rgba(158, 94, 127, 0.025) 36%,
            rgba(158, 94, 127, 0) 70%
        ),
        linear-gradient(
            148deg,
            rgba(255, 255, 255, 0.105) 0%,
            rgba(255, 255, 255, 0.025) 42%,
            rgba(158, 94, 127, 0.034) 100%
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.024) 0%,
            rgba(255, 255, 255, 0) 58%,
            rgba(138, 80, 111, 0.022) 100%
        );
    /* Traces the half-height note art's contour (599x252). */
    clip-path: polygon(
        1% 0.4%,
        99.5% 0.4%,
        99.83% 66.67%,
        99.17% 74.6%,
        98% 82.54%,
        96.66% 86.9%,
        95.83% 88.49%,
        92.65% 92.46%,
        86.81% 95.24%,
        80.13% 96.83%,
        66.78% 98.02%,
        50.08% 98.41%,
        33.39% 98.81%,
        16.69% 98.81%,
        4.17% 99.21%,
        0.5% 98.41%
    );
    content: "";
    pointer-events: none;
}

.note-image {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0 0 16px 16px;
    transition: opacity 0.46s ease;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    transform: translateZ(0);
}

.note-copy,
.note-editor {
    position: absolute;
    z-index: 2;
    /* Fills the note from the star + heart on the left to the star on the
       right; the ::before below makes the lower lines wrap around the
       bunnies. */
    top: 8%;
    right: 13.5%;
    bottom: 5%;
    left: 18.5%;
    margin: 0;
    box-sizing: border-box;
    padding: 0 0 4px;
    overflow: hidden;
    color: rgba(108, 75, 101, 0.72);
    font-family: "Noteworthy", "Chalkboard SE", "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.48;
    letter-spacing: 0.012em;
    overflow-wrap: anywhere;
    text-align: left;
    text-shadow:
        0.25px 0.35px 0.45px rgba(122, 76, 101, 0.26),
        -0.2px 0 0 rgba(255, 255, 255, 0.18);
    white-space: pre-wrap;
    mix-blend-mode: multiply;
    opacity: 0.82;
    transform: rotate(-0.55deg);
    transform-origin: 50% 50%;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-font-smoothing: antialiased;
}

/* An invisible float over the bunnies (traced from the 599x252 art): the
   upper lines run the full width, the lower ones stop before the ears. */
.note-copy::before,
.note-editor::before {
    float: right;
    width: 44.7%;
    height: 100%;
    content: "";
    /* Head top, then the pink bunny's ear, then its narrower body. */
    shape-outside: polygon(100% 0, 100% 48.5%, 34% 48.5%, 19.8% 52.3%, 7.7% 59.9%, 0 68%, 0 79.5%, 19.8% 81.9%, 19.8% 100%, 100% 100%);
}

.note-editor {
    z-index: 3;
    padding: 0 0 4px;
    border: 0;
    outline: 0;
    background: transparent;
    caret-color: rgba(173, 83, 129, 0.92);
    cursor: text;
    opacity: 0.88;
    pointer-events: auto;
    touch-action: manipulation;
    user-select: text;
    -webkit-user-select: text;
}

.note-editor:empty::before {
    float: none;
    width: auto;
    height: auto;
    shape-outside: none;
    color: rgba(153, 105, 130, 0.32);
    content: attr(data-placeholder);
    pointer-events: none;
}

.note-copy[hidden],
.note-editor[hidden] {
    display: none;
}

.note-admin-controls {
    position: absolute;
    z-index: 5;
    top: calc(100% + 7px);
    left: 50%;
    display: flex;
    align-items: center;
    gap: 7px;
    width: 194px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(255, 176, 211, 0.3);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 249, 252, 0.96), rgba(255, 238, 247, 0.94));
    box-shadow:
        0 6px 14px rgba(222, 137, 177, 0.11),
        inset 0 1px 0 rgba(255, 255, 255, 0.78);
    color: rgba(137, 88, 116, 0.64);
    font-family: "Noteworthy", "Chalkboard SE", sans-serif;
    line-height: 1;
    transform: translateX(-50%);
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
}

.note-admin-controls[hidden] {
    display: none;
}

.note-size-small {
    font-size: 11px;
}

.note-size-large {
    font-size: 15px;
}

.note-admin-controls input[type="range"] {
    width: 72px;
    height: 18px;
    margin: 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    cursor: ew-resize;
    touch-action: none;
}

.note-admin-controls input[type="range"]::-webkit-slider-runnable-track {
    height: 3px;
    border-radius: 999px;
    background: rgba(225, 132, 176, 0.28);
}

.note-admin-controls input[type="range"]::-webkit-slider-thumb {
    width: 13px;
    height: 13px;
    margin-top: -5px;
    border: 2px solid rgba(255, 246, 251, 0.96);
    border-radius: 50%;
    appearance: none;
    -webkit-appearance: none;
    background: rgba(224, 132, 176, 0.82);
    box-shadow: 0 2px 5px rgba(154, 81, 115, 0.2);
}

.note-admin-controls input[type="range"]::-moz-range-track {
    height: 3px;
    border: 0;
    border-radius: 999px;
    background: rgba(225, 132, 176, 0.28);
}

.note-admin-controls input[type="range"]::-moz-range-thumb {
    width: 13px;
    height: 13px;
    border: 2px solid rgba(255, 246, 251, 0.96);
    border-radius: 50%;
    background: rgba(224, 132, 176, 0.82);
    box-shadow: 0 2px 5px rgba(154, 81, 115, 0.2);
}

.note-admin-controls button {
    min-width: 47px;
    height: 20px;
    padding: 0 8px;
    border: 1px solid rgba(220, 124, 170, 0.25);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: rgba(132, 77, 108, 0.76);
    font: 600 10px/1 "Noteworthy", "Chalkboard SE", sans-serif;
    cursor: pointer;
}

.note-admin-controls button:disabled {
    cursor: wait;
    opacity: 0.62;
}

.note-fold-layer,
.note-peel-handle {
    position: absolute;
    pointer-events: none;
}

.note-fold-layer {
    z-index: 3;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    opacity: 0;
    transition: opacity 0.1s ease;
}

.note-peel-target.fold-active .note-fold-layer {
    opacity: 1;
}

.note-fold-shadow,
.note-fold-back,
.note-fold-crease-shadow,
.note-fold-crease-highlight {
    pointer-events: none;
    vector-effect: non-scaling-stroke;
}

.note-fold-shadow {
    fill: rgba(119, 75, 97, 0.08);
    transform: translate(1.25px, 1.5px);
}

.note-fold-back {
    stroke: rgba(218, 159, 187, 0.34);
    stroke-width: 0.7px;
    stroke-linejoin: round;
}

.note-fold-crease-shadow {
    stroke: rgba(112, 70, 92, 0.14);
    stroke-width: 2.6px;
    stroke-linecap: round;
}

.note-fold-crease-highlight {
    stroke: rgba(255, 255, 255, 0.62);
    stroke-width: 0.85px;
    stroke-linecap: round;
}

.note-peel-target.peeling .note-front-face,
.note-peel-target.resetting .note-front-face {
    will-change: clip-path;
}

.note-peel-target.peeling .note-fold-layer,
.note-peel-target.resetting .note-fold-layer {
    will-change: opacity;
}

.note-peel-handle {
    right: 0;
    bottom: 0;
    z-index: 4;
    width: 64px;
    height: 70px;
    pointer-events: auto;
    touch-action: none;
    cursor: grab;
}

.note-peel-target.peeling .note-peel-handle,
.note-peel-target.completing .note-peel-handle {
    cursor: grabbing;
}

.note-peel-target.editing .note-peel-handle {
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .note-peel-target,
    .note-front-face,
    .note-image,
    .note-fold-layer,
    .note-peel-handle {
        animation: none;
        transition: none;
    }
}

/* Update drawing widget positioning */
.drawing-widget {
    position: absolute;
    top: var(--open-surface-top);
    left: 50%;
    transform: translateX(-50%) translateY(-8px) scale(0.985);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.42s ease, transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Ensure canvas has fixed dimensions */
#drawing-canvas {
    width: 240px;
    height: 168px;
    background-color: white;
    border: 1px solid var(--glass-pink-line);
    border-radius: 8px;
    cursor: crosshair;
    margin: 8px 0;
    touch-action: none;
    box-shadow: 0 3px 9px rgba(255, 145, 198, 0.12);
    /* Fix rendering glitches on desktop browsers - force hardware acceleration */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    isolation: isolate;
}

.canvas-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;
    background: var(--glass-pink-surface);
    border: none;
    border-radius: 12px;
    box-shadow: var(--glass-pink-shadow);
}

.button-group {
    /* Closed-page geometry stays exactly as it was. */
    position: relative;
    top: -8px;
    display: flex;
    align-items: center;
    gap: 16px;
    height: 60px;
    min-height: 60px;
    margin-bottom: 17px;
    padding-block: 7px;
    justify-content: center;
    flex-wrap: wrap;
    contain: layout;
}

body.has-social-panel-open .button-group,
body.has-wishlist-panel-open .button-group,
body.has-posts-panel-open .button-group {
    /* This is the expanded endpoint, frozen for the whole open session. The
       apparent reclaim is produced by the panel motion viewport below. */
    height: calc(22px + var(--dwl-collapse-distance));
    min-height: calc(22px + var(--dwl-collapse-distance));
    margin-bottom: 2px;
    padding-block: 0;
    /* Open surfaces overlap this reserved strip by design. Keep their empty
       glass from intercepting the visible controls, while letting blank areas
       of the icon group fall through to the panel beneath. */
    z-index: 10;
    pointer-events: none;
}

.dwl-icons-row {
    position: absolute;
    left: 50%;
    top: 30px;
    display: flex;
    align-items: center;
    gap: 16px;
    width: max-content;
    overflow: visible;
    pointer-events: auto;
    opacity: calc(1 - var(--dwl-collapse, 0));
    transform:
        translate(-50%, calc(-50% - (26px * var(--dwl-collapse, 0))))
        scale(calc(1 - (0.12 * var(--dwl-collapse, 0))));
    transform-origin: center;
    will-change: transform, opacity;
}

.button-group.icons-pill-active .dwl-icons-row {
    pointer-events: none;
}

/* Anchored dead-center via position:absolute, independent of the row — it
   can only grow/fade in place, never travel. It used to be a normal flex
   sibling of the row, so as the row shrank, justify-content:center
   re-centered whatever was left and the pill visibly slid toward the new
   center while also growing — reading as "flying in from the side." */
.dwl-icons-pill {
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    top: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 20px;
    padding: 0;
    overflow: hidden;
    opacity: var(--dwl-collapse, 0);
    transform:
        translate(-50%, calc(-50% - (19px * var(--dwl-collapse, 0))))
        scale(calc(0.74 + (0.26 * var(--dwl-collapse, 0))));
    border: 1px solid rgba(255, 180, 212, 0.48);
    border-radius: 999px;
    background:
        linear-gradient(rgba(255, 255, 255, 0.86), rgba(255, 246, 251, 0.74)),
        repeating-linear-gradient(90deg, rgba(255, 231, 242, 0.3) 0 8px, rgba(255, 250, 253, 0.3) 8px 16px);
    color: rgba(174, 85, 130, 0.92);
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(255, 145, 195, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.78);
    -webkit-tap-highlight-color: transparent;
    /* Default off; JS enables this only once the pill is visually settled
       enough that it cannot steal a tap from the outgoing icon row. */
    pointer-events: none;
    will-change: transform, opacity;
}

/* Pill content is a genuine mesh of the same three icons, shrunk and
   overlapped, instead of an unrelated glyph — reads as "the same menu,
   compressed," not a new symbol replacing them. */
.pill-mesh {
    display: flex;
    align-items: center;
    transform: scale(1);
    transform-origin: center;
    transition: transform 0.12s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform;
}

/* Keep press feedback on the inner mesh. The outer pill owns the native
   scroll-timeline transform, so competing for that transform could suppress
   the tap response on newer Safari. */
.dwl-icons-pill:active .pill-mesh {
    transform: scale(0.9);
}

.pill-mini {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    font-size: 8px;
    line-height: 1;
    color: rgba(174, 85, 130, 0.92);
}

.pill-mini img {
    width: 9px;
    height: auto;
    filter: brightness(0.9);
}

.pill-mini .links-tail-raster {
    width: 12px;
    height: 12px;
    object-fit: contain;
}

.pill-mini-swirl {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 10px;
}

.pill-mini + .pill-mini {
    margin-left: -4px;
}

.main-screen.ui-ready .dwl-icons-row > * {
    animation: iconButtonSettle 0.42s cubic-bezier(0.2, 0.88, 0.28, 1.08) both;
}

.main-screen.ui-ready .dwl-icons-row > *:nth-child(2) {
    animation-delay: 0.06s;
}

.main-screen.ui-ready .dwl-icons-row > *:nth-child(3) {
    animation-delay: 0.12s;
}

.email-button,
.next-button {
    background: var(--glass-pink-control);
    border: none;
    padding: 9px 15px;
    border-radius: 23px;
    color: #d7c0c5;
    font-weight: bold;
    cursor: pointer;
    transition: width 0.24s cubic-bezier(0.2, 0.86, 0.28, 1), background 0.22s ease, box-shadow 0.22s ease, transform 0.18s ease, filter 0.22s ease;
    box-shadow:
        var(--glass-pink-shadow-small),
        inset 0 1px 0 rgba(255, 255, 255, 0.62);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    min-width: 46px;
    font-size: 14px;
    position: relative;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}

.email-button img {
    width: 29px;
    height: auto;
    filter: brightness(0.9);
    flex: 0 0 auto;
}

.menu-main-icon {
    flex: 0 0 auto;
    color: #d7c0c5;
    position: relative;
    z-index: 1;
    transform-origin: center;
}

.support-menu-button:not(.open) > .menu-main-icon {
    transform: translateY(0) scale(1);
}

.main-screen.ui-ready .support-menu-button:not(.open) > .menu-main-icon {
    /* Begin only after iconButtonSettle has completed. Starting this loop
       behind the loader left its phase dependent on loading speed, which was
       most visible as a twitch in the larger swirl glyph. */
    animation: softIconIdle 4.8s ease-in-out 0.52s infinite;
}

.main-screen.ui-ready #support-menu-button:not(.open) > .menu-main-icon {
    animation-delay: 1.07s;
}

/* These two icons own their motion internally, so the shared floating idle
   loop must not compete for the same transform. */
.main-screen.ui-ready #socials-button:not(.open) > .links-tail-icon,
.main-screen.ui-ready #support-menu-button:not(.open) > .wishes-swirl {
    animation: none;
}

.main-screen.ui-ready #action-menu-button:not(.open) > .menu-main-icon {
    animation-delay: 1.62s;
}

@keyframes softIconIdle {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    45% {
        transform: translateY(-2px) scale(1.035);
    }
    70% {
        transform: translateY(1px) scale(0.99);
    }
}

@media (prefers-reduced-motion: reduce) {
    .main-screen.ui-ready .support-menu-button:not(.open) > .menu-main-icon {
        animation: none;
    }
}

.email-button:hover,
.next-button:hover {
    transform: translateY(-1px) scale(1.045);
    background: linear-gradient(145deg, rgba(255, 248, 252, 0.94), rgba(255, 196, 225, 0.74));
    box-shadow:
        0 6px 15px rgba(255, 145, 195, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

@media (hover: none), (pointer: coarse) {
    .email-button:hover,
    .next-button:hover {
        transform: none;
        background: var(--glass-pink-control);
    }

    .support-option:hover {
        transform: none;
    }
}

.email-button:active {
    transform: translateY(1px) scale(0.965);
    box-shadow:
        0 2px 6px rgba(255, 145, 195, 0.16),
        inset 0 2px 5px rgba(199, 111, 152, 0.12);
}

.support-menu-button {
    overflow: hidden;
    width: 46px;
    flex: 0 0 auto;
    gap: 0;
    padding-left: 10px;
    padding-right: 10px;
    text-decoration: none;
    white-space: nowrap;
    transition: width 0.24s cubic-bezier(0.2, 0.86, 0.28, 1), background 0.22s ease, box-shadow 0.22s ease, transform 0.18s ease, filter 0.22s ease;
}

.wishlist-direct-button {
    width: 46px;
}

.wishlist-direct-button.show-glitter {
    overflow: visible;
}

.wishlist-direct-button.show-glitter::before {
    width: 78px;
    height: 78px;
}

.wishlist-direct-button.show-glitter::after {
    box-shadow: 0 0 10px rgba(255, 190, 220, 0.28);
}

.support-menu-button.open {
    width: 116px;
    flex-basis: auto;
    gap: 6px;
    padding-left: 6px;
    padding-right: 6px;
    background: linear-gradient(145deg, rgba(255, 250, 253, 0.96), rgba(255, 206, 230, 0.8));
    box-shadow:
        0 7px 18px rgba(255, 145, 195, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.78),
        inset 0 -1px 0 rgba(255, 168, 207, 0.22);
}

.support-options {
    display: flex;
    gap: 6px;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
    transform: translateX(-5px) scale(0.96);
    transform-origin: left center;
    transition: max-width 0.24s cubic-bezier(0.2, 0.86, 0.28, 1), opacity 0.18s ease, transform 0.22s cubic-bezier(0.2, 0.86, 0.28, 1);
    pointer-events: none;
}

.support-menu-button.open .support-options {
    max-width: 78px;
    opacity: 1;
    transform: translateX(0) scale(1);
    pointer-events: auto;
}

.support-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    height: 34px;
    padding: 0 8px;
    border-radius: 15px;
    background: rgba(255, 226, 238, 0.34);
    color: rgba(122, 76, 92, 0.78);
    font-size: 14px;
    line-height: 1;
    text-shadow: none;
    box-shadow: none;
    transition: background 0.2s ease, color 0.2s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.support-option:hover,
.support-option:focus-visible {
    background: rgba(255, 214, 230, 0.5);
    color: rgba(112, 65, 83, 0.9);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(255, 145, 195, 0.13);
    outline: none;
}

.socials-button.open {
    width: 46px;
    flex-basis: 46px;
    gap: 0;
    padding: 0;
    background: linear-gradient(145deg, rgba(255, 252, 254, 0.98), rgba(255, 226, 239, 0.9));
    box-shadow:
        0 5px 13px rgba(211, 92, 140, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.socials-button.open::before,
.socials-button.open::after {
    opacity: 0;
    animation: none;
}

.social-links-shell {
    /* A mascot can only be drawn where the scroller allows it: the panel is the
       scroll container, so overflow-x is clipped to its padding box, and the
       cards fill that box edge to edge -- there is no room beside a card for
       one to peek out of. So the shell is widened by a gutter and the panel is
       padded by the same amount: the card column keeps its exact width, and the
       gutter becomes drawable space to the left of every card, inside the clip.
       The shell's own mask clips to the shell box, which is why the gutter has
       to be part of the shell rather than an overhang bled out of the panel.
       The extra width is all on one side, so the centring transform is shifted
       by half the gutter -- every card ends up in exactly the position it had
       before the gutter existed. */
    /* Full width where there is room beside the centred card column (the
       shared --menu-col, so Links lines up with Wishes and :3), and it gives
       way rather than pushing the panel off a narrow screen: on phones the
       gutter shrinks and the bunny simply peeks less. */
    --social-gutter: min(52px, max(0px, calc((100vw - var(--menu-col)) / 2 - 4px)));
    --social-shell-shift: calc(-50% - (var(--social-gutter) / 2));
    --links-card-w: min(254px, calc(var(--menu-col) - 16px));
    --links-card-inset: calc((var(--menu-col) - var(--links-card-w)) / 2);
    position: absolute;
    top: var(--open-surface-top);
    left: 50%;
    z-index: 8;
    /* The viewport cap is raised from 82vw to account for the gutter being
       part of this width now: the gutter is transparent, so the card column
       keeps the side margins it always had, and stays 254px wide down to a
       ~313px viewport instead of being squeezed by the gutter at 320px. */
    width: min(96vw, calc(var(--menu-col) + var(--social-gutter)));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(var(--social-shell-shift)) var(--menu-enter-from);
    transform-origin: 50% 18%;
    transition:
        opacity 0.34s ease,
        transform 0.42s var(--menu-enter-ease),
        visibility 0s linear 0.42s;
    will-change: opacity, transform;
}

.social-links-loading {
    position: absolute;
    /* Keep loading feedback beneath the note instead of replacing it. */
    inset: 238px 0 auto var(--social-gutter);
    z-index: 4;
    display: none;
    min-height: 150px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: rgba(139, 91, 115, 0.62);
    font-family: var(--doll-hand);
    font-size: 10px;
    letter-spacing: 0.01em;
    text-align: center;
}

.social-links-shell.is-loading .social-links-loading {
    display: flex;
}

.social-links-shell.is-loading > .dwl-motion-viewport {
    /* The note is the Links landing content and remains visible while media
       cards prepare below it. */
    opacity: 1;
}

.social-links-shell.is-loading .social-link-preview {
    opacity: 1 !important;
}

.social-links-shell.is-loading .social-links-panel > :not(.links-note-stage) {
    opacity: 0.001;
    pointer-events: none;
}

.social-links-shell > .dwl-motion-viewport {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.22s ease;
}

.social-links-panel {
    position: relative;
    width: 100%;
    /* The measured cap owns short-screen sizing. A hard 300px floor pushed
       the footer under Safari's toolbar on 667px iPhones. */
    max-height: var(--panel-fill-max, 300px);
    height: var(--panel-fill-max, auto);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Head room for a mascot on whichever card lands first. Every other card
       borrows the card above it instead (see .social-link-mascot), but the
       first one has nothing above it, and anything drawn past the top of a
       scroller's padding box is clipped with no way to scroll it back. The
       tallest overhang among the top-edge mascots is 24px. */
    padding-top: 26px;
    /* Room under the last card for its drop shadow, which the scroller
       would otherwise cut off along a straight line. */
    padding-bottom: 16px;
    /* Pushes the card column back to exactly where it sat before the shell
       grew, leaving the gutter as free space a mascot can occupy. */
    padding-left: var(--social-gutter);
}

/* Preserve the exact peelable note and under-sticker as the first Links item. */
.links-note-stage {
    position: relative;
    width: 100%;
    height: 119px;
    overflow: visible;
}

.links-note-stage .note-peel-target {
    top: 0;
}

/* Sized so the whole sticker (and its shadow) hides under the short note,
   and centred on it. */
.links-note-stage .note-under-sign {
    top: -24px;
    width: 156px;
}

/* Holds the note over its own spot while it's peeled (see liftNote), out of
   the Links panel's clipping; script.js sets its box to the stage's. */
.links-note-stage.note-lift-layer {
    position: fixed;
    z-index: 9;
    margin: 0;
}

.social-links-panel::-webkit-scrollbar {
    display: none;
}

/* The shell is enlarged once when a sufficiently long scroller opens. Its
   negative margin keeps the bottom and every following element in exactly the
   same place. Only this inner viewport then moves: at progress 0 the extra
   area sits clipped below the shell; at progress 1 it has slid fully into the
   newly exposed space above. Scroll-time layout geometry never changes. */
.dwl-motion-shell.dwl-motion-ready {
    height: calc(var(--dwl-motion-base-height) + var(--dwl-collapse-distance));
    margin-top: calc(-1 * var(--dwl-collapse-distance));
    overflow: hidden;
}

.dwl-motion-shell > .dwl-motion-viewport {
    position: relative;
    width: 100%;
}

.dwl-motion-shell.dwl-motion-ready > .dwl-motion-viewport {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: translate3d(0, var(--dwl-motion-hidden), 0);
    will-change: transform;
}

.dwl-motion-ready > .dwl-motion-viewport > .social-links-panel,
.dwl-motion-ready > .dwl-motion-viewport > .popup-content,
.dwl-motion-ready > .dwl-motion-viewport > .doll-wishlist-body,
.dwl-motion-ready > .dwl-motion-viewport > .community-scroll-body {
    height: 100%;
    max-height: none;
}

/* Split transparency masks keep the upper fade attached to the moving visual
   viewport and the lower fade attached to the stationary panel bottom. They
   contain no colour overlay, so pale social cards cannot acquire a wash or a
   horizontal colour seam. JS only toggles binary edge-state classes. */
.scroll-edge-bottom-mask,
.scroll-edge-top-mask {
    --dwl-edge-top: 1;
    --dwl-edge-bottom: 1;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.scroll-edge-bottom-mask {
    transition:
        --dwl-edge-top 0.12s ease-out,
        --dwl-edge-bottom 0.12s ease-out;
    -webkit-mask-image: linear-gradient(
        to bottom,
        #000 0,
        #000 calc(100% - 22px),
        rgba(0, 0, 0, var(--dwl-edge-bottom)) 100%
    );
    mask-image: linear-gradient(
        to bottom,
        #000 0,
        #000 calc(100% - 22px),
        rgba(0, 0, 0, var(--dwl-edge-bottom)) 100%
    );
}

.scroll-edge-top-mask {
    -webkit-mask-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, var(--dwl-edge-top)) 0,
        #000 22px,
        #000 100%
    );
    mask-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, var(--dwl-edge-top)) 0,
        #000 22px,
        #000 100%
    );
}

.scroll-edge-bottom-mask.has-content-above {
    --dwl-edge-top: 0;
}

.scroll-edge-bottom-mask.has-content-below {
    --dwl-edge-bottom: 0;
}

.scroll-edge-bottom-mask > .scroll-edge-top-mask,
.scroll-edge-bottom-mask > .dwl-motion-viewport > .scroll-edge-top-mask {
    --dwl-edge-top: inherit;
}

.social-links-panel {
    scroll-timeline-name: --dwl-social-scroll;
    scroll-timeline-axis: block;
}

/* Socials starts with the smallest expanded gap, so its 38px row reduction
   is also its full reclaim/grow distance. */
body.has-social-panel-open .toggle-container {
    --dwl-collapse-distance: 38px;
}

/* Forces the open transform synchronously (no transition) for one frame so
   script.js can measure the panel's true open height with
   getBoundingClientRect() before the real .active transition starts --
   measuring mid-transition would reserve a moving, wrong target. Mirrors
   .dwl-measure-open in throne-mockup-widget.js exactly. */
.social-links-shell.measure-open {
    transform: translateX(var(--social-shell-shift)) translateY(0) scale(1);
    transition: none;
}

/* Reserves the space this now-scrollable-but-still-growing panel needs so
   it stops overlapping the doll.gg footer pill below .toggle-container --
   same fix, same reason, as .doll-wishlist-panel's own
   --dwl-wishlist-height (see body.has-wishlist-panel-open below). */
body.has-social-panel-open .toggle-container {
    min-height: var(--dwl-social-height, 220px);
    transition: min-height 0.42s cubic-bezier(0.2, 0.9, 0.25, 1);
}

/* Wishlist and :3 restate their own open-surface rhythm as well (see
   throne-mockup-widget.js and the posts rules above). Socials uses 10px on
   regular screens; the more-specific shared short-viewport rule intentionally
   reduces every open footer gap to 6px so the safe-area strip stays visible. */
body.has-social-panel-open .site-brand-footer {
    margin-top: 10px !important;
}

.social-links-shell.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(var(--social-shell-shift)) translateY(0) scale(1);
    transition-delay: 0s;
}

.social-link-card {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 16px;
    align-items: center;
    min-height: 84px;
    gap: 10px;
    padding: 8px 14px 8px 12px;
    /* Pinned paper like the wish cards and :3 notes. No overflow clip: the
       pin overhangs the top edge, and the preview layers round their own
       corners (border-radius: inherit) instead. */
    border: 1px solid var(--paper-line);
    border-radius: var(--paper-radius);
    background: var(--paper-bg);
    box-shadow: var(--paper-ring), var(--paper-shadow);
    color: rgba(106, 92, 99, 0.78);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.18s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    will-change: transform;
}

/* Animated card backgrounds (video or GIF) stay softly masked beneath the
   existing icon, copy, and arrow without changing the card structure. */
.social-link-preview,
.social-link-poster {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    opacity: 0;
    filter: saturate(0.78) brightness(1.06);
    pointer-events: none;
    /* iOS Safari can hardware-decode an autoplaying <video> straight to the
       screen and skip compositing its own CSS opacity/filter with the rest
       of the layer stack -- the video shows through at something close to
       full strength instead of 0.34, which is exactly the "clear photo
       behind the card, not soft at all" look on a real phone even though
       desktop (no such bug) renders the same CSS correctly. Forcing this
       onto its own GPU layer is the standard mitigation. */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transition: opacity 0.22s ease;
}

.social-link-poster {
    object-fit: contain;
    padding: 2px 18%;
    opacity: 0.1;
    filter: saturate(0.62) blur(0.35px);
    transform: translateZ(0) scale(1.35);
    -webkit-transform: translateZ(0) scale(1.35);
}

.social-link-card.has-social-preview .social-link-preview {
    opacity: 0.34;
}

/* The Twitch clip's subject sits low in the frame, so crop from the top. */
#twitch-option .social-link-preview {
    object-position: 50% 100%;
}

.social-link-card.has-social-preview .social-link-poster {
    opacity: 0;
}

.social-link-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(255, 250, 253, 0.72), rgba(255, 240, 248, 0.38));
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}

.social-link-card.has-social-preview::after {
    opacity: 1;
}

.social-link-card > :not(.social-link-preview):not(.social-link-poster) {
    position: relative;
    z-index: 2;
}

/* The shared pin, overhanging the top edge like the Wishes/:3 pins. */
.social-link-card::before {
    content: '';
    position: absolute;
    top: var(--pin-top);
    left: 50%;
    z-index: 5;
    width: var(--pin-size);
    height: var(--pin-size);
    border-radius: 50%;
    background: var(--pin-fill);
    box-shadow: var(--pin-shadow);
    transform: translateX(-50%);
    pointer-events: none;
}

/* A whisper of the pinboard tilt, alternating down the list. The individual
   rotate property composes with the hover/press/pop transforms. */
.social-links-panel > .social-link-card:nth-child(odd),
.social-links-panel > .social-link-card-frame:nth-child(odd) > .social-link-card {
    rotate: -0.4deg;
}

.social-links-panel > .social-link-card:nth-child(even),
.social-links-panel > .social-link-card-frame:nth-child(even) > .social-link-card {
    rotate: 0.4deg;
}

/* Hand-drawn bunny peeking over the snapchat card (drawn by hand on iPad,
   traced from a screenshot of this exact card). The card itself keeps
   overflow:hidden for its own video-preview masking, so the mascot lives
   in a plain relative wrapper alongside it instead of inside the card,
   free to spill above the card's top edge uncropped. */
.social-link-card-frame {
    position: relative;
}

/* Replaces the old grid `gap: 8px` between cards (see .social-links-panel)
   -- targets direct children generically since the snapchat card is wrapped
   in .social-link-card-frame while the rest are bare .social-link-card
   anchors. */
.social-links-panel > * {
    margin-bottom: 8px;
}

/* Links is one strip the width of the note above it, centred on the same
   axis as the Wishes and :3 boards. A single row as wide as a two-card board
   reads heavy, so the shared column sets the centre and margins, not this
   width. */
.social-links-panel > :not(.links-note-stage) {
    width: var(--links-card-w);
    margin-inline: auto;
}

.social-links-panel > *:last-child {
    margin-bottom: 0;
}

.social-links-tip {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    isolation: isolate;
    display: grid;
    min-height: 74px;
    place-items: center;
    padding: 17px 31px 14px;
    overflow: hidden;
    border: 1px dashed rgba(220, 147, 183, 0.46);
    border-radius: 14px 18px 15px 17px;
    background: rgba(255, 248, 252, 0.78);
    box-shadow:
        0 5px 13px rgba(126, 82, 103, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
    color: rgba(130, 87, 107, 0.56);
    font: inherit;
    text-align: inherit;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transform: rotate(-0.45deg) scale(0.985);
    transform-origin: 50% 50%;
    transition: transform 0.14s ease, box-shadow 0.18s ease;
}

.social-links-tip::before {
    position: absolute;
    z-index: 0;
    inset: -10px;
    background: repeating-linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.78) 0 28px,
        rgba(246, 199, 222, 0.52) 28px 56px
    );
    content: "";
    filter: blur(7px);
    opacity: 0.3;
    pointer-events: none;
    transform: scale(1.08);
}

.social-links-tip:active {
    transform: rotate(-0.45deg) scale(0.965);
}

.social-links-tip:focus-visible {
    outline: none;
    box-shadow:
        0 5px 13px rgba(126, 82, 103, 0.08),
        0 0 0 4px rgba(255, 181, 215, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.social-links-tip::after {
    position: absolute;
    z-index: 1;
    top: -4px;
    left: 50%;
    width: 46px;
    height: 13px;
    border: 1px solid rgba(255, 255, 255, 0.54);
    background: rgba(255, 221, 235, 0.47);
    box-shadow: 0 1px 3px rgba(126, 82, 103, 0.05);
    content: "";
    transform: translateX(-50%) rotate(1.5deg);
}

.social-links-tip p {
    position: relative;
    z-index: 2;
    margin: 0;
    font-family: "Comic Sans MS", "Bradley Hand", "Segoe Print", cursive;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.42;
    letter-spacing: 0.005em;
    text-align: center;
    text-shadow: 0.2px 0.3px 0.35px rgba(122, 76, 101, 0.16);
}

.social-links-tip p span {
    display: inline-block;
    margin-left: 2px;
    color: rgba(174, 85, 130, 0.54);
    font-size: 13px;
    transform: rotate(2deg);
}

.social-links-tip-heart {
    position: absolute;
    z-index: 2;
    color: rgba(220, 132, 174, 0.38);
    line-height: 1;
    pointer-events: none;
}

.social-links-tip-heart {
    right: 18px;
    bottom: 14px;
    font-size: 11px;
    transform: rotate(9deg);
}

.social-links-tip-burst {
    position: absolute;
    z-index: 4;
    left: var(--tip-burst-x);
    top: var(--tip-burst-y);
    width: 0;
    height: 0;
    pointer-events: none;
}

.social-links-tip-particle {
    position: absolute;
    left: 0;
    top: 0;
    color: rgba(214, 113, 161, 0.7);
    font-family: Georgia, "Times New Roman", serif;
    font-size: var(--tip-particle-size);
    font-weight: 400;
    line-height: 1;
    opacity: 0;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.72);
    transform: translate(-50%, -50%) rotate(0deg) scale(0.25);
    animation: socialLinksTipBurst 0.62s cubic-bezier(0.16, 0.76, 0.25, 1) var(--tip-particle-delay) forwards;
}

.social-links-tip-particle.is-dot {
    color: rgba(233, 143, 187, 0.62);
    font-family: inherit;
}

@keyframes socialLinksTipBurst {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(0deg) scale(0.25);
    }

    16% {
        opacity: 0.9;
        transform: translate(-50%, -50%) rotate(calc(var(--tip-particle-spin) * 0.18)) scale(1.08);
    }

    100% {
        opacity: 0;
        transform:
            translate(
                calc(-50% + var(--tip-particle-x)),
                calc(-50% + var(--tip-particle-y))
            )
            rotate(var(--tip-particle-spin))
            scale(0.62);
    }
}

@media (prefers-reduced-motion: reduce) {
    .social-links-tip-particle {
        animation-duration: 0.24s;
    }
}

.social-link-mascot {
    position: absolute;
    /* Was -3px (a deliberate small overshoot past the card's own right edge,
       matching the original hand-drawn mockup). That was harmless while the
       panel had no clipping, but the panel now scrolls (overflow-y: auto
       forces overflow-x to clip too, never truly "visible") -- so any
       horizontal overshoot here gets sliced off in a hard vertical line
       right through the ear. Keeping the whole mascot inside the frame's
       own width avoids relying on overflow allowances that scrolling can't
       give it. */
    right: 3px;
    /* Negative, so the mascot hangs into whatever sits above rather than
       reserving space and opening a gap between cards. The card it belongs to
       never moves; only the ~5px bite of paws over its top edge shows. */
    top: -24px;
    width: 56px;
    height: auto;
    pointer-events: none;
    z-index: 3;
    /* Return fade after a card pop; see .social-mascot-popping below. */
    transition: opacity 0.22s ease 0.06s;
}

/* Two more of the same hand-drawn family, peeking over their own cards the
   way snap-bunny does: nuune (the tan lop) rests on the "if it's not here"
   tip, kofitos (the pink lop) on Ko-fi. Both are exported at 168px wide to
   match snap-bunny's source, which keeps every one of them at 3x or better
   over the ~52-56px it actually renders at. */

/* Mirrored to the left edge. Same 3px inset as the right-hand mascots -- the
   panel scrolls, so overflow-x is clipped and any overshoot past the frame's
   own width would be sliced straight through an ear. */
.social-link-mascot--tip {
    right: auto;
    left: 3px;
    /* The tip card itself sits at rotate(-0.45deg); the mascot is its sibling,
       not its child, so it has to be tilted by hand to rest flush on that edge
       instead of floating level above a slanted card. That same rotation also
       drops the card's top-left corner by about a pixel, which the translate
       follows so the paws keep the same bite as the other two. */
    transform: translateY(1px) rotate(-0.45deg);
    transform-origin: 50% 100%;
}

/* kofitos peeks over the upper-left instead of the right, and unlike the other
   two it tucks its body BEHIND its own card rather than resting paws on top.
   Its pose earns that: the nose sits 55% down the crop and the ears sweep past
   it, so there is no flat underside to rest on -- below the mouth it is all
   belly and a curled paw. The card edge crosses at 63% of its height, just
   under the mouth, which leaves the whole face and bow reading clearly while
   the body disappears. */
.social-link-card-frame--kofi {
    /* Contains the negative z-index below. Without its own stacking context
       the mascot would drop behind the panel and page entirely instead of
       just behind this one card. The frame still paints as a unit after the
       card above it, so the head stays on top of that neighbour. */
    isolation: isolate;
}

.social-link-mascot--kofi {
    /* Leans in from the LEFT SIDE of its card rather than resting on the top
       edge like the other two: the body stays behind the card's left edge and
       the head and shoulder clear it, into the gutter carved on
       .social-links-shell. That side entrance is what this pose is drawn for --
       the nose sits 55% down the crop with the ears sweeping past it, so there
       is no flat underside to rest paws on.

       The tilt is what makes the hidden half work. Square-on, the card's
       vertical edge sliced the body in a straight line across its widest point,
       which read as a cut-off sticker. Rotated, the body runs away from that
       edge at an angle, so the same edge crosses a narrowing shape and reads as
       the bunny continuing on behind the card. */
    right: auto;
    /* Clear of the scroller's clip edge. The other two only need 3px, but a
       rotated box is wider than the element: at 66x44 and 28deg the painted
       bounds run ~6px past the element's own left edge, so the inset has to
       cover that too or the corner gets shaved off. */
    /* min() so this can never go positive. Below roughly a 294px viewport the
       gutter collapses far enough that a bare calc() crossed zero and put the
       mascot on top of its own card, showing through the 76%-opaque
       background behind the Ko-fi icon. Clamped, it simply peeks less. */
    /* The drawable room left of the card is the gutter plus the card's inset
       from the column; 6px of it covers the rotated corner. -36px is the full
       lean, which most screens reach; narrow ones lean as far as they can. */
    left: clamp(-36px, calc(6px - var(--social-gutter) - var(--links-card-inset)), 0px);
    top: -20px;
    width: 56px;
    transform: rotate(-40deg);
    transform-origin: 78% 60%;
    /* Behind its own card, so the card edge hides the body. */
    z-index: -1;
}

/* Below roughly a 300px viewport the gutter has collapsed to nothing, so there
   is no drawable space beside the card left for this pose to lean into. The
   min() above stops it crossing onto the card, but at zero offset its body
   still ghosts through the 76%-opaque background behind the Ko-fi icon. No
   room means no mascot -- cleaner than a blur behind the logo. The two
   top-edge mascots are unaffected: they sit above their cards, not beside
   them, and need no gutter at all. */
@media (max-width: 300px) {
    .social-link-mascot--kofi {
        display: none;
    }
}

.social-link-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    overflow: hidden;
    /* Forces its own GPU compositing layer instead of being flattened
       together with the card's stacked background-video/scrim layers below
       (.social-link-preview + the ::after scrim) during paint. iOS Safari
       has a known history of blending stacked semi-transparent layers into
       whatever sits above them instead of compositing it as a clean opaque
       layer on top -- this file already has one documented case of exactly
       that class of bug (see the loading-paw-print drop-shadow comment).
       Cheap and harmless if the icon was already rendering correctly. */
    transform: translateZ(0);
    backface-visibility: hidden;
}

.social-link-icon img {
    display: block;
    width: 42px;
    height: 42px;
    object-fit: contain;
    filter: saturate(0.92) brightness(1.015) contrast(0.98);
    transform-origin: center;
}

.social-link-kofi-icon img {
    width: 48px;
    height: 48px;
    max-width: none;
    object-fit: contain;
}

#snapchat-option .social-link-icon img {
    transform: scale(0.96) translateY(0.5px);
}

#instagram-option .social-link-icon img {
    transform: scale(0.98);
}

#telegram-option .social-link-icon img {
    transform: scale(0.91);
}

#x-option .social-link-icon img {
    transform: scale(0.94);
}

/* OnlyFans' wide mark carries less dark edge per square than the compact
   icons. These very small subpixel offsets strengthen its outside contour
   without repeating the heavy 0.45px treatment Discord briefly had. */
#onlyfans-option .social-link-icon img {
    filter:
        saturate(0.92)
        brightness(1.015)
        contrast(0.98)
        drop-shadow(0.18px 0 0 rgba(55, 12, 10, 0.58))
        drop-shadow(-0.18px 0 0 rgba(55, 12, 10, 0.58))
        drop-shadow(0 0.18px 0 rgba(55, 12, 10, 0.58))
        drop-shadow(0 -0.18px 0 rgba(55, 12, 10, 0.58));
}

.social-link-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
}

.social-link-copy strong {
    overflow: hidden;
    max-width: 100%;
    color: rgba(106, 92, 99, 0.78);
    font-family: var(--doll-hand);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.social-link-copy small {
    overflow: hidden;
    max-width: 100%;
    margin-top: 3px;
    color: rgba(174, 85, 130, 0.62);
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.025em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.social-link-arrow {
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    color: rgba(174, 85, 130, 0.44);
    transform: translateY(-0.5px) rotate(-1deg);
}

.social-link-arrow svg {
    display: block;
    width: 15px;
    height: 15px;
    overflow: visible;
}

.social-link-arrow path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

@media (hover: hover) and (pointer: fine) {
    .social-link-card:hover,
    .social-link-card:focus-visible {
        border-color: rgba(232, 151, 182, 0.82);
        box-shadow: var(--paper-ring), var(--paper-shadow-lift);
        outline: none;
        transform: translateY(-3px);
    }
}

.social-link-card:focus-visible {
    outline: 2px solid rgba(255, 148, 197, 0.5);
    outline-offset: 2px;
}

.social-link-card:active {
    transform: scale(0.985);
}

/* Social links rupture as full cards before their action runs. A fixed clone
   keeps the swelling card outside the panel's required scroll clipping, while
   the real card continues holding its place in the list underneath. */
.social-link-card.social-card-source-popping {
    opacity: 0 !important;
    pointer-events: none;
}

/* The mascot is a sibling of the card, not a child of it, so it survived the
   card being hidden for the pop and kept painting over the empty gap for the
   whole reset delay. It leaves with its card and comes back with it. Faded
   rather than cut so it reads as part of the same rupture. */
.social-link-card-frame.social-mascot-popping > .social-link-mascot {
    opacity: 0;
    transition: opacity 0.12s ease;
}

.social-link-card.social-card-pop-clone {
    position: fixed !important;
    left: var(--social-pop-left) !important;
    top: var(--social-pop-top) !important;
    z-index: 12001;
    width: var(--social-pop-width) !important;
    height: var(--social-pop-height) !important;
    min-height: 0;
    margin: 0 !important;
    pointer-events: none;
    transform: none;
    transform-origin: center;
    transition: none !important;
}

.social-link-card.social-card-pop-clone.popping {
    animation: socialCardBubblePop 0.31s cubic-bezier(0.12, 0.84, 0.2, 1) forwards;
}

.entry-bubble-burst.social-card-bubble-burst {
    z-index: 12002;
}

/* Same droplets, same flight: the transform keyframes below are identical to
   entryBubbleBurstParticle. Only their visibility differs -- for the first
   ~130ms every droplet sits stacked on the card's centre, which on a card
   (unlike the small entry bubble) reads as one pink dot. They stay invisible
   until they start flying, then fade in exactly as before. */
.entry-bubble-burst.social-card-bubble-burst i {
    animation-name: socialCardBurstParticle;
}

@keyframes socialCardBurstParticle {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.25);
    }

    16% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.12);
    }

    20% { opacity: 0; }

    30% { opacity: 0.9; }

    70% { opacity: 0.72; }

    to {
        opacity: 0;
        transform: translate(calc(-50% + var(--burst-x)), calc(-50% + var(--burst-y))) rotate(var(--particle-spin)) scale(0.42);
    }
}

@keyframes socialCardBubblePop {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    48% {
        opacity: 1;
        transform: scale(1.16);
    }

    to {
        opacity: 0;
        transform: scale(1.28, 1.2);
    }
}

@media (prefers-reduced-motion: reduce) {
    .social-links-shell,
    .social-link-card {
        transition: none;
    }
}

.site-link-hidden {
    display: none !important;
}

body:not(.site-links-ready) #socials-button,
body:not(.site-links-ready) #support-menu-button,
body:not(.site-links-ready) .social-links-shell,
body.kofi-public-hidden [id^="kofi-widget-overlay-"],
body.kofi-public-hidden .floatingchat-container,
body.kofi-public-hidden .floatingchat-container-mobi,
body.kofi-public-hidden #doll-kofi-scrim {
    display: none !important;
    pointer-events: none !important;
}

body.site-maintenance-active {
    overflow: hidden;
}

body.site-maintenance-active .main-screen,
body.site-maintenance-active .popup,
body.site-maintenance-active .submit-popup,
body.site-maintenance-active .admin-gate {
    filter: blur(6px);
    pointer-events: none;
    user-select: none;
}

body.site-maintenance-active [id^="kofi-widget-overlay-"],
body.site-maintenance-active .floatingchat-container,
body.site-maintenance-active .floatingchat-container-mobi,
body.site-maintenance-active #doll-kofi-scrim,
body.site-maintenance-active #doll-throne-overlay {
    display: none !important;
}

.site-maintenance-overlay {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: grid;
    place-items: center;
    padding: 22px;
    background:
        radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.58), transparent 22%),
        radial-gradient(circle at 78% 68%, rgba(255, 204, 228, 0.34), transparent 26%),
        rgba(255, 247, 251, 0.42);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.34s ease, visibility 0.34s ease;
}

body.site-maintenance-active .site-maintenance-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.site-maintenance-card {
    position: relative;
    width: min(86vw, 360px);
    padding: 28px 24px 26px;
    border: 1px solid rgba(255, 180, 212, 0.58);
    border-radius: 24px;
    background:
        linear-gradient(rgba(255, 255, 255, 0.84), rgba(255, 246, 251, 0.76)),
        repeating-linear-gradient(90deg, rgba(255, 231, 242, 0.26) 0 10px, rgba(255, 250, 253, 0.26) 10px 20px);
    color: rgba(82, 75, 80, 0.82);
    text-align: center;
    box-shadow:
        0 18px 40px rgba(255, 145, 195, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);
    overflow: hidden;
    transform: translateY(8px) scale(0.98);
    transition: transform 0.34s ease;
}

body.site-maintenance-active .site-maintenance-card {
    transform: translateY(0) scale(1);
}

.site-maintenance-kicker {
    margin: 0 0 8px;
    color: rgba(174, 85, 130, 0.72);
    font-family: var(--doll-hand);
    font-size: 13px;
    font-weight: 700;
}

.site-maintenance-card h2 {
    position: relative;
    margin: 0 0 10px;
    color: rgba(122, 76, 92, 0.88);
    font-family: var(--doll-hand);
    font-size: 24px;
    line-height: 1.1;
}

.site-maintenance-card > p:not(.site-maintenance-kicker):not(.site-maintenance-eta) {
    position: relative;
    margin: 0;
    color: rgba(122, 76, 92, 0.68);
    font-size: 14px;
    line-height: 1.45;
}

.site-maintenance-eta:not(:empty) {
    width: fit-content;
    max-width: 100%;
    margin: 14px auto 0;
    padding: 6px 11px;
    border: 1px solid rgba(255, 180, 212, 0.46);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.54);
    color: rgba(174, 85, 130, 0.74);
    font-size: 12px;
    font-weight: 700;
}

.site-maintenance-bubble {
    position: absolute;
    border-radius: 999px;
    background:
        radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.95) 0 16%, transparent 18%),
        radial-gradient(circle at 50% 52%, rgba(255, 212, 232, 0.62), rgba(255, 145, 195, 0.16));
    opacity: 0.5;
    animation: tourBubbleFloat 4.8s ease-in-out infinite;
}

.site-maintenance-bubble-one {
    width: 74px;
    height: 74px;
    left: -24px;
    top: -22px;
}

.site-maintenance-bubble-two {
    width: 42px;
    height: 42px;
    right: 20px;
    bottom: 18px;
    animation-delay: -1.2s;
}

body.first-visit-tour-active .main-screen header,
body.first-visit-tour-active .main-screen .content-area,
body.first-visit-tour-active .main-screen .site-brand-footer {
    filter: none;
}

body.first-visit-tour-active .button-group {
    position: relative;
    z-index: 10006;
    filter: none;
    transform: translateZ(0);
}

body.first-visit-tour-active .button-group::before {
    content: none;
}

body.first-visit-tour-active .tour-highlight-target {
    filter: none !important;
    box-shadow:
        0 8px 20px rgba(255, 145, 195, 0.28),
        0 0 0 4px rgba(255, 255, 255, 0.46),
        inset 0 1px 0 rgba(255, 255, 255, 0.78);
    animation: tourHighlightBreathe 1.9s ease-in-out 0.3s both;
}

.first-visit-tour {
    position: fixed;
    inset: 0;
    z-index: 10005;
    pointer-events: none;
    opacity: 1;
    contain: strict;
    isolation: isolate;
    transition: opacity 0.425s ease;
}

.tour-veil-layer,
.tour-step-layer {
    position: absolute;
    inset: 0;
}

.tour-veil-layer {
    z-index: 0;
}

.tour-veil-piece {
    position: fixed;
    inset: 0;
    display: block;
    background: rgba(255, 247, 251, 0.46);
    backdrop-filter: blur(4.8px);
    -webkit-backdrop-filter: blur(4.8px);
    opacity: 0;
    will-change: opacity;
    animation: tourVeilIn 0.2625s ease forwards;
}

.first-visit-tour.leaving {
    opacity: 0;
}

.first-visit-tour.leaving .tour-step-layer {
    animation: tourStepOut 0.34s ease forwards;
}

@keyframes tourStepOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

.tour-step-layer {
    z-index: 3;
}

.tour-bubble {
    position: absolute;
    z-index: 1;
    border-radius: 999px;
    background:
        radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.95) 0 16%, transparent 18%),
        radial-gradient(circle at 50% 52%, rgba(255, 212, 232, 0.58), rgba(255, 145, 195, 0.16));
    border: 1px solid rgba(255, 180, 212, 0.34);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.62),
        0 8px 20px rgba(255, 145, 195, 0.12);
    opacity: 0;
    transform: translateY(10px) scale(0.84);
    animation:
        tourBubbleIn 0.3125s ease forwards,
        tourBubbleFloat var(--bubble-speed, 3s) ease-in-out 0.3125s infinite;
}

.tour-bubble-one {
    width: 74px;
    height: 74px;
    left: 8%;
    top: 18%;
    --bubble-speed: 2.75s;
}

.tour-bubble-two {
    width: 34px;
    height: 34px;
    right: 13%;
    top: 24%;
    --bubble-speed: 2.3125s;
    animation-delay: 0s, -0.5s;
}

.tour-bubble-three {
    width: 52px;
    height: 52px;
    left: 16%;
    bottom: 22%;
    --bubble-speed: 3.25s;
    animation-delay: 0s, -0.875s;
}

.tour-bubble-four {
    width: 26px;
    height: 26px;
    right: 20%;
    bottom: 18%;
    --bubble-speed: 2.1875s;
    animation-delay: 0s, -0.25s;
}

.tour-bubble-five {
    width: 44px;
    height: 44px;
    right: 6%;
    top: 57%;
    --bubble-speed: 3.0625s;
    animation-delay: 0s, -1.25s;
}

.tour-bubble-six {
    width: 86px;
    height: 86px;
    right: 24%;
    top: 40%;
    --bubble-speed: 3.5s;
    animation-delay: 0s, -0.6875s;
}

.tour-arrow-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: rgba(184, 83, 132, 0.82);
    overflow: visible;
}

.tour-arrow-line {
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: tourArrowDraw 0.5s cubic-bezier(0.28, 0.72, 0.2, 1) forwards;
}

.tour-label {
    --tour-label-rotation: -2deg;
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 11px 9px;
    color: #613b30;
    font-family: "Chalkboard SE", "Bradley Hand", "Segoe Print", cursive;
    font-size: 24px;
    font-weight: 700;
    line-height: 0.96;
    letter-spacing: 0.8px;
    text-align: center;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.88) rotate(var(--tour-label-rotation));
    pointer-events: none;
    white-space: nowrap;
    animation: tourLabelSoftPop 0.38s cubic-bezier(0.18, 0.88, 0.24, 1.08) 0.46s forwards;
}

.tour-label-text {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: baseline;
    /* 8-direction text-shadow halo instead of -webkit-text-stroke +
       paint-order: older WebKit doesn't honor paint-order on HTML text, so
       the stroke painted over the fill and swallowed thin-stemmed glyphs
       (wishlist, :p) while thicker ones (contact) survived. text-shadow has
       always painted behind the glyph fill, so this degrades correctly
       everywhere. */
    text-shadow:
        -1.6px -1.6px 0 rgba(255, 255, 255, 0.98),
         1.6px -1.6px 0 rgba(255, 255, 255, 0.98),
        -1.6px  1.6px 0 rgba(255, 255, 255, 0.98),
         1.6px  1.6px 0 rgba(255, 255, 255, 0.98),
         0     -1.8px 0 rgba(255, 255, 255, 0.98),
         0      1.8px 0 rgba(255, 255, 255, 0.98),
        -1.8px  0     0 rgba(255, 255, 255, 0.98),
         1.8px  0     0 rgba(255, 255, 255, 0.98),
         0 4px 8px rgba(97, 59, 48, 0.18);
}

.tour-label-letter {
    display: inline-block;
    transform: translateY(var(--tour-letter-lift)) rotate(var(--tour-letter-turn));
    transform-origin: center bottom;
    margin-right: -1px;
    opacity: 1;
}

.tour-label-letter.space {
    width: 0.18em;
    margin-right: 0;
    opacity: 1;
    animation: none;
}

.tour-label-2 {
    --tour-label-rotation: 1.5deg;
}

.tour-label-3 {
    --tour-label-rotation: -3deg;
}

@keyframes tourVeilIn {
    to {
        opacity: 1;
    }
}

@keyframes tourHighlightBreathe {
    0%,
    100% {
        box-shadow:
            0 8px 20px rgba(255, 145, 195, 0.28),
            0 0 0 4px rgba(255, 255, 255, 0.46),
            inset 0 1px 0 rgba(255, 255, 255, 0.78);
    }

    48% {
        box-shadow:
            0 10px 24px rgba(255, 145, 195, 0.34),
            0 0 0 6px rgba(255, 255, 255, 0.32),
            inset 0 1px 0 rgba(255, 255, 255, 0.84);
    }
}

@keyframes tourArrowDraw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes tourLabelSoftPop {
    0% {
        opacity: 0;
        filter: blur(1px);
        transform: translate(-50%, -50%) scale(0.88) rotate(var(--tour-label-rotation));
    }

    68% {
        opacity: 1;
        filter: blur(0);
        transform: translate(-50%, -50%) scale(1.035) rotate(var(--tour-label-rotation));
    }

    100% {
        opacity: 1;
        filter: blur(0);
        transform: translate(-50%, -50%) scale(1) rotate(var(--tour-label-rotation));
    }
}

@keyframes tourBubbleFloat {
    0%,
    100% {
        transform: translateY(0) translateX(0) scale(1);
    }

    50% {
        transform: translateY(-13px) translateX(5px) scale(1.04);
    }
}

@keyframes tourBubbleIn {
    to {
        opacity: 0.72;
        transform: translateY(0) scale(1);
    }
}

.action-menu-button {
    color: #d7c0c5;
}

.action-menu-button.open {
    width: 152px;
}

.action-menu-button.open .action-options {
    max-width: 114px;
}

@keyframes iconButtonSettle {
    0% {
        opacity: 0;
        transform: translateY(7px) scale(0.94);
    }
    70% {
        opacity: 1;
        transform: translateY(-1px) scale(1.025);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.action-menu-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 29px;
    font-size: 22px;
    color: #d7c0c5;
}

.socials-menu-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    color: #d7c0c5;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
}

/* Desktop-study visual language, applied only to the production top controls.
   The wrappers carry the labels and the existing shared row still owns every
   open-panel collapse transform, opacity transition, and hit-testing switch. */
.dwl-icons-row .support-menu-button {
    width: 46px;
    min-width: 46px;
    height: 46px;
    flex: 0 0 46px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.82), rgba(255, 229, 241, 0.65));
    color: rgba(126, 102, 113, 0.58);
    box-shadow: 0 6px 14px rgba(183, 98, 136, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    transition:
        width 0.24s cubic-bezier(0.2, 0.86, 0.28, 1),
        border-color 0.2s ease,
        background 0.22s ease,
        box-shadow 0.2s ease,
        color 0.2s ease,
        transform 0.18s ease;
}

.dwl-icon-name {
    position: absolute;
    left: 50%;
    bottom: 0;
    color: rgba(130, 87, 107, 0.6);
    font-family: var(--doll-hand);
    font-size: 9.5px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    transform: translateX(-50%);
    transition: transform 0.18s ease;
    pointer-events: none;
}

.links-tail-icon,
.wishes-swirl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* An open control is the selected section, not a dismiss button. Keep each
   section's artwork visible and use the shared blush ring as the state cue. */
.dwl-icons-row .support-menu-button.open > .menu-main-icon,
.dwl-icons-row #support-menu-button.dwl-open > .menu-main-icon {
    display: inline-flex;
}

.links-tail-icon {
    width: 32px;
    height: 35px;
}

.links-tail-icon,
.pill-mini {
    position: relative;
}

.wishes-swirl {
    width: 31px;
    height: 31px;
}

.links-tail-svg {
    display: block;
    width: 32px;
    height: 35px;
    overflow: hidden;
}

.links-tail-svg--inline-backup {
    display: none !important;
}

.links-tail-raster {
    display: block;
    width: auto;
    height: 35px;
    object-fit: contain;
}

/* The source PNG stays in the exact production slot as a no-JS/load-error
   fallback. The canvas is slightly wider/taller than the painted cutout so
   the living bend has breathing room without changing the button geometry. */
.links-tail-canvas {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    width: 36px;
    height: 39px;
    opacity: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.links-tail-canvas--mini {
    width: 14px;
    height: 17px;
}

.tail-renderer-ready > .links-tail-raster {
    visibility: hidden;
}

.tail-renderer-ready > .links-tail-canvas {
    opacity: 1;
}

/* Override the legacy .email-button img treatment: it darkens all button
   images and forces them to 29px wide, which distorts this tall cutout. */
.dwl-icons-row #socials-button .links-tail-raster {
    width: auto;
    height: 35px;
    filter: none;
}

.wishes-swirl {
    color: rgba(186, 128, 164, 0.62);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
    font-weight: 400;
    line-height: 1;
}

.wishes-swirl-glyph {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    transform-origin: center;
    will-change: transform;
}

/* The spiral is the Noto Sans Cham U+AA5C outline drawn at the exact spot the
   text glyph used to render, so it looks the same on every device and the
   fairy trail below can follow its arms precisely. */
.wishes-swirl-glyph > .wishes-swirl-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* While wishes is selected, the fairy trail rides the spiral itself instead
   of the rim: a spiral-long trail led by its big sparkle runs along the
   glyph's centreline into the centre and loops, so the spiral is always
   covered. It sits inside the spinning element, so it turns and breathes
   with wishesHypnosis automatically. */
#support-menu-button .wishes-swirl-glyph::after {
    content: '';
    position: absolute;
    left: -6px;
    top: -6px;
    width: 43px;
    height: 43px;
    background: url("site-images/fairy-spiral.svg?v=6") center / 100% 100% no-repeat;
    opacity: 0;
    pointer-events: none;
    /* Once faded out it is also hidden: an invisible spiral kept all of its
       sparkle animations painting, about half the page's idle work. */
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0s linear 0.3s;
}

#support-menu-button.dwl-open .wishes-swirl-glyph::after {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.45s ease 0.05s, visibility 0s;
}

.pill-mini-swirl > .wishes-swirl-svg {
    display: block;
    width: calc(31em / 30);
    height: calc(31em / 30);
}

#support-menu-button .wishes-swirl-glyph {
    animation: wishesHypnosis 7.6s linear infinite;
}

@keyframes wishesHypnosis {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(-180deg) scale(1.07); }
    100% { transform: rotate(-360deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    #support-menu-button .wishes-swirl-glyph {
        animation: none;
    }

    #support-menu-button .wishes-swirl-glyph::after {
        background-image: url("site-images/fairy-spiral-still.svg?v=6");
    }
}

.dwl-icons-row .action-menu-label {
    min-width: 0;
    margin-top: -2px;
    color: rgba(126, 102, 113, 0.58);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
    font-weight: 400;
}

.dwl-icons-row .support-menu-button.open,
.dwl-icons-row #support-menu-button.dwl-open {
    border-color: rgba(255, 255, 255, 0.86);
    border-radius: 50%;
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.9), rgba(255, 228, 241, 0.7));
    color: #c9578b;
    box-shadow:
        0 6px 15px rgba(190, 100, 140, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.dwl-icons-row .support-menu-button:focus-visible {
    outline: 2px solid rgba(216, 69, 125, 0.7);
    outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
    .dwl-icons-row .icon-container:hover {
        transform: none;
    }

    .dwl-icons-row .icon-container:hover > .support-menu-button {
        transform: translateY(-2px);
        border-color: rgba(239, 158, 195, 0.7);
        background: linear-gradient(155deg, rgba(255, 255, 255, 0.88), rgba(255, 229, 241, 0.7));
        color: rgba(200, 78, 133, 0.8);
        box-shadow: 0 9px 19px rgba(183, 98, 136, 0.15), inset 0 1px 0 #fff;
    }

    .dwl-icons-row .icon-container:hover > #support-menu-button.dwl-open {
        transform: translateY(-2px);
    }

    .dwl-icons-row .icon-container:hover > .support-menu-button.open,
    .dwl-icons-row .icon-container:hover > #support-menu-button.dwl-open {
        border-color: rgba(255, 255, 255, 0.9);
        background: linear-gradient(155deg, rgba(255, 255, 255, 0.94), rgba(255, 228, 241, 0.74));
        box-shadow:
            0 8px 18px rgba(190, 100, 140, 0.14),
            inset 0 1px 0 rgba(255, 255, 255, 0.98);
    }

    .dwl-icons-row .icon-container:hover > .dwl-icon-name {
        transform: translate(-50%, -2px);
    }
}

.dwl-icons-row .support-menu-button:active {
    transform: translateY(1px) scale(0.965);
}

.action-option,
#ask-button.action-option {
    min-width: 34px;
    width: 34px;
    flex: 0 0 34px;
    height: 34px;
    padding: 0;
    border-radius: 15px;
    background: rgba(255, 226, 238, 0.34);
    color: rgba(122, 76, 92, 0.78);
    font-size: 14px;
    line-height: 1;
    text-shadow: none;
    box-shadow: none;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.pencil-option {
    position: relative;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 18px;
    font-weight: 700;
}

.question-option {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}

#ask-button:not(.action-option) {
    background: linear-gradient(to right, #fdeef5, #ffdbee);
    border: none;
    padding: 8px 15px;
    border-radius: 20px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 14px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ask-form-container {
    display: none;
    position: absolute;
    top: var(--open-surface-top);
    left: 50%;
    transform: translateX(-50%) scale(1.1);
    transform-origin: top center;
    width: min(82vw, 240px);
    min-height: 134px;
    background:
        linear-gradient(rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.72)),
        repeating-linear-gradient(90deg, rgba(255, 231, 242, 0.42) 0 12px, rgba(255, 250, 253, 0.42) 12px 24px);
    border: 2px solid rgba(255, 171, 205, 0.54);
    border-radius: 18px;
    padding: 22px 16px 24px;
    margin-top: 0;
    box-shadow: 0 6px 18px rgba(255, 174, 211, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 10;
    overflow: visible;
}

.ask-form-container[style*="block"] {
    animation: softPanelIn 0.45s ease forwards;
}

@keyframes softPanelIn {
    from {
        opacity: 0;
        transform: translateX(-50%) scale(1.05) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) scale(1.1) translateY(0);
    }
}

.ask-form-container::before {
    content: '';
    position: absolute;
    inset: 7px;
    border: 1.5px dashed rgba(255, 180, 212, 0.58);
    border-radius: 14px;
    pointer-events: none;
}

.ask-form-container::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 46px;
    width: 72%;
    height: 2px;
    border-radius: 999px;
    background: rgba(255, 158, 199, 0.55);
    transform: translateX(-50%);
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.ask-form-container.has-text::after {
    opacity: 0;
}

.ask-handle-reminder {
    position: absolute;
    z-index: 5;
    right: -12px;
    bottom: 42px;
    max-width: 132px;
    padding: 7px 10px 8px;
    border: 1px solid rgba(255, 177, 211, 0.62);
    border-radius: 14px 14px 5px 14px;
    background: rgba(255, 255, 255, 0.96);
    color: rgba(126, 82, 103, 0.79);
    font-family: var(--doll-hand);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    box-shadow: 0 4px 12px rgba(255, 150, 200, 0.17), inset 0 1px 0 rgba(255, 255, 255, 0.84);
    opacity: 0;
    transform: translate3d(0, 5px, 0) rotate(-2deg) scale(0.84);
    transform-origin: 88% 100%;
    pointer-events: none;
    transition:
        opacity 0.2s ease,
        transform 0.28s cubic-bezier(0.2, 0.82, 0.24, 1);
}

.ask-handle-reminder::before,
.ask-handle-reminder::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-left-style: solid;
    border-left-color: transparent;
    border-top-style: solid;
}

.ask-handle-reminder::before {
    right: 15px;
    bottom: -10px;
    border-left-width: 10px;
    border-top-width: 11px;
    border-top-color: rgba(255, 177, 211, 0.62);
}

.ask-handle-reminder::after {
    right: 16px;
    bottom: -8px;
    border-left-width: 8px;
    border-top-width: 9px;
    border-top-color: rgba(255, 255, 255, 0.96);
}

.ask-handle-reminder.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(-2deg) scale(1);
}

#ask-textarea {
    width: 100%;
    height: 58px;
    outline: none;
    border: none !important;
    border-radius: 0;
    padding: 5px 18px 0;
    box-sizing: border-box;
    resize: none;
    font-family: var(--doll-hand);
    margin-bottom: 2px;
    color: rgba(86, 78, 82, 0.84);
    background: transparent;
    box-shadow: none;
    overflow-y: auto;
    transition: color 0.3s ease;
    font-size: 16px !important;
    line-height: 1.35;
    text-align: center;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    z-index: 1;
}

#ask-textarea:focus {
    border-color: transparent !important;
    box-shadow: none;
    font-size: 16px !important;
}

#ask-textarea::placeholder {
    color: rgba(93, 87, 91, 0.72);
    opacity: 1;
    text-align: center;
}

.ask-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    left: 19px;
    right: 37px;
    bottom: 13px;
    z-index: 2;
    pointer-events: auto;
    gap: 6px;
    white-space: nowrap;
}

#char-count {
    font-family: var(--doll-hand);
    font-size: 11px;
    color: rgba(255, 132, 187, 0.82);
    font-weight: 700;
}

#send-question {
    position: static;
    transform: none;
    width: auto;
    min-width: 48px;
    height: 30px;
    padding: 0 10px;
    border: 1.5px solid rgba(255, 182, 214, 0.72);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 186, 221, 0.94), rgba(255, 141, 196, 0.88)) !important;
    color: rgba(255, 255, 255, 0.96);
    font-family: var(--doll-hand);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(190, 75, 132, 0.2);
    box-shadow: 0 4px 12px rgba(255, 157, 205, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.62);
    margin: 0 0 0 auto;
    pointer-events: auto;
}

#send-question:hover,
#send-question:focus-visible {
    background: linear-gradient(180deg, rgba(255, 199, 228, 0.98), rgba(255, 152, 202, 0.94)) !important;
    transform: translateY(-1px);
    outline: none;
}

.ask-deco {
    position: absolute;
    z-index: 2;
    color: rgba(255, 132, 187, 0.76);
    font-family: "Comic Sans MS", "Trebuchet MS", sans-serif;
    line-height: 1;
    pointer-events: none;
}

.ask-sparkle-left {
    top: 30px;
    left: 8px;
    font-size: 14px;
}

.ask-sparkle-right {
    top: 20px;
    right: 17px;
    font-size: 19px;
}

.ask-heart-right {
    right: 14px;
    bottom: 42px;
    color: rgba(255, 132, 187, 0.76);
    font-family: var(--doll-hand);
    font-size: 17px;
    transform: rotate(11deg);
}

.ask-corner-mascot {
    position: absolute;
    right: -14px;
    bottom: -12px;
    width: 70px;
    height: auto;
    z-index: 3;
    pointer-events: none;
}

/* Posts Popup Styles */
.posts-popup {
    display: block;
    position: absolute;
    top: var(--open-surface-top);
    left: 0;
    width: 100%;
    height: auto;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: 9;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px) scale(0.98);
    transition: opacity 0.45s ease, transform 0.45s ease;
}

.posts-popup.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.posts-popup .popup-content {
    /* Free-floating, no card chrome — matches .doll-wishlist-panel's own
       background-less treatment. Only .posts-content (below) scrolls. */
    width: min(88vw, 300px);
    max-height: var(--panel-fill-max, 420px);
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    padding: 8px;
}

.posts-deco {
    position: absolute;
    z-index: 2;
    color: rgba(255, 132, 187, 0.72);
    font-family: "Comic Sans MS", "Trebuchet MS", sans-serif;
    line-height: 1;
    pointer-events: none;
}

.posts-sparkle-left {
    top: 42px;
    left: 12px;
    font-size: 13px;
}

.posts-sparkle-right {
    top: 21px;
    right: 43px;
    font-size: 18px;
}

.posts-heart-right {
    right: 16px;
    bottom: 23px;
    color: rgba(255, 132, 187, 0.72);
    font-family: var(--doll-hand);
    font-size: 18px;
    transform: rotate(11deg);
}

.posts-header {
    position: relative;
    top: 0;
    background: transparent;
    border-radius: 0;
    z-index: 10;
    border-bottom: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 5px 0 3px;
    overflow: visible;
    flex-shrink: 0;
}

.posts-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 180, 212, 0.34);
    border-radius: 999px;
    padding: 3px;
    gap: 3px;
    box-shadow: 0 2px 6px rgba(255, 157, 205, 0.14);
    margin-top: 0;
    position: relative;
    overflow: visible;
}

.posts-scroll-shell {
    flex: 1;
    display: flex;
    min-height: 0;
    position: relative;
}

.posts-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 8px 12px;
    min-height: 0;
    position: relative;
    z-index: 1;
    scroll-timeline-name: --dwl-posts-scroll;
    scroll-timeline-axis: block;
}

.posts-content.posts-is-fetching {
    min-height: clamp(170px, 38vh, 300px);
    overflow: hidden;
}

.posts-content.posts-is-fetching > .tab-content {
    visibility: hidden;
    pointer-events: none;
}

.posts-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: grid;
    place-items: center;
    min-height: clamp(170px, 38vh, 300px);
    pointer-events: none;
}

.posts-loading-overlay[hidden] {
    display: none;
}

.doll-wishlist-body.dwl-scroll-body {
    scroll-timeline-name: --dwl-wishlist-scroll;
    scroll-timeline-axis: block;
}

.dwl-motion-ready .doll-wishlist-foot-dock {
    transform: translate3d(0, calc(-1 * var(--dwl-motion-hidden)), 0);
    will-change: transform;
}

/* Safari 26+ can bind these compositor-friendly properties directly to the
   native scroller. Older Safari keeps the identical transform-only result via
   the rAF fallback driven by --dwl-collapse. In both paths, layout is frozen. */
@keyframes dwlIconsRowCollapse {
    from {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    to {
        opacity: 0;
        transform: translate(-50%, calc(-50% - 26px)) scale(0.88);
    }
}

@keyframes dwlIconsPillCollapse {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.74);
    }
    to {
        opacity: 1;
        transform: translate(-50%, calc(-50% - 19px)) scale(1);
    }
}

/* Hit-testing follows the native scroll timeline independently of the visual
   transforms. Keep the original controls active until their eased visual
   opacity is about 8%; switching earlier made still-visible icons appear
   broken. The 84% timeline point matches the JS 92% eased threshold. */
@keyframes dwlIconRowHitTesting {
    0%, 84% { pointer-events: auto; }
    84.01%, 100% { pointer-events: none; }
}

@keyframes dwlIconsPillHitTesting {
    0%, 84% { pointer-events: none; }
    84.01%, 100% { pointer-events: auto; }
}

@keyframes dwlPanelViewportReveal {
    from { transform: translate3d(0, var(--dwl-collapse-distance), 0); }
    to { transform: translate3d(0, 0, 0); }
}

@keyframes dwlWishlistDockReveal {
    from { transform: translate3d(0, calc(-1 * var(--dwl-collapse-distance)), 0); }
    to { transform: translate3d(0, 0, 0); }
}

@keyframes dwlCommunityBottomEdgeReveal {
    from { --community-edge-shift: 41px; }
    to { --community-edge-shift: 0px; }
}

@supports ((animation-timeline: scroll()) and (timeline-scope: --dwl-test)) {
    body.has-dwl-scroll-motion .dwl-icons-row {
        animation:
            dwlIconsRowCollapse 1ms var(--dwl-collapse-easing) both,
            dwlIconRowHitTesting 1ms linear both;
    }

    body.has-dwl-scroll-motion .dwl-icons-pill {
        animation:
            dwlIconsPillCollapse 1ms var(--dwl-collapse-easing) both,
            dwlIconsPillHitTesting 1ms linear both;
    }

    body.has-dwl-scroll-motion .dwl-motion-ready > .dwl-motion-viewport {
        animation: dwlPanelViewportReveal 1ms var(--dwl-collapse-easing) both;
    }

    body.has-dwl-scroll-motion .dwl-motion-ready .doll-wishlist-foot-dock {
        animation: dwlWishlistDockReveal 1ms var(--dwl-collapse-easing) both;
    }

    body.has-social-panel-open.has-dwl-scroll-motion .dwl-icons-row,
    body.has-social-panel-open.has-dwl-scroll-motion .dwl-icons-pill,
    body.has-social-panel-open.has-dwl-scroll-motion .dwl-motion-ready > .dwl-motion-viewport {
        animation-timeline: --dwl-social-scroll;
        animation-range: 0px var(--dwl-motion-range, 72px);
    }

    body.has-wishlist-panel-open.has-dwl-scroll-motion .dwl-icons-row,
    body.has-wishlist-panel-open.has-dwl-scroll-motion .dwl-icons-pill,
    body.has-wishlist-panel-open.has-dwl-scroll-motion .dwl-motion-ready > .dwl-motion-viewport,
    body.has-wishlist-panel-open.has-dwl-scroll-motion .dwl-motion-ready .doll-wishlist-foot-dock {
        animation-timeline: --dwl-wishlist-scroll;
        animation-range: 0px var(--dwl-motion-range, 90px);
    }

    body.has-posts-panel-open.has-dwl-scroll-motion .dwl-icons-row,
    body.has-posts-panel-open.has-dwl-scroll-motion .dwl-icons-pill,
    body.has-posts-panel-open.has-dwl-scroll-motion .dwl-motion-ready > .dwl-motion-viewport {
        animation-timeline: --dwl-posts-scroll;
        animation-range: 0px var(--dwl-motion-range, 106px);
    }

    body.has-posts-panel-open.has-dwl-scroll-motion
        .community-hub.dwl-motion-ready .community-scroll-body {
        animation: dwlCommunityBottomEdgeReveal 1ms var(--dwl-collapse-easing) both;
        animation-timeline: --dwl-posts-scroll;
        animation-range: 0px var(--dwl-motion-range, 106px);
    }
}

.tab-button {
    background: transparent;
    border: none;
    padding: 4px 14px;
    min-width: 58px;
    min-height: 22px;
    cursor: pointer;
    color: var(--glass-pink-text);
    font-weight: 700;
    font-size: 11.5px;
    border-radius: 999px;
    transition: all 0.2s ease;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.tab-button:hover {
    color: rgba(112, 65, 83, 0.9);
}

.tab-button.active {
    background: #fff;
    color: #d84488;
    box-shadow: 0 1px 4px rgba(255, 145, 198, 0.22);
}

.tab-button:nth-child(2) {
    min-width: 40px;
    padding: 4px 10px;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.posts-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 10px;
    padding: 6px 0 10px;
}

#questions-list {
    display: grid;
    grid-template-columns: 1fr;
    column-count: auto;
    gap: 16px;
    padding: 6px 0 10px;
}

.posts-fetch-state {
    grid-column: 1 / -1;
    min-height: 86px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: rgba(139, 91, 115, 0.62);
    font-family: var(--doll-hand);
    font-size: 10px;
    letter-spacing: 0.01em;
    text-align: center;
}

.posts-fetch-state.is-error {
    color: rgba(139, 91, 115, 0.72);
}

/* An error isn't loading: the paw rests, and the retry pill takes taps
   even though the overlay around it doesn't. */
.posts-fetch-state.is-error .posts-fetch-paw {
    animation: none;
    opacity: 0.4;
}

.posts-fetch-retry {
    margin-top: 3px;
    pointer-events: auto;
}

.posts-fetch-paw.loading-paw-print {
    --paw-rotation: 0deg;
    width: 19px;
    height: 22px;
    margin: 0;
    opacity: 0.58;
    transform: rotate(0deg) scale(0.78);
    animation: postsFetchPaw 1.05s ease-in-out infinite;
}

/* All :3 records and reply media are prepared here while the visible lists
   continue to show only their paw state. It stays rendered (not display:none)
   so Safari will actually decode GIF/video/iframe media before the atomic
   reveal, but lives far outside the viewport and cannot receive input. */
.posts-media-staging {
    position: fixed;
    left: -10000px;
    top: 0;
    width: 300px;
    opacity: 0;
    pointer-events: none;
    contain: layout paint style;
    z-index: -1;
}

.posts-media-placeholder {
    display: flex;
    width: 100%;
    aspect-ratio: 330 / 230;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 4px;
    background: rgba(255, 247, 251, 0.82);
    color: rgba(139, 91, 115, 0.58);
    font-family: var(--doll-hand);
    font-size: 9px;
    text-align: center;
}

@keyframes postsFetchPaw {
    0%, 100% { opacity: 0.34; transform: translateY(1px) scale(0.72); }
    50% { opacity: 0.72; transform: translateY(-1px) scale(0.84); }
}

@media (max-width: 428px) {
    .posts-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

@media (max-width: 375px) {
    .posts-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
    #questions-list {
        column-count: auto;
        column-gap: 0;
        grid-template-columns: 1fr;
    }
    
    .posts-header {
        padding: 0;
    }
    
    .tab-button {
        padding: 4px 12px;
        font-size: 12px;
    }
}

@media (max-width: 320px) {
    .posts-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 13px 8px;
    }

    #questions-list {
        column-count: auto;
        column-gap: 0;
        grid-template-columns: 1fr;
    }
}

#questions-list .question-item {
    margin-bottom: 0;
    width: 100%;
    height: fit-content;
    transition: none;
    opacity: 1;
    animation: none;
    break-inside: avoid;
    display: block;
}

/* Pinned-to-corkboard look: each card gets a small alternating tilt so the
   grid/column doesn't read as a rigid table. */
#questions-list .question-item:nth-child(3n+1) { --pin-rot: -2deg; }
#questions-list .question-item:nth-child(3n+2) { --pin-rot: 1.6deg; }
#questions-list .question-item:nth-child(3n+3) { --pin-rot: -1.4deg; }

#drawings-list .post-item {
    transition: none;
    opacity: 1;
    animation: none;
}

#drawings-list .post-item:nth-child(4n+1) { transform: rotate(-3deg); }
#drawings-list .post-item:nth-child(4n+2) { transform: rotate(2deg); }
#drawings-list .post-item:nth-child(4n+3) { transform: rotate(2.5deg); }
#drawings-list .post-item:nth-child(4n+4) { transform: rotate(-2deg); }

.post-item {
    background: #fff;
    border: none;
    border-radius: 8px;
    padding: 4px;
    position: relative;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14);
}

.post-item::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff, #ffb6d5);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3), inset 0 -1px 1px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.5);
    pointer-events: none;
}

.post-item img {
    width: 100%;
    border-radius: 4px;
    display: block;
}

.post-item > img {
    aspect-ratio: 330 / 230;
    object-fit: contain;
    background: #fff;
}

.question-item {
    background:
        linear-gradient(rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.74)),
        repeating-linear-gradient(90deg, rgba(255, 231, 242, 0.32) 0 10px, rgba(255, 250, 253, 0.32) 10px 20px);
    padding: 14px 14px 12px;
    border-radius: 4px;
    margin-bottom: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.13);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 180, 212, 0.42);
    position: relative;
    transform: rotate(var(--pin-rot, 0deg));
}

.question-item::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff, #ffb6d5);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3), inset 0 -1px 1px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.5);
    pointer-events: none;
}

.question-item:hover {
    transform: rotate(var(--pin-rot, 0deg)) translateY(-2px);
    box-shadow: 0 4px 14px rgba(255, 145, 198, 0.18);
    border-color: rgba(255, 182, 193, 0.28);
}

.question-text {
    margin: 0;
    font-family: var(--doll-hand);
    font-style: normal;
    color: rgba(82, 75, 80, 0.84);
    font-size: 12px;
    line-height: 1.35;
}

.answer-text {
    margin: 8px 0 0;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 158, 199, 0.42);
    color: rgba(217, 91, 154, 0.82);
    font-weight: bold;
    font-size: 12px;
    line-height: 1.35;
}

.answer-gif-link {
    display: block;
    width: min(112px, 100%);
    aspect-ratio: 4 / 3;
    max-height: 84px;
    margin: 7px auto 0;
    border-radius: 9px;
    overflow: hidden;
    border: 1px solid rgba(255, 180, 212, 0.42);
    box-shadow: 0 4px 12px rgba(255, 145, 198, 0.12);
}

.answer-gif {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 84px;
    object-fit: contain;
    background: rgba(255, 247, 251, 0.72);
}

.answer-giphy-link {
    position: relative;
    aspect-ratio: 16 / 9;
    max-height: 63px;
}

.answer-giphy-gif {
    object-fit: cover;
    max-height: none;
    transform: scale(1.16);
    transform-origin: center;
}

.answer-gif-link-small .answer-gif {
    object-fit: cover;
}

.answer-media-frame {
    position: relative;
    display: block;
    width: min(112px, 100%);
    aspect-ratio: 4 / 3;
    max-height: 84px;
    margin: 7px auto 0;
    overflow: hidden;
    border: 1px solid rgba(255, 180, 212, 0.42);
    border-radius: 9px;
    background: rgba(255, 244, 249, 0.72);
    box-shadow: 0 4px 12px rgba(255, 145, 198, 0.12);
}

.answer-media-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.answer-tenor-frame .tenor-gif-embed,
.answer-tenor-frame .tenor-gif-embed > div,
.answer-tenor-frame .tenor-gif-embed iframe,
.answer-tenor-frame iframe {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

.answer-tenor-frame .tenor-gif-embed > a {
    visibility: hidden;
}

.answer-video-frame {
    display: block;
    width: min(112px, 100%);
    aspect-ratio: 4 / 3;
    max-height: 84px;
    margin: 7px auto 0;
    overflow: hidden;
    border: 1px solid rgba(255, 180, 212, 0.42);
    border-radius: 9px;
    background: rgba(255, 247, 251, 0.72);
    box-shadow: 0 4px 12px rgba(255, 145, 198, 0.12);
}

.answer-video-frame video {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 84px;
    object-fit: contain;
}

.answer-media-click-target {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    border-radius: inherit;
    -webkit-tap-highlight-color: transparent;
}

.answer-media-click-target:focus-visible {
    outline: 2px solid rgba(218, 112, 162, 0.5);
    outline-offset: -3px;
}

/* Compatibility for question cards retained from the previous renderer or a
   briefly mixed cached release: provider pills should never remain visible. */
.answer-media-source {
    display: none !important;
}

.answer-media-unavailable {
    display: inline-block;
    margin-top: 7px;
}

.like-sticker {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
}

.like-button {
    width: 26px;
    height: 26px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(5px);
    position: relative;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.like-button:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.like-button:active {
    transform: scale(0.95);
    transition: transform 0.1s ease;
}

.like-icon {
    width: 18px;
    height: 18px;
    transition: all 0.3s ease;
    object-fit: contain;
}

/* Reaction Picker */
.reaction-picker {
    background: rgba(255, 255, 255, 0.98);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(255, 105, 180, 0.15), 0 4px 16px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 182, 193, 0.4);
    z-index: 10000;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    min-width: 112px;
    transform-origin: center bottom;
}

.reaction-options {
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
}

.reaction-option {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    background: rgba(255, 255, 255, 0.9);
    position: relative;
    flex-shrink: 0;
    border: 1.5px solid transparent;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.reaction-option:hover {
    transform: scale(1.2) translateY(-2px);
    background: rgba(255, 182, 193, 0.15);
    box-shadow: 0 4px 12px rgba(255, 105, 180, 0.3);
}

.reaction-option.current-reaction {
    background: rgba(255, 182, 193, 0.25);
    border: 1.5px solid #ff69b4;
    transform: scale(1.1);
    box-shadow: 0 4px 16px rgba(255, 105, 180, 0.4);
}

.reaction-option img {
    width: 16px;
    height: 16px;
}

.reaction-count {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: linear-gradient(135deg, #ff69b4, #ff1493);
    color: white;
    border-radius: 50%;
    width: 13px;
    height: 13px;
    font-size: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    box-shadow: 0 2px 6px rgba(255, 105, 180, 0.4);
    border: 1.5px solid white;
    transition: all 0.3s ease;
}

.post-item {
    position: relative;
    overflow: visible;
}

/* Contact form CSS removed - using Ko-fi widget instead */

.terms-content {
    max-height: 400px;
    overflow-y: auto;
    padding: 20px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    margin-top: 15px;
    border: 1px solid rgba(255, 182, 193, 0.3);
    box-shadow: 0 4px 15px rgba(255, 105, 180, 0.1);
}

.terms-content p {
    margin: 0 0 15px 0;
    line-height: 1.6;
    color: #333;
    font-size: 14px;
    text-align: justify;
}

.terms-content p:last-child {
    margin-bottom: 0;
}

.terms-content strong {
    color: #ff69b4;
    font-weight: 600;
}

.terms-content em {
    color: #888;
    font-style: italic;
}

/* Submit Popup */
.submit-popup {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(255, 245, 250, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    z-index: 10002;
    transition: opacity 0.24s ease;
}

.submit-popup.show {
    opacity: 1;
    pointer-events: auto;
}

.submit-popup-card {
    position: relative;
    width: min(78vw, 270px);
    min-height: 108px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 28px;
    border: 1px solid rgba(255, 180, 212, 0.58);
    border-radius: 22px;
    background:
        linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 251, 253, 0.76)),
        repeating-linear-gradient(90deg, rgba(255, 231, 242, 0.34) 0 12px, rgba(255, 250, 253, 0.34) 12px 24px);
    box-shadow:
        0 15px 36px rgba(255, 145, 198, 0.24),
        inset 0 0 0 1px rgba(255, 255, 255, 0.82);
    transform: translateY(10px) scale(0.96);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
}

.submit-popup.show .submit-popup-card {
    transform: translateY(0) scale(1);
}

.submit-popup-card::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1.5px dashed rgba(255, 180, 212, 0.5);
    border-radius: 17px;
    pointer-events: none;
}

.submit-popup-card p {
    position: relative;
    z-index: 2;
    margin: 0;
    color: rgba(122, 76, 92, 0.82);
    font-family: var(--doll-hand);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
}

.submit-popup-heart,
.submit-popup-sparkle {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

.submit-popup-heart {
    width: 13px;
    height: 13px;
    border-radius: 2px;
    background: rgba(255, 132, 187, 0.56);
    transform: rotate(-45deg);
}

.submit-popup-heart::before,
.submit-popup-heart::after {
    content: '';
    position: absolute;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: inherit;
}

.submit-popup-heart::before {
    top: -6.5px;
    left: 0;
}

.submit-popup-heart::after {
    top: 0;
    left: 6.5px;
}

.submit-popup-heart-one {
    left: 22px;
    top: 25px;
}

.submit-popup-heart-two {
    right: 25px;
    bottom: 24px;
    opacity: 0.64;
    transform: rotate(-34deg) scale(0.82);
}

.submit-popup-sparkle {
    color: rgba(255, 132, 187, 0.7);
    font-size: 16px;
    line-height: 1;
}

.submit-popup-sparkle-one {
    right: 32px;
    top: 22px;
}

.submit-popup-sparkle-two {
    left: 34px;
    bottom: 21px;
    font-size: 12px;
}

.admin-gate {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(255, 245, 250, 0.18);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    opacity: 0;
    pointer-events: none;
    z-index: 10003;
    transition: opacity 0.24s ease;
}

.admin-gate.show {
    opacity: 1;
    pointer-events: auto;
}

.admin-gate-card {
    position: relative;
    width: min(76vw, 250px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 24px 24px 20px;
    border: 1px solid rgba(255, 180, 212, 0.58);
    border-radius: 20px;
    background:
        linear-gradient(rgba(255, 255, 255, 0.82), rgba(255, 251, 253, 0.78)),
        repeating-linear-gradient(90deg, rgba(255, 231, 242, 0.34) 0 12px, rgba(255, 250, 253, 0.34) 12px 24px);
    box-shadow: 0 15px 36px rgba(255, 145, 198, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.82);
    transform: translateY(10px) scale(0.96);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
}

.admin-gate.show .admin-gate-card {
    transform: translateY(0) scale(1);
}

.admin-gate-card label {
    color: rgba(122, 76, 92, 0.78);
    font-family: var(--doll-hand);
    font-size: 13px;
    font-weight: 700;
}

.admin-gate-card input {
    width: 128px;
    height: 34px;
    border: 1px solid rgba(255, 180, 212, 0.48);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: rgba(122, 76, 92, 0.86);
    text-align: center;
    font-size: 16px;
    outline: none;
    box-shadow: inset 0 1px 3px rgba(255, 145, 195, 0.08);
}

.admin-gate-card input:focus {
    border-color: rgba(255, 132, 187, 0.74);
    box-shadow: 0 0 0 3px rgba(255, 180, 212, 0.18);
}

.admin-gate-card button[type="submit"] {
    height: 32px;
    min-width: 82px;
    border: none;
    border-radius: 999px;
    background: var(--glass-pink-active);
    color: white;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 3px 9px rgba(255, 145, 198, 0.22);
}

.admin-gate-close {
    position: absolute;
    top: 8px;
    right: 9px;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 245, 250, 0.68);
    color: rgba(122, 76, 92, 0.72);
    cursor: pointer;
}

#admin-gate-error {
    min-height: 15px;
    margin: 0;
    color: rgba(217, 91, 154, 0.82);
    font-size: 11px;
}

.admin-gate-sparkle {
    position: absolute;
    color: rgba(255, 132, 187, 0.64);
    pointer-events: none;
}

.admin-gate-sparkle-one {
    left: 26px;
    top: 23px;
}

.admin-gate-sparkle-two {
    right: 32px;
    bottom: 22px;
    font-size: 12px;
}

/* Hide Ko-fi default floating button */
.floatingchat-container-wrap,
.floatingchat-container-wrap-mobi,
.floatingchat-container,
.floatingchat-container-mobi {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    width: 0 !important;
}

.answer-text .answer-link {
    position: relative;
    text-decoration: none;
    color: #a85070;
    background: linear-gradient(105deg, rgba(255, 192, 220, 0.38) 0%, rgba(255, 168, 208, 0.32) 100%);
    border-radius: 5px;
    padding: 0 4px 1px;
    display: inline;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    box-shadow: 0 1px 0 rgba(255, 130, 185, 0.28), inset 0 -1px 0 rgba(255, 160, 205, 0.2);
    transition: background 0.18s ease;
}

.answer-text .answer-link:hover {
    background: linear-gradient(105deg, rgba(255, 200, 228, 0.58) 0%, rgba(255, 176, 215, 0.52) 100%);
}

.answer-text .answer-link::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(255, 182, 193, 0.0) 35%,
        rgba(255, 230, 240, 0.85) 50%,
        rgba(255, 182, 193, 0.0) 65%,
        transparent 80%
    );
    background-size: 200% 100%;
    background-position: -200% 0;
    animation: linkShine 3.75s linear infinite;
    pointer-events: none;
    border-radius: 5px;
    mix-blend-mode: overlay;
}

@keyframes linkShine {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Prevent Ko-fi icon link from showing underline */
/* Ko-fi icon now uses .email-button class - no separate styling needed */

/* Unified :3 community surface. This layer only rearranges the existing Ask,
   Doodle, and public-post components; their data, media, and submission styles
   above remain the source of truth. */
body.has-community-hub-open #action-menu-button.open {
    width: 46px;
    min-width: 46px;
    flex-basis: 46px;
    padding: 0;
    gap: 0;
}

body.has-community-hub-open .toggle-container {
    min-height: var(--posts-panel-height, 590px);
}

/* :3 owns one internal native scroller. Prevent an iOS bottom-edge swipe
   from chaining into the page and carrying the otherwise-correct footer out
   of the visual viewport. Socials/Wishlist keep their existing page rules. */
body.has-posts-panel-open.has-community-hub-open {
    overflow: hidden;
}

body.has-community-hub-open .site-brand-footer {
    margin-top: 24px;
}

body.has-community-hub-open #action-menu-button.open .action-options {
    display: none;
}

.community-hub {
    /* Keep the same 12px breathing room beneath the fully collapsed icon pill
       that the previous visual treatment had, without coupling it to height. */
    --dwl-collapse-distance: 41px;
    position: absolute;
    top: var(--open-surface-top);
    left: 50%;
    /* Match Wishlist's layer: the shared icon controls are z-index 10. The
       motion shell preallocates a transparent strip above the visible card;
       keeping it below the controls prevents that strip stealing icon taps. */
    z-index: 9;
    width: var(--menu-col);
    padding: 0;
    opacity: 0;
    visibility: hidden;
    color: var(--glass-pink-text);
    transform: translateX(-50%) var(--menu-enter-from);
    transform-origin: 50% 0;
    pointer-events: none;
    transition: opacity 0.34s ease, transform 0.42s var(--menu-enter-ease), visibility 0s linear 0.42s;
}

/* Used only for a synchronous final-geometry measurement before opening.
   The hidden start state is restored and committed before .active is added. */
.community-hub.measure-open {
    transform: translateX(-50%) translateY(0) scale(1);
    transition: none;
}

.community-surface {
    /* No frame: the wall sits straight on the page like the Wishes and Links
       menus, with the ?/pencil switch floating above it as the header. */
    width: 100%;
    padding: 7px 0 0;
    overflow: hidden;
    /* The shared motion shell preallocates the fully collapsed height once,
       clips it at the stable footer edge, and moves this layer compositor-side.
       Never change the native scroller's geometry under the visitor's finger. */
    will-change: transform;
}

.community-scroll-body {
    --dwl-edge-top: 1;
    --dwl-edge-bottom: 1;
    --community-edge-shift: 0px;
    width: 100%;
    max-height: var(--panel-fill-max, 560px);
    height: var(--panel-fill-max, 560px);
    overflow-x: hidden;
    overflow-y: auto;
    overflow-anchor: none;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-timeline-name: --dwl-posts-scroll;
    scroll-timeline-axis: block;
    transition:
        --dwl-edge-top 0.12s ease-out,
        --dwl-edge-bottom 0.12s ease-out;
    -webkit-mask-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, var(--dwl-edge-top)) 0,
        #000 22px,
        #000 calc(100% - var(--community-edge-shift) - 22px),
        rgba(0, 0, 0, var(--dwl-edge-bottom)) calc(100% - var(--community-edge-shift)),
        rgba(0, 0, 0, var(--dwl-edge-bottom)) 100%
    );
    mask-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, var(--dwl-edge-top)) 0,
        #000 22px,
        #000 calc(100% - var(--community-edge-shift) - 22px),
        rgba(0, 0, 0, var(--dwl-edge-bottom)) calc(100% - var(--community-edge-shift)),
        rgba(0, 0, 0, var(--dwl-edge-bottom)) 100%
    );
}

/* Fallback browsers use the existing rAF-written collapse value, so the
   fade ends exactly at the visible bottom edge rather than under the clip. */
.community-hub.dwl-motion-ready .community-scroll-body {
    --community-edge-shift: max(0px, var(--dwl-motion-hidden));
}

/* The unified card owns the posts timeline. Its nested legacy content is
   visible but no longer a scroller, so it must not compete as a second source
   with the same timeline name. */
.community-hub .posts-content {
    scroll-timeline-name: none;
}

.community-hub.has-content-above .community-scroll-body {
    --dwl-edge-top: 0;
}

.community-hub.has-content-below .community-scroll-body {
    --dwl-edge-bottom: 0;
}

.community-scroll-body::-webkit-scrollbar {
    display: none;
}

.community-hub.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) scale(1);
    pointer-events: auto;
    transition-delay: 0s;
}

.community-create-tabs {
    display: flex;
    width: 94px;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin: 0 auto 6px;
    padding: 2px;
    border: 1px solid rgba(255, 180, 212, 0.34);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 2px 6px rgba(255, 157, 205, 0.14);
}

.community-create-tab,
#ask-button.community-create-tab,
#toggle-button.community-create-tab {
    display: flex;
    width: auto;
    min-width: 43px;
    height: 23px;
    min-height: 23px;
    max-height: 23px;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    color: var(--glass-pink-text);
    background: transparent;
    box-shadow: none;
    font-family: var(--doll-hand);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    text-shadow: none;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.community-create-tab.active,
#ask-button.community-create-tab.active,
#toggle-button.community-create-tab.active {
    color: #d84488;
    background: #fff;
    box-shadow: 0 1px 4px rgba(255, 145, 198, 0.22);
}

.community-create-tab.site-link-hidden {
    display: none;
}

.community-posts-trigger {
    display: none !important;
}

.community-composer-slot {
    position: relative;
    height: 148px;
    min-height: 0;
    overflow: hidden;
    transition: height 0.26s cubic-bezier(0.2, 0.82, 0.24, 1);
}

.community-composer-slot.is-switching {
    will-change: height;
}

.community-hub[data-composer-mode="doodle"] .community-composer-slot,
.community-hub.is-doodle-mode .community-composer-slot {
    /* JS replaces this fallback with the measured canvas/control height. */
    height: 282px;
}

.community-hub[data-composer-mode="closed"] .community-composer-slot {
    /* Switch off: the wall sits right under the tabs. */
    height: 0;
}

.community-hub.has-no-composer .community-create-tabs,
.community-hub.has-no-composer .community-composer-slot {
    display: none;
}

.community-hub .ask-form-container,
.community-hub .ask-form-container[style*="block"] {
    position: absolute;
    inset: 0 0 auto;
    display: block;
    width: min(100%, 240px);
    min-height: 134px;
    margin: 0 auto;
    animation: none;
    z-index: 1;
}

.community-hub .drawing-widget,
.community-hub .drawing-widget.active {
    position: absolute;
    inset: 0 0 auto;
    display: block;
    width: 100%;
    margin: 0 auto;
}

.community-hub .community-composer-slot > .ask-form-container,
.community-hub .community-composer-slot > .drawing-widget,
.community-hub .community-composer-slot > .drawing-widget.active {
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 5px, 0) scale(0.995);
    pointer-events: none;
    transition:
        opacity 0.18s ease,
        transform 0.22s cubic-bezier(0.2, 0.82, 0.24, 1),
        visibility 0s linear 0.22s;
}

.community-hub.active:not(.is-doodle-mode)[data-composer-mode="ask"] .community-composer-slot > .ask-form-container,
.community-hub.active:not([data-composer-mode]) .community-composer-slot > .ask-form-container[style*="block"],
.community-hub.active[data-composer-mode="doodle"] .community-composer-slot > .drawing-widget,
.community-hub.active.is-doodle-mode .community-composer-slot > .drawing-widget.active {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0) scale(1);
    pointer-events: auto;
    transition-delay: 0s;
}

.community-hub .canvas-container {
    position: relative;
    width: 100%;
    /* The ask card's paper: pink rim, soft stripes and a dashed inner line,
       so the two composers read as a pair. */
    padding: 15px 16px 14px;
    border: 2px solid rgba(255, 171, 205, 0.54);
    border-radius: 18px;
    background:
        linear-gradient(rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.72)),
        repeating-linear-gradient(90deg, rgba(255, 231, 242, 0.42) 0 12px, rgba(255, 250, 253, 0.42) 12px 24px);
    box-shadow: 0 6px 18px rgba(255, 174, 211, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.82);
}

.community-hub .canvas-container::before {
    position: absolute;
    inset: 7px;
    border: 1.5px dashed rgba(255, 180, 212, 0.58);
    border-radius: 14px;
    content: '';
    pointer-events: none;
}

/* Sized to the canvas (240px) plus the card's rim, like the ask card. */
.community-hub .drawing-widget,
.community-hub .drawing-widget.active {
    width: min(100%, 280px);
}

.community-hub .drawing-controls {
    gap: 8px;
    margin-bottom: 3px;
}

.community-hub #drawing-canvas {
    display: block;
    width: min(100%, 240px);
    height: auto;
    aspect-ratio: 330 / 230;
    margin: 6px 0;
}

.community-hub #send-drawing {
    margin-top: 3px;
}

.community-wall-title {
    height: 1px;
    margin: 3px 2px 5px;
    background: linear-gradient(90deg, transparent, rgba(255, 174, 207, 0.6), transparent);
}

.community-hub .posts-popup,
.community-hub .posts-popup.active {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    height: auto;
    margin-top: 0;
    padding: 0;
    overflow: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    -webkit-mask-image: none;
    mask-image: none;
}

.community-hub .posts-popup .dwl-motion-viewport,
.community-hub .posts-popup.dwl-motion-ready > .dwl-motion-viewport {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    transform: none;
    animation: none;
    will-change: auto;
    -webkit-mask-image: none;
    mask-image: none;
}

.community-hub .posts-popup .popup-content,
.community-hub .posts-popup.dwl-motion-ready > .dwl-motion-viewport > .popup-content {
    width: 100%;
    height: auto;
    max-height: none;
    padding: 0;
}

.community-hub .posts-scroll-shell {
    width: 100%;
    -webkit-mask-image: none;
    mask-image: none;
}

.community-hub .posts-content {
    max-height: none;
    padding: 0 0 14px;
    border-radius: 0;
    overflow: visible;
    scrollbar-width: none;
    -webkit-mask-image: none;
    mask-image: none;
}

.community-hub .posts-content::-webkit-scrollbar {
    display: none;
}

.community-hub .posts-content.posts-is-fetching {
    min-height: 210px;
}

.community-hub .posts-loading-overlay {
    min-height: 210px;
}

.community-hub .community-wall-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 10px;
    /* Same insets as the Wishes masonry, so notes and wish cards share one
       width (149px at 390px) and one pin clearance. */
    padding: 12px 8px 18px;
}

.community-hub .community-wall-list.is-single {
    grid-template-columns: minmax(0, 1fr);
}

.community-load-more {
    grid-column: 1 / -1;
    justify-self: center;
    min-width: 118px;
    min-height: 32px;
    margin: 2px auto 0;
    padding: 5px 13px;
    border: 1px solid rgba(255, 180, 212, 0.52);
    border-radius: 999px;
    background: rgba(255, 246, 251, 0.9);
    color: rgba(145, 86, 117, 0.82);
    font-family: var(--doll-hand);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 3px 9px rgba(222, 137, 177, 0.12);
}

.community-load-more.is-loading {
    cursor: wait;
    opacity: 0.72;
}

.community-masonry-column {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 16px;
}

.community-wall-list .post-item,
.community-wall-list .question-item {
    width: 100%;
    min-width: 0;
    display: block;
    margin: 0;
    opacity: 1;
    animation: none;
    break-inside: avoid;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.community-wall-list .posts-fetch-state {
    grid-column: 1 / -1;
}

.community-wall-list .community-pin-1 { --pin-rot: -2deg; transform: rotate(-2deg); }
.community-wall-list .community-pin-2 { --pin-rot: 1.6deg; transform: rotate(1.6deg); }
.community-wall-list .community-pin-3 { --pin-rot: -1.4deg; transform: rotate(-1.4deg); }
.community-wall-list .community-pin-4 { --pin-rot: 2deg; transform: rotate(2deg); }

.community-wall-list .question-item:hover {
    transform: rotate(var(--pin-rot, 0deg)) translateY(-2px);
}

.community-wall-list .question-text,
.community-wall-list .answer-text {
    overflow-wrap: anywhere;
}

.community-wall-list .post-item > img {
    width: 100%;
    height: auto;
    aspect-ratio: 330 / 230;
    object-fit: contain;
}


@media (prefers-reduced-motion: reduce) {
    .community-hub,
    .community-composer-slot {
        transition: none;
    }
}

/* Keyboard focus only (never shown for taps or clicks): one soft pink ring
   for the controls whose own focus style was faint or the browser's blue. */
:is(.social-links-tip, #send-question, .community-create-tab, #undo-button,
    #clear-canvas, #send-drawing, .answer-gif-link, .like-button,
    .reaction-option):focus-visible {
    outline: 2px solid rgba(216, 69, 125, 0.7);
    outline-offset: 3px;
}

/* Only for visitors who ask their device for more contrast: the soft
   labels get a deeper version of the same pink/plum ink. */
@media (prefers-contrast: more) {
    .dwl-icon-name,
    .social-link-copy small,
    #char-count {
        color: #7d3a5c;
    }

    .answer-text {
        color: #a8316c;
    }
}