:root{
      --panel:#1A1A1A;
      --text:#E6E6E6;
      --muted:#888888;
    }   

    .wrap{max-width:1200px;margin:0 auto;}
    .prow{display:flex;gap:14px;align-items:stretch;}
    .panel{
      background:var(--panel);
      border-radius:14px;
      padding:10px;
      flex:1;
      box-shadow:0 0 0 1px rgba(255,255,255,0.06) inset;
      position:relative;
      aspect-ratio: 1;
    }   
    canvas{width:100%;height:100%;display:block;border-radius:10px;}
    .controls{margin-top:12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
    #btnPlay {
      background:#222;color:var(--text);
      border:1px solid rgba(255,255,255,0.12);
      border-radius:10px;padding:10px 12px;cursor:pointer;
      line-height: 1.5em !important;
      height: auto;
    }   
    #btnPlay:hover{background:#2a2a2a;}
    input[type="range"]{flex:1;}
    .title{
      position:absolute;top:10px;left:14px;
      font-size:14px;color:var(--muted);
      user-select:none;pointer-events:none;
    }   
    @media (max-width: 760px){
      .prow{flex-direction:column;}
      .panel{}
      input[type="range"]{min-width:180px;}
    }   
    @media (max-width: 420px){
      .panel{}
      .wrap{padding:10px 10px 14px;}
    }