.community-character-workshop-page {
    --cw-ink: var(--xl-text, #172a56);
    --cw-muted: var(--xl-muted, #65769b);
    --cw-blue: var(--xl-blue, #1c97eb);
    --cw-purple: var(--xl-purple, #8d68ff);
    --cw-pink: var(--xl-pink, #f35b8b);
    --cw-yellow: var(--xl-yellow, #ffcb3d);
    --cw-border: var(--xl-border, #cddcf3);
    background:
        radial-gradient(circle at 8% 18%, rgba(84, 183, 255, .16), transparent 25rem),
        radial-gradient(circle at 92% 42%, rgba(155, 106, 255, .12), transparent 28rem),
        #f5f9ff;
    color: var(--cw-ink);
}

.community-character-workshop-page .community-main {
    min-width: 0;
    padding: 0;
}

.community-character-workshop-page .community-header {
    display: block;
    width: 100%;
    min-height: 76px;
    padding: 0;
}

.community-character-workshop-page .community-header__inner {
    grid-template-columns: 200px minmax(0, 1fr) auto;
    gap: 10px;
    width: calc(100% - 40px);
    max-width: 1440px;
}

.community-character-workshop-page .community-nav {
    position: static;
    display: flex;
    min-width: 0;
    align-items: center;
}

.community-character-workshop-page .community-nav__links {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 2px;
    white-space: nowrap;
}

.community-character-workshop-page .community-nav__links > a {
    min-height: 38px;
    padding-inline: 6px;
    font-size: .72rem;
}

.community-character-workshop-page .community-nav__links > a > img {
    display: none;
}

.community-character-workshop-page .community-nav__mobile-actions {
    display: none;
}

.cw-page,
.cw-page *,
.cw-page *::before,
.cw-page *::after {
    box-sizing: border-box;
}

.cw-page {
    min-width: 0;
    overflow: clip;
    color: var(--cw-ink);
    font-family: "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
}

.cw-shell {
    width: min(1180px, calc(100% - 40px));
    margin-inline: auto;
}

.cw-token-form {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.cw-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 14px;
    border: 1px solid rgba(255, 255, 255, .68);
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .16em;
}

.cw-hero {
    position: relative;
    isolation: isolate;
    min-height: 330px;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 26%, rgba(255, 255, 255, .9) 0 2px, transparent 3px),
        radial-gradient(circle at 34% 68%, rgba(255, 220, 97, .88) 0 3px, transparent 4px),
        radial-gradient(circle at 84% 20%, rgba(255, 255, 255, .86) 0 2px, transparent 3px),
        linear-gradient(120deg, #075bc9 0%, #2d73e8 31%, #7654dc 67%, #a94bd4 100%);
}

.cw-hero::before,
.cw-hero::after {
    position: absolute;
    z-index: -1;
    content: "";
    border-radius: 50%;
    filter: blur(1px);
}

.cw-hero::before {
    top: -170px;
    left: -80px;
    width: 500px;
    height: 500px;
    border: 62px solid rgba(100, 219, 255, .18);
}

.cw-hero::after {
    right: -180px;
    bottom: -320px;
    width: 650px;
    height: 650px;
    border: 80px solid rgba(255, 137, 218, .18);
}

.cw-hero__sparkles {
    position: absolute;
    inset: 0;
    opacity: .5;
    background-image:
        radial-gradient(circle, #fff 0 1px, transparent 2px),
        radial-gradient(circle, #ffdf6a 0 1.5px, transparent 2.5px);
    background-position: 0 0, 36px 52px;
    background-size: 74px 74px, 103px 103px;
    mask-image: linear-gradient(90deg, #000, transparent 72%);
}

.cw-hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
    align-items: center;
    min-height: 330px;
}

.cw-hero__copy {
    z-index: 2;
    padding: 34px 0 38px 5%;
    color: #fff;
}

.cw-hero__copy h1 {
    margin: 9px 0 0;
    color: #fff;
    font-size: clamp(3.35rem, 7vw, 6rem);
    font-weight: 1000;
    letter-spacing: .04em;
    line-height: .98;
    text-shadow:
        0 5px 0 #174db8,
        0 9px 0 rgba(25, 40, 118, .24),
        0 0 20px rgba(255, 255, 255, .35);
    -webkit-text-stroke: 2px rgba(255, 255, 255, .92);
}

.cw-hero__copy h1 span {
    color: #ffcf4c;
    -webkit-text-stroke-color: #fff;
}

.cw-hero__tagline {
    display: inline-block;
    margin: 13px 0 8px;
    padding: 6px 32px;
    border: 2px solid rgba(255, 255, 255, .7);
    border-radius: 999px;
    background: linear-gradient(90deg, #7b4ee4, #c558d6);
    box-shadow: 0 7px 18px rgba(39, 22, 115, .28);
    font-size: 1.08rem;
    font-weight: 900;
}

.cw-hero__tagline + p {
    max-width: 620px;
    margin: 5px 0 18px;
    font-size: clamp(.92rem, 1.7vw, 1.12rem);
    font-weight: 800;
    letter-spacing: .02em;
}

.cw-hero__art {
    position: relative;
    align-self: stretch;
    min-height: 300px;
}

.cw-hero__art::before {
    position: absolute;
    right: 7%;
    bottom: 13%;
    width: 76%;
    aspect-ratio: 1;
    content: "";
    border: 2px solid rgba(255, 255, 255, .24);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(121, 236, 255, .4), rgba(82, 60, 202, .06) 64%, transparent 65%);
    box-shadow: 0 0 60px rgba(87, 223, 255, .32);
}

.cw-hero__art img {
    position: absolute;
    z-index: 1;
    right: 1%;
    bottom: -21%;
    width: min(390px, 96%);
    height: 420px;
    border-radius: 48% 48% 0 0;
    object-fit: cover;
    object-position: center 20%;
    filter: drop-shadow(0 18px 20px rgba(9, 29, 99, .3));
    transform: rotate(1.5deg);
}

.cw-hero__orb {
    position: absolute;
    z-index: 2;
    display: block;
    width: 36px;
    aspect-ratio: 1;
    border: 4px solid #fff;
    border-radius: 50%;
    background: #ffcf43;
    box-shadow: 0 6px 12px rgba(18, 36, 99, .25);
}

.cw-hero__orb--one {
    top: 18%;
    right: 5%;
}

.cw-hero__orb--two {
    right: 74%;
    bottom: 16%;
    width: 22px;
    background: #5ce5ff;
}

.cw-button {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 20px;
    border: 1px solid transparent;
    border-radius: 999px;
    font: inherit;
    font-size: .92rem;
    font-weight: 900;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.cw-button:hover {
    transform: translateY(-2px);
    filter: brightness(1.02);
}

.cw-button:focus-visible,
.cw-page button:focus-visible,
.cw-page a:focus-visible,
.cw-page input:focus-visible {
    outline: 3px solid #ffbf2f;
    outline-offset: 3px;
}

.cw-button--primary {
    border-color: #0878d8;
    background: linear-gradient(180deg, #4cc3ff, #117ee6);
    box-shadow: 0 7px 0 #075cae, 0 12px 18px rgba(20, 95, 190, .2);
    color: #fff;
}

.cw-hero .cw-button--primary {
    border: 2px solid #fff;
    background: linear-gradient(180deg, #ffd857, #ff9f25);
    box-shadow: 0 6px 0 #d97913, 0 12px 22px rgba(33, 26, 109, .32);
    color: #203f80;
}

.cw-button--secondary {
    border-color: #b9cbea;
    background: #fff;
    color: #355180;
}

.cw-button--ghost {
    border-color: #c9d7ee;
    background: linear-gradient(#fff, #f5f8ff);
    color: #40577e;
}

.cw-button--danger {
    border-color: #ffd0dc;
    background: #fff2f6;
    color: #c63661;
}

.cw-data-notice {
    margin-top: 18px;
    padding: 11px 16px;
    border: 1px solid #f5cc72;
    border-radius: 14px;
    background: #fff9e8;
    color: #775718;
    font-size: .88rem;
    font-weight: 700;
}

.cw-content {
    padding-block: 24px 46px;
}

.cw-editor-grid {
    display: grid;
    grid-template-columns: minmax(310px, .78fr) minmax(0, 1.22fr);
    gap: 12px;
    scroll-margin-top: 20px;
}

.cw-panel {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(126, 155, 205, .52);
    border-radius: 24px;
    background: rgba(255, 255, 255, .96);
    box-shadow:
        0 2px 0 rgba(255, 255, 255, .9) inset,
        0 15px 34px rgba(52, 87, 145, .13);
}

.cw-panel__header {
    display: flex;
    min-height: 68px;
    align-items: center;
    gap: 10px;
    padding: 11px 17px;
    color: #fff;
}

.cw-panel__header--blue {
    background:
        radial-gradient(circle at 85% 20%, rgba(255, 255, 255, .4) 0 2px, transparent 3px),
        linear-gradient(112deg, #138fdc, #3d8ef1 51%, #7b70ee);
}

.cw-panel__header--purple {
    background:
        radial-gradient(circle at 82% 24%, rgba(255, 255, 255, .42) 0 2px, transparent 3px),
        linear-gradient(112deg, #7b62e7, #a666eb 55%, #d36acc);
}

.cw-panel__header > div {
    min-width: 0;
}

.cw-panel__header p {
    margin: 0 0 2px;
    color: rgba(255, 255, 255, .72);
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .15em;
}

.cw-panel__header h2 {
    margin: 0;
    color: #fff;
    font-size: 1.24rem;
    font-weight: 1000;
    line-height: 1;
}

.cw-panel__header > a,
.cw-panel__header > button {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: .8rem;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}

.cw-title-icon {
    display: grid;
    width: 41px;
    aspect-ratio: 1;
    flex: 0 0 auto;
    place-items: center;
}

.cw-title-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cw-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    padding: 5px 9px;
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 999px;
    background: rgba(14, 47, 138, .26);
    color: #fff;
    font-size: .7rem;
    font-weight: 800;
}

.cw-live-pill i {
    width: 7px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #62f3b7;
    box-shadow: 0 0 0 3px rgba(98, 243, 183, .2);
}

.cw-preview-panel {
    display: grid;
    grid-template-rows: auto minmax(390px, 1fr) auto auto;
}

.cw-preview-stage {
    --cw-primary: #2f9fff;
    --cw-secondary: #8d68ff;
    --cw-length: .58;
    --cw-curl: .42;
    --cw-shine: .64;
    position: relative;
    isolation: isolate;
    display: grid;
    min-height: 390px;
    place-items: center;
    overflow: hidden;
    margin: 12px 12px 0;
    border: 1px solid #8dc9fa;
    border-radius: 20px;
    background:
        radial-gradient(circle at 50% 92%, color-mix(in srgb, var(--cw-primary) 35%, transparent) 0 18%, transparent 40%),
        radial-gradient(circle at 50% 48%, rgba(255, 255, 255, .78), transparent 41%),
        linear-gradient(165deg, #b8e8ff 0%, #d4d1ff 44%, #85ccff 100%);
}

.cw-preview-stage::before {
    position: absolute;
    z-index: -1;
    inset: 8%;
    content: "";
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 50%;
    box-shadow:
        0 0 0 18px rgba(255, 255, 255, .09),
        0 0 0 36px rgba(255, 255, 255, .05);
    transform: scale(calc(.88 + var(--cw-length) * .14));
}

.cw-preview-stage > img {
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    max-height: 520px;
    object-fit: cover;
    object-position: center;
    filter:
        saturate(calc(.82 + var(--cw-shine) * .45))
        contrast(calc(.94 + var(--cw-curl) * .1))
        drop-shadow(0 18px 16px rgba(38, 67, 133, .24));
    transform: scale(calc(.94 + var(--cw-length) * .08));
    transition: opacity .2s ease, transform .25s ease, filter .25s ease;
}

.cw-preview-stage__stars {
    position: absolute;
    z-index: 2;
    top: 8%;
    right: 7%;
    color: var(--cw-secondary);
    font-size: 1.45rem;
    letter-spacing: .28em;
    text-shadow: 0 0 12px #fff;
    animation: cw-twinkle 2.8s ease-in-out infinite;
}

.cw-preview-stage__aura {
    position: absolute;
    z-index: 2;
    right: 4%;
    bottom: 4%;
    left: 4%;
    height: 15%;
    border-radius: 50%;
    background: radial-gradient(ellipse, color-mix(in srgb, var(--cw-primary) 38%, transparent), transparent 68%);
    filter: blur(7px);
    pointer-events: none;
}

@keyframes cw-twinkle {
    50% { opacity: .42; transform: translateY(3px) scale(.94); }
}

.cw-preview-meta {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px 7px;
}

.cw-preview-meta strong {
    overflow: hidden;
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cw-preview-meta span {
    color: var(--cw-muted);
    font-size: .72rem;
}

.cw-preview-actions {
    display: grid;
    grid-template-columns: 1fr 1.35fr 1fr;
    gap: 8px;
    padding: 8px 12px 14px;
}

.cw-preview-actions .cw-button {
    min-width: 0;
    padding-inline: 8px;
}

.cw-button--random {
    border: 2px solid #fff;
    background: linear-gradient(180deg, #ffd94f, #ff9a18);
    box-shadow: 0 5px 0 #d66b0c, 0 9px 14px rgba(202, 107, 16, .22);
    color: #17396f;
}

.cw-button--random img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.cw-editor-panel {
    display: flex;
    min-height: 650px;
    flex-direction: column;
}

.cw-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-bottom: 1px solid #d6dff0;
    background: linear-gradient(90deg, #e9f6ff, #f4ecff 55%, #fff0fb);
}

.cw-tab {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 68px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 9px 5px;
    border: 0;
    border-right: 1px solid rgba(177, 192, 222, .56);
    background: transparent;
    color: #243b68;
    font: inherit;
    font-size: .88rem;
    font-weight: 900;
    cursor: pointer;
}

.cw-tab:last-child {
    border-right: 0;
}

.cw-tab::after {
    position: absolute;
    right: 11%;
    bottom: -1px;
    left: 11%;
    height: 4px;
    content: "";
    border-radius: 4px 4px 0 0;
    background: transparent;
}

.cw-tab.is-active {
    background: rgba(255, 255, 255, .7);
    color: #075bb4;
}

.cw-tab.is-active::after {
    background: linear-gradient(90deg, #168be6, #8667ee);
}

.cw-tab img {
    width: 32px;
    height: 30px;
    object-fit: contain;
}

.cw-editor-scroll {
    flex: 1;
    padding: 12px 16px 0;
}

.cw-asset-panel[hidden],
.cw-color-palette:not(.is-active) {
    display: none;
}

.cw-subtabs {
    display: flex;
    gap: 8px;
    margin-bottom: 9px;
}

.cw-subtabs span {
    min-width: 82px;
    padding: 6px 15px;
    border: 1px solid #cbd9ee;
    border-radius: 999px;
    background: #f5f8fe;
    color: #557099;
    font-size: .78rem;
    font-weight: 900;
    text-align: center;
}

.cw-subtabs .is-active {
    border-color: #1988e7;
    background: linear-gradient(#42b5ff, #1684e5);
    color: #fff;
}

.cw-asset-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.cw-asset-choice {
    position: relative;
    min-width: 0;
    overflow: hidden;
    padding: 4px;
    border: 1px solid #d4ddea;
    border-radius: 13px;
    background: linear-gradient(145deg, #fff, #f5f7fb);
    box-shadow: 0 5px 12px rgba(52, 79, 124, .07);
    color: var(--cw-ink);
    font: inherit;
    cursor: pointer;
}

.cw-asset-choice::after {
    position: absolute;
    top: 5px;
    right: 5px;
    display: grid;
    width: 18px;
    aspect-ratio: 1;
    place-items: center;
    content: "✓";
    border-radius: 50%;
    background: #198dea;
    color: #fff;
    font-size: .68rem;
    font-weight: 1000;
    opacity: 0;
    transform: scale(.7);
    transition: opacity .18s ease, transform .18s ease;
}

.cw-asset-choice.is-selected {
    border-color: #168bea;
    box-shadow: 0 0 0 2px rgba(24, 139, 234, .2), 0 7px 14px rgba(32, 103, 178, .14);
}

.cw-asset-choice.is-selected::after {
    opacity: 1;
    transform: scale(1);
}

.cw-asset-choice img {
    display: block;
    width: 100%;
    aspect-ratio: 1.04;
    border-radius: 9px;
    object-fit: cover;
    object-position: center;
}

.cw-asset-choice span {
    display: block;
    overflow: hidden;
    padding: 5px 2px 2px;
    font-size: .65rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cw-control-section {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #e2e8f3;
}

.cw-control-section h3 {
    margin: 0 0 8px;
    font-size: .89rem;
    font-weight: 1000;
}

.cw-control-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.cw-control-heading p {
    margin: -4px 0 8px;
    color: var(--cw-muted);
    font-size: .68rem;
}

.cw-color-targets {
    display: inline-flex;
    overflow: hidden;
    flex: 0 0 auto;
    border: 1px solid #c9d7ec;
    border-radius: 999px;
}

.cw-color-targets button {
    padding: 5px 10px;
    border: 0;
    background: #fff;
    color: #65789b;
    font: inherit;
    font-size: .7rem;
    font-weight: 900;
    cursor: pointer;
}

.cw-color-targets button.is-active {
    background: #e6f3ff;
    color: #0875ce;
}

.cw-color-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cw-color-swatch {
    position: relative;
    display: grid;
    width: 34px;
    aspect-ratio: 1;
    place-items: center;
    padding: 3px;
    border: 1px solid #c7d1e2;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}

.cw-color-swatch span {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border: 1px solid rgba(36, 51, 85, .12);
    border-radius: 50%;
    background: var(--swatch);
}

.cw-color-swatch::after {
    position: absolute;
    content: "✓";
    color: #fff;
    font-size: .8rem;
    font-weight: 1000;
    opacity: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}

.cw-color-swatch.is-selected {
    border-color: #ff9d18;
    box-shadow: 0 0 0 2px #ffc852;
}

.cw-color-swatch.is-selected::after {
    opacity: 1;
}

.cw-range-list {
    display: grid;
    gap: 7px;
}

.cw-range-list label {
    display: grid;
    grid-template-columns: 72px 26px minmax(0, 1fr) 26px;
    align-items: center;
    gap: 8px;
}

.cw-range-list label > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .76rem;
    font-weight: 900;
}

.cw-range-list output {
    color: #0d7dd9;
    font-size: .66rem;
}

.cw-range-list small {
    color: var(--cw-muted);
    font-size: .62rem;
    font-weight: 700;
    text-align: center;
}

.cw-range-list input[type="range"] {
    width: 100%;
    accent-color: #188de8;
}

.cw-recent .cw-control-heading > button {
    border: 0;
    background: transparent;
    color: #5d7091;
    font: inherit;
    font-size: .7rem;
    font-weight: 800;
    cursor: pointer;
}

.cw-recent-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.cw-recent-grid button {
    min-width: 0;
    overflow: hidden;
    padding: 3px;
    border: 1px solid #d4deed;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
}

.cw-recent-grid img {
    display: block;
    width: 100%;
    aspect-ratio: 1.08;
    border-radius: 7px;
    object-fit: cover;
}

.cw-save-bar {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) auto auto;
    align-items: end;
    gap: 8px;
    margin-top: 12px;
    padding: 11px 16px;
    border-top: 1px solid #dae3f1;
    background: #f7faff;
}

.cw-save-bar label span {
    display: block;
    margin-bottom: 4px;
    color: #546b91;
    font-size: .68rem;
    font-weight: 900;
}

.cw-save-bar input {
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid #c6d4e8;
    border-radius: 10px;
    background: #fff;
    color: var(--cw-ink);
    font: inherit;
}

.cw-feedback {
    min-height: 0;
    padding-inline: 16px;
    color: #08775c;
    font-size: .75rem;
    font-weight: 800;
}

.cw-feedback:not(:empty) {
    min-height: 34px;
    padding-block: 8px;
    border-top: 1px solid #dbe5f2;
}

.cw-feedback.is-error {
    color: #ba3558;
}

.cw-showcase-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: 12px;
    margin-top: 16px;
}

.cw-collection-grid {
    display: grid;
    min-height: 208px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
    background: linear-gradient(145deg, #f5fbff, #edf5ff);
}

.cw-design-card {
    position: relative;
    min-width: 0;
    padding: 5px;
    border: 1px solid #ccd9ed;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 14px rgba(45, 77, 132, .09);
}

.cw-design-card__apply {
    width: 100%;
    overflow: hidden;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: #eff5ff;
    cursor: pointer;
}

.cw-design-card__apply img {
    display: block;
    width: 100%;
    aspect-ratio: .78;
    object-fit: cover;
}

.cw-design-card > div {
    padding: 5px 3px 2px;
}

.cw-design-card strong,
.cw-design-card time {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cw-design-card strong {
    font-size: .75rem;
}

.cw-design-card time {
    margin-top: 2px;
    color: var(--cw-muted);
    font-size: .6rem;
}

.cw-heart {
    position: absolute;
    right: 6px;
    bottom: 7px;
    padding: 1px;
    border: 0;
    background: transparent;
    color: #ff517e;
    font-size: 1rem;
    cursor: pointer;
}

.cw-add-look,
.cw-empty-look {
    display: grid;
    min-width: 0;
    min-height: 170px;
    align-content: center;
    justify-items: center;
    gap: 6px;
    padding: 10px;
    border: 1px dashed #bdcbe1;
    border-radius: 14px;
    background: rgba(255, 255, 255, .72);
    color: #51698f;
    font: inherit;
    font-size: .72rem;
    font-weight: 900;
    text-align: center;
    cursor: pointer;
}

.cw-add-look span,
.cw-empty-look > span {
    color: #6983aa;
    font-size: 2.4rem;
    font-weight: 300;
}

.cw-empty-look {
    grid-column: 1 / -1;
    min-height: 180px;
    cursor: default;
}

.cw-empty-look small {
    color: var(--cw-muted);
    font-weight: 600;
}

.cw-style-panel {
    display: flex;
    flex-direction: column;
}

.cw-preset-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 12px 12px 8px;
}

.cw-preset-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #d7d7ed;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 6px 14px rgba(77, 55, 138, .09);
}

.cw-preset-card img {
    display: block;
    width: 100%;
    aspect-ratio: .82;
    object-fit: cover;
}

.cw-preset-card > div {
    padding: 6px 6px 10px;
}

.cw-preset-card strong,
.cw-preset-card span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cw-preset-card strong {
    font-size: .74rem;
}

.cw-preset-card span {
    display: inline-block;
    margin-top: 3px;
    padding: 2px 6px;
    border-radius: 999px;
    background: #f0ecff;
    color: #7655c9;
    font-size: .58rem;
    font-weight: 800;
}

.cw-preset-card button {
    position: absolute;
    inset: 0;
    border: 0;
    background: transparent;
    color: transparent;
    cursor: pointer;
}

.cw-preset-card.is-highlighted {
    border-color: #8c63e9;
    box-shadow: 0 0 0 3px rgba(140, 99, 233, .18);
}

.cw-button--style {
    width: min(300px, calc(100% - 24px));
    min-height: 40px;
    margin: auto auto 12px;
    border-color: #e31d55;
    background: linear-gradient(180deg, #ff668b, #ef2d61);
    box-shadow: 0 4px 0 #c51d4d;
    color: #fff;
}

.cw-cta {
    position: relative;
    display: grid;
    min-height: 148px;
    grid-template-columns: minmax(300px, .88fr) minmax(0, 1.12fr);
    align-items: center;
    gap: 18px;
    overflow: hidden;
    margin-top: 16px;
    padding: 20px 28px 20px 170px;
    border: 2px solid #5bb6f6;
    border-radius: 24px;
    background:
        radial-gradient(circle at 5% 20%, rgba(255, 255, 255, .9) 0 2px, transparent 3px),
        linear-gradient(115deg, #1a9fe7, #45bdf2 48%, #7ed2ff);
    box-shadow: 0 12px 28px rgba(28, 121, 199, .16);
    color: #fff;
}

.cw-cta::after {
    position: absolute;
    top: -55%;
    right: 44%;
    width: 230px;
    aspect-ratio: 1;
    content: "";
    border: 24px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
}

.cw-cta__mascot {
    position: absolute;
    z-index: 1;
    bottom: -16px;
    object-fit: contain;
    filter: drop-shadow(0 9px 9px rgba(26, 63, 122, .25));
}

.cw-cta__mascot--blue {
    left: 10px;
    width: 112px;
}

.cw-cta__mascot--yellow {
    bottom: -8px;
    left: 89px;
    width: 84px;
}

.cw-cta__copy {
    position: relative;
    z-index: 2;
}

.cw-cta h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.2rem, 2vw, 1.65rem);
    font-weight: 1000;
    text-shadow: 0 2px 3px rgba(0, 79, 151, .25);
}

.cw-cta p {
    margin: 4px 0 11px;
    font-weight: 800;
}

.cw-button--cta {
    min-width: 190px;
    border: 2px solid #fff;
    background: linear-gradient(#ffe270, #ffb128);
    box-shadow: 0 5px 0 #d98215;
    color: #234171;
}

.cw-cta__features {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 17px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 9px 18px rgba(15, 81, 147, .17);
}

.cw-cta__features > div {
    min-width: 0;
    padding: 13px 8px;
    border-right: 1px solid #d9e6f4;
    color: var(--cw-ink);
    text-align: center;
}

.cw-cta__features > div:last-child {
    border-right: 0;
}

.cw-cta__features span,
.cw-cta__features strong,
.cw-cta__features small {
    display: block;
}

.cw-cta__features span {
    color: #2b9fe9;
    font-size: 1.05rem;
}

.cw-cta__features strong {
    margin: 3px 0;
    color: #2780ce;
    font-size: .73rem;
}

.cw-cta__features small {
    color: #66789a;
    font-size: .57rem;
    line-height: 1.4;
}

.cw-subpage {
    min-height: 70vh;
}

.cw-subpage-hero {
    padding: 54px 0 48px;
    background:
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, .7) 0 2px, transparent 3px),
        linear-gradient(115deg, #0877d3, #7862e7);
    color: #fff;
}

.cw-subpage-hero a {
    display: inline-block;
    margin-bottom: 18px;
    color: #fff;
    font-size: .82rem;
    font-weight: 800;
    text-decoration: none;
}

.cw-subpage-hero h1 {
    margin: 11px 0 5px;
    color: #fff;
    font-size: clamp(2rem, 5vw, 3.35rem);
}

.cw-subpage-hero p {
    margin: 0;
    color: rgba(255, 255, 255, .82);
}

.cw-design-library {
    padding-block: 28px 56px;
}

.cw-library-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.cw-library-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #cedbed;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 26px rgba(47, 77, 128, .12);
}

.cw-library-card__image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1.12;
    background: linear-gradient(145deg, #dff4ff, #e8ddff);
}

.cw-library-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .24s ease;
}

.cw-library-card:hover .cw-library-card__image img {
    transform: scale(1.035);
}

.cw-library-card__image span {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #ffbd2e;
    color: #233b67;
    font-size: .68rem;
    font-weight: 900;
}

.cw-library-card__body {
    padding: 16px;
}

.cw-library-card__body h2 {
    margin: 0;
    font-size: 1.18rem;
}

.cw-library-card__body time {
    display: block;
    margin: 4px 0 15px;
    color: var(--cw-muted);
    font-size: .73rem;
}

.cw-library-card__body > div {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.cw-library-card__body .cw-button {
    min-height: 38px;
    padding: 8px 13px;
    font-size: .76rem;
}

.cw-library-empty {
    display: grid;
    min-height: 350px;
    place-items: center;
    align-content: center;
    gap: 7px;
    border: 1px dashed #b9cce5;
    border-radius: 22px;
    background: rgba(255, 255, 255, .8);
    text-align: center;
}

.cw-library-empty > span {
    color: #7b65e6;
    font-size: 3rem;
}

.cw-library-empty h2,
.cw-library-empty p {
    margin: 0;
}

.cw-library-empty p {
    margin-bottom: 12px;
    color: var(--cw-muted);
}

.cw-feedback--library {
    position: sticky;
    bottom: 12px;
    z-index: 5;
    width: fit-content;
    max-width: 100%;
    margin: 16px auto 0;
    border-radius: 999px;
    background: #e9fff7;
    box-shadow: 0 8px 20px rgba(44, 95, 78, .16);
}

.cw-share-page {
    display: grid;
    min-height: 72vh;
    place-items: center;
    padding: 42px 20px;
    background:
        radial-gradient(circle at 20% 20%, rgba(65, 192, 255, .22), transparent 28rem),
        radial-gradient(circle at 80% 70%, rgba(147, 93, 240, .2), transparent 28rem),
        #eef6ff;
}

.cw-share-card {
    display: grid;
    width: min(860px, 100%);
    grid-template-columns: minmax(280px, .9fr) minmax(260px, 1.1fr);
    overflow: hidden;
    border: 2px solid #9ecdf4;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 25px 60px rgba(37, 74, 137, .2);
}

.cw-share-card > .cw-eyebrow {
    position: absolute;
    margin: 18px;
    background: rgba(34, 94, 191, .78);
}

.cw-share-card__preview {
    position: relative;
    min-height: 460px;
    overflow: hidden;
    background: linear-gradient(145deg, #b9eaff, #bcaef8);
}

.cw-share-card__preview > span {
    position: absolute;
    z-index: 2;
    top: 20%;
    right: 12%;
    color: #fff;
    font-size: 2.3rem;
    text-shadow: 0 0 16px #fff;
}

.cw-share-card__preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cw-share-card__copy {
    display: grid;
    align-content: center;
    padding: 44px;
}

.cw-share-card__copy p {
    margin: 0;
    color: #62779c;
    font-weight: 800;
}

.cw-share-card__copy h1 {
    margin: 7px 0;
    font-size: clamp(2rem, 5vw, 3.3rem);
}

.cw-share-card__copy time {
    margin-bottom: 24px;
    color: var(--cw-muted);
    font-size: .8rem;
}

@media (max-width: 980px) {
    .cw-shell {
        width: min(calc(100% - 28px), 820px);
    }

    .cw-hero__inner {
        grid-template-columns: minmax(0, 1fr) 310px;
    }

    .cw-hero__copy {
        padding-left: 0;
    }

    .cw-editor-grid,
    .cw-showcase-grid {
        grid-template-columns: 1fr;
    }

    .cw-preview-panel {
        grid-template-rows: auto minmax(440px, 540px) auto auto;
    }

    .cw-preview-stage {
        min-height: 440px;
    }

    .cw-preview-stage > img {
        max-height: 540px;
        object-fit: contain;
    }

    .cw-editor-panel {
        min-height: auto;
    }

    .cw-cta {
        grid-template-columns: 1fr;
        padding-left: 176px;
    }

    .cw-library-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1179px) {
    .community-character-workshop-page .community-header__inner {
        grid-template-columns: minmax(190px, 1fr) auto auto;
    }

    .community-character-workshop-page .community-nav {
        position: static;
        display: flex;
        justify-content: flex-end;
    }

    .community-character-workshop-page .community-menu-toggle {
        display: grid;
    }

    .community-character-workshop-page .community-nav__links {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        display: none;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 7px;
        padding: 14px max(18px, calc((100% - 960px) / 2));
        border-bottom: 1px solid #cde9fa;
        background: rgba(255, 255, 255, .99);
        box-shadow: 0 12px 20px rgba(14, 74, 145, .12);
        white-space: normal;
    }

    .community-character-workshop-page .community-nav.is-open .community-nav__links {
        display: grid;
    }

    .community-character-workshop-page .community-nav__links > a {
        justify-content: center;
    }

    .community-character-workshop-page .community-nav__links > a > img {
        display: block;
    }

    .community-character-workshop-page .community-nav__mobile-actions {
        display: flex;
        grid-column: 1 / -1;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
    }
}

@media (max-width: 700px) {
    .community-character-workshop-page .community-header__inner {
        grid-template-columns: minmax(145px, 1fr) auto auto;
        width: calc(100% - 20px);
        min-height: 64px;
    }

    .community-character-workshop-page .community-brand img {
        width: 170px;
        height: 46px;
    }

    .community-character-workshop-page .community-nav__links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 12px;
    }

    .community-character-workshop-page .community-nav__links > a {
        justify-content: flex-start;
        padding-inline: 13px;
    }

    .cw-shell {
        width: min(calc(100% - 22px), 560px);
    }

    .cw-hero {
        min-height: 430px;
    }

    .cw-hero__inner {
        display: block;
        min-height: 430px;
    }

    .cw-hero__copy {
        position: relative;
        z-index: 3;
        width: 72%;
        padding: 36px 0 30px;
    }

    .cw-hero__copy h1 {
        font-size: clamp(3rem, 15vw, 4.5rem);
    }

    .cw-hero__tagline {
        max-width: 100%;
        padding-inline: 18px;
        font-size: .88rem;
    }

    .cw-hero__art {
        position: absolute;
        inset: 0;
        opacity: .78;
    }

    .cw-hero__art img {
        right: -23%;
        bottom: -3%;
        width: 75%;
        height: 370px;
    }

    .cw-hero__art::before {
        right: -15%;
        bottom: 4%;
        width: 72%;
    }

    .cw-content {
        padding-top: 14px;
    }

    .cw-panel {
        border-radius: 18px;
    }

    .cw-panel__header {
        min-height: 62px;
        padding-inline: 12px;
    }

    .cw-panel__header h2 {
        font-size: 1.05rem;
    }

    .cw-live-pill {
        font-size: .62rem;
    }

    .cw-preview-panel {
        grid-template-rows: auto minmax(380px, 460px) auto auto;
    }

    .cw-preview-stage {
        min-height: 380px;
        margin: 9px 9px 0;
    }

    .cw-preview-meta {
        padding-inline: 12px;
    }

    .cw-preview-actions {
        grid-template-columns: 1fr 1.3fr 1fr;
        padding-inline: 9px;
    }

    .cw-preview-actions .cw-button {
        min-height: 41px;
        font-size: .76rem;
    }

    .cw-tabs {
        overflow-x: auto;
        grid-template-columns: repeat(5, minmax(72px, 1fr));
        scrollbar-width: thin;
    }

    .cw-tab {
        min-height: 62px;
        flex-direction: column;
        gap: 0;
        font-size: .72rem;
    }

    .cw-tab img {
        width: 29px;
        height: 27px;
    }

    .cw-editor-scroll {
        padding-inline: 10px;
    }

    .cw-asset-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cw-asset-choice span {
        font-size: .63rem;
    }

    .cw-color-palette {
        gap: 8px;
    }

    .cw-range-list label {
        grid-template-columns: 58px 22px minmax(0, 1fr) 22px;
        gap: 5px;
    }

    .cw-recent-grid {
        grid-template-columns: repeat(6, minmax(45px, 1fr));
        overflow-x: auto;
    }

    .cw-save-bar {
        grid-template-columns: 1fr 1fr;
        padding-inline: 10px;
    }

    .cw-save-bar label {
        grid-column: 1 / -1;
    }

    .cw-save-bar .cw-button {
        min-width: 0;
        padding-inline: 8px;
        font-size: .76rem;
    }

    .cw-collection-grid,
    .cw-preset-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cw-collection-grid {
        min-height: 0;
    }

    .cw-add-look {
        min-height: 130px;
    }

    .cw-preset-card img {
        aspect-ratio: 1.04;
    }

    .cw-cta {
        display: block;
        padding: 22px 16px 20px;
        text-align: center;
    }

    .cw-cta__mascot {
        opacity: .2;
    }

    .cw-cta__mascot--blue {
        left: -10px;
    }

    .cw-cta__mascot--yellow {
        right: -6px;
        left: auto;
    }

    .cw-cta__features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 17px;
    }

    .cw-cta__features > div {
        border-bottom: 1px solid #d9e6f4;
    }

    .cw-library-grid {
        grid-template-columns: 1fr;
    }

    .cw-share-card {
        grid-template-columns: 1fr;
    }

    .cw-share-card__preview {
        min-height: 380px;
    }

    .cw-share-card__copy {
        padding: 28px;
    }
}

@media (max-width: 420px) {
    .community-character-workshop-page .community-header__inner {
        grid-template-columns: minmax(125px, 1fr) 42px auto;
        gap: 5px;
    }

    .community-character-workshop-page .community-brand img {
        width: 145px;
    }

    .cw-shell {
        width: calc(100% - 16px);
    }

    .cw-hero__copy {
        width: 82%;
        padding-left: 3px;
    }

    .cw-hero__copy h1 {
        font-size: 3.05rem;
        -webkit-text-stroke-width: 1.5px;
    }

    .cw-hero__copy > p:last-of-type {
        font-size: .78rem;
    }

    .cw-hero__art img {
        right: -35%;
        width: 92%;
    }

    .cw-panel__header > a,
    .cw-panel__header > button {
        font-size: .68rem;
    }

    .cw-live-pill {
        padding-inline: 6px;
    }

    .cw-preview-panel {
        grid-template-rows: auto minmax(340px, 410px) auto auto;
    }

    .cw-preview-stage {
        min-height: 340px;
    }

    .cw-preview-meta span {
        display: none;
    }

    .cw-preview-actions {
        gap: 5px;
    }

    .cw-preview-actions .cw-button {
        min-height: 39px;
        padding-inline: 4px;
        font-size: .7rem;
    }

    .cw-button--random img {
        width: 21px;
        height: 21px;
    }

    .cw-control-heading {
        align-items: end;
    }

    .cw-control-heading p {
        display: none;
    }

    .cw-color-swatch {
        width: 31px;
    }

    .cw-range-list label {
        grid-template-columns: 52px 18px minmax(0, 1fr) 18px;
    }

    .cw-preset-grid,
    .cw-collection-grid {
        gap: 6px;
        padding: 8px;
    }

    .cw-cta__features strong {
        font-size: .68rem;
    }

    .cw-share-page {
        padding-inline: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cw-page *,
    .cw-page *::before,
    .cw-page *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}