*{box-sizing:border-box;margin:0;padding:0;}
  :root{
    --bg:#0c0d0f; --panel:#17181b; --line:#2a2c31; --text:#d6d8dc; --dim:#6e7178;
    --amber:#ff9f1c; --green:#2ecc71; --red:#ff3b30; --cyan:#35d0ba;
  }
  body{background:radial-gradient(1200px 800px at 50% -10%,#22242a 0%,var(--bg) 60%,#08090a 100%);min-height:100vh;
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--text);padding:48px 20px 80px;}
  .wrap{max-width:1180px;margin:0 auto;}
  h1{font-size:34px;font-weight:900;letter-spacing:2px;color:#fff;margin-bottom:6px;}
  h1 span{color:var(--amber);}
  .sub{font-size:13px;color:var(--dim);margin-bottom:34px;}
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin-bottom:44px;}
  .card{background:linear-gradient(165deg,#1e1f23,#151619 60%);border:1px solid var(--line);border-radius:14px;padding:18px;position:relative;
    transition:transform .15s, border-color .15s, box-shadow .15s;display:flex;flex-direction:column;gap:8px;}
  .card:hover{transform:translateY(-3px);border-color:#4a4d55;box-shadow:0 12px 28px rgba(0,0,0,.5);}
  .card .icon{font-size:30px;}
  .card h3{font-size:15px;font-weight:800;letter-spacing:1px;color:#fff;}
  .card h3 small{display:block;font-size:9px;color:var(--dim);letter-spacing:2px;text-transform:uppercase;font-weight:600;margin-top:2px;}
  .card p{font-size:11px;color:var(--dim);line-height:1.55;flex:1;}
  .card .open{display:inline-block;margin-top:8px;background:linear-gradient(180deg,#ffb347,#e08a00);color:#241500;border-radius:8px;
    padding:8px 14px;font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;text-decoration:none;text-align:center;}
  .card .open:hover{filter:brightness(1.12);}
  .card .tag{position:absolute;top:14px;right:14px;font-size:8px;letter-spacing:1px;padding:3px 7px;border-radius:20px;font-weight:700;text-transform:uppercase;}
  .tag.sound{background:rgba(53,208,186,.15);color:var(--cyan);}
  .tag.mix{background:rgba(255,159,28,.15);color:var(--amber);}
  .tag.live{background:rgba(255,59,48,.15);color:var(--red);}
  .tag.control{background:rgba(46,204,113,.15);color:var(--green);}
  h2{font-size:16px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#fff;margin:26px 0 12px;}
  .note{background:#151619;border:1px solid var(--line);border-radius:12px;padding:16px;font-size:12px;color:var(--dim);line-height:1.7;}
  .note b{color:var(--text);}
  .note code{background:#0e0f11;border:1px solid #2a2c31;border-radius:4px;padding:1px 6px;font-size:11px;color:var(--cyan);}
  ol{margin:8px 0 8px 18px;}
  li{margin-bottom:4px;}
  .flow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px;}
  .flow .box{background:#1e1f23;border:1px solid #3a3c42;border-radius:8px;padding:8px 12px;font-size:11px;color:var(--text);}
  .flow .arrow{color:var(--amber);font-size:14px;}