:root {
    --cloud-bg: #fff7fa;
    --cloud-panel: #fffafd;
    --cloud-ink: #4f2738;
    --cloud-muted: #8f6677;
    --cloud-accent: #a72f60;
    --cloud-label-ink: #4f2738;
    --cloud-label-accent: #98254f;
    --cloud-line: #ecd7e0;
    --cloud-shadow: #7f3d5b;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    font-family: ui-rounded, "SF Pro Rounded", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
    color-scheme: light;
}

:root[data-theme="dark"] {
    --cloud-bg: #251824;
    --cloud-panel: #332232;
    --cloud-ink: #fff1f6;
    --cloud-muted: #c8a7b5;
    --cloud-accent: #ff9dc2;
    --cloud-label-ink: #442233;
    --cloud-label-accent: #8f2855;
    --cloud-line: #664255;
    --cloud-shadow: #09060a;
    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; min-width: 20rem; min-height: 100%; margin: 0; overflow: hidden; }
html { background: var(--cloud-bg); -webkit-text-size-adjust: 100%; }
body { color: var(--cloud-ink); background: var(--cloud-bg); -webkit-font-smoothing: antialiased; }
button, input { color: inherit; font: inherit; }
a { color: inherit; }

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

.skip-link {
    position: fixed;
    z-index: 100;
    top: 0.8rem;
    left: 50%;
    padding: 0.65rem 0.9rem;
    border-radius: 999px;
    color: #fff;
    background: #7c2348;
    text-decoration: none;
    opacity: 0;
    transform: translate(-50%, -150%);
    transition: 180ms ease;
}
.skip-link:focus { opacity: 1; transform: translate(-50%, 0); }

.cloud-shell, #cloud-app {
    position: fixed;
    inset: 0;
    min-height: 100dvh;
}

.cloud-shell {
    background:
        radial-gradient(circle at 8% 16%, rgba(255, 206, 224, 0.35), transparent 27rem),
        radial-gradient(circle at 90% 74%, rgba(221, 200, 241, 0.26), transparent 31rem),
        var(--cloud-bg);
}

#cloud-app { z-index: 2; outline: 0; }

.corner {
    position: fixed;
    z-index: 20;
    width: min(21rem, calc(100vw - 2rem));
    min-height: 7.5rem;
    pointer-events: none;
}
.corner--brand { top: 0; left: 0; }
.corner--tools { top: 0; right: 0; }
.corner__hit {
    position: absolute;
    z-index: 2;
    top: 0;
    width: 5.3rem;
    height: 4.7rem;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: default;
    pointer-events: auto;
}
.corner--brand .corner__hit { left: 0; }
.corner--tools .corner__hit { right: 0; }
.corner__panel {
    position: absolute;
    z-index: 3;
    top: max(0.85rem, env(safe-area-inset-top));
    padding: 0.72rem;
    border: 1px solid color-mix(in srgb, var(--cloud-line) 67%, transparent);
    border-radius: 1.2rem;
    background: color-mix(in srgb, var(--cloud-panel) 68%, transparent);
    box-shadow: 0 1.2rem 3.5rem color-mix(in srgb, var(--cloud-shadow) 15%, transparent), inset 0 1px rgba(255, 255, 255, 0.55);
    opacity: 0;
    pointer-events: none;
    -webkit-backdrop-filter: blur(22px) saturate(135%);
    backdrop-filter: blur(22px) saturate(135%);
    transition: opacity 360ms ease, transform 560ms var(--ease-out);
}
.corner--brand .corner__panel { left: max(0.85rem, env(safe-area-inset-left)); transform: translate(-1rem, -0.7rem) scale(0.92); transform-origin: top left; }
.corner--tools .corner__panel { right: max(0.85rem, env(safe-area-inset-right)); transform: translate(1rem, -0.7rem) scale(0.92); transform-origin: top right; }
.corner.is-open .corner__panel, .corner:hover .corner__panel, .corner:focus-within .corner__panel { opacity: 1; pointer-events: auto; transform: translate(0, 0) scale(1); }

.brand-panel { width: min(20rem, calc(100vw - 2rem)); }
.brand-mark { display: flex; align-items: center; gap: 0.45rem; text-decoration: none; }
.brand-mark img { width: 4.5rem; height: 2.4rem; object-fit: contain; filter: drop-shadow(0 0.4rem 0.7rem rgba(132, 66, 92, 0.14)); }
.brand-mark span { display: grid; min-width: 0; gap: 0.18rem; }
.brand-mark strong { font-size: 0.86rem; line-height: 1.2; letter-spacing: -0.02em; }
.brand-mark small { overflow: hidden; color: var(--cloud-muted); font-size: 0.65rem; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.announcement { margin: 0.56rem 0 0; padding: 0.65rem 0.72rem; border-top: 1px solid var(--cloud-line); color: var(--cloud-muted); font-size: 0.69rem; line-height: 1.55; }

.tool-panel { display: flex; gap: 0.38rem; padding: 0.38rem; }
.round-control {
    position: relative;
    display: grid;
    min-width: 4.5rem;
    width: auto;
    height: 2.7rem;
    padding: 0 0.78rem;
    place-items: center;
    grid-auto-flow: column;
    gap: 0.48rem;
    border: 0;
    border-radius: 50%;
    color: var(--cloud-muted);
    background: color-mix(in srgb, var(--cloud-panel) 70%, transparent);
    cursor: pointer;
    text-decoration: none;
    font-size: 0.69rem;
    font-weight: 680;
    transition: transform 400ms var(--ease-out), color 180ms ease, background 180ms ease;
}
.round-control:hover, .round-control:focus-visible { color: var(--cloud-accent); background: color-mix(in srgb, var(--cloud-accent) 10%, var(--cloud-panel)); outline: 0; transform: translateY(-0.12rem) scale(1.04); }

.login-glyph { position: relative; display: block; width: 0.84rem; height: 1rem; border: 1.5px solid currentColor; border-radius: 0.22rem; }
.login-glyph::before { content: ""; position: absolute; top: 50%; right: -0.32rem; width: 0.52rem; height: 1.5px; border-radius: 2px; background: currentColor; }
.login-glyph::after { content: ""; position: absolute; top: calc(50% - 0.17rem); right: -0.34rem; width: 0.32rem; height: 0.32rem; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }
.login-glyph i { position: absolute; top: 50%; left: 0.2rem; width: 0.1rem; height: 0.1rem; border-radius: 50%; background: currentColor; }
.theme-swatch { display: block; width: 1rem; height: 1rem; border: 1px solid color-mix(in srgb, currentColor 58%, transparent); border-radius: 50%; background: linear-gradient(90deg, #fff 0 50%, #4d2a3a 50% 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38); }

.cloud-fallback {
    position: relative;
    z-index: 1;
    display: grid;
    width: min(72rem, 92vw);
    height: calc(100dvh - 5rem);
    margin: 2.5rem auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: center;
    gap: clamp(0.6rem, 2vw, 1.5rem);
    overflow: auto;
}
.cloud-fallback a { position: relative; display: grid; min-height: 10rem; place-items: center; text-decoration: none; }
.cloud-fallback img { position: absolute; width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 1rem 1.4rem rgba(127, 61, 91, 0.11)); }
.cloud-fallback span { position: relative; display: grid; gap: 0.4rem; max-width: 10rem; text-align: center; }
.cloud-fallback strong { font-size: 0.98rem; }
.cloud-fallback small { color: var(--cloud-muted); font-size: 0.7rem; opacity: 0; transition: opacity 180ms ease; }
.cloud-fallback a:hover small, .cloud-fallback a:focus-visible small { opacity: 1; }
.webgl-ready .cloud-fallback { visibility: hidden; opacity: 0; pointer-events: none; }

.empty-cloud { position: fixed; inset: 0; display: grid; z-index: 1; place-items: center; text-align: center; }
.empty-cloud img { position: absolute; width: min(35rem, 82vw); filter: drop-shadow(0 1.4rem 2.3rem rgba(127, 61, 91, 0.14)); }
.empty-cloud div { position: relative; z-index: 1; }
.empty-cloud p { margin: 0 0 0.6rem; font-weight: 680; }
.empty-cloud a { color: var(--cloud-accent); font-size: 0.78rem; }
.noscript-note { position: fixed; z-index: 30; right: 1rem; bottom: 1rem; margin: 0; padding: 0.65rem 0.8rem; border-radius: 0.8rem; color: var(--cloud-muted); background: var(--cloud-panel); font-size: 0.7rem; }

@media (max-width: 819px) {
    .corner { width: min(19rem, calc(100vw - 1.2rem)); }
    .corner__panel { top: max(0.55rem, env(safe-area-inset-top)); }
    .corner--brand .corner__panel { left: max(0.55rem, env(safe-area-inset-left)); }
    .corner--tools .corner__panel { right: max(0.55rem, env(safe-area-inset-right)); }
    .brand-panel { width: min(18.5rem, calc(100vw - 1.2rem)); }
    .cloud-fallback { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cloud-fallback a { min-height: 8rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}