:root{--pms:#3CDBC0;--deep:#1FA48F;--ink:#0E3B34;--glass:rgba(255,255,255,.35)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;font-family:'Fredoka',sans-serif;color:var(--ink);
background:radial-gradient(ellipse at 50% 40%,#E8FBF7 0%,#BFF3E8 70%,#9fe6d8 100%)}
#scene-container{position:fixed;inset:0}
#scene-container canvas{display:block;touch-action:none}
#panel{position:fixed;left:18px;bottom:44px;width:310px;padding:18px;border-radius:22px;background:var(--glass);
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.6);
box-shadow:0 20px 50px rgba(14,59,52,.15);animation:rise .7s cubic-bezier(.2,.9,.3,1.2)}
@keyframes rise{from{transform:translateY(40px);opacity:0}}
.head{display:flex;justify-content:space-between;align-items:flex-start}
h1{margin:0;font-size:30px;line-height:.9;font-weight:700;letter-spacing:-1px}
h1 em{font-style:normal;font-weight:300;color:var(--deep)}
.swatch{width:74px;background:#fff;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.12);overflow:hidden;transform:rotate(4deg)}
.chip{height:46px;background:var(--pms)}
.lbl{padding:4px 6px;font:9px/1.2 'JetBrains Mono',monospace}
.lbl b{font-size:12px}
.tag{font-size:12px;margin:8px 0 12px;opacity:.75}
label{display:block;font-size:13px;font-weight:500;margin:6px 0}
output{float:right;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--deep)}
input[type=range]{width:100%;accent-color:var(--deep)}
.row{display:flex;gap:6px;margin-top:8px}
.row button{flex:1}
button{font-family:inherit;cursor:pointer;border:none;border-radius:12px;padding:8px 4px;font-size:13px;font-weight:500;color:var(--ink);transition:.15s}
.seg button{background:rgba(255,255,255,.5)}
.seg button.on{background:var(--ink);color:var(--pms)}
.act{background:var(--pms);box-shadow:0 3px 0 var(--deep)}
.act:hover{background:#2fc9ae}
.act:active{transform:translateY(2px);box-shadow:0 1px 0 var(--deep)}
.act.ghost{background:rgba(255,255,255,.6);box-shadow:0 3px 0 rgba(14,59,52,.2)}
#stats{position:fixed;top:16px;right:16px;padding:12px 16px;border-radius:18px;background:var(--glass);backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.6);display:grid;grid-template-columns:1fr 1fr;gap:4px 18px;min-width:220px}
#stats span{display:block;font:10px 'JetBrains Mono',monospace;opacity:.6}
#stats b{font-size:22px;font-weight:700}
#stats p{grid-column:1/3;margin:2px 0 0;font-size:12px;color:var(--deep)}
footer{position:fixed;bottom:10px;left:0;right:0;text-align:center;font-size:12px;opacity:.75;pointer-events:none}
footer a{color:var(--ink);font-weight:700;pointer-events:auto}
#drawerBtn{display:none}
@media(max-width:640px){
 #panel{left:8px;right:8px;width:auto;bottom:0;border-radius:22px 22px 0 0;transform:translateY(105%);transition:transform .35s;animation:none;max-height:75vh;overflow:auto}
 #panel.open{transform:none}
 #drawerBtn{display:block;position:fixed;bottom:34px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--pms);padding:10px 20px;z-index:5}
 #panel.open~#drawerBtn{bottom:calc(75vh + 6px)}
 #stats{min-width:0;padding:8px 12px;top:8px;right:8px}
 #stats b{font-size:17px}
}