:root{
  --bg:#0c0a09; --bg2:#141110; --panel:#191512; --panel2:#211b16;
  --ink:#f3ece3; --muted:#9a8d7e; --line:#2c241d;
  --ember:#ff7a18; --ember2:#ffb44c; --ember-deep:#c2410c;
  --glow:rgba(255,122,24,.45);
  --ok:#7bd88f; --err:#ff6b5e;
  --r:16px; --r-sm:11px;
}
*{box-sizing:border-box;margin:0;padding:0}
/* hidden muss display:flex/grid der Klassen schlagen (sonst bleibt z.B. das
   API-Key-Modal trotz hidden=true sichtbar) */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  background:radial-gradient(120% 90% at 80% -10%, #1d130c 0%, var(--bg) 55%) fixed, var(--bg);
  color:var(--ink); font-family:"Hanken Grotesk",system-ui,sans-serif;
  line-height:1.55; min-height:100vh; overflow-x:hidden; position:relative;
}

/* atmosphere */
.grain{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.emberfield{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(40% 30% at 15% 110%, rgba(255,122,24,.12), transparent 60%),
    radial-gradient(35% 28% at 90% 120%, rgba(194,65,12,.14), transparent 60%);
  filter:blur(8px);}

/* layout */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:18px 28px;backdrop-filter:blur(12px);
  background:linear-gradient(to bottom, rgba(12,10,9,.85), rgba(12,10,9,.35));
  border-bottom:1px solid var(--line);}
.brand{display:flex;align-items:center;gap:11px}
.anvil{color:var(--ember);font-size:15px;filter:drop-shadow(0 0 8px var(--glow));animation:pulse 3.4s ease-in-out infinite}
.wordmark{font-family:"Fraunces",serif;font-weight:600;font-size:23px;letter-spacing:.2px}
.wordmark .forge{background:linear-gradient(95deg,var(--ember2),var(--ember));-webkit-background-clip:text;background-clip:text;color:transparent}
.key-btn{display:flex;align-items:center;gap:8px;background:var(--panel);color:var(--muted);
  border:1px solid var(--line);padding:9px 15px;border-radius:999px;font:500 13px/1 "Hanken Grotesk";cursor:pointer;transition:.25s}
.key-btn:hover{color:var(--ink);border-color:var(--ember-deep)}
.key-dot{width:8px;height:8px;border-radius:50%;background:var(--err);box-shadow:0 0 8px currentColor;transition:.3s}
.key-dot.on{background:var(--ok)}

main{position:relative;z-index:2;max-width:880px;margin:0 auto;padding:0 22px 90px}

.hero{padding:64px 4px 30px}
h1.display{font-family:"Fraunces",serif;font-weight:300;font-size:clamp(48px,9vw,92px);line-height:.95;letter-spacing:-1.5px}
h1.display em{font-style:italic;font-weight:500;background:linear-gradient(95deg,var(--ember2),var(--ember) 60%,var(--ember-deep));-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 30px var(--glow))}
.lede{color:var(--muted);font-size:18px;max-width:50ch;margin-top:22px}
.lede.sm{font-size:15px;margin-top:10px}
.display.sm{font-family:"Fraunces",serif;font-weight:400;font-size:27px}

/* console */
.console{margin-top:28px;background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--line);border-radius:var(--r);padding:26px;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,180,76,.06);}
.field{margin-bottom:18px}
.field>label{display:block;font:600 12px/1 "Hanken Grotesk";letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
textarea,input[type=text],input[type=password],input[type=number],select{
  width:100%;background:var(--bg);color:var(--ink);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:13px 15px;font:400 16px/1.5 "Hanken Grotesk";transition:.2s}
textarea{resize:vertical}        /* nur das Textfeld darf in der Höhe gezogen werden */
textarea:focus,input:focus,select:focus{outline:none;border-color:var(--ember);box-shadow:0 0 0 3px rgba(255,122,24,.14)}
select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239a8d7e' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.counter{margin-top:7px;font:500 12px/1 "JetBrains Mono";color:var(--muted)}
.hint{margin-top:9px;padding:10px 13px;border:1px solid var(--ember-deep);border-radius:var(--r-sm);
  background:rgba(255,122,24,.07);font:400 13px/1.5 "Hanken Grotesk";color:var(--ink)}
.hint code{font:500 12px/1 "JetBrains Mono";color:var(--ember2);background:rgba(255,122,24,.12);padding:2px 5px;border-radius:5px}
#mode{color:var(--ember2)}

.voices{display:flex;flex-wrap:wrap;gap:9px}
.vchip{position:relative;display:flex;flex-direction:column;gap:1px;padding:9px 14px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--panel2);color:var(--ink);cursor:pointer;transition:.2s;min-width:84px}
.vdel{position:absolute;top:-7px;right:-7px;width:18px;height:18px;line-height:16px;text-align:center;
  border-radius:50%;background:var(--panel);border:1px solid var(--line);color:var(--muted);
  font:700 13px/16px "Hanken Grotesk";opacity:0;transition:.15s}
.vchip:hover .vdel{opacity:1}
.vdel:hover{color:var(--err);border-color:var(--err)}
.vchip:hover{border-color:var(--ember-deep);transform:translateY(-1px)}
.vchip.sel{border-color:var(--ember);background:linear-gradient(180deg,rgba(255,122,24,.16),rgba(255,122,24,.04));box-shadow:0 0 0 1px var(--ember),0 8px 24px -12px var(--glow)}
.vchip b{font:600 14px/1.2 "Hanken Grotesk"}
.vchip small{font:500 10px/1 "JetBrains Mono";color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.vchip.sel small{color:var(--ember2)}

input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;
  background:var(--panel2);border:1px solid var(--line);padding:0;margin-top:8px;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:linear-gradient(var(--ember2),var(--ember-deep));box-shadow:0 0 10px var(--glow);cursor:pointer}

.seed-row{display:flex;gap:8px}
.seed-row input{flex:1;min-width:0}
.seed-rand{flex:0 0 auto;width:46px;border:1px solid var(--line);background:var(--panel2);
  color:var(--ink);border-radius:var(--r-sm);cursor:pointer;font-size:17px;transition:.2s}
.seed-rand:hover{border-color:var(--ember);background:rgba(255,122,24,.1)}
.seed-rand:active{transform:scale(.94)}

.opts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.opts .grow{grid-column:1/-1}
.opts .field{margin-bottom:0}

/* forge button */
.forge-btn{position:relative;width:100%;margin-top:24px;border:none;cursor:pointer;
  background:linear-gradient(95deg,var(--ember-deep),var(--ember) 45%,var(--ember2));
  color:#1a0e05;font:700 17px/1 "Hanken Grotesk";letter-spacing:.02em;padding:18px;border-radius:var(--r-sm);
  box-shadow:0 12px 34px -10px var(--glow), inset 0 1px 0 rgba(255,255,255,.35);transition:.22s;overflow:hidden}
.forge-btn:hover{transform:translateY(-2px);box-shadow:0 18px 44px -10px var(--glow)}
.forge-btn:active{transform:translateY(0)}
.forge-btn:disabled{filter:grayscale(.5) brightness(.8);cursor:not-allowed;transform:none}
.forge-btn.small{width:auto;padding:12px 22px;font-size:14px;margin-top:0}
.forge-btn .spark{position:absolute;inset:0;background:radial-gradient(circle at var(--x,50%) 120%,rgba(255,255,255,.5),transparent 40%);opacity:0;transition:.3s}
.forge-btn:hover .spark{opacity:.5}

/* stage / waveform */
.stage{margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.wave{display:flex;align-items:center;justify-content:center;gap:5px;height:64px;opacity:.35}
.wave span{width:5px;height:14px;border-radius:3px;background:linear-gradient(var(--ember2),var(--ember-deep))}
.wave.live{opacity:1}
.wave.live span{animation:bounce 1s ease-in-out infinite}
.wave.live span:nth-child(2n){animation-duration:.8s}
.wave.live span:nth-child(3n){animation-duration:1.25s}
.wave span:nth-child(1){animation-delay:-.9s}.wave span:nth-child(2){animation-delay:-.7s}
.wave span:nth-child(3){animation-delay:-.5s}.wave span:nth-child(4){animation-delay:-.3s}
.wave span:nth-child(5){animation-delay:-.1s}.wave span:nth-child(6){animation-delay:-.6s}
.wave span:nth-child(7){animation-delay:-.4s}.wave span:nth-child(8){animation-delay:-.2s}
.wave span:nth-child(9){animation-delay:-.8s}.wave span:nth-child(10){animation-delay:-.35s}
.wave span:nth-child(11){animation-delay:-.55s}.wave span:nth-child(12){animation-delay:-.15s}
.wave span:nth-child(13){animation-delay:-.75s}.wave span:nth-child(14){animation-delay:-.25s}
.wave span:nth-child(15){animation-delay:-.65s}
.progress{margin-top:16px}
.bar{height:10px;border-radius:999px;background:var(--panel2);border:1px solid var(--line);overflow:hidden}
.fill{height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--ember-deep),var(--ember) 60%,var(--ember2));
  box-shadow:0 0 16px var(--glow);transition:width .18s linear}
.prow{display:flex;justify-content:space-between;margin-top:8px;font:500 12px/1 "JetBrains Mono";color:var(--muted)}
#ppct{color:var(--ember2)}
.status{text-align:center;font:500 14px/1.4 "JetBrains Mono";color:var(--muted);margin-top:12px;min-height:20px}
.status.err{color:var(--err)} .status.ok{color:var(--ok)}
.player{margin-top:18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.player audio{flex:1;min-width:240px;height:42px}
.dl{color:var(--ember2);font:600 13px/1 "Hanken Grotesk";text-decoration:none;border:1px solid var(--ember-deep);padding:11px 18px;border-radius:999px;transition:.2s}
.dl:hover{background:rgba(255,122,24,.12)}
.seedout{font:500 12px/1 "JetBrains Mono";color:var(--muted);cursor:pointer;user-select:all}
.seedout:hover{color:var(--ember2)}

/* clone */
.clone{margin-top:46px;padding:30px;border:1px dashed var(--line);border-radius:var(--r);background:rgba(25,21,18,.5)}
.clone-grid{margin-top:18px;display:grid;gap:13px}
.drop{display:flex;align-items:center;justify-content:center;padding:26px;border:1.5px dashed var(--line);border-radius:var(--r-sm);
  color:var(--muted);cursor:pointer;text-align:center;transition:.2s;font-size:14px}
.drop:hover,.drop.over{border-color:var(--ember);color:var(--ink);background:rgba(255,122,24,.05)}
.drop.has{border-color:var(--ok);color:var(--ok)}
.ghost-btn{justify-self:start;background:transparent;color:var(--ember2);border:1px solid var(--ember-deep);
  padding:12px 24px;border-radius:999px;font:600 14px/1 "Hanken Grotesk";cursor:pointer;transition:.2s}
.ghost-btn:hover{background:rgba(255,122,24,.1)}
.clone-status{margin-top:12px;font:500 13px/1.4 "JetBrains Mono";color:var(--muted)}
.clone-status.ok{color:var(--ok)} .clone-status.err{color:var(--err)}

.muted{color:var(--muted)}
footer{position:relative;z-index:2;text-align:center;padding:30px;border-top:1px solid var(--line)}
.mono{font:400 12px/1 "JetBrains Mono";color:var(--muted);letter-spacing:.04em}

/* modal */
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:rgba(8,6,5,.72);backdrop-filter:blur(6px)}
.modal-card{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:var(--r);padding:30px;width:min(420px,90vw);box-shadow:0 40px 90px -30px #000}
.modal-card input{margin-top:16px}
.modal-actions{margin-top:18px;display:flex;justify-content:flex-end}

/* load reveal */
.hero,.console,.clone{animation:rise .8s cubic-bezier(.2,.8,.2,1) both}
.console{animation-delay:.1s}.clone{animation-delay:.2s}

@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes bounce{0%,100%{height:12px}50%{height:46px}}
@keyframes pulse{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.12)}}

@media(max-width:620px){.opts{grid-template-columns:1fr 1fr}.hero{padding-top:42px}}