{"id":320,"date":"2025-11-23T22:31:33","date_gmt":"2025-11-23T22:31:33","guid":{"rendered":"https:\/\/sevenpinecones.com\/?page_id=320"},"modified":"2026-03-31T19:46:36","modified_gmt":"2026-03-31T19:46:36","slug":"radio","status":"publish","type":"page","link":"https:\/\/sevenpinecones.com\/lt\/radio\/","title":{"rendered":"Radio"},"content":{"rendered":"<section class=\"bde-section-320-100 bde-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><h1 class=\"bde-heading-320-102 bde-heading\">\nRadio\n<\/h1><\/div>\n<\/section><section class=\"bde-section-320-115 bde-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><div class=\"bde-code-block-320-116 bde-code-block\">\n\n  <div class=\"sp3-radio\">\n  <div class=\"sp3-shell\">\n    <div class=\"sp3-left\">\n      <div class=\"sp3-speaker\">\n        <div class=\"sp3-speaker-grill\"><\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"sp3-right\">\n      <div class=\"sp3-header\">\n        <div class=\"sp3-header-left\">\n          <div class=\"sp3-brand\">Seven Pinecones<\/div>\n          <div class=\"sp3-plate\">Session Radio<\/div>\n        <\/div>\n        <div class=\"sp3-header-right\">\n          <span class=\"sp3-mode\">FM \u00b7 Live cuts<\/span>\n        <\/div>\n      <\/div>\n\n      <div class=\"sp3-display\">\n        <div id=\"sp3-track-title\" class=\"sp3-title\">Loading\u2026<\/div>\n        <div id=\"sp3-track-position\" class=\"sp3-time\">0:00 \/ 0:00<\/div>\n      <\/div>\n\n      <div class=\"sp3-dial-row\">\n        <div class=\"sp3-dial\">\n          <div class=\"sp3-scale\">\n            <span>60<\/span><span>70<\/span><span>80<\/span><span>90<\/span><span>100<\/span><span>110<\/span>\n          <\/div>\n          <div id=\"sp3-progress-bar\" class=\"sp3-progress\">\n            <div id=\"sp3-progress-fill\"><\/div>\n          <\/div>\n        <\/div>\n        <div class=\"sp3-tuning-wrap\">\n          <div class=\"sp3-tuning-bar\"><\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"sp3-controls-row\">\n        <div class=\"sp3-controls\">\n          <button id=\"sp3-prev\" class=\"sp3-btn sp3-btn-secondary\" aria-label=\"Previous track\">\u2190<\/button>\n          <button id=\"sp3-play\" class=\"sp3-btn sp3-btn-main\" aria-label=\"Play or pause\">\n            <span id=\"sp3-play-icon\">\u25b6<\/span>\n          <\/button>\n          <button id=\"sp3-next\" class=\"sp3-btn sp3-btn-secondary\" aria-label=\"Next track\">\u2192<\/button>\n          <button id=\"sp3-shuffle\" class=\"sp3-btn sp3-btn-secondary\" aria-label=\"Toggle shuffle\">Shuffle<\/button>\n        <\/div>\n\n        <div class=\"sp3-volume\">\n          <span class=\"sp3-volume-label\">Volume<\/span>\n          <div class=\"sp3-knob-wrap\">\n            <div class=\"sp3-knob\">\n              <div class=\"sp3-knob-indicator\"><\/div>\n            <\/div>\n            <input id=\"sp3-volume-range\" type=\"range\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.8\">\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<audio id=\"sp3-audio\"><\/audio>\n\n<style>\n  .sp3-radio {\n    max-width: 1120px;\n    width: 100%;\n    margin: 2.5rem auto;\n  }\n\n  .sp3-shell {\n    display: flex;\n    gap: 1.8rem;\n    padding: 1.6rem 2rem 1.8rem;\n    border-radius: 20px;\n    background: #f5f3ee;\n    box-shadow:\n      0 12px 30px rgba(0,0,0,0.18),\n      0 0 0 1px rgba(0,0,0,0.04);\n  }\n\n  .sp3-left {\n    flex: 0 0 28%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .sp3-right {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    gap: 0.9rem;\n  }\n\n  .sp3-speaker {\n    width: 170px;\n    height: 170px;\n    border-radius: 18px;\n    background: linear-gradient(145deg, #c8aa88, #a28464);\n    box-shadow:\n      0 8px 20px rgba(0,0,0,0.28),\n      0 0 0 1px rgba(0,0,0,0.3);\n    padding: 10px;\n  }\n\n  .sp3-speaker-grill {\n    width: 100%;\n    height: 100%;\n    border-radius: 14px;\n    background-color: #2c2320;\n    background-image: radial-gradient(circle, rgba(0,0,0,0.8) 1px, transparent 1px);\n    background-size: 4px 4px;\n    box-shadow:\n      0 1px 0 rgba(255,255,255,0.12) inset,\n      0 -1px 0 rgba(0,0,0,0.7) inset;\n  }\n\n  .sp3-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: 0.75rem;\n  }\n\n  .sp3-header-left {\n    display: flex;\n    flex-direction: column;\n    gap: 0.2rem;\n  }\n\n  .sp3-brand {\n    font-size: 0.95rem;\n    letter-spacing: 0.15em;\n    text-transform: uppercase;\n  }\n\n  .sp3-plate {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0.15rem 0.6rem;\n    border-radius: 999px;\n    font-size: 0.7rem;\n    letter-spacing: 0.12em;\n    text-transform: uppercase;\n    background: linear-gradient(135deg, #e3ddcf, #c7beaf);\n    color: #4b3d2a;\n    box-shadow:\n      0 1px 0 rgba(255,255,255,0.85) inset,\n      0 -1px 0 rgba(0,0,0,0.18) inset,\n      0 2px 4px rgba(0,0,0,0.22);\n  }\n\n  .sp3-header-right {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n  }\n\n  .sp3-mode {\n    font-size: 0.7rem;\n    letter-spacing: 0.16em;\n    text-transform: uppercase;\n    opacity: 0.7;\n  }\n\n  .sp3-display {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n    gap: 0.5rem;\n    padding: 0.3rem 0.65rem;\n    border-radius: 8px;\n    background: #f8f5ef;\n    box-shadow:\n      0 1px 0 rgba(255,255,255,0.75) inset,\n      0 -1px 0 rgba(0,0,0,0.12) inset;\n  }\n\n  .sp3-title {\n    font-size: 0.98rem;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    max-width: 70%;\n  }\n\n  .sp3-time {\n    font-size: 0.8rem;\n    opacity: 0.7;\n    white-space: nowrap;\n  }\n\n  .sp3-dial-row {\n    display: flex;\n    align-items: stretch;\n    gap: 0.8rem;\n  }\n\n  .sp3-dial {\n    flex: 1;\n    border-radius: 10px;\n    padding: 0.55rem 0.75rem;\n    background: #e9e3d7;\n    box-shadow:\n      0 1px 0 rgba(255,255,255,0.7) inset,\n      0 -1px 0 rgba(0,0,0,0.18) inset;\n    display: flex;\n    flex-direction: column;\n    gap: 0.45rem;\n  }\n\n  .sp3-scale {\n    display: flex;\n    justify-content: space-between;\n    font-size: 0.65rem;\n    letter-spacing: 0.18em;\n    text-transform: uppercase;\n    opacity: 0.7;\n  }\n\n  .sp3-scale span {\n    position: relative;\n  }\n\n  .sp3-scale span::before {\n    content: \"\";\n    position: absolute;\n    top: -6px;\n    left: 50%;\n    width: 1px;\n    height: 5px;\n    background: rgba(40,40,40,0.55);\n    transform: translateX(-50%);\n  }\n\n  .sp3-progress {\n    width: 100%;\n    height: 4px;\n    border-radius: 999px;\n    background: rgba(90,80,70,0.18);\n    cursor: pointer;\n    overflow: hidden;\n    position: relative;\n  }\n\n  #sp3-progress-fill {\n    width: 0;\n    height: 100%;\n    background: linear-gradient(90deg, #5b4a3a, #9c8a74);\n    transform-origin: left;\n    transition: width 0.06s linear;\n  }\n\n  .sp3-tuning-wrap {\n    width: 18px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .sp3-tuning-bar {\n    width: 5px;\n    height: 42px;\n    border-radius: 999px;\n    background: linear-gradient(180deg, #6a5245, #3a2820);\n    box-shadow:\n      0 0 0 1px rgba(0,0,0,0.8),\n      0 1px 0 rgba(255,255,255,0.25) inset;\n    opacity: 0.45;\n    transition: background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;\n  }\n\n  .sp3-tuning-bar.is-on {\n    background: linear-gradient(180deg, #ffe0c8, #f78645);\n    box-shadow:\n      0 0 10px rgba(248, 133, 75, 0.9),\n      0 0 0 1px rgba(0,0,0,0.85),\n      0 1px 0 rgba(255,255,255,0.4) inset;\n    opacity: 1;\n  }\n\n  .sp3-controls-row {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 1.2rem;\n    margin-top: 0.4rem;\n  }\n\n  .sp3-controls {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.6rem;\n    flex-wrap: wrap;\n  }\n\n  .sp3-btn {\n    border: none;\n    cursor: pointer;\n    border-radius: 999px;\n    padding: 0.45rem 0.9rem;\n    font-size: 0.9rem;\n    line-height: 1;\n    transition: transform 0.08s ease, box-shadow 0.12s ease, background 0.12s ease, opacity 0.12s ease;\n  }\n\n  .sp3-btn-main {\n    padding-inline: 1.4rem;\n    background: linear-gradient(145deg, #d2c6b3, #b1a390);\n    color: #2b241a;\n    box-shadow:\n      0 5px 12px rgba(0,0,0,0.25),\n      0 0 0 1px rgba(0,0,0,0.18);\n  }\n\n  .sp3-btn-secondary {\n    background: linear-gradient(145deg, #c4b7a3, #a59682);\n    color: #2b241a;\n    box-shadow:\n      0 3px 8px rgba(0,0,0,0.2),\n      0 0 0 1px rgba(0,0,0,0.15);\n  }\n\n  .sp3-btn:hover {\n    transform: translateY(-1px);\n  }\n\n  .sp3-btn:active {\n    transform: translateY(0);\n    box-shadow: none;\n    opacity: 0.9;\n  }\n\n  .sp3-btn.is-active {\n    background: linear-gradient(145deg, #8d7964, #6f5e4d);\n    color: #f5f3ee;\n  }\n\n  #sp3-play-icon {\n    font-family: inherit;\n    color: inherit;\n    display: inline-block;\n    transform: translateY(-1px);\n  }\n\n  .sp3-volume {\n    display: flex;\n    align-items: center;\n    gap: 0.55rem;\n  }\n\n  .sp3-volume-label {\n    font-size: 0.7rem;\n    letter-spacing: 0.14em;\n    text-transform: uppercase;\n    opacity: 0.7;\n  }\n\n  .sp3-knob-wrap {\n    position: relative;\n    width: 32px;\n    height: 32px;\n  }\n\n  .sp3-knob {\n    position: absolute;\n    inset: 0;\n    border-radius: 50%;\n    background:\n      radial-gradient(circle at 30% 20%, rgba(255,255,255,0.85), transparent 55%),\n      radial-gradient(circle, #e0d5c4 0%, #b9a893 65%, #8a7863 100%);\n    box-shadow:\n      0 3px 6px rgba(0,0,0,0.35),\n      0 0 0 1px rgba(0,0,0,0.5);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .sp3-knob-indicator {\n    width: 2px;\n    height: 40%;\n    border-radius: 999px;\n    background: rgba(60,45,35,0.9);\n    transform-origin: bottom center;\n    transform: rotate(-45deg);\n  }\n\n  #sp3-volume-range {\n    position: absolute;\n    inset: 0;\n    opacity: 0;\n    cursor: pointer;\n  }\n\n  @media (max-width: 900px) {\n    .sp3-shell {\n      flex-direction: column;\n      align-items: stretch;\n      padding: 1.3rem 1.4rem 1.5rem;\n    }\n\n    .sp3-left {\n      order: 2;\n    }\n\n    .sp3-right {\n      order: 1;\n    }\n\n    .sp3-speaker {\n      margin-inline: auto;\n    }\n\n    .sp3-controls-row {\n      flex-direction: column;\n      align-items: center;\n      gap: 0.8rem;\n    }\n\n    .sp3-volume {\n      justify-content: center;\n    }\n  }\n\n  @media (max-width: 540px) {\n    .sp3-radio {\n      margin: 1.5rem 1rem;\n    }\n\n    .sp3-shell {\n      padding: 1.1rem 1.1rem 1.3rem;\n    }\n  }\n<\/style>\n\n<script>\n  const sp3Tracks = [\n    {\n      title: \"Mist\",\n      url: \"https:\/\/sevenpinecones.com\/wp-content\/uploads\/2025\/11\/7Ps-Mist-1.3-Dominykas-studio.mp3\"\n    },\n    {\n      title: \"Sacred Light\",\n      url: \"https:\/\/sevenpinecones.com\/wp-content\/uploads\/2026\/03\/7Ps-sacred-light-1.2-cut.mp3\"\n    },\n    {\n      title: \"Mind Wanders\",\n      url: \"https:\/\/sevenpinecones.com\/wp-content\/uploads\/2026\/03\/Sacred-duet-Mind-wanders-in-prashom-studio.mp3\"\n    },\n    {\n      title: \"Positive Influence\",\n      url: \"https:\/\/sevenpinecones.com\/wp-content\/uploads\/2026\/03\/7Ps-Positive-Influence.mp3\"\n    },\n    {\n      title: \"Fountain\",\n      url: \"https:\/\/sevenpinecones.com\/wp-content\/uploads\/2026\/03\/7-Ps-Fountain.mp3\"\n    }\n  ];\n\n  const sp3Audio = document.getElementById(\"sp3-audio\");\n  const sp3TitleEl = document.getElementById(\"sp3-track-title\");\n  const sp3PosEl = document.getElementById(\"sp3-track-position\");\n  const sp3PlayBtn = document.getElementById(\"sp3-play\");\n  const sp3PlayIcon = document.getElementById(\"sp3-play-icon\");\n  const sp3PrevBtn = document.getElementById(\"sp3-prev\");\n  const sp3NextBtn = document.getElementById(\"sp3-next\");\n  const sp3ShuffleBtn = document.getElementById(\"sp3-shuffle\");\n  const sp3ProgressBar = document.getElementById(\"sp3-progress-bar\");\n  const sp3ProgressFill = document.getElementById(\"sp3-progress-fill\");\n  const sp3TuningBar = document.querySelector(\".sp3-tuning-bar\");\n  const sp3VolumeRange = document.getElementById(\"sp3-volume-range\");\n  const sp3KnobIndicator = document.querySelector(\".sp3-knob-indicator\");\n\n  let sp3CurrentIndex = 0;\n  let sp3IsPlaying = false;\n  let sp3ShuffleMode = false;\n\n  const sp3MinAngle = -135;\n  const sp3MaxAngle = 135;\n\n  function sp3UpdateKnob(angle) {\n    if (sp3KnobIndicator) {\n      sp3KnobIndicator.style.transform = `rotate(${angle}deg)`;\n    }\n  }\n\n  function sp3VolumeFromRange(value) {\n    return parseFloat(value);\n  }\n\n  function sp3AngleFromVolume(vol) {\n    return sp3MinAngle + (sp3MaxAngle - sp3MinAngle) * vol;\n  }\n\n  function sp3FormatTime(sec) {\n    if (isNaN(sec)) return \"0:00\";\n    const m = Math.floor(sec \/ 60);\n    const s = Math.floor(sec % 60).toString().padStart(2, \"0\");\n    return `${m}:${s}`;\n  }\n\n  function sp3LoadTrack(index) {\n    const track = sp3Tracks[index];\n    if (!track) return;\n\n    sp3Audio.src = track.url;\n    sp3TitleEl.textContent = track.title;\n    sp3PosEl.textContent = \"0:00 \/ 0:00\";\n    sp3ProgressFill.style.width = \"0%\";\n  }\n\n  function sp3PlayPause() {\n    if (!sp3Audio.src) {\n      sp3LoadTrack(sp3CurrentIndex);\n    }\n\n    if (sp3IsPlaying) {\n      sp3Audio.pause();\n    } else {\n      sp3Audio.play();\n    }\n  }\n\n  function sp3GetRandomIndex(excludeIndex) {\n    if (sp3Tracks.length <= 1) return excludeIndex;\n\n    let idx;\n    do {\n      idx = Math.floor(Math.random() * sp3Tracks.length);\n    } while (idx === excludeIndex);\n\n    return idx;\n  }\n\n  function sp3GoToTrack(index, autoplay = true) {\n    sp3CurrentIndex = index;\n    sp3LoadTrack(sp3CurrentIndex);\n    if (autoplay) sp3Audio.play();\n  }\n\n  function sp3NextTrack() {\n    if (sp3ShuffleMode) {\n      sp3GoToTrack(sp3GetRandomIndex(sp3CurrentIndex));\n    } else {\n      const nextIndex = (sp3CurrentIndex + 1) % sp3Tracks.length;\n      sp3GoToTrack(nextIndex);\n    }\n  }\n\n  function sp3PrevTrack() {\n    if (sp3ShuffleMode) {\n      sp3GoToTrack(sp3GetRandomIndex(sp3CurrentIndex));\n    } else {\n      const prevIndex = (sp3CurrentIndex - 1 + sp3Tracks.length) % sp3Tracks.length;\n      sp3GoToTrack(prevIndex);\n    }\n  }\n\n  sp3Audio.addEventListener(\"play\", () => {\n    sp3IsPlaying = true;\n    sp3PlayIcon.textContent = \"\u275a\u275a\";\n    if (sp3TuningBar) sp3TuningBar.classList.add(\"is-on\");\n  });\n\n  sp3Audio.addEventListener(\"pause\", () => {\n    sp3IsPlaying = false;\n    sp3PlayIcon.textContent = \"\u25b6\";\n    if (sp3TuningBar) sp3TuningBar.classList.remove(\"is-on\");\n  });\n\n  sp3Audio.addEventListener(\"timeupdate\", () => {\n    const current = sp3Audio.currentTime || 0;\n    const dur = sp3Audio.duration || 0;\n    sp3PosEl.textContent = `${sp3FormatTime(current)} \/ ${sp3FormatTime(dur)}`;\n\n    if (dur > 0) {\n      const pct = (current \/ dur) * 100;\n      sp3ProgressFill.style.width = `${pct}%`;\n    }\n  });\n\n  sp3Audio.addEventListener(\"ended\", () => {\n    sp3NextTrack();\n  });\n\n  sp3PlayBtn.addEventListener(\"click\", sp3PlayPause);\n  sp3PrevBtn.addEventListener(\"click\", sp3PrevTrack);\n  sp3NextBtn.addEventListener(\"click\", sp3NextTrack);\n\n  sp3ShuffleBtn.addEventListener(\"click\", () => {\n    sp3ShuffleMode = !sp3ShuffleMode;\n    sp3ShuffleBtn.classList.toggle(\"is-active\", sp3ShuffleMode);\n  });\n\n  sp3ProgressBar.addEventListener(\"click\", (e) => {\n    const rect = sp3ProgressBar.getBoundingClientRect();\n    const clickX = e.clientX - rect.left;\n    const pct = clickX \/ rect.width;\n\n    if (sp3Audio.duration) {\n      sp3Audio.currentTime = pct * sp3Audio.duration;\n    }\n  });\n\n  if (sp3VolumeRange) {\n    const initialVol = parseFloat(sp3VolumeRange.value) || 0.8;\n    sp3Audio.volume = initialVol;\n    sp3UpdateKnob(sp3AngleFromVolume(initialVol));\n\n    sp3VolumeRange.addEventListener(\"input\", (e) => {\n      const vol = sp3VolumeFromRange(e.target.value);\n      sp3Audio.volume = vol;\n      sp3UpdateKnob(sp3AngleFromVolume(vol));\n    });\n  }\n\n  sp3LoadTrack(sp3CurrentIndex);\n<\/script>\n\n\n<\/div><\/div>\n<\/section><section class=\"bde-section-320-117 bde-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><div class=\"bde-code-block-320-118 bde-code-block\">\n\n  <div class=\"sp3-radio\">\n  <div class=\"sp3-shell\">\n    <!-- LEFT: speaker -->\n    <div class=\"sp3-left\">\n      <div class=\"sp3-speaker\">\n        <div class=\"sp3-speaker-grill\"><\/div>\n      <\/div>\n    <\/div>\n\n    <!-- RIGHT: info + dial + controls -->\n    <div class=\"sp3-right\">\n      <div class=\"sp3-header\">\n        <div class=\"sp3-header-left\">\n          <div class=\"sp3-brand\">Seven Pinecones<\/div>\n          <div class=\"sp3-plate\">Session Radio<\/div>\n        <\/div>\n        <div class=\"sp3-header-right\">\n          <span class=\"sp3-mode\">FM \u00b7 Live cuts<\/span>\n        <\/div>\n      <\/div>\n\n      <div class=\"sp3-display\">\n        <div id=\"sp3-track-title\" class=\"sp3-title\">Loading\u2026<\/div>\n        <div id=\"sp3-track-position\" class=\"sp3-time\">0:00 \/ 0:00<\/div>\n      <\/div>\n\n      <div class=\"sp3-dial-row\">\n        <div class=\"sp3-dial\">\n          <div class=\"sp3-scale\">\n            <span>60<\/span><span>70<\/span><span>80<\/span><span>90<\/span><span>100<\/span><span>110<\/span>\n          <\/div>\n          <div id=\"sp3-progress-bar\" class=\"sp3-progress\">\n            <div id=\"sp3-progress-fill\"><\/div>\n          <\/div>\n        <\/div>\n        <div class=\"sp3-tuning-wrap\">\n          <div class=\"sp3-tuning-bar\"><\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"sp3-controls-row\">\n        <div class=\"sp3-controls\">\n          <button id=\"sp3-prev\" class=\"sp3-btn sp3-btn-secondary\">\u2190<\/button>\n          <button id=\"sp3-play\" class=\"sp3-btn sp3-btn-main\">\u25b6<\/button>\n          <button id=\"sp3-next\" class=\"sp3-btn sp3-btn-secondary\">\u2192<\/button>\n        <\/div>\n\n        <div class=\"sp3-volume\">\n          <span class=\"sp3-volume-label\">Volume<\/span>\n          <div class=\"sp3-knob-wrap\">\n            <div class=\"sp3-knob\">\n              <div class=\"sp3-knob-indicator\"><\/div>\n            <\/div>\n            <input id=\"sp3-volume-range\" type=\"range\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.8\">\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<audio id=\"sp3-audio\"><\/audio>\n\n<style>\n  .sp3-radio {\n    max-width: 1120px;\n    width: 100%;\n    margin: 2.5rem auto;\n  }\n\n  .sp3-shell {\n    display: flex;\n    gap: 1.8rem;\n    padding: 1.6rem 2rem 1.8rem;\n    border-radius: 20px;\n    background: #f5f3ee;\n    box-shadow:\n      0 12px 30px rgba(0,0,0,0.18),\n      0 0 0 1px rgba(0,0,0,0.04);\n  }\n\n  .sp3-left {\n    flex: 0 0 28%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .sp3-right {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    gap: 0.9rem;\n  }\n\n  \/* Speaker *\/\n  .sp3-speaker {\n    width: 170px;\n    height: 170px;\n    border-radius: 18px;\n    background: linear-gradient(145deg, #c8aa88, #a28464);\n    box-shadow:\n      0 8px 20px rgba(0,0,0,0.28),\n      0 0 0 1px rgba(0,0,0,0.3);\n    padding: 10px;\n  }\n\n  .sp3-speaker-grill {\n    width: 100%;\n    height: 100%;\n    border-radius: 14px;\n    background-color: #2c2320;\n    background-image: radial-gradient(circle, rgba(0,0,0,0.8) 1px, transparent 1px);\n    background-size: 4px 4px;\n    box-shadow:\n      0 1px 0 rgba(255,255,255,0.12) inset,\n      0 -1px 0 rgba(0,0,0,0.7) inset;\n  }\n\n  \/* Header *\/\n  .sp3-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: 0.75rem;\n  }\n\n  .sp3-header-left {\n    display: flex;\n    flex-direction: column;\n    gap: 0.2rem;\n  }\n\n  .sp3-brand {\n    font-size: 0.95rem;\n    letter-spacing: 0.15em;\n    text-transform: uppercase;\n  }\n\n  .sp3-plate {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0.15rem 0.6rem;\n    border-radius: 999px;\n    font-size: 0.7rem;\n    letter-spacing: 0.12em;\n    text-transform: uppercase;\n    background: linear-gradient(135deg, #e3ddcf, #c7beaf);\n    color: #4b3d2a;\n    box-shadow:\n      0 1px 0 rgba(255,255,255,0.85) inset,\n      0 -1px 0 rgba(0,0,0,0.18) inset,\n      0 2px 4px rgba(0,0,0,0.22);\n  }\n\n  .sp3-header-right {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n  }\n\n  .sp3-mode {\n    font-size: 0.7rem;\n    letter-spacing: 0.16em;\n    text-transform: uppercase;\n    opacity: 0.7;\n  }\n\n  \/* Display *\/\n  .sp3-display {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n    gap: 0.5rem;\n    padding: 0.3rem 0.65rem;\n    border-radius: 8px;\n    background: #f8f5ef;\n    box-shadow:\n      0 1px 0 rgba(255,255,255,0.75) inset,\n      0 -1px 0 rgba(0,0,0,0.12) inset;\n  }\n\n  .sp3-title {\n    font-size: 0.98rem;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    max-width: 70%;\n  }\n\n  .sp3-time {\n    font-size: 0.8rem;\n    opacity: 0.7;\n    white-space: nowrap;\n  }\n\n  \/* Dial row *\/\n  .sp3-dial-row {\n    display: flex;\n    align-items: stretch;\n    gap: 0.8rem;\n  }\n\n  .sp3-dial {\n    flex: 1;\n    border-radius: 10px;\n    padding: 0.55rem 0.75rem;\n    background: #e9e3d7;\n    box-shadow:\n      0 1px 0 rgba(255,255,255,0.7) inset,\n      0 -1px 0 rgba(0,0,0,0.18) inset;\n    display: flex;\n    flex-direction: column;\n    gap: 0.45rem;\n  }\n\n  .sp3-scale {\n    display: flex;\n    justify-content: space-between;\n    font-size: 0.65rem;\n    letter-spacing: 0.18em;\n    text-transform: uppercase;\n    opacity: 0.7;\n  }\n\n  .sp3-scale span {\n    position: relative;\n  }\n\n  .sp3-scale span::before {\n    content: \"\";\n    position: absolute;\n    top: -6px;\n    left: 50%;\n    width: 1px;\n    height: 5px;\n    background: rgba(40,40,40,0.55);\n    transform: translateX(-50%);\n  }\n\n  .sp3-progress {\n    width: 100%;\n    height: 4px;\n    border-radius: 999px;\n    background: rgba(90,80,70,0.18);\n    cursor: pointer;\n    overflow: hidden;\n    position: relative;\n  }\n\n  #sp3-progress-fill {\n    width: 0;\n    height: 100%;\n    background: linear-gradient(90deg, #5b4a3a, #9c8a74);\n    transform-origin: left;\n    transition: width 0.06s linear;\n  }\n\n  .sp3-tuning-wrap {\n    width: 18px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .sp3-tuning-bar {\n    width: 5px;\n    height: 42px;\n    border-radius: 999px;\n    background: linear-gradient(180deg, #6a5245, #3a2820);\n    box-shadow:\n      0 0 0 1px rgba(0,0,0,0.8),\n      0 1px 0 rgba(255,255,255,0.25) inset;\n    opacity: 0.45;\n    transition: background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;\n  }\n\n  .sp3-tuning-bar.is-on {\n    background: linear-gradient(180deg, #ffe0c8, #f78645);\n    box-shadow:\n      0 0 10px rgba(248, 133, 75, 0.9),\n      0 0 0 1px rgba(0,0,0,0.85),\n      0 1px 0 rgba(255,255,255,0.4) inset;\n    opacity: 1;\n  }\n\n  \/* Controls + volume *\/\n  .sp3-controls-row {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 1.2rem;\n    margin-top: 0.4rem;\n  }\n\n  .sp3-controls {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.6rem;\n  }\n\n  .sp3-btn {\n    border: none;\n    cursor: pointer;\n    border-radius: 999px;\n    padding: 0.45rem 0.9rem;\n    font-size: 0.9rem;\n    line-height: 1;\n    transition: transform 0.08s ease, box-shadow 0.12s ease, background 0.12s ease, opacity 0.12s ease;\n  }\n\n  .sp3-btn-main {\n    padding-inline: 1.4rem;\n    background: linear-gradient(145deg, #d2c6b3, #b1a390);\n    color: #2b241a;\n    box-shadow:\n      0 5px 12px rgba(0,0,0,0.25),\n      0 0 0 1px rgba(0,0,0,0.18);\n  }\n\n  .sp3-btn-secondary {\n    background: linear-gradient(145deg, #c4b7a3, #a59682);\n    color: #2b241a;\n    box-shadow:\n      0 3px 8px rgba(0,0,0,0.2),\n      0 0 0 1px rgba(0,0,0,0.15);\n  }\n\n  .sp3-btn:hover {\n    transform: translateY(-1px);\n  }\n\n  .sp3-btn:active {\n    transform: translateY(0);\n    box-shadow: none;\n    opacity: 0.9;\n  }\n\n  \/* Volume knob *\/\n  .sp3-volume {\n    display: flex;\n    align-items: center;\n    gap: 0.55rem;\n  }\n\n  .sp3-volume-label {\n    font-size: 0.7rem;\n    letter-spacing: 0.14em;\n    text-transform: uppercase;\n    opacity: 0.7;\n  }\n\n  .sp3-knob-wrap {\n    position: relative;\n    width: 32px;\n    height: 32px;\n  }\n\n  .sp3-knob {\n    position: absolute;\n    inset: 0;\n    border-radius: 50%;\n    background:\n      radial-gradient(circle at 30% 20%, rgba(255,255,255,0.85), transparent 55%),\n      radial-gradient(circle, #e0d5c4 0%, #b9a893 65%, #8a7863 100%);\n    box-shadow:\n      0 3px 6px rgba(0,0,0,0.35),\n      0 0 0 1px rgba(0,0,0,0.5);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .sp3-knob-indicator {\n    width: 2px;\n    height: 40%;\n    border-radius: 999px;\n    background: rgba(60,45,35,0.9);\n    transform-origin: bottom center;\n    transform: rotate(-45deg);\n  }\n\n  #sp3-volume-range {\n    position: absolute;\n    inset: 0;\n    opacity: 0;\n    cursor: pointer;\n  }\n\n  \/* MOBILE LAYOUT \u2013 B: speaker on top, everything under it *\/\n  @media (max-width: 900px) {\n    .sp3-shell {\n      flex-direction: column;\n      align-items: stretch;\n      padding: 1.3rem 1.4rem 1.5rem;\n      gap: 1.2rem;\n    }\n\n    .sp3-left {\n      order: 1;\n      justify-content: center;\n    }\n\n    .sp3-speaker {\n      width: 150px;\n      height: 150px;\n      margin: 0 auto 0.6rem;\n    }\n\n    .sp3-right {\n      order: 2;\n    }\n\n    .sp3-header {\n      flex-direction: column;\n      align-items: center;\n      text-align: center;\n      gap: 0.4rem;\n    }\n\n    .sp3-header-right {\n      justify-content: center;\n    }\n\n    .sp3-display {\n      flex-direction: column;\n      align-items: center;\n      text-align: center;\n      gap: 0.25rem;\n    }\n\n    .sp3-title {\n      max-width: 100%;\n    }\n\n    .sp3-dial-row {\n      flex-direction: row;\n      align-items: center;\n    }\n\n    .sp3-controls-row {\n      flex-direction: column;\n      align-items: center;\n      gap: 0.8rem;\n    }\n\n    .sp3-controls {\n      justify-content: center;\n    }\n\n    .sp3-volume {\n      justify-content: center;\n    }\n  }\n\n  @media (max-width: 540px) {\n    .sp3-radio {\n      margin: 1.5rem 1rem;\n    }\n\n    .sp3-shell {\n      padding: 1.1rem 1.1rem 1.3rem;\n    }\n\n    .sp3-brand {\n      font-size: 0.85rem;\n      letter-spacing: 0.12em;\n    }\n\n    .sp3-plate {\n      font-size: 0.65rem;\n      letter-spacing: 0.11em;\n    }\n\n    .sp3-title {\n      font-size: 0.9rem;\n    }\n\n    .sp3-time {\n      font-size: 0.76rem;\n    }\n\n    .sp3-btn {\n      font-size: 0.85rem;\n      padding: 0.4rem 0.8rem;\n    }\n\n    .sp3-btn-main {\n      padding-inline: 1.1rem;\n    }\n\n    .sp3-speaker {\n      width: 140px;\n      height: 140px;\n    }\n.sp3-btn, .sp3-btn:active, .sp3-btn:focus {\n     -webkit-tap-highlight-color: transparent !important;\n     outline: none !important;\n     box-shadow: none !important;\n   }\n\n   @media (max-width: 900px) {\n     .sp3-btn-main {\n       background: linear-gradient(145deg, #d2c6b3, #b1a390) !important;\n       color: #2b241a !important;\n     }\n\n     .sp3-btn-secondary {\n       background: linear-gradient(145deg, #c4b7a3, #a59682) !important;\n       color: #2b241a !important;\n     }\n   }\n\n   .sp3-btn {\n     -webkit-appearance: none !important;\n     appearance: none !important;\n     border: none !important;\n   }\n  }\n<\/style>\n\n<script>\n  \/\/ Replace URLs with your real audio file URLs\n  const sp3Tracks = [\n    {\n      title: \"Mist\",\n      url: \"http:\/\/sevenpinecones.com\/wp-content\/uploads\/2025\/11\/7Ps-Mist-1.3-Dominykas-studio.mp3\"\n    },\n    {\n      title: \"First Breath\",\n      url: \"https:\/\/yourdomain.com\/wp-content\/uploads\/2025\/01\/first-breath.mp3\"\n    },\n    {\n      title: \"Body Echo\",\n      url: \"https:\/\/yourdomain.com\/wp-content\/uploads\/2025\/01\/body-echo.mp3\"\n    },\n    {\n      title: \"Drift\",\n      url: \"https:\/\/yourdomain.com\/wp-content\/uploads\/2025\/01\/drift.mp3\"\n    },\n    {\n      title: \"Remembering\",\n      url: \"https:\/\/yourdomain.com\/wp-content\/uploads\/2025\/01\/remembering.mp3\"\n    },\n    {\n      title: \"Pulse\",\n      url: \"https:\/\/yourdomain.com\/wp-content\/uploads\/2025\/01\/pulse.mp3\"\n    },\n    {\n      title: \"Return\",\n      url: \"https:\/\/yourdomain.com\/wp-content\/uploads\/2025\/01\/return.mp3\"\n    }\n  ];\n\n  const sp3Audio = document.getElementById(\"sp3-audio\");\n  const sp3TitleEl = document.getElementById(\"sp3-track-title\");\n  const sp3PosEl = document.getElementById(\"sp3-track-position\");\n  const sp3PlayBtn = document.getElementById(\"sp3-play\");\n  const sp3PrevBtn = document.getElementById(\"sp3-prev\");\n  const sp3NextBtn = document.getElementById(\"sp3-next\");\n  const sp3ProgressBar = document.getElementById(\"sp3-progress-bar\");\n  const sp3ProgressFill = document.getElementById(\"sp3-progress-fill\");\n  const sp3TuningBar = document.querySelector(\".sp3-tuning-bar\");\n  const sp3VolumeRange = document.getElementById(\"sp3-volume-range\");\n  const sp3KnobIndicator = document.querySelector(\".sp3-knob-indicator\");\n\n  let sp3CurrentIndex = 0;\n  let sp3PreviousIndex = null; \/\/ for \"Prev\" history in shuffle\n  let sp3IsPlaying = false;\n\n  const sp3MinAngle = -135;\n  const sp3MaxAngle = 135;\n\n  function sp3UpdateKnob(angle) {\n    if (sp3KnobIndicator) {\n      sp3KnobIndicator.style.transform = `rotate(${angle}deg)`;\n    }\n  }\n\n  function sp3VolumeFromRange(value) {\n    return parseFloat(value); \/\/ 0\u20131\n  }\n\n  function sp3AngleFromVolume(vol) {\n    return sp3MinAngle + (sp3MaxAngle - sp3MinAngle) * vol;\n  }\n\n  function sp3LoadTrack(index) {\n    const track = sp3Tracks[index];\n    if (!track) return;\n    sp3Audio.src = track.url;\n    sp3TitleEl.textContent = track.title;\n    sp3ProgressFill.style.width = \"0%\";\n  }\n\n  function sp3FormatTime(sec) {\n    if (isNaN(sec)) return \"0:00\";\n    const m = Math.floor(sec \/ 60);\n    const s = Math.floor(sec % 60).toString().padStart(2, \"0\");\n    return `${m}:${s}`;\n  }\n\n  function sp3PlayPause() {\n    if (!sp3Audio.src) sp3LoadTrack(sp3CurrentIndex);\n\n    if (sp3IsPlaying) {\n      sp3Audio.pause();\n    } else {\n      sp3Audio.play();\n    }\n  }\n\n  function sp3GetRandomNextIndex(excludeIndex) {\n    if (sp3Tracks.length <= 1) return excludeIndex;\n    let idx;\n    do {\n      idx = Math.floor(Math.random() * sp3Tracks.length);\n    } while (idx === excludeIndex);\n    return idx;\n  }\n\n  function sp3PlayRandomNext() {\n    sp3PreviousIndex = sp3CurrentIndex;\n    sp3CurrentIndex = sp3GetRandomNextIndex(sp3CurrentIndex);\n    sp3LoadTrack(sp3CurrentIndex);\n    sp3Audio.play();\n  }\n\n  \/\/ Events\n  sp3Audio.addEventListener(\"play\", () => {\n    sp3IsPlaying = true;\n    sp3PlayBtn.textContent = \"\u23f8\";\n    if (sp3TuningBar) sp3TuningBar.classList.add(\"is-on\");\n  });\n\n  sp3Audio.addEventListener(\"pause\", () => {\n    sp3IsPlaying = false;\n    sp3PlayBtn.textContent = \"\u25b6\";\n    if (sp3TuningBar) sp3TuningBar.classList.remove(\"is-on\");\n  });\n\n  sp3Audio.addEventListener(\"timeupdate\", () => {\n    const current = sp3Audio.currentTime || 0;\n    const dur = sp3Audio.duration || 0;\n    sp3PosEl.textContent = `${sp3FormatTime(current)} \/ ${sp3FormatTime(dur)}`;\n\n    if (dur > 0) {\n      const pct = (current \/ dur) * 100;\n      sp3ProgressFill.style.width = `${pct}%`;\n    }\n  });\n\n  sp3Audio.addEventListener(\"ended\", () => {\n    sp3PlayRandomNext();\n  });\n\n  sp3PlayBtn.addEventListener(\"click\", sp3PlayPause);\n\n  sp3PrevBtn.addEventListener(\"click\", () => {\n    if (sp3PreviousIndex === null) {\n      sp3Audio.currentTime = 0;\n      sp3Audio.play();\n      return;\n    }\n    const temp = sp3CurrentIndex;\n    sp3CurrentIndex = sp3PreviousIndex;\n    sp3PreviousIndex = temp;\n    sp3LoadTrack(sp3CurrentIndex);\n    sp3Audio.play();\n  });\n\n  sp3NextBtn.addEventListener(\"click\", () => {\n    sp3PlayRandomNext();\n  });\n\n  sp3ProgressBar.addEventListener(\"click\", (e) => {\n    const rect = sp3ProgressBar.getBoundingClientRect();\n    const clickX = e.clientX - rect.left;\n    const pct = clickX \/ rect.width;\n    if (sp3Audio.duration) {\n      sp3Audio.currentTime = pct * sp3Audio.duration;\n    }\n  });\n\n  \/\/ Volume control\n  if (sp3VolumeRange) {\n    const initialVol = parseFloat(sp3VolumeRange.value) || 0.8;\n    sp3Audio.volume = initialVol;\n    sp3UpdateKnob(sp3AngleFromVolume(initialVol));\n\n    sp3VolumeRange.addEventListener(\"input\", (e) => {\n      const vol = sp3VolumeFromRange(e.target.value);\n      sp3Audio.volume = vol;\n      sp3UpdateKnob(sp3AngleFromVolume(vol));\n    });\n  }\n\n  \/\/ Initial\n  sp3LoadTrack(sp3CurrentIndex);\n<\/script>\n\n\n\n<\/div><\/div>\n<\/section>","protected":false},"excerpt":{"rendered":"<p>Radio Seven Pinecones Session Radio FM \u00b7 Live cuts Loading\u2026 0:00 \/ 0:00 60708090100110 \u2190 \u25b6 \u2192 Shuffle Volume Seven Pinecones Session Radio FM \u00b7 Live cuts Loading\u2026 0:00 \/ 0:00 60708090100110 \u2190 \u25b6 \u2192 Volume<\/p>","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_breakdance_hide_in_design_set":false,"_breakdance_tags":"","footnotes":""},"class_list":["post-320","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/sevenpinecones.com\/lt\/wp-json\/wp\/v2\/pages\/320","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sevenpinecones.com\/lt\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sevenpinecones.com\/lt\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sevenpinecones.com\/lt\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sevenpinecones.com\/lt\/wp-json\/wp\/v2\/comments?post=320"}],"version-history":[{"count":29,"href":"https:\/\/sevenpinecones.com\/lt\/wp-json\/wp\/v2\/pages\/320\/revisions"}],"predecessor-version":[{"id":364,"href":"https:\/\/sevenpinecones.com\/lt\/wp-json\/wp\/v2\/pages\/320\/revisions\/364"}],"wp:attachment":[{"href":"https:\/\/sevenpinecones.com\/lt\/wp-json\/wp\/v2\/media?parent=320"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}