/* FlowRender: charcoal work surfaces, rose actions, sky-blue secondary accents.
   This is interface styling only; render backgrounds and export colors are user-owned. */
:root {
    --flow-bg: #14171a;
    --flow-panel: #1d2125;
    --flow-raised: #272d33;
    --flow-line: #394149;
    --flow-text: #eef1f4;
    --flow-muted: #a6afb7;
    --flow-blue: #b5d0ff;
    --flow-pink: #fa7096;
    --flow-pink-soft: #fa70961c;
    --flow-pink-ink: #30121d;
    --bg-primary: var(--flow-bg); --bg-secondary: var(--flow-panel);
    --bg-card: var(--flow-panel); --bg-card-hover: var(--flow-raised); --bg-input: #171b1f;
    --text-primary: var(--flow-text); --text-secondary: var(--flow-muted); --text-muted: #929ca6;
    --accent: var(--flow-pink); --accent-hover: #ff94b0; --accent-glow: transparent;
    --border: var(--flow-line); --border-light: #57616a;
    --violet: var(--flow-blue); --void: var(--flow-bg);
}
body.public-site, body.mcflow-float {
    --site-purple: var(--flow-pink); --site-muted: var(--flow-muted); --site-line: var(--flow-line);
    --studio-border: #ffffff14;
    --active-grad: var(--flow-pink-soft); --active-border: #fa709680; --active-text: var(--flow-pink);
    background: var(--flow-bg); color: var(--flow-text);
}
body :is(button, summary, a, input, select):focus-visible { outline: 2px solid var(--flow-blue); outline-offset: 3px; }
/* Clear action hierarchy, no glowing gradient buttons. */
body.mcflow-float:is(.phone-studio, :not(.phone-studio)) :is(.btn-primary, #searchBtn, #downloadBtn, #topDownloadBtn.action-cta, .phone-add, .phone-save, #phonePuppetDone) {
    background: var(--flow-pink) !important; color: var(--flow-pink-ink) !important; border-color: transparent !important; box-shadow: none !important;
}
body.mcflow-float :is(.input-field, .pretty-select-trigger, .pretty-select-menu) { background: #171b1f; border-color: var(--flow-line); color: var(--flow-text); box-shadow: none; }
body.mcflow-float :is(.effect-toggle-card, .puppet-toggle-card, .armor-enchant-card, .item-enchant-card) {
    background: var(--flow-panel) !important; border-color: var(--flow-line) !important; color: var(--flow-text); box-shadow: none !important;
}
body.mcflow-float :is(.effect-toggle-card, .armor-enchant-card, .item-enchant-card):hover { background: var(--flow-raised) !important; transform: none !important; }
body.mcflow-float input:checked + :is(.toggle-fake, .puppet-switch) { background: var(--flow-pink) !important; box-shadow: none !important; }
body.mcflow-float :is(.effect-toggle-card, .armor-enchant-card, .item-enchant-card) input:checked + .toggle-fake::after { background: #172333 !important; }
body.mcflow-float :is(.bevel-controls, .enchant-controls, .puppet-status) { background: var(--flow-panel); border-color: var(--flow-line); box-shadow: none; }
body.mcflow-float :is(.phone-header, .phone-launcher) { background: var(--flow-bg); }
body.mcflow-float .float-canvas { background: var(--flow-bg); }
body.mcflow-float .phone-add { border-radius: 12px; }
body.mcflow-float .phone-sheet-head { border-top: 0; }
body.mcflow-float .phone-sheet-head small { color: var(--flow-pink); }
body.mcflow-float .desktop-live-dot { background: var(--flow-pink); }
/* Project is a short list: files, help, then language. */
.compact-actions .project-chevron, #fr-lang .language-chevron { width: 16px; height: 16px; min-width: 16px; min-height: 16px; }
.compact-actions[open] .project-chevron, #fr-lang-btn[aria-expanded="true"] .language-chevron { transform: rotate(180deg); }
body.mcflow-float .compact-actions-body #topTutorialBtn { margin-top: 6px; border-top: 1px solid var(--flow-line); border-radius: 0; padding-top: 14px; }
body.mcflow-float #fr-lang-btn { border-radius: 8px !important; }
body.mcflow-float #fr-lang-menu { background: #171b1f !important; border-radius: 8px !important; }
body #fr-lang .fr-lang-opt { font-weight: 400; }
body #fr-lang-menu .fr-lang-opt.on { background: #b5d0ff1c; }
body #fr-lang-menu .fr-lang-opt.on::after { color: var(--flow-blue) !important; }
body #fr-lang-btn { background: var(--flow-panel); border-color: var(--flow-line); color: var(--flow-text); }
body #fr-lang-menu { background: var(--flow-panel); border-color: var(--flow-line); }
body #fr-lang-menu .fr-lang-opt:hover { background: var(--flow-raised); }
body #fr-lang .phone-language-label { min-width: 0; gap: 8px; }
body #fr-lang .phone-language-label > [data-phone-text] { display: none; }
body #fr-lang .phone-language-label strong { margin: 0 auto 0 0; color: var(--flow-text); font-size: 13px; }
body.mcflow-float #focusPreviewBtn { display: inline-flex; align-items: center; justify-content: center; color: var(--flow-text); border: 1px solid var(--flow-line); border-radius: 8px; background: var(--flow-panel); }
body.mcflow-float #focusPreviewBtn:hover { background: var(--flow-raised); border-color: var(--flow-blue); }
body.phone-studio #focusPreviewBtn { width: 44px; height: 44px; flex: 0 0 44px; padding: 0; }
body.phone-studio .phone-header { gap: 8px; left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); }
body.phone-studio .phone-header > div { gap: 4px; }
body.phone-studio.focus-preview-mode .float-canvas { inset: env(safe-area-inset-top) 0 env(safe-area-inset-bottom) !important; }
@media (max-width: 360px) {
    .phone-brand { font-size: 13px; gap: 5px; }
    .phone-brand img { width: 24px; height: 24px; }
    .phone-save { width: 44px; padding: 0; }
    .phone-save > .flow-icon { display: inline-block; }
    .phone-save [data-phone-text] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* Public pages: real Minecraft imagery on flat surfaces. */
.public-site :is(.bg-orb, .bg-wash, .bg-lines) { display: none; }
.public-site :is(.nav, .navbar, .site-mobile-header, .legal-topbar) { background: var(--flow-panel); border-color: var(--flow-line); backdrop-filter: none; -webkit-backdrop-filter: none; }
.public-site :is(.about-card, .gallery-coming-soon, .legal-card, .card, .site-menu nav) { background: var(--flow-panel); border-color: var(--flow-line); box-shadow: none; }
.public-site :is(.about-page, .gallery-page) > h1 { background: none; -webkit-text-fill-color: currentColor; color: var(--flow-text); }
.public-site :is(.site-primary, .btn-primary, .btn-start, .card .primary, .gallery-coming-soon .btn) { background: var(--flow-pink); color: var(--flow-pink-ink); border: 0; border-radius: 10px; box-shadow: none; }
.public-site .site-accent { color: var(--flow-pink); }
.public-site .mobile-recipe { background: var(--flow-panel); border-radius: 12px;  }
.public-site .mobile-recipe li b { color: var(--flow-pink); }
.public-site .site-tag { background: var(--flow-raised); color: var(--flow-blue); }
.public-site .hero-panel { background: var(--flow-panel); border: 0; border-radius: 0; }
.public-site .hero-panel::after { display: none; }
.public-site .hero-kicker { border: 0; background: none; padding: 0; color: var(--flow-pink); backdrop-filter: none; }
.public-site #headline2 { color: var(--flow-pink); }
.public-site .hero-badge-dot { background: var(--flow-pink); box-shadow: none; }
.public-site .btn-donate { border-radius: 10px; }
.public-site :is(.mini-cube, .mini-demo) { background: var(--flow-raised); }
.public-site :is(.mini-glow, .section-glow) { display: none; }
@media (prefers-reduced-motion: reduce) {
    .public-site *, .public-site *::before, .public-site *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body.mcflow-float .compact-actions-body :is(#topTutorialBtn, #topUpdatesBtn) { background: transparent; font-weight: 400; color: var(--flow-text); }
body.mcflow-float .compact-actions-body > button:hover { background: var(--flow-raised); }
body.mcflow-float .phone-tools .flow-icon { color: var(--flow-blue); }
body.mcflow-float .puppet-title-icon .flow-icon, .public-site .gallery-mobile-art .flow-icon { color: var(--flow-blue); }
.public-site .splash[hidden] { display: none; }
.public-site .nav-cta { background: var(--flow-pink); color: var(--flow-pink-ink); border-radius: 10px; }
@media (min-width: 1101px) {
    .public-site .about-card { border: 0; border-top: 1px solid var(--flow-line); border-radius: 0; padding: 24px 0; background: transparent; }
}

.public-site .site-logo-image { width: 28px; height: 28px; object-fit: contain; }

/* Rose is the main editing accent, visible even before a tool panel opens. */
body.mcflow-float .tab-btn.active,
body.mcflow-float :is(.pose-btn, .bg-btn, .shading-btn, .avatar-btn, .armor-set-btn, .hand-tab).active,
body.mcflow-float :is(.pose-switch, .equipment-switch) button.active,
body.mcflow-float :is(.phone-style-tabs, .desktop-scene-switch) [aria-pressed="true"],
body.mcflow-float #armorSets > [aria-pressed="true"] {
    background: var(--flow-pink-soft) !important;
    border-color: #fa709680 !important;
    color: #ffadc5 !important;
    box-shadow: none !important;
}
.public-site .nav-cta { color: var(--flow-pink-ink) !important; }

/* Splash: rounded cube faces, paint-like curves and crisp sticker edges.
   Decorations stay in the interface; the WebGL canvas and exports are untouched. */
:root {
    --flow-violet: #6827d9;
    --flow-paper: #fff6fb;
    --flow-ink: #16121e;
    --flow-spring: cubic-bezier(.2,.8,.2,1);
    --flow-sticker: 24px 13px 28px 15px;
}
body.mcflow-float, body.public-site { --radius: 18px; --radius-lg: 28px; }
body.mcflow-float :is(button, summary), .public-site :is(button, summary, .site-primary, .btn-start, .nav-cta, .site-row-link) {
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, translate 220ms var(--flow-spring), scale 220ms var(--flow-spring), box-shadow 220ms var(--flow-spring);
}
body.mcflow-float:is(.phone-studio, :not(.phone-studio)) :is(#topDownloadBtn.action-cta, #searchBtn, #downloadBtn, .phone-add, .phone-save, #phonePuppetDone),
.public-site :is(.site-primary, .btn-start, .nav-cta, .card .primary, .gallery-coming-soon .btn) {
    border: 2px solid var(--flow-paper) !important;
    border-radius: var(--flow-sticker);
    box-shadow: 3px 4px 0 #0d0c13 !important;
    font-weight: 700;
}
@media (hover: hover) and (pointer: fine) {
    body.mcflow-float :is(button, summary):not(:disabled):hover,
    .public-site :is(.site-primary, .btn-start, .nav-cta):hover { translate: 0 -2px; }
    body.mcflow-float :is(.tab-btn, .phone-tools button):not(:disabled):hover .flow-icon { rotate: -7deg; }
}
body.mcflow-float :is(button, summary):not(:disabled):active,
.public-site :is(.site-primary, .btn-start, .nav-cta):active { scale: .97; translate: 0 1px; }
body.mcflow-float .flow-icon { transition: rotate 240ms var(--flow-spring); }
body.mcflow-float :is(.pose-switch, .equipment-switch, .desktop-scene-switch) { border-radius: 20px 12px 22px 14px; }
body.mcflow-float :is(.pose-switch, .equipment-switch, .desktop-scene-switch) button { border-radius: 15px 9px 16px 10px; }
body.mcflow-float .tab-btn.active {
    background: var(--flow-pink) !important; color: var(--flow-pink-ink) !important;
    border: 2px solid var(--flow-paper) !important; border-radius: 24px 14px 26px 14px;
    box-shadow: 3px 3px 0 #0d0c13 !important;
}
body.mcflow-float :is(.compact-actions-body, .float-view-body, .pretty-select-menu) { border-radius: 22px 14px 24px 16px; }
body.mcflow-float .outfit-options > details { border-radius: 20px 12px 22px 14px; }
body.mcflow-float .outfit-options > details[open] { border-color: #fa709680; }
body.mcflow-float :is(.pose-btn, .bg-btn, .shading-btn, .armor-set-btn, .avatar-btn) { border-radius: 18px 11px 20px 12px; }
body.mcflow-float .phone-puppet-bar { border-radius: 24px 14px 28px 16px; }
@media (min-width: 901px) {
    body.mcflow-float:not(.phone-studio) .float-top { border-bottom: 1px solid var(--flow-line); }
    body.mcflow-float:not(.phone-studio) .float-brand img { rotate: -7deg; }
    body.mcflow-float:not(.phone-studio) .float-panel { border-radius: 0 30px 32px 0; border-right: 2px solid #b5d0ff30; }
    body.mcflow-float:not(.phone-studio) .panel-head h2 {
        display: inline-block; padding: 6px 16px 8px; margin: 0 0 13px;
        background: var(--flow-blue); color: var(--flow-ink); font-weight: 750;
        border-radius: 22px 12px 26px 13px; rotate: -2deg;
    }
    body.mcflow-float:not(.phone-studio) .upload-area {
        border: 2px solid var(--flow-paper); border-radius: 32px 16px 38px 18px;
        background: #b5d0ff; color: var(--flow-ink); box-shadow: 4px 5px 0 #0d0c13;
    }
    body.mcflow-float:not(.phone-studio) .upload-area:hover { background: #c8dcff; border-color: var(--flow-paper); }
    body.mcflow-float:not(.phone-studio) .upload-area :is(.upload-icon, .ui-icon, p, span) { color: #24223e; }
    body.mcflow-float:not(.phone-studio) .upload-icon { rotate: -8deg; }
    body.mcflow-float:not(.phone-studio) .float-canvas { border: 2px solid #b5d0ff38; --preview-corners:40px 20px 44px 22px; border-radius:var(--preview-corners); overflow:hidden; isolation:isolate; clip-path:inset(0 round var(--preview-corners)); }
    body.mcflow-float:not(.phone-studio) .desktop-next { border-radius: var(--flow-sticker); border-color: #b5d0ff66; }
    body.mcflow-float:not(.phone-studio) .compact-actions > summary { border-radius: 18px 10px 20px 12px; }
    body.mcflow-float:not(.phone-studio) .desktop-preview-label { top: 14px; left: 22px; }
}
/* The phone gets a curved tool shelf and three big, distinct paint tabs. */
body.mcflow-float.phone-studio .phone-header { background: transparent; }
body.mcflow-float.phone-studio .phone-brand img { rotate: -7deg; }
body.mcflow-float.phone-studio .phone-launcher {
    background: #211b2c; border-radius: 36px 22px 0 0; border-top: 2px solid #b5d0ff55;
    padding-top: 16px;
}
body.mcflow-float.phone-studio .phone-launcher h1 { font-weight: 750; letter-spacing: -.7px; }
body.mcflow-float.phone-studio .phone-eyebrow { color: #d3bcdd; }
body.mcflow-float.phone-studio .phone-add { border-radius: 25px 14px 28px 15px; }
body.mcflow-float.phone-studio .phone-tools { gap: 10px; }
body.mcflow-float.phone-studio .phone-tools button {
    border: 2px solid #fff6fb88; border-radius: 22px 12px 24px 14px;
    background: var(--flow-blue); color: var(--flow-ink); font-weight: 650; gap: 5px;
}
body.mcflow-float.phone-studio .phone-tools button:nth-child(2) { background: var(--flow-violet); color: white; border-radius: 14px 24px 13px 25px; }
body.mcflow-float.phone-studio .phone-tools button:nth-child(3) { background: #ffa8d5; }
body.mcflow-float.phone-studio .phone-tools .flow-icon { color: inherit; }
body.mcflow-float.phone-studio .float-panel { border-radius: 34px 22px 0 0; border: 2px solid #b5d0ff55; border-bottom: 0; }
body.mcflow-float.phone-studio .phone-sheet-head { border-top: 0; }
body.mcflow-float.phone-studio .phone-sheet-head h2 { font-weight: 750; }
body.mcflow-float.phone-studio .phone-sheet-head small { color: #ffa8d5; letter-spacing: 1.4px; }
body.mcflow-float.phone-studio .phone-sheet-head button { border: 2px solid var(--flow-paper); border-radius: var(--flow-sticker); color: var(--flow-ink); background: var(--flow-blue); }
body.mcflow-float.phone-studio .phone-style-tabs button { border-radius: 18px 10px 20px 11px; }
body.mcflow-float.phone-studio .phone-style-tabs [aria-pressed="true"] { background: var(--flow-pink) !important; color: var(--flow-pink-ink) !important; border-color: var(--flow-paper) !important; }
/* Large, original rounded forms echo the three faces of the owner's logo. */
.flow-splash-art { position: absolute; inset: 2% -4% 2% -2%; pointer-events: none; user-select: none; }
.flow-splash-art > span { position: absolute; display: block; border: 7px solid var(--flow-paper); box-shadow: 9px 12px 0 #09070e55; }
.flow-splash-art > span:nth-child(1) { inset: 4% 0 28% 5%; background: var(--flow-blue); border-radius: 43% 28% 39% 24% / 30% 39% 26% 46%; rotate: -12deg; }
.flow-splash-art > span:nth-child(2) { width: 70%; height: 43%; right: -8%; bottom: 3%; background: var(--flow-violet); border-radius: 34% 44% 27% 42%; rotate: 16deg; }
.flow-splash-art > span:nth-child(3) { width: 36%; height: 27%; left: -12%; bottom: 13%; background: var(--flow-pink); border-radius: 45% 26% 45% 24%; rotate: -18deg; }
.public-site .hero-panel { background: #191620; border-radius: 30px 18px 44px 22px; }
.public-site .hero-text { position: relative; z-index: 2; }
.public-site .hero-headline { font-weight: 750; letter-spacing: -.05em; }
.public-site #headline2 { color: var(--flow-pink); rotate: -2deg; transform-origin: left center; }
.public-site .hero-kicker { letter-spacing: .09em; color: var(--flow-blue); }
.public-site .hero-3d { isolation: isolate; }
.public-site #heroCanvas { z-index: 1; }
.public-site .nav { border: 2px solid #b5d0ff55; border-radius: 26px 16px 28px 18px; }
.public-site :is(.site-mobile-header, .navbar, .legal-topbar) { border-bottom: 1px solid var(--flow-line); }
.public-site :is(.mobile-welcome, .mobile-recipe, .gallery-coming-soon) { position: relative; isolation: isolate; }
.public-site .mobile-welcome h1 { font-weight: 750; letter-spacing: -.04em; }
.public-site .mobile-welcome h1 .site-accent {
    display: table; max-width: 100%; padding: 4px 12px 7px; margin-left: -4px;
    border-radius: 25px 13px 28px 16px; background: var(--flow-pink); color: var(--flow-ink);
    border: 2px solid var(--flow-paper); rotate: -2deg; font-size: .92em;
}
.public-site .mobile-recipe { background: #6827d9; border: 2px solid var(--flow-paper); border-radius: 34px 18px 38px 20px; box-shadow: 5px 6px 0 #0d0c13; }
.public-site .mobile-recipe :is(h2, p, li, li b) { color: white; }
.public-site .mobile-recipe ol { border-color: #ffffff55; }
.public-site .mobile-recipe > img { opacity: 1; rotate: -5deg; }
.public-site .site-tag { border-radius: 12px 7px 13px 8px; color: var(--flow-ink); background: var(--flow-blue); }
.public-site .gallery-coming-soon { border: 2px solid #b5d0ff66; border-radius: 38px 18px 42px 22px; }
.public-site .gallery-mobile-art { padding: 16px; width: 140px; background: var(--flow-violet); border-radius: 35% 25% 38% 28%; rotate: -6deg; }
.public-site .gallery-mobile-art .flow-icon { color: white; }
.public-site :is(.about-page, .gallery-page, .legal-page) > h1 { font-weight: 750; }
.public-site .section-kicker { color: var(--flow-pink); }
.public-site .site-disclosure > summary::after { transition: rotate 240ms var(--flow-spring); }
.public-site .site-disclosure[open] > summary::after { rotate: 180deg; }
/* Only small transform/opacity animations. No animated blur, layout or canvas size. */
@keyframes flow-splash-drift { from { translate: 0 0; } to { translate: 0 -9px; } }
@keyframes flow-tool-enter { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@keyframes flow-sheet-enter { from { opacity: .5; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: no-preference) {
    .flow-splash-art > span { animation: flow-splash-drift 5s ease-in-out infinite alternate; }
    .flow-splash-art > span:nth-child(2) { animation-delay: -2s; animation-duration: 6s; }
    .flow-splash-art > span:nth-child(3) { animation-delay: -4s; animation-duration: 7s; }
    body.mcflow-float .tool-panel.active { animation: flow-tool-enter 240ms var(--flow-spring) both !important; }
    body.mcflow-float.phone-studio.phone-sheet-open .float-panel { animation: flow-sheet-enter 300ms var(--flow-spring) both !important; }
    .compact-actions[open] .compact-actions-body, #fr-lang-menu:not([hidden]), .public-site .site-menu[open] nav { animation: flow-tool-enter 200ms var(--flow-spring); }
}
html[data-ui-paused] .flow-splash-art > span, .flow-splash-art[data-offscreen] > span { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
    body.mcflow-float *, body.mcflow-float *::before, body.mcflow-float *::after,
    body.public-site *, body.public-site *::before, body.public-site *::after {
        animation: none !important; transition: none !important; scroll-behavior: auto !important;
    }
}

/* Shared splash dialogs: same charcoal, rose/sky accents and soft movement as the studio. */
body.mcflow-float :is(.flow-modal-card,.editor-tutorial-card),.public-site .overlay-content{
 background:var(--flow-panel);color:var(--flow-text);border:1px solid var(--flow-line);border-radius:30px 20px 32px 22px;box-shadow:0 20px 65px #0005;backdrop-filter:none;
}
body.mcflow-float .flow-modal-card{max-height:calc(100dvh - 48px);padding:28px;overflow:auto}
body.mcflow-float :is(.flow-modal-card,.editor-tutorial-card) h2,.public-site .overlay-head h2{color:var(--flow-text);font-size:25px;line-height:1.2;letter-spacing:-.6px;background:none;-webkit-text-fill-color:var(--flow-text);padding-right:30px}
body.mcflow-float :is(.flow-modal-card,.editor-tutorial-card) p,.public-site .overlay-sub{color:var(--flow-muted);line-height:1.65}
body.mcflow-float :is(.flow-modal-kicker,.editor-tutorial-kicker),.public-site .overlay-kicker{color:var(--flow-pink);background:transparent;border:0;box-shadow:none;font-size:11px;letter-spacing:.06em}
body.mcflow-float :is(.flow-modal-close,.editor-tutorial-btn),.public-site .overlay-close{border:1px solid var(--flow-line);background:var(--flow-raised);color:var(--flow-text);border-radius:14px 11px 16px 11px;box-shadow:none;min-width:40px;min-height:40px}
body.mcflow-float .editor-tutorial-btn.main,body.mcflow-float .flow-share-btn{background:var(--flow-pink);color:var(--flow-pink-ink);border:1px solid var(--flow-pink);border-radius:16px 12px 19px 12px;box-shadow:none}
body.mcflow-float .editor-tutorial-dot.active{background:var(--flow-pink);box-shadow:none}
body.mcflow-float .editor-tutorial-spot{border-color:var(--flow-blue);border-radius:22px}
body.mcflow-float .flow-modal-secondary{background:var(--flow-raised);color:var(--flow-text);border:1px solid var(--flow-line);border-radius:14px;box-shadow:none}
body.mcflow-float .flow-support-icon{background:var(--flow-pink-soft);color:var(--flow-pink);border-color:var(--flow-pink);box-shadow:none}
body.mcflow-float .flow-updates-card{width:min(900px,100%)!important;padding-right:28px!important}
body.mcflow-float .flow-updates-layout{grid-template-columns:130px minmax(0,1fr);gap:22px;min-height:0}
body.mcflow-float .flow-updates-nav{order:0;position:static;margin-top:0!important;background:transparent;border:0;padding:0;min-width:0}
body.mcflow-float .flow-updates-nav button{background:var(--flow-raised);color:var(--flow-muted);border:1px solid transparent;border-radius:16px 12px 18px 12px;min-height:60px;padding:12px;box-shadow:none}
body.mcflow-float .flow-updates-nav button.active{background:var(--flow-blue);color:#192536;border-color:var(--flow-blue)}
body.mcflow-float .flow-updates-nav :is(span,small){color:inherit}
body.mcflow-float .flow-update-list{order:1;min-width:0;max-height:55dvh;overflow:auto;overscroll-behavior:contain;padding-right:12px;scrollbar-width:thin;scrollbar-color:var(--flow-line) transparent}
body.mcflow-float .flow-update-item{background:transparent;border:0;border-bottom:1px solid var(--flow-line);border-radius:0;padding:17px 0;margin:0;box-shadow:none}
body.mcflow-float .flow-update-item h3{color:var(--flow-text);font-size:15px;line-height:1.4}
body.mcflow-float .flow-update-item p{font-size:13px;margin:8px 0 0}
body.mcflow-float .flow-update-date{color:var(--flow-pink);background:var(--flow-panel);border-color:var(--flow-line);margin-bottom:4px}
body.mcflow-float .flow-update-tag{background:var(--flow-pink-soft);color:var(--flow-pink);border:0;box-shadow:none}
body.mcflow-float .outline-style-options{display:flex;flex-wrap:wrap;gap:6px}body.mcflow-float .outline-style-options button{flex:1 1 75px;min-height:42px;border-radius:12px;background:var(--flow-raised);color:var(--flow-muted);border:1px solid var(--flow-line);box-shadow:none;white-space:normal;font-size:11px}
body.mcflow-float .outline-style-options button.active{color:var(--flow-pink);background:var(--flow-pink-soft);border-color:var(--flow-pink)}
.public-site.home-overlay-open{overflow:hidden}
.public-site .overlay-content{position:relative;max-height:calc(100dvh - 48px);padding:30px;overscroll-behavior:contain}
.public-site .overlay-close{position:absolute;top:16px;right:16px;display:grid;place-items:center}
.public-site .home-about-card{padding:17px 0;margin:0;border:0;border-top:1px solid var(--flow-line);border-radius:0;background:transparent;min-width:0}
.public-site .home-about-card strong{color:var(--flow-blue);font-weight:600}
.public-site .home-about-card p{color:var(--flow-muted);font-size:14px;line-height:1.65}
.public-site .about-panel{display:grid;grid-template-columns:1fr 1fr;gap:14px 28px}
@keyframes flow-dialog-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:no-preference){body.mcflow-float .flow-modal:not(.hidden) .flow-modal-card,body.mcflow-float .editor-tutorial-overlay.visible .editor-tutorial-card,.public-site .overlay-section:not(.hidden) .overlay-content{animation:flow-dialog-in .32s cubic-bezier(.2,.8,.2,1)}body.mcflow-float :is(.flow-modal-card,.editor-tutorial-card) button{transition:background .18s,transform .2s}body.mcflow-float :is(.flow-modal-card,.editor-tutorial-card) button:active{transform:scale(.96)}}
@media(max-width:700px){body.mcflow-float .flow-modal-card{padding:23px 18px;max-height:calc(100dvh - 30px)}body.mcflow-float .flow-updates-layout{grid-template-columns:1fr;gap:12px}body.mcflow-float .flow-updates-nav{display:flex;overflow-x:auto;gap:6px}body.mcflow-float .flow-updates-nav button{flex:0 0 auto;min-width:95px;min-height:48px;padding:9px}body.mcflow-float .flow-updates-nav small{display:block;font-size:11px}body.mcflow-float .flow-update-list{max-height:54dvh}.public-site .about-panel{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){body.mcflow-float :is(.flow-modal-card,.editor-tutorial-card),.public-site .overlay-content{animation:none!important;transition:none!important}}
body.mcflow-float .outline-style-options{display:flex!important;background:transparent!important;box-shadow:none!important;padding:0}
body.mcflow-float .outline-style-options button{background:var(--flow-raised)!important;color:var(--flow-muted)!important;box-shadow:none!important;border:1px solid var(--flow-line)!important}
body.mcflow-float .outline-style-options button.active{background:var(--flow-pink-soft)!important;color:var(--flow-pink)!important;border-color:var(--flow-pink)!important}
body.mcflow-float .flow-support-btn{background:var(--flow-pink)!important;color:var(--flow-pink-ink)!important;border:0;border-radius:18px 13px 21px 14px;box-shadow:none!important}

@media(max-width:700px){body.mcflow-float .flow-updates-card{padding-right:18px!important}body.mcflow-float .flow-updates-nav button{width:auto}body.mcflow-float .flow-updates-nav{grid-template-columns:none}}
body.mcflow-float .flow-support-card{width:min(470px,100%)!important;background:var(--flow-panel)!important;overflow:auto}
body.mcflow-float .flow-support-card::after{content:none}
body.mcflow-float .flow-support-card h2{font-size:28px!important;line-height:1.2;overflow-wrap:anywhere;max-width:100%}
body.mcflow-float .flow-support-card p{color:var(--flow-muted)!important}
body.mcflow-float .flow-support-logo{display:grid!important;place-items:center;width:66px!important;height:66px!important;margin:0 0 18px!important;background:var(--flow-pink-soft)!important;border:1px solid #fa709644!important;border-radius:23px 16px 25px 16px!important}
body.mcflow-float .flow-support-logo img{width:40px!important;height:40px!important;filter:none!important}
body.phone-studio .phone-extra #topUpdatesBtn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;border-radius:14px;background:var(--flow-raised);color:var(--flow-text);border:1px solid var(--flow-line)}

/* Shared legal pages: readable content, the same curved surfaces and controls. */
.public-site.legal-body { font-family:Onest,system-ui,sans-serif; }
.public-site .legal-topbar { width:min(960px,calc(100% - 48px)); padding:14px 20px; border-radius:24px 16px 28px 18px; }
.public-site .legal-topbar a { font-weight:600; }
.public-site .legal-topbar a[href="render.html"] { display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border-radius:18px 12px 20px 14px; background:var(--flow-pink); color:var(--flow-pink-ink); }
.public-site .legal-page { width:min(780px,calc(100% - 48px)); max-width:780px; margin:48px auto 56px; padding:0; }
.public-site .legal-page h1 { display:table; max-width:100%; padding:18px 24px; margin:0 0 20px; border-radius:28px 18px 34px 20px; background:var(--flow-blue); color:#192536; font-family:inherit; font-size:clamp(30px,5vw,48px); font-weight:700; line-height:1.12; letter-spacing:-.04em; }
.public-site .legal-updated { color:var(--flow-muted); font-size:13px; margin-bottom:24px; }
.public-site .legal-page-nav { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.public-site .legal-page-nav a { display:inline-flex; align-items:center; min-height:44px; padding:10px 16px; border:1px solid var(--flow-line); border-radius:16px 12px 19px 12px; color:var(--flow-text); text-decoration:none; font-size:14px; }
.public-site .legal-page-nav a[aria-current="page"] { background:var(--flow-pink); color:var(--flow-pink-ink); border-color:transparent; }
.public-site .legal-contents { display:block; margin:0 0 20px; padding:0 20px; border:1px solid var(--flow-line); border-radius:22px 14px 24px 16px; background:var(--flow-panel); }
.public-site .legal-contents summary { padding:14px 0; min-height:48px; cursor:pointer; }
.public-site .legal-contents nav { display:grid; padding-bottom:12px; }
.public-site .legal-contents a { padding:10px 0; min-height:44px; color:var(--flow-muted); }
.public-site .legal-card { margin:12px 0; padding:24px; border:1px solid var(--flow-line); border-radius:26px 16px 28px 18px; background:var(--flow-panel); scroll-margin-top:20px; }
.public-site .legal-card h2 { font-family:inherit; color:var(--flow-text); font-size:21px; letter-spacing:-.02em; line-height:1.3; margin:0 0 12px; }
.public-site .legal-card :is(p,li) { color:var(--flow-muted); font-size:15px; line-height:1.75; }
.public-site .legal-card a { color:var(--flow-pink); overflow-wrap:anywhere; }
.public-site .legal-card p:last-child { margin-bottom:0; }
body.mcflow-float .flow-update-tag { flex-shrink:0; font-size:10px; font-weight:600; letter-spacing:0; text-transform:none; }
body.mcflow-float .flow-update-tag.tag-updated { background:#b5d0ff1c; color:var(--flow-blue); }
body.mcflow-float .flow-update-tag.tag-fix { background:var(--flow-raised); color:var(--flow-text); }
@media(max-width:700px) { .public-site .legal-page { width:calc(100% - 32px); margin:28px auto 36px; } .public-site .legal-page h1 { padding:16px 20px; } .public-site .legal-card { padding:20px; } }
@media(prefers-reduced-motion:no-preference) { .public-site .legal-page { animation:flow-dialog-in .32s ease-out; } .public-site .legal-page-nav a { transition:background .18s,transform .18s; } .public-site .legal-page-nav a:active { transform:scale(.97); } }

/* Quiet transform tools in the preview, with the detailed values left in the panel. */
.preview-transform-tools { display:none; }
@media(min-width:901px) {
 body.mcflow-float:not(.phone-studio) .preview-transform-tools { position:absolute; top:44px; left:14px; z-index:5; display:grid; gap:3px; padding:4px; border:1px solid var(--flow-line); border-radius:9px; background:var(--flow-panel); }
 body.mcflow-float:not(.phone-studio) .preview-transform-tools[hidden],
 body.mcflow-float:is(.focus-preview-mode,.puppet-mode-enabled) .preview-transform-tools { display:none; }
 body.mcflow-float .preview-transform-tools button { display:grid; place-items:center; width:36px; height:36px; padding:0; border:0; border-radius:5px; background:transparent; color:var(--flow-muted); cursor:pointer; box-shadow:none; transition:background .15s,color .15s; }
 body.mcflow-float .preview-transform-tools button:hover { background:var(--flow-raised); color:var(--flow-text); translate:none; }
 body.mcflow-float .preview-transform-tools button[aria-pressed="true"] { background:var(--flow-blue); color:#192536; }
 body.mcflow-float .preview-transform-tools button:disabled { opacity:.35; cursor:default; }
 body.mcflow-float .preview-transform-tools button:active { scale:1; translate:none; }
 body.mcflow-float .preview-transform-tools .flow-icon { width:19px; height:19px; rotate:0; }
 body.mcflow-float:not(.phone-studio) .transform-panel .transform-modes { display:none!important; }
 body.mcflow-float:not(.phone-studio) .embedded-transform::after { display:none; }
 body.mcflow-float:not(.phone-studio) .embedded-transform { padding:0!important; border:0!important; background:none!important; box-shadow:none!important; }
 body.mcflow-float:not(.phone-studio) .embedded-transform .transform-advanced { border-top:0; }
}

/* Home/studio refinements for the October release. */
.public-site .mobile-recipe-copy { width: 100%; }
.public-site .mobile-recipe { background: var(--flow-panel); border: 1px solid var(--flow-line); box-shadow: none; }
.public-site .mobile-recipe :is(h2,p,li,li b) { color: var(--flow-text); }
.public-site .mobile-recipe li b { color: var(--flow-pink); }
.public-site .mobile-recipe ol { border-color: var(--flow-line); }
.mcflow-page-transition-logo { position:fixed; left:0; top:0; z-index:100000; object-fit:contain; pointer-events:none; }
.mcflow-home-leaving { pointer-events:none; }
.mcflow-home-leaving :is(.hero,.mobile-home,.nav) { opacity:0; transition:opacity 320ms ease; }
body.mcflow-float .float-panel { border-top:0 !important; box-shadow:none; }
body.mcflow-float .phone-launcher { border-top:0; }
body.mcflow-float .float-top { border-bottom:0 !important; }
body.mcflow-float :is([data-section="poseEditor"],[data-section="puppetMode"]) { background:var(--flow-panel); border-color:var(--flow-line); box-shadow:none; }
body.mcflow-float :is([data-section="poseEditor"],[data-section="puppetMode"]) .slider-group { display:grid !important; grid-template-columns:60px minmax(0,1fr) 42px; gap:8px; align-items:center; }
body.mcflow-float :is([data-section="poseEditor"],[data-section="puppetMode"]) .slider-group label { min-width:0 !important; color:var(--flow-muted); font-size:12px; font-weight:500; }
body.mcflow-float :is([data-section="poseEditor"],[data-section="puppetMode"]) .slider-val { width:42px !important; min-width:42px !important; text-align:right; padding:0; }
body.mcflow-float :is([data-section="poseEditor"],[data-section="puppetMode"]) .body-map-part { background:var(--flow-raised) !important; border:1px solid var(--flow-line) !important; box-shadow:none !important; }
body.mcflow-float :is([data-section="poseEditor"],[data-section="puppetMode"]) .body-map-part.active { background:var(--flow-pink) !important; border-color:var(--flow-paper) !important; }
body.mcflow-float .body-map-tip, body.mcflow-float .auto-extrude-hint { color:var(--flow-muted); font-size:12px; font-weight:400; line-height:1.5; }
body.mcflow-float.phone-studio .puppet-multiselect-tip { display:none; }