{"roots":["39:791"],"nodeById":{"39:791":{"type":"WEBPAGE","id":"39:791","name":"/","absoluteBoundingBox":{"x":0.0,"y":2.27373675443232e-13,"width":2711.0,"height":834.0},"isolatedAbsoluteRenderBounds":{"x":0.0,"y":2.27373675443232e-13,"width":2711.0,"height":834.0},"relativeTransform":[[1.0,0.0,0.0],[0.0,1.0,2.27373675443232e-13]],"size":{"x":2711.0,"y":834.0},"fills":[{"opacity":0.0470588244497776,"blendMode":"NORMAL","type":"SOLID","color":{"r":1.0,"g":1.0,"b":1.0,"a":1.0},"visible":true}],"strokeAlign":"INSIDE","strokes":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"children":["39:792","39:836","39:861"]},"39:861":{"type":"FRAME","id":"39:861","name":"Mobile","absoluteBoundingBox":{"x":2272.0,"y":100.0,"width":375.0,"height":670.0},"isolatedAbsoluteRenderBounds":{"x":2272.0,"y":100.0,"width":375.0,"height":670.0},"relativeTransform":[[1.0,0.0,2272.0],[0.0,1.0,100.0]],"size":{"x":375.0,"y":670.0},"fills":[{"blendMode":"NORMAL","type":"GRADIENT_RADIAL","transform":[[-6.68296885459475e-17,0.5,0.5],[-0.5,3.06161713146292e-17,0.75]],"gradientStops":[{"color":{"r":0.358411818742752,"g":0.35686719417572,"b":0.425987839698792,"a":1.0},"position":0.0},{"color":{"r":0.201499506831169,"g":0.201499506831169,"b":0.269381016492844,"a":1.0},"position":1.0}],"visible":true,"opacity":1.0}],"strokeAlign":"INSIDE","strokes":[],"effects":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"clipsContent":true,"overflowDirection":"VERTICAL_SCROLLING","layoutMode":"VERTICAL","itemSpacing":8.0,"counterAxisAlignItems":"CENTER","primaryAxisAlignItems":"SPACE_BETWEEN","primaryAxisSizingMode":"FIXED","counterAxisSizingMode":"FIXED","isBreakpointFrame":true,"children":["39:862","42:950","39:872"]},"39:872":{"type":"FRAME","id":"39:872","name":"Frame 2147236346","absoluteBoundingBox":{"x":2272.0,"y":706.0,"width":375.0,"height":64.0},"isolatedAbsoluteRenderBounds":{"x":2272.0,"y":706.0,"width":375.0,"height":64.0},"relativeTransform":[[1.0,0.0,0.0],[0.0,1.0,606.0]],"size":{"x":375.0,"y":64.0},"fills":[],"opacity":0.75,"strokeAlign":"INSIDE","layoutAlign":"STRETCH","strokes":[],"effects":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"paddingTop":24.0,"paddingRight":24.0,"paddingBottom":24.0,"paddingLeft":24.0,"layoutMode":"HORIZONTAL","itemSpacing":199.0,"counterAxisAlignItems":"CENTER","primaryAxisSizingMode":"FIXED","children":["39:873"]},"42:950":{"type":"FRAME","id":"42:950","name":"Player","absoluteBoundingBox":{"x":2272.0,"y":188.0,"width":375.0,"height":510.0},"isolatedAbsoluteRenderBounds":{"x":2272.0,"y":188.0,"width":375.0,"height":510.0},"relativeTransform":[[1.0,0.0,0.0],[0.0,1.0,88.0]],"size":{"x":375.0,"y":510.0},"fills":[],"strokeAlign":"INSIDE","layoutAlign":"STRETCH","strokes":[],"effects":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"layoutMode":"VERTICAL","itemSpacing":8.0,"counterAxisAlignItems":"CENTER","primaryAxisAlignItems":"CENTER","counterAxisSizingMode":"FIXED","children":["42:951"]},"39:862":{"type":"FRAME","id":"39:862","name":"Frame 2147236341","absoluteBoundingBox":{"x":2272.0,"y":100.0,"width":375.0,"height":80.0},"isolatedAbsoluteRenderBounds":{"x":2272.0,"y":100.0,"width":375.0,"height":80.0},"relativeTransform":[[1.0,0.0,0.0],[0.0,1.0,0.0]],"size":{"x":375.0,"y":80.0},"fills":[],"strokeAlign":"INSIDE","layoutAlign":"STRETCH","strokes":[],"effects":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"paddingTop":24.0,"paddingRight":24.0,"paddingBottom":24.0,"paddingLeft":24.0,"layoutMode":"HORIZONTAL","itemSpacing":199.0,"counterAxisAlignItems":"CENTER","primaryAxisAlignItems":"SPACE_BETWEEN","primaryAxisSizingMode":"FIXED","children":["39:863","62:3123"]},"62:3123":{"type":"FRAME","id":"62:3123","name":"Menu","absoluteBoundingBox":{"x":2526.0,"y":124.0,"width":97.0,"height":32.0},"isolatedAbsoluteRenderBounds":{"x":2526.0,"y":124.0,"width":97.0,"height":32.0},"relativeTransform":[[1.0,0.0,254.0],[0.0,1.0,24.0]],"size":{"x":97.0,"y":32.0},"fills":[],"strokeAlign":"INSIDE","strokes":[],"effects":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"layoutMode":"HORIZONTAL","itemSpacing":1.0,"counterAxisAlignItems":"CENTER","children":["62:3124","62:3126"]},"62:3133":{"type":"FRAME","id":"62:3133","name":"Menu","absoluteBoundingBox":{"x":2087.0,"y":124.0,"width":97.0,"height":32.0},"isolatedAbsoluteRenderBounds":{"x":2087.0,"y":124.0,"width":97.0,"height":32.0},"relativeTransform":[[1.0,0.0,679.0],[0.0,1.0,24.0]],"size":{"x":97.0,"y":32.0},"fills":[],"strokeAlign":"INSIDE","strokes":[],"effects":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"layoutMode":"HORIZONTAL","itemSpacing":1.0,"counterAxisAlignItems":"CENTER","children":["62:3134","62:3136"]},"39:847":{"type":"FRAME","id":"39:847","name":"Frame 2147236346","absoluteBoundingBox":{"x":1408.0,"y":706.0,"width":800.0,"height":64.0},"isolatedAbsoluteRenderBounds":{"x":1408.0,"y":706.0,"width":800.0,"height":64.0},"relativeTransform":[[1.0,0.0,0.0],[0.0,1.0,606.0]],"size":{"x":800.0,"y":64.0},"fills":[],"opacity":0.75,"strokeAlign":"INSIDE","layoutAlign":"STRETCH","strokes":[],"effects":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"paddingTop":24.0,"paddingRight":24.0,"paddingBottom":24.0,"paddingLeft":24.0,"layoutMode":"HORIZONTAL","itemSpacing":199.0,"counterAxisAlignItems":"CENTER","primaryAxisSizingMode":"FIXED","children":["39:848"]},"62:3129":{"type":"SVG","id":"62:3129","name":"Player Button","absoluteBoundingBox":{"x":1223.0,"y":124.0,"width":48.0,"height":32.0},"isolatedAbsoluteRenderBounds":{"x":1223.0,"y":124.0,"width":48.0,"height":32.0},"relativeTransform":[[1.0,0.0,0.0],[0.0,1.0,0.0]],"size":{"x":48.0,"y":32.0},"fills":[{"opacity":0.75,"blendMode":"NORMAL","type":"SOLID","color":{"r":0.133333340287209,"g":0.133333340287209,"b":0.133333340287209,"a":1.0},"visible":true}],"strokeAlign":"INSIDE","strokes":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"hash":"0a24a132e07e2ff94ca6523ec44f14ca60cd51ac"},"39:848":{"type":"TEXT","id":"39:848","name":"©2026","absoluteBoundingBox":{"x":1432.0,"y":730.0,"width":46.0,"height":16.0},"isolatedAbsoluteRenderBounds":{"x":1432.47998046875,"y":733.179992675781,"width":44.5052490234375,"height":9.0},"relativeTransform":[[1.0,0.0,24.0],[0.0,1.0,24.0]],"size":{"x":46.0,"y":16.0},"fills":[{"blendMode":"NORMAL","type":"SOLID","color":{"r":1.0,"g":1.0,"b":1.0,"a":1.0},"visible":true,"opacity":1.0}],"strokeAlign":"OUTSIDE","strokes":[],"effects":[],"accessibleHTMLTag":"MAIN","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"characterStyleOverrides":[],"characters":"©2026","lineIndentations":[0],"lineTypes":["NONE"],"listStartOffsets":[],"lineStyleOverrides":[0],"lineTextDirections":null,"textAutoResize":"WIDTH_AND_HEIGHT","style":{"fontFamily":"Instrument Serif","fontPostScriptName":"InstrumentSerif-Regular","fontStyle":"Regular","textAutoResize":"WIDTH_AND_HEIGHT","fontVariantPosition":"NORMAL","fontSize":12.0,"textAlignHorizontal":"LEFT","textAlignVertical":"TOP","letterSpacing":3.84,"letterSpacingValue":32.0,"letterSpacingUnit":"PERCENT","lineHeightPx":15.5999994277954,"lineHeightPercent":100.0,"lineHeightUnit":"INTRINSIC_%","paragraphSpacing":0,"paragraphIndent":0,"listSpacing":0,"italic":false,"textCase":"ORIGINAL","textDecoration":"NONE","textDecorationSkipInk":false,"textDecorationStyle":"solid","textTruncation":"DISABLED","lineHeightPercentFontSize":100},"styleOverrideTable":{}},"39:837":{"type":"FRAME","id":"39:837","name":"Frame 2147236341","absoluteBoundingBox":{"x":1408.0,"y":100.0,"width":800.0,"height":80.0},"isolatedAbsoluteRenderBounds":{"x":1408.0,"y":100.0,"width":800.0,"height":80.0},"relativeTransform":[[1.0,0.0,0.0],[0.0,1.0,0.0]],"size":{"x":800.0,"y":80.0},"fills":[],"strokeAlign":"INSIDE","layoutAlign":"STRETCH","strokes":[],"effects":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"paddingTop":24.0,"paddingRight":24.0,"paddingBottom":24.0,"paddingLeft":24.0,"layoutMode":"HORIZONTAL","itemSpacing":199.0,"counterAxisAlignItems":"CENTER","primaryAxisAlignItems":"SPACE_BETWEEN","primaryAxisSizingMode":"FIXED","children":["39:838","62:3133"]},"42:945":{"type":"FRAME","id":"42:945","name":"Player","absoluteBoundingBox":{"x":1408.0,"y":188.0,"width":800.0,"height":510.0},"isolatedAbsoluteRenderBounds":{"x":1408.0,"y":188.0,"width":800.0,"height":510.0},"relativeTransform":[[1.0,0.0,0.0],[0.0,1.0,88.0]],"size":{"x":800.0,"y":510.0},"fills":[],"strokeAlign":"INSIDE","layoutAlign":"STRETCH","strokes":[],"effects":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"layoutMode":"VERTICAL","itemSpacing":8.0,"counterAxisAlignItems":"CENTER","primaryAxisAlignItems":"CENTER","counterAxisSizingMode":"FIXED","children":["42:946"]},"42:946":{"type":"WIDGET","id":"42:946","name":"Embed 1","absoluteBoundingBox":{"x":1648.0,"y":188.0,"width":320.0,"height":510.0},"targetAspectRatio":{"x":320.0,"y":510.0},"isolatedAbsoluteRenderBounds":{"x":1648.0,"y":188.0,"width":320.0,"height":510.0},"relativeTransform":[[1.0,0.0,240.0],[0.0,1.0,0.0]],"size":{"x":320.0,"y":510.0},"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"widgetType":"GENERIC","syncedState":{"embedAllowFullscreen":"false","embedCodeType":"html","embedIframeHtml":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Player</title>\n\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n  <link href=\"https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap\" rel=\"stylesheet\">\n  <style>\n    html, body {\n      width: 100%;\n    }\n\n    body {\n      font-family: 'Instrument Serif', Georgia, serif;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    /* ── OUTER SHELL ─────────────────────────────── */\n    .player-shell {\n      width: 320px;\n      display: flex;\n      flex-direction: column;\n      gap: 24px;\n      padding: 24px;\n      background: linear-gradient(to bottom, #f4f4f4 0%, #dddddd 100%);\n      border: 0.5px solid white;\n      border-radius: 16px;\n      box-shadow:\n        inset -4px -4px 8px 0px rgba(255,255,255,1),\n        inset 4px 4px 8px 0px rgba(0,0,0,0.16);\n      position: relative;\n    }\n\n    /* ── DEVICE DISPLAY ──────────────────────────── */\n    .display {\n      width: 100%;\n      background: linear-gradient(160deg, #e1dfd8 0%, #d4d7ce 55%, #c4cacd 100%);\n      border-radius: 8px;\n      overflow: hidden;\n      position: relative;\n      flex-shrink: 0;\n    }\n    .display::after {\n      content: '';\n      position: absolute;\n      inset: -0.5px;\n      border-radius: inherit;\n      box-shadow: inset 1px 1px 4px 0px rgba(0,0,0,0.25);\n      pointer-events: none;\n      z-index: 2;\n    }\n\n    /* ── NOW PLAYING DISPLAY ─────────────────────── */\n    .np-display {\n      padding: 8px 8px 4px 8px;\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      min-height: 388px;\n    }\n\n    .album-art {\n      width: 100%;\n      aspect-ratio: 1 / 1;\n      border-radius: 4px;\n      box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.32);\n      object-fit: cover;\n      display: block;\n      background: #ccc;\n      flex-shrink: 0;\n    }\n\n    .album-art-placeholder {\n      width: 100%;\n      aspect-ratio: 1 / 1;\n      border-radius: 4px;\n      box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.32);\n      background: linear-gradient(135deg, #d0cec7 0%, #b8bbbe 100%);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n    }\n\n    .playback-ui {\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n      padding: 8px 12px 12px 12px;\n    }\n\n    .track-info {\n      text-align: center;\n      text-shadow: 1px 1px 1px rgba(0,0,0,0.16);\n      white-space: nowrap;\n    }\n\n    .track-title-np {\n      font-size: 20px;\n      color: #222;\n      font-style: normal;\n      line-height: normal;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .track-date-np {\n      font-size: 14px;\n      color: #444;\n      font-style: italic;\n      line-height: normal;\n    }\n\n    .playback-details {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n    }\n\n    .time-bar {\n      background: rgba(34,34,34,0.25);\n      border: 1px solid #222;\n      height: 8px;\n      border-radius: 4px;\n      overflow: hidden;\n      position: relative;\n      cursor: pointer;\n      flex-shrink: 0;\n      box-shadow: 1px 1px 1px rgba(0,0,0,0.16);\n    }\n\n    .scrubber {\n      position: absolute;\n      left: 1px;\n      top: 1px;\n      height: 4px;\n      width: 0%;\n      background: #222;\n      border-radius: 3px;\n      pointer-events: none;\n    }\n\n    .time-row {\n      display: flex;\n      justify-content: space-between;\n      font-size: 12px;\n      color: #222;\n      font-style: normal;\n      line-height: normal;\n      white-space: nowrap;\n      text-shadow: 1px 1px 1px rgba(0,0,0,0.16);\n    }\n\n\n    /* ── PLAYLIST DISPLAY ────────────────────────── */\n    .pl-display {\n      height: 388px;\n      padding: 24px;\n      display: flex;\n      flex-direction: column;\n      gap: 20px;\n    }\n\n    .pl-header {\n      font-size: 20px;\n      color: #222;\n      font-style: normal;\n      line-height: normal;\n      text-align: center;\n      text-shadow: 1px 1px 1px rgba(0,0,0,0.16);\n      white-space: nowrap;\n      flex-shrink: 0;\n    }\n\n    .track-list {\n      flex: 1;\n      overflow-y: auto;\n      display: flex;\n      flex-direction: column;\n      gap: 0;\n    }\n    .track-list::-webkit-scrollbar { width: 3px; }\n    .track-list::-webkit-scrollbar-thumb {\n      background: rgba(34,34,34,0.25);\n      border-radius: 2px;\n    }\n\n    .track-item {\n      display: flex;\n      gap: 8px;\n      align-items: center;\n      cursor: pointer;\n      padding: 8px 4px 4px 4px;\n      border-bottom: 0.5px solid rgba(34,34,34,0.08);\n      transition: background 0.12s;\n      border-radius: 3px;\n    }\n    .track-item:last-child { border-bottom: none; }\n    .track-item:hover { background: rgba(34,34,34,0.05); }\n    .track-item.active .ti-title { color: #111; }\n    .track-item.active { background: rgba(34,34,34,0.06); }\n\n    .ti-info {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n      gap: 1px;\n    }\n\n    .ti-title {\n      font-size: 16px;\n      color: #222;\n      font-style: normal;\n      line-height: normal;\n      text-shadow: 1px 1px 1px rgba(0,0,0,0.16);\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .ti-date {\n      font-size: 12px;\n      color: #444;\n      font-style: italic;\n      line-height: normal;\n      text-shadow: 1px 1px 1px rgba(0,0,0,0.08);\n    }\n\n    .ti-thumb {\n      width: 32px; height: 32px;\n      border-radius: 50%;\n      object-fit: cover;\n      flex-shrink: 0;\n      box-shadow:\n        inset 2px 2px 2px 0px white,\n        inset -2px -2px 2px 0px rgba(0,0,0,0.5);\n      background: #bbb;\n    }\n\n    .ti-thumb-placeholder {\n      width: 32px; height: 32px;\n      border-radius: 50%;\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 13px;\n      color: rgba(255,255,255,0.9);\n      box-shadow:\n        inset 2px 2px 2px 0px white,\n        inset -2px -2px 2px 0px rgba(0,0,0,0.5);\n    }\n\n    /* ── CONTROLS BAR ────────────────────────────── */\n    .controls {\n      display: flex;\n      gap: 16px;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n    }\n\n    .ctrl-btn {\n      width: 48px; height: 48px;\n      border-radius: 32px;\n      border: none;\n      background: transparent;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      cursor: pointer;\n      padding: 0;\n      transition: opacity 0.12s, transform 0.08s;\n      flex-shrink: 0;\n      outline: none;\n    }\n    .ctrl-btn:active { opacity: 0.65; transform: scale(0.95); }\n\n    .hamburger-line {\n      width: 20px;\n      height: 2px;\n      background: #555;\n      border-radius: 1px;\n      border: 0.5px solid rgba(255,255,255,0.8);\n      box-shadow: 0 0 8px rgba(255,255,255,0.7), inset 0 1px 1px rgba(0,0,0,0.2);\n    }\n\n    /* ── SCREEN TRANSITION ───────────────────────── */\n    .screen-stack {\n      position: relative;\n    }\n    .view {\n      transition: opacity 0.1s ease;\n    }\n    .view-enter { opacity: 1; }\n    .view-exit {\n      opacity: 0;\n      pointer-events: none;\n      position: absolute;\n      top: 0; left: 0; right: 0;\n    }\n\n    /* ── RESPONSIVE ──────────────────────────────── */\n    @media (max-width: 360px) {\n      .player-shell { width: 100%; min-width: 280px; }\n    }\n\n    /* ── THUMB GRADIENT COLORS ───────────────────── */\n    .thumb-color-0 { background: linear-gradient(135deg, #e8c4b4 0%, #c4a090 100%); }\n    .thumb-color-1 { background: linear-gradient(135deg, #b4cce8 0%, #90a4c4 100%); }\n    .thumb-color-2 { background: linear-gradient(135deg, #c4e8c4 0%, #90c490 100%); }\n    .thumb-color-3 { background: linear-gradient(135deg, #e8e8b4 0%, #c4c490 100%); }\n    .thumb-color-4 { background: linear-gradient(135deg, #e4b4e8 0%, #c090c4 100%); }\n    .thumb-color-5 { background: linear-gradient(135deg, #b4e8e8 0%, #90c4c4 100%); }\n\n    /* ── PLAYLIST HEADER ROW ──────────────────────── */\n    .pl-header-row {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      flex-shrink: 0;\n    }\n\n    .refresh-pl-btn {\n      background: none;\n      border: none;\n      font-size: 18px;\n      color: #555;\n      cursor: pointer;\n      padding: 0 2px;\n      line-height: 1;\n      opacity: 0.5;\n      transition: opacity 0.15s, transform 0.2s;\n      flex-shrink: 0;\n    }\n    .refresh-pl-btn:hover { opacity: 0.85; }\n    .refresh-pl-btn.spinning { animation: spin 0.6s linear; }\n    @keyframes spin { to { transform: rotate(360deg); } }\n\n    /* ── EMPTY TRACK LIST ─────────────────────────── */\n    .track-list-empty {\n      flex: 1;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      opacity: 0.4;\n      font-size: 13px;\n      font-style: italic;\n      text-align: center;\n      line-height: 1.5;\n      padding: 8px;\n    }\n  </style>\n</head>\n<body>\n\n  <!-- Hidden audio element -->\n  <audio id=\"audio\" preload=\"auto\"></audio>\n\n  <!-- ── PLAYER SHELL ─────────────────────────── -->\n  <div class=\"player-shell\" id=\"player\">\n\n    <!-- SCREEN STACK -->\n    <div class=\"screen-stack\">\n\n      <!-- NOW PLAYING VIEW -->\n      <div class=\"view view-enter\" id=\"view-np\">\n        <div class=\"display\">\n          <div class=\"np-display\">\n\n            <!-- Album Art -->\n            <img id=\"album-art\" src=\"\" alt=\"Album Art\" class=\"album-art\"\n              onerror=\"this.style.display='none';document.getElementById('art-placeholder').style.display='flex'\"\n              onload=\"this.style.display='block';document.getElementById('art-placeholder').style.display='none'\">\n            <div id=\"art-placeholder\" class=\"album-art-placeholder\" style=\"display:none\">\n              <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" opacity=\"0.4\">\n                <circle cx=\"24\" cy=\"24\" r=\"10\" stroke=\"#555\" stroke-width=\"2\" fill=\"none\"/>\n                <circle cx=\"24\" cy=\"24\" r=\"3\" fill=\"#555\"/>\n                <line x1=\"24\" y1=\"14\" x2=\"24\" y2=\"4\" stroke=\"#555\" stroke-width=\"2\"/>\n              </svg>\n            </div>\n\n            <!-- Playback UI -->\n            <div class=\"playback-ui\">\n              <!-- Track Info -->\n              <div class=\"track-info\">\n                <p id=\"np-title\" class=\"track-title-np\">Côte d'Azur</p>\n                <p id=\"np-date\" class=\"track-date-np\">11 FEB 2026</p>\n              </div>\n              <!-- Progress -->\n              <div class=\"playback-details\">\n                <div class=\"time-bar\" id=\"time-bar\">\n                  <div class=\"scrubber\" id=\"scrubber\"></div>\n                </div>\n                <div class=\"time-row\">\n                  <span id=\"time-current\">0:00</span>\n                  <span id=\"time-remaining\">-0:00</span>\n                </div>\n              </div>\n\n            </div>\n\n          </div>\n        </div>\n      </div>\n\n      <!-- PLAYLIST VIEW -->\n      <div class=\"view view-exit\" id=\"view-pl\">\n        <div class=\"display\">\n          <div class=\"pl-display\">\n            <div class=\"pl-header-row\">\n              <p class=\"pl-header\">Playlist</p>\n            </div>\n            <div class=\"track-list\" id=\"track-list\"></div>\n          </div>\n        </div>\n      </div>\n\n    </div><!-- /screen-stack -->\n\n    <!-- CONTROLS -->\n    <div class=\"controls\">\n\n      <!-- Prev -->\n      <button class=\"ctrl-btn\" id=\"btn-prev\" title=\"Previous (←)\">\n        <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <rect x=\"0.25\" y=\"0.25\" width=\"47.5\" height=\"47.5\" rx=\"23.75\" stroke=\"url(#back_border)\" stroke-width=\"0.5\"/>\n          <g filter=\"url(#back_f1)\">\n            <path d=\"M14.0667 23.7L21.4 18.2C22.0592 17.7056 23 18.176 23 19V30C23 30.824 22.0592 31.2944 21.4 30.8L14.0667 25.3C13.5333 24.9 13.5333 24.1 14.0667 23.7Z\" fill=\"#555555\"/>\n            <path d=\"M22.75 19C22.75 18.382 22.0442 18.0296 21.5498 18.4004L14.2168 23.9004C13.8169 24.2004 13.8169 24.7996 14.2168 25.0996L21.5498 30.5996C22.0442 30.9704 22.75 30.618 22.75 30V19Z\" stroke=\"url(#back_s1)\" style=\"mix-blend-mode:soft-light\" stroke-width=\"0.5\"/>\n          </g>\n          <g filter=\"url(#back_f2)\">\n            <path d=\"M24.0667 23.7L31.4 18.2C32.0592 17.7056 33 18.176 33 19V30C33 30.824 32.0592 31.2944 31.4 30.8L24.0667 25.3C23.5333 24.9 23.5333 24.1 24.0667 23.7Z\" fill=\"#555555\"/>\n            <path d=\"M32.75 19C32.75 18.382 32.0442 18.0296 31.5498 18.4004L24.2168 23.9004C23.8169 24.2004 23.8169 24.7996 24.2168 25.0996L31.5498 30.5996C32.0442 30.9704 32.75 30.618 32.75 30V19Z\" stroke=\"url(#back_s2)\" style=\"mix-blend-mode:soft-light\" stroke-width=\"0.5\"/>\n          </g>\n          <defs>\n            <filter id=\"back_f1\" x=\"5.6665\" y=\"9.99817\" width=\"25.3335\" height=\"29.0037\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n              <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset/><feGaussianBlur stdDeviation=\"4\"/><feComposite in2=\"hardAlpha\" operator=\"out\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow\" result=\"shape\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dx=\"1\" dy=\"2\"/><feGaussianBlur stdDeviation=\"0.5\"/><feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0\"/><feBlend mode=\"normal\" in2=\"shape\" result=\"effect2_innerShadow\"/>\n            </filter>\n            <filter id=\"back_f2\" x=\"15.6665\" y=\"9.99817\" width=\"25.3335\" height=\"29.0037\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n              <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset/><feGaussianBlur stdDeviation=\"4\"/><feComposite in2=\"hardAlpha\" operator=\"out\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow2\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow2\" result=\"shape\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dx=\"1\" dy=\"2\"/><feGaussianBlur stdDeviation=\"0.5\"/><feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0\"/><feBlend mode=\"normal\" in2=\"shape\" result=\"effect2_innerShadow2\"/>\n            </filter>\n            <linearGradient id=\"back_border\" x1=\"24\" y1=\"0\" x2=\"24\" y2=\"48\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"white\"/><stop offset=\"1\" stop-color=\"#9B9B9B\"/></linearGradient>\n            <linearGradient id=\"back_s1\" x1=\"18\" y1=\"17\" x2=\"18\" y2=\"32\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"white\"/><stop offset=\"1\" stop-color=\"#C3C3C3\"/></linearGradient>\n            <linearGradient id=\"back_s2\" x1=\"28\" y1=\"17\" x2=\"28\" y2=\"32\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"white\"/><stop offset=\"1\" stop-color=\"#C3C3C3\"/></linearGradient>\n          </defs>\n        </svg>\n      </button>\n\n      <!-- Menu / Playlist -->\n      <button class=\"ctrl-btn\" id=\"btn-menu\" title=\"Playlist (M)\">\n        <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <rect x=\"0.25\" y=\"0.25\" width=\"47.5\" height=\"47.5\" rx=\"23.75\" stroke=\"url(#menu_border)\" stroke-width=\"0.5\"/>\n          <g filter=\"url(#menu_f1)\">\n            <rect x=\"14\" y=\"17\" width=\"20\" height=\"2\" rx=\"1\" fill=\"#555555\"/>\n            <rect x=\"14.25\" y=\"17.25\" width=\"19.5\" height=\"1.5\" rx=\"0.75\" stroke=\"url(#menu_s1)\" style=\"mix-blend-mode:soft-light\" stroke-width=\"0.5\"/>\n          </g>\n          <g filter=\"url(#menu_f2)\">\n            <rect x=\"14\" y=\"23\" width=\"20\" height=\"2\" rx=\"1\" fill=\"#555555\"/>\n            <rect x=\"14.25\" y=\"23.25\" width=\"19.5\" height=\"1.5\" rx=\"0.75\" stroke=\"url(#menu_s2)\" style=\"mix-blend-mode:soft-light\" stroke-width=\"0.5\"/>\n          </g>\n          <g filter=\"url(#menu_f3)\">\n            <rect x=\"14\" y=\"29\" width=\"20\" height=\"2\" rx=\"1\" fill=\"#555555\"/>\n            <rect x=\"14.25\" y=\"29.25\" width=\"19.5\" height=\"1.5\" rx=\"0.75\" stroke=\"url(#menu_s3)\" style=\"mix-blend-mode:soft-light\" stroke-width=\"0.5\"/>\n          </g>\n          <defs>\n            <filter id=\"menu_f1\" x=\"6\" y=\"9\" width=\"36\" height=\"18\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n              <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset/><feGaussianBlur stdDeviation=\"4\"/><feComposite in2=\"hardAlpha\" operator=\"out\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow\" result=\"shape\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dx=\"1\" dy=\"2\"/><feGaussianBlur stdDeviation=\"0.5\"/><feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0\"/><feBlend mode=\"normal\" in2=\"shape\" result=\"effect2_innerShadow\"/>\n            </filter>\n            <filter id=\"menu_f2\" x=\"6\" y=\"15\" width=\"36\" height=\"18\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n              <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset/><feGaussianBlur stdDeviation=\"4\"/><feComposite in2=\"hardAlpha\" operator=\"out\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow2\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow2\" result=\"shape\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dx=\"1\" dy=\"2\"/><feGaussianBlur stdDeviation=\"0.5\"/><feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0\"/><feBlend mode=\"normal\" in2=\"shape\" result=\"effect2_innerShadow2\"/>\n            </filter>\n            <filter id=\"menu_f3\" x=\"6\" y=\"21\" width=\"36\" height=\"18\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n              <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset/><feGaussianBlur stdDeviation=\"4\"/><feComposite in2=\"hardAlpha\" operator=\"out\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow3\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow3\" result=\"shape\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dx=\"1\" dy=\"2\"/><feGaussianBlur stdDeviation=\"0.5\"/><feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0\"/><feBlend mode=\"normal\" in2=\"shape\" result=\"effect2_innerShadow3\"/>\n            </filter>\n            <linearGradient id=\"menu_border\" x1=\"24\" y1=\"0\" x2=\"24\" y2=\"48\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"white\"/><stop offset=\"1\" stop-color=\"#9B9B9B\"/></linearGradient>\n            <linearGradient id=\"menu_s1\" x1=\"24\" y1=\"17\" x2=\"24\" y2=\"19\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"white\"/><stop offset=\"1\" stop-color=\"#C3C3C3\"/></linearGradient>\n            <linearGradient id=\"menu_s2\" x1=\"24\" y1=\"23\" x2=\"24\" y2=\"25\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"white\"/><stop offset=\"1\" stop-color=\"#C3C3C3\"/></linearGradient>\n            <linearGradient id=\"menu_s3\" x1=\"24\" y1=\"29\" x2=\"24\" y2=\"31\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"white\"/><stop offset=\"1\" stop-color=\"#C3C3C3\"/></linearGradient>\n          </defs>\n        </svg>\n      </button>\n\n      <!-- Play / Pause -->\n      <button class=\"ctrl-btn\" id=\"btn-play\" title=\"Play/Pause (Space)\">\n        <!-- PLAY icon (from Play.svg) -->\n        <svg id=\"icon-play\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <rect x=\"0.25\" y=\"0.25\" width=\"47.5\" height=\"47.5\" rx=\"23.75\" stroke=\"url(#play_border)\" stroke-width=\"0.5\"/>\n          <g filter=\"url(#play_f1)\">\n            <path d=\"M32.8014 23.176L19.5665 14.077C18.903 13.6208 18 14.0959 18 14.901V33.099C18 33.9041 18.903 34.3792 19.5665 33.923L32.8014 24.824C33.3794 24.4267 33.3794 23.5733 32.8014 23.176Z\" fill=\"#555555\"/>\n            <path d=\"M18.25 14.9014C18.25 14.2975 18.9272 13.9411 19.4248 14.2832L32.6602 23.3818C33.0934 23.6799 33.0934 24.3201 32.6602 24.6182L19.4248 33.7168C18.9272 34.0589 18.25 33.7025 18.25 33.0986V14.9014Z\" stroke=\"url(#play_s1)\" style=\"mix-blend-mode:soft-light\" stroke-width=\"0.5\"/>\n          </g>\n          <defs>\n            <filter id=\"play_f1\" x=\"10\" y=\"5.89929\" width=\"31.2349\" height=\"36.2014\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n              <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset/><feGaussianBlur stdDeviation=\"4\"/><feComposite in2=\"hardAlpha\" operator=\"out\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow\" result=\"shape\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dx=\"1\" dy=\"2\"/><feGaussianBlur stdDeviation=\"0.5\"/><feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0\"/><feBlend mode=\"normal\" in2=\"shape\" result=\"effect2_innerShadow\"/>\n            </filter>\n            <linearGradient id=\"play_border\" x1=\"24\" y1=\"0\" x2=\"24\" y2=\"48\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"white\"/><stop offset=\"1\" stop-color=\"#9B9B9B\"/></linearGradient>\n            <linearGradient id=\"play_s1\" x1=\"26\" y1=\"13\" x2=\"26\" y2=\"35\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"white\"/><stop offset=\"1\" stop-color=\"#C3C3C3\"/></linearGradient>\n          </defs>\n        </svg>\n        <!-- PAUSE icon (matching style) -->\n        <svg id=\"icon-pause\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"display:none\">\n          <rect x=\"0.25\" y=\"0.25\" width=\"47.5\" height=\"47.5\" rx=\"23.75\" stroke=\"url(#pause_border)\" stroke-width=\"0.5\"/>\n          <g filter=\"url(#pause_f1)\">\n            <rect x=\"15\" y=\"14\" width=\"6\" height=\"20\" rx=\"2.5\" fill=\"#555555\"/>\n            <rect x=\"15.25\" y=\"14.25\" width=\"5.5\" height=\"19.5\" rx=\"2.25\" stroke=\"url(#pause_s1)\" style=\"mix-blend-mode:soft-light\" stroke-width=\"0.5\"/>\n          </g>\n          <g filter=\"url(#pause_f2)\">\n            <rect x=\"27\" y=\"14\" width=\"6\" height=\"20\" rx=\"2.5\" fill=\"#555555\"/>\n            <rect x=\"27.25\" y=\"14.25\" width=\"5.5\" height=\"19.5\" rx=\"2.25\" stroke=\"url(#pause_s2)\" style=\"mix-blend-mode:soft-light\" stroke-width=\"0.5\"/>\n          </g>\n          <defs>\n            <filter id=\"pause_f1\" x=\"7\" y=\"6\" width=\"22\" height=\"36\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n              <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset/><feGaussianBlur stdDeviation=\"4\"/><feComposite in2=\"hardAlpha\" operator=\"out\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow\" result=\"shape\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dx=\"1\" dy=\"2\"/><feGaussianBlur stdDeviation=\"0.5\"/><feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0\"/><feBlend mode=\"normal\" in2=\"shape\" result=\"effect2_innerShadow\"/>\n            </filter>\n            <filter id=\"pause_f2\" x=\"19\" y=\"6\" width=\"22\" height=\"36\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n              <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset/><feGaussianBlur stdDeviation=\"4\"/><feComposite in2=\"hardAlpha\" operator=\"out\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow2\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow2\" result=\"shape\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dx=\"1\" dy=\"2\"/><feGaussianBlur stdDeviation=\"0.5\"/><feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0\"/><feBlend mode=\"normal\" in2=\"shape\" result=\"effect2_innerShadow2\"/>\n            </filter>\n            <linearGradient id=\"pause_border\" x1=\"24\" y1=\"0\" x2=\"24\" y2=\"48\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"white\"/><stop offset=\"1\" stop-color=\"#9B9B9B\"/></linearGradient>\n            <linearGradient id=\"pause_s1\" x1=\"18\" y1=\"14\" x2=\"18\" y2=\"34\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"white\"/><stop offset=\"1\" stop-color=\"#C3C3C3\"/></linearGradient>\n            <linearGradient id=\"pause_s2\" x1=\"30\" y1=\"14\" x2=\"30\" y2=\"34\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"white\"/><stop offset=\"1\" stop-color=\"#C3C3C3\"/></linearGradient>\n          </defs>\n        </svg>\n      </button>\n\n      <!-- Next -->\n      <button class=\"ctrl-btn\" id=\"btn-next\" title=\"Next (→)\">\n        <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <rect x=\"0.25\" y=\"0.25\" width=\"47.5\" height=\"47.5\" rx=\"23.75\" stroke=\"url(#fwd_border)\" stroke-width=\"0.5\"/>\n          <g filter=\"url(#fwd_f1)\">\n            <path d=\"M33.9333 23.2L26.6 17.7C25.9408 17.2056 25 17.676 25 18.5V29.5C25 30.324 25.9408 30.7944 26.6 30.3L33.9333 24.8C34.4667 24.4 34.4667 23.6 33.9333 23.2Z\" fill=\"#555555\"/>\n            <path d=\"M25.25 18.5C25.25 17.882 25.9558 17.5296 26.4502 17.9004L33.7832 23.4004C34.1831 23.7004 34.1831 24.2996 33.7832 24.5996L26.4502 30.0996C25.9558 30.4704 25.25 30.118 25.25 29.5V18.5Z\" stroke=\"url(#fwd_s1)\" style=\"mix-blend-mode:soft-light\" stroke-width=\"0.5\"/>\n          </g>\n          <g filter=\"url(#fwd_f2)\">\n            <path d=\"M23.9333 23.2L16.6 17.7C15.9408 17.2056 15 17.676 15 18.5V29.5C15 30.324 15.9408 30.7944 16.6 30.3L23.9333 24.8C24.4667 24.4 24.4667 23.6 23.9333 23.2Z\" fill=\"#555555\"/>\n            <path d=\"M15.25 18.5C15.25 17.882 15.9558 17.5296 16.4502 17.9004L23.7832 23.4004C24.1831 23.7004 24.1831 24.2996 23.7832 24.5996L16.4502 30.0996C15.9558 30.4704 15.25 30.118 15.25 29.5V18.5Z\" stroke=\"url(#fwd_s2)\" style=\"mix-blend-mode:soft-light\" stroke-width=\"0.5\"/>\n          </g>\n          <defs>\n            <filter id=\"fwd_f1\" x=\"17\" y=\"9.49817\" width=\"25.3335\" height=\"29.0037\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n              <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset/><feGaussianBlur stdDeviation=\"4\"/><feComposite in2=\"hardAlpha\" operator=\"out\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow\" result=\"shape\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dx=\"1\" dy=\"2\"/><feGaussianBlur stdDeviation=\"0.5\"/><feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0\"/><feBlend mode=\"normal\" in2=\"shape\" result=\"effect2_innerShadow\"/>\n            </filter>\n            <filter id=\"fwd_f2\" x=\"7\" y=\"9.49817\" width=\"25.3335\" height=\"29.0037\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n              <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset/><feGaussianBlur stdDeviation=\"4\"/><feComposite in2=\"hardAlpha\" operator=\"out\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow2\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow2\" result=\"shape\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dx=\"1\" dy=\"2\"/><feGaussianBlur stdDeviation=\"0.5\"/><feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0\"/><feBlend mode=\"normal\" in2=\"shape\" result=\"effect2_innerShadow2\"/>\n            </filter>\n            <linearGradient id=\"fwd_border\" x1=\"24\" y1=\"0\" x2=\"24\" y2=\"48\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"white\"/><stop offset=\"1\" stop-color=\"#9B9B9B\"/></linearGradient>\n            <linearGradient id=\"fwd_s1\" x1=\"30\" y1=\"16.5\" x2=\"30\" y2=\"31.5\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"white\"/><stop offset=\"1\" stop-color=\"#C3C3C3\"/></linearGradient>\n            <linearGradient id=\"fwd_s2\" x1=\"20\" y1=\"16.5\" x2=\"20\" y2=\"31.5\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"white\"/><stop offset=\"1\" stop-color=\"#C3C3C3\"/></linearGradient>\n          </defs>\n        </svg>\n      </button>\n\n    </div><!-- /controls -->\n\n  </div><!-- /player-shell -->\n\n  <script>\n  (() => {\n    'use strict';\n\n    // ══════════════════════════════════════════════\n    //  STATE\n    // ══════════════════════════════════════════════\n    let playlist      = [];\n    let currentIdx    = 0;\n    let isPlaying     = false;\n    let currentView   = 'np';   // 'np' | 'pl'\n    let draggingScrub = false;\n    const REMOTE_MEDIA = 'https://pub-0d325ed439be43b8ad5370160e108e47.r2.dev/player/media';\n\n    // ══════════════════════════════════════════════\n    //  DOM REFS\n    // ══════════════════════════════════════════════\n    const audio          = document.getElementById('audio');\n    const albumArt       = document.getElementById('album-art');\n    const artPlaceholder = document.getElementById('art-placeholder');\n    const npTitle        = document.getElementById('np-title');\n    const npDate         = document.getElementById('np-date');\n    const timeCurrent    = document.getElementById('time-current');\n    const timeRemaining  = document.getElementById('time-remaining');\n    const timeBar        = document.getElementById('time-bar');\n    const scrubber       = document.getElementById('scrubber');\n    const trackList      = document.getElementById('track-list');\n    const btnPlay        = document.getElementById('btn-play');\n    const btnPrev        = document.getElementById('btn-prev');\n    const btnNext        = document.getElementById('btn-next');\n    const btnMenu        = document.getElementById('btn-menu');\n    const iconPlay       = document.getElementById('icon-play');\n    const iconPause      = document.getElementById('icon-pause');\n    const viewNP         = document.getElementById('view-np');\n    const viewPL         = document.getElementById('view-pl');\n\n    // ══════════════════════════════════════════════\n    //  HELPERS\n    // ══════════════════════════════════════════════\n    function fmt(sec) {\n      if (isNaN(sec) || sec < 0) sec = 0;\n      const m = Math.floor(sec / 60);\n      const s = Math.floor(sec % 60);\n      return `${m}:${String(s).padStart(2, '0')}`;\n    }\n\n    function esc(str) {\n      return String(str)\n        .replace(/&/g, '&amp;').replace(/</g, '&lt;')\n        .replace(/>/g, '&gt;').replace(/\"/g, '&quot;');\n    }\n\n    // Deterministic placeholder color from track name\n    function placeholderColor(str) {\n      const palette = ['#b5a89a', '#8b7355', '#c4a882', '#9a8578', '#7a6a5e', '#a09080'];\n      let h = 0;\n      for (const c of str) h = (h * 31 + c.charCodeAt(0)) & 0xffff;\n      return palette[h % palette.length];\n    }\n\n    const THUMB_COLORS = [\n      'thumb-color-0', 'thumb-color-1', 'thumb-color-2',\n      'thumb-color-3', 'thumb-color-4', 'thumb-color-5',\n    ];\n\n    function thumbColorFor(idx) {\n      return THUMB_COLORS[idx % THUMB_COLORS.length];\n    }\n\n    // ══════════════════════════════════════════════\n    //  REMOTE SOURCE\n    // ══════════════════════════════════════════════\n    async function loadRemotePlaylist() {\n      try {\n        const res = await fetch(`${REMOTE_MEDIA}/playlist.json`);\n        if (!res.ok) throw new Error(`HTTP ${res.status}`);\n        const folders = await res.json();\n\n        const tracks = (await Promise.all(\n          folders.map(folder => loadRemoteTrack(folder))\n        )).filter(Boolean);\n\n        playlist   = tracks;\n        currentIdx = 0;\n\n        renderPlaylist();\n\n        if (playlist.length > 0) {\n          selectTrack(0, true);\n          updateNowPlaying();\n        } else {\n          albumArt.style.display = 'none';\n          artPlaceholder.style.display = 'flex';\n          npTitle.textContent = '–';\n          npDate.textContent  = '';\n        }\n      } catch (e) {\n        console.warn('Remote playlist load failed:', e);\n      }\n    }\n\n    async function loadRemoteTrack(folder) {\n      try {\n        const base = `${REMOTE_MEDIA}/${folder}`;\n        const res  = await fetch(`${base}/meta.json`);\n        if (!res.ok) throw new Error(`HTTP ${res.status}`);\n        const meta = await res.json();\n\n        return {\n          id:     folder,\n          title:  meta.title  || folder,\n          date:   meta.date   || '',\n          artist: meta.artist || '',\n          color:  meta.color  || placeholderColor(folder),\n          art:    meta.artwork ? `${base}/${meta.artwork}` : null,\n          thumb:  meta.icon   ? `${base}/${meta.icon}`    : null,\n          src:    meta.audio  ? `${base}/${meta.audio}`   : null,\n        };\n      } catch (e) {\n        console.warn('Failed to load remote track:', folder, e);\n        return null;\n      }\n    }\n\n    // ══════════════════════════════════════════════\n    //  NOW PLAYING UI\n    // ══════════════════════════════════════════════\n    function updateNowPlaying() {\n      if (!playlist.length) {\n        albumArt.style.display = 'none';\n        artPlaceholder.style.display = 'flex';\n        npTitle.textContent = '–';\n        npDate.textContent  = '';\n        return;\n      }\n\n      const t = playlist[currentIdx];\n\n      if (t.art) {\n        albumArt.src = t.art;\n        albumArt.style.display = 'block';\n        artPlaceholder.style.display = 'none';\n      } else {\n        albumArt.style.display = 'none';\n        artPlaceholder.style.display = 'flex';\n      }\n\n      npTitle.textContent = t.title || '–';\n      npDate.textContent  = t.date  || '';\n\n      document.querySelectorAll('.track-item').forEach((el, i) => {\n        el.classList.toggle('active', i === currentIdx);\n      });\n    }\n\n    function updatePlayIcon() {\n      iconPlay.style.display  = isPlaying ? 'none'  : 'block';\n      iconPause.style.display = isPlaying ? 'block' : 'none';\n    }\n\n    function updateProgress() {\n      const dur = audio.duration || 0;\n      const cur = audio.currentTime || 0;\n      const pct = dur > 0 ? (cur / dur) * 100 : 0;\n      scrubber.style.width = `calc(${pct}% - 2px)`;\n      timeCurrent.textContent   = fmt(cur);\n      timeRemaining.textContent = `-${fmt(dur - cur)}`;\n    }\n\n    // ══════════════════════════════════════════════\n    //  PLAYLIST RENDER\n    // ══════════════════════════════════════════════\n    function renderPlaylist() {\n      trackList.innerHTML = '';\n\n      if (!playlist.length) {\n        const empty = document.createElement('div');\n        empty.className = 'track-list-empty';\n        empty.textContent = 'No tracks found.';\n        trackList.appendChild(empty);\n        return;\n      }\n\n      playlist.forEach((t, i) => {\n        const item = document.createElement('div');\n        item.className = 'track-item' + (i === currentIdx ? ' active' : '');\n        item.dataset.index = i;\n\n        // Thumbnail — prefer icon file, fall back to color placeholder\n        let thumbHtml;\n        if (t.thumb) {\n          thumbHtml = `<img class=\"ti-thumb\" src=\"${esc(t.thumb)}\" alt=\"\" loading=\"lazy\"\n            onerror=\"this.outerHTML='<div class=\\\\'ti-thumb-placeholder ${thumbColorFor(i)}\\\\'>${esc(t.title[0] || '♪')}</div>'\">`;\n        } else if (t.color) {\n          thumbHtml = `<div class=\"ti-thumb-placeholder\" style=\"background:${esc(t.color)}\">${esc(t.title[0] || '♪')}</div>`;\n        } else {\n          thumbHtml = `<div class=\"ti-thumb-placeholder ${thumbColorFor(i)}\">${esc(t.title[0] || '♪')}</div>`;\n        }\n\n        const nowTag = i === currentIdx\n          ? `<span style=\"display:inline-block;margin-left:6px;font-size:9px;letter-spacing:0.04em;opacity:0.55;font-style:normal;\">▶ NOW</span>`\n          : '';\n        const noAudio = !t.src\n          ? ` <span style=\"opacity:0.3;font-size:10px;font-style:normal;\">no audio</span>`\n          : '';\n\n        item.innerHTML = `\n          <div class=\"ti-info\">\n            <p class=\"ti-title\">${esc(t.title)}${nowTag}${noAudio}</p>\n            <p class=\"ti-date\">${esc(t.date || '')}</p>\n          </div>\n          ${thumbHtml}\n        `;\n        item.addEventListener('click', () => { selectTrack(i, true); showView('np'); });\n        trackList.appendChild(item);\n      });\n    }\n\n    // ══════════════════════════════════════════════\n    //  PLAYBACK\n    // ══════════════════════════════════════════════\n    function selectTrack(idx, autoPlay = false) {\n      currentIdx = idx;\n      const t = playlist[idx];\n\n      if (t && t.src) {\n        const wasPlaying = isPlaying;\n        audio.src = t.src;\n        if (autoPlay || wasPlaying) audio.play().catch(() => {});\n      } else {\n        audio.removeAttribute('src');\n        audio.load();\n      }\n\n      updateNowPlaying();\n      updateProgress();\n    }\n\n    function togglePlay() {\n      if (!playlist.length) return;\n      const t = playlist[currentIdx];\n      if (!t || !t.src) return;\n      if (isPlaying) { audio.pause(); } else { audio.play().catch(e => console.warn(e)); }\n    }\n\n    function playNext() {\n      if (!playlist.length) return;\n      const next = (currentIdx + 1) % playlist.length;\n      selectTrack(next);\n      if (playlist[next]?.src) audio.play().catch(() => {});\n    }\n\n    function playPrev() {\n      if (!playlist.length) return;\n      if (audio.currentTime > 3) { audio.currentTime = 0; return; }\n      const prev = (currentIdx - 1 + playlist.length) % playlist.length;\n      selectTrack(prev);\n      if (playlist[prev]?.src) audio.play().catch(() => {});\n    }\n\n    // ══════════════════════════════════════════════\n    //  VIEW SWITCHING\n    // ══════════════════════════════════════════════\n    function showView(view) {\n      if (view === currentView) return;\n      currentView = view;\n      if (view === 'np') {\n        viewPL.classList.replace('view-enter', 'view-exit');\n        viewNP.classList.replace('view-exit', 'view-enter');\n      } else {\n        viewNP.classList.replace('view-enter', 'view-exit');\n        viewPL.classList.replace('view-exit', 'view-enter');\n        renderPlaylist();\n      }\n    }\n\n    // ══════════════════════════════════════════════\n    //  SCRUBBER — click & drag\n    // ══════════════════════════════════════════════\n    function seekTo(clientX) {\n      const rect = timeBar.getBoundingClientRect();\n      const pct  = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));\n      if (audio.duration) audio.currentTime = pct * audio.duration;\n    }\n\n    timeBar.addEventListener('mousedown', e => { draggingScrub = true; seekTo(e.clientX); });\n    document.addEventListener('mousemove', e => { if (draggingScrub) seekTo(e.clientX); });\n    document.addEventListener('mouseup',   () => { draggingScrub = false; });\n    timeBar.addEventListener('touchstart', e => seekTo(e.touches[0].clientX), { passive: true });\n    timeBar.addEventListener('touchmove',  e => seekTo(e.touches[0].clientX), { passive: true });\n\n    // ══════════════════════════════════════════════\n    //  EVENT LISTENERS\n    // ══════════════════════════════════════════════\n    btnPlay.addEventListener('click', togglePlay);\n    btnPrev.addEventListener('click', playPrev);\n    btnNext.addEventListener('click', playNext);\n    btnMenu.addEventListener('click', () => showView(currentView === 'pl' ? 'np' : 'pl'));\n\n    audio.addEventListener('play',           () => { isPlaying = true;  updatePlayIcon(); });\n    audio.addEventListener('pause',          () => { isPlaying = false; updatePlayIcon(); });\n    audio.addEventListener('ended',          () => { isPlaying = false; updatePlayIcon(); playNext(); });\n    audio.addEventListener('timeupdate',     updateProgress);\n    audio.addEventListener('loadedmetadata', updateProgress);\n    audio.addEventListener('error',          () => { isPlaying = false; updatePlayIcon(); });\n\n    // Keyboard shortcuts\n    document.addEventListener('keydown', e => {\n      if (['INPUT', 'TEXTAREA', 'SELECT'].includes(e.target.tagName)) return;\n      switch (e.code) {\n        case 'Space':      e.preventDefault(); togglePlay(); break;\n        case 'ArrowRight': playNext(); break;\n        case 'ArrowLeft':  playPrev(); break;\n        case 'KeyM':       showView(currentView === 'pl' ? 'np' : 'pl'); break;\n        case 'ArrowUp':\n          audio.volume = Math.min(1, audio.volume + 0.05);\n          break;\n        case 'ArrowDown':\n          audio.volume = Math.max(0, audio.volume - 0.05);\n          break;\n      }\n    });\n\n    // ══════════════════════════════════════════════\n    //  INIT\n    // ══════════════════════════════════════════════\n    updateNowPlaying();\n    updatePlayIcon();\n    updateProgress();\n\n    // Load remote playlist\n    loadRemotePlaylist().catch(() => {});\n\n  })();\n  </script>\n</body>\n</html>\n","embedURL":""}},"42:951":{"type":"WIDGET","id":"42:951","name":"Embed 1","absoluteBoundingBox":{"x":2299.5,"y":188.0,"width":320.0,"height":510.0},"targetAspectRatio":{"x":320.0,"y":510.0},"isolatedAbsoluteRenderBounds":{"x":2299.5,"y":188.0,"width":320.0,"height":510.0},"relativeTransform":[[1.0,0.0,27.5],[0.0,1.0,0.0]],"size":{"x":320.0,"y":510.0},"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"widgetType":"GENERIC","syncedState":{"embedAllowFullscreen":"false","embedCodeType":"html","embedIframeHtml":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Player</title>\n\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n  <link href=\"https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap\" rel=\"stylesheet\">\n  <style>\n    html, body {\n      width: 100%;\n    }\n\n    body {\n      font-family: 'Instrument Serif', Georgia, serif;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    /* ── OUTER SHELL ─────────────────────────────── */\n    .player-shell {\n      width: 320px;\n      display: flex;\n      flex-direction: column;\n      gap: 24px;\n      padding: 24px;\n      background: linear-gradient(to bottom, #f4f4f4 0%, #dddddd 100%);\n      border: 0.5px solid white;\n      border-radius: 16px;\n      box-shadow:\n        inset -4px -4px 8px 0px rgba(255,255,255,1),\n        inset 4px 4px 8px 0px rgba(0,0,0,0.16);\n      position: relative;\n    }\n\n    /* ── DEVICE DISPLAY ──────────────────────────── */\n    .display {\n      width: 100%;\n      background: linear-gradient(160deg, #e1dfd8 0%, #d4d7ce 55%, #c4cacd 100%);\n      border-radius: 8px;\n      overflow: hidden;\n      position: relative;\n      flex-shrink: 0;\n    }\n    .display::after {\n      content: '';\n      position: absolute;\n      inset: -0.5px;\n      border-radius: inherit;\n      box-shadow: inset 1px 1px 4px 0px rgba(0,0,0,0.25);\n      pointer-events: none;\n      z-index: 2;\n    }\n\n    /* ── NOW PLAYING DISPLAY ─────────────────────── */\n    .np-display {\n      padding: 8px 8px 4px 8px;\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      min-height: 388px;\n    }\n\n    .album-art {\n      width: 100%;\n      aspect-ratio: 1 / 1;\n      border-radius: 4px;\n      box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.32);\n      object-fit: cover;\n      display: block;\n      background: #ccc;\n      flex-shrink: 0;\n    }\n\n    .album-art-placeholder {\n      width: 100%;\n      aspect-ratio: 1 / 1;\n      border-radius: 4px;\n      box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.32);\n      background: linear-gradient(135deg, #d0cec7 0%, #b8bbbe 100%);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n    }\n\n    .playback-ui {\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n      padding: 8px 12px 12px 12px;\n    }\n\n    .track-info {\n      text-align: center;\n      text-shadow: 1px 1px 1px rgba(0,0,0,0.16);\n      white-space: nowrap;\n    }\n\n    .track-title-np {\n      font-size: 20px;\n      color: #222;\n      font-style: normal;\n      line-height: normal;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .track-date-np {\n      font-size: 14px;\n      color: #444;\n      font-style: italic;\n      line-height: normal;\n    }\n\n    .playback-details {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n    }\n\n    .time-bar {\n      background: rgba(34,34,34,0.25);\n      border: 1px solid #222;\n      height: 8px;\n      border-radius: 4px;\n      overflow: hidden;\n      position: relative;\n      cursor: pointer;\n      flex-shrink: 0;\n      box-shadow: 1px 1px 1px rgba(0,0,0,0.16);\n    }\n\n    .scrubber {\n      position: absolute;\n      left: 1px;\n      top: 1px;\n      height: 4px;\n      width: 0%;\n      background: #222;\n      border-radius: 3px;\n      pointer-events: none;\n    }\n\n    .time-row {\n      display: flex;\n      justify-content: space-between;\n      font-size: 12px;\n      color: #222;\n      font-style: normal;\n      line-height: normal;\n      white-space: nowrap;\n      text-shadow: 1px 1px 1px rgba(0,0,0,0.16);\n    }\n\n\n    /* ── PLAYLIST DISPLAY ────────────────────────── */\n    .pl-display {\n      height: 388px;\n      padding: 24px;\n      display: flex;\n      flex-direction: column;\n      gap: 20px;\n    }\n\n    .pl-header {\n      font-size: 20px;\n      color: #222;\n      font-style: normal;\n      line-height: normal;\n      text-align: center;\n      text-shadow: 1px 1px 1px rgba(0,0,0,0.16);\n      white-space: nowrap;\n      flex-shrink: 0;\n    }\n\n    .track-list {\n      flex: 1;\n      overflow-y: auto;\n      display: flex;\n      flex-direction: column;\n      gap: 0;\n    }\n    .track-list::-webkit-scrollbar { width: 3px; }\n    .track-list::-webkit-scrollbar-thumb {\n      background: rgba(34,34,34,0.25);\n      border-radius: 2px;\n    }\n\n    .track-item {\n      display: flex;\n      gap: 8px;\n      align-items: center;\n      cursor: pointer;\n      padding: 8px 4px 4px 4px;\n      border-bottom: 0.5px solid rgba(34,34,34,0.08);\n      transition: background 0.12s;\n      border-radius: 3px;\n    }\n    .track-item:last-child { border-bottom: none; }\n    .track-item:hover { background: rgba(34,34,34,0.05); }\n    .track-item.active .ti-title { color: #111; }\n    .track-item.active { background: rgba(34,34,34,0.06); }\n\n    .ti-info {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n      gap: 1px;\n    }\n\n    .ti-title {\n      font-size: 16px;\n      color: #222;\n      font-style: normal;\n      line-height: normal;\n      text-shadow: 1px 1px 1px rgba(0,0,0,0.16);\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .ti-date {\n      font-size: 12px;\n      color: #444;\n      font-style: italic;\n      line-height: normal;\n      text-shadow: 1px 1px 1px rgba(0,0,0,0.08);\n    }\n\n    .ti-thumb {\n      width: 32px; height: 32px;\n      border-radius: 50%;\n      object-fit: cover;\n      flex-shrink: 0;\n      box-shadow:\n        inset 2px 2px 2px 0px white,\n        inset -2px -2px 2px 0px rgba(0,0,0,0.5);\n      background: #bbb;\n    }\n\n    .ti-thumb-placeholder {\n      width: 32px; height: 32px;\n      border-radius: 50%;\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 13px;\n      color: rgba(255,255,255,0.9);\n      box-shadow:\n        inset 2px 2px 2px 0px white,\n        inset -2px -2px 2px 0px rgba(0,0,0,0.5);\n    }\n\n    /* ── CONTROLS BAR ────────────────────────────── */\n    .controls {\n      display: flex;\n      gap: 16px;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n    }\n\n    .ctrl-btn {\n      width: 48px; height: 48px;\n      border-radius: 32px;\n      border: none;\n      background: transparent;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      cursor: pointer;\n      padding: 0;\n      transition: opacity 0.12s, transform 0.08s;\n      flex-shrink: 0;\n      outline: none;\n    }\n    .ctrl-btn:active { opacity: 0.65; transform: scale(0.95); }\n\n    .hamburger-line {\n      width: 20px;\n      height: 2px;\n      background: #555;\n      border-radius: 1px;\n      border: 0.5px solid rgba(255,255,255,0.8);\n      box-shadow: 0 0 8px rgba(255,255,255,0.7), inset 0 1px 1px rgba(0,0,0,0.2);\n    }\n\n    /* ── SCREEN TRANSITION ───────────────────────── */\n    .screen-stack {\n      position: relative;\n    }\n    .view {\n      transition: opacity 0.1s ease;\n    }\n    .view-enter { opacity: 1; }\n    .view-exit {\n      opacity: 0;\n      pointer-events: none;\n      position: absolute;\n      top: 0; left: 0; right: 0;\n    }\n\n    /* ── RESPONSIVE ──────────────────────────────── */\n    @media (max-width: 360px) {\n      .player-shell { width: 100%; min-width: 280px; }\n    }\n\n    /* ── THUMB GRADIENT COLORS ───────────────────── */\n    .thumb-color-0 { background: linear-gradient(135deg, #e8c4b4 0%, #c4a090 100%); }\n    .thumb-color-1 { background: linear-gradient(135deg, #b4cce8 0%, #90a4c4 100%); }\n    .thumb-color-2 { background: linear-gradient(135deg, #c4e8c4 0%, #90c490 100%); }\n    .thumb-color-3 { background: linear-gradient(135deg, #e8e8b4 0%, #c4c490 100%); }\n    .thumb-color-4 { background: linear-gradient(135deg, #e4b4e8 0%, #c090c4 100%); }\n    .thumb-color-5 { background: linear-gradient(135deg, #b4e8e8 0%, #90c4c4 100%); }\n\n    /* ── PLAYLIST HEADER ROW ──────────────────────── */\n    .pl-header-row {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      flex-shrink: 0;\n    }\n\n    .refresh-pl-btn {\n      background: none;\n      border: none;\n      font-size: 18px;\n      color: #555;\n      cursor: pointer;\n      padding: 0 2px;\n      line-height: 1;\n      opacity: 0.5;\n      transition: opacity 0.15s, transform 0.2s;\n      flex-shrink: 0;\n    }\n    .refresh-pl-btn:hover { opacity: 0.85; }\n    .refresh-pl-btn.spinning { animation: spin 0.6s linear; }\n    @keyframes spin { to { transform: rotate(360deg); } }\n\n    /* ── EMPTY TRACK LIST ─────────────────────────── */\n    .track-list-empty {\n      flex: 1;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      opacity: 0.4;\n      font-size: 13px;\n      font-style: italic;\n      text-align: center;\n      line-height: 1.5;\n      padding: 8px;\n    }\n  </style>\n</head>\n<body>\n\n  <!-- Hidden audio element -->\n  <audio id=\"audio\" preload=\"auto\"></audio>\n\n  <!-- ── PLAYER SHELL ─────────────────────────── -->\n  <div class=\"player-shell\" id=\"player\">\n\n    <!-- SCREEN STACK -->\n    <div class=\"screen-stack\">\n\n      <!-- NOW PLAYING VIEW -->\n      <div class=\"view view-enter\" id=\"view-np\">\n        <div class=\"display\">\n          <div class=\"np-display\">\n\n            <!-- Album Art -->\n            <img id=\"album-art\" src=\"\" alt=\"Album Art\" class=\"album-art\"\n              onerror=\"this.style.display='none';document.getElementById('art-placeholder').style.display='flex'\"\n              onload=\"this.style.display='block';document.getElementById('art-placeholder').style.display='none'\">\n            <div id=\"art-placeholder\" class=\"album-art-placeholder\" style=\"display:none\">\n              <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" opacity=\"0.4\">\n                <circle cx=\"24\" cy=\"24\" r=\"10\" stroke=\"#555\" stroke-width=\"2\" fill=\"none\"/>\n                <circle cx=\"24\" cy=\"24\" r=\"3\" fill=\"#555\"/>\n                <line x1=\"24\" y1=\"14\" x2=\"24\" y2=\"4\" stroke=\"#555\" stroke-width=\"2\"/>\n              </svg>\n            </div>\n\n            <!-- Playback UI -->\n            <div class=\"playback-ui\">\n              <!-- Track Info -->\n              <div class=\"track-info\">\n                <p id=\"np-title\" class=\"track-title-np\">Côte d'Azur</p>\n                <p id=\"np-date\" class=\"track-date-np\">11 FEB 2026</p>\n              </div>\n              <!-- Progress -->\n              <div class=\"playback-details\">\n                <div class=\"time-bar\" id=\"time-bar\">\n                  <div class=\"scrubber\" id=\"scrubber\"></div>\n                </div>\n                <div class=\"time-row\">\n                  <span id=\"time-current\">0:00</span>\n                  <span id=\"time-remaining\">-0:00</span>\n                </div>\n              </div>\n\n            </div>\n\n          </div>\n        </div>\n      </div>\n\n      <!-- PLAYLIST VIEW -->\n      <div class=\"view view-exit\" id=\"view-pl\">\n        <div class=\"display\">\n          <div class=\"pl-display\">\n            <div class=\"pl-header-row\">\n              <p class=\"pl-header\">Playlist</p>\n            </div>\n            <div class=\"track-list\" id=\"track-list\"></div>\n          </div>\n        </div>\n      </div>\n\n    </div><!-- /screen-stack -->\n\n    <!-- CONTROLS -->\n    <div class=\"controls\">\n\n      <!-- Prev -->\n      <button class=\"ctrl-btn\" id=\"btn-prev\" title=\"Previous (←)\">\n        <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <rect x=\"0.25\" y=\"0.25\" width=\"47.5\" height=\"47.5\" rx=\"23.75\" stroke=\"url(#back_border)\" stroke-width=\"0.5\"/>\n          <g filter=\"url(#back_f1)\">\n            <path d=\"M14.0667 23.7L21.4 18.2C22.0592 17.7056 23 18.176 23 19V30C23 30.824 22.0592 31.2944 21.4 30.8L14.0667 25.3C13.5333 24.9 13.5333 24.1 14.0667 23.7Z\" fill=\"#555555\"/>\n            <path d=\"M22.75 19C22.75 18.382 22.0442 18.0296 21.5498 18.4004L14.2168 23.9004C13.8169 24.2004 13.8169 24.7996 14.2168 25.0996L21.5498 30.5996C22.0442 30.9704 22.75 30.618 22.75 30V19Z\" stroke=\"url(#back_s1)\" style=\"mix-blend-mode:soft-light\" stroke-width=\"0.5\"/>\n          </g>\n          <g filter=\"url(#back_f2)\">\n            <path d=\"M24.0667 23.7L31.4 18.2C32.0592 17.7056 33 18.176 33 19V30C33 30.824 32.0592 31.2944 31.4 30.8L24.0667 25.3C23.5333 24.9 23.5333 24.1 24.0667 23.7Z\" fill=\"#555555\"/>\n            <path d=\"M32.75 19C32.75 18.382 32.0442 18.0296 31.5498 18.4004L24.2168 23.9004C23.8169 24.2004 23.8169 24.7996 24.2168 25.0996L31.5498 30.5996C32.0442 30.9704 32.75 30.618 32.75 30V19Z\" stroke=\"url(#back_s2)\" style=\"mix-blend-mode:soft-light\" stroke-width=\"0.5\"/>\n          </g>\n          <defs>\n            <filter id=\"back_f1\" x=\"5.6665\" y=\"9.99817\" width=\"25.3335\" height=\"29.0037\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n              <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset/><feGaussianBlur stdDeviation=\"4\"/><feComposite in2=\"hardAlpha\" operator=\"out\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow\" result=\"shape\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dx=\"1\" dy=\"2\"/><feGaussianBlur stdDeviation=\"0.5\"/><feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0\"/><feBlend mode=\"normal\" in2=\"shape\" result=\"effect2_innerShadow\"/>\n            </filter>\n            <filter id=\"back_f2\" x=\"15.6665\" y=\"9.99817\" width=\"25.3335\" height=\"29.0037\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n              <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset/><feGaussianBlur stdDeviation=\"4\"/><feComposite in2=\"hardAlpha\" operator=\"out\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow2\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow2\" result=\"shape\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dx=\"1\" dy=\"2\"/><feGaussianBlur stdDeviation=\"0.5\"/><feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0\"/><feBlend mode=\"normal\" in2=\"shape\" result=\"effect2_innerShadow2\"/>\n            </filter>\n            <linearGradient id=\"back_border\" x1=\"24\" y1=\"0\" x2=\"24\" y2=\"48\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"white\"/><stop offset=\"1\" stop-color=\"#9B9B9B\"/></linearGradient>\n            <linearGradient id=\"back_s1\" x1=\"18\" y1=\"17\" x2=\"18\" y2=\"32\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"white\"/><stop offset=\"1\" stop-color=\"#C3C3C3\"/></linearGradient>\n            <linearGradient id=\"back_s2\" x1=\"28\" y1=\"17\" x2=\"28\" y2=\"32\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"white\"/><stop offset=\"1\" stop-color=\"#C3C3C3\"/></linearGradient>\n          </defs>\n        </svg>\n      </button>\n\n      <!-- Menu / Playlist -->\n      <button class=\"ctrl-btn\" id=\"btn-menu\" title=\"Playlist (M)\">\n        <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <rect x=\"0.25\" y=\"0.25\" width=\"47.5\" height=\"47.5\" rx=\"23.75\" stroke=\"url(#menu_border)\" stroke-width=\"0.5\"/>\n          <g filter=\"url(#menu_f1)\">\n            <rect x=\"14\" y=\"17\" width=\"20\" height=\"2\" rx=\"1\" fill=\"#555555\"/>\n            <rect x=\"14.25\" y=\"17.25\" width=\"19.5\" height=\"1.5\" rx=\"0.75\" stroke=\"url(#menu_s1)\" style=\"mix-blend-mode:soft-light\" stroke-width=\"0.5\"/>\n          </g>\n          <g filter=\"url(#menu_f2)\">\n            <rect x=\"14\" y=\"23\" width=\"20\" height=\"2\" rx=\"1\" fill=\"#555555\"/>\n            <rect x=\"14.25\" y=\"23.25\" width=\"19.5\" height=\"1.5\" rx=\"0.75\" stroke=\"url(#menu_s2)\" style=\"mix-blend-mode:soft-light\" stroke-width=\"0.5\"/>\n          </g>\n          <g filter=\"url(#menu_f3)\">\n            <rect x=\"14\" y=\"29\" width=\"20\" height=\"2\" rx=\"1\" fill=\"#555555\"/>\n            <rect x=\"14.25\" y=\"29.25\" width=\"19.5\" height=\"1.5\" rx=\"0.75\" stroke=\"url(#menu_s3)\" style=\"mix-blend-mode:soft-light\" stroke-width=\"0.5\"/>\n          </g>\n          <defs>\n            <filter id=\"menu_f1\" x=\"6\" y=\"9\" width=\"36\" height=\"18\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n              <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset/><feGaussianBlur stdDeviation=\"4\"/><feComposite in2=\"hardAlpha\" operator=\"out\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow\" result=\"shape\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dx=\"1\" dy=\"2\"/><feGaussianBlur stdDeviation=\"0.5\"/><feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0\"/><feBlend mode=\"normal\" in2=\"shape\" result=\"effect2_innerShadow\"/>\n            </filter>\n            <filter id=\"menu_f2\" x=\"6\" y=\"15\" width=\"36\" height=\"18\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n              <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset/><feGaussianBlur stdDeviation=\"4\"/><feComposite in2=\"hardAlpha\" operator=\"out\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow2\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow2\" result=\"shape\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dx=\"1\" dy=\"2\"/><feGaussianBlur stdDeviation=\"0.5\"/><feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0\"/><feBlend mode=\"normal\" in2=\"shape\" result=\"effect2_innerShadow2\"/>\n            </filter>\n            <filter id=\"menu_f3\" x=\"6\" y=\"21\" width=\"36\" height=\"18\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n              <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset/><feGaussianBlur stdDeviation=\"4\"/><feComposite in2=\"hardAlpha\" operator=\"out\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow3\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow3\" result=\"shape\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dx=\"1\" dy=\"2\"/><feGaussianBlur stdDeviation=\"0.5\"/><feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0\"/><feBlend mode=\"normal\" in2=\"shape\" result=\"effect2_innerShadow3\"/>\n            </filter>\n            <linearGradient id=\"menu_border\" x1=\"24\" y1=\"0\" x2=\"24\" y2=\"48\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"white\"/><stop offset=\"1\" stop-color=\"#9B9B9B\"/></linearGradient>\n            <linearGradient id=\"menu_s1\" x1=\"24\" y1=\"17\" x2=\"24\" y2=\"19\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"white\"/><stop offset=\"1\" stop-color=\"#C3C3C3\"/></linearGradient>\n            <linearGradient id=\"menu_s2\" x1=\"24\" y1=\"23\" x2=\"24\" y2=\"25\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"white\"/><stop offset=\"1\" stop-color=\"#C3C3C3\"/></linearGradient>\n            <linearGradient id=\"menu_s3\" x1=\"24\" y1=\"29\" x2=\"24\" y2=\"31\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"white\"/><stop offset=\"1\" stop-color=\"#C3C3C3\"/></linearGradient>\n          </defs>\n        </svg>\n      </button>\n\n      <!-- Play / Pause -->\n      <button class=\"ctrl-btn\" id=\"btn-play\" title=\"Play/Pause (Space)\">\n        <!-- PLAY icon (from Play.svg) -->\n        <svg id=\"icon-play\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <rect x=\"0.25\" y=\"0.25\" width=\"47.5\" height=\"47.5\" rx=\"23.75\" stroke=\"url(#play_border)\" stroke-width=\"0.5\"/>\n          <g filter=\"url(#play_f1)\">\n            <path d=\"M32.8014 23.176L19.5665 14.077C18.903 13.6208 18 14.0959 18 14.901V33.099C18 33.9041 18.903 34.3792 19.5665 33.923L32.8014 24.824C33.3794 24.4267 33.3794 23.5733 32.8014 23.176Z\" fill=\"#555555\"/>\n            <path d=\"M18.25 14.9014C18.25 14.2975 18.9272 13.9411 19.4248 14.2832L32.6602 23.3818C33.0934 23.6799 33.0934 24.3201 32.6602 24.6182L19.4248 33.7168C18.9272 34.0589 18.25 33.7025 18.25 33.0986V14.9014Z\" stroke=\"url(#play_s1)\" style=\"mix-blend-mode:soft-light\" stroke-width=\"0.5\"/>\n          </g>\n          <defs>\n            <filter id=\"play_f1\" x=\"10\" y=\"5.89929\" width=\"31.2349\" height=\"36.2014\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n              <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset/><feGaussianBlur stdDeviation=\"4\"/><feComposite in2=\"hardAlpha\" operator=\"out\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow\" result=\"shape\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dx=\"1\" dy=\"2\"/><feGaussianBlur stdDeviation=\"0.5\"/><feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0\"/><feBlend mode=\"normal\" in2=\"shape\" result=\"effect2_innerShadow\"/>\n            </filter>\n            <linearGradient id=\"play_border\" x1=\"24\" y1=\"0\" x2=\"24\" y2=\"48\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"white\"/><stop offset=\"1\" stop-color=\"#9B9B9B\"/></linearGradient>\n            <linearGradient id=\"play_s1\" x1=\"26\" y1=\"13\" x2=\"26\" y2=\"35\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"white\"/><stop offset=\"1\" stop-color=\"#C3C3C3\"/></linearGradient>\n          </defs>\n        </svg>\n        <!-- PAUSE icon (matching style) -->\n        <svg id=\"icon-pause\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"display:none\">\n          <rect x=\"0.25\" y=\"0.25\" width=\"47.5\" height=\"47.5\" rx=\"23.75\" stroke=\"url(#pause_border)\" stroke-width=\"0.5\"/>\n          <g filter=\"url(#pause_f1)\">\n            <rect x=\"15\" y=\"14\" width=\"6\" height=\"20\" rx=\"2.5\" fill=\"#555555\"/>\n            <rect x=\"15.25\" y=\"14.25\" width=\"5.5\" height=\"19.5\" rx=\"2.25\" stroke=\"url(#pause_s1)\" style=\"mix-blend-mode:soft-light\" stroke-width=\"0.5\"/>\n          </g>\n          <g filter=\"url(#pause_f2)\">\n            <rect x=\"27\" y=\"14\" width=\"6\" height=\"20\" rx=\"2.5\" fill=\"#555555\"/>\n            <rect x=\"27.25\" y=\"14.25\" width=\"5.5\" height=\"19.5\" rx=\"2.25\" stroke=\"url(#pause_s2)\" style=\"mix-blend-mode:soft-light\" stroke-width=\"0.5\"/>\n          </g>\n          <defs>\n            <filter id=\"pause_f1\" x=\"7\" y=\"6\" width=\"22\" height=\"36\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n              <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset/><feGaussianBlur stdDeviation=\"4\"/><feComposite in2=\"hardAlpha\" operator=\"out\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow\" result=\"shape\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dx=\"1\" dy=\"2\"/><feGaussianBlur stdDeviation=\"0.5\"/><feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0\"/><feBlend mode=\"normal\" in2=\"shape\" result=\"effect2_innerShadow\"/>\n            </filter>\n            <filter id=\"pause_f2\" x=\"19\" y=\"6\" width=\"22\" height=\"36\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n              <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset/><feGaussianBlur stdDeviation=\"4\"/><feComposite in2=\"hardAlpha\" operator=\"out\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow2\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow2\" result=\"shape\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dx=\"1\" dy=\"2\"/><feGaussianBlur stdDeviation=\"0.5\"/><feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0\"/><feBlend mode=\"normal\" in2=\"shape\" result=\"effect2_innerShadow2\"/>\n            </filter>\n            <linearGradient id=\"pause_border\" x1=\"24\" y1=\"0\" x2=\"24\" y2=\"48\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"white\"/><stop offset=\"1\" stop-color=\"#9B9B9B\"/></linearGradient>\n            <linearGradient id=\"pause_s1\" x1=\"18\" y1=\"14\" x2=\"18\" y2=\"34\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"white\"/><stop offset=\"1\" stop-color=\"#C3C3C3\"/></linearGradient>\n            <linearGradient id=\"pause_s2\" x1=\"30\" y1=\"14\" x2=\"30\" y2=\"34\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"white\"/><stop offset=\"1\" stop-color=\"#C3C3C3\"/></linearGradient>\n          </defs>\n        </svg>\n      </button>\n\n      <!-- Next -->\n      <button class=\"ctrl-btn\" id=\"btn-next\" title=\"Next (→)\">\n        <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <rect x=\"0.25\" y=\"0.25\" width=\"47.5\" height=\"47.5\" rx=\"23.75\" stroke=\"url(#fwd_border)\" stroke-width=\"0.5\"/>\n          <g filter=\"url(#fwd_f1)\">\n            <path d=\"M33.9333 23.2L26.6 17.7C25.9408 17.2056 25 17.676 25 18.5V29.5C25 30.324 25.9408 30.7944 26.6 30.3L33.9333 24.8C34.4667 24.4 34.4667 23.6 33.9333 23.2Z\" fill=\"#555555\"/>\n            <path d=\"M25.25 18.5C25.25 17.882 25.9558 17.5296 26.4502 17.9004L33.7832 23.4004C34.1831 23.7004 34.1831 24.2996 33.7832 24.5996L26.4502 30.0996C25.9558 30.4704 25.25 30.118 25.25 29.5V18.5Z\" stroke=\"url(#fwd_s1)\" style=\"mix-blend-mode:soft-light\" stroke-width=\"0.5\"/>\n          </g>\n          <g filter=\"url(#fwd_f2)\">\n            <path d=\"M23.9333 23.2L16.6 17.7C15.9408 17.2056 15 17.676 15 18.5V29.5C15 30.324 15.9408 30.7944 16.6 30.3L23.9333 24.8C24.4667 24.4 24.4667 23.6 23.9333 23.2Z\" fill=\"#555555\"/>\n            <path d=\"M15.25 18.5C15.25 17.882 15.9558 17.5296 16.4502 17.9004L23.7832 23.4004C24.1831 23.7004 24.1831 24.2996 23.7832 24.5996L16.4502 30.0996C15.9558 30.4704 15.25 30.118 15.25 29.5V18.5Z\" stroke=\"url(#fwd_s2)\" style=\"mix-blend-mode:soft-light\" stroke-width=\"0.5\"/>\n          </g>\n          <defs>\n            <filter id=\"fwd_f1\" x=\"17\" y=\"9.49817\" width=\"25.3335\" height=\"29.0037\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n              <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset/><feGaussianBlur stdDeviation=\"4\"/><feComposite in2=\"hardAlpha\" operator=\"out\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow\" result=\"shape\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dx=\"1\" dy=\"2\"/><feGaussianBlur stdDeviation=\"0.5\"/><feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0\"/><feBlend mode=\"normal\" in2=\"shape\" result=\"effect2_innerShadow\"/>\n            </filter>\n            <filter id=\"fwd_f2\" x=\"7\" y=\"9.49817\" width=\"25.3335\" height=\"29.0037\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n              <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset/><feGaussianBlur stdDeviation=\"4\"/><feComposite in2=\"hardAlpha\" operator=\"out\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow2\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow2\" result=\"shape\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dx=\"1\" dy=\"2\"/><feGaussianBlur stdDeviation=\"0.5\"/><feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0\"/><feBlend mode=\"normal\" in2=\"shape\" result=\"effect2_innerShadow2\"/>\n            </filter>\n            <linearGradient id=\"fwd_border\" x1=\"24\" y1=\"0\" x2=\"24\" y2=\"48\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"white\"/><stop offset=\"1\" stop-color=\"#9B9B9B\"/></linearGradient>\n            <linearGradient id=\"fwd_s1\" x1=\"30\" y1=\"16.5\" x2=\"30\" y2=\"31.5\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"white\"/><stop offset=\"1\" stop-color=\"#C3C3C3\"/></linearGradient>\n            <linearGradient id=\"fwd_s2\" x1=\"20\" y1=\"16.5\" x2=\"20\" y2=\"31.5\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"white\"/><stop offset=\"1\" stop-color=\"#C3C3C3\"/></linearGradient>\n          </defs>\n        </svg>\n      </button>\n\n    </div><!-- /controls -->\n\n  </div><!-- /player-shell -->\n\n  <script>\n  (() => {\n    'use strict';\n\n    // ══════════════════════════════════════════════\n    //  STATE\n    // ══════════════════════════════════════════════\n    let playlist      = [];\n    let currentIdx    = 0;\n    let isPlaying     = false;\n    let currentView   = 'np';   // 'np' | 'pl'\n    let draggingScrub = false;\n    const REMOTE_MEDIA = 'https://pub-0d325ed439be43b8ad5370160e108e47.r2.dev/player/media';\n\n    // ══════════════════════════════════════════════\n    //  DOM REFS\n    // ══════════════════════════════════════════════\n    const audio          = document.getElementById('audio');\n    const albumArt       = document.getElementById('album-art');\n    const artPlaceholder = document.getElementById('art-placeholder');\n    const npTitle        = document.getElementById('np-title');\n    const npDate         = document.getElementById('np-date');\n    const timeCurrent    = document.getElementById('time-current');\n    const timeRemaining  = document.getElementById('time-remaining');\n    const timeBar        = document.getElementById('time-bar');\n    const scrubber       = document.getElementById('scrubber');\n    const trackList      = document.getElementById('track-list');\n    const btnPlay        = document.getElementById('btn-play');\n    const btnPrev        = document.getElementById('btn-prev');\n    const btnNext        = document.getElementById('btn-next');\n    const btnMenu        = document.getElementById('btn-menu');\n    const iconPlay       = document.getElementById('icon-play');\n    const iconPause      = document.getElementById('icon-pause');\n    const viewNP         = document.getElementById('view-np');\n    const viewPL         = document.getElementById('view-pl');\n\n    // ══════════════════════════════════════════════\n    //  HELPERS\n    // ══════════════════════════════════════════════\n    function fmt(sec) {\n      if (isNaN(sec) || sec < 0) sec = 0;\n      const m = Math.floor(sec / 60);\n      const s = Math.floor(sec % 60);\n      return `${m}:${String(s).padStart(2, '0')}`;\n    }\n\n    function esc(str) {\n      return String(str)\n        .replace(/&/g, '&amp;').replace(/</g, '&lt;')\n        .replace(/>/g, '&gt;').replace(/\"/g, '&quot;');\n    }\n\n    // Deterministic placeholder color from track name\n    function placeholderColor(str) {\n      const palette = ['#b5a89a', '#8b7355', '#c4a882', '#9a8578', '#7a6a5e', '#a09080'];\n      let h = 0;\n      for (const c of str) h = (h * 31 + c.charCodeAt(0)) & 0xffff;\n      return palette[h % palette.length];\n    }\n\n    const THUMB_COLORS = [\n      'thumb-color-0', 'thumb-color-1', 'thumb-color-2',\n      'thumb-color-3', 'thumb-color-4', 'thumb-color-5',\n    ];\n\n    function thumbColorFor(idx) {\n      return THUMB_COLORS[idx % THUMB_COLORS.length];\n    }\n\n    // ══════════════════════════════════════════════\n    //  REMOTE SOURCE\n    // ══════════════════════════════════════════════\n    async function loadRemotePlaylist() {\n      try {\n        const res = await fetch(`${REMOTE_MEDIA}/playlist.json`);\n        if (!res.ok) throw new Error(`HTTP ${res.status}`);\n        const folders = await res.json();\n\n        const tracks = (await Promise.all(\n          folders.map(folder => loadRemoteTrack(folder))\n        )).filter(Boolean);\n\n        playlist   = tracks;\n        currentIdx = 0;\n\n        renderPlaylist();\n\n        if (playlist.length > 0) {\n          selectTrack(0, true);\n          updateNowPlaying();\n        } else {\n          albumArt.style.display = 'none';\n          artPlaceholder.style.display = 'flex';\n          npTitle.textContent = '–';\n          npDate.textContent  = '';\n        }\n      } catch (e) {\n        console.warn('Remote playlist load failed:', e);\n      }\n    }\n\n    async function loadRemoteTrack(folder) {\n      try {\n        const base = `${REMOTE_MEDIA}/${folder}`;\n        const res  = await fetch(`${base}/meta.json`);\n        if (!res.ok) throw new Error(`HTTP ${res.status}`);\n        const meta = await res.json();\n\n        return {\n          id:     folder,\n          title:  meta.title  || folder,\n          date:   meta.date   || '',\n          artist: meta.artist || '',\n          color:  meta.color  || placeholderColor(folder),\n          art:    meta.artwork ? `${base}/${meta.artwork}` : null,\n          thumb:  meta.icon   ? `${base}/${meta.icon}`    : null,\n          src:    meta.audio  ? `${base}/${meta.audio}`   : null,\n        };\n      } catch (e) {\n        console.warn('Failed to load remote track:', folder, e);\n        return null;\n      }\n    }\n\n    // ══════════════════════════════════════════════\n    //  NOW PLAYING UI\n    // ══════════════════════════════════════════════\n    function updateNowPlaying() {\n      if (!playlist.length) {\n        albumArt.style.display = 'none';\n        artPlaceholder.style.display = 'flex';\n        npTitle.textContent = '–';\n        npDate.textContent  = '';\n        return;\n      }\n\n      const t = playlist[currentIdx];\n\n      if (t.art) {\n        albumArt.src = t.art;\n        albumArt.style.display = 'block';\n        artPlaceholder.style.display = 'none';\n      } else {\n        albumArt.style.display = 'none';\n        artPlaceholder.style.display = 'flex';\n      }\n\n      npTitle.textContent = t.title || '–';\n      npDate.textContent  = t.date  || '';\n\n      document.querySelectorAll('.track-item').forEach((el, i) => {\n        el.classList.toggle('active', i === currentIdx);\n      });\n    }\n\n    function updatePlayIcon() {\n      iconPlay.style.display  = isPlaying ? 'none'  : 'block';\n      iconPause.style.display = isPlaying ? 'block' : 'none';\n    }\n\n    function updateProgress() {\n      const dur = audio.duration || 0;\n      const cur = audio.currentTime || 0;\n      const pct = dur > 0 ? (cur / dur) * 100 : 0;\n      scrubber.style.width = `calc(${pct}% - 2px)`;\n      timeCurrent.textContent   = fmt(cur);\n      timeRemaining.textContent = `-${fmt(dur - cur)}`;\n    }\n\n    // ══════════════════════════════════════════════\n    //  PLAYLIST RENDER\n    // ══════════════════════════════════════════════\n    function renderPlaylist() {\n      trackList.innerHTML = '';\n\n      if (!playlist.length) {\n        const empty = document.createElement('div');\n        empty.className = 'track-list-empty';\n        empty.textContent = 'No tracks found.';\n        trackList.appendChild(empty);\n        return;\n      }\n\n      playlist.forEach((t, i) => {\n        const item = document.createElement('div');\n        item.className = 'track-item' + (i === currentIdx ? ' active' : '');\n        item.dataset.index = i;\n\n        // Thumbnail — prefer icon file, fall back to color placeholder\n        let thumbHtml;\n        if (t.thumb) {\n          thumbHtml = `<img class=\"ti-thumb\" src=\"${esc(t.thumb)}\" alt=\"\" loading=\"lazy\"\n            onerror=\"this.outerHTML='<div class=\\\\'ti-thumb-placeholder ${thumbColorFor(i)}\\\\'>${esc(t.title[0] || '♪')}</div>'\">`;\n        } else if (t.color) {\n          thumbHtml = `<div class=\"ti-thumb-placeholder\" style=\"background:${esc(t.color)}\">${esc(t.title[0] || '♪')}</div>`;\n        } else {\n          thumbHtml = `<div class=\"ti-thumb-placeholder ${thumbColorFor(i)}\">${esc(t.title[0] || '♪')}</div>`;\n        }\n\n        const nowTag = i === currentIdx\n          ? `<span style=\"display:inline-block;margin-left:6px;font-size:9px;letter-spacing:0.04em;opacity:0.55;font-style:normal;\">▶ NOW</span>`\n          : '';\n        const noAudio = !t.src\n          ? ` <span style=\"opacity:0.3;font-size:10px;font-style:normal;\">no audio</span>`\n          : '';\n\n        item.innerHTML = `\n          <div class=\"ti-info\">\n            <p class=\"ti-title\">${esc(t.title)}${nowTag}${noAudio}</p>\n            <p class=\"ti-date\">${esc(t.date || '')}</p>\n          </div>\n          ${thumbHtml}\n        `;\n        item.addEventListener('click', () => { selectTrack(i, true); showView('np'); });\n        trackList.appendChild(item);\n      });\n    }\n\n    // ══════════════════════════════════════════════\n    //  PLAYBACK\n    // ══════════════════════════════════════════════\n    function selectTrack(idx, autoPlay = false) {\n      currentIdx = idx;\n      const t = playlist[idx];\n\n      if (t && t.src) {\n        const wasPlaying = isPlaying;\n        audio.src = t.src;\n        if (autoPlay || wasPlaying) audio.play().catch(() => {});\n      } else {\n        audio.removeAttribute('src');\n        audio.load();\n      }\n\n      updateNowPlaying();\n      updateProgress();\n    }\n\n    function togglePlay() {\n      if (!playlist.length) return;\n      const t = playlist[currentIdx];\n      if (!t || !t.src) return;\n      if (isPlaying) { audio.pause(); } else { audio.play().catch(e => console.warn(e)); }\n    }\n\n    function playNext() {\n      if (!playlist.length) return;\n      const next = (currentIdx + 1) % playlist.length;\n      selectTrack(next);\n      if (playlist[next]?.src) audio.play().catch(() => {});\n    }\n\n    function playPrev() {\n      if (!playlist.length) return;\n      if (audio.currentTime > 3) { audio.currentTime = 0; return; }\n      const prev = (currentIdx - 1 + playlist.length) % playlist.length;\n      selectTrack(prev);\n      if (playlist[prev]?.src) audio.play().catch(() => {});\n    }\n\n    // ══════════════════════════════════════════════\n    //  VIEW SWITCHING\n    // ══════════════════════════════════════════════\n    function showView(view) {\n      if (view === currentView) return;\n      currentView = view;\n      if (view === 'np') {\n        viewPL.classList.replace('view-enter', 'view-exit');\n        viewNP.classList.replace('view-exit', 'view-enter');\n      } else {\n        viewNP.classList.replace('view-enter', 'view-exit');\n        viewPL.classList.replace('view-exit', 'view-enter');\n        renderPlaylist();\n      }\n    }\n\n    // ══════════════════════════════════════════════\n    //  SCRUBBER — click & drag\n    // ══════════════════════════════════════════════\n    function seekTo(clientX) {\n      const rect = timeBar.getBoundingClientRect();\n      const pct  = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));\n      if (audio.duration) audio.currentTime = pct * audio.duration;\n    }\n\n    timeBar.addEventListener('mousedown', e => { draggingScrub = true; seekTo(e.clientX); });\n    document.addEventListener('mousemove', e => { if (draggingScrub) seekTo(e.clientX); });\n    document.addEventListener('mouseup',   () => { draggingScrub = false; });\n    timeBar.addEventListener('touchstart', e => seekTo(e.touches[0].clientX), { passive: true });\n    timeBar.addEventListener('touchmove',  e => seekTo(e.touches[0].clientX), { passive: true });\n\n    // ══════════════════════════════════════════════\n    //  EVENT LISTENERS\n    // ══════════════════════════════════════════════\n    btnPlay.addEventListener('click', togglePlay);\n    btnPrev.addEventListener('click', playPrev);\n    btnNext.addEventListener('click', playNext);\n    btnMenu.addEventListener('click', () => showView(currentView === 'pl' ? 'np' : 'pl'));\n\n    audio.addEventListener('play',           () => { isPlaying = true;  updatePlayIcon(); });\n    audio.addEventListener('pause',          () => { isPlaying = false; updatePlayIcon(); });\n    audio.addEventListener('ended',          () => { isPlaying = false; updatePlayIcon(); playNext(); });\n    audio.addEventListener('timeupdate',     updateProgress);\n    audio.addEventListener('loadedmetadata', updateProgress);\n    audio.addEventListener('error',          () => { isPlaying = false; updatePlayIcon(); });\n\n    // Keyboard shortcuts\n    document.addEventListener('keydown', e => {\n      if (['INPUT', 'TEXTAREA', 'SELECT'].includes(e.target.tagName)) return;\n      switch (e.code) {\n        case 'Space':      e.preventDefault(); togglePlay(); break;\n        case 'ArrowRight': playNext(); break;\n        case 'ArrowLeft':  playPrev(); break;\n        case 'KeyM':       showView(currentView === 'pl' ? 'np' : 'pl'); break;\n        case 'ArrowUp':\n          audio.volume = Math.min(1, audio.volume + 0.05);\n          break;\n        case 'ArrowDown':\n          audio.volume = Math.max(0, audio.volume - 0.05);\n          break;\n      }\n    });\n\n    // ══════════════════════════════════════════════\n    //  INIT\n    // ══════════════════════════════════════════════\n    updateNowPlaying();\n    updatePlayIcon();\n    updateProgress();\n\n    // Load remote playlist\n    loadRemotePlaylist().catch(() => {});\n\n  })();\n  </script>\n</body>\n</html>\n","embedURL":""}},"62:3136":{"type":"SVG","id":"62:3136","name":"Streaming Button","absoluteBoundingBox":{"x":2136.0,"y":124.0,"width":48.0,"height":32.0},"isolatedAbsoluteRenderBounds":{"x":2136.0,"y":124.0,"width":48.0,"height":32.0},"relativeTransform":[[1.0,0.0,49.0],[0.0,1.0,0.0]],"size":{"x":48.0,"y":32.0},"fills":[{"opacity":0.25,"blendMode":"NORMAL","type":"SOLID","color":{"r":0.133333340287209,"g":0.133333340287209,"b":0.133333340287209,"a":1.0},"visible":true}],"strokeAlign":"INSIDE","strokes":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[{"id":{"sessionID":62,"localID":3180},"event":{"interactionType":"ON_CLICK"},"actions":[{"transitionNodeID":{"sessionID":52,"localID":963},"connectionType":"INTERNAL_NODE","navigationType":"NAVIGATE","connectionURL":"/streaming"}],"isDeleted":false,"stateManagementVersion":1}],"hash":"e1a1bd273f77775fb7c34e7f784504d8064f34a6"},"39:792":{"type":"FRAME","id":"39:792","name":"Desktop","absoluteBoundingBox":{"x":64.0,"y":100.0,"width":1280.0,"height":670.0},"isolatedAbsoluteRenderBounds":{"x":64.0,"y":100.0,"width":1280.0,"height":670.0},"relativeTransform":[[1.0,0.0,64.0],[0.0,1.0,100.0]],"size":{"x":1280.0,"y":670.0},"fills":[{"blendMode":"NORMAL","type":"GRADIENT_RADIAL","transform":[[-6.68296885459475e-17,0.5,0.5],[-0.5,3.06161713146292e-17,0.75]],"gradientStops":[{"color":{"r":0.358411818742752,"g":0.35686719417572,"b":0.425987839698792,"a":1.0},"position":0.0},{"color":{"r":0.201499506831169,"g":0.201499506831169,"b":0.269381016492844,"a":1.0},"position":1.0}],"visible":true,"opacity":1.0}],"strokeAlign":"INSIDE","strokes":[],"effects":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"clipsContent":true,"overflowDirection":"VERTICAL_SCROLLING","layoutMode":"VERTICAL","itemSpacing":8.0,"counterAxisAlignItems":"CENTER","primaryAxisAlignItems":"SPACE_BETWEEN","primaryAxisSizingMode":"FIXED","counterAxisSizingMode":"FIXED","isBreakpointFrame":true,"children":["39:803","42:940","39:815"]},"39:815":{"type":"FRAME","id":"39:815","name":"Frame 2147236346","absoluteBoundingBox":{"x":64.0,"y":706.0,"width":1280.0,"height":64.0},"isolatedAbsoluteRenderBounds":{"x":64.0,"y":706.0,"width":1280.0,"height":64.0},"relativeTransform":[[1.0,0.0,0.0],[0.0,1.0,606.0]],"size":{"x":1280.0,"y":64.0},"fills":[],"opacity":0.75,"strokeAlign":"INSIDE","layoutAlign":"STRETCH","strokes":[],"effects":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"paddingTop":24.0,"paddingRight":24.0,"paddingBottom":24.0,"paddingLeft":24.0,"layoutMode":"HORIZONTAL","itemSpacing":199.0,"counterAxisAlignItems":"CENTER","primaryAxisSizingMode":"FIXED","children":["39:816"]},"62:3134":{"type":"SVG","id":"62:3134","name":"Player Button","absoluteBoundingBox":{"x":2087.0,"y":124.0,"width":48.0,"height":32.0},"isolatedAbsoluteRenderBounds":{"x":2087.0,"y":124.0,"width":48.0,"height":32.0},"relativeTransform":[[1.0,0.0,0.0],[0.0,1.0,0.0]],"size":{"x":48.0,"y":32.0},"fills":[{"opacity":0.75,"blendMode":"NORMAL","type":"SOLID","color":{"r":0.133333340287209,"g":0.133333340287209,"b":0.133333340287209,"a":1.0},"visible":true}],"strokeAlign":"INSIDE","strokes":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"hash":"0a24a132e07e2ff94ca6523ec44f14ca60cd51ac"},"62:3126":{"type":"SVG","id":"62:3126","name":"Streaming Button","absoluteBoundingBox":{"x":2575.0,"y":124.0,"width":48.0,"height":32.0},"isolatedAbsoluteRenderBounds":{"x":2575.0,"y":124.0,"width":48.0,"height":32.0},"relativeTransform":[[1.0,0.0,49.0],[0.0,1.0,0.0]],"size":{"x":48.0,"y":32.0},"fills":[{"opacity":0.25,"blendMode":"NORMAL","type":"SOLID","color":{"r":0.133333340287209,"g":0.133333340287209,"b":0.133333340287209,"a":1.0},"visible":true}],"strokeAlign":"INSIDE","strokes":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[{"id":{"sessionID":62,"localID":3181},"event":{"interactionType":"ON_CLICK"},"actions":[{"transitionNodeID":{"sessionID":52,"localID":963},"connectionType":"INTERNAL_NODE","navigationType":"NAVIGATE","connectionURL":"/streaming"}],"isDeleted":false,"stateManagementVersion":1}],"hash":"e1a1bd273f77775fb7c34e7f784504d8064f34a6"},"9:45":{"type":"TEXT","id":"9:45","name":"Text","absoluteBoundingBox":{"x":0.0,"y":0.0,"width":14.0,"height":12.0},"isolatedAbsoluteRenderBounds":{"x":0.320000022649765,"y":2.79999971389771,"width":12.2089071273804,"height":9.35000038146973},"relativeTransform":[[1.0,0.0,0.0],[0.0,1.0,0.0]],"size":{"x":14.0,"y":12.0},"fills":[{"blendMode":"NORMAL","type":"SOLID","color":{"r":0.0,"g":0.0,"b":0.0,"a":1.0},"visible":true,"opacity":1.0}],"strokeAlign":"INSIDE","strokes":[],"strokeWeight":0.0,"effects":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"characterStyleOverrides":[],"characters":"Ag","lineIndentations":[0],"lineTypes":["NONE"],"listStartOffsets":[],"lineStyleOverrides":[0],"lineTextDirections":null,"textAutoResize":"WIDTH_AND_HEIGHT","style":{"fontFamily":"Instrument Sans","fontPostScriptName":"InstrumentSans-Medium","fontStyle":"Medium","textAutoResize":"WIDTH_AND_HEIGHT","fontVariantPosition":"NORMAL","fontSize":10.0,"textAlignHorizontal":"LEFT","textAlignVertical":"TOP","letterSpacing":0.0,"letterSpacingValue":0.0,"letterSpacingUnit":"PERCENT","lineHeightPx":12.2000007629395,"lineHeightPercent":100.0,"lineHeightUnit":"INTRINSIC_%","paragraphSpacing":0,"paragraphIndent":0,"listSpacing":0,"italic":false,"textCase":"ORIGINAL","textDecoration":"NONE","textDecorationSkipInk":false,"textDecorationStyle":"solid","textTruncation":"DISABLED","lineHeightPercentFontSize":100},"styleOverrideTable":{}},"39:836":{"type":"FRAME","id":"39:836","name":"Tablet","absoluteBoundingBox":{"x":1408.0,"y":100.0,"width":800.0,"height":670.0},"isolatedAbsoluteRenderBounds":{"x":1408.0,"y":100.0,"width":800.0,"height":670.0},"relativeTransform":[[1.0,0.0,1408.0],[0.0,1.0,100.0]],"size":{"x":800.0,"y":670.0},"fills":[{"blendMode":"NORMAL","type":"GRADIENT_RADIAL","transform":[[-6.68296885459475e-17,0.5,0.5],[-0.5,3.06161713146292e-17,0.75]],"gradientStops":[{"color":{"r":0.358411818742752,"g":0.35686719417572,"b":0.425987839698792,"a":1.0},"position":0.0},{"color":{"r":0.201499506831169,"g":0.201499506831169,"b":0.269381016492844,"a":1.0},"position":1.0}],"visible":true,"opacity":1.0}],"strokeAlign":"INSIDE","strokes":[],"effects":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"clipsContent":true,"overflowDirection":"VERTICAL_SCROLLING","layoutMode":"VERTICAL","itemSpacing":8.0,"counterAxisAlignItems":"CENTER","primaryAxisAlignItems":"SPACE_BETWEEN","primaryAxisSizingMode":"FIXED","counterAxisSizingMode":"FIXED","isBreakpointFrame":true,"children":["39:837","42:945","39:847"]},"42:940":{"type":"FRAME","id":"42:940","name":"Player","absoluteBoundingBox":{"x":64.0,"y":188.0,"width":1280.0,"height":510.0},"isolatedAbsoluteRenderBounds":{"x":64.0,"y":188.0,"width":1280.0,"height":510.0},"relativeTransform":[[1.0,0.0,0.0],[0.0,1.0,88.0]],"size":{"x":1280.0,"y":510.0},"fills":[],"strokeAlign":"INSIDE","layoutAlign":"STRETCH","strokes":[],"effects":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"layoutMode":"VERTICAL","itemSpacing":8.0,"counterAxisAlignItems":"CENTER","primaryAxisAlignItems":"CENTER","counterAxisSizingMode":"FIXED","children":["42:941"]},"39:838":{"type":"TEXT","id":"39:838","name":"DARTFORM","absoluteBoundingBox":{"x":1432.0,"y":129.5,"width":101.0,"height":21.0},"isolatedAbsoluteRenderBounds":{"x":1432.30395507812,"y":133.740005493164,"width":99.5926513671875,"height":11.9039916992188},"relativeTransform":[[1.0,0.0,24.0],[0.0,1.0,29.5]],"size":{"x":101.0,"y":21.0},"fills":[{"blendMode":"NORMAL","type":"SOLID","color":{"r":1.0,"g":1.0,"b":1.0,"a":1.0},"visible":true,"opacity":1.0}],"strokeAlign":"OUTSIDE","strokes":[],"effects":[],"accessibleHTMLTag":"MAIN","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"characterStyleOverrides":[],"characters":"DARTFORM","lineIndentations":[0],"lineTypes":["NONE"],"listStartOffsets":[],"lineStyleOverrides":[0],"lineTextDirections":null,"textAutoResize":"WIDTH_AND_HEIGHT","style":{"fontFamily":"Instrument Serif","fontPostScriptName":"InstrumentSerif-Regular","fontStyle":"Regular","textAutoResize":"WIDTH_AND_HEIGHT","fontVariantPosition":"NORMAL","fontSize":16.0,"textAlignHorizontal":"LEFT","textAlignVertical":"TOP","letterSpacing":5.12,"letterSpacingValue":32.0,"letterSpacingUnit":"PERCENT","lineHeightPx":20.7999992370605,"lineHeightPercent":100.0,"lineHeightUnit":"INTRINSIC_%","paragraphSpacing":0,"paragraphIndent":0,"listSpacing":0,"italic":false,"textCase":"ORIGINAL","textDecoration":"NONE","textDecorationSkipInk":false,"textDecorationStyle":"solid","textTruncation":"DISABLED","lineHeightPercentFontSize":100},"styleOverrideTable":{}},"62:3124":{"type":"SVG","id":"62:3124","name":"Player Button","absoluteBoundingBox":{"x":2526.0,"y":124.0,"width":48.0,"height":32.0},"isolatedAbsoluteRenderBounds":{"x":2526.0,"y":124.0,"width":48.0,"height":32.0},"relativeTransform":[[1.0,0.0,0.0],[0.0,1.0,0.0]],"size":{"x":48.0,"y":32.0},"fills":[{"opacity":0.75,"blendMode":"NORMAL","type":"SOLID","color":{"r":0.133333340287209,"g":0.133333340287209,"b":0.133333340287209,"a":1.0},"visible":true}],"strokeAlign":"INSIDE","strokes":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"hash":"0a24a132e07e2ff94ca6523ec44f14ca60cd51ac"},"39:803":{"type":"FRAME","id":"39:803","name":"Frame 2147236341","absoluteBoundingBox":{"x":64.0,"y":100.0,"width":1280.0,"height":80.0},"isolatedAbsoluteRenderBounds":{"x":64.0,"y":100.0,"width":1280.0,"height":80.0},"relativeTransform":[[1.0,0.0,0.0],[0.0,1.0,0.0]],"size":{"x":1280.0,"y":80.0},"fills":[],"strokeAlign":"INSIDE","layoutAlign":"STRETCH","strokes":[],"effects":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"paddingTop":24.0,"paddingRight":24.0,"paddingBottom":24.0,"paddingLeft":24.0,"layoutMode":"HORIZONTAL","itemSpacing":199.0,"counterAxisAlignItems":"CENTER","primaryAxisAlignItems":"SPACE_BETWEEN","primaryAxisSizingMode":"FIXED","children":["39:804","62:3128"]},"39:804":{"type":"TEXT","id":"39:804","name":"DARTFORM","absoluteBoundingBox":{"x":88.0,"y":129.5,"width":101.0,"height":21.0},"isolatedAbsoluteRenderBounds":{"x":88.3040008544922,"y":133.740005493164,"width":99.5926208496094,"height":11.9039916992188},"relativeTransform":[[1.0,0.0,24.0],[0.0,1.0,29.5]],"size":{"x":101.0,"y":21.0},"fills":[{"blendMode":"NORMAL","type":"SOLID","color":{"r":1.0,"g":1.0,"b":1.0,"a":1.0},"visible":true,"opacity":1.0}],"strokeAlign":"OUTSIDE","strokes":[],"effects":[],"accessibleHTMLTag":"MAIN","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"characterStyleOverrides":[],"characters":"DARTFORM","lineIndentations":[0],"lineTypes":["NONE"],"listStartOffsets":[],"lineStyleOverrides":[0],"lineTextDirections":null,"textAutoResize":"WIDTH_AND_HEIGHT","style":{"fontFamily":"Instrument Serif","fontPostScriptName":"InstrumentSerif-Regular","fontStyle":"Regular","textAutoResize":"WIDTH_AND_HEIGHT","fontVariantPosition":"NORMAL","fontSize":16.0,"textAlignHorizontal":"LEFT","textAlignVertical":"TOP","letterSpacing":5.12,"letterSpacingValue":32.0,"letterSpacingUnit":"PERCENT","lineHeightPx":20.7999992370605,"lineHeightPercent":100.0,"lineHeightUnit":"INTRINSIC_%","paragraphSpacing":0,"paragraphIndent":0,"listSpacing":0,"italic":false,"textCase":"ORIGINAL","textDecoration":"NONE","textDecorationSkipInk":false,"textDecorationStyle":"solid","textTruncation":"DISABLED","lineHeightPercentFontSize":100},"styleOverrideTable":{}},"62:3131":{"type":"SVG","id":"62:3131","name":"Streaming Button","absoluteBoundingBox":{"x":1272.0,"y":124.0,"width":48.0,"height":32.0},"isolatedAbsoluteRenderBounds":{"x":1272.0,"y":124.0,"width":48.0,"height":32.0},"relativeTransform":[[1.0,0.0,49.0],[0.0,1.0,0.0]],"size":{"x":48.0,"y":32.0},"fills":[{"opacity":0.25,"blendMode":"NORMAL","type":"SOLID","color":{"r":0.133333340287209,"g":0.133333340287209,"b":0.133333340287209,"a":1.0},"visible":true}],"strokeAlign":"INSIDE","strokes":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[{"id":{"sessionID":62,"localID":3179},"event":{"interactionType":"ON_CLICK"},"actions":[{"transitionNodeID":{"sessionID":52,"localID":963},"connectionType":"INTERNAL_NODE","navigationType":"NAVIGATE","connectionURL":"/streaming"}],"isDeleted":false,"stateManagementVersion":1}],"hash":"e1a1bd273f77775fb7c34e7f784504d8064f34a6"},"62:3128":{"type":"FRAME","id":"62:3128","name":"Menu","absoluteBoundingBox":{"x":1223.0,"y":124.0,"width":97.0,"height":32.0},"isolatedAbsoluteRenderBounds":{"x":1223.0,"y":124.0,"width":97.0,"height":32.0},"relativeTransform":[[1.0,0.0,1159.0],[0.0,1.0,24.0]],"size":{"x":97.0,"y":32.0},"fills":[],"strokeAlign":"INSIDE","strokes":[],"effects":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"layoutMode":"HORIZONTAL","itemSpacing":1.0,"counterAxisAlignItems":"CENTER","children":["62:3129","62:3131"]},"39:873":{"type":"TEXT","id":"39:873","name":"©2026","absoluteBoundingBox":{"x":2296.0,"y":730.0,"width":46.0,"height":16.0},"isolatedAbsoluteRenderBounds":{"x":2296.47998046875,"y":733.179992675781,"width":44.50537109375,"height":9.0},"relativeTransform":[[1.0,0.0,24.0],[0.0,1.0,24.0]],"size":{"x":46.0,"y":16.0},"fills":[{"blendMode":"NORMAL","type":"SOLID","color":{"r":1.0,"g":1.0,"b":1.0,"a":1.0},"visible":true,"opacity":1.0}],"strokeAlign":"OUTSIDE","strokes":[],"effects":[],"accessibleHTMLTag":"MAIN","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"characterStyleOverrides":[],"characters":"©2026","lineIndentations":[0],"lineTypes":["NONE"],"listStartOffsets":[],"lineStyleOverrides":[0],"lineTextDirections":null,"textAutoResize":"WIDTH_AND_HEIGHT","style":{"fontFamily":"Instrument Serif","fontPostScriptName":"InstrumentSerif-Regular","fontStyle":"Regular","textAutoResize":"WIDTH_AND_HEIGHT","fontVariantPosition":"NORMAL","fontSize":12.0,"textAlignHorizontal":"LEFT","textAlignVertical":"TOP","letterSpacing":3.84,"letterSpacingValue":32.0,"letterSpacingUnit":"PERCENT","lineHeightPx":15.5999994277954,"lineHeightPercent":100.0,"lineHeightUnit":"INTRINSIC_%","paragraphSpacing":0,"paragraphIndent":0,"listSpacing":0,"italic":false,"textCase":"ORIGINAL","textDecoration":"NONE","textDecorationSkipInk":false,"textDecorationStyle":"solid","textTruncation":"DISABLED","lineHeightPercentFontSize":100},"styleOverrideTable":{}},"42:941":{"type":"WIDGET","id":"42:941","name":"Embed 1","absoluteBoundingBox":{"x":544.0,"y":188.0,"width":320.0,"height":510.0},"targetAspectRatio":{"x":320.0,"y":510.0},"isolatedAbsoluteRenderBounds":{"x":544.0,"y":188.0,"width":320.0,"height":510.0},"relativeTransform":[[1.0,0.0,480.0],[0.0,1.0,0.0]],"size":{"x":320.0,"y":510.0},"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"widgetType":"GENERIC","syncedState":{"embedAllowFullscreen":"false","embedCodeType":"html","embedIframeHtml":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Player</title>\n\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n  <link href=\"https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap\" rel=\"stylesheet\">\n  <style>\n    html, body {\n      width: 100%;\n    }\n\n    body {\n      font-family: 'Instrument Serif', Georgia, serif;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    /* ── OUTER SHELL ─────────────────────────────── */\n    .player-shell {\n      width: 320px;\n      display: flex;\n      flex-direction: column;\n      gap: 24px;\n      padding: 24px;\n      background: linear-gradient(to bottom, #f4f4f4 0%, #dddddd 100%);\n      border: 0.5px solid white;\n      border-radius: 16px;\n      box-shadow:\n        inset -4px -4px 8px 0px rgba(255,255,255,1),\n        inset 4px 4px 8px 0px rgba(0,0,0,0.16);\n      position: relative;\n    }\n\n    /* ── DEVICE DISPLAY ──────────────────────────── */\n    .display {\n      width: 100%;\n      background: linear-gradient(160deg, #e1dfd8 0%, #d4d7ce 55%, #c4cacd 100%);\n      border-radius: 8px;\n      overflow: hidden;\n      position: relative;\n      flex-shrink: 0;\n    }\n    .display::after {\n      content: '';\n      position: absolute;\n      inset: -0.5px;\n      border-radius: inherit;\n      box-shadow: inset 1px 1px 4px 0px rgba(0,0,0,0.25);\n      pointer-events: none;\n      z-index: 2;\n    }\n\n    /* ── NOW PLAYING DISPLAY ─────────────────────── */\n    .np-display {\n      padding: 8px 8px 4px 8px;\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      min-height: 388px;\n    }\n\n    .album-art {\n      width: 100%;\n      aspect-ratio: 1 / 1;\n      border-radius: 4px;\n      box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.32);\n      object-fit: cover;\n      display: block;\n      background: #ccc;\n      flex-shrink: 0;\n    }\n\n    .album-art-placeholder {\n      width: 100%;\n      aspect-ratio: 1 / 1;\n      border-radius: 4px;\n      box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.32);\n      background: linear-gradient(135deg, #d0cec7 0%, #b8bbbe 100%);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n    }\n\n    .playback-ui {\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n      padding: 8px 12px 12px 12px;\n    }\n\n    .track-info {\n      text-align: center;\n      text-shadow: 1px 1px 1px rgba(0,0,0,0.16);\n      white-space: nowrap;\n    }\n\n    .track-title-np {\n      font-size: 20px;\n      color: #222;\n      font-style: normal;\n      line-height: normal;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .track-date-np {\n      font-size: 14px;\n      color: #444;\n      font-style: italic;\n      line-height: normal;\n    }\n\n    .playback-details {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n    }\n\n    .time-bar {\n      background: rgba(34,34,34,0.25);\n      border: 1px solid #222;\n      height: 8px;\n      border-radius: 4px;\n      overflow: hidden;\n      position: relative;\n      cursor: pointer;\n      flex-shrink: 0;\n      box-shadow: 1px 1px 1px rgba(0,0,0,0.16);\n    }\n\n    .scrubber {\n      position: absolute;\n      left: 1px;\n      top: 1px;\n      height: 4px;\n      width: 0%;\n      background: #222;\n      border-radius: 3px;\n      pointer-events: none;\n    }\n\n    .time-row {\n      display: flex;\n      justify-content: space-between;\n      font-size: 12px;\n      color: #222;\n      font-style: normal;\n      line-height: normal;\n      white-space: nowrap;\n      text-shadow: 1px 1px 1px rgba(0,0,0,0.16);\n    }\n\n\n    /* ── PLAYLIST DISPLAY ────────────────────────── */\n    .pl-display {\n      height: 388px;\n      padding: 24px;\n      display: flex;\n      flex-direction: column;\n      gap: 20px;\n    }\n\n    .pl-header {\n      font-size: 20px;\n      color: #222;\n      font-style: normal;\n      line-height: normal;\n      text-align: center;\n      text-shadow: 1px 1px 1px rgba(0,0,0,0.16);\n      white-space: nowrap;\n      flex-shrink: 0;\n    }\n\n    .track-list {\n      flex: 1;\n      overflow-y: auto;\n      display: flex;\n      flex-direction: column;\n      gap: 0;\n    }\n    .track-list::-webkit-scrollbar { width: 3px; }\n    .track-list::-webkit-scrollbar-thumb {\n      background: rgba(34,34,34,0.25);\n      border-radius: 2px;\n    }\n\n    .track-item {\n      display: flex;\n      gap: 8px;\n      align-items: center;\n      cursor: pointer;\n      padding: 8px 4px 4px 4px;\n      border-bottom: 0.5px solid rgba(34,34,34,0.08);\n      transition: background 0.12s;\n      border-radius: 3px;\n    }\n    .track-item:last-child { border-bottom: none; }\n    .track-item:hover { background: rgba(34,34,34,0.05); }\n    .track-item.active .ti-title { color: #111; }\n    .track-item.active { background: rgba(34,34,34,0.06); }\n\n    .ti-info {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n      gap: 1px;\n    }\n\n    .ti-title {\n      font-size: 16px;\n      color: #222;\n      font-style: normal;\n      line-height: normal;\n      text-shadow: 1px 1px 1px rgba(0,0,0,0.16);\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .ti-date {\n      font-size: 12px;\n      color: #444;\n      font-style: italic;\n      line-height: normal;\n      text-shadow: 1px 1px 1px rgba(0,0,0,0.08);\n    }\n\n    .ti-thumb {\n      width: 32px; height: 32px;\n      border-radius: 50%;\n      object-fit: cover;\n      flex-shrink: 0;\n      box-shadow:\n        inset 2px 2px 2px 0px white,\n        inset -2px -2px 2px 0px rgba(0,0,0,0.5);\n      background: #bbb;\n    }\n\n    .ti-thumb-placeholder {\n      width: 32px; height: 32px;\n      border-radius: 50%;\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 13px;\n      color: rgba(255,255,255,0.9);\n      box-shadow:\n        inset 2px 2px 2px 0px white,\n        inset -2px -2px 2px 0px rgba(0,0,0,0.5);\n    }\n\n    /* ── CONTROLS BAR ────────────────────────────── */\n    .controls {\n      display: flex;\n      gap: 16px;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n    }\n\n    .ctrl-btn {\n      width: 48px; height: 48px;\n      border-radius: 32px;\n      border: none;\n      background: transparent;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      cursor: pointer;\n      padding: 0;\n      transition: opacity 0.12s, transform 0.08s;\n      flex-shrink: 0;\n      outline: none;\n    }\n    .ctrl-btn:active { opacity: 0.65; transform: scale(0.95); }\n\n    .hamburger-line {\n      width: 20px;\n      height: 2px;\n      background: #555;\n      border-radius: 1px;\n      border: 0.5px solid rgba(255,255,255,0.8);\n      box-shadow: 0 0 8px rgba(255,255,255,0.7), inset 0 1px 1px rgba(0,0,0,0.2);\n    }\n\n    /* ── SCREEN TRANSITION ───────────────────────── */\n    .screen-stack {\n      position: relative;\n    }\n    .view {\n      transition: opacity 0.1s ease;\n    }\n    .view-enter { opacity: 1; }\n    .view-exit {\n      opacity: 0;\n      pointer-events: none;\n      position: absolute;\n      top: 0; left: 0; right: 0;\n    }\n\n    /* ── RESPONSIVE ──────────────────────────────── */\n    @media (max-width: 360px) {\n      .player-shell { width: 100%; min-width: 280px; }\n    }\n\n    /* ── THUMB GRADIENT COLORS ───────────────────── */\n    .thumb-color-0 { background: linear-gradient(135deg, #e8c4b4 0%, #c4a090 100%); }\n    .thumb-color-1 { background: linear-gradient(135deg, #b4cce8 0%, #90a4c4 100%); }\n    .thumb-color-2 { background: linear-gradient(135deg, #c4e8c4 0%, #90c490 100%); }\n    .thumb-color-3 { background: linear-gradient(135deg, #e8e8b4 0%, #c4c490 100%); }\n    .thumb-color-4 { background: linear-gradient(135deg, #e4b4e8 0%, #c090c4 100%); }\n    .thumb-color-5 { background: linear-gradient(135deg, #b4e8e8 0%, #90c4c4 100%); }\n\n    /* ── PLAYLIST HEADER ROW ──────────────────────── */\n    .pl-header-row {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      flex-shrink: 0;\n    }\n\n    .refresh-pl-btn {\n      background: none;\n      border: none;\n      font-size: 18px;\n      color: #555;\n      cursor: pointer;\n      padding: 0 2px;\n      line-height: 1;\n      opacity: 0.5;\n      transition: opacity 0.15s, transform 0.2s;\n      flex-shrink: 0;\n    }\n    .refresh-pl-btn:hover { opacity: 0.85; }\n    .refresh-pl-btn.spinning { animation: spin 0.6s linear; }\n    @keyframes spin { to { transform: rotate(360deg); } }\n\n    /* ── EMPTY TRACK LIST ─────────────────────────── */\n    .track-list-empty {\n      flex: 1;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      opacity: 0.4;\n      font-size: 13px;\n      font-style: italic;\n      text-align: center;\n      line-height: 1.5;\n      padding: 8px;\n    }\n  </style>\n</head>\n<body>\n\n  <!-- Hidden audio element -->\n  <audio id=\"audio\" preload=\"auto\"></audio>\n\n  <!-- ── PLAYER SHELL ─────────────────────────── -->\n  <div class=\"player-shell\" id=\"player\">\n\n    <!-- SCREEN STACK -->\n    <div class=\"screen-stack\">\n\n      <!-- NOW PLAYING VIEW -->\n      <div class=\"view view-enter\" id=\"view-np\">\n        <div class=\"display\">\n          <div class=\"np-display\">\n\n            <!-- Album Art -->\n            <img id=\"album-art\" src=\"\" alt=\"Album Art\" class=\"album-art\"\n              onerror=\"this.style.display='none';document.getElementById('art-placeholder').style.display='flex'\"\n              onload=\"this.style.display='block';document.getElementById('art-placeholder').style.display='none'\">\n            <div id=\"art-placeholder\" class=\"album-art-placeholder\" style=\"display:none\">\n              <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" opacity=\"0.4\">\n                <circle cx=\"24\" cy=\"24\" r=\"10\" stroke=\"#555\" stroke-width=\"2\" fill=\"none\"/>\n                <circle cx=\"24\" cy=\"24\" r=\"3\" fill=\"#555\"/>\n                <line x1=\"24\" y1=\"14\" x2=\"24\" y2=\"4\" stroke=\"#555\" stroke-width=\"2\"/>\n              </svg>\n            </div>\n\n            <!-- Playback UI -->\n            <div class=\"playback-ui\">\n              <!-- Track Info -->\n              <div class=\"track-info\">\n                <p id=\"np-title\" class=\"track-title-np\">Côte d'Azur</p>\n                <p id=\"np-date\" class=\"track-date-np\">11 FEB 2026</p>\n              </div>\n              <!-- Progress -->\n              <div class=\"playback-details\">\n                <div class=\"time-bar\" id=\"time-bar\">\n                  <div class=\"scrubber\" id=\"scrubber\"></div>\n                </div>\n                <div class=\"time-row\">\n                  <span id=\"time-current\">0:00</span>\n                  <span id=\"time-remaining\">-0:00</span>\n                </div>\n              </div>\n\n            </div>\n\n          </div>\n        </div>\n      </div>\n\n      <!-- PLAYLIST VIEW -->\n      <div class=\"view view-exit\" id=\"view-pl\">\n        <div class=\"display\">\n          <div class=\"pl-display\">\n            <div class=\"pl-header-row\">\n              <p class=\"pl-header\">Playlist</p>\n            </div>\n            <div class=\"track-list\" id=\"track-list\"></div>\n          </div>\n        </div>\n      </div>\n\n    </div><!-- /screen-stack -->\n\n    <!-- CONTROLS -->\n    <div class=\"controls\">\n\n      <!-- Prev -->\n      <button class=\"ctrl-btn\" id=\"btn-prev\" title=\"Previous (←)\">\n        <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <rect x=\"0.25\" y=\"0.25\" width=\"47.5\" height=\"47.5\" rx=\"23.75\" stroke=\"url(#back_border)\" stroke-width=\"0.5\"/>\n          <g filter=\"url(#back_f1)\">\n            <path d=\"M14.0667 23.7L21.4 18.2C22.0592 17.7056 23 18.176 23 19V30C23 30.824 22.0592 31.2944 21.4 30.8L14.0667 25.3C13.5333 24.9 13.5333 24.1 14.0667 23.7Z\" fill=\"#555555\"/>\n            <path d=\"M22.75 19C22.75 18.382 22.0442 18.0296 21.5498 18.4004L14.2168 23.9004C13.8169 24.2004 13.8169 24.7996 14.2168 25.0996L21.5498 30.5996C22.0442 30.9704 22.75 30.618 22.75 30V19Z\" stroke=\"url(#back_s1)\" style=\"mix-blend-mode:soft-light\" stroke-width=\"0.5\"/>\n          </g>\n          <g filter=\"url(#back_f2)\">\n            <path d=\"M24.0667 23.7L31.4 18.2C32.0592 17.7056 33 18.176 33 19V30C33 30.824 32.0592 31.2944 31.4 30.8L24.0667 25.3C23.5333 24.9 23.5333 24.1 24.0667 23.7Z\" fill=\"#555555\"/>\n            <path d=\"M32.75 19C32.75 18.382 32.0442 18.0296 31.5498 18.4004L24.2168 23.9004C23.8169 24.2004 23.8169 24.7996 24.2168 25.0996L31.5498 30.5996C32.0442 30.9704 32.75 30.618 32.75 30V19Z\" stroke=\"url(#back_s2)\" style=\"mix-blend-mode:soft-light\" stroke-width=\"0.5\"/>\n          </g>\n          <defs>\n            <filter id=\"back_f1\" x=\"5.6665\" y=\"9.99817\" width=\"25.3335\" height=\"29.0037\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n              <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset/><feGaussianBlur stdDeviation=\"4\"/><feComposite in2=\"hardAlpha\" operator=\"out\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow\" result=\"shape\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dx=\"1\" dy=\"2\"/><feGaussianBlur stdDeviation=\"0.5\"/><feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0\"/><feBlend mode=\"normal\" in2=\"shape\" result=\"effect2_innerShadow\"/>\n            </filter>\n            <filter id=\"back_f2\" x=\"15.6665\" y=\"9.99817\" width=\"25.3335\" height=\"29.0037\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n              <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset/><feGaussianBlur stdDeviation=\"4\"/><feComposite in2=\"hardAlpha\" operator=\"out\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow2\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow2\" result=\"shape\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dx=\"1\" dy=\"2\"/><feGaussianBlur stdDeviation=\"0.5\"/><feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0\"/><feBlend mode=\"normal\" in2=\"shape\" result=\"effect2_innerShadow2\"/>\n            </filter>\n            <linearGradient id=\"back_border\" x1=\"24\" y1=\"0\" x2=\"24\" y2=\"48\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"white\"/><stop offset=\"1\" stop-color=\"#9B9B9B\"/></linearGradient>\n            <linearGradient id=\"back_s1\" x1=\"18\" y1=\"17\" x2=\"18\" y2=\"32\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"white\"/><stop offset=\"1\" stop-color=\"#C3C3C3\"/></linearGradient>\n            <linearGradient id=\"back_s2\" x1=\"28\" y1=\"17\" x2=\"28\" y2=\"32\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"white\"/><stop offset=\"1\" stop-color=\"#C3C3C3\"/></linearGradient>\n          </defs>\n        </svg>\n      </button>\n\n      <!-- Menu / Playlist -->\n      <button class=\"ctrl-btn\" id=\"btn-menu\" title=\"Playlist (M)\">\n        <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <rect x=\"0.25\" y=\"0.25\" width=\"47.5\" height=\"47.5\" rx=\"23.75\" stroke=\"url(#menu_border)\" stroke-width=\"0.5\"/>\n          <g filter=\"url(#menu_f1)\">\n            <rect x=\"14\" y=\"17\" width=\"20\" height=\"2\" rx=\"1\" fill=\"#555555\"/>\n            <rect x=\"14.25\" y=\"17.25\" width=\"19.5\" height=\"1.5\" rx=\"0.75\" stroke=\"url(#menu_s1)\" style=\"mix-blend-mode:soft-light\" stroke-width=\"0.5\"/>\n          </g>\n          <g filter=\"url(#menu_f2)\">\n            <rect x=\"14\" y=\"23\" width=\"20\" height=\"2\" rx=\"1\" fill=\"#555555\"/>\n            <rect x=\"14.25\" y=\"23.25\" width=\"19.5\" height=\"1.5\" rx=\"0.75\" stroke=\"url(#menu_s2)\" style=\"mix-blend-mode:soft-light\" stroke-width=\"0.5\"/>\n          </g>\n          <g filter=\"url(#menu_f3)\">\n            <rect x=\"14\" y=\"29\" width=\"20\" height=\"2\" rx=\"1\" fill=\"#555555\"/>\n            <rect x=\"14.25\" y=\"29.25\" width=\"19.5\" height=\"1.5\" rx=\"0.75\" stroke=\"url(#menu_s3)\" style=\"mix-blend-mode:soft-light\" stroke-width=\"0.5\"/>\n          </g>\n          <defs>\n            <filter id=\"menu_f1\" x=\"6\" y=\"9\" width=\"36\" height=\"18\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n              <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset/><feGaussianBlur stdDeviation=\"4\"/><feComposite in2=\"hardAlpha\" operator=\"out\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow\" result=\"shape\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dx=\"1\" dy=\"2\"/><feGaussianBlur stdDeviation=\"0.5\"/><feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0\"/><feBlend mode=\"normal\" in2=\"shape\" result=\"effect2_innerShadow\"/>\n            </filter>\n            <filter id=\"menu_f2\" x=\"6\" y=\"15\" width=\"36\" height=\"18\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n              <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset/><feGaussianBlur stdDeviation=\"4\"/><feComposite in2=\"hardAlpha\" operator=\"out\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow2\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow2\" result=\"shape\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dx=\"1\" dy=\"2\"/><feGaussianBlur stdDeviation=\"0.5\"/><feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0\"/><feBlend mode=\"normal\" in2=\"shape\" result=\"effect2_innerShadow2\"/>\n            </filter>\n            <filter id=\"menu_f3\" x=\"6\" y=\"21\" width=\"36\" height=\"18\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n              <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset/><feGaussianBlur stdDeviation=\"4\"/><feComposite in2=\"hardAlpha\" operator=\"out\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow3\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow3\" result=\"shape\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dx=\"1\" dy=\"2\"/><feGaussianBlur stdDeviation=\"0.5\"/><feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0\"/><feBlend mode=\"normal\" in2=\"shape\" result=\"effect2_innerShadow3\"/>\n            </filter>\n            <linearGradient id=\"menu_border\" x1=\"24\" y1=\"0\" x2=\"24\" y2=\"48\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"white\"/><stop offset=\"1\" stop-color=\"#9B9B9B\"/></linearGradient>\n            <linearGradient id=\"menu_s1\" x1=\"24\" y1=\"17\" x2=\"24\" y2=\"19\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"white\"/><stop offset=\"1\" stop-color=\"#C3C3C3\"/></linearGradient>\n            <linearGradient id=\"menu_s2\" x1=\"24\" y1=\"23\" x2=\"24\" y2=\"25\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"white\"/><stop offset=\"1\" stop-color=\"#C3C3C3\"/></linearGradient>\n            <linearGradient id=\"menu_s3\" x1=\"24\" y1=\"29\" x2=\"24\" y2=\"31\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"white\"/><stop offset=\"1\" stop-color=\"#C3C3C3\"/></linearGradient>\n          </defs>\n        </svg>\n      </button>\n\n      <!-- Play / Pause -->\n      <button class=\"ctrl-btn\" id=\"btn-play\" title=\"Play/Pause (Space)\">\n        <!-- PLAY icon (from Play.svg) -->\n        <svg id=\"icon-play\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <rect x=\"0.25\" y=\"0.25\" width=\"47.5\" height=\"47.5\" rx=\"23.75\" stroke=\"url(#play_border)\" stroke-width=\"0.5\"/>\n          <g filter=\"url(#play_f1)\">\n            <path d=\"M32.8014 23.176L19.5665 14.077C18.903 13.6208 18 14.0959 18 14.901V33.099C18 33.9041 18.903 34.3792 19.5665 33.923L32.8014 24.824C33.3794 24.4267 33.3794 23.5733 32.8014 23.176Z\" fill=\"#555555\"/>\n            <path d=\"M18.25 14.9014C18.25 14.2975 18.9272 13.9411 19.4248 14.2832L32.6602 23.3818C33.0934 23.6799 33.0934 24.3201 32.6602 24.6182L19.4248 33.7168C18.9272 34.0589 18.25 33.7025 18.25 33.0986V14.9014Z\" stroke=\"url(#play_s1)\" style=\"mix-blend-mode:soft-light\" stroke-width=\"0.5\"/>\n          </g>\n          <defs>\n            <filter id=\"play_f1\" x=\"10\" y=\"5.89929\" width=\"31.2349\" height=\"36.2014\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n              <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset/><feGaussianBlur stdDeviation=\"4\"/><feComposite in2=\"hardAlpha\" operator=\"out\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow\" result=\"shape\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dx=\"1\" dy=\"2\"/><feGaussianBlur stdDeviation=\"0.5\"/><feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0\"/><feBlend mode=\"normal\" in2=\"shape\" result=\"effect2_innerShadow\"/>\n            </filter>\n            <linearGradient id=\"play_border\" x1=\"24\" y1=\"0\" x2=\"24\" y2=\"48\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"white\"/><stop offset=\"1\" stop-color=\"#9B9B9B\"/></linearGradient>\n            <linearGradient id=\"play_s1\" x1=\"26\" y1=\"13\" x2=\"26\" y2=\"35\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"white\"/><stop offset=\"1\" stop-color=\"#C3C3C3\"/></linearGradient>\n          </defs>\n        </svg>\n        <!-- PAUSE icon (matching style) -->\n        <svg id=\"icon-pause\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"display:none\">\n          <rect x=\"0.25\" y=\"0.25\" width=\"47.5\" height=\"47.5\" rx=\"23.75\" stroke=\"url(#pause_border)\" stroke-width=\"0.5\"/>\n          <g filter=\"url(#pause_f1)\">\n            <rect x=\"15\" y=\"14\" width=\"6\" height=\"20\" rx=\"2.5\" fill=\"#555555\"/>\n            <rect x=\"15.25\" y=\"14.25\" width=\"5.5\" height=\"19.5\" rx=\"2.25\" stroke=\"url(#pause_s1)\" style=\"mix-blend-mode:soft-light\" stroke-width=\"0.5\"/>\n          </g>\n          <g filter=\"url(#pause_f2)\">\n            <rect x=\"27\" y=\"14\" width=\"6\" height=\"20\" rx=\"2.5\" fill=\"#555555\"/>\n            <rect x=\"27.25\" y=\"14.25\" width=\"5.5\" height=\"19.5\" rx=\"2.25\" stroke=\"url(#pause_s2)\" style=\"mix-blend-mode:soft-light\" stroke-width=\"0.5\"/>\n          </g>\n          <defs>\n            <filter id=\"pause_f1\" x=\"7\" y=\"6\" width=\"22\" height=\"36\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n              <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset/><feGaussianBlur stdDeviation=\"4\"/><feComposite in2=\"hardAlpha\" operator=\"out\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow\" result=\"shape\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dx=\"1\" dy=\"2\"/><feGaussianBlur stdDeviation=\"0.5\"/><feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0\"/><feBlend mode=\"normal\" in2=\"shape\" result=\"effect2_innerShadow\"/>\n            </filter>\n            <filter id=\"pause_f2\" x=\"19\" y=\"6\" width=\"22\" height=\"36\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n              <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset/><feGaussianBlur stdDeviation=\"4\"/><feComposite in2=\"hardAlpha\" operator=\"out\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow2\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow2\" result=\"shape\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dx=\"1\" dy=\"2\"/><feGaussianBlur stdDeviation=\"0.5\"/><feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0\"/><feBlend mode=\"normal\" in2=\"shape\" result=\"effect2_innerShadow2\"/>\n            </filter>\n            <linearGradient id=\"pause_border\" x1=\"24\" y1=\"0\" x2=\"24\" y2=\"48\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"white\"/><stop offset=\"1\" stop-color=\"#9B9B9B\"/></linearGradient>\n            <linearGradient id=\"pause_s1\" x1=\"18\" y1=\"14\" x2=\"18\" y2=\"34\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"white\"/><stop offset=\"1\" stop-color=\"#C3C3C3\"/></linearGradient>\n            <linearGradient id=\"pause_s2\" x1=\"30\" y1=\"14\" x2=\"30\" y2=\"34\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"white\"/><stop offset=\"1\" stop-color=\"#C3C3C3\"/></linearGradient>\n          </defs>\n        </svg>\n      </button>\n\n      <!-- Next -->\n      <button class=\"ctrl-btn\" id=\"btn-next\" title=\"Next (→)\">\n        <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <rect x=\"0.25\" y=\"0.25\" width=\"47.5\" height=\"47.5\" rx=\"23.75\" stroke=\"url(#fwd_border)\" stroke-width=\"0.5\"/>\n          <g filter=\"url(#fwd_f1)\">\n            <path d=\"M33.9333 23.2L26.6 17.7C25.9408 17.2056 25 17.676 25 18.5V29.5C25 30.324 25.9408 30.7944 26.6 30.3L33.9333 24.8C34.4667 24.4 34.4667 23.6 33.9333 23.2Z\" fill=\"#555555\"/>\n            <path d=\"M25.25 18.5C25.25 17.882 25.9558 17.5296 26.4502 17.9004L33.7832 23.4004C34.1831 23.7004 34.1831 24.2996 33.7832 24.5996L26.4502 30.0996C25.9558 30.4704 25.25 30.118 25.25 29.5V18.5Z\" stroke=\"url(#fwd_s1)\" style=\"mix-blend-mode:soft-light\" stroke-width=\"0.5\"/>\n          </g>\n          <g filter=\"url(#fwd_f2)\">\n            <path d=\"M23.9333 23.2L16.6 17.7C15.9408 17.2056 15 17.676 15 18.5V29.5C15 30.324 15.9408 30.7944 16.6 30.3L23.9333 24.8C24.4667 24.4 24.4667 23.6 23.9333 23.2Z\" fill=\"#555555\"/>\n            <path d=\"M15.25 18.5C15.25 17.882 15.9558 17.5296 16.4502 17.9004L23.7832 23.4004C24.1831 23.7004 24.1831 24.2996 23.7832 24.5996L16.4502 30.0996C15.9558 30.4704 15.25 30.118 15.25 29.5V18.5Z\" stroke=\"url(#fwd_s2)\" style=\"mix-blend-mode:soft-light\" stroke-width=\"0.5\"/>\n          </g>\n          <defs>\n            <filter id=\"fwd_f1\" x=\"17\" y=\"9.49817\" width=\"25.3335\" height=\"29.0037\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n              <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset/><feGaussianBlur stdDeviation=\"4\"/><feComposite in2=\"hardAlpha\" operator=\"out\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow\" result=\"shape\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dx=\"1\" dy=\"2\"/><feGaussianBlur stdDeviation=\"0.5\"/><feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0\"/><feBlend mode=\"normal\" in2=\"shape\" result=\"effect2_innerShadow\"/>\n            </filter>\n            <filter id=\"fwd_f2\" x=\"7\" y=\"9.49817\" width=\"25.3335\" height=\"29.0037\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n              <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset/><feGaussianBlur stdDeviation=\"4\"/><feComposite in2=\"hardAlpha\" operator=\"out\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow2\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow2\" result=\"shape\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dx=\"1\" dy=\"2\"/><feGaussianBlur stdDeviation=\"0.5\"/><feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0\"/><feBlend mode=\"normal\" in2=\"shape\" result=\"effect2_innerShadow2\"/>\n            </filter>\n            <linearGradient id=\"fwd_border\" x1=\"24\" y1=\"0\" x2=\"24\" y2=\"48\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"white\"/><stop offset=\"1\" stop-color=\"#9B9B9B\"/></linearGradient>\n            <linearGradient id=\"fwd_s1\" x1=\"30\" y1=\"16.5\" x2=\"30\" y2=\"31.5\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"white\"/><stop offset=\"1\" stop-color=\"#C3C3C3\"/></linearGradient>\n            <linearGradient id=\"fwd_s2\" x1=\"20\" y1=\"16.5\" x2=\"20\" y2=\"31.5\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"white\"/><stop offset=\"1\" stop-color=\"#C3C3C3\"/></linearGradient>\n          </defs>\n        </svg>\n      </button>\n\n    </div><!-- /controls -->\n\n  </div><!-- /player-shell -->\n\n  <script>\n  (() => {\n    'use strict';\n\n    // ══════════════════════════════════════════════\n    //  STATE\n    // ══════════════════════════════════════════════\n    let playlist      = [];\n    let currentIdx    = 0;\n    let isPlaying     = false;\n    let currentView   = 'np';   // 'np' | 'pl'\n    let draggingScrub = false;\n    const REMOTE_MEDIA = 'https://pub-0d325ed439be43b8ad5370160e108e47.r2.dev/player/media';\n\n    // ══════════════════════════════════════════════\n    //  DOM REFS\n    // ══════════════════════════════════════════════\n    const audio          = document.getElementById('audio');\n    const albumArt       = document.getElementById('album-art');\n    const artPlaceholder = document.getElementById('art-placeholder');\n    const npTitle        = document.getElementById('np-title');\n    const npDate         = document.getElementById('np-date');\n    const timeCurrent    = document.getElementById('time-current');\n    const timeRemaining  = document.getElementById('time-remaining');\n    const timeBar        = document.getElementById('time-bar');\n    const scrubber       = document.getElementById('scrubber');\n    const trackList      = document.getElementById('track-list');\n    const btnPlay        = document.getElementById('btn-play');\n    const btnPrev        = document.getElementById('btn-prev');\n    const btnNext        = document.getElementById('btn-next');\n    const btnMenu        = document.getElementById('btn-menu');\n    const iconPlay       = document.getElementById('icon-play');\n    const iconPause      = document.getElementById('icon-pause');\n    const viewNP         = document.getElementById('view-np');\n    const viewPL         = document.getElementById('view-pl');\n\n    // ══════════════════════════════════════════════\n    //  HELPERS\n    // ══════════════════════════════════════════════\n    function fmt(sec) {\n      if (isNaN(sec) || sec < 0) sec = 0;\n      const m = Math.floor(sec / 60);\n      const s = Math.floor(sec % 60);\n      return `${m}:${String(s).padStart(2, '0')}`;\n    }\n\n    function esc(str) {\n      return String(str)\n        .replace(/&/g, '&amp;').replace(/</g, '&lt;')\n        .replace(/>/g, '&gt;').replace(/\"/g, '&quot;');\n    }\n\n    // Deterministic placeholder color from track name\n    function placeholderColor(str) {\n      const palette = ['#b5a89a', '#8b7355', '#c4a882', '#9a8578', '#7a6a5e', '#a09080'];\n      let h = 0;\n      for (const c of str) h = (h * 31 + c.charCodeAt(0)) & 0xffff;\n      return palette[h % palette.length];\n    }\n\n    const THUMB_COLORS = [\n      'thumb-color-0', 'thumb-color-1', 'thumb-color-2',\n      'thumb-color-3', 'thumb-color-4', 'thumb-color-5',\n    ];\n\n    function thumbColorFor(idx) {\n      return THUMB_COLORS[idx % THUMB_COLORS.length];\n    }\n\n    // ══════════════════════════════════════════════\n    //  REMOTE SOURCE\n    // ══════════════════════════════════════════════\n    async function loadRemotePlaylist() {\n      try {\n        const res = await fetch(`${REMOTE_MEDIA}/playlist.json`);\n        if (!res.ok) throw new Error(`HTTP ${res.status}`);\n        const folders = await res.json();\n\n        const tracks = (await Promise.all(\n          folders.map(folder => loadRemoteTrack(folder))\n        )).filter(Boolean);\n\n        playlist   = tracks;\n        currentIdx = 0;\n\n        renderPlaylist();\n\n        if (playlist.length > 0) {\n          selectTrack(0, true);\n          updateNowPlaying();\n        } else {\n          albumArt.style.display = 'none';\n          artPlaceholder.style.display = 'flex';\n          npTitle.textContent = '–';\n          npDate.textContent  = '';\n        }\n      } catch (e) {\n        console.warn('Remote playlist load failed:', e);\n      }\n    }\n\n    async function loadRemoteTrack(folder) {\n      try {\n        const base = `${REMOTE_MEDIA}/${folder}`;\n        const res  = await fetch(`${base}/meta.json`);\n        if (!res.ok) throw new Error(`HTTP ${res.status}`);\n        const meta = await res.json();\n\n        return {\n          id:     folder,\n          title:  meta.title  || folder,\n          date:   meta.date   || '',\n          artist: meta.artist || '',\n          color:  meta.color  || placeholderColor(folder),\n          art:    meta.artwork ? `${base}/${meta.artwork}` : null,\n          thumb:  meta.icon   ? `${base}/${meta.icon}`    : null,\n          src:    meta.audio  ? `${base}/${meta.audio}`   : null,\n        };\n      } catch (e) {\n        console.warn('Failed to load remote track:', folder, e);\n        return null;\n      }\n    }\n\n    // ══════════════════════════════════════════════\n    //  NOW PLAYING UI\n    // ══════════════════════════════════════════════\n    function updateNowPlaying() {\n      if (!playlist.length) {\n        albumArt.style.display = 'none';\n        artPlaceholder.style.display = 'flex';\n        npTitle.textContent = '–';\n        npDate.textContent  = '';\n        return;\n      }\n\n      const t = playlist[currentIdx];\n\n      if (t.art) {\n        albumArt.src = t.art;\n        albumArt.style.display = 'block';\n        artPlaceholder.style.display = 'none';\n      } else {\n        albumArt.style.display = 'none';\n        artPlaceholder.style.display = 'flex';\n      }\n\n      npTitle.textContent = t.title || '–';\n      npDate.textContent  = t.date  || '';\n\n      document.querySelectorAll('.track-item').forEach((el, i) => {\n        el.classList.toggle('active', i === currentIdx);\n      });\n    }\n\n    function updatePlayIcon() {\n      iconPlay.style.display  = isPlaying ? 'none'  : 'block';\n      iconPause.style.display = isPlaying ? 'block' : 'none';\n    }\n\n    function updateProgress() {\n      const dur = audio.duration || 0;\n      const cur = audio.currentTime || 0;\n      const pct = dur > 0 ? (cur / dur) * 100 : 0;\n      scrubber.style.width = `calc(${pct}% - 2px)`;\n      timeCurrent.textContent   = fmt(cur);\n      timeRemaining.textContent = `-${fmt(dur - cur)}`;\n    }\n\n    // ══════════════════════════════════════════════\n    //  PLAYLIST RENDER\n    // ══════════════════════════════════════════════\n    function renderPlaylist() {\n      trackList.innerHTML = '';\n\n      if (!playlist.length) {\n        const empty = document.createElement('div');\n        empty.className = 'track-list-empty';\n        empty.textContent = 'No tracks found.';\n        trackList.appendChild(empty);\n        return;\n      }\n\n      playlist.forEach((t, i) => {\n        const item = document.createElement('div');\n        item.className = 'track-item' + (i === currentIdx ? ' active' : '');\n        item.dataset.index = i;\n\n        // Thumbnail — prefer icon file, fall back to color placeholder\n        let thumbHtml;\n        if (t.thumb) {\n          thumbHtml = `<img class=\"ti-thumb\" src=\"${esc(t.thumb)}\" alt=\"\" loading=\"lazy\"\n            onerror=\"this.outerHTML='<div class=\\\\'ti-thumb-placeholder ${thumbColorFor(i)}\\\\'>${esc(t.title[0] || '♪')}</div>'\">`;\n        } else if (t.color) {\n          thumbHtml = `<div class=\"ti-thumb-placeholder\" style=\"background:${esc(t.color)}\">${esc(t.title[0] || '♪')}</div>`;\n        } else {\n          thumbHtml = `<div class=\"ti-thumb-placeholder ${thumbColorFor(i)}\">${esc(t.title[0] || '♪')}</div>`;\n        }\n\n        const nowTag = i === currentIdx\n          ? `<span style=\"display:inline-block;margin-left:6px;font-size:9px;letter-spacing:0.04em;opacity:0.55;font-style:normal;\">▶ NOW</span>`\n          : '';\n        const noAudio = !t.src\n          ? ` <span style=\"opacity:0.3;font-size:10px;font-style:normal;\">no audio</span>`\n          : '';\n\n        item.innerHTML = `\n          <div class=\"ti-info\">\n            <p class=\"ti-title\">${esc(t.title)}${nowTag}${noAudio}</p>\n            <p class=\"ti-date\">${esc(t.date || '')}</p>\n          </div>\n          ${thumbHtml}\n        `;\n        item.addEventListener('click', () => { selectTrack(i, true); showView('np'); });\n        trackList.appendChild(item);\n      });\n    }\n\n    // ══════════════════════════════════════════════\n    //  PLAYBACK\n    // ══════════════════════════════════════════════\n    function selectTrack(idx, autoPlay = false) {\n      currentIdx = idx;\n      const t = playlist[idx];\n\n      if (t && t.src) {\n        const wasPlaying = isPlaying;\n        audio.src = t.src;\n        if (autoPlay || wasPlaying) audio.play().catch(() => {});\n      } else {\n        audio.removeAttribute('src');\n        audio.load();\n      }\n\n      updateNowPlaying();\n      updateProgress();\n    }\n\n    function togglePlay() {\n      if (!playlist.length) return;\n      const t = playlist[currentIdx];\n      if (!t || !t.src) return;\n      if (isPlaying) { audio.pause(); } else { audio.play().catch(e => console.warn(e)); }\n    }\n\n    function playNext() {\n      if (!playlist.length) return;\n      const next = (currentIdx + 1) % playlist.length;\n      selectTrack(next);\n      if (playlist[next]?.src) audio.play().catch(() => {});\n    }\n\n    function playPrev() {\n      if (!playlist.length) return;\n      if (audio.currentTime > 3) { audio.currentTime = 0; return; }\n      const prev = (currentIdx - 1 + playlist.length) % playlist.length;\n      selectTrack(prev);\n      if (playlist[prev]?.src) audio.play().catch(() => {});\n    }\n\n    // ══════════════════════════════════════════════\n    //  VIEW SWITCHING\n    // ══════════════════════════════════════════════\n    function showView(view) {\n      if (view === currentView) return;\n      currentView = view;\n      if (view === 'np') {\n        viewPL.classList.replace('view-enter', 'view-exit');\n        viewNP.classList.replace('view-exit', 'view-enter');\n      } else {\n        viewNP.classList.replace('view-enter', 'view-exit');\n        viewPL.classList.replace('view-exit', 'view-enter');\n        renderPlaylist();\n      }\n    }\n\n    // ══════════════════════════════════════════════\n    //  SCRUBBER — click & drag\n    // ══════════════════════════════════════════════\n    function seekTo(clientX) {\n      const rect = timeBar.getBoundingClientRect();\n      const pct  = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));\n      if (audio.duration) audio.currentTime = pct * audio.duration;\n    }\n\n    timeBar.addEventListener('mousedown', e => { draggingScrub = true; seekTo(e.clientX); });\n    document.addEventListener('mousemove', e => { if (draggingScrub) seekTo(e.clientX); });\n    document.addEventListener('mouseup',   () => { draggingScrub = false; });\n    timeBar.addEventListener('touchstart', e => seekTo(e.touches[0].clientX), { passive: true });\n    timeBar.addEventListener('touchmove',  e => seekTo(e.touches[0].clientX), { passive: true });\n\n    // ══════════════════════════════════════════════\n    //  EVENT LISTENERS\n    // ══════════════════════════════════════════════\n    btnPlay.addEventListener('click', togglePlay);\n    btnPrev.addEventListener('click', playPrev);\n    btnNext.addEventListener('click', playNext);\n    btnMenu.addEventListener('click', () => showView(currentView === 'pl' ? 'np' : 'pl'));\n\n    audio.addEventListener('play',           () => { isPlaying = true;  updatePlayIcon(); });\n    audio.addEventListener('pause',          () => { isPlaying = false; updatePlayIcon(); });\n    audio.addEventListener('ended',          () => { isPlaying = false; updatePlayIcon(); playNext(); });\n    audio.addEventListener('timeupdate',     updateProgress);\n    audio.addEventListener('loadedmetadata', updateProgress);\n    audio.addEventListener('error',          () => { isPlaying = false; updatePlayIcon(); });\n\n    // Keyboard shortcuts\n    document.addEventListener('keydown', e => {\n      if (['INPUT', 'TEXTAREA', 'SELECT'].includes(e.target.tagName)) return;\n      switch (e.code) {\n        case 'Space':      e.preventDefault(); togglePlay(); break;\n        case 'ArrowRight': playNext(); break;\n        case 'ArrowLeft':  playPrev(); break;\n        case 'KeyM':       showView(currentView === 'pl' ? 'np' : 'pl'); break;\n        case 'ArrowUp':\n          audio.volume = Math.min(1, audio.volume + 0.05);\n          break;\n        case 'ArrowDown':\n          audio.volume = Math.max(0, audio.volume - 0.05);\n          break;\n      }\n    });\n\n    // ══════════════════════════════════════════════\n    //  INIT\n    // ══════════════════════════════════════════════\n    updateNowPlaying();\n    updatePlayIcon();\n    updateProgress();\n\n    // Load remote playlist\n    loadRemotePlaylist().catch(() => {});\n\n  })();\n  </script>\n</body>\n</html>\n","embedURL":""}},"39:863":{"type":"TEXT","id":"39:863","name":"DARTFORM","absoluteBoundingBox":{"x":2296.0,"y":129.5,"width":101.0,"height":21.0},"isolatedAbsoluteRenderBounds":{"x":2296.30395507812,"y":133.740005493164,"width":99.5927734375,"height":11.9039916992188},"relativeTransform":[[1.0,0.0,24.0],[0.0,1.0,29.5]],"size":{"x":101.0,"y":21.0},"fills":[{"blendMode":"NORMAL","type":"SOLID","color":{"r":1.0,"g":1.0,"b":1.0,"a":1.0},"visible":true,"opacity":1.0}],"strokeAlign":"OUTSIDE","strokes":[],"effects":[],"accessibleHTMLTag":"MAIN","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"characterStyleOverrides":[],"characters":"DARTFORM","lineIndentations":[0],"lineTypes":["NONE"],"listStartOffsets":[],"lineStyleOverrides":[0],"lineTextDirections":null,"textAutoResize":"WIDTH_AND_HEIGHT","style":{"fontFamily":"Instrument Serif","fontPostScriptName":"InstrumentSerif-Regular","fontStyle":"Regular","textAutoResize":"WIDTH_AND_HEIGHT","fontVariantPosition":"NORMAL","fontSize":16.0,"textAlignHorizontal":"LEFT","textAlignVertical":"TOP","letterSpacing":5.12,"letterSpacingValue":32.0,"letterSpacingUnit":"PERCENT","lineHeightPx":20.7999992370605,"lineHeightPercent":100.0,"lineHeightUnit":"INTRINSIC_%","paragraphSpacing":0,"paragraphIndent":0,"listSpacing":0,"italic":false,"textCase":"ORIGINAL","textDecoration":"NONE","textDecorationSkipInk":false,"textDecorationStyle":"solid","textTruncation":"DISABLED","lineHeightPercentFontSize":100},"styleOverrideTable":{}},"31:631":{"type":"TEXT","id":"31:631","name":"Text","absoluteBoundingBox":{"x":0.0,"y":0.0,"width":9.0,"height":13.0},"isolatedAbsoluteRenderBounds":{"x":-0.180000007152557,"y":2.69999980926514,"width":8.6903133392334,"height":9.44999980926514},"relativeTransform":[[1.0,0.0,0.0],[0.0,1.0,0.0]],"size":{"x":9.0,"y":13.0},"fills":[{"blendMode":"NORMAL","type":"SOLID","color":{"r":0.0,"g":0.0,"b":0.0,"a":1.0},"visible":true,"opacity":1.0}],"strokeAlign":"INSIDE","strokes":[],"strokeWeight":0.0,"effects":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"characterStyleOverrides":[],"characters":"Ag","lineIndentations":[0],"lineTypes":["NONE"],"listStartOffsets":[],"lineStyleOverrides":[0],"lineTextDirections":null,"textAutoResize":"WIDTH_AND_HEIGHT","style":{"fontFamily":"Instrument Serif","fontPostScriptName":"InstrumentSerif-Regular","fontStyle":"Regular","textAutoResize":"WIDTH_AND_HEIGHT","fontVariantPosition":"NORMAL","fontSize":10.0,"textAlignHorizontal":"LEFT","textAlignVertical":"TOP","letterSpacing":0.0,"letterSpacingValue":0.0,"letterSpacingUnit":"PERCENT","lineHeightPx":13.0,"lineHeightPercent":100.0,"lineHeightUnit":"INTRINSIC_%","paragraphSpacing":0,"paragraphIndent":0,"listSpacing":0,"italic":false,"textCase":"ORIGINAL","textDecoration":"NONE","textDecorationSkipInk":false,"textDecorationStyle":"solid","textTruncation":"DISABLED","lineHeightPercentFontSize":100},"styleOverrideTable":{}},"9:43":{"type":"TEXT","id":"9:43","name":"Text","absoluteBoundingBox":{"x":0.0,"y":0.0,"width":14.0,"height":12.0},"isolatedAbsoluteRenderBounds":{"x":0.240000009536743,"y":2.79999971389771,"width":12.5591411590576,"height":9.35000038146973},"relativeTransform":[[1.0,0.0,0.0],[0.0,1.0,0.0]],"size":{"x":14.0,"y":12.0},"fills":[{"blendMode":"NORMAL","type":"SOLID","color":{"r":0.0,"g":0.0,"b":0.0,"a":1.0},"visible":true,"opacity":1.0}],"strokeAlign":"INSIDE","strokes":[],"strokeWeight":0.0,"effects":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"characterStyleOverrides":[],"characters":"Ag","lineIndentations":[0],"lineTypes":["NONE"],"listStartOffsets":[],"lineStyleOverrides":[0],"lineTextDirections":null,"textAutoResize":"WIDTH_AND_HEIGHT","style":{"fontFamily":"Instrument Sans","fontPostScriptName":"InstrumentSans-Bold","fontStyle":"Bold","textAutoResize":"WIDTH_AND_HEIGHT","fontVariantPosition":"NORMAL","fontSize":10.0,"textAlignHorizontal":"LEFT","textAlignVertical":"TOP","letterSpacing":0.0,"letterSpacingValue":0.0,"letterSpacingUnit":"PERCENT","lineHeightPx":12.2000007629395,"lineHeightPercent":100.0,"lineHeightUnit":"INTRINSIC_%","paragraphSpacing":0,"paragraphIndent":0,"listSpacing":0,"italic":false,"textCase":"ORIGINAL","textDecoration":"NONE","textDecorationSkipInk":false,"textDecorationStyle":"solid","textTruncation":"DISABLED","lineHeightPercentFontSize":100},"styleOverrideTable":{}},"39:816":{"type":"TEXT","id":"39:816","name":"©2026","absoluteBoundingBox":{"x":88.0,"y":730.0,"width":46.0,"height":16.0},"isolatedAbsoluteRenderBounds":{"x":88.4800033569336,"y":733.179992675781,"width":44.5052871704102,"height":9.0},"relativeTransform":[[1.0,0.0,24.0],[0.0,1.0,24.0]],"size":{"x":46.0,"y":16.0},"fills":[{"blendMode":"NORMAL","type":"SOLID","color":{"r":1.0,"g":1.0,"b":1.0,"a":1.0},"visible":true,"opacity":1.0}],"strokeAlign":"OUTSIDE","strokes":[],"effects":[],"accessibleHTMLTag":"MAIN","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"characterStyleOverrides":[],"characters":"©2026","lineIndentations":[0],"lineTypes":["NONE"],"listStartOffsets":[],"lineStyleOverrides":[0],"lineTextDirections":null,"textAutoResize":"WIDTH_AND_HEIGHT","style":{"fontFamily":"Instrument Serif","fontPostScriptName":"InstrumentSerif-Regular","fontStyle":"Regular","textAutoResize":"WIDTH_AND_HEIGHT","fontVariantPosition":"NORMAL","fontSize":12.0,"textAlignHorizontal":"LEFT","textAlignVertical":"TOP","letterSpacing":3.84,"letterSpacingValue":32.0,"letterSpacingUnit":"PERCENT","lineHeightPx":15.5999994277954,"lineHeightPercent":100.0,"lineHeightUnit":"INTRINSIC_%","paragraphSpacing":0,"paragraphIndent":0,"listSpacing":0,"italic":false,"textCase":"ORIGINAL","textDecoration":"NONE","textDecorationSkipInk":false,"textDecorationStyle":"solid","textTruncation":"DISABLED","lineHeightPercentFontSize":100},"styleOverrideTable":{}},"31:633":{"type":"TEXT","id":"31:633","name":"Text","absoluteBoundingBox":{"x":0.0,"y":0.0,"width":9.0,"height":13.0},"isolatedAbsoluteRenderBounds":{"x":-0.740000009536743,"y":2.69999980926514,"width":9.81312465667725,"height":9.46000003814697},"relativeTransform":[[1.0,0.0,0.0],[0.0,1.0,0.0]],"size":{"x":9.0,"y":13.0},"fills":[{"blendMode":"NORMAL","type":"SOLID","color":{"r":0.0,"g":0.0,"b":0.0,"a":1.0},"visible":true,"opacity":1.0}],"strokeAlign":"INSIDE","strokes":[],"strokeWeight":0.0,"effects":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"characterStyleOverrides":[],"characters":"Ag","lineIndentations":[0],"lineTypes":["NONE"],"listStartOffsets":[],"lineStyleOverrides":[0],"lineTextDirections":null,"textAutoResize":"WIDTH_AND_HEIGHT","style":{"fontFamily":"Instrument Serif","fontPostScriptName":"InstrumentSerif-Italic","fontStyle":"Italic","italic":true,"textAutoResize":"WIDTH_AND_HEIGHT","fontVariantPosition":"NORMAL","fontSize":10.0,"textAlignHorizontal":"LEFT","textAlignVertical":"TOP","letterSpacing":0.0,"letterSpacingValue":0.0,"letterSpacingUnit":"PERCENT","lineHeightPx":13.0,"lineHeightPercent":100.0,"lineHeightUnit":"INTRINSIC_%","paragraphSpacing":0,"paragraphIndent":0,"listSpacing":0,"textCase":"ORIGINAL","textDecoration":"NONE","textDecorationSkipInk":false,"textDecorationStyle":"solid","textTruncation":"DISABLED","lineHeightPercentFontSize":100},"styleOverrideTable":{}}},"assetIdToGuid":{},"guidToUrl":{"39:791":"/","52:963":"/streaming"},"fonts":{"Instrument Sans:Bold":{"id":"InstrumentSans_wdth_wght__1","url":"/_woff/v2/InstrumentSans_wdth_wght__1/InstrumentSans_wdth_wght__1.woff2","source":1,"italic":false,"weight":700,"variationAxes":[{"tag":"wdth","value":100.0,"name":"Width"},{"tag":"wght","value":700.0,"name":"Weight"}],"subsets":{"baseUrl":"/_woff/v2/InstrumentSans_wdth_wght__1/","subsetMappings":[{"unicodeRange":"U+0000-00A0,U+00A2-00A9,U+00AC-00AE,U+00B0-00B7,U+00B9-00BA,U+00BC-00BE,U+00D7,U+00F7,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-21BB,U+2212,U+2215,U+F8FF,U+FEFF,U+FFFD","file":"InstrumentSans_wdth_wght__1-english.woff2"},{"unicodeRange":"U+00A1,U+00AA-00AB,U+00AF,U+00B8,U+00BB,U+00BF-00D6,U+00D8-00F6,U+00F8-00FF,U+0131,U+0152-0153,U+02B0-02FF","file":"InstrumentSans_wdth_wght__1-rest-latin.woff2"},{"unicodeRange":"U+0100-0130,U+0132-0151,U+0154-017F","file":"InstrumentSans_wdth_wght__1-latin-extended-a.woff2"},{"unicodeRange":"U+0180-024F","file":"InstrumentSans_wdth_wght__1-latin-extended-b.woff2"},{"unicodeRange":"U+1E00-1EFF","file":"InstrumentSans_wdth_wght__1-latin-extended-additional.woff2"},{"unicodeRange":"U+0250-02AF,U+0300-1DFF,U+1F00-1FFF,U+2070-2073,U+2075-20AB,U+20AD-2121,U+2123-218F,U+21BC-2211,U+2213-2214,U+2216-F8FE,U+F900-FEFE,U+FF00-FFFC,U+FFFE-FFFF","file":"InstrumentSans_wdth_wght__1-rest.woff2"}]}},"Instrument Sans:Medium":{"id":"InstrumentSans_wdth_wght__1","url":"/_woff/v2/InstrumentSans_wdth_wght__1/InstrumentSans_wdth_wght__1.woff2","source":1,"italic":false,"weight":500,"variationAxes":[{"tag":"wdth","value":100.0,"name":"Width"},{"tag":"wght","value":500.0,"name":"Weight"}],"subsets":{"baseUrl":"/_woff/v2/InstrumentSans_wdth_wght__1/","subsetMappings":[{"unicodeRange":"U+0000-00A0,U+00A2-00A9,U+00AC-00AE,U+00B0-00B7,U+00B9-00BA,U+00BC-00BE,U+00D7,U+00F7,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-21BB,U+2212,U+2215,U+F8FF,U+FEFF,U+FFFD","file":"InstrumentSans_wdth_wght__1-english.woff2"},{"unicodeRange":"U+00A1,U+00AA-00AB,U+00AF,U+00B8,U+00BB,U+00BF-00D6,U+00D8-00F6,U+00F8-00FF,U+0131,U+0152-0153,U+02B0-02FF","file":"InstrumentSans_wdth_wght__1-rest-latin.woff2"},{"unicodeRange":"U+0100-0130,U+0132-0151,U+0154-017F","file":"InstrumentSans_wdth_wght__1-latin-extended-a.woff2"},{"unicodeRange":"U+0180-024F","file":"InstrumentSans_wdth_wght__1-latin-extended-b.woff2"},{"unicodeRange":"U+1E00-1EFF","file":"InstrumentSans_wdth_wght__1-latin-extended-additional.woff2"},{"unicodeRange":"U+0250-02AF,U+0300-1DFF,U+1F00-1FFF,U+2070-2073,U+2075-20AB,U+20AD-2121,U+2123-218F,U+21BC-2211,U+2213-2214,U+2216-F8FE,U+F900-FEFE,U+FF00-FFFC,U+FFFE-FFFF","file":"InstrumentSans_wdth_wght__1-rest.woff2"}]}},"Instrument Serif:Regular":{"id":"InstrumentSerif-Regular_1","url":"/_woff/v2/InstrumentSerif-Regular_1/InstrumentSerif-Regular_1.woff2","source":1,"italic":false,"weight":400,"subsets":{"baseUrl":"/_woff/v2/InstrumentSerif-Regular_1/","subsetMappings":[{"unicodeRange":"U+0000-00A0,U+00A2-00A9,U+00AC-00AE,U+00B0-00B7,U+00B9-00BA,U+00BC-00BE,U+00D7,U+00F7,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-21BB,U+2212,U+2215,U+F8FF,U+FEFF,U+FFFD","file":"InstrumentSerif-Regular_1-english.woff2"},{"unicodeRange":"U+00A1,U+00AA-00AB,U+00AF,U+00B8,U+00BB,U+00BF-00D6,U+00D8-00F6,U+00F8-00FF,U+0131,U+0152-0153,U+02B0-02FF","file":"InstrumentSerif-Regular_1-rest-latin.woff2"},{"unicodeRange":"U+0100-0130,U+0132-0151,U+0154-017F","file":"InstrumentSerif-Regular_1-latin-extended-a.woff2"},{"unicodeRange":"U+0180-024F","file":"InstrumentSerif-Regular_1-latin-extended-b.woff2"},{"unicodeRange":"U+1E00-1EFF","file":"InstrumentSerif-Regular_1-latin-extended-additional.woff2"},{"unicodeRange":"U+0250-02AF,U+0300-1DFF,U+1F00-1FFF,U+2070-2073,U+2075-20AB,U+20AD-2121,U+2123-218F,U+21BC-2211,U+2213-2214,U+2216-F8FE,U+F900-FEFE,U+FF00-FFFC,U+FFFE-FFFF","file":"InstrumentSerif-Regular_1-rest.woff2"}]}},"Instrument Serif:Italic":{"id":"InstrumentSerif-Italic_1","url":"/_woff/v2/InstrumentSerif-Italic_1/InstrumentSerif-Italic_1.woff2","source":1,"italic":true,"weight":400,"subsets":{"baseUrl":"/_woff/v2/InstrumentSerif-Italic_1/","subsetMappings":[{"unicodeRange":"U+0000-00A0,U+00A2-00A9,U+00AC-00AE,U+00B0-00B7,U+00B9-00BA,U+00BC-00BE,U+00D7,U+00F7,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-21BB,U+2212,U+2215,U+F8FF,U+FEFF,U+FFFD","file":"InstrumentSerif-Italic_1-english.woff2"},{"unicodeRange":"U+00A1,U+00AA-00AB,U+00AF,U+00B8,U+00BB,U+00BF-00D6,U+00D8-00F6,U+00F8-00FF,U+0131,U+0152-0153,U+02B0-02FF","file":"InstrumentSerif-Italic_1-rest-latin.woff2"},{"unicodeRange":"U+0100-0130,U+0132-0151,U+0154-017F","file":"InstrumentSerif-Italic_1-latin-extended-a.woff2"},{"unicodeRange":"U+0180-024F","file":"InstrumentSerif-Italic_1-latin-extended-b.woff2"},{"unicodeRange":"U+1E00-1EFF","file":"InstrumentSerif-Italic_1-latin-extended-additional.woff2"},{"unicodeRange":"U+0250-02AF,U+0300-1DFF,U+1F00-1FFF,U+2070-2073,U+2075-20AB,U+20AD-2121,U+2123-218F,U+21BC-2211,U+2213-2214,U+2216-F8FE,U+F900-FEFE,U+FF00-FFFC,U+FFFE-FFFF","file":"InstrumentSerif-Italic_1-rest.woff2"}]}}},"assets":{"63d186b005e9bb6a5af601b24f1283b0bcadebff":{"type":"PAINT_ASSET","url":"63d186b005e9bb6a5af601b24f1283b0bcadebff.png","size":{"x":0.0,"y":0.0}},"e1a1bd273f77775fb7c34e7f784504d8064f34a6":{"type":"GENERATED_ASSET","url":"e1a1bd273f77775fb7c34e7f784504d8064f34a6.svg","size":{"x":48.0,"y":32.0},"offsets":{"left":{"value":0.0,"unit":"PERCENT"},"right":{"value":0.0,"unit":"PERCENT"},"top":{"value":0.0,"unit":"PERCENT"},"bottom":{"value":0.0,"unit":"PERCENT"}},"format":"SVG"},"0a24a132e07e2ff94ca6523ec44f14ca60cd51ac":{"type":"GENERATED_ASSET","url":"0a24a132e07e2ff94ca6523ec44f14ca60cd51ac.svg","size":{"x":48.0,"y":32.0},"offsets":{"left":{"value":0.0,"unit":"PERCENT"},"right":{"value":0.0,"unit":"PERCENT"},"top":{"value":0.0,"unit":"PERCENT"},"bottom":{"value":0.0,"unit":"PERCENT"}},"format":"SVG"}},"stablePathToAssetHash":{"62:3126":"e1a1bd273f77775fb7c34e7f784504d8064f34a6","62:3134":"0a24a132e07e2ff94ca6523ec44f14ca60cd51ac","62:3124":"0a24a132e07e2ff94ca6523ec44f14ca60cd51ac","62:3136":"e1a1bd273f77775fb7c34e7f784504d8064f34a6","62:3131":"e1a1bd273f77775fb7c34e7f784504d8064f34a6","62:3129":"0a24a132e07e2ff94ca6523ec44f14ca60cd51ac"},"animateRootIds":[],"siteSettings":{"scalingMode":"REFLOW","blockSearchIndexing":true,"labs":{"7464717929BF125D021BA2EC2CE3DD3FDA32FFCA":false,"E5FBBA911B2B7A09E649D4BE6CDF8591EAEFC881":false},"title":"DARTFORM"},"sourceCodeHash":""}