/* Ramapani skin pack: palettes and shapes of POCKET and FROG (see ramapani-skins.js) */
  body[data-skin="frog"] {
    --bg:radial-gradient(ellipse at 50% 18%, #e9f7d2, #a7d98a 45%, #5c9f5f 100%) fixed;
    --panel:#174a3f; --stripe:#174a3f; --edge:#2f7a5a; --ink:#eaf7e0; --dim:#a3cdb4;
    --lcd:#0f2a12; --on:#b6ff7a; --off:#22401a; --key:#3c8a3a; --keyedge:#1f5a24; --keyink:#f4ffe8; --keydown:#2e6e2c;
    --led:#ffe14a; --ledoff:#24502a; --fader:#e8f5d0; --door:#5a0f1a; --dooredge:#3a0810; --knob:#3c8a3a; --knobcap:#56b03e;
    --vis1:#b6ff7a; --vis2:#ffe14a; --vis3:#ff6a8a; --cheek:none; --radius:22px;
  }
  body[data-skin="pocket"] {
    --bg:radial-gradient(#ffffff26 1.5px, transparent 1.7px) 0 0/22px 22px, linear-gradient(160deg,#63cbc2,#3a8fa8 60%,#2f6f8f) fixed;
    --panel:#28313b; --stripe:#28313b; --edge:#4a5868; --ink:#e7edf3; --dim:#9fb0c0;
    --lcd:#c3cd98; --on:#1d2416; --off:#aeb986; --key:#d5dde5; --keyedge:#8794a1; --keyink:#1b2430; --keydown:#b9c3cd;
    --led:#ff7a1a; --ledoff:#5a6470; --fader:#e7edf3; --door:#14181d; --dooredge:#6b7682; --knob:#9fb3c7; --knobcap:#d5dde5;
    --vis1:#1d2416; --vis2:#56662a; --vis3:#b0381a; --cheek:none; --radius:16px;
  }

  /* ---------- FROG ---------- */
  .fam-frog .door { padding:16px 30px 54px; background:radial-gradient(ellipse at 50% 30%, #8a1a2c, #4a0a16 70%);
      border:9px solid #2a6e26; border-radius:80px 80px 50% 50% / 64px 64px 46% 46%;
      box-shadow:inset 0 12px 26px #000b, 0 0 0 4px #1f5220; }
  .fam-frog .dooropen small { color:#f6c9d2; }
  .fam-frog .bigbtn { border-radius:999px; background:#3c8a3a; border-color:#1f5a24; }
  .fam-frog .vol { background:linear-gradient(#ff9fb1,#e3627d); border-radius:16px 16px 60px 60px / 16px 16px 30px 30px;
      padding:3px 14px 6px; color:#7a1f2b; box-shadow:inset 0 -5px 0 #c24a66, 0 3px 6px #0006; }
  .fam-frog .vol .vtrack::before { background:#a8324e; box-shadow:none; }
  .fam-frog .vol .vtrack::after { background:repeating-linear-gradient(90deg,#7a1f2b 0 1px,transparent 1px 10%); opacity:.45; }
  .fam-frog .vol .vcap { background:#fff2f4; border-color:#7a1f2b; border-radius:7px; }
  .fam-frog .vol .vval { color:#7a1f2b; }
  .fam-frog .lcd { border-radius:20px; border:4px solid #24582a; box-shadow:0 4px 0 #1f4d1c; padding:8px 14px; }
  .fam-frog .lcd .time { font-size:28px; } .fam-frog .lcd .bot { font-size:11px; }
  .fam-frog .map { border-radius:6px; border:2px solid #24582a; margin-top:6px; height:12px; }
  .fam-frog .nr small { color:#1f4d1c; font-weight:700; text-align:center; margin-bottom:6px; }
  .fam-frog .nr .chips { flex-direction:column; flex-wrap:nowrap; gap:6px; }
  .fam-frog .nr .chip { border-radius:999px; justify-content:center; padding:5px 8px; font-size:11px;
      box-shadow:0 3px 0 #1f5a24; }
  .fam-frog .meta { background:#fffdf3; border:3px solid #1f4d1c; border-radius:24px; padding:10px 14px; color:#1b3a14;
      position:relative; box-shadow:0 5px 0 #1f4d1c55; }
  .fam-frog .meta::after { content:""; position:absolute; left:-18px; bottom:14px; width:26px; height:22px; background:#fffdf3;
      border-left:3px solid #1f4d1c; border-bottom:3px solid #1f4d1c; transform:skewY(-28deg); border-radius:0 0 0 6px; }
  .fam-frog .meta .t { font:700 15px "Segoe Print", "Comic Sans MS", cursive; }
  .fam-frog .meta .d { color:#3f6b33; }
  .fam-frog .keys { display:flex; justify-content:space-around; margin:0; gap:0; }
  .fam-frog .key { background:none; padding:0; border-radius:50%; }
  .fam-frog .key span { width:108px; height:80px; border-radius:50%; gap:2px;
      background:radial-gradient(ellipse at 45% 38%, #8be071, #46a53c 58%, #2c7029); border:3px solid #1f5a24;
      -webkit-mask:conic-gradient(from 28deg at 50% 50%, transparent 0 34deg, #000 34deg); mask:conic-gradient(from 28deg at 50% 50%, transparent 0 34deg, #000 34deg);
      color:#0f2e0c; font-size:11px; }
  .fam-frog .key svg { fill:#0f2e0c; width:24px; height:18px; }
  .fam-frog .key:hover span { filter:brightness(1.08); }
  .fam-frog .key.down span { transform:translateY(5px) scale(.94); background:radial-gradient(ellipse at 45% 38%, #6ccf5a, #2f8a2c 60%, #1f5a20); }
  .fam-frog .tab { border-radius:50% 50% 46% 46% / 62% 62% 38% 38%; background:radial-gradient(circle at 40% 35%, #8be071, #3f9a3a);
      border:2px solid #1f5a24; color:#0f2a0c; padding:8px 18px; }
  .pond { background:radial-gradient(ellipse at 30% 0%, #2a7268, #123c3a 70%); border:4px solid #2f7a5a; border-radius:30px;
      padding:14px 18px 16px; box-shadow:0 10px 30px #0005, inset 0 0 40px #0006; }
  #fgEyeL, #fgEyeR { cursor:pointer; }
  #fgCheekL, #fgCheekR { transform-box:fill-box; transform-origin:center; }

  /* ---------- POCKET (a personal stereo of the 80s) ---------- */
  .pk-body { position:absolute; z-index:2; border-radius:30px; border:2px solid #586b80;
      background:linear-gradient(180deg,#ffffff6a,#ffffff00 16%,#ffffff00 80%,#00000022),
                 repeating-linear-gradient(90deg,#a7b8ca 0 1px,#b3c3d4 1px 2px,#a3b5c8 2px 4px);
      box-shadow:inset 0 2px 0 #fff9, inset 0 -3px 0 #0003, 0 18px 34px #0007; }
  .pk-body::after { content:"AUTO REVERSE \00B7 NOISE REDUCTION \00B7 7 BAND EQ"; position:absolute; left:0; right:0; bottom:0; height:30px;
      background:#1d2836; border-radius:0 0 28px 28px; color:#9fb0c0; font:700 9px "Segoe UI", system-ui, sans-serif;
      letter-spacing:.24em; display:flex; align-items:center; padding-left:34px; }
  .pk-body i { position:absolute; width:9px; height:9px; border-radius:50%; background:#8094a8; box-shadow:inset 0 0 0 1px #0006; }
  .pk-logo { color:#1d2836; line-height:1; }
  .pk-logo b { display:block; font:italic 900 34px "Segoe UI", system-ui, sans-serif; letter-spacing:-.02em; }
  .pk-logo b em { color:#ff7a1a; font-style:inherit; }
  .pk-logo small { display:block; font-size:9px; font-weight:700; letter-spacing:.2em; margin-top:3px; color:#33445a; }
  .pk-led { position:absolute; z-index:4; width:9px; height:9px; border-radius:50%; background:#6a2a1a; box-shadow:inset 0 0 0 1px #0007; }
  .pk-led.on { background:#ff4a2a; box-shadow:0 0 8px #ff4a2a, inset 0 0 0 1px #0004; }
  .pk-plug { position:absolute; z-index:4; width:14px; height:24px; border-radius:3px 3px 1px 1px;
      background:linear-gradient(90deg,#3a3f46,#8a929c 45%,#3a3f46); box-shadow:0 2px 2px #0006; }
  .pk-tag { position:absolute; z-index:4; font:700 8px "Segoe UI", system-ui, sans-serif; letter-spacing:.18em; color:#33445a; }
  .fam-pocket .door { background:#161a20; border:3px solid #5d6b7a; border-radius:14px; padding:10px;
      box-shadow:inset 0 0 0 2px #000, 0 2px 0 #fff6; }
  .fam-pocket .door::after { content:""; position:absolute; inset:10px; border-radius:6px; pointer-events:none;
      background:linear-gradient(118deg,#ffffff30 0 17%,#ffffff00 17% 30%,#ffffff14 30% 35%,#ffffff00 35%); }
  .fam-pocket .loadpanel { color:#c3cd98; } .fam-pocket .loadpanel .bar i { background:#c3cd98; }
  .fam-pocket .lcd { border:2px solid #4a5868; border-radius:6px; padding:5px 8px; box-shadow:inset 0 2px 5px #0005; }
  .fam-pocket .lcd .top { font-size:11px; } .fam-pocket .lcd .mid { margin:3px 0; }
  .fam-pocket .lcd .sidebox { width:24px; height:28px; font-size:16px; }
  .fam-pocket .lcd .time { font-size:26px; }
  .fam-pocket .lcd .bot { font-size:9px; } .fam-pocket #len { display:none; }
  .fam-pocket .map { margin-top:6px; height:9px; border-radius:2px; }
  .fam-pocket .nr small { color:#1d2836; font-weight:700; }
  .fam-pocket .nr .chips { flex-wrap:wrap; gap:4px; }
  .fam-pocket .nr .chip { flex:1 0 30%; justify-content:center; padding:4px 0; font-size:9px; border-radius:10px; box-shadow:0 2px 0 #5d6b7a; }
  .fam-pocket .meta { color:#1d2836; } .fam-pocket .meta .t { font-size:15px; } .fam-pocket .meta .d { color:#33445a; }
  .fam-pocket .vol { color:#1d2836; }
  .fam-pocket .vol .vtrack::before { height:16px; top:5px; border-radius:8px; box-shadow:inset 0 2px 3px #000a;
      background:repeating-linear-gradient(90deg,#2a323c 0 2px,#7f8c99 2px 4px); }
  .fam-pocket .vol .vtrack::after { display:none; }
  .fam-pocket .vol .vcap { width:6px; margin-left:-3px; top:3px; height:20px; background:#ff7a1a; border:0; border-radius:3px; }
  .fam-pocket .vol .vcap::after { display:none; }
  .fam-pocket .vol .vval { color:#1d2836; }
  .fam-pocket .keys { margin:0; gap:6px; }
  .fam-pocket .key { background:none; padding:0; border-radius:7px 7px 0 0; }
  .fam-pocket .key span { height:58px; justify-content:flex-start; padding-top:7px; gap:2px; border-radius:7px 7px 0 0;
      background:linear-gradient(90deg,#00000018,#0000 20%,#0000 80%,#00000022),linear-gradient(#f4f7fa,#bcc7d2); border-color:#7d8a98;
      font-size:9px; transition:transform .06s; }
  .fam-pocket #kPlay span { background:linear-gradient(90deg,#00000018,#0000 20%,#0000 80%,#00000022),linear-gradient(#ffa24a,#e2661a); color:#fff; }
  .fam-pocket #kPlay svg { fill:#fff; }
  .fam-pocket .key.down span { transform:translateY(12px); }
  .fam-pocket .key .ab { font-size:11px; }
  .fam-pocket .tab { background:#3a4350; color:#e7edf3; border-color:#56606e; }
  .case { position:relative; border-radius:20px; padding:18px 22px 20px; border:1px solid #11161c;
      background:radial-gradient(#ffffff08 1px, transparent 1.2px) 0 0/5px 5px, linear-gradient(#2c343e,#20262e);
      box-shadow:0 12px 30px #0006; outline:2px dashed #c4975a99; outline-offset:-9px; }
  #pkFoamL, #pkFoamR { transform-box:fill-box; transform-origin:center; }