:root{
  --bg:#f6f5f2;
  --panel:#fbfaf7;
  --panel-2:#f1efe9;
  --line:#d8d4ca;
  --text:#111111;
  --muted:#75716a;
  --parasite:#00ff66;
  --canvas:#f3f2ee;
}

*{box-sizing:border-box}

html,body{
  height:100%;
  margin:0;
}

body{
  font-family:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  overflow:hidden;
}

.app{
  height:100%;
  display:grid;
  grid-template-columns:320px minmax(0,1fr);
}

.panel{
  border-right:1px solid var(--line);
  background:linear-gradient(180deg, rgba(251,250,247,0.96), rgba(241,239,233,0.96));
  display:flex;
  flex-direction:column;
  min-height:0;
}

.panel-head{
  padding:18px 18px 14px;
  border-bottom:1px solid var(--line);
}

.eyebrow{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:8px;
}

h1{
  margin:0;
  font-family:"Space Grotesk","IBM Plex Sans",sans-serif;
  font-size:31px;
  font-weight:700;
  letter-spacing:-0.03em;
}

.sub{
  margin:8px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.55;
  max-width:29ch;
}

.scroll{
  overflow:auto;
  padding:12px;
}

.section{
  border:1px solid var(--line);
  background:rgba(255,255,255,0.62);
  border-radius:10px;
  padding:12px;
  margin-bottom:10px;
}

.section-title{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:10px;
}

.field,.btn,.species-chip,input[type="range"]{
  width:100%;
}

.field{
  border:1px solid var(--line);
  background:#fff;
  border-radius:8px;
  padding:10px 11px;
  color:var(--text);
  font:inherit;
  font-size:13px;
}

.field-color{
  padding:6px;
  height:42px;
  cursor:pointer;
}

.field-textarea{
  min-height:86px;
  resize:none;
  line-height:1.25;
}

.stack{
  margin-top:10px;
}

.label{
  display:block;
  margin-bottom:6px;
  font-size:11px;
  color:var(--muted);
  letter-spacing:.08em;
  text-transform:uppercase;
}

.row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:11px;
  color:var(--muted);
  margin-bottom:6px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.value{
  color:var(--text);
  font-variant-numeric:tabular-nums;
  letter-spacing:0;
}

input[type="range"]{
  accent-color:var(--parasite);
  margin:0 0 10px;
}

.species{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
}

.species-chip{
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:8px;
  padding:10px 8px;
  cursor:pointer;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  transition:border-color .16s, background .16s, color .16s;
  text-align:center;
}

.species-chip.active{
  border-color:var(--text);
  color:var(--text);
  background:#effff5;
}

.btn-row{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
}

.btn-row.single{
  grid-template-columns:1fr;
}

.btn{
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:8px;
  padding:10px 11px;
  cursor:pointer;
  color:var(--text);
  font:inherit;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:background .16s, border-color .16s;
}

.btn:hover{
  background:var(--panel-2);
}

.btn.primary{
  background:var(--text);
  border-color:var(--text);
  color:var(--bg);
}

.tiny{
  margin:8px 0 0;
  font-size:11px;
  color:var(--muted);
  line-height:1.55;
}

.stage-wrap{
  min-width:0;
  min-height:0;
  padding:24px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.stage{
  position:relative;
  width:min(100%,1260px);
  height:min(100%,920px);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0.18)),
    var(--canvas);
  border:1px solid rgba(17,17,17,0.08);
  border-radius:16px;
  box-shadow:0 28px 60px rgba(17,17,17,0.08);
  overflow:hidden;
}

#canvas-holder{
  position:absolute;
  inset:0;
}

.overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:18px 20px;
}

.badge,.status{
  width:max-content;
  max-width:min(70ch, 100%);
  background:rgba(255,255,255,0.72);
  border:1px solid rgba(17,17,17,0.08);
  border-radius:999px;
  padding:8px 12px;
  font-size:11px;
  color:var(--muted);
  letter-spacing:.08em;
  text-transform:uppercase;
  backdrop-filter:blur(10px);
}

.status{
  border-radius:12px;
  white-space:normal;
  line-height:1.45;
}

.status strong{
  color:var(--text);
  font-weight:600;
}

@media (max-width:920px){
  .app{
    grid-template-columns:1fr;
  }

  .panel{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    top:auto;
    max-height:74vh;
    z-index:20;
    border-right:none;
    border-top:1px solid var(--line);
    border-radius:16px 16px 0 0;
    box-shadow:0 -18px 40px rgba(17,17,17,0.10);
  }

  .stage-wrap{
    padding:14px 14px 140px;
  }

  .stage{
    height:100%;
  }
}