*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#0b0b14;--panel:#161624;--panel2:#1e1e32;--gold:#d4af37;--gold2:#f0d47a;--text:#f3efe4;--muted:#b9b3a4;--accent:#7b5ea7}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:Raleway,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.55}
h1,h2,h3{font-family:"Playfair Display",Georgia,serif;line-height:1.2}
.container{max-width:1100px;margin:0 auto;padding:0 1rem}
a{color:var(--gold2)}
.btn{display:inline-block;background:var(--panel2);color:var(--text);border:1px solid var(--gold);padding:.7rem 1.2rem;border-radius:999px;text-decoration:none;cursor:pointer;font-size:1rem;min-height:48px}
.btn:hover,.btn:focus{background:#2a2a46}
.btn-accent{background:var(--gold);color:#14100a;font-weight:700}
.btn-accent:hover,.btn-accent:focus{background:var(--gold2)}
.btn-small{padding:.45rem 1rem;min-height:40px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-file{margin:.25rem}
header{position:sticky;top:0;z-index:10;background:rgba(11,11,20,.96);border-bottom:1px solid #2c2c44}
.header-container{display:flex;align-items:center;justify-content:space-between;padding:.7rem 1rem}
.logo{font-family:"Playfair Display",Georgia,serif;font-size:1.4rem;color:var(--text);text-decoration:none;font-weight:700}
.logo span{color:var(--gold)}
nav ul{list-style:none;display:flex;gap:1.1rem;align-items:center}
nav a{color:var(--text);text-decoration:none}
.mobile-menu-btn{display:none;background:none;border:1px solid var(--gold);color:var(--gold);font-size:1.3rem;border-radius:8px;padding:.3rem .7rem;min-height:44px}
.hero{padding:4.5rem 0 3.5rem;text-align:center;background:radial-gradient(ellipse at 50% 0%,#2b2144 0%,var(--bg) 65%)}
.hero h1{font-size:clamp(2rem,7vw,3.4rem);color:var(--gold2)}
.hero p{font-size:clamp(1rem,3.5vw,1.25rem);margin:1rem auto;max-width:640px}
.hero-buttons{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:1.2rem}
.honest-note{font-size:.9rem!important;color:var(--muted)}
section{padding:3rem 0}
.section-title{text-align:center;margin-bottom:2rem}
.section-title h2{color:var(--gold);font-size:clamp(1.6rem,5vw,2.2rem)}
.section-title p{color:var(--muted);max-width:640px;margin:.5rem auto 0}
.features-grid,.features-container,.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem}
.feature-card,.feature-item,.gallery-item,.panel{background:var(--panel);border:1px solid #2c2c44;border-radius:14px;padding:1.4rem}
.feature-card h3,.feature-item h3{color:var(--gold2);margin-bottom:.5rem}
.feature-icon{font-size:2rem;margin-bottom:.5rem}
.feature-item .btn{margin-top:.9rem}
.powerful-features{background:#0e0e1a}
.gallery-item svg{width:100%;height:150px;border-radius:10px;display:block}
.gallery-item-content h3{color:var(--gold2);margin:.8rem 0 .3rem}
.gallery-item-content p{color:var(--muted);font-size:.95rem}
.gallery-item img,.gallery-item video,.gallery-item audio{width:100%;border-radius:10px}
.gallery-item .item-name{font-weight:700;word-break:break-word}
.gallery-item .item-meta{color:var(--muted);font-size:.85rem;margin:.2rem 0 .6rem}
.gallery-item .row{display:flex;gap:.5rem;flex-wrap:wrap}
.gallery-item .row .btn{min-height:40px;padding:.4rem .9rem;font-size:.9rem}
.creator{background:#0e0e1a}
.creator-container{display:flex;gap:2rem;align-items:center;flex-wrap:wrap}
.creator-image img{border-radius:50%;border:3px solid var(--gold);width:150px;height:150px;object-fit:cover}
.creator-content h2{color:var(--gold)}
.creator-content h3{color:var(--gold2);margin:.3rem 0 .7rem}
.creator-contact{margin-top:1rem;color:var(--muted)}
.visualization-container{background:#05050c;border:1px solid var(--gold);border-radius:14px;overflow:hidden}
#visualization-canvas{width:100%;height:auto;display:block}
.audio-controls{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center;margin:1.2rem 0;align-items:center}
.select-style{background:var(--panel2);color:var(--text);border:1px solid var(--gold);border-radius:999px;padding:.7rem 1rem;min-height:48px;font-size:1rem;max-width:100%}
.status{text-align:center;color:var(--gold2);margin:.6rem 0}
.muted{color:var(--muted)}
.panel{margin:1.4rem 0;text-align:center}
.panel h3{color:var(--gold);margin-bottom:.7rem}
.trim-row{display:grid;gap:.4rem;max-width:560px;margin:1rem auto;text-align:left}
.trim-row input[type=range]{width:100%;min-height:32px;accent-color:var(--gold)}
.upload-row{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.4rem}
.ai-image-container{margin-top:1rem}
#art-canvas{width:100%;max-width:800px;height:auto;background:#111;border-radius:12px;border:1px solid #2c2c44}
.art-caption{font-family:"Playfair Display",Georgia,serif;font-size:1.15rem;color:var(--gold2);margin:.8rem 0}
.cta{text-align:center;background:radial-gradient(ellipse at 50% 100%,#2b2144 0%,var(--bg) 70%)}
.cta h2{color:var(--gold2);margin-bottom:.6rem}
.cta p{margin-bottom:1.2rem;color:var(--muted)}
footer{border-top:1px solid #2c2c44;padding:2.5rem 0 0;background:#08080f}
.footer-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.5rem}
.footer-links h3,.footer-logo h3{color:var(--gold);margin-bottom:.6rem}
.footer-links ul{list-style:none}
.footer-links a{color:var(--muted);text-decoration:none}
.copyright{text-align:center;color:var(--muted);padding:1.4rem 1rem;font-size:.9rem}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:640px){
  .mobile-menu-btn{display:block}
  nav{display:none;width:100%}
  nav.open{display:block}
  nav ul{flex-direction:column;align-items:flex-start;padding:.8rem 0}
  .header-container{flex-wrap:wrap}
  section{padding:2.2rem 0}
  .creator-container{justify-content:center;text-align:center}
}
.slogan{letter-spacing:.35em;color:var(--gold);font-weight:700}
.btn-giant{font-size:clamp(1.2rem,5vw,1.8rem);padding:1.1rem 2.2rem;margin-top:1.4rem;display:inline-block}
.btn-giant2{font-size:1.15rem;padding:1rem 1.8rem}
.studio-section{background:#0e0e1a}
.row-wrap{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin:.7rem 0}
.setup-panel{text-align:left}
.setup-panel h3{color:var(--gold)}
.text-input{width:100%;background:var(--panel2);border:1px solid #44446a;color:var(--text);border-radius:10px;padding:.7rem;margin:.35rem 0 1rem;font-size:1rem}
.file-plain{margin:.35rem 0 1rem;color:var(--muted)}
.director-modes{display:grid;gap:.5rem;margin:.6rem 0 1rem}
.director-modes label{background:var(--panel2);border:1px solid #2c2c44;border-radius:10px;padding:.7rem}
.small{font-size:.85rem}
.stage-wrap{margin:1.6rem 0}
.canvas-frame{position:relative;background:#f5efe0;border:10px solid #6b4a26;border-radius:6px;box-shadow:0 0 0 4px var(--gold),0 18px 40px rgba(0,0,0,.6);overflow:hidden}
#paint-canvas{width:100%;height:auto;display:block;background:#f7f2e6}
#artist-hand{position:absolute;font-size:44px;left:50%;top:50%;transform:translate(-20%,-80%);transition:left .45s ease,top .45s ease;pointer-events:none;filter:drop-shadow(2px 4px 3px rgba(0,0,0,.45));z-index:3}
#eraser{position:absolute;font-size:40px;transform:translate(-50%,-50%);pointer-events:none;z-index:3;transition:left .3s,top .3s}
.palette{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin:.9rem 0;padding:.7rem;background:var(--panel);border-radius:999px;border:1px solid #2c2c44}
.palette .blob{width:38px;height:38px;border-radius:50%;border:3px solid transparent;cursor:pointer;box-shadow:inset 0 -6px 10px rgba(0,0,0,.3)}
.palette .blob.active{border-color:#fff;transform:scale(1.18)}
.stage-progress{text-align:center}
#stage-name{font-family:"Playfair Display",Georgia,serif;font-size:1.5rem;color:var(--gold2)}
.progress-track{height:14px;background:#222238;border-radius:999px;overflow:hidden;margin:.5rem auto;max-width:640px}
#progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--gold),#ff5da2,#39c2d7)}
.stage-list{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem;justify-content:center;margin-top:.6rem}
.stage-list li{font-size:.75rem;padding:.25rem .6rem;border-radius:999px;background:var(--panel);color:var(--muted);border:1px solid #2c2c44}
.stage-list li.now{background:var(--gold);color:#14100a;font-weight:700}
.stage-list li.done{color:var(--gold2);border-color:var(--gold)}
.panels-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.2rem;margin:1.4rem 0}
.brain-list{list-style:none;display:grid;gap:.35rem;text-align:left}
.brain-list span{color:var(--gold2);font-weight:700}
.intention{font-size:1.1rem;font-style:italic;color:var(--gold2)}
.reveal{text-align:center;background:var(--panel);border:2px solid var(--gold);border-radius:16px;padding:1.6rem;margin:1.6rem 0}
.reveal-title{color:var(--gold);font-size:clamp(1.5rem,6vw,2.4rem)}
.reveal-img{width:100%;max-width:900px;border:12px solid #6b4a26;outline:4px solid var(--gold);border-radius:4px;background:#fff}
.dna{text-align:left;white-space:pre-wrap;word-break:break-word;background:#0a0a12;border:1px solid #2c2c44;border-radius:10px;padding:1rem;font-size:.8rem;max-height:320px;overflow:auto;color:#d8e6c8}
.dna-panel{margin-top:1.2rem}
.framed{background:#fdfaf2;padding:10px;border:10px solid #6b4a26;outline:3px solid var(--gold);border-radius:4px;cursor:pointer}
.framed img{width:100%;display:block;border:1px solid #ccc}
.framed .cap{color:#333;font-family:"Playfair Display",Georgia,serif;text-align:center;padding:.5rem .2rem 0;font-size:.95rem}
.framed .cap small{display:block;color:#777;font-family:Raleway,sans-serif}
.viewer{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:50;overflow:auto;padding:1rem}
.viewer-box{max-width:860px;margin:2rem auto;background:var(--panel);border:1px solid var(--gold);border-radius:14px;padding:1.2rem;text-align:center}
.viewer-box img{width:100%;border:10px solid #6b4a26;outline:3px solid var(--gold)}
.tools-panel{text-align:left}
.tools-panel h4{color:var(--gold2);margin-bottom:.5rem}
@media print{body *{visibility:hidden}#reveal,#reveal *{visibility:visible}#reveal{position:absolute;inset:0}}