```css
/* Google Font Import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

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

body{
  padding: 0 30px 30px 0;
  font-family:'Inter',sans-serif;
  background: radial-gradient(circle at top left,#1e293b,#0f172a 60%);
  color:#e2e8f0;
  display:flex;
  flex-direction: row;
  gap: 15px;
  min-height:100vh;
  overflow:auto;
}

@media screen and (min-width: 480px) and (max-width: 768px) {
  body {
    flex-direction: column;
  }
}

/* Sidebar */
.sidebar{
  width:380px;
  padding:30px 30px 30px 15px;
  background:rgba(15,23,42,0.75);
  backdrop-filter:blur(18px);
  border-right:1px solid rgba(255,255,255,0.08);
  overflow-y:auto;
  box-shadow:0 8px 30px rgba(0,0,0,0.25);
}

.sidebar h2{
  font-size:1.1rem;
  font-weight:700;
  margin-bottom:20px;
  color:#38bdf8;
  letter-spacing:.5px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  padding-bottom:12px;
}

@media screen and (min-width: 480px) and (max-width: 768px) {
  .sidebar {
    width: 100%;
  }
}

/* Controls */
.control {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom:18px;
}

.control label{
  display:block;
  margin-bottom:8px;
  font-size:.9rem;
  font-weight:500;
  color:#cbd5e1;
}

.control input[type="color"],
.control input[type="number"],
.control input[type="text"]{
  width:90%;
  padding:12px 14px;
  border:none;
  border-radius:14px;
  background:rgba(255,255,255,0.06);
  color:#fff;
  font-size:.95rem;
  outline:none;
  transition:.3s ease;
  border:1px solid transparent;
}

.control input[type="color"]:focus,
.control input[type="number"]:focus,
.control input[type="text"]:focus{
  border:1px solid #38bdf8;
  background:rgba(255,255,255,0.08);
  box-shadow:0 0 0 4px rgba(56,189,248,0.15);
}

.control input[type="range"]{
  width:90%;
  accent-color:#38bdf8;
  cursor:pointer;
}

@media screen and (min-width: 480px) and (max-width: 768px) {
  .control input[type="range"],
  .control input[type="color"],
  .control input[type="number"],
  .control input[type="text"] {
    display: block;
    width: 86%;
  }
}

/* Main Preview Area */
.preview-area{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding: 0 24px 24px 24px;
  overflow:auto;
}

@media screen and (min-width: 480px) and (max-width: 768px) {
  .preview-area {
    width: 100%;
  }
}

.preview-area h2{
  margin-bottom:20px;
  font-size:1.4rem;
  font-weight:600;
  color:#f8fafc;
}

/* Header */
header{
  width:100%;
  padding:18px 30px;
  background:rgba(255,255,255,0.08);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  box-shadow:0 8px 25px rgba(0,0,0,0.2);
}

@media screen and (min-width: 480px) and (max-width: 768px) {
  header {
    width: 80%;
  }
}

header h1{
  font-size:1.5rem;
  font-weight:700;
  color:#fff;
  letter-spacing:.5px;
}

@media screen and (min-width: 480px) and (max-width: 768px) {
  header h1{
    font-size:1.2rem;
  }
}

header a{
  position:absolute;
  top: 2px;
  right:24px;
  color:#38bdf8;
  text-decoration:none;
  font-weight:600;
  transition:.3s ease;
}

header a:hover{
  color:#fff;
  transform:translateY(-2px);
}

/* Button */
.custom-button{
  margin-top:20px;
  padding:14px 28px;
  border:none;
  border-radius:16px;
  background:linear-gradient(135deg,#38bdf8,#6366f1);
  color:#fff;
  font-size:1rem;
  font-weight:600;
  cursor:pointer;
  transition:all .3s ease;
  box-shadow:0 8px 20px rgba(59,130,246,0.35);
}

.custom-button:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 12px 30px rgba(59,130,246,0.45);
}

/* Code/Textarea */
textarea{
  width:70%;
  max-width:900px;
  height:500px;
  margin-top:30px;
  padding:20px;
  border:none;
  border-radius:22px;
  background:rgba(15,23,42,0.85);
  color:#e2e8f0;
  font-family:'Fira Code',monospace;
  font-size:.95rem;
  line-height:1.6;
  resize:none;
  outline:none;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
}

/* Scrollbar */
::-webkit-scrollbar{
  width:10px;
}

::-webkit-scrollbar-track{
  background:transparent;
}

::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,0.15);
  border-radius:10px;
}

::-webkit-scrollbar-thumb:hover{
  background:rgba(255,255,255,0.3);
}
```