:root{--peach:#FFD6C9;--mint:#BDF5DC;--lav:#D8C8FF;--navy:#1E1B4B;--hot:#FF6B4A;--paper:#FFF8F2}
*{box-sizing:border-box}
body{margin:0;font-family:Fredoka,sans-serif;color:var(--navy);background:
 radial-gradient(circle at 10% 0%,var(--peach) 0,transparent 40%),
 radial-gradient(circle at 90% 100%,var(--mint) 0,transparent 45%),
 repeating-linear-gradient(45deg,#fff6ee 0 14px,#fdf0e6 14px 28px);min-height:100vh}
header{display:flex;align-items:baseline;gap:16px;padding:12px 20px;flex-wrap:wrap}
.logo{margin:0;font-weight:700;font-size:34px;letter-spacing:-1px;transition:transform .3s}
.logo:hover{animation:wob .6s}
.logo span{background:var(--navy);color:var(--mint);padding:0 10px;border-radius:12px;transform:rotate(-4deg);display:inline-block}
@keyframes wob{25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}
.tag{margin:0;font-weight:300}
#layout{display:grid;grid-template-columns:280px 1fr 270px;gap:14px;padding:0 14px;height:calc(100vh - 110px);min-height:520px}
.panel{background:var(--paper);border:3px solid var(--navy);border-radius:24px;padding:14px;overflow:auto;box-shadow:6px 6px 0 var(--navy)}
.panel h2{margin:0 0 10px;font-size:20px}
.panel h3{margin:14px 0 6px;font-size:15px}
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;border:3px dashed var(--navy);border-radius:18px;padding:18px;cursor:pointer;text-align:center;background:var(--lav);transition:.2s}
.drop.over{background:var(--mint);transform:scale(1.02)}
.drop small{font-weight:300}
button{font-family:inherit;font-weight:500;border:2px solid var(--navy);background:#fff;color:var(--navy);border-radius:14px;padding:7px 11px;cursor:pointer;box-shadow:0 3px 0 var(--navy);transition:transform .08s}
button:active{transform:translateY(2px);box-shadow:0 1px 0 var(--navy)}
button.on{background:var(--navy);color:var(--mint)}
.big{width:100%;margin-top:10px;font-size:20px;background:var(--hot);color:#fff;padding:12px}
.samples,.envs{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.row{display:flex;gap:8px;align-items:center;margin:6px 0}
.slider{display:block;font-size:14px;margin:8px 0}
.slider input{width:100%;accent-color:var(--hot)}
#preview{width:100%;aspect-ratio:1;border-radius:14px;margin-top:8px;background:repeating-conic-gradient(#eee 0 25%,#fff 0 50%) 0 0/16px 16px;border:2px solid var(--navy)}
.status{font-family:'JetBrains Mono',monospace;font-size:12px;min-height:1em}
#stage-wrap{position:relative;border:3px solid var(--navy);border-radius:24px;overflow:hidden;box-shadow:6px 6px 0 var(--navy)}
#scene-container{position:absolute;inset:0}
#scene-container canvas{display:block}
#cmdbar{position:absolute;left:12px;right:12px;bottom:12px}
.cmdrow{display:flex;gap:6px;background:#fff;border:3px solid var(--navy);border-radius:22px;padding:6px}
#cmd{flex:1;border:0;outline:0;font:500 17px Fredoka;padding:6px 10px;background:transparent;min-width:0}
#send{background:var(--hot);color:#fff}
#mic.live{background:var(--hot);animation:wob .5s infinite}
#chips{display:flex;gap:6px;overflow-x:auto;padding:8px 2px 2px}
#chips button{white-space:nowrap;font-size:13px;background:rgba(255,255,255,.9)}
.bubble{position:absolute;transform:translate(-50%,-100%);background:#fff;border:3px solid var(--navy);border-radius:18px;padding:6px 12px;font-weight:500;pointer-events:none;max-width:220px;text-align:center}
.bubble:after{content:'';position:absolute;left:50%;bottom:-11px;border:8px solid transparent;border-top-color:var(--navy);transform:translateX(-50%)}
.hidden{display:none}
#log,#routines{list-style:none;padding:0;margin:0;font-size:13px;font-family:'JetBrains Mono',monospace}
#log li,#routines li{display:flex;justify-content:space-between;gap:6px;align-items:center;padding:4px 0;border-bottom:1px dashed #ccc}
#log li button,#routines li button{padding:2px 6px;font-size:12px;box-shadow:none}
#rec.live{background:var(--hot);color:#fff}
.toast{position:fixed;left:50%;top:16px;transform:translate(-50%,-150%);background:var(--navy);color:var(--mint);padding:10px 18px;border-radius:16px;transition:.3s;z-index:9}
.toast.show{transform:translate(-50%,0)}
footer{text-align:center;padding:8px;font-size:13px}
footer a{color:var(--hot)}
#tabs{display:none}
@media(max-width:860px){
 #layout{display:flex;flex-direction:column;height:auto}
 #stage-wrap{order:-1;height:62vh}
 .panel{display:none}.panel.show{display:block}
 #tabs{display:flex;gap:8px;justify-content:center;padding:10px}
}