.fusion-shell{padding-top:24px;padding-bottom:64px}.fusion-heading{display:flex;align-items:center;justify-content:space-between;gap:28px;padding-block:20px 24px}.fusion-heading h2{font-size:40px;margin:0 0 8px}.fusion-heading p{font-size:16px;margin:0;color:var(--dd-muted)}.fusion-workspace{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}.fusion-art-panel{position:sticky;top:calc(var(--dd-header-height) + 20px)}.fusion-art-panel .composition-canvas{margin-top:16px;border:1px solid var(--dd-border);max-width:560px}.fusion-controls h3{font-size:28px;margin:0 0 10px}.fusion-controls p{font-size:14px;color:var(--dd-muted)}.fusion-controls>div{padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid var(--dd-border)}.dd-token-button-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;max-height:180px;overflow:auto}.dd-token-square-btn{border:1px solid var(--dd-border);background:var(--dd-surface);color:var(--dd-text);border-radius:8px;min-width:48px;min-height:44px;font-size:14px}.dd-token-square-btn.is-active{border-color:var(--dd-pink);color:var(--dd-pink)}.fusion-trait-picker .studio-tiles{max-height:300px}.fusion-cost{display:flex;align-items:center;justify-content:space-between;padding:16px 0}.fusion-cost strong{font-size:24px;font-variant-numeric:tabular-nums}.fusion-review>p{font-size:13px;line-height:1.6}.transaction-steps{display:flex;gap:8px;list-style:none;counter-reset:step;padding:0;margin:20px 0}.transaction-steps li{flex:1;font-size:12px;color:var(--dd-muted);padding-top:12px;border-top:2px solid var(--dd-border);counter-increment:step}.transaction-steps li::before{content:counter(step) '. ';}.transaction-steps .is-current{border-color:var(--dd-pink);color:var(--dd-text)}.fusion-review #submit{width:100%}.fusion-review #fusionTransactionStatus{padding:12px;background:var(--dd-surface);border-radius:8px;color:var(--dd-cyan)}
@media(max-width:767px){.fusion-heading{display:block;padding-block:20px}.fusion-heading h2{font-size:36px}.fusion-heading .dd-btn{margin-top:16px}.fusion-workspace{display:block}.fusion-art-panel{position:static;margin-bottom:32px}.fusion-art-panel .composition-canvas{max-width:400px;margin-inline:auto}.transaction-steps{flex-wrap:wrap}.transaction-steps li{flex-basis:40%}.fusion-shell{padding-top:16px}}

/* Browsing a category and filling its slot are separate states. */
.fusion-category-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 10px; padding: 3px 3px 16px; }
.fusion-category-nav button { min-width: 0; min-height: 66px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; border: 1px solid var(--dd-border-strong); border-radius: 8px; padding: 10px; color: var(--dd-text); background: var(--dd-surface); text-align: left; }
.fusion-category-name { font-size: 13px; line-height: 1.2; font-weight: 600; }
.fusion-category-state { display: flex; align-items: center; gap: 6px; color: var(--dd-muted); font-size: 11px; line-height: 1.2; }
.fusion-category-check { display: inline-grid; place-items: center; width: 14px; height: 14px; flex: 0 0 14px; border: 1px solid var(--dd-border-strong); border-radius: 50%; }
.fusion-category-nav button.is-filled { border-color: var(--dd-mint-soft); background: #182c38; }
.fusion-category-nav .is-filled .fusion-category-state { color: var(--dd-mint-soft); }
.fusion-category-nav .is-filled .fusion-category-check { background: var(--dd-mint-soft); border-color: var(--dd-mint-soft); color: var(--dd-bg); }
.fusion-category-nav .is-filled .fusion-category-check::after { content: '✓'; font-size: 10px; font-weight: 600; }
.fusion-category-nav button[aria-pressed=true] { outline: 2px solid var(--dd-pink); outline-offset: 1px; }
.fusion-category-nav button:focus-visible { outline: 2px solid var(--dd-cyan); outline-offset: 1px; }
.fusion-controls .fusion-selection-progress { font-size: 13px; line-height: 1.5; margin-bottom: 14px; }
.fusion-controls .fusion-selection-progress.is-complete { color: var(--dd-mint-soft); }
.fusion-trait-picker .studio-tiles > p { grid-column: 1 / -1; margin: 0; }