/* BYORD design prototype. Existing collection art; no transaction integrations. */
.byord-experience { --navy:#2e3d6b; --deep:#1b284b; --gold:#d8b25a; --blue:#98aae8; --cream:#f2eddf; --line:rgba(152,170,232,.28); --ink:var(--deep); --paper:var(--navy); --yellow:var(--gold); background:var(--navy); color:var(--cream); font-size:16px; line-height:1.6; }
.byord-experience * { box-sizing:border-box; }
.byord-experience :focus-visible { outline:3px solid var(--blue); outline-offset:5px; }
.byord-experience button, .byord-experience a { -webkit-tap-highlight-color:transparent; }
.byord-experience button { cursor:pointer; }
.byord-experience button:disabled { cursor:not-allowed; opacity:.45; }
.byord-experience h1,.byord-experience h2,.byord-experience h3,.exp-brand,.exp-ticker { font-family:var(--display); font-weight:400; letter-spacing:0; text-transform:none; line-height:1.03; }
.byord-experience h1,.byord-experience h2,.byord-experience h3,.byord-experience p { margin:0; }
.byord-experience h2 { font-size:clamp(2.6rem,5vw,5.5rem); }
.byord-experience h3 { font-size:clamp(2rem,3vw,3.3rem); }
.byord-experience em { font-style:normal; color:var(--gold); }
.byord-experience p + p { margin-top:18px; }
.byord-experience button { font-family:var(--body); }
.prototype-ribbon { padding:8px 5%; background:var(--gold); color:var(--deep); text-align:center; font-size:12px; font-weight:700; letter-spacing:.07em; }
.prototype-ribbon span { margin-left:15px; font-weight:400; letter-spacing:0; }
.byord-experience .exp-header { position:relative; top:auto; height:auto; padding:20px 4%; min-height:96px; background:var(--navy); transform:none; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:28px; }
.exp-brand { color:var(--gold); font-size:42px; flex-shrink:0; display:block; }
.exp-brand span { display:block; margin-top:6px; color:var(--blue); font:700 10px/1.3 var(--body); letter-spacing:.11em; }
.exp-header .desktop-nav { gap:18px; margin-left:auto; }
.exp-header .desktop-nav a { font-size:14px; text-transform:none; color:var(--cream); }
.exp-header-actions { display:flex; gap:14px; align-items:center; margin-left:auto; }
.exp-wallet { padding:11px 18px; min-height:46px; border:1px solid var(--blue); border-radius:50px; background:transparent; color:var(--cream); font-size:14px; }
.exp-wallet span { margin-left:12px; color:var(--gold); }
.exp-header .menu-toggle span { background:var(--cream); }
.exp-header .mobile-menu { position:absolute; top:100%; bottom:auto; height:calc(100dvh - 140px); padding-top:20px; color:var(--cream); background:var(--deep); }
.exp-header .mobile-menu a { font-family:var(--body); font-size:20px; }
.eyeline { color:var(--blue); font-size:12px; font-weight:700; letter-spacing:.1em; line-height:1.5; }
.lead { font-size:clamp(18px,1.6vw,24px); line-height:1.55; }
.quiet { color:#bfcae6; font-size:14px; line-height:1.6; }
.exp-button { display:inline-flex; gap:24px; align-items:center; justify-content:center; min-height:54px; padding:15px 26px; background:var(--gold); color:var(--deep); border:1px solid var(--gold); border-radius:40px; font-weight:700; font-size:15px; transition:transform .25s, box-shadow .25s; }
.exp-button span { font-size:21px; }
.exp-button:hover { transform:translateY(-3px); box-shadow:0 7px 0 var(--deep); }
.exp-button.secondary { color:var(--cream); background:transparent; border-color:var(--blue); }
.text-button { display:inline-flex; align-items:center; gap:14px; padding:10px 0; border:0; border-bottom:1px solid currentColor; border-radius:0; background:none; color:inherit; font-size:14px; line-height:1.5; }
.exp-hero { display:grid; grid-template-columns:1.04fr 1fr; align-items:center; min-height:740px; padding:70px 5% 90px; gap:3%; overflow:hidden; }
.exp-hero h1 { font-size:clamp(4.6rem,8.4vw,9rem); margin:28px 0; }
.hero-editorial .lead { max-width:550px; font-size:18px; }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:20px; margin-top:32px; }
.hero-footnote { display:flex; gap:22px; font-size:11px; color:var(--blue); letter-spacing:.07em; margin-top:55px; }
.hero-film { position:relative; width:100%; max-width:660px; margin:auto; rotate:1.5deg; }
.hero-film video { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:clamp(28px,4vw,58px); background:var(--deep); box-shadow:18px 22px 0 #1b284b99; }
.exp-film-play { position:absolute; z-index:3; top:50%; left:50%; display:grid; justify-items:center; gap:13px; min-width:148px; padding:0; color:var(--cream); border:0; background:transparent; transform:translate(-50%,-50%); }
.exp-film-play[hidden] { display:none; }
.exp-film-play-disc { display:grid; width:clamp(92px,11vw,124px); aspect-ratio:1; place-items:center; border:3px solid var(--deep); border-radius:50%; background:var(--gold); box-shadow:8px 9px 0 #1b284be0; transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s cubic-bezier(.16,1,.3,1),background .2s ease; }
.exp-film-play-disc>span { display:block; width:30px; height:36px; margin-left:9%; background:var(--deep); clip-path:polygon(0 0,100% 50%,0 100%); }
.exp-film-play-label { padding:8px 13px; border-radius:999px; color:var(--cream); background:#1b284be8; font:800 .67rem/1.2 var(--body); letter-spacing:.06em; text-transform:uppercase; }
.exp-film-play:hover .exp-film-play-disc,.exp-film-play:focus-visible .exp-film-play-disc { background:#e6c779; box-shadow:11px 12px 0 #1b284be0; transform:translate(-3px,-3px) scale(1.04); }
.exp-film-play:active .exp-film-play-disc { box-shadow:2px 3px 0 #1b284be0; transform:translate(5px,6px) scale(.98); }
.duck-showcase-art { position:relative; aspect-ratio:1; width:100%; max-width:650px; margin:auto; }
.hero-orbit { position:absolute; inset:3%; border:1px solid var(--blue); border-radius:50%; transform:rotate(-22deg) scaleY(.8); opacity:.4; }
.hero-orbit:after { content:''; position:absolute; inset:13px -35px; border:1px solid var(--blue); border-radius:50%; }
.orbit-copy { position:absolute; top:0; right:20%; font-size:12px; letter-spacing:.14em; transform:rotate(9deg); color:var(--gold); }
.duck-card { position:absolute; height:auto; border-radius:clamp(22px,3vw,44px); filter:drop-shadow(0 20px 5px #16244055); animation:byord-drift 7s ease-in-out infinite; }
.main-duck { width:68%; top:19%; left:8%; z-index:2; rotate:-9deg; }
.side-duck { width:46%; right:-9%; top:0; rotate:12deg; animation-delay:-2s; }
.little-duck { width:37%; bottom:-5%; right:-2%; rotate:8deg; animation-delay:-4s; }
.art-note { position:absolute; left:0; bottom:0; font-family:var(--display); font-size:30px; color:var(--gold); transform:rotate(-10deg); line-height:1.1; }
.exp-ticker { display:flex; align-items:center; justify-content:space-around; gap:40px; padding:24px 0; background:var(--blue); color:var(--deep); overflow:hidden; white-space:nowrap; transform:rotate(-2deg) scale(1.02); font-size:clamp(24px,3vw,44px); }
.exp-ticker span:nth-child(odd) { color:var(--cream); }
.exp-section { padding:100px 6%; }
.exp-origin,.exp-film,.exp-faq { display:grid; grid-template-columns:1fr 1fr; gap:10%; align-items:center; }
.exp-origin h2,.exp-golden h2 { margin-top:22px; }
.exp-origin .text-button { margin-top:25px; }
.exp-banner { padding:0 2%; }
.exp-banner img { width:100%; height:auto; border-radius:48% 48% 6% 6% / 8% 8% 2% 2%; }
.exp-banner p { text-align:right; color:var(--blue); font-size:13px; margin:12px 4%; }
.exp-entry { display:grid; grid-template-columns:.95fr 1fr; gap:10%; }
.entry-heading h2 { margin:24px 0; }
.incubator-art { display:block; width:100%; aspect-ratio:1 / 1; height:auto; object-fit:contain; object-position:center; }
.entry-heading img { width:85%; max-width:410px; rotate:-6deg; border-radius:44%; margin:40px auto 0; }
.entry-lines article { position:relative; padding:26px 0 35px 52px; border-top:1px solid var(--line); }
.entry-index { position:absolute; left:0; top:23px; color:var(--gold); font-family:var(--display); font-size:30px; }
.entry-lines h3 { margin:18px 0; }
.entry-title-lockup { display:flex; align-items:center; justify-content:space-between; gap:clamp(20px,4vw,56px); margin:18px 0; }
.entry-title-lockup h3 { flex:1 1 auto; margin:0; }
.genesis-brand-mark { flex:0 1 230px; width:clamp(150px,34%,230px); height:auto; object-fit:contain; }
.entry-bottom { display:flex; align-items:center; justify-content:space-between; margin-top:25px; }
.entry-bottom>span { font-size:23px; color:var(--gold); }
.entry-bottom small { display:block; font-size:13px; color:var(--blue); }
.round-link { display:grid; place-items:center; width:58px; height:58px; border:1px solid var(--blue); border-radius:50%; font-size:25px; }
.round-link:hover { background:var(--gold); color:var(--deep); }
.exp-process { background:var(--deep); }
.exp-process h2 { margin:25px 0 55px; }
.process-columns { display:grid; grid-template-columns:repeat(3,1fr); gap:50px; }
.process-columns span { display:block; color:var(--gold); border-bottom:1px solid var(--line); padding-bottom:15px; margin-bottom:25px; }
.process-columns h3 { font-size:30px; margin-bottom:15px; }
.exp-golden { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:50px 8%; align-items:start; border-block:1px solid var(--line); background:var(--deep); }
.golden-heading>p:last-child { max-width:600px; margin-top:26px; color:#cad2e7; }
.golden-explainer { padding-top:34px; }
.golden-explainer .lead { max-width:34ch; color:var(--gold); }
.golden-explainer p:not(.lead) { max-width:68ch; color:#cad2e7; }
.golden-stats { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:0; border-block:1px solid var(--line); }
.golden-stats>div { padding:30px clamp(18px,3vw,42px); }
.golden-stats>div+div { border-left:1px solid var(--line); }
.golden-stats dt { color:var(--gold); font:clamp(3.6rem,7vw,7.5rem)/.85 var(--display); }
.golden-stats dd { max-width:20ch; margin:16px 0 0; color:var(--blue); font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.golden-samples { grid-column:1/-1; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(12px,2vw,30px); }
.golden-sample { min-width:0; margin:0; }
.golden-sample img { width:100%; height:auto; aspect-ratio:1; object-fit:contain; border-radius:50%; background:var(--navy); transition:transform .3s cubic-bezier(.16,1,.3,1),background .3s ease; }
.golden-sample figcaption { margin-top:12px; color:var(--cream); font-size:12px; line-height:1.4; text-align:center; }
.golden-sample:hover img { background:#3b4d82; transform:translateY(-6px) rotate(-2deg); }
.golden-catalog { grid-column:1/-1; }
.golden-catalog-head { display:flex; justify-content:space-between; align-items:end; gap:30px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.golden-catalog-head>p:last-child { max-width:42ch; color:#cad2e7; text-align:right; }
.golden-groups { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 4%; }
.golden-group { padding:20px 0; border-bottom:1px solid var(--line); }
.golden-group h3 { display:flex; justify-content:space-between; gap:15px; color:var(--gold); font:700 16px/1.4 var(--body); }
.golden-group h3 span { flex-shrink:0; color:var(--blue); font-size:10px; letter-spacing:.05em; text-transform:uppercase; }
.golden-group p { margin-top:8px; color:#cad2e7; font-size:14px; line-height:1.55; }
.golden-foot { grid-column:1/-1; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:45px; align-items:center; padding-top:6px; }
.golden-foot>p { max-width:72ch; color:#cad2e7; }
.golden-foot strong { color:var(--cream); }
.golden-foot .exp-button { white-space:nowrap; }
.golden-foot .quiet { max-width:360px; margin-top:10px; }
.exp-film h2 { margin:20px 0; }
.exp-faq { align-items:start; border-top:1px solid var(--line); }
.exp-faq details { border-bottom:1px solid var(--line); padding:18px 0; }
.exp-faq summary { cursor:pointer; font-size:18px; }
.exp-faq details p { margin-top:15px; color:#cad2e7; }
.exp-faq .faq-collection-link { color:var(--gold); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
.exp-faq .faq-collection-link:hover { color:var(--cream); }
.exp-footer { padding:45px 6%; display:flex; align-items:center; justify-content:space-between; gap:35px; border-top:1px solid var(--line); background:var(--deep); }
.exp-footer>div { display:flex; flex-direction:column; gap:12px; font-size:14px; }
.exp-footer button { background:none; color:var(--blue); border:0; padding:0; text-align:left; }
.exp-footer>p { color:var(--blue); }
/* The Incubator: a spacious drawing studio, not a mint storefront. */
.studio-subnav { margin:0 5%; padding:20px 0; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); font-size:13px; color:var(--blue); }
.studio-subnav>span { letter-spacing:.12em; font-size:11px; }
.studio-subnav .text-button { padding:0; border:0; }
.studio-shell { padding:42px 5% 70px; min-height:75vh; }
.studio-title { display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.studio-title h1 { font-size:clamp(2.6rem,5vw,4.8rem); color:var(--gold); }
.studio-steps { list-style:none; margin:36px 0 45px; padding:0; display:grid; grid-template-columns:repeat(4,1fr); }
.studio-steps li { padding:16px 8px; color:var(--blue); border-bottom:2px solid var(--line); font-size:14px; }
.studio-steps li[aria-current] { color:var(--gold); border-color:var(--gold); }
.studio-steps span { margin-right:12px; font-size:11px; opacity:.7; }
#studio-view { min-width:0; }
.view-enter { animation:studio-arrive .5s ease both; }
.studio-view-heading { display:flex; justify-content:space-between; gap:30px; align-items:end; margin-bottom:35px; }
.studio-view-heading h2 { font-size:clamp(2.3rem,4.6vw,4.5rem); margin-top:10px; }
.studio-view-heading>p { max-width:390px; color:#cad2e7; }
.access-spread { display:grid; grid-template-columns:1fr 1fr; gap:7%; margin-top:40px; }
.access-choice { padding:30px 0; border-top:1px solid var(--blue); position:relative; }
.access-choice .choice-number { float:right; color:var(--blue); font-family:var(--display); font-size:65px; line-height:1; }
.access-choice h3 { margin:20px 0; }
.access-choice p { max-width:400px; }
.access-choice .exp-button { margin-top:30px; }
.access-tail { border-top:1px solid var(--line); margin-top:40px; padding-top:22px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.slot-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6%; margin:35px 0; }
.slot { background:none; border:0; color:var(--cream); text-align:left; padding:0 5px; position:relative; }
.slot-art { display:block; border-radius:48% 52% 47% 53% / 53% 46% 54% 47%; overflow:hidden; background:#52649655; transition:transform .3s,outline .3s; }
.slot:nth-child(2) { padding-top:35px; }
.slot img { width:100%; height:auto; }
.slot.selected .slot-art { outline:3px solid var(--gold); outline-offset:8px; transform:rotate(-3deg); }
.slot:hover .slot-art { transform:translateY(-8px) rotate(2deg); }
.slot .slot-label { display:flex; justify-content:space-between; align-items:center; margin-top:24px; font-size:16px; gap:12px; }
.slot .slot-tag { display:inline-block; font-size:12px; margin-top:8px; color:var(--gold); }
.slot.unavailable .slot-art { filter:grayscale(.8); opacity:.55; }
.slot.unavailable .slot-tag { color:var(--blue); }
.selection-foot { margin-top:30px; padding-top:25px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:25px; }
.selection-foot p { max-width:550px; }
.preview-note { color:var(--blue); font-size:13px; padding:15px 0; }
.mint-spread { display:grid; grid-template-columns:.9fr 1fr; gap:10%; align-items:center; }
.mint-egg { position:relative; padding:20px 12%; }
.mint-egg img { width:100%; border-radius:46%; rotate:-6deg; }
.mint-egg span { position:absolute; right:0; bottom:10%; width:100px; height:100px; background:var(--gold); color:var(--deep); border-radius:50%; display:grid; place-items:center; font:36px var(--display); rotate:12deg; }
.mint-numbers h2 { font-size:clamp(2.5rem,4vw,4.5rem); margin:14px 0 26px; }
.mint-stepper { display:flex; align-items:center; justify-content:space-between; gap:15px; margin:20px 0 10px; border-block:1px solid var(--line); padding:18px 0; }
.mint-stepper button { border:1px solid var(--blue); border-radius:50%; background:none; color:var(--cream); width:52px; height:52px; font-size:28px; }
.mint-stepper input { width:160px; text-align:center; border:0; background:transparent; color:var(--cream); font:70px var(--display); -moz-appearance:textfield; }
.mint-stepper input::-webkit-inner-spin-button { -webkit-appearance:none; }
.mint-summary { display:flex; justify-content:space-between; margin:24px 0; align-items:baseline; }
.mint-summary output { color:var(--gold); font-size:32px; }
.mint-numbers .exp-button { width:100%; }
.field-error { color:#ffceae; font-size:14px; min-height:24px; }
/* Layers are the original PNGs, aligned at their original square aspect ratio. */
.editor-layout { display:grid; grid-template-columns:minmax(300px,.92fr) minmax(0,1.08fr); gap:5%; align-items:start; }
.editor-preview { position:sticky; top:25px; min-width:0; }
.preview-heading { display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--blue); margin-bottom:15px; }
.duck-canvas { position:relative; aspect-ratio:1; width:100%; background:var(--deep); border-radius:45% 45% 12% 12% / 42% 42% 12% 12%; overflow:hidden; isolation:isolate; }
.duck-canvas img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.preview-tools { display:flex; align-items:center; justify-content:space-between; padding:15px 0; }
.preview-tools button { border:0; background:none; color:var(--cream); font-size:14px; padding:10px 0; }
.preview-tools button:hover { color:var(--gold); }
.editor-preview .exp-button { width:100%; }
.editor-note { font-size:13px; color:var(--blue); text-align:center; margin-top:12px!important; }
.category-rail { display:flex; gap:9px; overflow:auto; padding:5px 4px 18px; scrollbar-width:thin; }
.category-rail button { flex-shrink:0; color:var(--blue); border:1px solid var(--line); background:transparent; border-radius:30px; font-size:13px; padding:10px 16px; min-height:44px; }
.category-rail button[aria-selected=true] { background:var(--gold); border-color:var(--gold); color:var(--deep); }
.trait-heading { display:flex; justify-content:space-between; align-items:baseline; margin:15px 0 22px; }
.trait-heading h3 { font-size:35px; }
.trait-heading span { color:var(--blue); font-size:13px; }
.trait-search { width:100%; background:transparent; border:0; border-bottom:1px solid var(--blue); color:var(--cream); font:16px var(--body); padding:10px 0 14px; border-radius:0; }
.trait-search::placeholder { color:#c0cae0; }
.trait-filter { display:flex; gap:14px; flex-wrap:wrap; margin:14px 0; }
.trait-filter button { border:0; background:none; padding:5px 0; font-size:12px; color:var(--blue); border-bottom:1px solid transparent; }
.trait-filter button[aria-pressed=true] { color:var(--gold); border-color:var(--gold); }
.trait-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px 12px; }
.trait-option { background:none; color:var(--cream); border:0; text-align:left; padding:4px; min-width:0; position:relative; }
.trait-thumb { display:grid; place-items:center; border-radius:50%; aspect-ratio:1; background:#98aae81a; border:1px solid transparent; position:relative; overflow:hidden; }
.trait-thumb img { width:100%; height:100%; object-fit:contain; }
.trait-option[aria-pressed=true] .trait-thumb { outline:2px solid var(--gold); outline-offset:3px; background:#98aae82e; }
.trait-option:hover .trait-thumb { background:#98aae833; }
.trait-option.locked .trait-thumb { opacity:.38; }
.trait-option .trait-name { display:block; margin-top:10px; font-size:14px; line-height:1.35; overflow-wrap:anywhere; }
.golden-label { display:block; color:var(--gold); font-size:12px; margin-top:5px; }
.trait-option.locked .golden-label { color:var(--blue); }
.trait-page { display:flex; justify-content:space-between; align-items:center; gap:15px; margin-top:23px; font-size:13px; }
.trait-page button { border:1px solid var(--line); padding:9px 14px; border-radius:30px; background:transparent; color:var(--cream); }
.build-details { margin-top:20px; border-top:1px solid var(--line); padding-top:15px; font-size:14px; }
.build-details summary { cursor:pointer; }
.build-details dl,.review-receipt { display:grid; grid-template-columns:1fr 1fr; gap:10px 22px; }
.build-details dl div,.review-receipt div { border-bottom:1px solid var(--line); padding-bottom:9px; }
.build-details dt,.review-receipt dt { color:var(--blue); font-size:12px; }
.build-details dd,.review-receipt dd { margin:0; font-size:14px; }
.review-spread { display:grid; grid-template-columns:.9fr 1fr; gap:9%; align-items:start; }
.review-spread h2 { margin:16px 0 23px; }
.review-receipt { margin:25px 0; }
.review-ack { display:flex; gap:12px; align-items:start; font-size:14px; margin:25px 0; }
.review-ack input { accent-color:var(--gold); width:22px; height:22px; flex-shrink:0; margin-top:3px; }
.review-actions { display:flex; gap:20px; flex-wrap:wrap; align-items:center; }
.review-permanent { padding:18px 0; border-block:1px solid var(--line); margin-top:25px!important; color:var(--gold); }
.outcome { display:grid; grid-template-columns:.9fr 1fr; gap:9%; align-items:center; padding:10px 0 40px; }
.outcome-art img { width:100%; border-radius:45%; }
.outcome h2 { margin:18px 0 25px; }
.outcome .exp-button { margin:25px 15px 0 0; }
.outcome-code { display:inline-block; border:1px solid var(--blue); border-radius:30px; padding:5px 12px; color:var(--blue); font-size:12px; }
.outcome.success .outcome-code { color:var(--gold); border-color:var(--gold); }
.studio-loading { padding:60px; text-align:center; color:var(--blue); }
.review-controls { padding:24px 5%; border-top:1px dashed var(--line); background:#1b284b66; }
.review-controls summary { cursor:pointer; font-size:14px; color:var(--blue); }
.review-controls summary span { float:right; font-size:12px; }
.review-fields { display:flex; gap:25px; flex-wrap:wrap; align-items:end; margin-top:20px; }
.review-fields label { display:flex; flex-direction:column; gap:8px; font-size:12px; color:var(--blue); }
.review-fields select { color:var(--cream); background:var(--deep); border:1px solid var(--line); border-radius:6px; padding:10px; font:14px var(--body); max-width:100%; }
.review-controls p { font-size:12px; color:var(--blue); margin-top:15px; }
.exp-dialog { width:min(520px,calc(100vw - 32px)); max-height:90dvh; overflow:auto; margin:auto; padding:46px 38px 32px; border:1px solid var(--blue); border-radius:36px 36px 12px 12px; color:var(--cream); background:var(--deep); }
.exp-dialog::backdrop { background:#10182cd9; backdrop-filter:blur(8px); }
.exp-dialog h2 { font-size:56px; color:var(--gold); margin:20px 0; }
.exp-dialog .exp-button { width:100%; margin-top:24px; }
.exp-dialog .text-button { display:flex; margin:10px auto; font-size:12px; }
.exp-close { position:absolute; right:20px; top:16px; background:none; border:0; color:var(--cream); font-size:28px; }
.wallet-provider { padding:20px 0; margin:18px 0; border-block:1px solid var(--line); }
.wallet-provider strong,.wallet-provider span { display:block; }
.wallet-provider span { color:var(--blue); font-size:12px; }
.wallet-feedback { color:#ffceae; font-size:14px; }
.exp-toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:500; background:var(--cream); color:var(--deep); padding:14px 24px; border-radius:22px; box-shadow:0 10px 40px #1118; max-width:min(560px,92vw); font-size:14px; }
.exp-noscript { padding:35px; background:var(--gold); color:var(--deep); }
@keyframes byord-drift { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-16px) rotate(2deg); } }
@keyframes studio-arrive { from { opacity:0; transform:translateY(15px); } to { opacity:1; transform:translateY(0); } }
.motion-paused .duck-card { animation:none; }
@media(min-width:1450px) { .exp-hero,.exp-section,.studio-shell { padding-left:max(6%,calc((100vw - 1500px)/2)); padding-right:max(6%,calc((100vw - 1500px)/2)); } }
@media(max-width:1199px) { .exp-header { flex-wrap:wrap; } .exp-header .desktop-nav { order:3; width:100%; justify-content:center; } .exp-header-actions { margin-left:auto; } .hero-film { margin-right:10px; } .exp-hero { min-height:650px; } .trait-options { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:899px) { .byord-experience .exp-header { min-height:86px; padding:17px 5%; gap:15px; } .exp-brand { font-size:34px; } .exp-brand span { font-size:9px; } .exp-header .desktop-nav { display:none; } .exp-header .menu-toggle { display:grid; } .exp-hero { grid-template-columns:1fr; padding:45px 6% 75px; gap:50px; } .exp-hero h1 { font-size:clamp(4.2rem,12vw,7rem); } .hero-film,.duck-showcase-art { width:82%; margin:0 auto; } .hero-footnote { margin-top:30px; } .exp-section { padding:65px 6%; } .exp-origin,.exp-entry,.exp-golden,.exp-faq { gap:40px; } .process-columns { gap:25px; } .exp-footer { flex-wrap:wrap; } .studio-subnav>span { display:none; } .studio-title h1 { order:-1; } .studio-title { gap:12px; } .editor-layout { grid-template-columns:.85fr 1fr; gap:4%; } .trait-options { gap:12px 8px; } .trait-option .trait-name { font-size:14px; } .editor-preview { top:20px; } .slot-gallery { gap:5%; } }
@media(max-width:639px) { .prototype-ribbon { font-size:10px; letter-spacing:.04em; } .prototype-ribbon span { display:block; margin:1px 0 0; font-size:11px; } .exp-wallet { padding:10px 13px; font-size:12px; min-height:42px; } .exp-wallet span { display:none; } .exp-header-actions { gap:10px; } .byord-experience .exp-header { gap:8px; } .exp-hero h1 { font-size:clamp(3.7rem,15vw,5.5rem); } .exp-hero .eyeline { max-width:260px; } .hero-actions { gap:16px; } .hero-film,.duck-showcase-art { width:88%; } .hero-film { rotate:0deg; } .art-note { font-size:24px; } .orbit-copy { font-size:10px; } .exp-origin,.exp-entry,.exp-golden,.exp-film,.exp-faq { grid-template-columns:1fr; } .exp-entry .entry-heading img { display:none; } .exp-entry { gap:32px; } .exp-banner img { min-height:150px; object-fit:cover; object-position:center; } .exp-banner p { font-size:11px; } .entry-lines article { padding-left:40px; } .entry-title-lockup { align-items:flex-start; gap:16px; } .genesis-brand-mark { flex-basis:150px; width:min(38%,150px); margin-top:5px; } .process-columns { grid-template-columns:1fr; gap:30px; } .process-columns article { padding-left:50px; position:relative; } .process-columns span { position:absolute; left:0; top:5px; border:0; } .process-columns h3 { font-size:28px; } .exp-process h2 { margin-bottom:40px; } .exp-footer { align-items:start; gap:28px; } .exp-footer>p { display:none; } .exp-footer .exp-brand { font-size:38px; } .exp-footer>div { font-size:12px; } .studio-shell { padding:30px 5% 45px; } .studio-subnav { font-size:12px; } .studio-subnav .text-button { font-size:12px; } .studio-title .eyeline { font-size:10px; } .studio-steps { margin:24px 0 32px; } .studio-steps li { font-size:11px; padding:10px 4px; } .studio-steps span { display:block; margin-bottom:6px; } .studio-view-heading { display:block; } .studio-view-heading>p { margin-top:20px; font-size:15px; } .access-spread { grid-template-columns:1fr; gap:20px; margin-top:25px; } .access-choice { padding:22px 0; } .access-tail { align-items:start; flex-direction:column; } .slot-gallery { gap:16px; grid-template-columns:repeat(2,minmax(0,1fr)); } .slot:nth-child(2) { padding-top:25px; } .slot:nth-child(3) { max-width:80%; } .slot .slot-label { font-size:13px; margin-top:18px; } .slot .slot-tag { font-size:11px; } .selection-foot { flex-direction:column; align-items:stretch; } .mint-spread { grid-template-columns:1fr; gap:15px; } .mint-egg { max-width:200px; margin:0 auto; padding:5px; } .mint-egg span { width:65px; height:65px; font-size:24px; right:-20px; } .mint-numbers h2 { margin-top:15px; } .mint-stepper input { font-size:60px; } .editor-layout { grid-template-columns:1fr; gap:24px; } .editor-preview { position:relative; top:0; display:grid; grid-template-columns:1fr; } .duck-canvas { max-width:330px; margin:0 auto; } .editor-preview .duck-canvas { max-width:300px; } .preview-heading { margin-bottom:8px; } .preview-tools { padding:3px 0; } .editor-preview .exp-button { min-height:48px; padding:10px; } .editor-note { font-size:11px; } .trait-options { grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px 8px; } .trait-option .trait-name { font-size:14px; } .category-rail { position:sticky; top:0; background:var(--navy); z-index:3; margin-inline:-5vw; padding-inline:5vw; padding-top:10px; } .trait-heading { margin-top:10px; } .review-spread,.outcome { grid-template-columns:1fr; gap:30px; } .review-art { max-width:290px; width:100%; margin:auto; } .outcome-art { max-width:290px; margin:auto; width:100%; } .review-receipt { gap:9px 14px; } .review-actions .exp-button { width:100%; } .review-controls summary span { float:none; display:block; margin-left:16px; } .review-fields { flex-direction:column; align-items:stretch; gap:16px; } .review-controls p { font-size:11px; } .exp-dialog { padding:40px 25px 25px; } .exp-dialog h2 { font-size:48px; } }
@media(max-width:899px) { .golden-samples { grid-template-columns:repeat(3,minmax(0,1fr)); } .golden-groups { grid-template-columns:repeat(2,minmax(0,1fr)); } .golden-foot { grid-template-columns:1fr; } }
@media(max-width:639px) { .golden-explainer { padding-top:0; } .golden-stats { grid-template-columns:1fr; } .golden-stats>div { padding:22px 0; } .golden-stats>div+div { border-top:1px solid var(--line); border-left:0; } .golden-stats dd { margin-top:10px; } .golden-samples { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 14px; } .golden-catalog-head { display:block; } .golden-catalog-head>p:last-child { margin-top:10px; text-align:left; } .golden-groups { grid-template-columns:1fr; } .golden-foot .exp-button { width:100%; white-space:normal; } }
@media(prefers-reduced-motion:reduce) { .byord-experience *, .byord-experience *::before,.byord-experience *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }