:root{
  --paper:#ece6d8;
  --ink:#191915;
  --muted:#534f45;
  --rule:#a39d90;
  --band-color:#191915;
  --description-color:#191915;
  --concerts-color:#191915;
  --links-color:#191915;
  --panel-fill:rgba(236,230,216,.3);
  --panel-color:#ece6d8;
  --highlight-stroke:rgba(25,25,21,.25);
  font:16px Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:var(--paper)
}
@font-face {
  font-family: "CS Werewolf Drawn";
  src: url("./fonts/cs-werewolf-drawn.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
*{box-sizing:border-box}
body{margin:0;min-height:100svh}
button,a,input,textarea{color:inherit}
button{font:inherit;cursor:pointer}
button:hover,a:hover{text-decoration:underline;text-underline-offset:4px}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,.knob:focus-visible{outline:2px solid currentColor;outline-offset:3px}
[hidden]{display:none!important}
#gate{height:100svh;display:grid;place-items:center;position:relative}
#flashWarning{position:absolute;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(90vw,620px);text-align:center;color:var(--ink);font:12px/1.4 Arial,Helvetica,sans-serif}
#enter{width:clamp(168px,24vw,300px);padding:0;display:grid;gap:38px;border:0;background:none;text-align:left}
#enter i,#fallback{display:block;aspect-ratio:1;background:var(--ink);animation:spin 65s linear infinite}
#enter>span{display:flex;justify-content:space-between;border-top:1px solid;padding-top:8px;font:700 clamp(26px,3.5vw,54px)/1 Arial;letter-spacing:-.07em}
#enter b,.visualButtons b{font-weight:400}
@keyframes spin{from{transform:rotate(12deg)}to{transform:rotate(372deg)}}
main{isolation:isolate;width:min(100%,1600px);margin:auto;padding:clamp(20px,3vw,46px);min-height:100svh;display:flex;flex-direction:column}
#backdrop{position:fixed;inset:0;z-index:-1;display:grid;place-items:center;pointer-events:none}
#fallback{width:min(23vh,28vw);position:absolute;top:35%}
iframe{width:100%;height:100%;border:0}
header{display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,2fr);align-items:start;gap:clamp(24px,5vw,80px);border-top:2px solid;padding-top:12px}
h1,h2,h3,p{margin:0}
.topInfo{display:flex;flex-wrap:wrap;gap:clamp(22px,3vw,52px);align-items:flex-start}
.infoBlock{min-width:150px}
.infoBlock h2{margin:0 0 9px;font:700 12px/1.25 monospace;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
#dates,#links{display:grid;gap:7px}
.date{display:flex;flex-wrap:wrap;gap:8px;font-size:clamp(15px,1.35vw,20px);line-height:1.25}
.date time{font:inherit;font-weight:700}

#links a{font-size:clamp(15px,1.35vw,20px);line-height:1.25}
.bandBlock{text-align:right}
#bandName{font-family:var(--band-font,"Metal Mania"),serif;font-size:clamp(58px,10vw,150px);font-weight:400;line-height:.96;letter-spacing:.01em;color:var(--band-color);display:inline-block}
#description{font:clamp(16px,1.7vw,24px)/1.2 var(--description-font, Georgia), serif;color:var(--description-color);margin:7px 0 0 auto;display:table}
.textBox{padding:.06em .16em;box-decoration-break:clone;-webkit-box-decoration-break:clone;background:var(--text-box-fill)}
.stage{flex:1;min-height:32vh;display:flex;align-items:flex-end;justify-content:flex-end;padding:22px 0}
.visualButtons{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.visualButtons button,.visualButtons a,.editTools button,#fx{border:1px solid var(--ink);padding:7px 11px;background:var(--panel-fill);backdrop-filter:blur(7px);text-decoration:none}
.visualButtons a{font-size:12px}
.radio{position:relative;isolation:isolate;border-block:2px solid}
.radioWord{position:absolute;z-index:-1;top:30%;left:50%;transform:translate(-50%,-50%) rotate(-8deg);white-space:nowrap;font:900 clamp(52px,12vw,170px)/.8 Arial,sans-serif;letter-spacing:.08em;color:transparent;-webkit-text-stroke:1px var(--highlight-stroke);pointer-events:none}
.radioTop,.transport,#effects{background:var(--panel-fill);backdrop-filter:blur(7px)}
.radioTop,.radioTop label,.transport,.editTools,form{display:flex;align-items:center;gap:12px}
.radioTop{justify-content:space-between;border-bottom:1px solid color-mix(in srgb,var(--rule) 75%,transparent);padding:8px 10px}
.radioTop #resetMusic{border:1px solid var(--ink);padding:6px 8px;background:transparent;font:10px/1 monospace;letter-spacing:.06em}
.radioTop strong{font-size:14px;text-transform:uppercase;letter-spacing:.1em}
.lamp{display:inline-block;width:9px;height:9px;border-radius:50%;border:1px solid;margin-right:5px}
.playing .lamp{background:var(--ink)}
label,small{font:11px/1.4 monospace;letter-spacing:.04em}
input{accent-color:var(--ink)}
#volume{width:80px}
.transport{padding:12px 10px}
.transport button{border:1px solid var(--ink);background:transparent;padding:7px 10px;font:12px/1 monospace}
#play{background:var(--ink);color:var(--paper);min-width:54px}
.track{min-width:min(210px,25%)}
.track h2{font-size:clamp(18px,2vw,30px);letter-spacing:-.04em}
.track small{text-transform:uppercase}
#wave{width:0;flex:1;height:42px}
#fx{background:transparent}
#effects{display:grid;grid-template-columns:repeat(5,minmax(130px,1fr));gap:0;padding:8px 10px}
.effect{min-width:0;border:0;border-left:1px solid color-mix(in srgb,var(--rule) 70%,transparent);margin:0;padding:6px 10px;background:transparent;color:var(--fx-label-color)}
.effect:first-child{border-left:0}
.effectHeading{display:flex;align-items:center;justify-content:space-between;gap:7px;margin-bottom:9px}
.effectHeading h3{margin:0;font:700 11px/1.2 monospace;letter-spacing:.08em;color:var(--fx-label-color)}
.effectPower,.repeatTrigger{border:1px solid var(--fx-label-color);background:transparent;color:var(--fx-label-color);padding:5px 7px;font:700 9px/1 monospace;letter-spacing:.06em;cursor:pointer}
.effect.active .effectPower{background:var(--fx-label-color);color:var(--panel-color)}
.knobs{display:flex;justify-content:space-around;align-items:flex-start;gap:4px}
.knobUnit{display:grid;justify-items:center;gap:4px;min-width:0}
.knobLabel,.knobValue{color:var(--fx-label-color);font:9px/1.15 monospace;letter-spacing:.025em;text-align:center}
.knob{position:relative;width:42px;height:42px;border-radius:50%;cursor:ns-resize;touch-action:none;background:conic-gradient(from 225deg,var(--fx-knob-color) 0 var(--knob-fill,37.5%),rgba(25,25,21,.18) var(--knob-fill,37.5%) 75%,transparent 75% 100%);display:grid;place-items:center}
.knob::before{content:"";position:absolute;inset:4px;border-radius:50%;background:radial-gradient(circle at 35% 28%,color-mix(in srgb,var(--fx-knob-color) 52%,white),var(--fx-knob-color) 70%);box-shadow:inset 0 1px 3px #fff8,inset 0 -2px 3px #0003,0 1px 2px #0003}
.knobDial{position:absolute;z-index:1;width:2px;height:12px;border-radius:2px;top:5px;left:calc(50% - 1px);background:var(--ink);transform-origin:50% 16px;transform:rotate(var(--turn,0deg))}
.knob:focus-visible{outline:2px solid var(--fx-label-color);outline-offset:3px}
.repeatTrigger{display:block;width:100%;margin-top:9px;padding:7px 5px}
.effect button:active{transform:translateY(1px)}
#status:not(:empty){padding:8px 10px;background:var(--panel-fill)}
footer{padding-top:20px}
dialog{width:min(560px,94vw);background:var(--paper);border:1px solid;padding:22px}
dialog::backdrop{background:#16151066}
form{justify-content:space-between;margin-bottom:20px}
form button{font-size:18px;background:transparent;border:0}
textarea{background:#f7f2e8;width:100%;height:200px;resize:vertical;padding:12px;font:14px/1.5 monospace}
.editTools{margin-top:12px;flex-wrap:wrap}
#visualStatus{margin-top:10px;font:13px monospace}
@media(max-width:850px){header{grid-template-columns:1fr;gap:16px}.bandBlock{text-align:right}.topInfo{order:0}.bandBlock{order:1}#effects{grid-template-columns:repeat(3,minmax(120px,1fr))}.effect:nth-child(4){border-left:0}}
@media(max-width:600px){main{padding:18px}.topInfo{gap:18px}.infoBlock{min-width:135px}.stage{min-height:22vh}.transport{gap:7px;padding:10px 5px}.transport button{padding:7px 6px}.track{min-width:0;max-width:28%}.track h2{font-size:16px}#volume{width:58px}#effects{grid-template-columns:repeat(2,minmax(120px,1fr));padding-inline:3px}.effect:nth-child(odd){border-left:0}.effect:nth-child(4){border-left:1px solid color-mix(in srgb,var(--rule) 70%,transparent)}.knob{width:38px;height:38px}.radioWord{top:26%;font-size:16vw}}
@media(prefers-reduced-motion:reduce){#enter i,#fallback{animation:none}}
.still #fallback{animation:none}

/* Keep long track titles from pushing transport controls off screen. */
.track{min-width:0;max-width:min(28vw,260px);flex:0 1 220px}
#title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.effectMode{border:1px solid var(--fx-label-color);background:transparent;color:var(--fx-label-color);padding:5px 7px;font:700 9px/1 monospace;letter-spacing:.06em;cursor:pointer}
@media(max-width:600px){.track{max-width:26vw;flex-basis:120px}#title{font-size:15px}}
body{isolation:isolate}
#enter{display:block;width:auto;text-align:center}
#enter>span{display:block;border:0;padding:0;font:inherit;font-size:clamp(68px,15vw,210px);line-height:1}
.visualButtons{display:grid;grid-template-columns:auto auto;justify-items:end;align-items:center}
#swap{grid-column:1/-1;font-size:1.25rem;font-weight:bold}
#edit,#helpLink{font-size:.8rem}
#infoPage{flex:1;padding:clamp(18px,4vw,64px) 0}
#infoPage section{margin-bottom:1.25rem;white-space:pre-wrap;overflow-wrap:anywhere}
#infoPage hr{border:0;border-top:1px solid;margin:1rem 0}
#back{display:inline-block;padding:.4em;background:var(--panel-fill)}
@media(max-width:850px){.bandBlock{order:-1;justify-self:end}.topInfo{order:0;justify-self:start}}

.timeline{display:flex;align-items:center;gap:12px;padding:0 10px 3px;background:var(--panel-fill);backdrop-filter:blur(7px);font:12px/1 monospace;font-variant-numeric:tabular-nums}
.timeline span{min-width:4ch}
#duration{text-align:right}
#seek{--played:0%;flex:1;min-width:0;height:36px;appearance:none;-webkit-appearance:none;margin:0;background:transparent;cursor:pointer}
#seek::-webkit-slider-runnable-track{height:3px;background:linear-gradient(to right,var(--ink) var(--played),var(--rule) var(--played))}
#seek::-moz-range-track{height:3px;background:var(--rule)}
#seek::-moz-range-progress{height:3px;background:var(--ink)}
#seek::-webkit-slider-thumb{-webkit-appearance:none;box-sizing:border-box;width:13px;height:13px;margin-top:-5px;border:1px solid var(--ink);border-radius:50%;background:#000}
#seek::-moz-range-thumb{width:12px;height:12px;border:1px solid var(--ink);border-radius:50%;background:#000}
#seek:disabled{opacity:.45;cursor:default}
@media(pointer:coarse){#seek{height:44px}}