/* Final controls: one hit area for every character, including the blinking S. */
.coin-link{pointer-events:auto!important;touch-action:manipulation;isolation:isolate}
.coin-link .coin-line,.coin-link .coin-line *{pointer-events:none!important}
.loading{padding-block:10px;background:#000}
.loading:after{display:none}
.music-mode .track{height:18px;overflow:visible}
.music-mode .fill,.music-mode .music-square{top:0;height:18px}
.music-square.is-paused{box-shadow:inset 0 0 0 1px #999;opacity:.55}
.music-square.is-keyed{visibility:visible!important;background:var(--bar-colour,#00ffff)!important;box-shadow:0 0 8px var(--bar-colour,#00ffff)}
.footer-copy{color:var(--footer-colour,#00ffff)}
.footer-copy [data-egg-prompt]{color:inherit}
.footer-copy .separator{color:var(--theme-accent,#ff00ff)}
.rainbow{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));background:none!important;overflow:visible}
.rainbow-key{position:relative;display:block;min-width:0;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:0;touch-action:manipulation}
.rainbow-key:before{content:"";position:absolute;inset:-6px 0;pointer-events:auto}
.rainbow-key:hover,.rainbow-key:focus-visible{filter:brightness(1.5);outline:0;z-index:1}
.external-window,.external-window *, .external-window button,.external-window a{font-family:ZXSpectrum,monospace!important;font-weight:normal;letter-spacing:0}
.external-window-chrome h2{font-size:14px;line-height:1.5}
.external-window-controls button{width:44px;height:40px;padding:10px;touch-action:manipulation}
.external-window-controls button *{pointer-events:none}
.external-window-fallback{padding:32px;font-size:14px}
.external-window-footer{gap:12px}
.external-window-open{white-space:nowrap;font-size:11px}
.analytics-choice{position:relative;padding:12px 14px;border:1px solid #ffffff50;background:#080808;color:#fff;font:10px/1.8 ZXSpectrum,monospace;text-align:center;margin:0 0 14px}
.analytics-choice[hidden]{display:none}
.analytics-choice p{margin:0 0 10px}
.analytics-choice button,.analytics-settings{border:0;background:#000;color:#00ffff;padding:8px 12px;font:10px/1.6 ZXSpectrum,monospace}
.analytics-choice button+button{margin-left:8px}
.analytics-settings{display:block;margin:0 auto 12px}
@media(max-width:1100px){
 .hero{bottom:25%}
 .website-caption{left:5%;right:auto;width:90%;bottom:17.5%;text-align:center}
 .loading{bottom:10%}
 .rainbow{bottom:8%}
 footer{height:8%;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:4px 10px;text-align:center;padding:4px 3%}
 .footer-copy{flex:0 0 100%;text-align:center;font-size:clamp(6px,.8cqw,10px)}
 .location-phrase{text-align:center}
 footer .control-buttons{margin:0 auto!important;justify-content:center;align-self:center}
 .controls{justify-content:center!important;text-align:center}
 .controls p{flex-basis:100%;text-align:center}
}
@media(max-width:540px){
 .hero{bottom:37%}
 .website-caption{bottom:27%;font-size:8px;line-height:1.7}
 .loading,.music-mode .loading{bottom:12%;grid-template-columns:1fr 1fr;row-gap:8px;padding-block:10px}
 .loading .loading-label:last-child{grid-column:2;grid-row:1}
 .loading .track{grid-column:1/-1;grid-row:2;height:18px}
 .music-mode .track{height:24px}
 .music-mode .fill,.music-mode .music-square{height:24px;top:0}
 .rainbow{bottom:9%}
 footer{height:9%;font-size:6px;gap:3px}
 .footer-copy{font-size:6px;line-height:1.4}
 .external-window-footer{flex-wrap:wrap}
}

/* Cover the artwork only below the loading panel; its dimensions stay unchanged. */
.screen { --lower-mask-height: 5.5%; }
.screen::after { content: ""; position: absolute; inset: auto 0 0; height: var(--lower-mask-height); background: #000; pointer-events: none; z-index: 1; }
footer { z-index: 4; }

.footer-copy a, .footer-copy button, .footer-copy span { font-size: inherit; }
.services-link, .services-link:visited { color: inherit; text-decoration: none; font: inherit; line-height: inherit; }
.services-link:focus-visible { outline: 1px solid var(--footer-colour, #00ffff); outline-offset: 3px; }
.services-link:hover { filter: brightness(1.3); }
.actions .cta, .actions .cta:hover, .actions .cta:focus, .actions .cta:focus-visible {
  box-shadow: 4px 4px 0 var(--theme-primary-shadow, #737300) !important;
}
.actions .cta.secondary, .actions .cta.secondary:hover, .actions .cta.secondary:focus, .actions .cta.secondary:focus-visible {
  box-shadow: 4px 4px 0 var(--theme-secondary-shadow, #007373) !important;
}
.actions .cta:active { transform: translate(3px, 3px) !important; box-shadow: 1px 1px 0 var(--theme-primary-shadow, #737300) !important; }
.actions .cta.secondary:active { box-shadow: 1px 1px 0 var(--theme-secondary-shadow, #007373) !important; }
.external-window.is-about { width: min(850px, calc(100vw - 48px)); }
.external-window.is-about.is-expanded { width: calc(100vw - 48px); }
@media (max-width: 1100px) { .screen { --lower-mask-height: 10%; } }
@media (max-width: 540px) {
  .screen { --lower-mask-height: 12%; }
  .external-window.is-about { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
  .external-window.is-about.is-expanded { width: calc(100vw - 24px); height: calc(100dvh - 24px); }
}

.external-window.is-about .external-window-content { max-height: calc(100dvh - 200px); overflow-y: auto; }
.external-window.is-about.is-expanded .external-window-content { max-height: none; }
.about-window-copy { padding: 30px; font-size: 13px; line-height: 1.9; }
.about-window-copy h1 { margin: 0 0 26px; font-size: 14px; line-height: 1.8; color: var(--theme-primary, #ffff00); }
.about-window-copy h2 { margin: 0 0 22px; font-size: 17px; line-height: 1.7; color: var(--footer-colour, #00ffff); }
.about-window-copy p { margin: 0 0 24px; }
.about-window-copy a { font-size: inherit; color: var(--footer-colour, #00ffff); text-underline-offset: 5px; }
@media (max-width: 540px) { .about-window-copy { padding: 22px 18px; font-size: 12px; } .about-window-copy h1 { font-size: 12px; } .about-window-copy h2 { font-size: 15px; } }

/* One pad geometry for synth, drum, reggae and jungle banks. */
.loading,.music-mode .loading{grid-template-columns:1fr 1fr;row-gap:8px;padding:10px 0;align-items:center}
.loading .loading-label:first-child{grid-column:1;grid-row:1}
.loading .loading-label:last-child{grid-column:2;grid-row:1}
.loading .track,.music-mode .track{grid-column:1/-1;grid-row:2;height:18px;padding:0;overflow:visible}
.loading .track .fill,.loading .track .music-square{top:0;height:18px}
.breakbeat-button,.breakbeat-button[aria-pressed="true"]{color:#0000ff!important}
.riddim-button,.riddim-button[aria-pressed="true"]{color:#00ff00!important}
.rainbow-key:hover,.rainbow-key:focus-visible{outline:0;box-shadow:none;border:0;filter:brightness(.8)}
.external-window.is-about .about-window-copy p,.external-window.is-about .about-window-copy p *{font-family:'Courier New',monospace!important}
.external-window-domain a{color:inherit;text-decoration:none}
.external-window-about-actions{display:flex;flex-wrap:wrap;gap:8px}
.external-window-about-actions[hidden],.external-window.is-about .external-window-open{display:none}
.external-window-about-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:8px 12px;background:var(--button-paper,var(--theme-secondary,#00ffff));color:var(--button-ink,var(--theme-secondary-ink,#000));font-size:11px;text-decoration:none}
.external-window.is-about .external-window-footer{flex-wrap:wrap}
@media(max-width:540px){.loading .track,.music-mode .track,.loading .track .fill,.loading .track .music-square{height:24px}}

.loading .music-square:hover,.loading .music-square:focus-visible{background:var(--bar-colour,#00ffff);filter:brightness(.8);outline:1px solid #00ffff;outline-offset:-1px}
.music-mode .loading .music-square:hover,.music-mode .loading .music-square:focus-visible{background:var(--riddim-colour);filter:brightness(.8)}
.music-mode .loading .music-square.is-playing{box-shadow:inset 0 0 0 1px #000}

/* Return the thirty pads to the single line between the two labels. */
.loading,.music-mode .loading{grid-template-columns:max-content minmax(0,1fr) max-content;column-gap:12px;row-gap:0;padding:10px 0}
.loading .loading-label:first-child{grid-column:1;grid-row:1}
.loading .loading-label:last-child{grid-column:3;grid-row:1}
.loading .track,.music-mode .track{grid-column:2;grid-row:1}
.breakbeat-button,.breakbeat-button[aria-pressed="true"]{color:#00ffff!important}
.external-window .about-location-link{margin:0;padding:0;border:0;background:none;color:#fff;font:inherit;text-align:left}
.external-window-about-actions{width:100%;gap:12px}
.external-window .external-window-about-actions .cta{font-family:'Courier New',monospace!important;font-weight:700!important;font-size:12px;letter-spacing:0;height:46px;min-height:46px;max-height:46px;padding:0 16px;animation:cta-flash 1.28s steps(1,end) infinite;box-shadow:4px 4px 0 var(--theme-primary-shadow,#737300)!important}
.external-window .external-window-about-actions .cta.secondary{animation:cta-flash 1.28s steps(1,end) infinite;animation-delay:-.64s;box-shadow:4px 4px 0 var(--theme-secondary-shadow,#007373)!important}
.external-window .external-window-about-actions .cta:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--theme-primary-shadow,#737300)!important}
.external-window .external-window-about-actions .cta.secondary:active{box-shadow:1px 1px 0 var(--theme-secondary-shadow,#007373)!important}
@media(max-width:540px){.loading,.music-mode .loading{column-gap:6px;font-size:6px}.external-window .external-window-about-actions .cta{font-size:10px;padding:0 10px}}

/* Full stable hit target, independent of the flashing SVG glyph's opacity. */
.coin-link::after{content:"";position:absolute;inset:-3px;z-index:5;pointer-events:auto;background:transparent}
body[data-colourway="blue-orange"] .footer-copy .separator{color:#fff}
.external-window.is-about .external-window-domain{display:block;flex:0 0 100%;width:100%;text-align:center;color:#fff}
.external-window .about-location-link{text-align:center;display:block;margin:0 auto;width:100%}
.external-window .about-location-link .location-phrase{display:inline-grid;text-align:center}
.external-window .about-location-link .location-version{grid-area:1/1;text-align:center}
@keyframes modal-cta-three{
 0%,33.332%{background:var(--modal-paper-1,#ffff00);color:var(--modal-ink-1,#0000ff)}
 33.333%,66.665%{background:var(--modal-paper-2,#00ffff);color:var(--modal-ink-2,#0000ff)}
 66.666%,100%{background:var(--modal-paper-3,#ff00ff);color:var(--modal-ink-3,#000)}
}
.external-window .external-window-about-actions .cta,.external-window .external-window-about-actions .cta.secondary{animation:modal-cta-three 1.8s steps(1,end) infinite}
.external-window .external-window-about-actions .cta:nth-child(1){animation-delay:0s}
.external-window .external-window-about-actions .cta:nth-child(2){animation-delay:-.6s}
.external-window .external-window-about-actions .cta:nth-child(3){animation-delay:-1.2s}

.contact-modal-link,.contact-modal-link:visited{color:inherit;text-decoration:none}
.contact-modal-link:focus-visible{outline:1px solid currentColor;outline-offset:4px}

@keyframes caption-colours{0%,100%{color:#00ffff}16.666%{color:#00ff00}33.333%{color:#ffff00}50%{color:#ff8000}66.666%{color:#ff00ff}83.333%{color:#ffffff}}
.website-caption,.website-caption:visited{animation:caption-colours 24s steps(1,end) infinite}
@media(prefers-reduced-motion:reduce){.website-caption,.website-caption:visited{animation:none;color:var(--footer-colour,#00ffff)}}

#bug{display:inline-flex;align-items:center;justify-content:center;gap:5px}
#bug svg{flex:none;shape-rendering:crispEdges;pointer-events:none}
.bug-window{width:min(640px,calc(100vw - 32px));overflow:auto}
.bug-form{padding:24px;overflow:auto}.bug-form p{margin:0 0 18px}
.bug-form label{display:block;margin:16px 0 8px;font-size:12px}
.bug-form input,.bug-form textarea{display:block;width:100%;box-sizing:border-box;padding:12px;border:2px solid var(--theme-primary,#ffff00);background:#111;color:#fff;font:16px/1.5 'Courier New',monospace!important;border-radius:0}
.bug-form textarea{resize:vertical;min-height:120px}.bug-form .bug-privacy{font-size:10px;margin-top:12px;color:#bbb}.bug-form .bug-status{font:13px/1.6 'Courier New',monospace!important;white-space:pre-wrap}
.bug-form-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}.bug-form-actions button{min-height:42px;padding:8px 12px;border:0}.bug-form-actions [data-bug-close]{background:none;color:#fff;font-size:11px}
.bug-form-actions [hidden]{display:none!important}.bug-form-actions .cta{font-family:'Courier New',monospace!important;box-shadow:4px 4px 0 var(--theme-primary-shadow,#737300)!important}.bug-form-actions .secondary{box-shadow:4px 4px 0 var(--theme-secondary-shadow,#007373)!important}
.bug-form-actions button:disabled{opacity:.6}.bug-form-actions button:focus-visible{outline:2px solid #fff;outline-offset:3px}

.bug-window .external-window-chrome h2{white-space:normal;text-overflow:clip;overflow:visible;font-size:12px;line-height:1.6}
.bug-window .external-window-controls{align-self:flex-start}
.bug-form-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.bug-form-actions button,.bug-form-actions .cta,.bug-form-actions .cta:hover,.bug-form-actions .cta:focus,.bug-form-actions .cta:active{box-sizing:border-box;width:100%;min-width:0;height:46px;min-height:46px;max-height:46px;margin:0;padding:0 10px;font-size:11px}
.bug-form-actions .cta[data-bug-close]{background:var(--button-paper);color:var(--button-ink);font-size:11px}
@media(max-width:400px){.bug-form{padding:18px}.bug-form-actions{gap:10px}.bug-form-actions .cta{font-size:9px}}

.location-link,.location-link:visited,.external-window .about-location-link{color:#fff;text-decoration:none}
.location-link:focus-visible{outline:1px solid #fff;outline-offset:3px}
