/* Stanzai dev styles 20 — DNA ENTRY NOIR (2026-06-12). New surface file appended per styles/README.md rule. Scope: the Guided room's DNA entry (#s-manual) + the Song DNA summary (#s-generated). The Build It / From Photo / From Prompt flow joins the blue-hour family: session stage, ink-glass composition tracker, ink picker panes. Values mirror the session swatch (16-freeform-noir.css). Desktop dtpk-* rail is left for the desktop lane. Plain static CSS — no prompts, no schemas, no model-facing content. */ /* ── STAGE — the session recipe ── */ #s-manual, #s-generated { background-color: var(--stz-obsidian); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.38 0 0 0 0 0.58 0 0 0 0 0.64 0 0 0 0.018 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"), radial-gradient(circle at 34% 10%, rgba(19, 42, 45, 0.30), transparent 34%), url('/img/stanzai-smoke-mobile.webp'), linear-gradient(180deg, var(--stz-petrol) 0%, var(--stz-void) 48%, #040708 100%); background-size: 180px 180px, auto, cover, auto; background-position: top left, center, center top, center; background-repeat: repeat, no-repeat, no-repeat, no-repeat; background-blend-mode: normal, normal, screen, normal; } @media (min-width: 1024px) { #s-manual, #s-generated { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.38 0 0 0 0 0.58 0 0 0 0 0.64 0 0 0 0.018 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"), radial-gradient(circle at 34% 10%, rgba(19, 42, 45, 0.30), transparent 34%), url('/img/stanzai-smoke-desktop.webp'), linear-gradient(180deg, var(--stz-petrol) 0%, var(--stz-void) 48%, #040708 100%); } } /* ── CHROME — topnav melts; title in the serif voice ── */ /* GAP FIX v2 — verified empirically: the sticky clamp eats negative margins too (nav border-box still rested below the scroller's safe-area padding, content painting through the slot — founder IMG_2794). The real fix: these screens drop their scroller padding-top entirely and the NAV owns the safe-area inset. Content box top == visible top -> no slot exists. The sub-tab bar sticks below via the shared --dna-navh var. Pattern for the chrome lane: sticky headers + scroller padding-top cannot coexist; the header must own the inset. */ #s-manual, #s-generated { --dna-navh: calc(54px + max(env(safe-area-inset-top), 12px)); padding-top: 0; } :where(#s-manual, #s-generated) .topnav { height: var(--dna-navh); box-sizing: border-box; align-items: flex-end; padding-top: 0; padding-bottom: 10px; background: linear-gradient(180deg, rgba(4, 9, 11, 0.97) 0%, rgba(4, 9, 11, 0.88) 70%, rgba(4, 9, 11, 0.60) 100%); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: none; } :where(#s-manual, #s-generated) .navtitle { font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif; font-size: 21px; font-weight: 400; color: var(--stz-ivory); } /* ── COMPOSITION TRACKER — ink glass with the edge light; its gold corner radial survives as the pane's inner warmth ── */ :where(#s-manual) .dna-comp { background: linear-gradient(180deg, rgba(236, 231, 218, 0.050) 0%, rgba(236, 231, 218, 0.015) 9%, transparent 18%), linear-gradient(180deg, rgba(2, 12, 14, 0.88), rgba(1, 6, 8, 0.92)); border: 1px solid rgba(var(--gold-rgb), 0.26); border-top-color: rgba(236, 224, 196, 0.40); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: inset 0 1px 0 rgba(244, 236, 212, 0.09), 0 6px 16px rgba(0, 0, 0, 0.40), 0 24px 48px -16px rgba(0, 0, 0, 0.72); } /* ── PICKERS — ink panes; selection states keep their gold (the same light-touch wash the session pickers wear; no blur on dense grids) ── */ :where(#s-manual) .moodpill, :where(#s-manual) .optcard, :where(#s-manual) .gchip, :where(#s-manual) .stchip, :where(#s-manual) .soundchip { background: rgba(6, 14, 16, 0.55); border-color: rgba(var(--ivory-rgb), 0.10); } :where(#s-manual) .moodlabel { color: rgba(var(--ivory-rgb), 0.70); } /* ── SECONDARY PILLS — Load preset and friends take the dark-center voice ── */ :where(#s-manual, #s-generated) .secbtn { background: rgba(4, 10, 12, 0.55); border-color: rgba(var(--gold-rgb), 0.30); } /* ── SUB-TAB ROW (Mood · Genre · …) hairline cools into the family ── */ :where(#s-manual) .swi-tabbar { border-bottom-color: rgba(var(--gold-rgb), 0.12); } /* ── STICKY SUB-TAB NAV (Mood · Genre · …) — the flat black band melts into the stage like every other piece of chrome ── */ /* ID-strength so the media-block base can never outrank it. Genuinely translucent this time — the previous 0.96 alpha was technically a new color and visually still a black band (founder-caught). The frost does the legibility work; sticks below the nav via the shared height var. */ #s-manual .dna-tabbar { top: var(--dna-navh); background: linear-gradient(180deg, rgba(6, 13, 15, 0.62), rgba(4, 9, 11, 0.55)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(var(--gold-rgb), 0.14); } /* ── SONG DNA SUMMARY (#s-generated) ── */ :where(#s-generated) .dna-sum-row { background: linear-gradient(180deg, rgba(14, 24, 26, 0.50), rgba(2, 10, 12, 0.72)); border: 1px solid rgba(var(--ivory-rgb), 0.10); border-top-color: rgba(var(--ivory-rgb), 0.16); box-shadow: inset 0 1px 0 rgba(244, 236, 212, 0.05), 0 8px 20px -10px rgba(0, 0, 0, 0.55); } :where(#s-generated) .dna-next-panel { background: radial-gradient(180px 80px at 0% 0%, rgba(var(--gold-rgb), 0.10), transparent 70%), linear-gradient(180deg, rgba(2, 12, 14, 0.78), rgba(1, 6, 8, 0.84)); border: 1px solid rgba(var(--gold-rgb), 0.24); border-top-color: rgba(236, 224, 196, 0.34); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); box-shadow: inset 0 1px 0 rgba(244, 236, 212, 0.08), 0 10px 24px -12px rgba(0, 0, 0, 0.55); }