/* 33-dna-builder.css — Desktop DNA Builder (handoff 1:1) ───────────────────────────────────────────────────────────────────── Founder (2026-06-17): reskin the desktop DNA screen into the "DNA Builder" handoff — three ink-glass panels over the Blue Hour stage: Daily Formulas rail (left) · stepper Builder (center) · living DNA + commit (right). Source of truth: design_handoff_dna_builder/DNA Builder.html + dna-builder.js. Scope: a new desktop-only block `#dnaBuilder` rendered into #s-manual; the existing mobile/dtpk markup is hidden at >=1024 (kept intact for mobile + as the data substrate the existing handlers/buildAndShow read). The CSS is lifted ~verbatim from the mock with its :root tokens redefined LOCALLY on #dnaBuilder (same pattern as 28-desktop-songbrain.css) so contrast/spacing are identical without polluting the global palette. Responsive: the mock hard-codes min-width:1240 + fixed 312/372 rails, which would force horizontal scroll at 1024–1239. We instead drive the three columns off width vars and step them across the studio's breakpoint ladder (1024 → 1240 → 1680 → 1920 → 2240) so the builder breathes like the rest of the desktop studio (mirrors the #565 wide-monitor work). Mobile (<1024) never sees #dnaBuilder. Plain static CSS — no prompts/schemas/model-facing content. */ /* Hidden by default — mobile keeps the existing #s-manual UI untouched. The whole rest of this file lives inside the >=1024 query, so without this the builder div would render unstyled on mobile. */ #dnaBuilder { display: none; } @media (min-width: 1024px) { /* The builder is moved to by dna-builder.js (to escape #s-manual's slide transform) and shown only while the DNA screen is active, via body.dnab-open. It's fixed/full-viewport at z-index 700 so it covers the app top bar (the mock is a focused full screen; Back lives in the formulas rail). Hide the top bar + the existing dtpk/mobile markup while it's open. */ body.dnab-open #dnaBuilder { display: grid; } body.dnab-open #dtTopBar { display: none !important; } body.dnab-open #s-manual .dtpk-shell, body.dnab-open #s-manual .topnav { display: none !important; } /* ══════════ Local Blue Hour tokens (lifted from the mock :root) ══════════ */ #dnaBuilder { --void:#030708; --obsidian:#040a0c; --ink:#030d0f; --surface:#081012; --raised:#0e191b; --float:#142224; --gold:rgb(var(--gold-rgb)); --gold-hi:#e8c070; --gold-lo:#9e7d3a; --antique:#8c6a2e; --teal:rgb(var(--teal-rgb)); --sage:rgb(var(--sage-rgb)); --rose:rgb(var(--rose-rgb)); --dusk:rgb(var(--dusk-rgb)); --sand:rgb(var(--sand-rgb)); --copper:#b86848; --t1:#e7dfc6; --t2:#b9b09a; --t3:#808080; --t4:#555555; --ivory-hi:#f4ecd4; --cream-rgb:231,223,198; --font-display:'Cormorant Garamond',Georgia,serif; --font-body:'Outfit',-apple-system,BlinkMacSystemFont,sans-serif; --font-mono:'DM Mono',ui-monospace,Menlo,monospace; --ease-out:cubic-bezier(0.22,0.61,0.36,1); --acc-rgb:var(--gold-rgb); --acc:rgb(var(--gold-rgb)); --acc-hi:#e8c070; --acc-lo:#9e7d3a; --acc-g-hi:#d3aa5e; --acc-g-mid:#bd9445; --acc-g-lo:#9c7734; --acc-ink:#1c1409; --tw-grain:0.015; --tw-glow:1.25; --tw-edge:1.55; --tw-vignette:0.2; --tw-depth:0.65; --tw-recess:0.7; --tw-radius:13px; --tw-gold:0.75; --hair:rgba(var(--ivory-rgb),0.08); --line:rgba(var(--ivory-rgb),0.13); --acc-line:rgba(var(--acc-rgb), calc(0.30*var(--tw-gold))); --pad:1; --grain-tex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.62 0 0 0 0 0.66 0 0 0 0 0.66 0.85 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); /* responsive column widths (default 1024–1239 — scaled down from the mock so it never overflows; grown at wider bands below) */ --dnab-left: 264px; --dnab-right: 312px; position: fixed; inset: 0; z-index: 700; grid-template-columns: var(--dnab-left) 1fr var(--dnab-right); gap: 1px; color: var(--t1); font-family: var(--font-body); background: radial-gradient(125% 75% at 50% -12%, rgba(var(--acc-rgb),0.13) 0%, rgba(var(--acc-rgb),0.03) 18%, transparent 46%), radial-gradient(80% 55% at 82% 4%, rgba(var(--teal-rgb),0.10) 0%, transparent 55%), radial-gradient(70% 50% at 14% 12%, rgba(var(--teal-rgb),0.06) 0%, transparent 60%), radial-gradient(150% 90% at 50% 120%, rgba(40, 92, 98,0.16) 0%, transparent 56%), linear-gradient(180deg,#050d0e 0%,#040a0c 54%,#030708 100%); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @media (min-width: 1240px) { #dnaBuilder { --dnab-left: 312px; --dnab-right: 372px; } } @media (min-width: 1680px) { #dnaBuilder { --dnab-left: 336px; --dnab-right: 400px; } } @media (min-width: 1920px) { #dnaBuilder { --dnab-left: 372px; --dnab-right: 440px; } } @media (min-width: 2240px) { #dnaBuilder { --dnab-left: 408px; --dnab-right: 480px; } } /* film grain over everything */ #dnaBuilder .grain { position: absolute; inset: 0; z-index: 60; pointer-events: none; background-image: var(--grain-tex); background-size: 150px 150px; opacity: var(--tw-grain); } @media (prefers-reduced-transparency: reduce) { #dnaBuilder .grain { display: none; } } #dnaBuilder .panel { position: relative; min-height: 0; overflow-y: auto; overflow-x: hidden; } #dnaBuilder .panel::-webkit-scrollbar { width: 9px; } #dnaBuilder .panel::-webkit-scrollbar-thumb { background: rgba(var(--cream-rgb),0.07); border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; } #dnaBuilder .panel::-webkit-scrollbar-thumb:hover { background: rgba(var(--cream-rgb),0.15); background-clip: padding-box; } /* Rails + center base back to their original colorful state (founder 2026-06-18: the dark "bar contrast" killed the page's color — reverted). Richness now comes from the cards (.ink below), not from darkening these. */ #dnaBuilder .formulas-panel, #dnaBuilder .dna-panel { background: linear-gradient(176deg, rgba(12, 22, 24,0.94) 0%, rgba(6, 14, 16,0.96) 60%, rgba(4, 11, 13,0.97) 100%); } #dnaBuilder .build-panel { background: radial-gradient(78% 48% at 50% -2%, rgba(var(--acc-rgb), calc(0.06*var(--tw-glow))) 0%, transparent 60%), radial-gradient(120% 64% at 50% 6%, rgba(var(--teal-rgb), calc(0.045*var(--tw-glow))) 0%, transparent 56%), radial-gradient(90% 50% at 50% 118%, rgba(40, 92, 98, calc(0.10*var(--tw-glow))) 0%, transparent 60%), linear-gradient(180deg, rgba(7, 15, 17,0.5) 0%, rgba(4, 10, 12,0.7) 46%, rgba(3, 7, 9,0.84) 100%); /* Vertical (X=0) inset depth only. The horizontal ±24px insets posterized into a dark vertical band on the panel's inner edges (founder 2026-06-18) — removed; the top recess + bottom vignette keep the depth. */ box-shadow: inset 0 20px 44px -34px rgba(0,0,0, calc(0.9*var(--tw-recess))), inset 0 -70px 100px -60px rgba(0,0,0, calc(0.7*var(--tw-vignette))); } /* gold edge-light seams between panels (tapered) */ #dnaBuilder .seam { position: absolute; top: 0; width: 1px; height: 100%; z-index: 5; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(var(--acc-rgb), calc(0.22*var(--tw-edge))) 10%, rgba(var(--cream-rgb),0.06) 50%, rgba(var(--acc-rgb), calc(0.22*var(--tw-edge))) 90%, transparent); } #dnaBuilder .seam.s1 { left: var(--dnab-left); } #dnaBuilder .seam.s2 { right: var(--dnab-right); } /* shared ink-glass material (formula + option cards). Richer cream fill + more lift (founder 2026-06-18: bring the richness through the cards, not by darkening the rails). */ #dnaBuilder .ink { background: linear-gradient(180deg, rgba(var(--cream-rgb),0.05), rgba(var(--cream-rgb),0.013)); border: 1px solid var(--hair); box-shadow: 0 1px 0 rgba(var(--cream-rgb), calc(0.07*var(--tw-edge))) inset, 0 16px 32px -18px rgba(0,0,0, calc(0.95*var(--tw-depth))), 0 3px 9px -5px rgba(0,0,0, calc(0.6*var(--tw-depth))); } /* selected accent treatment — dark interior + gold frame + halo */ #dnaBuilder .acc-sel { border-color: rgba(var(--acc-rgb), calc(0.5*var(--tw-gold))); box-shadow: 0 1px 0 rgba(var(--cream-rgb),0.06) inset, 0 0 0 1px rgba(var(--acc-rgb), calc(0.2*var(--tw-gold))), 0 0 28px -8px rgba(var(--acc-rgb), calc(0.42*var(--tw-gold))), 0 14px 30px -18px #000; background: linear-gradient(180deg, rgba(var(--acc-rgb),0.06), rgba(var(--acc-rgb),0.014)); } /* ───────── LEFT · Daily Formulas ───────── */ #dnaBuilder .formulas-panel { padding: calc(26px*var(--pad)) 20px; display: flex; flex-direction: column; } #dnaBuilder .backlink { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--t3); padding: 8px 13px 8px 9px; border: 1px solid var(--hair); border-radius: 999px; background: rgba(var(--cream-rgb),0.015); cursor: pointer; transition: all .2s var(--ease-out); margin-bottom: 22px; } #dnaBuilder .backlink:hover { color: var(--t1); border-color: var(--line); } #dnaBuilder .backlink svg { width: 13px; height: 13px; } #dnaBuilder .fm-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; } #dnaBuilder .fm-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--acc); } #dnaBuilder .fm-shuffle { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--hair); background: rgba(var(--cream-rgb),0.015); color: var(--t3); cursor: pointer; transition: all .2s var(--ease-out); } #dnaBuilder .fm-shuffle:hover { color: var(--acc); border-color: var(--acc-line); transform: rotate(-30deg); } #dnaBuilder .fm-shuffle svg { width: 14px; height: 14px; } #dnaBuilder .fm-leder { font-size: 12.5px; line-height: 1.55; color: var(--t3); margin: 9px 0 18px; } #dnaBuilder .formulas { display: flex; flex-direction: column; gap: 10px; flex: 1; } #dnaBuilder .formula { position: relative; border-radius: 14px; padding: 15px 16px; cursor: pointer; overflow: hidden; transition: border-color .2s var(--ease-out), box-shadow .25s var(--ease-out), transform .15s var(--ease-out); } #dnaBuilder .formula:hover { transform: translateY(-2px); border-color: var(--acc-line); box-shadow: 0 1px 0 rgba(var(--cream-rgb),0.06) inset, 0 16px 34px -20px #000, 0 0 22px -12px rgba(var(--acc-rgb),0.4); } #dnaBuilder .formula::before { content: ""; position: absolute; top: 0; left: 14px; right: 14px; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--acc-rgb), calc(0.4*var(--tw-edge))) 50%, transparent); opacity: 0; transition: opacity .25s; } #dnaBuilder .formula:hover::before { opacity: 1; } #dnaBuilder .formula .f-top { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; } #dnaBuilder .formula .f-glyph { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--acc); flex-shrink: 0; } #dnaBuilder .formula .f-glyph svg { width: 17px; height: 17px; } #dnaBuilder .formula .f-title { font-family: var(--font-display); font-style: italic; font-size: 19px; line-height: 1.05; color: var(--t1); } #dnaBuilder .formula .f-desc { font-size: 12px; color: var(--t3); line-height: 1.5; margin-bottom: 11px; } #dnaBuilder .formula .f-tags { display: flex; flex-wrap: wrap; gap: 5px; } #dnaBuilder .formula .f-tag { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--t2); padding: 3px 8px; border-radius: 999px; background: rgba(var(--cream-rgb),0.04); border: 1px solid var(--hair); } #dnaBuilder .fm-surprise { margin-top: 14px; width: 100%; padding: 13px; border-radius: 12px; cursor: pointer; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--t2); background: rgba(var(--cream-rgb),0.02); border: 1px dashed var(--line); transition: all .2s var(--ease-out); display: flex; align-items: center; justify-content: center; gap: 9px; } #dnaBuilder .fm-surprise:hover { color: var(--acc); border-color: var(--acc-line); } #dnaBuilder .fm-surprise svg { width: 14px; height: 14px; } /* ───────── CENTER · Builder ───────── */ /* overflow:hidden so the column itself never scrolls — the tabbar, stepper and Prev/Next bar stay put; only .build-body (below) scrolls. Without this the whole column scrolled AND the dim content overflowed its flex box, spilling behind the semi-transparent step-nav. */ #dnaBuilder .build-panel { display: flex; flex-direction: column; overflow: hidden; } #dnaBuilder .build-inner { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100%; } #dnaBuilder .bld-tabbar { position: sticky; top: 0; z-index: 10; display: flex; gap: 32px; padding: 22px 52px 0; background: linear-gradient(180deg, rgba(4, 9, 11,0.92) 72%, transparent); } #dnaBuilder .bld-tab { position: relative; padding: 0 0 15px; background: none; border: 0; cursor: pointer; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--t4); transition: color .2s var(--ease-out); } #dnaBuilder .bld-tab:hover { color: var(--t2); } #dnaBuilder .bld-tab.on { color: var(--acc); } #dnaBuilder .bld-tab.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; background: var(--acc); box-shadow: 0 0 8px rgba(var(--acc-rgb),0.5); } #dnaBuilder .tabbar-rule { height: 1px; background: var(--hair); margin: 0 52px; } /* horizontal dimension stepper */ #dnaBuilder .stepper { display: flex; gap: 8px; padding: 18px 52px 0; } #dnaBuilder .stp { position: relative; flex: 1; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; cursor: pointer; transition: border-color .2s var(--ease-out), background .2s var(--ease-out); min-width: 0; } #dnaBuilder .stp .s-glyph { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--t3); flex-shrink: 0; transition: all .2s var(--ease-out); } #dnaBuilder .stp .s-glyph svg { width: 16px; height: 16px; } #dnaBuilder .stp .s-meta { min-width: 0; } #dnaBuilder .stp .s-rn { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t4); } #dnaBuilder .stp .s-nm { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--t3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #dnaBuilder .stp:hover { background: rgba(var(--cream-rgb),0.025); } #dnaBuilder .stp:hover .s-glyph { color: var(--t2); } #dnaBuilder .stp.active .s-glyph { color: var(--acc); border: 1px solid var(--acc-line); background: rgba(var(--acc-rgb),0.06); } #dnaBuilder .stp.active .s-nm { color: var(--t1); } #dnaBuilder .stp.active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 1.5px; border-radius: 2px; background: var(--acc); box-shadow: 0 0 8px rgba(var(--acc-rgb),0.5); } #dnaBuilder .stp.filled .s-glyph { color: var(--acc-hi); } #dnaBuilder .stp .s-dot { position: absolute; top: 9px; right: 11px; width: 5px; height: 5px; border-radius: 999px; background: var(--acc); opacity: 0; box-shadow: 0 0 7px rgba(var(--acc-rgb),0.7); transition: opacity .2s; } #dnaBuilder .stp.filled .s-dot { opacity: 1; } #dnaBuilder #dnabBuildPane { flex: 1; display: flex; flex-direction: column; min-height: 0; } #dnaBuilder .build-body { flex: 1; display: flex; flex-direction: column; justify-content: safe center; padding: 34px 56px; min-height: 0; overflow-y: auto; } #dnaBuilder .build-body::-webkit-scrollbar { width: 9px; } #dnaBuilder .build-body::-webkit-scrollbar-thumb { background: rgba(var(--cream-rgb),0.07); border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; } #dnaBuilder .build-body::-webkit-scrollbar-thumb:hover { background: rgba(var(--cream-rgb),0.15); background-clip: padding-box; } #dnaBuilder #dnabDims { width: 100%; } #dnaBuilder .dim { display: none; animation: dnabFade .4s var(--ease-out); } #dnaBuilder .dim.show { display: block; } @keyframes dnabFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { #dnaBuilder .dim { animation: none; } } #dnaBuilder .dim-head { display: flex; align-items: baseline; gap: 13px; margin-bottom: 4px; } #dnaBuilder .dim-num { font-family: var(--font-display); font-style: italic; font-size: 19px; color: var(--acc); } #dnaBuilder .dim-name { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--t2); } #dnaBuilder .dim-pick { margin-left: auto; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--t4); } #dnaBuilder .dim-q { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 33px; line-height: 1.08; color: var(--t1); margin: 9px 0 24px; letter-spacing: -0.005em; } /* option cards */ /* Mood/Energy editorial cards. Founder override (2026-06-17): force a column count per breakpoint instead of the mock's auto-fit (which only reached 3-up on very wide screens) so the dimension fits with far less scrolling. Base 2 cols (1024–1439, where the cards need the width); 3 at >=1440; 4 at >=1920 (see the blocks at the end of this file). */ #dnaBuilder .opt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } #dnaBuilder .opt { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; min-height: calc(116px*var(--pad)); padding: 20px 12px; border-radius: 13px; cursor: pointer; text-align: center; color: var(--t2); transition: border-color .2s var(--ease-out), box-shadow .25s var(--ease-out), transform .12s var(--ease-out), background .2s var(--ease-out); } #dnaBuilder .opt .ic-well { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, rgba(var(--cream-rgb),0.05), rgba(var(--cream-rgb),0.01)); box-shadow: inset 0 1px 1px rgba(var(--cream-rgb),0.06), inset 0 -2px 4px rgba(0,0,0,0.4); transition: all .25s var(--ease-out); } #dnaBuilder .opt .ic-well svg { width: 23px; height: 23px; color: var(--t3); transition: color .2s var(--ease-out); } #dnaBuilder .opt .lab { font-size: 14px; color: var(--t2); transition: color .2s var(--ease-out); letter-spacing: 0.005em; } #dnaBuilder .opt:hover { border-color: var(--acc-line); transform: translateY(-2px); } #dnaBuilder .opt:hover .ic-well svg { color: var(--t1); } #dnaBuilder .opt:active { transform: scale(0.97); } #dnaBuilder .opt.sel .ic-well { background: radial-gradient(circle at 50% 35%, rgba(var(--acc-rgb),0.22), rgba(var(--acc-rgb),0.05)); box-shadow: inset 0 1px 1px rgba(var(--acc-rgb),0.3), inset 0 -2px 5px rgba(0,0,0,0.4), 0 0 14px -4px rgba(var(--acc-rgb),0.5); } #dnaBuilder .opt.sel .ic-well svg { color: var(--acc-hi); } #dnaBuilder .opt.sel .lab { color: var(--ivory-hi); } /* editorial card variant — icon + serif name + descriptor */ #dnaBuilder .opt.card { display: grid; grid-template-columns: 46px 1fr; align-items: center; justify-items: start; text-align: left; gap: 15px; min-height: auto; padding: 17px 19px; } #dnaBuilder .opt.card .ic-well { width: 46px; height: 46px; } #dnaBuilder .opt-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; align-items: flex-start; } #dnaBuilder .opt-name { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 22px; line-height: 1.02; color: var(--t1); letter-spacing: 0.005em; transition: color .2s var(--ease-out); } #dnaBuilder .opt-desc { font-size: 11.5px; color: var(--t3); letter-spacing: 0.012em; line-height: 1.3; transition: color .2s var(--ease-out); } #dnaBuilder .opt.card.sel .opt-name { color: var(--ivory-hi); } #dnaBuilder .opt.card.sel .opt-desc { color: var(--t2); } /* rotation + pairings */ #dnaBuilder .mood-extras { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 22px 0 0; padding-top: 20px; border-top: 1px solid var(--hair); } #dnaBuilder .me-head { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--t4); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } #dnaBuilder .me-head .live { width: 5px; height: 5px; border-radius: 999px; background: var(--sage); box-shadow: 0 0 7px rgba(var(--sage-rgb),0.8); } #dnaBuilder .chip-row { display: flex; flex-wrap: wrap; gap: 8px; } #dnaBuilder .chip { position: relative; padding: 9px 15px; border-radius: 999px; cursor: pointer; font-size: 13px; color: var(--t2); background: linear-gradient(180deg, rgba(var(--cream-rgb),0.075), rgba(var(--cream-rgb),0.028)); border: 1px solid rgba(var(--cream-rgb),0.13); box-shadow: 0 1px 0 rgba(var(--cream-rgb),0.09) inset, 0 5px 13px -6px rgba(0,0,0,0.85), 0 1px 2px rgba(0,0,0,0.45); transition: border-color .2s var(--ease-out), color .2s var(--ease-out), box-shadow .25s var(--ease-out), transform .12s var(--ease-out), background .2s var(--ease-out); } #dnaBuilder .chip:hover { border-color: var(--acc-line); color: var(--t1); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(var(--cream-rgb),0.12) inset, 0 9px 20px -7px rgba(0,0,0,0.9), 0 0 16px -7px rgba(var(--acc-rgb),0.45); } #dnaBuilder .chip:active { transform: scale(0.97); } #dnaBuilder .chip.sel { border-color: rgba(var(--acc-rgb), calc(0.5*var(--tw-gold))); color: var(--ivory-hi); background: linear-gradient(180deg, rgba(var(--acc-rgb),0.11), rgba(var(--acc-rgb),0.035)); box-shadow: 0 1px 0 rgba(var(--cream-rgb),0.1) inset, 0 0 0 1px rgba(var(--acc-rgb), calc(0.22*var(--tw-gold))), 0 0 22px -7px rgba(var(--acc-rgb), calc(0.55*var(--tw-gold))), 0 6px 15px -7px #000; } #dnaBuilder .chip.pair { font-family: var(--font-display); font-style: italic; font-size: 15px; padding: 8px 16px; letter-spacing: 0.01em; } #dnaBuilder .chip.pair .amp { color: var(--acc); opacity: 0.7; font-style: normal; padding: 0 3px; } #dnaBuilder .field { margin-top: 18px; } #dnaBuilder .field input { width: 100%; font-family: var(--font-body); font-size: 15px; color: var(--t1); background: rgba(3, 7, 9,0.6); border: 1px solid var(--hair); border-radius: 11px; padding: 13px 16px; outline: none; box-shadow: inset 0 2px 8px -4px rgba(0,0,0,0.7); transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out); } #dnaBuilder .field input::placeholder { color: var(--t4); } #dnaBuilder .field input:focus { border-color: var(--acc-line); box-shadow: inset 0 2px 8px -4px rgba(0,0,0,0.7), 0 0 0 3px rgba(var(--acc-rgb),0.07); } #dnaBuilder .field.avoid input { border-color: rgba(var(--rose-rgb),0.18); } #dnaBuilder .field.avoid input:focus { border-color: rgba(var(--rose-rgb),0.4); box-shadow: inset 0 2px 8px -4px rgba(0,0,0,0.7), 0 0 0 3px rgba(var(--rose-rgb),0.07); } /* approach cards */ #dnaBuilder .appr-group { display: flex; flex-direction: column; gap: 11px; } #dnaBuilder .appr { position: relative; display: grid; grid-template-columns: 48px 1fr 22px; align-items: center; gap: 15px; padding: 18px 20px; border-radius: 14px; cursor: pointer; transition: border-color .2s var(--ease-out), box-shadow .25s var(--ease-out), background .2s var(--ease-out), transform .12s var(--ease-out); } #dnaBuilder .appr:hover { border-color: var(--acc-line); transform: translateY(-2px); } #dnaBuilder .appr:active { transform: scale(0.99); } #dnaBuilder .appr .ic { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; color: var(--t1); box-shadow: inset 0 1px 1px rgba(var(--cream-rgb),0.08), inset 0 -2px 5px rgba(0,0,0,0.35); } #dnaBuilder .appr .ic svg { width: 23px; height: 23px; } #dnaBuilder .appr .a-title { font-family: var(--font-display); font-style: italic; font-size: 21px; color: var(--t1); } #dnaBuilder .appr .a-desc { font-size: 12.5px; color: var(--t3); margin-top: 3px; line-height: 1.5; } #dnaBuilder .appr .a-check { width: 22px; height: 22px; border-radius: 999px; border: 1px solid var(--hair); display: grid; place-items: center; color: transparent; font-size: 12px; transition: all .2s var(--ease-out); } #dnaBuilder .appr.sel .a-check { border-color: var(--acc); background: var(--acc); color: var(--acc-ink); } /* sound groups */ #dnaBuilder .snd-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--t3); margin: 0 0 11px; } #dnaBuilder .snd-sub { font-size: 12.5px; color: var(--t4); margin: -5px 0 12px; } #dnaBuilder .seg { display: flex; gap: 8px; } #dnaBuilder .seg .opt { flex: 1; flex-direction: row; min-height: 58px; padding: 0 16px; gap: 11px; } #dnaBuilder .seg .opt .ic-well { width: 30px; height: 30px; } #dnaBuilder .seg .opt .ic-well svg { width: 17px; height: 17px; } /* instrument palette */ #dnaBuilder .inst-palette { padding-bottom: 22px; } #dnaBuilder .inst-fam { display: grid; grid-template-columns: 118px 1fr; gap: 16px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--hair); } #dnaBuilder .inst-fam:first-of-type { border-top: 0; padding-top: 6px; } #dnaBuilder .fam-label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--t4); padding-top: 11px; } #dnaBuilder .fam-items { display: flex; flex-wrap: wrap; gap: 8px; } #dnaBuilder .inst { display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px 9px 10px; border-radius: 11px; cursor: pointer; user-select: none; font-size: 13.5px; color: var(--t2); background: linear-gradient(180deg, rgba(var(--cream-rgb),0.075), rgba(var(--cream-rgb),0.028)); border: 1px solid rgba(var(--cream-rgb),0.13); box-shadow: 0 1px 0 rgba(var(--cream-rgb),0.09) inset, 0 5px 13px -6px rgba(0,0,0,0.85), 0 1px 2px rgba(0,0,0,0.45); transition: border-color .18s var(--ease-out), color .18s var(--ease-out), background .18s var(--ease-out), transform .12s var(--ease-out), box-shadow .2s var(--ease-out); } #dnaBuilder .inst .st { width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; color: var(--t4); border: 1px solid var(--line); transition: all .18s var(--ease-out); } #dnaBuilder .inst .st svg { width: 11px; height: 11px; } #dnaBuilder .inst:hover { border-color: var(--acc-line); color: var(--t1); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(var(--cream-rgb),0.12) inset, 0 9px 20px -7px rgba(0,0,0,0.9), 0 0 16px -7px rgba(var(--acc-rgb),0.45); } #dnaBuilder .inst:hover .st { color: var(--t2); border-color: var(--acc-line); } #dnaBuilder .inst:active { transform: scale(0.97); } #dnaBuilder .inst.inc { border-color: rgba(var(--acc-rgb),0.5); color: var(--acc-hi); background: linear-gradient(180deg, rgba(var(--acc-rgb),0.11), rgba(var(--acc-rgb),0.035)); box-shadow: 0 1px 0 rgba(var(--cream-rgb),0.1) inset, 0 0 0 1px rgba(var(--acc-rgb),0.2), 0 0 20px -8px rgba(var(--acc-rgb),0.5), 0 5px 13px -7px #000; } #dnaBuilder .inst.inc .st { color: var(--acc-ink); background: var(--acc); border-color: var(--acc); } #dnaBuilder .inst.exc { border-color: rgba(var(--rose-rgb),0.42); color: var(--rose); background: linear-gradient(180deg, rgba(var(--rose-rgb),0.08), rgba(var(--rose-rgb),0.03)); box-shadow: 0 1px 0 rgba(var(--cream-rgb),0.07) inset, 0 4px 11px -6px #000; } #dnaBuilder .inst.exc .ilab { text-decoration: line-through; opacity: 0.9; } #dnaBuilder .inst.exc .st { color: #1a0d10; background: var(--rose); border-color: var(--rose); } /* genre categories */ #dnaBuilder .genre-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } #dnaBuilder .genre-cat { position: relative; border: 1px solid rgba(var(--cream-rgb),0.09); border-radius: 16px; padding: 22px 22px 24px; background: linear-gradient(180deg, rgba(var(--cream-rgb),0.022) 0%, rgba(var(--cream-rgb),0.006) 42%, rgba(3, 9, 11,0.12) 100%); box-shadow: 0 1px 0 rgba(var(--cream-rgb), calc(0.05*var(--tw-edge))) inset, 0 13px 28px -22px #000, 0 2px 7px -6px rgba(0,0,0,0.5); transition: border-color .25s var(--ease-out), box-shadow .3s var(--ease-out); } #dnaBuilder .genre-cat::before { content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--acc-rgb), calc(0.32*var(--tw-edge))) 50%, transparent); } #dnaBuilder .genre-cat:hover { border-color: rgba(var(--cream-rgb),0.13); box-shadow: 0 1px 0 rgba(var(--cream-rgb), calc(0.07*var(--tw-edge))) inset, 0 16px 34px -22px #000, 0 0 20px -14px rgba(var(--acc-rgb),0.32); } #dnaBuilder .genre-cat .cat-label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--t4); margin-bottom: 14px; padding-bottom: 11px; border-bottom: 1px solid var(--hair); } #dnaBuilder .genre-cat .chip { font-size: 14.5px; padding: 10px 17px; } /* sound — structured columns */ #dnaBuilder .snd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; } #dnaBuilder .snd-box { position: relative; padding: 18px 18px 20px; border-radius: 14px; border: 1px solid rgba(var(--cream-rgb),0.09); background: linear-gradient(180deg, rgba(var(--cream-rgb),0.022) 0%, rgba(var(--cream-rgb),0.006) 42%, rgba(3, 9, 11,0.12) 100%); box-shadow: 0 1px 0 rgba(var(--cream-rgb), calc(0.05*var(--tw-edge))) inset, 0 13px 28px -22px #000, 0 2px 7px -6px rgba(0,0,0,0.5); transition: border-color .25s var(--ease-out), box-shadow .3s var(--ease-out); } #dnaBuilder .snd-box::before { content: ""; position: absolute; top: 0; left: 22px; right: 22px; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--acc-rgb), calc(0.32*var(--tw-edge))) 50%, transparent); } #dnaBuilder .snd-box:hover { border-color: rgba(var(--cream-rgb),0.13); box-shadow: 0 1px 0 rgba(var(--cream-rgb), calc(0.07*var(--tw-edge))) inset, 0 16px 34px -22px #000, 0 0 20px -14px rgba(var(--acc-rgb),0.32); } #dnaBuilder .snd-box.full { margin-top: 18px; } #dnaBuilder .snd-box .snd-label { margin-bottom: 12px; } #dnaBuilder .snd-box .seg { max-width: none; } /* prev / next nav */ #dnaBuilder .step-nav { display: flex; align-items: center; justify-content: space-between; padding: 20px 56px; border-top: 1px solid var(--hair); background: linear-gradient(180deg, transparent, rgba(3, 7, 9,0.45)); } #dnaBuilder .ghost-btn { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: 11px; cursor: pointer; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t3); background: none; border: 1px solid var(--hair); transition: all .2s var(--ease-out); } #dnaBuilder .ghost-btn:hover { color: var(--t1); border-color: var(--line); } #dnaBuilder .ghost-btn svg { width: 14px; height: 14px; } #dnaBuilder .ghost-btn.hidden { visibility: hidden; } #dnaBuilder .next-btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 11px; cursor: pointer; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--acc); background: rgba(var(--acc-rgb),0.05); border: 1px solid var(--acc-line); transition: all .2s var(--ease-out); } #dnaBuilder .next-btn:hover { background: rgba(var(--acc-rgb),0.1); color: var(--acc-hi); } #dnaBuilder .next-btn svg { width: 15px; height: 15px; } #dnaBuilder .next-btn .nx { color: var(--t3); } /* photo / prompt panes — in-tab (swap with the build pane), themed to match the build screen. They scroll within the center column like .build-body. */ #dnaBuilder .alt-pane { display: none; flex: 1; min-height: 0; overflow-y: auto; padding: 34px 56px 60px; position: relative; z-index: 1; } #dnaBuilder .alt-pane.show { display: block; animation: dnabFade .4s var(--ease-out); } #dnaBuilder .alt-pane::-webkit-scrollbar { width: 9px; } #dnaBuilder .alt-pane::-webkit-scrollbar-thumb { background: rgba(var(--cream-rgb),0.07); border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; } #dnaBuilder .alt-pane::-webkit-scrollbar-thumb:hover { background: rgba(var(--cream-rgb),0.15); background-clip: padding-box; } #dnaBuilder .alt-inner { max-width: 640px; margin: 0 auto; } #dnaBuilder .alt-title { font-family: var(--font-display); font-weight: 300; font-size: 33px; line-height: 1.1; letter-spacing: -0.005em; color: var(--t1); margin: 0 0 12px; } #dnaBuilder .alt-title em { font-style: italic; color: var(--acc); } #dnaBuilder .alt-sub { font-size: 14.5px; line-height: 1.6; color: var(--t3); margin: 0 0 18px; } #dnaBuilder .alt-quote { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 15.5px; line-height: 1.5; color: var(--acc); opacity: 0.8; padding-left: 14px; border-left: 1px solid rgba(var(--acc-rgb),0.35); margin: 0 0 26px; } #dnaBuilder .alt-group { margin-top: 22px; } #dnaBuilder .alt-group:first-of-type { margin-top: 0; } #dnaBuilder .alt-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--t3); margin: 0 0 10px; } #dnaBuilder .alt-label .alt-opt { color: var(--t4); letter-spacing: 0.04em; } #dnaBuilder .alt-pane .field { margin-top: 0; } #dnaBuilder .field textarea { width: 100%; font-family: var(--font-body); font-size: 15px; color: var(--t1); line-height: 1.6; background: rgba(3, 7, 9,0.6); border: 1px solid var(--hair); border-radius: 11px; padding: 13px 16px; outline: none; resize: none; min-height: 80px; box-shadow: inset 0 2px 8px -4px rgba(0,0,0,0.7); transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out); } #dnaBuilder .field textarea.tall { min-height: 122px; } #dnaBuilder .field textarea::placeholder { color: var(--t4); } #dnaBuilder .field textarea:focus { border-color: var(--acc-line); box-shadow: inset 0 2px 8px -4px rgba(0,0,0,0.7), 0 0 0 3px rgba(var(--acc-rgb),0.07); } /* upload dropzone */ #dnaBuilder .alt-upload { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; cursor: pointer; padding: 22px; border-radius: 14px; margin: 0 0 22px; background: linear-gradient(180deg, rgba(var(--acc-rgb),0.05), rgba(var(--acc-rgb),0.012)); border: 1px dashed rgba(var(--acc-rgb),0.32); transition: border-color .2s var(--ease-out), background .2s var(--ease-out); } #dnaBuilder .alt-upload:hover { border-color: rgba(var(--acc-rgb),0.55); background: linear-gradient(180deg, rgba(var(--acc-rgb),0.08), rgba(var(--acc-rgb),0.02)); } #dnaBuilder .alt-upload .au-icon { width: 52px; height: 52px; flex-shrink: 0; border-radius: 14px; display: grid; place-items: center; color: var(--acc); background: rgba(var(--acc-rgb),0.08); border: 1px solid rgba(var(--acc-rgb),0.22); } #dnaBuilder .alt-upload .au-icon svg { width: 22px; height: 22px; } #dnaBuilder .alt-upload .au-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; } #dnaBuilder .alt-upload .au-title { font-family: var(--font-display); font-style: italic; font-size: 19px; color: var(--t1); line-height: 1.2; } #dnaBuilder .alt-upload .au-hint { font-size: 13px; color: var(--t3); line-height: 1.4; } /* preview image (hidden until a photo loads, then mirrored in by JS) */ #dnaBuilder .alt-preview { display: none; width: 100%; max-height: 300px; object-fit: cover; border-radius: 14px; margin: 0 0 18px; border: 1px solid var(--hair); box-shadow: 0 16px 36px -22px #000; } #dnaBuilder .alt-preview.loaded { display: block; } /* pane submit reuses .commit; just give it breathing room */ #dnaBuilder .alt-submit { margin-top: 28px; } /* Full-screen photo / prompt (founder 2026-06-18): these tabs don't need the side rails — no Daily Formulas to load, no incremental "DNA forming" card. Drop both rails + the seams and let the center span the whole builder. The tab strip stays (it's how you switch modes) and shows a Back control, since the rail's Back button is hidden. .solo is toggled by switchTab(). */ #dnaBuilder.solo { grid-template-columns: 1fr; } #dnaBuilder.solo .formulas-panel, #dnaBuilder.solo .dna-panel, #dnaBuilder.solo .seam { display: none; } #dnaBuilder.solo .alt-inner { max-width: 680px; } #dnaBuilder .bld-back { display: none; align-items: center; justify-content: center; align-self: center; flex-shrink: 0; width: 30px; height: 30px; margin: -2px 0 13px; padding: 0; border-radius: 8px; border: 1px solid var(--hair); background: rgba(var(--cream-rgb),0.015); color: var(--t3); cursor: pointer; transition: color .2s var(--ease-out), border-color .2s var(--ease-out); } #dnaBuilder .bld-back svg { width: 15px; height: 15px; } #dnaBuilder .bld-back:hover { color: var(--t1); border-color: var(--line); } #dnaBuilder.solo .bld-back { display: inline-flex; } /* ───────── RIGHT · Living DNA ───────── */ #dnaBuilder .dna-panel { padding: calc(28px*var(--pad)) 24px; display: flex; flex-direction: column; } #dnaBuilder .dna-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--acc); margin-bottom: 8px; } #dnaBuilder .dna-title { font-family: var(--font-display); font-size: 27px; font-weight: 300; line-height: 1.06; letter-spacing: -0.01em; color: var(--t1); margin-bottom: 7px; } #dnaBuilder .dna-title em { font-style: italic; color: var(--acc); } #dnaBuilder .dna-leder { font-size: 12.5px; line-height: 1.55; color: var(--t3); margin-bottom: 20px; } #dnaBuilder .dna-card { position: relative; border-radius: 18px; margin: 0 6px; padding: 30px 22px; overflow: hidden; background: linear-gradient(180deg, rgba(8, 18, 20,0.92), rgba(3, 11, 13,0.96)); border: 1px solid rgba(var(--cream-rgb),0.09); box-shadow: 0 1px 0 rgba(var(--cream-rgb), calc(0.07*var(--tw-edge))) inset, 0 30px 70px -30px #000, 0 8px 24px -16px #000; } #dnaBuilder .dna-card::before { content: ""; position: absolute; top: 0; left: 18px; right: 18px; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--acc-rgb), calc(0.6*var(--tw-edge))) 50%, transparent); } #dnaBuilder .dna-card-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; } #dnaBuilder .dna-card-head .ttl { font-family: var(--font-display); font-style: italic; font-size: 21px; color: var(--t1); } #dnaBuilder .dna-card-head .ring { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--t3); } #dnaBuilder .dna-card-head .ring em { font-style: normal; color: var(--acc); font-size: 15px; } #dnaBuilder .dna-rows { display: flex; flex-direction: column; } #dnaBuilder .dna-row { display: grid; grid-template-columns: 70px 1fr; align-items: start; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(var(--acc-rgb),0.07); } #dnaBuilder .dna-row:last-child { border-bottom: 0; } #dnaBuilder .dna-row .k { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t3); padding-top: 5px; } #dnaBuilder .dna-row .v { font-family: var(--font-display); font-style: italic; font-size: 17px; line-height: 1.35; color: var(--t4); transition: color .25s var(--ease-out); } #dnaBuilder .dna-row.filled .k { color: var(--acc-lo); } #dnaBuilder .dna-row.filled .v { color: var(--t1); } #dnaBuilder .dna-quote { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 15.5px; line-height: 1.5; color: var(--acc); opacity: 0.78; padding-left: 14px; border-left: 1px solid rgba(var(--acc-rgb),0.35); margin-top: 22px; } #dnaBuilder .dna-foot { margin-top: auto; padding-top: 22px; } /* Commit / submit buttons — refined translucent-gold, matching the app's concept-approval button (.v9-concept-lock). Founder 2026-06-18: the old solid-gold slab read "atrocious." Outfit label + serif "my DNA" accent. */ #dnaBuilder .commit { position: relative; width: 100%; height: 50px; border-radius: 13px; cursor: pointer; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--font-body); font-size: 15px; font-weight: 400; letter-spacing: 0.01em; text-transform: none; color: var(--acc); background: rgba(var(--acc-rgb), 0.07); border: 1px solid rgba(var(--acc-rgb), 0.20); box-shadow: 0 1px 0 rgba(var(--cream-rgb),0.05) inset; transition: background .18s var(--ease-out), border-color .18s var(--ease-out), color .18s var(--ease-out), transform .12s var(--ease-out); } #dnaBuilder .commit svg { width: 16px; height: 16px; } #dnaBuilder .commit .tx { font-family: var(--font-display); font-style: italic; font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--acc); opacity: 0.92; } #dnaBuilder .commit:hover:not(:disabled) { background: rgba(var(--acc-rgb), 0.12); border-color: rgba(var(--acc-rgb), 0.36); color: var(--acc-hi); } #dnaBuilder .commit:hover:not(:disabled) .tx { color: var(--acc-hi); } #dnaBuilder .commit:active:not(:disabled) { transform: scale(0.985); } #dnaBuilder .commit:disabled { background: rgba(var(--cream-rgb),0.02); border-color: var(--hair); color: var(--t4); cursor: not-allowed; } #dnaBuilder .commit:disabled .tx { color: var(--t4); opacity: 0.7; } #dnaBuilder .foot-hint { text-align: center; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t4); margin-top: 11px; } /* card radii follow the --tw-radius knob */ #dnaBuilder .opt, #dnaBuilder .formula, #dnaBuilder .appr { border-radius: var(--tw-radius); } #dnaBuilder .dna-card { border-radius: calc(var(--tw-radius) + 5px); } } /* Mood/Energy column count steps up with the screen (founder override — cut the scroll). 2 below 1440 · 3 at 1440+ · 4 at 1920+. */ @media (min-width: 1440px) { #dnaBuilder .opt-grid.mood, #dnaBuilder .opt-grid.energy { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1920px) { #dnaBuilder .opt-grid.mood, #dnaBuilder .opt-grid.energy { grid-template-columns: repeat(4, 1fr); } }