:root{--bg:#0a0a0a;--panel:#111;--muted:#222;--accent:#9af;--text:#e0e0e0}
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:monospace;
  text-transform:lowercase;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:2rem 1rem;
  min-height:100vh
}
.header{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-weight:400
}
.header-logo{
  height:1em;
  width:auto
}
.top-buttons{
  display:flex;
  gap:1rem;
  margin:1rem 0;
  width:100%;
  max-width:600px
}
button{
  background:var(--panel);
  color:var(--accent);
  border:1px solid var(--muted);
  cursor:pointer;
  padding:.4rem .6rem;
  font-family:monospace
}
button:hover{background:#222}
.area{display:none;width:100%;max-width:600px;margin-bottom:1rem}
textarea{
  width:100%;
  height:70px;
  background:var(--panel);
  color:var(--text);
  border:1px solid var(--muted);
  padding:.4rem .5rem;
  font-family:monospace;
  resize:none
}
.copyBtn{margin-top:.4rem}
.board{
  display:grid;
  grid-template-columns:repeat(3,100px);
  grid-template-rows:repeat(3,100px);
  gap:8px;
  background:transparent;
  padding:1rem
}
.cell{
  width:100px;
  height:100px;
  background:var(--panel);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2.2rem;
  cursor:pointer;
  border:1px solid var(--muted);
  user-select:none
}
.cell.disabled{cursor:not-allowed;opacity:.6}
.controls{display:flex;gap:.5rem;align-items:center;margin-top:.6rem}
.status{margin-top:.8rem;opacity:.9}
.footer{margin-top:auto;opacity:.5;font-size:.9rem}
@media (max-width:520px){
  .board{grid-template-columns:repeat(3,calc(30vw));grid-template-rows:repeat(3,calc(30vw))}
  .cell{width:calc(30vw);height:calc(30vw);font-size:calc(6vw)}
}