/* === Fixed-stage viewport (desktop) === */
:root{
  /* --- Icon sizing: single source of truth --- */
  --bigIconSize: 38px;
  --clearIconSize: 28px;
  --undoIconSize: 30px;
  --cameraIconSize: 34px;

  --toolSymbolSizeDefault: 32px;
  --toolSymbolSizeBig: 40px;
  --toolSymbolSizeNormal: 34px;
  --toolSymbolSizeSixteenth: 38px;

  /* 8th note uses an SVG */
  --toolSymbolSizeEighth: 36px;
  --eighthSvgSize: 36px;
  --eighthNudgeX: -2px;
  --eighthNudgeY: -2px;

  /* half note uses an SVG */
  --halfSvgSize: 33px;
  --halfNudgeX: 0px;
  --halfNudgeY: 0px;

  /* whole note uses an SVG */
  --wholeSvgSize: 46px;
  --wholeNudgeX: 0px;
  --wholeNudgeY: -10px;

  --instEmojiSize: 34px;

  /* --- Icon sizing: single source of truth --- */
  /* 8th note uses an SVG: control it via --eighthSvgSize */
  /* +1px from the earlier 17.2px */
  --stageW: 1600px;
  --stageH: 900px;
}


html, body {
  height: 100%;
  overflow: hidden; /* scrolling happens in #viewport so horizontal bar is always reachable */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

#viewport{
  position: fixed;
  inset: 0;
  /* iOS: match the *visible* viewport height to avoid the 1–3px “scroll wiggle” in landscape */
  height: var(--vvh, 100vh);
  width: var(--vvw, 100vw);
  overflow: auto;
  /* allow trackpad horizontal scroll */
  overscroll-behavior: none;
}


/* --- Stage-scale mode (small landscape phones): NO scrolling, stage is positioned + scaled --- */
html.stageScaled, html.stageScaled body{
  overflow: hidden !important;
}
html.stageScaled{ --toolsLift: 12px; }
html.stageScaled #viewport{
  overflow: hidden !important;
  touch-action: none; /* prevent swipe scrolling while scaled */
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
}
html.stageScaled #page{
  position: absolute; /* remove from normal flow so it can't create scrollable size */
  left: 0;
  top: 0;
  transform-origin: top left;
  will-change: transform;
}


html.js-loading #page{ visibility:hidden; }
html.js-ready #page{ visibility:visible; }

/* --- Tablet landscape scale mode: NO scrolling, stage is positioned + scaled to fit horizontally --- */
html.tabletScaled, html.tabletScaled body{
  overflow: hidden !important;
}
html.tabletScaled #viewport{
  overflow: hidden !important;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
}
html.tabletScaled #page{
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: top left;
  will-change: transform;
}
/* Keep page rendering identical; we only lock a minimum stage size in JS */
#page{ position: relative; }

    @import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700;800;900&display=swap");
    :root{
      --cell: 46px;
      --gap: 4px;
      --toolW: 210px;
      --rightW: 110px;
      --rightLift: 0px;
      --titleInset: 0px;
      --contentLift: 73px;
      --toolsLift: 18px;

      --wiggleDeg: 1.2deg;
      --wiggleScale: 0.01;

      /* Robot badge size */
      --robotSizeLanding: 143px;
      --robotSize: var(--robotSizeLanding);
    }

    /* Logged-in: robot size is fixed (layout must not depend on auth) */
body.loggedIn{ --robotSize: var(--robotSizeLanding); }
body.loggedIn #robotLogo{
      opacity: 1;
      filter: none;
    }

    body{
      font-family: "Trebuchet MS", Arial, sans-serif;
      background: #f6fbff;
      margin: 0;
      padding: 0;
      overflow-x: hidden;
    }

    /* Prevent caret/focus blinking artifacts */
    *{ caret-color: transparent; }
    :focus{ outline: none; }
    #page{
      min-height: var(--stageH);
  width: var(--stageW);
  min-width: var(--stageW);
  min-height: var(--stageH);
      display:flex;
      flex-direction:column;
      padding-top: 0px;
      padding-bottom: 0px;
      user-select:none;
      position: relative;
      z-index: 2;
          box-sizing: border-box;
    }

    #topBar{
      pointer-events:none;
      height: 92px;
      padding: 8px 14px 0;
      box-sizing:border-box;
      position: relative;
      z-index: 3;
    }

    #titleBox{
      width: 100%;
      height: 58px;
      border-radius: 16px;
      border: 4px solid #1d1d1d;
      background:#ffffff;
      box-shadow: 0 8px 0 rgba(0,0,0,0.06);
      box-sizing:border-box;

      display:flex;
      align-items:center;
      justify-content:center;

      position: static;
      left: auto;
      top: auto;
      margin: 0;
      overflow:hidden;
      line-height: 1;
    }

    #titleBox .titleText{
      font-family: "Fredoka", "Comic Sans MS","Trebuchet MS", Arial, sans-serif;
      font-weight: 900;
      font-size: 28px;
      letter-spacing: 0.6px;
      color:#1f2a44;
      white-space:nowrap;
      line-height: 1;
      padding: 0; margin: 0;
      transform: translateY(-0.5px);
      text-shadow:
        0 2px 0 rgba(255,255,255,0.9),
        0 5px 0 rgba(0,0,0,0.08);
    
    /* When title box is placed inside the left tools column, it must behave like a normal in-flow element */
    #tools #titleBox{
      position: relative;
      left: auto;
      top: auto;
      width: 100%;
      max-width: none;
      margin: 0 0 10px 0;
      pointer-events: none;
    }
}

    #robotLogo{
      position: absolute;
      left: 0;
      top: 0;
      width: var(--robotSize);
      height: var(--robotSize);
      padding: 8px;
      box-sizing: border-box;
      border-radius: 50%;
      border: 4px solid #1d1d1d;
      background:#ffffff;
      box-shadow: 0 9px 0 rgba(0,0,0,0.07);
      display:flex;
      align-items:center;
      justify-content:center;
      pointer-events:none;
      z-index: 0;
      opacity: 1;
    }
    #robotLogo .robotClip{
      width: 100%;
      height: 100%;
      border-radius: 18px;
      overflow: hidden;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    #robotLogo svg{ width:100%; height:100%; display:block; }


    /* Everything except the title gets lifted together */
    #contentWrap{
      transform: translateY(calc(-1 * var(--contentLift)));
      will-change: transform;
      position: relative;
      z-index: 2;
    }

    #controls{
      display:flex;
      justify-content:center;
      align-items:center;
      gap: 10px;
      margin: 6px 0 8px;
      flex-wrap: nowrap;
    }
    #controls .bigBtn{ margin: 0; }
    .bigBtn{
      font-family: "Comic Sans MS","Comic Sans","Trebuchet MS", Arial, sans-serif;
      font-size:18px;
      padding: 10px 16px;
      margin: 5px;
      border-radius: 16px;
      border: 4px solid #1d1d1d;
      background:#ffffff;
      cursor:pointer;
      font-weight: 900;
      box-shadow: 0 9px 0 rgba(0,0,0,0.07);
      transition: transform 120ms ease;
      touch-action: manipulation;
      min-width: 88px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap: 8px;
    }
    .bigBtn.iconBtn{
      padding: 0;
      width: 76px;
      height: 58px;
    }


    /* === Tap feedback for primary action buttons (Play/Stop/Clear/Undo/Scan) === */
.iconBtn{
  position: relative;
  overflow: hidden; /* keeps the pulse inside the button shape */
}
.iconBtn::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  /* soft, kid-friendly “bubble” pulse */
  background: radial-gradient(circle at 50% 45%,
    rgba(0, 170, 255, 0.35) 0%,
    rgba(0, 170, 255, 0.18) 35%,
    rgba(0, 170, 255, 0.0) 72%);
  opacity:0;
  transform: scale(0.72);
}
.iconBtn.tapFlash::after{
  animation: ksInnerPulse 360ms cubic-bezier(.22,.61,.36,1);
}
@keyframes ksInnerPulse{
  0%   { opacity:0;   transform: scale(0.72); }
  45%  { opacity:0.95;transform: scale(1.05); }
  100% { opacity:0;   transform: scale(1.22); }
}


.bigBtn .icon{
      line-height: 1;
      display:flex;
      align-items:center;
      justify-content:center;
      width: 100%;
      height: 100%;
      transform: none;
    }
    .bigBtn .icon svg{
  display:block;
  width: var(--bigIconSize);
  height: var(--bigIconSize);
}
.bigBtn .playIcon{ color: #18b118; }
.bigBtn .stopIcon{ color: #e02b2b; }
.bigBtn .undoIcon{ color: #111111; }
.bigBtn .clearIcon{ color: #111111; }
.bigBtn .cameraIcon{ color: #111111; }

.bigBtn .clearIcon svg{ width: var(--clearIconSize); height: var(--clearIconSize); }
.bigBtn .undoIcon svg{ width: var(--undoIconSize); height: var(--undoIconSize); transform: translateX(-1px); }
.bigBtn .cameraIcon svg{ width: var(--cameraIconSize); height: var(--cameraIconSize); }
.bigBtn:hover{ transform: translateY(-1px); }

    #mainLayout{
      flex: 1;
      display:flex;
      justify-content:center;
      align-items:flex-start;
      gap: 14px;
      padding: 0 14px 12px;
      box-sizing:border-box;
    }

    #tools{
      width: var(--toolW);
      display:flex;
      flex-direction:column;
      gap: 10px;
      flex: 0 0 auto;
      position: relative;
      top: calc(-1 * var(--toolsLift));
    }

    .tool{
      width: 100%;
      height: 58px;
      border: 4px solid #1d1d1d;
      background: #ffffff;
      cursor:pointer;
      display:flex;
      align-items:center;
      padding: 8px 10px;
      border-radius: 16px;
      box-sizing: border-box;
      box-shadow: 0 8px 0 rgba(0,0,0,0.06);
      transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
      touch-action: manipulation;
    }
    .tool:hover{
      transform: translateY(-1px);
      box-shadow: 0 9px 0 rgba(0,0,0,0.07);
      background:#fbfdff;
    }
    .tool.selected{
      background:#eaf2ff;
      box-shadow: 0 9px 0 rgba(0,0,0,0.10);
    }

    .toolSymbol{
      width: 48px;
      height: 100%;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight: 900;
      margin-right: 8px;
      color:#1d1d1d;
      text-shadow: 0 1px 0 rgba(255,255,255,0.8);
      font-size: var(--toolSymbolSizeDefault);
      line-height: 1;
    }

    .toolSymbol svg{ display:block; }
    .toolSymbol.big{ font-size: var(--toolSymbolSizeBig); }
    .toolSymbol.normal{ font-size: var(--toolSymbolSizeNormal); }
    .toolSymbol.sixteenth{ font-size: var(--toolSymbolSizeSixteenth); }
    .toolSymbol.eighth{ font-size: var(--toolSymbolSizeEighth); }

    .toolBarWrap{
      flex: 1;
      height: 32px;
      display:flex;
      align-items:center;
      gap: 6px;
    }

    .toolBar{
      position: relative;
      flex: 1;
      height: 24px;
      border: 4px solid #1d1d1d;
      background: #fff;
      border-radius: 10px;
      box-sizing: border-box;
      overflow: hidden;
    }

    .toolBarFill{
      position:absolute;
      left:0; top:0; bottom:0;
      width: calc(var(--fill) * 100%);
      background:#1d1d1d;
      border-top-right-radius: 7px;
      border-bottom-right-radius: 7px;
    }

    .toolBarDivs{
      position:absolute;
      inset:0;
      pointer-events:none;
      opacity: 0.24;
      background-image: repeating-linear-gradient(
        to right,
        rgba(0,0,0,0) 0,
        rgba(0,0,0,0) calc((100% / var(--divs)) - 2px),
        rgba(0,0,0,0.95) calc((100% / var(--divs)) - 2px),
        rgba(0,0,0,0.95) calc(100% / var(--divs))
      );
    }

    .toolLabel{
      width: 58px;
      font-size: 14px;
      font-weight: 900;
      text-align:right;
      color:#1f2a44;
    }
    .toolLabel.comicWhole{
      font-family: "Comic Sans MS","Comic Sans","Trebuchet MS", Arial, sans-serif;
    }

    #sequencerShell{
      border: 4px solid #1d1d1d;
      border-radius: 18px;
      background: #ffffff;
      padding: 12px;
      box-shadow: 0 8px 0 rgba(0,0,0,0.07);
      flex: 0 0 auto;
    }

    #sequencerWrapper{
      position: relative;
      border-radius: 14px;
      overflow: hidden;
    }

    /* -------------------- DRUMS PANEL -------------------- */
    #drumPanel{
      margin-top: 10px;
      width: calc(var(--cell) * 16 + var(--gap) * 15);
      border: 4px solid #1d1d1d;
      border-radius: 16px;
      background:#ffffff;
      box-shadow: 0 8px 0 rgba(0,0,0,0.06);
      padding: 8px 10px;
      box-sizing:border-box;
      display:flex;
      align-items:center;
      justify-content: flex-start;
      gap: 10px;
      user-select:none;
    }

    #drumLeft{
      display:flex;
      flex-direction:column;
      gap: 2px;
      min-width: 86px;
    }

    .drumTitle{
      font-family: "Fredoka", "Comic Sans MS","Trebuchet MS", Arial, sans-serif;
      font-weight: 900;
      font-size: 18px;
      color:#1f2a44;
      line-height: 1;
    }

    .drumStatus{
      font-family: "Comic Sans MS","Comic Sans","Trebuchet MS", Arial, sans-serif;
      font-weight: 900;
      font-size: 12px;
      opacity: 0.78;
      color:#1f2a44;
      line-height: 1;
    }

    #drumControls{
      width: 100%;
      display:flex;
      align-items:center;
      justify-content: flex-start;
      gap: 10px;
      flex-wrap: wrap;
    }

    .drumMiniBtn{
      width: 56px;
      height: 56px;
      border-radius: 14px;
      border: 4px solid #1d1d1d;
      background:#ffffff;
      box-shadow: 0 8px 0 rgba(0,0,0,0.07);
      cursor:pointer;
      font-size: 24px;
      font-weight: 900;
      display:flex;
      align-items:center;
      justify-content:center;
      transition: transform 120ms ease, background 120ms ease, opacity 120ms ease, filter 120ms ease;
      touch-action: manipulation;
      padding: 0;
    }
    .drumMiniBtn:hover{ transform: translateY(-1px); }
    .drumMiniBtn:active{ transform: translateY(0); }
    .drumMiniBtn.muted{ opacity: 0.72; }

    /* Hide the old global drum mute button (collapse its space so the style buttons shift left) */
    #drumMuteBtn{
      visibility:hidden;
      pointer-events:none;
      width:0;
      height:0;
      padding:0;
      margin:0;
      border:0;
      box-shadow:none;
      overflow:hidden;
      flex: 0 0 0;
    }

    .drumStyleGroup{ display:flex; gap: 8px; flex-wrap: wrap; justify-content:flex-start; }

    .drumStyleBtn{
      width: 56px;
      height: 56px;
      display:flex;
      align-items:center;
      justify-content:center;
      padding: 0;
      border: 3px solid #1d1d1d;
      border-radius: 14px;
      background:#ffffff;
      cursor:pointer;
      box-shadow: 0 6px 0 rgba(0,0,0,0.08);
      transition: transform 90ms ease;
    }
.drumStyleBtn:hover{ transform: translateY(-1px); }
    .drumStyleBtn:active{ transform: translateY(0); }
    .drumStyleBtn.selected{ background:#eaf2ff; }

    .drumIcon{
      width: 82%;
      height: 82%;
      display:block;
      object-fit: contain;
      pointer-events:none;
    }



    .rowWrap{
      position:relative;
      margin-bottom: var(--gap);
      width: calc(var(--cell) * 16 + var(--gap) * 15);
      height: var(--cell);
    }

    .grid{
      display:grid;
      grid-template-columns: repeat(16, var(--cell));
      gap: var(--gap);
    }

    .cell{
      width: var(--cell);
      height: var(--cell);
      background:#ffffff;
      border: 3px solid #1d1d1d;
      box-sizing:border-box;
      cursor:pointer;
      border-radius: 12px;
      transition: transform 90ms ease;
      touch-action: manipulation;
    }
    .cell:hover{ transform: scale(1.02); }

    .noteLayer{
      position:absolute;
      left:0; top:0;
      width:100%; height:100%;
      pointer-events:none;
    }

    .noteBlock{
      position:absolute;
      height: var(--cell);
      border: 4px solid rgba(0,0,0,0.92);
      box-sizing:border-box;
      border-radius: 14px;
      pointer-events:auto;
      cursor:pointer;
      box-shadow: 0 8px 0 rgba(0,0,0,0.08);
      transform-origin:center center;
      touch-action: manipulation;
      overflow:hidden; /* needed for candy-bar overlay */
    }

    /* Candy-bar inner bevel (cartoony) */
    .noteBlock::before{
      content:"";
      position:absolute;
      inset: 3px;
      border-radius: 10px;
      pointer-events:none;
      box-shadow:
        inset 0 3px 0 rgba(255,255,255,0.35),
        inset 0 -3px 0 rgba(0,0,0,0.10);
      opacity: 0.9;
    }

    /* Candy-bar segments overlay (replaces dot pattern) */
    .noteBlock::after{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;

      /* 3 layers:
         1) alternating panel tint per cell
         2) separator lines at boundaries
         3) glossy highlight stripe near the top
      */
      background-image:
        /* 1) alternating panel tint */
        repeating-linear-gradient(
          to right,
          rgba(255,255,255,0.00) 0,
          rgba(255,255,255,0.00) calc(var(--cell)),
          rgba(0,0,0,0.06)        calc(var(--cell)),
          rgba(0,0,0,0.06)        calc(var(--cell) + var(--gap))
        ),

        /* 2) separators at boundaries */
        repeating-linear-gradient(
          to right,
          rgba(0,0,0,0.00) 0,
          rgba(0,0,0,0.00) calc(var(--cell) - 3px),
          rgba(0,0,0,0.24) calc(var(--cell) - 3px),
          rgba(0,0,0,0.24) calc(var(--cell) - 0px),
          rgba(0,0,0,0.00) calc(var(--cell)),
          rgba(0,0,0,0.00) calc(var(--cell) + var(--gap))
        ),

        /* 3) glossy top highlight */
        linear-gradient(
          to bottom,
          rgba(255,255,255,0.42) 0%,
          rgba(255,255,255,0.18) 32%,
          rgba(255,255,255,0.00) 60%
        );

      background-size:
        calc(var(--cell) + var(--gap)) 100%,
        calc(var(--cell) + var(--gap)) 100%,
        100% 100%;

      background-repeat: repeat, repeat, no-repeat;
      opacity: 1;
    }

    @keyframes swell {
      0%   { transform: scale(1,1); }
      40%  { transform: scale(var(--sx,1.03), var(--sy,1.03)); }
      70%  { transform: scale(var(--sx2,1.01), var(--sy2,1.01)); }
      100% { transform: scale(1,1); }
    }
    .noteBlock.playing{ animation: swell 260ms ease-out; }

    #playhead{
      position:absolute;
      top:0; bottom:0;
      width: var(--cell);
      left: 0;
      pointer-events:none;
      border-radius: 12px;
      background: rgba(255,255,255,0.30);
      border: 4px solid rgba(0,0,0,0.22);
      box-shadow: 0 0 0 3px rgba(255,255,255,0.25) inset;
      transition: left 70ms linear;
      transform-origin: 50% 50%;
    }
    #playhead::after{
      content:"";
      position:absolute;
      top:6px; bottom:6px;
      left: 50%;
      width: 0;
      border-left: 3px dashed rgba(0,0,0,0.18);
      transform: translateX(-50%);
    }

    @keyframes wiggle {
      0%   { transform: rotate(calc(-1 * var(--wiggleDeg))) scale(calc(1 + var(--wiggleScale))); }
      50%  { transform: rotate(var(--wiggleDeg))           scale(calc(1 + var(--wiggleScale))); }
      100% { transform: rotate(calc(-1 * var(--wiggleDeg))) scale(calc(1 + var(--wiggleScale))); }
    }
    #playhead.playing{ animation: wiggle 220ms ease-in-out infinite; }

    #rightCol{
      width: var(--rightW);
      display:flex;
      flex-direction:column;
      align-items:center;
      gap: 12px;
      flex: 0 0 auto;
      transform: translateY(calc(-1 * var(--rightLift)));
      will-change: transform;
    }

    #tempoControls{
      display:flex;
      flex-direction:column;
      align-items:center;
      gap: 8px;
      width: 100%;
    }
    #tempoControls button{
      width:58px;
      height:58px;
      font-size:30px;
      border-radius: 16px;
      border: 4px solid #1d1d1d;
      background:#ffffff;
      cursor:pointer;
      box-shadow: 0 8px 0 rgba(0,0,0,0.07);
      transition: transform 120ms ease;
      touch-action: manipulation;
    }
    #tempoControls button:hover{ transform: translateY(-1px); }

    #tempoBox{
      width:74px;
      text-align:center;
      font-size:22px;
      border: 4px solid #1d1d1d;
      background:#ffffff;
      padding: 12px 0;
      border-radius: 16px;
      font-weight: 900;
      color:#1f2a44;
      box-shadow: 0 8px 0 rgba(0,0,0,0.07);
      user-select:none;
    }

    #instButtons{
      display:flex;
      flex-direction:column;
      gap: 10px;
      width: 58px;
    }

    #masterVolUI{
      filter: drop-shadow(0px 8px 0px rgba(0,0,0,0.07));
    }

    .instBtn{
      width: 58px;
      height: 58px;
      border-radius: 16px;
      border: 4px solid #1d1d1d;
      background:#ffffff;
      box-shadow: 0 8px 0 rgba(0,0,0,0.07);
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size: var(--instEmojiSize);
      transition: transform 120ms ease, filter 120ms ease, opacity 120ms ease, background 120ms ease;
      touch-action: manipulation;
      box-sizing:border-box;
    }
    .instBtn:hover{ transform: translateY(-1px); }

    .instBtn.selected{ background:#eaf2ff; opacity: 1; filter: none; }
    .instBtn.notSelected{ opacity: 0.80; filter: none; }

    .waveIcon{ width: 46px; height: 28px; display:block; }



    /* Save icon colour */
    .bigBtn .saveIcon{ color: #111111; }
    .bigBtn .saveIcon svg{ width: var(--bigIconSize); height: var(--bigIconSize); }

    /* Save toast — centred pill that slides up briefly */
    #saveToast{
      position: fixed;
      bottom: calc(env(safe-area-inset-bottom, 0px) + 28px);
      left: 50%;
      transform: translateX(-50%) translateY(10px);
      opacity: 0;
      transition: opacity 200ms ease, transform 200ms ease;
      background: #1d1d1d;
      color: #fff;
      font-family: "Comic Sans MS","Comic Sans","Trebuchet MS", Arial, sans-serif;
      font-weight: 900;
      font-size: 14px;
      padding: 9px 22px;
      border-radius: 30px;
      pointer-events: none;
      z-index: 20000;
      white-space: nowrap;
      border: 3px solid rgba(255,255,255,0.12);
      box-shadow: 0 6px 0 rgba(0,0,0,0.12);
    }
    #saveToast.show{ opacity: 1; transform: translateX(-50%) translateY(0); }
    #saveToast.saved{ background: #18b118; }
    #saveToast.error{ background: #e02b2b; }
    #saveToast.upgrade{ background: #f4a800; color: #1d1d1d; }

    /* Camera scan modal */
    #camModal{ position: fixed; inset:0; display:none; align-items:center; justify-content:center; z-index: 10000; background: rgba(0,0,0,0.45); padding: 18px; box-sizing: border-box; }
    #camModal.show{ display:flex; }

    /* Scan limit slide-in panel — position:fixed so it always anchors to the screen edge,
       regardless of scroll containers, stageScaled transforms, or safe-area padding on #viewport */
    #scanLimitModal{
      display: none; /* JS sets to flex */
      flex-direction: column;
      position: fixed;
      top: 8px; /* fallback for browsers without env() */
      top: calc(env(safe-area-inset-top, 0px) + 8px); /* clears iPhone status bar */
      right: 0;
      width: 190px;
      z-index: 10001;
      transform: translateX(110%);
      transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      border: 3px solid #1d1d1d;
      border-right: none;
      border-radius: 12px 0 0 12px;
      background: #fff;
      box-shadow: -4px 5px 0 rgba(0,0,0,0.10);
      overflow: hidden;
    }
    #scanLimitModal.show{ transform: translateX(0); }
    #scanLimitModal .modalHeader{ padding: 7px 8px; border-bottom-width: 3px; }
    #scanLimitModal .modalTitle{ font-size: 12px; }
    #scanLimitModal .modalClose{ width: 28px; height: 28px; font-size: 13px; border-radius: 7px; border-width: 3px; box-shadow: 0 3px 0 rgba(0,0,0,0.07); }
    .scanLimitBody{ padding: 8px 10px 6px; text-align:center; }
    .scanLimitIcon{ font-size: 22px; margin-bottom: 5px; }
    .scanLimitMsg{ font-weight: 800; font-size: 11px; color: #1f2a44; line-height: 1.4; margin: 0 0 4px; }
    .scanLimitScansLeft{ font-size: 9px; font-weight: 700; opacity: 0.55; }
    #scanLimitModal .modalBtns{ padding: 6px 8px 9px; }
    #scanLimitModal .bigBtn{ width: 100%; text-align: center; box-sizing: border-box; justify-content: center; font-size: 12px; padding: 7px 10px; }
    /* Camera button greyed when guest scan limit reached */
    #cameraBtn.scanLimitReached{ opacity: 0.35; filter: grayscale(1); cursor: not-allowed; }
    #cameraBtn.scanLimitReached:hover{ transform: none; box-shadow: none; }

    .modalCard{ width: min(620px, var(--stageW)); background:#fff; border: 4px solid #1d1d1d; border-radius: 18px; box-shadow: 0 9px 0 rgba(0,0,0,0.12); overflow:hidden; }
    .modalHeader{ display:flex; align-items:center; justify-content:space-between; padding: 10px 12px; border-bottom: 4px solid #1d1d1d; }
    .modalTitle{ font-weight: 900; color:#1f2a44; font-size: 16px; }
    .modalClose{ width:46px; height:46px; border-radius: 14px; border: 4px solid #1d1d1d; background:#fff; cursor:pointer; font-weight: 900; font-size: 18px; box-shadow: 0 8px 0 rgba(0,0,0,0.07); }
    .camStage{ position: relative; aspect-ratio: 4 / 3; background:#111; }
    #camVideo, #camPreview{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
    #camPreview{ display:none; }
    .camOverlay{ position:absolute; inset:10px; border: 4px dashed rgba(255,255,255,0.75); border-radius: 14px; pointer-events:none; }
    .camOverlay::before{ content:""; position:absolute; inset:0; background-image:
      repeating-linear-gradient(to right, rgba(255,255,255,0.22) 0, rgba(255,255,255,0.22) 1px, rgba(255,255,255,0) 1px, rgba(255,255,255,0) calc((100% / 16))),
      repeating-linear-gradient(to bottom, rgba(255,255,255,0.22) 0, rgba(255,255,255,0.22) 1px, rgba(255,255,255,0) 1px, rgba(255,255,255,0) calc((100% / 8)));
      border-radius: 10px;
    }
    .modalBtns{ display:flex; gap: 10px; justify-content:center; padding: 12px; }
    .modalHint{ padding: 0 14px 14px; text-align:center; font-weight: 800; opacity: 0.75; font-size: 12px; }

    /* Locked controls + login hints */
    .tool.locked{
      opacity: 0.35;
      filter: grayscale(1);
      cursor: not-allowed;
    }
    .tool.locked:hover{
      transform: none;
      background:#f3f5f7;
      box-shadow: 0 8px 0 rgba(0,0,0,0.06);
    }

    /* Grey out individual control buttons when locked */
    .bigBtn.locked{ opacity: 0.35; filter: grayscale(1); cursor: not-allowed; }
    .bigBtn.locked:hover{ transform: none; }
    .bigBtn.locked:active{ transform: none; }

    #tempoControls.locked button,
    #tempoControls.locked #tempoBox{
      opacity: 0.35;
      filter: grayscale(1);
      cursor: not-allowed;
    }
    #tempoControls.locked button:hover{ transform: none; }

    #toolsList{
      display:flex;
      flex-direction:column;
      gap: 10px;
      width: 100%;
    }
    #toolsLoginArea{
      width: 100%;
      margin-top: 8px;
      display:flex;
      flex-direction:column;
      align-items: stretch;
      gap: 10px;
    }
    #toolHintSlot{
      height: 36px;
      width: 100%;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .loginHint{
      font-family: "Comic Sans MS","Comic Sans","Trebuchet MS", Arial, sans-serif;
      font-weight: 900;
      font-size: 14px;
      padding: 8px 12px;
      border-radius: 16px;
      border: 4px solid #1d1d1d;
      background:#ffffff;
      box-shadow: 0 8px 0 rgba(0,0,0,0.07);
      color:#1f2a44;
      text-decoration:none;
      opacity: 0;
      transform: translateY(4px);
      pointer-events: none;
      transition: opacity 140ms ease, transform 140ms ease;
      user-select:none;
      white-space: nowrap;
    }
    .loginHint.show{
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .loginBtn{
      width: 100%;
      height: 58px;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius: 16px;
      border: 4px solid #1d1d1d;
      background:#ffffff;
      box-shadow: 0 8px 0 rgba(0,0,0,0.07);
      color: #18b118;
      font-family: "Comic Sans MS","Comic Sans","Trebuchet MS", Arial, sans-serif;
      font-weight: 900;
      font-size: 20px;
      text-decoration:none;
      transition: transform 120ms ease;
      touch-action: manipulation;
      box-sizing: border-box;
      padding: 8px 10px;
      margin: 0;
      line-height: 1;
}
    .loginBtn.logout{ color:#e00000 !important; }
    .loginBtn:hover{ transform: translateY(-1px); }

    #tempoControls{ position:relative; }
    #tempoLoginHint{
      position:absolute;
      left: calc(100% + 12px);
      top: 50%;
      transform: translateY(-50%);
    }
body.loggedIn #toolsLoginArea{ display:block; }

#loginCtaWrap{
  position: relative;
  width: 100%;
  height: 58px;
  display: block;
}
#loginCtaWrap .loginBtn{
  position: relative;
  z-index: 2;
}
#loginCtaWrap.pulsing .loginBtn{
  animation: loginSwell 760ms ease-in-out infinite;
}
#loginCtaWrap.pulsing .loginBtn:hover{ transform: none; }
@keyframes loginSwell{
  0%,100%{ transform: translateY(0) scale(1,1); }
  18%{ transform: translateY(-1px) scale(1.08,0.96); }
  50%{ transform: translateY(-2px) scale(0.96,1.12); }
  72%{ transform: translateY(-1px) scale(1.05,0.98); }
  86%{ transform: translateY(-1px) scale(1.02,1.02); }
}



#instButtons.locked .instBtn{
  opacity: 0.35;
  filter: grayscale(1);
  cursor: not-allowed;
}

/* Allow Piano + Trumpet to look enabled in guest (locked) mode */
#instButtons.locked #btnPiano,
#instButtons.locked #btnTrumpet{
  opacity: 1;
  filter: none;
  cursor: pointer;
}
#instButtons.locked #btnPiano:hover,
#instButtons.locked #btnTrumpet:hover{ transform: translateY(-1px); }

#instButtons.locked .instBtn:hover{ transform: none; }


/* Unlocked visual cue */
@keyframes unlockGlow{
  0%{ box-shadow: 0 0 0 rgba(24,177,24,0); }
  50%{ box-shadow: 0 0 0 10px rgba(24,177,24,0.20); }
  100%{ box-shadow: 0 0 0 rgba(24,177,24,0); }
}
#instButtons.justUnlocked{ animation: unlockGlow 600ms ease-out; }







    /* Guest mode stamp */
    body.loggedIn /* Logout button */


    /* --- MASTER VOLUME FADER (Shadow DOM component — no extra column width needed) --- */

LAYOUT DEBUG MODE -------------------- */
    /* Enable by adding ?debug=1 to the URL (e.g., /?debug=1) */
    .debug *{
      outline: 1px dashed rgba(255, 0, 0, 0.35);
      outline-offset: -1px;
    }

    /* Strong outlines for key zones (adjust selectors to match your layout) */
    .debug #topBar{ outline: 3px solid rgba(0, 90, 255, 0.85); }
    .debug #tools{ outline: 3px solid rgba(0, 180, 90, 0.85); }
    .debug #sequencerShell{ outline: 3px solid rgba(255, 60, 60, 0.85); }
    .debug #rightCol{ outline: 3px solid rgba(140, 60, 255, 0.85); }

    /* Viewport label (shows CSS pixel size) */
    #debug-info{
      position: fixed;
      right: 6px;
      bottom: calc(6px + env(safe-area-inset-bottom));
      background: #000;
      color: #fff;
      font-size: 11px;
      font-weight: 900;
      padding: 4px 6px;
      border-radius: 10px;
      border: 2px solid rgba(255,255,255,0.25);
      z-index: 99999;
      display: none;
      pointer-events: none;
      opacity: 0.92;
    }
    .debug #debug-info{ display: block; }

    /* Overflow highlight helper class (added by JS) */
    .debug .overflow-check{
      box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.45) inset !important;
      background: rgba(255, 0, 0, 0.08) !important;
    }
    /* ----------------------------------------------------------- */


/* --- 8th note icon: single source of truth --- */
.toolSymbol.eighth{
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transform: translate(var(--eighthNudgeX), var(--eighthNudgeY));
  font-size: var(--toolSymbolSizeEighth); /* only matters if a glyph is used */
}
.toolSymbol.eighth svg{
  width: var(--eighthSvgSize);
  height: var(--eighthSvgSize);
}

/* --- half note icon: single source of truth --- */
.toolSymbol.half{
  display:flex;
  align-items:center;
  justify-content:center;
  line-height: 1;
  transform: translate(var(--halfNudgeX), var(--halfNudgeY));
}
.toolSymbol.half svg{
  width: var(--halfSvgSize);
  height: var(--halfSvgSize);
}


/* --- whole note icon: single source of truth --- */
.toolSymbol.whole{
  display:flex;
  align-items:center;
  justify-content:center;
  line-height: 1;
  transform: translate(var(--wholeNudgeX), var(--wholeNudgeY));
}
.toolSymbol.whole svg{
  width: var(--wholeSvgSize);
  height: var(--wholeSvgSize);
}

/* drag-to-pan cursors */
body.can-pan{ cursor: grab; }
  body.dragging-pan{ cursor: grabbing; }

/* --- Rules migrated from inline HTML <style> --- */
#robotLogo svg, #robotLogo img{ width:100%; height:100%; display:block; }

/* Suppress transitions during initial load */
html.js-loading #rightCol,
html.js-loading #contentWrap{
  transition: none !important;
}