:root{
  --orange:#ff7900;
  --green:#72ff00;
  --bg:#07090b;
  --panel:#12161a;
  --line:#292f34;
  --muted:#aab1b6;
}

*{
  box-sizing:border-box;
}

html{
  background:var(--bg);
}

body{
  margin:0;
  min-height:100svh;
  background:var(--bg);
  color:#f7f7f7;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-tap-highlight-color:transparent;
}

button,
label,
input{
  font:inherit;
}

button,
label{
  touch-action:manipulation;
}

.app{
  width:100%;
  height:100svh;
  margin:auto;
  padding:0 8px env(safe-area-inset-bottom);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.topbar{
  height:58px;
  flex:0 0 58px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:7px 4px;
}

.eyebrow{
  font-weight:900;
  letter-spacing:.15em;
  color:var(--green);
  font-size:.62rem;
}

h1{
  margin:2px 0 0;
  font-size:1.18rem;
  line-height:1;
  text-transform:uppercase;
  font-style:italic;
}

.step{
  border:1px solid #30363b;
  border-radius:999px;
  padding:6px 9px;
  color:#aeb5ba;
  font-size:.7rem;
  font-weight:800;
}

.layout{
  display:block;
  flex:1;
  min-height:0;
  position:relative;
}

.card{
  background:transparent;
  border:0;
  border-radius:0;
  padding:0;
  box-shadow:none;
}

.stage{
  position:relative;
  width:100%;
  height:100%;
  min-height:0;
  overflow:hidden;
  border-radius:14px;
  background:#171b1e;
  background-image:
    linear-gradient(45deg,#20252a 25%,transparent 25%),
    linear-gradient(-45deg,#20252a 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#20252a 75%),
    linear-gradient(-45deg,transparent 75%,#20252a 75%);
  background-size:24px 24px;
  background-position:0 0,0 12px,12px -12px,-12px 0;
  touch-action:none;
}

canvas{
  display:block;
  width:100%;
  height:100%;
  touch-action:none;
  cursor:grab;
}

canvas:active{
  cursor:grabbing;
}

.empty{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(82%,320px);
  padding:24px 18px;
  text-align:center;
  background:#080a0de6;
  border:1px dashed #596168;
  border-radius:15px;
  cursor:pointer;
  touch-action:manipulation;
}

.empty:active{
  transform:translate(-50%,-50%) scale(.99);
}

.empty span{
  display:block;
  color:var(--muted);
  font-size:.8rem;
  margin-top:6px;
}

.plus{
  margin:auto auto 10px;
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  background:var(--orange);
  color:#111;
  border-radius:50%;
  font-size:1.7rem;
  font-weight:900;
}

.actions{
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  margin:0;
  padding:8px;
  display:grid;
  gap:7px;
  background:#080a0ddd;
  border:1px solid #30363bcc;
  border-radius:14px;
  backdrop-filter:blur(8px);
  z-index:5;
}

.actions button{
  min-height:50px;
  border:0;
  border-radius:11px;
  padding:12px 14px;
  font-weight:900;
  cursor:pointer;
}

.editor-controls{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.editor-controls button{
  background:#252b30;
  color:#fff;
}

.zoom{
  display:grid;
  grid-template-columns:48px 1fr 52px;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:.76rem;
  padding:2px 3px;
}

.zoom input{
  width:100%;
  accent-color:var(--orange);
  height:32px;
}

.zoom output{
  text-align:right;
  color:#fff;
  font-variant-numeric:tabular-nums;
}

.format-box{
  display:grid;
  gap:6px;
}

.format-title{
  font-size:.72rem;
  font-weight:900;
  color:#d6dadd;
  text-align:center;
}

.format-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
}

.format-btn{
  min-height:48px!important;
  background:#20262b!important;
  color:#fff;
  border:1px solid #343b40!important;
  font-size:.75rem!important;
  line-height:1.1;
}

.format-btn small{
  font-size:.65rem;
  color:#9ca4a9;
}

.format-btn.active{
  background:var(--orange)!important;
  color:#160b00!important;
  border-color:var(--orange)!important;
}

.format-btn.active small{
  color:#160b00;
}

.final-actions{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}

.download{
  background:var(--orange);
  color:#160b00;
}

.actions button:disabled{
  opacity:.4;
  cursor:not-allowed;
}

.actions small{
  text-align:center;
  color:#747d83;
  font-size:.7rem;
  line-height:1.3;
  padding:0 8px;
}

.info{
  display:none;
}

footer{
  display:none;
  color:#596167;
  text-align:center;
  font-size:.62rem;
  padding:15px 0 0;
  letter-spacing:.07em;
}

@media (min-width:700px){
  body{
    background:
      radial-gradient(circle at 10% 0,#72ff0014,transparent 28rem),
      radial-gradient(circle at 100% 30%,#ff790012,transparent 30rem),
      var(--bg);
  }

  .app{
    width:min(1120px,100%);
    padding:20px 18px 18px;
  }

  .topbar{
    height:auto;
    padding:0 0 18px;
  }

  h1{
    font-size:2.3rem;
  }

  .layout{
    display:grid;
    grid-template-columns:minmax(0,720px) 1fr;
    gap:20px;
  }

  .card{
    background:linear-gradient(145deg,#161b1f,#0e1114);
    border:1px solid var(--line);
    border-radius:18px;
    padding:14px;
    box-shadow:0 18px 55px #0008;
  }

  .stage{
    height:auto;
    aspect-ratio:2/3;
    min-height:0;
    border-radius:12px;
  }

  .actions{
    position:static;
    background:transparent;
    margin-top:12px;
    padding:0;
  }

  .info{
    display:block;
    padding:24px;
  }

  .info h2{
    margin:0 0 20px;
    text-transform:uppercase;
    font-size:1.05rem;
  }

  .info ol{
    margin:0;
    padding:0;
    list-style:none;
    counter-reset:item;
  }

  .info li{
    counter-increment:item;
    display:grid;
    grid-template-columns:35px 1fr;
    column-gap:8px;
    margin-bottom:22px;
  }

  .info li:before{
    content:"0" counter(item);
    display:grid;
    place-items:center;
    height:24px;
    background:var(--orange);
    color:#111;
    font-size:.7rem;
    font-weight:1000;
    transform:skew(-8deg);
  }

  .info b{
    align-self:center;
  }

  .info span{
    grid-column:2;
    color:var(--muted);
    font-size:.87rem;
    line-height:1.4;
    margin-top:4px;
  }

  .privacy{
    border-top:1px solid var(--line);
    padding-top:18px;
    font-size:.87rem;
  }

  .privacy span{
    display:block;
    color:var(--muted);
    margin-top:5px;
  }

  footer{
    display:block;
  }
}

@media (max-width:380px){
  .topbar{
    height:54px;
    flex-basis:54px;
  }

  .actions{
    left:6px;
    right:6px;
    bottom:6px;
  }

  .actions button{
    min-height:44px;
  }
}