:root{font-family:Arial,Helvetica,sans-serif;color:#101010;background:#f4f4f1;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100dvh;display:grid;place-items:center}.machine{width:min(100%,470px);min-height:100dvh;display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top) + 16px) 20px calc(env(safe-area-inset-bottom) + 20px);gap:18px}.upper,.lower{flex:1;min-height:0}.upper{display:flex;flex-direction:column;justify-content:space-around;gap:18px}h1{font-size:clamp(36px,9vw,55px);font-weight:700;letter-spacing:-.075em;text-align:center;margin:0;line-height:1.1}.raised{display:inline-block;position:relative;transform:translateY(-.10em);margin:0 .02em}.raised:after{content:'~';position:absolute;left:0;right:0;bottom:-.47em;text-align:center;font-size:.55em;font-weight:400;letter-spacing:0}.screen{background:#deded9;border:2px solid #151515;border-radius:12px;padding:15px 12px;min-height:155px;display:flex;flex-direction:column;justify-content:space-between;gap:19px}.screen-head,.screen-foot{display:flex;justify-content:space-between;gap:8px;font-size:10px;font-weight:700;letter-spacing:.08em}.steps{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:3px}.step{height:35px;min-width:0;padding:0;background:#c7c7c2;border:1px solid #b4b4af;border-radius:4px;cursor:pointer;touch-action:manipulation}.step.active{background:#111;border-color:#111}.step.cursor{outline:2px solid #555;outline-offset:1px}.step.preview{animation:stepflash 1s steps(1) infinite}.controls{display:flex;justify-content:space-around;align-items:center;gap:12px}.round{border:2px solid #111;border-radius:50%;background:#111;color:white;cursor:pointer;font-size:11px;font-weight:700;transition:background .12s,color .12s;touch-action:manipulation}.round:hover,.round:focus-visible,.round.selected{background:#fff;color:#111}.utility{width:72px;height:72px}.knob-wrap{display:flex;flex-direction:column;align-items:center;gap:7px}.knob-wrap small{font-size:9px;letter-spacing:.03em;font-weight:bold}.knob{width:65px;height:65px;border:3px solid #111;border-radius:50%;background:#eee;display:grid;place-items:start center;padding:7px;cursor:grab;touch-action:none;transform:rotate(var(--angle,-135deg))}.knob-mark{height:20px;width:4px;border-radius:3px;background:#111}.lower{display:flex;align-items:center;justify-content:center}.pads{width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,3vw,19px);align-content:center}.pad{width:100%;aspect-ratio:1/1;font-size:clamp(9px,2.4vw,12px);letter-spacing:.01em;padding:5px;overflow-wrap:anywhere}.pad.pulse{animation:padflash 1s steps(1) infinite}@keyframes padflash{50%{background:#fff;color:#111}}@keyframes stepflash{50%{background:#151515;border-color:#151515}}@media(min-width:750px){body{padding:30px}.machine{width:min(920px,95vw);min-height:620px;height:min(820px,90vh);flex-direction:row;padding:32px;gap:40px;border:2px solid #111;border-radius:20px}.upper,.lower{flex:1}.pads{gap:15px}.pad{font-size:12px}.step{height:44px}}@media(max-height:700px) and (max-width:749px){.machine{gap:8px;padding-top:8px;padding-bottom:8px}.upper{gap:8px}.screen{min-height:115px;gap:9px;padding:10px}.step{height:26px}.utility{width:55px;height:55px}.knob{width:50px;height:50px}h1{font-size:32px}.pads{gap:8px}}

/* v1.1: knob matches the 4-column drum-pad diameter and uses a clean touch state. */
.knob-wrap{width:100%;min-width:0;align-items:stretch;justify-content:center}
.knob{width:100%;height:auto;aspect-ratio:1/1;max-width:none;border:2px solid #111;background:#111;color:#fff;outline:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;transition:background .12s,color .12s;}
.knob-mark{background:currentColor}
.knob:hover,.knob:focus-visible,.knob.pressed{background:#fff;color:#111}
.knob:focus:not(:focus-visible){outline:none}
.controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,3vw,19px);justify-items:center}
.controls .utility{width:min(72px,100%);height:auto;aspect-ratio:1/1}
.controls .knob-wrap{grid-column:4}
@media(min-width:750px){.controls{gap:15px}}
@media(max-height:700px) and (max-width:749px){.controls{gap:8px}.controls .utility{width:min(55px,100%)}}

/* v1.2: remove iOS/Safari tap flashes and persistent focus inversions. */
button{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;outline:none;appearance:none;-webkit-appearance:none}
button:focus,button:focus-visible{outline:none}
.round:hover{background:#fff;color:#111}
@media(hover:none){.round:hover{background:#111;color:#fff}.round.selected,.round.pulse{background:#fff;color:#111}.knob:hover{background:#111;color:#fff}.knob.pressed{background:#fff;color:#111}}
.round:focus-visible:not(.selected){background:#111;color:#fff}
.knob:focus-visible:not(.pressed){background:#111;color:#fff}

/* v1.3 header and slide-out menu */
.portal-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:7px;min-width:0}
.portal-header h1{white-space:nowrap}
.menu-toggle{justify-self:start;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:34px;height:34px;border:1.8px solid #111;border-radius:50%;background:#fff;color:#111;cursor:pointer;padding:0;touch-action:manipulation}
.menu-toggle span{width:14px;height:2px;background:currentColor;border-radius:2px}
.menu-toggle:active{background:#111;color:#fff}
.maker{justify-self:end;display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:clamp(7px,1.9vw,10px);font-weight:700;line-height:1.15;white-space:nowrap;letter-spacing:-.015em}
.maker span:first-child{font-size:.85em;letter-spacing:.035em}
.menu-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.32);z-index:9}
.menu-backdrop[hidden]{display:none}
.side-menu{position:fixed;inset:0 auto 0 0;width:min(310px,82vw);padding:calc(env(safe-area-inset-top) + 24px) 22px 28px;background:#f4f4f1;color:#111;border-right:2px solid #111;z-index:10;transform:translateX(-105%);transition:transform .28s ease;visibility:hidden;display:flex;flex-direction:column;gap:12px;box-shadow:6px 0 24px rgba(0,0,0,.12)}
.side-menu.open{transform:translateX(0);visibility:visible}
.menu-top{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:700;letter-spacing:.12em;margin-bottom:22px}
#menu-close{border:1.5px solid #111;border-radius:50%;background:transparent;color:inherit;width:32px;height:32px;font-size:24px;line-height:1;cursor:pointer}
.menu-item{border:0;border-bottom:1px solid #888;background:transparent;color:inherit;padding:14px 4px;text-align:left;font:700 16px Arial,Helvetica,sans-serif;cursor:pointer;display:flex;align-items:center;gap:12px}
.program-arrow{font-size:19px}.theme-item{justify-content:space-between}
.theme-switch{width:39px;height:23px;border:2px solid currentColor;border-radius:20px;display:flex;align-items:center;padding:2px}
.theme-switch span{width:15px;height:15px;border-radius:50%;background:currentColor;transition:transform .2s}
.theme-item[aria-pressed="true"] .theme-switch span{transform:translateX(15px)}
/* Invert the full monochrome palette, including default and selected button states. */
html.dark-mode{filter:invert(1);background:#f4f4f1}
@media(max-width:390px){.portal-header h1{font-size:clamp(29px,8vw,40px)}.maker{font-size:7px}.menu-toggle{width:30px;height:30px}}
@media(prefers-reduced-motion:reduce){.side-menu,.theme-switch span{transition:none}}

/* v1.4: polish menu motion, creator credit, and inverted theme buttons. */
.portal-header{grid-template-columns:minmax(32px,1fr) auto minmax(80px,1fr);gap:4px}
.maker{font-size:clamp(10px,2.7vw,13px);letter-spacing:-.025em;transform:translateX(-5px)}
@media(max-width:390px){.maker{font-size:clamp(9px,2.55vw,11px)}.portal-header h1{font-size:clamp(29px,8vw,40px)}}
.side-menu{visibility:visible;pointer-events:none;transition:transform .32s cubic-bezier(.22,.61,.36,1);will-change:transform}
.side-menu.open{pointer-events:auto}
.theme-switch{overflow:hidden;flex-shrink:0;position:relative}
.theme-switch span{display:block;flex:0 0 15px;min-width:15px;max-width:15px;transform:translateX(0);will-change:transform}
.theme-item[aria-pressed="true"] .theme-switch span{transform:translateX(14px)}
/* The page remains inverted in dark mode, but buttons are pre-inverted
   so their visible idle state is black/white and active state white/black. */
html.dark-mode .round,html.dark-mode .knob{background:#fff;color:#111;border-color:#fff}
html.dark-mode .round.selected,html.dark-mode .knob.pressed{background:#111;color:#fff}
html.dark-mode .pad.pulse{animation-name:padflash-dark}
@keyframes padflash-dark{50%{background:#111;color:#fff}}
@media(hover:hover){html.dark-mode .round:hover,html.dark-mode .knob:hover{background:#111;color:#fff}}
@media(hover:none){html.dark-mode .round:hover,html.dark-mode .knob:hover{background:#fff;color:#111}html.dark-mode .round.selected,html.dark-mode .round.pulse,html.dark-mode .knob.pressed{background:#111;color:#fff}}
html.dark-mode .round:focus-visible:not(.selected),html.dark-mode .knob:focus-visible:not(.pressed){background:#fff;color:#111}
@media(prefers-reduced-motion:reduce){.side-menu,.theme-switch span{transition:none}}

/* v1.5: fourth utility, screen modes, and clear dark-mode borders. */
.controls .save-button{display:grid;place-items:center}
.save-button svg{width:40%;height:40%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
html.dark-mode .round,html.dark-mode .knob{border:2px solid #000 !important}
html.dark-mode .round.selected,html.dark-mode .knob.pressed{border-color:#000 !important}
.save-display{min-height:35px;display:flex;align-items:center;justify-content:center;gap:9px;overflow:hidden}
.save-display[hidden],.steps[hidden]{display:none!important}
.save-choice,.save-char,.save-entry{font:700 13px Arial,Helvetica,sans-serif;letter-spacing:.06em;border:1.5px solid #555;border-radius:5px;min-height:35px;display:flex;align-items:center;justify-content:center;color:#111;background:transparent;flex-shrink:0}
.save-choice{width:80px;cursor:pointer}
.save-choice.highlight{background:#111;color:#fff;animation:save-highlight 1s steps(1) infinite}
.save-char{width:39px;font-size:19px}
.save-char.highlight{border:2px solid #111;animation:save-highlight 1s steps(1) infinite}
.save-entry{width:76px;transition:opacity .15s,transform .15s}
.save-entry.center{background:#111;color:#fff;opacity:1;transform:scale(1.1);cursor:pointer}
.save-entry.neighbor{opacity:.25;transform:scale(.85);cursor:pointer}
.save-empty{font-size:11px;font-weight:bold;letter-spacing:.06em}
@keyframes save-highlight{50%{background:transparent;color:#111}}
html.dark-mode .save-choice.highlight,html.dark-mode .save-entry.center{background:#111;color:#fff}
html.dark-mode .save-char.highlight{border-color:#111}
@media(max-width:390px){.save-choice{width:68px}.save-entry{width:66px}.save-display{gap:5px}}

/* v1.6: subtle credit adjustment and explicit outlines on dark buttons. */
.maker{font-size:clamp(11px,2.85vw,14px)}
@media(max-width:390px){.maker{font-size:clamp(10px,2.7vw,12px)}}
/* Root dark-mode filter inverts these pre-inverted borders to visible white. */
html.dark-mode .round,html.dark-mode .knob{border:2px solid #000 !important}
html.dark-mode .round.selected,html.dark-mode .knob.pressed{border-color:#000 !important}

/* v1.7: centered DELETE label, ambient topography, and background switch. */
.controls .utility{display:flex;align-items:center;justify-content:center;text-align:center;padding:0;letter-spacing:0}
#reset{font-size:clamp(9px,2.5vw,11px);line-height:1}
.maker{font-size:clamp(11px,2.85vw,14px)}
@media(max-width:390px){.maker{font-size:clamp(10px,2.7vw,12px)}}
.topography{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0;transition:opacity .85s ease;display:block}
html.background-on .topography{opacity:.43}
.machine{position:relative;z-index:1}
/* The sidebar and backdrop sit above the machine. */
#background-toggle[aria-pressed="true"] .theme-switch span{transform:translateX(14px)}
@media(prefers-reduced-motion:reduce){.topography{transition:none}}

/* v1.8: creator link inherits the original credit appearance. */
.maker-link{color:inherit;text-decoration:none;font:inherit;letter-spacing:inherit;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.maker-link:visited{color:inherit}
.maker-link:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:2px}