/* The editorial controls share the glass material; the edition remains paper. */
#dna.dna-section { display:block; }
#dna .dna-copy { max-width:800px; margin:0 auto 44px; text-align:center; }
#dna .dna-copy .eyebrow { justify-content:center; }
#dna .dna-copy .section-deck { max-width:620px; margin:24px auto 0; }
#dna .dna-copy h2 { text-wrap:balance; }
#dna .dna-copy .dna-note { border:0; padding:0; text-align:center; }
#dna .dna-studio { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px; padding:22px; overflow:hidden; }
#dna .dna-editor { min-width:0; padding:12px 20px 16px; }
#dna .dna-object { position:relative; display:grid; place-items:center; height:250px; max-width:400px; margin:0 auto 12px; isolation:isolate; }
#dna .dna-object::before { content:''; position:absolute; inset:12% 17%; border-radius:50%; background:radial-gradient(ellipse,#91b7ff20,transparent 68%); filter:blur(12px); z-index:-1; }
#dna .dna-object img { display:block; width:180px; height:245px; object-fit:contain; transform:rotate(-8deg); filter:drop-shadow(0 15px 18px #08264536); }
#dna .dna-studio[data-in-view=true] .dna-object img { animation:dna-glass-turn 14s ease-in-out infinite; }
#dna .dna-node { position:absolute; z-index:2; display:flex; align-items:center; gap:8px; min-height:44px; max-width:145px; padding:10px 13px; border:1px solid var(--glass-rim); border-top-color:var(--glass-top); border-radius:18px; background:var(--glass-face); box-shadow:var(--glass-highlight),0 6px 18px #00000012; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); color:var(--ink); font-size:11px; transition:transform .25s,border-color .25s,box-shadow .25s; }
#dna .dna-node::before { content:''; flex:0 0 5px; height:5px; border-radius:50%; background:var(--glass-accent); opacity:.55; }
#dna .dna-node[data-control=interests] { top:27px; left:0; }
#dna .dna-node[data-control=depth] { top:77px; right:0; }
#dna .dna-node[data-control=diversity] { bottom:62px; left:0; }
#dna .dna-node[data-control=discovery] { bottom:14px; right:0; }
#dna .dna-object[data-active=interests] [data-control=interests],
#dna .dna-object[data-active=depth] [data-control=depth],
#dna .dna-object[data-active=diversity] [data-control=diversity],
#dna .dna-object[data-active=discovery] [data-control=discovery] { border-color:var(--glass-accent); box-shadow:var(--glass-highlight),0 0 24px #77b6ff22; transform:translateY(-3px); background:var(--glass-selected); }
#dna .dna-object[data-active] .dna-node[aria-pressed=true]::before { opacity:1; box-shadow:0 0 9px #93c8ff; }
#dna .dna-presets { margin:0 0 20px; }
#dna .preset-switch { display:flex; margin:0; padding:5px; border:1px solid var(--glass-rim); border-radius:18px; background:var(--glass-control); gap:4px; }
#dna .preset-switch button { flex:1; min-height:44px; padding:8px 10px; border:1px solid transparent; border-radius:13px; color:var(--muted); font-size:12px; background:none; }
#dna .preset-switch button[aria-pressed=true] { color:var(--ink); background:var(--glass-selected); border-color:var(--glass-rim); box-shadow:var(--glass-highlight); }
#dna .dna-interests { min-width:0; border:0; padding:0; margin:10px 0 22px; }
#dna .dna-interests legend { padding:0; margin-bottom:10px; font-size:12px; color:var(--ink); }
#dna .dna-interests>div { display:flex; flex-wrap:wrap; gap:7px; }
#dna .dna-interests button { min-height:44px; padding:9px 13px; border:1px solid var(--glass-rim); border-radius:14px; color:var(--muted); background:var(--glass-control); font-size:11px; }
#dna .dna-interests button[aria-pressed=true] { color:var(--ink); border-color:var(--glass-accent); background:var(--glass-selected); box-shadow:inset 0 1px 0 var(--glass-top); }
#dna .dna-controls { display:grid; gap:17px; }
#dna .dna-control { display:grid; grid-template-columns:1fr auto; gap:5px 12px; padding-top:14px; border-top:1px solid var(--glass-rim); }
#dna .dna-control label { color:var(--ink); font-size:12px; font-weight:500; }
#dna .dna-control output { color:var(--glass-accent); font-size:11px; }
#dna .dna-control input[type=range] { grid-column:1/-1; display:block; width:100%; height:28px; margin:0; background:transparent; accent-color:var(--glass-accent); cursor:pointer; }
#dna .dna-control input[type=range]::-webkit-slider-runnable-track { height:4px; border-radius:8px; background:linear-gradient(90deg,#76a8d57a,#afc8e733); }
#dna .dna-control input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; margin-top:-6px; height:16px; width:16px; border-radius:50%; background:#eaf6ff; border:1px solid #95b4cd; box-shadow:0 1px 6px #05244040,inset 0 1px 1px white; }
#dna .dna-control input[type=range] { -webkit-appearance:none; }
#dna .dna-control input[type=range]::-moz-range-track { height:4px; border-radius:8px; background:#8eb8dc66; }
#dna .dna-control input[type=range]::-moz-range-thumb { height:16px; width:16px; border-radius:50%; background:#eaf6ff; border:1px solid #95b4cd; }
#dna .dna-control>span { color:var(--muted); font-size:9px; }
#dna .dna-control>span:last-child { text-align:right; }
#dna .dna-control .dna-endpoints { grid-column:1/-1; display:flex; justify-content:space-between; color:var(--muted); font-size:9px; }
#dna .dna-preview { min-width:0; padding:25px 28px 18px; color:#24303b; background:#f8f5ec; border:1px solid #fff9; border-radius:15px; box-shadow:0 14px 38px #0002,inset 0 1px 0 #fff; align-self:start; }
#dna .dna-preview-top { display:flex; align-items:center; justify-content:space-between; gap:10px; color:#64717a; font-size:9px; line-height:1.6; letter-spacing:1px; }
#dna .dna-preview h3 { font:700 45px/1.1 var(--serif); letter-spacing:-2px; text-align:center; margin:12px 0 11px; color:#24303b; }
#dna .dna-edition-meta { display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-top:2px solid #303e47; border-bottom:1px solid #c9ccc6; font-size:9px; line-height:1.6; color:#56646d; }
#dna .dna-change { display:flex; align-items:center; min-height:45px; padding:9px 0; color:#406988; font-size:10px; line-height:1.6; }
#dna .dna-story-list { list-style:none; margin:0; padding:0; }
#dna .dna-story { display:grid; grid-template-columns:22px minmax(0,1fr); gap:9px; padding:8px 0; border-top:1px solid #d9dad2; transition:background-color .35s; }
#dna .dna-story.is-new { background:#dce9ee; border-radius:5px; box-shadow:7px 0 #dce9ee,-7px 0 #dce9ee; }
#dna .dna-rank { font:italic 14px/1.8 var(--serif); color:#84939b; }
#dna .dna-story-body { min-width:0; }
#dna .dna-story-body small { display:block; color:#667680; font-size:8px; line-height:1.5; letter-spacing:.3px; }
#dna .dna-story-body strong { display:block; font:500 14px/1.35 var(--serif); color:#26343e; text-wrap:pretty; }
#dna .dna-story-summary { display:none; margin-top:5px; font-size:10px; line-height:1.6; color:#5a6870; }
#dna .dna-studio[data-depth=balanced] .dna-story:first-child .dna-story-summary { display:block; }
#dna .dna-studio[data-depth=deep] .dna-story:nth-child(-n+2) .dna-story-summary { display:block; }
#dna .dna-footnote { display:flex; justify-content:space-between; gap:10px; padding-top:12px; margin-top:8px; border-top:1px solid #bcc3c2; color:#64727a; font-size:9px; line-height:1.6; }
#dna .dna-demo-note { text-align:center; font-size:10px; line-height:1.8; color:var(--muted); margin:20px auto 0; max-width:630px; }
#dna button:focus-visible,#dna input:focus-visible { outline:2px solid var(--glass-accent); outline-offset:4px; }
@keyframes dna-glass-turn { 0%,100% { transform:perspective(600px) rotateY(-12deg) rotate(-8deg) translateY(0); } 50% { transform:perspective(600px) rotateY(13deg) rotate(-3deg) translateY(-7px); } }
@media (hover:hover) { #dna .dna-node:hover,#dna .dna-interests button:hover { border-color:var(--glass-accent); } }
@media (max-width:950px) { #dna .dna-studio { gap:14px; padding:16px; } #dna .dna-editor { padding:8px; } #dna .dna-preview { padding:22px 20px 16px; } #dna .dna-node { padding:10px; font-size:10px; } }
@media (max-width:700px) { #dna .dna-studio { grid-template-columns:1fr; gap:24px; padding:18px 14px; } #dna .dna-copy { margin-bottom:30px; } #dna .dna-object { height:210px; max-width:360px; } #dna .dna-object img { width:150px; height:205px; animation:none!important; } #dna .dna-node[data-control=interests] { top:14px; } #dna .dna-node[data-control=depth] { top:59px; } #dna .dna-node[data-control=diversity] { bottom:52px; } #dna .dna-node[data-control=discovery] { bottom:2px; } #dna .dna-preview { padding:22px 18px 18px; } #dna .dna-story { padding:10px 0; } #dna .dna-story-body strong { font-size:15px; } }
@media (prefers-reduced-motion:reduce) { #dna .dna-object img { animation:none!important; } #dna .dna-node,#dna .dna-story { transition:none; } }