/* Assembly: finite, interruptible motion over a fully usable interface. */
@property --accent { syntax: '<color>'; inherits: true; initial-value: #a477ff; }
@property --brand-bg { syntax: '<color>'; inherits: true; initial-value: #0b0b11; }
@property --brand-panel { syntax: '<color>'; inherits: true; initial-value: #14131d; }
@property --brand-radius { syntax: '<length>'; inherits: true; initial-value: 10px; }

.wire-glow { opacity: .22; stroke-width: 5; }
.wire-line { opacity: .78; stroke-width: 1.6; }
.secondary-wire { opacity: .3; }
.mini-planned { font: 6px var(--mono); letter-spacing: .5px; color: #c8a6df; border: 1px solid #594164; padding: 4px; border-radius: 2px; }
.art-agent .mini-title { gap: 5px; }
.art-agent .mini-title>svg { display: none; }
.art-rewards .mini-title { gap: 5px; }
.hero-note { color: #aaa0b7; font-size: 10px; }
.hero-copy>p { color: #b8afc7; }
.hero h1 { text-wrap: normal; }

/* Catalog previews are interface studies, not imaginary live products. */
.catalog-preview { position: relative; height: 280px; margin: 20px 0 25px; border: 1px solid #463353; border-radius: 5px; overflow: hidden; background: radial-gradient(ellipse at 50% 10%,#4e29572c,transparent 70%),#0c0a12; }
.thumb-top { display:flex; align-items:center; justify-content:space-between; padding:12px 13px; font:8px var(--mono); letter-spacing:.9px; color:#a992bd; border-bottom:1px solid #30223a; }
.thumb-status { color:#ccacf3; font-size:7px; letter-spacing:.5px; }
.thumb-caption { position:absolute; bottom:9px; left:0; right:0; text-align:center; font:6px var(--mono); letter-spacing:1px; color:#9c81ad; }
.thumb-swap { width:77%; max-width:245px; margin:13px auto 0; }
.thumb-title { display:flex; align-items:center; justify-content:space-between; font-size:12px; font-weight:500; color:#e5d8f3; margin-bottom:10px; }
.thumb-title>span { color:#b490d5; font-size:15px; }
.thumb-field { border:1px solid #392a47; border-radius:4px; padding:9px 10px; background:#17101f; }
.thumb-field>span { display:block; font-size:7px; color:#b1a1c1; margin-bottom:7px; }
.thumb-field>div { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.thumb-field b { font-size:17px; font-weight:400; }
.thumb-field div>span { display:flex; align-items:center; gap:5px; font-size:8px; }
.thumb-field .coin { width:15px; height:15px; font-size:9px; }
.thumb-direction { height:8px; text-align:center; font-size:11px; color:#bd90eb; position:relative; z-index:1; line-height:8px; }
.thumb-button { display:flex; justify-content:space-between; align-items:center; padding:10px; background:#9562d6; border:1px solid #b388e7; border-radius:3px; color:#fff; font-size:8px; margin-top:10px; }
.future-card .catalog-preview { background:#0e0b13; border-color:#35283f; }
.future-card .thumb-top { color:#aa94bc; }
.future-card .thumb-status { color:#b4a1c1; border:1px solid #53405e; border-radius:2px; padding:3px 5px; font-size:6px; }
.thumb-agent { width:78%; margin:19px auto; }
.thumb-agent-heading { display:flex; align-items:center; gap:12px; font-size:14px; color:#d5c2e2; line-height:1.4; }
.thumb-agent-heading>span { font-size:27px; border:1px solid #594266; border-radius:8px; width:40px; height:40px; display:grid; place-items:center; }
.thumb-prompt { display:flex; justify-content:space-between; margin-top:17px; padding:9px; border:1px solid #3c2e46; border-radius:4px; font-size:8px; color:#b3a0c2; }
.thumb-skeleton { margin:12px 0; display:grid; gap:5px; }
.thumb-skeleton i { height:3px; width:90%; background:#3a2b45; border-radius:4px; }
.thumb-skeleton i:nth-child(2) { width:74%; }
.thumb-skeleton i:nth-child(3) { width:51%; }
.thumb-input { display:flex; justify-content:space-between; border-top:1px solid #392a43; padding:11px 0; font-size:8px; color:#8f789e; }
.thumb-rewards { width:76%; margin:15px auto; }
.thumb-ring { width:87px; height:87px; margin:0 auto 12px; border-radius:50%; padding:9px; background:conic-gradient(#9574b1 0 50%,#675177 50% 80%,#3e304b 80%); }
.thumb-ring>span { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; background:#100c16; border-radius:50%; color:#d7c2e5; font-size:16px; }
.thumb-ring small { font:5px var(--mono); margin-top:5px; color:#a78eb9; }
.thumb-allocation { display:flex; justify-content:space-between; font-size:8px; color:#b6a0c5; margin-top:8px; }
.thumb-allocation>span { display:flex; align-items:center; gap:6px; }
.thumb-allocation i { width:5px; height:5px; border-radius:2px; background:#9574b1; }
.thumb-allocation:nth-last-child(2) i { background:#675177; }
.thumb-allocation:last-child i { background:#3e304b; }
.thumb-allocation b { font-weight:400; }
.card-meta { font-size:9px; }
.status { font-size:10px; }
.planned { color:#bba7cc; background:#291e33; }
.feature-chips>span { font-size:9px; color:#c1acd6; }
.module-card>p { font-size:13px; color:#b8a8c7; }
.module-card .button { font-size:11px; }
.module-card:hover .catalog-preview { border-color:#8560a2; }
.module-card { transition:border-color 180ms, transform 180ms; }

/* The story follows native scrolling. Only the desktop illustration is sticky. */
.build-story { max-width:1640px; margin:auto; padding:70px 6% 90px; border-top:1px solid #35263f; background:radial-gradient(ellipse at 80% 45%,#2d153024,transparent 55%),#0b090f; }
.story-intro { position:relative; margin-bottom:45px; }
.story-intro h2 { font:700 clamp(55px,5.4vw,84px)/.98 var(--display); letter-spacing:-1px; margin-top:24px; }
.story-intro h2 span { color:#c7a6f0; }
.story-intro>p { position:absolute; right:0; bottom:10px; font-size:14px; line-height:1.8; color:#b5a3c7; }
.story-layout { display:grid; grid-template-columns:.75fr 1.25fr; gap:8%; align-items:start; }
.story-step { min-height:70vh; padding:10vh 0; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; opacity:.55; transition:opacity 220ms; }
.story-step.is-current { opacity:1; }
.story-number { color:#d4b0fb; font:14px var(--mono); letter-spacing:1px; display:flex; align-items:center; gap:14px; }
.story-number>span { color:#a188b3; font-size:10px; }
.story-step h3 { font:700 clamp(37px,3.7vw,57px)/1.05 var(--display); margin:25px 0 19px; letter-spacing:-.3px; }
.story-step>p { color:#b8a6c9; font-size:14px; line-height:1.8; max-width:320px; }
.story-detail { display:flex; align-items:center; gap:12px; margin-top:28px; color:#bb99df; font:10px var(--mono); line-height:1.8; }
.story-detail>span { font-size:19px; }
.story-step>.button { margin-top:28px; }
.story-sticky { position:sticky; top:70px; margin-top:40px; border:1px solid #51345f; border-radius:7px; overflow:hidden; background:#100b16; box-shadow:0 20px 65px #0003; }
.story-stage-toolbar,.story-stage-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:19px; color:#a78bb9; font:8px var(--mono); letter-spacing:1px; }
.story-stage-toolbar { border-bottom:1px solid #392440; }
.story-stage-toolbar>span:last-child { color:#dab2f9; }
.story-stage-footer { font-size:7px; padding:16px 19px; color:#9272a5; }
.story-progress { height:2px; background:#302039; }
.story-progress>span { display:block; width:33.333%; height:100%; background:#bb89f3; transition:width 260ms ease; }
.assembly-stage { --story-accent:#a477ff; position:relative; height:470px; isolation:isolate; background-image:linear-gradient(#5e3d6c18 1px,transparent 1px),linear-gradient(90deg,#5e3d6c18 1px,transparent 1px); background-size:24px 24px; overflow:hidden; }
.story-browser { position:absolute; inset:26px; border:1px solid transparent; border-radius:8px; background:transparent; transition:background 260ms,border-color 260ms,box-shadow 260ms; }
.story-browser-top { height:32px; border-bottom:1px solid #ffffff0e; display:flex; align-items:center; justify-content:space-between; padding:0 13px; font:7px var(--mono); color:#ae8cbd; opacity:0; transition:opacity 220ms; }
.story-browser-top>i { font-style:normal; letter-spacing:2px; }
.story-brandbar { padding:18px 20px 0; display:flex; align-items:center; gap:7px; opacity:0; transition:opacity 220ms; }
.story-brandbar>span { color:var(--story-accent); font-size:23px; }
.story-brandbar>b { font-size:12px; font-weight:600; max-width:210px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.story-widget { position:absolute; top:76px; left:50%; width:260px; transform:translateX(-50%); background:#17101f; border:1px solid #76508e; border-radius:10px; padding:18px; box-shadow:0 14px 30px #0003; transition:transform 300ms cubic-bezier(.2,.7,.2,1),border-color 200ms,background 200ms,border-radius 200ms; }
.story-widget-top { display:flex; justify-content:space-between; align-items:center; font-size:15px; margin-bottom:18px; }
.story-widget-top>span { font:6px var(--mono); border:1px solid #694480; color:#cfa9ef; padding:4px; border-radius:2px; }
.story-widget .thumb-field { padding:12px; background:#0d091350; }
.story-widget .thumb-field>span { font-size:8px; }
.story-widget .thumb-field b { font-size:22px; }
.story-widget .thumb-field div>span { font-size:9px; }
.story-widget .thumb-direction { height:12px; line-height:12px; }
.story-widget .thumb-button { margin-top:18px; padding:12px; background:#6b4c85; border-color:#8b6aa7; font-size:9px; transition:background 200ms,border-color 200ms; }
.story-widget-note { text-align:center; font:7px var(--mono); color:#a28bb3; margin-top:12px; }
.story-tools { position:absolute; top:114px; left:24px; width:135px; padding:13px; border:1px solid #68467d; background:#1a1024; border-radius:5px; opacity:0; transform:translateX(-10px); transition:opacity 220ms,transform 250ms; }
.story-tools>small { display:block; font:7px var(--mono); letter-spacing:.8px; color:#bb90dc; margin-bottom:19px; }
.story-tools>label { display:block; font-size:8px; color:#ac95bd; margin-bottom:7px; }
.story-tools .story-name-value { padding:8px; font-size:10px; color:#e3d0f3; border:1px solid #50345e; background:#110b19; border-radius:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-bottom:19px; }
.story-colors { display:flex; gap:7px; }
.story-colors i { width:15px; height:15px; border-radius:50%; background:#a477ff; }
.story-colors i:first-child { outline:1px solid #ceaff0; outline-offset:3px; }
.story-colors i:nth-child(2) { background:#cf8bff; }
.story-colors i:nth-child(3) { background:#818cff; }
.story-ready { position:absolute; bottom:10px; left:0; right:0; text-align:center; color:#cfb4e8; font:7px var(--mono); letter-spacing:1px; opacity:0; transition:opacity 220ms; }
.assembly-stage[data-stage="1"] .story-tools { opacity:1; transform:none; }
.assembly-stage[data-stage="1"] .story-widget { transform:translateX(calc(-50% + 69px)) scale(.89); border-color:#b087d3; }
.assembly-stage[data-stage="1"] .thumb-button,.assembly-stage[data-stage="2"] .thumb-button { background:var(--story-accent); border-color:#cca4ef; color:#160d25; }
.assembly-stage[data-stage="2"] .story-browser { border-color:#644278; background:var(--story-bg,#0d0913); box-shadow:0 10px 30px #0003; }
.assembly-stage[data-stage="2"] .story-browser-top,.assembly-stage[data-stage="2"] .story-brandbar,.assembly-stage[data-stage="2"] .story-ready { opacity:1; }
.assembly-stage[data-stage="2"] .story-widget { top:101px; transform:translateX(-50%) scale(.9); transform-origin:top center; border-color:#8b62a2; background:var(--story-panel,#17101f); border-radius:var(--story-radius,10px); }
.story-mobile-preview { display:none; width:100%; }

/* Clear hierarchy in the studio, with readable secondary information. */
.studio-heading { padding-top:28px; padding-bottom:22px; }
.studio-heading h1 { font-size:60px; }
.studio-heading>p { color:#bbabc9; font-size:14px; }
.stepper { padding-block:16px; background:#120d1b; border-color:#50365e; }
.stepper>button { font-size:12px; color:#b4a2c5; padding:8px 10px; border-radius:4px; }
.stepper>button.current { background:#332043; border:1px solid #8059a0; color:#f1dfff; padding:7px 14px; box-shadow:inset 0 1px 0 #d2a3fc18; }
.step-number { width:27px; height:27px; font-size:10px; }
.step-number.done { color:#cfb4ec; }
.step-line { background:#604177; }
.studio-layout { grid-template-columns:350px minmax(0,1fr); }
.editor-panel { padding:23px 26px; background:#14101c; border-right-color:#5d3c73; }
.editor-label { color:#c7a3e4; font:10px var(--mono); letter-spacing:1.1px; padding-bottom:18px; }
.selected-module { background:#21152e; border:1px solid #63427d; padding:13px; border-radius:5px; gap:10px; }
.selected-module strong { font-size:14px; }
.selected-module small { font-size:9px; color:#bf9cd8; }
.editor-section { border-color:#42304f; padding:22px 0; }
.control-heading { margin-bottom:18px; }
.control-heading h2 { font-size:14px; color:#e7d8f3; }
.control-heading>span { font-size:10px; color:#bb91d6; }
.editor-panel label { font-size:12px; color:#c7b3d6; }
.editor-panel label>span { font-size:10px; color:#a78bb9; }
.editor-panel input:not([type="range"]):not([type="color"]) { background:#0d0a13; border-color:#59406b; color:#f0e2fb; font-size:13px; padding:12px; }
.mark-option { border-color:#594069; background:#191120; color:#b897ce; }
.mark-option.selected { border-color:#c09ae6; color:#e0baff; background:#3b2450; }
.segmented { border-color:#5b3c6e; background:#0e0a15; }
.segmented button { font-size:11px; color:#b29ac5; padding:9px 4px; }
.segmented button.active { background:#4a2b61; color:#f0daff; }
.fee-section output { font-size:14px; color:#dfb8ff; }
.fee-section p { font-size:12px; color:#b09abc; }
.range-labels { font-size:10px; color:#b198c2; }
.editor-bottom { font-size:10px; color:#b29bc4; }
.reset-button { font-size:11px; color:#d3acee; }
.preview-toolbar { background:#100b18; border-color:#442b54; min-height:68px; }
.preview-toolbar>span { color:#ead7fa; font-size:11px; letter-spacing:1px; }
.preview-toolbar>span small { font-size:8px; color:#c19cda; margin-left:6px; border:1px solid #56366d; padding:4px 6px; border-radius:3px; }
.preview-toolbar .text-button { font-size:11px; color:#d8b5ef; }
.device-toggle { border-color:#64427b; }
.device-toggle button { color:#b48cce; padding:7px 10px; }
.device-toggle button.active { background:#49305d; color:#f0d8ff; }
.device-toggle svg { width:16px; height:16px; }
.preview-canvas { background-color:#08060d; background-image:radial-gradient(#8a609c44 .75px,transparent .75px),radial-gradient(ellipse at center,#4a235033,transparent 70%); }
.browser-frame { border-color:#8e66aa; box-shadow:0 12px 45px #0005; }
.browser-chrome { height:38px; background:#261732; color:#c3a0d9; font-size:10px; border-color:#563468; }
.preview-address svg { width:10px; height:10px; }
.canvas-coordinate { color:#b190c5; font-size:9px; letter-spacing:.6px; }
.preview-bottom { background:#191020; border-color:#50315f; }
.preview-bottom strong { font-size:14px; color:#edd7fa; }
.preview-bottom p { color:#b99acb; font-size:12px; }
.preview-bottom .button { font-size:12px; }
.brand-app { transition:--accent 160ms ease-out,--brand-bg 180ms ease-out,--brand-panel 180ms ease-out,--brand-radius 180ms ease-out,background-color 180ms ease-out; }
.brand-app:before { transition:background 180ms; }
.brand-logo,.brand-title { transition:color 160ms; }
.brand-headline p { color:#b2a4c3; font-size:12px; }
.brand-headline .brand-kicker { font-size:8px; }
.brand-title { font-size:16px; }
.network-pill { font-size:9px; color:#c2b5d0; }
.swap-widget { max-width:370px; padding:18px; transition:background-color 180ms,border-color 180ms,border-radius 180ms; }
.swap-widget-top>strong { font-size:15px; }
.simulation-badge { font-size:9px; }
.field-top { font-size:11px; color:#bbaacb; }
.field-top>span:last-child { font-size:9px; color:#a28db6; }
.field-bottom { font-size:9px; color:#a895bc; }
.field-bottom button { font-size:9px; }
.token-selector select { font-size:11px; width:53px; }
.token-selector .coin { width:22px; height:22px; font-size:14px; }
.quote-details { gap:10px; padding:16px 2px; }
.quote-details>div { font-size:10px; color:#c2aecf; }
.quote-details b { color:#d7c4e7; }
.slippage-button { font-size:10px; }
.slippage-options button { font-size:10px; }
.swap-action { font-size:12px; padding:14px 7px; transition:background-color 160ms,color 160ms,border-color 160ms,border-radius 180ms; }
.swap-caption { font-size:9px; color:#ad96c1; line-height:1.5; }
.brand-powered { font-size:8px; color:#a58db5; }
.brand-powered b { font-size:10px; color:#c9b2d8; }
.swap-error { font-size:11px; }

/* Shared module movement never captures input or blocks a navigation. */
.module-bridge { position:fixed; z-index:30; pointer-events:none!important; transform-origin:top left; overflow:hidden; border:1px solid #ae7fd5; border-radius:7px; background:#100b18; box-shadow:0 10px 50px #0004; contain:layout paint; }
.module-bridge * { pointer-events:none!important; }
.bridge-origin,.bridge-result { position:absolute; inset:0; overflow:hidden; }
.bridge-origin>*,.bridge-result>* { width:100%!important; height:100%!important; max-width:none!important; margin:0!important; transform:none!important; }
.module-bridge .browser-frame { border:0; border-radius:0; }
.module-bridge .catalog-preview { border:0; }
.module-bridge .art-panel { position:relative; top:0; left:0; right:auto; }
.module-bridge input,.module-bridge select { pointer-events:none; }

/* Confirmation turns into a branded receipt without a second modal. */
.modal-shell { overflow:hidden; }
#modal-body { position:relative; }
.result-brand { display:flex; align-items:center; gap:10px; padding-bottom:19px; margin:4px 0 22px; border-bottom:1px solid #5c3b70; color:#e2c2f8; }
.result-brand>span { font-size:30px; color:var(--result-accent,#bd91ee); }
.result-brand strong { font-size:16px; font-weight:600; overflow-wrap:anywhere; }
.result-brand small { display:block; font:8px var(--mono); color:#af8fc1; margin-top:5px; letter-spacing:1px; }
.receipt-heading { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.receipt-heading .success-icon { width:33px; height:33px; margin:0; flex-shrink:0; }
.receipt-heading .success-icon svg { width:18px; height:18px; }
.receipt-heading>span { font:9px var(--mono); color:#c8a2df; letter-spacing:1px; }
.result-summary { background:#0c0812; border:1px solid #4d315f; border-radius:6px; padding:19px; margin:23px 0; }
.result-summary .success-value { font-size:32px; margin:0 0 8px; overflow-wrap:anywhere; }
.result-summary .success-label { font-size:9px; line-height:1.7; color:#be9bd1; }
.review-details>div { font-size:12px; color:#baa0cd; line-height:1.6; }
.modal-note { font-size:10px!important; color:#bb9ace!important; }
.modal-shell p { color:#c3a9d3; }
.motion-choice { display:flex; align-items:center; justify-content:space-between; gap:12px; border-block:1px solid #46304f; padding:15px 0; margin:20px 0 12px; }
.motion-choice>span { font-size:11px; color:#d9bee9; }
.motion-choice small { display:block; font-size:9px; line-height:1.5; margin-top:5px; color:#a88cba; }
.motion-choice .button { margin:0; font-size:9px; }
html[data-reduced-motion="true"] { scroll-behavior:auto; }
html[data-reduced-motion="true"] *,html[data-reduced-motion="true"] *::before,html[data-reduced-motion="true"] *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
html[data-reduced-motion="true"] .module-bridge { display:none!important; }
html[data-reduced-motion="true"] .story-step { opacity:1; }

@media(min-width:1550px) { .studio-layout { grid-template-columns:380px minmax(0,1fr); } .assembly-stage { height:530px; } .story-browser { inset:35px; } .story-widget { top:90px; width:285px; } .assembly-stage[data-stage="1"] .story-widget { transform:translateX(calc(-50% + 80px)) scale(.95); } .assembly-stage[data-stage="2"] .story-widget { top:115px; transform:translateX(-50%); } .story-tools { left:35px; width:150px; top:125px; } }
@media(max-width:1100px) { .card-meta { font-size:7px; } .module-card .button { font-size:10px; } .module-card>p { font-size:12px; } .feature-chips>span { font-size:8px; } .studio-layout { grid-template-columns:310px minmax(0,1fr); } .editor-panel { padding:21px; } .preview-toolbar { flex-wrap:wrap; padding-block:10px; gap:8px; } .preview-toolbar>span small { display:none; } .preview-toolbar .text-button { font-size:10px; } .brand-app .swap-widget { margin-inline:auto; max-width:calc(100% - 30px); } .network-pill { font-size:8px; } .story-layout { grid-template-columns:.7fr 1.3fr; gap:5%; } .story-widget { width:230px; } .story-tools { left:12px; width:110px; padding:11px; } .assembly-stage[data-stage="1"] .story-widget { transform:translateX(calc(-50% + 58px)) scale(.86); } .story-stage-toolbar { font-size:7px; padding:15px 12px; } .story-stage-footer { font-size:6px; padding:15px 12px; } .story-intro>p { font-size:12px; } }
@media(max-width:800px) { .catalog-preview { height:240px; margin-inline:-2px; } .thumb-top { font-size:6px; padding:10px 7px; letter-spacing:.3px; } .thumb-swap { width:87%; } .thumb-field { padding:9px 7px; } .thumb-field b { font-size:14px; } .thumb-field div>span { font-size:7px; gap:3px; } .thumb-field .coin { width:13px; height:13px; font-size:8px; } .thumb-caption { font-size:5px; letter-spacing:.4px; } .thumb-agent-heading { font-size:11px; gap:8px; } .thumb-agent-heading>span { font-size:24px; width:32px; height:32px; } .thumb-prompt,.thumb-input { font-size:7px; } .thumb-rewards { width:85%; } .thumb-ring { width:80px; height:80px; } .catalog-rewards .thumb-title { font-size:11px; } .card-meta { font-size:7px; } .status { font-size:9px; } .feature-chips>span { font-size:7px; } .module-card>p { font-size:11px; } .module-card .button { font-size:9px; } .studio-layout { grid-template-columns:270px minmax(0,1fr); } .editor-panel { padding:18px; } .segmented button { font-size:10px; } .preview-toolbar>span { font-size:9px; } .preview-toolbar .text-button { display:none; } .brand-title { font-size:14px; } .network-pill { font-size:0; } .brand-headline p { font-size:10px; } .field-top { font-size:10px; } .field-top>span:last-child { font-size:8px; } .field-bottom { font-size:8px; } .quote-details>div,.slippage-button { font-size:9px; } .token-selector select { font-size:10px; width:47px; } .token-selector .coin { width:18px; height:18px; font-size:11px; } .swap-caption { font-size:8px; } .swap-action { font-size:11px; } .preview-bottom p { font-size:11px; } .canvas-coordinate { font-size:7px; } .stepper { gap:10px; } .stepper>button { font-size:10px; } .step-line { width:18px; } .story-layout { display:block; } .story-sticky { display:none; } .story-intro>p { position:static; margin-top:22px; } .story-intro>p br { display:none; } .story-step { min-height:0; padding:35px 0 45px; opacity:1; border-bottom:1px solid #3b2a47; } .story-step:last-child { border-bottom:0; padding-bottom:0; } .story-step h3 { font-size:48px; margin:20px 0 14px; } .story-step h3 br { display:none; } .story-step>p { max-width:500px; } .story-mobile-preview { display:block; margin-top:28px; border:1px solid #5a3d6a; border-radius:6px; overflow:hidden; max-width:540px; align-self:center; } .assembly-stage { height:460px; } .story-browser { inset:20px; } .story-widget { width:260px; } .story-tools { width:140px; left:25px; top:110px; } .assembly-stage[data-stage="1"] .story-widget { transform:translateX(calc(-50% + 72px)) scale(.9); } .build-story { padding-top:50px; padding-bottom:55px; } }
@media(max-width:600px) { .mini-planned { font-size:5px; padding:3px; letter-spacing:0; } .hero-note { font-size:8px; } .catalog-preview { height:275px; margin:20px 0 24px; } .thumb-top { font-size:8px; padding:12px 13px; } .thumb-status { font-size:7px; } .thumb-swap { width:79%; max-width:250px; margin-top:17px; } .thumb-field { padding:11px; } .thumb-field b { font-size:19px; } .thumb-field div>span { font-size:9px; gap:5px; } .thumb-field .coin { width:17px; height:17px; font-size:11px; } .thumb-title { font-size:14px; } .thumb-button { font-size:9px; } .thumb-caption { font-size:7px; bottom:12px; } .thumb-agent-heading { font-size:16px; gap:14px; } .thumb-agent-heading>span { width:43px; height:43px; } .thumb-prompt,.thumb-input { font-size:10px; } .thumb-skeleton { margin-block:16px; } .thumb-rewards { width:75%; } .thumb-ring { width:100px; height:100px; margin-top:15px; } .thumb-allocation { font-size:10px; } .catalog-rewards .thumb-title { font-size:13px; } .card-meta { font-size:9px; } .status { font-size:10px; } .feature-chips>span { font-size:9px; } .module-card>p { font-size:13px; } .module-card .button { font-size:11px; } .studio-heading { padding-inline:6%; padding-top:25px; } .studio-heading h1 { font-size:56px; } .studio-heading>p { font-size:12px; line-height:1.7; } .stepper { padding:12px 3%; gap:3px; } .stepper>button { padding:6px 3px; font-size:9px; max-width:32%; gap:5px; } .stepper>button.current { padding:7px; } .step-number { width:22px; height:22px; font-size:9px; } .step-line { display:none; } .editor-panel { padding:23px 6%; } .editor-section { padding:23px 0; } .control-heading h2 { font-size:14px; } .editor-panel label { font-size:12px; } .editor-panel input:not([type="range"]):not([type="color"]) { font-size:14px; } .segmented button { font-size:12px; min-height:37px; } .editor-bottom { font-size:11px; } .reset-button { font-size:12px; } .preview-toolbar { padding:16px 5%; flex-wrap:nowrap; } .preview-toolbar>span { font-size:10px; gap:6px; } .preview-toolbar>span small { display:none; } .preview-toolbar .text-button { display:flex; font-size:9px; } .device-toggle button { padding:6px 7px; } .preview-canvas { padding:23px 4% 55px; min-height:715px; } .browser-frame.mobile { max-width:320px; } .browser-chrome { font-size:8px; height:35px; } .brand-title { font-size:15px; } .brand-headline h2 { font-size:26px; } .brand-headline p { font-size:11px; } .brand-app .swap-widget { padding:14px; max-width:calc(100% - 24px); } .field-top { font-size:10px; } .field-top>span:last-child { font-size:8px; } .field-bottom { font-size:9px; } .quote-details>div,.slippage-button { font-size:10px; } .simulation-badge { font-size:8px; } .swap-caption { font-size:8px; } .token-selector .coin { width:20px; height:20px; font-size:12px; } .token-selector select { width:49px; font-size:10px; } .preview-bottom { padding:21px 5%; } .preview-bottom strong { font-size:13px; } .preview-bottom p { font-size:11px; max-width:150px; } .preview-bottom .button { font-size:10px; padding:11px; } .canvas-coordinate { font-size:7px; } .standalone-preview .network-pill { font-size:7px; } .story-intro h2 { font-size:57px; } .story-step h3 { font-size:43px; } .story-step>p { font-size:13px; } .story-detail { font-size:10px; } .story-step { padding-bottom:40px; } .story-number { font-size:13px; } .assembly-stage { height:420px; } .story-browser { inset:12px; } .story-widget { width:232px; top:54px; padding:14px; } .story-widget .thumb-field { padding:11px; } .story-widget .thumb-field b { font-size:20px; } .story-widget .thumb-field div>span { font-size:8px; } .story-widget .thumb-button { margin-top:13px; padding:10px; font-size:8px; } .story-widget-top { margin-bottom:13px; } .story-tools { width:110px; left:10px; top:92px; padding:10px; } .assembly-stage[data-stage="1"] .story-widget { transform:translateX(calc(-50% + 52px)) scale(.82); } .assembly-stage[data-stage="2"] .story-widget { top:91px; transform:translateX(-50%) scale(.86); } .story-brandbar { padding:13px 12px 0; } .story-brandbar>b { max-width:190px; } .story-ready { bottom:8px; font-size:6px; } .result-brand strong { font-size:15px; } .review-details>div { font-size:11px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } .module-bridge { display:none!important; } .story-step { opacity:1; } }