:root{
  --primary:#6750a4;
  --on-primary:#ffffff;
  --surface:#1e1e1e;
  --surface-variant:#2a2a2a;
  --outline:#444444;
  --ink:#e0e0e0;
  --btn-bg:#3a3a3a;
  --btn-hover:#4e4e4e;
  --radius:1.5rem;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto;
  background:var(--surface);
  color:var(--ink);
  line-height:1.5;
}

.app{
  max-width:55rem;
  margin:2rem auto;
  padding:1rem;
}

header{
  background:var(--surface-variant);
  padding:1rem 1.2rem;
  border-radius:var(--radius);
  display:flex;
  justify-content:space-between;
  align-items:center;
}

h1{
  font-size:1.5rem;
  font-weight:600;
}

.btn{
  border:0;
  background:var(--btn-bg);
  color:var(--ink);
  padding:0.6rem 1rem;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  cursor:pointer;
  font-size:1rem;
  transition:0.2s;
}

.btn:hover{background:var(--btn-hover);}
.btn.active{background:var(--primary); color:var(--on-primary);}

.selector{
  display:flex;
  gap:1rem;
  margin:1rem 0;
  flex-wrap:wrap;
}

.card{
  background:var(--surface-variant);
  border-radius:var(--radius);
  padding:1.5rem;
  border:1px solid var(--outline);
  display:flex;
  flex-direction:column;
  gap:1rem;
}

label{
  font-size:0.9rem;
  font-weight:600;
  color:var(--primary);
}

textarea{
  width:100%;
  min-height:6rem;
  padding:0.8rem;
  border-radius:1rem;
  border:1px solid var(--outline);
  font-size:1rem;
  background:#2b2b2b;
  color:var(--ink);
  resize:vertical;
}

.actions{
  display:flex;
  gap:0.8rem;
  flex-wrap:wrap;
  justify-content:flex-start;
}

.guide{
  margin-top:0.8rem;
  padding:0.8rem;
  border-radius:1rem;
  background:#2c2c2c;
  font-family:monospace;
  font-size:0.85rem;
  white-space:pre-wrap;
}

.snack{
  position:fixed;
  bottom:1.5rem;
  left:50%;
  transform:translateX(-50%);
  background:#2b2b2b;
  color:#fff;
  padding:0.6rem 1rem;
  border-radius:0.75rem;
  opacity:0;
  transition:.25s;
}

.snack.show{opacity:1;}

@media(max-width:520px){
  .selector{flex-direction:column;}
  .actions{flex-direction:column;}
}