@font-face{font-family:Nunito;src:url('/assets/fonts/7114a75fe286fb.woff2') format('woff2');font-weight:400;font-display:block}@font-face{font-family:Barlow;src:url('/assets/fonts/d02cbe275f68b2.woff2') format('woff2');font-weight:700;font-display:block}
:root{color-scheme:dark;--text:#f6f6ed;--muted:#98a18f;--accent:#16cf57;--stroke:#81987830}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#0e130f;color:var(--text);font-family:Nunito,Arial,sans-serif}body{border-top:4px solid var(--accent);touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none}button,a,input,select,summary{touch-action:manipulation;-webkit-tap-highlight-color:transparent}button,input,select{font:inherit;color:inherit}button{cursor:pointer;user-select:none}button,input,select{border:1px solid var(--stroke);border-radius:10px;background:#20302580}button{padding:5px 9px}button:disabled{opacity:.35;cursor:default}button:active{filter:brightness(1.15)}*:focus,*:focus-visible{outline:none!important}[hidden]{display:none!important}a{color:inherit}button svg{display:block}h1,h2,p{margin:0}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.stage{height:calc(100dvh - 4px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:8px 12px;position:relative}.game-panel{width:420px;max-width:100%;min-height:0;flex:1;max-height:100%;position:relative;border:1px solid #7c8e6e4d;border-radius:27px;padding:4px 13px 10px;background:#1a241c;display:flex;flex-direction:column;gap:5px}.compact-game-header{height:28px;min-height:28px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 3px;margin-bottom:4px}.site-logo,.game-title{font-family:Barlow,sans-serif;font-size:18px;font-weight:700;line-height:20px;letter-spacing:-.25px;white-space:nowrap;transform:translateY(-2px)}.site-logo{display:flex;align-items:center;gap:0;text-decoration:none}.site-logo>span{color:var(--accent)}.site-logo svg{display:inline-block;height:1.1em;width:calc(var(--glyph-width)*1em);margin-right:-.25px;fill:currentColor;vertical-align:top}.game-guide{display:flex;align-items:center;gap:7px;position:static}.game-title{border:0;background:none;padding:0;color:var(--text)}.help-toggle{width:24px;height:24px;padding:0;border:1px dashed #16cf5790;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:Nunito,sans-serif;font-weight:700;font-size:17px;line-height:1;color:var(--accent);background:none;transform:translateY(-2px)}
.help-content{position:absolute;z-index:20;top:38px;right:10px;left:10px;max-height:calc(100% - 50px);overflow:auto;overscroll-behavior:contain;border:1px solid #416340;border-radius:18px;padding:14px 18px 20px;background:#1a261ded;backdrop-filter:blur(22px);box-shadow:0 18px 35px #0008;user-select:text}.help-content .language-toggle{margin:0 0 14px auto}.help-content h2{font-size:21px;margin:12px 0 8px;color:var(--text)}.help-content h3{font-size:16px;margin:18px 0 6px;color:#bcdfb7}.help-content p,.help-content li{font-size:13px;line-height:1.65;color:#aebaa6}.help-content ol{padding-left:20px}.help-content small{display:block;font-size:10px;color:#8d9c87;line-height:1.6;margin-top:18px}.language-toggle{display:flex;gap:5px;padding:4px;width:max-content;border:1px solid #66845945;border-radius:30px;background:#17241b}.language-toggle a{display:grid;place-items:center;width:29px;height:29px;border-radius:50%;opacity:.35;text-decoration:none;transition:opacity .1s}.language-toggle a[aria-current=true]{opacity:1;background:#38513a;box-shadow:0 0 0 1px #8d9d78}.language-toggle svg{display:block;width:24px;height:24px;border-radius:50%}
.app{display:grid;grid-template-rows:34px minmax(125px,.95fr) minmax(166px,1.1fr) minmax(142px,1.25fr);gap:7px;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}body[data-instrument=guitar] .app{grid-template-rows:34px minmax(200px,1.5fr) minmax(166px,1.1fr) minmax(142px,1fr)}.glass{border:1px solid #81987824;border-radius:15px;padding:10px;min-height:0;overflow:hidden;background:#101a1388}.section-head,.keyboard-foot,.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.section-head{min-height:22px;flex-shrink:0}.section-head h2{font-size:13px;font-weight:700;line-height:1.1}.section-head .subtle{font-size:10px;color:var(--muted);text-align:right}.keyboard-panel,.loop-panel,.chords-panel{display:flex;flex-direction:column;gap:7px}.instrument-tabs{display:flex;gap:4px;padding:3px;border:1px solid var(--stroke);border-radius:12px;background:#101a1388}.instrument-tabs button{display:flex;align-items:center;justify-content:center;gap:8px;flex:1;border:0;background:none;border-radius:8px;font-size:12px;color:var(--muted)}.instrument-tabs svg{width:19px;height:19px}.instrument-tabs [aria-selected=true]{background:#16cf5719;color:#52df7b;box-shadow:inset 0 0 0 1px #16cf5744}.octaves{display:flex;align-items:center;gap:4px;font-size:10px;color:#b0bda5;direction:ltr}.octaves button{padding:0;width:24px;height:24px;border:0;background:none;font-size:23px}.octaves span{min-width:43px;text-align:center}.keyboard-foot{flex-shrink:0}#loop-now{font-size:11px;color:#8fe8ab;min-height:14px}#hint{font-size:10px;color:#a1b299;line-height:1.35;text-align:center;white-space:normal}.loop-panel #slots{min-height:55px}.slot{background:#1a281e;border-color:#81987865}.slot.filled{background:#263c2d;border-color:#577b55;color:#eff7eb}.slot.playing{background:#16cf57;color:#062a13;border-color:#16cf57}.slot.target{background:#16cf5733;outline:none;box-shadow:inset 0 0 0 2px #16cf57}.slot-play{font-size:16px;font-weight:700}.slot-remove{background:#36523c;border-color:#7b9778;display:grid;place-items:center;padding:0;line-height:1;box-shadow:0 2px 5px #0004}.slot-remove:active{background:#5c7958}.transport{gap:8px}.transport label{font-size:10px;color:var(--muted)}.bpm-field,select,#loop{height:36px}.bpm-field,select{background:#142017;border-color:var(--stroke)}.bpm-field input{font-size:14px;pointer-events:none;cursor:pointer}.bpm-control{cursor:pointer}.bpm-field button{width:28px}.bpm-field svg{width:14px;height:14px;margin:auto}#loop{background:#16cf57;border:0;color:#062410;font-weight:700;font-size:13px;box-shadow:none;min-height:36px}#loop.is-running{background:#ed665e;color:#281210}.chord-column{background:#293a2b66;box-shadow:inset 1px 0 0 #7d98632a,inset -1px 0 0 #7d98632a}#chords .chord-column button{color:#edf3e9;font-size:15px;font-weight:700}#chords .chord-column button.selected{background:#16cf5733;box-shadow:inset 0 0 0 1px #16cf5788;color:#bbf5c9}.key.active,.key.chord-active{background:#8ae8a4;color:#0a351a}.key.black.active,.key.black.chord-active{background:#229e48}#octave-dots i.active{background:#16cf57}#piano-viewport{background:#101712}#piano-panel{padding:10px;gap:7px}#guitar-panel{padding:10px;gap:5px}#current-chord{color:#70dd91;font-size:10px}#guitar-instruments .selected,#patterns .selected{color:#9debb2;background:#16cf5720;border-color:#16cf5770}#strings{background:repeating-linear-gradient(90deg,transparent 0,transparent 23%,#b3d89915 23.2%,#b3d89915 23.8%,transparent 24%),linear-gradient(100deg,#171e16,#263322,#141b13)}#patterns button{font-size:10px;min-height:25px}.guitar-string.vibrating::after{background:#16cf57}.drag-ghost{background:#16cf57;color:#072811}
.sheet{color:var(--text);width:min(410px,calc(100% - 28px));max-height:calc(100dvh - 28px);overflow:auto;padding:22px;border:1px solid #536e48;border-radius:24px;background:#1b281e;box-shadow:0 22px 80px #0008}.sheet::backdrop{background:#07100bc0;backdrop-filter:blur(5px)}.sheet-head{margin-bottom:14px}.sheet-head h2{font-size:21px}.sheet-head button{border-radius:50%;width:34px;height:34px;padding:0;display:grid;place-items:center;font-size:26px}.tempo-readout{text-align:center}.tempo-readout input{font-size:52px;width:155px;text-align:center;background:none;border:0;appearance:textfield}.tempo-readout input::-webkit-inner-spin-button{appearance:none}.tempo-readout span{font-size:12px;color:var(--muted)}#bpm-range{width:100%;height:40px;padding:0;margin:12px 0;accent-color:#16cf57}.range-limits{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}.wide{width:100%;margin-top:18px;min-height:40px}.primary{background:#16cf57;border:0;color:#062410;font-weight:700}#toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);z-index:100;background:#263d2df5;border:1px solid #688f5e66;box-shadow:0 8px 30px #0006;border-radius:13px;padding:10px 16px;width:max-content;max-width:90vw;font-size:12px;opacity:0;pointer-events:none}#toast.visible{opacity:1}#expanded-piano{background:#0e130fe8}#expanded-piano #piano-panel{background:#1a281e;border-color:#54744a}#close-expanded-piano{display:grid;place-items:center;padding:0;background:#243a2b;border-color:#74906966}
.game-ad-preview{display:none;position:fixed;top:50%;transform:translateY(-50%);width:160px;height:600px;border:1px dashed #a0b48c27;border-radius:14px;color:#97ad804b;align-items:center;justify-content:center;flex-direction:column;gap:10px;font-size:11px;pointer-events:none}.game-ad-preview.left{right:calc(50% + 242px)}.game-ad-preview.right{left:calc(50% + 242px)}.game-ad-preview small{font-size:10px}.game-bottom-ad{height:50px;width:320px;max-width:100%;min-height:50px;display:flex;align-items:center;justify-content:center;gap:10px;border:1px dashed #a0b48c27;border-radius:10px;color:#97ad804b;font-size:10px;flex-shrink:0;pointer-events:none}.game-bottom-ad small{font-size:10px}.has-side-game-ads .game-ad-preview{display:flex}.has-side-game-ads .game-bottom-ad{display:none}
@media(orientation:landscape){#expanded-piano-surface{width:calc(100vw - 60px);height:calc(100dvh - 100px);transform:translate(-50%,-50%)}}
@media(max-width:600px){.stage{padding:6px 10px;gap:6px}.game-panel{padding:4px 10px 8px;border-radius:24px}.site-logo,.game-title{font-size:17px}.compact-game-header{gap:5px}.game-guide{gap:6px}}
@media(max-width:360px){.site-logo,.game-title{font-size:16px}.game-panel{padding-inline:8px}.game-guide{gap:5px}.game-bottom-ad{width:234px;height:60px;min-height:60px}.section-head .subtle{font-size:9px}#patterns button{font-size:9px}}
@media(max-height:730px){.app{gap:5px;grid-template-rows:30px minmax(106px,.9fr) minmax(149px,1.1fr) minmax(126px,1.1fr)}body[data-instrument=guitar] .app{grid-template-rows:30px minmax(176px,1.4fr) minmax(149px,1.1fr) minmax(126px,1fr)}.glass,#piano-panel,#guitar-panel{padding:7px}.keyboard-panel,.loop-panel,.chords-panel{gap:5px}#hint{font-size:9px}#patterns button{min-height:22px;font-size:9px}.section-head{min-height:20px}.bpm-field,select,#loop{height:31px;min-height:31px}.transport{gap:5px}#chords .chord-column button{font-size:14px}.loop-panel #slots{min-height:46px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition:none!important}}
/* Two octave pages fill the viewport; neutral ivory keys keep notes readable. */
.octave-page{flex-basis:50%}.key.white{background:linear-gradient(180deg,#fcfbf5,#e6e6e0)}.key.active,.key.chord-active{background:linear-gradient(160deg,#c0f2c5,#5dd981);color:#143d20}.key.black.active,.key.black.chord-active{background:linear-gradient(#409f58,#1d7434)}.game-guide h1{display:flex;align-items:center;font-size:18px;line-height:20px;height:20px}.game-panel .site-logo{display:block;flex:none}.site-logo .wordmark-paths{display:inline-flex}.site-logo{color:#f6f6ed}
/* Separate chord buttons; progressively quieter surfaces preserve each root family. */
#chords .chord-column{gap:5px;background:none;box-shadow:none;overflow:visible;border-radius:0}
#chords .chord-column button{border:1px solid #a2bb922e;border-radius:8px;background:#a2bb9224;box-shadow:inset 0 1px 0 #d6e5c90b;color:#edf3e9}
#chords .chord-column button:nth-child(1){background:#a2bb9224;border-color:#a2bb922e}
#chords .chord-column button:nth-child(2){background:#a2bb9219;border-color:#a2bb9225}
#chords .chord-column button:nth-child(3){background:#a2bb9210;border-color:#a2bb921d}
#chords .chord-column button:nth-child(4){background:#a2bb9208;border-color:#a2bb9216}
#chords .chord-column button+button::before{display:none}
#chords .chord-column button.selected{background:#16cf5733;border-color:#16cf5788;box-shadow:inset 0 0 0 1px #16cf5733;color:#bbf5c9}

.game-title span{color:var(--accent)}

/* Leave a dedicated delete-icon gutter and fit accidental/minor labels in narrow cells. */
.slot-play{font-size:14px;padding:2px 14px 2px 3px;line-height:1.1}
.slot-play[data-chord$="#m"]{font-size:12px}
.slot-remove{width:15px;height:15px;font-size:14px;right:-1px;top:-3px;line-height:1}
#chords .chord-column button[data-chord$="#m"]{font-size:13px}
#slots{row-gap:7px}.transport{flex-shrink:0}
@media(max-width:600px){.slot-play{font-size:13px}.slot-play[data-chord$="#m"]{font-size:11px}#chords .chord-column button[data-chord$="#m"]{font-size:12px}}
@media(max-width:360px){#chords .chord-column button{font-size:13px}#chords .chord-column button[data-chord$="#m"]{font-size:11px}}
/* Guitar tab already identifies the instrument; give the shared transport its own space. */
#guitar-panel>.section-head,#guitar-panel>.keyboard-foot{display:none}
#strings{min-height:56px}
body[data-instrument=guitar] .app{grid-template-rows:34px minmax(176px,1.3fr) minmax(190px,1.3fr) minmax(142px,1fr)}
@media(max-height:730px){
 .app{grid-template-rows:30px minmax(106px,.9fr) minmax(174px,1.1fr) minmax(126px,1.1fr)}
 body[data-instrument=guitar] .app{grid-template-rows:30px minmax(156px,1.2fr) minmax(174px,1.3fr) minmax(126px,1fr)}
}

#loop{display:flex;align-items:center;justify-content:center;gap:6px}#loop svg{width:15px;height:15px;flex:none}#loop span{min-width:0}

/* Compact piano navigation: clear arrow controls, centered range, expand on the right. */
#piano-panel .section-head h2,#keyboard-hint{display:none}
#piano-panel .section-head{justify-content:space-between;gap:8px}
#piano-panel .octaves{order:0;display:grid;grid-template-columns:25px 58px 25px;align-items:center;gap:3px;padding:2px;border:1px solid #81987835;border-radius:10px;background:#20302580}
#piano-panel .octaves button{display:grid;place-items:center;width:25px;height:24px;padding:4px;border-radius:7px;background:#16cf5710;color:#9cbea1;line-height:1}
#piano-panel .octaves button svg{width:16px;height:16px}
#piano-panel .octaves span{display:flex;align-items:center;justify-content:center;height:24px;min-width:0;text-align:center;font-size:10px;line-height:1;color:#c3d0bc}
.game-panel #expand-piano{order:1;margin:0 0 0 auto;display:grid;place-items:center;width:29px;height:29px;padding:5px;border-radius:9px}
#expand-piano svg{width:18px;height:18px}
#piano-panel .keyboard-foot{justify-content:center;height:6px}
#piano-viewport{cursor:grab}#piano-viewport:active{cursor:grabbing}

/* Visible, aligned octave shortcuts and consistent numeric controls. */
#piano-panel .octaves{grid-template-columns:40px 58px 40px}
#piano-panel .octaves button{display:flex;align-items:center;justify-content:center;gap:3px;width:40px}
#piano-panel .octaves kbd{font:400 8px/1 Nunito,sans-serif;opacity:.6}
#beats{font-size:14px;line-height:1.2}
/* Safari requires the prefixed rule, including descendants in the modal top layer. */
body,body *{-webkit-user-select:none;user-select:none}
.help-content,.help-content *{-webkit-user-select:text;user-select:text}
input,textarea{-webkit-user-select:text;user-select:text}
.game-panel #expand-piano{width:32px;height:30px;border:1px solid #16cf5780;background:#16cf5720;color:#8ff3ad;box-shadow:inset 0 1px 0 #b4ffc517}
#expand-piano svg{width:21px;height:21px;stroke-width:2}
@media(hover:hover){.game-panel #expand-piano:hover{background:#16cf5733;border-color:#16cf57;color:#c7ffd7}}
/* Center chord labels independently of corner delete controls. */
#chords .chord-column button{display:flex;align-items:center;justify-content:center;padding:0;line-height:1;text-align:center}
.slot-play{display:flex;align-items:center;justify-content:center;padding:0 8px;line-height:1;text-align:center}

/* SVG crosses have no font baseline offset. */
.slot-remove,.sheet-head button,#close-expanded-piano{display:flex;align-items:center;justify-content:center;padding:0;line-height:0}
.slot-remove svg{display:block;flex:none;width:10px;height:10px;margin:0}
.sheet-head button svg{display:block;flex:none;width:18px;height:18px;margin:0}
#close-expanded-piano svg{display:block;flex:none;width:23px;height:23px;margin:0}
/* Quiet, precisely centered piano expand control. */
.game-panel #expand-piano{display:flex;align-items:center;justify-content:center;padding:0;background:#26362a;border-color:#71846b55;color:#a9bda3;box-shadow:none}
#expand-piano svg{display:block;flex:none;width:19px;height:19px;margin:0}
@media(hover:hover){.game-panel #expand-piano:hover{background:#304334;border-color:#829c765f;color:#c0d2b9}}
/* Match piano loop/palette proportions; compact guitar strings free the lower rows. */
body[data-instrument=guitar] .app{grid-template-rows:34px minmax(176px,.95fr) minmax(166px,1.1fr) minmax(142px,1.25fr)}
@media(max-height:730px){body[data-instrument=guitar] .app{grid-template-rows:30px minmax(156px,.9fr) minmax(174px,1.1fr) minmax(126px,1.1fr)}}

/* The lifted chord stays above the interface, visible beside the pointer/finger. */
.drag-ghost{position:fixed;z-index:10000;left:0;top:0;display:flex;align-items:center;justify-content:center;min-width:56px;height:44px;padding:0 14px;border:1px solid #a5efb0;border-radius:11px;background:#23713d;color:#f4fff2;font:700 18px/1 Nunito,sans-serif;box-shadow:0 12px 28px #0009,0 0 0 3px #16cf5715;transform:translate(-50%,-50%) rotate(-4deg);pointer-events:none;will-change:left,top;animation:chord-lift 110ms ease-out}
@keyframes chord-lift{from{opacity:.3;transform:translate(-50%,-50%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) rotate(-4deg)}}
#chords button,.slot-play{cursor:grab;-webkit-touch-callout:none}
#chords .chord-column button.chord-lifted,.slot-play.chord-lifted{opacity:.45;transform:scale(.95)}
.dragging-chord,.dragging-chord *{cursor:grabbing!important}
.slot.target{background:#16cf572b;border-color:#64e78a;box-shadow:inset 0 0 0 2px #64e78a,0 0 15px #16cf5722}
/* Match the approved Dice Roller / Kutu Kule help circle. */
.help-toggle{box-sizing:border-box;display:flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;min-height:24px;padding:0;margin:0;border:1px dashed #16cf5780;border-radius:50%;background:#16cf5708;color:#16cf57;font:800 15px/1 Nunito,system-ui,sans-serif;transform:none;box-shadow:none}

/* Native long-press previews must not compete with the app's own chord card. */
#chords,#chords *,#slots,#slots *,#piano-viewport,#piano-viewport *,#strings,#strings *,.drag-ghost,.drag-ghost *{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.drag-ghost{touch-action:none}
/* Instruction/error toasts use a quiet red warning surface. */
#toast{background:#321c1ff5;border-color:#d66c6c80;color:#f3c5c2;box-shadow:0 10px 30px #16050670}

/* Fine-pointer hover only; no layout shift, new focus ring or basket treatment. */
@media(hover:hover) and (pointer:fine){
 button:not(:disabled):not(:active):not(#open-tool-basket):not(.basket-launcher):hover{filter:brightness(1.09)}
 a:not(.basket-launcher):not(#open-tool-basket):hover{filter:brightness(1.1)}
 summary:hover{filter:brightness(1.14)}
 input:not([type=range]):not([type=checkbox]):hover,select:hover{border-color:#8caa9180}
}

/* Use Coke Stacker's actual Nunito 800 face rather than synthesized weight. */
@font-face{font-family:OzzHelp;src:url('/assets/fonts/bccf817781978f.woff2') format('truetype');font-style:normal;font-weight:800;font-display:block}
.help-toggle{font-family:OzzHelp,Nunito,system-ui,sans-serif;font-weight:800;font-size:15px;line-height:1}

/* Plain wordmark matches the approved Coke Stacker / Dice Roller header. */
.site-logo{display:block;font-family:Barlow,'Arial Narrow',sans-serif;font-size:18px;font-weight:700;line-height:20px;letter-spacing:-.25px;white-space:nowrap;transform:translateY(-2px);color:var(--text);text-decoration:none}
.site-logo>span{color:var(--accent)}
@media(max-width:600px){.site-logo{font-size:17px}}
@media(max-width:360px){.site-logo{font-size:16px}}