/* C030 mobile Writing. The homepage owns palette selection; this stylesheet
 * only consumes its glow variables. The desktop writing page is unchanged. */
.mwriting-app { display: none; }

@layer fuuvo-mobile-design {
@media (max-width: 920px) {
    html body #creation-app[data-creation-page="writing"] {
        --mw-ink: #25232e;
        --mw-muted: #887c92;
        --mw-line: #e5deeb;
        --mw-bg: #fff;
        --mw-paper: #fff;
        --mw-paper-ink: #25232e;
        --mw-copy: #494251;
        --mw-toolbar: #786982;
        --mw-accent: #438f75;
        --mw-primary: #292530;
        --mw-primary-ink: #fff;
        --mw-brand-ink: #101015;
        --mw-placeholder: #a194ac;
        --mw-tint: #ffffff79;
        --mw-language-active: #fff;
        --mw-soft-bg: #fcfafd;
        --mw-status-bg: #f1edf6;
        --mw-status-ink: #8c7b9a;
        --mw-quote-bg: #f6f9f7;
        --mw-quote-ink: #60796a;
        --mw-overlay: #25232e1a;
        --mw-error: #a95367;
        --mw-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, "Noto Sans SC", sans-serif;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: var(--mwriting-viewport-height, 100dvh) !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        color: var(--mw-ink) !important;
        color-scheme: light !important;
        background: var(--mw-bg) !important;
    }
    html body:is([data-ui-theme="dark"], [data-theme="dark"]) #creation-app[data-creation-page="writing"],
    html:is([data-ui-theme="dark"], [data-theme="dark"]) body #creation-app[data-creation-page="writing"] {
        --mw-ink: #f1edf5;
        --mw-muted: #b8aec2;
        --mw-line: #41414f;
        --mw-card-line: #41414f;
        --mw-bg: #191a22;
        --mw-paper: #25262f;
        --mw-paper-ink: #f1edf5;
        --mw-copy: #dfd9e6;
        --mw-toolbar: #b8aec2;
        --mw-accent: #8bd0b2;
        --mw-primary: #eeebf2;
        --mw-primary-ink: #25232e;
        --mw-brand-ink: #f1edf5;
        --mw-placeholder: #aea2bb;
        --mw-tint: #25262f;
        --mw-language-active: #41404e;
        --mw-soft-bg: #20212a;
        --mw-status-bg: #34313f;
        --mw-status-ink: #d6c7e7;
        --mw-quote-bg: #24392f;
        --mw-quote-ink: #c0dfcd;
        --mw-overlay: #090a10a6;
        --mw-error: #ffb0c0;
        color-scheme: dark !important;
    }
    html body #creation-app[data-creation-page="writing"] > .creation-workspace {
        display: none !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-app {
        position: relative !important;
        isolation: isolate !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: var(--mwriting-viewport-height, 100%) !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        color: var(--mw-ink) !important;
        background: radial-gradient(ellipse 83% 35% at 50% -5%, var(--home-bg-glow-a, transparent), transparent 96%),
            radial-gradient(ellipse 80% 32% at 50% -3%, var(--home-bg-glow-b, transparent), transparent 94%),
            radial-gradient(ellipse 100% 24% at 50% 0, var(--home-bg-glow-c, transparent), transparent 97%), var(--mw-bg) !important;
        font-family: var(--mw-font) !important;
        -webkit-text-size-adjust: 100% !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-app *,
    html body #creation-app[data-creation-page="writing"] .mwriting-app *::before,
    html body #creation-app[data-creation-page="writing"] .mwriting-app *::after {
        box-sizing: border-box !important;
        -webkit-text-fill-color: currentColor !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-app :is(button, input, textarea, select) {
        font-family: var(--mw-font) !important;
        font-synthesis: weight !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-app :is(button, a) {
        cursor: pointer !important;
        touch-action: manipulation !important;
        text-decoration: none !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-app :where(button) {
        position: static !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
        color: inherit !important;
        box-shadow: none !important;
        text-transform: none !important;
        letter-spacing: normal !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-app button:disabled {
        opacity: .4 !important;
        cursor: default !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-app :is(button, a):focus-visible {
        outline: 2px solid #659582 !important;
        outline-offset: 2px !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-app :is(input, textarea, select):focus-visible {
        outline: 2px solid #9bbdae !important;
        outline-offset: 2px !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-app svg {
        display: block !important;
        flex: 0 0 auto !important;
        width: 24px !important;
        height: 24px !important;
        margin: 0 !important;
        padding: 0 !important;
        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 1.5 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-topbar {
        position: relative !important;
        display: flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 58px !important;
        height: 58px !important;
        padding: 0 max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left)) !important;
        margin: 0 !important;
        border: 0 !important;
        color: var(--mw-ink) !important;
        background: transparent !important;
        box-shadow: none !important;
        z-index: 2 !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-app :is(.mwriting-back, .mwriting-icon-button, .mwriting-ib) {
        display: flex !important;
        flex: 0 0 44px !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 10px !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 12px !important;
    }
    html body #creation-app[data-creation-page="writing"] :is(.mwriting-back, .mwriting-icon-button, .mwriting-ib) svg {
        width: 20px !important;
        height: 20px !important;
    }
    html body #creation-app[data-creation-page="writing"] :is(.mwriting-back, .mwriting-icon-button, .mwriting-ib, .mwriting-send) > span {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        margin: -1px !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        clip: rect(0, 0, 0, 0) !important;
        clip-path: inset(50%) !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-brand {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        display: flex !important;
        align-items: center !important;
        width: 99px !important;
        height: 36px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: transparent !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-brand img {
        display: block !important;
        width: 99px !important;
        max-width: 99px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        object-fit: contain !important;
        filter: none !important;
        opacity: 1 !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-brand span {
        position: absolute !important;
        left: calc(100% + 5px) !important;
        bottom: 6px !important;
        width: auto !important;
        height: 16px !important;
        color: var(--mw-brand-ink) !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 16px !important;
        white-space: nowrap !important;
    }
    html body:is([data-ui-theme="dark"], [data-theme="dark"]) #creation-app[data-creation-page="writing"] .mwriting-brand::before,
    html:is([data-ui-theme="dark"], [data-theme="dark"]) body #creation-app[data-creation-page="writing"] .mwriting-brand::before {
        content: none !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-language {
        display: flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        height: 36px !important;
        min-height: 36px !important;
        width: 65px !important;
        min-width: 65px !important;
        max-width: 65px !important;
        padding: 2px !important;
        margin-left: auto !important;
        gap: 1px !important;
        border: 1px solid var(--mw-line) !important;
        border-radius: 10px !important;
        background: var(--mw-status-bg) !important;
        box-sizing: border-box !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-language :is(button, a) {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 29px !important;
        width: 29px !important;
        min-width: 29px !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        padding: 0 5px !important;
        border-radius: 7px !important;
        font-size: 11px !important;
        line-height: 30px !important;
        font-weight: 400 !important;
        color: var(--mw-toolbar) !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-language :is(.active, .is-active, [aria-current="page"], [aria-pressed="true"]) {
        background: var(--mw-paper) !important;
        color: var(--mw-paper-ink) !important;
        box-shadow: 0 1px 4px #6551710d !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-page {
        display: block !important;
        flex: 1 1 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 17px max(20px, env(safe-area-inset-right)) calc(22px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: contain !important;
        scrollbar-width: thin !important;
        -webkit-overflow-scrolling: touch !important;
        background: transparent !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-intro {
        margin: 0 0 19px !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-intro-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-intro h1,
    html body #creation-app[data-creation-page="writing"] .mwriting-intro h2 {
        margin: 0 0 7px !important;
        font-size: 28px !important;
        line-height: 34px !important;
        font-weight: 600 !important;
        letter-spacing: -.9px !important;
        color: var(--mw-ink) !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-intro p {
        max-width: 310px !important;
        margin: 0 !important;
        font-size: 13px !important;
        line-height: 20px !important;
        color: var(--mw-muted) !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-text-button {
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        min-height: 42px !important;
        padding: 0 !important;
        font-size: 11px !important;
        line-height: 18px !important;
        font-weight: 400 !important;
        color: var(--mw-muted) !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-text-button svg {
        width: 17px !important;
        height: 17px !important;
        color: inherit !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-intro-row .mwriting-text-button {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }
    html body #creation-app[data-creation-page="writing"] :is(.mwriting-idea, .mwriting-brief) {
        border: 1px solid var(--mw-line) !important;
        background: var(--mw-paper) !important;
        color: var(--mw-paper-ink) !important;
        box-shadow: 0 4px 14px #70567a03 !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-idea {
        border-radius: 17px !important;
        padding: 14px 14px 9px !important;
        margin: 0 0 21px !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-app textarea {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        outline: none;
        background: transparent !important;
        color: var(--mw-paper-ink) !important;
        box-shadow: none !important;
        resize: none !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        line-height: 24px !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-app textarea::placeholder {
        color: var(--mw-placeholder) !important;
        -webkit-text-fill-color: var(--mw-placeholder) !important;
        opacity: 1 !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-idea textarea {
        min-height: 70px !important;
        height: 70px !important;
        line-height: 23px !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-idea-bottom {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        margin: 7px 0 0 !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-idea .mwriting-text-button {
        color: var(--mw-toolbar) !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-start {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
        gap: 7px !important;
        min-height: 37px !important;
        padding: 0 13px !important;
        border-radius: 11px !important;
        background: var(--mw-primary) !important;
        color: var(--mw-primary-ink) !important;
        font-size: 12px !important;
        font-weight: 400 !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-start svg {
        width: 16px !important;
        height: 16px !important;
        order: 1 !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-section-label {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        margin: 0 0 10px !important;
        font-size: 12px !important;
        line-height: 19px !important;
        font-weight: 600 !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-section-label small {
        font-size: 10px !important;
        line-height: 16px !important;
        font-weight: 400 !important;
        color: var(--mw-muted) !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-format-list {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-format {
        display: grid !important;
        grid-template-columns: 23px minmax(0, 1fr) 15px !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 65px !important;
        padding: 10px 13px !important;
        border: 1px solid var(--mw-card-line, #e7e1eb) !important;
        border-radius: 13px !important;
        background: var(--mw-paper) !important;
        color: var(--mw-paper-ink) !important;
        text-align: left !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-format > svg:first-child {
        width: 23px !important;
        height: 23px !important;
        color: var(--mw-accent) !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-format > span {
        min-width: 0 !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-format strong {
        display: block !important;
        margin: 0 !important;
        font-size: 13px !important;
        line-height: 19px !important;
        font-weight: 500 !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-format small {
        display: block !important;
        margin: 2px 0 0 !important;
        font-size: 10px !important;
        line-height: 16px !important;
        font-weight: 400 !important;
        color: var(--mw-muted) !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-format > svg:last-child {
        width: 15px !important;
        height: 15px !important;
        color: var(--mw-placeholder) !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-help-note {
        margin: 14px 0 0 !important;
        font-size: 10px !important;
        line-height: 17px !important;
        color: var(--mw-muted) !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-help-note a {
        color: var(--mw-accent) !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-eyebrow {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        margin: 0 0 7px !important;
        font-size: 10px !important;
        line-height: 16px !important;
        letter-spacing: .7px !important;
        text-transform: uppercase !important;
        color: var(--mw-muted) !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-eyebrow svg {
        width: 15px !important;
        height: 15px !important;
        color: var(--mw-accent) !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-compose-title {
        margin: 0 0 8px !important;
        font-size: 25px !important;
        line-height: 31px !important;
        font-weight: 600 !important;
        letter-spacing: -.5px !important;
        color: var(--mw-ink) !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-compose-desc {
        margin: 0 0 23px !important;
        font-size: 12px !important;
        line-height: 19px !important;
        color: var(--mw-muted) !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-field-label {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        margin: 0 0 9px !important;
        font-size: 12px !important;
        line-height: 19px !important;
        font-weight: 600 !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-field-label small {
        font-size: 10px !important;
        line-height: 16px !important;
        font-weight: 400 !important;
        color: var(--mw-muted) !important;
        text-align: right !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-brief {
        border-radius: 14px !important;
        padding: 13px !important;
        margin: 0 0 4px !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-brief textarea {
        min-height: 132px !important;
        height: 132px !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-brief textarea::placeholder {
        font-size: 14px !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-example-line {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        margin: 0 0 13px !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-example-line button {
        min-height: 42px !important;
        padding: 0 !important;
        font-size: 11px !important;
        font-weight: 400 !important;
        color: var(--mw-accent) !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-example-line small {
        font-size: 10px !important;
        line-height: 16px !important;
        color: var(--mw-muted) !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-form-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 13px 12px !important;
        margin: 10px 0 !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-field {
        display: flex !important;
        flex-direction: column !important;
        min-width: 0 !important;
        margin: 0 !important;
        gap: 7px !important;
        font-size: 11px !important;
        line-height: 17px !important;
        font-weight: 500 !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-field.wide {
        grid-column: 1 / -1 !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-field :is(select, input) {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 43px !important;
        height: 43px !important;
        padding: 0 10px !important;
        margin: 0 !important;
        border: 1px solid var(--mw-line) !important;
        border-radius: 10px !important;
        color: var(--mw-paper-ink) !important;
        background-color: var(--mw-paper) !important;
        box-shadow: none !important;
        font-size: 16px !important;
        line-height: normal !important;
        font-weight: 400 !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-field input::placeholder {
        color: var(--mw-placeholder) !important;
        -webkit-text-fill-color: var(--mw-placeholder) !important;
        opacity: 1 !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-attachments {
        margin: 8px 0 !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-file-row {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        border: 1px solid var(--mw-card-line, #e7e1eb) !important;
        border-radius: 9px !important;
        background: var(--mw-paper) !important;
        padding: 4px 7px 4px 10px !important;
        margin: 5px 0 !important;
        color: var(--mw-paper-ink) !important;
        font-size: 11px !important;
        line-height: 18px !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-file-row > svg {
        width: 18px !important;
        height: 18px !important;
        color: var(--mw-toolbar) !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-file-row > span {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-file-row :is(.mwriting-icon-button, .mwriting-ib) {
        flex-basis: 32px !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        padding: 8px !important;
        color: var(--mw-toolbar) !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-file-row :is(.mwriting-icon-button, .mwriting-ib) svg {
        width: 14px !important;
        height: 14px !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-file-row small {
        display: block !important;
        margin-top: 2px !important;
        color: var(--mw-toolbar) !important;
        font-size: 10px !important;
        line-height: 16px !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-file-hint {
        display: block !important;
        margin: 0 0 6px !important;
        color: var(--mw-muted) !important;
        font-size: 10px !important;
        line-height: 17px !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-add-reference {
        display: flex !important;
        align-items: center !important;
        min-height: 42px !important;
        padding: 0 !important;
        gap: 7px !important;
        font-size: 11px !important;
        line-height: 18px !important;
        font-weight: 400 !important;
        color: var(--mw-muted) !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-add-reference svg {
        width: 17px !important;
        height: 17px !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-footer {
        position: static !important;
        flex: 0 0 auto !important;
        padding: 16px 0 0 !important;
        margin: 10px 0 0 !important;
        border-top: 1px solid #eee9f2 !important;
        background: transparent !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-app > .mwriting-footer {
        padding: 10px max(20px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)) !important;
        margin: 0 !important;
        background: var(--mw-bg) !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-primary,
    html body #creation-app[data-creation-page="writing"] .mwriting-secondary {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 9px !important;
        width: 100% !important;
        min-height: 45px !important;
        margin: 0 !important;
        padding: 10px 14px !important;
        border: 1px solid var(--mw-primary) !important;
        border-radius: 12px !important;
        background: var(--mw-primary) !important;
        color: var(--mw-primary-ink) !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 21px !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-primary svg,
    html body #creation-app[data-creation-page="writing"] .mwriting-secondary svg {
        width: 18px !important;
        height: 18px !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-primary[data-writing-action="generate"] svg {
        order: 1 !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-secondary {
        min-height: 44px !important;
        margin-top: 10px !important;
        border-color: var(--mw-line) !important;
        background: var(--mw-paper) !important;
        color: var(--mw-paper-ink) !important;
        font-size: 12px !important;
        font-weight: 400 !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-legal {
        margin: 7px 0 0 !important;
        font-size: 9px !important;
        line-height: 15px !important;
        text-align: center !important;
        color: var(--mw-muted) !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-result-head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        margin: 0 0 12px !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-result-head strong {
        font-size: 13px !important;
        line-height: 20px !important;
        font-weight: 500 !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-result-head .right {
        display: flex !important;
        align-items: center !important;
        gap: 3px !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-status-label {
        display: inline-flex !important;
        align-items: center !important;
        padding: 4px 6px !important;
        border-radius: 5px !important;
        background: var(--mw-status-bg) !important;
        color: var(--mw-status-ink) !important;
        font-size: 9px !important;
        line-height: 15px !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-paper {
        padding: 20px 17px !important;
        border: 1px solid var(--mw-card-line, #e5dfeb) !important;
        border-radius: 15px !important;
        background: var(--mw-paper) !important;
        color: var(--mw-paper-ink) !important;
        margin: 0 !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-paper h2 {
        margin: 0 0 18px !important;
        font-size: 22px !important;
        line-height: 28px !important;
        letter-spacing: -.4px !important;
        font-weight: 600 !important;
        color: var(--mw-paper-ink) !important;
        overflow-wrap: anywhere !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-draft-text {
        font-size: 13px !important;
        line-height: 23px !important;
        font-weight: 400 !important;
        white-space: pre-wrap !important;
        overflow-wrap: anywhere !important;
        color: var(--mw-copy) !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-draft-meta {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        margin: 12px 0 !important;
        font-size: 10px !important;
        line-height: 17px !important;
        color: var(--mw-muted) !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 2px !important;
        border-top: 1px solid var(--mw-card-line, #ede7f2) !important;
        padding: 5px 0 0 !important;
        margin: 14px 0 0 !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-actions button {
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        min-height: 42px !important;
        padding: 0 7px !important;
        color: var(--mw-toolbar) !important;
        font-size: 11px !important;
        line-height: 18px !important;
        font-weight: 400 !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-actions svg {
        width: 17px !important;
        height: 17px !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-refine-label {
        margin-top: 19px !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-refine-options {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 7px !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-refine-options button {
        width: auto !important;
        min-height: 38px !important;
        padding: 0 10px !important;
        margin: 0 !important;
        border: 1px solid var(--mw-card-line, #e6dfec) !important;
        border-radius: 8px !important;
        background: var(--mw-paper) !important;
        color: var(--mw-toolbar) !important;
        font-size: 11px !important;
        line-height: 18px !important;
        font-weight: 400 !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-bottom-compose {
        position: static !important;
        padding: 12px 0 0 !important;
        margin-top: 16px !important;
        border-top: 1px solid var(--mw-card-line, #eee8f2) !important;
        background: transparent !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-followup {
        border: 1px solid var(--mw-card-line, #e4ddeb) !important;
        border-radius: 15px !important;
        padding: 9px 10px !important;
        margin: 16px 0 0 !important;
        background: var(--mw-paper) !important;
        color: var(--mw-paper-ink) !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-followup textarea {
        min-height: 38px !important;
        height: 38px !important;
        line-height: 22px !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-followup textarea::placeholder {
        font-size: 13px !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-compose-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 7px !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-compose-row small {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        font-size: 9px !important;
        line-height: 16px !important;
        color: var(--mw-toolbar) !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-compose-row :is(.mwriting-icon-button, .mwriting-ib, .mwriting-send) {
        display: flex !important;
        flex: 0 0 34px !important;
        align-items: center !important;
        justify-content: center !important;
        flex-basis: 34px !important;
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        padding: 8px !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-compose-row .mwriting-send {
        background: var(--mw-primary) !important;
        color: var(--mw-primary-ink) !important;
        border-radius: 50% !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-compose-row .mwriting-send svg {
        width: 17px !important;
        height: 17px !important;
    }
    html body #creation-app[data-creation-page="writing"] :is(.mwriting-quote, .mwriting-quote-chip) {
        position: relative !important;
        border-left: 2px solid #a7baad !important;
        padding: 6px 29px 6px 8px !important;
        margin-bottom: 6px !important;
        max-height: 100px !important;
        overflow-y: auto !important;
        font-size: 10px !important;
        line-height: 16px !important;
        background: var(--mw-quote-bg) !important;
        color: var(--mw-quote-ink) !important;
        white-space: pre-wrap !important;
        overflow-wrap: anywhere !important;
    }
    html body #creation-app[data-creation-page="writing"] :is(.mwriting-quote, .mwriting-quote-chip) :is(.mwriting-icon-button, .mwriting-ib) {
        position: absolute !important;
        right: 0 !important;
        top: 0 !important;
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        padding: 7px !important;
    }
    html body #creation-app[data-creation-page="writing"] :is(.mwriting-quote, .mwriting-quote-chip) svg {
        width: 14px !important;
        height: 14px !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-editor {
        border: 1px solid var(--mw-card-line, #e5dfeb) !important;
        border-radius: 14px !important;
        background: var(--mw-paper) !important;
        color: var(--mw-paper-ink) !important;
        padding: 18px 15px !important;
        margin-top: 3px !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-editor .mwriting-editor-title {
        font-size: 21px !important;
        line-height: 29px !important;
        font-weight: 600 !important;
        height: 62px !important;
        min-height: 62px !important;
        margin-bottom: 14px !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-editor .mwriting-editor-text {
        min-height: 325px !important;
        height: 325px !important;
        resize: vertical !important;
        font-size: 16px !important;
        line-height: 27px !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-editor-bar {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        font-size: 10px !important;
        line-height: 17px !important;
        color: var(--mw-muted) !important;
        margin-bottom: 6px !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-editor-bar button {
        min-height: 42px !important;
        padding: 0 !important;
        font-size: 11px !important;
        line-height: 18px !important;
        font-weight: 400 !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-panel-backdrop {
        position: absolute !important;
        inset: 0 !important;
        background: var(--mw-overlay) !important;
        z-index: 6 !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-panel {
        position: absolute !important;
        inset: 58px 0 0 !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        background: var(--mw-paper) !important;
        color: var(--mw-paper-ink) !important;
        z-index: 6 !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-panel-head {
        display: flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        padding: 9px 16px !important;
        min-height: 62px !important;
        border-bottom: 1px solid var(--mw-card-line, #eee7f1) !important;
        background: var(--mw-soft-bg) !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-panel-head :is(h2, h3) {
        margin: 0 !important;
        font-size: 16px !important;
        line-height: 23px !important;
        font-weight: 600 !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-panel-body {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        padding: 21px 20px calc(21px + env(safe-area-inset-bottom)) !important;
        overflow-y: auto !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-panel-body p {
        margin: 0 0 16px !important;
        font-size: 12px !important;
        line-height: 21px !important;
        color: var(--mw-toolbar) !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-option {
        display: grid !important;
        grid-template-columns: 24px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 12px !important;
        min-width: 0 !important;
        width: 100% !important;
        min-height: 69px !important;
        text-align: left !important;
        padding: 14px 12px !important;
        margin-bottom: 10px !important;
        border: 1px solid var(--mw-card-line, #e7e0ec) !important;
        border-radius: 12px !important;
        background: var(--mw-paper) !important;
        color: var(--mw-paper-ink) !important;
        font-size: 13px !important;
        line-height: 20px !important;
        font-weight: 500 !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-option > svg:first-child {
        color: var(--mw-accent) !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-option strong {
        display: block !important;
        font-size: 13px !important;
        line-height: 19px !important;
        font-weight: 500 !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-option small {
        display: block !important;
        margin-top: 5px !important;
        color: var(--mw-muted) !important;
        font-size: 10px !important;
        line-height: 16px !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-option > svg:last-child {
        width: 17px !important;
        height: 17px !important;
        color: var(--mw-placeholder) !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-toast {
        position: absolute !important;
        left: 20px !important;
        right: 20px !important;
        bottom: calc(25px + env(safe-area-inset-bottom)) !important;
        padding: 12px !important;
        border-radius: 9px !important;
        background: #28232ff2 !important;
        color: #fff !important;
        box-shadow: 0 4px 18px #00000012 !important;
        font-size: 11px !important;
        line-height: 18px !important;
        z-index: 10 !important;
        pointer-events: none !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-blank-state {
        padding: 75px 14px !important;
        text-align: center !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-blank-state svg {
        width: 36px !important;
        height: 36px !important;
        margin: 0 auto 20px !important;
        color: var(--mw-placeholder) !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-blank-state h3 {
        margin: 0 0 12px !important;
        font-size: 19px !important;
        line-height: 27px !important;
        font-weight: 500 !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-blank-state p {
        margin: 0 !important;
        font-size: 12px !important;
        line-height: 22px !important;
        color: var(--mw-muted) !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-draft-row {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        min-width: 0 !important;
        border: 1px solid var(--mw-card-line, #e6dfec) !important;
        border-radius: 12px !important;
        background: var(--mw-paper) !important;
        color: var(--mw-paper-ink) !important;
        margin-bottom: 9px !important;
        padding: 9px 6px 9px 12px !important;
        width: 100% !important;
        text-align: left !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-draft-row > span {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-draft-row > svg:first-child {
        width: 22px !important;
        height: 22px !important;
        color: var(--mw-accent) !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-draft-row > button {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        min-height: 48px !important;
        padding: 0 !important;
        text-align: left !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-draft-row strong {
        display: block !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 13px !important;
        line-height: 19px !important;
        font-weight: 500 !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-draft-row small {
        display: block !important;
        margin-top: 7px !important;
        font-size: 10px !important;
        line-height: 16px !important;
        color: var(--mw-muted) !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-draft-row > svg:last-child {
        width: 17px !important;
        height: 17px !important;
        color: var(--mw-placeholder) !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-processing {
        margin: 85px 0 !important;
        text-align: center !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-processing :is(h1, h2) {
        margin: 0 0 12px !important;
        font-size: 21px !important;
        line-height: 29px !important;
        font-weight: 500 !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-processing p {
        font-size: 12px !important;
        line-height: 20px !important;
        color: var(--mw-muted) !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-spinner {
        width: 32px !important;
        height: 32px !important;
        margin: 0 auto 26px !important;
        border: 1.5px solid var(--mw-card-line, #e4d9ef) !important;
        border-top-color: var(--mw-accent) !important;
        border-radius: 50% !important;
        animation: mwriting-spin 1s linear infinite !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-error {
        margin: 6px 0 !important;
        font-size: 11px !important;
        line-height: 18px !important;
        color: var(--mw-error) !important;
        overflow-wrap: anywhere !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-empty-result {
        font-size: 13px !important;
        color: var(--mw-placeholder) !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-notice:not(:empty) {
        position: sticky !important;
        top: 0 !important;
        z-index: 5 !important;
        margin: 0 0 12px !important;
        padding: 10px 12px !important;
        border: 1px solid var(--mw-card-line, #e2dae8) !important;
        border-radius: 10px !important;
        color: var(--mw-paper-ink) !important;
        background: var(--mw-soft-bg) !important;
        font-size: 12px !important;
        line-height: 20px !important;
        overflow-wrap: anywhere !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-notice a {
        color: var(--mw-accent) !important;
        text-decoration: underline !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-revision {
        margin: 14px 0 !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-revision h3 {
        margin: 0 0 12px !important;
        font-size: 12px !important;
        line-height: 20px !important;
        font-weight: 500 !important;
        color: var(--mw-accent) !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-revision h4 {
        margin: 0 0 14px !important;
        font-size: 19px !important;
        line-height: 26px !important;
        font-weight: 600 !important;
        overflow-wrap: anywhere !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-draft-meta + :is(.mwriting-revision, .mwriting-text-button) + .mwriting-section-label,
    html body #creation-app[data-creation-page="writing"] .mwriting-draft-meta + .mwriting-section-label {
        margin-top: 19px !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-app [hidden] {
        display: none !important;
    }

    /* visualViewport reduces the app's height while the keyboard is open.
     * Current inputs stay scrollable; no fixed action overlaps the keyboard. */
    html body #creation-app[data-creation-page="writing"] .mwriting-app[data-keyboard-open="true"] .mwriting-topbar {
        height: 50px !important;
        min-height: 50px !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-app[data-keyboard-open="true"] :is(.mwriting-back, .mwriting-language) {
        visibility: hidden !important;
        pointer-events: none !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-app[data-keyboard-open="true"] .mwriting-page {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        padding-top: 10px !important;
        padding-bottom: 12px !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-app[data-keyboard-open="true"][data-view="home"] .mwriting-page > :not(.mwriting-idea),
    html body #creation-app[data-creation-page="writing"] .mwriting-app[data-keyboard-open="true"][data-view="compose"] .mwriting-page > :not(.mwriting-brief),
    html body #creation-app[data-creation-page="writing"] .mwriting-app[data-keyboard-open="true"][data-view="result"] .mwriting-page > :not(.mwriting-bottom-compose):not(.mwriting-followup),
    html body #creation-app[data-creation-page="writing"] .mwriting-app[data-keyboard-open="true"][data-view="edit"] .mwriting-page > :not(.mwriting-editor),
    html body #creation-app[data-creation-page="writing"] .mwriting-app[data-keyboard-open="true"] > .mwriting-footer {
        display: none !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-app[data-keyboard-open="true"] :is(.mwriting-idea, .mwriting-brief, .mwriting-bottom-compose) {
        margin: 0 !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-app[data-keyboard-open="true"] .mwriting-brief textarea {
        height: 85px !important;
        min-height: 85px !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-app[data-keyboard-open="true"] .mwriting-editor {
        min-height: 0 !important;
        max-height: 100% !important;
        overflow-y: auto !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-app[data-keyboard-open="true"] .mwriting-editor-text {
        min-height: 180px !important;
        height: 180px !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-app[data-keyboard-open="true"] .mwriting-editor:has(.mwriting-editor-title:focus) .mwriting-editor-text,
    html body #creation-app[data-creation-page="writing"] .mwriting-app[data-keyboard-open="true"] .mwriting-editor:has(.mwriting-editor-text:focus) .mwriting-editor-title {
        display: none !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-app[data-keyboard-open="true"][data-view="compose"][data-keyboard-field="audience"] .mwriting-page > :not(.mwriting-form-grid) {
        display: none !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-app[data-keyboard-open="true"][data-view="compose"][data-keyboard-field="audience"] .mwriting-page > .mwriting-form-grid {
        display: block !important;
        margin: 0 !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-app[data-keyboard-open="true"][data-keyboard-field="audience"] .mwriting-form-grid > :not(:has([data-writing-setting="audience"])) {
        display: none !important;
    }
    @keyframes mwriting-spin { to { transform: rotate(360deg); } }
}
@media (max-width: 920px) and (prefers-reduced-motion: reduce) {
    html body #creation-app[data-creation-page="writing"] .mwriting-app *,
    html body #creation-app[data-creation-page="writing"] .mwriting-app *::before,
    html body #creation-app[data-creation-page="writing"] .mwriting-app *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}
@media (max-width: 350px) {
    html body #creation-app[data-creation-page="writing"] .mwriting-actions {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 3px !important;
    }
    html body #creation-app[data-creation-page="writing"] .mwriting-actions button {
        justify-content: center !important;
        min-width: 0 !important;
        padding: 0 !important;
        gap: 4px !important;
    }
}
}