/* NEW RELEASE player: carried over from the design canvas */
:root{
  --blue:#0101CD; --yellow:#FDCB04; --black:#000000;
  --pink:#FF279A; --green:#29DB00; --orange:#CE5F00; --orange-text:#FF8A3D; --red:#FF1E1E;
  --vcr:'VT323','Courier New',monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#00009A;overscroll-behavior:none}
body{font-family:var(--vcr);color:#ffffff;-webkit-text-size-adjust:100%;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible{outline:3px solid #ffffff;outline-offset:3px}
[hidden]{display:none !important}
.nr-sr{position:absolute;width:1px;height:1px;margin:0;padding:0;opacity:0;overflow:hidden;clip:rect(0 0 0 0);border:0}

/* the case */
.nr-case{position:relative;overflow:hidden;width:100%;max-width:430px;height:100vh;height:100dvh;max-height:960px;margin:0 auto;background:var(--blue);
  padding:clamp(44px,7dvh,58px) 20px calc(clamp(14px,3dvh,24px) + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:clamp(10px,2dvh,16px)}
@media (min-width:431px){.nr-case{box-shadow:0 0 0 3px #000,0 20px 60px rgba(0,0,0,.5)} body{display:flex;align-items:center}}
.nr-cap{position:absolute;top:0;left:0;right:0;height:20px;z-index:3;background:repeating-linear-gradient(90deg,#000 0 3px,#202020 3px 5px)}

/* REC key */
.nr-rec-wrap{position:absolute;top:14px;right:0;width:165px;height:97px;z-index:2;pointer-events:none;transition:translate 80ms,filter 80ms;filter:drop-shadow(0 6px 0 #000)}
.nr-rec-wrap:active,.nr-rec-wrap.nr-latched{translate:0 4px;filter:drop-shadow(0 2px 0 #000)}
.nr-rec{position:absolute;inset:0;pointer-events:auto;border:0;padding:0;background:#000;clip-path:polygon(0 0,100% 0,100% 100%);cursor:pointer;touch-action:manipulation}
.nr-rec-face{position:absolute;inset:0;background-color:var(--red);background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.3) 0 1.5px,transparent 1.5px 5px);clip-path:polygon(21.2px 9px,162px 9px,162px 92px);transition:background-color 80ms}
.nr-rec-shine{position:absolute;inset:0;background:rgba(255,255,255,.45);clip-path:polygon(21.2px 9px,162px 9px,162px 12px,26.3px 12px)}
.nr-rec:focus-visible .nr-rec-face{background-color:#FF7A7A}
.nr-rec:active .nr-rec-face{background-color:#C8101A}
.nr-latched .nr-rec-face{background-color:#D8141C}

/* sticker */
/* stuck on, half over the top edge of the case; each sticker sits at its own angle */
.nr-sticker{position:absolute;top:-8px;left:calc(50% - 75px);width:80px;height:80px;z-index:4;border:0;padding:0;background:transparent;cursor:pointer;touch-action:manipulation;transform:rotate(var(--tilt,9deg));transition:transform 160ms;filter:drop-shadow(0 1px 0 rgba(0,0,0,.45))}
.nr-sticker:active{transform:rotate(var(--tilt,9deg)) scale(.92)}
.nr-sticker svg{display:block}
.nr-sticker:focus-visible{outline:3px solid #fff;outline-offset:2px;border-radius:50%}

/* header */
.nr-header{position:relative;flex:0 0 48px;height:48px;min-height:0;display:flex;align-items:center}
.nr-wordmark{margin:0;font-family:Anton,Impact,'Arial Narrow',sans-serif;font-weight:400;font-size:34px;line-height:1;letter-spacing:.5px;color:var(--yellow);text-transform:uppercase;width:106px;position:relative;top:-12px;
  text-shadow:-3px -3px 0 #000,3px -3px 0 #000,-3px 3px 0 #000,3px 3px 0 #000,0 3px 0 #000,0 -3px 0 #000,3px 0 0 #000,-3px 0 0 #000,5px 5px 0 #000}

/* bezel + screen */
.nr-bezel{position:relative;flex:1 1 auto;min-height:0;background:var(--yellow);padding:4px;border:3px solid #000;border-radius:12px;display:flex;flex-direction:column;gap:4px}
.nr-screen{position:relative;flex:1 1 auto;min-height:180px;border:4px solid #000;border-radius:10px;background:#000;overflow:hidden}
.nr-swipe{position:absolute;inset:0;overflow:hidden;touch-action:pan-y;cursor:grab}
.nr-jit{width:100%;height:100%}
.nr-track{display:flex;width:100%;height:100%;will-change:transform}
.nr-slide{flex:0 0 100%;height:100%;position:relative;overflow:hidden;background:#000;display:flex;align-items:center;justify-content:center}
.nr-slide.is-note{background:#0000AA}
.nr-pic{position:relative;width:100%;aspect-ratio:4/3;max-height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center}
.nr-pic img,.nr-pic video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.nr-pic video{background:#000}
.nr-card{position:relative;max-width:82%;border:3px solid #fff;background:#000;padding:12px 16px;font-size:22px;line-height:1.05;letter-spacing:1px;color:#fff;text-align:center;text-transform:uppercase;overflow-wrap:anywhere}
.nr-notewin{position:absolute;left:18px;right:18px;top:52px;bottom:50px;overflow:hidden;container-type:size;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%)}
.nr-notetext{padding:14px 0;font-size:26px;line-height:1.08;letter-spacing:.3px;color:#fff;text-shadow:2px 2px 0 #000;white-space:pre-wrap;overflow-wrap:break-word;text-align:left;will-change:transform}

/* effects */
@keyframes nrBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
.nr-blink{animation:nrBlink 1s steps(1) infinite}
@keyframes nrRoll{0%{transform:translateY(-30px)}100%{transform:translateY(520px)}}
.nr-roll{position:absolute;left:0;right:0;top:0;height:18px;pointer-events:none;background:rgba(255,255,255,.06);animation:nrRoll 6s linear infinite}
.nr-scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px)}
@keyframes nrNoise{0%{transform:translate(0,0)}25%{transform:translate(-12%,7%)}50%{transform:translate(9%,-11%)}75%{transform:translate(-6%,-4%)}100%{transform:translate(4%,10%)}}
.nr-noise{position:absolute;left:-164px;top:-250px;pointer-events:none;opacity:.09;animation:nrNoise .32s steps(1) infinite}
@keyframes nrTear{0%{transform:translateY(-40px) skewX(0)}50%{transform:translateY(220px) skewX(-8deg)}100%{transform:translateY(520px) skewX(0)}}
.nr-tear{position:absolute;left:-10px;right:-10px;top:0;height:6px;pointer-events:none;opacity:0;mix-blend-mode:screen;animation:nrTear 3.4s linear infinite;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.75) 0 2px,rgba(255,255,255,0) 2px 6px,rgba(255,255,255,.35) 6px 9px,rgba(255,255,255,0) 9px 17px)}
.nr-tear2{position:absolute;left:-10px;right:-10px;top:0;height:5px;pointer-events:none;opacity:0;mix-blend-mode:screen;animation:nrTear 5.1s linear infinite;animation-delay:-2s;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.6) 0 4px,rgba(255,255,255,0) 4px 11px)}
@keyframes nrJit1{0%,100%{transform:translateX(0)}25%{transform:translateX(1px)}50%{transform:translateX(-1px)}75%{transform:translateX(.5px)}}
@keyframes nrJit2{0%,100%{transform:translateX(0)}20%{transform:translateX(3px)}45%{transform:translateX(-2px)}70%{transform:translateX(1px)}85%{transform:translateX(-3px)}}
@keyframes nrJit3{0%,100%{transform:translateX(0) skewX(0)}20%{transform:translateX(6px) skewX(-2deg)}45%{transform:translateX(-4px)}70%{transform:translateX(2px) skewX(1deg)}85%{transform:translateX(-6px)}}
.nr-jit1{animation:nrJit1 .45s steps(1) infinite}
.nr-jit2{animation:nrJit2 .35s steps(1) infinite}
.nr-jit3{animation:nrJit3 .25s steps(1) infinite}

/* OSD */
.nr-osd{position:absolute;left:14px;right:14px;display:flex;justify-content:space-between;gap:10px;pointer-events:none;font-size:24px;line-height:1;color:#fff;text-shadow:2px 2px 0 #000;z-index:3}
.nr-osd-top{top:18px}
.nr-osd-bot{bottom:18px}
.nr-ell{max-width:48%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-transform:uppercase}
.nr-right{text-align:right}

/* record screen */
.nr-recscreen{position:absolute;inset:0;z-index:2;background:#050505;padding:52px 16px 50px;display:flex;align-items:center;justify-content:center}
.nr-panel{display:none;width:100%;height:100%;align-items:center;justify-content:center}
.nr-panel.on{display:flex}
.nr-choose{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.nr-choice{height:112px;border:2px solid;border-radius:6px;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:22px;line-height:1;padding:0}
.nr-c-audio{border-color:var(--pink);color:var(--pink)}
.nr-c-note{border-color:var(--orange);color:var(--orange-text)}
.nr-c-upload{border-color:var(--green);color:var(--green)}
.nr-choice:active{background:rgba(255,255,255,.08)}
.nr-vu{display:flex;align-items:flex-end;gap:6px;height:120px}
.nr-vu i{display:block;width:12px;height:100%;background:rgba(255,39,154,.55);transform-origin:50% 100%;transform:scaleY(.06);transition:transform 60ms linear}
.nr-vu.live i{background:var(--pink)}
.nr-note{font:inherit;font-size:24px;line-height:1.15;color:#fff;background:transparent;border:0;outline:none;resize:none;width:100%;height:100%;padding:0;-webkit-user-select:text;user-select:text}
.nr-note::placeholder,.nr-field::placeholder{color:rgba(255,255,255,.45)}
.nr-pick{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 22px;border:2px dashed rgba(255,255,255,.6);font-size:22px;line-height:1.1;text-align:center;color:#fff;cursor:pointer}
.nr-pick:focus-within{outline:3px solid #fff;outline-offset:3px}
.nr-form{width:100%;display:flex;flex-direction:column;gap:12px}
.nr-label{display:flex;flex-direction:column;gap:2px;font-size:18px;line-height:1;color:var(--yellow)}
.nr-field{font:inherit;font-size:24px;line-height:1.1;color:#fff;background:transparent;border:0;border-bottom:2px solid rgba(255,255,255,.7);border-radius:0;padding:4px 0;width:100%;outline:none;-webkit-user-select:text;user-select:text}
.nr-field:focus{border-bottom-color:var(--yellow)}
.nr-hint{font-size:16px;line-height:1;color:rgba(255,255,255,.6)}
.nr-hint.err{color:#FF7A7A}
.nr-msg{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.nr-big{font-size:40px;line-height:1;color:var(--yellow);text-align:center}
.nr-small{font-size:20px;line-height:1;color:#fff;text-align:center}

/* tracking strip */
.nr-trk{position:relative;flex:0 0 18px;z-index:2}
.nr-trk:focus-within{outline:3px solid #fff;outline-offset:2px;border-radius:6px}
.nr-trk-hit{position:absolute;top:-8px;bottom:-7px;left:0;right:0;touch-action:none;cursor:ew-resize;display:flex;align-items:center}
.nr-trk-bar{position:relative;width:100%;height:18px;border:2px solid #000;border-radius:3px;background:#0b0b0b;overflow:hidden}
.nr-trk-tex{position:absolute;top:0;bottom:0;left:0;width:calc(100% + 64px);
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 2px,transparent 2px 30px),repeating-linear-gradient(90deg,rgba(255,255,255,.28) 0 2px,transparent 2px 6px)}

/* channel keys */
.nr-side{position:absolute;top:50%;width:40px;height:110px;margin-top:-55px;z-index:2;border:0;padding:0;background:transparent;cursor:pointer;touch-action:manipulation}
.nr-side-l{left:-23px}
.nr-side-r{right:-23px}
.nr-side:disabled{cursor:default}
.nr-side:focus-visible{outline:none}
.nr-side:focus-visible .nr-side-cap{outline:3px solid #fff;outline-offset:2px}
.nr-side-cap{position:absolute;top:10px;width:13px;height:90px;border:2.5px solid #000;background-color:#2e2e2e;background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.7) 0 2px,transparent 2px 5px);transition:transform 80ms,box-shadow 80ms}
.nr-side-l .nr-side-cap{left:0;border-left:0;border-radius:0 7px 7px 0;box-shadow:4px 0 0 #000,inset 0 2px 0 rgba(255,255,255,.3),inset -2px 0 0 rgba(255,255,255,.12)}
.nr-side-r .nr-side-cap{right:0;border-right:0;border-radius:7px 0 0 7px;box-shadow:-4px 0 0 #000,inset 0 2px 0 rgba(255,255,255,.3),inset 2px 0 0 rgba(255,255,255,.12)}
.nr-side-l:not(:disabled):active .nr-side-cap{transform:translateX(-3px);box-shadow:1px 0 0 #000,inset 0 3px 5px rgba(0,0,0,.5)}
.nr-side-r:not(:disabled):active .nr-side-cap{transform:translateX(3px);box-shadow:-1px 0 0 #000,inset 0 3px 5px rgba(0,0,0,.5)}

/* tuning band */
.nr-wheel{position:relative;flex:0 0 clamp(96px,16dvh,136px);display:flex;flex-direction:column}
.nr-wheel:focus-within{outline:3px solid #fff;outline-offset:3px;border-radius:12px}
.nr-plate{position:relative;flex:1 1 auto;border-radius:10px;border:3px solid #000;background:var(--pink);overflow:hidden;transition:background-color 200ms}
.nr-plate-hit{position:absolute;inset:0;touch-action:none;cursor:grab}
.nr-plate-hit.held{cursor:grabbing}
.nr-plate-tex{position:absolute;top:0;bottom:0;left:0;width:calc(100% + 64px)}
.nr-ridges{position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.6) 0 2px,transparent 2px 30px),repeating-linear-gradient(90deg,rgba(0,0,0,.4) 0 2px,transparent 2px 6px)}
@keyframes nrRun{from{transform:translateX(0)}to{transform:translateX(-30px)}}
.nr-run{animation:nrRun 2s linear infinite}

/* transport keys */
.nr-transport{flex:0 0 clamp(76px,12dvh,104px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding-bottom:6px}
/* case-blue plastic (a shade deeper than the case) with yellow icons, so they don't pull focus from the screen and tuning band */
.nr-key{border:3px solid #000;border-radius:12px;background-color:#00009A;background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.09) 0 1.5px,transparent 1.5px 5px);
  box-shadow:0 6px 0 #000,inset 0 3px 0 rgba(255,255,255,.28),inset 0 -5px 0 rgba(0,0,0,.25);transition:transform 80ms,box-shadow 80ms;color:var(--yellow);display:flex;align-items:center;justify-content:center;padding:0;touch-action:manipulation}
.nr-key.down{background-color:#000080;box-shadow:0 2px 0 #000,inset 0 4px 8px rgba(0,0,0,.45);transform:translateY(4px)}
.nr-key:disabled{opacity:.45;cursor:default}
.nr-key svg{width:clamp(40px,7dvh,56px);height:clamp(40px,7dvh,56px)}

/* the shared media element waits here (off screen) while audio plays */
.nr-park{position:absolute;width:1px;height:1px;left:-10px;top:-10px;overflow:hidden;opacity:0;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .nr-roll,.nr-noise,.nr-tear,.nr-tear2,.nr-run,.nr-jit1,.nr-jit2,.nr-jit3{animation:none}
  .nr-blink{animation:none}
}