/* 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);
}

/* 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;
}

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;
}

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;
    }
}

.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: "Comic Sans MS", "Trebuchet MS", cursive;
    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; }
}

.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 {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0;
    opacity: 1;
    visibility: visible;
}

.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;
    min-height: 350px;
    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;
    /* Resting gap under the note. When a panel is open it hugs that panel
       instead (see body.has-*-panel-open overrides), and the open panel
       itself grows to fill tall screens (--panel-fill-max), so no
       viewport-based footer push is needed anywhere. */
    margin: 56px 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 {
    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: "Comic Sans MS", "Trebuchet MS", cursive;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    box-shadow:
        0 5px 14px rgba(255, 145, 195, 0.11),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.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);
}

.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) {
    .site-brand-footer {
        margin-top: 42px;
    }

    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;
    top: calc(var(--open-surface-top) + 40px);
    left: 50%;
    z-index: 0;
    display: block;
    width: 126px;
    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% 39% at 91% 87%,
            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%
        );
    clip-path: polygon(
        1% 0.2%,
        99.5% 0.2%,
        99.83% 83.33%,
        99.17% 87.3%,
        98% 91.27%,
        96.66% 93.45%,
        95.83% 94.25%,
        92.65% 96.23%,
        86.81% 97.62%,
        80.13% 98.41%,
        66.78% 99.01%,
        50.08% 99.21%,
        33.39% 99.4%,
        16.69% 99.4%,
        4.17% 99.6%,
        0.5% 99.21%
    );
    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;
    top: 8.5%;
    right: 17%;
    bottom: 24%;
    left: 17%;
    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;
}

.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 {
    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 + .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;
}

.menu-back-arrow {
    display: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    color: #d7c0c5;
    font-family: ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    transform: none;
    text-shadow: none;
}

.support-menu-button.open > .menu-main-icon {
    display: none;
}

.support-menu-button.open > .menu-back-arrow {
    display: inline-flex;
}

.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;
}

.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-close-icon {
    display: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    color: #d7c0c5;
    font-family: ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
}

.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 > .socials-close-icon {
    display: inline-flex;
}

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

.social-links-shell {
    position: absolute;
    top: var(--open-surface-top);
    left: 50%;
    z-index: 8;
    width: min(82vw, 254px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(-8px) scale(0.985);
    transform-origin: 50% 18%;
    transition:
        opacity 0.34s ease,
        transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0.42s;
    will-change: opacity, transform;
}

.social-links-loading {
    position: absolute;
    inset: 0;
    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: "Comic Sans MS", "Trebuchet MS", cursive;
    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 {
    /* Safari can defer video decoding in a visibility:hidden or fully
       transparent subtree. Keep the final cards paintable at an imperceptible
       opacity behind the paw so loadeddata/first-frame readiness can settle. */
    opacity: 0.001;
    pointer-events: none;
    transition: none;
}

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

.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;
}

.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(-50%) 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 the :3 panel both restate this footer margin while open
   (see body.has-wishlist-panel-open in throne-mockup-widget.js and
   body.has-posts-panel-open above) so the doll.gg pill sits tight under
   their panel instead of inheriting the resting 56px gap meant for the
   closed page. The panel itself grows to fill tall screens now
   (--panel-fill-max, setPanelFillMax in script.js), so the pill just hugs
   its bottom -- no viewport push. !important so it beats the
   @media (max-height:720px) .site-brand-footer margin-top bump. */
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(-50%) 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;
    aspect-ratio: 32 / 11.385;
    min-height: 81px;
    gap: 10px;
    padding: 7px 12px 7px 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 174, 207, 0.52);
    border-radius: 18px;
    background:
        linear-gradient(rgba(255, 255, 255, 0.76), rgba(255, 247, 252, 0.68)),
        repeating-linear-gradient(90deg, rgba(255, 229, 241, 0.14) 0 8px, rgba(255, 250, 253, 0.12) 8px 16px);
    box-shadow:
        var(--glass-pink-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.78);
    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;
    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;
}

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

.social-link-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    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;
}

/* 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;
    /* The admin can place Snapchat anywhere in the list. Keep the bunny's
       breathing room attached to its own card instead of assuming this
       wrapper is always the first child of the panel. */
    padding-top: 26px;
}

/* 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;
}

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

.social-link-mascot {
    position: absolute;
    top: 2px;
    /* 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;
    width: 56px;
    height: auto;
    pointer-events: none;
    z-index: 3;
}

.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: "Comic Sans MS", "Trebuchet MS", cursive;
    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(255, 157, 201, 0.68);
        background:
            linear-gradient(rgba(255, 255, 255, 0.84), rgba(255, 242, 249, 0.76)),
            repeating-linear-gradient(90deg, rgba(255, 229, 241, 0.16) 0 8px, rgba(255, 250, 253, 0.14) 8px 16px);
        box-shadow:
            0 9px 22px rgba(255, 145, 195, 0.18),
            inset 0 1px 0 rgba(255, 255, 255, 0.84);
        outline: none;
        transform: translateY(-1px);
    }
}

.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;
}

.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;
}

@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: "Comic Sans MS", "Trebuchet MS", cursive;
    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: "Comic Sans MS", "Trebuchet MS", cursive;
    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;
}

.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-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: "Comic Sans MS", "Trebuchet MS", cursive;
    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: "Comic Sans MS", "Trebuchet MS", cursive;
    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: "Comic Sans MS", "Trebuchet MS", cursive;
    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", cursive;
    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: "Comic Sans MS", "Trebuchet MS", sans-serif;
    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", cursive;
    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: "Comic Sans MS", "Trebuchet MS", sans-serif;
    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); }
}

@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);
    }
}

.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: "Comic Sans MS", "Trebuchet MS", cursive;
    font-size: 10px;
    letter-spacing: 0.01em;
    text-align: center;
}

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

.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: "Comic Sans MS", "Trebuchet MS", cursive;
    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: "Comic Sans MS", "Trebuchet MS", cursive;
    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: "Comic Sans MS", "Trebuchet MS", cursive;
    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: "Comic Sans MS", "Trebuchet MS", cursive;
    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;
}

body.has-community-hub-open #action-menu-button.open > .menu-back-arrow {
    font-family: ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
    font-size: 20px;
    font-weight: 400;
    transform: 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: min(90vw, 320px);
    padding: 0;
    opacity: 0;
    visibility: hidden;
    color: var(--glass-pink-text);
    transform: translateX(-50%) translateY(-8px) scale(0.985);
    transform-origin: 50% 0;
    pointer-events: none;
    transition: opacity 0.34s ease, transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), 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 {
    width: 100%;
    padding: 7px 8px 9px;
    overflow: hidden;
    border: 1px solid rgba(255, 174, 207, 0.5);
    border-radius: 20px;
    background:
        linear-gradient(rgba(255, 255, 255, 0.79), rgba(255, 246, 251, 0.74)),
        repeating-linear-gradient(90deg, rgba(255, 231, 242, 0.24) 0 12px, rgba(255, 250, 253, 0.24) 12px 24px);
    box-shadow: 0 8px 21px rgba(255, 145, 195, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.84);
    /* 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;
    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% - 22px),
        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% - 22px),
        rgba(0, 0, 0, var(--dwl-edge-bottom)) 100%
    );
}

/* 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: "Comic Sans MS", "Trebuchet MS", cursive;
    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.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:not(.is-doodle-mode)[data-composer-mode="ask"] .community-composer-slot > .ask-form-container,
.community-hub:not([data-composer-mode]) .community-composer-slot > .ask-form-container[style*="block"],
.community-hub[data-composer-mode="doodle"] .community-composer-slot > .drawing-widget,
.community-hub.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 {
    width: 100%;
    padding: 10px;
}

.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: 8px 6px 14px;
    border-radius: 12px;
    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;
    padding: 11px 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: "Comic Sans MS", "Trebuchet MS", cursive;
    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 (max-width: 390px) {
    .community-hub {
        width: min(92vw, 314px);
        padding-inline: 8px;
    }

    .community-hub .posts-content {
        max-height: none;
    }
}

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