@media (max-width: 900px){
  body{
    padding:12px;
    font-size:14px;
  }
  .brand-header{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
  .brand-logo{
    height:32px;
  }
  .container{
    flex-direction:column;
    align-items:stretch;
    gap:16px;
  }
  .panel{
    min-width:0;
    width:100%;
    max-width:100%;
  }
  .container > .panel:first-of-type{
    order:1;
  }
  .preview-section{
    order:2;
    width:100%;
  }
  .container > .panel:last-of-type{
    order:3;
  }
  #previewWrapper{
    width:100%;
    max-width:100%;
    height:auto;
    aspect-ratio:1/1;
    margin:8px auto 0;
  }
  button{
    width:100%;
    text-align:center;
  }
  .hint{
    font-size:12px;
  }
}

@media (max-width: 480px){
  body{
    padding:10px;
  }
  .panel{
    padding:12px;
  }
  label{
    font-size:12px;
  }
  input[type="number"],
  input[type="file"],
  input[type="range"]{
    font-size:14px;
  }
  .seo-body{
    font-size:12px;
  }
  .seo-body h2,
  .seo-body h3{
    font-size:13px;
  }
}

.dpad-container{margin-top:12px;display:flex;flex-direction:column;align-items:center;gap:6px;}
.dpad-row{display:flex;justify-content:center;gap:6px;}
.dpad-btn{background:#222;color:#fff;border:1px solid #555;padding:8px 14px;border-radius:8px;font-size:18px;}
@media (min-width:901px){.dpad-container{display:none;}}