/* GuitarNexus Practice Drum Machine — entirely namespaced. */
.gnd-stage {
  --gnd-ivory:#f4e8d0; --gnd-soft:#b9a998; --gnd-dark:#21100b; --gnd-card:#2a1510;
  --gnd-copper:#c47a3a; --gnd-amber:#e0a84a; --gnd-green:#76d7a0;
  box-sizing:border-box;max-width:1132px;margin:0 auto 14px;padding:clamp(12px,2vw,24px);
  color:var(--gnd-ivory);background:linear-gradient(145deg,rgba(33,16,11,.97),rgba(12,8,7,.98));
  border:1px solid rgba(224,168,74,.28);border-radius:25px;
  box-shadow:0 26px 72px rgba(0,0,0,.44),0 0 0 1px rgba(255,255,255,.025);font-family:inherit;
}
.gnd-stage *, .gnd-stage *::before, .gnd-stage *::after {box-sizing:border-box;}
.gnd-stage button,.gnd-stage select,.gnd-stage input {font:inherit;}
.gnd-stage button {cursor:pointer;}
.gnd-stage button:focus-visible,.gnd-stage select:focus-visible,.gnd-stage input:focus-visible {outline:3px solid var(--gnd-amber);outline-offset:3px;}
.gnd-topbar {display:flex;align-items:center;justify-content:space-between;gap:14px;padding:4px 2px 18px;border-bottom:1px solid rgba(196,122,58,.2);}
.gnd-topbar>div {display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.gnd-eyebrow {text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:800;color:var(--gnd-amber);}
.gnd-status {font-size:12px;font-weight:750;color:var(--gnd-green);}
.gnd-kit-badge {font-size:11px;font-weight:800;color:#d8c5b1;border:1px solid rgba(196,122,58,.35);border-radius:999px;padding:7px 10px;background:rgba(196,122,58,.07);white-space:nowrap;}
.gnd-main-grid {display:grid;grid-template-columns:minmax(0,1.05fr) minmax(330px,.95fr);gap:20px;padding-top:20px;}
.gnd-visual-panel {min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(20px,4vw,44px) 16px;border:1px solid rgba(196,122,58,.2);border-radius:20px;background:radial-gradient(circle at 50% 40%,#422418 0,#21100b 56%,#120907 100%);}
.gnd-drum-visual {position:relative;width:min(76vw,330px);aspect-ratio:1;display:grid;place-items:center;isolation:isolate;}
.gnd-drum-ring {position:absolute;inset:4%;border-radius:50%;border:2px solid rgba(224,168,74,.44);box-shadow:inset 0 0 40px rgba(0,0,0,.5),0 0 0 12px rgba(196,122,58,.035);transition:transform .08s ease,border-color .08s ease,box-shadow .08s ease;}
.gnd-drum-visual.is-hit .gnd-drum-ring {transform:scale(1.018);border-color:rgba(118,215,160,.9);box-shadow:inset 0 0 42px rgba(0,0,0,.55),0 0 28px rgba(118,215,160,.22);}
.gnd-drum-core {position:relative;z-index:1;width:70%;aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:22px;background:linear-gradient(145deg,#321b13,#170d09);border:1px solid rgba(255,255,255,.055);box-shadow:0 20px 45px rgba(0,0,0,.38);}
.gnd-drum-core span {font-size:11px;font-weight:850;letter-spacing:.12em;text-transform:uppercase;color:var(--gnd-amber);}
.gnd-drum-core strong {margin:8px 0 5px;font-size:clamp(22px,3vw,32px);line-height:1.1;color:var(--gnd-ivory);}
.gnd-drum-core small {font-size:12px;line-height:1.4;color:var(--gnd-soft);}
.gnd-beat-dots {display:flex;gap:9px;margin-top:15px;}
.gnd-beat-dots span {width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:#2b1812;border:1px solid rgba(196,122,58,.38);color:#9e8878;font-size:10px;font-weight:850;transition:background-color .08s,box-shadow .08s,transform .08s,color .08s,border-color .08s;}
.gnd-beat-dots span:first-child {border-color:rgba(224,168,74,.58);color:#d9ad67;}
.gnd-beat-dots span.is-active {background:var(--gnd-copper);border-color:#dc9559;color:#fff4df;box-shadow:0 0 16px rgba(196,122,58,.42);transform:scale(1.12);}
.gnd-beat-dots span:first-child.is-active {background:var(--gnd-amber);border-color:#f0c46d;color:#21100b;box-shadow:0 0 19px rgba(224,168,74,.55);}
.gnd-description {max-width:520px;margin:16px auto 0!important;text-align:center;color:#c9b8a7!important;font-size:13px!important;line-height:1.6!important;}
.gnd-controls {min-width:0;display:flex;flex-direction:column;gap:15px;padding:clamp(18px,2vw,26px);border-radius:20px;background:rgba(20,11,8,.9);border:1px solid rgba(196,122,58,.16);}
.gnd-select-grid {display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.gnd-field {display:flex;flex-direction:column;gap:7px;min-width:0;margin:0;}
.gnd-field>span,.gnd-volume-field>span {color:var(--gnd-soft);font-size:12px;font-weight:750;}
.gnd-field select {width:100%;min-width:0;min-height:46px;border:1px solid #6e4934;border-radius:11px;background:#361e14;color:var(--gnd-ivory);padding:11px 10px;font-size:14px;}
.gnd-field select option {background:#361e14;color:var(--gnd-ivory);}
.gnd-now-playing {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 15px;border:1px solid rgba(224,168,74,.22);border-radius:14px;background:linear-gradient(135deg,rgba(196,122,58,.10),rgba(224,168,74,.035));transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease;}
.gnd-now-playing.is-playing {border-color:rgba(224,168,74,.48);box-shadow:inset 0 0 0 1px rgba(224,168,74,.05),0 10px 26px rgba(0,0,0,.16);}
.gnd-now-copy {min-width:0;display:flex;flex-direction:column;gap:3px;}
.gnd-now-copy span {font-size:10px;font-weight:850;letter-spacing:.11em;text-transform:uppercase;color:var(--gnd-amber);}
.gnd-now-copy strong {font-size:18px;line-height:1.2;color:var(--gnd-ivory);overflow-wrap:anywhere;}
.gnd-now-meta {flex:0 0 auto;font-size:12px;font-weight:800;color:var(--gnd-green);text-align:right;}
.gnd-bpm-control {display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:10px;padding:8px 0;}
.gnd-round-button {width:48px;height:48px;border-radius:50%;border:1px solid rgba(224,168,74,.45);background:#321b13;color:var(--gnd-ivory);font-size:25px;font-weight:700;line-height:1;}
.gnd-round-button:hover {background:#4a2a1b;}
.gnd-bpm-display {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;margin:0;}
.gnd-bpm-display input {width:100%;max-width:150px;border:0;background:transparent;color:var(--gnd-ivory);font-size:clamp(42px,6vw,62px);font-weight:850;line-height:1;text-align:center;appearance:textfield;padding:0;}
.gnd-bpm-display input::-webkit-inner-spin-button,.gnd-bpm-display input::-webkit-outer-spin-button {-webkit-appearance:none;margin:0;}
.gnd-bpm-display span {margin-top:4px;color:var(--gnd-soft);font-size:11px;font-weight:800;letter-spacing:.12em;}
.gnd-start-button {min-height:64px;border:1px solid #edbd63;border-radius:16px;background:linear-gradient(135deg,#e7b04e,#c87535);color:#21100b;font-size:18px;font-weight:900;display:flex;align-items:center;justify-content:center;gap:11px;box-shadow:0 14px 34px rgba(196,122,58,.25),inset 0 1px 0 rgba(255,255,255,.22);transition:transform .15s ease,filter .15s ease,box-shadow .15s ease,border-color .15s ease;}
.gnd-start-icon {width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:rgba(33,16,11,.14);font-size:13px;line-height:1;}
.gnd-start-button:hover {filter:brightness(1.06);transform:translateY(-1px);}
.gnd-start-button.is-running {background:linear-gradient(135deg,#48241a,#2a1711);color:var(--gnd-ivory);border-color:#bd7651;box-shadow:0 12px 30px rgba(0,0,0,.20),0 0 0 3px rgba(196,122,58,.08);}
.gnd-start-button.is-running .gnd-start-icon {border-radius:8px;background:rgba(240,161,90,.16);color:#f0a15a;}
.gnd-start-button:disabled {opacity:.55;cursor:wait;transform:none;}
@keyframes gnd-running-pulse {0%,100%{box-shadow:0 12px 30px rgba(0,0,0,.20),0 0 0 3px rgba(196,122,58,.08);}50%{box-shadow:0 12px 30px rgba(0,0,0,.20),0 0 0 5px rgba(196,122,58,.14);}}
.gnd-start-button.is-running {animation:gnd-running-pulse 1.8s ease-in-out infinite;}
.gnd-volume-field {display:flex;flex-direction:column;gap:6px;margin:0;padding-top:3px;}
.gnd-volume-field input {width:100%;accent-color:var(--gnd-amber);cursor:pointer;}
.gnd-tip,.gnd-shortcut {margin:0!important;font-size:12px!important;line-height:1.55!important;color:#a99686!important;}
.gnd-shortcut kbd {display:inline-block;min-width:24px;text-align:center;padding:2px 5px;border-radius:5px;background:#332017;border:1px solid #6c4935;color:var(--gnd-ivory);font:inherit;font-size:11px;}
@media (max-width:850px) {.gnd-main-grid {grid-template-columns:1fr;}.gnd-visual-panel {padding:24px 12px;}.gnd-drum-visual {width:min(78vw,300px);}}
@media (max-width:600px) {.gnd-stage {padding:8px;border-radius:17px;}.gnd-topbar {padding:7px 4px 13px;}.gnd-kit-badge {font-size:10px;}.gnd-main-grid {gap:8px;padding-top:8px;}.gnd-visual-panel,.gnd-controls {border-radius:13px;}.gnd-visual-panel {padding:18px 8px;}.gnd-drum-visual {width:min(76vw,255px);}.gnd-drum-core {padding:16px;}.gnd-select-grid {grid-template-columns:1fr;}.gnd-controls {padding:15px 12px;}.gnd-now-playing {align-items:flex-start;flex-direction:column;gap:7px;}.gnd-now-meta {text-align:left;}.gnd-shortcut {display:none;}}
@media (prefers-reduced-motion:reduce) {.gnd-drum-ring,.gnd-beat-dots span,.gnd-start-button {transition:none;}.gnd-start-button.is-running {animation:none;}}

/* GuitarNexus decorative site shell for pages containing the drum machine shortcode. */
body.gnt-drum-machine-page {background:#050505!important;position:relative;}
body.gnt-drum-machine-page::before {content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(0,0,0,.42),rgba(0,0,0,.55)),url("https://guitarnexus.net/wp-content/uploads/2026/10/guitarnexus-bg-desktop.webp");background-size:cover;background-position:center center;background-repeat:no-repeat;}
body.gnt-drum-machine-page .site,body.gnt-drum-machine-page .site-header,body.gnt-drum-machine-page .site-footer {position:relative;z-index:1;}
body.gnt-drum-machine-page .site,body.gnt-drum-machine-page .site-content,body.gnt-drum-machine-page .content-area,body.gnt-drum-machine-page .site-main,body.gnt-drum-machine-page article,body.gnt-drum-machine-page .inside-article {background:transparent!important;}
@media (max-width:768px) {body.gnt-drum-machine-page::before {background-image:linear-gradient(rgba(0,0,0,.38),rgba(0,0,0,.52)),url("https://guitarnexus.net/wp-content/uploads/2026/10/guitarnexus-bg-mobile.webp");}}

/* Optional page heading used above the shortcode. */
.gn-drum-page-heading {max-width:1132px;margin:0 auto 26px;text-align:center;padding:10px 16px 0;}
.gn-drum-page-heading h1 {margin:0;color:#f4f1ea;font-size:clamp(36px,5vw,58px);line-height:1.08;letter-spacing:-.035em;}
.gn-drum-page-heading p {margin:12px auto 0!important;max-width:650px;color:#c9b8a7!important;font-size:16px!important;line-height:1.55!important;}
.gn-drum-page-heading .gn-title-accent {color:#f0a15a!important;}
@media (max-width:600px) {.gn-drum-page-heading {margin-bottom:18px;padding-top:4px;}.gn-drum-page-heading p {font-size:15px!important;}}