/* Shared sheet music presentation, matching Deep in the Forest. */
    .product-grid {
      display: grid;
      grid-template-columns: minmax(330px, 430px) minmax(0, 1fr);
      gap: 18px;
      align-items: start;
    }

    .preview-card,
    .info-card {
      background: white;
      border: 1px solid #dbe4f0;
      border-radius: 18px;
      box-shadow: 0 8px 22px rgba(15,23,42,.06);
    }

    .preview-card {
      padding: 14px;
    }

    .cover-preview {
      width: 100%;
      height: 610px;
      border: 1px solid #dbe4f0;
      border-radius: 13px;
      background: white;
    }

    .info-card {
      padding: 22px;
    }

    .breadcrumb {
      font-size: 10px;
      color: #94a3b8;
      font-weight: 600;
      margin-bottom: 14px;
    }

    .info-card h2 {
      font-size: 30px;
      color: #1e3a8a;
      margin: 0;
      line-height: 1.2;
    }

    .subtitle {
      font-size: 14px;
      color: #64748b;
      margin-top: 5px;
      margin-bottom: 18px;
    }

    .tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 18px;
    }

    .tag {
      background: #dbeafe;
      color: #1d4ed8;
      border-radius: 999px;
      padding: 6px 10px;
      font-size: 10px;
      font-weight: 700;
    }

    .details-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 18px;
    }

    .detail-box {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px;
    }

    .detail-box span {
      display: block;
      color: #94a3b8;
      font-size: 9px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .7px;
      margin-bottom: 3px;
    }

    .detail-box strong {
      color: #334155;
      font-size: 12px;
    }

    .description {
      background: #eff6ff;
      border: 1px solid #dbeafe;
      border-radius: 13px;

      padding: 14px;

      color: #475569;
      line-height: 1.7;
      font-size: 13px;

      margin-bottom: 16px;
    }

    .buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
    }

    .button {
      display: inline-flex;
      align-items: center;
      gap: 7px;

      padding: 10px 14px;

      background: linear-gradient(135deg, #1d4ed8, #2563eb);
      color: white;

      text-decoration: none;
      border-radius: 999px;

      font-size: 11px;
      font-weight: 700;

      transition: .2s;
    }

    .button:hover {
      transform: translateY(-2px);
      box-shadow: 0 7px 16px rgba(37,99,235,.16);
    }

    /* =========================
       VIDEO
    ========================= */

    .video-section {
      margin-top: 18px;
    }

    .video-card {
      background: white;
      padding: 18px;
      border-radius: 18px;
      border: 1px solid #dbe4f0;
      box-shadow: 0 8px 22px rgba(15,23,42,.06);
    }

    .video-card h2 {
      color: #1e3a8a;
      font-size: 20px;
      margin: 0 0 14px;
    }

    .video {
      width: 100%;
      height: 440px;
      border: none;
      border-radius: 13px;
    }

    /* =========================
       RIGHT PANEL
    ========================= */

    .right-panel {
      padding: 26px 15px 40px;
      background: rgba(248,250,252,.74);
      border-left: 1px solid #dbe4f0;
    }

    .right-card {
      background: white;
      border: 1px solid #dbe4f0;
      border-radius: 16px;
      padding: 16px;
      margin-bottom: 13px;
      box-shadow: 0 7px 20px rgba(15,23,42,.05);
    }

    .grade-badge {
      width: 56px;
      height: 56px;

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

      background: linear-gradient(135deg, #dbeafe, #93c5fd);
      color: #1e3a8a;

      border-radius: 16px;

      font-size: 25px;
      font-weight: 700;

      margin-bottom: 10px;
    }

    .right-card h3 {
      margin: 0 0 9px;
      font-size: 15px;
    }

    .right-card p {
      margin: 0;
      color: #64748b;
      font-size: 11px;
      line-height: 1.65;
    }

    .quick-links {
      display: grid;
      gap: 10px;
    }

    .quick-link {
      display: flex;
      align-items: center;
      justify-content: space-between;

      padding-bottom: 9px;

      border-bottom: 1px solid #edf1f6;

      color: #2563eb;
      text-decoration: none;

      font-size: 11px;
      font-weight: 600;
    }

    .quick-link:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }

    .quick-left {
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .quick-left i {
      width: 24px;
      height: 24px;

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

      background: #eff6ff;
      border-radius: 7px;

      font-size: 9px;
    }

    /* =========================
       FOOTER
    ========================= */

    footer {
      grid-column: 1 / -1;
      text-align: center;
      padding: 24px;
      background: #111827;
      color: white;
      font-size: 12px;
    }

    /* =========================
       RESPONSIVE
    ========================= */

    @media (max-width: 1200px) {
      .dashboard {
        grid-template-columns: 220px minmax(0, 1fr);
      }

      .right-panel {
        grid-column: 2;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        border-left: none;
        border-top: 1px solid #dbe4f0;
      }

      .right-card {
        margin-bottom: 0;
      }
    }

    @media (max-width: 950px) {
      .product-grid {
        grid-template-columns: 1fr;
      }

      .preview-card {
        max-width: 560px;
      }
    }

    @media (max-width: 860px) {
      .dashboard {
        display: block;
      }

      .sidebar {
        position: relative;
        height: auto;
        border-right: none;
        border-bottom: 1px solid #dbe4f0;
      }

      .main {
        padding: 18px 14px 35px;
      }

      .right-panel {
        display: grid;
        grid-template-columns: 1fr;
        padding: 14px;
      }
    }

    @media (max-width: 560px) {
      .details-grid {
        grid-template-columns: 1fr;
      }

      .cover-preview {
        height: 500px;
      }

      .video {
        height: 260px;
      }

      .hero h1 {
        font-size: 29px;
      }
    }
  </style>
  <link rel="icon" type="image/png" href="/favicon.png">
  <link rel="stylesheet" href="/assets/cozy.css?v=action-motion-22">
<link rel="stylesheet" href="/assets/family-accounts.css?v=birthday-profile-23">
<script type="module" src="/assets/birthday-site.js?v=child-game-45"></script>
<script defer src="/assets/ui-controls.js?v=1"></script>
<link rel="stylesheet" href="/assets/discovery.css?v=3">
  <link rel="stylesheet" href="/assets/sheet-music.css?v=1">
</head>

<body class="cozy-ui">

<div class="dashboard">

  <!-- SIDEBAR -->

  <aside class="sidebar">

    <div class="brand">

      <div class="brand-icon">
        <i class="fa-solid fa-music" aria-hidden="true"></i>
      </div>

      <div class="brand-text">
        <strong>OpenScores Hub</strong>
        <span>SCORE</span>
      </div>

    </div>

    <div class="sidebar-label">Main</div>

    <div class="side-menu">

      <a href="/index.html" class="side-link">
        <i class="fa-solid fa-house" aria-hidden="true"></i>
        Home
      </a>

      <a href="/about.html" class="side-link">
        <i class="fa-solid fa-circle-info" aria-hidden="true"></i>
        About
      </a>

      <a href="/activities.html" class="side-link">
        <i class="fa-solid fa-shapes" aria-hidden="true"></i>
        Activities
      </a>

      <a href="/elementary/music-classroom.html" class="side-link">
        <i class="fa-solid fa-chalkboard-user" aria-hidden="true"></i>
        Music Classroom
      </a>

      <a href="/learning-resources.html" class="side-link">
        <i class="fa-solid fa-book-bookmark" aria-hidden="true"></i>
        Learning Resources
      </a>

      <a href="/support.html" class="side-link">
        <i class="fa-solid fa-hand-holding-heart" aria-hidden="true"></i>
        OpenScores Outreach
      </a>

      <a href="/portfolio.html" class="side-link active" aria-current="location">
        <i class="fa-solid fa-book-open" aria-hidden="true"></i>
        Music Library
      </a>

    </div>

    <div class="sidebar-bottom">

      <div class="library-box">

        <strong>Music Library</strong>

        <p>
          Explore more original music from OpenScores Hub.
        </p>

        <a href="/portfolio.html">
          Return to Library →
        </a>

      </div>

    </div>

  </aside>


  <!-- MAIN CONTENT -->

  <main class="main">

    <header class="hero">
      <span class="ui-header-detail" aria-hidden="true"><i class="fa-solid fa-music" aria-hidden="true"></i></span>

      <div class="hero-label">
        <i class="fa-solid fa-music" aria-hidden="true"></i>
        CONCERT BAND
      </div>

      <h1>Deep in the Forest</h1>

      <p>Grade 1 • Digital Score + Parts</p>

    </header>


    <section class="product-grid">

      <div class="card preview-card">

        <iframe
          class="cover-preview"
          src="music/forest.pdf">
        </iframe>

      </div>


      <div class="card info-card">

        <div class="breadcrumb">
          Home › Music Library › Deep in the Forest
        </div>

        <h2>Deep in the Forest</h2>

        <div class="subtitle">
          Beginner Concert Band Piece
        </div>

        <div class="tags">

          <span class="tag">
            Grade 1
          </span>

          <span class="tag">
            Concert Band
          </span>
          <span class="tag">Score + Parts</span>

        </div>


        <div class="details-grid">

          <div class="detail-box">
            <span>Format</span>
            <strong>Digital Score + Parts</strong>
          </div>

          <div class="detail-box">
            <span>Level</span>
            <strong>Grade 1</strong>
          </div>

          <div class="detail-box">
            <span>Instrumentation</span>
            <strong>Concert Band</strong>
          </div>

          <div class="detail-box">
            <span>Created</span>
            <strong>April 23, 2026</strong>
          </div>

        </div>


        <div class="description">
          Deep in the Forest is a concert band written for young musicians. Inspired by
          the calmness of nature. 
          Using simple rhythms and expressive melodies to help
           ensembles build confidence while creating a peaceful forest
          atmosphere.
        </div>


        <div class="buttons">

          <a class="button" href="/music/forest.pdf" download>
            <i class="fa-solid fa-download" aria-hidden="true"></i>
            Download Score
          </a>

          <a
            class="button secondary"
            href="https://drive.google.com/drive/folders/1b2U6qQgr7wWGb7ucszuBvcmTkr8a4A6U"
            target="_blank">
            <i class="fa-solid fa-folder-open" aria-hidden="true"></i>
            All Parts
          </a>

        </div>

      </div>

    </section>


    <!-- VIDEO -->

    <section class="video-section">

      <div class="card video-card">

        <h2>Listen / Watch</h2>

        <iframe
          class="video"
          src="https://www.youtube.com/embed/QF2HNfk5Kts"
          allowfullscreen>
        </iframe>

      </div>

    </section>

  </main>


  <!-- RIGHT PANEL -->

  <aside class="right-panel">

    <div class="right-card">

      <div class="grade-badge">
        1
      </div>

      <h3>Grade 1</h3>

      <p>
        Beginner Concert Band Piece
      </p>

    </div>


    <div class="right-card">

      <h3>Quick Links</h3>

      <div class="quick-links">

        <a href="/music/forest.pdf" class="quick-link" download>

          <span class="quick-left">
            <i class="fa-solid fa-download" aria-hidden="true"></i>
            Download Score
          </span>

          →

        </a>


        <a
          href="https://drive.google.com/drive/folders/1b2U6qQgr7wWGb7ucszuBvcmTkr8a4A6U"
          target="_blank"
          class="quick-link">

          <span class="quick-left">
            <i class="fa-solid fa-folder-open" aria-hidden="true"></i>
            All Parts
          </span>

          →

        </a>


        <a href="/portfolio.html" class="quick-link">

          <span class="quick-left">
            <i class="fa-solid fa-book-open" aria-hidden="true"></i>
            Music Library
          </span>

          →

        </a>

      </div>

    </div>

  </aside>


  

</div>


<script defer src="/assets/anime.umd.min.js"></script>
<script defer src="/assets/site-motion.js?v=smooth-entry-2"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2.117.2/dist/umd/supabase.js"></script>
<script defer src="/assets/public-account.js"></script>
<script type="module" src="/assets/discovery.js?v=3"></script>
</body>
</html
.cozy-ui .product-grid .info-card {padding:22px}
.cozy-ui .product-grid .info-card h2 {font-size:30px;color:#1e3a8a;margin:0;line-height:1.2}
.cozy-ui .product-grid .description {background:#eff6ff;border:1px solid #dbeafe;border-radius:13px;padding:14px;color:#475569;line-height:1.7;font-size:13px;margin:0 0 16px}
@media(max-width:860px){.product-grid{grid-template-columns:1fr}.cover-preview{height:520px}.video{height:360px}}
@media(max-width:560px){.details-grid{grid-template-columns:1fr}.cover-preview{height:460px}.video{height:260px}}

/* Keep the score preview compact on wide screens. */
@media(min-width:861px){.cozy-ui .main .product-grid{grid-template-columns:minmax(0,430px) minmax(0,1fr)}.cozy-ui .main .product-grid>.preview-card{width:100%;max-width:430px;min-width:0}}
.cozy-ui .main .product-grid .cover-preview{height:610px;max-width:100%;display:block}
@media(max-width:860px){.cozy-ui .main .product-grid{grid-template-columns:minmax(0,1fr)}.cozy-ui .main .product-grid .cover-preview{height:520px}}
@media(max-width:560px){.cozy-ui .main .product-grid .cover-preview{height:460px}}

/* Standard recording size and ratio at every screen width. */
.cozy-ui .main .video-section{width:100%;max-width:836px;margin:18px auto 0}
.cozy-ui .main .video-card{padding:18px;min-width:0}
.cozy-ui .main .video-card .video{display:block;width:100%;height:auto;aspect-ratio:16 / 9;border:0;border-radius:13px;background:#000}