/* Guitarboosters online tuner. Sizes are in px because the theme sets html { font-size: 62.5% }. */
.gbt {
  --gbt-bg: #161616;
  --gbt-screen: #0d0d0e;
  --gbt-raised: #1f1f21;
  --gbt-line: #2c2c2e;
  --gbt-text: #f5f1ea;
  --gbt-muted: #a29d95;
  --gbt-acc: #fcb06d;
  --gbt-ok: #4ade80;
  --gbt-far: #ef575f;
  --gbt-state: var(--gbt-muted);
  box-sizing: border-box;
  max-width: 600px;
  min-height: 600px;
  margin: 32px auto;
  padding: 20px;
  border-radius: 20px;
  background: var(--gbt-bg);
  color: var(--gbt-text);
  color-scheme: dark;
  font-family: 'Reddit Sans Condensed', 'Reddit Sans', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  text-align: left;
}
.gbt--flat, .gbt--sharp { --gbt-state: var(--gbt-acc); }
.gbt--intune { --gbt-state: var(--gbt-ok); }
.gbt--far { --gbt-state: var(--gbt-far); }
.gbt *, .gbt *::before, .gbt *::after { box-sizing: border-box; }
.gbt p { margin: 0; color: inherit; line-height: 1.4; }
.gbt button, .gbt select, .gbt output { font: inherit; color: inherit; margin: 0; letter-spacing: normal; text-transform: none; }
.gbt [hidden] { display: none !important; }
.gbt button:focus-visible, .gbt select:focus-visible { outline: 2px solid var(--gbt-acc); outline-offset: 2px; }
/* The theme left-aligns button text and greys out selects; restate both. */
.gbt .gbt__step, .gbt .gbt__mode, .gbt .gbt__auto, .gbt .gbt__string, .gbt .gbt__start { text-align: center; }
.gbt .gbt__select { color: var(--gbt-text); text-align: left; }
.gbt__noscript { font-size: 16px; color: var(--gbt-muted); }

/* Settings */
.gbt__bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 16px; }
.gbt__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gbt__field:first-child { flex: 1 1 220px; }
.gbt__label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gbt-muted); }
.gbt__select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  padding: 0 40px 0 14px;
  border: 1px solid var(--gbt-line);
  border-radius: 10px;
  background: var(--gbt-raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a29d95' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center;
  font-size: 16px;
  color: var(--gbt-text);
  cursor: pointer;
}
.gbt__stepper { display: flex; align-items: center; height: 44px; border: 1px solid var(--gbt-line); border-radius: 10px; background: var(--gbt-raised); overflow: hidden; }
.gbt__step { width: 44px; height: 100%; padding: 0; border: 0; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; }
.gbt__step:hover:not(:disabled) { background: #2a2a2c; }
.gbt__step:disabled { opacity: .35; cursor: default; }
.gbt__a4 { min-width: 70px; text-align: center; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Display */
.gbt__screen { padding: 18px 16px 16px; border: 1px solid var(--gbt-line); border-radius: 14px; background: var(--gbt-screen); text-align: center; }
.gbt__gauge { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto; overflow: visible; }
.gbt__tick { stroke: #4a4a4d; stroke-width: 2; stroke-linecap: round; }
.gbt__tick--major { stroke: #8a857e; stroke-width: 3; }
.gbt__zone { fill: none; stroke: var(--gbt-ok); stroke-width: 8; stroke-linecap: round; opacity: .3; transition: opacity .15s; }
.gbt--intune .gbt__zone { opacity: 1; }
.gbt__glabel { fill: var(--gbt-muted); font-size: 14px; font-weight: 700; text-anchor: middle; }
.gbt__glabel--sym { font-size: 22px; }
.gbt__needle line { stroke: var(--gbt-state); stroke-width: 4; stroke-linecap: round; transition: stroke .15s; }
.gbt__needle circle { fill: var(--gbt-state); transition: fill .15s; }
.gbt__note { display: flex; justify-content: center; align-items: flex-start; gap: 4px; margin-top: 14px; line-height: 1; }
.gbt__letter { font-family: 'Boldonse', 'Reddit Sans Condensed', Arial, sans-serif; font-size: 60px; line-height: 1.15; color: var(--gbt-text); transition: color .15s; }
.gbt--intune .gbt__letter { color: var(--gbt-ok); }
.gbt--idle .gbt__letter { color: #3a3a3d; }
.gbt__octave { margin-top: 8px; font-size: 20px; font-weight: 700; color: var(--gbt-muted); }
.gbt__sub { margin-top: 4px; font-size: 15px; color: var(--gbt-muted); }
.gbt__readout { display: flex; justify-content: center; gap: 18px; margin-top: 8px; font-size: 14px; color: var(--gbt-muted); font-variant-numeric: tabular-nums; }
/* Strobe band: the stripes drift at a speed set by the error in cents and stop when in tune. */
.gbt__strobe { position: relative; height: 26px; max-width: 360px; margin: 12px auto 0; border: 1px solid var(--gbt-line); border-radius: 8px; background: #09090a; overflow: hidden; }
.gbt__strobe::before { content: ''; position: absolute; z-index: 1; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--gbt-text); opacity: .75; }
.gbt__strobe span { position: absolute; top: 0; bottom: 0; left: -48px; width: calc(100% + 96px); background: repeating-linear-gradient(90deg, var(--gbt-state) 0 12px, transparent 12px 24px); opacity: .9; will-change: transform; transition: background .15s; }
.gbt--idle .gbt__strobe span { opacity: .2; }
.gbt .gbt__status { min-height: 25px; margin-top: 12px; font-size: 18px; font-weight: 700; color: var(--gbt-state); }
.gbt--idle .gbt__status { font-weight: 400; color: var(--gbt-muted); }
.gbt__level { max-width: 240px; height: 4px; margin: 14px auto 0; border-radius: 2px; background: #232325; overflow: hidden; }
.gbt__level span { display: block; height: 100%; background: var(--gbt-acc); transform: scaleX(0); transform-origin: left; transition: transform .08s linear; }
.gbt:not(.gbt--live) .gbt__level { visibility: hidden; }

/* Actions */
.gbt .gbt__error { margin-top: 12px; padding: 12px 14px; border: 1px solid rgba(239, 87, 95, .45); border-radius: 10px; background: rgba(239, 87, 95, .12); font-size: 15px; color: #ffd9d6; }
.gbt__start {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 52px;
  margin-top: 16px;
  border: 0;
  border-radius: 12px;
  background: var(--gbt-acc);
  font-size: 17px;
  font-weight: 800;
  color: #1a1208;
  cursor: pointer;
  transition: background .15s;
}
.gbt .gbt__start { color: #1a1208; }
.gbt__start:hover { background: #ffc48f; }
.gbt__start:disabled { opacity: .6; cursor: wait; }
.gbt--live .gbt__start { background: #2a2a2c; }
.gbt--live .gbt__start, .gbt.gbt--live .gbt__start { color: var(--gbt-text); }
.gbt--live .gbt__start::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--gbt-far); animation: gbt-pulse 1.4s ease-in-out infinite; }
@keyframes gbt-pulse { 50% { opacity: .3; } }

.gbt__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; }
.gbt__modes { display: inline-flex; padding: 3px; border: 1px solid var(--gbt-line); border-radius: 10px; background: var(--gbt-screen); }
.gbt__mode { height: 36px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; font-size: 14px; font-weight: 700; cursor: pointer; }
.gbt .gbt__mode { color: var(--gbt-muted); }
.gbt .gbt__mode[aria-pressed="true"] { background: #2c2c2f; color: var(--gbt-text); }
.gbt__auto { height: 36px; padding: 0 16px; border: 1px solid var(--gbt-line); border-radius: 999px; background: transparent; font-size: 14px; font-weight: 700; cursor: pointer; }
.gbt .gbt__auto { color: var(--gbt-muted); }
.gbt .gbt__auto[aria-pressed="true"] { border-color: var(--gbt-acc); color: var(--gbt-acc); }

.gbt__strings { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.gbt__string {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 10px 2px;
  border: 1px solid var(--gbt-line);
  border-radius: 12px;
  background: var(--gbt-raised);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.gbt__string:hover { border-color: #4a4a4d; }
.gbt__snum, .gbt__ssol { font-size: 12px; color: var(--gbt-muted); }
.gbt__sletter { font-size: 22px; font-weight: 800; line-height: 1.15; }
.gbt__string.is-active { border-color: var(--gbt-state); background: #262628; }
.gbt__string[aria-pressed="true"] { border-color: var(--gbt-acc); box-shadow: inset 0 0 0 1px var(--gbt-acc); }
.gbt__string.is-tuned::after { content: '✓'; position: absolute; top: 4px; right: 7px; font-size: 13px; font-weight: 800; color: var(--gbt-ok); }

.gbt .gbt__hint, .gbt .gbt__privacy { margin-top: 10px; font-size: 13px; color: var(--gbt-muted); text-align: center; }
.gbt .gbt__privacy { margin-top: 4px; }

@media (max-width: 480px) {
  .gbt { margin: 24px 0; padding: 14px; border-radius: 16px; }
  .gbt__screen { padding: 14px 10px 14px; }
  .gbt__strobe { height: 22px; }
  .gbt__letter { font-size: 50px; }
  .gbt__strings { gap: 5px; }
  .gbt__string { padding: 8px 0; border-radius: 10px; }
  .gbt__sletter { font-size: 19px; }
  .gbt__mode { padding: 0 11px; }
  .gbt__auto { padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .gbt *, .gbt *::before { transition: none !important; animation: none !important; }
}