:root{--bg:transparent;--panel:#f3f4efdd;--ink:#172c3c;--ink-2:#345a74;--muted:#617783;--faint:#8fa2ad;--line:#cdd5d7;--line-2:#aebcc0;--tile:#e8ede7;--tile-2:#e0e6e3;--stage-top:#f3f4ef;--stage-bottom:#e5eae5;--focus:#496b85;--radius-none:0;--radius-control:4px;--radius-surface:8px;--radius-round:50%;--radius-pill:9999px;--radius-lg:var(--radius-surface);--radius-md:var(--radius-surface);--radius-sm:var(--radius-control);--shadow-1:none}
html,body{background:transparent!important;overflow-x:hidden}body{font-family:Arial,'PingFang SC',sans-serif}.top,body>footer,.note,.md-old-download,.dlg-art{display:none!important}
html.embed .app,.app{max-width:none;padding:0 0 12px;gap:28px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:start}
.stage-col{position:relative;top:0}.stage,.embed .stage{height:480px;min-height:0;max-height:none;border:1px solid var(--line);box-shadow:none;background:#f3f4ef40}
.card{height:490px;max-height:490px;border:1px solid var(--line);background:#f3f4efbf;box-shadow:none;padding:20px}.steps{gap:5px;margin-bottom:14px}.step-btn{border:1px solid transparent;border-radius:var(--radius-control);padding:12px 10px;background:transparent}.step-btn[aria-current]{background:#f3f4efee;border-color:var(--line);box-shadow:none}.step-btn small{font-family:'Courier New',monospace;letter-spacing:1px}.step-btn b{font-weight:500}.step-btn em{font-size:11px}.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 8px}.opt .thumb{border-radius:var(--radius-surface);background:#e8ede799}.opt .lbl{font-size:11px}.actions{margin-top:14px}.btn{border-radius:var(--radius-control);font-size:13px}.btn.primary,.dice{background:#496b85;box-shadow:none;font-weight:400}.dice{height:36px;font-size:11px;padding:0 12px}.caption{background:#f3f4efaa;box-shadow:none;padding:9px 12px;border-radius:var(--radius-control)}.caption strong{font-size:12px;font-weight:400}.caption span{font-size:10px}.stage-tag{font-family:'Courier New',monospace;font-size:9px;top:18px;left:18px}.stage-tag i{width:5px;height:5px;box-shadow:none;background:#496b85}.stage-tools{top:14px;right:14px;gap:7px}.tool{width:30px;height:30px;box-shadow:none;border:1px solid var(--line);background:#f3f4efaa}.tool svg.i{width:15px;height:15px;stroke-width:1.3}.tool[aria-pressed=true]{background:#496b85}.hint{font-size:10px;bottom:78px}.card-head h2{font-size:15px;font-weight:400}.group-title{font-size:10px;letter-spacing:1px}.seg{background:#e8ede7}.seg-btn{font-size:11px}.seg-btn[aria-pressed=true]{box-shadow:none}
#md-motion{margin-top:22px}.md-motion-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}.md-motion-head>span{font:10px 'Courier New',monospace;letter-spacing:1.5px;color:#617783}.pill{border-radius:var(--radius-control);font-weight:400;font-size:11px}.md-motions{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.md-motions button{padding:11px 8px;border:1px solid #cdd5d7;border-radius:var(--radius-control);color:#556976;font-size:12px;text-align:left;background:#f3f4ef66}.md-motions button span{display:block;font:8px 'Courier New',monospace;margin-bottom:7px;opacity:.65}.md-motions button[aria-pressed=true]{border-color:#496b85;color:#345a74;background:#e3eae5c9}.md-sliders{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:16px}.md-sliders label{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;font-size:11px;color:#617783}.md-sliders input{width:100%;accent-color:#496b85}.md-sliders output{font:10px 'Courier New',monospace}.md-local-note{font-size:10px;color:#7a8b95;margin:16px 0 0}.dlg{display:block;padding:25px;max-width:560px}.dlg-body{padding:0}dialog{border:1px solid #cdd5d7;border-radius:var(--radius-surface);background:#f3f4ef;max-height:90svh;overflow:auto;width:min(95vw,580px)}dialog::backdrop{background:#172c3c55;backdrop-filter:blur(5px)}#md-export h3{font-size:24px;letter-spacing:-.6px;font-weight:400;margin:12px 0}#md-export p{font-size:12px;line-height:1.8;color:#617783}.md-export-options{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:22px 0}.md-export-options label{font-size:11px;color:#617783}.md-export-options select{width:100%;margin-top:8px;padding:10px;background:transparent;border:1px solid #aebcc0;color:#345a74;border-radius:var(--radius-control)}.md-export-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px}.md-export-buttons button{border:1px solid #aebcc0;border-radius:var(--radius-control);padding:16px;text-align:left;background:#f3f4ef88}.md-export-buttons b{display:block;font-weight:400;font-size:17px;color:#345a74}.md-export-buttons small{display:block;font-size:10px;color:#617783;margin-top:7px}.md-export-progress{font-size:12px;line-height:1.8;color:#345a74;min-height:25px;margin-top:15px}.md-export-note{font-size:10px!important}.md-exporting .md-export-options,.md-exporting .md-export-buttons{pointer-events:none;opacity:.5}.md-exporting #dlg-close{display:none}#md-cancel{margin-top:12px}
@media(max-width:860px){html.embed .app,.app{display:flex;flex-direction:column;gap:24px}.stage-col,.panel{width:100%;flex:none!important}.stage,.embed .stage{height:min(100vw,440px);min-height:300px}.card{height:410px;max-height:410px}.steps{margin-bottom:12px}.step-btn{padding:10px 8px}.step-btn em{font-size:10px}.md-sliders{gap:12px}.md-sliders label{gap:5px}.grid{grid-template-columns:repeat(4,minmax(0,1fr))}.dlg{padding:20px}}
@media(max-width:420px){.card{padding:15px}.grid{grid-template-columns:repeat(3,minmax(0,1fr))}.md-motions button{padding:9px 6px;font-size:11px}.step-btn b{font-size:12px}.md-sliders{grid-template-columns:1fr}.step-btn em{max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
/* Fifth step: optional motion with character thumbnails. Preview column is exclusively the stage. */
.stage,.embed .stage{height:670px}.panel .steps{grid-template-columns:repeat(5,minmax(0,1fr));display:grid;gap:3px}.step-btn{min-width:0;padding:10px 7px}.step-btn em{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;font-size:10px}.step-btn small{font-size:9px}.md-panel-tools{display:flex;justify-content:flex-end;margin-bottom:12px;min-height:30px}.md-panel-tools .dice{height:30px;font-size:10px;border:1px solid var(--line);background:transparent;color:#58778f}.stage #btn-png{display:none}.actions{display:flex;gap:8px;flex-wrap:wrap}.actions .btn{padding:11px 13px;font-size:12px;min-height:40px;flex:1}.actions .md-download-character{background:#496b85;color:white;flex:1.3;white-space:nowrap}.actions #btn-next{background:transparent;border:1px solid #aebcc0;color:#496b85}.actions #btn-back{flex:0 1 auto}.md-motion-intro{font-size:11px;line-height:1.8;color:#617783;margin:0 0 15px}.md-no-motion{display:flex;align-items:center;gap:10px;width:100%;border:1px solid #cdd5d7;border-radius:var(--radius-control);padding:11px 12px;margin-bottom:15px;color:#617783;text-align:left;font-size:11px}.md-no-motion[aria-pressed=true]{background:#e3eae5;border-color:#496b85}.md-motion-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 9px}.md-motion-tile{min-width:0;color:#617783;text-align:center}.md-motion-tile>div{position:relative;aspect-ratio:1;border:1px solid transparent;border-radius:var(--radius-surface);overflow:hidden;background:#e8ede7a0}.md-motion-tile canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;z-index:1;pointer-events:none}.md-motion-tile canvas.ready{opacity:1}.md-motion-tile>span{display:block;font-size:10px;margin-top:6px;line-height:1.5;min-height:15px}.md-tile-fallback{position:absolute;inset:0;display:grid;place-items:center;font-size:40px;color:#9eafab}.md-motion-tile[aria-pressed=true]>div{border-color:#496b85;background:#e3eae5}.md-motion-tile i{position:absolute;right:4px;bottom:4px;z-index:2;background:#496b85;color:white;border-radius:50%;width:16px;height:16px;display:none;place-items:center}.md-motion-tile i svg{width:10px;height:10px}.md-motion-tile[aria-pressed=true] i{display:grid}.md-motion-tile:hover>div{border-color:#9daeb3}.card .md-sliders{grid-template-columns:1fr;gap:10px;margin-top:20px;padding-top:15px;border-top:1px solid #cdd5d7}.card .md-sliders label{grid-template-columns:45px 1fr 38px}
@media(max-width:860px){.stage,.embed .stage{height:min(100vw,440px)}.panel .steps{overflow-x:auto}.step-btn b{font-size:12px}.step-btn small{font-size:8px}.step-btn{padding:9px 5px}.step-btn em{max-width:none}.card{height:470px;max-height:470px}.md-panel-tools{margin-bottom:10px}}
@media(max-width:420px){.md-motion-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.actions .btn{padding:10px 9px;font-size:11px}.stage,.embed .stage{min-height:320px}}
/* Align both columns to one top and bottom edge. */
html.embed .app,.app{align-items:stretch;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding-bottom:0}
.stage-col{display:flex;min-height:0}.stage,.embed .stage{flex:1;width:100%;height:auto;min-height:620px}
.md-panel-tools{display:none}.panel{display:flex;flex-direction:column;min-width:0}.panel .steps{margin-top:0}.panel .card{flex:1;min-height:480px;height:480px;max-height:480px}.panel .actions{margin-top:14px}
@media(max-width:860px){.stage-col{display:block}.stage,.embed .stage{height:min(100vw,440px);min-height:320px;flex:none}.panel .card{flex:none;height:460px;min-height:460px;max-height:460px}}
.actions .md-panel-random{flex:0 0 36px;width:36px;min-width:36px;padding:8px;font-size:0;box-shadow:none;color:#58778f;background:transparent;border:1px solid #cdd5d7;display:grid;place-items:center}.actions .md-panel-random svg.i{width:17px;height:17px}
/* Override the supplied embed's 100dvh rule; it must not feed the host iframe's height back into itself. */
html.embed .app,.app{height:auto;min-height:0}

/* Same radius contract as the host; this iframe has its own CSS scope. */
.stage,.card,.thumb,.opt .thumb,.md-motion-tile>div,.dlg{border-radius:var(--radius-surface)}
.step-btn,.btn,.seg,.seg-btn,.pill,.md-download-character,.recent button,.color-actions button,select,input:not([type=range]),.caption,.toast{border-radius:var(--radius-control)}
.tool,.opt .check,.swatch,.dot,.md-motion-tile i{border-radius:var(--radius-round)}