/* REFERENCE: index.html; public sound preview styles. */
  :root{
    --bg:#0c0f0e; --bg2:#11161300; --panel:#141a17; --panel2:#171f1a;
    --ink:#eef3ea; --muted:#9fb39a; --line:#2a352c;
    --green:#8fbd79; --green-soft:rgba(143,189,121,.12);
    --tan:#c9ad73; --tan-soft:rgba(201,173,115,.12);
    --warn:#e7b54e; --warn-soft:rgba(231,181,78,.13);
    --radius:16px; --tap:48px;
    --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
    --sans:ui-rounded,"Segoe UI",Roboto,"Helvetica Neue",Arial,system-ui,sans-serif;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    background:
      radial-gradient(1200px 600px at 50% -10%, #18211b 0%, transparent 60%),
      radial-gradient(900px 500px at 90% 110%, #161d18 0%, transparent 55%),
      var(--bg);
    color:var(--ink); font-family:var(--sans);
    -webkit-text-size-adjust:100%; line-height:1.5;
    min-height:100dvh; padding:env(safe-area-inset-top) 0 calc(28px + env(safe-area-inset-bottom));
  }
  .wrap{max-width:560px;margin:0 auto;padding:22px 16px 0}
  header{text-align:center;margin-bottom:18px}
  .crest{
    display:inline-block;font-family:var(--serif);font-size:13px;letter-spacing:.32em;
    text-transform:uppercase;color:var(--tan);border:1px solid var(--line);
    border-radius:999px;padding:6px 16px;background:var(--panel)
  }
  h1{font-family:var(--serif);font-weight:600;font-size:30px;line-height:1.15;margin:14px 0 6px;
     letter-spacing:.01em}
  .sub{color:var(--muted);font-size:15px;margin:0 auto;max-width:42ch}
  .global-note{
    margin:16px 0 4px;font-size:13px;color:var(--muted);text-align:center;
    border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);padding:10px 6px
  }
  section{margin-top:22px}
  .zone-head{display:flex;align-items:baseline;gap:10px;margin:0 2px 10px}
  .zone-head h2{font-family:var(--serif);font-size:20px;margin:0;font-weight:600}
  .zone-head .tag{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
  .zone{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
  .zone--free{background:var(--green-soft)}
  .zone--paid{background:var(--tan-soft)}
  .zone--free .zone-head h2{color:var(--green)}
  .zone--paid .zone-head h2{color:var(--tan)}

  .warnbox{
    margin:0;padding:14px 16px;background:var(--warn-soft);
    border-bottom:1px solid var(--line);color:#f4e6c4;font-size:15px
  }
  .warnbox b{color:var(--warn)}

  ul.rows{list-style:none;margin:0;padding:0}
  li.row{display:flex;gap:14px;align-items:flex-start;padding:16px;border-top:1px solid var(--line)}
  li.row:first-child{border-top:0}
  .play{
    flex:0 0 auto;width:var(--tap);height:var(--tap);border-radius:50%;
    border:1px solid var(--line);background:var(--panel2);color:var(--ink);
    font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;
    transition:transform .12s ease, border-color .12s ease, background .12s ease
  }
  .play:hover{border-color:var(--green)}
  .play:active{transform:scale(.94)}
  .play[data-state="playing"]{background:var(--green);color:#0c0f0e;border-color:var(--green)}
  .play[data-state="loading"]{color:var(--muted)}
  .play[data-state="error"]{border-color:var(--warn);color:var(--warn)}
  .play[data-state="loading"] .ico{animation:spin 1s linear infinite;display:inline-block}
  .body{flex:1 1 auto;min-width:0}
  .name{font-weight:650;font-size:17px;margin:2px 0 2px}
  .price{font-size:14px;color:var(--ink);font-weight:600}
  .zone--free .price{color:var(--green)}
  .zone--paid .price{color:var(--tan)}
  .how{font-size:14px;color:var(--muted);margin:7px 0 0}
  .how code{
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    background:#0e1311;border:1px solid var(--line);border-radius:6px;padding:2px 7px;
    color:var(--ink);font-size:14px;white-space:normal;overflow-wrap:anywhere
  }
  .copy{
    margin-top:9px;max-width:100%;overflow-wrap:anywhere;min-height:var(--tap);display:inline-flex;align-items:center;gap:8px;
    padding:0 16px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);
    color:var(--ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer
  }
  .copy:hover{border-color:var(--tan)}
  .copy:active{transform:scale(.98)}
  .copy.ok{border-color:var(--green);color:var(--green)}
  .caption{font-size:12.5px;color:var(--muted);margin:9px 0 0}
  .caption .free-pill{color:var(--green);font-weight:600}

  .state{padding:34px 18px;text-align:center;color:var(--muted)}
  .state h2{font-family:var(--serif);color:var(--ink);font-size:20px;margin:0 0 6px}
  .skel{height:78px;border-top:1px solid var(--line);
    background:linear-gradient(100deg,#141a17 30%,#1b231d 50%,#141a17 70%);
    background-size:300% 100%;animation:shimmer 1.3s linear infinite}
  .skel:first-child{border-top:0}
  footer{margin:26px 2px 0;text-align:center;color:var(--muted);font-size:12.5px;line-height:1.7}
  footer a{color:var(--tan)}

  :focus-visible{outline:3px solid var(--tan);outline-offset:3px;border-radius:8px}
  .toast{
    position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));
    transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;
    background:#0e1311;border:1px solid var(--green);color:var(--ink);
    padding:11px 18px;border-radius:999px;font-size:14px;font-weight:600;
    transition:opacity .2s ease, transform .2s ease;z-index:50;max-width:90vw
  }
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}
  @keyframes spin{to{transform:rotate(360deg)}}
  @keyframes shimmer{to{background-position:-300% 0}}
  @media (prefers-reduced-motion:reduce){
    *{animation-duration:.001ms !important;animation-iteration-count:1 !important;
      transition-duration:.001ms !important}
    .skel{background:#161d18}
  }