@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";*{box-sizing:border-box;margin:0;padding:0}body{background:linear-gradient(135deg, var(--color-neutral-950) 0%, var(--color-neutral-900) 50%, var(--color-neutral-950) 100%);color:var(--color-neutral-50);min-height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.6}.demo-container{max-width:1400px;padding:var(--space-6);margin:0 auto}@media (width>=768px){.demo-container{padding:var(--space-12)}}.demo-header{margin-bottom:var(--space-16)}.demo-nav{margin-bottom:var(--space-8)}.nav-link{color:var(--pillar-curiosity-500);font-weight:600;font-size:var(--font-size-sm);align-items:center;gap:var(--space-2);text-decoration:none;transition:color .2s;display:inline-flex}.nav-link:hover{color:var(--pillar-curiosity-400)}.demo-hero{text-align:center;padding:var(--space-12) 0}.demo-title{letter-spacing:-.03em;margin-bottom:var(--space-4);background:linear-gradient(135deg, var(--color-neutral-0), var(--pillar-curiosity-400));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:clamp(2rem,5vw,3.5rem);font-weight:700;line-height:1.1}.demo-subtitle{font-size:var(--type-body-large);color:var(--color-neutral-300);max-width:640px;margin:0 auto;line-height:1.6}.demo-framing{max-width:800px;margin:var(--space-12) auto 0;-webkit-backdrop-filter:blur(20px);border-radius:var(--radius-2xl);padding:var(--space-8);text-align:left;background:#ffffff08;border:1px solid #ffffff1a}.framing-title{font-size:var(--font-size-xl);color:var(--pillar-curiosity-400);margin-bottom:var(--space-4);margin-top:var(--space-6);letter-spacing:-.01em;font-weight:700}.framing-title:first-child{margin-top:0}.framing-body{font-size:var(--font-size-md);color:var(--color-neutral-300);margin-bottom:var(--space-4);line-height:1.7}.framing-steps{counter-reset:framing-step;margin:var(--space-4) 0;padding-left:0;list-style:none}.framing-steps li{counter-increment:framing-step;margin-bottom:var(--space-3);padding-left:var(--space-8);font-size:var(--font-size-md);color:var(--color-neutral-300);line-height:1.6;position:relative}.framing-steps li:before{content:counter(framing-step);background:linear-gradient(135deg, var(--pillar-curiosity-500) 0%, var(--pillar-confidence-500) 100%);width:24px;height:24px;color:var(--color-neutral-950);font-weight:700;font-size:var(--font-size-xs);border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;top:0;left:0}.framing-steps li strong{color:var(--color-neutral-50)}.framing-companion{margin-top:var(--space-6);padding-top:var(--space-6);font-size:var(--font-size-sm);color:var(--pillar-curiosity-300);text-align:center;border-top:1px solid #ffffff1a}.framing-companion em{font-style:normal;font-weight:600}.artist-section{margin-bottom:var(--space-16)}.artist-drop-wrapper{max-width:720px;margin:0 auto}.artist-drop-zone{-webkit-backdrop-filter:blur(20px);border-radius:var(--radius-3xl);padding:var(--space-16) var(--space-8);text-align:center;cursor:pointer;background:#ffffff08;border:2px dashed #a78bfa4d;transition:all .3s;position:relative;overflow:hidden}.artist-drop-zone:before{content:"";opacity:0;background:radial-gradient(circle,#a78bfa14 0%,#0000 70%);transition:opacity .3s;position:absolute;inset:0}.artist-drop-zone:hover:before{opacity:1}.artist-drop-zone:hover{background:#ffffff0d;border-color:#a78bfa99;transform:translateY(-2px);box-shadow:0 8px 32px #a78bfa26}.artist-drop-zone.drag-over{border-color:var(--pillar-curiosity-500);background:#a78bfa1a;box-shadow:0 0 40px #a78bfa4d}.drop-icon{margin:0 auto var(--space-6);color:var(--pillar-curiosity-400);opacity:.8}.drop-title{font-size:var(--type-heading-2);color:var(--color-neutral-50);margin-bottom:var(--space-2);letter-spacing:-.02em;font-weight:700}.drop-hint{font-size:var(--font-size-sm);color:var(--color-neutral-400)}.artist-status-bar{margin-top:var(--space-6);align-items:center;gap:var(--space-4);display:flex}.status-label{font-size:var(--font-size-sm);color:var(--pillar-curiosity-400);font-weight:600;font-family:var(--font-mono);min-width:200px}.progress-track{border-radius:var(--radius-full);background:#ffffff1a;flex:1;height:4px;overflow:hidden}.progress-fill{background:linear-gradient(90deg, var(--pillar-curiosity-500), var(--pillar-trust-500));border-radius:var(--radius-full);width:0%;height:100%;transition:width .3s}.onion-section{margin-bottom:var(--space-16)}.onion-header{text-align:center;margin-bottom:var(--space-10)}.onion-title{font-size:var(--type-heading-2);color:var(--color-neutral-50);margin-bottom:var(--space-2);letter-spacing:-.02em;font-weight:700}.onion-subtitle{font-size:var(--type-body);color:var(--color-neutral-400)}.onion-viewer{gap:var(--space-6);-webkit-backdrop-filter:blur(20px);border-radius:var(--radius-2xl);padding:var(--space-8);background:#ffffff05;border:1px solid #ffffff1a;grid-template-columns:1fr 2px 1fr;display:grid;box-shadow:0 8px 32px #0000004d}@media (width<=768px){.onion-viewer{gap:var(--space-8);grid-template-columns:1fr}.onion-divider{display:none}}.onion-pane{flex-direction:column;min-height:300px;display:flex;position:relative}.pane-label{font-size:var(--font-size-sm);text-transform:uppercase;letter-spacing:.08em;color:var(--color-neutral-400);margin-bottom:var(--space-4);font-weight:600}.onion-original .pane-label{color:var(--pillar-trust-400)}.onion-recreated .pane-label{color:var(--pillar-curiosity-400)}.onion-pane img{border-radius:var(--radius-xl);width:100%;height:auto;box-shadow:0 4px 16px #0000004d}.pane-placeholder{border-radius:var(--radius-xl);color:var(--color-neutral-500);font-size:var(--font-size-sm);padding:var(--space-12);background:#ffffff08;border:1px dashed #fff3;flex:1;justify-content:center;align-items:center;display:flex}.onion-divider{background:linear-gradient(#0000,#a78bfa4d 20% 80%,#0000);width:2px}.orchestrator-section{max-width:900px;margin:0 auto}.drift-card{-webkit-backdrop-filter:blur(20px);border-radius:var(--radius-2xl);padding:var(--space-8);margin-bottom:var(--space-8);background:#ffffff08;border:1px solid #ffffff1a}.drift-card-title{font-size:var(--type-heading-4);color:var(--color-neutral-50);margin-bottom:var(--space-4);letter-spacing:-.01em;font-weight:700}.drift-note{font-size:var(--type-body);color:var(--color-neutral-300);line-height:1.7}.verdict-grid{gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));display:grid}@media (width<=640px){.verdict-grid{grid-template-columns:1fr}}.verdict-btn{-webkit-backdrop-filter:blur(20px);border-radius:var(--radius-xl);padding:var(--space-6);align-items:center;gap:var(--space-3);cursor:pointer;background:#ffffff0a;border:1px solid #ffffff26;flex-direction:column;font-family:Inter,sans-serif;transition:all .2s;display:flex}.verdict-btn:hover{background:#ffffff14;border-color:#ffffff4d;transform:translateY(-2px);box-shadow:0 8px 24px #0000004d}.verdict-btn.active{border-color:var(--pillar-curiosity-500);background:#a78bfa26;box-shadow:0 0 32px #a78bfa4d}.verdict-icon{font-size:var(--font-size-3xl);opacity:.9}.verdict-label{font-size:var(--type-heading-4);color:var(--color-neutral-50);letter-spacing:-.01em;font-weight:700}.verdict-desc{font-size:var(--font-size-sm);color:var(--color-neutral-400)}.verdict-align:hover{border-color:#10b98180}.verdict-align.active{background:#10b98126;border-color:#10b981}.verdict-accept:hover{border-color:#4a9eff80}.verdict-accept.active{border-color:var(--pillar-trust-500);background:#4a9eff26}.verdict-pause:hover{border-color:#fb923c80}.verdict-pause.active{border-color:var(--pillar-confidence-500);background:#fb923c26}.verdict-replace:hover{border-color:#ef444480}.verdict-replace.active{background:#ef444426;border-color:#ef4444}#swipey-dock{bottom:var(--space-8);right:var(--space-8);align-items:center;gap:var(--space-3);-webkit-backdrop-filter:blur(20px);border-radius:var(--radius-2xl);padding:var(--space-4);cursor:pointer;z-index:1000;background:#ffffff0d;border:1px solid #fff3;flex-direction:column;transition:all .2s;display:flex;position:fixed}#swipey-dock:hover{background:#ffffff14;transform:translateY(-2px);box-shadow:0 8px 32px #a78bfa4d}#swipey-label{font-size:var(--font-size-xs);color:var(--color-neutral-300);letter-spacing:.02em;font-family:Inter,sans-serif;font-weight:500}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}