:root{--ink:#121212;--grey:#8a8580;--red:#e8322b;--bg:#fafafa}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);font-family:'IBM Plex Mono',monospace;color:var(--ink)}
body,button,input,a{cursor:none}
#scene-container{position:fixed;inset:0;touch-action:none}
.masthead{position:fixed;top:32px;left:36px;pointer-events:none;animation:rise .9s ease both}
.kicker{font-size:11px;letter-spacing:.22em;color:var(--grey)}
h1{font-family:'Fraunces',serif;font-style:italic;font-weight:300;font-size:76px;line-height:.9;margin:14px 0 12px;letter-spacing:-.02em}
.red{color:var(--red);font-weight:500}
.sub{font-size:12px;color:#555;margin:0;max-width:340px}
.panel{position:fixed;right:28px;top:50%;transform:translateY(-50%);width:240px;background:#fff;border:1px solid #e6e2dc;padding:20px;box-shadow:0 20px 50px -24px rgba(0,0,0,.18);animation:rise 1s .15s ease both}
.sec{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);margin:4px 0 10px}
.swatches{display:flex;gap:9px;margin-bottom:20px;flex-wrap:wrap}
.sw{width:26px;height:26px;border-radius:50%;border:none;padding:0;outline:1.5px solid transparent;outline-offset:3px;transition:transform .2s}
.sw:hover{transform:scale(1.12)}
.sw.on{outline-color:var(--ink)}
.sw.mix{background:conic-gradient(#e8322b,#ff8a1f,#ffd23a,#5cc94a,#2f7bff,#e8322b);font-size:0}
input[type=range]{width:100%;accent-color:var(--ink)}
.range-labels{display:flex;justify-content:space-between;font-size:10px;color:var(--grey);margin-bottom:18px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;border-top:1px solid #eee;padding-top:14px;margin-bottom:16px}
.num{font-family:'Fraunces',serif;font-size:40px;font-variant-numeric:tabular-nums;line-height:1}
#pour{width:100%;background:var(--ink);color:#fff;border:none;padding:14px;font-family:inherit;font-size:12px;letter-spacing:.12em;text-transform:uppercase;transition:background .2s,transform .1s}
#pour:hover{background:var(--red)}
#pour:active{transform:scale(.97)}
.hint{position:fixed;left:36px;bottom:28px;font-size:11px;letter-spacing:.12em;color:#666;pointer-events:none}
.remix{position:fixed;right:28px;bottom:24px;font-size:11px;color:var(--grey);text-decoration:none;letter-spacing:.08em}
.remix:hover{color:var(--red)}
.shake-btn{display:none}
#cursor{position:fixed;left:0;top:0;width:22px;height:22px;border:1.5px solid var(--ink);border-radius:50%;pointer-events:none;z-index:99;transform:translate(-50%,-50%);transition:width .2s,height .2s,background .2s;display:flex;align-items:center;justify-content:center}
#cursor .dot{width:3px;height:3px;background:var(--ink);border-radius:50%}
#cursor.hover{width:34px;height:34px}
#cursor.hold{width:10px;height:10px;background:var(--ink)}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}
.panel{animation-name:none}
@media (max-width:760px){
  .masthead{top:18px;left:18px}
  h1{font-size:46px}
  .sub{font-size:11px;max-width:220px}
  .panel{top:auto;bottom:44px;right:12px;left:12px;transform:none;width:auto;padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
  .stats{margin:0;padding-top:6px;grid-column:1/3}
  .num{font-size:26px}
  #pour{grid-column:1/3;padding:11px}
  .swatches{margin-bottom:6px;gap:6px}.sw{width:22px;height:22px}
  .hint{left:14px;bottom:16px;font-size:9px}
  .remix{right:14px;bottom:14px;font-size:9px}
  .shake-btn{display:block;position:fixed;right:14px;top:18px;background:#fff;border:1px solid #ddd;font-family:inherit;font-size:10px;letter-spacing:.15em;padding:8px 12px;text-transform:uppercase}
}
@media (hover:none){#cursor{display:none}body,button,input,a{cursor:auto}}