/** Purpose: CandyCloud public homepage design system and responsive layout. */
:root {
    --cc-ink: #111a35;
    --cc-muted: #69738d;
    --cc-paper: #fffefa;
    --cc-pink: #f44f82;
    --cc-pink-soft: #ffe1eb;
    --cc-mint: #baf6dc;
    --cc-gold: #ffe59a;
    --cc-blue: #dce4ff;
    --cc-line: #e6e8f0;
    --cc-shadow: 0 24px 60px rgba(55, 50, 77, .12);
    --cc-radius-xl: 38px;
    --cc-radius-lg: 24px;
    --cc-radius-md: 16px;
    --cc-page-width: 1440px;
    --cc-font: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; background: #e8dca6; }
body.candycloud-public {
    min-width: 320px;
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    padding: 28px 0;
    color: var(--cc-ink);
    background: #e8dca6;
    background-image: radial-gradient(circle at 8% 20%, rgba(255, 255, 255, .45), transparent 25%), linear-gradient(135deg, #f7edc3, #dccb91);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: var(--cc-font);
    display: grid;
    place-items: center;
}
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

.cc-shell {
    width: min(calc(100% - 48px), var(--cc-page-width));
    min-height: 0;
    margin: 0 auto;
    padding: 24px 38px 22px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: var(--cc-radius-xl);
    background: linear-gradient(160deg, rgba(255, 255, 255, .98), rgba(255, 254, 244, .95));
    box-shadow: var(--cc-shadow);
}

.cc-navigation { display: flex; align-items: center; gap: 28px; min-height: 70px; }
.cc-brand { display: inline-flex; align-items: center; gap: 12px; min-width: 290px; }
.cc-brand-mark { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 19px; background: linear-gradient(135deg, #fa5d93, #f24677); box-shadow: 0 10px 24px rgba(244, 79, 130, .28); }
.cc-brand-mark img { width: 28px; filter: brightness(0) invert(1); }
.cc-brand strong, .cc-brand small { display: block; }
.cc-brand strong { font-size: 23px; letter-spacing: -.8px; }
.cc-brand small { margin-top: 2px; color: var(--cc-muted); font-size: 13px; }
.cc-nav-links { display: flex; align-items: center; justify-content: center; flex: 1; gap: 8px; }
.cc-nav-links a, .cc-login { display: inline-flex; align-items: center; gap: 9px; padding: 12px 16px; color: #404961; font-weight: 700; border-radius: 999px; }
.cc-nav-links img, .cc-login img { width: 19px; height: 19px; }
.cc-nav-links a:hover, .cc-nav-links a.is-active { color: var(--cc-pink); background: #fff0f5; }
.cc-login { padding: 16px 26px; color: #fff; background: var(--cc-pink); box-shadow: 0 12px 20px rgba(244, 79, 130, .22); }
.cc-login img { filter: brightness(0) invert(1); }

.cc-hero { display: grid; grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr); gap: 32px; align-items: center; padding: 52px 10px 22px; }
.cc-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 8px 14px; color: var(--cc-pink); font-size: 13px; font-weight: 800; text-transform: uppercase; border-radius: 10px; background: #fff0f4; }
.cc-eyebrow img { width: 16px; }
.cc-hero h1 { max-width: 590px; margin: 0; font-size: clamp(48px, 5vw, 76px); line-height: .96; letter-spacing: -4px; }
.cc-hero h1 span { display: block; color: var(--cc-pink); }
.cc-lede { max-width: 470px; margin: 20px 0 28px; color: var(--cc-muted); font-size: 18px; line-height: 1.6; }
.cc-value-list { display: flex; gap: 22px; }
.cc-value-list span { display: grid; gap: 7px; color: #303950; font-size: 13px; font-weight: 800; text-align: center; }
.cc-value-list img { width: 50px; height: 50px; padding: 14px; margin: auto; border-radius: 50%; background: var(--cc-pink-soft); }
.cc-value-list span:nth-child(2) img { background: var(--cc-gold); }
.cc-value-list span:nth-child(3) img { background: #ffdce6; }

.cc-link-orbit { position: relative; min-height: 290px; overflow: visible; }.cc-link-orbit img { position: absolute; object-fit: contain; }.cc-art-shorter { z-index: 2; top: 0; left: 2%; width: 180px; transform: rotate(-13deg); }.cc-art-better { z-index: 2; top: -8px; right: 2%; width: 160px; transform: rotate(11deg); }.cc-art-link { z-index: 1; top: 72px; left: 15%; width: 67%; filter: drop-shadow(0 18px 22px rgba(51, 50, 81, .14)); transform: rotate(-4deg); }.cc-art-slogan { right: -2%; bottom: -5px; width: 52%; }

.cc-shortener-card { margin: 16px 0 24px; padding: 26px 30px 30px; border: 1px solid rgba(230, 232, 240, .8); border-radius: var(--cc-radius-lg); background: #fff; box-shadow: 0 14px 36px rgba(59, 55, 77, .08); }
.cc-card-heading { display: flex; gap: 34px; margin-bottom: 22px; color: var(--cc-muted); font-size: 14px; font-weight: 700; }
.cc-card-heading span { display: inline-flex; align-items: center; gap: 8px; }
.cc-card-heading span:first-child { color: var(--cc-pink); }
.cc-card-heading img { width: 18px; }
.cc-shortener-form { display: grid; grid-template-columns: 1fr auto; gap: 14px; }
.cc-shortener-form input { min-width: 0; padding: 20px 22px; color: var(--cc-ink); border: 1px solid var(--cc-line); border-radius: var(--cc-radius-md); outline: 0; background: #fff; box-shadow: inset 0 1px 2px rgba(23, 29, 58, .02); }
.cc-shortener-form input:focus { border-color: var(--cc-pink); box-shadow: 0 0 0 4px rgba(244, 79, 130, .14); }
.cc-shortener-form button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 160px; padding: 0 26px; color: #fff; font-weight: 800; cursor: pointer; border: 0; border-radius: var(--cc-radius-md); background: var(--cc-pink); box-shadow: 0 12px 20px rgba(244, 79, 130, .2); }
.cc-shortener-form button:hover { filter: brightness(.96); transform: translateY(-1px); }
.cc-shortener-form button img { width: 20px; filter: brightness(0) invert(1); }
.cc-form-result { min-height: 20px; margin: 13px 2px 0; color: var(--cc-muted); font-size: 14px; }
.cc-form-result.is-success { color: #168660; font-weight: 700; }
.cc-form-result.is-error { color: #c6335f; font-weight: 700; }
.cc-form-result a { text-decoration: underline; }
.cc-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.cc-private-notice { display: flex; align-items: center; gap: 12px; padding: 16px; color: #515971; border-radius: var(--cc-radius-md); background: #f5f7fc; }
.cc-private-notice img { width: 20px; }.cc-private-notice a { margin-left: auto; color: var(--cc-pink); font-weight: 800; }

.cc-bottom-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cc-metric-card, .cc-feature-card { min-height: 156px; padding: 24px; border-radius: var(--cc-radius-lg); }
.cc-metric-card { display: grid; grid-template-columns: 52px 1fr; column-gap: 14px; align-content: center; }
.cc-metric-card img, .cc-feature-card > img { width: 48px; height: 48px; padding: 13px; border-radius: 17px; background: rgba(255, 255, 255, .48); }
.cc-metric-card strong { align-self: end; font-size: 36px; letter-spacing: -2px; }.cc-metric-card span { grid-column: 1 / -1; margin-top: 8px; color: #566078; font-weight: 600; }
.cc-feature-card { display: flex; align-items: center; gap: 16px; }.cc-feature-card div { display: grid; gap: 7px; }.cc-feature-card strong { font-size: 17px; }.cc-feature-card span { color: #5e687e; font-size: 14px; line-height: 1.35; }
.cc-coral { background: linear-gradient(135deg, #ffe7ec, #ffeef0); }.cc-mint { background: linear-gradient(135deg, #e0fbef, #e8fcf4); }.cc-gold { background: linear-gradient(135deg, #ffedb4, #fff5d4); }.cc-blue { background: linear-gradient(135deg, #e7ecff, #edf0ff); }
.cc-footer { display: flex; justify-content: space-between; gap: 18px; padding-top: 28px; color: var(--cc-muted); font-size: 13px; }.cc-footer nav { display: flex; gap: 18px; }.cc-footer a:hover { color: var(--cc-pink); }

@media (max-width: 1050px) { .cc-brand { min-width: auto; }.cc-nav-links { display: none; }.cc-navigation { justify-content: space-between; }.cc-hero { grid-template-columns: 1fr; }.cc-link-orbit { max-width: 660px; width: 100%; }.cc-bottom-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { body.candycloud-public { padding: 10px 0; } .cc-shell { width: calc(100% - 20px); min-height: 0; margin: 0 auto; padding: 16px; border-radius: 25px; }.cc-brand { min-width: 0; }.cc-brand-mark { width: 44px; height: 44px; border-radius: 15px; }.cc-brand strong { font-size: 18px; }.cc-brand small { display: none; }.cc-login { padding: 12px; font-size: 0; }.cc-login img { width: 19px; }.cc-hero { padding: 48px 4px 10px; }.cc-hero h1 { font-size: 50px; letter-spacing: -3px; }.cc-lede { font-size: 16px; }.cc-link-orbit { min-height: 200px; }.cc-art-shorter { width: 125px; }.cc-art-better { width: 112px; }.cc-art-link { top: 57px; left: 6%; width: 88%; }.cc-art-slogan { display: none; }.cc-shortener-card { padding: 20px; }.cc-card-heading span:last-child { display: none; }.cc-shortener-form { grid-template-columns: 1fr; }.cc-shortener-form button { min-height: 54px; }.cc-bottom-grid { grid-template-columns: 1fr; }.cc-footer { align-items: flex-start; flex-direction: column; }.cc-private-notice { align-items: flex-start; flex-wrap: wrap; }.cc-private-notice a { width: 100%; margin-left: 32px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }

/* Purpose: Align the illustration composition and public shortening flow with the CandyCloud artwork. */
.cc-hero { grid-template-columns: minmax(0, .86fr) minmax(500px, 1.14fr); padding-top: 38px; }
.cc-link-orbit { min-height: 345px; isolation: isolate; }
.cc-parallax { position: absolute; will-change: transform; }
.cc-parallax img { position: static; width: 100%; height: auto; object-fit: contain; }
.cc-art-shorter { z-index: 3; top: -35px; left: -13%; width: 390px; transform: none; }
.cc-art-shorter img { transform: rotate(-12deg); }
.cc-art-better { z-index: 3; top: -54px; right: -10%; width: 360px; transform: none; }
.cc-art-better img { transform: rotate(10deg); }
.cc-art-smarter { z-index: 3; right: 8%; bottom: -43px; width: 370px; }
.cc-art-smarter img { transform: rotate(10deg); }
.cc-art-link { z-index: 2; top: 50px; left: 3%; width: 94%; filter: drop-shadow(0 22px 24px rgba(51, 50, 81, .15)); transform: none; }
.cc-art-link img { transform: rotate(-3deg); }
.cc-art-slogan { z-index: 1; right: -11%; bottom: -93px; width: 510px; }
.cc-card-heading { align-items: center; gap: 25px; }
.cc-card-heading > span { color: var(--cc-pink); }
.cc-alias-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 0; color: #536486; font: inherit; font-weight: 800; border: 0; background: transparent; }
.cc-alias-toggle img { width: 17px; }
.cc-alias-toggle:hover, .cc-alias-toggle[aria-expanded="true"] { color: var(--cc-pink); }
.cc-shortener-form > input[type="url"] { grid-column: 1; }
.cc-shortener-form > button { grid-column: 2; grid-row: 1; }
.cc-alias-field { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 9px 0; padding: 14px 16px; border: 1px dashed #f5a5bd; border-radius: var(--cc-radius-md); background: #fff8fa; }
.cc-alias-field[hidden] { display: none; }
.cc-alias-field label { grid-column: 1 / -1; color: #4c5a79; font-size: 13px; font-weight: 800; }
.cc-alias-prefix { padding: 14px 0 14px 14px; color: var(--cc-muted); border: 1px solid var(--cc-line); border-right: 0; border-radius: 12px 0 0 12px; background: #fff; }
.cc-shortener-form .cc-alias-field input { padding: 14px 14px 14px 4px; border-left: 0; border-radius: 0 12px 12px 0; }
.cc-alias-field small { grid-column: 1 / -1; color: var(--cc-muted); font-size: 12px; }
.cc-result-card { display: grid; gap: 8px; margin-top: 16px; padding: 16px 18px; border: 1px solid #bcefd9; border-radius: var(--cc-radius-md); background: #f3fff9; }
.cc-result-label { color: #187555; font-size: 13px; font-weight: 800; }
.cc-result-action { display: flex; min-width: 0; gap: 10px; }
.cc-result-link { min-width: 0; flex: 1; padding: 12px 14px; overflow: hidden; color: #136f52; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; border-radius: 12px; background: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cc-copy-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: none; padding: 0 16px; color: #fff; font-size: 14px; font-weight: 800; border: 0; border-radius: 12px; background: #168660; }
.cc-copy-button:hover { background: #0e7551; }
.cc-copy-button img { width: 17px; filter: brightness(0) invert(1); }
.cc-copy-feedback { min-height: 16px; color: #187555; font-size: 12px; font-weight: 700; }
@media (max-width: 1050px) { .cc-hero { grid-template-columns: 1fr; }.cc-link-orbit { max-width: 680px; width: 100%; margin: 0 auto; } }
@media (max-width: 640px) { .cc-link-orbit { min-height: 230px; }.cc-art-shorter { top: -26px; left: -26%; width: 300px; }.cc-art-better { top: -42px; right: -25%; width: 280px; }.cc-art-link { top: 39px; left: -2%; width: 104%; }.cc-art-smarter { right: -9%; bottom: -58px; width: 290px; }.cc-art-slogan { display: none; }.cc-card-heading { gap: 16px; }.cc-card-heading > span, .cc-alias-toggle { font-size: 13px; }.cc-shortener-form > input[type="url"], .cc-shortener-form > button { grid-column: 1; }.cc-shortener-form > button { grid-row: auto; }.cc-alias-prefix { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.cc-result-action { flex-direction: column; }.cc-result-link { width: 100%; }.cc-copy-button { min-height: 46px; } }

/* Purpose: Keep the reference artwork as one overlapping, foreground composition. */
.cc-link-orbit { min-height: 318px; }
.cc-art-shorter { top: 20px; left: -7%; width: 330px; }
.cc-art-better { top: 4px; right: -8%; width: 320px; }
.cc-art-link { top: 37px; left: 2%; width: 510px; }
.cc-art-smarter { right: 12%; bottom: 82px; width: 330px; }
.cc-art-slogan { right: 0; bottom: 24px; width: 320px; }
.cc-alias-field { grid-template-columns: minmax(0, 1fr); gap: 9px; padding: 16px; }
.cc-alias-input { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: stretch; gap: 8px; }
.cc-alias-prefix { display: inline-flex; align-items: center; gap: 7px; padding: 0 16px; color: #fff; border: 0; border-radius: 12px; background: #202c52; box-shadow: 0 7px 16px rgba(32, 44, 82, .16); }
.cc-alias-prefix strong { color: #fff; font-size: 14px; letter-spacing: .01em; }
.cc-alias-prefix > span { color: #ffcfde; font-size: 20px; font-weight: 800; }
.cc-shortener-form .cc-alias-input input { min-height: 52px; padding: 14px 16px; color: var(--cc-ink); font-weight: 700; border: 1px solid #cbd3e4; border-radius: 12px; background: #fff; box-shadow: none; }
.cc-shortener-form .cc-alias-input input::placeholder { color: #99a3bb; font-weight: 500; }
.cc-result-card[hidden] { display: none; }
@media (max-width: 1050px) { .cc-link-orbit { max-width: 660px; min-height: 305px; }.cc-art-link { left: 4%; width: 500px; }.cc-art-smarter { right: 5%; } }
@media (max-width: 640px) { .cc-link-orbit { min-height: 250px; }.cc-art-shorter { top: -12px; left: -24%; width: 270px; }.cc-art-better { top: -26px; right: -22%; width: 260px; }.cc-art-link { top: 42px; left: -4%; width: 430px; }.cc-art-smarter { right: -1%; bottom: -12px; width: 260px; }.cc-art-slogan { display: none; }.cc-alias-input { grid-template-columns: 1fr; gap: 7px; }.cc-alias-prefix { min-height: 42px; width: max-content; }.cc-alias-prefix { max-width: none; } }

/* Purpose: Preserve the compact domain-and-slug pairing on narrow screens. */
@media (max-width: 640px) { .cc-art-smarter { bottom: 30px; }.cc-alias-input { grid-template-columns: max-content minmax(0, 1fr); gap: 7px; }.cc-alias-prefix { width: auto; min-height: 52px; padding: 0 13px; }.cc-shortener-form .cc-alias-input input { min-width: 0; } }