@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../../../assets/vendor/fonts/ibm-plex-mono/ibm-plex-mono-400.ttf') format('truetype')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../../../assets/vendor/fonts/ibm-plex-mono/ibm-plex-mono-500.ttf') format('truetype')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('../../../assets/vendor/fonts/ibm-plex-mono/ibm-plex-mono-600.ttf') format('truetype')}
@font-face{font-family:'Silkscreen';font-style:normal;font-weight:400;font-display:swap;src:url('../../../assets/vendor/fonts/silkscreen/silkscreen-400.ttf') format('truetype')}
@font-face{font-family:'Silkscreen';font-style:normal;font-weight:700;font-display:swap;src:url('../../../assets/vendor/fonts/silkscreen/silkscreen-700.ttf') format('truetype')}

#sandleraApp{
    --bg:#14110c; --panel:#1c1712; --panel2:#231d14; --line:#372d1e;
    --ink:#ece0c8; --dim:#9b8d72; --faint:#6f6350; --amber:#f2b23e; --blue:#4aa3df;
    position:relative;z-index:1;width:100%;height:100%;min-height:0;max-width:1440px;margin:0 auto;
    display:flex;flex-direction:column;gap:12px;padding:14px 16px;overflow:hidden;overscroll-behavior:none;container-type:size;
    font-family:'IBM Plex Mono',ui-monospace,monospace;color:var(--ink);user-select:none;-webkit-user-select:none;
    background:
      radial-gradient(1100px 520px at 12% -8%, rgba(242,178,62,.08), transparent 60%),
      radial-gradient(900px 480px at 108% 112%, rgba(74,163,223,.06), transparent 60%),
      var(--bg);
}
#sandleraApp::before{
    content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
    background-image:radial-gradient(rgba(236,224,200,.05) 1px, transparent 1.4px);
    background-size:26px 26px;
}
@scope (#sandleraApp){
  *{box-sizing:border-box}

  header.top{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
  .brand{display:flex; align-items:center; gap:12px;}
  .mark{width:20px; height:12px; position:relative; flex:none; transform:translateY(2px);}
  .mark::before{content:''; position:absolute; left:0; top:8px; width:4px; height:4px; background:#f2b23e;
    box-shadow:4px 0 #f2b23e, 8px 0 #d99a2e, 12px 0 #f2b23e, 16px 0 #4aa3df,
               4px -4px #ffd06b, 8px -4px #f2b23e, 12px -4px #d99a2e, 8px -8px #ffd06b;}
  h1{font-family:'Silkscreen',monospace; font-weight:700; margin:0; line-height:1;
     font-size:clamp(18px,2.2vw,25px); letter-spacing:.04em;}
  h1 .a{color:var(--amber)} h1 .b{color:var(--ink)}
  .tag{font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--dim); margin-top:4px;}
  .transport{display:flex; gap:8px; flex-wrap:wrap; margin-left:auto; padding-right:4px;}
  .btn{
    font:600 11px 'IBM Plex Mono',monospace; letter-spacing:.1em; color:var(--ink);
    background:var(--panel2); border:1px solid var(--line); border-radius:6px;
    padding:9px 13px; cursor:pointer;
    transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease;
  }
  .btn:hover{transform:translateY(-1px); border-color:#71603c; box-shadow:0 5px 16px -10px #000;}
  .btn:active{transform:translateY(0);}
  .btn.warn:hover{border-color:#c0563a;}
  .btn[disabled]{opacity:.35; pointer-events:none;}
  .btn:focus-visible,.chip:focus-visible,.mbtn:focus-visible,.mini:focus-visible,.rack-toggle:focus-visible,input:focus-visible{outline:2px solid var(--amber); outline-offset:2px;}
  .icon-btn{position:relative; width:38px; height:34px; padding:0; display:grid; place-items:center;}
  .icon-btn svg{width:19px; height:19px; overflow:visible;}
  .fullscreen-btn{font:500 23px/1 'IBM Plex Mono',monospace; color:var(--ink);}
  .fullscreen-btn.is-active{color:var(--amber); border-color:var(--amber); box-shadow:0 0 14px -6px var(--amber);}
  .sound-btn .sound-waves{transition:opacity .15s ease;}
  .sound-btn .sound-cross{position:absolute; right:4px; top:-3px; color:#f0523b; font:700 18px/1 sans-serif;
    opacity:0; text-shadow:0 0 8px rgba(240,82,59,.65); transition:opacity .15s ease;}
  .sound-btn.off{color:#817866;}
  .sound-btn.off .sound-waves{opacity:.18;}
  .sound-btn.off .sound-cross{opacity:1;}
  .record-btn .record-ring{stroke:#a89a80; transition:stroke .15s ease;}
  .record-btn .record-core{fill:#ef4f3b; filter:drop-shadow(0 0 3px rgba(239,79,59,.75));}
  .record-btn:hover .record-ring{stroke:#e1d3b8;}
  .record-btn.recording{color:#ff6753; border-color:#cf4e3d; box-shadow:0 0 16px -5px #ff543f;}
  .record-btn.recording .record-ring{stroke:#ff6753;}
  .record-btn.recording .record-core{animation:recordPulse .9s ease-in-out infinite;}
  @keyframes recordPulse{50%{opacity:.3; transform:scale(.68); transform-origin:center;}}

  main{position:relative; flex:1; display:flex; gap:12px; min-height:0; transition:gap .36s ease;}
  aside.rack{
    width:252px; min-width:0; flex:none; background:var(--panel); border:1px solid var(--line); border-radius:10px;
    padding:12px; display:flex; flex-direction:column; gap:11px; overflow:hidden;
    transition:width .36s ease, padding .36s ease, border-color .36s ease, opacity .24s ease, transform .36s ease;
  }
  main.rack-collapsed{gap:0;}
  aside.rack.is-collapsed{
    width:0; padding-left:0; padding-right:0; border-left-color:transparent; border-right-color:transparent;
    opacity:0; transform:translateX(20px); overflow:hidden; pointer-events:none;
  }
  .rack-toggle{
    position:absolute; z-index:5; top:10px; left:242px; width:24px; height:28px; padding:0;
    display:grid; place-items:center; color:var(--dim); background:var(--panel2); border:1px solid var(--line);
    border-radius:0 6px 6px 0; cursor:pointer; font:600 18px/1 'IBM Plex Mono',monospace;
    transition:left .36s ease, color .12s ease, background .12s ease, border-color .12s ease;
  }
  .rack-toggle:hover{color:var(--amber); background:#2a2115; border-color:#71603c;}
  main.rack-collapsed .rack-toggle{left:0;}
  .rack::-webkit-scrollbar{width:8px}
  .rack::-webkit-scrollbar-thumb{background:#3a2f1f; border-radius:4px}
  .rack h2{font-family:'Silkscreen',monospace; font-weight:400; font-size:10px; letter-spacing:.2em;
           color:var(--dim); margin:2px 0 0;}
  #elements{display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px;}
  .chip{
    display:flex; flex-direction:column; gap:4px; padding:4px; text-align:left;
    background:#201a12; border:1px solid var(--line); border-radius:7px; cursor:pointer;
    transition:transform .12s ease, border-color .12s ease, box-shadow .2s ease, background .2s ease;
  }
  .chip canvas{width:100%; height:20px; display:block; border-radius:3px; background:#0e0b08; image-rendering:pixelated;}
  .chip .row{display:flex; align-items:center; justify-content:space-between; gap:2px;}
  .chip .nm{font-size:8px; font-weight:600; letter-spacing:.06em; color:#cfc2a6; white-space:nowrap;}
  .chip kbd{font-size:8px; color:var(--dim); border:1px solid var(--line); border-radius:3px;
            padding:0 3px; background:#171208; font-family:inherit;}
  .chip:hover{transform:translateY(-2px); border-color:#6b5a3a;}
  @supports (border-color: color-mix(in srgb, red 10%, blue)){
    .chip:hover{border-color:color-mix(in srgb, var(--c) 55%, #3a3020);}
  }
  .chip.active{border-color:var(--c); background:#251e13; animation:chipPulse 2.4s ease-in-out infinite;}
  .chip.active .nm{color:var(--c);}
  .chip.active kbd{border-color:var(--c); color:var(--c);}
  @keyframes chipPulse{
    0%,100%{box-shadow:0 0 14px -8px var(--c);}
    50%{box-shadow:0 0 18px -3px var(--c);}
  }

  .modes{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px;}
  .mbtn{
    min-width:0; font:600 9.5px 'IBM Plex Mono',monospace; letter-spacing:.08em;
    color:var(--dim); background:#1a140d; border:1px solid var(--line); border-radius:6px;
    padding:7px 4px; cursor:pointer; transition:all .12s ease; white-space:nowrap;
  }
  .mbtn:hover{color:var(--ink); border-color:#6b5a3a;}
  .mbtn.active{color:var(--amber); border-color:var(--amber); background:#241b0e;
    box-shadow:0 0 12px -6px var(--amber);}

  .brushbox{border-top:1px dashed var(--line); padding-top:10px;}
  .brow{display:flex; justify-content:space-between; font-size:10px; letter-spacing:.14em;
        color:var(--dim); margin-bottom:6px;}
  .brow span:last-child, .brow .val{color:var(--amber);}
  .dimtxt{color:var(--faint)!important; font-size:8.5px!important; letter-spacing:.04em!important;}
  input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:4px;
    background:#3a2f1e; border-radius:2px; margin:4px 0; cursor:pointer;}
  input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:14px; height:14px;
    background:var(--amber); border-radius:3px; border:1px solid rgba(0,0,0,.5);
    box-shadow:0 0 10px rgba(242,178,62,.45); cursor:pointer;}
  input[type=range]::-moz-range-thumb{width:14px; height:14px; background:var(--amber);
    border-radius:3px; border:1px solid rgba(0,0,0,.5); box-shadow:0 0 10px rgba(242,178,62,.45); cursor:pointer;}

  .membox{border-top:1px dashed var(--line); padding-top:10px;}
  .memrow{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px;}
  .mini{
    width:100%; min-width:0; font:600 9.5px 'IBM Plex Mono',monospace; letter-spacing:.06em;
    color:var(--ink); background:#201a12; border:1px solid var(--line); border-radius:6px;
    padding:7px 2px; cursor:pointer; transition:all .12s ease; white-space:nowrap;
  }
  .mini:hover{border-color:#71603c; transform:translateY(-1px);}
  .mini.filled{color:var(--amber); border-color:#5c4a26;}

  .blurb{margin:0; font-size:11px; line-height:1.5; color:#a5977c; min-height:48px;
         border-left:2px solid var(--c, var(--amber)); padding:2px 0 2px 10px; transition:border-color .3s;}
  section#stage{flex:1; display:flex; flex-direction:column; min-width:0;}
  .bezel{
    flex:1; min-height:0; display:flex; padding:12px; border-radius:12px;
    background:#0c0a07; border:1px solid #3a3122;
    box-shadow:inset 0 0 0 1px #000, inset 0 0 44px rgba(0,0,0,.6), 0 14px 34px -20px #000;
    transition:box-shadow .4s ease;
  }
  .bezel:hover{box-shadow:inset 0 0 0 1px #000, inset 0 0 44px rgba(0,0,0,.6),
               0 14px 34px -20px #000, 0 0 46px -26px rgba(242,178,62,.5);}
  .screen{flex:1; min-height:0; display:flex; align-items:center; justify-content:center;}
  .frame{position:relative; line-height:0; border-radius:6px;}
  #sim{display:block; image-rendering:auto; border-radius:5px; cursor:none; touch-action:none;
       box-shadow:0 0 0 1px #2a2318, 0 0 70px -24px rgba(242,178,62,.28); background:#0d0b08;}
  #lineLayer{position:absolute; inset:0; width:100%; height:100%; pointer-events:none;
    image-rendering:auto; border-radius:5px;}
  #glow{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; border-radius:5px;
        filter:blur(6px) brightness(1.25); mix-blend-mode:screen; opacity:.9;}
  #overlay{position:absolute; inset:0; width:100%; height:100%; pointer-events:none;
           image-rendering:auto; border-radius:5px;}
  .scanlines{position:absolute; inset:0; pointer-events:none; border-radius:5px; opacity:.3;
    background:repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);}
  .vignette{position:absolute; inset:0; pointer-events:none; border-radius:5px;
    box-shadow:inset 0 0 52px rgba(0,0,0,.55);}
  #ring{position:absolute; display:none; pointer-events:none; border-radius:50%;
    border:1.5px solid currentColor; transform:translate(-50%,-50%); color:#f2b23e;
    box-shadow:0 0 8px rgba(0,0,0,.55);}
  #ring::after{content:''; position:absolute; left:50%; top:50%; width:2px; height:2px;
    background:currentColor; transform:translate(-50%,-50%);}
  #flash{position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; border-radius:5px;}
  #flash.go{animation:flashA .35s ease-out;}
  @keyframes flashA{0%{opacity:.8}100%{opacity:0}}
  .credit{height:30px; flex:none; display:flex; justify-content:center; align-items:center; margin-top:2px;}
  .credit a{display:block; height:28px; color:var(--dim); opacity:.72; transition:opacity .15s ease, transform .15s ease;}
  .credit a:hover{opacity:1; transform:translateY(-1px);}
  .credit svg{display:block; width:210px; height:28px;}
  .credit .tg-mark{fill:var(--amber);}
  .credit .tg-node{fill:var(--blue);}
  .credit .tg-small{fill:var(--faint); font:500 6px 'IBM Plex Mono',monospace; letter-spacing:1.8px;}
  .credit .tg-name{fill:var(--ink); font:700 10px 'Silkscreen',monospace; letter-spacing:.7px;}

  #toast{position:absolute; left:50%; bottom:26px; transform:translateX(-50%) translateY(10px);
    z-index:50; pointer-events:none; opacity:0; transition:opacity .5s ease, transform .5s ease;
    background:rgba(36,29,19,.94); border:1px solid var(--line); border-radius:8px;
    padding:10px 18px; font-size:11px; letter-spacing:.1em; color:var(--ink);
    box-shadow:0 14px 34px -14px #000;}
  #toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
  #toast b{color:var(--amber); font-weight:600;}

  @container (max-width:880px){
    :scope{overflow:hidden;}
    main{
      display:grid;
      grid-template-columns:minmax(220px,32%) minmax(0,1fr);
      grid-template-rows:minmax(0,1fr);
      gap:8px;
    }
    section#stage{order:2; min-height:0;}
    aside.rack{
      order:1; width:auto; min-height:0; overflow:hidden;
      padding:9px; gap:7px;
    }
    #elements{grid-template-columns:repeat(3,minmax(0,1fr));}
    .rack-toggle{
      display:grid;
      left:max(210px,calc(32% - 10px));
      top:8px;
      width:22px;
      height:26px;
    }
    .chip{gap:2px; padding:3px;}
    .chip canvas{height:16px;}
    .chip .nm,.chip kbd{font-size:7px;}
    .modes{gap:5px;}
    .mbtn{padding:5px 3px; font-size:8.5px;}
    .brushbox,.membox{padding-top:7px;}
    .brow{margin-bottom:4px;}
    .blurb,.credit{display:none;}
    .transport{margin-left:0;}
  }
}

@media (max-width:760px){
  #sandleraApp{min-height:0;}
}

@container (max-width:540px){
  #sandleraApp{
    padding:10px;
    gap:8px;
  }
  #sandleraApp main{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:minmax(170px,34cqh) minmax(0,1fr);
  }
  #sandleraApp section#stage{order:1;}
  #sandleraApp aside.rack{order:2;}
  #sandleraApp .rack-toggle{
    left:auto;
    right:8px;
    top:max(178px,calc(34cqh + 8px));
  }
  #sandleraApp header.top{gap:10px;}
  #sandleraApp .tag{font-size:8px; letter-spacing:.16em;}
  #sandleraApp .transport{gap:5px; padding-right:0;}
  #sandleraApp .btn{padding:7px 8px; font-size:9px;}
  #sandleraApp .icon-btn{width:32px; height:30px;}
  #sandleraApp #elements{grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px;}
  #sandleraApp .chip{gap:1px; padding:2px;}
  #sandleraApp .chip canvas{height:13px;}
  #sandleraApp .chip .nm,#sandleraApp .chip kbd{font-size:6.5px;}
  #sandleraApp .modes{gap:4px;}
  #sandleraApp .mbtn{font-size:7.5px; padding:4px 2px;}
  #sandleraApp .mini{font-size:8px; padding:5px 2px;}
}

#sandleraApp:fullscreen,
#sandleraApp:-webkit-full-screen{
  position:fixed!important;inset:0!important;
  display:grid!important;grid-template-rows:auto minmax(0,1fr);
  width:100vw!important;height:100vh!important;height:100dvh!important;
  min-height:100vh!important;min-height:100dvh!important;max-width:none!important;max-height:none!important;
  margin:0!important;border-radius:0!important;
}
#sandleraApp:fullscreen > main,
#sandleraApp:-webkit-full-screen > main{
  width:100%;height:100%;min-height:0;
}
#sandleraApp:fullscreen > main > section#stage,
#sandleraApp:-webkit-full-screen > main > section#stage,
#sandleraApp:fullscreen > main > aside.rack,
#sandleraApp:-webkit-full-screen > main > aside.rack{
  height:100%;min-height:0;
}