/* Ugly Face 4BQ: the Beats & Bars drum machine. A cream MPC-style case with wooden end rails, a green LCD, sixteen pads and a pattern grid. */
.uf-title{font-family:var(--display,'Anton'),sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(44px,8vw,104px);line-height:.95;margin:0 0 6px;}
.uf-kicker{font-family:var(--mono,'Space Mono'),monospace;font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ember-ink,#C0331A);margin:6px 0 4px;}
.uf-dek{font-family:var(--display-heavy,'Archivo Black'),sans-serif;text-transform:uppercase;color:var(--ember-ink,#C0331A);font-size:clamp(15px,2vw,20px);line-height:1.25;margin:0 0 18px;}
.uf-intro{font-family:var(--body-serif,Georgia,serif);font-size:19px;line-height:1.55;max-width:46rem;margin:0 0 24px;}

.uf{
  --uf-case:#D9CFB8; --uf-case-2:#CBBF A4; --uf-ink:#1a1a1a; --uf-ember:#FB8322; --uf-pad:#8a8279;
  position:relative; margin:10px 0 30px; padding:22px 26px 24px; border-radius:16px;
  background:linear-gradient(180deg,#E3DAC4,#D2C7AE);
  box-shadow:0 2px 0 rgba(255,255,255,.5) inset,0 18px 40px rgba(3,3,3,.28);
  border:2px solid #b9ad92;
}
/* wooden end rails */
.uf::before,.uf::after{content:"";position:absolute;top:-2px;bottom:-2px;width:22px;border-radius:14px;
  background:repeating-linear-gradient(100deg,#6a3416 0 6px,#7c4220 6px 9px,#5b2b10 9px 14px),#6a3416;box-shadow:inset 0 0 8px rgba(0,0,0,.45);}
.uf::before{left:-12px;border-radius:14px 4px 4px 14px;}
.uf::after{right:-12px;border-radius:4px 14px 14px 4px;}

.uf-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 24px;align-items:center;margin-bottom:16px;}
.uf-lcd{background:#a8b878;color:#243019;font-family:var(--mono,'Space Mono'),monospace;font-weight:700;padding:10px 14px;border:5px solid #2a2a2a;border-radius:4px;box-shadow:inset 0 0 12px rgba(0,0,0,.25);
  display:grid;grid-template-columns:1fr auto;gap:2px 16px;text-transform:uppercase;letter-spacing:.06em;font-size:14px;line-height:1.35;}
.uf-lcd .uf-lcd-name{grid-column:1/-1;font-size:17px;}
.uf-brand{font-family:var(--display-heavy,'Archivo Black'),sans-serif;font-size:18px;line-height:1;text-transform:uppercase;text-align:right;}
.uf-brand small{display:block;font-family:var(--mono,'Space Mono'),monospace;font-size:10px;font-weight:700;letter-spacing:.14em;margin-top:4px;color:#555;}
.uf-brand i{font-style:normal;color:var(--ember-ink,#C0331A);}

.uf-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:22px;align-items:start;}
@media (max-width:860px){ .uf-body{grid-template-columns:1fr;} .uf{padding:18px 16px;} .uf::before,.uf::after{width:12px;} .uf::before{left:-7px;} .uf::after{right:-7px;} }

.uf-controls{display:grid;gap:14px;}
.uf-ctl{display:grid;gap:6px;}
.uf-ctl label{font-family:var(--mono,'Space Mono'),monospace;font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;}
.uf-ctl output{font-weight:700;}
.uf-ctl input[type=range]{width:100%;accent-color:#c0331a;min-height:28px;}
.uf-play{font-family:var(--display-heavy,'Archivo Black'),sans-serif;text-transform:uppercase;font-size:20px;letter-spacing:.04em;background:#FDF9EE;color:#1a1a1a;border:3px solid #1a1a1a;border-radius:6px;padding:14px 18px;min-height:56px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:12px;box-shadow:0 4px 0 #1a1a1a;}
.uf-play:active{transform:translateY(3px);box-shadow:0 1px 0 #1a1a1a;}
.uf-play[aria-pressed="true"]{background:var(--uf-ember);}
.uf-leds{display:flex;gap:14px;align-items:center;font-family:var(--mono,'Space Mono'),monospace;font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;}
.uf-led{display:inline-block;width:10px;height:10px;border-radius:50%;background:#7a1f16;margin-right:6px;vertical-align:-1px;box-shadow:0 0 0 2px rgba(0,0,0,.25) inset;}
.uf-led.is-flash{animation:uf-led .22s ease-out;}
@keyframes uf-led{0%{background:#ff3a2a;box-shadow:0 0 10px 3px rgba(255,58,42,.85);}100%{background:#7a1f16;box-shadow:none;}}
.uf-presets{display:flex;flex-wrap:wrap;gap:8px;}
.uf-preset{font-family:var(--mono,'Space Mono'),monospace;font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;background:#F4EBD6;border:2px solid #1a1a1a;border-radius:4px;padding:10px 12px;min-height:44px;cursor:pointer;}
.uf-preset:hover{background:#FB8322;}
.uf-status{font-family:var(--mono,'Space Mono'),monospace;font-size:12px;min-height:1.4em;margin:0;}

/* pads */
.uf-pads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;background:#9a9288;padding:12px;border-radius:6px;box-shadow:inset 0 0 10px rgba(0,0,0,.3);}
.uf-pad{position:relative;aspect-ratio:1/1;border:0;border-radius:8px;cursor:pointer;color:#f4efe6;background:linear-gradient(180deg,#8f877d,#7a726a);box-shadow:0 4px 0 #4e4841,inset 0 1px 0 rgba(255,255,255,.25);
  display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:7px 8px;text-align:left;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
.uf-pad-name{font-family:var(--mono,'Space Mono'),monospace;font-weight:700;font-size:clamp(9px,1.5vw,12px);line-height:1.15;letter-spacing:.03em;text-transform:uppercase;text-shadow:0 1px 0 rgba(0,0,0,.4);}
.uf-pad-key{position:absolute;top:6px;right:8px;font-family:var(--mono,'Space Mono'),monospace;font-size:10px;font-weight:700;opacity:.75;}
.uf-pad:focus-visible{outline:3px solid #1a1a1a;outline-offset:2px;}
.uf-pad.is-hit{animation:uf-hit .22s ease-out;}
@keyframes uf-hit{0%{background:#FB8322;box-shadow:0 0 18px 4px rgba(251,131,34,.8),0 4px 0 #4e4841;transform:translateY(3px);}100%{background:linear-gradient(180deg,#8f877d,#7a726a);transform:none;}}

/* pattern grid */
.uf-gridwrap{margin-top:20px;background:#2a2622;border-radius:8px;padding:14px;overflow-x:auto;}
.uf-gridhead{font-family:var(--mono,'Space Mono'),monospace;font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#d8cfbd;margin:0 0 8px;}
.uf-grid{display:grid;gap:3px;min-width:560px;}
.uf-row{display:grid;grid-template-columns:96px repeat(16,minmax(0,1fr));gap:3px;align-items:center;}
.uf-rowlabel{font-family:var(--mono,'Space Mono'),monospace;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#d8cfbd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.uf-cell{height:22px;border:0;border-radius:3px;background:#4a443d;cursor:pointer;padding:0;touch-action:manipulation;}
.uf-cell.is-beat{background:#5d554c;}
.uf-cell.is-on{background:#FB8322;box-shadow:0 0 6px rgba(251,131,34,.7);}
.uf-cell.is-now{outline:2px solid #fff;outline-offset:-2px;}
.uf-cell:focus-visible{outline:3px solid #fff;outline-offset:1px;}
.uf-help{font-family:var(--body-serif,Georgia,serif);font-size:16px;line-height:1.5;max-width:46rem;margin:18px 0 0;}

@media (prefers-reduced-motion:reduce){
  .uf-pad.is-hit{animation:none;background:#FB8322;}
  .uf-led.is-flash{animation:none;background:#ff3a2a;}
  .uf-play{transition:none;}
}

.uf-mp3{font-family:var(--mono,'Space Mono'),monospace;font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;background:#1a1a1a;color:#FDF9EE;border:0;border-radius:4px;padding:12px 14px;min-height:46px;cursor:pointer;}
.uf-mp3:hover{background:#C0331A;}
.uf-mp3:disabled{opacity:.6;cursor:progress;}
.uf-credit{font-family:var(--mono,'Space Mono'),monospace;font-size:11px;line-height:1.5;opacity:.75;max-width:46rem;margin:8px 0 0;}