*{box-sizing:border-box}
:root{
  --bg:#f4f8ff;--surface:#fff;--surface2:#eef5ff;--text:#10213a;--muted:#6c7c92;
  --line:#dbe7f6;--blue:#0b6cf0;--blue2:#4ca3ff;--danger:#e11d48;
  --shadow:0 18px 45px rgba(25,82,150,.12)
}
body.dark{
  --bg:#07111f;--surface:#0d1b2d;--surface2:#10233b;--text:#eef6ff;--muted:#9fb1c8;
  --line:#203650;--shadow:0 20px 55px rgba(0,0,0,.28)
}
body{
  margin:0;
  background:radial-gradient(circle at 15% 0%,rgba(76,163,255,.16),transparent 30%),var(--bg);
  color:var(--text);
  font:15px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;
  min-height:100vh;transition:.25s
}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.app{width:min(1180px,100%);margin:auto;padding:20px clamp(16px,4vw,38px) 28px}

/* Topbar */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:40px}
.brand{display:flex;align-items:center;gap:12px}
.brand strong{display:block;font-size:17px;letter-spacing:-.02em}
.brand span{display:block;color:var(--muted);font-size:11px;margin-top:1px}
.logo{
  width:40px;height:40px;display:grid;place-items:center;border-radius:13px;
  background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;font-size:23px;
  box-shadow:0 8px 25px rgba(11,108,240,.25)
}
.actions{display:flex;gap:8px}
.icon-btn,.pill,.toggle{
  border:1px solid var(--line);background:var(--surface);color:var(--text);
  border-radius:12px;min-height:40px;padding:0 13px
}
.icon-btn{width:40px;padding:0;font-weight:800}
.pill{min-height:34px;font-size:12px}
.pill.recording{background:#eaf3ff;color:var(--blue);border-color:#9bc5ff}
.pill.danger,.primary.danger{color:var(--danger);border-color:#fca5a5}
body.dark .pill.danger,body.dark .primary.danger{border-color:#9f1239}

/* Hero */
.hero{display:grid;grid-template-columns:1fr auto;align-items:end;gap:24px;margin-bottom:25px}
.eyebrow{font-size:10px;font-weight:800;letter-spacing:.16em;color:var(--blue);margin:0 0 7px}
.hero h1{font-size:clamp(34px,6vw,66px);line-height:.98;letter-spacing:-.055em;margin:0 0 15px}
.hero h1 span{color:var(--blue)}
.sub{max-width:650px;color:var(--muted);margin:0;font-size:15px}
.status-card{
  background:linear-gradient(145deg,var(--blue),#0752bd);color:#fff;border-radius:20px;
  padding:18px 23px;min-width:150px;box-shadow:0 18px 35px rgba(11,108,240,.2)
}
.status-card span{font-size:9px;opacity:.75;letter-spacing:.15em}
.status-card b{display:block;font-size:34px;line-height:1.05;margin:5px 0}
.status-card small{opacity:.8}

/* Panels */
.panel,.instrument-wrap{
  background:var(--surface);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)
}
.controls{
  padding:18px;display:grid;grid-template-columns:1.5fr 1.2fr 1fr 1fr;gap:16px;margin-bottom:24px
}
.control label{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;font-weight:700;margin-bottom:8px}
.control label b{color:var(--text)}
input[type=range]{width:100%;accent-color:var(--blue)}
select{
  width:100%;height:38px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);color:var(--text);padding:0 10px
}
.toggle{height:38px}
.toggle.active{background:var(--surface2);color:var(--blue);border-color:#a9ccff}

/* Instrument – realistic xylophone look */
.instrument-wrap{padding:clamp(16px,3vw,28px);overflow:hidden}
.instrument-head{display:flex;align-items:end;justify-content:space-between;gap:15px;margin-bottom:20px}
.instrument-head h2{margin:0;font-size:19px;letter-spacing:-.02em}
.mini-actions{display:flex;gap:8px}

/* Wooden frame */
.keys{
  position:relative;
  height:clamp(220px,32vw,360px);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:clamp(6px,1.2vw,14px);
  padding:18px 18px 22px;
  background:
    linear-gradient(180deg, #c4a574 0%, #a67c52 40%, #8b6914 100%);
  border-radius:14px;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.25),
    inset 0 -3px 8px rgba(0,0,0,.2),
    0 12px 28px rgba(0,0,0,.15);
}

/* Side rails of the wooden frame */
.keys::before,
.keys::after{
  content:"";
  position:absolute;
  top:10px; bottom:10px;
  width:14px;
  background:linear-gradient(90deg, #b8956a, #8b6914 40%, #6d4c2a);
  border-radius:6px;
  box-shadow:inset 1px 0 0 rgba(255,255,255,.2), inset -1px 0 0 rgba(0,0,0,.15);
  z-index:0;
}
.keys::before{left:8px}
.keys::after{right:8px}

.key{
  position:relative;
  z-index:1;
  flex:1;
  max-width:92px;
  min-width:22px;
  border:0;
  border-radius:8px 8px 10px 10px;
  color:#fff;
  /* graduated height – leftmost (low) taller */
  height:100%;
  box-shadow:
    inset 0 -6px 0 rgba(0,0,0,.18),
    inset 0 2px 0 rgba(255,255,255,.35),
    0 4px 10px rgba(0,0,0,.18);
  transition:transform .07s, filter .12s, box-shadow .12s;
  /* metal resonator knobs look */
}
/* Make bars progressively shorter from left to right (like real xylophone) */
.key:nth-child(1){height:100%}
.key:nth-child(2){height:94%}
.key:nth-child(3){height:88%}
.key:nth-child(4){height:82%}
.key:nth-child(5){height:76%}
.key:nth-child(6){height:70%}
.key:nth-child(7){height:64%}
.key:nth-child(8){height:58%}

.key:after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(
    160deg,
    rgba(255,255,255,.45) 0%,
    transparent 28%,
    transparent 70%,
    rgba(0,0,0,.12) 100%
  );
  pointer-events:none;
}

/* Small wooden peg / resonator on top of each bar */
.key:before{
  content:"";
  position:absolute;
  top:8px;
  left:50%;
  transform:translateX(-50%);
  width:14px;
  height:14px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #f5e6c8, #c4a574 60%, #8b6914);
  box-shadow:0 1px 3px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.4);
  z-index:2;
}

.key span{
  position:absolute;
  left:50%;
  bottom:26px;
  transform:translateX(-50%);
  font-size:clamp(14px,2.2vw,18px);
  font-weight:850;
  text-shadow:0 1px 3px rgba(0,0,0,.35);
  color:#fff;
}
.key small{
  position:absolute;
  left:50%;
  bottom:9px;
  transform:translateX(-50%);
  font-size:9px;
  opacity:.85;
  font-weight:700;
  text-shadow:0 1px 2px rgba(0,0,0,.3);
}

.key.playing{
  transform:translateY(6px) scaleY(.97);
  filter:brightness(1.12);
  box-shadow:
    inset 0 -3px 0 rgba(0,0,0,.18),
    inset 0 2px 0 rgba(255,255,255,.35),
    0 2px 6px rgba(0,0,0,.2);
}

.keyboard-hint{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;
  margin-top:17px;color:var(--muted);font-size:11px
}
.keyboard-hint span{font-weight:800;margin-right:4px}
.keyboard-hint em{margin-left:8px;font-style:normal}

.keyboard-hint kbd{
  background:var(--surface2);border:1px solid var(--line);border-bottom-width:2px;
  padding:2px 7px;border-radius:6px;color:var(--text);font-weight:800
}

/* ===== Mallets (pemukul) ===== */
.xylo-stage{
  position:relative;
}
.mallet{
  position:absolute;
  top: -8px;
  width: 14px;
  height: 130px;
  transform-origin: 50% 8%;
  pointer-events:none;
  z-index: 5;
  transition: left .18s ease, transform .12s ease;
  opacity: 0.95;
}
.mallet-left{ left: 18%; }
.mallet-right{ left: 62%; }

.mallet-stick{
  position:absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 7px;
  height: 95px;
  border-radius: 4px;
  background: linear-gradient(90deg, #d4b896, #a67c52 45%, #8b6914 100%);
  box-shadow: inset 1px 0 0 rgba(255,255,255,.25), 0 1px 3px rgba(0,0,0,.2);
}
.mallet-head{
  position:absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff6b6b, #e53935 55%, #b71c1c);
  box-shadow:
    0 3px 6px rgba(0,0,0,.3),
    inset 0 2px 0 rgba(255,255,255,.35),
    inset 0 -2px 4px rgba(0,0,0,.2);
}

/* Strike animation */
.mallet.striking{
  animation: malletStrike .22s ease-out;
}
@keyframes malletStrike{
  0%   { transform: rotate(0deg) translateY(0); }
  35%  { transform: rotate(var(--strike-rot, 8deg)) translateY(18px); }
  100% { transform: rotate(0deg) translateY(0); }
}
.mallet-left.striking{ --strike-rot: 12deg; }
.mallet-right.striking{ --strike-rot: -12deg; }


/* Gallery */
.gallery-section{padding:clamp(16px,3vw,28px);margin-top:24px}
.gallery-header{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:18px}
.gallery-header h2{margin:0;font-size:19px}
.gallery-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.gallery-item{
  text-align:left;border:1px solid var(--line);background:var(--surface2);
  border-radius:16px;padding:14px 16px;color:var(--text);transition:.15s
}
.gallery-item:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:0 8px 20px rgba(11,108,240,.12)}
.gi-title{font-weight:700;font-size:15px;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gi-meta{display:flex;gap:10px;font-size:11px;color:var(--muted);margin-bottom:4px}
.gi-date{font-size:10px;color:var(--muted)}
.gallery-empty{color:var(--muted);text-align:center;padding:28px 10px;grid-column:1/-1}

/* Song Detail */
.song-detail{padding:clamp(16px,3vw,28px);margin-top:24px}
.song-detail.hidden{display:none}
.song-detail-head{display:flex;justify-content:space-between;align-items:start;gap:12px;margin-bottom:16px}
.song-detail-head h2{margin:0 0 4px;font-size:22px}
.detail-meta{margin:0;color:var(--muted);font-size:13px}
.detail-actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.primary{
  background:var(--blue);color:#fff;border:0;border-radius:12px;
  min-height:42px;padding:0 18px;font-weight:600
}
.primary:disabled{opacity:.6;cursor:not-allowed}
.comments-block h3{margin:0 0 12px;font-size:15px}
.comments-list{display:flex;flex-direction:column;gap:10px;margin-bottom:16px;max-height:280px;overflow-y:auto}
.comment-item{
  background:var(--surface2);border-radius:12px;padding:10px 14px;font-size:13px
}
.comment-item strong{font-size:13px}
.c-date{margin-left:8px;font-size:11px;color:var(--muted)}
.comment-item p{margin:4px 0 0}
.no-comments{color:var(--muted);font-size:13px}
.comment-form{display:grid;gap:8px}
.comment-form input,.comment-form textarea{
  width:100%;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);color:var(--text);padding:10px 12px
}
.comment-form textarea{resize:vertical;min-height:60px}

/* Features */
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;overflow:hidden;margin-top:24px}
.features article{padding:20px;background:var(--surface)}
.features article div{font-size:22px;margin-bottom:7px}
.features b{display:block;font-size:13px}
.features span{display:block;color:var(--muted);font-size:11px;margin-top:4px}

footer{text-align:center;color:var(--muted);font-size:10px;margin-top:22px}
footer span{margin:0 7px;color:var(--blue)}

/* Dialogs */
dialog{
  border:0;border-radius:20px;padding:0;max-width:420px;width:calc(100% - 32px);
  background:var(--surface);color:var(--text);box-shadow:0 25px 60px rgba(0,0,0,.25)
}
dialog::backdrop{background:rgba(0,0,0,.45)}
.dialog-inner{padding:28px 24px 24px;position:relative}
.dialog-inner h2{margin:0 0 16px;font-size:20px}
.dialog-inner .close{
  position:absolute;top:12px;right:12px;width:36px;height:36px;
  border:0;background:transparent;font-size:22px;color:var(--muted);border-radius:10px
}
.dialog-inner label{display:block;font-size:12px;font-weight:700;margin:12px 0 5px;color:var(--muted)}
.dialog-inner label span{color:var(--danger)}
.dialog-inner input{
  width:100%;height:42px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface2);color:var(--text);padding:0 12px
}
.form-hint{font-size:12px;color:var(--muted);margin:10px 0 0}
.dialog-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}
.dialog-inner ul{padding-left:18px;margin:0 0 18px;color:var(--muted);font-size:14px}
.dialog-inner ul li{margin-bottom:6px}

/* Toast */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:#10213a;color:#fff;padding:12px 22px;border-radius:999px;
  font-size:13px;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.25);
  z-index:999;transition:opacity .25s,transform .25s
}
.toast.hidden{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(12px)}
body.dark .toast{background:#eef6ff;color:#07111f}

/* Responsive */
@media(max-width:800px){
  .hero{grid-template-columns:1fr}
  .controls{grid-template-columns:1fr 1fr}
  .features{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .controls{grid-template-columns:1fr}
  .features{grid-template-columns:1fr}
  .gallery-list{grid-template-columns:1fr}
}