.bg-mesh {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 0% 0%, var(--mesh-1) 0%, transparent 45%),
        radial-gradient(circle at 100% 0%, var(--mesh-2) 0%, transparent 45%),
        radial-gradient(circle at 100% 100%, var(--mesh-3) 0%, transparent 55%);
    transition: background var(--dur-3) ease;
}

.site-nav {
    position: fixed;
    inset-inline: 0;
    top: 0;
    z-index: var(--z-nav);
    pointer-events: none;
}

.nav-inner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    height: var(--nav-h);
    margin-top: var(--space-3);
    pointer-events: auto;
    padding-inline: var(--space-4) var(--space-3);
    border-radius: var(--r-pill);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.brand {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1;
    color: var(--brand);
    transition: opacity var(--dur-1) ease;
}


.brand-o {
    position: relative;
    display: inline-block;
    width: 0.96em;
    height: 0.96em;
    margin: 0 0.05em;
    vertical-align: baseline;
    border-radius: 50%;
    transform-origin: center;
    background: radial-gradient(circle at 34% 28%, color-mix(in srgb, #ffffff 58%, var(--brand)), var(--brand) 54%, color-mix(in srgb, #000000 28%, var(--brand)));
    box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.32), inset 0 -0.08em 0.14em color-mix(in srgb, #000000 30%, transparent), inset 0 0.07em 0.1em rgba(255, 255, 255, 0.55);
}

/* Moving specular glare: sweeps across during the spin so the O reads as a
   rotating sphere (clipped to the circle by the O's overflow:hidden). */
.brand-o::after {
    content: "";
    position: absolute;
    top: -25%;
    left: 115%;
    width: 55%;
    height: 150%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 72%);
    opacity: 0;
    pointer-events: none;
}

.brand-o__glyph {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.brand-o__eyes {
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 0.1em;
    pointer-events: none;
    transition: transform 0.4s var(--ease-standard);
}

.brand-o__eyes i {
    display: block;
    width: 0.13em;
    height: 0.17em;
    border-radius: 50%;
    background: #ffffff;
    transform-origin: center;
    transition: transform 0.09s ease;
}

.brand-o__eyes.is-blink i {
    transform: scaleY(0.1);
}

.brand-o__eyes i.is-wink {
    transform: scaleY(0.14) scaleX(1.25) translateY(0.02em);
}

.brand--nav {
    display: inline-block;
    white-space: nowrap;
}

.brand--nav .brand-seg {
    display: inline-block;
    overflow: hidden;
    vertical-align: baseline;
}

/* Resting state: the O sits slightly proud of the bar, top and bottom, as an
   intentional mascot peeking out (reinforced by its eyes and idle motion). */
html.brand-collapsed .brand--nav .brand-seg {
    max-width: 0;
    opacity: 0;
}

html.brand-collapsed .brand--nav .brand-o {
    transform: translateX(1.05em) scale(2.9);
    transition: transform var(--dur-2) var(--ease-emphasized);
}

html.brand-collapsed .brand--nav:hover .brand-o {
    transform: translateX(1.05em) scale(3) rotate(-3deg);
}

/* Scrolled down: the O shrinks to sit neatly centered inside the bar. */
html.brand-collapsed.brand-shrink .brand--nav .brand-o {
    transform: translateX(1.05em) scale(2.35);
}

html.brand-collapsed.brand-shrink .brand--nav:hover .brand-o {
    transform: translateX(1.05em) scale(2.45) rotate(-3deg);
}

/* Navigation intro (non-home pages): starts as the resting O; the O springs
   up, the full name unfurls and holds ~4s, then slides shut with a sphere spin. */
html.brand-intro-nav .brand--nav .brand-seg--lead,
html.brand-intro-nav .brand--nav .brand-seg--tail {
    animation: brandSegCycle 6s var(--ease-emphasized) both;
}

html.brand-intro-nav .brand--nav .brand-o {
    animation: brandOCycle 6s var(--ease-emphasized) both;
    overflow: hidden;
}

html.brand-intro-nav .brand--nav .brand-o__eyes {
    animation: brandFaceSpin 6s ease-in-out both;
}

html.brand-intro-nav .brand--nav .brand-o__eyes i {
    animation: brandIntroBlink 6s ease-in-out both;
}

html.brand-intro-nav .brand--nav .brand-o::after {
    animation: brandGlare 6s ease-in-out both;
}

/* Home intro (previous behaviour): the full name shows, the eyes glance around,
   then it plainly slides shut to the O (no jump, no start-from-O, no spin). */
html.brand-intro-home .brand--nav .brand-seg--lead,
html.brand-intro-home .brand--nav .brand-seg--tail {
    animation: brandSegOutHome 6s var(--ease-emphasized) both;
}

html.brand-intro-home .brand--nav .brand-o {
    animation: brandOOutHome 6s var(--ease-emphasized) both;
}

html.brand-intro-home .brand--nav .brand-o__eyes {
    animation: brandGlanceHome 6s ease-in-out both;
}

html.brand-intro-home .brand--nav .brand-o__eyes i {
    animation: brandIntroBlink 6s ease-in-out both;
}

/* Nav segments: hidden -> unfurl -> hold -> slide away. */
@keyframes brandSegCycle {
    0%, 24% { max-width: 0; opacity: 0; }
    32% { max-width: 5em; opacity: 1; }
    88% { max-width: 5em; opacity: 1; }
    100% { max-width: 0; opacity: 0; }
}

/* Nav O: as the lone resting O it crouches (anticipation, squash), springs up
   with a stretch, lands with a squash and a small secondary bounce, settles,
   then shrinks into the wordmark, holds, and grows back with the sphere spin.
   The jump lives in the O's own transform so it stays one coherent motion. */
@keyframes brandOCycle {
    0% { transform: translateX(1.05em) translateY(0) scale(2.9); }
    5% { transform: translateX(1.05em) translateY(0.13em) scale(3.16, 2.55); animation-timing-function: ease-out; }
    13% { transform: translateX(1.05em) translateY(-0.38em) scale(2.7, 3.2); animation-timing-function: ease-in; }
    18% { transform: translateX(1.05em) translateY(0) scale(3.12, 2.62); animation-timing-function: ease-out; }
    21% { transform: translateX(1.05em) translateY(-0.1em) scale(2.87, 2.97); animation-timing-function: ease-in; }
    24% { transform: translateX(1.05em) translateY(0) scale(2.9); }
    32% { transform: translateX(0) translateY(0) scale(1); }
    88% { transform: translateX(0) translateY(0) scale(1); }
    100% { transform: translateX(1.05em) translateY(0) scale(2.9); }
}

/* Home segments: full -> hold -> slide away (original gentle timing). */
@keyframes brandSegOutHome {
    0%, 82% { max-width: 5em; opacity: 1; }
    100% { max-width: 0; opacity: 0; }
}

/* Home O: inline -> hold -> grow to the resting O. */
@keyframes brandOOutHome {
    0%, 82% { transform: translateX(0) scale(1); }
    100% { transform: translateX(1.05em) scale(2.9); }
}

/* Home eyes glance left/right while the name shows (the original look-around). */
@keyframes brandGlanceHome {
    0%, 8% { transform: translate(-50%, -50%); }
    16% { transform: translate(calc(-50% - 0.16em), -50%); }
    24% { transform: translate(calc(-50% - 0.16em), -50%); }
    34% { transform: translate(calc(-50% + 0.16em), -50%); }
    42% { transform: translate(calc(-50% + 0.16em), -50%); }
    50% { transform: translate(-50%, -50%); }
    58% { transform: translate(-50%, -50%); }
    66% { transform: translate(calc(-50% - 0.16em), -50%); }
    74% { transform: translate(calc(-50% + 0.16em), -50%); }
    82%, 100% { transform: translate(-50%, -50%); }
}

/* The face spins around the ball twice, right-to-left, as it slides shut. */
@keyframes brandFaceSpin {
    0%, 88% { transform: translate(-50%, -50%) scaleX(1); }
    90.5% { transform: translate(calc(-50% - 0.34em), -50%) scaleX(0.32); }
    91% { transform: translate(calc(-50% + 0.34em), -50%) scaleX(0.32); }
    94% { transform: translate(-50%, -50%) scaleX(1); }
    96.5% { transform: translate(calc(-50% - 0.34em), -50%) scaleX(0.32); }
    97% { transform: translate(calc(-50% + 0.34em), -50%) scaleX(0.32); }
    100% { transform: translate(-50%, -50%) scaleX(1); }
}

/* Specular glare sweeps right-to-left during the spin. */
@keyframes brandGlare {
    0%, 88% { opacity: 0; transform: translateX(0); }
    91% { opacity: 0.9; }
    100% { opacity: 0; transform: translateX(-360%); }
}

/* Two natural blinks while the full name is showing. */
@keyframes brandIntroBlink {
    0%, 40%, 44%, 62%, 66%, 100% { transform: scaleY(1); }
    42% { transform: scaleY(0.1); }
    64% { transform: scaleY(0.1); }
}

.nav-links {
    display: none;
    align-items: center;
    gap: var(--space-1);
    margin-inline-start: var(--space-2);
}

.nav-link {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--r-pill);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-muted);
    transition: background var(--dur-1) ease, color var(--dur-1) ease;
}

.nav-link:hover {
    background: var(--surface-2);
    color: var(--text-strong);
}

.nav-right {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-inline-start: auto;
}

.menu-dot {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: var(--r-xs);
    background: var(--dot, var(--brand));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), 0 2px 7px -3px color-mix(in srgb, var(--dot, var(--brand)) 60%, transparent);
    flex-shrink: 0;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
}

.theme-selector {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 1px;
    border-radius: var(--r-pill);
    background: var(--pill-bg);
    transition: gap var(--dur-1) ease;
}

.theme-selector:hover {
    gap: 2px;
}

.theme-btn {
    max-width: 100px;
    padding: 6px 12px;
    border: none;
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--pill-text);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    opacity: 0.6;
    transition: all var(--dur-2) var(--ease-standard);
}

.theme-selector:not(:hover) .theme-btn:not(.active) {
    max-width: 0;
    padding-inline: 0;
    margin: 0;
    opacity: 0;
}

.theme-btn:hover {
    opacity: 0.9;
}

.theme-btn.active {
    opacity: 1;
    background: var(--pill-active-bg);
    color: var(--pill-active-text);
}

@media (hover: none) {
    .theme-selector {
        gap: 3px;
        padding: 3px;
    }
    .theme-selector .theme-btn {
        max-width: none;
        padding: 7px 13px;
        opacity: 0.6;
    }
    .theme-selector .theme-btn.active {
        opacity: 1;
    }
}

.nav-apps {
    position: relative;
}

.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.5rem 0.95rem;
    border: none;
    border-radius: var(--r-pill);
    background: var(--brand);
    color: #ffffff;
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--brand) 55%, transparent);
    transition: transform var(--dur-1) var(--ease-standard), filter var(--dur-1) ease;
}

.nav-cta:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

.nav-cta:active {
    transform: scale(0.97);
}

.nav-cta svg {
    width: 15px;
    height: 15px;
}

@media (max-width: 47.99rem) {
    .nav-apps,
    .nav-cta {
        display: none;
    }
}

.nav-sheet__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding: var(--space-3);
    border: none;
    border-radius: var(--r-md);
    background: var(--brand);
    color: #ffffff;
    font-family: inherit;
    font-size: var(--text-md);
    font-weight: 700;
    cursor: pointer;
    width: 100%;
}

.nav-sheet__cta svg {
    width: 18px;
    height: 18px;
}

.apps-modal {
    display: contents;
}

.apps-modal__backdrop {
    position: fixed;
    inset: 0;
    z-index: 46;
    background: rgba(3, 6, 14, 0.5);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--dur-2) ease, visibility 0s linear var(--dur-2);
}

.apps-modal.open .apps-modal__backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.apps-modal__card {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 62;
    width: min(30rem, calc(100vw - 2rem));
    padding: var(--space-5);
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    background: var(--bg-elev);
    box-shadow: var(--elev-2);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -46%) scale(0.96);
    transition: opacity var(--dur-2) ease, transform var(--dur-2) var(--ease-emphasized), visibility 0s linear var(--dur-2);
}

.apps-modal.open .apps-modal__card {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
    transition-delay: 0s;
}

.apps-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.apps-modal__title {
    font-size: var(--text-lg);
    font-weight: 800;
    color: var(--text-strong);
}

.apps-modal__close {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: color var(--dur-1) ease, background var(--dur-1) ease;
}

.apps-modal__close:hover {
    color: var(--text-strong);
    background: var(--border-strong);
}

.apps-modal__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
}

@media (max-width: 26rem) {
    .apps-modal__grid {
        grid-template-columns: 1fr;
    }
}

.apps-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text);
    transition: background var(--dur-1) ease, transform var(--dur-1) ease, border-color var(--dur-1) ease;
}

.apps-item:hover {
    background: color-mix(in srgb, var(--dot, var(--brand)) 12%, var(--surface));
    border-color: color-mix(in srgb, var(--dot, var(--brand)) 40%, transparent);
    transform: translateY(-1px);
}

.apps-item__icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.apps-item__icon--svg {
    display: grid;
    place-items: center;
}

.nav-toggle {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--text-strong);
    transition: background var(--dur-1) ease;
}

.nav-toggle:hover {
    background: var(--surface-2);
}

.nav-toggle .icon-close {
    display: none;
}

.nav-toggle[aria-expanded="true"] .icon-open {
    display: none;
}

.nav-toggle[aria-expanded="true"] .icon-close {
    display: block;
}

.nav-sheet {
    margin-top: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-2);
    border-radius: var(--r-lg);
    background: var(--bg-elev);
    border: 1px solid var(--border-strong);
    box-shadow: var(--elev-2);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity var(--dur-1) ease, transform var(--dur-2) var(--ease-standard), visibility 0s linear var(--dur-1);
}

.nav-sheet.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
}

.nav-sheet__label {
    padding: var(--space-2) var(--space-2) var(--space-1);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-faint);
}

.nav-sheet a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0.5rem var(--space-2);
    border-radius: var(--r-sm);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text);
    transition: background var(--dur-1) ease;
}

.nav-sheet .menu-dot {
    width: 24px;
    height: 24px;
    font-size: 0.68rem;
}

.nav-sheet a:hover {
    background: var(--surface-2);
}

@media (min-width: 48rem) {
    .nav-links {
        display: flex;
    }
    .nav-toggle {
        display: none;
    }
    .nav-sheet {
        display: none;
    }
}

.site-footer {
    margin-top: auto;
    border-top: 1px solid var(--border);
    background: var(--bg-elev);
}

.footer-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6) var(--space-8);
    padding-block: var(--space-8) var(--space-6);
}

.footer-brand {
    grid-column: 1 / -1;
}

.install-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    text-align: center;
}

.install-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0;
    border: none;
    background: none;
    color: var(--text-faint);
    font-family: inherit;
    font-size: var(--text-xs);
    font-weight: 500;
    cursor: pointer;
    transition: color var(--dur-1) ease;
}

.install-cta__btn:hover {
    color: var(--text-muted);
}

.install-cta__btn svg {
    width: 14px;
    height: 14px;
    opacity: 0.8;
}

.install-cta__help {
    max-width: 28rem;
    margin: 0;
    font-size: var(--text-xs);
    line-height: var(--lh-relaxed);
    color: var(--text-faint);
}

.install-cta__help strong {
    color: var(--text-strong);
}

@media (min-width: 40rem) {
    .footer-inner {
        grid-template-columns: 1fr auto auto;
    }
    .footer-brand {
        grid-column: auto;
    }
    .footer-col + .footer-col {
        margin-left: var(--space-16);
    }
}

.footer-brand .brand {
    font-size: var(--text-2xl);
}

/* Trademark notice on the footer wordmark. */
.footer-brand .brand::after {
    content: "\2122";
    margin-left: 0.15em;
    font-size: 0.42em;
    font-weight: 700;
    vertical-align: super;
    position: relative;
    top: -0.35em;
    color: currentColor;
}

.footer-about {
    margin-top: var(--space-3);
    max-width: 26rem;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.footer-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-faint);
}

.footer-col h3 {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-faint);
    margin-bottom: var(--space-4);
}

.footer-col ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.footer-col a {
    font-size: var(--text-sm);
    color: var(--text-muted);
    transition: color var(--dur-1) ease;
}

.footer-col a:hover {
    color: var(--text-strong);
}

.footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding-block: var(--space-6);
    border-top: 1px solid var(--border);
    text-align: center;
}

@media (min-width: 40rem) {
    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

.footer-copy {
    font-size: var(--text-xs);
    color: var(--text-faint);
}

.footer-eggs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
}

.footer-link {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    transition: color var(--dur-1) ease;
}

.footer-link:hover {
    color: var(--text-strong);
}

.runaway-btn {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--brand);
    cursor: default;
    user-select: none;
    transition: transform var(--dur-1) var(--ease-standard);
}

.status-dot {
    position: relative;
    display: inline-flex;
    width: 8px;
    height: 8px;
}

.status-dot__ping {
    position: absolute;
    inset: 0;
    border-radius: var(--r-pill);
    background: var(--success);
    opacity: 0.75;
    animation: statusPing 1.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.status-dot__core {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: var(--r-pill);
    background: var(--success);
}

@keyframes statusPing {
    75%, 100% { transform: scale(2.4); opacity: 0; }
}

.cappuccino-dock {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: var(--z-dock);
    pointer-events: none;
}

.cappuccino-tab {
    pointer-events: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: 1.05rem 0.62rem;
    border: 1px solid rgba(180, 122, 58, 0.28);
    border-right: none;
    border-radius: var(--r-md) 0 0 var(--r-md);
    color: #7a4a1d;
    background: linear-gradient(160deg, #ffeed8 0%, #ffd9a8 55%, #f7c98c 100%);
    box-shadow: -8px 0 22px -10px rgba(191, 124, 46, 0.6), inset 1px 0 0 rgba(255, 255, 255, 0.8);
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--dur-2) var(--ease-emphasized), box-shadow var(--dur-1) ease;
}

html.dark .cappuccino-tab {
    color: #ffe0b8;
    border-color: rgba(255, 205, 145, 0.22);
    background: linear-gradient(160deg, #4a3524 0%, #3a2819 55%, #2e2015 100%);
    box-shadow: -8px 0 22px -10px rgba(0, 0, 0, 0.75), inset 1px 0 0 rgba(255, 224, 180, 0.12);
}

.cappuccino-tab:hover,
.cappuccino-tab.open {
    transform: translateX(-4px);
}

.cappuccino-tab:active {
    transform: translateX(-1px) scale(0.97);
}

.cappuccino-label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    line-height: 1;
    white-space: nowrap;
}

.cup-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.cup {
    font-size: 1.05rem;
    line-height: 1;
    transform-origin: 50% 85%;
    animation: cupTilt 6s ease-in-out infinite;
}

.steam {
    position: absolute;
    bottom: 86%;
    width: 3px;
    height: 9px;
    border-radius: var(--r-pill);
    background: currentColor;
    opacity: 0;
    filter: blur(1.2px);
    animation: steamRise 2.6s ease-in-out infinite;
}

.steam.s1 { left: 3px; animation-delay: 0s; }
.steam.s2 { left: 8.5px; height: 11px; animation-delay: 0.55s; }
.steam.s3 { left: 14px; animation-delay: 1.1s; }

.cappuccino-panel {
    position: absolute;
    top: 50%;
    right: calc(100% + 0.65rem);
    width: min(330px, calc(100vw - 5.5rem));
    transform: translate(16px, -50%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.45s var(--ease-standard), opacity 0.35s ease, visibility 0s linear 0.45s;
}

.cappuccino-panel.open {
    transform: translate(0, -50%);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.cappuccino-tray {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 1.15rem 1rem 1rem;
    border-radius: var(--r-lg);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.cappuccino-close {
    position: absolute;
    top: 0.4rem;
    right: 0.5rem;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1;
    transition: color var(--dur-1) ease, background var(--dur-1) ease;
}

.cappuccino-close:hover {
    color: var(--brand);
    background: var(--accent-weak);
}

@keyframes steamRise {
    0% { opacity: 0; transform: translateY(4px) scaleY(0.6); }
    30% { opacity: 0.5; }
    100% { opacity: 0; transform: translateY(-10px) scaleY(1.3); }
}

@keyframes cupTilt {
    0%, 86%, 100% { transform: rotate(0deg); }
    90% { transform: rotate(-12deg); }
    95% { transform: rotate(9deg); }
}

@media (max-width: 540px) {
    .cappuccino-tab { padding: 0.9rem 0.55rem; }
    .cappuccino-label { font-size: 0.62rem; }
}

/* Mobile: dock the cappuccino to the lower-right and open its panel upward,
   fully within the viewport (the desktop left-of-tab panel could overflow). */
@media (max-width: 40rem) {
    .cappuccino-dock {
        top: auto;
        bottom: 4.5rem;
        transform: none;
    }

    .cappuccino-panel {
        top: auto;
        bottom: calc(100% + 0.6rem);
        right: 0.5rem;
        width: min(320px, calc(100vw - 1.6rem));
        transform: translateY(14px);
    }

    .cappuccino-panel.open {
        transform: translateY(0);
    }
}